Bug: Edges with a target node equaling the source node should display as a loopback edge which can be selected

[ajbogh]

Describe the bug
When an edge's sourceNode and targetNode are the same, currently the edge is rendered as a point with an arrow hanging off it. This point is not selectable, so the edge cannot be deleted.

To Reproduce
Steps to reproduce the behavior:

1. Using the data, create an edge that has the same source and target node.
2. Attempt to delete it.

Expected behavior
The edge should be allowed to exist (although there should be no way to create one in react-digraph)

Instead of rendering the edge as a point, make it a line that exits the source node and then returns to the source node in a different position (exit at right, return at top). Provide enough space to allow the user to select the edge for deletion.

[MrF3lix]

Hey @ajbogh
I have a working solution for this and could create a PR if you'd like to.

As far as I understand you'd like the expected behaviour to be that loopback edges are allowed but cannot be created? Right now I have a solution that would allow the creation of these loopback edges through react-digraph.

[ajbogh]

That would be great. If you can also create a loopback within the UI then that is perfect.

Please include this as a parameter to enable this new functionality so we are backwards compatible.

[MrF3lix]

I created the PR. Right now the allowLoopbackEdge only restricts the creation of loopbacks within the UI.
Should it also restrict drawing them if they already exists in the data?

[marvindv]

Any news on this? Thanks!

[ajbogh]

@adriannesoike @ksnyder9801.

[adriannesoike]

Thanks for the tag @ajbogh.

@MrF3lix added a couple comments to your diff.