[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/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)}
       />);
   }