Is it possible to add/remove nodes and links during simulation?

[cyremur]

I am trying to create a simulation where new nodes and links are added / removed as the simulation time progresses (kind of like the time filter option on cosmograph.app, but with manipulating the graph structure instead of just highlighting).

As a test, I tried the following onClick to remove a clicked node:

  events: {
    onClick: (node, i, pos, event) => {
      if (node && i !== undefined) {
        graphNodes = graphNodes.filter(n => n.id !== node.id);
        graphLinks = graphLinks.filter(l => l.source !== node.id && l.target !== node.id);
        graph.setData(graphNodes, graphLinks);
      }
      console.log("Clicked node: ", node);
    },
  },

This works, but it re-renders the whole graph with new random positioning and starts the simulation over, losing temporal cohesion in the graph visualization.

Is this behaviour supported by the library in principle? Is there a way to make sure nodes are removed / added in place without manipulating the position of other nodes in the visualization?

Note: I'm pretty sure stuff like this is possible in d3.js ;)

[Stukova]

Hi @cyremur! Incremental addition of nodes and links is not supported in Cosmos due to WebGL/GPU limitations.
For nodes and links, Cosmos creates a new texture for each to store data, similar to an array in JS. But unlike an array in JS, a texture cannot be resized dynamically. So to add a new node/link, Cosmos naturally need to create a new texture with a new size. In other words, initialise new data.

You can reproduce the incremental behaviour by initialising new nodes/links with setData method as you did in your example. You can also initialise the position (x and y) for each node. In this way, you can get the current position of the nodes (with getNodePositionMap method) and use them to initialise new data:

  events: {
    onClick: (node, i, pos, event) => {
      if (node && i !== undefined) {
        graphNodes = graphNodes.filter(n => n.id !== node.id);
        graphLinks = graphLinks.filter(l => l.source !== node.id && l.target !== node.id);
        const nodePositionsMap = graph.getNodePositionsMap();
        graphNodes.forEach((node) => {
          const nodePosition = nodePositionsMap.get(node.id);
          if (nodePosition) {
            node.x = nodePosition[0];
            node.y = nodePosition[1];
          }
        });
        graph.setData(graphNodes, graphLinks);
      }
      console.log("Clicked node: ", node);
    },
  },

Additionally, you can set the third argument in setData to false and Cosmos will not run the simulation after data initialisation.

Please take a look at the example in the Codesandbox I created for you. I hope it helps!