@carto/kepler.gl 0.0.71-alpha.3 → 0.0.71

package/src/components/map-container.js

@@ -32,24 +32,19 @@ import {errorNotification} from 'utils/notifications-utils';
 // components
 import MapPopoverFactory from 'components/map/map-popover';
 import MapControlFactory from 'components/map/map-control';
-import {StyledMapContainer, StyledAttrbution} from 'components/common/styled-components';
+import {StyledMapContainer} from 'components/common/styled-components';
 
 import EditorFactory from './editor/editor';
 
 // utils
-import {generateMapboxLayers, updateMapboxLayers} from 'layers/mapbox-utils';
+import {generateMapboxLayers} from 'layers/mapbox-utils';
 import {setLayerBlending} from 'utils/gl-utils';
 import {transformRequest} from 'utils/map-style-utils/mapbox-utils';
 import {renderDeckGlLayer, prepareLayersToRender, prepareLayersForDeck} from 'utils/layer-utils';
 
 // default-settings
 import ThreeDBuildingLayer from 'deckgl-layers/3d-building-layer/3d-building-layer';
-import {
-  FILTER_TYPES,
-  GEOCODER_LAYER_ID,
-  MASK_LAYER_ID,
-  THROTTLE_NOTIFICATION_TIME
-} from 'constants/default-settings';
+import {FILTER_TYPES, MASK_LAYER_ID, THROTTLE_NOTIFICATION_TIME} from 'constants/default-settings';
 
 import {observeDimensions, unobserveDimensions} from '../utils/observe-dimensions';
 import {LOCALE_CODES} from 'localization/locales';
@@ -81,39 +76,8 @@ const MAP_STYLE = {
   }
 };
 
-const MAPBOXGL_STYLE_UPDATE = 'style.load';
-const MAPBOXGL_RENDER = 'render';
 const TRANSITION_DURATION = 0;
 
