rerunning layout with compound nodes resets positions

Some context: I am rendering a graph which receives updates via a websocket connection. My goal is to add nodes at runtime and add them to the existing rendering of cytoscape. This should happen without a fully restarted layout which would update all positions, which would be very confusing for users.

This example from webcola is pretty spot-on, since it adds nodes/edges at runtime (by clicking), but mostly keeps the already positioned nodes at their old position.

I am trying to add nodes to the the cytoscape instance at runtime, but layout.run() will only change the existing nodes.

I tried to work around that fact by doing:

var layout = cytoscapeInstance.makeLayout({name: 'cola', .... options... });

// receive updated elements from websocket
// ... later:

layout.options.eles = cytoscapeInstance.elements();
layout.run()

This kind of works, but it will restart the rendering from the beginning and will ignore the existing state of the layout. This it is the same as when I completely reinitialize cytoscape with the new data. Users have no way to follow the update animations, so they will not be able to keep track of what position the node has they just looked at.

The problem seems to be that webcola gets its own set of objects which are only calculated by using .run(). Since the transformation methods (from cytoscapes data structure to colas) are not public there is no way to work around this. Otherwise I could probably do the transformations on the new data myself and then call layout.adaptor.resume().

Any ideas on how to solve this properly?

[felixfbecker]

I am (if I didn’t, the all new elements would just sit in the top left corner):

let layout: Cy.LayoutInstance;
getElements().subscribe(el => {
    console.log('add', el);
    if (layout) {
        layout.stop();
    }
    layout = graph.elements().makeLayout(layoutOptions);
    graph.add(el);
    layout.run();
});

[EyMaddis]

But the problem is that the layout starts of by spreading out the nodes, as it should, but another call to makeLayout(sameOptions) and then run() it will ditch the previously calculated positions of nodes completely and restart from scratch. I tried to set the positions of the nodes, but it does not matter since (I think) this line will override all positions each time run is called. Since it is beginning again and I now have new nodes added, the layout changes completely. In your example it does not matter as the same nodes are layouted, which results in the same layout everytime (with slight variations due to the sliders).