Scattergl does not always render markers

[rhamner]

Occasionally when trying to render markers with scattergl, I get the following:

Offscreen-For-WebGL-000000C6A5E1D5E0]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 0

When this happens, most of the markers are not rendered. Hover and click still work for them though. An example of hovering over a point that doesn't render is included in the screenshot below:

That plot looks like the following when all points are rendered:

If I switch to 'scatter' or 'pointcloud' or use lines instead of markers, it works fine (lines example):

Stranger, I often get this error with a subset of the data but not with the full data set. The full data set looks like this using markers and scattergl:

When I switch to 'edit in chart studio' the problem goes away. When I dump the plot data to json then bring into codepen, the problem goes away (https://codepen.io/rhamner/pen/zJWREL). It is probably important to know that this is the same machine...the issue appears with the same data set on the same machine sometimes.

Any idea on what could be causing this? Unfortunately, I can't get the issue to reproduce with the exact same data in codepen so I'm hoping the warning/error, screenshots, and actual data set in that codepen link are sufficient.

I saw a maybe similar issue reported here:

plotly/dash-core-components#204

[etpinard]

What version of plotly.js are you using?

[rhamner]

1.40.1. I have tried using https://cdn.plot.ly/plotly-latest.min.js also.

I'm not sure if it matters, but the code base that reproduces it is a Vue app built with webpack. I see the behavior using npm install or using the cdn to pull it in.

[etpinard]

Ok, and are you using dash?

[rhamner]

I am not. Just straight javascript/plotly.js

[etpinard]

I am not. Just straight javascript/plotly.js

Can you share a snippet of your work then to help us out?

[etpinard]

... or is the JS code in your https://codepen.io/rhamner/pen/zJWREL equivalent to the one that yield those

Offscreen-For-WebGL-000000C6A5E1D5E0]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 0 error messages?

[rhamner]

The code in the codepen is equivalent. That's the exact data and layout I'm using, and I'm using Plotly.react as the call.

[etpinard]

All right, well that one as is is going to be a little hard to debug.

Can you think of anything else (e.g in the html or css) that differs from your page and the codepen you posted?

[rhamner]

Ok...I thought of a way to reproduce it in codepen. It's order dependent...i.e., in our main app that shows it, it's when a single plot changes content that this occurs. I was able to mimic that in that codepen and here's the link again:

https://codepen.io/rhamner/pen/zJWREL

What should happen when you run this is that it plots a bunch of markers, then plots a subset as lines ~5 seconds later, then plots that same subset as markers after another ~5 seconds. That last marker plot should show the failure to render with the hover over non-rendered points.

[alexcjohnson]

Ha, I was about to write "crazy, I see the failure in the last plot in your codepen, one of the ones labeled 'Always seems to work'" but I guess that was as you were editing it. Small style point: we very much appreciate your effort to find a way to make this bug reproducible - thanks very much! but once you've posted a codepen here, it's better to fork it and edit the copy, so the written record here is clear on what we should expect to see at any given link.

I see the points disappear (but remain active for hover, as you describe) consistently on both Chrome and FF on my mac.

[rhamner]

Augh...I didn't think to fork. I'll fork and update the links after dinner. To confirm though...the link now shows the issue for you?

[alexcjohnson]

Yes, I see the issue repeatably now.

Don't worry about forking now - I almost didn't mention it because we really do appreciate your help in zeroing in on the problem. The state you left it in is great, it shows the bug in a clear and straightforward way. Just something to keep in mind for future issues 😄

[etpinard]

Thanks very much for your efforts @rhamner !

[kevinwuhoo]

I'm also seeing this. This seems to be a regression between 1.36.1 and 1.37.0 if that helps any. Changing the plotly.js version in the codepen seems to yield a working version. Thanks all!

[rhamner]

Hi guys...any updates on this one?

[rfried]

I'm also seeing this issue

[seansfkelley]

I'm seeing this sporadically on 1.39.2. It behaves like a race condition and is very hard to reproduce in my environment reliably (props to @rhamner for nailing down a repro).

[archmoj]

This codepen may be a better demonstration of this issue. This is to confirm that the problem only happens with scattergl not 'scatter' and while switching modes.

[rhamner]

Interestingly, that codepen does not show the issue for me @archmoj

[archmoj]

@rhamner Do you see 10 successful updates of the graph?

[rhamner]

@archmoj I do

Edit: Also no console errors

[archmoj]

I don't see any error when trying the codepen on my Android phone. But it stops on the PC with Chrome & Firefox. Curious to possibly know if you tested my codepen on any of those?

[slishak]

After a bit more investigation, this issue may be the root cause of plotly/dash-core-components#313. When using plotly.js 1.40.0, the example Dash app in that issue works fine, but when upgrading to 1.40.1 the error is always triggered. So it seems to be also related to #2939.

[etpinard]

Thanks @slishak , from @archmoj's investigation, we now think #2939 is the culprit.

Can I ask you (and everyone else here) which browser you are using?

[slishak]

I'm using Chrome on Windows 7.

[etpinard]

Which Chrome version?

[slishak]

Version 69.0.3497.100 (Official Build) (64-bit).

Still occurs with Version 70.0.3538.67

[rhamner]

Chrome version 70.0.3538.67 (Official Build) (64-bit) on Windows 10. I do not see it on firefox version 63.0 (64-bit).

[seansfkelley]

Chrome: Version 69.0.3497.100 (Official Build) (64-bit)
OS: macOS 10.14

[etpinard]

Most likely solved in #3132

Closing for now, but might have to be reopened if the problem persists in our upcoming v1.42.0

[maksufa]

Unfortunately it hasn't been resolved yet. Still exists in v. 1.42.2 and 'ghost' points occure with error Offscreen-For-WebGL-000000C6A5E1D5E0]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 0. Switch from scattergl to scatter resolves the problem, however when working with > 10k points at the same time, panning/zooming is not acceptable from the UX perspective so...could we reopen/create new issue for that?

[archmoj]

@maksufa Could you please fork & modify this codepen or create another demo regarding the problem you noticed?

[slishak]

I think the issue that's unresolved is #2334, there are codepens there that still reproduce it with the latest version (unless I'm misunderstanding the reported issue!)

[archmoj]

Thanks @slishak for the info. I created this new demo for this other problem. What I observed "in the browsers' console" is that depending on the number of points & updating to/from various number of data points, one may notice either errors such as Uncaught TypeError: Cannot read property 'sizeAvg' of undefined or the WebGL warning mentioned above on Chrome and TypeError: k.marker is undefined on Firefox.