diff --git a/src/components/containers/Section.js b/src/components/containers/Section.js index e0f653904..f8a4490e5 100644 --- a/src/components/containers/Section.js +++ b/src/components/containers/Section.js @@ -5,33 +5,26 @@ import PropTypes from 'prop-types'; import unpackPlotProps from '../../lib/unpackPlotProps'; import {containerConnectedContextTypes} from '../../lib/connectToContainer'; -function childIsVisible(child) { - const attrVisible = Boolean((child.props.plotProps || {}).isVisible); - const sectionVisible = Boolean(child.props['data-section-child-visible']); - return attrVisible || sectionVisible; -} - export default class Section extends Component { constructor(props, context) { super(props, context); this.children = null; this.menuPanel = null; + this.sectionVisible = false; - this.processAndSetChildren(context); + this.processAndSetChildren(props, context); } componentWillReceiveProps(nextProps, nextContext) { - this.processAndSetChildren(nextContext); + this.processAndSetChildren(nextProps, nextContext); } - processAndSetChildren(context) { - let children = this.props.children; - if (!Array.isArray(children)) { - children = [children]; - } + processAndSetChildren(nextProps, nextContext) { + this.sectionVisible = false; - const attrChildren = []; + const children = React.Children.toArray(nextProps.children); + this.children = []; let menuPanel = null; for (let i = 0; i < children.length; i++) { @@ -40,7 +33,8 @@ export default class Section extends Component { continue; } if (child.type === MenuPanel) { - // Process the first menuPanel. Ignore the rest. + // Process the first menuPanel. Ignore the rest. MenuPanel does + // not affect visibility. if (menuPanel) { continue; } @@ -55,38 +49,34 @@ export default class Section extends Component { plotProps = child.plotProps; } else if (isAttr) { if (child.type.supplyPlotProps) { - plotProps = child.type.supplyPlotProps(child.props, context); + plotProps = child.type.supplyPlotProps(child.props, nextContext); if (child.type.modifyPlotProps) { - child.type.modifyPlotProps(child.props, context, plotProps); + child.type.modifyPlotProps(child.props, nextContext, plotProps); } } else { - plotProps = unpackPlotProps(child.props, context); + plotProps = unpackPlotProps(child.props, nextContext); } // assign plotProps as a prop of children. If they are connectedToContainer // it will see plotProps and skip recomputing them. - newProps = {plotProps, key: i}; + newProps = {plotProps}; + this.sectionVisible = this.sectionVisible || plotProps.isVisible; + this.children.push(cloneElement(child, newProps)); } else if (child.type === Info) { // Info panels do not change section visibility. - newProps = {key: i, 'data-section-child-visible': false}; + this.children.push(child); } else { // custom UI currently forces section visibility. - newProps = {key: i, 'data-section-child-visible': true}; + this.sectionVisible = true; + this.children.push(child); } - - const childProps = Object.assign(newProps, child.props); - attrChildren.push(cloneElement(child, childProps)); } - this.children = attrChildren.length ? attrChildren : null; this.menuPanel = menuPanel; } render() { - const hasVisibleChildren = - this.children && this.children.some(childIsVisible); - - return hasVisibleChildren ? ( + return this.sectionVisible ? (
{this.props.name} diff --git a/src/index.js b/src/index.js index 84b314887..634d62fd6 100644 --- a/src/index.js +++ b/src/index.js @@ -7,6 +7,7 @@ import { connectTraceToPlot, dereference, localize, + walkObject, } from './lib'; import {EDITOR_ACTIONS} from './lib/constants'; @@ -82,6 +83,7 @@ export { connectTraceToPlot, dereference, localize, + walkObject, }; export default PlotlyEditor; diff --git a/src/lib/dereference.js b/src/lib/dereference.js index cdb308633..af958696f 100644 --- a/src/lib/dereference.js +++ b/src/lib/dereference.js @@ -12,9 +12,7 @@ export default function dereference(container, dataSources) { const data = dataSources[srcRef]; if (!Array.isArray(data)) { - throw new Error( - `Attempted to dereference ${key} but no array data found for ${srcRef}.` - ); + return; } const dataKey = key.replace(SRC_ATTR_PATTERN, ''); diff --git a/src/styles/components/fields/_field.scss b/src/styles/components/fields/_field.scss index fde64edd8..7a3476539 100644 --- a/src/styles/components/fields/_field.scss +++ b/src/styles/components/fields/_field.scss @@ -36,7 +36,7 @@ .field__widget { width: 64%; padding-left: 12px; - display: inline-block; + display: flex; padding-right: 12px; }