Empty panels

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 && <Logo src={this.props.logoSrc} />;
@@ -28,17 +78,27 @@ class DefaultEditor extends Component {
         {logo ? logo : null}
         <GraphCreatePanel group={_('Graph')} name={_('Create')} />
         <GraphSubplotsPanel group={_('Graph')} name={_('Subplots')} />
-        <GraphTransformsPanel group={_('Graph')} name={_('Transforms')} />
+        {this.hasTransforms() && (
+          <GraphTransformsPanel group={_('Graph')} name={_('Transforms')} />
+        )}
         <StyleTracesPanel group={_('Style')} name={_('Traces')} />
         <StyleLayoutPanel group={_('Style')} name={_('Layout')} />
-        <StyleAxesPanel group={_('Style')} name={_('Axes')} />
+        {this.hasAxes() && (
+          <StyleAxesPanel group={_('Style')} name={_('Axes')} />
+        )}
         <StyleLegendPanel group={_('Style')} name={_('Legend')} />
-        <StyleColorbarsPanel group={_('Style')} name={_('Color Bars')} />
+        {this.hasColorbars() && (
+          <StyleColorbarsPanel group={_('Style')} name={_('Color Bars')} />
+        )}
         <StyleNotesPanel group={_('Style')} name={_('Annotations')} />
         <StyleShapesPanel group={_('Style')} name={_('Shapes')} />
         <StyleImagesPanel group={_('Style')} name={_('Images')} />
-        <StyleSlidersPanel group={_('Style')} name={_('Sliders')} />
-        <StyleUpdateMenusPanel group={_('Style')} name={_('Menus')} />
+        {this.hasSliders() && (
+          <StyleSlidersPanel group={_('Style')} name={_('Sliders')} />
+        )}
+        {this.hasMenus() && (
+          <StyleUpdateMenusPanel group={_('Style')} name={_('Menus')} />
+        )}
         {this.props.children ? this.props.children : null}
       </PanelMenuWrapper>
     );
@@ -52,6 +112,9 @@ DefaultEditor.propTypes = {
 
 DefaultEditor.contextTypes = {
   localize: PropTypes.func,
+  fullData: PropTypes.array,
+  fullLayout: PropTypes.object,
+  layout: PropTypes.object,
 };
 
 export default DefaultEditor;

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;

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 (
       <div className={bem('panel', 'empty')}>
@@ -16,10 +15,7 @@ class PanelEmpty extends Component {
             {Icon ? <Icon /> : <ChartLineIcon />}
           </div>
           <div className="panel__empty__message__heading">{heading}</div>
-          <div className="panel__empty__message__content">
-            <p>{message}</p>
-            {children}
-          </div>
+          <div className="panel__empty__message__content">{children}</div>
         </div>
       </div>
     );
@@ -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]),
 };

src/components/containers/SliderAccordion.js

@@ -22,19 +22,7 @@ class SliderAccordion extends Component {
         </SliderFold>
       ));
 
-    return (
-      <TraceRequiredPanel
-        extraConditions={[() => sliders.length > 0]}
-        extraEmptyPanelMessages={[
-          {
-            heading: _('There are no sliders to style in your plot'),
-            message: '',
-          },
-        ]}
-      >
-        {content ? content : null}
-      </TraceRequiredPanel>
-    );
+    return <TraceRequiredPanel>{content ? content : null}</TraceRequiredPanel>;
   }
 }
 

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() ? (
+      <LayoutPanel {...rest}>{children}</LayoutPanel>
+    ) : (
+      <PanelEmpty
+        heading={_("Looks like there aren't any traces defined yet.")}
+      >
+        <p>
+          {_('Go to the ')}
+          <a onClick={() => this.context.setPanel('Graph', 'Create')}>
+            {_('Create')}
+          </a>
+          {_(' panel to define traces.')}
+        </p>
+      </PanelEmpty>
     );
