diff --git a/superset/assets/javascripts/explore/components/ControlPanelsContainer.jsx b/superset/assets/javascripts/explore/components/ControlPanelsContainer.jsx index 915a04f283f15..71e2bc1032871 100644 --- a/superset/assets/javascripts/explore/components/ControlPanelsContainer.jsx +++ b/superset/assets/javascripts/explore/components/ControlPanelsContainer.jsx @@ -3,7 +3,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; -import { Alert } from 'react-bootstrap'; +import { Alert, Tab, Tabs } from 'react-bootstrap'; import visTypes, { sectionsToRender } from '../stores/visTypes'; import ControlPanelSection from './ControlPanelSection'; import ControlRow from './ControlRow'; @@ -26,6 +26,7 @@ class ControlPanelsContainer extends React.Component { super(props); this.removeAlert = this.removeAlert.bind(this); this.getControlData = this.getControlData.bind(this); + this.renderControlPanelSection = this.renderControlPanelSection.bind(this); } getControlData(controlName) { const control = this.props.controls[controlName]; @@ -49,8 +50,56 @@ class ControlPanelsContainer extends React.Component { removeAlert() { this.props.actions.removeControlPanelAlert(); } - render() { + renderControlPanelSection(section) { const ctrls = this.props.controls; + const hasErrors = section.controlSetRows.some(rows => rows.some(s => ( + ctrls[s] && + ctrls[s].validationErrors && + (ctrls[s].validationErrors.length > 0) + ))); + return ( + + {section.controlSetRows.map((controlSets, i) => ( + ( + controlName && + ctrls[controlName] && + + ))} + /> + ))} + + ); + } + render() { + const allSectionsToRender = this.sectionsToRender(); + const querySectionsToRender = []; + const displaySectionsToRender = []; + allSectionsToRender.forEach((section) => { + if (section.controlSetRows.some(rows => rows.some( + control => controls[control] && !controls[control].renderTrigger, + ))) { + querySectionsToRender.push(section); + } else { + displaySectionsToRender.push(section); + } + }); + return (
@@ -64,40 +113,16 @@ class ControlPanelsContainer extends React.Component { /> } - {this.sectionsToRender().map((section) => { - const hasErrors = section.controlSetRows.some(rows => rows.some(s => ( - ctrls[s] && - ctrls[s].validationErrors && - (ctrls[s].validationErrors.length > 0) - ))); - return ( - - {section.controlSetRows.map((controlSets, i) => ( - ( - controlName && - ctrls[controlName] && - - ))} - /> - ))} - ); - })} + + + {querySectionsToRender.map(this.renderControlPanelSection)} + + {displaySectionsToRender.length > 0 && + + {displaySectionsToRender.map(this.renderControlPanelSection)} + + } +
); diff --git a/superset/assets/javascripts/explore/stores/controls.jsx b/superset/assets/javascripts/explore/stores/controls.jsx index a15333e29ddf4..5e2c44e839d7a 100644 --- a/superset/assets/javascripts/explore/stores/controls.jsx +++ b/superset/assets/javascripts/explore/stores/controls.jsx @@ -229,6 +229,7 @@ export const controls = { stacked_style: { type: 'SelectControl', label: t('Stacked Style'), + renderTrigger: true, choices: [ ['stack', 'stack'], ['stream', 'stream'], @@ -389,6 +390,7 @@ export const controls = { type: 'CheckboxControl', label: t('Sort Bars'), default: false, + renderTrigger: true, description: t('Sort bars by x labels.'), }, @@ -846,6 +848,7 @@ export const controls = { treemap_ratio: { type: 'TextControl', label: t('Ratio'), + renderTrigger: true, isFloat: true, default: 0.5 * (1 + Math.sqrt(5)), // d3 default, golden ratio description: t('Target aspect ratio for treemap tiles.'), @@ -1183,6 +1186,7 @@ export const controls = { type: 'SelectControl', label: t('Label Type'), default: 'key', + renderTrigger: true, choices: [ ['key', 'Category Name'], ['value', 'Value'], diff --git a/superset/assets/javascripts/explore/stores/visTypes.js b/superset/assets/javascripts/explore/stores/visTypes.js index a41b81b3391ea..df00bc5da5a79 100644 --- a/superset/assets/javascripts/explore/stores/visTypes.js +++ b/superset/assets/javascripts/explore/stores/visTypes.js @@ -59,7 +59,7 @@ export const sections = { ['metrics'], ['groupby'], ['limit', 'timeseries_limit_metric'], - ['order_desc', null], + ['order_desc', 'contribution'], ], }, { @@ -104,18 +104,19 @@ export const visTypes = { ['groupby'], ['columns'], ['row_limit'], + ['contribution'], ], }, { label: t('Chart Options'), + expanded: true, controlSetRows: [ ['color_scheme'], ['show_legend', 'show_bar_value'], ['bar_stacked', 'order_bars'], ['y_axis_format', 'bottom_margin'], ['x_axis_label', 'y_axis_label'], - ['reduce_x_ticks', 'contribution'], - ['show_controls'], + ['reduce_x_ticks', 'show_controls'], ], }, ], @@ -144,6 +145,7 @@ export const visTypes = { }, { label: t('Chart Options'), + expanded: true, controlSetRows: [ ['pie_label_type'], ['donut', 'show_legend'], @@ -162,15 +164,17 @@ export const visTypes = { sections.NVD3TimeSeries[0], { label: t('Chart Options'), + expanded: true, controlSetRows: [ ['color_scheme'], ['show_brush', 'show_legend'], ['rich_tooltip', 'show_markers'], - ['line_interpolation', 'contribution'], + ['line_interpolation'], ], }, { label: t('X Axis'), + expanded: true, controlSetRows: [ ['x_axis_label', 'bottom_margin'], ['x_axis_showminmax', 'x_axis_format'], @@ -178,6 +182,7 @@ export const visTypes = { }, { label: t('Y Axis'), + expanded: true, controlSetRows: [ ['y_axis_label', 'left_margin'], ['y_axis_showminmax', 'y_log_scale'], @@ -217,6 +222,7 @@ export const visTypes = { }, { label: t('X Axis'), + expanded: true, controlSetRows: [ ['x_axis_label', 'bottom_margin'], ['x_axis_showminmax', 'x_axis_format'], @@ -224,6 +230,7 @@ export const visTypes = { }, { label: t('Y Axis'), + expanded: true, controlSetRows: [ ['y_axis_label', 'left_margin'], ['y_axis_showminmax', 'y_log_scale'], @@ -245,6 +252,7 @@ export const visTypes = { controlPanelSections: [ { label: t('Chart Options'), + expanded: true, controlSetRows: [ ['color_scheme'], ['x_axis_format'], @@ -252,12 +260,14 @@ export const visTypes = { }, { label: t('Y Axis 1'), + expanded: true, controlSetRows: [ ['metric', 'y_axis_format'], ], }, { label: t('Y Axis 2'), + expanded: true, controlSetRows: [ ['metric_2', 'y_axis_2_format'], ], @@ -287,16 +297,18 @@ export const visTypes = { sections.NVD3TimeSeries[0], { label: t('Chart Options'), + expanded: true, controlSetRows: [ ['color_scheme'], ['show_brush', 'show_legend', 'show_bar_value'], - ['rich_tooltip', 'contribution'], - ['line_interpolation', 'bar_stacked'], - ['bottom_margin', 'show_controls'], + ['rich_tooltip', 'bar_stacked'], + ['line_interpolation', 'show_controls'], + ['bottom_margin'], ], }, { label: t('Axes'), + expanded: true, controlSetRows: [ ['x_axis_format', 'y_axis_format'], ['x_axis_showminmax', 'reduce_x_ticks'], @@ -322,6 +334,7 @@ export const visTypes = { sections.NVD3TimeSeries[0], { label: t('Chart Options'), + expanded: true, controlSetRows: [ ['color_scheme'], ['x_axis_format', 'y_axis_format'], @@ -698,16 +711,17 @@ export const visTypes = { sections.NVD3TimeSeries[0], { label: t('Chart Options'), + expanded: true, controlSetRows: [ ['show_brush', 'show_legend'], ['line_interpolation', 'stacked_style'], ['color_scheme'], - ['rich_tooltip', 'contribution'], - ['show_controls', null], + ['rich_tooltip', 'show_controls'], ], }, { label: t('Axes'), + expanded: true, controlSetRows: [ ['x_axis_format', 'x_axis_showminmax'], ['y_axis_format', 'y_axis_bounds'], @@ -891,6 +905,7 @@ export const visTypes = { }, { label: t('Chart Options'), + expanded: true, controlSetRows: [ ['color_scheme'], ['treemap_ratio'], @@ -939,6 +954,7 @@ export const visTypes = { }, { label: t('Chart Options'), + expanded: true, controlSetRows: [ ['color_scheme'], ['whisker_options'], @@ -960,6 +976,7 @@ export const visTypes = { }, { label: t('Chart Options'), + expanded: true, controlSetRows: [ ['color_scheme'], ['show_legend', null], @@ -973,6 +990,7 @@ export const visTypes = { }, { label: t('X Axis'), + expanded: true, controlSetRows: [ ['x_axis_label', 'left_margin'], ['x', 'x_axis_format'], @@ -981,6 +999,7 @@ export const visTypes = { }, { label: t('Y Axis'), + expanded: true, controlSetRows: [ ['y_axis_label', 'bottom_margin'], ['y', 'y_axis_format'], @@ -1011,6 +1030,7 @@ export const visTypes = { }, { label: t('Chart Options'), + expanded: true, controlSetRows: [ ['metric'], ['ranges', 'range_labels'], @@ -1033,6 +1053,7 @@ export const visTypes = { }, { label: t('Chart Options'), + expanded: true, controlSetRows: [ ['compare_lag', 'compare_suffix'], ['y_axis_format', null], @@ -1058,6 +1079,7 @@ export const visTypes = { }, { label: t('Chart Options'), + expanded: true, controlSetRows: [ ['subheader'], ['y_axis_format'], @@ -1084,6 +1106,7 @@ export const visTypes = { }, { label: t('Chart Options'), + expanded: true, controlSetRows: [ ['color_scheme'], ['link_length'], @@ -1117,6 +1140,7 @@ export const visTypes = { }, { label: t('Chart Options'), + expanded: true, controlSetRows: [ ['color_scheme'], ], @@ -1155,6 +1179,7 @@ export const visTypes = { }, { label: t('Chart Options'), + expanded: true, controlSetRows: [ ['color_scheme'], ], @@ -1208,6 +1233,7 @@ export const visTypes = { }, { label: t('Chart Options'), + expanded: true, controlSetRows: [ ['y_axis_format', null], ['color_scheme'], @@ -1419,6 +1445,7 @@ export const visTypes = { sections.NVD3TimeSeries[0], { label: t('Chart Options'), + expanded: true, controlSetRows: [ ['series_height', 'horizon_color_scale'], ], @@ -1567,7 +1594,7 @@ export const visTypes = { sections.NVD3TimeSeries[0], { label: t('Chart Options'), - expanded: false, + expanded: true, controlSetRows: [ ['color_scheme'], ['number_format', 'date_time_format'],