[dev] Hierarchical Graph

[jannlemm0913]

TLDR

Changes Covenant's Graph tab to show a hierarchical tree instead of the default layout. Does not include hidden Grunts in the graph and indicates whether a Grunt is active or not via coloring. The text color will have to be changed for use with default Covenant light theme, since I only use a custom dark theme. 😋 Additionally, some more information is shown when clicking on a Grunt node.

Details

I wanted to change the graph's layout for some time now since I wanted to see a bit more clearly how my Grunts and listeners are connected. Covenant uses d3's forceSimulation, which seemed overkill to me. I switched it to d3 tree and a simpler node array, where every node just needs a parent node (except the root node called "Covenant", this was included to allow multiple listeners in the tree), an ID and a fill color.

The image above shows what my graph currently looks like. The coloring of the nodes is still the same, but the more greyed out ones are Grunts that have a different status than "Active". Grunts that are set to be hidden are not shown in the graph anymore, neither are deleted ones. This can keep the graph somewhat compact.

Additionally, I wanted to see more information about the Grunt in the details. To allow more information to be shown without requiring a lot of space, I switched from the usual text boxes to pre formatted text.

It is not possible anymore to drag nodes around, they are automatically sorted and should always be in the same spot.

I'll include the usual disclaimer: I did test this new graph and it's capabilities while making the changes. However, I'm sure there are cases that I did not test or think about, so there might be bugs or errors. 🤷 If you find any, I'd be happy about a comment with the problem.

If you want to use the graph with a light theme (why though?), line 278 in master.js can be edited to:
halo = "#222", // color of label halo

When adding these changes to an existing Covenant installation, be sure to run dotnet clean before the next dotnet run so the changes to the .razor file are applied.