From 670ba5d32e456cf401903d2d7ae875e9ec0c3750 Mon Sep 17 00:00:00 2001 From: Maxime Beauchemin Date: Tue, 22 Aug 2017 16:10:55 -0700 Subject: [PATCH] Collapsible Control sections (#3354) The left panel of the explore view has become crowded and overwhelming overtime. This PR adds functionality to collapse the control sections, and sets most sections to be collapse by default as the explore view opens up. * breakdown `Query` section for most viz * bring filters to the top, under Query section * collapse most sections by default * removed confusing outdated description for Filter section --- .../components/ControlPanelSection.jsx | 25 ++- .../components/ControlPanelsContainer.jsx | 4 +- superset/assets/javascripts/explore/main.css | 13 ++ .../javascripts/explore/stores/visTypes.js | 162 ++++++++++++++---- 4 files changed, 161 insertions(+), 43 deletions(-) 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'],