remove requirement that plotly.js is passed into Editor fixes #86

Author: bpostlethwaite

src/PlotlyEditor.js

@@ -12,7 +12,9 @@ class PlotlyEditor extends Component {
     noShame({plotly: this.props.plotly});
 
     // we only need to compute this once.
-    this.plotSchema = this.props.plotly.PlotSchema.get();
+    if (this.props.plotly) {
+      this.plotSchema = this.props.plotly.PlotSchema.get();
+    }
   }
 
   getChildContext() {
@@ -51,7 +53,7 @@ class PlotlyEditor extends Component {
 
 PlotlyEditor.propTypes = {
   onUpdate: PropTypes.func,
-  plotly: PropTypes.object.isRequired,
+  plotly: PropTypes.object,
   graphDiv: PropTypes.object,
   locale: PropTypes.string,
   dataSources: PropTypes.object,
@@ -72,8 +74,8 @@ PlotlyEditor.childContextTypes = {
   layout: PropTypes.object,
   locale: PropTypes.string,
   onUpdate: PropTypes.func,
-  plotSchema: PropTypes.object.isRequired,
-  plotly: PropTypes.object.isRequired,
+  plotSchema: PropTypes.object,
+  plotly: PropTypes.object,
 };
 
 export default PlotlyEditor;

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

@@ -3,13 +3,13 @@ import {Fold, Panel, Section} from '..';
 import NumericInput from '../../widgets/NumericInputStatefulWrapper';
 import React from 'react';
 import {EDITOR_ACTIONS} from '../../../constants';
-import {TestEditor, fixtures, plotly} from '../../../lib/test-utils';
+import {TestEditor, fixtures} from '../../../lib/test-utils';
 import {connectLayoutToPlot} from '../../../lib';
 import {mount} from 'enzyme';
 
 const Layouts = [Panel, Fold, Section].map(connectLayoutToPlot);
 const Editor = props => (
-  <TestEditor {...{plotly, onUpdate: jest.fn(), ...props}} />
+  <TestEditor {...{onUpdate: jest.fn(), ...props}} />
 );
 
 Layouts.forEach(Layout => {

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

@@ -2,7 +2,7 @@ import React from 'react';
 import Section from '../Section';
 import MenuPanel from '../MenuPanel';
 import {Flaglist, Info, Numeric} from '../../fields';
-import {TestEditor, fixtures, plotly} from '../../../lib/test-utils';
+import {TestEditor, fixtures} from '../../../lib/test-utils';
 import {connectTraceToPlot} from '../../../lib';
 import {mount} from 'enzyme';
 
@@ -12,11 +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
-        plotly={plotly}
-        onUpdate={jest.fn()}
-        {...fixtures.scatter({deref: true})}
-      >
+      <TestEditor onUpdate={jest.fn()} {...fixtures.scatter({deref: true})}>
         <TraceSection traceIndex={0} name="test-section">
           <Flaglist
             attr="mode"
@@ -50,11 +46,7 @@ describe('Section', () => {
 
   it('is visible if it contains any non attr children', () => {
     const wrapper = mount(
-      <TestEditor
-        plotly={plotly}
-        onUpdate={jest.fn()}
-        {...fixtures.scatter({deref: true})}
-      >
+      <TestEditor onUpdate={jest.fn()} {...fixtures.scatter({deref: true})}>
         <Section name="test-section">
           <Info>INFO</Info>
         </Section>
@@ -69,11 +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
-        plotly={plotly}
-        onUpdate={jest.fn()}
-        {...fixtures.scatter({deref: true})}
-      >
+      <TestEditor onUpdate={jest.fn()} {...fixtures.scatter({deref: true})}>
         <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} />
@@ -93,11 +81,7 @@ describe('Section', () => {
 
   it('will render first menuPanel even with no visible attrs', () => {
     const wrapper = mount(
-      <TestEditor
-        plotly={plotly}
-        onUpdate={jest.fn()}
-        {...fixtures.scatter({deref: true})}
-      >
+      <TestEditor onUpdate={jest.fn()} {...fixtures.scatter({deref: true})}>
         <Section name="test-section">
           <MenuPanel show>
             <Info>INFO</Info>

src/lib/connectAxesToLayout.js

@@ -34,10 +34,12 @@ function deepCopyPublic(value) {
 /*
  * Test that we can connectLayoutToPlot(connectAxesToLayout(Panel))
  */
-function setMultiValuedContainer(intoObj, fromObj, key, searchArrays) {
+function setMultiValuedContainer(intoObj, fromObj, key, config = {}) {
   var intoVal = intoObj[key],
     fromVal = fromObj[key];
 
+  var searchArrays = config.searchArrays;
+
   // don't merge private attrs
   if (
     (typeof key === 'string' && key.charAt(0) === '_') ||
@@ -126,18 +128,22 @@ export default function connectAxesToLayout(WrappedComponent) {
     setLocals(nextProps, nextState, nextContext) {
       const {plotly, graphDiv, container, fullContainer} = nextContext;
       const {axesTarget} = nextState;
-      this.axes = plotly.Axes.list(graphDiv);
+      if (plotly) {
+        this.axes = plotly.Axes.list(graphDiv);
+      } else {
+        this.axes = [];
+      }
       this.axesOptions = computeAxesOptions(fullContainer, this.axes);
 
       if (axesTarget === 'allaxes') {
         const multiValuedContainer = deepCopyPublic(this.axes[0]);
-        this.axes
-          .slice(1)
-          .forEach(ax =>
-            Object.keys(ax).forEach(key =>
-              setMultiValuedContainer(multiValuedContainer, ax, key)
-            )
-          );
+        this.axes.slice(1).forEach(ax =>
+          Object.keys(ax).forEach(key =>
+            setMultiValuedContainer(multiValuedContainer, ax, key, {
+              searchArrays: true,
+            })
+          )
+        );
         this.fullContainer = multiValuedContainer;
         this.defaultContainer = this.axes[0];
         // what should this be set to? Probably doesn't matter.
@@ -214,8 +220,8 @@ export default function connectAxesToLayout(WrappedComponent) {
     container: PropTypes.object.isRequired,
     fullContainer: PropTypes.object.isRequired,
     graphDiv: PropTypes.object.isRequired,
-    plotly: PropTypes.object.isRequired,
-    updateContainer: PropTypes.func.isRequired,
+    plotly: PropTypes.object,
+    updateContainer: PropTypes.func,
   };
 
   AxesConnectedComponent.childContextTypes = {

src/lib/connectLayoutToPlot.js

@@ -14,12 +14,17 @@ export default function connectLayoutToPlot(WrappedComponent) {
 
     getChildContext() {
       const {layout, fullLayout, plotly} = this.context;
-      return {
-        getValObject: attr =>
+
+      let getValObject;
+      if (plotly) {
+        getValObject = attr =>
           plotly.PlotSchema.getLayoutValObject(
             fullLayout,
             nestedProperty({}, attr).parts
-          ),
+          );
+      }
+      return {
+        getValObject,
         updateContainer: this.updateContainer,
         container: layout,
         fullContainer: fullLayout,
@@ -48,7 +53,7 @@ export default function connectLayoutToPlot(WrappedComponent) {
   LayoutConnectedComponent.contextTypes = {
     layout: PropTypes.object,
     fullLayout: PropTypes.object,
-    plotly: PropTypes.object.isRequired,
+    plotly: PropTypes.object,
     onUpdate: PropTypes.func,
   };
 

src/lib/connectTraceToPlot.js

@@ -20,12 +20,18 @@ export default function connectTraceToPlot(WrappedComponent) {
       const trace = data[traceIndex] || {};
       const fullTraceIndex = findFullTraceIndex(fullData, traceIndex);
       const fullTrace = fullData[fullTraceIndex] || {};
-      return {
-        getValObject: attr =>
+
+      let getValObject;
+      if (plotly) {
+        getValObject = attr =>
           plotly.PlotSchema.getTraceValObject(
             fullTrace,
             nestedProperty({}, attr).parts
-          ),
+          );
+      }
+
+      return {
+        getValObject,
         updateContainer: this.updateTrace,
         deleteContainer: this.deleteTrace,
         container: trace,
@@ -70,7 +76,7 @@ export default function connectTraceToPlot(WrappedComponent) {
   TraceConnectedComponent.contextTypes = {
     fullData: PropTypes.array,
     data: PropTypes.array,
-    plotly: PropTypes.object.isRequired,
+    plotly: PropTypes.object,
     onUpdate: PropTypes.func,
   };
 

src/lib/unpackPlotProps.js

@@ -34,7 +34,10 @@ export default function unpackPlotProps(props, context, ComponentClass) {
   }
 
   // Property descriptions and meta:
-  const attrMeta = context.getValObject(props.attr) || {};
+  let attrMeta;
+  if (getValObject) {
+    attrMeta = context.getValObject(props.attr) || {};
+  }
 
   // Update data functions:
   const updatePlot = v => updateContainer && updateContainer({[props.attr]: v});
@@ -61,11 +64,13 @@ export default function unpackPlotProps(props, context, ComponentClass) {
     multiValued,
   };
 
-  if (isNumeric(attrMeta.max)) {
-    plotProps.max = attrMeta.max;
-  }
-  if (isNumeric(attrMeta.min)) {
-    plotProps.min = attrMeta.min;
+  if (attrMeta) {
+    if (isNumeric(attrMeta.max)) {
+      plotProps.max = attrMeta.max;
+    }
+    if (isNumeric(attrMeta.min)) {
+      plotProps.min = attrMeta.min;
+    }
   }
 
   // Give Component Classes the space to modify plotProps: