Delete Middle Node

This example shows you how to recover deleted edges when you remove a node from the middle of a chain. In other words, if we have three nodes connected in sequence - a->b->c - and we deleted the middle node b, this example shows you how to end up with the graph a->c.

To achieve this, we need to make use of a few bits:

• The onNodesDelete callback lets us know when a node is deleted.
• getConnectedEdges gives us all the edges connected to a node, either as source or target.
• getIncomers and getOutgoers give us the nodes connected to a node as source or target.

All together, this allows us to take all the nodes connected to the deleted node, and reconnect them to any nodes the deleted node was connected to.

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

Although this example is less than 20 lines of code there’s quite a lot to digest. Let’s break some of it down:

• Our onNodesDelete callback is called with one argument - deleted - that is an array of every node that was just deleted. If you select an individual node and press the delete key, deleted will contain just that node, but if you make a selection all the nodes in that selection will be in deleted.

• We create a new array of edges - remainingEdges - that contains all the edges in the flow that have nothing to do with the node(s) we just deleted.

• We create another array of edges by flatMapping over the array of incomers. These are nodes that were connected to the deleted node as a source. For each of these nodes, we create a new edge that connects to each node in the array of outgoers. These are nodes that were connected to the deleted node as a target.

Quick Reference