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

Use the ListItem style for the component list (in the Selection Panel when an entity is selected) #4161

Closed
Tracked by #4140
, #6075
...
abey79 opened this issue Nov 7, 2023 · 4 comments · Fixed by #6309
Closed
Tracked by #4140
, #6075
...

Use the ListItem style for the component list (in the Selection Panel when an entity is selected) #4161

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

Comments

@abey79
Copy link
Member

abey79 commented Nov 7, 2023 •
edited
Loading

This is a list with "synchronised" hover highlight just like the Blueprint and Streams UI. It should be styled the same way.

Design (ignore the fact that components are hierarchical here):
image


blocked by:
@abey79 abey79 mentioned this issue Nov 7, 2023
Open
23 tasks
@abey79 abey79 changed the title For entities, the list of components should use the ListItem style. Use the ListItem style for the component list (in the Selection Panel when an entity is selected) Nov 7, 2023
@abey79 abey79 added the ui concerns graphical user interface label Nov 7, 2023
@abey79 abey79 mentioned this issue Dec 15, 2023
Open
@abey79 abey79 mentioned this issue Apr 23, 2024
Open
11 tasks
@abey79 abey79 self-assigned this Apr 23, 2024
@abey79
Copy link
Member Author

abey79 commented May 1, 2024 •
edited
Loading

List Item 2.0 is close to ready for this, but I'm encountering a number of issues:

  • DataUi implementations makes widespread use of ui.label(...) even for UiVerbosity::Small, which is bad because it doesn't truncate by default. Instead, we should use ui.add(egui::Label::new(...).truncate(true)). Easy but annoying to fix.
  • DataUi ui very often "captures" hover (e.g. when hovering over the egui label), which "unhovers" the list item itself, for a very distracting effect. ListItem deals with this by checking if the content is itself hover, and if so uses a dimmer background for a much better experience. However, DataUi doesn't return an egui::Response, so the hover information is lots. A possible fix for that would be for list item to check cursor position instead of content response. Addressed in ListItem 2.0 (part 3): PropertyContent column auto-sizing #6182
  • Some DataUi implementations of UiVerbosity::Small are not compatible:
    • Rotation3D in axis/angle mode uses multiple lines
    • TensorData has wrapping text (see screenshot)
    • probably many other are problematic
image

@emilk
Copy link
Member

emilk commented May 2, 2024 •
edited
Loading

  • DataUi implementations makes widespread use of ui.label(...) even for UiVerbosity::Small, which is bad because it doesn't truncate by default. Instead, we should use ui.add(egui::Label::new(...).truncate(true)). Easy but annoying to fix.

We could make this a global setting, ui.style_mut().labels.truncate = Some(true); or whatever.
We could also add a ui.label_truncated(…) helper.

@abey79
Copy link
Member Author

abey79 commented May 2, 2024

Yes, the global truncate setting would be really nice!

This was referenced May 7, 2024
Closed
Closed
@abey79
Copy link
Member Author

abey79 commented May 7, 2024

We could make this a global setting, ui.style_mut().labels.truncate = Some(true); or whatever. We could also add a ui.label_truncated(…) helper.

emilk/egui#4473

