From 6a723fca8086b39181f1c371ddc435eb1f89298c Mon Sep 17 00:00:00 2001 From: Dmitry Date: Thu, 25 Jan 2018 13:26:35 -0500 Subject: [PATCH 1/4] Speed up selection --- package.json | 2 +- src/traces/scattergl/index.js | 26 +++++++++++++++++++++++--- 2 files changed, 24 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index d958e854e0a..4c9ff14a004 100644 --- a/package.json +++ b/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", diff --git a/src/traces/scattergl/index.js b/src/traces/scattergl/index.js index 3ee553e6992..5691aae4ca4 100644 --- a/src/traces/scattergl/index.js +++ b/src/traces/scattergl/index.js @@ -387,8 +387,28 @@ 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; + + if(trace.selected.marker.symbol) { + selectedOptions = makeMarkerOptions(extend({}, markerOpts, trace.selected.marker)); + } + // shortcut simple selection logic + else { + selectedOptions = {}; + if(trace.selected.marker.size) selectedOptions.sizes = trace.selected.marker.size; + if (trace.selected.marker.color) selectedOptions.colors = trace.selected.marker.color; + if(trace.selected.marker.opacity !== undefined) selectedOptions.opacity = trace.selected.marker.opacity; + } + + if(trace.unselected.marker.symbol) { + unselectedOptions = makeMarkerOptions(extend({}, markerOpts, trace.unselected.marker)); + } + // shortcut simple selection logic + else { + unselectedOptions = {}; + if(trace.unselected.marker.size) unselectedOptions.sizes = trace.unselected.marker.size; + if(trace.unselected.marker.color) unselectedOptions.colors = trace.unselected.marker.color; + if(trace.unselected.marker.opacity !== undefined) unselectedOptions.opacity = trace.unselected.marker.opacity; + } markerOptions.positions = positions; } @@ -911,7 +931,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); From 7ec83a0aac06cf3b002b7164b565a695a5a4579d Mon Sep 17 00:00:00 2001 From: Dmitry Date: Thu, 25 Jan 2018 14:26:07 -0500 Subject: [PATCH 2/4] Lintify --- src/traces/scattergl/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/traces/scattergl/index.js b/src/traces/scattergl/index.js index 5691aae4ca4..cbe7e348d25 100644 --- a/src/traces/scattergl/index.js +++ b/src/traces/scattergl/index.js @@ -395,7 +395,7 @@ function sceneOptions(container, subplot, trace, positions) { else { selectedOptions = {}; if(trace.selected.marker.size) selectedOptions.sizes = trace.selected.marker.size; - if (trace.selected.marker.color) selectedOptions.colors = trace.selected.marker.color; + if(trace.selected.marker.color) selectedOptions.colors = trace.selected.marker.color; if(trace.selected.marker.opacity !== undefined) selectedOptions.opacity = trace.selected.marker.opacity; } From 7eeacb173f59ae47af16c6e6451c69d32195912c Mon Sep 17 00:00:00 2001 From: Dmitry Date: Thu, 25 Jan 2018 15:20:48 -0500 Subject: [PATCH 3/4] Add selection test --- test/jasmine/tests/gl2d_plot_interact_test.js | 42 ++++++++++++++++++- 1 file changed, 41 insertions(+), 1 deletion(-) diff --git a/test/jasmine/tests/gl2d_plot_interact_test.js b/test/jasmine/tests/gl2d_plot_interact_test.js index 625250504ca..b2acdce3c53 100644 --- a/test/jasmine/tests/gl2d_plot_interact_test.js +++ b/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], From 9607382c4c902fd083572e0296ee92c389985ee6 Mon Sep 17 00:00:00 2001 From: Dmitry Date: Fri, 26 Jan 2018 12:23:25 -0500 Subject: [PATCH 4/4] Consolidate makeSelectedOptions --- src/traces/scattergl/index.js | 32 +++++++++++++++----------------- 1 file changed, 15 insertions(+), 17 deletions(-) diff --git a/src/traces/scattergl/index.js b/src/traces/scattergl/index.js index cbe7e348d25..f8d00352358 100644 --- a/src/traces/scattergl/index.js +++ b/src/traces/scattergl/index.js @@ -387,30 +387,28 @@ function sceneOptions(container, subplot, trace, positions) { if(hasMarkers) { markerOptions = makeMarkerOptions(markerOpts); + selectedOptions = makeSelectedOptions(trace.selected, markerOpts); + unselectedOptions = makeSelectedOptions(trace.unselected, markerOpts); - if(trace.selected.marker.symbol) { - selectedOptions = makeMarkerOptions(extend({}, markerOpts, trace.selected.marker)); - } - // shortcut simple selection logic - else { - selectedOptions = {}; - if(trace.selected.marker.size) selectedOptions.sizes = trace.selected.marker.size; - if(trace.selected.marker.color) selectedOptions.colors = trace.selected.marker.color; - if(trace.selected.marker.opacity !== undefined) selectedOptions.opacity = trace.selected.marker.opacity; - } + markerOptions.positions = positions; + } + + function makeSelectedOptions(selected, markerOpts) { + var options = {}; - if(trace.unselected.marker.symbol) { - unselectedOptions = makeMarkerOptions(extend({}, markerOpts, trace.unselected.marker)); + if(selected.marker.symbol) { + options = makeMarkerOptions(extend({}, markerOpts, selected.marker)); } + // shortcut simple selection logic else { - unselectedOptions = {}; - if(trace.unselected.marker.size) unselectedOptions.sizes = trace.unselected.marker.size; - if(trace.unselected.marker.color) unselectedOptions.colors = trace.unselected.marker.color; - if(trace.unselected.marker.opacity !== undefined) unselectedOptions.opacity = trace.unselected.marker.opacity; + 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; } - markerOptions.positions = positions; + return options; } function makeMarkerOptions(markerOpts) {