Group Layout with fixed group height and no wrapping


I am trying to create a swim lane diagram based on input data using GoJS (I have taken the swim lane sample from the GoJS site and am customizing it). I want all the lanes to have same width and height. The lanes should only expand to the right and nodes should not wrap around to the next row in the lane.

I have created a group template for lanes and have set the layout to go.LayeredDigraphLayout. However
the nodes are wrapping to the next row after certain width, moreover if any node do not have any links(as per the input data) then it always appears in the next row in the lane.

Please suggest how can I fix this.


Can you show me what you’re seeing in a Codepen?

And could you sketch how you want those nodes to be arranged within the swimlane?

What should happen when the swimlane, which you say should have a fixed height, isn’t tall enough to hold the nodes after the layout?

Hi Walter

I want the nodes in the lane to fall on a single line expanding to the right (please refer to the top part of the diagram above where 3 nodes are placed on the same row). If the nodes come in one row (and don’t wrap-around to the second row)
then the height of the lanes can be fixed. The node arrangement in lanes should be like shown in the attached image.

However some of the nodes may not have any links. The issue is those nodes (which don’t have links) are wrapping to the rows below the first row and thereby increasing the height of the lane. What I need is

  1. Making all nodes in the lane to appear on a single row (only expanding horizontally from left to right keeiping the lane height intact). This should happen even if some of the nodes do not have links.

  2. If some of the nodes don’t have links then the links between other nodes should marginally bypass the connectionless ndoes to possibly connect other nodes on the lane.

  3. What is a good way for setting the lane height (i.e. the group height) to a fixed value

The second diagram is the case when all the nodes have links and the nodes are falling in a single line. The first diagram is a case where some of the nodes don’t have links and that is causing the nodes to appear in separate lines which I want to avoid

The complete snapshot snapshot of the second diagram (the good case where all the nodes are connected)

I suggest that you set the Group.layout to:

$(go.TreeLayout, { arrangement: go.TreeLayout.ArrangementHorizontal })