remove extra call to get_viz in explorev2 (#1812)

* Not working errors

* Remove update_explore endpoint, only update explore endpoints in reducer on query

* Change scroll to auto and make container reponse to height:

* Remove update_explore endpoint

* Remove can_update_explore perm

superset/assets/javascripts/explorev2/components/ChartContainer.jsx

@@ -26,13 +26,13 @@ const propTypes = {
   json_endpoint: PropTypes.string.isRequired,
   csv_endpoint: PropTypes.string.isRequired,
   standalone_endpoint: PropTypes.string.isRequired,
-  query: PropTypes.string.isRequired,
+  query: PropTypes.string,
   column_formats: PropTypes.object,
   data: PropTypes.any,
-  chartStatus: PropTypes.bool,
+  chartStatus: PropTypes.string,
   isStarred: PropTypes.bool.isRequired,
-  chartUpdateStartTime: PropTypes.string.isRequired,
-  chartUpdateEndTime: PropTypes.string.isRequired,
+  chartUpdateStartTime: PropTypes.number.isRequired,
+  chartUpdateEndTime: PropTypes.number,
   alert: PropTypes.string,
   table_name: PropTypes.string,
 };
@@ -55,7 +55,15 @@ class ChartContainer extends React.Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    this.setState({ mockSlice: this.getMockedSliceObject(nextProps) });
+    if (nextProps.chartStatus !== this.props.chartStatus
+      || nextProps.height !== this.props.height) {
+      this.setState({ mockSlice: this.getMockedSliceObject(nextProps) });
+    }
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return (nextProps.chartStatus !== this.props.chartStatus
+      || nextProps.height !== this.props.height);
   }
 
   componentDidUpdate() {
@@ -114,8 +122,10 @@ class ChartContainer extends React.Component {
         {}
       ),
 
-      done: () => {
+      done: (payload) => {
         // finished rendering callback
+        // Todo: end timer and chartLoading set to success
+        props.actions.chartUpdateSucceeded(payload.query);
       },
 
       clearError: () => {
@@ -166,16 +176,19 @@ class ChartContainer extends React.Component {
         </Alert>
       );
     }
-    if (this.props.chartStatus === 'loading') {
-      return (<img alt="loading" width="25" src="/static/assets/images/loading.gif" />);
-    }
+    const loading = this.props.chartStatus === 'loading';
     return (
-      <div
-        id={this.props.containerId}
-        ref={(ref) => { this.chartContainerRef = ref; }}
-        className={this.props.viz_type}
-        style={{ overflowX: 'scroll' }}
-      />
+      <div>
+        {loading &&
+          <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={{ overflowX: 'auto' }}
+        />
+      </div>
     );
   }
 
@@ -219,7 +232,7 @@ class ChartContainer extends React.Component {
                   endTime={this.props.chartUpdateEndTime}
                   isRunning={this.props.chartStatus === 'loading'}
                   state={CHART_STATUS_MAP[this.props.chartStatus]}
-                  style={{ 'font-size': '10px', 'margin-right': '5px' }}
+                  style={{ fontSize: '10px', marginRight: '5px' }}
                 />
                 <ExploreActionButtons
                   slice={this.state.mockSlice}

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

@@ -8,9 +8,7 @@ import ControlPanelsContainer from './ControlPanelsContainer';
 import SaveModal from './SaveModal';
 import QueryAndSaveBtns from '../../explore/components/QueryAndSaveBtns';
 import { autoQueryFields } from '../stores/fields';
-import { getParamObject } from '../exploreUtils';
-
-const $ = require('jquery');
+import { getExploreUrl } from '../exploreUtils';
 
 const propTypes = {
   form_data: React.PropTypes.object.isRequired,
@@ -48,11 +46,12 @@ class ExploreViewContainer extends React.Component {
   }
 
   onQuery(form_data) {
-    const data = getParamObject(form_data, this.props.datasource_type);
-    this.queryFormData(data);
-
-    const params = $.param(data, true);
-    this.updateUrl(params);
+    this.props.actions.chartUpdateStarted();
+    history.pushState(
+      {},
+      document.title,
+      getExploreUrl(form_data, this.props.datasource_type)
+    );
     // remove alerts when query
     this.props.actions.removeControlPanelAlert();
     this.props.actions.removeChartAlert();
@@ -63,17 +62,6 @@ class ExploreViewContainer extends React.Component {
     return `${window.innerHeight - navHeight}px`;
   }
 
-  updateUrl(params) {
-    const baseUrl =
-      `/superset/explore/${this.props.datasource_type}/${this.props.form_data.datasource}/`;
-    const newEndpoint = `${baseUrl}?${params}`;
-    history.pushState({}, document.title, newEndpoint);
-  }
-
-  queryFormData(data) {
-    this.props.actions.updateExplore(
-      this.props.datasource_type, this.props.form_data.datasource, data);
-  }
   handleResize() {
     this.setState({ height: this.getHeight() });
   }
@@ -119,7 +107,6 @@ class ExploreViewContainer extends React.Component {
             <ChartContainer
               actions={this.props.actions}
               height={this.state.height}
-              actions={this.props.actions}
             />
           </div>
         </div>