[Chore]: Technical: Translate index and other files

src/reducers/vis-state-updaters.ts

@@ -59,7 +59,8 @@ import {createNewDataEntry} from 'utils/dataset-utils';
 import {
   pinTableColumns,
   sortDatasetByColumn,
-  copyTableAndUpdate
+  copyTableAndUpdate,
+  Field
 } from 'utils/table-utils/kepler-table';
 import {set, toArray, arrayInsert, generateHashId} from 'utils/utils';
 
@@ -100,7 +101,7 @@ import * as VisStateActions from 'actions/vis-state-actions';
 import * as MapStateActions from 'actions/map-state-actions';
 import ActionTypes from 'constants/action-types';
 import {LoaderObject} from '@loaders.gl/loader-utils';
-import {KeplerTable, Field} from 'utils';
+import {KeplerTable} from 'utils';
 
 export type HistogramBin = {
   x0: number | undefined;

src/utils/index.js → src/utils/index.ts

@@ -53,3 +53,12 @@ export {
   copyTableAndUpdate
 } from './table-utils/kepler-table';
 export {createDataContainer, createIndexedDataContainer} from './table-utils/data-container-utils';
+
+export * from './color-utils';
+export * from './data-scale-utils';
+export * from './data-utils';
+export * from './dataset-utils';
+export * from './gpu-filter-utils';
+export * from './interaction-utils';
+export * from './layer-utils';
+export * from './observe-dimensions';

src/utils/interaction-utils.js → src/utils/interaction-utils.ts

@@ -33,13 +33,17 @@ import {
 import {Messages, Crosshairs, CursorClick, Pin} from 'components/common/icons/index';
 import {TOOLTIP_FORMATS, TOOLTIP_KEY, COMPARE_TYPES} from 'constants/tooltip';
 
-// \u2212 is the minus sign that d3-format uses for decimal number formatting
-export const TOOLTIP_MINUS_SIGN = '\u2212';
+import {InteractionConfig, TooltipField, CompareType} from '../reducers/vis-state-updaters';
+import {DataRow} from './table-utils/data-row';
+import {Field} from './table-utils/kepler-table';
 
 /**
- * @type {typeof import('./interaction-utils').getDefaultInteraction}
+ * Minus sign used in tooltip formatting.
+ * \u2212 is the minus sign that d3-format uses for decimal number formatting
  */
-export function getDefaultInteraction() {
+export const TOOLTIP_MINUS_SIGN = '\u2212';
+
+export function getDefaultInteraction(): InteractionConfig {
   return {
     tooltip: {
       id: 'tooltip',
@@ -79,14 +83,23 @@ export function getDefaultInteraction() {
   };
 }
 
-export const BRUSH_CONFIG = {
+export const BRUSH_CONFIG: {
+  range: [number, number];
+} = {
   range: [0, 50]
 };
 
-/**
- * @type {typeof import('./interaction-utils').findFieldsToShow}
- */
-export function findFieldsToShow({fields, id, maxDefaultTooltips}) {
+export function findFieldsToShow({
+  fields,
+  id,
+  maxDefaultTooltips
+}: {
+  fields: Field[];
+  id: string;
+  maxDefaultTooltips: number;
+}): {
+  [key: string]: string[];
+} {
   // first find default tooltip fields for trips
   const fieldsToShow = DEFAULT_TOOLTIP_FIELDS.reduce((prev, curr) => {
     if (fields.find(({name}) => curr.name === name)) {
@@ -137,8 +150,15 @@ export function getTooltipDisplayDeltaValue({
   data,
   fieldIdx,
   item
-}) {
-  let displayDeltaValue = null;
+}: {
+  item: TooltipField;
+  field: Field;
+  data: DataRow;
+  fieldIdx: number;
+  primaryData: DataRow;
+  compareType: CompareType;
+}): string | null {
+  let displayDeltaValue: string | null = null;
 
   if (
     primaryData &&
@@ -170,10 +190,17 @@ export function getTooltipDisplayDeltaValue({
   return displayDeltaValue;
 }
 
-/**
- * @type {typeof import('./interaction-utils').getTooltipDisplayValue}
- */
-export function getTooltipDisplayValue({item, field, data, fieldIdx}) {
+export function getTooltipDisplayValue({
+  item,
+  field,
+  data,
+  fieldIdx
+}: {
+  item: TooltipField;
+  field: Field;
+  data: DataRow;
+  fieldIdx: number;
+}): string {
   const dataValue = data.valueAt(fieldIdx);
   if (!notNullorUndefined(dataValue)) {
     return '';

src/utils/layer-utils.js → src/utils/layer-utils.ts

@@ -20,32 +20,52 @@
 
 import {OVERLAY_TYPE} from 'layers/base-layer';
 import {GEOCODER_LAYER_ID} from 'constants/default-settings';
+import {Layer, LayerClassesType} from 'layers';
+import {VisState, TooltipField, CompareType, SplitMapLayers} from 'reducers/vis-state-updaters';
+import KeplerTable, {Field} from './table-utils/kepler-table';
+
+export type LayersToRender = {
+  [layerId: string]: boolean;
+};
+
+export type LayerHoverProp = {
+  data: any[];
+  fields: Field[];
+  fieldsToShow: TooltipField[];
+  layer: Layer;
+  primaryData?: any[];
+  compareType?: CompareType;
+};
 
 /**
  * Find default layers from fields
- * @type {typeof import('./layer-utils').findDefaultLayer}
  */
-export function findDefaultLayer(dataset, layerClasses) {
+export function findDefaultLayer(dataset: KeplerTable, layerClasses: LayerClassesType): Layer[] {
   if (!dataset) {
     return [];
   }
-  const layerProps = Object.keys(layerClasses).reduce((previous, lc) => {
-    const result =
-      typeof layerClasses[lc].findDefaultLayerProps === 'function'
-        ? layerClasses[lc].findDefaultLayerProps(dataset, previous)
-        : {props: []};
-
-    const props = Array.isArray(result) ? result : result.props || [];
-    const foundLayers = result.foundLayers || previous;
-
-    return foundLayers.concat(
-      props.map(p => ({
-        ...p,
-        type: lc,
-        dataId: dataset.id
-      }))
-    );
-  }, []);
+  const layerProps = (Object.keys(layerClasses) as Array<keyof LayerClassesType>).reduce(
+    (previous, lc) => {
+      const result =
+        // @ts-expect-error
+        typeof layerClasses[lc].findDefaultLayerProps === 'function'
+          ? // @ts-expect-error
+            layerClasses[lc].findDefaultLayerProps(dataset, previous)
+          : {props: []};
+
+      const props = Array.isArray(result) ? result : result.props || [];
+      const foundLayers = result.foundLayers || previous;
+
+      return foundLayers.concat(
+        props.map(p => ({
+          ...p,
+          type: lc,
+          dataId: dataset.id
+        }))
+      );
+    },
+    [] as LayerClassesType[keyof LayerClassesType][]
+  );
 
   // go through all layerProps to create layer
   return layerProps.map(props => {
@@ -59,9 +79,15 @@ export function findDefaultLayer(dataset, layerClasses) {
 /**
  * calculate layer data based on layer type, col Config,
  * return updated layer if colorDomain, dataMap has changed
- * @type {typeof import('./layer-utils').calculateLayerData}
  */
-export function calculateLayerData(layer, state, oldLayerData) {
+export function calculateLayerData(
+  layer: Layer,
+  state: VisState,
+  oldLayerData?: any
+): {
+  layerData: any;
+  layer: Layer;
+} {
   const {type} = layer;
 
   if (!type || !layer.hasAllColumns() || !layer.config.dataId) {
@@ -82,7 +108,13 @@ export function getLayerHoverProp({
   layers,
   layersToRender,
   datasets
-}) {
+}: {
+  interactionConfig: VisState['interactionConfig'];
+  hoverInfo: VisState['hoverInfo'];
+  layers: VisState['layers'];
+  layersToRender: LayersToRender;
+  datasets: VisState['datasets'];
+}): LayerHoverProp | null {
   if (interactionConfig.tooltip.enabled && hoverInfo && hoverInfo.picked) {
     // if anything hovered
     const {object, layer: overlay} = hoverInfo;
@@ -114,7 +146,7 @@ export function getLayerHoverProp({
   return null;
 }
 
-export function renderDeckGlLayer(props, layerCallbacks, idx) {
+export function renderDeckGlLayer(props: any, layerCallbacks: {[key: string]: any}, idx: number) {
   const {
     datasets,
     layers,
@@ -160,11 +192,17 @@ export function isLayerVisible(layer, mapLayers) {
 // Prepare a dict of layers rendered by the deck.gl
 // Note, isVisible: false layer is passed to deck.gl here
 // return {[id]: true \ false}
-export function prepareLayersForDeck(layers, layerData) {
+export function prepareLayersForDeck(
+  layers: Layer[],
+  layerData: VisState['layerData']
+): {
+  [key: string]: boolean;
+} {
   return layers.reduce(
     (accu, layer, idx) => ({
       ...accu,
       [layer.id]:
+        // @ts-expect-error
         isLayerRenderable(layer, layerData[idx]) && layer.overlayType === OVERLAY_TYPE.deckgl
     }),
     {}
@@ -174,7 +212,13 @@ export function prepareLayersForDeck(layers, layerData) {
 // Prepare a dict of rendered layers rendered in the map
 // This includes only the visibile layers for single map view and split map view
 // return {[id]: true \ false}
-export function prepareLayersToRender(layers, layerData, mapLayers) {
+export function prepareLayersToRender(
+  layers: Layer[],
+  layerData: VisState['layerData'],
+  mapLayers?: SplitMapLayers
+): {
+  [key: string]: boolean;
+} {
   return layers.reduce(
     (accu, layer, idx) => ({
       ...accu,