Merging Hub into Editor (#176)

Author: nicolaskruchten

examples/async-data/package-lock.json

@@ -7,6 +7,8 @@
     "plotly.js": "^1.31.2",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
+    "react-plotly.js": "^1.0.4",
+    "react-plotly.js-editor": "^0.1.0",
     "react-scripts": "1.0.17"
   },
   "scripts": {

examples/async-data/package.json

@@ -1,11 +1,7 @@
 import './App.css';
 import 'react-plotly.js-editor/lib/react-plotly.js-editor.css';
 import 'react-select/dist/react-select.css';
-import PlotlyEditor, {
-  EDITOR_ACTIONS,
-  Hub,
-  dereference,
-} from 'react-plotly.js-editor';
+import PlotlyEditor, {dereference} from 'react-plotly.js-editor';
 import React, {Component} from 'react';
 import createPlotComponent from 'react-plotly.js/factory';
 import ee from 'event-emitter';
@@ -49,6 +45,7 @@ class Backend {
 ee(Backend.prototype);
 
 const backend = new Backend({
+  // eslint-disable-next-line no-magic-numbers
   dataSources: {col1: [1, 2, 3], col2: [4, 3, 2], col3: [17, 13, 9]},
   delay: 10,
 });
@@ -57,38 +54,25 @@ class App extends Component {
   constructor() {
     super();
 
-    // A basic starting plotly.js figure object. Instead of assigning
-    const figure = {
+    // This 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()
+    const graphDiv = {
       data: [{type: 'scatter'}],
       layout: {title: 'Room readings'},
     };
 
     // Store the figure, dataSource and dataSourceOptions in state.
-    this.state = {figure, dataSources: {}};
-
-    // Instantiate a Hub object. The hub is a convenience module that updates
-    // the applies Editor updates to the figure object. After an update it
-    // will call the onUpdate function with the editor and plot revision numbers.
-    // We set these in our state and pass them to react-plotly.js-editor and
-    // react-plotly.js plot component respectively. This is necessary because
-    // the plotly.js library will mutate the figure object with user interactions.
-    // The hub listens for events from plotly.js and alerts us to the mutation here.
-    // The Editor follows the same mutation pattern (for good or ill) and the Hub
-    // will pick up editor results in the same way.
-    this.hub = new Hub({
-      debug: true,
-      onUpdate: ({editorRevision, plotRevision}) =>
-        this.setState(prevState => ({
-          ...prevState,
-          editorRevision,
-          plotRevision,
-        })),
-    });
+    this.state = {
+      graphDiv,
+      editorRevision: 0,
+      plotRevision: 0,
+      dataSources: {},
+    };
 
     this.getChartingData = this.getChartingData.bind(this);
     this.setChartingData = this.setChartingData.bind(this);
     this.setChartingDataOptions = this.setChartingDataOptions.bind(this);
-    this.onEditorUpdate = this.onEditorUpdate.bind(this);
   }
 
   componentDidMount() {
@@ -98,18 +82,18 @@ class App extends Component {
     this.getChartingDataColumnsNames();
   }
 
-  componentDidUnmount() {
+  componentWillUnmount() {
     backend.off('ChartingDataColumnNames', this.setChartingDataOptions);
     backend.off('ChartingData', this.setChartingData);
   }
 
   setChartingDataOptions(columnNames) {
-    const dataSourceOptions = columnNames.map(name => ({
-      value: name,
-      label: name,
-    }));
-    this.setState(prevState => ({...prevState, dataSourceOptions}));
-    this.hub.editorSourcesUpdated();
+    this.setState({
+      dataSourceOptions: columnNames.map(name => ({
+        value: name,
+        label: name,
+      })),
+    });
   }
 
   getChartingDataColumnsNames() {
@@ -127,35 +111,34 @@ class App extends Component {
 
   setChartingData({columnName, data}) {
     if (Array.isArray(data) && data.length) {
-      const {dataSources, ...otherState} = this.state;
-      dataSources[columnName] = data;
-      dereference(this.state.figure.data, dataSources);
-      this.setState({
-        dataSources,
-        ...otherState,
+      this.setState(({dataSources, graphDiv}) => {
+        const newDataSources = {...dataSources, [columnName]: data};
+        dereference(graphDiv.data, newDataSources);
+        return {dataSources: newDataSources, graphDiv};
       });
-      this.hub.figureUpdated();
     }
   }
 
-  onEditorUpdate(event) {
-    const {type, payload} = event;
-    if (type === EDITOR_ACTIONS.UPDATE_TRACES) {
-      const {update} = payload;
-      if (update) {
-        for (const key in update) {
-          if (key.substr(key.length - 3) === 'src') {
-            const columnId = update[key];
-            const data = this.state.dataSources[columnId];
-            if (!Array.isArray(data).length || !data.length) {
-              this.getChartingData(columnId);
-            }
+  handleEditorUpdateTraces({update}) {
+    if (update) {
+      for (const key in update) {
+        if (key.substr(key.length - 3) === 'src') {
+          const columnId = update[key];
+          const data = this.state.dataSources[columnId];
+          if (!Array.isArray(data).length || !data.length) {
+            this.getChartingData(columnId);
           }
         }
       }
     }
+  }
 
-    this.hub.handleEditorUpdate(event);
+  handlePlotUpdate(graphDiv) {
+    this.setState(({editorRevision: x}) => ({editorRevision: x + 1, graphDiv}));
+  }
+
+  handleEditorUpdate() {
+    this.setState(({plotRevision: x}) => ({plotRevision: x + 1}));
   }
 
   render() {
@@ -165,17 +148,18 @@ class App extends Component {
           locale="en"
           dataSources={this.state.dataSources}
           dataSourceOptions={this.state.dataSourceOptions}
-          graphDiv={this.hub.graphDiv}
-          onUpdate={this.onEditorUpdate}
-          plotly={plotly}
+          graphDiv={this.state.graphDiv}
+          onUpdate={this.handleEditorUpdate.bind(this)}
+          onUpdateTraces={this.handleEditorUpdateTraces.bind(this)}
           revision={this.state.editorRevision}
+          plotly={plotly}
         />
         <Plot
           debug
-          data={this.state.figure.data}
-          layout={this.state.figure.layout}
-          onUpdate={this.hub.handlePlotUpdate}
-          onInitialized={this.hub.handlePlotInitialized}
+          data={this.state.graphDiv.data}
+          layout={this.state.graphDiv.layout}
+          onUpdate={this.handlePlotUpdate.bind(this)}
+          onInitialized={this.handlePlotUpdate.bind(this)}
           revision={this.state.plotRevision}
         />
       </div>

examples/async-data/src/App.js

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import plotly from 'plotly.js/dist/plotly-basic';
 import createPlotComponent from 'react-plotly.js/factory';
-import PlotlyEditor, {Hub, dereference} from 'react-plotly.js-editor';
+import PlotlyEditor, {dereference} from 'react-plotly.js-editor';
 import 'react-plotly.js-editor/lib/react-plotly.js-editor.css';
 import 'react-select/dist/react-select.css';
 
@@ -12,46 +12,40 @@ class App extends Component {
     super();
 
     // DataSources are a mapping of column or data source ids to data arrays.
+    // eslint-disable-next-line no-magic-numbers
     const dataSources = {col1: [1, 2, 3], col2: [4, 3, 2], col3: [17, 13, 9]};
     const dataSourceOptions = [
       {value: 'col1', label: 'CO2'},
       {value: 'col2', label: 'NO2'},
       {value: 'col3', label: 'SiO2'},
     ];
 
-    // A basic starting plotly.js figure object. Instead of assigning
-    const figure = {
+    // This 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()
+    const graphDiv = {
       data: [{type: 'scatter', xsrc: 'col1', ysrc: 'col2'}],
       layout: {title: 'Room readings'},
     };
 
-    dereference(figure.data, dataSources);
+    dereference(graphDiv.data, dataSources);
 
     // Store the figure, dataSource and dataSourceOptions in state.
     this.state = {
-      figure,
+      graphDiv,
+      editorRevision: 0,
+      plotRevision: 0,
       dataSources,
       dataSourceOptions,
     };
+  }
+
+  handlePlotUpdate(graphDiv) {
+    this.setState(({editorRevision: x}) => ({editorRevision: x + 1, graphDiv}));
+  }
 
-    // Instantiate a Hub object. The hub is a convenience module that updates
-    // the applies Editor updates to the figure object. After an update it
-    // will call the onUpdate function with the editor and plot revision numbers.
-    // We set these in our state and pass them to react-plotly.js-editor and
-    // react-plotly.js plot component respectively. This is necessary because
-    // the plotly.js library will mutate the figure object with user interactions.
-    // The hub listens for events from plotly.js and alerts us to the mutation here.
-    // The Editor follows the same mutation pattern (for good or ill) and the Hub
-    // will pick up editor results in the same way.
-    this.hub = new Hub({
-      debug: true,
-      onUpdate: ({editorRevision, plotRevision}) =>
-        this.setState(prevState => ({
-          ...prevState,
-          editorRevision,
-          plotRevision,
-        })),
-    });
+  handleEditorUpdate() {
+    this.setState(({plotRevision: x}) => ({plotRevision: x + 1}));
   }
 
   render() {
@@ -61,18 +55,18 @@ class App extends Component {
           locale="en"
           dataSources={this.state.dataSources}
           dataSourceOptions={this.state.dataSourceOptions}
-          graphDiv={this.hub.graphDiv}
-          onUpdate={this.hub.handleEditorUpdate}
-          plotly={plotly}
+          graphDiv={this.state.graphDiv}
+          onUpdate={this.handleEditorUpdate.bind(this)}
           revision={this.state.editorRevision}
+          plotly={plotly}
         />
         <div className="plotlyPlot">
           <Plot
             debug
-            data={this.state.figure.data}
-            layout={this.state.figure.layout}
-            onUpdate={this.hub.handlePlotUpdate}
-            onInitialized={this.hub.handlePlotInitialized}
+            data={this.state.graphDiv.data}
+            layout={this.state.graphDiv.layout}
+            onUpdate={this.handlePlotUpdate.bind(this)}
+            onInitialized={this.handlePlotUpdate.bind(this)}
             revision={this.state.plotRevision}
           />
         </div>