Preserving layout when dynamically adding nodes

[vincerubinetti]

I have a network that I need to be able to add/remove nodes from dynamically based on sliders and such.

I already know about the eles.layout() and node.lock()/unlock() features mentioned in these questions:

https://stackoverflow.com/questions/56081734/cytoscape-apply-layout-only-to-newly-added-nodes
https://stackoverflow.com/questions/55003657/cytoscape-js-dynamically-add-nodes-without-moving-the-others

I found that neither of these things worked for me.

Applying layout to only the added nodes technically worked, I think, in that it acted like it was laying out a brand new graph with just the added nodes, without taking into account the positions of the existing nodes. The result is that the new nodes just get laid on top of the old ones (depending on the layout algorithm), and also the viewport zooms in because it's fitting only based on the new few nodes.

example gif

code for that

 /** remove nodes */
graph.current.remove(
  graph.current.nodes().filter((oldNode) => !newNodes[oldNode.id()]),
);
/** remove edges */
graph.current.remove(
  graph.current.edges().filter((oldEdge) => !newEdges[oldEdge.id()]),
);

/** add nodes */
const addedNodes = graph.current.add(
  nodes
    .filter((newNode) => !oldNodes[newNode.id])
    .map((newNode) => ({ group: "nodes", data: newNode })),
);
/** add edges */
graph.current.add(
  edges
    .filter((newEdge) => !oldEdges[newEdge.id])
    .map((newEdge) => ({ group: "edges", data: newEdge })),
);

/** update layout */
layout.current?.stop();
layout.current = addedNodes.layout(layoutParams);
layout.current.start();

Doing the lock/unlock strategy also just... didn't do any layout at all, it seems like... at least with certain layouts.

example gif

code for that

// ... see previous code block

graph.current.nodes().forEach((node) => {
  node.lock();
});
addedNodes.forEach((node) => {
  node.unlock();
});

/** update layout */
layout.current?.stop();
layout.current = graph.current.layout(layoutParams);
layout.current.start();

I'm used to doing force-directly layouts with d3 "manually" (with very fine-grain control over the physics and behavior), and I'm able to set that up so that adding nodes reheats the simulation, preserves existing node positions, and adds new nodes at random.

Any advice? Am I doing something wrong?