From 40124b40e17f528d370f37a92c5bd6cb3a686f76 Mon Sep 17 00:00:00 2001 From: bpostlethwaite Date: Fri, 22 Dec 2017 19:53:45 -0500 Subject: [PATCH 1/4] section does not clone when not necessary This fixes an issue where non-attr components were lagging in updates by one render cycle --- src/components/containers/Section.js | 48 +++++++++++----------------- 1 file changed, 19 insertions(+), 29 deletions(-) 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} From 3f072fa67c8ef2561dcdd57f691ba1f61823f869 Mon Sep 17 00:00:00 2001 From: bpostlethwaite Date: Fri, 22 Dec 2017 19:54:20 -0500 Subject: [PATCH 2/4] expose walkObject --- src/index.js | 2 ++ 1 file changed, 2 insertions(+) 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; From 87663b368412b26aa69a06a96f6d6864da23b18f Mon Sep 17 00:00:00 2001 From: bpostlethwaite Date: Fri, 22 Dec 2017 19:54:27 -0500 Subject: [PATCH 3/4] derefence does not throw an error when it does not find src key --- src/lib/dereference.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) 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, ''); From cfd7acbfc17a1fac2f223aa96ea4566ce5c1fdc4 Mon Sep 17 00:00:00 2001 From: bpostlethwaite Date: Tue, 26 Dec 2017 13:05:18 -0500 Subject: [PATCH 4/4] add flex styling to editor widget field --- src/styles/components/fields/_field.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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; }