How do you pass nodes to gapInequalities in cytoscape-cola.js?

Question

The cytoscape.js-cola documentation for the gapInequalities element of a layout dictionary says:

  gapInequalities: undefined, // list of inequality constraints for the gap between the nodes,
                              // e.g. [{"axis":"y", "left":node1, "right":node2, "gap":25}]

How do you set up the objects that specify the nodes in the values of left and right ?

maxkfranz helpfully pointed out here that these objects need to be collection objects . These contain references to specified nodes ("elements") and are created by querying the cytoscape.js "core object". What's not clear to me is, given that the layout object needs to refer to the node elements, and the elements should not be added to the graph before the layout tells how to render them, how do you properly set up those collection objects?

For example, to specify that node b should be placed above node a , what goes in place of ???a??? and ???b??? in the code below?

cy = cytoscape({
  elements: [
      { data: { id: 'a' } },
      { data: { id: 'b' } },
      . . .
  ],
  layout: {
    name: 'cola',
    gapInequalities: [
        { axis: 'y', left: ???'a'???, right: ???'b'???, gap: 25 }
        . . .
    ],
    . . .
  }
  . . .
]);

In this case, the answer can't be cy.$id('a') and cy.$id('b') because the cy object hasn't been created yet. You could get around that by creating the cy object without elements and then calling cy.add() to put them in. But then what goes in the layout object that's passed to cytoscape() ?

I'm new to both cytoscape.js and cola.js , so I'm most likely just missing some very elementary idea here. A simple example showing what function calls set up the objects and the sequence in which to call them would probably do it. In my application, nodes and edges are added to the graph gradually, and the animation needs to show them being added, so not having all the elements set up at the start makes more sense, anyway.

Answer 1

Since your nodes and edges are added gradually, you can create cy object without elements and layout object. Then when new nodes come, you can add them to the graph and apply layout.

After initialization of the cy object, every time new nodes come, apply the following:

cy.add(...);
cy.layout({
  name: 'cola',
  gapInequalities: [{ axis: 'y', left: cy.$id("a"), right: cy.$id("b"), gap: 25 }],
  ...
}).run();