I finally created a new website graphinteract.com that showcases interactive dot diagrams.
This can be usefull to make sense of large diagrams with clustered nodes, which are clustered in multiple levels.
You can click on clusters to collapse or expand them. There is also a right click menu to filter the graph on a node with its adjacent nodes and edges.
I like this!
Expanding and collapsing clusters is really nice for hiding excessive detail; and it’s nice that the arrows are preserved. What’s your method for calculating that, and are there any gotchas?
I know the layout changes, but I guess that can’t really be helped since it’s rerendered with different constraints
Hi, glad you like it.
The method i am using for calculating the graph with preserved edges after collapsing is based on the graphlibdot library. At the start i am using graphlibdot.read to parse the dot source code into a graph object in memory. Where clusters are parents of all the nodes ( or subclusters) they have. After collapsing the cluster i first change the graph object by adding a dummy node in the cluster and the redirect all edges connecting to any of the children to that dummy node. After the graph object has been changed i output it again to dot syntax using graphlibdot.write.
After providing the dot code to the graphviz wasm library the graph is re-rendered in the browser and shown again.
When using eg osage layout you can get a bit more control over layering and layout using packmode.