-
-    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 <LayoutPanel {...rest}>{children}</LayoutPanel>;
-      }
-
-      return (
-        <PanelEmpty
-          heading={emptyPanelMessage.heading}
-          message={emptyPanelMessage.message}
-        />
-      );
-    }
-    return null;
   }
 }
 
 TraceRequiredPanel.propTypes = {
   children: PropTypes.node,
   visible: PropTypes.bool,
-  extraConditions: PropTypes.array,
-  extraEmptyPanelMessages: PropTypes.array,
 };
 
 TraceRequiredPanel.defaultProps = {
@@ -70,6 +46,7 @@ TraceRequiredPanel.defaultProps = {
 TraceRequiredPanel.contextTypes = {
   fullData: PropTypes.array,
   localize: PropTypes.func,
+  setPanel: PropTypes.func,
 };
 
 export default TraceRequiredPanel;

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 (
         <FoldEmpty
           icon={PlotScatterIcon}

src/components/containers/UpdateMenuAccordion.js

@@ -38,19 +38,7 @@ class UpdateMenuAccordion extends Component {
         );
       });
 
-    return (
-      <TraceRequiredPanel
-        extraConditions={[() => updatemenus.length > 0]}
-        extraEmptyPanelMessages={[
-          {
-            heading: _('There are no update menus to style in your plot'),
-            message: '',
-          },
-        ]}
-      >
-        {content ? content : null}
-      </TraceRequiredPanel>
-    );
+    return <TraceRequiredPanel>{content ? content : null}</TraceRequiredPanel>;
   }
 }
 

src/components/fields/AxesCreator.js

@@ -165,9 +165,11 @@ class UnconnectedAxesCreator extends Component {
       <PlotlySection name={_('Axes to Use')}>
         {controls}
         <Info>
-          {_(
-            'You can style and position your axes in the Graph > Subplots Panel'
-          )}
+          {_('You can style and position your axes in the ')}
+          <a onClick={() => this.context.setPanel('Graph', 'Subplots')}>
+            {_('Subplots')}
+          </a>
+          {_(' panel.')}
         </Info>
       </PlotlySection>
     );
@@ -184,6 +186,7 @@ UnconnectedAxesCreator.contextTypes = {
   fullData: PropTypes.array,
   fullLayout: PropTypes.object,
   localize: PropTypes.func,
+  setPanel: PropTypes.func,
 };
 
 export default connectToContainer(UnconnectedAxesCreator, {

src/components/fields/SubplotCreator.js

@@ -145,9 +145,11 @@ class UnconnectedSubplotCreator extends Component {
           options={getOptions(subplotType)}
         />
         <Info>
-          {_(
-            'You can style and position your subplots in the Graph > Subplots Panel'
-          )}
+          {_('You can style and position your subplots in the ')}
+          <a onClick={() => this.context.setPanel('Graph', 'Subplots')}>
+            {_('Subplots')}
+          </a>
+          {_(' panel.')}
         </Info>
       </PlotlySection>
     );
@@ -164,6 +166,7 @@ UnconnectedSubplotCreator.contextTypes = {
   fullData: PropTypes.array,
   fullLayout: PropTypes.object,
   localize: PropTypes.func,
+  setPanel: PropTypes.func,
 };
 
 export default connectToContainer(UnconnectedSubplotCreator, {

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 (
-      <TraceRequiredPanel
-        extraConditions={[this.hasAxes]}
-        extraEmptyPanelMessages={[
-          {
-            heading: _('Your plot does not have any axes to style.'),
-            message: '',
-          },
-        ]}
-      >
+      <TraceRequiredPanel>
         <AxesFold
           name={_('Titles')}
           axisFilter={axis =>

src/default_panels/StyleColorbarsPanel.js

@@ -18,7 +18,9 @@ import {
 
 const StyleColorBarsPanel = (props, {localize: _}) => {
   return (
-    <TraceAccordion messageIfEmptyFold="Need a color scale for a colorbar!">
+    <TraceAccordion
+      messageIfEmptyFold={_('Need a color scale for a colorbar!')}
+    >
       {['', 'marker.'].map(prefix => {
         return (
           <VisibilitySelect