fix and 🔒 regl-line2d grid data

Author: etpinard

src/plot_api/subroutines.js

@@ -451,6 +451,11 @@ exports.doLegend = function(gd) {
 
 exports.doTicksRelayout = function(gd) {
     Axes.doTicks(gd, 'redraw');
+
+    if(gd._fullLayout._hasOnlyLargeSploms) {
+        Registry.subplotsRegistry.splom.plot(gd);
+    }
+
     exports.drawMainTitle(gd);
     return Plots.previousPromises(gd);
 };

src/traces/splom/base_plot.js

@@ -94,17 +94,16 @@ function drawGrid(gd) {
     if(!splomGrid) {
         splomGrid = fullLayout._splomGrid = createLine(regl);
     }
-    splomGrid.update(makeGridData(gd));
+
+    splomGrid._data = makeGridData(gd);
+    splomGrid.update(splomGrid._data);
     splomGrid.draw();
 }
 
-// this clocks in at ~30ms at 50x50 - we could perf this up!
 function makeGridData(gd) {
     var fullLayout = gd._fullLayout;
     var gs = fullLayout._size;
     var fullView = [0, 0, fullLayout.width, fullLayout.height];
-    var splomXa = Object.keys(fullLayout._splomAxes.x);
-    var splomYa = Object.keys(fullLayout._splomAxes.y);
     var lookup = {};
     var k;
 
@@ -128,45 +127,39 @@ function makeGridData(gd) {
         }
     }
 
-    for(var i = 0; i < splomXa.length; i++) {
-        var xa = AxisIDs.getFromId(gd, splomXa[i]);
+    for(k in fullLayout._splomSubplots) {
+        var sp = fullLayout._plots[k];
+        var xa = sp.xaxis;
+        var ya = sp.yaxis;
         var xVals = xa._vals;
-        var xShowZl = showZeroLine(xa);
-
-        for(var j = 0; j < splomYa.length; j++) {
-            var ya = AxisIDs.getFromId(gd, splomYa[j]);
-            var yVals = ya._vals;
-            var yShowZl = showZeroLine(ya);
-
-            // ya.l2p assumes top-to-bottom coordinate system (a la SVG),
-            // we need to compute bottom-to-top offsets and slopes:
-            var yOffset = gs.b + ya.domain[0] * gs.h;
-            var ym = -ya._m;
-            var yb = -ym * ya.r2l(ya.range[0], ya.calendar);
-
-            var x, y;
-
-            if(xa.showgrid) {
-                for(k = 0; k < xVals.length; k++) {
-                    x = xa._offset + xa.l2p(xVals[k].x);
-                    push('grid', xa, x, yOffset, x, yOffset + ya._length);
-                }
-            }
-            if(xShowZl) {
-                x = xa._offset + xa.l2p(0);
-                push('zeroline', xa, x, yOffset, x, yOffset + ya._length);
-            }
-            if(ya.showgrid) {
-                for(k = 0; k < yVals.length; k++) {
-                    y = yOffset + yb + ym * yVals[k].x;
-                    push('grid', ya, xa._offset, y, xa._offset + xa._length, y);
-                }
+        var yVals = ya._vals;
+        // ya.l2p assumes top-to-bottom coordinate system (a la SVG),
+        // we need to compute bottom-to-top offsets and slopes:
+        var yOffset = gs.b + ya.domain[0] * gs.h;
+        var ym = -ya._m;
+        var yb = -ym * ya.r2l(ya.range[0], ya.calendar);
+        var x, y;
+
+        if(xa.showgrid) {
+            for(k = 0; k < xVals.length; k++) {
+                x = xa._offset + xa.l2p(xVals[k].x);
+                push('grid', xa, x, yOffset, x, yOffset + ya._length);
             }
-            if(yShowZl) {
-                y = yOffset + yb + 0;
-                push('zeroline', ya, xa._offset, y, xa._offset + xa._length, y);
+        }
+        if(showZeroLine(xa)) {
+            x = xa._offset + xa.l2p(0);
+            push('zeroline', xa, x, yOffset, x, yOffset + ya._length);
+        }
+        if(ya.showgrid) {
+            for(k = 0; k < yVals.length; k++) {
+                y = yOffset + yb + ym * yVals[k].x;
+                push('grid', ya, xa._offset, y, xa._offset + xa._length, y);
             }
         }
+        if(showZeroLine(ya)) {
+            y = yOffset + yb + 0;
+            push('zeroline', ya, xa._offset, y, xa._offset + xa._length, y);
+        }
     }
 
     var gridBatches = [];
@@ -178,7 +171,6 @@ function makeGridData(gd) {
 }
 
 // just like in Axes.doTicks but without the loop over traces
-// TODO dry this up
 function showZeroLine(ax) {
     var rng = Lib.simpleMap(ax.range, ax.r2l);
     var p0 = ax.l2p(0);

test/jasmine/tests/splom_test.js

@@ -335,7 +335,9 @@ describe('@gl Test splom interactions:', function() {
     });
 
     it('should destroy gl objects on Plots.cleanPlot', function(done) {
-        Plotly.plot(gd, Lib.extendDeep({}, require('@mocks/splom_large.json'))).then(function() {
+        var fig = Lib.extendDeep({}, require('@mocks/splom_large.json'));
+
+        Plotly.plot(gd, fig).then(function() {
             expect(gd._fullLayout._splomGrid).toBeDefined();
             expect(gd.calcdata[0][0].t._scene).toBeDefined();
 
@@ -349,4 +351,57 @@ describe('@gl Test splom interactions:', function() {
         .then(done);
     });
 
+    it('when hasOnlyLargeSploms, should create correct regl-line2d data for grid', function(done) {
+        var fig = Lib.extendDeep({}, require('@mocks/splom_large.json'));
+        var cnt = 1;
+
+        function _assert(dims) {
+            var gridData = gd._fullLayout._splomGrid._data;
+            var gridLengths = gridData.map(function(d) { return d.data.length; });
+            var msg = ' - call #' + cnt;
+
+            expect(Object.keys(gridData).length)
+                .toBe(dims.length, '# of batches' + msg);
+            gridLengths.forEach(function(l, i) {
+                expect(l).toBe(dims[i], '# of coords in batch ' + i + msg);
+            });
+            cnt++;
+        }
+
+        Plotly.plot(gd, fig).then(function() {
+            _assert([1198, 3478, 16318, 118]);
+            return Plotly.restyle(gd, 'showupperhalf', false);
+        })
+        .then(function() {
+            _assert([1198, 1882, 8452, 4]);
+            return Plotly.restyle(gd, 'diagonal.visible', false);
+        })
+        .then(function() {
+            _assert([1138, 1702, 7636, 4]);
+            return Plotly.restyle(gd, {
+                showupperhalf: true,
+                showlowerhalf: false
+            });
+        })
+        .then(function() {
+            _assert([64, 1594, 7852, 112]);
+            return Plotly.restyle(gd, 'diagonal.visible', true);
+        })
+        .then(function() {
+            _assert([58, 1768, 8680, 118]);
+            return Plotly.relayout(gd, {
+                'xaxis.gridcolor': null,
+                'xaxis.gridwidth': null,
+                'yaxis.zerolinecolor': null,
+                'yaxis.zerolinewidth': null
+            });
+        })
+        .then(function() {
+            // one batch for all 'grid' lines
+            // and another for all 'zeroline' lines
+            _assert([8740, 1888]);
+        })
+        .catch(failTest)
+        .then(done);
+    });
 });