Remove update_explore endpoint, only update explore endpoints in redu…

…cer on query
apache · Dec 10, 2016 · 3457416 · 3457416
1 parent 41dc946
commit 3457416
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 75 deletions.
diff --git a/superset/assets/javascripts/explorev2/actions/exploreActions.js b/superset/assets/javascripts/explorev2/actions/exploreActions.js
@@ -98,11 +98,6 @@ export function setFieldValue(datasource_type, key, value, label) {
   return { type: SET_FIELD_VALUE, datasource_type, key, value, label };
 }
 
-export const UPDATE_CHART = 'UPDATE_CHART';
-export function updateChart(viz) {
-  return { type: UPDATE_CHART, viz };
-}
-
 export const CHART_UPDATE_STARTED = 'CHART_UPDATE_STARTED';
 export function chartUpdateStarted() {
   return { type: CHART_UPDATE_STARTED };

diff --git a/superset/assets/javascripts/explorev2/components/ChartContainer.jsx b/superset/assets/javascripts/explorev2/components/ChartContainer.jsx
@@ -29,10 +29,10 @@ const propTypes = {
   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,13 @@ class ChartContainer extends React.Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    this.setState({ mockSlice: this.getMockedSliceObject(nextProps) });
+    if (nextProps.chartStatus !== this.props.chartStatus) {
+      this.setState({ mockSlice: this.getMockedSliceObject(nextProps) });
+    }
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return (nextProps.chartStatus !== this.props.chartStatus);
   }
 
   componentDidUpdate() {
@@ -168,16 +174,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: 'scroll' }}
+        />
+      </div>
     );
   }
 
@@ -221,7 +230,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}

diff --git a/superset/assets/javascripts/explorev2/components/ExploreViewContainer.jsx b/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);
-    const params = `${this.props.datasource_type}/` +
-      `${this.props.form_data.datasource}/?${$.param(data, true)}`;
-    this.queryFormData(params);
-    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,18 +62,6 @@ class ExploreViewContainer extends React.Component {
     return `${window.innerHeight - navHeight}px`;
   }
 
-  updateUrl(params) {
-    const baseUrl = `/superset/explore/${params}`;
-    const newEndpoint = `${baseUrl}?${params}`;
-    history.pushState({}, document.title, newEndpoint);
-  }
-
-  queryFormData(params) {
-    const jsonUrl = `/superset/explore_json/${params}`;
-    const csvUrl = `/superset/explore/${params}&csv=true`;
-    const standaloneUrl = `/superset/explore/${params}&standalone=true`;
-    this.props.actions.updateExploreEndpoints(jsonUrl, csvUrl, standaloneUrl);
-  }
   handleResize() {
     this.setState({ height: this.getHeight() });
   }

diff --git a/superset/assets/javascripts/explorev2/exploreUtils.js b/superset/assets/javascripts/explorev2/exploreUtils.js
@@ -1,4 +1,5 @@
 /* eslint camelcase: 0 */
