Headless mode

[galaxym51]

An exception is raised when trying to run cose-bilkent layout with headless option.
It is working fine until specifying 'headless: false' in options (the same with 'container: undefined' option).

Is cose-bilkent designed to support headless layout ?

[ugurdogrusoz]

@galaxym51 I think it makes sense to do this. It's not straightforward for this layout style to support this though. Will do this when we get a chance.

[maxkfranz]

I think all the layouts work headlessly. The only browser-specific function that might be used is requestAnimationFrame(), and that is used only for live-animated layouts. It never makes sense to animate on the server. So even if CoSE doesn't polyfill requestAnimationFrame(), animate: false should work fine.

The layout could do something like

const raf = typeof requestAnimationFrame !== typeof undefined ? requestAnimationFrame : function( cb ){ cb(); };

That polyfill prevents users from misusing animate: true on the server, as there would be no wasted time between "frames".

[hasanbalci]

The layout is working in headless mode if styleEnabled option is also set to true. I think this is because the algorithm considers the node sizes during layout.

[zakjan]

I get this error when running in headless mode in NodeJS.

.../node_modules/cytoscape-cose-bilkent/src/Layout/FDLayout.js:411
  var grid = new Array(sizeX);
             ^
RangeError: Invalid array length

[hasanbalci]

@zakjan did you set the styleEnabled option to true?

[metincansiper]

I suppose that this and the following similar lines breaks the layout in headless mode. I am not sure but trying to read theChild.css('padding') in headless mode would not be appropriate. When I tried to replace theChild.css('padding') by an arbitrary value like 0 that bug is disappeared.

In the past I wanted to use the actual padding values there but I think that making it a user option defined per node and expecting the users to pass the actual paddings using these options would be considered (#46).

Also, I think that the line which throws the error (https://github.com/cytoscape/cytoscape.js-cose-bilkent/blob/master/src/Layout/FDLayout.js#L410) would still be problematic. Because the sizes of arrays are calculated by the following 2 lines:

sizeX = parseInt(Math.ceil((graph.getRight() - graph.getLeft()) / this.repulsionRange));
sizeY = parseInt(Math.ceil((graph.getBottom() - graph.getTop()) / this.repulsionRange));

I am not sure if it is ever possible but the same error would be thrown if one of sizeX or sizeY is greater then or equal to 2^32 (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_array_length). I think that changing arr = new Array(sizeX) etc. by arr = [] would be better in that case.

[robert-king]

nodeDimensionsIncludeLabels: true
seems to not be respected on headless mode, probably because of this:

//Attach the label properties to compound if labels will be included in node dimensions  
  if (this.options.nodeDimensionsIncludeLabels) {
    if (theChild.isParent()) {
      var labelWidth = theChild.boundingBox({ includeLabels: true, includeNodes: false }).w;
      var labelHeight = theChild.boundingBox({ includeLabels: true, includeNodes: false }).h;
      var labelPos = theChild.css("text-halign");
      theNode.labelWidth = labelWidth;
      theNode.labelHeight = labelHeight;
      theNode.labelPos = labelPos;
    }
  }

maybe can't use css on headless?

[robert-king]

maybe can do this:
const aNodeDimensions = aNode.layoutDimensions({ nodeDimensionsIncludeLabels: true });
const aNodeTextHalign = aNodeData['text-halign'];