[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