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

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">

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',
+];