[Question] How do you make edges avoid touching each other?

[nullromo]

Ask your questions

I want to use ELK to route edges such that they look distinguishable from one another and don't overlap nodes.

Here is what I have so far.

Screenshot

JSON

{
    "id": "n0",
    "children": [
        { "id": "s1", "labels": [{ "text": "s1" }], "width": 80.0, "height": 230.0,
            "children": [
                { "id": "s1c1", "labels": [{ "text": "p1" }], "x": 10.0, "y": 10.0, "width": 20.0, "height": 20.0, "ports": [
                        { "id": "s1c1p1", "width": 5, "height": 5, "properties": { "port.side": "WEST", "port.index": "1" } },
                        { "id": "s1c1p2", "width": 5, "height": 5, "properties": { "port.side": "EAST", "port.index": "2" } } ] },
                { "id": "s1c2", "labels": [{ "text": "p2" }], "x": 50.0, "y": 10.0, "width": 20.0, "height": 20.0, "ports": [
                        { "id": "s1c2p1", "width": 5, "height": 5, "properties": { "port.side": "WEST", "port.index": "1" } },
                        { "id": "s1c2p2", "width": 5, "height": 5, "properties": { "port.side": "EAST", "port.index": "2" } } ] },
                { "id": "s1c3", "labels": [{ "text": "p3" }], "x": 10.0, "y": 50.0, "width": 20.0, "height": 20.0, "ports": [
                        { "id": "s1c3p1", "width": 5, "height": 5, "properties": { "port.side": "WEST", "port.index": "1" } },
                        { "id": "s1c3p2", "width": 5, "height": 5, "properties": { "port.side": "EAST", "port.index": "2" } } ] },
                { "id": "s1c4", "labels": [{ "text": "p4" }], "x": 50.0, "y": 50.0, "width": 20.0, "height": 20.0, "ports": [
                        { "id": "s1c4p1", "width": 5, "height": 5, "properties": { "port.side": "WEST", "port.index": "1" } },
                        { "id": "s1c4p2", "width": 5, "height": 5, "properties": { "port.side": "EAST", "port.index": "2" } } ] }
            ],
            "layoutOptions": { "algorithm": "rectpacking" }
        },
        { "id": "s2", "labels": [{ "text": "s2" }], "width": 80.0, "height": 400.0,
            "children": [
                { "id": "s2c1", "labels": [{ "text": "p1" }], "x": 10.0, "y": 10.0, "width": 20.0, "height": 20.0, "ports": [
                        { "id": "s2c1p1", "width": 5, "height": 5, "properties": { "port.side": "WEST", "port.index": "1" } },
                        { "id": "s2c1p2", "width": 5, "height": 5, "properties": { "port.side": "EAST", "port.index": "2" } } ] },
                { "id": "s2c2", "labels": [{ "text": "p2" }], "x": 50.0, "y": 10.0, "width": 20.0, "height": 20.0, "ports": [
                        { "id": "s2c2p1", "width": 5, "height": 5, "properties": { "port.side": "WEST", "port.index": "1" } },
                        { "id": "s2c2p2", "width": 5, "height": 5, "properties": { "port.side": "EAST", "port.index": "2" } } ] },
                { "id": "s2c3", "labels": [{ "text": "p3" }], "x": 10.0, "y": 50.0, "width": 20.0, "height": 20.0, "ports": [
                        { "id": "s2c3p1", "width": 5, "height": 5, "properties": { "port.side": "WEST", "port.index": "1" } },
                        { "id": "s2c3p2", "width": 5, "height": 5, "properties": { "port.side": "EAST", "port.index": "2" } } ] },
                { "id": "s2c4", "labels": [{ "text": "p4" }], "x": 50.0, "y": 50.0, "width": 20.0, "height": 20.0, "ports": [
                        { "id": "s2c4p1", "width": 5, "height": 5, "properties": { "port.side": "WEST", "port.index": "1" } },
                        { "id": "s2c4p2", "width": 5, "height": 5, "properties": { "port.side": "EAST", "port.index": "2" } } ] }
            ],
            "layoutOptions": { "algorithm": "rectpacking" }
        },
        { "id": "s3", "labels": [{ "text": "s3" }], "width": 80.0, "height": 100.0,
            "children": [
                { "id": "s3c1", "labels": [{ "text": "p1" }], "x": 10.0, "y": 10.0, "width": 20.0, "height": 20.0, "ports": [
                        { "id": "s3c1p1", "width": 5, "height": 5, "properties": { "port.side": "WEST", "port.index": "1" } },
                        { "id": "s3c1p2", "width": 5, "height": 5, "properties": { "port.side": "EAST", "port.index": "2" } } ] },
                { "id": "s3c2", "labels": [{ "text": "p2" }], "x": 50.0, "y": 10.0, "width": 20.0, "height": 20.0, "ports": [
                        { "id": "s3c2p1", "width": 5, "height": 5, "properties": { "port.side": "WEST", "port.index": "1" } },
                        { "id": "s3c2p2", "width": 5, "height": 5, "properties": { "port.side": "EAST", "port.index": "2" } } ] },
                { "id": "s3c3", "labels": [{ "text": "p3" }], "x": 10.0, "y": 50.0, "width": 20.0, "height": 20.0, "ports": [
                        { "id": "s3c3p1", "width": 5, "height": 5, "properties": { "port.side": "WEST", "port.index": "1" } },
                        { "id": "s3c3p2", "width": 5, "height": 5, "properties": { "port.side": "EAST", "port.index": "2" } } ] },
                { "id": "s3c4", "labels": [{ "text": "p4" }], "x": 50.0, "y": 50.0, "width": 20.0, "height": 20.0, "ports": [
                        { "id": "s3c4p1", "width": 5, "height": 5, "properties": { "port.side": "WEST", "port.index": "1" } },
                        { "id": "s3c4p2", "width": 5, "height": 5, "properties": { "port.side": "EAST", "port.index": "2" } } ]
                }
            ],
            "layoutOptions": { "algorithm": "rectpacking" }
        }
    ],
    "layoutOptions": { "elk.algorithm": "layered" },
    "edges": [
        { "id": "e0", "sources": ["s1c2p2"], "targets": ["s2c1p1"] },
        { "id": "e1", "sources": ["s1c3p2"], "targets": ["s1c4p1"] },
        { "id": "e2", "sources": ["s1c4p2"], "targets": ["s2c3p1"] },
        { "id": "e3", "sources": ["s2c4p2"], "targets": ["s3c3p1"] },
        { "id": "e4", "sources": ["s2c3p2"], "targets": ["s2c2p1"] },
        { "id": "e5", "sources": ["s3c3p2"], "targets": ["s3c4p1"] },
        { "id": "e6", "sources": ["s2c2p2"], "targets": ["s1c1p1"] }
    ]
}

Question

What settings do I need to use to get the edges to start and end at the proper locations, but avoid passing through nodes and avoid overlapping each other?

Expected behavior

I want something more like this

It could also look like this

ELK Version

@latest (0.11.0)

Additional context

For my particular application, I have the following constraints:

1. The p nodes are not allowed to be re-arranged within the s containers. They must remain in numbered order. Basically I already laid out the exact positions for the p nodes within the s container, so I don't want that getting adjusted.
2. The s nodes can be shifted, but they should maintain the same relative order. They can move vertically or horizontally. Right now they are in the wrong order. Their heights might change, but they should still keep the order.