fix and 🔒 in-and-out of hasOnlyLargeSploms regime

Author: etpinard

src/plots/plots.js

@@ -414,16 +414,14 @@ plots.supplyDefaults = function(gd) {
 
     // turn on flag to optimize large splom-only graphs
     // mostly by omitting SVG layers during Cartesian.drawFramework
-    if(
+    newFullLayout._hasOnlyLargeSploms = (
         newFullLayout._basePlotModules.length === 1 &&
         newFullLayout._basePlotModules[0].name === 'splom' &&
         splomXa.length > 15 &&
         splomYa.length > 15 &&
         newFullLayout.shapes.length === 0 &&
         newFullLayout.images.length === 0
-    ) {
-        newFullLayout._hasOnlyLargeSploms = 1;
-    }
+    );
 
     // TODO remove in v2.0.0
     // add has-plot-type refs to fullLayout for backward compatibility

test/jasmine/tests/splom_test.js

@@ -1,8 +1,10 @@
+var Plotly = require('@lib');
 var Lib = require('@src/lib');
-var supplyAllDefaults = require('../assets/supply_defaults');
 var Plots = require('@src/plots/plots');
+var SUBPLOT_PATTERN = require('@src/plots/cartesian/constants').SUBPLOT_PATTERN;
 
-var Plotly = require('@lib');
+var d3 = require('d3');
+var supplyAllDefaults = require('../assets/supply_defaults');
 var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
 var failTest = require('../assets/fail_test');
@@ -404,4 +406,87 @@ describe('@gl Test splom interactions:', function() {
         .catch(failTest)
         .then(done);
     });
+
+    it('should update properly in-and-out of hasOnlyLargeSploms regime', function(done) {
+        var figLarge = Lib.extendDeep({}, require('@mocks/splom_large.json'));
+        var dimsLarge = figLarge.data[0].dimensions;
+        var dimsSmall = dimsLarge.slice(0, 5);
+        var cnt = 1;
+
+        function _assert(exp) {
+            var msg = ' - call #' + cnt;
+            var subplots = d3.selectAll('g.cartesianlayer > g.subplot');
+
+            expect(subplots.size())
+                .toBe(exp.subplotCnt, '# of <g.subplot>' + msg);
+
+            var failedSubplots = [];
+            subplots.each(function(d, i) {
+                var actual = this.children.length;
+                var expected = typeof exp.innerSubplotNodeCnt === 'function' ?
+                    exp.innerSubplotNodeCnt(d, i) :
+                    exp.innerSubplotNodeCnt;
+                if(actual !== expected) {
+                    failedSubplots.push([d, actual, 'vs', expected].join(' '));
+                }
+            });
+            expect(failedSubplots)
+                .toEqual([], '# of nodes inside <g.subplot>' + msg);
+
+            expect(!!gd._fullLayout._splomGrid)
+                .toBe(exp.hasSplomGrid, 'has regl-line2d splom grid' + msg);
+
+            cnt++;
+        }
+
+        Plotly.plot(gd, figLarge).then(function() {
+            _assert({
+                subplotCnt: 400,
+                innerSubplotNodeCnt: 5,
+                hasSplomGrid: true
+            });
+            return Plotly.restyle(gd, 'dimensions', [dimsSmall]);
+        })
+        .then(function() {
+            _assert({
+                subplotCnt: 25,
+                innerSubplotNodeCnt: 17,
+                hasSplomGrid: false
+            });
+
+            // make sure 'new' subplot layers are in order
+            var gridIndex = -1;
+            var xaxisIndex = -1;
+            var subplot0 = d3.select('g.cartesianlayer > g.subplot').node();
+            for(var i in subplot0.children) {
+                var cl = subplot0.children[i].classList;
+                if(cl) {
+                    if(cl.contains('gridlayer')) gridIndex = +i;
+                    else if(cl.contains('xaxislayer-above')) xaxisIndex = +i;
+                }
+            }
+            // from large -> small splom:
+            // grid layer would be above xaxis layer,
+            // if we didn't clear subplot children.
+            expect(gridIndex).toBe(1, '<g.gridlayer> index');
+            expect(xaxisIndex).toBe(14, '<g.xaxislayer-above> index');
+
+            return Plotly.restyle(gd, 'dimensions', [dimsLarge]);
+        })
+        .then(function() {
+            _assert({
+                subplotCnt: 400,
+                // from small -> large splom:
+                // no need to clear subplots children in existing subplots,
+                // new subplots though have reduced number of children.
+                innerSubplotNodeCnt: function(d) {
+                    var p = d.match(SUBPLOT_PATTERN);
+                    return (p[1] > 5 || p[2] > 5) ? 5 : 17;
+                },
+                hasSplomGrid: true
+            });
+        })
+        .catch(failTest)
+        .then(done);
+    });
 });