Get sections to render when switching datasource (#1660)

* Get sections to render when switching datasource
 - Move sectionsToRender in store and use is for defaultFormData
 - Change some SelectField to FreeFormSelect according to forms.py

* Solved the css not found problem in staging

* Fixed js tests

superset/assets/javascripts/explorev2/actions/exploreActions.js

@@ -105,8 +105,8 @@ export function changeFilterValue(filter, value) {
 }
 
 export const SET_FIELD_VALUE = 'SET_FIELD_VALUE';
-export function setFieldValue(key, value, label) {
+export function setFieldValue(datasource_type, key, value, label) {
-  return { type: SET_FIELD_VALUE, key, value, label };
+  return { type: SET_FIELD_VALUE, datasource_type, key, value, label };
 }
 
 export const UPDATE_CHART = 'UPDATE_CHART';

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

@@ -182,12 +182,14 @@ class ChartContainer extends React.Component {
               />
             </Alert>
           }
-          {!this.props.isChartLoading &&
+          {this.props.isChartLoading ?
-            <div
+            (<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}
-            />
+            />)
           }
         </Panel>
       </div>

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

@@ -4,7 +4,7 @@ import { bindActionCreators } from 'redux';
 import * as actions from '../actions/exploreActions';
 import { connect } from 'react-redux';
 import { Panel, Alert } from 'react-bootstrap';
-import { visTypes, commonControlPanelSections } from '../stores/store';
+import { visTypes, sectionsToRender } from '../stores/store';
 import ControlPanelSection from './ControlPanelSection';
 import FieldSetRow from './FieldSetRow';
 
@@ -37,17 +37,11 @@ class ControlPanelsContainer extends React.Component {
   }
 
   onChange(name, value, label) {
-    this.props.actions.setFieldValue(name, value, label);
+    this.props.actions.setFieldValue(this.props.datasource_type, name, value, label);
   }
 
   sectionsToRender() {
-    const viz = visTypes[this.props.form_data.viz_type];
+    return sectionsToRender(this.props.form_data.viz_type, this.props.datasource_type);
-    const timeSection = this.props.datasource_type === 'table' ?
-      commonControlPanelSections.sqlaTimeSeries : commonControlPanelSections.druidTimeSeries;
-    const { datasourceAndVizType, sqlClause } = commonControlPanelSections;
-    const sectionsToRender = [datasourceAndVizType].concat(
-      viz.controlPanelSections, timeSection, sqlClause);
-    return sectionsToRender;
   }
 
   fieldOverrides() {

superset/assets/javascripts/explorev2/reducers/exploreReducer.js

@@ -69,7 +69,8 @@ export const exploreReducer = function (state, action) {
     },
     [actions.SET_FIELD_VALUE]() {
       const newFormData = action.key === 'datasource' ?
-        defaultFormData(state.viz.form_data.viz_type) : Object.assign({}, state.viz.form_data);
+        defaultFormData(state.viz.form_data.viz_type, action.datasource_type) :
+        Object.assign({}, state.viz.form_data);
       if (action.key === 'datasource') {
         newFormData.datasource_name = action.label;
         newFormData.slice_id = state.viz.form_data.slice_id;

superset/assets/javascripts/explorev2/stores/store.js

@@ -1,3 +1,4 @@
+/* eslint camelcase: 0 */
 import { formatSelectOptionsForRange, formatSelectOptions } from '../../modules/utils';
 
 export const fieldTypes = [
@@ -969,7 +970,7 @@ export const fields = {
   },
 
   druid_time_origin: {
-    type: 'SelectField',
+    type: 'FreeFormSelectField',
     label: 'Origin',
     choices: [
       ['', 'default'],
@@ -981,7 +982,7 @@ export const fields = {
   },
 
   bottom_margin: {
-    type: 'SelectField',
+    type: 'FreeFormSelectField',
     label: 'Bottom Margin',
     choices: formatSelectOptions(['auto', 50, 75, 100, 125, 150, 200]),
     default: 'auto',
@@ -989,7 +990,7 @@ export const fields = {
   },
 
   granularity: {
-    type: 'SelectField',
+    type: 'FreeFormSelectField',
     label: 'Time Granularity',
     default: 'one day',
     choices: formatSelectOptions([
@@ -1030,7 +1031,7 @@ export const fields = {
   },
 
   link_length: {
-    type: 'SelectField',
+    type: 'FreeFormSelectField',
     label: 'Link Length',
     default: '200',
     choices: formatSelectOptions(['10', '25', '50', '75', '100', '150', '200', '250']),
@@ -1089,7 +1090,7 @@ export const fields = {
   },
 
   resample_how: {
-    type: 'SelectField',
+    type: 'FreeFormSelectField',
     label: 'Resample How',
     default: null,
     choices: formatSelectOptions(['', 'mean', 'sum', 'median']),
@@ -1097,7 +1098,7 @@ export const fields = {
   },
 
   resample_fillmethod: {
-    type: 'SelectField',
+    type: 'FreeFormSelectField',
     label: 'Resample Fill Method',
     default: null,
     choices: formatSelectOptions(['', 'ffill', 'bfill']),
@@ -1105,7 +1106,7 @@ export const fields = {
   },
 
   since: {
-    type: 'SelectField',
+    type: 'FreeFormSelectField',
     label: 'Since',
     default: '7 days ago',
     choices: formatSelectOptions([
@@ -1123,7 +1124,7 @@ export const fields = {
   },
 
   until: {
-    type: 'SelectField',
+    type: 'FreeFormSelectField',
     label: 'Until',
     default: 'now',
     choices: formatSelectOptions([
@@ -1137,14 +1138,14 @@ export const fields = {
   },
 
   max_bubble_size: {
-    type: 'SelectField',
+    type: 'FreeFormSelectField',
     label: 'Max Bubble Size',
     default: '25',
     choices: formatSelectOptions(['5', '10', '15', '25', '50', '75', '100']),
   },
 
   whisker_options: {
-    type: 'SelectField',
+    type: 'FreeFormSelectField',
     label: 'Whisker/outlier options',
     default: 'Tukey',
     description: 'Determines how whiskers and outliers are calculated.',
@@ -1164,7 +1165,7 @@ export const fields = {
   },
 
   number_format: {
-    type: 'SelectField',
+    type: 'FreeFormSelectField',
     label: 'Number format',
     default: D3_TIME_FORMAT_OPTIONS[0],
     choices: D3_TIME_FORMAT_OPTIONS,
@@ -1172,14 +1173,14 @@ export const fields = {
   },
 
   row_limit: {
-    type: 'SelectField',
+    type: 'FreeFormSelectField',
     label: 'Row limit',
     default: null,
     choices: formatSelectOptions(ROW_LIMIT_OPTIONS),
   },
 
   limit: {
-    type: 'SelectField',
+    type: 'FreeFormSelectField',
     label: 'Series limit',
     choices: formatSelectOptions(SERIES_LIMITS),
     default: 50,
@@ -1305,7 +1306,7 @@ export const fields = {
   },
 
   table_timestamp_format: {
-    type: 'SelectField',
+    type: 'FreeFormSelectField',
     label: 'Table Timestamp Format',
     default: 'smart_date',
     choices: TIME_STAMP_OPTIONS,
@@ -1657,7 +1658,7 @@ export const fields = {
   },
 
   mapbox_color: {
-    type: 'SelectField',
+    type: 'FreeFormSelectField',
     label: 'RGB Color',
     default: 'rgb(0, 122, 135)',
     choices: [
@@ -1672,16 +1673,24 @@ export const fields = {
   },
 };
 
-export function defaultFormData(vizType = 'table') {
+export function sectionsToRender(vizType, datasourceType) {
+  const viz = visTypes[vizType];
+  const timeSection = datasourceType === 'table' ?
+    commonControlPanelSections.sqlaTimeSeries : commonControlPanelSections.druidTimeSeries;
+  const { datasourceAndVizType, sqlClause } = commonControlPanelSections;
+  const sections = [datasourceAndVizType].concat(
+    viz.controlPanelSections, timeSection, sqlClause);
+  return sections;
+}
+
+export function defaultFormData(vizType = 'table', datasourceType = 'table') {
   const data = {
     slice_name: null,
     slice_id: null,
     datasource_name: null,
   };
-  const { datasourceAndVizType, sqlClause } = commonControlPanelSections;
+  const sections = sectionsToRender(vizType, datasourceType);
-  const viz = visTypes[vizType];
+  sections.forEach((section) => {
-  const sectionsToRender = [datasourceAndVizType].concat(viz.controlPanelSections, sqlClause);
-  sectionsToRender.forEach((section) => {
     section.fieldSetRows.forEach((fieldSetRow) => {
       fieldSetRow.forEach((k) => {
         data[k] = fields[k].default;

superset/assets/spec/javascripts/explorev2/actions_spec.js

@@ -7,11 +7,12 @@ import { exploreReducer } from '../../../javascripts/explorev2/reducers/exploreR
 describe('reducers', () => {
   it('sets correct field value given a key and value', () => {
     const newState = exploreReducer(
-      initialState('dist_bar'), actions.setFieldValue('x_axis_label', 'x'));
+      initialState('dist_bar'), actions.setFieldValue('table', 'x_axis_label', 'x'));
     expect(newState.viz.form_data.x_axis_label).to.equal('x');
   });
   it('toggles a boolean field value given only a key', () => {
-    const newState = exploreReducer(initialState('dist_bar'), actions.setFieldValue('show_legend'));
+    const newState = exploreReducer(initialState('dist_bar'),
+      actions.setFieldValue('table', 'show_legend'));
     expect(newState.viz.form_data.show_legend).to.equal(false);
   });
 });

superset/templates/superset/explorev2.html

@@ -9,7 +9,7 @@
 {% endblock %}
 
 {% block body %}
-  <link rel="stylesheet" type="text/css" href="/static/assets/stylesheets/explorev2/explorev2.css">
+  <link rel="stylesheet" type="text/css" href="/static/assets/stylesheets/exploreV2/explorev2.css">
   <div
     id="js-explore-view-container"
     data-bootstrap="{{ bootstrap_data }}"