cytoscape.js layout that allows child positioning within compound (e.g. like dot's rank)

Question

I am trying to use cytoscape to replace my dot output and make it interactive (move nodes and compounds, expand/collapse compounds, etc.) When a graph is first loaded, the user should be presented with a default layout though. However, I am struggling to find a layout/config that supports what dot calls rank.

In my graph I have compound nodes that represent components. Components contain other components and/or states, transitions, variables. Each component can specify inputs and outputs. In dot I tried to add some form of flow within the system (rankdir=LR;) by positioning the inputs on the left (rank=source;) and the outputs on the right (rank=sink;). Other elements have no rank and are hence freely positioned. I then specified cluster subgraphs containing all recursive components.

Now, here is what I have in dot. I hope it explains what I would like to end up with.

First, I already saw this question, but as far as I understood it's for manual positioning, rather than layouts.

I haven't found a layout that fully supports positioning nodes within the compound. I looked into using the cytoscape.js-cola layout with the following options:

  layout: {
    name: 'cola',
    flow: { axis: 'y', minSeparation: 40 },
    avoidOverlap: true
  }

I ended up with this As you can see, there is some flow, but not as nicely as in dot.

I tried adding some function for the alignment parameter, but as far as I understood I can only specify the absolute coordinates (e.g. return {'x': 0};). This basically allows me to align ALL inputs, rather than all inputs of a compound.

Here is a CodePen of my example to play around with: https://codepen.io/anon/pen/GEaOQQ In the Javascript you can see the comments of

Answer 1

You could try Klay: https://github.com/cytoscape/cytoscape.js-klay

If any of the existing layouts don't meet your requirements, you can use any algorithm you'd like by writing a layout extension. You could port the exact layout you're using with dot/graphviz, if you like.