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

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 HexColumnConfig 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);
@@ -95,9 +97,11 @@ 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)
@@ -119,7 +123,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) === colorRange.colors.length;
+          const isStep = Number(steps || 6) === colorRange.colors.length;
 
           return isType && isStep;
         });
@@ -129,7 +133,7 @@ export default function ColorRangeSelectFactory(ColorPaletteGroup, PaletteConfig
     _updateConfig = ({key, value}) => {
       this._setColorRangeConfig({
         [key]: value,
-        ...(key === 'type' && {custom: value === 'custom'})
+        ...(key === 'type' && {custom: value === 'custom', hexColumn: value === hexColor})
       });
     };
 
@@ -139,6 +143,12 @@ export default function ColorRangeSelectFactory(ColorPaletteGroup, PaletteConfig
       });
     };
 
+    _onSetHexColorColumn = config => {
+      this.props.setColorPaletteUI({
+        customPalette: config
+      });
+    };
+
     _setColorRangeConfig = newConfig => {
       this.props.setColorPaletteUI({
         colorRangeConfig: newConfig
@@ -148,7 +158,7 @@ export default function ColorRangeSelectFactory(ColorPaletteGroup, PaletteConfig
     _onCustomPaletteCancel = newConfig => {
       this.props.setColorPaletteUI({
         showSketcher: false,
-        colorRangeConfig: {custom: false}
+        colorRangeConfig: {custom: false, hexColumn: false}
       });
     };
 
@@ -158,6 +168,18 @@ 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);
@@ -168,7 +190,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.hexColumn ? key === 'type' : true)
               )
               .map(key => {
                 return (
@@ -176,8 +199,8 @@ export default function ColorRangeSelectFactory(ColorPaletteGroup, PaletteConfig
                     key={key}
                     label={CONFIG_SETTINGS[key].label || key}
                     config={CONFIG_SETTINGS[key]}
-                    value={colorRangeConfig[key]}
-                    onChange={value => this._updateConfig({key, value})}
+                    value={colorRangeConfig[key] || 6}
+                    onChange={value => this._handleOnChangePaletteType({key, value})}
                   />
                 );
               })}
@@ -193,6 +216,12 @@ 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,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]),
@@ -124,6 +125,10 @@ function ColorSelectorFactory(SingleColorPalette, ColorRangeSelector) {
       }
     };
 
