[Feat] Save and load highlightColor from layer config

src/layers/base-layer.js

@@ -43,7 +43,9 @@ import {
   LAYER_VIS_CONFIGS,
   DEFAULT_TEXT_LABEL,
   DEFAULT_COLOR_UI,
-  UNKNOWN_COLOR_KEY
+  UNKNOWN_COLOR_KEY,
+  DEFAULT_HIGHLIGHT_COLOR,
+  DEFAULT_LAYER_LABEL
 } from './layer-factory';
 
 import {generateHashId, isPlainObject} from 'utils/utils';
@@ -294,12 +296,12 @@ class Layer {
   getDefaultLayerConfig(props = {}) {
     return {
       dataId: props.dataId || null,
-      label: props.label || 'new layer',
+      label: props.label || DEFAULT_LAYER_LABEL,
       color: props.color || colorMaker.next().value,
       columns: props.columns || null,
       isVisible: props.isVisible || false,
       isConfigActive: props.isConfigActive || false,
-      highlightColor: props.highlightColor || [252, 242, 26, 255],
+      highlightColor: props.highlightColor || DEFAULT_HIGHLIGHT_COLOR,
       hidden: props.hidden || false,
 
       // TODO: refactor this into separate visual Channel config

src/layers/layer-factory.d.ts

@@ -142,6 +142,8 @@ export type LayerTextConfig = {
 export const DEFAULT_TEXT_LABEL: LayerTextLabel;
 export const DEFAULT_CUSTOM_PALETTE: ColorRange;
 export const DEFAULT_COLOR_UI: ColorUI;
+export const DEFAULT_HIGHLIGHT_COLOR: RGBAColor;
+export const DEFAULT_LAYER_LABEL: string;
 export const LAYER_VIS_CONFIGS: LayerVisConfig;
 export const LAYER_TEXT_CONFIGS: LayerTextConfig;
 export const UNKNOWN_COLOR_KEY: string;

src/layers/layer-factory.js

@@ -35,6 +35,8 @@ export const PROPERTY_GROUPS = keyMirror({
 });
 
 export const DEFAULT_LAYER_OPACITY = 0.8;
+export const DEFAULT_HIGHLIGHT_COLOR = [252, 242, 26, 255];
+export const DEFAULT_LAYER_LABEL = 'new layer';
 export {DEFAULT_COLOR_RANGE};
 
 /** @type {import('./layer-factory').LayerTextLabel} */

src/reducers/vis-state-merger.js

@@ -490,7 +490,8 @@ export function validateLayerWithData(
     label: savedLayer.config.label,
     color: savedLayer.config.color,
     isVisible: savedLayer.config.isVisible,
-    hidden: savedLayer.config.hidden
+    hidden: savedLayer.config.hidden,
+    highlightColor: savedLayer.config.highlightColor
   });
 
   // find column fieldIdx

src/schemas/schema-manager.d.ts

@@ -6,7 +6,8 @@ import {
   AnimationConfig,
   VisState,
   RGBColor,
-  Merge
+  Merge,
+  RGBAColor
 } from 'reducers';
 import {Schema} from './schema';
 
@@ -62,6 +63,7 @@ export type SavedLayer = {
     dataId: string;
     label: string;
     color: RGBColor;
+    highlightColor: RGBAColor;
     columns: {
       [key: string]: string;
     };

src/schemas/vis-state-schema.js

@@ -441,6 +441,7 @@ export const layerPropsV1 = {
       dataId: null,
       label: null,
       color: null,
+      highlightColor: null,
       columns: new ColumnSchemaV1({
         version: VERSIONS.v1,
         key: 'columns'

test/helpers/mock-state.js

@@ -25,7 +25,13 @@ import {getInitialInputStyle} from 'reducers/map-style-updaters';
 
 import keplerGlReducer from 'reducers/core';
 import {addDataToMap} from 'actions/actions';
-import {DEFAULT_TEXT_LABEL, DEFAULT_COLOR_RANGE, DEFAULT_LAYER_OPACITY} from 'layers/layer-factory';
+import {
+  DEFAULT_TEXT_LABEL,
+  DEFAULT_COLOR_RANGE,
+  DEFAULT_LAYER_OPACITY,
+  DEFAULT_HIGHLIGHT_COLOR,
+  DEFAULT_LAYER_LABEL
+} from 'layers/layer-factory';
 import {DEFAULT_KEPLER_GL_PROPS} from 'components';
 import * as VisStateActions from 'actions/vis-state-actions';
 import * as MapStateActions from 'actions/map-state-actions';
@@ -449,7 +455,8 @@ export const expectedSavedLayer0 = {
   type: 'hexagon',
   config: {
     dataId: testCsvDataId,
-    label: 'new layer',
+    label: DEFAULT_LAYER_LABEL,
+    highlightColor: DEFAULT_HIGHLIGHT_COLOR,
     color: [2, 2, 2],
     columns: {
       lat: 'gps_data.lat',
@@ -487,7 +494,8 @@ export const expectedLoadedLayer0 = {
   type: 'hexagon',
   config: {
     dataId: testCsvDataId,
-    label: 'new layer',
+    label: DEFAULT_LAYER_LABEL,
+    highlightColor: DEFAULT_HIGHLIGHT_COLOR,
     color: [2, 2, 2],
     columns: {
       lat: 'gps_data.lat',
@@ -524,6 +532,7 @@ export const expectedSavedLayer1 = {
   config: {
     dataId: testCsvDataId,
     label: 'gps data',
+    highlightColor: DEFAULT_HIGHLIGHT_COLOR,
     color: [0, 0, 0],
     columns: {
       lat: 'gps_data.lat',
@@ -579,6 +588,7 @@ export const expectedLoadedLayer1 = {
   config: {
     dataId: testCsvDataId,
     label: 'gps data',
+    highlightColor: DEFAULT_HIGHLIGHT_COLOR,
     color: [0, 0, 0],
     columns: {
       lat: 'gps_data.lat',
@@ -632,6 +642,7 @@ export const expectedSavedLayer2 = {
   config: {
     dataId: testGeoJsonDataId,
     label: 'zip',
+    highlightColor: DEFAULT_HIGHLIGHT_COLOR,
     color: [1, 1, 1],
     columns: {
       geojson: '_geojson'
@@ -678,6 +689,7 @@ export const expectedLoadedLayer2 = {
   config: {
     dataId: testGeoJsonDataId,
     label: 'zip',
+    highlightColor: DEFAULT_HIGHLIGHT_COLOR,
     color: [1, 1, 1],
     columns: {
       geojson: '_geojson'
@@ -734,6 +746,7 @@ export const expectedSavedTripLayer = {
   config: {
     dataId: 'trip_data',
     label: 'Trip Data',
+    highlightColor: DEFAULT_HIGHLIGHT_COLOR,
     color: [0, 0, 0],
     columns: {
       geojson: '_geojson'