Cytoscape layouts - Handle locked nodes

Question

I am using vue-cytoscape to render a graph and navigate through a tree-like data structure.

My goal is to expand parent nodes and keep their position in the graph. I would like to simply add the new children nodes.

My approach is to lock current nodes, add the children and unlock the nodes.

this.cy.nodes().lock()
for(let d of data){
  this.cy.add(d)
}
this.cy.elements().layout(this.config.layout).run()
setTimeout(() => {this.cy.nodes().unlock()}, 2000) // Give some time for the layout to render before unlocking nodes.

The problem is that the layouts do not consider the locked state of the nodes. Only the new nodes are moved around, which is fine. But the layout is not respected. I am under the impression that the layout calculates a new position for all nodes, but then moves only nodes that are unlocked.

According to this GitHub issue, some layout algorithm should handle locked nodes. I am using the following layouts and none seem to consider locked nodes.

• Cola
• Fcose
• Dagre
• avsdf
• grid
• concentric

Mandatory

Answer 1

Please try calling the layout function only on the added nodes:

var eles = cy.add(data);   // refer to http://js.cytoscape.org/#cy.add for adding nodes
eles.layout(this.config.layout).run();

If you don't want nodes to move when calling the layout function, you can exclude them from the rendering. While calling cy.add(), the function returns an object with every added element inside (see var eles = ... in the code).

Cashandcarry

Thanks for the lead. With this approach, all new nodes appear stacked in the middle of the graph. Is there a command to update the position of those nodes ? – Mandatory

When adding the nodes properly and running the layout with layout().run() it should work. Have you considered using the even-parent extension for your layout. You can't display a graph statically while adding children, you will run out of space sooner than later. – Cashandcarry

So I tried with different layouts including the one from even-parent. They behave differently from one another but the result is the same. When applying a layout on specific nodes, only those nodes are taken into consideration for calculating the positions. The parent nodes are ignored. At this point, 2 different and isolated layouts are present on the graph, which results in stacked nodes. – Mandatory

Was this problem solved? I'm running into same issue. – Turdine

I'm facing the same issue. @Mandatory How did you handle it? – Shabuoth