+const $ = require('jquery');
 function formatFilters(filters) {
   // outputs an object of url params of filters
   // prefix can be 'flt' or 'having'
@@ -22,7 +23,7 @@ export function getParamObject(form_data, datasource_type, saveNewSlice) {
   };
   Object.keys(form_data).forEach((field) => {
     // filter out null fields
-    if (form_data[field] !== null && field !== 'datasource'
+    if (form_data[field] !== null && field !== 'datasource' && field !== 'filters'
       && !(saveNewSlice && field === 'slice_name')) {
       data[field] = form_data[field];
     }
@@ -31,3 +32,21 @@ export function getParamObject(form_data, datasource_type, saveNewSlice) {
   Object.assign(data, filterParams);
   return data;
 }
+
+export function getExploreUrl(form_data, datasource_type, endpoint = 'base') {
+  const data = getParamObject(form_data, datasource_type);
+  const params = `${datasource_type}/` +
+    `${form_data.datasource}/?${$.param(data, true)}`;
+  switch (endpoint) {
+    case 'base':
+      return `/superset/explore/${params}`;
+    case 'json':
+      return `/superset/explore_json/${params}`;
+    case 'csv':
+      return `/superset/explore/${params}&csv=true`;
+    case 'standalone':
+      return `/superset/explore/${params}&standalone=true`;
+    default:
+      return `/superset/explore/${params}`;
+  }
+}
diff --git a/superset/assets/javascripts/explorev2/reducers/exploreReducer.js b/superset/assets/javascripts/explorev2/reducers/exploreReducer.js
@@ -1,7 +1,9 @@
+/* eslint camelcase: 0 */
 import { defaultFormData } from '../stores/store';
 import * as actions from '../actions/exploreActions';
 import { addToArr, removeFromArr, alterInArr } from '../../../utils/reducerUtils';
 import { now } from '../../modules/dates';
+import { getExploreUrl } from '../exploreUtils';
 
 export const exploreReducer = function (state, action) {
   const actionHandlers = {
@@ -105,56 +107,36 @@ export const exploreReducer = function (state, action) {
         { viz: Object.assign({}, state.viz, { form_data: newFormData }) }
       );
     },
-    [actions.UPDATE_CHART]() {
-      const vizUpdates = {
-        column_formats: action.viz.column_formats,
-        json_endpoint: action.viz.json_endpoint,
-        csv_endpoint: action.viz.csv_endpoint,
-        standalone_endpoint: action.viz.standalone_endpoint,
-        query: action.viz.query,
-        data: action.viz.data,
-      };
-      const chartUpdateEndTime = now();
-      return Object.assign(
-        {},
-        state,
-        {
-          viz: Object.assign({}, state.viz, vizUpdates),
-          chartStatus: 'success',
-          chartUpdateEndTime,
-        });
-    },
-    [actions.UPDATE_EXPLORE_ENDPOINTS]() {
+    [actions.CHART_UPDATE_SUCCEEDED]() {
       const vizUpdates = {
-        json_endpoint: action.jsonUrl,
-        csv_endpoint: action.csvUrl,
-        standalone_endpoint: action.standaloneUrl,
         query: action.query,
       };
       return Object.assign(
         {},
         state,
         {
+          chartStatus: 'success',
           viz: Object.assign({}, state.viz, vizUpdates),
         });
     },
-    [actions.CHART_UPDATE_SUCCEEDED]() {
+    [actions.CHART_UPDATE_STARTED]() {
+      const chartUpdateStartTime = now();
+      const form_data = Object.assign({}, state.viz.form_data);
+      const datasource_type = state.datasource_type;
       const vizUpdates = {
-        query: action.query,
+        json_endpoint: getExploreUrl(form_data, datasource_type, 'json'),
+        csv_endpoint: getExploreUrl(form_data, datasource_type, 'csv'),
+        standalone_endpoint:
+          getExploreUrl(form_data, datasource_type, 'standalone'),
       };
-      return Object.assign(
-        {},
-        state,
+      return Object.assign({}, state,
         {
-          isChartLoading: false,
+          chartStatus: 'loading',
+          chartUpdateEndTime: null,
+          chartUpdateStartTime,
           viz: Object.assign({}, state.viz, vizUpdates),
         });
     },
-    [actions.CHART_UPDATE_STARTED]() {
-      const chartUpdateStartTime = now();
-      return Object.assign({}, state,
-        { chartStatus: 'loading', chartUpdateEndTime: null, chartUpdateStartTime });
-    },
     [actions.CHART_UPDATE_FAILED]() {
       const chartUpdateEndTime = now();
       return Object.assign({}, state,

diff --git a/superset/assets/visualizations/table.js b/superset/assets/visualizations/table.js
@@ -150,7 +150,6 @@ function tableVis(slice) {
         const mainMetric = fd.metrics[0];
         datatable.column(data.columns.indexOf(mainMetric)).order('desc').draw();
       }
-      debugger;
       slice.done(json);
       container.parents('.widget').find('.tooltip').remove();
     }