[Explore] highlighting run query when chart is stale on explore view (a…

…pache#4459)

* highlighting run query when chart is stale on explore view

* refactoring control changed code

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

@@ -49,6 +49,7 @@ class ExploreViewContainer extends React.Component {
       height: this.getHeight(),
       width: this.getWidth(),
       showModal: false,
+      chartIsStale: false,
     };
 
     this.addHistory = this.addHistory.bind(this);
@@ -75,19 +76,24 @@ 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 (this.instantControlChanged(this.props.controls, np.controls)) {
+
+    const changedControlKeys = this.findChangedControlKeys(this.props.controls, np.controls);
+    if (this.hasDisplayControlChanged(changedControlKeys, np.controls)) {
       this.props.actions.updateQueryFormData(
         getFormDataFromControls(np.controls), this.props.chart.chartKey);
       this.props.actions.renderTriggered(new Date().getTime(), this.props.chart.chartKey);
     }
+    if (this.hasQueryControlChanged(changedControlKeys, np.controls)) {
+      this.setState({ chartIsStale: true });
+    }
   }
 
   /* eslint no-unused-vars: 0 */
   componentDidUpdate(prevProps, prevState) {
     this.triggerQueryIfNeeded();
 
-    if (this.instantControlChanged(prevProps.controls, this.props.controls)) {
+    const changedControlKeys = this.findChangedControlKeys(prevProps.controls, this.props.controls);
+    if (this.hasDisplayControlChanged(changedControlKeys, this.props.controls)) {
       this.addHistory({});
     }
   }
@@ -102,6 +108,7 @@ class ExploreViewContainer extends React.Component {
     this.props.actions.removeControlPanelAlert();
     this.props.actions.triggerQuery(true, this.props.chart.chartKey);
 
+    this.setState({ chartIsStale: false });
     this.addHistory({});
   }
 
@@ -121,14 +128,21 @@ class ExploreViewContainer extends React.Component {
     return `${window.innerHeight - navHeight}px`;
   }
 
-  instantControlChanged(prevControls, currentControls) {
-    return Object.keys(currentControls).some(key => (
-      currentControls[key].renderTrigger &&
+  findChangedControlKeys(prevControls, currentControls) {
+    return Object.keys(currentControls).filter(key => (
       typeof prevControls[key] !== 'undefined' &&
       !areObjectsEqual(currentControls[key].value, prevControls[key].value)
     ));
   }
 
+  hasDisplayControlChanged(changedControlKeys, currentControls) {
+    return changedControlKeys.some(key => (currentControls[key].renderTrigger));
+  }
+
+  hasQueryControlChanged(changedControlKeys, currentControls) {
+    return changedControlKeys.some(key => !currentControls[key].renderTrigger);
+  }
+
   triggerQueryIfNeeded() {
     if (this.props.chart.triggerQuery && !this.hasErrors()) {
       this.props.actions.runQuery(this.props.form_data, false,
@@ -245,6 +259,7 @@ class ExploreViewContainer extends React.Component {
               onSave={this.toggleModal.bind(this)}
               onStop={this.onStop.bind(this)}
               loading={this.props.chart.chartStatus === 'loading'}
+              chartIsStale={this.state.chartIsStale}
               errorMessage={this.renderErrorMessage()}
             />
             <br />

superset/assets/javascripts/explore/components/QueryAndSaveBtns.jsx

@@ -11,6 +11,7 @@ const propTypes = {
   onSave: PropTypes.func,
   onStop: PropTypes.func,
   loading: PropTypes.bool,
+  chartIsStale: PropTypes.bool,
   errorMessage: PropTypes.node,
 };
 
@@ -21,11 +22,18 @@ const defaultProps = {
 };
 
 export default function QueryAndSaveBtns(
-  { canAdd, onQuery, onSave, onStop, loading, errorMessage }) {
+  { canAdd, onQuery, onSave, onStop, loading, chartIsStale, errorMessage }) {
   const saveClasses = classnames({
     'disabled disabledButton': canAdd !== 'True',
   });
-  const qryButtonStyle = errorMessage ? 'danger' : 'primary';
+
+  let qryButtonStyle = 'default';
+  if (errorMessage) {
+    qryButtonStyle = 'danger';
+  } else if (chartIsStale) {
+    qryButtonStyle = 'primary';
+  }
+
   const saveButtonDisabled = errorMessage ? true : loading;
   const qryOrStopButton = loading ? (
     <Button