pt
/
superset
mirror of https://github.com/apache/superset.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
This commit is contained in:
Maxime Beauchemin 2017-08-22 16:10:55 -07:00 committed by GitHub
parent 64c91ec9e3
commit 670ba5d32e
4 changed files with 161 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
superset/assets/javascripts/explore/components/ControlPanelSection.jsx
View File

@ -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 = (
<div>
{label} &nbsp;
{tooltip && <InfoTooltipWithTrigger label={label} tooltip={tooltip} />}
<i
className={`text-primary expander fa fa-caret-${this.state.expanded ? 'down' : 'right'}`}
onClick={this.toggleExpand.bind(this)}
/>
{' '}
<span onClick={this.toggleExpand.bind(this)}>{label}</span>
{' '}
{description && <InfoTooltipWithTrigger label={label} tooltip={description} />}
</div>
);
}
@ -35,6 +48,8 @@ export default class ControlPanelSection extends React.Component {
return (
<Panel
className="control-panel-section"
collapsible
expanded={this.state.expanded}
header={this.renderHeader()}
>
{this.props.children}

4
superset/assets/javascripts/explore/components/ControlPanelsContainer.jsx
View File

@ -67,11 +67,13 @@ class ControlPanelsContainer extends React.Component {
<ControlPanelSection
key={section.label}
label={section.label}
tooltip={section.description}
startExpanded={section.expanded}
description={section.description}
>
{section.controlSetRows.map((controlSets, i) => (
<ControlRow
key={`controlsetrow-${i}`}
className="control-row"
controls={controlSets.map(controlName => (
controlName &&
this.props.controls[controlName] &&

13
superset/assets/javascripts/explore/main.css
View File

@ -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;
}

162
superset/assets/javascripts/explore/stores/visTypes.js
View File

@ -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 <US,FR,Other>' +
'Leave the value control empty to filter empty strings or nulls' +
'For filters with comma in values, wrap them in single quotes' +
"as in <NY, 'Tahoe, CA', DC>",
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'],