-export const Attribution = () => (
-  <StyledAttrbution>
-    <div className="attrition-logo">
-      Basemap by:
-      <a
-        className="mapboxgl-ctrl-logo"
-        target="_blank"
-        rel="noopener noreferrer"
-        href="https://www.mapbox.com/"
-        aria-label="Mapbox logo"
-      />
-    </div>
-    <div className="attrition-link">
-      <a href="https://kepler.gl/policy/" target="_blank" rel="noopener noreferrer">
-        © kepler.gl |{' '}
-      </a>
-      <a href="https://www.mapbox.com/about/maps/" target="_blank" rel="noopener noreferrer">
-        © Mapbox |{' '}
-      </a>
-      <a href="http://www.openstreetmap.org/copyright" target="_blank" rel="noopener noreferrer">
-        © OpenStreetMap |{' '}
-      </a>
-      <a href="https://www.mapbox.com/map-feedback/" target="_blank" rel="noopener noreferrer">
-        <strong>Improve this map</strong>
-      </a>
-    </div>
-  </StyledAttrbution>
-);
-
 MapContainerFactory.deps = [MapPopoverFactory, MapControlFactory, EditorFactory];
 
 export default function MapContainerFactory(MapPopover, MapControl, Editor) {
@@ -145,7 +109,7 @@ export default function MapContainerFactory(MapPopover, MapControl, Editor) {
       mapLayers: PropTypes.object,
       onMapToggleLayer: PropTypes.func,
       onMapStyleLoaded: PropTypes.func,
-      onMapRender: PropTypes.func,
+      generateThumbnail: PropTypes.func,
       getMapboxRef: PropTypes.func,
       index: PropTypes.number,
       popupSettings: PropTypes.object
@@ -161,10 +125,6 @@ export default function MapContainerFactory(MapPopover, MapControl, Editor) {
     constructor(props) {
       super(props);
 
-      this.previousLayers = {
-        // [layers.id]: mapboxLayerConfig
-      };
-
       this._deck = null;
       this._ref = createRef();
 
@@ -187,11 +147,6 @@ export default function MapContainerFactory(MapPopover, MapControl, Editor) {
     }
 
     componentWillUnmount() {
-      // unbind mapboxgl event listener
-      if (this._map) {
-        this._map.off(MAPBOXGL_STYLE_UPDATE);
-        this._map.off(MAPBOXGL_RENDER);
-      }
       unobserveDimensions(this._ref.current);
     }
 
@@ -252,41 +207,6 @@ export default function MapContainerFactory(MapPopover, MapControl, Editor) {
       visStateActions.toggleLayerForMap(mapIndex, layerId);
     };
 
-    _onMapboxStyleUpdate = () => {
-      // force refresh mapboxgl layers
-      this.previousLayers = {};
-      this._updateMapboxLayers();
-
-      if (typeof this.props.onMapStyleLoaded === 'function') {
-        this.props.onMapStyleLoaded(this._map);
-      }
-    };
-
-    _setMapboxMap = mapbox => {
-      if (!this._map && mapbox) {
-        this._map = mapbox.getMap();
-        // i noticed in certain context we don't access the actual map element
-        if (!this._map) {
-          return;
-        }
-        // bind mapboxgl event listener
-        this._map.on(MAPBOXGL_STYLE_UPDATE, this._onMapboxStyleUpdate);
-
-        this._map.on(MAPBOXGL_RENDER, () => {
-          if (typeof this.props.onMapRender === 'function') {
-            this.props.onMapRender(this._map);
-          }
-        });
-      }
-
-      if (this.props.getMapboxRef) {
-        // The parent component can gain access to our MapboxGlMap by
-        // providing this callback. Note that 'mapbox' will be null when the
-        // ref is unset (e.g. when a split map is closed).
-        this.props.getMapboxRef(mapbox, this.props.index);
-      }
-    };
-
     _onDeckInitialized(gl) {
       if (this.props.onDeckInitialized) {
         this.props.onDeckInitialized(this._deck, gl);
@@ -351,6 +271,9 @@ export default function MapContainerFactory(MapPopover, MapControl, Editor) {
         mapboxApiUrl,
         maskPolygon
       } = this.props;
+
+      const mousePosition = this._mousePosition;
+
       trackers.drawCount?.increment();
 
       // initialise layers from props if exists
@@ -407,10 +330,12 @@ export default function MapContainerFactory(MapPopover, MapControl, Editor) {
       // Limit renders
       const hasRendered = this._hasRendered;
       const resetHasRendered = () => (hasRendered.current = false);
+
       return (
         <DeckGL
           controller={true}
           {...this.props.deckGlProps}
+          glOptions={{preserveDrawingBuffer: true}}
           viewState={mapState}
           onViewStateChange={({viewState}) => {
             // Limit updates (prevents freezes when dev tools open)
@@ -425,8 +350,15 @@ export default function MapContainerFactory(MapPopover, MapControl, Editor) {
             resetHasRendered();
             this._onBeforeRender(opts);
           }}
-          onHover={visStateActions.onLayerHover}
+          // onHover={visStateActions.onLayerHover}
+          onHover={info => {
+            visStateActions.onLayerHover(info);
+            mousePosition.current = {mousePosition: info.pixel};
+          }}
           onClick={visStateActions.onLayerClick}
+          onDragStart={() => {
+            mousePosition.current = null;
+          }}
           onError={this._onDeckError}
           ref={comp => {
             if (comp && comp.deck && comp.deck !== this._deck) {
@@ -452,23 +384,6 @@ export default function MapContainerFactory(MapPopover, MapControl, Editor) {
       );
     }
 
-    _updateMapboxLayers() {
-      const mapboxLayers = this.mapboxLayersSelector(this.props);
-      if (!Object.keys(mapboxLayers).length && !Object.keys(this.previousLayers).length) {
-        return;
-      }
-
-      updateMapboxLayers(this._map, mapboxLayers, this.previousLayers);
-
-      this.previousLayers = mapboxLayers;
-    }
-
-    _renderMapboxOverlays() {
-      if (this._map && this._map.isStyleLoaded()) {
-        this._updateMapboxLayers();
-      }
-    }
-
     _onViewportChange = viewState => {
       trackers.viewportChangeCount?.increment();
       const {width, height, ...restViewState} = viewState;
@@ -504,8 +419,6 @@ export default function MapContainerFactory(MapPopover, MapControl, Editor) {
         layers,
         MapComponent,
         datasets,
-        mapboxApiAccessToken,
-        mapboxApiUrl,
         mapControls,
         isExport,
         locale,
@@ -514,7 +427,8 @@ export default function MapContainerFactory(MapPopover, MapControl, Editor) {
         interactionConfig,
         editor,
         index,
-        primary
+        primary,
+        generateThumbnail
       } = this.props;
 
       const layersToRender = this.layersToRenderSelector(this.props);
@@ -525,16 +439,11 @@ export default function MapContainerFactory(MapPopover, MapControl, Editor) {
         width: '100%',
         height: '100%',
         preserveDrawingBuffer: true,
-        mapboxApiAccessToken,
-        mapboxApiUrl,
-        transformRequest
+        transformRequest,
+        generateThumbnail
       };
 
-      const isEdit = (mapControls.mapDraw || {}).active;
-
-      const hasGeocoderLayer = layers.find(l => l.id === GEOCODER_LAYER_ID);
       const isSplit = Boolean(mapState.isSplit);
-      const mousePosition = this._mousePosition;
 
       return (
         <>
@@ -562,50 +471,11 @@ export default function MapContainerFactory(MapPopover, MapControl, Editor) {
             onSetLocale={uiStateActions.setLocale}
             onToggleEditorVisibility={visStateActions.toggleEditorVisibility}
           />
-          <MapComponent
-            {...mapProps}
-            key="bottom"
-            ref={this._setMapboxMap}
-            mapStyle={mapStyle.bottomMapStyle}
-            getCursor={this.props.hoverInfo ? () => 'pointer' : undefined}
-            onMouseMove={evt => {
-              // Sending mouse move updates via Redux is expensive. Store
-              // locally and rely on deck.gl to drive render updates
-              // See Builder: features/builder/ui/KeplerGl/MapContainer/MapContainer.tsx
-              mousePosition.current = {mousePosition: evt.point};
-            }}
-          >
+          <MapComponent {...mapProps} key="bottom" mapStyle={mapStyle.bottomMapStyle}>
             {PERF_DEBUG && renderPerformanceStats()}
             {this._renderDeckOverlay(layersForDeck)}
-            {this._renderMapboxOverlays()}
-            <Editor
-              index={index}
-              datasets={datasets}
-              editor={editor}
-              filters={this.polygonFilters(this.props)}
-              isEnabled={isEdit}
-              layers={layers}
-              layersToRender={layersToRender}
-              onDeleteFeature={visStateActions.deleteFeature}
-              onSelect={visStateActions.setSelectedFeature}
-              onUpdate={visStateActions.setFeatures}
-              onTogglePolygonFilter={visStateActions.setPolygonFilterLayer}
-              style={{
-                pointerEvents: isEdit ? 'all' : 'none',
-                position: 'absolute',
-                display: editor.visible ? 'block' : 'none'
-              }}
-            />
           </MapComponent>
-          {mapStyle.topMapStyle || hasGeocoderLayer ? (
-            <div style={MAP_STYLE.top}>
-              <MapComponent {...mapProps} key="top" mapStyle={mapStyle.topMapStyle}>
-                {this._renderDeckOverlay({[GEOCODER_LAYER_ID]: true})}
-              </MapComponent>
-            </div>
-          ) : null}
           {this._renderMapPopover(layersToRender)}
-          {!isSplit || index === 1 ? <Attribution /> : null}
         </>
       );
     }

package/src/components/plot-container.js

@@ -55,12 +55,6 @@ PlotContainerFactory.deps = [MapContainerFactory, MapsLayoutFactory];
 
 // Remove mapbox logo in exported map, because it contains non-ascii characters
 const StyledPlotContainer = styled.div`
-  .mapboxgl-ctrl-bottom-left,
-  .mapboxgl-ctrl-bottom-right,
-  .mapbox-attribution-container {
-    display: none;
-  }
-
   position: absolute;
   top: ${OUT_OF_SCREEN_POSITION}px;
   left: ${OUT_OF_SCREEN_POSITION}px;
@@ -83,7 +77,8 @@ export default function PlotContainerFactory(MapContainer, MapsLayout) {
   class PlotContainer extends Component {
     constructor(props) {
       super(props);
-      this._onMapRender = debounce(this._onMapRender, 500);
+      // _onMapRender defined in cloud-native
+      this._generateThumbnail = null;
       this._retrieveNewScreenshot = debounce(this._retrieveNewScreenshot, 500);
     }
 
@@ -133,12 +128,6 @@ export default function PlotContainerFactory(MapContainer, MapsLayout) {
       })
     );
 
-    _onMapRender = map => {
-      if (map.isStyleLoaded()) {
-        this._retrieveNewScreenshot();
-      }
-    };
-
     _retrieveNewScreenshot = () => {
       if (this.plottingAreaRef.current) {
         convertToPng(this.plottingAreaRef.current, {filter: DOM_FILTER_FUNC})
@@ -203,7 +192,7 @@ export default function PlotContainerFactory(MapContainer, MapsLayout) {
           }
         },
         MapComponent: StaticMap,
-        onMapRender: this._onMapRender,
+        generateThumbnail: this._generateThumbnail,
         isExport: true,
         deckGlProps,
         maskPolygon

package/src/components/side-panel/layer-panel/color-range-selector.js

@@ -29,18 +29,16 @@ import {PanelLabel, Button, Tooltip} from 'components/common/styled-components';
 import Switch from 'components/common/switch';
 import ColorPalette from './color-palette';
 import CustomPalette from './custom-palette';
-import {COLOR_RANGES, hexColor} from 'constants/color-ranges';
+import {COLOR_RANGES} from 'constants/color-ranges';
 import {numberSort} from 'utils/data-utils';
 import {reverseColorRange} from 'utils/color-utils';
 import {FormattedMessage} from 'localization';
 import {SwapHorizontal} from 'components/common/icons';
-import HexColumnConfig from './hex-column-config';
 
 export const ALL_TYPES = uniq([
   'all',
   ...COLOR_RANGES.map(c => c.type).filter(ctype => ctype),
-  'custom',
-  {value: hexColor, divider: true}
+  'custom'
 ]);
 
 export const ALL_STEPS = uniq(COLOR_RANGES.map(d => d.colors.length)).sort(numberSort);
@@ -97,11 +95,9 @@ ColorRangeSelectFactory.deps = [ColorPaletteGroupFactory, PaletteConfigFactory];
 export default function ColorRangeSelectFactory(ColorPaletteGroup, PaletteConfig) {
   class ColorRangeSelect extends Component {
     static propTypes = {
-      fields: PropTypes.arrayOf(PropTypes.any),
       colorPaletteUI: PropTypes.object.isRequired,
       selectedColorRange: PropTypes.object.isRequired,
       onSelectColorRange: PropTypes.func.isRequired,
-      onSelectColorColumn: PropTypes.func.isRequired,
       setColorPaletteUI: PropTypes.func.isRequired,
       // optional
       colorRanges: PropTypes.arrayOf(PropTypes.any)
@@ -123,7 +119,7 @@ export default function ColorRangeSelectFactory(ColorPaletteGroup, PaletteConfig
       (colorRanges, type, steps) => {
         return colorRanges.filter(colorRange => {
           const isType = type === 'all' || type === colorRange.type;
-          const isStep = Number(steps || 6) === colorRange.colors.length;
+          const isStep = Number(steps) === colorRange.colors.length;
 
           return isType && isStep;
         });
@@ -133,7 +129,7 @@ export default function ColorRangeSelectFactory(ColorPaletteGroup, PaletteConfig
     _updateConfig = ({key, value}) => {
       this._setColorRangeConfig({
         [key]: value,
-        ...(key === 'type' && {custom: value === 'custom', hexColumn: value === hexColor})
+        ...(key === 'type' && {custom: value === 'custom'})
       });
     };
 
@@ -143,12 +139,6 @@ export default function ColorRangeSelectFactory(ColorPaletteGroup, PaletteConfig
       });
     };
 
-    _onSetHexColorColumn = config => {
-      this.props.setColorPaletteUI({
-        customPalette: config
-      });
-    };
-
     _setColorRangeConfig = newConfig => {
       this.props.setColorPaletteUI({
         colorRangeConfig: newConfig
@@ -158,7 +148,7 @@ export default function ColorRangeSelectFactory(ColorPaletteGroup, PaletteConfig
     _onCustomPaletteCancel = newConfig => {
       this.props.setColorPaletteUI({
         showSketcher: false,
-        colorRangeConfig: {custom: false, hexColumn: false}
+        colorRangeConfig: {custom: false}
       });
     };
 
@@ -168,18 +158,6 @@ export default function ColorRangeSelectFactory(ColorPaletteGroup, PaletteConfig
       });
     };
 
-    _onSelectColumn = column => {
-      this.props.onSelectColorColumn(column);
-      this._setColorRangeConfig({
-        type: hexColor,
-        hexColumn: column?.name
-      });
-    };
-
-    _handleOnChangePaletteType = ({key, value}) => {
-      this._updateConfig({key, value});
-    };
-
     render() {
       const {customPalette, showSketcher, colorRangeConfig} = this.props.colorPaletteUI;
       const filteredColorRanges = this.filteredColorRange(this.props);
@@ -190,8 +168,7 @@ export default function ColorRangeSelectFactory(ColorPaletteGroup, PaletteConfig
             {Object.keys(colorRangeConfig)
               .filter(
                 key =>
-                  Boolean(CONFIG_SETTINGS[key]) &&
-                  (colorRangeConfig.custom || colorRangeConfig.hexColumn ? key === 'type' : true)
+                  Boolean(CONFIG_SETTINGS[key]) && (colorRangeConfig.custom ? key === 'type' : true)
               )
               .map(key => {
                 return (
@@ -199,8 +176,8 @@ export default function ColorRangeSelectFactory(ColorPaletteGroup, PaletteConfig
                     key={key}
                     label={CONFIG_SETTINGS[key].label || key}
                     config={CONFIG_SETTINGS[key]}
-                    value={colorRangeConfig[key] || 6}
-                    onChange={value => this._handleOnChangePaletteType({key, value})}
+                    value={colorRangeConfig[key]}
+                    onChange={value => this._updateConfig({key, value})}
                   />
                 );
               })}
@@ -216,12 +193,6 @@ export default function ColorRangeSelectFactory(ColorPaletteGroup, PaletteConfig
               setCustomPalette={this._onSetCustomPalette}
               onCancel={this._onCustomPaletteCancel}
             />
-          ) : colorRangeConfig.hexColumn ? (
-            <HexColumnConfig
-              fields={this.props.fields}
-              value={colorRangeConfig.hexColumn}
-              onSelectColumn={this._onSelectColumn}
-            />
           ) : (
             <ColorPaletteGroup
               colorRanges={filteredColorRanges}

package/src/components/side-panel/layer-panel/color-selector.js

@@ -64,7 +64,6 @@ ColorSelectorFactory.deps = [SingleColorPaletteFactory, ColorRangeSelectFactory]
 function ColorSelectorFactory(SingleColorPalette, ColorRangeSelector) {
   class ColorSelector extends Component {
     static propTypes = {
-      fields: PropTypes.arrayOf(PropTypes.any),
       colorSets: PropTypes.arrayOf(
         PropTypes.shape({
           selectedColor: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.any), PropTypes.object]),
@@ -125,10 +124,6 @@ function ColorSelectorFactory(SingleColorPalette, ColorRangeSelector) {
       }
     };
 
-    _onSelectColorColumn = column => {
-      this.props.onSelectHexColorColumn(column);
-    };
-
     _showDropdown = (e, i) => {
       e.stopPropagation();
       e.preventDefault();
@@ -177,9 +172,7 @@ function ColorSelectorFactory(SingleColorPalette, ColorRangeSelector) {
                 <ColorRangeSelector
                   selectedColorRange={colorSets[editing].selectedColor}
                   onSelectColorRange={this._onSelectColor}
-                  onSelectColorColumn={this._onSelectColorColumn}
                   setColorPaletteUI={this.props.setColorUI}
-                  fields={this.props.fields}
                   colorPaletteUI={colorUI}
                 />
               ) : (

package/src/components/side-panel/layer-panel/layer-configurator.js

@@ -41,17 +41,12 @@ import TextLabelPanelFactory from './text-label-panel';
 
 import {capitalizeFirstLetter} from 'utils/utils';
 
-import {
-  CHANNEL_SCALES,
-  CHANNEL_SCALE_SUPPORTED_FIELDS,
-  SCALE_TYPES
-} from 'constants/default-settings';
+import {CHANNEL_SCALES, CHANNEL_SCALE_SUPPORTED_FIELDS} from 'constants/default-settings';
 import {LAYER_TYPES} from 'layers/types';
 import {injectIntl} from 'react-intl';
 import ColorDimensionScaleSelectorFactory from './color-dimension-scale-selector';
 import ColorSelectorFactory from './color-selector';
 import LayerAggregationResolutionFactory from './layer-aggregation-resolution';
-import {hexColorCustomPalette} from 'constants/color-ranges';
 
 const StyledLayerConfigurator = styled.div.attrs({
   className: 'layer-panel__config'
@@ -177,8 +172,6 @@ export default function LayerConfiguratorFactory(
                 channel={layer.visualChannels.color}
                 {...layerChannelConfigProps}
               />
-            </ConfigGroupCollapsibleContent>
-            <ConfigGroupCollapsibleContent>
               <VisConfigSlider {...layer.visConfigSettings.opacity} {...visConfiguratorProps} />
             </ConfigGroupCollapsibleContent>
           </LayerConfigGroup>
@@ -192,11 +185,7 @@ export default function LayerConfiguratorFactory(
               disabled={Boolean(layer.config.visConfig.customMarkers)}
             >
               {layer.config.strokeColorField ? (
-                <LayerColorRangeSelector
-                  {...visConfiguratorProps}
-                  property="strokeColorRange"
-                  field="strokeColorField"
-                />
+                <LayerColorRangeSelector {...visConfiguratorProps} property="strokeColorRange" />
               ) : (
                 <LayerColorSelector
                   {...visConfiguratorProps}
@@ -712,11 +701,7 @@ export default function LayerConfiguratorFactory(
             collapsible
           >
             {layer.config.strokeColorField ? (
-              <LayerColorRangeSelector
-                {...visConfiguratorProps}
-                property="strokeColorRange"
-                field="strokeColorField"
-              />
+              <LayerColorRangeSelector {...visConfiguratorProps} property="strokeColorRange" />
             ) : (
               <LayerColorSelector
                 {...visConfiguratorProps}
@@ -899,11 +884,7 @@ export default function LayerConfiguratorFactory(
             collapsible
           >
             {layer.config.strokeColorField ? (
-              <LayerColorRangeSelector
-                {...visConfiguratorProps}
-                property="strokeColorRange"
-                field="strokeColorField"
-              />
+              <LayerColorRangeSelector {...visConfiguratorProps} property="strokeColorRange" />
             ) : (
               <LayerColorSelector
                 {...visConfiguratorProps}
@@ -1067,14 +1048,13 @@ LayerColorSelectorFactory.deps = [ColorSelectorFactory];
 export function LayerColorSelectorFactory(ColorSelector) {
   class LayerColorSelector extends Component {
     render() {
-      const {layer, onChange, selectedColor, property = 'color', setColorUI, fields} = this.props;
+      const {layer, onChange, selectedColor, property = 'color', setColorUI} = this.props;
       return (
         <SidePanelSection>
           <PanelLabel>
             <FormattedMessage id="layer.color" />
           </PanelLabel>
           <ColorSelector
-            fields={fields}
             colorSets={[
               {
                 selectedColor: selectedColor || layer.config.color,
@@ -1096,22 +1076,13 @@ ArcLayerColorSelectorFactory.deps = [ColorSelectorFactory];
 export function ArcLayerColorSelectorFactory(ColorSelector) {
   class ArcLayerColorSelector extends Component {
     render() {
-      const {
-        layer,
-        onChangeConfig,
-        onChangeVisConfig,
-        property = 'color',
-        setColorUI,
-        fields
-      } = this.props;
-
+      const {layer, onChangeConfig, onChangeVisConfig, property = 'color', setColorUI} = this.props;
       return (
         <SidePanelSection>
           <PanelLabel>
             <FormattedMessage id="layer.colorRange" />
           </PanelLabel>
           <ColorSelector
-            fields={fields}
             colorSets={[
               {
                 selectedColor: layer.config.color,
@@ -1138,30 +1109,18 @@ LayerColorRangeSelectorFactory.deps = [ColorSelectorFactory];
 export function LayerColorRangeSelectorFactory(ColorSelector) {
   class LayerColorRangeSelector extends Component {
     render() {
-      const {
-        layer,
-        onChange,
-        property = 'colorRange',
-        field = 'colorField',
-        scale = 'colorScale',
-        setColorUI,
-        fields
-      } = this.props;
+      const {layer, onChange, property = 'colorRange', setColorUI} = this.props;
       return (
         <SidePanelSection>
           <PanelLabel>
             <FormattedMessage id="layer.colorRange" />
           </PanelLabel>
           <ColorSelector
-            fields={fields}
             colorSets={[
               {
                 selectedColor: layer.config.visConfig[property],
                 isRange: true,
                 setColor: colorRange => {
-                  layer.updateLayerConfig({
-                    [scale]: SCALE_TYPES.ordinal
-                  });
                   const {colorMap} = layer.config.visConfig[property];
                   const colorRangeUpdated = colorMap
                     ? layer.updateColorMap(property, colorMap, colorRange)
@@ -1172,18 +1131,6 @@ export function LayerColorRangeSelectorFactory(ColorSelector) {
             ]}
             colorUI={layer.config.colorUI[property]}
             setColorUI={newConfig => setColorUI(property, newConfig)}
-            onSelectHexColorColumn={colorColumn => {
-              layer.updateLayerConfig({
-                [field]: {
-                  ...layer.config[field],
-                  colorColumn: colorColumn?.name,
-                  colorColumnIdx: colorColumn?.fieldIdx
-                },
-                [scale]: SCALE_TYPES.identity
-              });
-
-              onChange({[property]: hexColorCustomPalette});
-            }}
           />
         </SidePanelSection>
       );

package/src/constants/color-ranges.js

@@ -61,12 +61,3 @@ export const DEFAULT_COLOR_RANGE = colorRanges.find(({name}) => name === 'Global
   category: 'Uber',
   colors: ['#5A1846', '#900C3F', '#C70039', '#E3611C', '#F1920E', '#FFC300']
 };
-
-export const hexColor = 'hexColor';
-export const hexColorCustomPalette = {
-  name: hexColor,
-  type: hexColor,
-  colors: [],
-  category: 'CARTO',
-  hexColor: true
-};

package/src/constants/default-settings.js

@@ -45,7 +45,6 @@ import {
 import {getHTMLMapModeTileUrl} from 'utils/utils';
 import {TOOLTIP_FORMAT_TYPES} from './tooltip';
 import {LAYER_TYPES} from 'layers/types';
-import {scaleIdentity} from 'utils/custom-scales';
 
 export const ACTION_PREFIX = '@@kepler.gl/';
 export const CLOUDFRONT = 'https://d1a3f4spazzrp4.cloudfront.net/kepler.gl';
@@ -311,8 +310,7 @@ export const SCALE_TYPES = keyMirror({
   point: null,
   custom: null,
   // UI-only type, resolving as custom
-  logarithmic: null,
-  identity: null
+  logarithmic: null
 });
 
 export const SCALE_FUNC = {
@@ -323,8 +321,7 @@ export const SCALE_FUNC = {
   [SCALE_TYPES.sqrt]: scaleSqrt,
   [SCALE_TYPES.log]: scaleLog,
   [SCALE_TYPES.point]: scalePoint,
-  [SCALE_TYPES.custom]: scaleThreshold,
-  [SCALE_TYPES.identity]: scaleIdentity
+  [SCALE_TYPES.custom]: scaleThreshold
 };
 
 export const ALL_FIELD_TYPES = keyMirror({