Test nested connections and add nested connection

package.json

@@ -13,8 +13,10 @@
     "url": "https://github.com/plotly/react-plotly.js-editor/issues"
   },
   "scripts": {
-    "make:lib": "mkdirp lib && babel src --out-dir lib --ignore=__tests__/* --source-maps ",
-    "make:build": "mkdirp build && browserify src/PlotlyEditor.js -o ./build/PlotlyEditor.js -t [ babelify --presets [ es2015 react ] ] -t browserify-global-shim --standalone createPlotlyComponent && uglifyjs ./build/PlotlyEditor.js --compress --mangle --output ./build/PlotlyEditor.min.js --source-map filename=build/PlotlyEditor.min.js.map",
+    "make:lib": "mkdirp lib && babel src --out-dir lib --ignore=__tests__/* --source-maps && npm run make:lib:css",
+    "make:lib:css": "mkdirp lib && node-sass src/styles/main.scss > lib/react-plotly.js-editor.css",
+    "make:dist": "mkdirp dist && browserify src/PlotlyEditor.js -o ./dist/PlotlyEditor.js -t [ babelify --presets [ es2015 react ] ] -t browserify-global-shim --standalone createPlotlyComponent && uglifyjs ./dist/PlotlyEditor.js --compress --mangle --output ./dist/PlotlyEditor.min.js --source-map filename=dist/PlotlyEditor.min.js.map && make:dist:css",
+    "make:dist:css": "mkdirp dist && node-sass --output-style compressed src/styles/main.scss > dist/react-plotly.js-editor.css",
     "prepublishOnly": "npm run make:lib",
     "lint": "prettier  --write \"{src}/**/*.{js,jsx}\"",
     "test": "jest",
@@ -31,60 +33,40 @@
     "react"
   ],
   "devDependencies": {
-    "autoprefixer": "^7.1.2",
     "babel-cli": "^6.26.0",
     "babel-eslint": "^8.0.2",
-    "babel-plugin-add-module-exports": "^0.2.1",
-    "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "babelify": "^7.3.0",
-    "brfs": "^1.4.3",
     "browserify": "^14.5.0",
-    "browserify-global-shim": "^1.0.3",
-    "budo": "^10.0.4",
-    "bundle-collapser": "^1.2.1",
-    "cash-mv": "^0.2.0",
     "classnames": "^2.2.5",
-    "envify": "^4.1.0",
     "enzyme": "^3.1.0",
     "enzyme-adapter-react-15": "^1.0.4",
     "eslint": "^4.11.0",
     "eslint-config-prettier": "^2.7.0",
     "eslint-plugin-import": "^2.8.0",
     "eslint-plugin-react": "^7.4.0",
-    "event-emitter": "^0.3.5",
     "gl": "^4.0.4",
-    "hat": "0.0.3",
-    "insert-css": "^2.0.0",
     "jest": "^21.2.1",
-    "json-beautify": "^1.0.1",
-    "lint-staged": "^4.0.2",
     "mkdirp": "^0.5.1",
-    "netlify-cli": "^1.2.2",
-    "node-sass": "^4.5.3",
+    "node-sass": "^4.7.1",
     "nodemon": "^1.11.0",
-    "onetime": "^1.1.0",
     "prettier": "^1.5.3",
     "react": "^15.6.1",
-    "react-addons-test-utils": "^15.6.0",
     "react-dom": "^15.6.1",
-    "react-select": "^1.0.0-rc.10",
     "react-test-renderer": "^15.6.1",
-    "sass-loader": "^6.0.6",
-    "uglify-js": "^3.0.26",
-    "uglifyify": "^4.0.3"
+    "uglify-js": "^3.0.26"
   },
   "browserify-global-shim": {
     "react": "React"
   },
   "dependencies": {
     "fast-isnumeric": "^1.1.1",
-    "object-assign": "^4.1.1",
     "plotly.js": "^1.31.0",
     "prop-types": "^15.5.10",
     "react-color": "^2.13.8",
+    "react-select": "^1.0.0-rc.10",
     "tinycolor2": "^1.4.1"
   }
 }

src/DefaultEditor.js

