Interactive graph visualisation

[jl-wynen]

We have a number of issues about improving graph visualisation:

• Suggestions for graph visualization #73
• Extract subgraphs in visualisation #117
• Link to the file of the provider function in the visualization. #204

While not all of them require an interactive graph, I think all would benefit from interactivity. I dug around a bit to look for existing solutions. Unfortunately, I couldn't find anything that fits our needs out of the box.

As I see it, there are 3 ways to make interactive graphs:

• (1) Layout and SVG generation in Python (+C) and interaction added by JS.
• (2) Layout in Python (+C) and rendering (SVG or directly to canvas) and interaction in JS.
• (3) Layout, rendering, and interaction in JS.

Number (1) might be the simplest with the fewest changes to our current system. But it may also be the most difficulty to make interactive. Number (3) would give the best UX, especially in our static docs.

Layout

There are several good graph layout libraries out there. But the majority are optimised for undirected graphs. E.g.,

• Cytoscape: https://cytoscape.org
• ECharts: https://echarts.apache.org

When it comes to directed (acyclic) graphs, we have

• Graphviz: https://graphviz.org
• Dagre: https://github.com/dagrejs/dagre

Dagre is JS and has plugins for Cytoscape (https://github.com/cytoscape/cytoscape.js-dagre) and a couple of other libraries. But it has not been actively maintained in years.
Graphviz still has the best algorithms as far as I can tell. But it is difficult to integrate with other libraries. If we want to use a different rendering framework, we have to produce a file with the graph layout and parse that ourselves. Graphviz has been compiled to WASM and is available through https://github.com/mdaines/viz-js. So we can use it in all 3 scenarios.

Rendering

There are a bunch of options:

• Cytoscape: Easy to use for showing networks. Outputs are not particularly pretty. Built in interactivity.
• ECharts: Slightly more advanced and more manual approach. Looks decent. Some built in interactivity, but not sufficient, I think.
• Graphviz: Only SVG output which may be fine. No interactivity.
• D3: Low level, would require a fair amount of work to render a graph. But straight-forward. Has some built in interactivity.
• JoinJS: Low level but great quality. Has a paid tier and the interactivity features are in that paid tier.

When it comes to our group nodes, we are probably limited to Graphviz and D3/manual rendering.

Widgets

I tried out a couple of the above options using anywidget. This works nicely, esp. thanks to its hot reloading support.

[nvaytet]

I found this: https://github.com/pipefunc/graphviz-anywidget
Is that what you meant by using anywidget?