Horizontal swimlane diagram using angular framework

[sindhu]

Hi Team,

I am trying to work on swimlanes where i have multiple nodes in multiple swimlanes and nodes are connected across and within the lanes.

Nodes can be of any shape/images/icons. My requirement is to align the nodes horizontally as below.

or

I’m using angular as UI framework. Please suggest how this can be achieved and if possible please share sample source code and the required library details with specific versions for the same.

[walter]

Are you asking how to get such arrangement automatically? If so, that is the responsibility of the layout. If not, and if you are asking about when the user moves nodes, perhaps you could turn on DraggingTool.isGridSnapEnabled.

In your second screenshot, the first and third columns of nodes are not lined up vertically. And the third column in the first screenshot too. Is that intentional and desired?

[sindhu]

Yeah.I need to get such arrangements automatically.I’ll get json format of data from API.Json format almost looks like this
{
“nodesSource”: [
{
“id”: “0”,
“lane”: “lane0”
},
{
“id”: “1”,
“lane”: “lane1”
},
{
“id”: “2”,
“lane”: “lane2”
},
{
“id”: “3”,
“lane”: “lane0”
},
{
“id”: “4”,
“lane”: “lane1”
},
{
“id”: “5”,
“lane”: “lane2”,

},
{
  "id": "6",
  "lane": "lane1",
  
},

],
“edgesSource”: [
{
“from”: “0”,
“to”: “1”
},
{
“from”: “1”,
“to”: “2”
},
{
“from”: “0”,
“to”: “3”
},
{
“from”: “3”,
“to”: “4”
},
{
“from”: “3”,
“to”: “6”
},
{
“from”: “5”,
“to”: “6”
},

{
  "from": "2",
  "to": "5"
},
{
  "from": "4",
  "to": "5"
},
{
  "from": "4",
  "to": "6"
},

],
“lanesSource”: [
{
“id”: “lane0”,
“label”: “Lane 1”
},
{
“id”: “lane1”,
“label”: “Lane 2”
},
{
“id”: “lane2”,
“label”: “Lane 3”
}
]
}
So there is only one pool,which is having multiple nodes in multiple swimlanes and nodes are connected across and within the lanes.Nodes can be of any shape/images/icons. When we click/hover on any of the node it should display information about the particular node. My requirement is to align the nodes horizontally as below

I’m using angular as UI framework. Please suggest how this can be achieved and if possible please share sample source code/reference documents and the required library details with specific versions for the same.

[walter]

OK, I can come up with a sample when I have time. Maybe tomorrow.

[walter]

Here you go: Flowchart Layout
The implementation is in that page except for a dependency on one additional class, FlowchartLayout, that is in https://gojs.net/temp/FlowchartLayout.js.

I did move the lanesSource property to the Model.modelData object, since there’s no built-in model that has a property like “lanesSource”. An alternative used by a number of GoJS samples puts that information as a node data object in the Model.nodeDataArray.

This code is somewhat complicated, so it may take you a while to learn enough about it to be able to modify it comfortably. If you haven’t already, please read Get Started with GoJS and GoJS Introduction -- Northwoods Software.

The result is:

Note that the graph given by your model data is not the same as the graph in your screenshot. Tricky.

[sindhu]

Thanks for the response!!

If swimlane diagram having these properties:
 properties for display (for nodes and edges).When we click/hover on nodes/edges it will display particular node/edge information(As my understanding node/edge information can include in JSON structure).
 information to display different icons/shapes/images for different nodes.
 Controll the thickness of connected lines between the nodes.
 undirected and directed connected lines between the nodes.
Should we need to include information about thickness of the connected lines,icon/shape/image for the node and undirected connected lines in the JSON?
Then What is the required JSON structure? or how we can achieve this.
So that design will fulfill all the above requirement.
Below is the sample diagram.

Thanks and Regards
Sindhu

[walter]

I think all of those questions are about the appearance and behavior of the nodes and the links. That is entirely controlled by the node templates and link templates that you define.

If you haven’t already read Get Started with GoJS, please do so. You can then read more at GoJS Introduction -- Northwoods Software about the specific topics you are asking. For example, GoJS Using Models -- Northwoods Software provides general information about how to set up and use your model.

You will be using a GraphLinksModel. As long as you have an Array holding an object for each node (including groups) and an Array of objects describing each link, you’ll be fine. You have complete flexibility for what properties to put on each object, although there are default property names that are used.

[sindhu]

Hi Walter,
Thanks for all the information!!I’m able to control thickness and directed/undirected links.

I’m facing some issues regarding link overlapping.

• Link –Link overlapping:If I use go.Link to AvoidsNodes then link to link overlap is happening.Below is the link template:
  myDiagram.linkTemplateMap.add(“directed”,
  (go.Link, { routing: go.Link.AvoidsNodes, curve: go.Link.JumpOver }, (go.Shape,
  new go.Binding(“strokeWidth”, “width”),
  new go.Binding(“strokeDashArray”, “dash”)),
  $(go.Shape,
  {
  fill: “black”,
  stroke: null,
  toArrow: “Standard”,
  }),
  ));
  
  
