Make instant controls store state in URL (#4449)

* Add to history on instant control change * Update latestQueryFormData on render triggered * Add new message type * Update latestQueryFormData in UPDATE_QUERY_FORM_DATA
apache · Feb 21, 2018 · c317657 · c317657
1 parent d4a2f4e
commit c317657
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 6 deletions.
diff --git a/superset/assets/javascripts/chart/chartAction.js b/superset/assets/javascripts/chart/chartAction.js
@@ -106,6 +106,11 @@ export function renderTriggered(value, key) {
   return { type: RENDER_TRIGGERED, value, key };
 }
 
+export const UPDATE_QUERY_FORM_DATA = 'UPDATE_QUERY_FORM_DATA';
+export function updateQueryFormData(value, key) {
+  return { type: UPDATE_QUERY_FORM_DATA, value, key };
+}
+
 export const RUN_QUERY = 'RUN_QUERY';
 export function runQuery(formData, force = false, timeout = 60, key) {
   return (dispatch) => {
@@ -170,6 +175,7 @@ export function runQuery(formData, force = false, timeout = 60, key) {
     return Promise.all([
       queryPromise,
       dispatch(triggerQuery(false, key)),
+      dispatch(updateQueryFormData(payload, key)),
       ...annotationLayers.map(x => dispatch(runAnnotationQuery(x, timeout, formData, key))),
     ]);
   };

diff --git a/superset/assets/javascripts/chart/chartReducer.js b/superset/assets/javascripts/chart/chartReducer.js
@@ -47,7 +47,6 @@ export default function chartReducer(charts = {}, action) {
         chartUpdateEndTime: null,
         chartUpdateStartTime: now(),
         queryRequest: action.queryRequest,
-        latestQueryFormData: action.latestQueryFormData,
       };
     },
     [actions.CHART_UPDATE_STOPPED](state) {
@@ -93,6 +92,9 @@ export default function chartReducer(charts = {}, action) {
     [actions.RENDER_TRIGGERED](state) {
       return { ...state, lastRendered: action.value };
     },
+    [actions.UPDATE_QUERY_FORM_DATA](state) {
+      return { ...state, latestQueryFormData: action.value };
+    },
     [actions.ANNOTATION_QUERY_STARTED](state) {
       if (state.annotationQuery &&
         state.annotationQuery[action.annotation.name]) {

diff --git a/superset/assets/javascripts/explore/components/ExploreViewContainer.jsx b/superset/assets/javascripts/explore/components/ExploreViewContainer.jsx
@@ -76,16 +76,20 @@ class ExploreViewContainer extends React.Component {
       this.props.actions.fetchDatasourceMetadata(np.form_data.datasource, true);
     }
     // if any control value changed and it's an instant control
-    if (Object.keys(np.controls).some(key => (np.controls[key].renderTrigger &&
-      typeof this.props.controls[key] !== 'undefined' &&
-      !areObjectsEqual(np.controls[key].value, this.props.controls[key].value)))
-    ) {
+    if (this.instantControlChanged(this.props.controls, np.controls)) {
+      this.props.actions.updateQueryFormData(
+        getFormDataFromControls(np.controls), this.props.chart.chartKey);
       this.props.actions.renderTriggered(new Date().getTime(), this.props.chart.chartKey);
     }
   }
 
-  componentDidUpdate() {
+  /* eslint no-unused-vars: 0 */
+  componentDidUpdate(prevProps, prevState) {
     this.triggerQueryIfNeeded();
+
+    if (this.instantControlChanged(prevProps.controls, this.props.controls)) {
+      this.addHistory({});
+    }
   }
 
   componentWillUnmount() {
@@ -117,6 +121,14 @@ class ExploreViewContainer extends React.Component {
     return `${window.innerHeight - navHeight}px`;
   }
 
+  instantControlChanged(prevControls, currentControls) {
+    return Object.keys(currentControls).some(key => (
+      currentControls[key].renderTrigger &&
+      typeof prevControls[key] !== 'undefined' &&
+      !areObjectsEqual(currentControls[key].value, prevControls[key].value)
+    ));
+  }
+
   triggerQueryIfNeeded() {
     if (this.props.chart.triggerQuery && !this.hasErrors()) {
       this.props.actions.runQuery(this.props.form_data, false,