Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[dev] Hierarchical Graph #371

Open
wants to merge 2 commits into
base: dev
Choose a base branch
from
Open

Conversation

jannlemm0913
Copy link

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.

two_listeners

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.

new_graph_2

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant