From 6b80f5bb35e497c79fe458b25ba87266e3c0f3bf Mon Sep 17 00:00:00 2001 From: vera-liu Date: Tue, 22 Nov 2016 14:55:32 -0800 Subject: [PATCH] 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 --- .../explorev2/actions/exploreActions.js | 4 +- .../explorev2/components/ChartContainer.jsx | 8 +-- .../components/ControlPanelsContainer.jsx | 12 ++--- .../explorev2/reducers/exploreReducer.js | 3 +- .../javascripts/explorev2/stores/store.js | 49 +++++++++++-------- .../javascripts/explorev2/actions_spec.js | 5 +- superset/templates/superset/explorev2.html | 2 +- 7 files changed, 45 insertions(+), 38 deletions(-) diff --git a/superset/assets/javascripts/explorev2/actions/exploreActions.js b/superset/assets/javascripts/explorev2/actions/exploreActions.js index a1a347dd7d..0ee46bcc0f 100644 --- a/superset/assets/javascripts/explorev2/actions/exploreActions.js +++ b/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) { - return { type: SET_FIELD_VALUE, key, value, label }; +export function setFieldValue(datasource_type, key, value, label) { + return { type: SET_FIELD_VALUE, datasource_type, key, value, label }; } export const UPDATE_CHART = 'UPDATE_CHART'; diff --git a/superset/assets/javascripts/explorev2/components/ChartContainer.jsx b/superset/assets/javascripts/explorev2/components/ChartContainer.jsx index bd944b852b..388f6f150d 100644 --- a/superset/assets/javascripts/explorev2/components/ChartContainer.jsx +++ b/superset/assets/javascripts/explorev2/components/ChartContainer.jsx @@ -182,12 +182,14 @@ class ChartContainer extends React.Component { /> } - {!this.props.isChartLoading && -
) + : + (
{ this.chartContainerRef = ref; }} className={this.props.viz_type} - /> + />) }
diff --git a/superset/assets/javascripts/explorev2/components/ControlPanelsContainer.jsx b/superset/assets/javascripts/explorev2/components/ControlPanelsContainer.jsx index 0e42825b41..d39640588b 100644 --- a/superset/assets/javascripts/explorev2/components/ControlPanelsContainer.jsx +++ b/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]; - 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; + return sectionsToRender(this.props.form_data.viz_type, this.props.datasource_type); } fieldOverrides() { diff --git a/superset/assets/javascripts/explorev2/reducers/exploreReducer.js b/superset/assets/javascripts/explorev2/reducers/exploreReducer.js index da93cdf269..9b4d0edf7d 100644 --- a/superset/assets/javascripts/explorev2/reducers/exploreReducer.js +++ b/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; diff --git a/superset/assets/javascripts/explorev2/stores/store.js b/superset/assets/javascripts/explorev2/stores/store.js index 4ceefe71ed..abe69cacfd 100644 --- a/superset/assets/javascripts/explorev2/stores/store.js +++ b/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 viz = visTypes[vizType]; - const sectionsToRender = [datasourceAndVizType].concat(viz.controlPanelSections, sqlClause); - sectionsToRender.forEach((section) => { + const sections = sectionsToRender(vizType, datasourceType); + sections.forEach((section) => { section.fieldSetRows.forEach((fieldSetRow) => { fieldSetRow.forEach((k) => { data[k] = fields[k].default; diff --git a/superset/assets/spec/javascripts/explorev2/actions_spec.js b/superset/assets/spec/javascripts/explorev2/actions_spec.js index c779c3a334..ceef462238 100644 --- a/superset/assets/spec/javascripts/explorev2/actions_spec.js +++ b/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); }); }); diff --git a/superset/templates/superset/explorev2.html b/superset/templates/superset/explorev2.html index ced7046c75..9dd5564e66 100644 --- a/superset/templates/superset/explorev2.html +++ b/superset/templates/superset/explorev2.html @@ -9,7 +9,7 @@ {% endblock %} {% block body %} - +