[Question] Position of elements with mix of nested elements and single nodes

[danutzcodrescu]

Ask your questions

Hello, I am quite noobie with elkjs. I am trying to create a graph with some nested elements inside that is center aligned. The main problem is that the last element is not aligned with the rest of the graph and the edge starts from left side of the north port instead of center like for the rest of the graph. If I remove includeChildren option then last is properly aligned with parent but the entire parent block with nested objects is put on the side instead of bottom up layout. Anybody has any ideas/suggestions on how I can properly align the nodes? Thanks a lot!

I have a reproducible here

If it is easier here is the json config:

{
    "id": "hierarchyBottomUp",
    "layoutOptions": {
        "elk.layered.spacing.nodeNodeBetweenLayers": "50",
        "elk.spacing.nodeNode": "50",
        "elk.spacing.edgeNode": "5",
        "elk.layered.mergeEdges": "true",
        "elk.edgeRouting": "SPLINES",
        "elk.alignment": "CENTER",
        "elk.layered.allowNonFlowPortsToSwitchSides": "true",
        "elk.nodeSizeOptions": "COMPUTE_PADDING",
        "elk.spacing.edgeEdge": "5",
        "algorithm": "layered",
        "elk.direction": "UP",
        "elk.hierarchyHandling": "INCLUDE_CHILDREN"
    },
    "children": [
        {
            "id": "0190ee8a-8756-7b2b-a46e-7a12b63dbbd6",
            "layoutOptions": {
                "elk.padding": "[left=5, top=50, right=5, bottom=10]",
                "elk.nodeLabels.placement": "INSIDE V_TOP H_CENTER"
            },
            "labels": [{text: "Parent"}],
            "children": [
                {
                    "layoutOptions": {
                        "elk.padding": "[left=5, top=50, right=5, bottom=10]"
                    },
                    "id": "0190ee8a-8756-7b2b-a46e-7a12b63dbbd5",
                    "children": [
                        {
                            "layoutOptions": {
                                "elk.padding": "[left=5, top=130, right=5, bottom=10]"
                            },
                            "id": "0190ee8a-8756-7b2b-a46e-7a12b63dbbcf",
                            "children": [],
                            "width": 100,
                            "height": 144
                        }
                    ]
                }
            ]
        },
        {
            "id": "0190ee8a-8756-7b2b-a46e-7a12b63dbbd0",
            "layoutOptions": {
                "elk.padding": "[left=5, top=130, right=5, bottom=10]"
            },
            "width": 100,
            "height": 144
        },
        {
            "id": "0190ee8a-8756-7b2b-a46e-7a12b63dbbd1",
            "layoutOptions": {
                "elk.padding": "[left=5, top=130, right=5, bottom=10]"
            },
            "width": 100,
            "height": 144
        },
        {
            "id": "0190ee8a-8756-7b2b-a46e-7a12b63dbbd2",
            "layoutOptions": {
                "elk.padding": "[left=5, top=130, right=5, bottom=10]"
            },
            "width": 100,
            "height": 144
        },
        {
            "id": "0190ee8a-8756-7b2b-a46e-7a12b63dbbd3",
            "layoutOptions": {
                "elk.padding": "[left=5, top=90, right=5, bottom=10]"
            },
            "width": 100,
            "height": 104
        },
        {
            "id": "0190ee8a-8756-7b2b-a46e-7a12b63dbbd4",
            "layoutOptions": {
                "elk.padding": "[left=5, top=90, right=5, bottom=10]"
            },
            "width": 100,
            "height": 104
        },
        {
            "id": "0190ee8a-8756-7b2b-a46e-7a12b63dbbd7",
            "labels": [ {
                text: "last"
                
            }],
            "layoutOptions": {
                "elk.padding": "[left=5, top=50, right=5, bottom=10]",
                "elk.nodeLabels.placement": "INSIDE V_TOP H_CENTER"
            },
            "width": 100,
            "height": 64
        }
    ],
    "edges": [
        {
            "id": "acbd865a-a088-4840-bf54-bcf70b8aa408",
            "sources": [
                "0190ee8a-8756-7b2b-a46e-7a12b63dbbd4"
            ],
            "targets": [
                "0190ee8a-8756-7b2b-a46e-7a12b63dbbd4"
            ]
        },
        {
            "id": "c894b372-450e-46f8-928c-bde15ab0d4a2",
            "sources": [
                "0190ee8a-8756-7b2b-a46e-7a12b63dbbd4"
            ],
            "targets": [
                "0190ee8a-8756-7b2b-a46e-7a12b63dbbd3"
            ]
        },
        {
            "id": "018d80de-08b1-7f62-a3b9-c844f5c44662",
            "sources": [
                "0190ee8a-8756-7b2b-a46e-7a12b63dbbd3"
            ],
            "targets": [
                "0190ee8a-8756-7b2b-a46e-7a12b63dbbd2"
            ]
        },
        {
            "id": "018d80de-085b-79f5-aeca-b5959ca479cd",
            "sources": [
                "0190ee8a-8756-7b2b-a46e-7a12b63dbbd2"
            ],
            "targets": [
                "0190ee8a-8756-7b2b-a46e-7a12b63dbbd1"
            ]
        },
        {
            "id": "9bba5ff9-b267-476e-baf2-ac96c3159a28",
            "sources": [
                "0190ee8a-8756-7b2b-a46e-7a12b63dbbd1"
            ],
            "targets": [
                "0190ee8a-8756-7b2b-a46e-7a12b63dbbd0"
            ]
        },
        {
            "id": "b435503a-110e-4c8a-ad3b-737686d2d96a",
            "sources": [
                "0190ee8a-8756-7b2b-a46e-7a12b63dbbd0"
            ],
            "targets": [
                "0190ee8a-8756-7b2b-a46e-7a12b63dbbcf"
            ]
        },
        {
            "id": "27ec3a4f-e97b-4f57-9105-6bbe77f32388",
            "sources": [
                "0190ee8a-8756-7b2b-a46e-7a12b63dbbd6"
            ],
            "targets": [
                "0190ee8a-8756-7b2b-a46e-7a12b63dbbd7"
            ]
        }
    ]
}

(Optional) Expected behavior

I would like to have the last element, the top most one, to be center aligned like the rest of the graph instead of hanging like on the left.

(Optional) Screenshots
As you can see in the screenshot below the last node is not center aligned like the rest of the graph. I would the last node to be center aligned vs the parent node

(Optional) ELK Version
0.9.3

[Eddykasp]

I tried fiddling around with it a bit but I couldn't get the desired result. To turn off hierarchyHandling: includeChildren you need to split the edge up into multiple pieces for each hierarchy level. Here if you uncomment the ports and edges you can see how to do that. As for the alignment of top node maybe @soerendomroes has more insight into how to achieve the desired positioning.

[danutzcodrescu]

Thanks for looking into it. I played around as well, and it seems there is something that I am missing or don't fully grasp. In this simplified example if I am linking between 1 and 2 and 1 and 3 everything is properly aligned, or if I link between 111 and 2 and 111 and 3 (basically from the outside nodes to same nested node) then everything is properly aligned. It seems that if the on one side there is an edge from the parent while on the other side there and edge that starts/ends within a child it messes up the alignment. Even if i have edges linked to different children like 2 -> 11 and 3-> 111, then the alignment issue pops out. Is this how it is supposed to be?