Merge branch 'splom-feature' into splom-zoom-perf

(to get tests to pass)

Author: etpinard

.circleci/config.yml

@@ -97,6 +97,25 @@ jobs:
       - store_artifacts:
           path: build
 
+  test-image2:
+    docker:
+      - image: plotly/testbed:latest
+    working_directory: /var/www/streambed/image_server/plotly.js/
+    steps:
+      - checkout
+      - attach_workspace:
+          at: /var/www/streambed/image_server/plotly.js/
+      - run:
+          name: Run and setup container
+          command: |
+            supervisord &
+            npm run docker -- setup
+      - run:
+          name: Run image tests
+          command: ./.circleci/test.sh image2
+      - store_artifacts:
+          path: build
+
   test-syntax:
     docker:
       - image: circleci/node:8.9.4
@@ -123,6 +142,9 @@ workflows:
       - test-image:
           requires:
             - build
+      - test-image2:
+          requires:
+            - build
       - test-syntax:
           requires:
             - build

.circleci/test.sh

@@ -41,6 +41,10 @@ case $1 in
 
     image)
         npm run test-image      || EXIT_STATE=$?
+        exit $EXIT_STATE
+        ;;
+
+    image2)
         npm run test-export     || EXIT_STATE=$?
         npm run test-image-gl2d || EXIT_STATE=$?
         exit $EXIT_STATE

package-lock.json

@@ -457,6 +457,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/plot_api/subroutines.js

@@ -106,19 +106,20 @@ function getFirstNonEmptyTrace(data, id, axLetter) {
     for(var i = 0; i < data.length; i++) {
         var trace = data[i];
 
+        if(trace.type === 'splom' &&
+                trace._commonLength > 0 &&
+                trace['_' + axLetter + 'axes'][id]
+        ) {
+            return trace;
+        }
+
         if((trace[axLetter + 'axis'] || axLetter) === id) {
             if(isBoxWithoutPositionCoords(trace, axLetter)) {
                 return trace;
             }
             else if((trace[axLetter] || []).length || trace[axLetter + '0']) {
                 return trace;
             }
-            else if(trace.type === 'splom' &&
-                    trace._commonLength > 0 &&
-                    trace[axLetter + 'axes'].indexOf(id) === 0
-            ) {
-                return trace;
-            }
         }
     }
 }

src/plots/cartesian/type_defaults.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

src/plots/plots.js

@@ -90,7 +90,7 @@ function convertStyle(gd, trace) {
 }
 
 function convertMarkerStyle(trace) {
-    var count = trace._length || (trace.dimensions || [])._length;
+    var count = trace._length || trace._commonLength;
     var optsIn = trace.marker;
     var optsOut = {};
     var i;

src/traces/scattergl/convert.js

@@ -91,7 +91,7 @@ module.exports = {
         // ...
         // more options
 
-        editType: 'plot'
+        editType: 'calc'
     },
 
     showupperhalf: {

src/traces/splom/attributes.js

@@ -63,14 +63,14 @@ function dragOne(gd, trace, scene) {
 
             var xa = AxisIDs.getFromId(gd, trace._diag[i][0]);
             if(xa) {
-                rng[0] = xa.range[0];
-                rng[2] = xa.range[1];
+                rng[0] = xa.r2l(xa.range[0]);
+                rng[2] = xa.r2l(xa.range[1]);
             }
 
             var ya = AxisIDs.getFromId(gd, trace._diag[i][1]);
             if(ya) {
-                rng[1] = ya.range[0];
-                rng[3] = ya.range[1];
+                rng[1] = ya.r2l(ya.range[0]);
+                rng[3] = ya.r2l(ya.range[1]);
             }
 
             k++;
@@ -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);

src/traces/splom/base_plot.js

@@ -21,7 +21,12 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     }
 
     var dimLength = handleDimensionsDefaults(traceIn, traceOut);
-    if(!dimLength) {
+
+    var showDiag = coerce('diagonal.visible');
+    var showUpper = coerce('showupperhalf');
+    var showLower = coerce('showlowerhalf');
+
+    if(!dimLength || (!showDiag && !showUpper && !showLower)) {
         traceOut.visible = false;
         return;
     }
@@ -34,13 +39,6 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     var isBubble = subTypes.isBubble(traceOut);
     coerce('marker.line.width', isOpen || isBubble ? 1 : 0);
 
-    // TODO if all 3 below are false,
-    // should we set `visible: false` and exit early?
-
-    coerce('diagonal.visible');
-    coerce('showupperhalf');
-    coerce('showlowerhalf');
-
     handleAxisDefaults(traceIn, traceOut, layout, coerce);
 
     Lib.coerceSelectionMarkerOpacity(traceOut, coerce);
@@ -107,6 +105,10 @@ function handleAxisDefaults(traceIn, traceOut, layout, coerce) {
     var xaxes = coerce('xaxes', fillAxisIdArray('x', axDfltLength));
     var yaxes = coerce('yaxes', fillAxisIdArray('y', axDfltLength));
 
+    // to avoid costly indexOf
+    traceOut._xaxes = arrayToHashObject(xaxes);
+    traceOut._yaxes = arrayToHashObject(yaxes);
+
     // allow users to under-specify number of axes
     var axLength = Math.min(axDfltLength, xaxes.length, yaxes.length);
 
@@ -170,3 +172,11 @@ function fillAxisStash(layout, axId, dim) {
         stash[axId] = (dim || {}).label || '';
     }
 }
+
+function arrayToHashObject(arr) {
+    var obj = {};
+    for(var i = 0; i < arr.length; i++) {
+        obj[arr[i]] = 1;
+    }
+    return obj;
+}