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.

Sign up for GitHub

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

Jump to bottom

Rework how the selected item title is displayed in the Selection Panel #4159

Closed
2 tasks
Tracked by #4140
abey79 opened this issue Nov 7, 2023 · 0 comments · Fixed by #4324
Closed
2 tasks
Tracked by #4140

Rework how the selected item title is displayed in the Selection Panel #4159

abey79 opened this issue Nov 7, 2023 · 0 comments · Fixed by #4324
Assignees
@abey79
Labels
ui concerns graphical user interface

Comments

@abey79
Copy link
Member

abey79 commented Nov 7, 2023 •
edited
Loading

The way the Selection Panel indicates what is current displayed can be improved:

  • The selected thing is often highlighted in blue (because... well... it's selected), which is confusing (looks interactive when it's actually not).
  • The selected thing sometimes appears second instead of first.
  • The styling is inconsistant with the left sidebar.

The top section should be reworked such that:

  • The selected item is always on top.
  • The selected thing should be displayed as a (full width) title bar using ListItem, with all possible context (icon if Space View, note on the nature of the thing, etc.—see figjam).

WIP conceptual proto (misses lots of UI element):

image

Relevant FigJam: https://www.figma.com/file/4ypyTDAAu1RmFcPocpiPB5/Selection-Panel-cleanup?type=whiteboard&node-id=0-1&t=eKgC0PjaOa3woiE2-0
@abey79 abey79 added the ui concerns graphical user interface label Nov 7, 2023
This was referenced Nov 7, 2023
Open
Closed
@abey79 abey79 changed the title Rework the Selection Panel's top content Rework how the selected item title is displayed in the Selection Panel Nov 21, 2023
@abey79 abey79 self-assigned this Nov 23, 2023
@abey79 abey79 mentioned this issue Nov 23, 2023
Merged
4 tasks
Wumpf pushed a commit that referenced this issue Nov 27, 2023
@abey79
Improve the Selection Panel with better title, context, and Space Vie…
7789517 
…w key properties (#4324)

### What

~~Do not merge until after 0.11.~~

This PR reworks the Selection Panel to improve the title ("What is
selected?"), the context ("Where is the selected thing to be found?"),
and the key properties of Space Views (name, origin, type). This is a
first step towards the WIP designs by @martenbjork related to
blueprints.

Changes:
- Full-width, blue title bar consistent with other panel's style and
with the idea that this thing is selected.
- "Context" section listing the place(s) this thing is to be found.
- This is much more consistant across `Item` kinds. Previously, stuff
was displayed all over the place.
- From StreamEntity, it's now it's possible to navigate to any related
SpaceViewEntity _or_ Space Views. Previously, a button confusingly named
after the space view would actually lead to the SpaceViewEntity.
- For Space Views, the Name/Origin/Type are now displayed on top (for
all types of space views).
- This greatly increase the discoverability of the "Name" property.
Previously it was hiding in plain sight in what appeared to be
contextual information.

**Note**: the end-game for context is bread-crumbs like these, but
that's for another day as we're don't yet have an easy way to walk _up_
the hierarchy:

<img width="628" alt="image"
src="https://github.com/rerun-io/rerun/assets/49431240/8f241bfe-c348-41a6-aa13-dde76475b6c2">

<br/>
<br/>

* Closes #4159
* Closes #4288
* Closes #4160

### Screenshots

Space View:
<img width="380" alt="image"
src="https://github.com/rerun-io/rerun/assets/49431240/cd6c3e2f-4a34-44b2-b0ff-604274459298">

Group:

<img width="429" alt="image"
src="https://github.com/rerun-io/rerun/assets/49431240/362ae16b-c821-420d-a1c3-2da514c14ba4">


Entity in Space View:

<img width="380" alt="image"
src="https://github.com/rerun-io/rerun/assets/49431240/ab609404-f41c-4ffe-8035-7f69ea697c44">

Entity in Streams:

<img width="424" alt="image"
src="https://github.com/rerun-io/rerun/assets/49431240/97995350-ab55-471d-a6f1-34ab208a6a5b">

Component:

<img width="428" alt="image"
src="https://github.com/rerun-io/rerun/assets/49431240/0ac3f439-fd32-4c90-99e9-409aea9676c9">



### Checklist
* [x] I have read and agree to [Contributor
Guide](https://github.com/rerun-io/rerun/blob/main/CONTRIBUTING.md) and
the [Code of
Conduct](https://github.com/rerun-io/rerun/blob/main/CODE_OF_CONDUCT.md)
* [x] I've included a screenshot or gif (if applicable)
* [x] I have tested [demo.rerun.io](https://demo.rerun.io/pr/4324) (if
applicable)
* [x] The PR title and labels are set such as to maximize their
usefulness for the next release's CHANGELOG

- [PR Build Summary](https://build.rerun.io/pr/4324)
- [Docs
preview](https://rerun.io/preview/ed064713de2471df1cac9eeeea2173a4f4fd7c7e/docs)
<!--DOCS-PREVIEW-->
- [Examples
preview](https://rerun.io/preview/ed064713de2471df1cac9eeeea2173a4f4fd7c7e/examples)
<!--EXAMPLES-PREVIEW-->
- [Recent benchmark results](https://build.rerun.io/graphs/crates.html)
- [Wasm size tracking](https://build.rerun.io/graphs/sizes.html)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@abey79 abey79

Labels
ui concerns graphical user interface
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Improve the Selection Panel with better title, context, and Space View key properties rerun-io/rerun
1 participant
@abey79