Modifications based on comments

caravel/assets/javascripts/SqlLab/index.jsx

@@ -10,20 +10,14 @@ import TabbedSqlEditors from './components/TabbedSqlEditors';
 import QueryAutoRefresh from './components/QueryAutoRefresh';
 import Alerts from './components/Alerts';
 
-import { bindActionCreators, compose, createStore } from 'redux';
+import { bindActionCreators, createStore } from 'redux';
 import { connect, Provider } from 'react-redux';
 
 import { initialState, sqlLabReducer } from './reducers';
-import persistState from 'redux-localstorage';
+import { enhancer } from '../../utils/common';
 
 require('./main.css');
 
-let enhancer = compose(persistState());
-if (process.env.NODE_ENV === 'dev') {
-  enhancer = compose(
-    persistState(), window.devToolsExtension && window.devToolsExtension()
-  );
-}
 let store = createStore(sqlLabReducer, initialState, enhancer);
 
 // jquery hack to highlight the navbar menu

caravel/assets/javascripts/SqlLab/reducers.js

@@ -1,7 +1,9 @@
 import shortid from 'shortid';
 import * as actions from './actions';
 import { now } from '../modules/dates';
-import * as utils from '../../utils/reducerUtils';
+import
+  { addToArr, alterInArr, removeFromArr, addToObject, alterInObject }
+  from '../../utils/reducerUtils';
 
 const defaultQueryEditor = {
   id: shortid.generate(),
@@ -30,10 +32,10 @@ export const sqlLabReducer = function (state, action) {
       const tabHistory = state.tabHistory.slice();
       tabHistory.push(action.queryEditor.id);
       const newState = Object.assign({}, state, { tabHistory });
-      return utils.addToArr(newState, 'queryEditors', action.queryEditor);
+      return addToArr(newState, 'queryEditors', action.queryEditor);
     },
     [actions.REMOVE_QUERY_EDITOR]() {
-      let newState = utils.removeFromArr(state, 'queryEditors', action.queryEditor);
+      let newState = removeFromArr(state, 'queryEditors', action.queryEditor);
       // List of remaining queryEditor ids
       const qeIds = newState.queryEditors.map((qe) => qe.id);
       let th = state.tabHistory.slice();
@@ -50,25 +52,25 @@ export const sqlLabReducer = function (state, action) {
       return Object.assign({}, initialState);
     },
     [actions.ADD_TABLE]() {
-      return utils.addToArr(state, 'tables', action.table);
+      return addToArr(state, 'tables', action.table);
     },
     [actions.EXPAND_TABLE]() {
-      return utils.alterInArr(state, 'tables', action.table, { expanded: true });
+      return alterInArr(state, 'tables', action.table, { expanded: true });
     },
     [actions.COLLAPSE_TABLE]() {
-      return utils.alterInArr(state, 'tables', action.table, { expanded: false });
+      return alterInArr(state, 'tables', action.table, { expanded: false });
     },
     [actions.REMOVE_TABLE]() {
-      return utils.removeFromArr(state, 'tables', action.table);
+      return removeFromArr(state, 'tables', action.table);
     },
     [actions.START_QUERY]() {
-      const newState = utils.addToObject(state, 'queries', action.query);
+      const newState = addToObject(state, 'queries', action.query);
       const sqlEditor = { id: action.query.sqlEditorId };
-      return utils.alterInArr(
+      return alterInArr(
         newState, 'queryEditors', sqlEditor, { latestQueryId: action.query.id });
     },
     [actions.STOP_QUERY]() {
-      return utils.alterInObject(state, 'queries', action.query, { state: 'stopped' });
+      return alterInObject(state, 'queries', action.query, { state: 'stopped' });
     },
     [actions.QUERY_SUCCESS]() {
       const alts = {
@@ -78,11 +80,11 @@ export const sqlLabReducer = function (state, action) {
         progress: 100,
         endDttm: now(),
       };
-      return utils.alterInObject(state, 'queries', action.query, alts);
+      return alterInObject(state, 'queries', action.query, alts);
     },
     [actions.QUERY_FAILED]() {
       const alts = { state: 'failed', errorMessage: action.msg, endDttm: now() };
-      return utils.alterInObject(state, 'queries', action.query, alts);
+      return alterInObject(state, 'queries', action.query, alts);
     },
     [actions.SET_ACTIVE_QUERY_EDITOR]() {
       const qeIds = state.queryEditors.map((qe) => qe.id);
@@ -94,29 +96,29 @@ export const sqlLabReducer = function (state, action) {
       return state;
     },
     [actions.QUERY_EDITOR_SETDB]() {
-      return utils.alterInArr(state, 'queryEditors', action.queryEditor, { dbId: action.dbId });
+      return alterInArr(state, 'queryEditors', action.queryEditor, { dbId: action.dbId });
     },
     [actions.QUERY_EDITOR_SET_SCHEMA]() {
-      return utils.alterInArr(state, 'queryEditors', action.queryEditor, { schema: action.schema });
+      return alterInArr(state, 'queryEditors', action.queryEditor, { schema: action.schema });
     },
     [actions.QUERY_EDITOR_SET_TITLE]() {
-      return utils.alterInArr(state, 'queryEditors', action.queryEditor, { title: action.title });
+      return alterInArr(state, 'queryEditors', action.queryEditor, { title: action.title });
     },
     [actions.QUERY_EDITOR_SET_SQL]() {
-      return utils.alterInArr(state, 'queryEditors', action.queryEditor, { sql: action.sql });
+      return alterInArr(state, 'queryEditors', action.queryEditor, { sql: action.sql });
     },
     [actions.QUERY_EDITOR_SET_AUTORUN]() {
-      return utils.alterInArr(
+      return alterInArr(
         state, 'queryEditors', action.queryEditor, { autorun: action.autorun });
     },
     [actions.ADD_WORKSPACE_QUERY]() {
-      return utils.addToArr(state, 'workspaceQueries', action.query);
+      return addToArr(state, 'workspaceQueries', action.query);
     },
     [actions.REMOVE_WORKSPACE_QUERY]() {
-      return utils.removeFromArr(state, 'workspaceQueries', action.query);
+      return removeFromArr(state, 'workspaceQueries', action.query);
     },
     [actions.ADD_ALERT]() {
-      return utils.addToArr(state, 'alerts', action.alert);
+      return addToArr(state, 'alerts', action.alert);
     },
     [actions.SET_DATABASES]() {
       const databases = {};
@@ -126,7 +128,7 @@ export const sqlLabReducer = function (state, action) {
       return Object.assign({}, state, { databases });
     },
     [actions.REMOVE_ALERT]() {
-      return utils.removeFromArr(state, 'alerts', action.alert);
+      return removeFromArr(state, 'alerts', action.alert);
     },
     [actions.SET_NETWORK_STATUS]() {
       if (state.networkOn !== action.networkOn) {

caravel/assets/javascripts/explorev2/index.jsx

@@ -2,25 +2,22 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import ExploreViewContainer from './components/ExploreViewContainer';
 
-import { compose, createStore } from 'redux';
+import { createStore } from 'redux';
 import { Provider } from 'react-redux';
+import { enhancer } from '../../utils/common';
 
 import { initialState } from './stores/store';
 
 const exploreViewContainer = document.getElementById('js-explore-view-container');
 const bootstrapData = exploreViewContainer.getAttribute('data-bootstrap');
 
-
 import { exploreReducer } from './reducers/exploreReducer';
-import persistState from 'redux-localstorage';
 
-let enhancer = compose(persistState());
-if (process.env.NODE_ENV === 'dev') {
-  enhancer = compose(
-    persistState(), window.devToolsExtension && window.devToolsExtension()
-  );
-}
-let store = createStore(exploreReducer, initialState, enhancer);
+const bootstrappedState = Object.assign(initialState, {
+  datasources: bootstrapData.datasources,
+  viz: bootstrapData.viz,
+});
+const store = createStore(exploreReducer, bootstrappedState, enhancer);
 
 ReactDOM.render(
   <Provider store={store}>

caravel/assets/javascripts/explorev2/reducers/exploreReducer.js

@@ -1,5 +1,5 @@
 import * as actions from '../actions/exploreActions';
-import * as utils from '../../../utils/reducerUtils';
+import { addToArr, removeFromArr } from '../../../utils/reducerUtils';
 
 export const exploreReducer = function (state, action) {
   const actionHandlers = {
@@ -52,10 +52,10 @@ export const exploreReducer = function (state, action) {
       return Object.assign({}, state, { SQL: action.sql });
     },
     [actions.ADD_FILTER]() {
-      return utils.addToArr(state, 'filters', action.filter);
+      return addToArr(state, 'filters', action.filter);
     },
     [actions.REMOVE_FILTER]() {
-      return utils.removeFromArr(state, 'filters', action.filter);
+      return removeFromArr(state, 'filters', action.filter);
     },
   };
   if (action.type in actionHandlers) {

caravel/assets/javascripts/explorev2/stores/store.js

@@ -16,7 +16,9 @@ const defaultSql = {
 };
 
 export const initialState = {
+  datasources: null,
   datasourceId: null,
+  viz: null,
   vizType: null,
   timeFilter: defaultTimeFilter,
   groupBy: defaultGroupBy,

caravel/assets/utils/common.js

@@ -1,4 +1,7 @@
 /* eslint global-require: 0 */
+import persistState from 'redux-localstorage';
+import { compose } from 'redux';
+
 const d3 = window.d3 || require('d3');
 
 export const EARTH_CIRCUMFERENCE_KM = 40075.16;
@@ -26,3 +29,13 @@ export function rgbLuminance(r, g, b) {
   // Formula: https://en.wikipedia.org/wiki/Relative_luminance
   return (LUMINANCE_RED_WEIGHT * r) + (LUMINANCE_GREEN_WEIGHT * g) + (LUMINANCE_BLUE_WEIGHT * b);
 }
+
+export function getDevEnhancer() {
+  let enhancer = compose(persistState());
+  if (process.env.NODE_ENV === 'dev') {
+    enhancer = compose(
+      persistState(), window.devToolsExtension && window.devToolsExtension()
+    );
+  }
+  return enhancer;
+}