Issue with Node Positioning and Container Wrapping in TreeLayout

[Jennygra]

Introduction

When using the TreeLayout with Angular, I'm having trouble locating nodes inside of containers. The nodes and containers are not acting as I would like them to in terms of their locations and the links that connect them.

Scenario 1: After creating links, the child nodes get new positions, but they are spread out instead of being stacked. The nodes are outside of their containers because the containers stay in their original placements. Every container is piled on top of the others. But shifting a container also affects its offspring nodes, which is correct.

Situation 2: In the event that no links are made, nodes stay inside their containers but all nodes and containers overlap at the starting point.

The intended result is for child nodes to be stacked inside of parent containers.
Links ought to correctly join the child nodes without changing where they are located inside the containers.
Container having correct position.

I appreciate your help.

Library version: 4.0.0
Angular version: 15.1.2
Layout used: TreeLayout
Router used: Manhatten with standard.Link

Steps to reproduce

protected createNodeLink() {
    this.data$.subscribe((res) => {
        const nodes = res.nodes;
        const links = res.links;
        const nodesMap = new Map<number, shapes.standard.Rectangle>();

        nodes?.forEach((nodeData) => {
            const rect = this._nodeLinkService.createNode(nodeData);
            this._graph.addCell(rect);
            nodesMap.set(nodeData.id, rect);
        });
        
        // Grouping
         const groupedNodes = this.groupBy(nodes, "processName");
         this.addGroups(groupedNodes);
        
        // Create links
        links?.forEach((linkData, index) => {
            const sourceNode = nodesMap.get(linkData.source);
            const targetNode = nodesMap.get(linkData.target);

            if (sourceNode && targetNode) {
                const link = this._nodeLinkService.createLink(
                    sourceNode,
                    targetNode,
                    index
                );
                this._graph.addCell(link);
            } else {
                console.error("Failed to create link: Node not found.");
            }
        });

        this.setupInteractions();
        this.initializeLayout();
    });
}

// Method to add groups/containers
protected addGroups(nodeGroups: any[]) {
    Object.entries(nodeGroups).forEach(([groupName, nodes], groupIndex) => {
        if (groupName === "null") return;

        const nodeIds = nodes.map((node) => node.id);
        const allNodes = this._graph.getElements();
        const matchedElements = allNodes.filter((node) => nodeIds.includes(node.attributes?.data?.id));
        const container = this._nodeLinkService.createContainerElement(groupName);

        this._graph.addCell(container);
        container.embed(matchedElements);

        let yOffset = 40;
        const xOffset = 10;

        matchedElements.forEach((node, index) => {
            node.position(xOffset, yOffset);
            yOffset += node.size().height + 20;
        });

        container.fitToChildren({
            padding: { left: 15, right: 15, top: 60, bottom: 20 },
        });

        const bbox = container.getBBox();
        container.position(bbox.x, bbox.y);
    });
}

private initializeLayout() {
   const graphLayout = new layout.TreeLayout({
                graph: this._graph,
                direction: "R",
                parentGap: 120,
            });
            
             graphLayout.layout();
}

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS+

[kumilingus]

Could you please provide a screenshot of the desired result (preferably for a smaller dataset)?

[Jennygra]

I want to achieve a layout similar to the Tournament Brackets demo, where the nodes are stacked within their respective containers, and links are created between the nodes without overlapping. Additionally, the layout should remain interactive as it is now.

[kumilingus]

Could you manually create a diagram that looks like what you are trying to achieve automatically? I'm not sure what to look for in this picture.

---

Is your diagram a tree? The TreeLayout is mean to be used with the tree graphs only.

The DirectedGraph can position and resize the clusters for you if you enable resizeClusters option.

Here's a combination of TreeLayout and containers: https://www.jointjs.com/demos/corporate-organizational-chart
Here's a combination of DirectedGraph and GridLayout: https://www.jointjs.com/demos/jointjs-layouts

[Jennygra]

DirectedGraph fixed the issue with layout, and container not wrapping it childeren. Thanks! But I realized that the links is no longer interactable when I'm using DirectedGraph and StackLayout, is there any restriction?

[kumilingus]

Using DirectedGraph or StackLayout does not affect the paper interactivity.

[Jennygra]

I'm still having trouble to find out why the links isn't interactable, could you please have a look at the codepen, and point out the issue?

[kumilingus]

If you want users to be able to change the shape of the link or remove links, you need to add link tools.