first stab at combined component

Author: nicolaskruchten

dev/App.js

@@ -1,10 +1,9 @@
 import React, {Component} from 'react';
 import {hot} from 'react-hot-loader';
 import plotly from 'plotly.js/dist/plotly';
-import createPlotComponent from 'react-plotly.js/factory';
-import PlotlyEditor from '../src';
 import '../src/styles/main.scss';
 import Nav from './Nav';
+import {PlotlyEditorWithPlot} from '../src';
 
 // https://github.com/plotly/react-chart-editor#mapbox-access-tokens
 import ACCESS_TOKENS from '../accessTokens';
@@ -22,18 +21,13 @@ const dataSourceOptions = Object.keys(dataSources).map(name => ({
   label: name,
 }));
 
-const Plot = createPlotComponent(plotly);
-
 class App extends Component {
   constructor() {
     super();
 
-    // The graphDiv object is passed to Plotly.js, which then causes it to be
-    // overwritten with a full DOM node that contains data, layout, _fullData,
-    // _fullLayout etc in handlePlotUpdate()
     this.state = {
-      graphDiv: {},
-      plotRevision: 0,
+      data: [],
+      layout: {},
       currentMockIndex: -1,
       mocks: [],
     };
@@ -49,61 +43,36 @@ class App extends Component {
       .then(mocks => this.setState({mocks}));
   }
 
-  handlePlotUpdate(graphDiv) {
-    this.setState({graphDiv});
-  }
-
-  handleEditorUpdate() {
-    this.setState(({plotRevision: x}) => ({plotRevision: x + 1}));
-  }
-
   loadMock(mockIndex) {
     const mock = this.state.mocks[mockIndex];
     fetch(mock.url, {
       headers: new Headers({Accept: 'application/vnd.github.v3.raw'}),
     })
       .then(response => response.json())
       .then(figure => {
-        const graphDiv = this.state.graphDiv;
-        graphDiv.layout = figure.layout;
-        graphDiv.data = figure.data;
-        this.setState(({plotRevision: x}) => ({
+        this.setState({
           currentMockIndex: mockIndex,
-          plotRevision: x + 1,
-        }));
+          data: figure.data,
+          layout: figure.layout,
+        });
       });
   }
 
   render() {
     return (
       <div className="app__container plotly-editor--theme-provider">
-        <div className="app">
-          <PlotlyEditor
-            graphDiv={this.state.graphDiv}
-            onUpdate={this.handleEditorUpdate.bind(this)}
-            dataSources={dataSources}
-            dataSourceOptions={dataSourceOptions}
-            plotly={plotly}
-            advancedTraceTypeSelector
-          />
-          <div className="app__main" style={{width: '100%', height: '100%'}}>
-            <Plot
-              config={{mapboxAccessToken: ACCESS_TOKENS.MAPBOX, editable: true}}
-              data={this.state.graphDiv.data}
-              debug
-              layout={this.state.graphDiv.layout}
-              onInitialized={this.handlePlotUpdate.bind(this)}
-              onUpdate={this.handlePlotUpdate.bind(this)}
-              revision={this.state.plotRevision}
-              useResizeHandler
-              style={{
-                width: '100%',
-                height: '100%',
-                minHeight: 'calc(100vh - 50px)',
-              }}
-            />
-          </div>
-        </div>
+        <PlotlyEditorWithPlot
+          data={this.state.data}
+          layout={this.state.layout}
+          config={{mapboxAccessToken: ACCESS_TOKENS.MAPBOX, editable: true}}
+          dataSources={dataSources}
+          dataSourceOptions={dataSourceOptions}
+          plotly={plotly}
+          onUpdate={(data, layout) => this.setState({data, layout})}
+          useResizeHandler
+          debug
+          advancedTraceTypeSelector
+        />
         <Nav
           currentMockIndex={this.state.currentMockIndex}
           loadMock={this.loadMock}

src/PlotlyEditor.js

@@ -69,7 +69,7 @@ class PlotlyEditor extends Component {
           this.props.afterUpdateTraces(payload);
         }
         if (this.props.onUpdate) {
-          this.props.onUpdate();
+          this.props.onUpdate(graphDiv.data, graphDiv.layout);
         }
         break;
 
@@ -88,7 +88,7 @@ class PlotlyEditor extends Component {
           this.props.afterUpdateLayout(payload);
         }
         if (this.props.onUpdate) {
-          this.props.onUpdate();
+          this.props.onUpdate(graphDiv.data, graphDiv.layout);
         }
         break;
 
@@ -126,7 +126,7 @@ class PlotlyEditor extends Component {
           this.props.afterAddTrace(payload);
         }
         if (this.props.onUpdate) {
-          this.props.onUpdate();
+          this.props.onUpdate(graphDiv.data, graphDiv.layout);
         }
         break;
 
@@ -140,7 +140,7 @@ class PlotlyEditor extends Component {
             this.props.afterDeleteTrace(payload);
           }
           if (this.props.onUpdate) {
-            this.props.onUpdate();
+            this.props.onUpdate(graphDiv.data, graphDiv.layout);
           }
         }
         break;
@@ -155,7 +155,7 @@ class PlotlyEditor extends Component {
             this.props.afterDeleteAnnotation(payload);
           }
           if (this.props.onUpdate) {
-            this.props.onUpdate();
+            this.props.onUpdate(graphDiv.data, graphDiv.layout);
           }
         }
         break;
@@ -170,7 +170,7 @@ class PlotlyEditor extends Component {
             this.props.afterDeleteShape(payload);
           }
           if (this.props.onUpdate) {
-            this.props.onUpdate();
+            this.props.onUpdate(graphDiv.data, graphDiv.layout);
           }
         }
         break;
@@ -185,7 +185,7 @@ class PlotlyEditor extends Component {
             this.props.afterDeleteImage(payload);
           }
           if (this.props.onUpdate) {
-            this.props.onUpdate();
+            this.props.onUpdate(graphDiv.data, graphDiv.layout);
           }
         }
         break;

