@carto/kepler.gl 0.0.71 → 0.0.72-alpha.2

package/src/components/common/item-selector/dropdown-list.js

@@ -35,7 +35,13 @@ export const classList = {
   listItemAnchor: 'list__item__anchor'
 };
 
-const defaultDisplay = d => d;
+const defaultDisplay = d => d.value || d;
+
+const Divider = styled.div`
+  border-top: 1px solid rgba(44, 48, 50, 0.12);
+  margin: 8px 0;
+`;
+
 export const ListItem = ({value, displayOption = defaultDisplay}) => (
   <span className={classList.listItemAnchor}>{displayOption(value)}</span>
 );
@@ -112,7 +118,7 @@ export default class DropdownList extends Component {
     submenuPosition: {}
   };
 
-  hasSubOptions = !!this.props.subOptions
+  hasSubOptions = !!this.props.subOptions;
 
   ref = createRef();
 
@@ -203,19 +209,21 @@ export default class DropdownList extends Component {
             ) : null}
 
             {this.props.options.map((value, i) => (
-              <Item
-                className={classNames(classList.listItem, {
-                  active: this.props.selectionIndex === i + valueOffset,
-                  hover: value.id && (this.state.currentOption?.id === value.id)
-                })}
-                key={`${display(value)}_${i}`}
-                onMouseDown={e => !this.hasSubOptions && this._onClick(value, null, e)}
-                onClick={e => !this.hasSubOptions && this._onClick(value, null, e)}
-                onMouseEnter={e => this._onMouseOver(value, e)}
-              >
-                <this.props.customListItemComponent value={value} displayOption={display} />
-                {this.props.withSubOptions && value.aggregators && <ChevronRight />}
-              </Item>
+              <div key={`${display(value)}_${i}`}>
+                {value.divider && <Divider />}
+                <Item
+                  className={classNames(classList.listItem, {
+                    active: this.props.selectionIndex === i + valueOffset,
+                    hover: value.id && (this.state.currentOption?.id === value.id)
+                  })}
+                  onMouseDown={e => !this.hasSubOptions && this._onClick(value, null, e)}
+                  onClick={e => !this.hasSubOptions && this._onClick(value, null, e)}
+                  onMouseEnter={e => this._onMouseOver(value, e)}
+                >
+                  <this.props.customListItemComponent value={value} displayOption={display} />
+                  {this.props.withSubOptions && value.aggregators && <ChevronRight />}
+                </Item>
+              </div>
             ))}
           </div>
         </DropdownListWrapper>

package/src/components/common/item-selector/item-selector.js

@@ -92,7 +92,7 @@ const DropdownSelectActionRight = styled.div`
 
 const DropdownWrapper = styled.div`
   border: 0;
-  width: 100%;
+  width: auto;
   left: 0;
   z-index: ${props => props.theme.dropdownWrapperZ};
   position: absolute;

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

@@ -29,16 +29,18 @@ 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} from 'constants/color-ranges';
+import {COLOR_RANGES, hexColor} 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 {HexColumnConfigFactory} from './hex-column-config';
 
 export const ALL_TYPES = uniq([
   'all',
   ...COLOR_RANGES.map(c => c.type).filter(ctype => ctype),
-  'custom'
+  'custom',
+  {value: hexColor, divider: true}
 ]);
 
 export const ALL_STEPS = uniq(COLOR_RANGES.map(d => d.colors.length)).sort(numberSort);
@@ -91,13 +93,19 @@ const CONFIG_SETTINGS = {
   }
 };
 
