From e36c4cf9e87e6e339404d616f3d62409460e7a94 Mon Sep 17 00:00:00 2001
From: Grace Guo <grace.guo@airbnb.com>
Date: Thu, 16 Nov 2017 16:36:10 -0800
Subject: [PATCH] [dashboard bug]Instant control should take effect instantly

in explore view, controls like color cheme, legend, rich tooltip, etc., change these controls should see effect instantly, without click Run Query.
---
 superset/assets/javascripts/chart/ChartContainer.jsx        | 2 +-
 superset/assets/javascripts/chart/chartReducer.js           | 2 ++
 .../javascripts/explore/components/ExploreViewContainer.jsx | 6 ++++++
 superset/assets/javascripts/explore/index.jsx               | 5 +++--
 4 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/superset/assets/javascripts/chart/ChartContainer.jsx b/superset/assets/javascripts/chart/ChartContainer.jsx
index 11c432221fcab..d517677ec4d41 100644
--- a/superset/assets/javascripts/chart/ChartContainer.jsx
+++ b/superset/assets/javascripts/chart/ChartContainer.jsx
@@ -12,10 +12,10 @@ function mapStateToProps({ charts }, ownProps) {
     chartUpdateEndTime: chart.chartUpdateEndTime,
     chartUpdateStartTime: chart.chartUpdateStartTime,
     latestQueryFormData: chart.latestQueryFormData,
+    lastRendered: chart.lastRendered,
     queryResponse: chart.queryResponse,
     queryRequest: chart.queryRequest,
     triggerQuery: chart.triggerQuery,
-    triggerRender: chart.triggerRender,
   };
 }
 
diff --git a/superset/assets/javascripts/chart/chartReducer.js b/superset/assets/javascripts/chart/chartReducer.js
index 835ee94034b0b..ade8c5bf68f03 100644
--- a/superset/assets/javascripts/chart/chartReducer.js
+++ b/superset/assets/javascripts/chart/chartReducer.js
@@ -12,6 +12,7 @@ export const chartPropType = {
   chartUpdateEndTime: PropTypes.number,
   chartUpdateStartTime: PropTypes.number,
   latestQueryFormData: PropTypes.object,
+  queryRequest: PropTypes.object,
   queryResponse: PropTypes.object,
   triggerQuery: PropTypes.bool,
   lastRendered: PropTypes.number,
@@ -24,6 +25,7 @@ export const chart = {
   chartUpdateEndTime: null,
   chartUpdateStartTime: now(),
   latestQueryFormData: null,
+  queryRequest: null,
   queryResponse: null,
   triggerQuery: true,
   lastRendered: 0,
diff --git a/superset/assets/javascripts/explore/components/ExploreViewContainer.jsx b/superset/assets/javascripts/explore/components/ExploreViewContainer.jsx
index e3ea7f2a732a4..43f6c012e61f4 100644
--- a/superset/assets/javascripts/explore/components/ExploreViewContainer.jsx
+++ b/superset/assets/javascripts/explore/components/ExploreViewContainer.jsx
@@ -9,6 +9,7 @@ import ControlPanelsContainer from './ControlPanelsContainer';
 import SaveModal from './SaveModal';
 import QueryAndSaveBtns from './QueryAndSaveBtns';
 import { getExploreUrl } from '../exploreUtils';
+import { areObjectsEqual } from '../../reduxUtils';
 import { getFormDataFromControls } from '../stores/store';
 import { chartPropType } from '../../chart/chartReducer';
 import * as exploreActions from '../actions/exploreActions';
@@ -50,6 +51,11 @@ class ExploreViewContainer extends React.Component {
     if (np.controls.datasource.value !== this.props.controls.datasource.value) {
       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 &&
+      !areObjectsEqual(np.controls[key].value, this.props.controls[key].value)))) {
+      this.props.actions.renderTriggered(new Date().getTime(), this.props.chart.chartKey);
+    }
   }
 
   componentDidUpdate() {
diff --git a/superset/assets/javascripts/explore/index.jsx b/superset/assets/javascripts/explore/index.jsx
index 2247019f082fb..fa92d7c97d9af 100644
--- a/superset/assets/javascripts/explore/index.jsx
+++ b/superset/assets/javascripts/explore/index.jsx
@@ -43,13 +43,14 @@ const initState = {
     [chartKey]: {
       chartKey,
       chartAlert: null,
-      chartStatus: null,
+      chartStatus: 'loading',
       chartUpdateEndTime: null,
       chartUpdateStartTime: now(),
       latestQueryFormData: getFormDataFromControls(controls),
+      queryRequest: null,
       queryResponse: null,
       triggerQuery: true,
-      triggerRender: false,
+      lastRendered: 0,
     },
   },
   saveModal: {