src/PlotlyEditorWithPlot.js

@@ -0,0 +1,58 @@
+import React, {Component} from 'react';
+import createPlotComponent from 'react-plotly.js/factory';
+import PlotlyEditor from '../src';
+import PropTypes from 'prop-types';
+
+class PlotlyEditorWithPlot extends Component {
+  constructor(props) {
+    super();
+    this.state = {graphDiv: {}};
+    this.PlotComponent = createPlotComponent(props.plotly);
+  }
+
+  render() {
+    return (
+      <div className="app">
+        <PlotlyEditor
+          graphDiv={this.state.graphDiv}
+          dataSources={this.props.dataSources}
+          dataSourceOptions={this.props.dataSourceOptions}
+          plotly={this.props.plotly}
+          onUpdate={this.props.onUpdate}
+          advancedTraceTypeSelector={this.props.advancedTraceTypeSelector}
+        />
+        <div className="app__main" style={{width: '100%', height: '100%'}}>
+          <this.PlotComponent
+            data={this.props.data}
+            layout={this.props.layout}
+            config={this.props.config}
+            useResizeHandler={this.props.useResizeHandler}
+            debug={this.props.debug}
+            onInitialized={graphDiv => this.setState({graphDiv})}
+            onUpdate={graphDiv => this.setState({graphDiv})}
+            style={{
+              width: '100%',
+              height: '100%',
+              minHeight: 'calc(100vh - 50px)',
+            }}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+PlotlyEditorWithPlot.propTypes = {
+  layout: PropTypes.object,
+  data: PropTypes.array,
+  config: PropTypes.object,
+  dataSourceOptions: PropTypes.array,
+  dataSources: PropTypes.object,
+  onUpdate: PropTypes.func,
+  plotly: PropTypes.object,
+  useResizeHandler: PropTypes.bool,
+  debug: PropTypes.bool,
+  advancedTraceTypeSelector: PropTypes.bool,
+};
+
+export default PlotlyEditorWithPlot;

src/index.js

@@ -1,4 +1,5 @@
 import PlotlyEditor from './PlotlyEditor';
+import PlotlyEditorWithPlot from './PlotlyEditorWithPlot';
 import {
   connectAnnotationToLayout,
   connectShapeToLayout,
@@ -139,6 +140,7 @@ export {
   localize,
   localizeString,
   walkObject,
+  PlotlyEditorWithPlot,
 };
 
 export default PlotlyEditor;