search

plotly / plotly.js

Open-source JavaScript charting library behind Plotly and Dash
https://plotly.com/javascript/
MIT License
16.85k stars 1.85k forks source link

Old WebGL contexts not destroyed after updating with React plot component #6365

Open jackhipson300 opened 1 year ago

jackhipson300 commented 1 year ago

This issue is related to #2852. I'm working on a dashboard using the React Plotly components with WebGL. I have become stuck because of the maximum number of WebGL contexts. The fix I had planned was to limit the number of charts so that the maximum wasn't crossed. But I'm also seeing that when a single plot component has its data changed, the previous WebGL contexts stay alive and will eventually have the same effect as having too many plots.

Is there a way to throw away the old WebGL context after updating a plot?

emch31Cyto commented 1 year ago

I am looking for same thing in Vue js. Let me know if you find any thing

jackhipson300 commented 1 year ago

@emch31Cyto to get around the problem of a single plot causing lost WebGL contexts when zooming I switched from the React Plotly components to manually rendering the plots with the javascript functions. In particular I found the Plotly.react function (unrelated to React the framework) to work without causing lost WebGL contexts. However, I was unable to find a fix for the issue when there are many plots so I had to add a limit of 7 to the number of plots rendered at one time. The plots will also trigger an event when their WebGL context is lost (see https://plotly.com/javascript/plotlyjs-events/#webgl-context-lost-event) so you could also find some way to handle it using that.

Heiko80 commented 1 year ago

I have same problem in Chrome browser when using plotlyjs with multiple plots (not subplots) together with ArcGIS for JS. I will show two seperate scattergl plots together with an Esri-Map (ArcGIS API for JS). With the change of the data inside the plots also the Esri-Map is updated to another position. If i change the dataset of the plots multiple times (using the plotly.react-function) the warning WARNING: Too many active WebGL contexts. Oldest context will be lost. appears in the console. At this time the GIS-Map is broken. No map is visible and i can't interact with it anymore. A Browser refresh helps in this moment until the GIS-Map brokes again. I try out to increase the max WebGL contexts limit with --max-active-webgl-contexts. But it doesn't help. In Firefox this problem doesn't occur. In the meantime maybe someone have found another solution to work around this issue and can post some informations.