From b370ef0229377c6b85f78d9ba080d00ff6dba58e Mon Sep 17 00:00:00 2001
From: vera-liu <vera.liu@airbnb.com>
Date: Tue, 22 Nov 2016 17:08:52 -0800
Subject: [PATCH] Rerender chart without clicking query button for fields
 (#1658)

* For some fields we would like to re-render chart once field is
  * changed, saving user the time to click query button
  * Such fields are stored in an array in store, could add more fields in
  * the future
---
 .../components/ExploreViewContainer.jsx       | 20 ++++++++++++++++---
 .../javascripts/explorev2/stores/store.js     |  6 ++++++
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/superset/assets/javascripts/explorev2/components/ExploreViewContainer.jsx b/superset/assets/javascripts/explorev2/components/ExploreViewContainer.jsx
index e9e68d5150..63b3974b30 100644
--- a/superset/assets/javascripts/explorev2/components/ExploreViewContainer.jsx
+++ b/superset/assets/javascripts/explorev2/components/ExploreViewContainer.jsx
@@ -7,6 +7,7 @@ import ChartContainer from './ChartContainer';
 import ControlPanelsContainer from './ControlPanelsContainer';
 import SaveModal from './SaveModal';
 import QueryAndSaveBtns from '../../explore/components/QueryAndSaveBtns';
+import { autoQueryFields } from '../stores/store';
 const $ = require('jquery');
 
 const propTypes = {
@@ -29,12 +30,24 @@ class ExploreViewContainer extends React.Component {
     window.addEventListener('resize', this.handleResize.bind(this));
   }
 
+  componentWillReceiveProps(nextProps) {
+    let refreshChart = false;
+    autoQueryFields.forEach((field) => {
+      if (nextProps.form_data[field] !== this.props.form_data[field]) {
+        refreshChart = true;
+      }
+    });
+    if (refreshChart) {
+      this.onQuery(nextProps.form_data);
+    }
+  }
+
   componentWillUnmount() {
     window.removeEventListener('resize', this.handleResize.bind(this));
   }
-  onQuery() {
+
+  onQuery(form_data) {
     const data = {};
-    const form_data = this.props.form_data;
     Object.keys(form_data).forEach((field) => {
     // filter out null fields
       if (form_data[field] !== null && field !== 'datasource') {
@@ -101,7 +114,7 @@ class ExploreViewContainer extends React.Component {
           <div className="col-sm-4">
             <QueryAndSaveBtns
               canAdd="True"
-              onQuery={this.onQuery.bind(this)}
+              onQuery={this.onQuery.bind(this, this.props.form_data)}
               onSave={this.toggleModal.bind(this)}
             />
             <br /><br />
@@ -109,6 +122,7 @@ class ExploreViewContainer extends React.Component {
               actions={this.props.actions}
               form_data={this.props.form_data}
               datasource_type={this.props.datasource_type}
+              onQuery={this.onQuery.bind(this, this.props.form_data)}
             />
           </div>
           <div className="col-sm-8">
diff --git a/superset/assets/javascripts/explorev2/stores/store.js b/superset/assets/javascripts/explorev2/stores/store.js
index abe69cacfd..632b64fb56 100644
--- a/superset/assets/javascripts/explorev2/stores/store.js
+++ b/superset/assets/javascripts/explorev2/stores/store.js
@@ -1727,3 +1727,9 @@ export function initialState(vizType = 'table') {
     isStarred: false,
   };
 }
+
+// Control Panel fields that re-render chart without need for 'Query button'
+export const autoQueryFields = [
+  'datasource',
+  'viz_type',
+];