-ColorRangeSelectFactory.deps = [ColorPaletteGroupFactory, PaletteConfigFactory];
-export default function ColorRangeSelectFactory(ColorPaletteGroup, PaletteConfig) {
+ColorRangeSelectFactory.deps = [
+  ColorPaletteGroupFactory,
+  PaletteConfigFactory,
+  HexColumnConfigFactory
+];
+export default function ColorRangeSelectFactory(ColorPaletteGroup, PaletteConfig, HexColumnConfig) {
   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)
@@ -129,7 +137,7 @@ export default function ColorRangeSelectFactory(ColorPaletteGroup, PaletteConfig
     _updateConfig = ({key, value}) => {
       this._setColorRangeConfig({
         [key]: value,
-        ...(key === 'type' && {custom: value === 'custom'})
+        ...(key === 'type' && {custom: value === 'custom', isHexColumn: value === hexColor})
       });
     };
 
@@ -148,7 +156,7 @@ export default function ColorRangeSelectFactory(ColorPaletteGroup, PaletteConfig
     _onCustomPaletteCancel = newConfig => {
       this.props.setColorPaletteUI({
         showSketcher: false,
-        colorRangeConfig: {custom: false}
+        colorRangeConfig: {custom: false, isHexColumn: false}
       });
     };
 
@@ -158,6 +166,14 @@ export default function ColorRangeSelectFactory(ColorPaletteGroup, PaletteConfig
       });
     };
 
+    _onSelectColumn = column => {
+      this.props.onSelectColorColumn(column);
+      this._setColorRangeConfig({
+        type: hexColor,
+        hexColumn: column?.name
+      });
+    };
+
     render() {
       const {customPalette, showSketcher, colorRangeConfig} = this.props.colorPaletteUI;
       const filteredColorRanges = this.filteredColorRange(this.props);
@@ -168,7 +184,8 @@ export default function ColorRangeSelectFactory(ColorPaletteGroup, PaletteConfig
             {Object.keys(colorRangeConfig)
               .filter(
                 key =>
-                  Boolean(CONFIG_SETTINGS[key]) && (colorRangeConfig.custom ? key === 'type' : true)
+                  Boolean(CONFIG_SETTINGS[key]) &&
+                  (colorRangeConfig.custom || colorRangeConfig.isHexColumn ? key === 'type' : true)
               )
               .map(key => {
                 return (
@@ -193,6 +210,12 @@ export default function ColorRangeSelectFactory(ColorPaletteGroup, PaletteConfig
               setCustomPalette={this._onSetCustomPalette}
               onCancel={this._onCustomPaletteCancel}
             />
+          ) : colorRangeConfig.isHexColumn ? (
+            <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,6 +64,7 @@ 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]),
@@ -172,7 +173,9 @@ function ColorSelectorFactory(SingleColorPalette, ColorRangeSelector) {
                 <ColorRangeSelector
                   selectedColorRange={colorSets[editing].selectedColor}
                   onSelectColorRange={this._onSelectColor}
+                  onSelectColorColumn={this.props.onSelectHexColorColumn}
                   setColorPaletteUI={this.props.setColorUI}
+                  fields={this.props.fields}
                   colorPaletteUI={colorUI}
                 />
               ) : (

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

@@ -0,0 +1,45 @@
+import {FieldSelector} from 'components';
+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 {
+    static propTypes = {
+      fields: PropTypes.arrayOf(PropTypes.any),
+      value: PropTypes.string,
+      onSelectColumn: PropTypes.func.isRequired
+    };
+
+    render() {
+      const {fields, value, onSelectColumn, iconComponent} = this.props;
+      const IconElement = () => iconComponent || null;
+
+      return (
+        <>
+          <div className="color-palette__config__label">
+            <PanelLabel>
+              <FormattedMessage id={`color.hexColumn.field`} />
+              <IconElement data-test="icon-help-button" />
+            </PanelLabel>
+          </div>
+          <div>
+            <FieldSelector
+              fields={fields.filter(f => f.type === ALL_FIELD_TYPES.string)}
+              value={value}
+              placeholder={''}
+              onSelect={onSelectColumn}
+              erasable={false}
+              onFocus={() => null}
+              onBlur={() => null}
+            />
+          </div>
+        </>
+      );
+    }
+  }
+
+  return HexColumnConfig;
+}

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

@@ -41,12 +41,17 @@ import TextLabelPanelFactory from './text-label-panel';
 
 import {capitalizeFirstLetter} from 'utils/utils';
 
-import {CHANNEL_SCALES, CHANNEL_SCALE_SUPPORTED_FIELDS} from 'constants/default-settings';
+import {
+  CHANNEL_SCALES,
+  CHANNEL_SCALE_SUPPORTED_FIELDS,
+  SCALE_TYPES
+} 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 {DEFAULT_COLOR_RANGE, hexColorCustomPalette} from 'constants/color-ranges';
 
 const StyledLayerConfigurator = styled.div.attrs({
   className: 'layer-panel__config'
@@ -185,7 +190,7 @@ export default function LayerConfiguratorFactory(
               disabled={Boolean(layer.config.visConfig.customMarkers)}
             >
               {layer.config.strokeColorField ? (
-                <LayerColorRangeSelector {...visConfiguratorProps} property="strokeColorRange" />
+                <LayerColorRangeSelector {...visConfiguratorProps} channel="strokeColor" />
               ) : (
                 <LayerColorSelector
                   {...visConfiguratorProps}
@@ -701,7 +706,7 @@ export default function LayerConfiguratorFactory(
             collapsible
           >
             {layer.config.strokeColorField ? (
-              <LayerColorRangeSelector {...visConfiguratorProps} property="strokeColorRange" />
+              <LayerColorRangeSelector {...visConfiguratorProps} channel="strokeColor" />
             ) : (
               <LayerColorSelector
                 {...visConfiguratorProps}
@@ -884,7 +889,7 @@ export default function LayerConfiguratorFactory(
             collapsible
           >
             {layer.config.strokeColorField ? (
-              <LayerColorRangeSelector {...visConfiguratorProps} property="strokeColorRange" />
+              <LayerColorRangeSelector {...visConfiguratorProps} channel="strokeColor" />
             ) : (
               <LayerColorSelector
                 {...visConfiguratorProps}
@@ -1048,13 +1053,14 @@ LayerColorSelectorFactory.deps = [ColorSelectorFactory];
 export function LayerColorSelectorFactory(ColorSelector) {
   class LayerColorSelector extends Component {
     render() {
-      const {layer, onChange, selectedColor, property = 'color', setColorUI} = this.props;
+      const {layer, onChange, selectedColor, property = 'color', setColorUI, fields} = this.props;
       return (
         <SidePanelSection>
           <PanelLabel>
             <FormattedMessage id="layer.color" />
           </PanelLabel>
           <ColorSelector
+            fields={fields}
             colorSets={[
               {
                 selectedColor: selectedColor || layer.config.color,
@@ -1076,13 +1082,22 @@ ArcLayerColorSelectorFactory.deps = [ColorSelectorFactory];
 export function ArcLayerColorSelectorFactory(ColorSelector) {
   class ArcLayerColorSelector extends Component {
     render() {
-      const {layer, onChangeConfig, onChangeVisConfig, property = 'color', setColorUI} = this.props;
+      const {
+        layer,
+        onChangeConfig,
+        onChangeVisConfig,
+        property = 'color',
+        setColorUI,
+        fields
+      } = this.props;
+
       return (
         <SidePanelSection>
           <PanelLabel>
             <FormattedMessage id="layer.colorRange" />
           </PanelLabel>
           <ColorSelector
+            fields={fields}
             colorSets={[
               {
                 selectedColor: layer.config.color,
@@ -1109,13 +1124,22 @@ LayerColorRangeSelectorFactory.deps = [ColorSelectorFactory];
 export function LayerColorRangeSelectorFactory(ColorSelector) {
   class LayerColorRangeSelector extends Component {
     render() {
-      const {layer, onChange, property = 'colorRange', setColorUI} = this.props;
+      const {
+        layer,
+        onChange,
+        channel = 'color',
+        setColorUI,
+        fields,
+        handleCustomOnSelectHexColumn = () => null
+      } = 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],
@@ -1126,11 +1150,27 @@ export function LayerColorRangeSelectorFactory(ColorSelector) {
                     ? layer.updateColorMap(property, colorMap, colorRange)
                     : colorRange;
                   onChange({[property]: colorRangeUpdated});
+                  layer.validateScale(channel); // Validate scale to ensure that it changes from `identity` to the correct one.
                 }
               }
             ]}
             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});
+            }}
           />
         </SidePanelSection>
       );
@@ -1206,6 +1246,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/constants/color-ranges.js

@@ -61,3 +61,12 @@ 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,6 +45,7 @@ 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';
@@ -310,7 +311,8 @@ export const SCALE_TYPES = keyMirror({
   point: null,
   custom: null,
   // UI-only type, resolving as custom
-  logarithmic: null
+  logarithmic: null,
+  identity: null
 });
 
 export const SCALE_FUNC = {
@@ -321,7 +323,8 @@ export const SCALE_FUNC = {
   [SCALE_TYPES.sqrt]: scaleSqrt,
   [SCALE_TYPES.log]: scaleLog,
   [SCALE_TYPES.point]: scalePoint,
-  [SCALE_TYPES.custom]: scaleThreshold
+  [SCALE_TYPES.custom]: scaleThreshold,
+  [SCALE_TYPES.identity]: scaleIdentity
 };
 
 export const ALL_FIELD_TYPES = keyMirror({