Max graph width and node 'wrap'

[robclouth]

Is there a way to specify a maximum graph width, beyond which the nodes are wrapped so that they stay inside the bounds? Kind of like word wrap in text editors.

[uruuru]

When you say width, do you refer to a left-to-right layout?

[robclouth]

I mean a top to bottom layout. If nodes are on the same level, they are positioned horizontally; I'm asking if there is an option to limit the maximum horizontal width, and push any nodes that are outside that width onto the next level.

On Thu, May 19, 2016 at 12:34 PM, Ulf Rüegg notifications@github.com wrote:

When you say width, do you refer to a left-to-right layout?

— You are receiving this because you authored the thread. Reply to this email directly or view it on GitHub https://github.com/OpenKieler/klayjs/issues/14#issuecomment-220287669

[robclouth]

So that they 'wrap' like the words do in text editors when the line is too long.

On Thu, May 19, 2016 at 2:31 PM, Robert Clouth rob.clouth@gmail.com wrote:

I mean a top to bottom layout. If nodes are on the same level, they are positioned horizontally; I'm asking if there is an option to limit the maximum horizontal width, and push any nodes that are outside that width onto the next level.

On Thu, May 19, 2016 at 12:34 PM, Ulf Rüegg notifications@github.com wrote:

When you say width, do you refer to a left-to-right layout?

— You are receiving this because you authored the thread. Reply to this email directly or view it on GitHub https://github.com/OpenKieler/klayjs/issues/14#issuecomment-220287669

[uruuru]

Sadly not. There are some solutions to this in the literature and we are working on features ourselves, but I cannot say if there will be something added in the near future.

Depending on the structure of your graph you may be able to work around the issue by introducing dummy edges for the layout only to force nodes to different layers.

[robclouth]

Thanks. What generally makes the nodes go onto another level? The number of edges?

On Thu, May 19, 2016 at 2:47 PM, Ulf Rüegg notifications@github.com wrote:

Sadly not. There are some solutions to this in the literature and we are working on features ourselves, but I cannot say if there will be something added in the near future.

Depending on the structure of your graph you may be able to work around the issue by introducing dummy edges for the layout only to force nodes to different layers.

— You are receiving this because you authored the thread. Reply to this email directly or view it on GitHub https://github.com/OpenKieler/klayjs/issues/14#issuecomment-220313736

[uruuru]

Pairs of nodes connected by an edge must not be on the same level (also layer). There are different strategies that are explained in more detail in our wiki. See the section on Phase 2: Layering.

[robclouth]

Hmmm ok. So potentially I could perform layout then if any node x position is over the maximum width, connect it to another one on the same y with an invisible dummy connection.

On Thu, May 19, 2016 at 3:51 PM, Ulf Rüegg notifications@github.com wrote:

Pairs of nodes connected by an edge must not be on the same level (also layer). There are different strategies that are explained in more detail in our wiki https://rtsys.informatik.uni-kiel.de/confluence/display/KIELER/The+Five+Phases. See the section on Phase 2: Layering.

— You are receiving this because you authored the thread. Reply to this email directly or view it on GitHub https://github.com/OpenKieler/klayjs/issues/14#issuecomment-220330215

[uruuru]

For instance.

[forresto]

Max width would be useful for direction: 'RIGHT' as well... I'd like to have this graph "wrap" with window width:

As I resize the browser window, I'd like to pass in a maxWidth and relayout, and klay would decide the height.

[uruuru]

Agree. For path-like graphs we already support such a wrapping and are working on something that would help your graph as well. I assume by wrapping with the window you mean that the flow should first return from the very right to the left-most position of the window?

[idea-launch-lab]

We have similar need for left-to-right graphs that are too long. Current behavior is to scale the graph so that complete graph is visible, but an option that 'wraps' graph would be great to have. However, one possible issue is how to handle nested groups. Below is a typical graph we are visualizing...

Thanks.

[uruuru]

@sid-thakur thanks for the example. The nested nodes are indeed an interesting problem. I'll think about it.

[uruuru]

In elkjs there are two options which address these use cases:

• for top-down layout with restricted width the COFFMAN_GRAHAM layering strategy can be used alongside the layerBound option. Note however that only the number of real nodes can be restricted (i.e. edges are not considered).
• for the left-right layout with restricted width the Graph Wrapping can be used.

I haven't thought about @sid-thakur's example yet but it seems to be rather challenging to me.