kieler / elkjs

ELK's layout algorithms for JavaScript
Other
1.81k stars 97 forks source link

Help in configuring layout #285

Open manansoni77 opened 5 months ago

manansoni77 commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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