+    _onSelectColorColumn = column => {
+      this.props.onSelectHexColorColumn(column);
+    };
+
     _showDropdown = (e, i) => {
       e.stopPropagation();
       e.preventDefault();
@@ -172,7 +177,9 @@ 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/hex-column-config.js

@@ -0,0 +1,40 @@
+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';
+
+class HexColumnConfig extends Component {
+  static propTypes = {
+    fields: PropTypes.arrayOf(PropTypes.any),
+    value: PropTypes.string,
+    onSelectColumn: PropTypes.func.isRequired
+  };
+
+  render() {
+    const {fields, value, onSelectColumn} = this.props;
+
+    return (
+      <>
+        <div className="color-palette__config__label">
+          <PanelLabel>
+            <FormattedMessage id={`color.hexColumn.field`} />
+          </PanelLabel>
+        </div>
+        <div>
+          <FieldSelector
+            fields={fields}
+            value={value}
+            placeholder={''}
+            onSelect={onSelectColumn}
+            erasable
+            onFocus={() => null}
+            onBlur={() => null}
+          />
+        </div>
+      </>
+    );
+  }
+}
+
+export default HexColumnConfig;

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

@@ -47,6 +47,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';
 
 const StyledLayerConfigurator = styled.div.attrs({
   className: 'layer-panel__config'
@@ -172,6 +173,8 @@ export default function LayerConfiguratorFactory(
                 channel={layer.visualChannels.color}
                 {...layerChannelConfigProps}
               />
+            </ConfigGroupCollapsibleContent>
+            <ConfigGroupCollapsibleContent>
               <VisConfigSlider {...layer.visConfigSettings.opacity} {...visConfiguratorProps} />
             </ConfigGroupCollapsibleContent>
           </LayerConfigGroup>
@@ -185,7 +188,11 @@ export default function LayerConfiguratorFactory(
               disabled={Boolean(layer.config.visConfig.customMarkers)}
             >
               {layer.config.strokeColorField ? (
-                <LayerColorRangeSelector {...visConfiguratorProps} property="strokeColorRange" />
+                <LayerColorRangeSelector
+                  {...visConfiguratorProps}
+                  property="strokeColorRange"
+                  field="strokeColorField"
+                />
               ) : (
                 <LayerColorSelector
                   {...visConfiguratorProps}
@@ -701,7 +708,11 @@ export default function LayerConfiguratorFactory(
             collapsible
           >
             {layer.config.strokeColorField ? (
-              <LayerColorRangeSelector {...visConfiguratorProps} property="strokeColorRange" />
+              <LayerColorRangeSelector
+                {...visConfiguratorProps}
+                property="strokeColorRange"
+                field="strokeColorField"
+              />
             ) : (
               <LayerColorSelector
                 {...visConfiguratorProps}
@@ -884,7 +895,11 @@ export default function LayerConfiguratorFactory(
             collapsible
           >
             {layer.config.strokeColorField ? (
-              <LayerColorRangeSelector {...visConfiguratorProps} property="strokeColorRange" />
+              <LayerColorRangeSelector
+                {...visConfiguratorProps}
+                property="strokeColorRange"
+                field="strokeColorField"
+              />
             ) : (
               <LayerColorSelector
                 {...visConfiguratorProps}
@@ -1048,13 +1063,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 +1092,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 +1134,21 @@ LayerColorRangeSelectorFactory.deps = [ColorSelectorFactory];
 export function LayerColorRangeSelectorFactory(ColorSelector) {
   class LayerColorRangeSelector extends Component {
     render() {
-      const {layer, onChange, property = 'colorRange', setColorUI} = this.props;
+      const {
+        layer,
+        onChange,
+        property = 'colorRange',
+        field = 'colorField',
+        setColorUI,
+        fields
+      } = this.props;
       return (
         <SidePanelSection>
           <PanelLabel>
             <FormattedMessage id="layer.colorRange" />
           </PanelLabel>
           <ColorSelector
+            fields={fields}
             colorSets={[
               {
                 selectedColor: layer.config.visConfig[property],
@@ -1131,6 +1164,17 @@ 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
+                }
+              });
+
+              onChange({[property]: hexColorCustomPalette});
+            }}
           />
         </SidePanelSection>
       );

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/layers/base-layer.js

@@ -38,7 +38,7 @@ import {
   UNKNOWN_COLOR,
   ZOOM_LEVEL_LIMITS
 } from 'constants/default-settings';
-import {COLOR_RANGES} from 'constants/color-ranges';
+import {COLOR_RANGES, hexColor} from 'constants/color-ranges';
 import {DataVizColors} from 'constants/custom-color-ranges';
 import {
   LAYER_VIS_CONFIGS,
@@ -100,7 +100,6 @@ export const colorMaker = generateColor();
 class Layer {
   constructor(props = {}) {
     this.id = props.id || generateHashId(LAYER_ID_LENGTH);
-
     // meta
     this.meta = {};
 
@@ -609,8 +608,9 @@ class Layer {
     };
 
     this.updateLayerConfig({colorUI});
-    // if colorUI[prop] is colorRange
-    const isColorRange = visConfig[prop] && visConfig[prop].colors;
+    // if colorUI[prop] is colorRange. If type is hexColor then it's also a range
+    const isColorRange =
+      visConfig[prop] && (visConfig[prop].colors || visConfig[prop].type === hexColor);
 
     if (isColorRange) {
       this.updateColorUIByColorRange(newConfig, prop);
@@ -663,8 +663,9 @@ class Layer {
           colorRangeConfig: {
             ...colorUI[prop].colorRangeConfig,
             type: visConfig[prop].type,
-            steps: visConfig[prop].colors.length,
-            reversed: Boolean(visConfig[prop].reversed)
+            steps: visConfig[prop].colors?.length,
+            reversed: Boolean(visConfig[prop].reversed),
+            hexColumn: this.isColoredByColorColumn(prop)
           }
         }
       }
@@ -732,6 +733,12 @@ class Layer {
   updateCategoryColorMap(colorMap, domain, colorRange) {
     const colors = colorRange.colors;
     const assignedCategories = [];
+    if (colorRange.type === hexColor) {
+      return {
+        ...colorRange,
+        colorMap: []
+      };
+    }
     const newColorMap = colorMap.slice(0, colors.length).map((cMap, index) => {
       assignedCategories.push(cMap[0]);
       return [cMap[0], colors[index]];
@@ -821,7 +828,11 @@ class Layer {
   }
 
   getColorScale(colorScale, colorDomain, colorRange) {
-    if (Array.isArray(colorRange.colorMap)) {
+    if (colorRange.type === hexColor) {
+      return (_, color) => {
+        return hexToRgb(color);
+      };
+    } else if (Array.isArray(colorRange.colorMap)) {
       const cMap = new Map();
       colorRange.colorMap.forEach(([k, v]) => {
         cMap.set(k, typeof v === 'string' ? hexToRgb(v) : v);
@@ -914,13 +925,15 @@ class Layer {
             : this.getVisChannelScale(...args, isFixed);
 
         attributeAccessors[accessor] = d =>
-          this.getEncodedChannelValue(
-            scaleFunction,
-            dataAccessor(dataContainer)(d),
-            fieldConfig,
-            aggregationValue,
+          this.getEncodedChannelValue({
+            channel,
+            dataContainer,
+            scale: scaleFunction,
+            data: dataAccessor(dataContainer)(d),
+            field: fieldConfig,
+            _aggregation: aggregationValue,
             nullValue
-          );
+          });
       } else if (typeof getAttributeValue === 'function') {
         attributeAccessors[accessor] = getAttributeValue(this.config);
       } else {
@@ -990,17 +1003,35 @@ class Layer {
     return triggerChanged;
   }
 
-  getEncodedChannelValue(
+  getEncodedChannelValue({
+    channel,
     scale,
     data,
     field,
+    dataContainer,
     // In builder we overwrite the getValue function and we use the _aggregation parameter in spatial index layers as the QuadkeyLayer.
     _aggregation,
     nullValue = NO_VALUE_COLOR,
     getValue = defaultGetFieldValue
-  ) {
+  }) {
+    let colorColumnValue;
     const {type} = field;
     const value = getValue(field, data);
+    const channelConfig = this.config.visConfig[this.visualChannels[channel].range];
+    const channelField = this.config[this.visualChannels[channel].field];
+
+    if (channelConfig.type === hexColor) {
+      const columnField = {
+        id: channelField.colorColumn,
+        name: channelField.colorColumn,
+        fieldIdx: channelField.colorColumnIdx,
+        valueAccessor: d => {
+          return dataContainer.valueAt(d.index, channelField.colorColumnIdx);
+        }
+      };
+
+      colorColumnValue = getValue(columnField, data);
+    }
 
     if (!notNullorUndefined(value)) {
       return nullValue;
@@ -1010,9 +1041,9 @@ class Layer {
     if (type === ALL_FIELD_TYPES.timestamp) {
       // shouldn't need to convert here
       // scale Function should take care of it
-      attributeValue = scale(new Date(value));
+      attributeValue = scale(new Date(value), colorColumnValue);
     } else {
-      attributeValue = scale(value);
+      attributeValue = scale(value, colorColumnValue);
     }
 
     if (!notNullorUndefined(attributeValue)) {
@@ -1046,13 +1077,14 @@ class Layer {
     if (!this.config.dataId) {
       return {};
     }
-    const layerDataset = datasets[this.config.dataId];
-    const {dataContainer} = layerDataset;
+    const dataset = this.getDataset(datasets);
+    const {dataContainer} = dataset;
 
-    this.updateVisualChannelFields(layerDataset);
+    this.updateVisualChannelFields(dataset);
+    this.updateHexColorDomain(dataset);
 
     const getPosition = this.getPositionAccessor(dataContainer);
-    const dataUpdateTriggers = this.getDataUpdateTriggers(layerDataset);
+    const dataUpdateTriggers = this.getDataUpdateTriggers(dataset);
     const triggerChanged = this.getChangedTriggers(dataUpdateTriggers);
 
     if (triggerChanged.getMeta) {
@@ -1065,7 +1097,7 @@ class Layer {
       // same data
       data = oldLayerData.data;
     } else {
-      data = this.calculateDataAttribute(layerDataset, getPosition);
+      data = this.calculateDataAttribute(dataset, getPosition);
     }
 
     return {data, triggerChanged};
@@ -1077,12 +1109,20 @@ class Layer {
    * @param {Object} dataset
    */
   updateVisualChannelFields(dataset) {
-    for (const {field} of Object.values(this.visualChannels)) {
+    for (const {field, range} of Object.values(this.visualChannels)) {
       const oldField = this.config[field];
+      const isUsingHexColorCode = this.config.visConfig[range].hexColor
       if (!oldField) {
         return;
       }
-      const newDataSetField = dataset.fields.find(fd => fd.name === oldField.name) || null;
+      let newDataSetField = dataset.fields.find(fd => fd.name === oldField.name) || null;
+      if (isUsingHexColorCode) {
+        newDataSetField = {
+          ...newDataSetField,
+          colorColumn: newDataSetField.colorColumn || oldField.colorColumn,
+          colorColumnIdx: newDataSetField.colorColumnIdx || oldField.colorColumnIdx
+        };
+      }
       this.updateLayerConfig({[field]: newDataSetField});
     }
   }
@@ -1103,6 +1143,7 @@ class Layer {
     Object.values(this.visualChannels).forEach(channel => {
       const {scale} = channel;
       const scaleType = this.config[scale];
+
       // ordinal domain is based on dataContainer, if only filter changed
       // no need to update ordinal domain
       if (!newFilter || scaleType !== SCALE_TYPES.ordinal) {
@@ -1224,6 +1265,24 @@ class Layer {
     return dataset.getColumnLayerDomain(dataSetField, scaleType) || defaultDomain;
   }
 
+  updateHexColorDomain(dataset) {
+    if (!dataset) {
+      return this;
+    }
+    Object.values(this.visualChannels).forEach(channel => {
+      const channelConfig = this.config.visConfig[channel.range];
+      const field = this.config[channel.field];
+
+      if (channelConfig?.type === hexColor) {
+        const dataSetField = dataset.fields.find(f => f.name === field.colorColumn);
+        const colors = dataset.getColumnLayerDomain(dataSetField, SCALE_TYPES.ordinal);
+        this.updateLayerVisConfig({[channel.range]: {...channelConfig, colors}});
+      }
+    });
+
+    return this;
+  }
+
   hasHoveredObject(objectInfo) {
     return this.isLayerHovered(objectInfo) && objectInfo.object ? objectInfo.object : null;
   }
@@ -1251,9 +1310,9 @@ class Layer {
 
     if (!radiusChannel || this.config[radiusChannel.field]) {
       return 1;
-    } else {
-      return this.config.visConfig.radius;
     }
+
+    return this.config.visConfig.radius;
   }
 
   getMaxMarkerSize() {
@@ -1434,6 +1493,13 @@ class Layer {
     // implemented in subclasses
     return () => null;
   }
+
+  isColoredByColorColumn(range) {
+    const field = Object.values(this.visualChannels)?.find(value => value.range === range)?.field;
+    if (field) {
+      return this.config[field].colorColumn;
+    }
+  }
 }
 
 export default Layer;

package/src/layers/layer-factory.d.ts

@@ -31,6 +31,7 @@ export type ColorUI = {
     steps: number;
     reversed: boolean;
     custom: boolean;
+    hexColumn: boolean;
   };
 };
 

package/src/layers/point-layer/point-layer.js

@@ -238,7 +238,7 @@ export default class PointLayer extends Layer {
   formatLayerData(datasets, oldLayerData) {
     const {textLabel} = this.config;
     const {gpuFilter, dataContainer} = datasets[this.config.dataId];
-    const {data, triggerChanged} = this.updateData(datasets, oldLayerData);
+    const {data} = this.updateData(datasets, oldLayerData);
     const getPosition = this.getPositionAccessor(dataContainer);
 
     // get all distinct characters in the text labels

package/src/localization/en.js

@@ -448,7 +448,10 @@ export default {
     customPalette: 'Custom Palette',
     steps: 'steps',
     type: 'type',
-    reversed: 'reversed'
+    reversed: 'reversed',
+    hexColumn: {
+      field: 'Color field'
+    }
   },
   customPalette: {
     apply: 'Apply',

package/src/reducers/vis-state-merger.js

@@ -423,6 +423,7 @@ export function validateSavedTextLabel(fields, [layerTextLabel], savedTextLabel)
 export function validateSavedVisualChannels(fields, newLayer, savedLayer) {
   Object.values(newLayer.visualChannels).forEach(({field, scale, key}) => {
     let foundField;
+    const colorFieldProps = {};
     if (savedLayer.config) {
       if (savedLayer.config[field]) {
         foundField = fields.find(
@@ -430,8 +431,19 @@ export function validateSavedVisualChannels(fields, newLayer, savedLayer) {
         );
       }
 
+      if (savedLayer.config[field]?.colorColumn) {
+        const colorColumnField = fields.find(
+          fd => savedLayer.config && fd.name === savedLayer.config[field].colorColumn
+        );
+
+        if (colorColumnField) {
+          colorFieldProps.colorColumn = colorColumnField.name;
+          colorFieldProps.colorColumnIdx = colorColumnField.fieldIdx;
+        }
+      }
+
       const foundChannel = {
-        ...(foundField ? {[field]: foundField} : {}),
+        ...(foundField ? {[field]: {...foundField, ...colorFieldProps}} : {}),
         ...(savedLayer.config[scale] ? {[scale]: savedLayer.config[scale]} : {})
       };
       if (Object.keys(foundChannel).length) {

package/src/schemas/vis-state-schema.js

@@ -340,7 +340,7 @@ class VisualChannelSchemaV1 extends Schema {
         (accu, key) => ({
           ...accu,
           [visualChannels[key].field]: layer.config[visualChannels[key].field]
-            ? pick(layer.config[visualChannels[key].field], ['name', 'type'])
+            ? pick(layer.config[visualChannels[key].field], ['name', 'type', 'colorColumn'])
             : null,
           [visualChannels[key].scale]: layer.config[visualChannels[key].scale]
         }),