iVis-at-Bilkent / cytoscape.js-cise

An implementation of the circular layout algorithm by Dogrusoz et al. as a Cytoscape.js extension
MIT License
31 stars 13 forks source link

Take node labels into account #28

Closed ugurdogrusoz closed 4 months ago

ugurdogrusoz commented 3 years ago

CiSE should have an option (see nodeDimensionsIncludeLabels in fcose layout for instance) that takes node labels into account when calculating node dimensions.

hasanbalci commented 3 years ago

This feature should first added to avsdf-base because CiSE uses avsdf-base as its first step to construct cluster circles. Cluster circles should take node labels into account during their construction.

smarek commented 3 years ago

I'm also interested in this feature, were I to try to develop the necessary feature in https://github.com/iVis-at-Bilkent/avsdf-base should I do it against master or unstable branche?

ugurdogrusoz commented 3 years ago

We accept PRs to the unstable branch

hasanbalci commented 3 years ago

@smarek I'm not exactly sure, but only changing this line and this line in a way that the value of the nodeDimensionsIncludeLabels will be decided by a user option may be enough without making any change in avsdf-base repository. Because in those lines we transfer cytoscape nodes to graph manager (as CiSE nodes) and once the sizes of the nodes in graph manager include node labels, all operations should be done based on these sizes.

smarek commented 3 years ago

@hasanbalci that'd be of course ideal solution, but in your initial assessment you told @ugurdogrusoz that this must be done in avsdf-base, so i did not consider any alternatives. You're probably best man to do that, will you please do the mentioned change or shall I try to do PR?

hasanbalci commented 3 years ago

@smarek I'll give it a try.

hasanbalci commented 3 years ago

It should be working now in develop branch. I set the default value for the option as false. Some results from my test: image image

smarek commented 3 years ago

Thank you, i've just tried bundle with cise from develop branch, and it performs way better then stable/master relase and indeed the rendering now seems to take labels into account.

For example you can see bigger corporate structure (with complex styled node labels) here: https://non.certifix.eu/cz/structure/219 If you wish to re-run the cise layout (changing only the nodes/clusters organization, not colors or anything else), use the "Refresh" button above the render container.

Only thing I'm currently not able to fix is the cluster separation/gravity/springCoeff balance, even with high idealInterClusterEdgeLengthCoefficient the clusters seem to be too close together or the labels get un-readable, and I'm not sure this is because of the nodeDimensionsIncludeLabels support or if i'm hitting different issue here

If anybody'd want to toy with this, changing the params and re-running the layout is as simple as this (in chrome devel console for example)

certifix_cytoscape.ciseLayout.nodeDimensionsIncludeLabels = false;
// or assign complete configuration object to "certifix_cytoscape.ciseLayout"
certifix_cytoscape.runLayout(true);
ugurdogrusoz commented 3 years ago

@smarek Looking at your corporate structure application, I don't believe you're using CiSE properly. This algorithm was devised to visualize cluster/group structures (which you should specify using the clusters option in the API). If you do so, all the nodes in the same cluster will be laid out on the same circle. If your goal is not to show such cluster/group structure, fcose layout would be the fastest algorithm to achieve the same thing. With fcose, you can use idealEdgeLength to increase edge lengths to have more separation between nodes.

smarek commented 3 years ago

@ugurdogrusoz thank you for quick reaction

clusters are actually assembled dynamically per data in nodes (see ciseLayout property, clusters function definition here: https://non.certifix.eu/assets.certifix.eu/js/cytoscape/certifix-cytoscape.js?version=v1.2 ), and they are separated by color, if the company is "sole daughter" it belongs to same cluster as its parent, if it's "daughter with more daughters" it forms it's own separate cluster. Hopefully that should be right according to API docs You can also check the raw nodes/edges data by appending .json to url, for example: https://non.certifix.eu/cz/structure/219.json

What we're actually trying to achieve are clusters that look like left-most (dark blue) or top-most (light blue) in this example: https://blog.js.cytoscape.org/public/images/layouts/cise.png however with regard to node label dimensions. The "hierarchy trees" actually grow quite nice to our expectations, not so the overall layout (separation between the clusters)

So we can't want actual "circles" but somewhat tree hierarchy of those clusters, because corporate ownership structures/data are always hierarchical (and sometimes circular or intertwined as well)

Another example data (and you can switch between dagre and cise (and other) layouts using the buttons above the visual starting with left-most one)

Do you think it's achievable with CiSE or do we need to switch to different clusters-aware layout?