Springy and CoLa layout not working as expected in cytoscapeJS-2.5.4

[AjitPS]

@maxkfranz Hi, is there any documentation mentioning which of the new layouts no longer work, in the new release of cytoscapeJS. I upgraded to cytoscapejs-2.5.4 this week and the arbor, cola, springy, dagre layouts no longer seem to work.

From what I can tell, arbor and springy layout don't seem to be supported any more (spread layout is now working fine) and they way to use cola, dagre layouts has now changed too.

[maxkfranz]

Have you seen the extension list? http://js.cytoscape.org/#extensions/layout-extensions

[AjitPS]

Thanks, I saw that now. However, arbor, cola, springy, etc. now do not work by just specifying name: 'arbor' and some basic positioning parameters. @maxkfranz : Are there any examples available to get CoLa, Arbor and also Springy to work (similar to the new cose, dagre, concentric, grid layout examples at http://js.cytoscape.org/#demos or new documentation for layouts, like at http://js.cytoscape.org/#layouts) ?

[AjitPS]

@maxkfranz : Also, the Springy layout still doesn't seem to work properly. It just places all the nodes on top of one another in a corner of the cytoscapeJS viewport. I am using the new springy.js and the cytoscape-springy.js layout extension and the following code for the layout:

var springyNetworkLayout_new= {
    name: 'springy', 
    animate: true, fit: true, avoidOverlap: true,
    minDist: 20
   };

I was earlier using the setting below but this also caused the same layout error:

var springyNetworkLayout= {
    name: 'springy', 
    animate: true, fit: true, padding: 10, maxSimulationTime: 4000, 
    ungrabifyWhileSimulating: false, 
    boundingBox: undefined, random: false, infinite: false, 
    ready: undefined, stop: undefined, 
    avoidOverlap: true, handleDisconnected: true,
    nodeSpacing: 10, // for extra spacing around nodes
    // springy forces
    stiffness: 400, repulsion: 400, damping: 0.5 
   };

[maxkfranz]

I've just confirmed the extension layouts are working, including both springy and cose-bilkent. Make sure you're following the instructions in the readme for each extension you use. If you find a bug in a particular extension, please use the issue tracker for that extension with a reproducible test case demo and/or description.

Please note that Springy is an external library, and if you have problems with the algorithm itself then you should contact its author. Also note that all of the other physics simulations layouts supported by Cytoscape.js are faster and also produce better results as compared to Springy. You may be better off using a different layout.

[maxkfranz]

The randomize option might help if Springy gets stuck -- but it's no guarantee. It's just not as reliable an algorithm as the other layouts.

[AjitPS]

Thanks Max. I'll try that and if Springy still doesn't work, I'll use other layouts instead (which all work fine).

[maxkfranz]

OK; closing for now

[AjitPS]

FYI, I am not using Springy layout anymore as I can't get it to render as required. I'm also encountering errors with the breadthfirst layout when using cytoscapeJS-2.5.4 (it worked fine with the old cytoscapeJS release).

The other layouts: CoSE, cose-bilkent, circle, concentric, dagre, grid, spread, arbor, etc. work fine so I am using a few amongst them instead along with CoLa which is still causing problems for larger networks.

[AjitPS]

@maxkfranz: 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:

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:

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 ?

[AjitPS]

Note: also posted at https://github.com/cytoscape/cytoscape.js-cola/issues/6

[AjitPS]

I am using CoLa: http://marvl.infotech.monash.edu/webcola/cola.v3.min.js with http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js and https://cdn.rawgit.com/cytoscape/cytoscape.js-cola/1.1.1/cytoscape-cola.js (the cola layout extension for cytoscapeJS)

[AjitPS]

I also 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);