[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

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>
     );

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

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