@carto/kepler.gl 0.0.72 → 0.0.73

package/package.json

@@ -2,7 +2,7 @@
   "name": "@carto/kepler.gl",
   "author": "CARTO",
   "homepage": "https://github.com/CartoDB/carto-kepler#readme",
-  "version": "0.0.72",
+  "version": "0.0.73",
   "description": "kepler.gl is a webgl based application to visualize large scale location data in the browser",
   "license": "MIT",
   "main": "dist/index.js",

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

@@ -1123,7 +1123,30 @@ export function ArcLayerColorSelectorFactory(ColorSelector) {
 LayerColorRangeSelectorFactory.deps = [ColorSelectorFactory];
 export function LayerColorRangeSelectorFactory(ColorSelector) {
   class LayerColorRangeSelector extends Component {
-    render() {
+    __renderHeatmapColorSelectorComponent() {
+      const property = 'colorRange';
+      const {layer, onChange, setColorUI} = this.props;
+      return (
+        <ColorSelector
+          colorSets={[
+            {
+              selectedColor: layer.config.visConfig[property],
+              isRange: true,
+              setColor: colorRange => {
+                const {colorMap} = layer.config.visConfig[property];
+                const colorRangeUpdated = colorMap
+                  ? layer.updateColorMap(property, colorMap, colorRange)
+                  : colorRange;
+                onChange({[property]: colorRangeUpdated});
+              }
+            }
+          ]}
+          colorUI={layer.config.colorUI[property]}
+          setColorUI={newConfig => setColorUI(property, newConfig)}
+        />
+      );
+    }
+    __renderDefaultColorSelectorComponent() {
       const {
         layer,
         onChange,
@@ -1133,56 +1156,69 @@ export function LayerColorRangeSelectorFactory(ColorSelector) {
         handleCustomOnSelectHexColumn = () => null
       } = this.props;
       const {range: property, field, scale} = layer.visualChannels[channel];
+      return (
+        <ColorSelector
+          fields={fields}
+          colorSets={[
+            {
+              selectedColor: layer.config.visConfig[property],
+              isRange: true,
+              setColor: colorRange => {
+                const {colorMap} = layer.config.visConfig[property];
+                const colorRangeUpdated = colorMap
+                  ? layer.updateColorMap(property, colorMap, colorRange)
+                  : colorRange;
+                // Ensure that scale changes from identity to ordinal
+                // Validate scale to ensure that it changes from `identity` to the correct one.
+                layer.updateLayerConfig({
+                  [field]: {
+                    ...layer.config[field],
+                    colorColumn: null,
+                    colorColumnIdx: null
+                  },
+                  [scale]: SCALE_TYPES.ordinal
+                });
+                layer.validateScale(channel);
+                // ---------------------------------------
+                onChange({[property]: colorRangeUpdated});
+              }
+            }
+          ]}
+          colorUI={layer.config.colorUI[property]}
+          setColorUI={newConfig => setColorUI(property, newConfig)}
+          onSelectHexColorColumn={colorColumn => {
+            // It's defined in CN: see workspace-www/src/features/builder/ui/KeplerGl/SidePanel/LayerPanel/LayerColorRangeSelector.tsx
+            handleCustomOnSelectHexColumn(layer, colorColumn);
+
+            layer.updateLayerConfig({
+              [field]: {
+                ...layer.config[field],
+                colorColumn: colorColumn?.name,
+                colorColumnIdx: colorColumn?.fieldIdx
+              },
+              [scale]: SCALE_TYPES.identity
+            });
+
+            onChange({[property]: hexColorCustomPalette});
+          }}
+        />
+      );
+    }
+
+    render() {
+      const {layer} = this.props;
+      let renderColorSelectorComponent = this.__renderDefaultColorSelectorComponent.bind(this);
+
+      if (layer.type === LAYER_TYPES.heatmap) {
+        renderColorSelectorComponent = this.__renderHeatmapColorSelectorComponent.bind(this);
+      }
+
       return (
         <SidePanelSection>
           <PanelLabel>
             <FormattedMessage id="layer.colorRange" />
           </PanelLabel>
-          <ColorSelector
-            fields={fields}
-            colorSets={[
-              {
-                selectedColor: layer.config.visConfig[property],
-                isRange: true,
-                setColor: colorRange => {
-                  const {colorMap} = layer.config.visConfig[property];
-                  const colorRangeUpdated = colorMap
-                    ? layer.updateColorMap(property, colorMap, colorRange)
-                    : colorRange;
-                  // Ensure that scale changes from identity to ordinal
-                  // Validate scale to ensure that it changes from `identity` to the correct one.
-                  layer.updateLayerConfig({
-                    [field]: {
-                      ...layer.config[field],
-                      colorColumn: null,
-                      colorColumnIdx: null
-                    },
-                    [scale]: SCALE_TYPES.ordinal
-                  });
-                  layer.validateScale(channel);
-                  // ---------------------------------------
-                  onChange({[property]: colorRangeUpdated});
-                }
-              }
-            ]}
-            colorUI={layer.config.colorUI[property]}
-            setColorUI={newConfig => setColorUI(property, newConfig)}
-            onSelectHexColorColumn={colorColumn => {
-              // It's defined in CN: see workspace-www/src/features/builder/ui/KeplerGl/SidePanel/LayerPanel/LayerColorRangeSelector.tsx
-              handleCustomOnSelectHexColumn(layer, colorColumn);
-
-              layer.updateLayerConfig({
-                [field]: {
-                  ...layer.config[field],
-                  colorColumn: colorColumn?.name,
-                  colorColumnIdx: colorColumn?.fieldIdx
-                },
-                [scale]: SCALE_TYPES.identity
-              });
-
-              onChange({[property]: hexColorCustomPalette});
-            }}
-          />
+          {renderColorSelectorComponent()}
         </SidePanelSection>
       );
     }

package/src/layers/base-layer.js

@@ -1119,7 +1119,7 @@ class Layer {
   updateVisualChannelFields(dataset) {
     for (const {field, range} of Object.values(this.visualChannels)) {
       const oldField = this.config[field];
-      const isUsingHexColorCode = this.config.visConfig[range].hexColor;
+      const isUsingHexColorCode = this.config.visConfig[range]?.hexColor;
       if (!oldField) {
         return;
       }