Plotly.js: addTraces upon plotly_selected event with scattergl not rendering correctly

[cpsievert]

https://codepen.io/cpsievert/pen/MrMMvj

Brush the blue marker. A red marker should appear at (1, 2), but it seems to be transparent.

cc @dfcreative

[dy]

@etpinard scatter mode adds a new trace without selectedpoints set on it. Ie. new trace looks like as if its points are selected, but in fact it has no selection. Is that desired behavior? Or we better off showing new traces with all poins in unselected mode?

[etpinard]

What does the svg scatter implementation do in this case?

[dy]

Should be fixed with #2311

[cpsievert]

I modified the example slightly so the red marker should be placed directly on top of the blue marker, but again, the red marker isn't rendered.

May seem like a silly bug, but I need this fixed before I can update the R package...

[dy]

@cpsievert https://github.com/plotly/plotly.js/pull/2367 fixes that.
It swaps canvas order.
The initial guess was that selected points are rendered as the top layer over the not selected ones. That may break cases where selected points overlap not selected ones.

Ultimately we have to choose one way or another. Selected points are a separate layer, we cannot mix them into main points layer to make per-point layering, since that will significantly reduce performance.

[etpinard]

I prefer the behavior on master with the selected points on top.

@cpsievert here's one way to ensure that the red marker (from the new trace added by addTraces) appears above the blue marker: https://codepen.io/etpinard/pen/VQMOOd?editors=0010

[cpsievert]

@etpinard populating selectedpoints in that way will require some non-trivial changes on my end -- I imagine it should only be necessary for scattergl, though?

[etpinard]

I imagine it should only be necessary for scattergl, though?

yes.

[chriddyp]

Looks like this is actually the issue to #2433 and https://community.plot.ly/t/webgl-context-lost-after-updating-10-times/8581/8?u=chriddyp. However, we're using Plotly.react rather than Plotly.newTrace.

In Dash, we were recommending that users replot their data after selection to customize selection styles. This no longer works since the second trace (with _identical_ points as the first trace) now appears below the first trace that was originally plotted and selected. Here is a simple example: https://codepen.io/chriddyp/pen/YebmJL?editors=1010. Selecting the point used to display the second trace with the orange point on it, now it persists the first trace on top of it.

I can't necessarily use the addTraces method since Dash users always pass in full figures and I just call Plotly.react on them. I can promote selected styles for the traces and attributes that support them. The documentation has some examples using a second trace for styling with properties that aren't available under the selected key (like mode). This is a breaking change for Dash so if we're going to keep the current behaviour I'll bump up the major version of dash-core-components.

[cpsievert]

One way to work around this issue would be to "turn off" the selected/unselected api when a relevant event is triggered. More specifically, I'm thinking on a plotly_selected event, I could do this:

Plotly.restyle(gd, {"selectedpoints": null})

before adding a trace. However, it seems scattergl doesn't understand this restyle call. Note how in this (similar) code pen, the opacity of the unselected markers remained dimmed for scattergl, but are (correctly) not dimmed for scatter -- https://codepen.io/cpsievert/pen/GxmWKa

Happy to open another issue about scattergl respecting Plotly.restyle(gd, {"selectedpoints": null})

[etpinard]

Thanks for the report @cpsievert

selectedpoints seems to work fine in newPlot, but fails on restyle and friends (example). I'll try to get a fix for this out today.

[merges]

Thanks for your work on this issue. Do you happen to have an idea of when the fix will be released?

[jackparmer]

This issue has been tagged with NEEDS SPON$OR

A community PR for this feature would certainly be welcome, but our experience is deeper features like this are difficult to complete without the Plotly maintainers leading the effort.

Sponsorship range: $10k-$15k

What Sponsorship includes:

• Completion of this feature to the Sponsor's satisfaction, in a manner coherent with the rest of the Plotly.js library and API
• Tests for this feature
• Long-term support (continued support of this feature in the latest version of Plotly.js)
• Documentation at plotly.com/javascript
• Possibility of integrating this feature with Plotly Graphing Libraries (Python, R, F#, Julia, MATLAB, etc)
• Possibility of integrating this feature with Dash
• Feature announcement on community.plotly.com with shout out to Sponsor (or can remain anonymous)
• Gratification of advancing the world's most downloaded, interactive scientific graphing libraries (>50M downloads across supported languages)

Please include the link to this issue when contacting us to discuss.