@carto/kepler.gl 0.0.72-alpha.1 → 0.0.72-alpha.3

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-alpha.1",
+  "version": "0.0.72-alpha.3",
   "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/color-range-selector.js

@@ -137,7 +137,8 @@ export default function ColorRangeSelectFactory(ColorPaletteGroup, PaletteConfig
     _updateConfig = ({key, value}) => {
       this._setColorRangeConfig({
         [key]: value,
-        ...(key === 'type' && {custom: value === 'custom', isHexColumn: value === hexColor})
+        ...(key === 'type' && {custom: value === 'custom', isHexColumn: value === hexColor}),
+        ...(key === 'type' && value !== hexColor && {hexColumn: null})
       });
     };
 

package/src/components/side-panel/layer-panel/hex-column-config.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import {PanelLabel} from 'components/common/styled-components';
 import {FormattedMessage} from 'localization';
 import React, {Component} from 'react';
+import {ALL_FIELD_TYPES} from 'constants/default-settings';
 
 export function HexColumnConfigFactory() {
   class HexColumnConfig extends Component {
@@ -26,11 +27,11 @@ export function HexColumnConfigFactory() {
           </div>
           <div>
             <FieldSelector
-              fields={fields}
+              fields={fields.filter(f => f.type === ALL_FIELD_TYPES.string)}
               value={value}
               placeholder={''}
               onSelect={onSelectColumn}
-              erasable
+              erasable={false}
               onFocus={() => null}
               onBlur={() => null}
             />

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

@@ -51,7 +51,7 @@ 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';
+import {DEFAULT_COLOR_RANGE, hexColorCustomPalette} from 'constants/color-ranges';
 
 const StyledLayerConfigurator = styled.div.attrs({
   className: 'layer-panel__config'
@@ -1149,8 +1149,12 @@ export function LayerColorRangeSelectorFactory(ColorSelector) {
                   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({[scale]: SCALE_TYPES.ordinal});
+                  layer.validateScale(channel);
+                  // ---------------------------------------
                   onChange({[property]: colorRangeUpdated});
-                  layer.validateScale(channel); // Validate scale to ensure that it changes from `identity` to the correct one.
                 }
               }
             ]}
@@ -1246,6 +1250,11 @@ export function ChannelByValueSelectorFactory(VisConfigByFieldSelector) {
           if (visRange?.colorMap) {
             onChangeVisConfig({[range]: {...visRange, colorMap: undefined}});
           }
+          if (!val) {
+            // Clean everything and comeback to default behaviour
+            onChange({[field]: null}, key);
+            onChangeVisConfig({[range]: DEFAULT_COLOR_RANGE});
+          }
           onChange(
             {
               [field]: val,

package/src/layers/base-layer.js

@@ -1064,7 +1064,7 @@ class Layer {
   }
 
   updateLayerLegend(settings) {
-    this.legendSettings = {...this.legendSettings, ...settings};
+    this.legendSettings = settings;
   }
 
   getDataUpdateTriggers({filteredIndex, id, allData}) {
@@ -1286,7 +1286,7 @@ class Layer {
       const channelConfig = this.config.visConfig[channel.range];
       const field = this.config[channel.field];
 
-      if (channelConfig?.type === hexColor) {
+      if (channelConfig?.type === hexColor && field?.colorColumn) {
         const dataSetField = dataset.fields.find(f => f.name === field.colorColumn);
         const colors = dataset
           .getColumnLayerDomain(dataSetField, SCALE_TYPES.ordinal)
@@ -1311,7 +1311,7 @@ class Layer {
       const channelConfig = this.config.visConfig[range];
       const field = this.config[channelField];
 
-      if (channelConfig?.type === hexColor) {
+      if (channelConfig?.type === hexColor && field?.colorColumn) {
         const dataSetField = dataset.fields.find(f => f.name === field.colorColumn);
         const legend = dataset.calculateLegend(field, dataSetField);
         legends[channel] = legend;