Refetch defaultFormData when switching datasource

superset/assets/javascripts/explorev2/components/ExploreViewContainer.jsx

@@ -11,9 +11,6 @@ const $ = require('jquery');
 const propTypes = {
   form_data: React.PropTypes.object.isRequired,
   actions: React.PropTypes.object.isRequired,
-  slice_id: React.PropTypes.string.isRequired,
-  slice_name: React.PropTypes.string.isRequired,
-  datasource_id: React.PropTypes.number.isRequired,
   datasource_type: React.PropTypes.string.isRequired,
 };
 
@@ -31,15 +28,16 @@ class ExploreViewContainer extends React.Component {
     const form_data = this.props.form_data;
     Object.keys(form_data).forEach((field) => {
       // filter out null fields
-      if (form_data[field] !== null) {
+      if (form_data[field] !== null && field !== 'datasource') {
         data[field] = form_data[field];
       }
     });
     // V2 tag temporarily for updating url
     // Todo: remove after launch
     data.V2 = true;
-    data.datasource_id = this.props.datasource_id;
+    data.datasource_id = this.props.form_data.datasource;
     data.datasource_type = this.props.datasource_type;
+    console.log(data);
     this.queryFormData(data);
 
     const params = $.param(data, true);
@@ -53,14 +51,14 @@ class ExploreViewContainer extends React.Component {
 
   updateUrl(params) {
     const baseUrl =
-      `/superset/explore/${this.props.datasource_type}/${this.props.datasource_id}/`;
+      `/superset/explore/${this.props.datasource_type}/${this.props.form_data.datasource}/`;
     const newEndpoint = `${baseUrl}?${params}`;
     history.pushState({}, document.title, newEndpoint);
   }
 
   queryFormData(data) {
     this.props.actions.updateExplore(
-      this.props.datasource_type, this.props.datasource_id, data);
+      this.props.datasource_type, this.props.form_data.datasource, data);
   }
 
   render() {
@@ -99,11 +97,8 @@ ExploreViewContainer.propTypes = propTypes;
 
 function mapStateToProps(state) {
   return {
-    datasource_id: state.datasource_id,
     datasource_type: state.datasource_type,
     form_data: state.viz.form_data,
-    slice_id: state.viz.form_data.slice_id,
-    slice_name: state.viz.form_data.slice_name,
   };
 }
 

superset/assets/javascripts/explorev2/index.jsx

@@ -12,7 +12,7 @@ const bootstrapData = JSON.parse(exploreViewContainer.getAttribute('data-bootstr
 
 import { exploreReducer } from './reducers/exploreReducer';
 
-const bootstrappedState = Object.assign(initialState, {
+const bootstrappedState = Object.assign(initialState(bootstrapData.viz.form_data.viz_type), {
   can_download: bootstrapData.can_download,
   datasources: bootstrapData.datasources,
   datasource_type: bootstrapData.datasource_type,

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

@@ -1,3 +1,4 @@
+import { defaultFormData } from '../stores/store';
 import * as actions from '../actions/exploreActions';
 import { addToArr, removeFromArr, alterInArr } from '../../../utils/reducerUtils';
 
@@ -47,11 +48,15 @@ export const exploreReducer = function (state, action) {
       return alterInArr(state, 'filters', action.filter, { value: action.value });
     },
     [actions.SET_FIELD_VALUE]() {
-      const newFormData = Object.assign({}, state.viz.form_data);
-      newFormData[action.key] = action.value ? action.value : (!state.viz.form_data[action.key]);
+      const newFormData = action.key === 'datasource' ?
+        defaultFormData(state.viz.form_data.viz_type) : Object.assign({}, state.viz.form_data);
       if (action.key === 'datasource') {
         newFormData.datasource_name = action.label;
+        newFormData.slice_id = state.viz.form_data.slice_id;
+        newFormData.slice_name = state.viz.form_data.slice_name;
+        newFormData.viz_type = state.viz.form_data.viz_type;
       }
+      newFormData[action.key] = action.value ? action.value : (!state.viz.form_data[action.key]);
       return Object.assign(
         {},
         state,

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

@@ -1628,34 +1628,47 @@ export const fields = {
   },
 };
 
-export function defaultFormData() {
+export function defaultFormData(vizType = null) {
   const data = {
     slice_name: null,
     slice_id: null,
     datasource_name: null,
   };
-  Object.keys(fields).forEach((k) => { data[k] = fields[k].default; });
+  const { datasourceAndVizType, sqlClause } = commonControlPanelSections;
+  const viz = visTypes[vizType];
+  const sectionsToRender = [datasourceAndVizType].concat(viz.controlPanelSections, sqlClause);
+  sectionsToRender.forEach((section) => {
+    section.fieldSetRows.forEach((fieldSetRow) => {
+      fieldSetRow.forEach((k) => {
+        data[k] = fields[k].default;
+      });
+    });
+  });
   return data;
 }
 
-export const defaultViz = {
-  cached_key: null,
-  cached_timeout: null,
-  cached_dttm: null,
-  column_formats: null,
-  csv_endpoint: null,
-  is_cached: false,
-  data: [],
-  form_data: defaultFormData(),
-  json_endpoint: null,
-  query: null,
-  standalone_endpoint: null,
-};
+export function defaultViz(vizType) {
+  return {
+    cached_key: null,
+    cached_timeout: null,
+    cached_dttm: null,
+    column_formats: null,
+    csv_endpoint: null,
+    is_cached: false,
+    data: [],
+    form_data: defaultFormData(vizType),
+    json_endpoint: null,
+    query: null,
+    standalone_endpoint: null,
+  };
+}
 
-export const initialState = {
-  isDatasourceMetaLoading: false,
-  datasources: null,
-  datasource_type: null,
-  fields,
-  viz: defaultViz,
-};
+export function initialState(vizType = 'table') {
+  return {
+    isDatasourceMetaLoading: false,
+    datasources: null,
+    datasource_type: null,
+    fields,
+    viz: defaultViz(vizType),
+  };
+}