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.
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.
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.
For brevity, we’re using object destructuring while at the same time renaming
the variable bound (e.g. ({ id: source }) => ...) destructures the id
property of the object and binds it to a new variable called source) but you
don’t need to do this