@carto/kepler.gl 0.0.72 → 0.0.74

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.74",
   "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,
@@ -1134,23 +1157,20 @@ export function LayerColorRangeSelectorFactory(ColorSelector) {
       } = this.props;
       const {range: property, field, scale} = layer.visualChannels[channel];
       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.
+        <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.
+                if (layer.isColoredByColorColumn(property)) {
                   layer.updateLayerConfig({
                     [field]: {
                       ...layer.config[field],
@@ -1160,29 +1180,47 @@ export function LayerColorRangeSelectorFactory(ColorSelector) {
                     [scale]: SCALE_TYPES.ordinal
                   });
                   layer.validateScale(channel);
-                  // ---------------------------------------
-                  onChange({[property]: colorRangeUpdated});
                 }
+                // ---------------------------------------
+                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});
-            }}
-          />
+            }
+          ]}
+          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>
+          {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;
       }
@@ -1533,7 +1533,7 @@ class Layer {
   getHexColumn(range) {
     const field = Object.values(this.visualChannels)?.find(value => value.range === range)?.field;
     if (field) {
-      return this.config[field].colorColumn;
+      return this.config[field]?.colorColumn;
     }
   }