From 9b91c18880df5a112bc688b8fe6127288cda5353 Mon Sep 17 00:00:00 2001
From: dmt0
Date: Tue, 14 Aug 2018 17:25:41 -0400
Subject: [PATCH 1/5] hide some menu panels when they don't apply
---
src/DefaultEditor.js | 73 +++++++++++++++++--
src/components/containers/SliderAccordion.js | 14 +---
.../containers/TransformAccordion.js | 13 +---
.../containers/UpdateMenuAccordion.js | 14 +---
src/default_panels/StyleAxesPanel.js | 25 +------
src/default_panels/StyleColorbarsPanel.js | 4 +-
src/lib/constants.js | 12 ++-
7 files changed, 87 insertions(+), 68 deletions(-)
diff --git a/src/DefaultEditor.js b/src/DefaultEditor.js
index 9d12746c8..51cc03457 100644
--- a/src/DefaultEditor.js
+++ b/src/DefaultEditor.js
@@ -17,8 +17,58 @@ import {
StyleUpdateMenusPanel,
} from './default_panels';
import Logo from './components/widgets/Logo';
+import {TRANSFORMABLE_TRACES} from './lib/constants';
class DefaultEditor extends Component {
+ constructor(props, context) {
+ super(props, context);
+ this.hasTransforms = this.hasTransforms.bind(this);
+ this.hasAxes = this.hasAxes.bind(this);
+ this.hasMenus = this.hasMenus.bind(this);
+ this.hasSliders = this.hasSliders.bind(this);
+ this.hasColorbars = this.hasColorbars.bind(this);
+ }
+
+ hasTransforms() {
+ return this.context.fullData.some(d =>
+ TRANSFORMABLE_TRACES.includes(d.type)
+ );
+ }
+
+ hasAxes() {
+ return (
+ Object.keys(this.context.fullLayout._subplots).filter(
+ type =>
+ !['cartesian', 'mapbox'].includes(type) &&
+ this.context.fullLayout._subplots[type].length > 0
+ ).length > 0
+ );
+ }
+
+ hasMenus() {
+ const {
+ fullLayout: {updatemenus = []},
+ } = this.context;
+
+ return updatemenus.length > 0;
+ }
+
+ hasSliders() {
+ const {
+ layout: {sliders = []},
+ } = this.context;
+
+ return sliders.length > 0;
+ }
+
+ hasColorbars() {
+ return this.context.fullData.some(
+ d =>
+ (d.marker && d.marker.showscale !== undefined) || // eslint-disable-line no-undefined
+ d.showscale !== undefined // eslint-disable-line no-undefined
+ );
+ }
+
render() {
const _ = this.context.localize;
const logo = this.props.logoSrc && ;
@@ -28,17 +78,27 @@ class DefaultEditor extends Component {
{logo ? logo : null}
-
+ {this.hasTransforms() && (
+
+ )}
-
+ {this.hasAxes() && (
+
+ )}
-
+ {this.hasColorbars() && (
+
+ )}
-
-
+ {this.hasSliders() && (
+
+ )}
+ {this.hasMenus() && (
+
+ )}
{this.props.children ? this.props.children : null}
);
@@ -52,6 +112,9 @@ DefaultEditor.propTypes = {
DefaultEditor.contextTypes = {
localize: PropTypes.func,
+ fullData: PropTypes.array,
+ fullLayout: PropTypes.object,
+ layout: PropTypes.object,
};
export default DefaultEditor;
diff --git a/src/components/containers/SliderAccordion.js b/src/components/containers/SliderAccordion.js
index 99df6aff5..ef87cbb1f 100644
--- a/src/components/containers/SliderAccordion.js
+++ b/src/components/containers/SliderAccordion.js
@@ -22,19 +22,7 @@ class SliderAccordion extends Component {
));
- return (
- sliders.length > 0]}
- extraEmptyPanelMessages={[
- {
- heading: _('There are no sliders to style in your plot'),
- message: '',
- },
- ]}
- >
- {content ? content : null}
-
- );
+ return {content ? content : null};
}
}
diff --git a/src/components/containers/TransformAccordion.js b/src/components/containers/TransformAccordion.js
index 6211bc54e..8f45ae494 100644
--- a/src/components/containers/TransformAccordion.js
+++ b/src/components/containers/TransformAccordion.js
@@ -5,6 +5,7 @@ import React, {Component} from 'react';
import {connectTransformToTrace} from 'lib';
import FoldEmpty from './FoldEmpty';
import {PlotScatterIcon} from 'plotly-icons';
+import {TRANSFORMABLE_TRACES} from 'lib/constants';
const TransformFold = connectTransformToTrace(PlotlyFold);
@@ -26,17 +27,7 @@ class TransformAccordion extends Component {
{label: _('Sort'), type: 'sort'},
];
- const transformableCharts = [
- 'scatter',
- 'bar',
- 'scattergl',
- 'histogram',
- 'histogram2d',
- 'box',
- 'violin',
- ];
-
- if (!transformableCharts.includes(fullContainer.type)) {
+ if (!TRANSFORMABLE_TRACES.includes(fullContainer.type)) {
return (
updatemenus.length > 0]}
- extraEmptyPanelMessages={[
- {
- heading: _('There are no update menus to style in your plot'),
- message: '',
- },
- ]}
- >
- {content ? content : null}
-
- );
+ return {content ? content : null};
}
}
diff --git a/src/default_panels/StyleAxesPanel.js b/src/default_panels/StyleAxesPanel.js
index b34b004ba..7ea641b4d 100644
--- a/src/default_panels/StyleAxesPanel.js
+++ b/src/default_panels/StyleAxesPanel.js
@@ -22,33 +22,10 @@ import {
} from '../components';
class StyleAxesPanel extends Component {
- constructor(props, context) {
- super(props, context);
- this.hasAxes = this.hasAxes.bind(this);
- }
-
- hasAxes() {
- return (
- Object.keys(this.context.fullLayout._subplots).filter(
- type =>
- !['cartesian', 'mapbox'].includes(type) &&
- this.context.fullLayout._subplots[type].length > 0
- ).length > 0
- );
- }
-
render() {
const {localize: _} = this.context;
return (
-
+
diff --git a/src/default_panels/StyleColorbarsPanel.js b/src/default_panels/StyleColorbarsPanel.js
index 13ca8230c..89a7b8690 100644
--- a/src/default_panels/StyleColorbarsPanel.js
+++ b/src/default_panels/StyleColorbarsPanel.js
@@ -18,7 +18,9 @@ import {
const StyleColorBarsPanel = (props, {localize: _}) => {
return (
-
+
{['', 'marker.'].map(prefix => {
return (
polar: _('Polar'),
}[type]);
-export const TRANSFORMS_LIST = ['filter', 'groupby', 'aggregate'];
+export const TRANSFORMS_LIST = ['filter', 'groupby', 'aggregate', 'sort'];
+
+export const TRANSFORMABLE_TRACES = [
+ 'scatter',
+ 'bar',
+ 'scattergl',
+ 'histogram',
+ 'histogram2d',
+ 'box',
+ 'violin',
+];
export const COLORS = {
charcoal: '#444444',
From 7b652c2b420d3ca21fd69b3de9c70943eed56ee1 Mon Sep 17 00:00:00 2001
From: dmt0
Date: Tue, 14 Aug 2018 17:27:07 -0400
Subject: [PATCH 2/5] clean up some unused logic
---
.../containers/TraceRequiredPanel.js | 58 ++++++-------------
1 file changed, 17 insertions(+), 41 deletions(-)
diff --git a/src/components/containers/TraceRequiredPanel.js b/src/components/containers/TraceRequiredPanel.js
index ffd6d1ffe..2f8226354 100644
--- a/src/components/containers/TraceRequiredPanel.js
+++ b/src/components/containers/TraceRequiredPanel.js
@@ -11,56 +11,32 @@ class TraceRequiredPanel extends Component {
render() {
const {localize: _} = this.context;
const {children, ...rest} = this.props;
- let showPanel = true;
- const emptyPanelMessage = {heading: '', message: ''};
- const noTraceMessage = {
- heading: _("Looks like there aren't any traces defined yet."),
- message: _("Go to the 'Create' tab to define traces."),
- };
-
- const conditions = [() => this.hasTrace()].concat(
- this.props.extraConditions ? this.props.extraConditions : []
- );
+ if (!this.props.visible) {
+ return null;
+ }
- const messages = [noTraceMessage].concat(
- this.props.extraEmptyPanelMessages
- ? this.props.extraEmptyPanelMessages
- : []
+ return this.hasTrace() ? (
+ {children}
+ ) : (
+
+
+ {_('Go to the ')}
+ this.context.setPanel('Graph', 'Create')}>
+ {_('Create')}
+
+ {_(' panel to define traces.')}
+
+
);
-
- if (this.props.visible) {
- conditions.forEach((condition, index) => {
- if (!showPanel) {
- return;
- }
- if (!condition()) {
- showPanel = false;
- emptyPanelMessage.heading = messages[index].heading;
- emptyPanelMessage.message = messages[index].message;
- }
- });
-
- if (showPanel) {
- return {children};
- }
-
- return (
-
- );
- }
- return null;
}
}
TraceRequiredPanel.propTypes = {
children: PropTypes.node,
visible: PropTypes.bool,
- extraConditions: PropTypes.array,
- extraEmptyPanelMessages: PropTypes.array,
};
TraceRequiredPanel.defaultProps = {
From 5ea7b9337aa1ef91418d83aa24176c3b832649eb Mon Sep 17 00:00:00 2001
From: dmt0
Date: Tue, 14 Aug 2018 17:33:51 -0400
Subject: [PATCH 3/5] add GraphCreatePanel link to empty panel
---
src/components/PanelMenuWrapper.js | 10 +++++++++
src/components/containers/PanelEmpty.js | 7 +-----
.../containers/TraceRequiredPanel.js | 22 +++++++++++++++++++
src/styles/components/containers/_panel.scss | 4 ++++
4 files changed, 37 insertions(+), 6 deletions(-)
diff --git a/src/components/PanelMenuWrapper.js b/src/components/PanelMenuWrapper.js
index 6e98c69cc..b0d79590b 100644
--- a/src/components/PanelMenuWrapper.js
+++ b/src/components/PanelMenuWrapper.js
@@ -23,6 +23,12 @@ class PanelsWithSidebar extends Component {
this.setState({group, panel});
}
+ getChildContext() {
+ return {
+ setPanel: this.setPanel,
+ };
+ }
+
renderSection(section, i) {
if (
section.type &&
@@ -100,4 +106,8 @@ PanelsWithSidebar.propTypes = {
children: PropTypes.node,
};
+PanelsWithSidebar.childContextTypes = {
+ setPanel: PropTypes.func,
+};
+
export default PanelsWithSidebar;
diff --git a/src/components/containers/PanelEmpty.js b/src/components/containers/PanelEmpty.js
index 1a8d2818c..ae30c3870 100644
--- a/src/components/containers/PanelEmpty.js
+++ b/src/components/containers/PanelEmpty.js
@@ -7,7 +7,6 @@ class PanelEmpty extends Component {
render() {
const {children, icon: Icon} = this.props;
const heading = this.props.heading || '';
- const message = this.props.message || '';
return (
@@ -16,10 +15,7 @@ class PanelEmpty extends Component {
{Icon ? : }
{heading}
-
-
{message}
- {children}
-
+ {children}
);
@@ -28,7 +24,6 @@ class PanelEmpty extends Component {
PanelEmpty.propTypes = {
heading: PropTypes.string,
- message: PropTypes.any,
children: PropTypes.node,
icon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
};
diff --git a/src/components/containers/TraceRequiredPanel.js b/src/components/containers/TraceRequiredPanel.js
index 2f8226354..fd4a41073 100644
--- a/src/components/containers/TraceRequiredPanel.js
+++ b/src/components/containers/TraceRequiredPanel.js
@@ -11,23 +11,44 @@ class TraceRequiredPanel extends Component {
render() {
const {localize: _} = this.context;
const {children, ...rest} = this.props;
+<<<<<<< HEAD
+=======
+ let showPanel = true;
+ let heading = '';
+>>>>>>> e9befe5... add GraphCreatePanel link to empty panel
if (!this.props.visible) {
return null;
}
+<<<<<<< HEAD
return this.hasTrace() ? (
{children}
) : (
+=======
+ if (!this.hasTrace()) {
+ showPanel = false;
+ heading = _("Looks like there aren't any traces defined yet.");
+ }
+
+ return showPanel ? (
+ {children}
+ ) : (
+
+>>>>>>> e9befe5... add GraphCreatePanel link to empty panel
{_('Go to the ')}
this.context.setPanel('Graph', 'Create')}>
{_('Create')}
+<<<<<<< HEAD
{_(' panel to define traces.')}
+=======
+ {_(' tab to define traces.')}
+>>>>>>> e9befe5... add GraphCreatePanel link to empty panel
);
@@ -46,6 +67,7 @@ TraceRequiredPanel.defaultProps = {
TraceRequiredPanel.contextTypes = {
fullData: PropTypes.array,
localize: PropTypes.func,
+ setPanel: PropTypes.func,
};
export default TraceRequiredPanel;
diff --git a/src/styles/components/containers/_panel.scss b/src/styles/components/containers/_panel.scss
index 23ef7af57..b16f78830 100644
--- a/src/styles/components/containers/_panel.scss
+++ b/src/styles/components/containers/_panel.scss
@@ -85,6 +85,10 @@
font-size: var(--font-size-base);
color: var(--color-text-base);
line-height: var(--font-leading-body);
+ a {
+ color: $color-dodger-shade;
+ cursor: pointer;
+ }
}
}
}
From 8622b2e220b59b5ccdbff96858ef40ea2404ea80 Mon Sep 17 00:00:00 2001
From: dmt0
Date: Tue, 14 Aug 2018 18:38:01 -0400
Subject: [PATCH 4/5] add links to Subplots panel
---
src/components/containers/TraceRequiredPanel.js | 4 ++++
src/components/fields/AxesCreator.js | 9 ++++++---
src/components/fields/SubplotCreator.js | 9 ++++++---
src/styles/components/containers/_panel.scss | 4 ----
src/styles/main.scss | 4 ++++
5 files changed, 20 insertions(+), 10 deletions(-)
diff --git a/src/components/containers/TraceRequiredPanel.js b/src/components/containers/TraceRequiredPanel.js
index fd4a41073..c7cbe5ccd 100644
--- a/src/components/containers/TraceRequiredPanel.js
+++ b/src/components/containers/TraceRequiredPanel.js
@@ -44,11 +44,15 @@ class TraceRequiredPanel extends Component {
this.context.setPanel('Graph', 'Create')}>
{_('Create')}
+<<<<<<< HEAD
<<<<<<< HEAD
{_(' panel to define traces.')}
=======
{_(' tab to define traces.')}
>>>>>>> e9befe5... add GraphCreatePanel link to empty panel
+=======
+ {_(' panel to define traces.')}
+>>>>>>> b220435... add links to Subplots panel
);
diff --git a/src/components/fields/AxesCreator.js b/src/components/fields/AxesCreator.js
index 3c6f9047b..76b0eb37a 100644
--- a/src/components/fields/AxesCreator.js
+++ b/src/components/fields/AxesCreator.js
@@ -165,9 +165,11 @@ class UnconnectedAxesCreator extends Component {
{controls}
- {_(
- 'You can style and position your axes in the Graph > Subplots Panel'
- )}
+ {_('You can style and position your axes in the ')}
+ this.context.setPanel('Graph', 'Subplots')}>
+ {_('Subplots')}
+
+ {_(' panel.')}
);
@@ -184,6 +186,7 @@ UnconnectedAxesCreator.contextTypes = {
fullData: PropTypes.array,
fullLayout: PropTypes.object,
localize: PropTypes.func,
+ setPanel: PropTypes.func,
};
export default connectToContainer(UnconnectedAxesCreator, {
diff --git a/src/components/fields/SubplotCreator.js b/src/components/fields/SubplotCreator.js
index 156503c0f..c016d4bbb 100644
--- a/src/components/fields/SubplotCreator.js
+++ b/src/components/fields/SubplotCreator.js
@@ -145,9 +145,11 @@ class UnconnectedSubplotCreator extends Component {
options={getOptions(subplotType)}
/>
- {_(
- 'You can style and position your subplots in the Graph > Subplots Panel'
- )}
+ {_('You can style and position your subplots in the ')}
+ this.context.setPanel('Graph', 'Subplots')}>
+ {_('Subplots')}
+
+ {_(' panel.')}
);
@@ -164,6 +166,7 @@ UnconnectedSubplotCreator.contextTypes = {
fullData: PropTypes.array,
fullLayout: PropTypes.object,
localize: PropTypes.func,
+ setPanel: PropTypes.func,
};
export default connectToContainer(UnconnectedSubplotCreator, {
diff --git a/src/styles/components/containers/_panel.scss b/src/styles/components/containers/_panel.scss
index b16f78830..23ef7af57 100644
--- a/src/styles/components/containers/_panel.scss
+++ b/src/styles/components/containers/_panel.scss
@@ -85,10 +85,6 @@
font-size: var(--font-size-base);
color: var(--color-text-base);
line-height: var(--font-leading-body);
- a {
- color: $color-dodger-shade;
- cursor: pointer;
- }
}
}
}
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 5f57a1ba3..e1479c036 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -31,6 +31,10 @@
display: flex;
flex-grow: 1;
}
+ a {
+ color: $color-dodger-shade;
+ cursor: pointer;
+ }
}
.plotly_editor {
From 5f08d6be3d988e4d312c6de1c0dedc25324beba8 Mon Sep 17 00:00:00 2001
From: dmt0
Date: Tue, 14 Aug 2018 18:50:46 -0400
Subject: [PATCH 5/5] bad merge fix
---
.../containers/TraceRequiredPanel.js | 25 -------------------
1 file changed, 25 deletions(-)
diff --git a/src/components/containers/TraceRequiredPanel.js b/src/components/containers/TraceRequiredPanel.js
index c7cbe5ccd..5d95583f7 100644
--- a/src/components/containers/TraceRequiredPanel.js
+++ b/src/components/containers/TraceRequiredPanel.js
@@ -11,48 +11,23 @@ class TraceRequiredPanel extends Component {
render() {
const {localize: _} = this.context;
const {children, ...rest} = this.props;
-<<<<<<< HEAD
-=======
- let showPanel = true;
- let heading = '';
->>>>>>> e9befe5... add GraphCreatePanel link to empty panel
if (!this.props.visible) {
return null;
}
-<<<<<<< HEAD
return this.hasTrace() ? (
{children}
) : (
-=======
- if (!this.hasTrace()) {
- showPanel = false;
- heading = _("Looks like there aren't any traces defined yet.");
- }
-
- return showPanel ? (
- {children}
- ) : (
-
->>>>>>> e9befe5... add GraphCreatePanel link to empty panel
{_('Go to the ')}
this.context.setPanel('Graph', 'Create')}>
{_('Create')}
-<<<<<<< HEAD
-<<<<<<< HEAD
- {_(' panel to define traces.')}
-=======
- {_(' tab to define traces.')}
->>>>>>> e9befe5... add GraphCreatePanel link to empty panel
-=======
{_(' panel to define traces.')}
->>>>>>> b220435... add links to Subplots panel
);