Put formData in store (#1281)

* Put formData in store * Reform actions and reducers * Maded modifications based on comments:
2016-10-07 14:53:36 -07:00 · 2016-10-07 14:53:36 -07:00 · b7d1f78f5e
parent 3384e7598e
commit b7d1f78f5e
13 changed files with 283 additions and 390 deletions
--- a/caravel/assets/javascripts/explorev2/actions/exploreActions.js
+++ b/caravel/assets/javascripts/explorev2/actions/exploreActions.js
@ -1,26 +1,13 @@
 const $ = window.$ = require('jquery');
 export const SET_DATASOURCE = 'SET_DATASOURCE';
-export const SET_VIZTYPE = 'SET_VIZTYPE';
 export const SET_TIME_COLUMN_OPTS = 'SET_TIME_COLUMN_OPTS';
 export const SET_TIME_GRAIN_OPTS = 'SET_TIME_GRAIN_OPTS';
-export const SET_TIME_COLUMN = 'SET_TIME_COLUMN';
-export const SET_TIME_GRAIN = 'SET_TIME_GRAIN';
-export const SET_SINCE = 'SET_SINCE';
-export const SET_UNTIL = 'SET_UNTIL';
-export const SET_GROUPBY_COLUMNS = 'SET_GROUPBY_COLUMNS';
 export const SET_GROUPBY_COLUMN_OPTS = 'SET_GROUPBY_COLUMN_OPTS';
-export const SET_METRICS = 'SET_METRICS';
 export const SET_METRICS_OPTS = 'SET_METRICS_OPTS';
 export const SET_COLUMN_OPTS = 'SET_COLUMN_OPTS';
-export const SET_NOT_GROUPBY_COLUMNS = 'SET_NOT_GROUPBY_COLUMNS';
 export const SET_ORDERING_OPTS = 'SET_ORDERING_OPTS';
-export const SET_ORDERINGS = 'SET_ORDERINGS';
-export const SET_TIME_STAMP_FORMAT = 'SET_TIME_STAMP_FORMAT';
-export const SET_ROW_LIMIT = 'SET_ROW_LIMIT';
 export const TOGGLE_SEARCHBOX = 'TOGGLE_SEARCHBOX';
 export const SET_FILTER_COLUMN_OPTS = 'SET_FILTER_COLUMN_OPTS';
-export const SET_WHERE_CLAUSE = 'SET_WHERE_CLAUSE';
-export const SET_HAVING_CLAUSE = 'SET_HAVING_CLAUSE';
 export const ADD_FILTER = 'ADD_FILTER';
 export const SET_FILTER = 'SET_FILTER';
 export const REMOVE_FILTER = 'REMOVE_FILTER';
@ -30,6 +17,7 @@ export const CHANGE_FILTER_VALUE = 'CHANGE_FILTER_VALUE';
 export const RESET_FORM_DATA = 'RESET_FORM_DATA';
 export const CLEAR_ALL_OPTS = 'CLEAR_ALL_OPTS';
 export const SET_DATASOURCE_TYPE = 'SET_DATASOURCE_TYPE';
+export const SET_FORM_DATA = 'SET_FORM_DATA';

 export function setTimeColumnOpts(timeColumnOpts) {
  return { type: SET_TIME_COLUMN_OPTS, timeColumnOpts };
@ -131,62 +119,10 @@ export function setDatasource(datasourceId) {
  return { type: SET_DATASOURCE, datasourceId };
 }

-export function setVizType(vizType) {
-  return { type: SET_VIZTYPE, vizType };
-}
-
-export function setTimeColumn(timeColumn) {
-  return { type: SET_TIME_COLUMN, timeColumn };
-}
-
-export function setTimeGrain(timeGrain) {
-  return { type: SET_TIME_GRAIN, timeGrain };
-}
-
-export function setSince(since) {
-  return { type: SET_SINCE, since };
-}
-
-export function setUntil(until) {
-  return { type: SET_UNTIL, until };
-}
-
-export function setGroupByColumns(groupByColumns) {
-  return { type: SET_GROUPBY_COLUMNS, groupByColumns };
-}
-
-export function setMetrics(metrics) {
-  return { type: SET_METRICS, metrics };
-}
-
-export function setNotGroupByColumns(columns) {
-  return { type: SET_NOT_GROUPBY_COLUMNS, columns };
-}
-
-export function setOrderings(orderings) {
-  return { type: SET_ORDERINGS, orderings };
-}
-
-export function setTimeStampFormat(timeStampFormat) {
-  return { type: SET_TIME_STAMP_FORMAT, timeStampFormat };
-}
-
-export function setRowLimit(rowLimit) {
-  return { type: SET_ROW_LIMIT, rowLimit };
-}
-
 export function toggleSearchBox(searchBox) {
  return { type: TOGGLE_SEARCHBOX, searchBox };
 }

-export function setWhereClause(whereClause) {
-  return { type: SET_WHERE_CLAUSE, whereClause };
-}
-
-export function setHavingClause(havingClause) {
-  return { type: SET_HAVING_CLAUSE, havingClause };
-}
-
 export function addFilter(filter) {
  return { type: ADD_FILTER, filter };
 }
@ -206,3 +142,7 @@ export function changeFilterOp(filter, op) {
 export function changeFilterValue(filter, value) {
  return { type: CHANGE_FILTER_VALUE, filter, value };
 }
+
+export function setFormData(key, value) {
+  return { type: SET_FORM_DATA, key, value };
+}
--- a/caravel/assets/javascripts/explorev2/components/ChartControl.jsx
+++ b/caravel/assets/javascripts/explorev2/components/ChartControl.jsx
@ -32,13 +32,13 @@ class ChartControl extends React.Component {
    this.props.actions.resetFormData();
    this.props.actions.setFormOpts(val, this.props.datasourceType);
  }
-  changeViz(vizOpt) {
-    const val = (vizOpt) ? vizOpt.value : null;
-    this.props.actions.setVizType(val);
+  changeViz(opt) {
+    const val = opt ? opt.value : null;
+    this.props.actions.setFormData('vizType', val);
  }
  render() {
    return (
-      <div className="panel space-1">
+      <div className="panel">
        <div className="panel-header">Chart Options</div>
        <div className="panel-body">
          <h5 className="section-heading">Datasource</h5>
@ -77,7 +77,7 @@ function mapStateToProps(state) {
    datasources: state.datasources,
    datasourceId: state.datasourceId,
    datasourceType: state.datasourceType,
-    vizType: state.vizType,
+    vizType: state.viz.formData.vizType,
  };
 }

--- a/caravel/assets/javascripts/explorev2/components/ControlPanelsContainer.jsx
+++ b/caravel/assets/javascripts/explorev2/components/ControlPanelsContainer.jsx
@ -29,7 +29,7 @@ ControlPanelsContainer.defaultProps = defaultProps;

 function mapStateToProps(state) {
  return {
-    vizType: state.vizType,
+    vizType: state.viz.formData.vizType,
  };
 }

--- a/caravel/assets/javascripts/explorev2/components/GroupBy.jsx
+++ b/caravel/assets/javascripts/explorev2/components/GroupBy.jsx
@ -1,8 +1,8 @@
 import React from 'react';
-import Select from 'react-select';
 import { bindActionCreators } from 'redux';
 import * as actions from '../actions/exploreActions';
 import { connect } from 'react-redux';
+import SelectArray from './SelectArray';

 const propTypes = {
  actions: React.PropTypes.object,
@ -19,47 +19,33 @@ const defaultProps = {
  groupByColumns: [],
 };

-class GroupBy extends React.Component {
-  changeColumns(groupByColumns) {
-    this.props.actions.setGroupByColumns(groupByColumns);
-  }
-  changeMetrics(metrics) {
-    this.props.actions.setMetrics(metrics);
-  }
-  render() {
-    return (
-      <div className="panel space-1">
-        <div className="panel-header">GroupBy</div>
-        <div className="panel-body">
-          <div className="row">
-            <h5 className="section-heading">GroupBy Column</h5>
-            <Select
-              multi
-              name="select-time-column"
-              placeholder="Select groupby columns"
-              options={this.props.groupByColumnOpts}
-              value={this.props.groupByColumns}
-              autosize={false}
-              onChange={this.changeColumns.bind(this)}
-            />
-          </div>
-          <div className="row">
-            <h5 className="section-heading">Metrics</h5>
-            <Select
-              multi
-              name="select-since"
-              placeholder="Select metrics"
-              options={this.props.metricsOpts}
-              value={this.props.metrics}
-              autosize={false}
-              onChange={this.changeMetrics.bind(this)}
-            />
-          </div>
-        </div>
+const GroupBy = (props) => {
+  const selects = [
+    {
+      key: 'groupByColumns',
+      title: 'Group By',
+      options: props.groupByColumnOpts,
+      value: props.groupByColumns,
+      multi: true,
+      width: '12',
+    },
+    {
+      key: 'metrics',
+      title: 'Metrics',
+      options: props.metricsOpts,
+      value: props.metrics,
+      multi: true,
+      width: '12',
+    }];
+  return (
+    <div className="panel">
+      <div className="panel-header">GroupBy</div>
+      <div className="panel-body">
+        <SelectArray selectArray={selects} />
      </div>
-    );
-  }
-}
+    </div>
+  );
+};

 GroupBy.propTypes = propTypes;
 GroupBy.defaultProps = defaultProps;
@ -67,9 +53,9 @@ GroupBy.defaultProps = defaultProps;
 function mapStateToProps(state) {
  return {
    metricsOpts: state.metricsOpts,
-    metrics: state.metrics,
+    metrics: state.viz.formData.metrics,
    groupByColumnOpts: state.groupByColumnOpts,
-    groupByColumns: state.groupByColumns,
+    groupByColumns: state.viz.formData.groupByColumns,
  };
 }

--- a/caravel/assets/javascripts/explorev2/components/NotGroupBy.jsx
+++ b/caravel/assets/javascripts/explorev2/components/NotGroupBy.jsx
@ -1,5 +1,5 @@
 import React from 'react';
-import Select from 'react-select';
+import SelectArray from './SelectArray';
 import { bindActionCreators } from 'redux';
 import * as actions from '../actions/exploreActions';
 import { connect } from 'react-redux';
@ -19,47 +19,33 @@ const defaultProps = {
  orderings: [],
 };

-class NotGroupBy extends React.Component {
-  changeColumns(columns) {
-    this.props.actions.setNotGroupByColumns(columns);
-  }
-  changeOrderings(orderings) {
-    this.props.actions.setOrderings(orderings);
-  }
-  render() {
-    return (
-      <div className="panel space-1">
-        <div className="panel-header">Not GroupBy</div>
-        <div className="panel-body">
-          <div className="row">
-            <h5 className="section-heading">Columns</h5>
-            <Select
-              multi
-              name="select-column"
-              placeholder="Select columns"
-              options={this.props.columnOpts}
-              value={this.props.columns}
-              autosize={false}
-              onChange={this.changeColumns.bind(this)}
-            />
-          </div>
-          <div className="row">
-            <h5 className="section-heading">Orderings</h5>
-            <Select
-              multi
-              name="select-orderings"
-              placeholder="Select orderings"
-              options={this.props.orderingOpts}
-              value={this.props.orderings}
-              autosize={false}
-              onChange={this.changeOrderings.bind(this)}
-            />
-          </div>
-        </div>
+const NotGroupBy = (props) => {
+  const selects = [
+    {
+      key: 'columns',
+      title: 'Columns',
+      options: props.columnOpts,
+      value: props.columns,
+      multi: true,
+      width: '12',
+    },
+    {
+      key: 'orderings',
+      title: 'Orderings',
+      options: props.orderingOpts,
+      value: props.orderings,
+      multi: true,
+      width: '12',
+    }];
+  return (
+    <div className="panel">
+      <div className="panel-header">Not GroupBy</div>
+      <div className="panel-body">
+        <SelectArray selectArray={selects} />
      </div>
-    );
-  }
-}
+    </div>
+  );
+};

 NotGroupBy.propTypes = propTypes;
 NotGroupBy.defaultProps = defaultProps;
@ -67,9 +53,9 @@ NotGroupBy.defaultProps = defaultProps;
 function mapStateToProps(state) {
  return {
    columnOpts: state.columnOpts,
-    columns: state.columns,
+    columns: state.viz.formData.columns,
    orderingOpts: state.orderingOpts,
-    orderings: state.orderings,
+    orderings: state.viz.formData.orderings,
  };
 }

--- a/caravel/assets/javascripts/explorev2/components/Options.jsx
+++ b/caravel/assets/javascripts/explorev2/components/Options.jsx
@ -1,5 +1,5 @@
 import React from 'react';
-import Select from 'react-select';
+import SelectArray from './SelectArray';
 import { bindActionCreators } from 'redux';
 import * as actions from '../actions/exploreActions';
 import { connect } from 'react-redux';
@ -16,54 +16,39 @@ const defaultProps = {
  rowLimit: null,
 };

-class Options extends React.Component {
-  changeTimeStampFormat(timeStampFormat) {
-    const val = (timeStampFormat) ? timeStampFormat.value : null;
-    this.props.actions.setTimeStampFormat(val);
-  }
-  changeRowLimit(rowLimit) {
-    this.props.actions.setRowLimit(rowLimit);
-  }
-  render() {
-    return (
-      <div className="panel space-1">
-        <div className="panel-header">Options</div>
-        <div className="panel-body">
-          <div className="row">
-            <h5 className="section-heading">Table Timestamp Format</h5>
-            <Select
-              name="select-timestamp-format"
-              placeholder="Select timestamp format"
-              options={timestampOptions.map((t) => ({ value: t[0], label: t[1] }))}
-              value={this.props.timeStampFormat}
-              autosize={false}
-              onChange={this.changeTimeStampFormat.bind(this)}
-            />
-          </div>
-          <div className="row">
-            <h5 className="section-heading">Row Limit</h5>
-            <Select
-              name="select-row-limit"
-              placeholder="Select row limit"
-              options={rowLimitOptions.map((r) => ({ value: r, label: r }))}
-              value={this.props.rowLimit}
-              autosize={false}
-              onChange={this.changeRowLimit.bind(this)}
-            />
-          </div>
-        </div>
+const Options = (props) => {
+  const selects = [
+    {
+      key: 'timeStampFormat',
+      title: 'Timestamp Format',
+      options: timestampOptions.map((t) => ({ value: t[0], label: t[1] })),
+      value: props.timeStampFormat,
+      width: '12',
+    },
+    {
+      key: 'rowLimit',
+      title: 'Row Limit',
+      options: rowLimitOptions.map((r) => ({ value: r, label: r })),
+      value: props.rowLimit,
+      width: '12',
+    }];
+  return (
+    <div className="panel">
+      <div className="panel-header">Options</div>
+      <div className="panel-body">
+        <SelectArray selectArray={selects} />
      </div>
-    );
-  }
-}
+    </div>
+  );
+};

 Options.propTypes = propTypes;
 Options.defaultProps = defaultProps;

 function mapStateToProps(state) {
  return {
-    timeStampFormat: state.timeStampFormat,
-    rowLimit: state.rowLimit,
+    timeStampFormat: state.viz.formData.timeStampFormat,
+    rowLimit: state.viz.formData.rowLimit,
  };
 }

--- a/caravel/assets/javascripts/explorev2/components/SelectArray.jsx
+++ b/caravel/assets/javascripts/explorev2/components/SelectArray.jsx
@ -0,0 +1,74 @@
+import React from 'react';
+import Select from 'react-select';
+import { bindActionCreators } from 'redux';
+import * as actions from '../actions/exploreActions';
+import { connect } from 'react-redux';
+
+const propTypes = {
+  actions: React.PropTypes.object,
+  selectArray: React.PropTypes.arrayOf(
+    React.PropTypes.shape({
+      key: React.PropTypes.string.isRequired,
+      title: React.PropTypes.string.isRequired,
+      options: React.PropTypes.array.isRequired,
+      value: React.PropTypes.oneOfType([
+        React.PropTypes.string,
+        React.PropTypes.array,
+      ]),
+      width: React.PropTypes.string,
+      multi: React.PropTypes.bool,
+    })
+  ).isRequired,
+};
+
+const defaultProps = {
+  selectArray: [],
+};
+
+class SelectArray extends React.Component {
+  changeSelectData(key, multi, opt) {
+    if (multi) this.props.actions.setFormData(key, opt);
+    else {
+      const val = opt ? opt.value : null;
+      this.props.actions.setFormData(key, val);
+    }
+  }
+  render() {
+    const selects = this.props.selectArray.map((obj) => (
+      <div
+        className={(obj.width) ? `col-sm-${obj.width}` : 'col-sm-6'}
+        key={obj.key}
+      >
+        <h5 className="section-heading">{obj.title}</h5>
+        <Select
+          multi={obj.multi}
+          name={`select-${obj.key}`}
+          options={obj.options}
+          value={obj.value}
+          autosize={false}
+          onChange={this.changeSelectData.bind(this, obj.key, obj.multi)}
+        />
+      </div>
+    ));
+    return (
+      <div>
+        {selects}
+      </div>
+    );
+  }
+}
+
+SelectArray.propTypes = propTypes;
+SelectArray.defaultProps = defaultProps;
+
+function mapStateToProps() {
+  return {};
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(actions, dispatch),
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(SelectArray);
--- a/caravel/assets/javascripts/explorev2/components/SqlClause.jsx
+++ b/caravel/assets/javascripts/explorev2/components/SqlClause.jsx
@ -8,22 +8,19 @@ const propTypes = {
 };

 class SqlClause extends React.Component {
-  changeWhere(whereClause) {
-    this.props.actions.setWhereClause(whereClause);
-  }
-  changeHaving(havingClause) {
-    this.props.actions.setHavingClause(havingClause);
+  onChange(key, event) {
+    this.props.actions.setFormData(key, event.target.value);
  }
  render() {
    return (
-      <div className="panel space-1">
+      <div className="panel">
        <div className="panel-header">SQL</div>
        <div className="panel-body">
          <div className="row">
            <h5 className="section-heading">Where</h5>
            <input
              type="text"
-              onChange={this.changeWhere.bind(this)}
+              onChange={this.onChange.bind(this, 'where')}
              className="form-control input-sm"
              placeholder="Where Clause"
            />
@ -32,7 +29,7 @@ class SqlClause extends React.Component {
            <h5 className="section-heading">Having</h5>
            <input
              type="text"
-              onChange={this.changeHaving.bind(this)}
+              onChange={this.onChange.bind(this, 'having')}
              className="form-control input-sm"
              placeholder="Having Clause"
            />
--- a/caravel/assets/javascripts/explorev2/components/TimeFilter.jsx
+++ b/caravel/assets/javascripts/explorev2/components/TimeFilter.jsx
@ -1,13 +1,13 @@
 import React from 'react';
-import Select from 'react-select';
 import { bindActionCreators } from 'redux';
 import * as actions from '../actions/exploreActions';
 import { connect } from 'react-redux';
 import { sinceOptions, untilOptions } from '../constants';
+import SelectArray from './SelectArray';

 const propTypes = {
  actions: React.PropTypes.object,
-  datasourceClass: React.PropTypes.string,
+  datasourceType: React.PropTypes.string,
  timeColumnOpts: React.PropTypes.array,
  timeColumn: React.PropTypes.string,
  timeGrainOpts: React.PropTypes.array,
@ -25,92 +25,57 @@ const defaultProps = {
  until: null,
 };

-class TimeFilter extends React.Component {
-  changeTimeColumn(timeColumnOpt) {
-    const val = (timeColumnOpt) ? timeColumnOpt.value : null;
-    this.props.actions.setTimeColumn(val);
-  }
-  changeTimeGrain(timeGrainOpt) {
-    const val = (timeGrainOpt) ? timeGrainOpt.value : null;
-    this.props.actions.setTimeGrain(val);
-  }
-  changeSince(sinceOpt) {
-    const val = (sinceOpt) ? sinceOpt.value : null;
-    this.props.actions.setSince(val);
-  }
-  changeUntil(untilOpt) {
-    const val = (untilOpt) ? untilOpt.value : null;
-    this.props.actions.setUntil(val);
-  }
-  render() {
-    const timeColumnPlaceHolder =
-      (this.props.datasourceClass === 'SqlaTable') ? 'Time Column' : 'Time Granularity';
-    const timeGrainPlaceHolder =
-      (this.props.datasourceClass === 'SqlaTable') ? 'Time Grain' : 'Origin';
-    return (
-      <div className="panel space-1">
-        <div className="panel-header">Time Filter</div>
-        <div className="panel-body">
-          <div className="row">
-            <h5 className="section-heading">Time Column & Grains</h5>
-            <Select
-              className="col-sm-6"
-              name="select-time-column"
-              placeholder={`Select a ${timeColumnPlaceHolder}`}
-              options={this.props.timeColumnOpts}
-              value={this.props.timeColumn}
-              autosize={false}
-              onChange={this.changeTimeColumn.bind(this)}
-            />
-            <Select
-              className="col-sm-6"
-              name="select-time-grain"
-              placeholder={`Select a ${timeGrainPlaceHolder}`}
-              options={this.props.timeGrainOpts}
-              value={this.props.timeGrain}
-              autosize={false}
-              onChange={this.changeTimeGrain.bind(this)}
-            />
-          </div>
-          <div className="row">
-            <h5 className="section-heading">Since - Until</h5>
-            <Select
-              className="col-sm-6"
-              name="select-since"
-              placeholder="Select Since Time"
-              options={sinceOptions.map((s) => ({ value: s, label: s }))}
-              value={this.props.since}
-              autosize={false}
-              onChange={this.changeSince.bind(this)}
-            />
-            <Select
-              className="col-sm-6"
-              name="select-until"
-              placeholder="Select Until Time"
-              options={untilOptions.map((u) => ({ value: u, label: u }))}
-              value={this.props.until}
-              autosize={false}
-              onChange={this.changeUntil.bind(this)}
-            />
-          </div>
-        </div>
+const TimeFilter = (props) => {
+  const isDatasourceTypeTable = props.datasourceType === 'table';
+  const timeColumnTitle = isDatasourceTypeTable ? 'Time Column' : 'Time Granularity';
+  const timeGrainTitle = isDatasourceTypeTable ? 'Time Grain' : 'Origin';
+  const selects = [
+    {
+      key: 'timeColumn',
+      title: timeColumnTitle,
+      options: props.timeColumnOpts,
+      value: props.timeColumn,
+    },
+    {
+      key: 'timeGrain',
+      title: timeGrainTitle,
+      options: props.timeGrainOpts,
+      value: props.timeGrain,
+    },
+    {
+      key: 'since',
+      title: 'Since',
+      options: sinceOptions.map((s) => ({ value: s, label: s })),
+      value: props.since,
+    },
+    {
+      key: 'until',
+      title: 'Until',
+      options: untilOptions.map((u) => ({ value: u, label: u })),
+      value: props.until,
+    }];
+  return (
+    <div className="panel">
+      <div className="panel-header">Time Filter</div>
+      <div className="panel-body">
+        <SelectArray selectArray={selects} />
      </div>
-    );
-  }
-}
+    </div>
+  );
+};

 TimeFilter.propTypes = propTypes;
 TimeFilter.defaultProps = defaultProps;

 function mapStateToProps(state) {
  return {
-    datasourceClass: state.datasourceClass,
+    datasourceType: state.datasourceType,
    timeColumnOpts: state.timeColumnOpts,
-    timeColumn: state.timeColumn,
+    timeColumn: state.viz.formData.timeColumn,
    timeGrainOpts: state.timeGrainOpts,
-    timeGrain: state.timeGrain,
-    since: state.since,
-    until: state.until,
+    timeGrain: state.viz.formData.timeGrain,
+    since: state.viz.formData.since,
+    until: state.viz.formData.until,
  };
 }

--- a/caravel/assets/javascripts/explorev2/index.jsx
+++ b/caravel/assets/javascripts/explorev2/index.jsx
@ -17,15 +17,21 @@ const bootstrappedState = Object.assign(initialState, {
  datasourceId: parseInt(bootstrapData.datasource_id, 10),
  datasourceType: bootstrapData.datasource_type,
  sliceName: bootstrapData.viz.form_data.slice_name,
-  sliceId: bootstrapData.viz.form_data.slice_id,
-  vizType: bootstrapData.viz.form_data.viz_type,
-  timeColumn: bootstrapData.viz.form_data.granularity_sqla,
-  timeGrain: bootstrapData.viz.form_data.time_grain_sqla,
-  metrics: [bootstrapData.viz.form_data.metrics].map((m) => ({ value: m, label: m })),
-  since: bootstrapData.viz.form_data.since,
-  until: bootstrapData.viz.form_data.until,
-  havingClause: bootstrapData.viz.form_data.having,
-  whereClause: bootstrapData.viz.form_data.where,
+  viz: {
+    formData: {
+      sliceId: bootstrapData.viz.form_data.slice_id,
+      vizType: bootstrapData.viz.form_data.viz_type,
+      timeColumn: bootstrapData.viz.form_data.granularity_sqla,
+      timeGrain: bootstrapData.viz.form_data.time_grain_sqla,
+      metrics: [bootstrapData.viz.form_data.metrics].map((m) => ({ value: m, label: m })),
+      since: bootstrapData.viz.form_data.since,
+      until: bootstrapData.viz.form_data.until,
+      having: bootstrapData.viz.form_data.having,
+      where: bootstrapData.viz.form_data.where,
+      rowLimit: bootstrapData.viz.form_data.row_limit,
+      timeStampFormat: bootstrapData.viz.form_data.table_timestamp_format,
+    },
+  },
 });
 const store = createStore(exploreReducer, bootstrappedState,
  compose(applyMiddleware(thunk))
--- a/caravel/assets/javascripts/explorev2/reducers/exploreReducer.js
+++ b/caravel/assets/javascripts/explorev2/reducers/exploreReducer.js
@ -2,71 +2,50 @@ import { defaultFormData, defaultOpts } from '../stores/store';
 import * as actions from '../actions/exploreActions';
 import { addToArr, removeFromArr, alterInArr } from '../../../utils/reducerUtils';

+const setFormInViz = function (state, action) {
+  const newFormData = Object.assign({}, state);
+  newFormData[action.key] = action.value;
+  return newFormData;
+};
+
+const setVizInState = function (state, action) {
+  switch (action.type) {
+    case actions.SET_FORM_DATA:
+      return {
+        ...state,
+        formData: setFormInViz(state.formData, action),
+      };
+    default:
+      return state;
+  }
+};
+
 export const exploreReducer = function (state, action) {
  const actionHandlers = {
    [actions.SET_DATASOURCE]() {
      return Object.assign({}, state, { datasourceId: action.datasourceId });
    },
-    [actions.SET_VIZTYPE]() {
-      return Object.assign({}, state, { vizType: action.vizType });
-    },
    [actions.SET_TIME_COLUMN_OPTS]() {
      return Object.assign({}, state, { timeColumnOpts: action.timeColumnOpts });
    },
    [actions.SET_TIME_GRAIN_OPTS]() {
      return Object.assign({}, state, { timeGrainOpts: action.timeGrainOpts });
    },
-    [actions.SET_TIME_COLUMN]() {
-      return Object.assign({}, state, { timeColumn: action.timeColumn });
-    },
-    [actions.SET_TIME_GRAIN]() {
-      return Object.assign({}, state, { timeGrain: action.timeGrain });
-    },
-    [actions.SET_SINCE]() {
-      return Object.assign({}, state, { since: action.since });
-    },
-    [actions.SET_UNTIL]() {
-      return Object.assign({}, state, { until: action.until });
-    },
    [actions.SET_GROUPBY_COLUMN_OPTS]() {
      return Object.assign({}, state, { groupByColumnOpts: action.groupByColumnOpts });
    },
-    [actions.SET_GROUPBY_COLUMNS]() {
-      return Object.assign({}, state, { groupByColumns: action.groupByColumns });
-    },
    [actions.SET_METRICS_OPTS]() {
      return Object.assign({}, state, { metricsOpts: action.metricsOpts });
    },
-    [actions.SET_METRICS]() {
-      return Object.assign({}, state, { metrics: action.metrics });
-    },
    [actions.SET_COLUMN_OPTS]() {
      return Object.assign({}, state, { columnOpts: action.columnOpts });
    },
-    [actions.SET_NOT_GROUPBY_COLUMNS]() {
-      return Object.assign({}, state, { columns: action.columns });
-    },
    [actions.SET_ORDERING_OPTS]() {
      return Object.assign({}, state, { orderingOpts: action.orderingOpts });
    },
-    [actions.SET_ORDERINGS]() {
-      return Object.assign({}, state, { orderings: action.orderings });
-    },
-    [actions.SET_TIME_STAMP_FORMAT]() {
-      return Object.assign({}, state, { timeStampFormat: action.timeStampFormat });
-    },
-    [actions.SET_ROW_LIMIT]() {
-      return Object.assign({}, state, { rowLimit: action.rowLimit });
-    },
    [actions.TOGGLE_SEARCHBOX]() {
      return Object.assign({}, state, { searchBox: action.searchBox });
    },
-    [actions.SET_WHERE_CLAUSE]() {
-      return Object.assign({}, state, { whereClause: action.whereClause });
-    },
-    [actions.SET_HAVING_CLAUSE]() {
-      return Object.assign({}, state, { havingClause: action.havingClause });
-    },
    [actions.SET_FILTER_COLUMN_OPTS]() {
      return Object.assign({}, state, { filterColumnOpts: action.filterColumnOpts });
    },
@ -94,6 +73,12 @@ export const exploreReducer = function (state, action) {
    [actions.SET_DATASOURCE_TYPE]() {
      return Object.assign({}, state, { datasourceType: action.datasourceType });
    },
+    [actions.SET_FORM_DATA]() {
+      return {
+        ...state,
+        viz: setVizInState(state.viz, action),
+      };
+    },
  };
  if (action.type in actionHandlers) {
    return actionHandlers[action.type]();
--- a/caravel/assets/javascripts/explorev2/stores/store.js
+++ b/caravel/assets/javascripts/explorev2/stores/store.js
@ -1,48 +1,44 @@
+// TODO: add datasource_type here after druid support is added
+export const defaultFormData = {
+  sliceId: null,
+  vizType: null,
+  timeColumn: null,
+  timeGrain: null,
+  groupByColumns: [],
+  metrics: [],
+  since: null,
+  until: null,
+  having: null,
+  where: null,
+  columns: [],
+  orderings: [],
+  timeStampFormat: 'smart_date',
+  rowLimit: 50000,
+  searchBox: false,
+  whereClause: '',
+  havingClause: '',
+  filters: [],
+};
+
 export const initialState = {
  datasources: null,
  datasourceId: null,
  datasourceType: null,
-  vizType: null,
  timeColumnOpts: [],
-  timeColumn: null,
  timeGrainOpts: [],
  timeGrain: null,
-  since: null,
-  until: null,
  groupByColumnOpts: [],
-  groupByColumns: [],
  metricsOpts: [],
-  metrics: [],
  columnOpts: [],
-  columns: [],
  orderingOpts: [],
-  orderings: [],
-  timeStampFormat: 'smart_date',
-  rowLimit: 50000,
  searchBox: false,
  whereClause: '',
  havingClause: '',
  filters: [],
  filterColumnOpts: [],
-};
-
-// TODO: add datasource_type here after druid support is added
-export const defaultFormData = {
-  vizType: null,
-  timeColumn: null,
-  timeGrain: null,
-  since: null,
-  until: null,
-  groupByColumns: [],
-  metrics: [],
-  columns: [],
-  orderings: [],
-  timeStampFormat: 'smart_date',
-  rowLimit: 50000,
-  searchBox: false,
-  whereClause: '',
-  havingClause: '',
-  filters: [],
+  viz: {
+    formData: defaultFormData,
+  },
 };

 export const defaultOpts = {
--- a/caravel/assets/spec/javascripts/explore/components/actions_spec.js
+++ b/caravel/assets/spec/javascripts/explore/components/actions_spec.js
@ -11,33 +11,6 @@ describe('reducers', () => {
    expect(newState.datasourceId).to.equal(1);
  });

-  it('should return new state with viz type', () => {
-    const newState = exploreReducer(initialState, actions.setVizType('bar'));
-    expect(newState.vizType).to.equal('bar');
-  });
-
-  it('should return new state with not groupby columns', () => {
-    const newColumn = ['col'];
-    const newState = exploreReducer(initialState, actions.setNotGroupByColumns(newColumn));
-    expect(newState.columns).to.deep.equal(['col']);
-  });
-
-  it('should return new state with orderings', () => {
-    const newOrdering = ['ord'];
-    const newState = exploreReducer(initialState, actions.setOrderings(newOrdering));
-    expect(newState.orderings).to.deep.equal(['ord']);
-  });
-
-  it('should return new state with time stamp', () => {
-    const newState = exploreReducer(initialState, actions.setTimeStampFormat(1));
-    expect(newState.timeStampFormat).to.equal(1);
-  });
-
-  it('should return new state with row limit', () => {
-    const newState = exploreReducer(initialState, actions.setRowLimit(10));
-    expect(newState.rowLimit).to.equal(10);
-  });
-
  it('should return new state with search box toggled', () => {
    const newState = exploreReducer(initialState, actions.toggleSearchBox(true));
    expect(newState.searchBox).to.equal(true);