fix mapState saving and filter reload

Signed-off-by: Shan He <[email protected]>

Author: heshan0131

README.md

@@ -64,7 +64,7 @@ open tableau workbook (get it from public folder of this repo)
 - NOTE: if you want to enable remote debugging, use this command in terminal to open tableau
 
 ```sh
-open /Applications/Tableau\ Desktop\ 2018\.3.app --args --remote-debugging-port=8696
+open /Applications/Tableau\ Desktop\ 2019\.1.app --args --remote-debugging-port=8696
 ```
 
 A debug session will be available in browser http://localhost:8696

src/components/KeplerGL/index.js

@@ -53,12 +53,14 @@ class KeplerGlComponent extends React.Component {
         label: selectedSheet
       }
     };
+    const config = keplerConfig ? JSON.parse(keplerConfig) : undefined;
+    const hasMapStateConfig = Boolean(config && config.mapState);
 
     this.props.dispatch(
       addDataToMap({
         datasets,
-        options: {readOnly, centerMap: true},
-        config: keplerConfig ? JSON.parse(keplerConfig) : undefined
+        options: {readOnly, centerMap: !hasMapStateConfig},
+        config
       })
     );
   }

src/reducers.js

@@ -70,10 +70,14 @@ function markerSelectUpdater(state, action) {
   const {field, values} = action.payload;
   const visState = visStateSelector(state);
   let currentFilterIdx = visState.filters.findIndex(f => f.name === field && f.dataId === DATA_ID && f.tableauMarkerFilter);
-
   let nextState = visState;
   if (values.length) {
     if (currentFilterIdx < 0) {
+      const filterField = getFilterField(visState, field);
+      if (!filterField) {
+        // field not in visState
+        return state;
+      }
       log('add filter based on marker')
       // add filter
       nextState = visStateUpdaters.addFilterUpdater(nextState, {dataId: DATA_ID});
@@ -85,7 +89,7 @@ function markerSelectUpdater(state, action) {
       nextState = visStateUpdaters.setFilterUpdater(nextState, {idx, prop: 'dataId', value: DATA_ID});
 
       // set filter name and props
-      const newFilter = getNewFilter(nextState, idx, field);
+      const newFilter = getNewFilter(nextState, idx, filterField);
       nextState = {
         ...nextState,
         filters: nextState.filters.map((f, i) => i === idx ? newFilter : f)
@@ -97,7 +101,7 @@ function markerSelectUpdater(state, action) {
     nextState = visStateUpdaters.setFilterUpdater(nextState, {idx: currentFilterIdx, prop: 'value', value: values});
   } else if (currentFilterIdx >= 0) {
     // remove filter
-    log('remove gilter based on marker')
+    log('remove filter based on marker')
     nextState = visStateUpdaters.removeFilterUpdater(nextState, {idx: currentFilterIdx});
   }
 
@@ -119,24 +123,24 @@ function updateKeplerGlState(state, newState) {
 }
 
 function getNewFilter(state, idx, field) {
-  const filterField = getFilterField(state, field);
-  const fieldIdx = filterField.tableFieldIndex - 1;
+  const fieldIdx = field.tableFieldIndex - 1;
   const values = state.datasets[DATA_ID].allData.map(row => row[fieldIdx]);
 
   const filterProp = {
     domain: unique(values).sort(),
-    fieldType: filterField.type,
+    fieldType: field.type,
     type: 'multiSelect',
     value: []
   };
 
   const newFilter = {
     ...state.filters[idx],
     ...filterProp,
-    name: field,
+    name: field.name,
     // can't edit dataId once name is selected
     freeze: true,
     fieldIdx,
+    // add tableau identifier to filter
     tableauMarkerFilter: true
   };