Visual graph element about dannet

[simongray]

https://mermaid-js.github.io/mermaid/#/./flowchart?id=flowcharts-basic-syntax

[simongray]

Having tried out vis.js in the form of react-graph-vis I didn't find it suitable for the following reasons:

1. The supported layouts didn't work well for the data we have.
2. There was seemingly no way to direct edge labels along the edges rather than on top of them.
3. There was seemingly no way to group nodes.
4. I found it relatively difficult to configure.

For this reason I have moved on to cytoscape.js packaged as /react-cytoscapejs. This solution fixes 1., 2., and 3. (using the "concentric" layout). It also feels easier to configure too, although I haven't fully configured it yet.

At this point I should probably also make a note about react-flow which on the surface seems like a well-documented, well-supported solution—and also something which could be used to edit graphs with at some point! However, I think react-flow is more suited to very small graphs with a clear "flow", rather than the type of graphs we must support, i.e. a single central node with a handful to several hundred outgoing connections.

[simongray]

While trying out Cytoscape.js I did found it to be an improvement over vis.js. However, it still has some major issues that at least require loading and configuring various extensions which may or may not solve these issues. The concentric layout is definitely preferable out of all of the layouts I have tried (including several custom ones), but I cannot configure the following:

• edge label backgrounds (they get smushed when appearing on top of other things)
• a minimum edge length (for small graphs, the edges are too short compared to the labels)
  • ... while there is seemingly no way to configure this, it may be possible to create a heuristic which adds minimumNodeDistance based on the amount of edges coming from the subject.
• expanding/collapsing compound node groups. I tried loading an extension for this, but couldn't get it to display anything different. I think the issue was that it required significant configuration.

Some illustrations:

Working well (cykel)

Too close (lexikalt begreb)

Too far (ord)

---

Based on these issue I have decided to try out a third method: D3's radial tidy tree layout. I am currently unsure how to best use D3 from Rum. Some reading:

• https://www.pluralsight.com/guides/using-d3.js-inside-a-react-app
• (unmaintained) https://github.com/react-d3-library/react-d3-library
• (reagent) https://github.com/gadfly361/rid3
• (inspiration) https://lambdaisland.com/blog/2018-04-26-d3-clojurescript

One thing that will not possible using a dendogram are self-referential relations. However, it should still be possible to include many-to-one relations as all of relations are from the same subject, so the objects can simply be duplicated many times over in the resulting tree.

[simongray]

Collapsible example: https://codepen.io/fernoftheandes/pen/kyQRNe

[simongray]

Having serious issues implementing the D3 radial tree for several reasons:

• The collapsible example is using an old version of D3 which I don't want to use, so it needs to be rewritten
• The observable version is hard to get clean source code for (or my JS foo is not enough)
• The amount of JS to translate to CLJS is quite tiring. I tried mixing with pure JS code, but ran into the issues described in the bullets above.

---

Now I just discovered that there is actually a radial tree layout in vega too, which seems to look very similar—perhaps even better—and it seems much more compatible with my needs. I will go investigate.

• ClojureScript has two mature packages for Vega viz: Hanami and Oz
• There is also the officially supported react-vega whose use from CLJS has been documented in a blog post.

I think I will attempt the React interop to begin with.

[simongray]

Vega attempt being tracked in: https://github.com/kuhumcst/DanNet/tree/feature/31d-vega

[simongray]

More inspiration: https://vega.github.io/vega/examples/tree-layout/

[simongray]

https://openbase.com/categories/js/best-react-graph-libraries

[simongray]

This looks interesting: https://unovis.dev/gallery

Perhaps an alternative to a graph could be the expanded sankey?

[simongray]

Some very interesting force graphs here: https://github.com/vasturiano/react-force-graph

I might also take a look at this one again: https://www.npmjs.com/package/react-d3-tree