track new version of react-plotly.js

Author: nicolaskruchten

dev/App.js

@@ -21,6 +21,8 @@ const dataSourceOptions = Object.keys(dataSources).map(name => ({
   label: name,
 }));
 
+const config = {mapboxAccessToken: ACCESS_TOKENS.MAPBOX, editable: true};
+
 class App extends Component {
   constructor() {
     super();
@@ -64,7 +66,7 @@ class App extends Component {
         <PlotlyEditorWithPlot
           data={this.state.data}
           layout={this.state.layout}
-          config={{mapboxAccessToken: ACCESS_TOKENS.MAPBOX, editable: true}}
+          config={config}
           dataSources={dataSources}
           dataSourceOptions={dataSourceOptions}
           plotly={plotly}

package.json

@@ -20,7 +20,7 @@
     "raf": "^3.4.0",
     "react-color": "^2.13.8",
     "react-colorscales": "^0.4.2",
-    "react-plotly.js": "^1.6.0",
+    "react-plotly.js": "^1.7.0",
     "react-rangeslider": "^2.2.0",
     "react-select": "^1.0.0-rc.10",
     "react-tabs": "^2.2.1",

src/PlotlyEditor.js

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