Merge pull request #14 from keplergl/disable-save

disable calling config callback if in readOnly

Author: Chris DeMartini

package.json

@@ -33,15 +33,15 @@
     "@tableau/tableau-ui": "^2.1.0",
     "core-js": "^2.6.0",
     "gh-pages": "^2.0.1",
-    "kepler.gl": "1.1.11",
+    "kepler.gl": "1.1.13",
     "lodash.throttle": "^4.1.1",
     "react": "^16.8.4",
     "react-beautiful-dnd": "^9.0.2",
     "react-bootstrap": "^0.32.1",
     "react-dom": "^16.8.4",
-    "react-palm": "^1.1.2",
-    "react-redux": "^4.4.5",
-    "react-router": "^3.0.5",
+    "react-palm": "^3.1.2",
+    "react-redux": "^7.1.3",
+    "react-router": "3.2.5",
     "react-router-redux": "^4.0.8",
     "react-scripts": "^2.1.3",
     "react-spinkit": "^3.0.0",

src/App.js

@@ -810,6 +810,7 @@ class App extends Component {
         </div>
       );
     }
+    const readOnly = tableauSettingsState.readOnly === 'true'
 
     return (
       <KeplerGlComponent
@@ -820,7 +821,7 @@ class App extends Component {
         selectedSheet={this.state.selectedSheet}
         tableauSettings={tableauSettingsState}
         theme={tableauSettingsState.theme}
-        readOnly={tableauSettingsState.readOnly === 'true'}
+        readOnly={readOnly}
         keplerConfig={tableauSettingsState.keplerConfig}
         mapboxAPIKey={
           tableauSettingsState.mapboxAPIKey
@@ -829,7 +830,7 @@ class App extends Component {
         }
         isLoading={isLoading}
         // persist state to tableau
-        configCallBack={this.configCallBack}
+        configCallBack={readOnly ? null : this.configCallBack}
         // interactivity
         clickCallBack={this.clickCallBack}
         hoverCallBack={this.hoverCallBack}

src/components/KeplerGL/app.js

@@ -101,6 +101,10 @@ class App extends Component {
   }
 
   handleConfigChange() {
+    if (typeof this.props.configCallBack !== 'function') {
+      return;
+    }
+
     const currentState = this.getMapConfig();
     if (!currentState) {
       return;

src/components/KeplerGL/index.js

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

src/reducers.js

@@ -22,7 +22,6 @@ import {combineReducers} from 'redux';
 import {handleActions} from 'redux-actions';
 import {routerReducer} from 'react-router-redux';
 import keplerGlReducer, {visStateUpdaters} from 'kepler.gl/reducers';
-import {FILTER_TYPES} from 'kepler.gl/constants';
 import {MAP_ID, DATA_ID} from './constants';
 import {MARKER_SELECT} from './actions';
 import {log} from './utils';
@@ -52,6 +51,8 @@ const composedReducer = (state, action) => {
   switch (action.type) {
     case MARKER_SELECT:
       return markerSelectUpdater(state, action);
+    default:
+      break;
   }
 
   return reducers(state, action);
@@ -69,7 +70,7 @@ 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 currentFilterIdx = visState.filters.findIndex(f => f.name.includes(field) && f.dataId.includes(DATA_ID) && f.tableauMarkerFilter);
   let nextState = visState;
   if (values.length) {
     if (currentFilterIdx < 0) {
@@ -80,7 +81,7 @@ function markerSelectUpdater(state, action) {
       }
       log('add filter based on marker')
       // add filter
-      nextState = visStateUpdaters.addFilterUpdater(nextState, {dataId: DATA_ID});
+      nextState = visStateUpdaters.addFilterUpdater(nextState, {dataId: [DATA_ID]});
 
       // added filter should be the last one
       const idx = nextState.filters.length - 1;
@@ -136,10 +137,10 @@ function getNewFilter(state, idx, field) {
   const newFilter = {
     ...state.filters[idx],
     ...filterProp,
-    name: field.name,
+    name: [field.name],
     // can't edit dataId once name is selected
     freeze: true,
-    fieldIdx,
+    fieldIdx: [fieldIdx],
     // add tableau identifier to filter
     tableauMarkerFilter: true
   };

src/store.js

@@ -20,12 +20,10 @@
 
 import {createStore, applyMiddleware, compose} from 'redux';
 
-import window from 'global/window';
 import {taskMiddleware} from 'react-palm/tasks';
 import {routerMiddleware} from 'react-router-redux';
 import {hashHistory} from 'react-router';
 import reducers from './reducers';
-import KeplerGlSchema from 'kepler.gl/schemas';
 
 export const middlewares = [
   taskMiddleware,