diff --git a/superset/assets/javascripts/explore/components/ControlPanelSection.jsx b/superset/assets/javascripts/explore/components/ControlPanelSection.jsx
index c6d12cbb6d..c3fa9ddb79 100644
--- a/superset/assets/javascripts/explore/components/ControlPanelSection.jsx
+++ b/superset/assets/javascripts/explore/components/ControlPanelSection.jsx
@@ -6,25 +6,38 @@ import InfoTooltipWithTrigger from '../../components/InfoTooltipWithTrigger';
const propTypes = {
label: PropTypes.string,
description: PropTypes.string,
- tooltip: PropTypes.string,
children: PropTypes.node.isRequired,
+ startExpanded: PropTypes.bool,
};
const defaultProps = {
label: null,
description: null,
- tooltip: null,
+ startExpanded: false,
};
export default class ControlPanelSection extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = { expanded: this.props.startExpanded };
+ }
+ toggleExpand() {
+ this.setState({ expanded: !this.state.expanded });
+ }
renderHeader() {
- const { label, tooltip } = this.props;
+ const { label, description } = this.props;
let header;
if (label) {
header = (
- {label}
- {tooltip && }
+
+ {' '}
+ {label}
+ {' '}
+ {description && }
);
}
@@ -35,6 +48,8 @@ export default class ControlPanelSection extends React.Component {
return (
{this.props.children}
diff --git a/superset/assets/javascripts/explore/components/ControlPanelsContainer.jsx b/superset/assets/javascripts/explore/components/ControlPanelsContainer.jsx
index 8a8c2d8802..d9e9d6c314 100644
--- a/superset/assets/javascripts/explore/components/ControlPanelsContainer.jsx
+++ b/superset/assets/javascripts/explore/components/ControlPanelsContainer.jsx
@@ -67,11 +67,13 @@ class ControlPanelsContainer extends React.Component {
{section.controlSetRows.map((controlSets, i) => (
(
controlName &&
this.props.controls[controlName] &&
diff --git a/superset/assets/javascripts/explore/main.css b/superset/assets/javascripts/explore/main.css
index 5baea683d1..6d1a7bd48b 100644
--- a/superset/assets/javascripts/explore/main.css
+++ b/superset/assets/javascripts/explore/main.css
@@ -73,3 +73,16 @@
height: 10px;
margin: 9px 1px;
}
+.control-panel-section .panel-body {
+ margin-left: 15px;
+ padding-bottom: 0px;
+}
+.control-panel-section .control-label {
+ margin-bottom: 0px;
+}
+.fa.expander {
+ width: 15px;
+}
+.control-panel-section span.label {
+ display: inline-block;
+}
diff --git a/superset/assets/javascripts/explore/stores/visTypes.js b/superset/assets/javascripts/explore/stores/visTypes.js
index e59e870ce9..b8b94b55f5 100644
--- a/superset/assets/javascripts/explore/stores/visTypes.js
+++ b/superset/assets/javascripts/explore/stores/visTypes.js
@@ -4,6 +4,7 @@ import * as v from '../validators';
export const sections = {
druidTimeSeries: {
label: 'Time',
+ expanded: true,
description: 'Time related form attributes',
controlSetRows: [
['granularity', 'druid_time_origin'],
@@ -12,6 +13,7 @@ export const sections = {
},
datasourceAndVizType: {
label: 'Datasource & Chart Type',
+ expanded: true,
controlSetRows: [
['datasource'],
['viz_type'],
@@ -27,6 +29,7 @@ export const sections = {
sqlaTimeSeries: {
label: 'Time',
description: 'Time related form attributes',
+ expanded: true,
controlSetRows: [
['granularity_sqla', 'time_grain_sqla'],
['since', 'until'],
@@ -42,7 +45,8 @@ export const sections = {
},
NVD3TimeSeries: [
{
- label: null,
+ label: 'Query',
+ expanded: true,
controlSetRows: [
['metrics'],
['groupby'],
@@ -66,14 +70,12 @@ export const sections = {
filters: [
{
label: 'Filters',
- description: 'Filters are defined using comma delimited strings as in ' +
- 'Leave the value control empty to filter empty strings or nulls' +
- 'For filters with comma in values, wrap them in single quotes' +
- "as in ",
+ expanded: true,
controlSetRows: [['filters']],
},
{
label: 'Result Filters',
+ expanded: true,
description: 'The filters to apply after post-aggregation.' +
'Leave the value control empty to filter empty strings or nulls',
controlSetRows: [['having_filters']],
@@ -119,10 +121,16 @@ export const visTypes = {
showOnExplore: true,
controlPanelSections: [
{
- label: null,
+ label: 'Query',
+ expanded: true,
controlSetRows: [
['metrics', 'groupby'],
['limit'],
+ ],
+ },
+ {
+ label: 'Chart Options',
+ controlSetRows: [
['pie_label_type'],
['donut', 'show_legend'],
['labels_outside'],
@@ -346,7 +354,7 @@ export const visTypes = {
label: 'Markup',
controlPanelSections: [
{
- label: null,
+ label: 'Code',
controlSetRows: [
['markup_type'],
['code'],
@@ -359,12 +367,18 @@ export const visTypes = {
label: 'Pivot Table',
controlPanelSections: [
{
- label: null,
+ label: 'Query',
+ expanded: true,
controlSetRows: [
['groupby', 'columns'],
- ['metrics', 'pandas_aggfunc'],
+ ['metrics'],
+ ],
+ },
+ {
+ label: 'Pivot Options',
+ controlSetRows: [
+ ['pandas_aggfunc', 'pivot_margins'],
['number_format', 'combine_metric'],
- ['pivot_margins'],
],
},
],
@@ -378,7 +392,7 @@ export const visTypes = {
label: 'Separator',
controlPanelSections: [
{
- label: null,
+ label: 'Code',
controlSetRows: [
['markup_type'],
['code'],
@@ -400,9 +414,15 @@ export const visTypes = {
label: 'Word Cloud',
controlPanelSections: [
{
- label: null,
+ label: 'Query',
+ expanded: true,
controlSetRows: [
['series', 'metric', 'limit'],
+ ],
+ },
+ {
+ label: 'Options',
+ controlSetRows: [
['size_from', 'size_to'],
['rotation'],
['color_scheme'],
@@ -415,7 +435,8 @@ export const visTypes = {
label: 'Treemap',
controlPanelSections: [
{
- label: null,
+ label: 'Query',
+ expanded: true,
controlSetRows: [
['metrics'],
['groupby'],
@@ -442,9 +463,15 @@ export const visTypes = {
requiresTime: true,
controlPanelSections: [
{
- label: null,
+ label: 'Query',
+ expanded: true,
controlSetRows: [
['metric'],
+ ],
+ },
+ {
+ label: 'Options',
+ controlSetRows: [
['domain_granularity'],
['subdomain_granularity'],
],
@@ -456,7 +483,8 @@ export const visTypes = {
label: 'Box Plot',
controlPanelSections: [
{
- label: null,
+ label: 'Query',
+ expanded: true,
controlSetRows: [
['metrics'],
['groupby', 'limit'],
@@ -476,7 +504,8 @@ export const visTypes = {
label: 'Bubble Chart',
controlPanelSections: [
{
- label: null,
+ label: 'Query',
+ expanded: true,
controlSetRows: [
['series', 'entity'],
['size', 'limit'],
@@ -527,7 +556,14 @@ export const visTypes = {
requiresTime: false,
controlPanelSections: [
{
- label: null,
+ label: 'Query',
+ expanded: true,
+ controlSetRows: [
+ ['metric'],
+ ],
+ },
+ {
+ label: 'Chart Options',
controlSetRows: [
['metric'],
['ranges', 'range_labels'],
@@ -542,9 +578,15 @@ export const visTypes = {
label: 'Big Number with Trendline',
controlPanelSections: [
{
- label: null,
+ label: 'Query',
+ expanded: true,
controlSetRows: [
['metric'],
+ ],
+ },
+ {
+ label: 'Chart Options',
+ controlSetRows: [
['compare_lag', 'compare_suffix'],
['y_axis_format', null],
],
@@ -561,9 +603,15 @@ export const visTypes = {
label: 'Big Number',
controlPanelSections: [
{
- label: null,
+ label: 'Query',
+ expanded: true,
controlSetRows: [
['metric'],
+ ],
+ },
+ {
+ label: 'Chart Options',
+ controlSetRows: [
['subheader'],
['y_axis_format'],
],
@@ -580,14 +628,15 @@ export const visTypes = {
label: 'Histogram',
controlPanelSections: [
{
- label: null,
+ label: 'Query',
+ expanded: true,
controlSetRows: [
['all_columns_x'],
['row_limit'],
],
},
{
- label: 'Histogram Options',
+ label: 'Chart Options',
controlSetRows: [
['color_scheme'],
['link_length'],
@@ -611,11 +660,17 @@ export const visTypes = {
label: 'Sunburst',
controlPanelSections: [
{
- label: null,
+ label: 'Query',
+ expanded: true,
controlSetRows: [
['groupby'],
['metric', 'secondary_metric'],
['row_limit'],
+ ],
+ },
+ {
+ label: 'Chart Options',
+ controlSetRows: [
['color_scheme'],
],
},
@@ -642,11 +697,17 @@ export const visTypes = {
label: 'Sankey',
controlPanelSections: [
{
- label: null,
+ label: 'Query',
+ expanded: true,
controlSetRows: [
['groupby'],
['metric'],
['row_limit'],
+ ],
+ },
+ {
+ label: 'Chart Options',
+ controlSetRows: [
['color_scheme'],
],
},
@@ -663,7 +724,8 @@ export const visTypes = {
label: 'Directed Force Layout',
controlPanelSections: [
{
- label: null,
+ label: 'Query',
+ expanded: true,
controlSetRows: [
['groupby'],
['metric'],
@@ -671,7 +733,7 @@ export const visTypes = {
],
},
{
- label: 'Force Layout',
+ label: 'Options',
controlSetRows: [
['link_length'],
['charge'],
@@ -689,11 +751,17 @@ export const visTypes = {
label: 'Chord Diagram',
controlPanelSections: [
{
- label: null,
+ label: 'Query',
+ expanded: true,
controlSetRows: [
['groupby', 'columns'],
- ['metric'],
- ['row_limit', 'y_axis_format'],
+ ['metric', 'row_limit'],
+ ],
+ },
+ {
+ label: 'Chart Options',
+ controlSetRows: [
+ ['y_axis_format', null],
['color_scheme'],
],
},
@@ -721,11 +789,17 @@ export const visTypes = {
label: 'Country Map',
controlPanelSections: [
{
- label: null,
+ label: 'Query',
+ expanded: true,
controlSetRows: [
- ['select_country'],
['entity'],
['metric'],
+ ],
+ },
+ {
+ label: 'Options',
+ controlSetRows: [
+ ['select_country'],
['linear_color_scheme'],
],
},
@@ -748,7 +822,8 @@ export const visTypes = {
label: 'World Map',
controlPanelSections: [
{
- label: null,
+ label: 'Query',
+ expanded: true,
controlSetRows: [
['entity'],
['country_fieldtype'],
@@ -784,13 +859,19 @@ export const visTypes = {
label: 'Filter Box',
controlPanelSections: [
{
- label: null,
+ label: 'Query',
+ expanded: true,
controlSetRows: [
- ['date_filter', 'instant_filtering'],
['groupby'],
['metric'],
],
},
+ {
+ label: 'Options',
+ controlSetRows: [
+ ['date_filter', 'instant_filtering'],
+ ],
+ },
],
controlOverrides: {
groupby: {
@@ -810,7 +891,7 @@ export const visTypes = {
label: 'iFrame',
controlPanelSections: [
{
- label: null,
+ label: 'Options',
controlSetRows: [
['url'],
],
@@ -822,12 +903,18 @@ export const visTypes = {
label: 'Parallel Coordinates',
controlPanelSections: [
{
- label: null,
+ label: 'Query',
+ expanded: true,
controlSetRows: [
['series'],
['metrics'],
['secondary_metric'],
['limit'],
+ ],
+ },
+ {
+ label: 'Options',
+ controlSetRows: [
['show_datatable', 'include_series'],
],
},
@@ -882,13 +969,13 @@ export const visTypes = {
label: 'Mapbox',
controlPanelSections: [
{
- label: null,
+ label: 'Query',
+ expanded: true,
controlSetRows: [
['all_columns_x', 'all_columns_y'],
['clustering_radius'],
['row_limit'],
['groupby'],
- ['render_while_dragging'],
],
},
{
@@ -908,6 +995,7 @@ export const visTypes = {
{
label: 'Visual Tweaks',
controlSetRows: [
+ ['render_while_dragging'],
['mapbox_style'],
['global_opacity'],
['mapbox_color'],