Render plotly.js graph without hovering GUI (web worker?)

Question

I am working on a panel where users can create their own visualizations (with plotly.js). Sometimes the complexity of these visualizations leads to a long rendering time, which leads to freezing the browser user interface.

I have already created web workers for other tasks in my dashboard. Maybe there is a way to visualize plotly.js charts in a web worker and return them to the main stream?

I know that web workers do not have the DOM / Canvas feature. But maybe there is a trick or do you know the best way to prevent GUI freezing? Maybe outsourcing rendering to a server with phantomjs (I never used it, so just assume that it can work with pjs).

Answer 1

A possible solution to your problem might be the OffscreenCanvas API: https://developer.mozilla.org/de/docs/Web/API/OffscreenCanvas

You can access this API from the working one, and perhaps also use it directly with the library you specify.

But since browser support is very poor and (at least in Firefox, I don’t know how this is currently happening with other browsers, https://bugzilla.mozilla.org/show_bug.cgi?id=801176 ) 2d canvas context not supported (but if you use a library that uses WebGL, this will not be a problem).

Alternatively, you can use a pure javascript polyfill (this is a re-implementation) of the canvas that works in WebWorkers: https://www.npmjs.com/package/canvas-webworker It should be noted that in this way hardware acceleration is not applicable.

In combination, a good solution can be created.