Merge pull request #3825 from plotly/modebar-after-update-fix

Plotly.update replot fixes

Author: etpinard

src/plot_api/plot_api.js

@@ -2362,20 +2362,12 @@ function update(gd, traceUpdate, layoutUpdate, _traces) {
     // fill in redraw sequence
     var seq = [];
 
-    if(restyleFlags.fullReplot && relayoutFlags.layoutReplot) {
-        var data = gd.data;
-        var layout = gd.layout;
-
-        // clear existing data/layout on gd
-        // so that Plotly.plot doesn't try to extend them
-        gd.data = undefined;
-        gd.layout = undefined;
-
-        seq.push(function() { return exports.plot(gd, data, layout); });
+    if(relayoutFlags.layoutReplot) {
+        // N.B. works fine when both
+        // relayoutFlags.layoutReplot and restyleFlags.fullReplot are true
+        seq.push(subroutines.layoutReplot);
     } else if(restyleFlags.fullReplot) {
         seq.push(exports.plot);
-    } else if(relayoutFlags.layoutReplot) {
-        seq.push(subroutines.layoutReplot);
     } else {
         seq.push(Plots.previousPromises);
         axRangeSupplyDefaultsByPass(gd, relayoutFlags, relayoutSpecs) || Plots.supplyDefaults(gd);

test/jasmine/tests/plot_api_test.js

@@ -9,6 +9,7 @@ var Legend = require('@src/components/legend');
 var Axes = require('@src/plots/cartesian/axes');
 var pkg = require('../../../package.json');
 var subroutines = require('@src/plot_api/subroutines');
+var manageArrays = require('@src/plot_api/manage_arrays');
 var helpers = require('@src/plot_api/helpers');
 var editTypes = require('@src/plot_api/edit_types');
 
@@ -2649,16 +2650,29 @@ describe('Test plot api', function() {
         it('should only have one modebar-container', function(done) {
             var data = [{y: [1, 2]}];
 
-            Plotly.plot(gd, data).then(function() {
-                var modebars = document.getElementsByClassName('modebar-container');
-                expect(modebars.length).toBe(1);
+            function _assert(msg) {
+                return function() {
+                    var modebars = document.getElementsByClassName('modebar-container');
+                    expect(modebars.length).toBe(1, msg + ' # of modebar container');
+                    var groups = document.getElementsByClassName('modebar-group');
+                    expect(groups.length).toBe(5, msg + ' # of modebar button groups');
+                };
+            }
 
-                return Plotly.newPlot(gd, data);
-            })
-            .then(function() {
-                var modebars = document.getElementsByClassName('modebar-container');
-                expect(modebars.length).toBe(1);
+            Plotly.plot(gd, data)
+            .then(_assert('base'))
+            .then(function() { return Plotly.newPlot(gd, data); })
+            .then(_assert('after newPlot()'))
+            .then(function() {
+                // funky combinations of update flags found in
+                // https://github.com/plotly/plotly.js/issues/3824
+                return Plotly.update(gd, {
+                    visible: false
+                }, {
+                    annotations: [{text: 'a'}]
+                });
             })
+            .then(_assert('after update()'))
             .catch(failTest)
             .then(done);
         });
@@ -2674,6 +2688,10 @@ describe('Test plot api', function() {
         });
 
         beforeEach(function(done) {
+            Object.keys(subroutines).forEach(function(k) {
+                subroutines[k].calls.reset();
+            });
+
             gd = createGraphDiv();
             Plotly.plot(gd, [{ y: [2, 1, 2] }]).then(function() {
                 data = gd.data;
@@ -2687,8 +2705,6 @@ describe('Test plot api', function() {
         afterEach(destroyGraphDiv);
 
         it('call doTraceStyle on trace style updates', function(done) {
-            expect(subroutines.doTraceStyle).not.toHaveBeenCalled();
-
             Plotly.update(gd, { 'marker.color': 'blue' }).then(function() {
                 expect(subroutines.doTraceStyle).toHaveBeenCalledTimes(1);
                 expect(calcdata).toBe(gd.calcdata);
@@ -2720,16 +2736,14 @@ describe('Test plot api', function() {
                 expect(data).toBe(gd.data);
                 expect(layout).toBe(gd.layout);
                 expect(calcdata).not.toBe(gd.calcdata);
-
                 expect(gd.data.length).toEqual(1);
+                expect(subroutines.layoutReplot).toHaveBeenCalledTimes(1);
             })
             .catch(failTest)
             .then(done);
         });
 
         it('call doLegend on legend updates', function(done) {
-            expect(subroutines.doLegend).not.toHaveBeenCalled();
-
             Plotly.update(gd, {}, { 'showlegend': true }).then(function() {
                 expect(subroutines.doLegend).toHaveBeenCalledTimes(1);
                 expect(calcdata).toBe(gd.calcdata);
@@ -2738,8 +2752,8 @@ describe('Test plot api', function() {
             .then(done);
         });
 
-        it('call layoutReplot when adding update menu', function(done) {
-            expect(subroutines.layoutReplot).not.toHaveBeenCalled();
+        it('call array manager when adding update menu', function(done) {
+            spyOn(manageArrays, 'applyContainerArrayChanges').and.callThrough();
 
             var layoutUpdate = {
                 updatemenus: [{
@@ -2751,16 +2765,15 @@ describe('Test plot api', function() {
             };
 
             Plotly.update(gd, {}, layoutUpdate).then(function() {
-                expect(subroutines.doLegend).toHaveBeenCalledTimes(1);
+                expect(manageArrays.applyContainerArrayChanges).toHaveBeenCalledTimes(1);
+                expect(subroutines.layoutReplot).toHaveBeenCalledTimes(0);
                 expect(calcdata).toBe(gd.calcdata);
             })
             .catch(failTest)
             .then(done);
         });
 
         it('call doModeBar when updating \'dragmode\'', function(done) {
-            expect(subroutines.doModeBar).not.toHaveBeenCalled();
-
             Plotly.update(gd, {}, { 'dragmode': 'pan' }).then(function() {
                 expect(subroutines.doModeBar).toHaveBeenCalledTimes(1);
                 expect(calcdata).toBe(gd.calcdata);