[dev] Hierarchical Graph #371
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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 haloWhen adding these changes to an existing Covenant installation, be sure to run
dotnet cleanbefore the nextdotnet runso the changes to the .razor file are applied.