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'],