diff --git a/superset/assets/javascripts/explorev2/actions/exploreActions.js b/superset/assets/javascripts/explorev2/actions/exploreActions.js index 7fba28a1e685..63bc6f1a916b 100644 --- a/superset/assets/javascripts/explorev2/actions/exploreActions.js +++ b/superset/assets/javascripts/explorev2/actions/exploreActions.js @@ -49,7 +49,7 @@ export function fetchDatasourcesFailed(error) { } export const RESET_FIELDS = 'RESET_FIELDS'; -export function resetFields() { +export function resetControls() { return { type: RESET_FIELDS }; } @@ -68,7 +68,7 @@ export function fetchDatasourceMetadata(datasourceKey, alsoTriggerQuery = false) success: (data) => { dispatch(setDatasource(data)); dispatch(fetchDatasourceSucceeded()); - dispatch(resetFields()); + dispatch(resetControls()); if (alsoTriggerQuery) { dispatch(triggerQuery()); } @@ -126,8 +126,8 @@ export function saveFaveStar(sliceId, isStarred) { } export const SET_FIELD_VALUE = 'SET_FIELD_VALUE'; -export function setFieldValue(fieldName, value, validationErrors) { - return { type: SET_FIELD_VALUE, fieldName, value, validationErrors }; +export function setControlValue(controlName, value, validationErrors) { + return { type: SET_FIELD_VALUE, controlName, value, validationErrors }; } export const CHART_UPDATE_STARTED = 'CHART_UPDATE_STARTED'; diff --git a/superset/assets/javascripts/explorev2/components/ChartContainer.jsx b/superset/assets/javascripts/explorev2/components/ChartContainer.jsx index 22c5b7552ac8..e56133f52c7c 100644 --- a/superset/assets/javascripts/explorev2/components/ChartContainer.jsx +++ b/superset/assets/javascripts/explorev2/components/ChartContainer.jsx @@ -9,7 +9,7 @@ import FaveStar from '../../components/FaveStar'; import TooltipWrapper from '../../components/TooltipWrapper'; import Timer from '../../components/Timer'; import { getExploreUrl } from '../exploreUtils'; -import { getFormDataFromFields } from '../stores/store'; +import { getFormDataFromControls } from '../stores/store'; const CHART_STATUS_MAP = { failed: 'danger', @@ -268,7 +268,7 @@ class ChartContainer extends React.PureComponent { ChartContainer.propTypes = propTypes; function mapStateToProps(state) { - const formData = getFormDataFromFields(state.fields); + const formData = getFormDataFromControls(state.controls); return { alert: state.chartAlert, can_download: state.can_download, diff --git a/superset/assets/javascripts/explorev2/components/FieldSet.jsx b/superset/assets/javascripts/explorev2/components/Control.jsx similarity index 68% rename from superset/assets/javascripts/explorev2/components/FieldSet.jsx rename to superset/assets/javascripts/explorev2/components/Control.jsx index 48a9d173010f..ca8ead8609cf 100644 --- a/superset/assets/javascripts/explorev2/components/FieldSet.jsx +++ b/superset/assets/javascripts/explorev2/components/Control.jsx @@ -1,26 +1,27 @@ import React, { PropTypes } from 'react'; -import CheckboxField from './CheckboxField'; import ControlHeader from './ControlHeader'; -import FilterField from './FilterField'; -import HiddenField from './HiddenField'; -import SelectField from './SelectField'; -import TextAreaField from './TextAreaField'; -import TextField from './TextField'; -const fieldMap = { - CheckboxField, - FilterField, - HiddenField, - SelectField, - TextAreaField, - TextField, +import CheckboxControl from './controls/CheckboxControl'; +import FilterControl from './controls/FilterControl'; +import HiddenControl from './controls/HiddenControl'; +import SelectControl from './controls/SelectControl'; +import TextAreaControl from './controls/TextAreaControl'; +import TextControl from './controls/TextControl'; + +const controlMap = { + CheckboxControl, + FilterControl, + HiddenControl, + SelectControl, + TextAreaControl, + TextControl, }; -const fieldTypes = Object.keys(fieldMap); +const controlTypes = Object.keys(controlMap); const propTypes = { actions: PropTypes.object.isRequired, name: PropTypes.string.isRequired, - type: PropTypes.oneOf(fieldTypes).isRequired, + type: PropTypes.oneOf(controlTypes).isRequired, label: PropTypes.string.isRequired, choices: PropTypes.arrayOf(PropTypes.array), description: PropTypes.string, @@ -42,7 +43,7 @@ const defaultProps = { validationErrors: [], }; -export default class FieldSet extends React.PureComponent { +export default class Control extends React.PureComponent { constructor(props) { super(props); this.validate = this.validate.bind(this); @@ -53,7 +54,7 @@ export default class FieldSet extends React.PureComponent { if (errors && errors.length > 0) { validationErrors = validationErrors.concat(errors); } - this.props.actions.setFieldValue(this.props.name, value, validationErrors); + this.props.actions.setControlValue(this.props.name, value, validationErrors); } validate(value) { const validators = this.props.validators; @@ -69,7 +70,7 @@ export default class FieldSet extends React.PureComponent { return validationErrors; } render() { - const FieldType = fieldMap[this.props.type]; + const ControlType = controlMap[this.props.type]; const divStyle = this.props.hidden ? { display: 'none' } : null; return (
@@ -80,7 +81,7 @@ export default class FieldSet extends React.PureComponent { validationErrors={this.props.validationErrors} rightNode={this.props.rightNode} /> - @@ -89,5 +90,5 @@ export default class FieldSet extends React.PureComponent { } } -FieldSet.propTypes = propTypes; -FieldSet.defaultProps = defaultProps; +Control.propTypes = propTypes; +Control.defaultProps = defaultProps; diff --git a/superset/assets/javascripts/explorev2/components/ControlPanelsContainer.jsx b/superset/assets/javascripts/explorev2/components/ControlPanelsContainer.jsx index ee228a051ef0..d5fa7ea0d073 100644 --- a/superset/assets/javascripts/explorev2/components/ControlPanelsContainer.jsx +++ b/superset/assets/javascripts/explorev2/components/ControlPanelsContainer.jsx @@ -6,33 +6,33 @@ import { connect } from 'react-redux'; import { Panel, Alert } from 'react-bootstrap'; import { sectionsToRender } from '../stores/visTypes'; import ControlPanelSection from './ControlPanelSection'; -import FieldSetRow from './FieldSetRow'; -import FieldSet from './FieldSet'; -import fields from '../stores/fields'; +import ControlRow from './ControlRow'; +import Control from './Control'; +import controls from '../stores/controls'; const propTypes = { - datasource_type: PropTypes.string.isRequired, actions: PropTypes.object.isRequired, - fields: PropTypes.object.isRequired, - isDatasourceMetaLoading: PropTypes.bool.isRequired, - form_data: PropTypes.object.isRequired, - y_axis_zero: PropTypes.any, alert: PropTypes.string, + datasource_type: PropTypes.string.isRequired, exploreState: PropTypes.object.isRequired, + controls: PropTypes.object.isRequired, + form_data: PropTypes.object.isRequired, + isDatasourceMetaLoading: PropTypes.bool.isRequired, + y_axis_zero: PropTypes.any, }; class ControlPanelsContainer extends React.Component { constructor(props) { super(props); this.removeAlert = this.removeAlert.bind(this); - this.getFieldData = this.getFieldData.bind(this); + this.getControlData = this.getControlData.bind(this); } - getFieldData(fieldName) { - const mapF = fields[fieldName].mapStateToProps; + getControlData(controlName) { + const mapF = controls[controlName].mapStateToProps; if (mapF) { - return Object.assign({}, this.props.fields[fieldName], mapF(this.props.exploreState)); + return Object.assign({}, this.props.controls[controlName], mapF(this.props.exploreState)); } - return this.props.fields[fieldName]; + return this.props.controls[controlName]; } sectionsToRender() { return sectionsToRender(this.props.form_data.viz_type, this.props.datasource_type); @@ -60,17 +60,17 @@ class ControlPanelsContainer extends React.Component { label={section.label} tooltip={section.description} > - {section.fieldSetRows.map((fieldSets, i) => ( - ( -
( + ( + ))} /> @@ -89,7 +89,7 @@ function mapStateToProps(state) { return { alert: state.controlPanelAlert, isDatasourceMetaLoading: state.isDatasourceMetaLoading, - fields: state.fields, + controls: state.controls, exploreState: state, }; } diff --git a/superset/assets/javascripts/explorev2/components/ControlRow.jsx b/superset/assets/javascripts/explorev2/components/ControlRow.jsx new file mode 100644 index 000000000000..2838d5ea5395 --- /dev/null +++ b/superset/assets/javascripts/explorev2/components/ControlRow.jsx @@ -0,0 +1,23 @@ +import React, { PropTypes } from 'react'; + +const NUM_COLUMNS = 12; + +const propTypes = { + controls: PropTypes.arrayOf(PropTypes.object).isRequired, +}; + +function ControlSetRow(props) { + const colSize = NUM_COLUMNS / props.controls.length; + return ( +
+ {props.controls.map((control, i) => ( +
+ {control} +
+ ))} +
+ ); +} + +ControlSetRow.propTypes = propTypes; +export default ControlSetRow; diff --git a/superset/assets/javascripts/explorev2/components/ExploreViewContainer.jsx b/superset/assets/javascripts/explorev2/components/ExploreViewContainer.jsx index 83117a6e3654..3bc4e6a7cbd7 100644 --- a/superset/assets/javascripts/explorev2/components/ExploreViewContainer.jsx +++ b/superset/assets/javascripts/explorev2/components/ExploreViewContainer.jsx @@ -8,13 +8,13 @@ import ControlPanelsContainer from './ControlPanelsContainer'; import SaveModal from './SaveModal'; import QueryAndSaveBtns from './QueryAndSaveBtns'; import { getExploreUrl } from '../exploreUtils'; -import { getFormDataFromFields } from '../stores/store'; +import { getFormDataFromControls } from '../stores/store'; const propTypes = { actions: PropTypes.object.isRequired, datasource_type: PropTypes.string.isRequired, chartStatus: PropTypes.string.isRequired, - fields: PropTypes.object.isRequired, + controls: PropTypes.object.isRequired, forcedHeight: PropTypes.string, form_data: PropTypes.object.isRequired, standalone: PropTypes.bool.isRequired, @@ -37,11 +37,11 @@ class ExploreViewContainer extends React.Component { } componentWillReceiveProps(np) { - if (np.fields.viz_type.value !== this.props.fields.viz_type.value) { - this.props.actions.resetFields(); + if (np.controls.viz_type.value !== this.props.controls.viz_type.value) { + this.props.actions.resetControls(); this.props.actions.triggerQuery(); } - if (np.fields.datasource.value !== this.props.fields.datasource.value) { + if (np.controls.datasource.value !== this.props.controls.datasource.value) { this.props.actions.fetchDatasourceMetadata(np.form_data.datasource, true); } } @@ -98,13 +98,13 @@ class ExploreViewContainer extends React.Component { renderErrorMessage() { // Returns an error message as a node if any errors are in the store const errors = []; - for (const fieldName in this.props.fields) { - const field = this.props.fields[fieldName]; - if (field.validationErrors && field.validationErrors.length > 0) { + for (const controlName in this.props.controls) { + const control = this.props.controls[controlName]; + if (control.validationErrors && control.validationErrors.length > 0) { errors.push( -
- {`[ ${field.label} ] `} - {field.validationErrors.join('. ')} +
+ {`[ ${control.label} ] `} + {control.validationErrors.join('. ')}
); } @@ -174,11 +174,11 @@ class ExploreViewContainer extends React.Component { ExploreViewContainer.propTypes = propTypes; function mapStateToProps(state) { - const form_data = getFormDataFromFields(state.fields); + const form_data = getFormDataFromControls(state.controls); return { chartStatus: state.chartStatus, datasource_type: state.datasource_type, - fields: state.fields, + controls: state.controls, form_data, standalone: state.standalone, triggerQuery: state.triggerQuery, diff --git a/superset/assets/javascripts/explorev2/components/FieldSetRow.jsx b/superset/assets/javascripts/explorev2/components/FieldSetRow.jsx deleted file mode 100644 index 904cddf12096..000000000000 --- a/superset/assets/javascripts/explorev2/components/FieldSetRow.jsx +++ /dev/null @@ -1,23 +0,0 @@ -import React, { PropTypes } from 'react'; - -const NUM_COLUMNS = 12; - -const propTypes = { - fields: PropTypes.arrayOf(PropTypes.object).isRequired, -}; - -function FieldSetRow(props) { - const colSize = NUM_COLUMNS / props.fields.length; - return ( -
- {props.fields.map((field, i) => ( -
- {field} -
- ))} -
- ); -} - -FieldSetRow.propTypes = propTypes; -export default FieldSetRow; diff --git a/superset/assets/javascripts/explorev2/components/CheckboxField.jsx b/superset/assets/javascripts/explorev2/components/controls/CheckboxControl.jsx similarity index 78% rename from superset/assets/javascripts/explorev2/components/CheckboxField.jsx rename to superset/assets/javascripts/explorev2/components/controls/CheckboxControl.jsx index 2614cf4d01c9..c1cffe6ae173 100644 --- a/superset/assets/javascripts/explorev2/components/CheckboxField.jsx +++ b/superset/assets/javascripts/explorev2/components/controls/CheckboxControl.jsx @@ -14,7 +14,7 @@ const defaultProps = { onChange: () => {}, }; -export default class CheckboxField extends React.Component { +export default class CheckboxControl extends React.Component { onToggle() { this.props.onChange(!this.props.value); } @@ -28,5 +28,5 @@ export default class CheckboxField extends React.Component { } } -CheckboxField.propTypes = propTypes; -CheckboxField.defaultProps = defaultProps; +CheckboxControl.propTypes = propTypes; +CheckboxControl.defaultProps = defaultProps; diff --git a/superset/assets/javascripts/explorev2/components/Filter.jsx b/superset/assets/javascripts/explorev2/components/controls/Filter.jsx similarity index 91% rename from superset/assets/javascripts/explorev2/components/Filter.jsx rename to superset/assets/javascripts/explorev2/components/controls/Filter.jsx index e28d1bdcc9ae..402622274944 100644 --- a/superset/assets/javascripts/explorev2/components/Filter.jsx +++ b/superset/assets/javascripts/explorev2/components/controls/Filter.jsx @@ -2,7 +2,7 @@ const $ = window.$ = require('jquery'); import React, { PropTypes } from 'react'; import Select from 'react-select'; import { Button, Row, Col } from 'react-bootstrap'; -import SelectField from './SelectField'; +import SelectControl from './SelectControl'; const propTypes = { choices: PropTypes.array, @@ -45,7 +45,7 @@ export default class Filter extends React.Component { }); } } - changeFilter(field, event) { + changeFilter(control, event) { let value = event; if (event && event.target) { value = event.target.value; @@ -53,15 +53,15 @@ export default class Filter extends React.Component { if (event && event.value) { value = event.value; } - this.props.changeFilter(field, value); - if (field === 'col' && value !== null && this.props.datasource.filter_select) { + this.props.changeFilter(control, value); + if (control === 'col' && value !== null && this.props.datasource.filter_select) { this.fetchFilterValues(value); } } removeFilter(filter) { this.props.removeFilter(filter); } - renderFilterFormField(filter) { + renderFilterFormControl(filter) { const datasource = this.props.datasource; if (datasource && datasource.filter_select) { if (!filter.choices) { @@ -81,7 +81,7 @@ export default class Filter extends React.Component { ); } return ( - - {this.renderFilterFormField(filter)} + {this.renderFilterFormControl(filter)}