Merge pull request #2295 from plotly/scattergl-selection-fix

Speed up selection

Author: dy

package.json

@@ -99,7 +99,7 @@
     "regl": "^1.3.1",
     "regl-error2d": "^2.0.3",
     "regl-line2d": "^2.1.2",
-    "regl-scatter2d": "^2.1.11",
+    "regl-scatter2d": "^2.1.12",
     "right-now": "^1.0.0",
     "robust-orientation": "^1.1.3",
     "sane-topojson": "^2.0.0",

src/traces/scattergl/index.js

@@ -387,12 +387,30 @@ function sceneOptions(container, subplot, trace, positions) {
 
     if(hasMarkers) {
         markerOptions = makeMarkerOptions(markerOpts);
-        selectedOptions = trace.selected ? makeMarkerOptions(extend({}, markerOpts, trace.selected.marker)) : markerOptions;
-        unselectedOptions = trace.unselected ? makeMarkerOptions(extend({}, markerOpts, trace.unselected.marker)) : markerOptions;
+        selectedOptions = makeSelectedOptions(trace.selected, markerOpts);
+        unselectedOptions = makeSelectedOptions(trace.unselected, markerOpts);
 
         markerOptions.positions = positions;
     }
 
+    function makeSelectedOptions(selected, markerOpts) {
+        var options = {};
+
+        if(selected.marker.symbol) {
+            options = makeMarkerOptions(extend({}, markerOpts, selected.marker));
+        }
+
+        // shortcut simple selection logic
+        else {
+            options = {};
+            if(selected.marker.size) options.sizes = selected.marker.size;
+            if(selected.marker.color) options.colors = selected.marker.color;
+            if(selected.marker.opacity !== undefined) options.opacity = selected.marker.opacity;
+        }
+
+        return options;
+    }
+
     function makeMarkerOptions(markerOpts) {
         var markerOptions = {}, i;
 
@@ -911,7 +929,7 @@ function plot(container, subplot, cdata) {
             if(!scene.select2d && scene.scatter2d) {
                 var selectRegl = layout._glcanvas.data()[1].regl;
 
-                // smol hack to create scatter instance by cloning scatter2d
+                // create scatter instance by cloning scatter2d
                 scene.select2d = createScatter(selectRegl, {clone: scene.scatter2d});
                 scene.select2d.update(scene.selectedOptions);
 

test/jasmine/tests/gl2d_plot_interact_test.js

@@ -378,7 +378,7 @@ describe('Test gl2d plots', function() {
         .then(done);
     });
 
-    it('@noCI should display selection of big number of points', function(done) {
+    it('@noCI should display selection of big number of regular points', function(done) {
         // generate large number of points
         var x = [], y = [], n = 2e2, N = n * n;
         for(var i = 0; i < N; i++) {
@@ -406,6 +406,46 @@ describe('Test gl2d plots', function() {
         .then(done);
     });
 
+
+    it('@noCI should display selection of big number of miscellaneous points', function(done) {
+        var colorList = [
+            '#006385', '#F06E75', '#90ed7d', '#f7a35c', '#8085e9',
+            '#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1',
+            '#5DA5DA', '#F06E75', '#F15854', '#B2912F', '#B276B2',
+            '#DECF3F', '#FAA43A', '#4D4D4D', '#F17CB0', '#60BD68'
+        ];
+
+        // generate large number of points
+        var x = [], y = [], n = 2e2, N = n * n, color = [], symbol = [], size = [];
+        for(var i = 0; i < N; i++) {
+            x.push((i % n) / n);
+            y.push(i / N);
+            color.push(colorList[i % colorList.length]);
+            symbol.push('x');
+            size.push(6);
+        }
+
+        var mock = {
+            data: [{
+                x: x, y: y, type: 'scattergl', mode: 'markers',
+                marker: {symbol: symbol, size: size, color: color}
+            }],
+            layout: {
+                dragmode: 'select'
+            }
+        };
+
+        Plotly.plot(gd, mock)
+        .then(select([[160, 100], [180, 100]]))
+        .then(function() {
+            expect(readPixel(gd.querySelector('.gl-canvas-context'), 168, 100)[3]).toBe(0);
+            expect(readPixel(gd.querySelector('.gl-canvas-context'), 158, 100)[3]).not.toBe(0);
+            expect(readPixel(gd.querySelector('.gl-canvas-focus'), 168, 100)[3]).not.toBe(0);
+        })
+        .catch(fail)
+        .then(done);
+    });
+
     it('should be able to toggle from svg to gl', function(done) {
         Plotly.plot(gd, [{
             y: [1, 2, 1],