Using Webworkers for Layouting - where to start?

[glumb]

I want to outsource the layouting in a webworker, to free some cycles for my main program. I can not find the right entry point in the code though. Can you give me a hint what part of the layouting could be outsourced into a webworker?

[anvaka]

Hello, I'd suggest to use ngraph.graph and ngraph.forcelayout instead. VivaGraph is built from these blocks, and it might be easier to start with them. In fact, https://www.yasiv.com/ uses webworkers to perform layout in background.

As for integration with webworker, in scope of VivaGraph, the most appropriate thing would be to create a layout wrapper, that delegates all the work to webworker. The API surface of this wrapper isn't very large, and would be mostly delegation. You can find an example in constant layout or in d3layout wrapper

[gg4u]

Hi @anvaka ,

unfortunately I saw Amazon changed the APIs and yasiv is affected by that.

About web workers, can you give brief a few guide ?

I am new to web workers, I was tried something like this:

I will wrap the layout part into a worker (the worker will make use of this library ) - for simplicity, I am passing the whole Vivagraph here, not just the layout.graph :

myWorker.js

// proper initialization for importing scripts in my worker
if( 'function' === typeof importScripts) {
importScripts('../js/vivagraph10.js', '../js/workly.js');

function layout( graph ) {
     
      return Viva.Graph.Layout.forceDirected(graph,  { ...parameters...} );
}

workly.expose(layout);

I try to call it on my main js file like this:

w = workly.proxy("./js/myWorker.js"); and then pass the graph:

layout = w(graph) but I get error:

workly.js:1 Uncaught (in promise) DOMException: Failed to execute 'postMessage' on 'Worker': function addNode(nodeId, data) {
    if (nodeId === undefined) {
      throw new Error('Invalid node identifier...<omitted>... } could not be cloned.

I learnt here that the error is because I passing an object with methods, and so it cannot be cloned.

So I tried to serialise:

obj = JSON.parse(JSON.stringify(graph))
layout = w(obj)

but will fail.

Could you share a little demo to show how to decouple the use of graph, and use of layout wrapped in worker ?