feat: convert dataset to table class

docs/RFC/table-class.md

@@ -47,7 +47,7 @@ export type KeplerField = {
   id: string;
   name: string;
   format: string;
-  tableFieldIndex: numberstring;
+  fieldIdx: number;
   type: string;
 
   // meta data, storing domain and mappedValues

src/actions/actions.d.ts

@@ -29,9 +29,9 @@ import {UiState} from 'reducers/ui-state-updaters';
  * Input dataest parsed to addDataToMap
  */
 export type ProtoDataset = {
-  info?: {
-    id: string;
-    label: string;
+  info: {
+    id?: string;
+    label?: string;
     format?: string;
     color?: RGBColor;
   };

src/components/common/field-selector.js

@@ -73,7 +73,7 @@ const FieldType = PropTypes.oneOfType([
     format: PropTypes.string,
     id: PropTypes.string,
     name: PropTypes.string,
-    tableFieldIndex: PropTypes.number,
+    fieldIdx: PropTypes.number,
     type: PropTypes.number
   })
 ]);

src/components/common/item-selector/item-selector.js

@@ -313,9 +313,7 @@ class ItemSelector extends Component {
                     light={this.props.inputTheme === 'light'}
                   />
                 ) : (
-                  <FormattedMessage
-                    id={this.props.placeholder || 'placeholder.selectValue'}
-                  />
+                  <FormattedMessage id={this.props.placeholder || 'placeholder.selectValue'} />
                 )}
               </DropdownSelectValue>
               {this.props.erasable && hasValue ? (

src/components/common/range-slider.js

@@ -126,20 +126,14 @@ export default function RangeSliderFactory(RangePlot) {
     _setRangeVal1 = val => {
       const {value0, range, onChange} = this.props;
       const val1 = Number(val);
-      onChange([
-        value0,
-        clamp([value0, range[1]], this._roundValToStep(val1))
-      ]);
+      onChange([value0, clamp([value0, range[1]], this._roundValToStep(val1))]);
       return true;
     };
 
     _setRangeVal0 = val => {
       const {value1, range, onChange} = this.props;
       const val0 = Number(val);
-      onChange([
-        clamp([range[0], value1], this._roundValToStep(val0)),
-        value1
-      ]);
+      onChange([clamp([range[0], value1], this._roundValToStep(val0)), value1]);
       return true;
     };
 

src/components/common/slider/slider.js

@@ -26,7 +26,7 @@ import styled from 'styled-components';
 import SliderHandle from './slider-handle';
 import SliderBarHandle from './slider-bar-handle';
 import {normalizeSliderValue} from 'utils/data-utils';
-import { clamp } from 'utils/data-utils';
+import {clamp} from 'utils/data-utils';
 
 function noop() {}
 

src/components/map-container.js

@@ -36,7 +36,6 @@ import EditorFactory from './editor/editor';
 
 // utils
 import {generateMapboxLayers, updateMapboxLayers} from 'layers/mapbox-utils';
-import {OVERLAY_TYPE} from 'layers/base-layer';
 import {setLayerBlending} from 'utils/gl-utils';
 import {transformRequest} from 'utils/map-style-utils/mapbox-utils';
 import {getLayerHoverProp, renderDeckGlLayer} from 'utils/layer-utils';
@@ -48,6 +47,7 @@ import {
   GEOCODER_LAYER_ID,
   THROTTLE_NOTIFICATION_TIME
 } from 'constants/default-settings';
+import {OVERLAY_TYPE} from 'layers/base-layer';
 
 /** @type {{[key: string]: React.CSSProperties}} */
 const MAP_STYLE = {
@@ -484,7 +484,8 @@ export default function MapContainerFactory(MapPopover, MapControl, Editor) {
         visStateActions,
         interactionConfig,
         editor,
-        index
+        index,
+        isExport
       } = this.props;
 
       const layersToRender = this.layersToRenderSelector(this.props);
@@ -503,7 +504,8 @@ export default function MapContainerFactory(MapPopover, MapControl, Editor) {
         transformRequest
       };
 
-      const isEdit = mapControls.mapDraw ? mapControls.mapDraw.active : false;
+      const isEdit = (mapControls.mapDraw || {}).active;
+
       const hasGeocoderLayer = layers.find(l => l.id === GEOCODER_LAYER_ID);
 
       return (
@@ -512,7 +514,7 @@ export default function MapContainerFactory(MapPopover, MapControl, Editor) {
             datasets={datasets}
             dragRotate={mapState.dragRotate}
             isSplit={Boolean(mapLayers)}
-            isExport={this.props.isExport}
+            isExport={isExport}
             layers={layers}
             layersToRender={layersToRender}
             mapIndex={index}

src/layers/aggregation-layer.js

@@ -34,7 +34,7 @@ export const getValueAggrFunc = (field, aggregation) => {
   return points => {
     return field
       ? aggregate(
-          points.map(p => p.data[field.tableFieldIndex - 1]),
+          points.map(p => field.valueAccessor(p.data)),
           aggregation
         )
       : points.length;

src/layers/base-layer.js

@@ -48,22 +48,12 @@ import {
 
 import {generateHashId, isPlainObject} from 'utils/utils';
 
-import {
-  getSampleData,
-  getLatLngBounds,
-  maybeToDate,
-  getSortingFunction,
-  notNullorUndefined
-} from 'utils/data-utils';
+import {getSampleData, getLatLngBounds, notNullorUndefined} from 'utils/data-utils';
 
-import {
-  getQuantileDomain,
-  getOrdinalDomain,
-  getLogDomain,
-  getLinearDomain
-} from 'utils/data-scale-utils';
 import {hexToRgb, getColorGroupByName, reverseColorRange} from 'utils/color-utils';
 
+/** @typedef {import('./index').Layer} LayerClass} */
+
 /**
  * Approx. number of points to sample in a large data set
  * @type {number}
@@ -91,9 +81,10 @@ function* generateColor() {
 }
 
 export const colorMaker = generateColor();
-const defaultGetFieldValue = (field, d) => d[field.tableFieldIndex - 1];
+const defaultGetFieldValue = (field, d) => field.valueAccessor(d);
 
-export default class Layer {
+/** @type {LayerClass} */
+class Layer {
   constructor(props = {}) {
     this.id = props.id || generateHashId(6);
 
@@ -103,6 +94,7 @@ export default class Layer {
     // visConfigSettings
     this.visConfigSettings = {};
 
+    // @ts-ignore
     this.config = this.getDefaultLayerConfig({
       columns: this.getLayerColumns(),
       ...props
@@ -240,7 +232,7 @@ export default class Layer {
       prev[key] = requiredFields.length
         ? requiredFields.map(f => ({
             value: f.name,
-            fieldIdx: f.tableFieldIndex - 1
+            fieldIdx: f.fieldIdx
           }))
         : null;
       return prev;
@@ -259,7 +251,7 @@ export default class Layer {
     // combinations, e. g. if column a has 2 matched, column b has 3 matched
     // 6 possible column pairs will be returned
     const allKeys = Object.keys(requiredColumns);
-    const pointers = allKeys.map((k, i) => (i === allKeys.length - 1 ? -1 : 0));
+    const pointers = allKeys.map((k, i) => ((i === allKeys.length - 1 ? -1 : 0)));
     const countPerKey = allKeys.map(k => requiredColumns[k].length);
     const pairs = [];
 
@@ -357,7 +349,7 @@ export default class Layer {
     const update = field
       ? {
           value: field.name,
-          fieldIdx: field.tableFieldIndex - 1
+          fieldIdx: field.fieldIdx
         }
       : {value: null, fieldIdx: -1};
 
@@ -682,10 +674,10 @@ export default class Layer {
   hasAllColumns() {
     const {columns} = this.config;
     return (
-      columns &&
+      (columns &&
       Object.values(columns).every(v => {
         return Boolean(v.optional || (v.value && v.fieldIdx > -1));
-      })
+      }))
     );
   }
 
@@ -708,11 +700,11 @@ export default class Layer {
 
   shouldRenderLayer(data) {
     return (
-      this.type &&
+      (this.type &&
       this.config.isVisible &&
       this.hasAllColumns() &&
       this.hasLayerData(data) &&
-      typeof this.renderLayer === 'function'
+      typeof this.renderLayer === 'function')
     );
   }
 
@@ -869,6 +861,9 @@ export default class Layer {
   }
 
   updateData(datasets, oldLayerData) {
+    if (!this.config.dataId) {
+      return {};
+    }
     const layerDataset = datasets[this.config.dataId];
     const {allData} = datasets[this.config.dataId];
 
@@ -900,8 +895,8 @@ export default class Layer {
    * @returns {object} layer
    */
   updateLayerDomain(datasets, newFilter) {
-    const dataset = this.getDataset(datasets);
-    if (!dataset) {
+    const table = this.getDataset(datasets);
+    if (!table) {
       return this;
     }
     Object.values(this.visualChannels).forEach(channel => {
@@ -911,7 +906,7 @@ export default class Layer {
       // no need to update ordinal domain
       if (!newFilter || scaleType !== SCALE_TYPES.ordinal) {
         const {domain} = channel;
-        const updatedDomain = this.calculateLayerDomain(dataset, channel);
+        const updatedDomain = this.calculateLayerDomain(table, channel);
         this.updateLayerConfig({[domain]: updatedDomain});
       }
     });
@@ -920,7 +915,7 @@ export default class Layer {
   }
 
   getDataset(datasets) {
-    return datasets[this.config.dataId];
+    return this.config.dataId ? datasets[this.config.dataId] : null;
   }
 
   /**
@@ -1011,7 +1006,6 @@ export default class Layer {
   }
 
   calculateLayerDomain(dataset, visualChannel) {
-    const {allData, filteredIndexForDomain} = dataset;
     const {scale} = visualChannel;
     const scaleType = this.config[scale];
 
@@ -1021,38 +1015,7 @@ export default class Layer {
       return defaultDomain;
     }
 
-    if (!SCALE_TYPES[scaleType]) {
-      Console.error(`scale type ${scaleType} not supported`);
-      return defaultDomain;
-    }
-
-    // TODO: refactor to add valueAccessor to field
-    const fieldIdx = field.tableFieldIndex - 1;
-    const isTime = field.type === ALL_FIELD_TYPES.timestamp;
-    const valueAccessor = maybeToDate.bind(null, isTime, fieldIdx, field.format);
-    const indexValueAccessor = i => valueAccessor(allData[i]);
-
-    const sortFunction = getSortingFunction(field.type);
-
-    switch (scaleType) {
-      case SCALE_TYPES.ordinal:
-      case SCALE_TYPES.point:
-        // do not recalculate ordinal domain based on filtered data
-        // don't need to update ordinal domain every time
-        return getOrdinalDomain(allData, valueAccessor);
-
-      case SCALE_TYPES.quantile:
-        return getQuantileDomain(filteredIndexForDomain, indexValueAccessor, sortFunction);
-
-      case SCALE_TYPES.log:
-        return getLogDomain(filteredIndexForDomain, indexValueAccessor);
-
-      case SCALE_TYPES.quantize:
-      case SCALE_TYPES.linear:
-      case SCALE_TYPES.sqrt:
-      default:
-        return getLinearDomain(filteredIndexForDomain, indexValueAccessor);
-    }
+    return dataset.getColumnLayerDomain(field, scaleType) || defaultDomain;
   }
 
   hasHoveredObject(objectInfo) {
@@ -1074,6 +1037,7 @@ export default class Layer {
     const fixed = fixedRadius === undefined ? this.config.visConfig.fixedRadius : fixedRadius;
     const {radius} = this.config.visConfig;
 
+    // @ts-ignore
     return fixed ? 1 : (this.config[field] ? 1 : radius) * this.getZoomFactor(mapState);
   }
 
@@ -1180,3 +1144,5 @@ export default class Layer {
     return () => null;
   }
 }
+
+export default Layer;

src/layers/icon-layer/icon-layer.js

@@ -169,7 +169,7 @@ export default class IconLayer extends Layer {
         lng: ptPair.pair.lng,
         icon: {
           value: iconField.name,
-          fieldIdx: iconField.tableFieldIndex - 1
+          fieldIdx: iconField.fieldIdx
         }
       },
       isVisible: true

src/layers/index.d.ts

@@ -1,11 +1,6 @@
 import {RGBColor, RGBAColor} from '../reducers/types';
-import {Dataset, Field, Filter, Datasets} from '../reducers/vis-state-updaters';
-import {LayerTextLabel, ColorRange, ColorUI} from './layer-factory';
-
-export type LayerVisConfig = {
-  opacity: number;
-  colorRange: ColorRange;
-};
+import {Field, Datasets, KeplerTable} from '../reducers/vis-state-updaters';
+import {LayerTextLabel, ColorRange, ColorUI, LayerVisConfig} from './layer-factory';
 
 export type LayerColumns = {
   [key: string]: {value: string | null; fieldIdx: number; optional?: boolean};
@@ -80,16 +75,16 @@ export class Layer {
   hasAllColumns(): boolean;
   updateLayerConfig(p: Partial<LayerConfig>): Layer;
   updateLayerDomain(datasets: Datasets, filter?: Filter): Layer;
-  updateLayerVisualChannel(dataset: Dataset, channel: string): Layer;
+  updateLayerVisualChannel(dataset: KeplerTable, channel: string): Layer;
   shouldCalculateLayerData(props: string[]): boolean;
   formatLayerData(datasets: Datasets, oldLayerData?: any);
   updateLayerColorUI(prop: string, newConfig: Partial<ColorUI>): Layer;
-  validateVisualChannel(channel: string): void;
   isValidToSave(): boolean;
-  getVisualChannelDescription(key: string): VisualChannelDescription;
-  isLayerHovered(objectInfo: any): boolean;
-  hasHoveredObject(objectInfo: any): any | null;
-  getHoverData(object: any, allData?: Dataset['allData'], fields?: Dataset['fields']): any;
+  validateVisualChannel(channel: string);
+  getVisualChannelDescription(key: string): {label: string, measure: string};
+
+  static findDefaultLayerProps(dataset: KeplerTable, foundLayers?: any[]);
+  // static findDefaultColumnField(defaultFields, allFields)
 }
 
 export type LayerClassesType = {
@@ -108,3 +103,5 @@ export type LayerClassesType = {
   s2: Layer;
 };
 export const LayerClasses: LayerClassesType;
+
+export type OVERLAY_TYPE = {[key: string]: string}

src/layers/index.js

@@ -34,7 +34,7 @@ import {default as S2GeometryLayer} from './s2-geometry-layer/s2-geometry-layer'
 import {LAYER_TYPES} from './types';
 
 // base layer
-export {default as Layer} from './base-layer';
+export {default as Layer, OVERLAY_TYPE, colorMaker} from './base-layer';
 
 // individual layers
 export const KeplerGlLayers = {

src/layers/layer-text-label.js

@@ -53,7 +53,7 @@ export function getTextOffsetByRadius(radiusScale, getRadius, mapState) {
 }
 
 export const textLabelAccessor = textLabel => d => {
-  const val = d.data[textLabel.field.tableFieldIndex - 1];
+  const val = textLabel.field.valueAccessor(d.data);
   return notNullorUndefined(val) ? String(val) : '';
 };