From 2d0ebeae1bfd5e385000c9aa952891cf474821c6 Mon Sep 17 00:00:00 2001
From: vera-liu <vera.liu@airbnb.com>
Date: Thu, 1 Dec 2016 11:59:44 -0800
Subject: [PATCH] [explorev2] Make chart container more responsive (#1724)

* Make chart container more responsive
 **Leave chart empty when theres error
 **Make all boolean fields auto-query chart when changed

* Replace forEach with some

* Added fields to autoQueryFields
---
 .../explorev2/components/ChartContainer.jsx   | 47 +++++++++++--------
 .../components/ExploreViewContainer.jsx       | 10 ++--
 .../javascripts/explorev2/stores/store.js     | 23 +++++++++
 3 files changed, 54 insertions(+), 26 deletions(-)

diff --git a/superset/assets/javascripts/explorev2/components/ChartContainer.jsx b/superset/assets/javascripts/explorev2/components/ChartContainer.jsx
index 0917d57126d39..904b16f1b89ff 100644
--- a/superset/assets/javascripts/explorev2/components/ChartContainer.jsx
+++ b/superset/assets/javascripts/explorev2/components/ChartContainer.jsx
@@ -144,6 +144,32 @@ class ChartContainer extends React.Component {
     return title;
   }
 
+  renderChart() {
+    if (this.props.alert) {
+      return (
+        <Alert bsStyle="warning">
+          {this.props.alert}
+          <i
+            className="fa fa-close pull-right"
+            onClick={this.removeAlert.bind(this)}
+            style={{ cursor: 'pointer' }}
+          />
+        </Alert>
+      );
+    }
+    if (this.props.isChartLoading) {
+      return (<img alt="loading" width="25" src="/static/assets/images/loading.gif" />);
+    }
+    return (
+      <div
+        id={this.props.containerId}
+        ref={(ref) => { this.chartContainerRef = ref; }}
+        className={this.props.viz_type}
+        style={{ 'overflow-x': 'scroll' }}
+      />
+    );
+  }
+
   render() {
     return (
       <div className="chart-container">
@@ -187,26 +213,7 @@ class ChartContainer extends React.Component {
             </div>
           }
         >
-          {this.props.alert &&
-            <Alert bsStyle="warning">
-              {this.props.alert}
-              <i
-                className="fa fa-close pull-right"
-                onClick={this.removeAlert.bind(this)}
-                style={{ cursor: 'pointer' }}
-              />
-            </Alert>
-          }
-          {this.props.isChartLoading ?
-            (<img alt="loading" width="25" src="/static/assets/images/loading.gif" />)
-            :
-            (<div
-              id={this.props.containerId}
-              ref={(ref) => { this.chartContainerRef = ref; }}
-              className={this.props.viz_type}
-              style={{ 'overflow-x': 'scroll' }}
-            />)
-          }
+          {this.renderChart()}
         </Panel>
       </div>
     );
diff --git a/superset/assets/javascripts/explorev2/components/ExploreViewContainer.jsx b/superset/assets/javascripts/explorev2/components/ExploreViewContainer.jsx
index 6d79f8a8f645c..ce44b11ee0ce9 100644
--- a/superset/assets/javascripts/explorev2/components/ExploreViewContainer.jsx
+++ b/superset/assets/javascripts/explorev2/components/ExploreViewContainer.jsx
@@ -33,12 +33,10 @@ class ExploreViewContainer extends React.Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    let refreshChart = false;
-    autoQueryFields.forEach((field) => {
-      if (nextProps.form_data[field] !== this.props.form_data[field]) {
-        refreshChart = true;
-      }
-    });
+    const refreshChart = Object.keys(nextProps.form_data).some((field) => (
+      nextProps.form_data[field] !== this.props.form_data[field]
+      && autoQueryFields.indexOf(field) !== -1)
+    );
     if (refreshChart) {
       this.onQuery(nextProps.form_data);
     }
diff --git a/superset/assets/javascripts/explorev2/stores/store.js b/superset/assets/javascripts/explorev2/stores/store.js
index 0c02435bc06f4..817602d020536 100644
--- a/superset/assets/javascripts/explorev2/stores/store.js
+++ b/superset/assets/javascripts/explorev2/stores/store.js
@@ -1748,4 +1748,27 @@ export function initialState(vizType = 'table', datasourceType = 'table') {
 export const autoQueryFields = [
   'datasource',
   'viz_type',
+  'bar_stacked',
+  'show_markers',
+  'show_bar_value',
+  'order_bars',
+  'show_controls',
+  'reduce_x_ticks',
+  'include_series',
+  'pie_label_type',
+  'show_brush',
+  'include_search',
+  'show_bubbles',
+  'show_legend',
+  'x_axis_showminmax',
+  'rich_tooltip',
+  'y_axis_zero',
+  'y_log_scale',
+  'x_log_scale',
+  'donut',
+  'labels_outside',
+  'contribution',
+  'size',
+  'row_limit',
+  'max_bubble_size',
 ];