Skip to content

Commit 6fc1718

Browse files
dmt0dmt0
authored
Merge pull request #639 from plotly/cogwheel-for-gl
hide gl controls behind a cogwheel icon
2 parents 0d41df9 + 79b8992 commit 6fc1718

File tree

4 files changed

+107
-82
lines changed

4 files changed

+107
-82
lines changed

‎src/components/fields/TraceSelector.js‎

Lines changed: 41 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,13 @@ import {
77
plotlyTraceToCustomTrace,
88
computeTraceOptionsFromSchema,
99
} from 'lib';
10-
import TraceTypeSelector, {
10+
import {
11+
TraceTypeSelector,
1112
TraceTypeSelectorButton,
12-
} from 'components/widgets/TraceTypeSelector';
13-
import RadioBlocks from 'components/widgets/RadioBlocks';
14-
13+
RadioBlocks,
14+
} from 'components/widgets';
1515
import Field from './Field';
16+
import {CogIcon} from 'plotly-icons';
1617

1718
export const glAvailable = type => {
1819
return ['scatter', 'scatterpolar', 'scattergl', 'scatterpolargl'].includes(
@@ -28,19 +29,26 @@ class TraceSelector extends Component {
2829
this.setGl = this.setGl.bind(this);
2930
this.glEnabled = this.glEnabled.bind(this);
3031
this.setTraceDefaults = this.setTraceDefaults.bind(this);
32+
this.toggleGlControls = this.toggleGlControls.bind(this);
3133

3234
this.setTraceDefaults(
3335
props.container,
3436
props.fullContainer,
3537
props.updateContainer
3638
);
3739
this.setLocals(props, context);
40+
41+
this.state = {showGlControls: false};
3842
}
3943

4044
glEnabled() {
4145
return this.props.container.type.endsWith('gl') ? 'gl' : '';
4246
}
4347

48+
toggleGlControls() {
49+
this.setState({showGlControls: !this.state.showGlControls});
50+
}
51+
4452
setLocals(props, context) {
4553
const _ = context.localize;
4654
if (props.traceOptions) {
@@ -120,18 +128,36 @@ class TraceSelector extends Component {
120128
return (
121129
<div>
122130
<Field {...props}>
123-
<TraceTypeSelectorButton
124-
{...props}
125-
traceTypesConfig={this.context.traceTypesConfig}
126-
handleClick={() =>
127-
this.context.openModal(TraceTypeSelector, {
128-
...props,
129-
glByDefault: this.context.glByDefault,
130-
})
131-
}
132-
/>
131+
<div
132+
style={{
133+
display: 'flex',
134+
width: '100%',
135+
alignItems: 'center',
136+
}}
137+
>
138+
<TraceTypeSelectorButton
139+
{...props}
140+
traceTypesConfig={this.context.traceTypesConfig}
141+
handleClick={() =>
142+
this.context.openModal(TraceTypeSelector, {
143+
...props,
144+
glByDefault: this.context.glByDefault,
145+
})
146+
}
147+
/>
148+
{!glAvailable(this.props.container.type) ? (
149+
''
150+
) : (
151+
<CogIcon
152+
className="menupanel__icon"
153+
onClick={this.toggleGlControls}
154+
/>
155+
)}
156+
</div>
133157
</Field>
134-
{!glAvailable(this.props.container.type) ? (
158+
{!(
159+
glAvailable(this.props.container.type) && this.state.showGlControls
160+
) ? (
135161
''
136162
) : (
137163
<Field label={_('Rendering')}>

‎src/components/widgets/index.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,5 @@
11
import Button from './Button';
2-
export {Button};
2+
import RadioBlocks from './RadioBlocks';
3+
import TraceTypeSelector, {TraceTypeSelectorButton} from './TraceTypeSelector';
4+
5+
export {Button, RadioBlocks, TraceTypeSelector, TraceTypeSelectorButton};

‎src/default_panels/GraphCreatePanel.js‎

Lines changed: 60 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -24,73 +24,68 @@ const GraphCreatePanel = (props, {localize: _}) => {
2424
<TraceAccordion canAdd excludeFits>
2525
<TraceSelector label={_('Type')} attr="type" show />
2626

27-
<PlotlySection name={_('Data')}>
28-
<DataSelector label={_('Latitude')} attr="lat" />
29-
<DataSelector label={_('Longitude')} attr="lon" />
30-
<DataSelector label={_('Values')} attr="values" />
31-
<DataSelector label={_('Labels')} attr="labels" />
32-
<DataSelector label={_('Locations')} attr="locations" />
27+
<DataSelector label={_('Latitude')} attr="lat" />
28+
<DataSelector label={_('Longitude')} attr="lon" />
29+
<DataSelector label={_('Values')} attr="values" />
30+
<DataSelector label={_('Labels')} attr="labels" />
31+
<DataSelector label={_('Locations')} attr="locations" />
3332

34-
<DataSelector
35-
label={{
36-
histogram2d: _('X Values'),
37-
histogram: _('X Values'),
38-
'*': _('X'),
39-
}}
40-
attr="x"
41-
/>
42-
<DataSelector
43-
label={{
44-
histogram2d: _('Y Values'),
45-
histogram: _('Y Values'),
46-
'*': _('Y'),
47-
}}
48-
attr="y"
49-
/>
50-
<DataSelector
51-
label={{
52-
choropleth: _('Values'),
53-
histogram2d: _('Z Values'),
54-
'*': _('Z'),
55-
}}
56-
attr="z"
57-
/>
58-
<Radio
59-
label={_('Orientation')}
60-
attr="orientation"
61-
options={[
62-
{label: _('Vertical'), value: 'v'},
63-
{label: _('Horizontal'), value: 'h'},
64-
]}
65-
/>
66-
<HistogramInfoVertical>
67-
{_(
68-
'Note: in vertical orientation, X values are used for bins and Y values for weights.'
69-
)}
70-
</HistogramInfoVertical>
71-
<HistogramInfoHorizontal>
72-
{_(
73-
'Note: in horizontal orientation, Y Values are used for bins and X values for weights.'
74-
)}
75-
</HistogramInfoHorizontal>
76-
<DataSelector label={_('I (Optional)')} attr="i" />
77-
<DataSelector label={_('J (Optional)')} attr="j" />
78-
<DataSelector label={_('K (Optional)')} attr="k" />
79-
<DataSelector label={_('Open')} attr="open" />
80-
<DataSelector label={_('High')} attr="high" />
81-
<DataSelector label={_('Low')} attr="low" />
82-
<DataSelector label={_('Close')} attr="close" />
83-
<DataSelector label={_('A')} attr="a" />
84-
<DataSelector label={_('B')} attr="b" />
85-
<DataSelector label={_('C')} attr="c" />
86-
<DataSelector label={_('Headers')} attr="header.values" />
87-
<DataSelector label={_('Columns')} attr="cells.values" />
88-
</PlotlySection>
33+
<DataSelector
34+
label={{
35+
histogram2d: _('X Values'),
36+
histogram: _('X Values'),
37+
'*': _('X'),
38+
}}
39+
attr="x"
40+
/>
41+
<DataSelector
42+
label={{
43+
histogram2d: _('Y Values'),
44+
histogram: _('Y Values'),
45+
'*': _('Y'),
46+
}}
47+
attr="y"
48+
/>
49+
<DataSelector
50+
label={{
51+
choropleth: _('Values'),
52+
histogram2d: _('Z Values'),
53+
'*': _('Z'),
54+
}}
55+
attr="z"
56+
/>
57+
<Radio
58+
label={_('Orientation')}
59+
attr="orientation"
60+
options={[
61+
{label: _('Vertical'), value: 'v'},
62+
{label: _('Horizontal'), value: 'h'},
63+
]}
64+
/>
65+
<HistogramInfoVertical>
66+
{_(
67+
'Note: in vertical orientation, X values are used for bins and Y values for weights.'
68+
)}
69+
</HistogramInfoVertical>
70+
<HistogramInfoHorizontal>
71+
{_(
72+
'Note: in horizontal orientation, Y Values are used for bins and X values for weights.'
73+
)}
74+
</HistogramInfoHorizontal>
75+
<DataSelector label={_('I (Optional)')} attr="i" />
76+
<DataSelector label={_('J (Optional)')} attr="j" />
77+
<DataSelector label={_('K (Optional)')} attr="k" />
78+
<DataSelector label={_('Open')} attr="open" />
79+
<DataSelector label={_('High')} attr="high" />
80+
<DataSelector label={_('Low')} attr="low" />
81+
<DataSelector label={_('Close')} attr="close" />
82+
<DataSelector label={_('A')} attr="a" />
83+
<DataSelector label={_('B')} attr="b" />
84+
<DataSelector label={_('C')} attr="c" />
85+
<DataSelector label={_('Headers')} attr="header.values" />
86+
<DataSelector label={_('Columns')} attr="cells.values" />
8987

90-
<TraceTypeSection
91-
name={_('Data')}
92-
traceTypes={['scatterpolar', 'scatterpolargl']}
93-
>
88+
<TraceTypeSection traceTypes={['scatterpolar', 'scatterpolargl']}>
9489
<DataSelector label={_('Radius')} attr="r" />
9590
<DataSelector label={_('Theta')} attr="theta" />
9691
<Dropdown

‎src/styles/components/containers/_menupanel.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,14 @@
1515

1616
&__icon {
1717
vertical-align: middle;
18-
svg{
18+
svg {
1919
display: block;
2020
}
2121
// gets overridden by user agent stylesheet otherwise
2222
width: 15px !important;
2323
height: 15px !important;
2424
fill: var(--color-text-light) !important;
25+
padding-left: var(--spacing-quarter-unit);
2526
&:hover {
2627
cursor: pointer;
2728
fill: var(--color-accent) !important;

0 commit comments

Comments
 (0)