Merge pull request #250 from plotly/aulneau-fixes-1

Language style fixes, empty state for style panels

Author: aulneau

README.md

@@ -158,6 +158,7 @@ All Fields except `<Info />` accept an `attr` property to bind them to a key in
 
 * `<TraceAccordion />`: `<Panel />` whose children are replicated into `<Folds />` connected to traces via `connectTraceToPlot()`.
 * `<LayoutPanel />`: `<Panel />` whose children are connected to the `layout` figure key
+* `<TraceRequiredPanel />`: `<LayoutPanel />` renders `<PanelEmpty />` if no trace data is set
 * `<AnnotationAccordion />`: `<Panel />` whose children are replicated into `<Folds />` connected to annotations via `connectAnnotationToLayout()`. For use in a `<LayoutPanel />`.
 * `<AxesFold />`: `<Fold />` whose children are bound to axis-specific keys. For use in a `<LayoutPanel />` in concert with `<AxesSelector />` (see below).
 * `<TraceMarkerSection />`: `<Section />` with trace-specific name handling. For use in containers bound to traces e.g. as children of `<TraceAccordion />`.

scripts/translationKeys/combined-translation-keys.txt

@@ -29,8 +29,8 @@ import {
   SymbolSelector,
   TraceAccordion,
   TraceMarkerSection,
+  TraceRequiredPanel,
   TraceSelector,
-  LayoutPanel,
   AxesFold,
 } from './components';
 import {localize} from './lib';
