async-friendly extend and prepend to graphs

Author: alexcjohnson

components/dash-core-components/src/fragments/Graph.react.js

@@ -218,6 +218,8 @@ class PlotlyGraph extends Component {
         const clearState = props.clearState;
         const dataArray = props[dataKey];
 
+        let p = Promise.resolve();
+
         dataArray.forEach(data => {
             let updateData, traceIndices, maxPoints;
             if (Array.isArray(data) && typeof data[0] === 'object') {
@@ -237,11 +239,16 @@ class PlotlyGraph extends Component {
                 traceIndices = generateIndices(updateData);
             }
 
-            const gd = this.gd.current;
-            return Plotly[plotlyFnKey](gd, updateData, traceIndices, maxPoints);
+            p = p.then(() => {
+                const gd = this.gd.current;
+                return (
+                    gd &&
+                    Plotly[plotlyFnKey](gd, updateData, traceIndices, maxPoints)
+                );
+            });
         });
 
-        clearState(dataKey);
+        p.then(() => clearState(dataKey));
     }
 
     getConfig(config, responsive) {
@@ -393,16 +400,22 @@ class PlotlyGraph extends Component {
     }
 
     componentDidMount() {
-        this.plot(this.props);
+        let p = this.plot(this.props);
         if (this.props.prependData) {
-            this.mergeTraces(this.props, 'prependData', 'prependTraces');
+            p = p.then(() =>
+                this.mergeTraces(this.props, 'prependData', 'prependTraces')
+            );
         }
         if (this.props.extendData) {
-            this.mergeTraces(this.props, 'extendData', 'extendTraces');
+            p = p.then(() =>
+                this.mergeTraces(this.props, 'extendData', 'extendTraces')
+            );
         }
 
         if (this.props.prependData?.length || this.props.extendData?.length) {
-            this.props._dashprivate_onFigureModified(this.props.figure);
+            p.then(() =>
+                this.props._dashprivate_onFigureModified(this.props.figure)
+            );
         }
     }
 
@@ -435,6 +448,8 @@ class PlotlyGraph extends Component {
              */
             return;
         }
+
+        let p = Promise.resolve();
         if (
             this.props.mathjax !== nextProps.mathjax ||
             this.props.figure !== nextProps.figure ||
@@ -443,19 +458,25 @@ class PlotlyGraph extends Component {
             this.props._dashprivate_transformFigure !==
                 nextProps._dashprivate_transformFigure
         ) {
-            this.plot(nextProps);
+            p = this.plot(nextProps);
         }
 
         if (this.props.prependData !== nextProps.prependData) {
-            this.mergeTraces(nextProps, 'prependData', 'prependTraces');
+            p = p.then(() =>
+                this.mergeTraces(nextProps, 'prependData', 'prependTraces')
+            );
         }
 
         if (this.props.extendData !== nextProps.extendData) {
-            this.mergeTraces(nextProps, 'extendData', 'extendTraces');
+            p = p.then(() =>
+                this.mergeTraces(nextProps, 'extendData', 'extendTraces')
+            );
         }
 
         if (this.props.prependData?.length || this.props.extendData?.length) {
-            this.props._dashprivate_onFigureModified(this.props.figure);
+            p.then(() =>
+                this.props._dashprivate_onFigureModified(this.props.figure)
+            );
         }
     }