scattergl lines sometimes draws random lines on some hardware

[mofojed]

I've posted this in the forum: https://community.plot.ly/t/scattergl-causes-strange-lines-to-be-drawn/19189

After investigating a bit further, I'm filing a bug/issue here.

The issue is that when the type is set to scattergl, sometime the plot will draw random lines extending across the plot. It doesn't seem to happen every time, but I can see it consistently on the example with many points: https://plot.ly/python/webgl-vs-svg/

It seems to be dependent on the size of the chart, if I resize my browser window and refresh that example, sometimes the lines appear, sometimes they don't, but it's consistent for that size of my browser window.

I've added a codepen to randomly draw lines, and if I run it a few times, then I run into the issue: https://codepen.io/anon/pen/qgpbKq

For example, one time after running there was as red/blue line across the entire graph:

I would provide the exact data set, but as mentioned at the top, it seems to be dependent on the size of the window/plot being drawn (and possibly other factors?), but you should see the error if you run the code pen a few times.

Any idea what could be causing this? scattergl is great for the performance improvements, but looks broken when it's drawing random lines across the whole plot.

Issue observed in both Chrome/FireFox, some more details: Platform:	MacIntel
Browser User Agent:	Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36
Context Name:	webgl2
GL Version:	WebGL 2.0 (OpenGL ES 3.0 Chromium)
Shading Language Version:	WebGL GLSL ES 3.00 (OpenGL ES GLSL ES 3.0 Chromium)
Vendor:	WebKit
Renderer:	WebKit WebGL
Unmasked Vendor:	NVIDIA Corporation
Unmasked Renderer:	NVIDIA GeForce GT 750M OpenGL Engine

[etpinard]

Thanks very much for the report!

Your https://codepen.io/anon/pen/qgpbKq codepen render as

on my thinkpad t450s running Ubuntu 18.04 both in Chrome 70 and FF65.

---

Can anyone else try out https://codepen.io/anon/pen/qgpbKq ?

[mofojed]

Yea sometimes it renders properly for me as well - did you run it multiple times?

[alexcjohnson]

I cannot reproduce - Mac OS 10.14.2, latest Chrome or FF, retina or non-retina screen, Intel Iris Graphics 6100, run a few dozen times. Only environment difference I see is Nvidia vs Intel graphics...

[mofojed]

Thank you @etpinard, @alexcjohnson for trying out that codepen... this is indeed turning into a fun issue to debug! :) I checked with a few coworkers, and none of them were able to reproduce with the codepen I listed, even though I can reproduce it almost every other run.

But! We have another codepen: https://codepen.io/dsmmcken/pen/EroNrQ That should be a nearly straight red line, but on my machine I'm still getting the strange artifacts:

And this time, my coworkers on macOS can also reproduce the issue. Two others on Linux were unable to reproduce, and just see a straight line.

Can anybody see the issue with the new code pen?

[dsmmcken]

I can reproduce with that codepen, but not the original. With that codepen I see one spike only, but it shows every time. It also disappears, re-appears at various zoom levels.

on mac, AMD Radeon HD 6770M 512 MB, in chrome. and on firefox I see:

On my windows laptop (intel HD 4400), in chrome/firefox that spike isn't displayed and I can't reproduce.

[alexcjohnson]

Curiouser and curiouser... I cannot reproduce with the new codepen either. That said on my iPhone no traces are rendered at all in either codepen (iPhone 8, iOS 12.1). That seems like an even bigger problem...

[JamesXNelson]

I cannot reproduce on a ubuntu machine, but my imac does it 100% of the time.

[etpinard]

Would someone here be interested in trying to reproduce the problem using just @dy's regl-scatter2d (the package that scattergl calls internally)?

[mofojed]

I can try that out, but I think I should try it in regl-line2d, as I'm not seeing the issue on scatter plots. I only see it when mode: "lines" is set.

Is there a codepen for regl-line2d or any tips on the easiest way to get that set up in a shareable environment?

[etpinard]

@mofojed thanks!

Maybe you could try starting from https://codepen.io/etpinard/pen/EroXXd?editors=1010

[mofojed]

@etpinard Thanks, I can reproduce the issue on regl-line2d (see line on the right side, thicker than the rest and in a weird direction):

Another time:

I couldn't use the same data set as the second example (since it had date strings for the x axis), but I could reproduce on my machine using the same random data as the first code pen.

Codepen here: https://codepen.io/anon/pen/yZpXZE?editors=1010

[etpinard]

@archmoj could you take :eye: at this?

[archmoj]

I was not able to reproduce this using the codepen examples. @mofojed Would you mind simplifying one of the codepen examples to have the "minimal" data/layout that could trigger the bug? Thank you very much in advance.

[mofojed]

This is a tricky one... it's only reproducible on certain hardware... so far it's only been observed on Macs, and even with the same data set/layout on Windows it's not an issue, and on different Macs sometimes the issue is more/less noticeable.

What's the best way for getting you the information you need? What platform are you on?

[archmoj]

I develop on GNU+Ubuntu. But we could test on different operating systems. As I mentioned a good starting point is to find "minimal" data/layout that could cause this for you.

[mofojed]

Okay, I've created this codepen that has 500 data points, and I'm seeing one line being drawn randomly across the chart: https://codepen.io/anon/pen/mvZjeM

I tried reducing to 250 points, but the issue was no longer observed.

This is a reduced version version of the one example codepen with 1000 data points, which had many lines drawn incorrectly: https://codepen.io/dsmmcken/pen/EroNrQ

