Improve UI of various components in the selection panel #6297

abey79 · 2024-05-13T08:38:59Z

What

Follow up to Rename UiVerbosity to UiLayout and make its variants more precise #6291
Fixes Change UiVerbosity to UiLayout and tighten up related implementations #6245
Unblocks Use the ListItem style for the component list (in the Selection Panel when an entity is selected) #4161
Limitation Improve usage of monospace vs. proportional fonts for data display #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:

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

Screenshots

When truncated:

Checklist

I have read and agree to Contributor Guide and the Code of Conduct
I've included a screenshot or gif (if applicable)
I have tested the web demo (if applicable):
- Using examples from latest main build: rerun.io/viewer
- Using full set of examples from nightly build: rerun.io/viewer
The PR title and labels are set such as to maximize their usefulness for the next release's CHANGELOG
If applicable, add a new check to the release checklist!

To run all checks from main, comment on the PR with @rerun-bot full-check.

Wumpf · 2024-05-13T14:18:20Z

before:

Wumpf

nice!

Wumpf · 2024-05-13T14:22:26Z

crates/re_data_ui/src/data.rs

+impl DataUi for Range1D {
+    fn data_ui(
+        &self,
+        _ctx: &ViewerContext<'_>,
+        ui: &mut Ui,
+        ui_layout: UiLayout,
+        _query: &LatestAtQuery,
+        _db: &EntityDb,
+    ) {
+        label_for_ui_layout(ui, ui_layout, self.to_string());
+    }
+}
+
+impl DataUi for Range2D {
+    fn data_ui(
+        &self,
+        _ctx: &ViewerContext<'_>,
+        ui: &mut Ui,
+        ui_layout: UiLayout,
+        _query: &LatestAtQuery,
+        _db: &EntityDb,
+    ) {
+        label_for_ui_layout(ui, ui_layout, self.to_string());
    }
 }


so before we had data ui implement for those we'd just generate a label automatically. Shouldn't that label generation use label_for_ui_layout instead?

Are you referring to text_ui() (in component_ui_registry.rs)? I believe several code path lead to that function.

Looking at it a bit more... It's essentially doing a more fancy version of label_for_ui_layout, so these are possibly duplicates. text_ui uses monospace font though, I'm not sure why. Seems like some further cleaning is in order around here.

See update PR description. There is much work to be done here still.

Wumpf · 2024-05-13T14:26:04Z

crates/re_data_ui/src/image.rs

-        shapes
-    }
+    format!(
+        "shape: {shapes}{}",


the shape: part isn't useful and just takes space imho. Interestingly, on the screenshots you took one has it and one doesn't ;-)
(I checked locally, it's always there now)

yep, one screenshot slept through outdated :)

That said: I dont think 4, 3, 5, 1 by itself is very descriptive. that looks very much like a 1x4 int tensor (which it is not).

I guess I could go 4x3x5x1, but still need to special case when dimension have labels. Will give it a second look.

I figured out a decent way, see updated screenshots. I also added some cases to the checklist.

…aces instead of `label_for_ui_layout`

) ### 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`.

abey79 marked this pull request as draft May 13, 2024 08:40

abey79 added ui concerns graphical user interface include in changelog labels May 13, 2024

abey79 changed the title ~~Fix UI of UiLayout::List of many DataUi implementation~~ Make all DataUi implementation compliant with the constraints of UiLayout::List May 13, 2024

abey79 changed the title ~~Make all DataUi implementation compliant with the constraints of UiLayout::List~~ Make all DataUi implementations compliant with the constraints of UiLayout::List May 13, 2024

abey79 marked this pull request as ready for review May 13, 2024 10:07

Base automatically changed from antoine/ui-verbosity-rename to main May 13, 2024 11:55

abey79 added 5 commits May 13, 2024 15:37

Fix UI of UiLayout::List of many DataUi implementation

e484b67

WIP checklist

4439c48

improved tensor shape display

1789453

Improved rangeXD display

673bd78

all_comp_checklist: added tensor with more dims

5f871e3

abey79 force-pushed the antoine/data-ui-list-update branch from 2a9e780 to 5f871e3 Compare May 13, 2024 13:37

Wumpf self-requested a review May 13, 2024 14:12

Wumpf changed the title ~~Make all DataUi implementations compliant with the constraints of UiLayout::List~~ Improve layouting of various items in the selection ui May 13, 2024

Wumpf approved these changes May 13, 2024

View reviewed changes

abey79 changed the title ~~Improve layouting of various items in the selection ui~~ Improve UI of various components in the selection panel May 13, 2024

abey79 mentioned this pull request May 13, 2024

Use list_item for the component list in InstancePath::data_ui #6309

Merged

6 tasks

abey79 added 4 commits May 13, 2024 18:13

Lints

15d9c28

Improve UI for tensors

8cbbdd1

Clone iter instead of duplicate

3857fb9

Use the correct "multiplication" character

dd79e58

abey79 mentioned this pull request May 14, 2024

Improve usage of monospace vs. proportional fonts for data display #6315

Open

abey79 added 2 commits May 14, 2024 11:41

Rename text_ui to data_label_for_ui_layout and used it in many pl…

8622eff

…aces instead of `label_for_ui_layout`

Make data_label_for_ui_layout pub

0569595

abey79 merged commit 3ad7245 into main May 14, 2024
35 checks passed

abey79 deleted the antoine/data-ui-list-update branch May 14, 2024 11:43

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve UI of various components in the selection panel #6297

Improve UI of various components in the selection panel #6297

abey79 commented May 13, 2024 •

edited by github-actions bot

Loading

Wumpf commented May 13, 2024

Wumpf left a comment

Wumpf May 13, 2024

abey79 May 13, 2024

abey79 May 14, 2024

Wumpf May 13, 2024

abey79 May 13, 2024

abey79 May 14, 2024

Improve UI of various components in the selection panel #6297

Improve UI of various components in the selection panel #6297

Conversation

abey79 commented May 13, 2024 • edited by github-actions bot Loading

What

Screenshots

Checklist

Wumpf commented May 13, 2024

Wumpf left a comment

Choose a reason for hiding this comment

Wumpf May 13, 2024

Choose a reason for hiding this comment

abey79 May 13, 2024

Choose a reason for hiding this comment

abey79 May 14, 2024

Choose a reason for hiding this comment

Wumpf May 13, 2024

Choose a reason for hiding this comment

abey79 May 13, 2024

Choose a reason for hiding this comment

abey79 May 14, 2024

Choose a reason for hiding this comment

abey79 commented May 13, 2024 •

edited by github-actions bot

Loading