[Explore] applying refresh chart overlay when chart is stale (#4486)

* adding refresh chart overlay when chart is out of sync with control panel

* fading the visualization when stale

* addressing comments from team on layout of UI

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

@@ -10,6 +10,8 @@ import ExploreChartHeader from './ExploreChartHeader';
 const propTypes = {
   actions: PropTypes.object.isRequired,
   addHistory: PropTypes.func,
+  onQuery: PropTypes.func,
+  onDismissRefreshOverlay: PropTypes.func,
   can_overwrite: PropTypes.bool.isRequired,
   can_download: PropTypes.bool.isRequired,
   datasource: PropTypes.object,
@@ -24,7 +26,9 @@ const propTypes = {
   form_data: PropTypes.object,
   standalone: PropTypes.bool,
   timeout: PropTypes.number,
+  refreshOverlayVisible: PropTypes.bool,
   chart: PropTypes.shape(chartPropType),
+  errorMessage: PropTypes.node,
 };
 
 class ExploreChartPanel extends React.PureComponent {
@@ -45,6 +49,10 @@ class ExploreChartPanel extends React.PureComponent {
         setControlValue={this.props.actions.setControlValue}
         timeout={this.props.timeout}
         vizType={this.props.vizType}
+        refreshOverlayVisible={this.props.refreshOverlayVisible}
+        errorMessage={this.props.errorMessage}
+        onQuery={this.props.onQuery}
+        onDismissRefreshOverlay={this.props.onDismissRefreshOverlay}
       />
     );
   }

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

@@ -50,6 +50,7 @@ class ExploreViewContainer extends React.Component {
       width: this.getWidth(),
       showModal: false,
       chartIsStale: false,
+      refreshOverlayVisible: false,
     };
 
     this.addHistory = this.addHistory.bind(this);
@@ -84,7 +85,7 @@ class ExploreViewContainer extends React.Component {
       this.props.actions.renderTriggered(new Date().getTime(), this.props.chart.chartKey);
     }
     if (this.hasQueryControlChanged(changedControlKeys, np.controls)) {
-      this.setState({ chartIsStale: true });
+      this.setState({ chartIsStale: true, refreshOverlayVisible: true });
     }
   }
 
@@ -108,10 +109,14 @@ class ExploreViewContainer extends React.Component {
     this.props.actions.removeControlPanelAlert();
     this.props.actions.triggerQuery(true, this.props.chart.chartKey);
 
-    this.setState({ chartIsStale: false });
+    this.setState({ chartIsStale: false, refreshOverlayVisible: false });
     this.addHistory({});
   }
 
+  onDismissRefreshOverlay() {
+    this.setState({ refreshOverlayVisible: false });
+  }
+
   onStop() {
     return this.props.chart.queryRequest.abort();
   }
@@ -227,7 +232,11 @@ class ExploreViewContainer extends React.Component {
         width={this.state.width}
         height={this.state.height}
         {...this.props}
+        errorMessage={this.renderErrorMessage()}
+        refreshOverlayVisible={this.state.refreshOverlayVisible}
         addHistory={this.addHistory}
+        onQuery={this.onQuery.bind(this)}
+        onDismissRefreshOverlay={this.onDismissRefreshOverlay.bind(this)}
       />);
   }