Scattergl lasso #1657

dy · 2017-05-09T19:23:20Z

Enables svg interactions for scattergl plot.
Some minor issues TODO:

zooming loses selection
autoscale loses cdata.plot
~~opacity of huge number of points is indistinguishable from non-selected points~~
blinking of some points on selection
picking is lost
fix tests
low fps on selection (ok at 1e5)
~~panning does not clear selection~~
add tests

jackparmer · 2017-05-16T19:24:37Z

This will be useful for the crossfilter project too, where large D3 line and scatter plots may not be zippy enough: #1316

jackparmer · 2017-05-16T20:11:34Z

Hey @dfcreative will scattergl have plotly_selected and plotly_deselect events identical to its SVG counterpart?
http://codepen.io/plotly/pen/BpayyX

etpinard · 2017-05-16T20:12:14Z

Hey @dfcreative will scattergl have plotly_selected and plotly_deselect

yes,

Conflicts: src/plot_api/plot_api.js src/plots/cartesian/graph_interact.js

etpinard

First pass comments.

This is looking promising. Nice job @dfcreative

Looks like you broke the gl2d hover spikes (i.e. those black lines to go from data point down to the axes).

I think for this iteration we should keep the current gl2d hover routine (the mouseContainer thing in scene2d.js) and add just what we need from Cartesian for selections.

etpinard · 2017-05-26T14:57:38Z

src/plots/gl2d/index.js

@@ -12,23 +12,22 @@
 var Scene2D = require('./scene2d');
 var Plots = require('../plots');
 var xmlnsNamespaces = require('../../constants/xmlns_namespaces');
-
+var constants = require('../cartesian/constants');
+var cartesian = require('../cartesian')


I'd prefer

var Cartesian = require('../cartesian');

etpinard · 2017-05-26T14:59:33Z

src/plots/gl3d/camera.js

+ var lastX = 0, lastY = 0, lastMods = {shift: false, control: false, alt: false, meta: false};
+ mouseChange(element, handleInteraction);
+
+ // enable simple touch interactions


Amazing 🎉

That is unmerged #1507 here

etpinard · 2017-05-26T15:04:30Z

src/traces/scattergl/convert.js