This was referenced May 13, 2024
Merged
Merged
abey79 added a commit that referenced this issue May 14, 2024
@abey79
Improve UI of various components in the selection panel (#6297)
3ad7245 
### What

- Follow up to #6291 
- Fixes #6245 
- Unblocks #4161
- Limitation #6315

This PR fixes the `UiLayout::List` implementations of `DataUi` such that
they all fit on a single line and are deal with potentially narrow space
(mostly via truncation).

This PR unearthed quite some inconsistencies in how we're using
monospace font for data. For now, `text_ui` (which uses monospace) has
been renamed `data_label_for_ui_layout` to parallel the new
`label_for_ui_layout` (which uses proportional). In the future (#6315),
we must unify both with a better, flexible API that also allows mixed
styles.

TODO:
- [x] blob: check with large binaries -> OK (could certainly be improved
but it truncates correct 🤷🏻)
- [x] tensor data: fix ui for `size(shape) > 3`
- [x] range2d: improve label

### Screenshots

<img width="488" alt="image"
src="https://github.com/rerun-io/rerun/assets/49431240/e82c83c1-0f2b-4d64-9e76-71d28e3cba5c">
<img width="501" alt="image"
src="https://github.com/rerun-io/rerun/assets/49431240/da811427-cad2-463e-8285-9ae096441fc5">
<img width="369" alt="image"
src="https://github.com/rerun-io/rerun/assets/49431240/987af231-43c6-44e5-babb-52efdf110e30">
<img width="314" alt="image"
src="https://github.com/rerun-io/rerun/assets/49431240/2a4174bf-8117-46e5-9734-5e3ac05dd209">
<img width="231" alt="image"
src="https://github.com/rerun-io/rerun/assets/49431240/4fdc4e02-f6ff-43fc-8a68-163985ee0186">
<br/><br/>

When truncated:

<img width="228" alt="image"
src="https://github.com/rerun-io/rerun/assets/49431240/cbfbbb79-df18-48e9-be82-0401feec9d93">


### 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 the web demo (if applicable):
* Using examples from latest `main` build:
[rerun.io/viewer](https://rerun.io/viewer/pr/6297?manifest_url=https://app.rerun.io/version/main/examples_manifest.json)
* Using full set of examples from `nightly` build:
[rerun.io/viewer](https://rerun.io/viewer/pr/6297?manifest_url=https://app.rerun.io/version/nightly/examples_manifest.json)
* [x] The PR title and labels are set such as to maximize their
usefulness for the next release's CHANGELOG
* [x] If applicable, add a new check to the [release
checklist](https://github.com/rerun-io/rerun/blob/main/tests/python/release_checklist)!

- [PR Build Summary](https://build.rerun.io/pr/6297)
- [Recent benchmark results](https://build.rerun.io/graphs/crates.html)
- [Wasm size tracking](https://build.rerun.io/graphs/sizes.html)

To run all checks from `main`, comment on the PR with `@rerun-bot
full-check`.
abey79 added a commit that referenced this issue Jun 4, 2024
@abey79
Use list_item for the component list in InstancePath::data_ui (#6309
aaf9d5e 
)

### What

- Fixes #4161
- Follow up to #6297
- Follow up to #6325

This PR uses `list_item` for the component list in the entity path
selection panel and tooltip.

~~Blocked by emilk/egui#4471 to resolve the
tooltip "first frame flicker"~~

TODO:
- [x] ⚠️ full_span_scope panic on hover on spatial space view:
#6246


#### selection panel

before:

<img width="519" alt="image"
src="https://github.com/rerun-io/rerun/assets/49431240/afa51449-d7bf-4c0c-9d57-0ac25fedcf9f">


after:

<img width="345" alt="image"
src="https://github.com/rerun-io/rerun/assets/49431240/1b524065-f5c0-4834-83ab-bc6b5f83ec37">


*Note*: the hover behaviour is the biggest change here: now full span,
previously just on the left-column button

#### tooltip

before:

<img width="511" alt="image"
src="https://github.com/rerun-io/rerun/assets/49431240/cecb2337-4124-43ed-8b24-b895e71c3b26">

after:
<img width="510" alt="image"
src="https://github.com/rerun-io/rerun/assets/49431240/4adb5113-898d-4585-be56-876d83b7694a">


### 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 the web demo (if applicable):
* Using examples from latest `main` build:
[rerun.io/viewer](https://rerun.io/viewer/pr/6309?manifest_url=https://app.rerun.io/version/main/examples_manifest.json)
* Using full set of examples from `nightly` build:
[rerun.io/viewer](https://rerun.io/viewer/pr/6309?manifest_url=https://app.rerun.io/version/nightly/examples_manifest.json)
* [x] The PR title and labels are set such as to maximize their
usefulness for the next release's CHANGELOG
* [x] If applicable, add a new check to the [release
checklist](https://github.com/rerun-io/rerun/blob/main/tests/python/release_checklist)!

- [PR Build Summary](https://build.rerun.io/pr/6309)
- [Recent benchmark results](https://build.rerun.io/graphs/crates.html)
- [Wasm size tracking](https://build.rerun.io/graphs/sizes.html)

To run all checks from `main`, comment on the PR with `@rerun-bot
full-check`.
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.

Use list_item for the component list in InstancePath::data_ui rerun-io/rerun
2 participants
@emilk @abey79