Proper approach for a hybrid layout of computer network graph

Question

I would like to display a computer network graph using cytoscape.js, which I realize is not a typical use case. This is a collection of subnets (modeled as compound nodes) with several computer workstations or servers within each subnet. The subnets are attached to routers, firewalls, and other network infrastructure that forms the top level graph.

The desire is for subnets to use grid layout with uniform spacing and no internal edges shown for clarity, and something like CoSE on the rest of the graph to layout the subnets appropriately with necessary spacing. A mockup visual of what I'm looking to create is:

example network graph

Any suggestions on what I'm trying to do, or on the following three options to accomplish with existing layouts? All examples I've seen use only one layout algorithm at a time.

Option 1: Grid then CoSE

1. Select each subnet (parent node) and run grid layout on it, forcing rows/cols to make the aspect ratio look good with uniform spacing across the subnets.
2. Select everything except the children nodes and run CoSE.

Intent was to preserve the grid positions and only let CoSE modify everything else. I tried this and it gave non-sensical results. This is flawed because compound node position is derived from that of it's children.

Option 2: CoSE then Grid

1. Layout everything using CoSE.
2. Select each subnet (parent node) and run grid layout on the children.

I would expect that CoSE will position the children much less compact than grid and thus have a much larger/different bb for the parent. When grid is later run on the subnet, it could cause shifting and gaps/overlaps or a poor visual row/col aspect ratio.

Option 3: Grid then CoSE over multiple graphs

1. Run grid on each subnet (parent node).
2. Duplicate the entire graph, replacing the subnet children with a single large node of the same size as the compound bb.
3. Run CoSE on the entire temp graph to get a nicely formatted result.
4. Extract the positions from the temp graph to update the original graph.

This should leave no gaps or overlaps because CoSE cannot resize the node. Expensive, but my graphs are all fairly small and it only needs to happen once.

Other options are surely possible. Creating a new layout combining these features is possible, but out of scope for now. Perhaps a future cytoscape.js enhancement could be to explicitly support multiple layout algorithms cooperating on a single graph by each being responsible for a portion of the graph.

Answer 1

I implemented option 2 and observe the compression and movement. Not ideal, but the only way until Option 3 can be developed.

Answer 2

I encountered the same problem as you and then finally find out that a variant of Option 3 is totally workable.

Try to create two cytoscape instances, one called basic layout, and the other called main layout.

The basic layout is used to arrange subnets (parent nodes) and is set to be invisible. A subnet in main layout is represented in basic layout by a corresponding node which height and weight are determined by the number of subnet's children nodes. We can use Grid, Cose or other layout types to arrange basic layout, then we have separated subnets.

After that，we can respectively select every subnet in main layout and set the layout of it's children nodes by using parameter "boundingBox", which provides the range of the subnet and gets coordinates from basic layout.

If you aren't satisfied with the result, just try to adjust layout parameters of the basic layout.

This scheme is not that expensive in computational costs as you think because it cuts full arrangement into little pieces, especially when you’re dealing with a large number of nodes which Dispersed in many subnets. However there is one thing should be noticed, not every cytoscape layout can be used at a set of nodes which doesn't have any edge in it.

Answer 3

Things to keep in mind:

(1) Compound layouts must operate on children and parents to work properly.

(2) No layout can operate only on compound parents. The position of parents is implied by the children.

(3) Every graph has different layout needs. Ultimately, it comes down to experimenting with different strategies and options etc.