@@ -303,6 +318,11 @@ proto.update = function(options) {
 // not quite on-par with 'scatter', but close enough for now
 // does not handle the colorscale case
 this.color = getTraceColor(options, {});
+
+ //provide reference for selecting points
+ if (cdscatter && cdscatter[0] && !cdscatter[0].plot) {


.plot might not be best here. This is really a trace module though .trace is already taken.

Maybe .glTrace?

etpinard · 2017-05-26T15:05:50Z

src/traces/scattergl/index.js


 // reuse the Scatter3D 'dummy' calc step so that legends know what to do
-ScatterGl.calc = require('../scatter3d/calc');
+ScatterGl.calc = require('../scatter/calc');


Smart 👍

Now, can you rm src/trace/scattergl/calc.js?

... but that might slow down scattergl for 1e5+ point graphs. 😕

For the record, we must make sure plotting 1e6 points with scattergl (passing through updateFast) clocks in at around 1 second.

That is required to obtain selection in scattergl/select. Mb it is possible to optimize that, just haven't got that a chance.

Actually I see no speed difference compared to old implementation for 1e6.

@etpinard ~3300ms vs ~3500ms for 1e6 points, that is 200ms slowdown due to

var x = xa.makeCalcdata(trace, 'x'), y = ya.makeCalcdata(trace, 'y');

That's ~3300ms on master?

@etpinard just updated master and plugged laptop: ~3000ms vs ~3200ms, I hardly notice the difference due to fluctuations

Wow. That's brutal. Does anyone else have to wait 3000ms when plotting 1e6 points?

With 6ac722d we're back in the ~1500ms for 1e6 first render as on master 🎉

Most of scattergl/calc.js is now skipped when dragmode is set to pan/zoom (the default).

Calling Plotly.relayout from pan/zoom to lasso/select now trigger a recalc where gd.calcdata is filled so that the selection logic knows what to do.

etpinard · 2017-05-26T16:02:16Z

src/plots/cartesian/dragbox.js

@@ -79,7 +79,7 @@ module.exports = function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
 var yIDs = [ya0._id];

 // if we're dragging two axes at once, also drag overlays
- subplots = [plotinfo].concat((ns && ew) ? plotinfo.overlays : []);
+ subplots = [plotinfo].concat((ns && ew && plotinfo.overlays) ? plotinfo.overlays : []);


Why do we need the extra && plotinfo.overlays now?

etpinard · 2017-05-26T16:04:19Z

src/plots/gl2d/index.js

+ // 3. errorbars for bars and scatter
+ // 4. scatter
+ // 5. box plots
+ function joinPlotLayers(parent) {


... e.g all of these are useless in gl2d

etpinard · 2017-05-26T16:06:04Z

src/plots/gl2d/scene2d.js

@@ -359,7 +358,6 @@ proto.destroy = function() {

 if(!this.staticPlot) this.container.removeChild(this.canvas);
 this.container.removeChild(this.svgContainer);
- this.container.removeChild(this.mouseContainer);


Hmm. That probably breaks gl2d/camera.js

So wait, are we 🔪 the gl2d picking routine?

It would be nice to merge the cartesian and gl2d hover logic at some point, but swapping in cartesian hover in gl2d probably means poor performance on graphs with 1e5 and up data points at this stage.

The problem is that mouseContainer intercepts mousemove, needed for cartesian selection to work. There seems to be no good way to hook up gl2d/camera so to enable cartesian/select − these are too separate concerns.
It is possible to switch to cartesian hover only for lasso/select mode, but the pick style differs visually, which is confusing.

Probably resolved by 1451802

etpinard · 2017-05-26T16:10:03Z

src/traces/scattergl/attributes.js

- error_x: scatterAttrs.error_x
+ error_x: scatterAttrs.error_x,
+
+ hoveron: {


This has no effect in gl2d. You must have added this in to make other things not break, correct?

Picking was broken without hoveron property

Resolved in 648547f from

https://github.com/dfcreative/plotly.js/compare/scattergl-lasso...plotly:scattergl-lasso-etienne

@dfcreative you might want to merge in that commit too.

etpinard · 2017-05-26T16:10:38Z

src/traces/scattergl/convert.js

+ if(sel && !sel[index] && j === 3) {
+ color *= DESELECTDIM;
+ }
+ this.scatter.options.colors[4 * i + j] = color;


Very nice. Thanks for covering both updateFast and updateFancy !!

@dfcreative Something broke selection for fancy traces e.g. with array marker.size:

var x = []; var y = []; var size = [] for( var i = 0; i < 1e4; i++) { x.push(i); y.push(i*Math.random()); size.push(15 * Math.random()) } var scatterglMarkers = { x: x, y: y, type: "scattergl", mode: "markers", marker: {size: size, opacity: 1} }; console.time('scattergl') Plotly.newPlot('graph', [scatterglMarkers], {dragmode: 'lasso'}) .then(() => console.timeEnd('scattergl'))

Did you get the time to investigate ⤴️ ? If not, I can look at it this afternoon.

Well, looks like this was never implemented.

this.selectedIds in the scene2d.updateFancy scope doesn't reference anything.

@etpinard done.

Beautifully done. Thanks very much!

etpinard · 2017-05-26T16:10:54Z

src/traces/scattergl/index.js

 ScatterGl.plot = require('./convert');
+ScatterGl.selectPoints = require('./select');


etpinard · 2017-05-26T16:22:36Z

src/plots/cartesian/axes.js

+ ax.range = ax._rl = axes.getAutoRange(ax);
+
+ ax._r = ax.range.slice();
+ ax._rl = Lib.simpleMap(ax._r, ax.r2l);


This is an interesting patch. I wonder if this might be fixing an undiscovered bugs(s).

That is taken from https://github.com/dfcreative/plotly.js/blob/6de41e6d555d038299aa0aef7e075804f011db49/src/plots/cartesian/axes.js#L1657, just optimized it a drop

monfera · 2017-06-10T17:19:52Z

Started leaning on this branch as this feature is essential for crossfiltering if the number of points is over around 1k. No specific need for it now, but at some point, maybe we'd want to add the properties curveNumber and pointNumber to elements of the eventData.points array for feature parity w/ scattergl. These numbers can work for indexing calcdata eg. gd.calcdata[curveNumber][pointNumber] (speaking of this object, at some point it could have the data property that gets fed from customdata). The eventData points already have the id which is all I need right now.

monfera · 2017-06-10T18:16:29Z

Quick perf check, it works well at 10k points as it's pushed rn:

It currently seems overly slow with 125k points where color is an array (haven't tested otherwise as crossfilter needs salient selected points):

Also, as seen on this 2nd animgif (also present with 10k points) the hover tooltip, for some reason, appears on initial render with no interaction (top left) and is stuck there even when mouse is moved (with or without hovermode: 'closest').

monfera · 2017-06-10T18:53:08Z

⬆️ cursory test shows that readPixels in

function SelectBuffer(gl, fbo, buffer) {
  this.gl     = gl
  this.fbo    = fbo
  this.buffer = buffer
  this._readTimeout = null
  var self = this

  this._readCallback = function() {
    if(!self.gl) {
      return
    }
    fbo.bind()
    gl.readPixels(0,0,fbo.shape[0],fbo.shape[1],gl.RGBA,gl.UNSIGNED_BYTE,self.buffer)
    self._readTimeout = null
  }
}

is the culprit (slow irrespective of how many of the 125k points is currently in the visible, zoomed domain):

etpinard · 2017-06-13T13:57:57Z

TODO:

bump gl-scatter2d-sdf dep to include Ignore positions recalc gl-vis/gl-scatter2d-sdf#5 - done in 27811d6

dy · 2017-06-13T17:02:05Z

@monfera may I ask you to help reproducing this bug with stuck hover tooltip? I faced it once, but it works fine rest of the time. Is some special scenario to that?

monfera · 2017-06-13T17:48:48Z

@dfcreative not showing up on my current branch right now, I'll make a minimal example if it occurs again

monfera · 2017-06-13T22:40:00Z

@dfcreative I don't have an isolated case, just a hint at this time - the tooltip seems to get stuck if I delete the marker.opacity line here:

Plotly.newPlot(
      plotlyChartHolder01,
      [{
        type: 'scattergl',
        mode: 'markers',
        marker: {
          size: 3,
          color: 'rgba(255,255,255, 0.25)',
          opacity: atomic.map(d => 1)
        },
        x: atomic.map(d => d.logValueMmUsd),
        y: atomic.map(d => d.logKilotons),
        ids: atomic.map(d => d.key),
      }],
      {
        hovermode: 'closest',
        dragmode: 'select',
        width: 500
      }
    )

In addition, when the opacity array is not present, and then do a rectangular lassoing (which is the initial state due to dragmode: 'select') there's an error complaining that positions === null. There are 2300 points. I can't work on a minimal case rn but thought to share it in case the above is a sufficient condition.

includes PRs: - #1657 - gl-vis/gl-scatter2d-sdf#5 - #1781 - #1770

etpinard · 2017-06-14T22:24:25Z

src/traces/scattergl/select.js

+ y = ya.c2p(di.y);
+ if(polygon.contains([x, y])) {
+ selection.push({
+ id: i,


TODO: i here isn't the id, it's the pointNumber.

Would be best to merge #1770 first, as this here will break after commit 3399a58 is applied.

done in debdd46

- to include: gl-vis/gl-scatter2d-sdf@ae37fb6

- to match svg 'scatter'

etpinard · 2017-06-15T19:24:54Z

test/jasmine/tests/gl2d_click_test.js

@@ -444,3 +444,149 @@ describe('Test hover and click interactions', function() {
 .then(done);
 });
 });
+
+describe('Test gl2d lasso/select:', function() {


Painful! For some reason, these tests doesn't work on CI. Looks like the cases below can't even draw the scene:

https://circleci.com/gh/plotly/plotly.js/4535#tests/containers/1

Can anyone try to pull down this branch and try this out locally?

Works fine for me:

Although couple of times 'should output correct event data for scattergl' failed due to delay - in some reason karma runs chrome with blank tab, I have to manually switch to tests tab, but this is irrelevant.

etpinard · 2017-06-16T20:31:00Z

Would anyone be opposed to merging this without CI test support?

I can't figure out why these new tests keep failing on CircleCI. With the @noCI tag, they will run locally on npm run test-jasmine and be part of the pre-release checklist in ./tasks/noci_test.sh.

monfera · 2017-06-16T20:44:28Z

@etpinard sounds good to me!

dy and others added 16 commits April 7, 2017 14:58

Update gl3d camera

8fe669b

Add dep

c1a4c0c

Merge branch 'master' of github.com:plotly/plotly.js

08f0738

Add scattergl box/lasso icons

97b827e

Fix status

3d0b325

Make rezooming work

e7e4843

Get closer to creating scatter for selection

6c29193

Fix progress

6d4f9a5

Fix intermediate progress

cf73fbe

first working thing

d3427c0

Add proper points limits

190d3c7

Add scattergl selection

9921fb9

Fix MVP implementation

4bff013

Fix proper points filtering

ab07db3

Add selection to scattergl-fancy

1a3ce6d

Make fancy scatter properly select points

eb4654d

etpinard added status: in progress feature something new labels May 9, 2017

Lintify

920127d

dy added 4 commits May 25, 2017 16:01

Resurrect hoveron

fb84a06

Normalize selected zoom behaviour

82c71eb

Fix losing trace reference

7085146

Merge branch 'master' into scattergl-lasso

6de41e6

Conflicts: src/plot_api/plot_api.js src/plots/cartesian/graph_interact.js

etpinard reviewed May 26, 2017

View reviewed changes

dy added 2 commits May 26, 2017 13:07

Fix fancy scatter

86d7d65

Capitalize cartesian

d21176b

etpinard added 3 commits June 9, 2017 15:10

call updateFx on doModeBar restyle calls

d76d64d

rm useless PR diffs

58b3654

Merge branch 'master' into scattergl-lasso

bbda3e7

dy mentioned this pull request Jun 12, 2017

Ignore positions recalc gl-vis/gl-scatter2d-sdf#5

Closed

dy added 2 commits June 12, 2017 15:48

Ignore resnapping for scatter-fancy

6bfbd83

Lintify

6c08dc3

etpinard added a commit that referenced this pull request Jun 14, 2017

pre 1.28.0 dist

b848a0d

includes PRs: - #1657 - gl-vis/gl-scatter2d-sdf#5 - #1781 - #1770

etpinard added 3 commits June 14, 2017 16:51

Merge branch 'master' into scattergl-lasso

1e4e25d

add isDimmed option to fillColor util

b92059a

add gl2d select/lasso tests

d4aad3f

etpinard reviewed Jun 14, 2017

View reviewed changes

etpinard added 4 commits June 14, 2017 18:32

try adding delay after first Plotly.plot before gl2d select/lasso tests

c7b551c

bump gl-scatter2d-sdf to ^1.3.11

27811d6

- to include: gl-vis/gl-scatter2d-sdf@ae37fb6

Merge branch 'master' into scattergl-lasso

ab30f93

swap 'id' for 'pointNumber' in scattergl selection data

debdd46

- to match svg 'scatter'

etpinard reviewed Jun 15, 2017

View reviewed changes

skip gl2d lasso/select for now

9d5d411

etpinard added status: reviewable and removed status: in progress labels Jun 16, 2017

etpinard merged commit a227ae1 into plotly:master Jun 19, 2017

etpinard deleted the scattergl-lasso branch June 19, 2017 14:34

		ScatterGl.plot = require('./convert');
		ScatterGl.selectPoints = require('./select');

Scattergl lasso #1657

Scattergl lasso #1657

Conversation

dy commented May 9, 2017 • edited by etpinard Loading

jackparmer commented May 16, 2017

jackparmer commented May 16, 2017

etpinard commented May 16, 2017

etpinard left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

etpinard May 26, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dy Jun 6, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dy Jun 6, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

etpinard Jun 6, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

etpinard Jun 7, 2017 • edited Loading

Choose a reason for hiding this comment

dy Jun 7, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

monfera commented Jun 10, 2017

monfera commented Jun 10, 2017

monfera commented Jun 10, 2017 • edited Loading

etpinard commented Jun 13, 2017 • edited Loading

dy commented Jun 13, 2017 • edited Loading

monfera commented Jun 13, 2017

monfera commented Jun 13, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dy Jun 15, 2017 • edited Loading

Choose a reason for hiding this comment

etpinard commented Jun 16, 2017

monfera commented Jun 16, 2017

dy commented May 9, 2017 •

edited by etpinard

Loading

etpinard May 26, 2017 •

edited

Loading

dy Jun 6, 2017 •

edited

Loading

dy Jun 6, 2017 •

edited

Loading

etpinard Jun 6, 2017 •

edited

Loading

etpinard Jun 7, 2017 •

edited

Loading

dy Jun 7, 2017 •

edited

Loading

monfera commented Jun 10, 2017 •

edited

Loading

etpinard commented Jun 13, 2017 •

edited

Loading

dy commented Jun 13, 2017 •

edited

Loading

dy Jun 15, 2017 •

edited

Loading