relayout: merge all array container update logic into 1 block

- by using manageArrayContainers
plotly · etpinard · Oct 26, 2016 · Oct 26, 2016 · Oct 26, 2016 · Oct 26, 2016
commit 2cafbeb17bc3d1f07e726cf1f60099e609ebc54a
diff --git a/src/plot_api/plot_api.js b/src/plot_api/plot_api.js
@@ -1816,8 +1816,7 @@ function _relayout(gd, aobj) {
             // trunk nodes (everything except the leaf)
             ptrunk = p.parts.slice(0, pend).join('.'),
             parentIn = Lib.nestedProperty(gd.layout, ptrunk).get(),
-            parentFull = Lib.nestedProperty(fullLayout, ptrunk).get(),
-            diff;
+            parentFull = Lib.nestedProperty(fullLayout, ptrunk).get();
 
         if(vi === undefined) continue;
 
@@ -1951,42 +1950,11 @@ function _relayout(gd, aobj) {
             drawOne(gd, objNum, p.parts.slice(2).join('.'), aobj[ai]);
             delete aobj[ai];
         }
-        else if(p.parts[0] === 'images') {
-            var update = Lib.objectFromPath(ai, vi);
-            Lib.extendDeepAll(gd.layout, update);
-
-            Registry.getComponentMethod('images', 'supplyLayoutDefaults')(gd.layout, gd._fullLayout);
-            Registry.getComponentMethod('images', 'draw')(gd);
-        }
-        else if(p.parts[0] === 'mapbox' && p.parts[1] === 'layers') {
-            Lib.extendDeepAll(gd.layout, Lib.objectFromPath(ai, vi));
-
-            // append empty container to mapbox.layers
-            // so that relinkPrivateKeys does not complain
-
-            var fullLayers = (gd._fullLayout.mapbox || {}).layers || [];
-            diff = (p.parts[2] + 1) - fullLayers.length;
-
-            for(i = 0; i < diff; i++) fullLayers.push({});
-
-            flags.doplot = true;
-        }
-        else if(p.parts[0] === 'updatemenus') {
-            Lib.extendDeepAll(gd.layout, Lib.objectFromPath(ai, vi));
-
-            var menus = gd._fullLayout.updatemenus || [];
-            diff = (p.parts[2] + 1) - menus.length;
-
-            for(i = 0; i < diff; i++) menus.push({});
-            flags.doplot = true;
-        }
-        else if(p.parts[0] === 'sliders') {
-            Lib.extendDeepAll(gd.layout, Lib.objectFromPath(ai, vi));
-
-            var sliders = gd._fullLayout.sliders || [];
-            diff = (p.parts[2] + 1) - sliders.length;
-
-            for(i = 0; i < diff; i++) sliders.push({});
+        else if(
+            Plots.layoutArrayContainers.indexOf(p.parts[0]) !== -1 ||
+            (p.parts[0] === 'mapbox' && p.parts[1] === 'layers')
+        ) {
+            helpers.manageArrayContainers(p, vi, undoit);
             flags.doplot = true;
         }
         // alter gd.layout

diff --git a/test/jasmine/tests/layout_images_test.js b/test/jasmine/tests/layout_images_test.js
@@ -329,18 +329,22 @@ describe('Layout images', function() {
                 return Plotly.relayout(gd, 'images[2]', makeImage(pythonLogo, 0.2, 0.5));
             }).then(function() {
                 assertImages(3);
+                expect(gd.layout.images.length).toEqual(3);
 
-                return Plotly.relayout(gd, 'images[2]', 'remove');
+                return Plotly.relayout(gd, 'images[2]', null);
             }).then(function() {
                 assertImages(2);
+                expect(gd.layout.images.length).toEqual(2);
 
-                return Plotly.relayout(gd, 'images[1]', 'remove');
+                return Plotly.relayout(gd, 'images[1]', null);
             }).then(function() {
                 assertImages(1);
+                expect(gd.layout.images.length).toEqual(1);
 
-                return Plotly.relayout(gd, 'images[0]', 'remove');
+                return Plotly.relayout(gd, 'images[0]', null);
             }).then(function() {
                 assertImages(0);
+                expect(gd.layout.images).toEqual([]);
 
                 done();
             });

diff --git a/test/jasmine/tests/lib_test.js b/test/jasmine/tests/lib_test.js
@@ -1561,23 +1561,27 @@ describe('Queue', function() {
 
         Plotly.plot(gd, [{
             y: [2, 1, 2]
-        }]).then(function() {
+        }])
+        .then(function() {
             expect(gd.undoQueue).toBeUndefined();
 
             return Plotly.restyle(gd, 'marker.color', 'red');
-        }).then(function() {
+        })
+        .then(function() {
             expect(gd.undoQueue.index).toEqual(1);
             expect(gd.undoQueue.queue[0].undo.args[0][1]['marker.color']).toEqual([undefined]);
             expect(gd.undoQueue.queue[0].redo.args[0][1]['marker.color']).toEqual('red');
 
             return Plotly.relayout(gd, 'title', 'A title');
-        }).then(function() {
+        })
+        .then(function() {
             expect(gd.undoQueue.index).toEqual(2);
             expect(gd.undoQueue.queue[1].undo.args[0][1].title).toEqual(undefined);
             expect(gd.undoQueue.queue[1].redo.args[0][1].title).toEqual('A title');
 
             return Plotly.restyle(gd, 'mode', 'markers');
-        }).then(function() {
+        })
+        .then(function() {
             expect(gd.undoQueue.index).toEqual(2);
             expect(gd.undoQueue.queue[2]).toBeUndefined();
 
@@ -1587,6 +1591,38 @@ describe('Queue', function() {
             expect(gd.undoQueue.queue[0].undo.args[0][1].title).toEqual(undefined);
             expect(gd.undoQueue.queue[0].redo.args[0][1].title).toEqual('A title');
 
+            return Plotly.restyle(gd, 'transforms[0]', { type: 'filter' });
+        })
+        .then(function() {
+            expect(gd.undoQueue.queue[1].undo.args[0][1])
+                .toEqual({ 'transforms[0]': null });
+            expect(gd.undoQueue.queue[1].redo.args[0][1])
+                .toEqual({ 'transforms[0]': { type: 'filter' } });
+
+            return Plotly.relayout(gd, 'updatemenus[0]', { buttons: [] });
+        })
+        .then(function() {
+            expect(gd.undoQueue.queue[1].undo.args[0][1])
+                .toEqual({ 'updatemenus[0]': null });
+            expect(gd.undoQueue.queue[1].redo.args[0][1])
+                .toEqual({ 'updatemenus[0]': { buttons: [] } });
+
+            return Plotly.relayout(gd, 'updatemenus[0]', null);
+        })
+        .then(function() {
+            expect(gd.undoQueue.queue[1].undo.args[0][1])
+                .toEqual({ 'updatemenus[0]': { buttons: []} });
+            expect(gd.undoQueue.queue[1].redo.args[0][1])
+                .toEqual({ 'updatemenus[0]': null });
+
+            return Plotly.restyle(gd, 'transforms[0]', null);
+        })
+        .then(function() {
+            expect(gd.undoQueue.queue[1].undo.args[0][1])
+                .toEqual({ 'transforms[0]': [ { type: 'filter' } ]});
+            expect(gd.undoQueue.queue[1].redo.args[0][1])
+                .toEqual({ 'transforms[0]': null });
+
             done();
         });
     });

diff --git a/test/jasmine/tests/mapbox_test.js b/test/jasmine/tests/mapbox_test.js
@@ -548,56 +548,77 @@ describe('mapbox plots', function() {
         expect(countVisibleLayers(gd)).toEqual(0);
 
         Plotly.relayout(gd, 'mapbox.layers[0]', layer0).then(function() {
+            expect(gd.layout.mapbox.layers.length).toEqual(1);
             expect(countVisibleLayers(gd)).toEqual(1);
 
             return Plotly.relayout(gd, 'mapbox.layers[1]', layer1);
-        }).then(function() {
+        })
+        .then(function() {
+            expect(gd.layout.mapbox.layers.length).toEqual(2);
             expect(countVisibleLayers(gd)).toEqual(2);
 
             return Plotly.relayout(gd, mapUpdate);
-        }).then(function() {
+        })
+        .then(function() {
+            expect(gd.layout.mapbox.layers.length).toEqual(2);
             expect(countVisibleLayers(gd)).toEqual(2);
 
             return Plotly.relayout(gd, styleUpdate0);
-        }).then(function() {
+        })
+        .then(function() {
+            expect(gd.layout.mapbox.layers.length).toEqual(2);
             expect(countVisibleLayers(gd)).toEqual(2);
 
             return assertLayerStyle(gd, {
                 'fill-color': [1, 0, 0, 1],
                 'fill-outline-color': [0, 0, 1, 1],
                 'fill-opacity': 0.3
             }, 0);
-        }).then(function() {
+        })
+        .then(function() {
+            expect(gd.layout.mapbox.layers.length).toEqual(2);
             expect(countVisibleLayers(gd)).toEqual(2);
 
             return Plotly.relayout(gd, styleUpdate1);
-        }).then(function() {
+        })
+        .then(function() {
+            expect(gd.layout.mapbox.layers.length).toEqual(2);
             expect(countVisibleLayers(gd)).toEqual(2);
 
             return assertLayerStyle(gd, {
                 'line-width': 3,
                 'line-color': [0, 0, 1, 1],
                 'line-opacity': 0.6
             }, 1);
-        }).then(function() {
+        })
+        .then(function() {
+            expect(gd.layout.mapbox.layers.length).toEqual(2);
             expect(countVisibleLayers(gd)).toEqual(2);
 
-            return Plotly.relayout(gd, 'mapbox.layers[1]', 'remove');
-        }).then(function() {
+            return Plotly.relayout(gd, 'mapbox.layers[1]', null);
+        })
+        .then(function() {
+            expect(gd.layout.mapbox.layers.length).toEqual(1);
             expect(countVisibleLayers(gd)).toEqual(1);
 
-            return Plotly.relayout(gd, 'mapbox.layers[0]', 'remove');
-        }).then(function() {
+            return Plotly.relayout(gd, 'mapbox.layers[0]', null);
+        })
+        .then(function() {
+            expect(gd.layout.mapbox.layers.length).toEqual(0);
             expect(countVisibleLayers(gd)).toEqual(0);
 
             return Plotly.relayout(gd, 'mapbox.layers[0]', {});
-        }).then(function() {
+        })
+        .then(function() {
+            expect(gd.layout.mapbox.layers).toEqual([]);
             expect(countVisibleLayers(gd)).toEqual(0);
 
             // layer with no source are not drawn
 
             return Plotly.relayout(gd, 'mapbox.layers[0].source', layer0.source);
-        }).then(function() {
+        })
+        .then(function() {
+            expect(gd.layout.mapbox.layers.length).toEqual(1);
             expect(countVisibleLayers(gd)).toEqual(1);
 
             done();

diff --git a/test/jasmine/tests/sliders_test.js b/test/jasmine/tests/sliders_test.js
@@ -211,13 +211,15 @@ describe('update sliders interactions', function() {
             assertNodeCount('.' + constants.groupClassName, 1);
             expect(gd._fullLayout._pushmargin['slider-0']).toBeUndefined();
             expect(gd._fullLayout._pushmargin['slider-1']).toBeDefined();
+            expect(gd.layout.sliders.length).toEqual(2);
 
             return Plotly.relayout(gd, 'sliders[1]', null);
         })
         .then(function() {
             assertNodeCount('.' + constants.groupClassName, 0);
             expect(gd._fullLayout._pushmargin['slider-0']).toBeUndefined();
             expect(gd._fullLayout._pushmargin['slider-1']).toBeUndefined();
+            expect(gd.layout.sliders.length).toEqual(1);
 
             return Plotly.relayout(gd, {
                 'sliders[0].visible': true,

diff --git a/test/jasmine/tests/updatemenus_test.js b/test/jasmine/tests/updatemenus_test.js
@@ -260,7 +260,8 @@ describe('update menus interactions', function() {
             expect(gd._fullLayout._pushmargin['updatemenu-1']).toBeDefined();
 
             return Plotly.relayout(gd, 'updatemenus[1]', null);
-        }).then(function() {
+        })
+        .then(function() {
             assertNodeCount('.' + constants.containerClassName, 0);
             expect(gd._fullLayout._pushmargin['updatemenu-0']).toBeUndefined();
             expect(gd._fullLayout._pushmargin['updatemenu-1']).toBeUndefined();
@@ -269,7 +270,8 @@ describe('update menus interactions', function() {
                 'updatemenus[0].visible': true,
                 'updatemenus[1].visible': true
             });
-        }).then(function() {
+        })
+        .then(function() {
             assertMenus([0, 0]);
             expect(gd._fullLayout._pushmargin['updatemenu-0']).toBeDefined();
             expect(gd._fullLayout._pushmargin['updatemenu-1']).toBeDefined();
@@ -278,7 +280,8 @@ describe('update menus interactions', function() {
                 'updatemenus[0].visible': false,
                 'updatemenus[1].visible': false
             });
-        }).then(function() {
+        })
+        .then(function() {
             assertNodeCount('.' + constants.containerClassName, 0);
             expect(gd._fullLayout._pushmargin['updatemenu-0']).toBeUndefined();
             expect(gd._fullLayout._pushmargin['updatemenu-1']).toBeUndefined();
@@ -291,21 +294,35 @@ describe('update menus interactions', function() {
                     }]
                 }
             });
-        }).then(function() {
+        })
+        .then(function() {
             assertMenus([0]);
             expect(gd._fullLayout._pushmargin['updatemenu-0']).toBeUndefined();
             expect(gd._fullLayout._pushmargin['updatemenu-1']).toBeUndefined();
             expect(gd._fullLayout._pushmargin['updatemenu-2']).toBeDefined();
 
             return Plotly.relayout(gd, 'updatemenus[0].visible', true);
-        }).then(function() {
+        })
+        .then(function() {
             assertMenus([0, 0]);
             expect(gd._fullLayout._pushmargin['updatemenu-0']).toBeDefined();
             expect(gd._fullLayout._pushmargin['updatemenu-1']).toBeUndefined();
             expect(gd._fullLayout._pushmargin['updatemenu-2']).toBeDefined();
+            expect(gd.layout.updatemenus.length).toEqual(3);
 
-            done();
-        });
+            return Plotly.relayout(gd, 'updatemenus[0]', null);
+        })
+        .then(function() {
+            assertMenus([0]);
+            expect(gd.layout.updatemenus.length).toEqual(2);
+
+            return Plotly.relayout(gd, 'updatemenus', null);
+        })
+        .then(function() {
+            expect(gd.layout.updatemenus).toBeUndefined();
+
+        })
+        .then(done);
     });
 
     it('should drop/fold buttons when clicking on header', function(done) {