@carto/kepler.gl 0.0.1-alpha.map-libre

package/src/layers/base-layer.js

@@ -0,0 +1,1439 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import {console as Console} from 'global/window';
+import keymirror from 'keymirror';
+import {CollisionFilterExtension, DataFilterExtension} from '@deck.gl/extensions';
+import {COORDINATE_SYSTEM, Layer as DeckLayer} from '@deck.gl/core';
+import {_PointLabelLayer as PointLabelLayer} from '@deck.gl/carto';
+import DefaultLayerIcon from './default-layer-icon';
+import {diffUpdateTriggers} from './layer-update';
+
+import {
+  ALL_FIELD_TYPES,
+  NO_VALUE_COLOR,
+  SCALE_TYPES,
+  CHANNEL_SCALES,
+  FIELD_OPTS,
+  SCALE_FUNC,
+  CHANNEL_SCALE_SUPPORTED_FIELDS,
+  MAX_GPU_FILTERS,
+  UNKNOWN_COLOR,
+  ZOOM_LEVEL_LIMITS
+} from 'constants/default-settings';
+import {COLOR_RANGES} from 'constants/color-ranges';
+import {DataVizColors} from 'constants/custom-color-ranges';
+import {
+  LAYER_VIS_CONFIGS,
+  DEFAULT_TEXT_LABEL,
+  DEFAULT_COLOR_UI,
+  DEFAULT_HIGHLIGHT_COLOR,
+  DEFAULT_LAYER_LABEL
+} from './layer-factory';
+
+import {generateHashId, isPlainObject} from 'utils/utils';
+
+import {getLatLngBounds, notNullorUndefined} from 'utils/data-utils';
+import {getSampleData} from 'utils/table-utils/data-container-utils';
+
+import {hexToRgb, getColorGroupByName, reverseColorRange} from 'utils/color-utils';
+import {getMaskExtensionProps} from 'utils/layer-utils';
+import {scaleOrdinal} from 'd3-scale';
+
+/** @typedef {import('./index').Layer} LayerClass} */
+
+/**
+ * Approx. number of points to sample in a large data set
+ * @type {number}
+ */
+export const LAYER_ID_LENGTH = 6;
+
+// Note, this is is SVG of solid circle encoded as data-uri
+const FALLBACK_ICON =
+  'data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNTAiLz4NCjwvc3ZnPg==';
+
+const MAX_SAMPLE_SIZE = 5000;
+const defaultDomain = [0, 1];
+const dataFilterExtension = new DataFilterExtension({filterSize: MAX_GPU_FILTERS});
+const collisionFilterExtension = new CollisionFilterExtension();
+
+const defaultDataAccessor = dc => d => d;
+const defaultGetFieldValue = (field, d) => field.valueAccessor(d);
+const scaleIdentity = v => v;
+
+export const OVERLAY_TYPE = keymirror({
+  deckgl: null,
+  mapboxgl: null
+});
+
+export const layerColors = Object.values(DataVizColors).map(hexToRgb);
+function* generateColor() {
+  let index = 0;
+  while (index < layerColors.length + 1) {
+    if (index === layerColors.length) {
+      index = 0;
+    }
+    yield layerColors[index++];
+  }
+}
+
+export const colorMaker = generateColor();
+
+/** @type {LayerClass} */
+class Layer {
+  constructor(props = {}) {
+    this.id = props.id || generateHashId(LAYER_ID_LENGTH);
+
+    // meta
+    this.meta = {};
+
+    // visConfigSettings
+    this.visConfigSettings = {};
+
+    // interactivitySettings
+    this._interactivitySettings = {};
+
+    // @ts-ignore
+    this.config = this.getDefaultLayerConfig({
+      columns: this.getLayerColumns(),
+      ...props
+    });
+  }
+
+  get layerIcon() {
+    return DefaultLayerIcon;
+  }
+
+  get overlayType() {
+    return OVERLAY_TYPE.deckgl;
+  }
+
+  get type() {
+    return null;
+  }
+
+  get name() {
+    return this.type;
+  }
+
+  get isAggregated() {
+    return false;
+  }
+
+  get requiredLayerColumns() {
+    return [];
+  }
+
+  get optionalColumns() {
+    return [];
+  }
+
+  get noneLayerDataAffectingProps() {
+    return ['label', 'opacity', 'thickness', 'isVisible', 'hidden'];
+  }
+
+  get visualChannels() {
+    return {
+      color: {
+        property: 'color',
+        field: 'colorField',
+        scale: 'colorScale',
+        domain: 'colorDomain',
+        range: 'colorRange',
+        key: 'color',
+        channelScaleType: CHANNEL_SCALES.color,
+        nullValue: NO_VALUE_COLOR,
+        defaultValue: config => config.color
+      },
+      size: {
+        property: 'size',
+        field: 'sizeField',
+        scale: 'sizeScale',
+        domain: 'sizeDomain',
+        range: 'sizeRange',
+        key: 'size',
+        channelScaleType: CHANNEL_SCALES.size,
+        nullValue: 0,
+        defaultValue: 1
+      }
+    };
+  }
+
+  /*
+   * Column pairs maps layer column to a specific field pairs,
+   * By default, it is set to null
+   */
+  get columnPairs() {
+    return null;
+  }
+
+  /*
+   * Default point column pairs, can be used for point based layers: point, icon etc.
+   */
+  get defaultPointColumnPairs() {
+    return {
+      lat: {pair: 'lng', fieldPairKey: 'lat'},
+      lng: {pair: 'lat', fieldPairKey: 'lng'}
+    };
+  }
+
+  /*
+   * Default link column pairs, can be used for link based layers: arc, line etc
+   */
+  get defaultLinkColumnPairs() {
+    return {
+      lat0: {pair: 'lng0', fieldPairKey: 'lat'},
+      lng0: {pair: 'lat0', fieldPairKey: 'lng'},
+      lat1: {pair: 'lng1', fieldPairKey: 'lat'},
+      lng1: {pair: 'lat1', fieldPairKey: 'lng'}
+    };
+  }
+
+  /**
+   * Return a React component for to render layer instructions in a modal
+   * @returns {object} - an object
+   * @example
+   *  return {
+   *    id: 'iconInfo',
+   *    template: IconInfoModal,
+   *    modalProps: {
+   *      title: 'How to draw icons'
+   *   };
+   * }
+   */
+  get layerInfoModal() {
+    return null;
+  }
+
+  get interactivitySettings() {
+    return this._interactivitySettings;
+  }
+
+  set interactivitySettings(interactivitySettings) {
+    this._interactivitySettings = interactivitySettings;
+  }
+
+  get hasTooltip() {
+    return Boolean(
+      this.interactivitySettings?.hover?.fields.length ||
+        this.interactivitySettings?.click?.fields.length
+    );
+  }
+
+  get hasInteractivity() {
+    return Boolean(this.hasTooltip && this.interactivitySettings?.enabled);
+  }
+
+  /*
+   * Given a dataset, automatically find props to create layer based on it
+   * and return the props and previous found layers.
+   * By default, no layers will be found
+   */
+  static findDefaultLayerProps(dataset, foundLayers) {
+    return {props: [], foundLayers};
+  }
+
+  /**
+   * Given a array of preset required column names
+   * found field that has the same name to set as layer column
+   *
+   * @param {object} defaultFields
+   * @param {object[]} allFields
+   * @returns {object[] | null} all possible required layer column pairs
+   */
+  static findDefaultColumnField(defaultFields, allFields) {
+    // find all matched fields for each required col
+    const requiredColumns = Object.keys(defaultFields).reduce((prev, key) => {
+      const requiredFields = allFields.filter(
+        f => f.name === defaultFields[key] || defaultFields[key].includes(f.name)
+      );
+
+      prev[key] = requiredFields.length
+        ? requiredFields.map(f => ({
+            value: f.name,
+            fieldIdx: f.fieldIdx
+          }))
+        : null;
+      return prev;
+    }, {});
+
+    if (!Object.values(requiredColumns).every(Boolean)) {
+      // if any field missing, return null
+      return null;
+    }
+
+    return this.getAllPossibleColumnParis(requiredColumns);
+  }
+
+  static getAllPossibleColumnParis(requiredColumns) {
+    // for multiple matched field for one required column, return multiple
+    // 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 countPerKey = allKeys.map(k => requiredColumns[k].length);
+    const pairs = [];
+
+    /* eslint-disable no-loop-func */
+    while (incrementPointers(pointers, countPerKey, pointers.length - 1)) {
+      const newPair = pointers.reduce((prev, cuur, i) => {
+        prev[allKeys[i]] = requiredColumns[allKeys[i]][cuur];
+        return prev;
+      }, {});
+
+      pairs.push(newPair);
+    }
+    /* eslint-enable no-loop-func */
+
+    // recursively increment pointers
+    function incrementPointers(pts, counts, index) {
+      if (index === 0 && pts[0] === counts[0] - 1) {
+        // nothing to increment
+        return false;
+      }
+
+      if (pts[index] + 1 < counts[index]) {
+        pts[index] = pts[index] + 1;
+        return true;
+      }
+
+      pts[index] = 0;
+      return incrementPointers(pts, counts, index - 1);
+    }
+
+    return pairs;
+  }
+
+  static hexToRgb(c) {
+    return hexToRgb(c);
+  }
+
+  getDefaultLayerConfig(props = {}) {
+    return {
+      dataId: props.dataId || null,
+      visibilityByZoom: {
+        min: props.visibilityByZoom?.min || ZOOM_LEVEL_LIMITS.min,
+        max: props.visibilityByZoom?.max || ZOOM_LEVEL_LIMITS.max
+      },
+      label: props.label || DEFAULT_LAYER_LABEL,
+      color: props.color || colorMaker.next().value,
+      columns: props.columns || null,
+      isVisible: props.isVisible || false,
+      isConfigActive: props.isConfigActive || false,
+      highlightColor: props.highlightColor || DEFAULT_HIGHLIGHT_COLOR,
+      hidden: props.hidden || false,
+
+      // TODO: refactor this into separate visual Channel config
+      // color by field, domain is set by filters, field, scale type
+      colorField: null,
+      colorDomain: [0, 1],
+      colorScale: SCALE_TYPES.quantile,
+
+      // color by size, domain is set by filters, field, scale type
+      sizeDomain: [0, 1],
+      sizeScale: SCALE_TYPES.linear,
+      sizeField: null,
+      radiusField: null,
+
+      visConfig: {},
+
+      textLabel: [DEFAULT_TEXT_LABEL],
+
+      colorUI: {
+        color: DEFAULT_COLOR_UI,
+        colorRange: DEFAULT_COLOR_UI
+      },
+      animation: {enabled: false}
+    };
+  }
+
+  /**
+   * Get the description of a visualChannel config
+   * @param key
+   * @returns {{label: string, measure: (string|string)}}
+   */
+  getVisualChannelDescription(key) {
+    // e.g. label: Color, measure: Vehicle Type
+    return {
+      label: this.visConfigSettings[this.visualChannels[key].range].label,
+      measure: this.config[this.visualChannels[key].field]
+        ? (this.config[this.visualChannels[key].field].displayName ||
+          this.config[this.visualChannels[key].field].name)
+        : this.visualChannels[key].defaultMeasure
+    };
+  }
+
+  /**
+   * Assign a field to layer column, return column config
+   * @param key - Column Key
+   * @param field - Selected field
+   * @returns {{}} - Column config
+   */
+  assignColumn(key, field) {
+    // field value could be null for optional columns
+    const update = field
+      ? {
+          value: field.name,
+          fieldIdx: field.fieldIdx
+        }
+      : {value: null, fieldIdx: -1};
+
+    return {
+      ...this.config.columns,
+      [key]: {
+        ...this.config.columns[key],
+        ...update
+      }
+    };
+  }
+
+  /**
+   * Assign a field pair to column config, return column config
+   * @param key - Column Key
+   * @param pair - field Pair
+   * @returns {object} - Column config
+   */
+  assignColumnPairs(key, pair) {
+    if (!this.columnPairs || !this.columnPairs?.[key]) {
+      // should not end in this state
+      return this.config.columns;
+    }
+
+    const {pair: partnerKey, fieldPairKey} = this.columnPairs?.[key];
+    const {fieldPairKey: partnerFieldPairKey} = this.columnPairs?.[partnerKey];
+
+    return {
+      ...this.config.columns,
+      [key]: pair[fieldPairKey],
+      [partnerKey]: pair[partnerFieldPairKey]
+    };
+  }
+
+  /**
+   * Calculate a radius zoom multiplier to render points, so they are visible in all zoom level
+   * @param {object} mapState
+   * @param {number} mapState.zoom - actual zoom
+   * @param {number | void} mapState.zoomOffset - zoomOffset when render in the plot container for export image
+   * @returns {number}
+   */
+  getZoomFactor({zoom, zoomOffset = 0}) {
+    return Math.pow(2, Math.max(14 - zoom + zoomOffset, 0));
+  }
+
+  /**
+   * Calculate a elevation zoom multiplier to render points, so they are visible in all zoom level
+   * @param {object} mapState
+   * @param {number} mapState.zoom - actual zoom
+   * @param {number | void} mapState.zoomOffset - zoomOffset when render in the plot container for export image
+   * @returns {number}
+   */
+  getElevationZoomFactor({zoom, zoomOffset = 0}) {
+    return this.config.visConfig.enableElevationZoomFactor
+      ? Math.pow(2, Math.max(8 - zoom + zoomOffset, 0))
+      : 1;
+  }
+
+  formatLayerData(datasets, filteredIndex) {
+    return {};
+  }
+
+  renderLayer() {
+    return [];
+  }
+
+  getHoverData(object, dataContainer) {
+    if (!object) {
+      return null;
+    }
+
+    // By default, each entry of layerData should have an index of a row in the original data container.
+    // Each layer can implement its own getHoverData method
+    return dataContainer.row(object.index);
+  }
+
+  /**
+   * When change layer type, try to copy over layer configs as much as possible
+   * @param configToCopy - config to copy over
+   * @param visConfigSettings - visConfig settings of config to copy
+   */
+  assignConfigToLayer(configToCopy, visConfigSettings) {
+    // don't deep merge visualChannel field
+    // don't deep merge color range, reversed: is not a key by default
+    const shallowCopy = ['colorRange', 'strokeColorRange'].concat(
+      Object.values(this.visualChannels).map(v => v.field)
+    );
+
+    // don't copy over domain and animation
+    const notToCopy = ['animation'].concat(Object.values(this.visualChannels).map(v => v.domain));
+    // if range is for the same property group copy it, otherwise, not to copy
+    Object.values(this.visualChannels).forEach(v => {
+      if (
+        configToCopy.visConfig[v.range] &&
+        this.visConfigSettings[v.range] &&
+        visConfigSettings[v.range].group !== this.visConfigSettings[v.range].group
+      ) {
+        notToCopy.push(v.range);
+      }
+    });
+
+    // don't copy over visualChannel range
+    const currentConfig = this.config;
+    const copied = this.copyLayerConfig(currentConfig, configToCopy, {
+      shallowCopy,
+      notToCopy
+    });
+    this.updateLayerConfig(copied);
+    // validate visualChannel field type and scale types
+    Object.keys(this.visualChannels).forEach(channel => {
+      this.validateVisualChannel(channel);
+    });
+  }
+
+  /*
+   * Recursively copy config over to an empty layer
+   * when received saved config, or copy config over from a different layer type
+   * make sure to only copy over value to existing keys
+   * @param {object} currentConfig - existing config to be override
+   * @param {object} configToCopy - new Config to copy over
+   * @param {string[]} shallowCopy - array of properties to not to be deep copied
+   * @param {string[]} notToCopy - array of properties not to copy
+   * @returns {object} - copied config
+   */
+  copyLayerConfig(currentConfig, configToCopy, {shallowCopy = [], notToCopy = []} = {}) {
+    const copied = {};
+    Object.keys(currentConfig).forEach(key => {
+      if (
+        isPlainObject(currentConfig[key]) &&
+        isPlainObject(configToCopy[key]) &&
+        !shallowCopy.includes(key) &&
+        !notToCopy.includes(key)
+      ) {
+        // recursively assign object value
+        copied[key] = this.copyLayerConfig(currentConfig[key], configToCopy[key], {
+          shallowCopy,
+          notToCopy
+        });
+      } else if (notNullorUndefined(configToCopy[key]) && !notToCopy.includes(key)) {
+        // copy
+        copied[key] = configToCopy[key];
+      } else {
+        // keep existing
+        copied[key] = currentConfig[key];
+      }
+    });
+
+    return copied;
+  }
+
+  registerVisConfig(layerVisConfigs) {
+    Object.keys(layerVisConfigs).forEach(item => {
+      if (typeof item === 'string' && LAYER_VIS_CONFIGS[layerVisConfigs[item]]) {
+        // if assigned one of default LAYER_CONFIGS
+        this.config.visConfig[item] = LAYER_VIS_CONFIGS[layerVisConfigs[item]].defaultValue;
+        this.visConfigSettings[item] = LAYER_VIS_CONFIGS[layerVisConfigs[item]];
+      } else if (['type', 'defaultValue'].every(p => layerVisConfigs[item].hasOwnProperty(p))) {
+        // if provided customized visConfig, and has type && defaultValue
+        // TODO: further check if customized visConfig is valid
+        this.config.visConfig[item] = layerVisConfigs[item].defaultValue;
+        this.visConfigSettings[item] = layerVisConfigs[item];
+      }
+    });
+  }
+
+  getLayerColumns() {
+    const columnValidators = this.columnValidators || {};
+    const required = this.requiredLayerColumns.reduce(
+      (accu, key) => ({
+        ...accu,
+        [key]: columnValidators[key]
+          ? {value: null, fieldIdx: -1, validator: columnValidators[key]}
+          : {value: null, fieldIdx: -1}
+      }),
+      {}
+    );
+    const optional = this.optionalColumns.reduce(
+      (accu, key) => ({
+        ...accu,
+        [key]: {value: null, fieldIdx: -1, optional: true}
+      }),
+      {}
+    );
+
+    return {...required, ...optional};
+  }
+
+  updateLayerConfig(newConfig) {
+    this.config = {...this.config, ...newConfig};
+    return this;
+  }
+
+  updateLayerVisConfig(newVisConfig) {
+    this.config.visConfig = {...this.config.visConfig, ...newVisConfig};
+    return this;
+  }
+
+  updateLayerColorUI(prop, newConfig) {
+    const {colorUI: previous, visConfig} = this.config;
+
+    if (!isPlainObject(newConfig) || typeof prop !== 'string') {
+      return this;
+    }
+
+    const colorUIProp = Object.entries(newConfig).reduce((accu, [key, value]) => {
+      return {
+        ...accu,
+        [key]: isPlainObject(accu[key]) && isPlainObject(value) ? {...accu[key], ...value} : value
+      };
+    }, previous[prop] || DEFAULT_COLOR_UI);
+
+    const colorUI = {
+      ...previous,
+      [prop]: colorUIProp
+    };
+
+    this.updateLayerConfig({colorUI});
+    // if colorUI[prop] is colorRange
+    const isColorRange = visConfig[prop] && visConfig[prop].colors;
+
+    if (isColorRange) {
+      this.updateColorUIByColorRange(newConfig, prop);
+      this.updateColorRangeByColorUI(newConfig, previous, prop);
+      this.updateCustomPalette(newConfig, previous, prop);
+    }
+
+    return this;
+  }
+
+  updateCustomPalette(newConfig, previous, prop) {
+    if (!newConfig.colorRangeConfig || !newConfig.colorRangeConfig.custom) {
+      return;
+    }
+
+    const {colorUI, visConfig} = this.config;
+
+    if (!visConfig[prop]) return;
+    const {colors} = visConfig[prop];
+    const customPalette = {
+      ...colorUI[prop].customPalette,
+      name: 'Custom Palette',
+      colors: [...colors]
+    };
+    this.updateLayerConfig({
+      colorUI: {
+        ...colorUI,
+        [prop]: {
+          ...colorUI[prop],
+          customPalette
+        }
+      }
+    });
+  }
+  /**
+   * if open dropdown and prop is color range
+   * Automatically set colorRangeConfig's step, reversed and type
+   * @param {*} newConfig
+   * @param {*} prop
+   */
+  updateColorUIByColorRange(newConfig, prop) {
+    if (typeof newConfig.showDropdown !== 'number') return;
+
+    const {colorUI, visConfig} = this.config;
+    this.updateLayerConfig({
+      colorUI: {
+        ...colorUI,
+        [prop]: {
+          ...colorUI[prop],
+          colorRangeConfig: {
+            ...colorUI[prop].colorRangeConfig,
+            type: visConfig[prop].type,
+            steps: visConfig[prop].colors.length,
+            reversed: Boolean(visConfig[prop].reversed)
+          }
+        }
+      }
+    });
+  }
+
+  // eslint-disable-next-line complexity
+  updateColorRangeByColorUI(newConfig, previous, prop) {
+    // only update colorRange if changes in UI is made to 'reversed', 'steps' or steps
+    const shouldUpdate =
+      newConfig.colorRangeConfig &&
+      ['reversed', 'steps'].some(
+        key =>
+          newConfig.colorRangeConfig.hasOwnProperty(key) &&
+          newConfig.colorRangeConfig[key] !==
+            (previous[prop] || DEFAULT_COLOR_UI).colorRangeConfig[key]
+      );
+    if (!shouldUpdate) return;
+
+    const {colorUI, visConfig} = this.config;
+    const {steps, reversed} = colorUI[prop].colorRangeConfig;
+    const colorRange = visConfig[prop];
+    // find based on step or reversed
+    let update;
+    if (newConfig.colorRangeConfig.hasOwnProperty('steps')) {
+      const group = getColorGroupByName(colorRange);
+
+      if (group) {
+        const sameGroup = COLOR_RANGES.filter(cr => getColorGroupByName(cr) === group);
+
+        update = sameGroup.find(cr => cr.colors.length === steps);
+
+        if (update && colorRange.reversed) {
+          update = reverseColorRange(true, update);
+        }
+
+        if (update && colorRange.colorMap) {
+          update = this.updateColorMap(prop, colorRange.colorMap, update);
+        }
+      }
+    }
+
+    if (newConfig.colorRangeConfig.hasOwnProperty('reversed')) {
+      update = reverseColorRange(reversed, update || colorRange);
+    }
+
+    if (update) {
+      this.updateLayerVisConfig({[prop]: update});
+    }
+  }
+
+  updateColorMap(prop, colorMap, colorRange) {
+    // @ts-ignore
+    const {field, domain} = Object.values(this.visualChannels).find(value => value.range === prop);
+    const type = this.config[field]?.type;
+
+    if (type === 'string' || type === 'boolean' || type === 'date') {
+      return this.updateCategoryColorMap(colorMap, this.config[domain], colorRange);
+    }
+
+    // If no type or type is not string, boolean or date
+    return this.updateNumericColorMap(colorMap, this.config[domain], colorRange);
+  }
+
+  updateCategoryColorMap(colorMap, domain, colorRange) {
+    const colors = colorRange.colors;
+    const assignedCategories = [];
+    const newColorMap = colorMap.slice(0, colors.length).map((cMap, index) => {
+      assignedCategories.push(cMap[0]);
+      return [cMap[0], colors[index]];
+    });
+    const unassignedColors = colors.slice(newColorMap.length, colors.length);
+
+    for (const color of unassignedColors) {
+      const category = domain.find(d => !assignedCategories.includes(d));
+      if (!category) {
+        break;
+      }
+      assignedCategories.push(category);
+      newColorMap.push([category, color]);
+    }
+    return {
+      ...colorRange,
+      colorMap: newColorMap
+    };
+  }
+
+  updateNumericColorMap(colorMap, domain, update) {
+    const colors = update.colors;
+    let newColorMap = colorMap.slice(0, colors.length);
+
+    newColorMap = newColorMap.map((cMap, index) => {
+      const value = index === newColorMap.length - 1 ? null : cMap[0];
+      return [value, colors[index]];
+    });
+    const unassignedColors = colors.slice(newColorMap.length, colors.length);
+
+    if (unassignedColors.length > 0) {
+      const colorMapValues = colorMap.map(c => c[0]).filter(c => typeof c === 'number');
+      const maxValue = Math.max(...colorMapValues, domain[domain.length - 1]);
+      const prevValue = newColorMap[newColorMap.length - 2][0];
+      const step = (maxValue - prevValue) / (unassignedColors.length + 1);
+      newColorMap[newColorMap.length - 1][0] = prevValue + step;
+
+      for (const [i, color] of unassignedColors.entries()) {
+        const value = i === unassignedColors.length - 1 ? null : prevValue + (step * (i + 2));
+        newColorMap.push([value, color]);
+      }
+    }
+    return {
+      ...update,
+      colorMap: newColorMap
+    };
+  }
+
+  /**
+   * Check whether layer has all columns
+   * @returns {boolean} yes or no
+   */
+  hasAllColumns() {
+    const {columns} = this.config;
+    return (
+      (columns &&
+      Object.values(columns).every(v => {
+        return Boolean(v.optional || (v.value && v.fieldIdx > -1));
+      }))
+    );
+  }
+
+  /**
+   * Check whether layer has data
+   *
+   * @param {Array | Object} layerData
+   * @returns {boolean} yes or no
+   */
+  hasLayerData(layerData) {
+    if (!layerData) {
+      return false;
+    }
+    return Boolean(layerData.data && layerData.data.length);
+  }
+
+  isValidToSave() {
+    return this.type && this.hasAllColumns();
+  }
+
+  shouldRenderLayer(data) {
+    return (
+      (this.type &&
+      this.hasAllColumns() &&
+      this.hasLayerData(data) &&
+      typeof this.renderLayer === 'function')
+    );
+  }
+
+  getColorScale(colorScale, colorDomain, colorRange) {
+    if (Array.isArray(colorRange.colorMap)) {
+      const cMap = new Map();
+      colorRange.colorMap.forEach(([k, v]) => {
+        cMap.set(k, typeof v === 'string' ? hexToRgb(v) : v);
+      });
+
+      // @ts-ignore d3 scale
+      const scale = SCALE_FUNC[colorScale]()
+        .domain(Array.from(cMap.keys()))
+        .range(Array.from(cMap.values()))
+        .unknown(UNKNOWN_COLOR);
+      return scale;
+    }
+
+    return this.getVisChannelScale(colorScale, colorDomain, colorRange.colors.map(hexToRgb));
+  }
+
+  getCustomMarkersScale(range, fallbackIcon) {
+    let unknownValue = fallbackIcon || FALLBACK_ICON;
+    if (!range) {
+      return () => unknownValue;
+    }
+
+    const mapping = new Map();
+
+    if (range.othersMarker) {
+      unknownValue = range.othersMarker;
+    }
+    for (const {value, markerUrl} of range.markerMap) {
+      if (markerUrl) {
+        mapping.set(value, markerUrl);
+      }
+    }
+
+    // @ts-ignore d3 scale
+    const scale = scaleOrdinal()
+      .domain(Array.from(mapping.keys()))
+      .range(Array.from(mapping.values()))
+      .unknown(unknownValue);
+    return scale;
+  }
+
+  /**
+   * Mapping from visual channels to deck.gl accesors
+   * @param {Object} param Parameters
+   * @param {Function} param.dataAccessor Access kepler.gl layer data from deck.gl layer
+   * @param {import('utils/table-utils/data-container-interface').DataContainerInterface} param.dataContainer DataContainer to use use with dataAccessor
+   * @return {Object} attributeAccessors - deck.gl layer attribute accessors
+   */
+  getAttributeAccessors({dataAccessor = defaultDataAccessor, dataContainer}) {
+    const attributeAccessors = {};
+
+    // eslint-disable-next-line complexity
+    Object.keys(this.visualChannels).forEach(channel => {
+      const {
+        field,
+        fixed,
+        scale,
+        domain,
+        range,
+        accessor,
+        defaultValue,
+        getAttributeValue,
+        nullValue,
+        channelScaleType,
+        aggregation
+      } = this.visualChannels[channel];
+
+      const shouldGetScale = Boolean(
+        (scale || channelScaleType === CHANNEL_SCALES.identity) && this.config[field]
+      );
+
+      if (shouldGetScale) {
+        const args = [this.config[scale], this.config[domain], this.config.visConfig[range]];
+        const isFixed = fixed && this.config.visConfig[fixed];
+        // It's important to declare as const all the parameters that we are going to be use in the getEncodedChannelValue call
+        // otherwise, the oldLayerData parameter in formatLayerData method will be wrong (you can check the formatLayerData TileLayer method in Builder as example)
+        const fieldConfig = this.config[field];
+        const aggregationValue = this.config.visConfig[aggregation];
+
+        const scaleFunction =
+          channelScaleType === CHANNEL_SCALES.identity
+            ? scaleIdentity
+            : channelScaleType === CHANNEL_SCALES.color
+            ? this.getColorScale(...args)
+            : channelScaleType === CHANNEL_SCALES.customMarker
+            ? this.getCustomMarkersScale(
+                this.config.visConfig[range],
+                this.config.visConfig.customMarkersUrl
+              )
+            : this.getVisChannelScale(...args, isFixed);
+
+        attributeAccessors[accessor] = d =>
+          this.getEncodedChannelValue(
+            scaleFunction,
+            dataAccessor(dataContainer)(d),
+            fieldConfig,
+            aggregationValue,
+            nullValue
+          );
+      } else if (typeof getAttributeValue === 'function') {
+        attributeAccessors[accessor] = getAttributeValue(this.config);
+      } else {
+        attributeAccessors[accessor] =
+          typeof defaultValue === 'function' ? defaultValue(this.config) : defaultValue;
+      }
+
+      if (!(accessor in attributeAccessors)) {
+        Console.warn(`Failed to provide accessor function for ${accessor || channel}`);
+      }
+    });
+
+    return attributeAccessors;
+  }
+
+  getVisChannelScale(scale, domain, range, fixed) {
+    if (scale === SCALE_TYPES.ordinal) {
+      // @ts-ignore d3-scale type
+      return SCALE_FUNC[scale]()
+        .domain(domain.slice(0, range.length))
+        .range(range)
+        .unknown(UNKNOWN_COLOR);
+    }
+
+    // for `count` aggregation, we domain is actually `[0, Infinity]` so it doesn't make sense
+    // to use it, so skip specyfying this domains
+    const domainIsInfinite = domain && (domain[0] === 0 && domain[1] === Infinity);
+    const scaleFactory = SCALE_FUNC[fixed ? 'linear' : scale];
+    // @ts-ignore d3-scale type
+    let result = scaleFactory();
+    if (domain && !domainIsInfinite) {
+      result = result.domain(domain);
+    }
+    return result.range(fixed ? domain : range);
+  }
+
+  /**
+   * Get longitude and latitude bounds of the data.
+   * @param {import('utils/table-utils/data-container-interface').DataContainerInterface} dataContainer DataContainer to calculate bounds for.
+   * @param {(d: {index: number}, dc: import('utils/table-utils/data-container-interface').DataContainerInterface) => number[]} getPosition Access kepler.gl layer data from deck.gl layer
+   * @return {number[]|null} bounds of the data.
+   */
+  getPointsBounds(dataContainer, getPosition) {
+    // no need to loop through the entire dataset
+    // get a sample of data to calculate bounds
+    const sampleData =
+      dataContainer.numRows() > MAX_SAMPLE_SIZE
+        ? getSampleData(dataContainer, MAX_SAMPLE_SIZE)
+        : dataContainer;
+
+    const points = sampleData.mapIndex(getPosition);
+
+    const latBounds = getLatLngBounds(points, 1, [-90, 90]);
+    const lngBounds = getLatLngBounds(points, 0, [-180, 180]);
+
+    if (!latBounds || !lngBounds) {
+      return null;
+    }
+
+    return [lngBounds[0], latBounds[0], lngBounds[1], latBounds[1]];
+  }
+
+  getChangedTriggers(dataUpdateTriggers) {
+    const triggerChanged = diffUpdateTriggers(dataUpdateTriggers, this._oldDataUpdateTriggers);
+    this._oldDataUpdateTriggers = dataUpdateTriggers;
+
+    return triggerChanged;
+  }
+
+  getEncodedChannelValue(
+    scale,
+    data,
+    field,
+    // In builder we overwrite the getValue function and we use the _aggregation parameter in spatial index layers as the QuadkeyLayer.
+    _aggregation,
+    nullValue = NO_VALUE_COLOR,
+    getValue = defaultGetFieldValue
+  ) {
+    const {type} = field;
+    const value = getValue(field, data);
+
+    if (!notNullorUndefined(value)) {
+      return nullValue;
+    }
+
+    let attributeValue;
+    if (type === ALL_FIELD_TYPES.timestamp) {
+      // shouldn't need to convert here
+      // scale Function should take care of it
+      attributeValue = scale(new Date(value));
+    } else {
+      attributeValue = scale(value);
+    }
+
+    if (!notNullorUndefined(attributeValue)) {
+      attributeValue = nullValue;
+    }
+
+    return attributeValue;
+  }
+
+  updateMeta(meta) {
+    this.meta = {...this.meta, ...meta};
+  }
+
+  getDataUpdateTriggers({filteredIndex, id, allData}) {
+    const {columns} = this.config;
+
+    return {
+      getData: {datasetId: id, allData, columns, filteredIndex},
+      getMeta: {datasetId: id, allData, columns},
+      ...(this.config.textLabel || []).reduce(
+        (accu, tl, i) => ({
+          ...accu,
+          [`getLabelCharacterSet-${i}`]: tl.field ? tl.field.name : null
+        }),
+        {}
+      )
+    };
+  }
+
+  updateData(datasets, oldLayerData) {
+    if (!this.config.dataId) {
+      return {};
+    }
+    const layerDataset = datasets[this.config.dataId];
+    const {dataContainer} = layerDataset;
+
+    this.updateVisualChannelFields(layerDataset);
+
+    const getPosition = this.getPositionAccessor(dataContainer);
+    const dataUpdateTriggers = this.getDataUpdateTriggers(layerDataset);
+    const triggerChanged = this.getChangedTriggers(dataUpdateTriggers);
+
+    if (triggerChanged.getMeta) {
+      this.updateLayerMeta(dataContainer, getPosition);
+    }
+
+    let data = [];
+
+    if (!triggerChanged.getData && oldLayerData && oldLayerData.data) {
+      // same data
+      data = oldLayerData.data;
+    } else {
+      data = this.calculateDataAttribute(layerDataset, getPosition);
+    }
+
+    return {data, triggerChanged};
+  }
+
+  /**
+   * Update styled fields to match ones from new dataset.
+   *
+   * @param {Object} dataset
+   */
+  updateVisualChannelFields(dataset) {
+    for (const {field} of Object.values(this.visualChannels)) {
+      const oldField = this.config[field];
+      if (!oldField) {
+        return;
+      }
+      const newDataSetField = dataset.fields.find(fd => fd.name === oldField.name) || null;
+      this.updateLayerConfig({[field]: newDataSetField});
+    }
+  }
+
+  /**
+   * helper function to update one layer domain when state.data changed
+   * if state.data change is due ot update filter, newFiler will be passed
+   * called by updateAllLayerDomainData
+   * @param {Object} datasets
+   * @param {Object} newFilter
+   * @returns {object} layer
+   */
+  updateLayerDomain(datasets, newFilter) {
+    const table = this.getDataset(datasets);
+    if (!table) {
+      return this;
+    }
+    Object.values(this.visualChannels).forEach(channel => {
+      const {scale} = channel;
+      const scaleType = this.config[scale];
+      // ordinal domain is based on dataContainer, if only filter changed
+      // no need to update ordinal domain
+      if (!newFilter || scaleType !== SCALE_TYPES.ordinal) {
+        const {domain} = channel;
+        const updatedDomain = this.calculateLayerDomain(table, channel);
+        this.updateLayerConfig({[domain]: updatedDomain});
+      }
+    });
+
+    return this;
+  }
+
+  getDataset(datasets) {
+    return this.config.dataId ? datasets[this.config.dataId] : null;
+  }
+
+  /**
+   * Validate visual channel field and scales based on supported field & scale type
+   * @param channel
+   */
+  validateVisualChannel(channel) {
+    this.validateFieldType(channel);
+    this.validateScale(channel);
+  }
+
+  /**
+   * Validate field type based on channelScaleType
+   */
+  validateFieldType(channel) {
+    const visualChannel = this.visualChannels[channel];
+    const {field, channelScaleType, supportedFieldTypes} = visualChannel;
+
+    if (this.config[field]) {
+      // if field is selected, check if field type is supported
+      const channelSupportedFieldTypes =
+        supportedFieldTypes || CHANNEL_SCALE_SUPPORTED_FIELDS[channelScaleType];
+
+      if (!channelSupportedFieldTypes.includes(this.config[field].type)) {
+        // field type is not supported, set it back to null
+        // set scale back to default
+        this.updateLayerConfig({[field]: null});
+      }
+    }
+  }
+
+  /**
+   * Validate scale type based on aggregation
+   */
+  validateScale(channel) {
+    const visualChannel = this.visualChannels[channel];
+    const {scale} = visualChannel;
+    if (!scale) {
+      // visualChannel doesn't have scale
+      return;
+    }
+    const scaleOptions = this.getScaleOptions(channel);
+    // check if current selected scale is
+    // supported, if not, change to default
+    if (!scaleOptions.includes(this.config[scale])) {
+      this.updateLayerConfig({[scale]: scaleOptions[0]});
+    }
+  }
+
+  /**
+   * Get scale options based on current field
+   * @param {string} channel
+   * @returns {string[]}
+   */
+  getScaleOptions(channel) {
+    const visualChannel = this.visualChannels[channel];
+    const {field, scale, channelScaleType} = visualChannel;
+
+    return this.config[field]
+      ? FIELD_OPTS[this.config[field].type].scale[channelScaleType]
+      : [this.getDefaultLayerConfig()[scale]];
+  }
+
+  updateLayerVisualChannel(dataset, channel) {
+    const visualChannel = this.visualChannels[channel];
+    this.validateVisualChannel(channel);
+    // calculate layer channel domain
+    const updatedDomain = this.calculateLayerDomain(dataset, visualChannel);
+    this.updateLayerConfig({[visualChannel.domain]: updatedDomain});
+  }
+
+  getVisualChannelUpdateTriggers() {
+    const updateTriggers = {};
+    Object.values(this.visualChannels).forEach(visualChannel => {
+      // field range scale domain
+      const {accessor, field, scale, domain, range, defaultValue, fixed} = visualChannel;
+
+      updateTriggers[accessor] = {
+        [field]: this.config[field],
+        [scale]: this.config[scale],
+        [domain]: this.config[domain],
+        [range]: this.config.visConfig[range],
+        defaultValue: typeof defaultValue === 'function' ? defaultValue(this.config) : defaultValue,
+        ...(fixed ? {[fixed]: this.config.visConfig[fixed]} : {})
+      };
+    });
+    return updateTriggers;
+  }
+
+  calculateLayerDomain(dataset, visualChannel) {
+    const {scale} = visualChannel;
+    const field = this.config[visualChannel.field];
+    if (!field || !scale) {
+      // if colorField or sizeField were set back to null
+      return defaultDomain;
+    }
+
+    const scaleType = this.config[scale];
+    const dataSetField = dataset.fields.find(f => f.name === field.name);
+    if (!scaleType || !dataSetField) {
+      // if new dataset doesn't contain previously set field
+      return defaultDomain;
+    }
+
+    return dataset.getColumnLayerDomain(dataSetField, scaleType) || defaultDomain;
+  }
+
+  hasHoveredObject(objectInfo) {
+    return this.isLayerHovered(objectInfo) && objectInfo.object ? objectInfo.object : null;
+  }
+
+  isLayerHovered(objectInfo) {
+    return objectInfo?.picked && objectInfo?.layer?.props?.id === this.id;
+  }
+
+  getRadiusScaleByZoom(mapState) {
+    const radiusChannel = Object.values(this.visualChannels).find(vc => vc.property === 'radius');
+
+    if (!radiusChannel) {
+      return 1;
+    }
+
+    const field = radiusChannel.field;
+    const {radius} = this.config.visConfig;
+
+    // @ts-ignore
+    return (this.config[field] ? 1 : radius) * this.getZoomFactor(mapState);
+  }
+
+  getRadiusScale() {
+    const radiusChannel = Object.values(this.visualChannels).find(vc => vc.property === 'radius');
+
+    if (!radiusChannel || this.config[radiusChannel.field]) {
+      return 1;
+    } else {
+      return this.config.visConfig.radius;
+    }
+  }
+
+  getMaxMarkerSize() {
+    const {radiusField, sizeField, visConfig} = this.config;
+    const {radiusRange, radius} = visConfig;
+    const field = radiusField || sizeField;
+    return Math.ceil((field && radiusRange ? radiusRange[1] : radius));
+  }
+
+  shouldCalculateLayerData(props) {
+    return props.some(p => !this.noneLayerDataAffectingProps.includes(p));
+  }
+
+  getBrushingExtensionProps(interactionConfig, brushingTarget) {
+    const {brush} = interactionConfig;
+
+    return {
+      // brushing
+      autoHighlight: !brush.enabled,
+      brushingRadius: brush.config.size * 1000,
+      brushingTarget: brushingTarget || 'source',
+      brushingEnabled: brush.enabled
+    };
+  }
+
+  getDefaultDeckLayerProps({idx, gpuFilter, mapState, visible, maskPolygon}) {
+    const maskExtensionProps = getMaskExtensionProps(maskPolygon);
+    return {
+      ...maskExtensionProps,
+      id: this.id,
+      idx,
+      coordinateSystem: COORDINATE_SYSTEM.LNGLAT,
+      pickable: this.hasInteractivity,
+      wrapLongitude: true,
+      parameters: {depthTest: Boolean(mapState.dragRotate || this.config.visConfig.enable3d)},
+      hidden: this.config.hidden,
+      visibilityByZoom: this.config.visibilityByZoom,
+      // visconfig
+      opacity: this.config.visConfig.opacity,
+      highlightColor: this.config.highlightColor,
+      // data filtering
+      extensions: [dataFilterExtension, ...maskExtensionProps.extensions],
+      filterRange: gpuFilter ? gpuFilter.filterRange : undefined,
+      // layer should be visible and if splitMap, shown in to one of panel
+      visible: this.config.isVisible && visible
+    };
+  }
+
+  getDefaultHoverLayerProps() {
+    return {
+      id: `${this.id}-hovered`,
+      pickable: false,
+      wrapLongitude: true,
+      coordinateSystem: COORDINATE_SYSTEM.LNGLAT
+    };
+  }
+
+  renderTextLabelLayer(
+    {getPosition, getRadius, radiusScale, updateTriggers, sharedProps},
+    renderOpts
+  ) {
+    const {data, mapState} = renderOpts;
+    const {textLabel, visibilityByZoom} = this.config;
+    const extensions = [...sharedProps.extensions, collisionFilterExtension];
+
+    if (!data || !data.textLabels || !data.textLabels[0] || !data.textLabels[0].getText) {
+      return [];
+    }
+
+    const [mainLabel, secondaryLabel] = textLabel;
+    const {
+      alignment,
+      anchor,
+      color: getColor,
+      field: mainField,
+      outlineColor,
+      size: sizeScale
+    } = mainLabel;
+    const {
+      color: getSecondaryColor,
+      field: secondaryField,
+      outlineColor: secondaryOutlineColor,
+      size: secondarySizeScale
+    } = secondaryLabel || {};
+
+    return [
+      new PointLabelLayer({
+        ...sharedProps,
+
+        // Recreate layer when labels change otherwise rendering breaks
+        // TODO could be more efficient with updateTriggers?
+        id: `${this.id}-${mainField?.name}-${secondaryField?.name}-label`,
+        data: data.data,
+        visibilityByZoom,
+        extensions,
+
+        characterSet: 'auto',
+        collisionEnabled: true,
+        collisionGroup: `${this.id}-labels`,
+
+        getText: data.textLabels[0].getText,
+        getColor,
+        sizeScale,
+        outlineColor,
+
+        ...(secondaryField && {
+          getSecondaryText: data.textLabels[1].getText,
+          getSecondaryColor,
+          secondarySizeScale,
+          secondaryOutlineColor
+        }),
+
+        // Position
+        getPosition,
+        getRadius,
+        radiusScale,
+        getTextAnchor: anchor,
+        getAlignmentBaseline: alignment,
+
+        // Style
+        fontFamily: 'Inter, sans',
+        fontSettings: {sdf: true},
+        fontWeight: 500,
+        outlineWidth: 4,
+        parameters: {
+          // text will always show on top of all layers
+          depthTest: false
+        },
+
+        getFilterValue: data.getFilterValue,
+        updateTriggers: {
+          ...updateTriggers,
+          getText: mainField?.name,
+          getColor: mainField?.color,
+          getTextAnchor: mainLabel.anchor,
+          getAlignmentBaseline: mainLabel.alignment,
+          getSecondaryText: secondaryField?.name
+        }
+      })
+    ];
+  }
+
+  /**
+   * Create deck.gl `IconLayer` "autoPack" mode accessor for custom markers.
+   *
+   * @param {*} iconUrlAccessor deck.gl accessor (or value) that resolves to URL of icon for given row
+   * @returns deck.gl accessor that returns UnpackedIcon ready to consume by IconLayer
+   */
+  getCustomMarkerIconAccessor(iconUrlAccessor, mask = true) {
+    const maxIconSize = this.getMaxMarkerSize();
+
+    return d => {
+      const wantedUrl =
+        (typeof iconUrlAccessor === 'function') ? iconUrlAccessor(d) : iconUrlAccessor;
+      const iconOk = Boolean(wantedUrl);
+      mask = iconOk ? mask : true;
+      const url = iconOk ? wantedUrl : FALLBACK_ICON;
+      return {
+        id: `${url}@@${maxIconSize}@${mask ? 'm' : 'c'}`,
+        url,
+        width: maxIconSize,
+        height: maxIconSize,
+        mask
+      };
+    };
+  }
+
+  calculateDataAttribute(keplerTable, getPosition) {
+    // implemented in subclasses
+    return [];
+  }
+
+  updateLayerMeta(dataContainer, getPosition) {
+    // implemented in subclasses
+  }
+
+  getPositionAccessor(dataContainer) {
+    // implemented in subclasses
+    return () => null;
+  }
+}
+
+export default Layer;