Issue observed in both FireFox and Chrome on my Mac, some info from Chrome: Platform:	MacIntel
Browser User Agent:	Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36
Context Name:	webgl2
GL Version:	WebGL 2.0 (OpenGL ES 3.0 Chromium)
Shading Language Version:	WebGL GLSL ES 3.00 (OpenGL ES GLSL ES 3.0 Chromium)
Vendor:	WebKit
Renderer:	WebKit WebGL
Unmasked Vendor:	NVIDIA Corporation
Unmasked Renderer:	NVIDIA GeForce GT 750M OpenGL Engine

Let me know if there's any other information I can provide.

[mofojed]

Actually I've figured out how to reproduce with a dataset of only 100 points: https://codepen.io/anon/pen/omrMdw

If I execute that codepen, and then zoom out (using the zoom out button) 4 or 5 times, then I start getting random lines drawn:

[archmoj]

@mofojed Thanks for the feedback. Now would you mind testing this codepen in which the react is replaced by simple newPlot call?

[mofojed]

(You @'ed the wrong person, I'm @mofojed, not sure who mojoaxel is :))

I am seeing the same behaviour in the new codepen with just the newPlot call.

[archmoj]

@mofojed I noticed there are duplicate data points in the codepen you provided. For example points number 2 and 3 have identical x and y values. Would you please remove them from the list and then redo the test. Thanks again.

[mofojed]

@archmoj I was unable to reproduce with those date tests when I removed the duplicate values - shouldn't that appear correctly anyway, even with duplicated values?

I was able to still reproduce by capturing one instance of 100 data points randomly generated from my first codepen. This has no duplicate x/y values. I've put the new codepen here: https://codepen.io/anon/pen/yZdGaO

[archmoj]

@mofojed Excellent investigation. Thank you!

[JamesXNelson]

I had tried to reproduce on ubuntu and was not able to.

I even tried to get the graphical / hardware settings on a mac that could 100% reproduce to match the ubuntu machine that couldn't, and it changed nothing. Mac rendered the messed up graph 100%, ubuntu, 0%.

[mofojed]

Has there been any investigation into this issue? I'm still observing it, wondering if there's anything I can do to help. At this point we simply cannot use scattergl for line graphs as it may be present an inaccurate view of the graph, and just use scatter with reduced performance.

[leeoniya]

since this issue seems stalled, i'll plug an alternative here (benched against scattergl):

https://github.com/leeoniya/uPlot#performance

[dy]

@leeoniya that would be interesting to bench that against raw components that plotly uses:

• regl-line2d
• gl-waveform for time series

Also please consider that line chart in plotly is not limited to time series, it can render arbitrary lines. Anyways that's offtopic.

[leeoniya]

@dy

@leeoniya that would be interesting to bench that against raw components that plotly uses:

as i mention in the uPlot intro, WebGL should still be used for realtime waveforms. i'll add these two libs as additional alternatives. that being said, i think that any shaders offering features equivalent to the style & flexibility of Canvas2D API would be extremely non-trivial. this might not matter for signal/waveform display but it matters a lot for generating charts. uPlot can do 10M points in ~400ms (i5, integrated gpu), while that's not much compared to raw webgl, it is an amount of data you'd be hard-pressed to load from a data-store into a browser. uPlot also does auto-scaling by default & data gap detection in the hot paths (which imposes a ~20% perf cost). as with everything: trade-offs.

you're welcome to bench these libs against uPlot's dataset, and there's no doubt they'd be faster in raw render perf, but then you have to add in all the other features such as cursor interaction, gap detection, tick & text label generation, date formatting, timezone/dst support, axis splitting, legend rendering, etc. (much of this on the CPU side) before you're comparing apples-to-apples.

Also please consider that line chart in plotly is not limited to time series, it can render arbitrary lines.

yes, technically what it does is scatter, but arbitrary lines rarely appear on scatter and are primarily a trendline / time-series thing and are x-aligned 90% of the time. i do have true scatter support in the works though [1] ;)

[1] https://github.com/leeoniya/uPlot/issues/107#issuecomment-602158244

[archmoj]

Possibly fixed since v1.54.2 via https://github.com/plotly/plotly.js/pull/4881.

[mofojed]

I'm still seeing the same issue with this codepen even if I update the CDN to 1.54.2: https://codepen.io/mofojed/pen/GRoEjZa

[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: $5k-$10k

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.

[darynwhite]

Does this seem related to the issues raised here? I'm seeing weird slipping of scatter points on a scattergl trace that don't exist when I use a scatter trace. Running macOS and Safari, Chrome, and Firefox all produce this:

[mofojed]

@darynwhite that looks exactly like another issue raised, for which there is a workaround in Chrome: https://github.com/plotly/plotly.js/issues/5970#issue-1015536400

Basically OpenGL on M1 Macs has issues, but forcing Chrome to use Metal instead resolves the issue.

[darynwhite]

Thanks @mofojed! That did solve the problem, too bad there isn't a way to disable OpenGL all together...

[mofojed]

@darynwhite FYI Looks like this may have been fixed with plotly 2.28: https://github.com/plotly/plotly.js/issues/6820

[archmoj]

@darynwhite FYI Looks like this may have been fixed with plotly 2.28: #6820

Thanks @darynwhite for the note. While working on #6830, I thought it would fix this one as well.

[darynwhite]

Thanks @archmoj and @mofojed!