cytoscape/cytoscape.js-cola

CoLa layout not rendering well for large networks in cytoscapeJS-2.5.4

Closed this issue · 6 comments

AjitPS commented

For CoLa layout (which I use as the default layout in my web application; users can otherwise choose circular, concentric, cose or cose-bilkent layout and re-layout the network graph), it works perfectly for smaller networks (with <30 nodes and <50 edges, both nodes and edges have varying sizes and colors) as shown below:
cola_small

My CoLa layout settings are defined as:

   var cola_Layout= {
    name: 'cola', animate: true,
    handleDisconnected: true, avoidOverlap: true, 
    randomize: false, fit: true, maxSimulationTime: 4000/*1500*/, 
    padding: 10, refresh: 1, ungrabifyWhileSimulating: false,
//    boundingBox: undefined/*{ x1: 0, y1: 0, w: 1200, h: 900 }*/,
    nodeSpacing: 5 /*20*/, 
    edgeLengthVal: 45 /*10*/,
    edgeLength: 45
    //, infinite: false
   };

  // Set WebCola layout (default).
  function setColaLayout(eles) {

   // run the default (CoLa) layout, on the visible elements only.
   cy.$(':visible').layout(cola_Layout);
  }

However, for larger networks (>50 nodes, >80 edges), the layout is highly clustered horizontally despite there being a lot of free space in the viewport (the cytoscapeJS container div), as shown below:
cola_large_issue

Firstly, in the CoLa parameter settings, I was previously using edgeLength to define the length of edges but I noticed in your cytoscapejs-cola demo on the cytoscapeJS website that you used the variable edgeLengthVal instead which is later used in the cytoscapejs-cola layout extension file. Which of these 2 should I be using ?

Secondly, in my web application, at first the network is generated with only a few nodes visible. Users can then gradually un-hide the hidden nodes to eventually see the full, large network. However, CoLa layout doesn't work as expected for larger networks. How can I ensure that the layout spreads wider to make full use of the space in the viewport ?

Note: also posted at cytoscape/cytoscape.js#1212

maxkfranz commented

Have you tried randomize: true? Cola tries to maintain relative initial positions.

AjitPS commented

I tried randomize: true and also experimented with disabling fit: true for CoLa. However, I get the same issue (as seen in the 2nd screenshot above).
It seems to zoom out and stretch the layout vertically without using the ample horizontal space available. Also, the edge lengths become very long despite setting my specifying the edgeLength value.

Note: I am running the layout with maxSimulationTime: 4000 (was 1500 initially). Could it be worth allowing the layout to run longer to maybe have it cluster in a better way ?

On the other hand, CoSE layout works perfectly for this with the following basic settings:

var coseNetworkLayout= {
    name: 'cose', animate: true,
    handleDisconnected: true, avoidOverlap: true,
    idealEdgeLength: 100, nodeOverlap: 20
   };
   // run the default (CoLa) layout, on the visible elements only.
   cy.$(':visible').layout(coseNetworkLayout);
maxkfranz commented

They're different layouts, and you generally have to experiment with different parameter values to see what suits your particular data best. Specifying edge lengths can overconstrain the graph, so you should experiment with it on and off in addition to testing other parameters.

AjitPS commented

Thanks, in the CoLa parameter settings, I was previously using edgeLength to define the length of edges but I later noticed in your cytoscapejs-cola demo on the cytoscapeJS website that the variable edgeLengthVal was used instead, which is later used in the cytoscapejs-cola layout extension file.
@maxkfranz : Which of these 2 parameters should I use to set the edgeLength, to avoid further confusion ?

maxkfranz commented

Follow the documentation.

If you read the demo on the main site, you're sure to notice that the same variable name is sent as the layout option -- as noted in the docs. An app is free to use whatever variable names you want on top.