elkjs
elkjs copied to clipboard
In layered hierarchical graph, spacing between nested nodes and node padding is not always applied.
Hi, I'm witnessing problems with spacing related layoutOptions on nested nodes. Using [email protected]
- The option
elk.spacing.nodeNode
is not always working for neighbor nodes inside a group. Couldn't figure out the logical condition to reproduce, but I have this demo graph. Seems like a specific combination of edges crossing hierarchy can reproduce this
Expecting here the horizontal spacing between node_1 and node_2 to be 150, as set on the parent node "group_1". Instead, it's the default spacing of 20.
- The layoutOption
elk.padding
is also sometimes ignored on group nodes. Specifically the top padding. Here
The top padding on both "group_1" and "group_2" is set to be 0.
However, on group_1 it's the actual padding of 20. If I change the padding definition, the inner group_1 will keep adding 20 to whatever value is set in elk.padding
. (in this simulator it's adding 21 but in my app, it was 20...)
Also, I have another "group inside group" case where the same problem reproduces for the outer group but not for the inner group. Here it also seems to be complex to reproduce. It's enough to remove some of the edges and the problem stops reproducing...
Any ideas? Could it be a side effect of the same bug somether in hierarchical layout?
I found a workaround for the problem with elk.spacing.nodeNode
.
It happens to reproduce for neighbor nodes that have an edge passing between them.
Defining elk.spacing.edgeNode
as half of the value of elk.spacing.nodeNode
can roughly estimate the desired spacing. However, if more edges are passing between the nodes, the spacing will increase, so it's not ideal...
Not sure if it helps, but I could fix some layouting issues for sub flows / nested nodes by passing the options to the defaultLayoutingOptions
.
This works for all nodes (including child nodes):
const elk = new ELK({
defaultLayoutOptions: {
'elk.padding': '[left=50, top=50, right=50, bottom=100]',
'elk.spacing.nodeNode': '75.0',
'elk.layered.spacing.nodeNodeBetweenLayers': '100.0',
},
workerUrl: '/elk-worker.min.js',
});
This doesn't work for child nodes:
const graph = {
id: 'root',
layoutOptions: {
'elk.padding': '[left=50, top=50, right=50, bottom=100]',
'elk.spacing.nodeNode': '75.0',
'elk.layered.spacing.nodeNodeBetweenLayers': '100.0',
}
// ...
};
@moklick , Thanks for the advice. I've been using the defaultLayoutOptions too. Specifically for the padding, the values are different for each group node in my case, so I'm setting this config on layoutOptions directly under the group node.
Ahh :D I think I got it wrong.. The layout options only work for that specific level when you define it at the group node.
It is a general problem and does not only effect nested nodes as seen in https://github.com/eclipse/elk/issues/846