• Link –node overlapping:If I use go.Link to Orthogonal then link to node overlap is happening.Below is the link template:
  myDiagram.linkTemplateMap.add(“directed”,
  (go.Link, { routing: go.Link.Orthogonal, curve: go.Link.JumpOver }, (go.Shape,
  new go.Binding(“strokeWidth”, “width”),
  new go.Binding(“strokeDashArray”, “dash”)),
  $(go.Shape,
  {
  fill: “black”,
  stroke: null,
  toArrow: “Standard”,
  }),
  ));
  
  
• Link –lane overlapping:When I connect nodes between the two lanes,link will overlap with lane boarder.Below is the output
  
  
  
  My requirement is to avoid all above types of overlapping.
  Please suggest how this can be achieved and if possible please share sample source code/reference documents

Thanks,
Sindhu

[walter]

Well, it is called AvoidsNodes routing for a reason, not AvoidsNodesAndLinks routing.

You can try using an unsupported and inefficient AvoidsLinksRouter.js file from https://gojs.net/temp/AvoidsLinksRouter.js. The comments in that file show one way you could use it.

[sindhu]

Thanks for the reference it works for me.
But Link –lane overlapping:When I connect nodes between the two lanes,link will overlap with lane boarder.Can we remove lane boarder,so it won’t overlap.How can I do that.
Below is the output

Another thing in the below image we can see that links are very closer to each other(example:7230->7220 and 7211->7210).So can we change(increase) the distance between links?

Thanks,
Sindhu

[walter]

Set the Shape.strokeWidth property to zero on the border (the first element of the “Auto” Panel) of the lane Group.

[sindhu]

Thanks!!It worked for me.Able to remove border.
How can I increase or maintain a constant distance between the links(image is attached in the previous post).

Thanks,
Sindhu

[walter]

I think you can increase the linkSpacing property of the router. But the router does not adjust the position of segments that are constrained by their position at a port.

[sindhu]

Thanks Walter
I was going through GoJS Ports in Nodes-- Northwoods Software for port related information.I can able to add ports to left and right side of the node with the help of above link.
I want to add ports to top and bottom of the node.How can I do this?
and these ports are appearing inside the node.How to make ports appear outside the node?

Thanks,
Sindhu

[walter]

That depends on what kinds of panels you use and what properties you set on those panels and on the ports.

Are you sure you need separate ports? If you just want a link to connect to one side or another, you can just set the Link.fromSpot and/or Link.toSpot properties.

[sindhu]

Thanks Walter. I’m able to use the ports(All 4 direction).

Horizantal swimlanes without changing the hierarchy of the graph:
I was trying to use swim lane design for my project.I’m referring Swim Lanes to design horizontal swim lanes.
Below is the sample swim lane design ,which is having only one lane

I’m getting the below result when I tried to move one of the node(NodeG) to another lane(Lane2).

Now NodeG node is appearing leftmost of Lane2.It is moving both x and y direction(horizontal and vetical).Here hierarchy is getting changed.
According to my requirement when the node is moving from one lane to another lane it should move only in y(vertical) direction.
Below is the my required output :

NodeG is moving only in the y(vertical direction).
Is it possible to do?How I can achieve this?

Thanks,
Sindhu

[walter]

Are you talking about the user dragging the node?

Positioning of nodes, if not done by the end-user, is the responsibility of the layout. Have you set the Group.layout for each lane? If so, each lane is doing its own layout, and they are all independent of each other. Maybe you should be setting Group.layout for the lanes to null and only set Group.layout for the pools to an instance of SwimLaneLayout: Page Not Found -- Northwoods Software

[sindhu]

Thank you for your time!
I’m not talking about the user dragging the node.Positioning of the node is not done by end-user.Based on the JSON values it should automatically layout.JSON structure of previous diagram is:
[//nodedata
{ key: “NodeD”,group: “Lane1”,label:“NodeD”},
{ key: “NodeG”,group: “Lane2”,label:“NodeG”},
]
[//linkdata
{from: “NodeD”, to: “NodeG”}]
I’m referring the same swim lane code Swim Lanes and I’m connecting nodes of two different Lanes.
In the samples/swimLanes.html example each lane is not having independent groupTemplate.It is having groupTemplate for Lanes and groupTemplate for Pool.
As My understanding once node comes to the lane,it will start arranging horizontal direction(start from left to right direction).
But my requirement is there is only one graph that is spread across two or three lanes. So the structure of the graph shouldn’t change no matter where the node is placed(irrespective of the node’s lane). And we would like to give the graph layout to the entire thing rather than individual lane.
So we want a graph with lanes and a single layout structure passing through all the lanes.
What all changes I need to do in samples/swimLanes.html so that I can solve my above issue( Horizantal swimlanes without changing the hierarchy of the graph)
Is this tricky?

Regards,
Sindhu

[walter]

That’s exactly what the experimental SwimLaneLayout is for:
https://gojs.net/temp/swimlanelayout.html

[sindhu]

Thank you Walter!It works for me

Thanks,
Sindhu