feat: Grid-tree view to improve information density and preserve visual hierarchy (#6936)

[keithchong]

Signed-off-by: Keith Chong [email protected]

This fixes #6936

This is a preliminary solution to address the concerns in 6936, as well as several other issues.

Points:

1. This PR changes the line connections that are somewhat disorganized, with multiple outward-bound points from the originating node, and multiple inward-bound points to the target node. At times, it is hard to distinguish which nodes the lines are connected to. For example: https://cd.apps.argoproj.io/applications/ingress-nginx?view=network&resource=
2. This PR adds expansion and collapse support for each node that has children. This directly addresses the information density problem. The Expand All and Collapse All buttons are added to the floating toolbar.
3. The line connection re-layout change can be pulled out into a separate PR if desired.
4. The implementation of the expansion and collapse feature involves keeping track of the collapsed nodes. Upon entering the tree view, by default, all nodes are expanded. Therefore, no node is in the list of collapsed nodes. Collapse All means all applicable nodes will be added to this list. Performance might be a concern here so the Collapse All button could be removed. Users might not collapse all nodes by hand anyway. Perhaps, another solution will be to write the expansion state value as an attribute on the element.
5. It is hard to distinguish the node "kind" in the view. This fix includes changing the background color for Pods. This change can be easily removed, but is included here to address this usability issue and a separate feature can be opened to perhaps customize the node colors.
6. Can't find Expand/Collapse All icons with multiple squares behind the +/- symbol. These are better than using only the plus and minus icons.
7. Expansion state for a node applies to (is preserved in) BOTH the Tree view and the Network view.
8. The issue in Network view should group pods into higher level workload #5468 is arguably in part due to the many pods that are shown. However, in honoring the concept of the tree structure, and the parent-child relationship, part of this concern is addressed. Note, this fix does not preclude the fix for 5468, since the collapsed state can still show the "Pod view node" representation.
9. Came across some issue where part of the connector lines is not rendering when zooming out. Haven't found out why.
10. Grouped-Nodes feature works normally.

Please try this fix out, especially with applications with many nodes.

Note on DCO:

If the DCO action in the integration test fails, one or more of your commits are not signed off. Please click on the Details link next to the DCO action for instructions on how to resolve this.

Checklist:

• Either (a) I've created an enhancement proposal and discussed it with the community, (b) this is a bug fix, or (c) this does not need to be in the release notes.
• The title of the PR states what changed and the related issues number (used for the release note).
• I've included "Closes [ISSUE #]" or "Fixes [ISSUE #]" in the description to automatically close the associated issue.
• I've updated both the CLI and UI to expose my feature, or I plan to submit a second PR with them.
• Does this PR require documentation updates?
• I've updated documentation as required by this PR.
• Optional. My organization is added to USERS.md.
• I have signed off all my commits as required by DCO
• I have written unit and/or e2e tests for my change. PRs without these are unlikely to be merged.
• My build is green (troubleshooting builds).

[codecov]

Codecov Report

Merging #8661 (9833bbe) into master (727c59f) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master    #8661   +/-   ##
=======================================
  Coverage   45.78%   45.78%           
=======================================
  Files         220      220           
  Lines       26170    26170           
=======================================
  Hits        11981    11981           
  Misses      12531    12531           
  Partials     1658     1658           

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 727c59f...9833bbe. Read the comment docs.

[keithchong]

Network View

Tree View

Collapsed ReplicaSet

[keithchong]

Hey @rbreeze, could you please have a look at this?

[keithchong]

Before:

[reginapizza]

Hi Keith! I checked this out and it looks good to me. One suggestion I have is to add a tooltip to the smaller +/- on the resource so that a user will know it's for collapsing/expanding child nodes. You also had a point about the line connectors disappearing when zoomed out but I didn't observe that so I'm curious where you're seeing that happening?

[ciiay]

Hi Keith, great work on this complicated task! Good learning from reviewing the PR 👍 Thank you for that.

I only have one small concern that if we can pass the color to the SCSS so that the right arrow would have same color as the dashed line in the network view? That way it looks a little bit more clearer when it comes to very complex graph.

You probably already know the trick, but here's an example of what I mean: https://css-tricks.com/getting-javascript-to-talk-to-css-and-sass/

[rbreeze]

Looks good, but I agree with both @reginapizza and @ciiay 's suggestions that:

1. Matching the color of the arrows in network view and
2. Adding a tooltip indicating what the minimize/maximize button does

[keithchong]

The color of the right arrow is an issue without this enhancement. But, yes, it will make the graphical view more refined and polished:

MatchingColoredArrow.mov

[keithchong]

Also, the arrow will be centred along the connecting line and the line ends at the wide part of the arrow, unlike the current behavior now:

ArrowsCentered-LinesEndAtArrow.mov

[rbreeze]

LGTM once comment is addressed

[keithchong]

More testing:

Before:

After:

From resolved conversation, pod and non-pod children of parent:

Before:

After:

[keithchong]

One issue (one can argue it isn't an issue) is that because the lines are overlapping, the more lines there are, the more they are 'concentrated' so that the connector lines will appear more solid, as shown in the screenshot below. Notice the connector lines are dashed and appear more 'normal' when the connections are toward the outer pods (because there are fewer overlapping lines)