SigmaJS Hierarchal Layout

[rahst12]

We're looking to display a graph in a hierarchal layout, like in an org chart style. Is there a layout to support this?

I'm looking here: https://graphology.github.io/standard-library/layout.html but am not seeing anything super-obvious. Any pointers in the right direction would be appreciated.

Thanks

[jacomyal]

Hi @rahst12,

As we were hoarding some snippets of code at @ouestware, we just released some under the @ouestware/graphology-experiments project:
https://gitlab.com/ouestware/graphology-experiments

In these experiments, there is a basic tree layout (@ouestware/graphology-layout-tree) we are using sometimes, with a demo here. It definitely lacks documentation and testing right now, but it's there, at least.

Also, in the near future, together with @arthur-bigeard-gdotv and @sim51, we should commit some resources building bridges to use external popular graph layouts (such as cola.js, d3-hierarchy, d3-force...), but for Graphology graphs.

Stay tuned!

[rahst12]

Thank you very much, we haven't had a chance to try this out in production yet today, but we're very excited. We're trying to let users swap between layouts. One needed layout is a hierarchy/tree layout.

Also, I can't believe you pushed up the code and everything, that's great support!

[Rich5]

For what it's worth, before I found this I ended up using the dagre library (similar to the old plugin) to get a hierarchal layout . Partial code is below if anyone is interested. It's not perfect, but I ended up with some decent results for our use case. This felt a bit hacky to me though. Looking forward to testing this option out.

import { layout as runDagreLayout, graphlib } from "@dagrejs/dagre"

...

function dagreLayout() {

    var settings = {
      directed: true, // take edge direction into account
      multigraph: true, // allows multiple edges between the same pair of nodes
      compound: false, //
    };

    var g = new graphlib.Graph(settings);
    g.setGraph({
      rankdir: 'BT', // Direction for rank nodes. Can be TB, BT, LR, or RL,
                     // where T = top, B = bottom, L = left, and R = right
      nodesep: 1000,
      edgesep: 10,
      ranksep: 50,
      ranker: 'longest-path'

    });


    g.setDefaultEdgeLabel(function () { return {}; });

    sigma.getGraph().forEachNode((key: string, attributes: Attributes): void => {

      g.setNode(key, { width: 50, height: 50 })

    })

    sigma.getGraph().forEachEdge((key: string, attributes: Attributes, source: string, target: string): void => {

      g.setEdge(source, target, { minlen: 20, weight: 10 })

    })

    runDagreLayout(g);

    let dagrePositions: LayoutMapping = {}

    g.nodes().forEach(function (node: any) {

      if (g.node(node) !== undefined) {

        dagrePositions[node] = { x: g.node(node).x, y: g.node(node).y }

        sigma.getGraph().setNodeAttribute(node, "fixed", true);

      }

    });

    animateNodes(sigma.getGraph(), dagrePositions, { duration: 2000, easing: "linear" }, fit);


  }