Horizontal alignment of disjoint nodes in Swimlane

GoJS
1

Hi

I am trying to work on swimlanes where i have multiple nodes in multiple swimlanes and nodes are connected across the lanes. No node in one lane is connected.
Another scenario, where i have multiple nodes in one or multiple lanes, with no links between any nodes.

In both the cases, nodes are aligned vertically like this:

image.png328×640 15.1 KB

But, my requirement is to align the nodes horizontally like this:

Please suggest how this can be achieved, with and without links between nodes across the lanes.

Thanks.

2

Do you have a Group.layout for each lane? If so, what is it? The sample uses LayeredDigraphLayout, which is appropriate when almost all of the links are within the lane, not across lanes. (In a swimming pool you are supposed to stay within your lane.)

You may want to use a GridLayout instead.

3

Thanks @walter for the quick response.

I am using the same layout, LayeredDigraphLayout, as in the sample.

I have tried with GridLayout as well but with this, links are getting overlapped with nodes like this:

To be more clear about my requirement, i am looking for a layout which is best suited for visualizing something like this:

4

Instead of having each lane/Group have its own layout, you should have all of those Nodes and Links be laid out by a single layout. See for example Page Not Found -- Northwoods Software.

5

Yes, true. I want to use the single layout for each lane/Group.

I have seen the example Page Not Found -- Northwoods Software, but here lanes are aligned horizontally and growing vertically.

But my requirement is to have lanes aligned vertically and growing horizontally like this:

Could you please suggest how to achieve this and share some documents which can help me.
I have just started using GoJS, not very much familiar with go.js library usage.

6

You’ll need to adapt the code to exchange x with y and width with height.

See for example the differences between Swim Lanes and Swim Lanes (vertical).

7

Yes, i have checked that as well. But it didn’t help.

Could you please suggest which part of code in Swim Lanes is responsible adding nodes vertically in a lane (with or without links across lanes) like this :

image.png328×640 15.1 KB

8

It’s the LayeredDigraphLayout that is the Group.layout. When there are no links between the nodes, they all get laid out in a single layer. When the layout direction is horizontal, the layers are vertical.

9

Is there any way using which it is possible to have nodes in a grid layout format with multiple number of rows and columns within a lane, and,
Also, is it possible that number of rows and columns can be modified dynamically depending on the number of nodes within a lane?

10

That’s what GridLayout is for:

You can set the GridLayout.wrappingColumn dynamically, after adding or removing nodes.

11

Thanks @walter. I am able to achieve the some sort of layout as per my requirement by modifying the direction property of LayeredDigraphLayout.

But there is another problem which is troubling me. As you can see in the following diagram, links are merging/overlapping each other:

I want all the links to be visible separately without getting merged or overlapped with each other.
I have checked the links class, but couldn’t find any property which can provide the functionality to avoid links’ overlapping.

Could you please help?

Thanks.

12

Set LayeredDigraphLayout.setsPortSpots to false and set in your node template(s) on your port object GraphObject.fromSpot and toSpot to go.Spot.AllSides.

Please read GoJS Link Connection Points on Nodes -- Northwoods Software

13

Thanks @walter for the solution.

But, am still getting the same overlapped links.

I have done the following:

myDiagram.**groupTemplate** =
  $(go.Group, "Horizontal", groupStyle(),
    {   
     ...
      layout: $(go.LayeredDigraphLayout,  // automatically lay out the lane's subgraph
                {   
                  isInitial: false,  // don't even do initial layout
                  isOngoing: false,  // don't invalidate layout when nodes or links are added or removed
                  direction: 0, 
                  columnSpacing: 10, 

                  **setsPortSpots: false,**

                  layeringOption: go.LayeredDigraphLayout.LayerLongestPathSource
                }),    
     ...
    }

and

myDiagram.**nodeTemplate** =
  $(go.Node, "Auto",
    new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),

    **{ fromSpot: go.Spot.Right,**
      **toSpot: go.Spot.Left },**

    $(go.Shape, "Rectangle",
      { fill: "white", portId: "", cursor: "pointer", fromLinkable: true, toLinkable: true }),
    $(go.TextBlock, { margin: 5 },
      new go.Binding("text", "key")),
    { dragComputation: stayInGroup } // limit dragging of Nodes to stay within the containing Group, defined above
  );
14

Note that I said you need to set the spots on the port object, not necessarily on the Node.

15

Got it now, since portId was used in the nodeTemplate, it was behaving like a single port and not the whole node.
Once it is removed, i got the following:

Thanks for the support @walter.

16

Hi @walter,

Greetings!

Could you please suggest, how to increase the space between vertical links, currently they are getting overlapped like this (marked with red boxes and highlighted with blue):

image.png168×506 9.15 KB

I have tried to use “linkspacing” properties as follows:

myDiagram.groupTemplate =
  $(go.Group, "Horizontal", groupStyle(),
    {
      ...
      layout: $(go.LayeredDigraphLayout,  // automatically lay out the lane's subgraph
                {
                  isInitial: false,  // don't even do initial layout
                  isOngoing: false,  // don't invalidate layout when nodes or links are added or removed
                  direction: 0,
                  columnSpacing: 10,
                  setsPortSpots: false,
                  layeringOption: go.LayeredDigraphLayout.LayerLongestPathSource,

                  **linkSpacing**: 10

                }),
       ...
       },
       ...
      );

But, there is no effect of this property on the space between links, they are still overlapping.

Please help.

Thanks.

17

What is your link template?

18

Here is it, Link template:

	    	    myDiagram.linkTemplate =
	    	      $(go.Link,
	    	        { routing: go.Link.AvoidsNodes, corner: 5, smoothness: 1.0 },
	    	        { relinkableFrom: false, relinkableTo: false },
	    	        $(go.Shape),
	    	        $(go.Shape, { toArrow: "Standard" }),
	    	        { // this tooltip Adornment is shared by all links
	    	            toolTip:
	    	              $(go.Adornment, "Auto",
	    	                $(go.Shape, { fill: "#FFFFCC" }),
	    	                $(go.TextBlock, { margin: 4 },
	    	                  new go.Binding("text", "", linkInfo))
	    	              )
	    	        }
	    	      );
19

AvoidsNodes routing does not let you control overlapping link segments. (The functionality only tries to have links avoid crossing over nodes, not other links.) Sorry.

You can however try to fix up the routing afterwards, based on whatever is desired in your particular app.

20

Oh, alright.

What is meant by “fix up the routing afterwards” ?

My requirement is to have nodes and links alignment something like this:

image.png849×622 24.1 KB

Is it possible to place nodes in this manner, if yes, then using which type of layout?
And, How can i get such links’ visualization.

Please help.

Thanks.