Support Virtual WebGL for Plotly graphs

[alexjohnson-kobold]

Is your feature request related to a problem? Please describe.

If you make more than 3-4 Plotly graphs that use WebGL (3D, scattergl, parcoords, and a couple of others, but notably px.scatter will automatically use scattergl for datasets over 1000 points so a lot of users are never aware they're using WebGL) then some of the plots will fail to display because we run out of WebGL contexts on the page. Other WebGL-based components can eat into this limit as well, though I'm not aware of any other WebGL components that users commonly use many of on the same page.

Describe the solution you'd like

If you include virtual-webgl on the page, Plotly.js will use that and reuse contexts to avoid these limits. This page describes how to do it in Jupyter: https://plotly.com/python/webgl-vs-svg/#multiple-webgl-contexts

Describe alternatives you've considered

I've added this for now in my own app with:

from panel.models.plotly import PlotlyPlot
PlotlyPlot.__javascript_raw__.append("https://unpkg.com/[email protected]/src/virtual-webgl.js")

@philippjfr also suggested:

pn.config.js_files = {"virtual-webgl": "https://unpkg.com/[email protected]/src/virtual-webgl.js"}

Additional context

virtual-webgl works by overriding some built-in browser functionality, HTMLCanvasElement.prototype.getContext and window.requestAnimationFrame (possibly more, I haven't looked too carefully). We've tested it fairly extensively with Plotly (and a various other components via Dash) and found it to work well with no impact on performance, but this solution will apply to every component on the page that uses WebGL and it's conceivable that other components will not be compatible or WILL experience performance problems. So if there are other WebGL components that are particularly important in the context of Panel it's probably worth explicitly testing these alongside Plotly.