Prevent overlapping in tightly packed nodes

[jonas87]

Is there a way to get fcose to pack nodes really tightly but at the same time prevent overlap?
I'm trying to get something like this.
The white nodes can move where they want, but the blue/red nodes should be packed tightly around the white nodes.
I tried decreasing idealEdgeLength, which gets the nodes closer to each other (not enough) but this also increases overlap.

Here is some example code, a possible simplification is that the white nodes could be fixed in place with coordinate constraints, but then I still can't get the blue/red ones to pack tightly without overlap.

https://drive.google.com/file/d/1z9oOHxh_9Q0_qpeYFjoXv9ncZsv8dORj/view?usp=share_link

[ugurdogrusoz]

Each white node is a "cluster" of its own (along with red/blue neighbors). So you could create a compound node for each such cluster and put all associated nodes of a cluster in that compound node, then start fcose layout. If you don't want to see the compound nodes corresponding to each cluster, these compound nodes could be introduced temporarily prior to layout and removed right after layout is finished and before rendering starts.

[jonas87]

Thank you very much for this suggestion. Here is a screenshot of the situation with a compound node as suggested.
Even when setting IdealEdgelength to 1, the nodes are still not packed tight together, still occlude each other and now that there are these compound nodes the blue/red nodes now also appear to be going to one side of the white node, instead of centering around it. New html example file.

[hasanbalci]

Maybe you can try to give a high value for the idealEdgeLength for the edges between white nodes and low value for the other edges. I can obtain something like this with that approach (this is the sample code - I just changed idealEdgeLength option in your code):

[jonas87]

Thanks this is already much better!

[poornima-taranath]

I have a similar scenario where in, I want the nodes to be tightly packed when using cytoscape-expand-collapse library. There is just too much space when expanded ( screenshot below) . I do not have any "weight" associated to edges. I see that in dagre layout I was somewhat able to control it with "nodeSep" and "edgeSep" methods. Is there any way we can do something similar here ? I tried using packComponents from layout-utilities but there is no good example to understand this feature. Can this be solved using layout-utilities ? Any comments are appreciated!

[ugurdogrusoz]

@poornima-taranath Try decreasing gravityRangeCompound and increasing gravityCompound

[poornima-taranath]

Yes, this helps to an extent. Thank you.
Another doubt related to this is , during the expand collapse, the groups overlap each other. I have tried noOverlap library, but that does not work when it is rendered, it's working when I manually try to overlap nodes. Is there any param through which we can control this? I also wanted to understand what **"nodeSeparation"**does, it does not seem to have any effect on group containers. Any help is appreciated.Thank you.