fix: apply data and layout changes made while the plot is initializing

Author: RaphaelFakhri

projects/plotly/src/lib/plotly.component.spec.ts

@@ -229,6 +229,27 @@ describe('PlotlyComponent', () => {
         expect(component.plotlyInstance).toBeUndefined();
     });
 
+    it('should apply data changes made while the plot is initializing', async () => {
+        const instance = document.createElement('div') as any;
+        instance.on = () => undefined;
+        let resolvePlot!: (value: any) => void;
+        spyOn(component.plotly, 'newPlot').and.returnValue(new Promise(resolve => resolvePlot = resolve));
+        spyOn(component, 'updatePlot');
+
+        componentRef.setInput('data', [{ y: [10, 15, 13, 17], type: 'box' }]);
+        component.ngDoCheck();
+        const pendingPlot = component.createPlot();
+
+        componentRef.setInput('data', [{ y: [11, 15, 13, 17], type: 'box' }]);
+        component.ngDoCheck();
+        expect(component.updatePlot).not.toHaveBeenCalled();
+
+        resolvePlot(instance);
+        await pendingPlot;
+
+        expect(component.updatePlot).toHaveBeenCalledTimes(1);
+    });
+
     it('should fail when plotlyInstance is undefined', () => {
         component.plotlyInstance = undefined;
 

projects/plotly/src/lib/plotly.component.ts

@@ -42,6 +42,7 @@ export class PlotlyComponent implements OnInit, OnChanges, OnDestroy, DoCheck {
     public layoutDiffer?: KeyValueDiffer<string, any>;
     public dataDiffer?: IterableDiffer<Plotly.Data>;
     private destroyed = false;
+    private pendingUpdate = false;
 
     @ViewChild('plot', { static: true }) plotEl!: ElementRef;
 
@@ -208,8 +209,12 @@ export class PlotlyComponent implements OnInit, OnChanges, OnDestroy, DoCheck {
             }
         }
 
-        if (shouldUpdate && this.plotlyInstance) {
-            this.updatePlot();
+        if (shouldUpdate) {
+            if (this.plotlyInstance) {
+                this.updatePlot();
+            } else {
+                this.pendingUpdate = true;
+            }
         }
     }
 
@@ -263,6 +268,11 @@ export class PlotlyComponent implements OnInit, OnChanges, OnDestroy, DoCheck {
             });
 
             this.updateWindowResizeHandler();
+
+            if (this.pendingUpdate) {
+                this.pendingUpdate = false;
+                void this.updatePlot();
+            }
         }).catch(err => {
             console.error('Error while plotting:', err);
             this.error.emit(err);