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

Improve component data table UI in the selection panel #4370

Merged
merged 1 commit into from
Nov 28, 2023
Merged

Improve component data table UI in the selection panel #4370

merged 1 commit into from
Nov 28, 2023

Conversation

abey79
Copy link
Member

@abey79 abey79 commented Nov 28, 2023 •
edited
Loading

What

Improve the UI of component data tables in the selection panel. The behaviour now depends on how many items are selected. If only one is selected, the table expends to the max and relies on the selection panel's ScrollArea.

Screenshots

Single selection:

image

Multiple selections:

image

Hover tooltip are still compact:

image

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 app.rerun.io (if applicable)
  • The PR title and labels are set such as to maximize their usefulness for the next release's CHANGELOG

@abey79 abey79 added ui concerns graphical user interface include in changelog labels Nov 28, 2023
@Wumpf Wumpf self-requested a review November 28, 2023 16:50
@Wumpf
Copy link
Member

Wumpf commented Nov 28, 2023 •
edited
Loading

Wondering if this should apply to more things. Like text

image

@Wumpf
Copy link
Member

Wumpf commented Nov 28, 2023

or annotation context
image

@abey79
Copy link
Member Author

abey79 commented Nov 28, 2023

@Wumpf Definitely. I already had annotation context in sight (will open an issue if I don't get to it), and surely others might need the same. Every impl is slightly different though, so it's not a dumb copy/paste.

@abey79 abey79 mentioned this pull request Nov 28, 2023
Closed
@Wumpf
Copy link
Member

Wumpf commented Nov 28, 2023

ah too bad :)

@abey79
Copy link
Member Author

abey79 commented Nov 28, 2023

I think this PR's fix is acceptable enough to be merged, but I have a plan to make it better and roll it elsewhere: #4375

Wumpf
Wumpf approved these changes Nov 28, 2023
View reviewed changes
Copy link
Member

@Wumpf Wumpf left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

superb and beautifully documented <3

@Wumpf Wumpf merged commit 35e0083 into main Nov 28, 2023
41 of 42 checks passed
@Wumpf Wumpf deleted the antoine/fix-component-data-table branch November 28, 2023 17:26
emilk
emilk reviewed Nov 28, 2023
View reviewed changes
Copy link
Member

@emilk emilk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I appreciate the verbose commenting ⭐⭐⭐

teh-cmc pushed a commit that referenced this pull request Nov 30, 2023
@abey79 @teh-cmc
Improve component data table UI in the selection panel (#4370)
bc6dd9f 
### What

Improve the UI of component data tables in the selection panel. The
behaviour now depends on how many items are selected. If only one is
selected, the table expends to the max and relies on the selection
panel's `ScrollArea`.

* Fixes #3228

### Screenshots

Single selection:

<img width="376" alt="image"
src="https://github.com/rerun-io/rerun/assets/49431240/54eb33b7-21f0-4858-9030-f91ea3df1b53">

Multiple selections:

<img width="384" alt="image"
src="https://github.com/rerun-io/rerun/assets/49431240/d872c788-4bba-4ed2-b1cf-1566198fe05c">

Hover tooltip are still compact:

<img width="197" alt="image"
src="https://github.com/rerun-io/rerun/assets/49431240/55e9217a-c9e4-41b0-8d26-96f35c6a24f3">

### 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 [app.rerun.io](https://app.rerun.io/pr/4370) (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/4370)
- [Docs
preview](https://rerun.io/preview/e51649c650146ac58f3d8df776e242b86ceb5849/docs)
<!--DOCS-PREVIEW-->
- [Examples
preview](https://rerun.io/preview/e51649c650146ac58f3d8df776e242b86ceb5849/examples)
<!--EXAMPLES-PREVIEW-->
- [Recent benchmark results](https://build.rerun.io/graphs/crates.html)
- [Wasm size tracking](https://build.rerun.io/graphs/sizes.html)
@abey79 abey79 mentioned this pull request Dec 4, 2023
Merged
4 tasks
abey79 added a commit that referenced this pull request Dec 6, 2023
@abey79 @emilk
Improve the Selection Panel UI for components when a single item is s…
9ad5a0d 
…elected (#4416)

### What

This PR:
- adds a new UI verbosity level to distinguish between single- and
multi-selection in the Selection Panel;
- adjusts `DataUi` impls accordingly;
- update the UI of for `AnnotationContext` to use collapsible headers
instead of inner scroll areas (there can be *many* tables for one
instance, so inner scroll bars are really annoying);
- adds a script to log very long `AnnotationContext` for UI test
purposes.


* Is affected by (and doesn't fix):
#4367
* Follow-up to #4370
* Fixes #4375

### Screenshot

New collapsible-header-based UI for annotation context:


https://github.com/rerun-io/rerun/assets/49431240/435566a0-420b-48d7-8ea4-026d02d903a2

Also fix this spurious separator (and the related sizing issue) at the
top of the hover box:

<img width="662" alt="image"
src="https://github.com/rerun-io/rerun/assets/49431240/077a3af4-2a5d-423a-8609-46bbc4f66221">


### 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):
  * Full build: [app.rerun.io](https://app.rerun.io/pr/4416/index.html)
* Partial build:
[app.rerun.io](https://app.rerun.io/pr/4416/index.html?manifest_url=https://app.rerun.io/version/nightly/examples_manifest.json)
- Useful for quick testing when changes do not affect examples in any
way
* [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/4416)
- [Docs
preview](https://rerun.io/preview/83f1bdcdcd055dd46658343a44f9ae7022c64f45/docs)
<!--DOCS-PREVIEW-->
- [Examples
preview](https://rerun.io/preview/83f1bdcdcd055dd46658343a44f9ae7022c64f45/examples)
<!--EXAMPLES-PREVIEW-->
- [Recent benchmark results](https://build.rerun.io/graphs/crates.html)
- [Wasm size tracking](https://build.rerun.io/graphs/sizes.html)

---------

Co-authored-by: Emil Ernerfeldt <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@emilk emilk emilk left review comments

@Wumpf Wumpf Wumpf approved these changes

Assignees
No one assigned
Labels
include in changelog ui concerns graphical user interface
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Data view scroll area doesn't cover the whole container
3 participants
@abey79 @Wumpf @emilk