@@ -24,6 +24,8 @@ import {
 import {DEFAULT_FONTS} from './constants';
 import {localize, connectAxesToLayout, connectLayoutToPlot} from './lib';
 
+import {LayoutNumericFractionInverse, LayoutNumericFraction} from './shame';
+
 const LayoutPanel = connectLayoutToPlot(Panel);
 const AxesFold = connectAxesToLayout(Fold);
 
@@ -145,6 +147,25 @@ class DefaultEditor extends Component {
               <ColorPicker label={_('Border Color')} attr="marker.line.color" />
             </TraceMarkerSection>
 
+            <Section name={_('Size and Spacing')}>
+              <LayoutNumericFractionInverse
+                label={_('Bar Width')}
+                attr="bargap"
+              />
+              <LayoutNumericFractionInverse
+                label={_('Box Width')}
+                attr="boxgap"
+              />
+              <LayoutNumericFraction
+                label={_('Bar Padding')}
+                attr="bargroupgap"
+              />
+              <LayoutNumericFraction
+                label={_('Box Padding')}
+                attr="boxgroupgap"
+              />
+            </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

@@ -2,12 +2,13 @@ import MenuPanel from './MenuPanel';
 import React, {Component, cloneElement} from 'react';
 import PropTypes from 'prop-types';
 import unpackPlotProps from '../../lib/unpackPlotProps';
+import {containerConnectedContextTypes} from '../../lib/connectToContainer';
 
 function childIsVisible(child) {
   return Boolean((child.props.plotProps || {}).isVisible);
 }
 
-class Section extends Component {
+export default class Section extends Component {
   constructor(props, context) {
     super(props, context);
 
@@ -49,11 +50,22 @@ class Section extends Component {
       if (child.plotProps) {
         plotProps = child.plotProps;
       } else if (isAttr) {
-        plotProps = unpackPlotProps(child.props, context, child.type);
+        if (child.type.supplyPlotProps) {
+          plotProps = child.type.supplyPlotProps(child.props, context);
+          if (child.type.modifyPlotProps) {
+            child.type.modifyPlotProps(child.props, context, plotProps);
+          }
+        } else {
+          plotProps = unpackPlotProps(child.props, context);
+        }
       } 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));
     }
@@ -84,12 +96,4 @@ Section.propTypes = {
   name: PropTypes.string,
 };
 
-Section.contextTypes = {
-  container: PropTypes.object,
-  defaultContainer: PropTypes.object,
-  fullContainer: PropTypes.object,
-  getValObject: PropTypes.func,
-  updateContainer: PropTypes.func,
-};
-
-export default Section;
+Section.contextTypes = containerConnectedContextTypes;

src/components/containers/__tests__/Section-test.js

@@ -12,7 +12,7 @@ describe('Section', () => {
   it('is visible if it contains any visible children', () => {
     // mode is visible with scatter. Hole is not visible. Section should show.
     const wrapper = mount(
-      <TestEditor onUpdate={jest.fn()} {...fixtures.scatter({deref: true})}>
+      <TestEditor onUpdate={jest.fn()} {...fixtures.scatter()}>
         <TraceSection traceIndex={0} name="test-section">
           <Flaglist
             attr="mode"
@@ -46,7 +46,7 @@ describe('Section', () => {
 
   it('is visible if it contains any non attr children', () => {
     const wrapper = mount(
-      <TestEditor onUpdate={jest.fn()} {...fixtures.scatter({deref: true})}>
+      <TestEditor onUpdate={jest.fn()} {...fixtures.scatter()}>
         <Section name="test-section">
           <Info>INFO</Info>
         </Section>
@@ -61,7 +61,7 @@ describe('Section', () => {
   it('is not visible if it contains no visible children', () => {
     // pull and hole are not scatter attrs. Section should not show.
     const wrapper = mount(
-      <TestEditor onUpdate={jest.fn()} {...fixtures.scatter({deref: true})}>
+      <TestEditor onUpdate={jest.fn()} {...fixtures.scatter()}>
         <TraceSection traceIndex={0} name="test-section">
           <Numeric attr="pull" min={0} max={1} step={0.1} traceIndex={0} />
           <Numeric attr="hole" min={0} max={1} step={0.1} traceIndex={0} />
@@ -81,7 +81,7 @@ describe('Section', () => {
 
   it('will render first menuPanel even with no visible attrs', () => {
     const wrapper = mount(
-      <TestEditor onUpdate={jest.fn()} {...fixtures.scatter({deref: true})}>
+      <TestEditor onUpdate={jest.fn()} {...fixtures.scatter()}>
         <Section name="test-section">
           <MenuPanel show>
             <Info>INFO</Info>

src/components/fields/AxesRange.js

@@ -1,29 +1,12 @@
 import Numeric from './Numeric';
-import React, {Component} from 'react';
 import {connectToContainer} from '../../lib';
 
-class AxesRange extends Component {
-  static modifyPlotProps(props, context, plotProps) {
-    if (!plotProps.isVisible) {
-      return;
-    }
-    const {fullContainer} = plotProps;
-    if (fullContainer && fullContainer.autorange) {
-      plotProps.isVisible = false;
-    }
-  }
-
-  render() {
-    return <Numeric {...this.props} />;
+function modifyPlotProps(props, context, plotProps) {
+  const {fullContainer} = plotProps;
+  if (plotProps.isVisible && fullContainer && fullContainer.autorange) {
+    plotProps.isVisible = false;
   }
+  return plotProps;
 }
 
-AxesRange.propTypes = {
-  ...Numeric.propTypes,
-};
-
-AxesRange.defaultProps = {
-  showArrows: false,
-};
-
-export default connectToContainer(AxesRange);
+export default connectToContainer(Numeric, {modifyPlotProps});

src/components/fields/AxesSelector.js

@@ -2,31 +2,21 @@ import Field from './Field';
 import PropTypes from 'prop-types';
 import RadioBlocks from '../widgets/RadioBlocks';
 import React, {Component} from 'react';
-import {connectToContainer} from '../../lib';
 
 export default class AxesSelector extends Component {
   constructor(props, context) {
     super(props, context);
 
-    if (!props.axesTargetHandler && !context.axesTargetHandler) {
+    if (!context.axesTargetHandler) {
       throw new Error(
-        'AxesSelector must be nested within a connectAxesToPlot component ' +
-          'or passed axesTargetHandler and axesOptions props'
+        'AxesSelector must be nested within a connectAxesToPlot component'
       );
     }
   }
 
   render() {
-    let axesTargetHandler, axesOptions, axesTarget;
-    if (this.props.axesTargetHandler) {
-      axesTargetHandler = this.props.axesTargetHandler;
-      axesOptions = this.props.axesOptions;
-      axesTarget = this.props.axesTarget;
-    } else {
-      axesTargetHandler = this.context.axesTargetHandler;
-      axesOptions = this.context.axesOptions;
-      axesTarget = this.context.axesTarget;
-    }
+    const {axesTargetHandler, axesOptions, axesTarget} = this.context;
+
     return (
       <Field {...this.props}>
         <RadioBlocks
@@ -39,12 +29,6 @@ export default class AxesSelector extends Component {
   }
 }
 
-AxesSelector.propTypes = {
-  axesTargetHandler: PropTypes.func,
-  axesOptions: PropTypes.array,
-  axesTarget: PropTypes.string,
-};
-
 AxesSelector.contextTypes = {
   axesTargetHandler: PropTypes.func,
   axesOptions: PropTypes.array,

src/components/fields/CanvasSize.js

@@ -1,25 +1,11 @@
 import Numeric from './Numeric';
-import React, {Component} from 'react';
 import {connectToContainer} from '../../lib';
 
-class CanvasSize extends Component {
-  static modifyPlotProps(props, context, plotProps) {
-    if (!plotProps.isVisible) {
-      return;
-    }
-    const {fullContainer} = plotProps;
-    if (fullContainer && fullContainer.autosize) {
-      plotProps.isVisible = false;
-    }
-  }
-
-  render() {
-    return <Numeric {...this.props} />;
+function modifyPlotProps(props, context, plotProps) {
+  const {fullContainer} = plotProps;
+  if (plotProps.isVisible && fullContainer && fullContainer.autosize) {
+    plotProps.isVisible = false;
   }
 }
 
-CanvasSize.propTypes = {
-  ...Numeric.propTypes,
-};
-
-export default connectToContainer(CanvasSize);
+export default connectToContainer(Numeric, {modifyPlotProps});

src/components/fields/DataSelector.js

@@ -3,19 +3,13 @@ import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import Field from './Field';
 import nestedProperty from 'plotly.js/src/lib/nested_property';
-import {connectToContainer} from '../../lib';
+import {connectToContainer, unpackPlotProps} from '../../lib';
 
 function attributeIsData(meta = {}) {
   return meta.valType === 'data_array' || meta.arrayOk;
 }
 
 class DataSelector extends Component {
-  static modifyPlotProps(props, context, plotProps) {
-    if (attributeIsData(plotProps.attrMeta)) {
-      plotProps.isVisible = true;
-    }
-  }
-
   constructor(props) {
     super(props);
 
@@ -72,4 +66,10 @@ DataSelector.propTypes = {
   ...Field.propTypes,
 };
 
-export default connectToContainer(DataSelector);
+function modifyPlotProps(props, context, plotProps) {
+  if (attributeIsData(plotProps.attrMeta)) {
+    plotProps.isVisible = true;
+  }
+}
+
+export default connectToContainer(DataSelector, {modifyPlotProps});

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);