I have created an app to create and change directed acyclic graphs. DAGs are a generalization of trees where nodes can have multiple parents. Occurences are Git repos, Gantt charts and categorization systems.
It generates a default graph drawing, and the user can drag its nodes around to find a better layout.
Here is a simple diamond graph: http://dag.watchduck.net/?edges=0-1~0-2~1-3~2-3&names=T~L~R~B
The code can be found here: https://github.com/watchduck/DAG/tree/master/front
I see this as a prototype, and would like to turn it into a good example app ― maybe accompanied by a tutorial. It is a simple enough one pager to serve as an example for learners, but it contains enough details that go beyond the trivial.
So I would be glad about suggestions how this app could be improved ― or, possibly, how it should be rewritten in a completely different way.
The current version works well for a small number of nodes. But for more than 15 nodes the dragging gets buggy. Often nodes can only be dragged horizontally, or not at all. It gets better after reloading the page using the URL (not just the reload function of the browser).
I tried to make displaying the ranks optional (binding another radio button to a
showRanks variable). It had the desired effect for the green numbers next to the nodes. But it failed for
MatrixPQRanks (the matrix with the green fields).
A minor but tricky detail are the links in the headings for the connected components. (That is a term in graph theory, and not to be confused with Vue components.) These links should probably be done with vue-router, but that entails problems I was not able to fix ― so currently
href is just bound to
urlStr in the
Coco component. I see three pitfalls here:
The links should not just work in a new tab, but also by clicking on them.
Retaining the focus of a cell in the top matrix after clicking it should still work.
And of course the URL changes caused by changing the graph should not themselves trigger a page reload.