Make blueprint tree more scannable, and the concepts clearer by distinguishing containers, space views, and entities.

[kpreid]

Is your feature request related to a problem? Please describe. The blueprint tree is potentially quite visually noisy (depending on the application's number of space views and entities, and especially if they've been named haphazardly), and contains fundamentally different kinds of things all displayed using identical visual style, in an arbitrarily-deep hierarchy, which makes it difficult to comprehend what is even going on, especially as a newcomer.

Screenshot from dev version:

"What is this? Why are image, depth, rgb repeated twice? Where are the controls I saw previously — oh I need to click on the other thing named image.”

Describe the solution you'd like Rerun 0.11 actually did a little better than the later version: it displayed layout containers dimmed and without icons, making that partition of the hierarchy clearly evident and deemphasizing the parts that aren't the data.

However, I think we can do even better than that. In the following mockup, each Space View has been given a box surrounding its children in the tree view (in addition to dimming the Grid label again, and making the Group icon smaller):

This addition should increase legibility and discoverability in a variety of ways:

• All UI containers are outside the boxes and all entities are inside them, thus teaching the fundamental 3 kinds of things in this list. (And note that there will never be a box nested inside another box.)
• The box hints at the fact that a Space View is also a box in the actual visualization UI.
• A cue besides icons indicates that space views are a different kind of thing than entities, despite often sharing names with them.

Further possibilities:

• (As pictured) Make the icon for Groups smaller than the icon for Space View, to make them more like the small dot for leaf entities, rather than being slightly bigger than space view icons as they are now.

• Moderate use of color might be good too; for example, if space views all had colored icons, layout containers were all gray, and entities were all white and small.

• There could be a “view only” mode (as opposed to "editing the blueprint") where layout containers are entirely hidden.

Alternatives Space views could be marked in some other way that's not a box.

[martenbjork]

Good suggestions! I think, as a great first step, we should:

1. Make Containers subdued (icon + text)
2. Add vertical lines below each expandable item (similar to VSCode) to enhance the sense of hierarchy

[kpreid]

I strongly disagree with

Add vertical lines below each expandable item

being a good direction. The nesting is already clear enough for most purposes (in my opinion); the goal I set out in this issue is to convey the types of the items more strongly. Additionally, multiple parallel lines of identical style are generally hard to follow by eye to see what an individual one attaches to. That is why I suggested adding lines around only the space views, to highlight their unique role in the nesting and to ensure that there are never parallel lines.

[nikolausWest]

I hear you @kpreid on the need to distinguish the types of items. We are somewhat wary on going deep on these distinctions right now as there is still some active design work going on on the conceptual side on what these types actually are / what the best conceptual frame is for them. This design is meant as a small step in the direction of improving clarity while we wait for the concepts to solidify.

We are also a bit wary of using color to indicate differences since the visualized data is likely to have color and it's easy to distract or accidentally imply false connections to data.