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

Help in configuring layout #285

Open
manansoni77 opened this issue Jun 17, 2024 · 4 comments
Open

Help in configuring layout #285

manansoni77 opened this issue Jun 17, 2024 · 4 comments
Labels

Comments

@manansoni77
Copy link

manansoni77 commented Jun 17, 2024

Hi!

I have a dataset of nodes which are logically connected to each other, and my goal is to auto layout them in a similar manner.

Manually laid out nodes -
image

When trying to auto layout the same nodes, I am getting results which are very different.
Auto layout results (left to right)

layoutOptions = {
    'elk.algorithm': 'layered',
    'elk.layered.spacing.nodeNodeBetweenLayers': '100',
    'elk.spacing.nodeNode': '80',
    'elk.direction': 'RIGHT',
    'elk.layered.nodePlacement.strategy': 'NETWORK_SIMPLEX'
  };

image
(part of graph cut off)

Upon investigation, found that upon removing all edges from 'peach node' to 'green node' (this creates a cycle between the two), the layout works better.
image

To solve this issue, tried a few methods (given here) which are supposed to better format and resolve cycles. The one that made some improvement was cycleBreaking.strategy: MODEL_ORDER.

layoutOptions = {
    'elk.algorithm': 'layered',
    'elk.layered.spacing.nodeNodeBetweenLayers': '100',
    'elk.spacing.nodeNode': '80',
    'elk.layered.nodePlacement.strategy': 'NETWORK_SIMPLEX',
    'elk.progressBar': true,
    'elk.validateOptions': true,
    'elk.zoomToFit': true,
    'elk.direction': 'RIGHT',
    'elk.layered.cycleBreaking.strategy': 'MODEL_ORDER',
    'considerModelOrder.strategy': 'NODES_AND_EDGES'
  };

image
(part of graph cutoff)

Need help in improving the configuration for solving this issue, and improving the auto layout to better match the manually laid out graph.

version
"elkjs": "^0.9.3"

@soerendomroes
Copy link
Member

I suggest to use partitioning to assign each node to its vertical layer. If the vertical order should also be constrained, I suggest considerModelOrder.strategy: NODES_AND_EDGES and forceNodeModelOrder: true.

This blogpost summarizes everything about constraining the layout in ELK. If there is something missing, please let me know.

@manansoni77
Copy link
Author

Hi, thankyou for the suggestions, "partitioning" works well for database for known database.

But, if we are dealing with unknown databases, it will not be the best solution.

One example that I found in elk demonstrations, which looks similarly complex, and is well laid out is this, but I can not find the configuration used for it. Can you tell if it is available, and where?

Secondly, is there a configuration option, which can set a root node for graph? Or an option which can tell the layout engine to ignores backward edges (as in edges which cause formation of a cycle in graph)? Because then (as mentioned in the first comment) all edges from "peach node" back to "green node" will be ignored (which was the problem initially) and the auto layout will work very well.

@soerendomroes
Copy link
Member

Can you tell if it is available, and where?

See https://github.com/eclipse/elk-models/blob/master/realworld/ptolemy/flattened/aspect_cartrackingattackmodeling_CarTrackingAttackModeling.json

Secondly, is there a configuration option, which can set a root node for graph?

If I understand your problem correctly, you can set layerConstraint: FIRST https://eclipse.dev/elk/reference/options/org-eclipse-elk-layered-layering-layerConstraint.html to constrain a node to the first layer (meaning at the left if the layout direction is left-to-right) of the drawing.

@soerendomroes
Copy link
Member

You can ignore edges by setting noLayout: true, which just creates an edge from center to center without considering to "layout" it.

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