Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

In a hierarchical layout, how to constrain dimensions? #292

Open
jylertones opened this issue Jul 16, 2024 · 4 comments
Open

In a hierarchical layout, how to constrain dimensions? #292

jylertones opened this issue Jul 16, 2024 · 4 comments
Labels

Comments

@jylertones
Copy link

TLDR; for the lower two screenshots, how can I constrain the width of the parent node so that it doesn't stretch wider when the edges are pathed?

I'm trying to build a hierarchical layered model. For those interested, it portrays database schema information as it is replicated. As such, it has database tables and contain database columns. I want to show a database table and columns like this:

image
Customer is the table, the others are columns inside of the table. For display, the table node is the hierarchical container for the columns, and they are the same width.

For some complex layouts, the edge bend points for the columns will go inside of the table node, thereby making the table wider than the columns and breaking the layout.

image

Or as seen in the Elk tool:
image

Elk Layout (sorry, you'll have to copy this into the tool as the link would not work): layout.json

ELK Version
Tested using 0.9.2 and 0.9.3

Things I have tried
I've tried various settings, but I've been unable to get the bend points to happen outside of the node. I've been unable to limit the width of the graph. I've also tried using ports and merging lines, but then I feel like I lose helpful information on the graph.

@soerendomroes
Copy link
Member

Hi, this is not directly possible because, we layout (most times) bottom up, meaning that the inner content is layouted first such that the bends are produced at the innermost node.

I suggest using explicit ports and not using hierarchyHandling: INCLUDE_CHILDREN as shown here. Additionally, you might want to set all spacings correct and maybe set portConstraints: FIXED_POS and set the desired positions of ports.

Configuring the layout to layout top-down instead of bottom up might also work. Maybe @Eddykasp can make a minimal example for this and explain how to apply the scaling values for this.

@soerendomroes
Copy link
Member

Maybe this also a better example that additionally sets spacing and padding.

@soerendomroes
Copy link
Member

I have another model here that uses a few different configurations that might be interesting to try out.

@soerendomroes
Copy link
Member

Or do you want something like this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants