utilize trace > layout connected workaround for <BoxGap>

Author: bpostlethwaite

src/DefaultEditor.js

@@ -24,6 +24,8 @@ import {
 import {DEFAULT_FONTS} from './constants';
 import {localize, connectAxesToLayout, connectLayoutToPlot} from './lib';
 
+import {BoxGap} from './shame';
+
 const LayoutPanel = connectLayoutToPlot(Panel);
 const AxesFold = connectAxesToLayout(Fold);
 
@@ -145,6 +147,21 @@ class DefaultEditor extends Component {
               <ColorPicker label={_('Border Color')} attr="marker.line.color" />
             </TraceMarkerSection>
 
+            <Section name={_('Size and Spacing')}>
+              <BoxGap label={_('Bar Width')} attr="bargap" />
+              <BoxGap label={_('Box Width')} attr="boxgap" />
+              <BoxGap
+                label={_('Bar Padding')}
+                attr="bargroupgap"
+                showArrows={false}
+              />
+              <BoxGap
+                label={_('Box Padding')}
+                attr="boxgroupgap"
+                showArrows={false}
+              />
+            </Section>
+
             <Section name={_('Lines')}>
               <Numeric label={_('Width')} step={1.0} attr="line.width" />
               <ColorPicker label={_('Line Color')} attr="line.color" />

src/components/containers/Section.js

@@ -58,7 +58,11 @@ export default class Section extends Component {
       } else {
         plotProps = {isVisible: true};
       }
+
+      // assign plotProps as a prop of children. If they are connectedToContainer
+      // it will see plotProps and skip recomputing them.
       const childProps = Object.assign({plotProps}, child.props);
+
       childProps.key = i;
       attrChildren.push(cloneElement(child, childProps));
     }

src/components/fields/Numeric.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {connectToContainer} from '../../lib';
 
-class Numeric extends Component {
+export class UnconnectedNumeric extends Component {
   render() {
     return (
       <Field {...this.props}>
@@ -23,7 +23,7 @@ class Numeric extends Component {
   }
 }
 
-Numeric.propTypes = {
+UnconnectedNumeric.propTypes = {
   defaultValue: PropTypes.number,
   fullValue: PropTypes.func,
   min: PropTypes.number,
@@ -34,8 +34,8 @@ Numeric.propTypes = {
   ...Field.propTypes,
 };
 
-Numeric.defaultProps = {
+UnconnectedNumeric.defaultProps = {
   showArrows: true,
 };
 
-export default connectToContainer(Numeric);
+export default connectToContainer(UnconnectedNumeric);

src/shame.js

@@ -1,7 +1,14 @@
 /*
- * DELETE THIS FILE AND EVERYTHING IN IT.
+ * DELETE THIS FILE. EVERYTHING NEEDS TO FIND A HOME.
  */
 import {list} from 'plotly.js/src/plots/cartesian/axis_ids';
+import {UnconnectedNumeric} from './components/fields/Numeric';
+import {
+  connectLayoutToPlot,
+  connectToContainer,
+  getLayoutContext,
+  unpackPlotProps,
+} from './lib';
 
 export function noShame(opts) {
   if (opts.plotly && !opts.plotly.Axes) {
@@ -10,3 +17,27 @@ export function noShame(opts) {
     };
   }
 }
+
+class NumericNoArrows extends UnconnectedNumeric {}
+NumericNoArrows.propTypes = UnconnectedNumeric.propTypes;
+NumericNoArrows.defaultProps = {
+  showArrows: false,
+};
+
+export const BoxGap = connectLayoutToPlot(
+  connectToContainer(NumericNoArrows, {
+    supplyPlotProps: (props, context) => {
+      // workaround the issue with nested layouts inside trace component.
+      // See
+      // https://github.com/plotly/react-plotly.js-editor/issues/58#issuecomment-345492794
+      const plotProps = unpackPlotProps(props, {
+        ...context,
+        ...getLayoutContext(context),
+      });
+
+      // Full value should multiply by percentage if number.
+
+      return plotProps;
+    },
+  })
+);