save and merge editor features in map config (#2071)

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com> Co-authored-by: Shan He <heshan0131@gmail.com>
keplergl · Jan 5, 2023 · 9416be4 · 9416be4
1 parent 217b89e
commit 9416be4
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 9 deletions.
diff --git a/src/reducers/src/vis-state-merger.ts b/src/reducers/src/vis-state-merger.ts
@@ -40,7 +40,7 @@ import {
   ParsedConfig
 } from '@kepler.gl/schemas';
 
-import {ParsedLayer, SavedInteractionConfig, TooltipInfo} from '@kepler.gl/types';
+import {ParsedLayer, SavedInteractionConfig, TooltipInfo, SavedEditor} from '@kepler.gl/types';
 import {KeplerTable, Datasets, assignGpuChannels, resetFilterGpuMode} from '@kepler.gl/table';
 
 /**
@@ -600,6 +600,21 @@ export function validateLayerWithData(
   return newLayer;
 }
 
+export function mergeEditor<S extends VisState>(state: S, savedEditor: SavedEditor) {
+  if (!savedEditor) {
+    return state;
+  }
+  return {
+    ...state,
+    editor: {
+      ...state.editor,
+      features: [...state.editor.features, ...(savedEditor.features || [])],
+      // if savedEditor.visible is undefined keep state.editor.visible
+      visible: savedEditor.visible ?? state.editor.visible
+    }
+  };
+}
+
 export function isValidMerger(merger: Merger): boolean {
   return isObject(merger) && typeof merger.merge === 'function' && typeof merger.prop === 'string';
 }
@@ -610,5 +625,6 @@ export const VIS_STATE_MERGERS: VisStateMergers = [
   {merge: mergeInteractions, prop: 'interactionConfig', toMergeProp: 'interactionToBeMerged'},
   {merge: mergeLayerBlending, prop: 'layerBlending'},
   {merge: mergeSplitMaps, prop: 'splitMaps', toMergeProp: 'splitMapsToBeMerged'},
-  {merge: mergeAnimationConfig, prop: 'animationConfig'}
+  {merge: mergeAnimationConfig, prop: 'animationConfig'},
+  {merge: mergeEditor, prop: 'editor'}
 ];
diff --git a/src/schemas/src/vis-state-schema.ts b/src/schemas/src/vis-state-schema.ts
@@ -806,6 +806,14 @@ export const propertiesV1 = {
       speed: null
     },
     key: 'animationConfig'
+  }),
+  editor: new Schema({
+    version: VERSIONS.v1,
+    properties: {
+      features: null,
+      visible: null
+    },
+    key: 'editor'
   })
 };
 

diff --git a/src/types/schemas.d.ts b/src/types/schemas.d.ts
@@ -1,6 +1,13 @@
 import {RGBColor, Merge, RGBAColor} from './types';
 
-import {Filter, TooltipInfo, InteractionConfig, AnimationConfig, SplitMap} from './reducers';
+import {
+  Filter,
+  TooltipInfo,
+  InteractionConfig,
+  AnimationConfig,
+  SplitMap,
+  Feature
+} from './reducers';
 
 import {LayerTextLabel} from './layers';
 
@@ -74,13 +81,19 @@ export type SavedAnimationConfig = {
   speed: AnimationConfig['speed'];
 };
 
+export type SavedEditor = {
+  features: Feature[];
+  visible: boolean;
+};
+
 export type SavedVisState = {
   filters: SavedFilter[];
   layers: SavedLayer[];
   interactionConfig: SavedInteractionConfig;
   layerBlending: string;
   splitMaps: SplitMap[];
   animationConfig: SavedAnimationConfig;
+  editor?: SavedEditor;
 };
 
 export type ParsedVisState = {

diff --git a/test/node/schemas/vis-state-schema-test.js b/test/node/schemas/vis-state-schema-test.js
@@ -40,6 +40,16 @@ import {
 import {keplerGlReducerCore as keplerGlReducer} from '@kepler.gl/reducers';
 import {VisStateActions} from '@kepler.gl/actions';
 
+const expectedVisStateEntries = [
+  'filters',
+  'layers',
+  'interactionConfig',
+  'layerBlending',
+  'splitMaps',
+  'animationConfig',
+  'editor'
+];
+
 test('#visStateSchema -> v1 -> save layers', t => {
   const initialState = cloneDeep(StateWFilesFiltersLayerColor);
 
@@ -48,8 +58,8 @@ test('#visStateSchema -> v1 -> save layers', t => {
 
   t.deepEqual(
     Object.keys(vsToSave),
-    ['filters', 'layers', 'interactionConfig', 'layerBlending', 'splitMaps', 'animationConfig'],
-    'visState should have all 5 entries'
+    expectedVisStateEntries,
+    `visState should have all ${expectedVisStateEntries.length} entries`
   );
 
   const exptectedSavedLayers = [expectedSavedLayer0, expectedSavedLayer1, expectedSavedLayer2];
@@ -69,8 +79,8 @@ test('#visStateSchema -> v1 -> load layers', t => {
 
   t.deepEqual(
     Object.keys(vsLoaded),
-    ['filters', 'layers', 'interactionConfig', 'layerBlending', 'splitMaps', 'animationConfig'],
-    'visState should have all 5 entries'
+    expectedVisStateEntries,
+    `visState should have all ${expectedVisStateEntries.length} entries`
   );
 
   const loadedLayers = vsLoaded.layers;
@@ -300,8 +310,8 @@ test('#visStateSchema -> v1 -> save animation', t => {
 
   t.deepEqual(
     Object.keys(vsToSave),
-    ['filters', 'layers', 'interactionConfig', 'layerBlending', 'splitMaps', 'animationConfig'],
-    'visState should have all 5 entries'
+    expectedVisStateEntries,
+    `visState should have all ${expectedVisStateEntries.length} entries`
   );
 
   const expectedSavedLayers = [expectedSavedTripLayer];