@@ -69,7 +69,8 @@ class DefaultEditor extends Component {
             <DataSelector label="Z" attr="z" clearable={false} hasBlank />
           </TraceAccordion>
         </Panel>
-        <Panel group="Style" name="Traces">
+
+        <TraceRequiredPanel group="Style" name="Traces">
           <TraceAccordion>
             <Section name={_('Trace')}>
               <Numeric label={_('Opacity')} step={0.1} attr="opacity" />
@@ -164,8 +165,9 @@ class DefaultEditor extends Component {
               />
             </Section>
           </TraceAccordion>
-        </Panel>
-        <LayoutPanel group="Style" name={_('Layout')}>
+        </TraceRequiredPanel>
+
+        <TraceRequiredPanel group="Style" name={_('Layout')}>
           <Fold name={_('Canvas')}>
             <Radio
               attr="autosize"
@@ -211,8 +213,9 @@ class DefaultEditor extends Component {
             <Numeric label={_('Right')} attr="margin.r" units="px" />
             <Numeric label={_('Padding')} attr="margin.pad" units="px" />
           </Fold>
-        </LayoutPanel>
-        <LayoutPanel group="Style" name={_('Notes')}>
+        </TraceRequiredPanel>
+
+        <TraceRequiredPanel group="Style" name={_('Notes')}>
           <AnnotationAccordion canAdd>
             <Section name={_('Note Text')}>
               <MultiFormatTextEditor attr="text" />
@@ -290,8 +293,9 @@ class DefaultEditor extends Component {
               <Numeric label={_('Position')} attr="y" hideArrows />
             </Section>
           </AnnotationAccordion>
-        </LayoutPanel>
-        <LayoutPanel group="Style" name={_('Axes')}>
+        </TraceRequiredPanel>
+
+        <TraceRequiredPanel group="Style" name={_('Axes')}>
           <AxesFold name={_('Titles')}>
             <AxesSelector />
             <MultiFormatTextEditor attr="title" />
@@ -342,8 +346,9 @@ class DefaultEditor extends Component {
           <AxesFold name={_('Layout')}>
             <AxesSelector />
           </AxesFold>
-        </LayoutPanel>
-        <LayoutPanel group="Style" name={_('Legend')}>
+        </TraceRequiredPanel>
+
+        <TraceRequiredPanel group="Style" name={_('Legend')}>
           <Fold hideHeader>
             <Section name={_('Legend')}>
               <Radio
@@ -435,7 +440,7 @@ class DefaultEditor extends Component {
               />
             </Section>
           </Fold>
-        </LayoutPanel>
+        </TraceRequiredPanel>
       </PanelMenuWrapper>
     );
   }

scripts/translationKeys/translation-keys.txt

@@ -4,7 +4,7 @@ import React, {Component, cloneElement} from 'react';
 import update from 'immutability-helper';
 import {bem} from 'lib';
 
-export default class Panel extends Component {
+class Panel extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -62,6 +62,38 @@ export default class Panel extends Component {
     return array.map((e, i) => i !== lastIndex);
   }
 
+  calculateFolds() {
+    // to get proper number of child folds and initialize component state
+    const {visible} = this.props;
+    const {nbOfFolds} = this.state;
+
+    if (visible) {
+      const currentNbOfFolds = document.getElementsByClassName('fold').length;
+      if (nbOfFolds !== currentNbOfFolds) {
+        if (this.isAnnotationAccordion() || this.isTraceAccordion()) {
+          this.setState({
+            nbOfFolds: currentNbOfFolds,
+            individualFoldStates: this.closeAllButLast(
+              new Array(currentNbOfFolds).fill(true)
+            ),
+          });
+        } else {
+          this.setState({
+            nbOfFolds: currentNbOfFolds,
+            individualFoldStates: new Array(currentNbOfFolds).fill(false),
+          });
+        }
+      }
+    }
+  }
+
+  componentDidUpdate() {
+    this.calculateFolds();
+  }
+  componentDidMount() {
+    this.calculateFolds();
+  }
+
   render() {
     const {visible} = this.props;
     const {individualFoldStates, nbOfFolds} = this.state;
@@ -109,33 +141,6 @@ export default class Panel extends Component {
     }
     return null;
   }
-
-  componentDidUpdate() {
-    // to get proper number of child folds and initialize component state
-    const {visible} = this.props;
-    const {nbOfFolds} = this.state;
-
-    if (visible) {
-      const currentNbOfFolds = document.getElementsByClassName('fold').length;
-      if (nbOfFolds !== currentNbOfFolds) {
-        /* eslint-disable */
-        if (this.isAnnotationAccordion() || this.isTraceAccordion()) {
-          this.setState({
-            nbOfFolds: currentNbOfFolds,
-            individualFoldStates: this.closeAllButLast(
-              new Array(currentNbOfFolds).fill(true)
-            ),
-          });
-        } else {
-          this.setState({
-            nbOfFolds: currentNbOfFolds,
-            individualFoldStates: new Array(currentNbOfFolds).fill(false),
-          });
-        }
-        /* eslint-enable */
-      }
-    }
-  }
 }
 
 Panel.propTypes = {
@@ -157,3 +162,5 @@ Panel.childContextTypes = {
   individualFoldStates: PropTypes.array,
   toggleFold: PropTypes.func,
 };
+
+export default Panel;

src/DefaultEditor.js

@@ -1,11 +1,17 @@
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {ChartLineIcon} from 'plotly-icons';
-import {bem} from 'lib';
+import {bem, localize} from 'lib';
 
-export default class PanelEmpty extends Component {
+class PanelEmpty extends Component {
   render() {
-    const {children, message, heading, icon: Icon} = this.props;
+    const {
+      children,
+      localize: _,
+      heading = _("Looks like there aren't any traces defined yet."),
+      message = _("Go to the 'Create' tab to define traces."),
+      icon: Icon,
+    } = this.props;
 
     return (
       <div className={bem('panel', 'empty')}>
@@ -15,7 +21,7 @@ export default class PanelEmpty extends Component {
           </div>
           <div className="panel__empty__message__heading">{heading}</div>
           <div className="panel__empty__message__content">
-            {message}
+            <p>{message}</p>
             {children}
           </div>
         </div>
@@ -27,6 +33,9 @@ export default class PanelEmpty extends Component {
 PanelEmpty.propTypes = {
   heading: PropTypes.string,
   message: PropTypes.any,
+  localize: PropTypes.func,
   children: PropTypes.node,
   icon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
 };
+
+export default localize(PanelEmpty);

src/components/containers/Panel.js

@@ -1,5 +1,4 @@
 import Fold from './Fold';
-import PanelEmpty from 'components/containers/PanelEmpty';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {EDITOR_ACTIONS} from 'lib/constants';
@@ -17,50 +16,20 @@ class TraceAccordion extends Component {
   }
 
   render() {
-    const {fullData, data = []} = this.context;
-    const {canAdd, children, localize: _} = this.props;
+    const {data = []} = this.context;
+    const {canAdd, children} = this.props;
 
     const content =
       data.length &&
       data.map((d, i) => {
-        const fullDataTrace = fullData.filter(t => t.index === i)[0];
-        const isEmpty =
-          !canAdd && !fullDataTrace.visible
-            ? {
-                messagePrimary: _('This trace does not yet have any data.'),
-                messageSecondary: _(
-                  'Return to the Graph > Create menu above to add data.'
-                ),
-              }
-            : false;
-
         return (
-          <TraceFold
-            key={i}
-            traceIndex={i}
-            foldIndex={i}
-            canDelete={canAdd}
-            isEmpty={isEmpty}
-          >
+          <TraceFold key={i} traceIndex={i} foldIndex={i} canDelete={canAdd}>
             {children}
           </TraceFold>
         );
       });
 
-    const emptyState = !canAdd &&
-      (!data.length || (data.length === 1 && !fullData[0].visible)) && (
-        <PanelEmpty
-          heading={_("Looks like there aren't any traces defined yet.")}
-          message={<p>{_("Go to the 'Create' tab to define traces.")}</p>}
-        />
-      );
-
-    return (
-      <div className="panel__content">
-        {emptyState ? emptyState : null}
-        {content ? content : null}
-      </div>
-    );
+    return <div className="panel__content">{content ? content : null}</div>;
   }
 }
 

src/components/containers/PanelEmpty.js

@@ -0,0 +1,72 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import PanelEmpty from './PanelEmpty';
+import Panel from './Panel';
+import {connectLayoutToPlot} from 'lib';
+
+const LayoutPanel = connectLayoutToPlot(Panel);
+
+class TraceRequiredPanel extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hasTraces: false,
+    };
+  }
+  checkTraceExistence() {
+    const {visible} = this.props;
+    const {fullData} = this.context;
+    const {hasTraces} = this.state;
+
+    if (visible) {
+      /**
+       * Check if there is any trace data
+       */
+      if (fullData.filter(trace => trace.visible).length === 0 && hasTraces) {
+        this.setState({
+          hasTraces: false,
+        });
+      } else {
+        this.setState({
+          hasTraces: true,
+        });
+      }
+    }
+  }
+
+  componentDidUpdate() {
+    this.checkTraceExistence();
+  }
+  componentDidMount() {
+    this.checkTraceExistence();
+  }
+
+  render() {
+    const {children, ...rest} = this.props;
+    const {hasTraces} = this.state;
+
+    if (this.props.visible) {
+      return hasTraces ? (
+        <LayoutPanel {...rest}>{children}</LayoutPanel>
+      ) : (
+        <PanelEmpty />
+      );
+    }
+    return null;
+  }
+}
+
+TraceRequiredPanel.propTypes = {
+  children: PropTypes.node,
+  visible: PropTypes.bool,
+};
+
+TraceRequiredPanel.defaultProps = {
+  visible: true,
+};
+
+TraceRequiredPanel.contextTypes = {
+  fullData: PropTypes.array,
+};
+
+export default TraceRequiredPanel;

src/components/containers/TraceAccordion.js

@@ -6,6 +6,7 @@ import Section from './Section';
 import TraceAccordion from './TraceAccordion';
 import TraceMarkerSection from './TraceMarkerSection';
 import {LayoutPanel, AxesFold} from './derived';
+import TraceRequiredPanel from './TraceRequiredPanel';
 
 export {
   AnnotationAccordion,
@@ -15,6 +16,7 @@ export {
   Section,
   TraceAccordion,
   TraceMarkerSection,
+  TraceRequiredPanel,
   LayoutPanel,
   AxesFold,
 };

src/components/containers/TraceRequiredPanel.js

@@ -30,6 +30,7 @@ import {
   Section,
   TraceAccordion,
   TraceMarkerSection,
+  TraceRequiredPanel,
   LayoutPanel,
   AxesFold,
 } from './containers';
@@ -65,6 +66,7 @@ export {
   SymbolSelector,
   TraceAccordion,
   TraceMarkerSection,
+  TraceRequiredPanel,
   TraceSelector,
   LayoutPanel,
   AxesFold,