Links overlap nodes after table panel expansion

[aabi91]

I have a diagram containing groups and nodes as shown in the image. Nodes have a table panel which is collapsible. By default table panel is collapsed and hence layout is drawn perfectly with no overlapping links.
Link template has routing: go.Link.AvoidsNodes

But as soon as the table panel is expanded, the links start overlapping the node.
After node expansion i have tried calling diagram.layoutDiagram() but it does not change anything.

How can we make sure that after panel expansion the diagram layout stays consistent and links are not overlapped?

[walter]

First, do you have any Groups in your Diagram?
Second, what is your Layout – how is it declared?
Third, what happens if you increase the space between the layers (columns) of nodes?
Fourth, does it matter if you disable the AnimationManager?

new go.Diagram(. . ., ,{ "animationManager.isEnabled": false, . . . })

[aabi91]

1. Yes i do have groups in the diagram. in the above image, f1_dataset is a group and circuits and constructor_results etc are the nodes.
2. We are using TreeLayout. it is defined while creating the diagram like

const diagram = $(Diagram, {
    layout: $(TreeLayout)
});

3. If i increase the spacing, the links overlapping is significantly reduced but is not entirely resolved. some of the links still overlap the nodes.
4. Yes, AnimationManager matters in our diagram. although if i disable it, it does not make any difference.

[walter]

Have you tried setting Group.avoidable to false?

[aabi91]

Yes, i have tried setting Group.avoidable. it still behaves the same. Some of the links are still overlapping the nodes.

In our diagram, groups always stay on the left hand side, so the links will never overlap the groups. The overlapping happens for the nodes that are in the middle(2nd, 3rd and so on) columns.

[walter]

Try setting TreeLayout.isRouting to false.

[aabi91]

Unfortunately, that does not help either.

I have tried to solve the issue by adjusting zOrder for groups, nodes and links. But that creates another problem.
I set the zOrder as follows.

Group = 1,
Link = 2,
Node = 3

Setting the zOrder do hide the overlapping links behind nodes but it does not show the links going in from a group to a node. please see the images for explanation.

Links when zOrder is not set. we can see that a link is connected to circuits node.

Links when zOrder is set. the circuits link is still there, but is not visible anymore.

How can we handle this problem so that the links are not hidden behind the group although link has higher zOrder value than group ?

[walter]

Normally to handle such layering it is easier to use Layers. In their respective templates set Group.layerName to “Background” and Node.layerName to “Foreground”. You can leave Links to be in the default Layer, which is in front of the “Background” and behind the “Foreground”.

Is there a way that I could reproduce the problem with links crossing over nodes? It would help if you could share a (possibly simplified) model and maybe your templates and diagram initialization too.

[aabi91]

changing the zOrder with the layerName solves the problem.

unfortunately it would be difficult to reproduce it with mocked data, because even in my diagram it only happens to this one node stg_f1_dataset__races in the image above, for all other nodes the links are not overlapping the nodes.