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.

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

Improve UI of various components in the selection panel #6297

Merged
merged 11 commits into from May 14, 2024

Conversation

abey79
Copy link
Contributor

@abey79 abey79 commented May 13, 2024

What

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

image image image image image

When truncated:

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 the web demo (if applicable):
  • 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.

@abey79 abey79 marked this pull request as draft May 13, 2024 08:40
@abey79 abey79 added ui concerns graphical user interface include in changelog labels May 13, 2024
@abey79 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 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 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 abey79 force-pushed the antoine/data-ui-list-update branch from 2a9e780 to 5f871e3 Compare May 13, 2024 13:37
@Wumpf Wumpf self-requested a review May 13, 2024 14:12
@Wumpf
Copy link
Member

Wumpf commented May 13, 2024

before:
image
image
image

@Wumpf 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
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.

nice!

Comment on lines 185 to 209
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());
}
}
Copy link
Member

Choose a reason for hiding this comment

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

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?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

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.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

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

shapes
}
format!(
"shape: {shapes}{}",
Copy link
Member

Choose a reason for hiding this comment

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

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)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

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.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

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

@abey79 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 abey79 merged commit 3ad7245 into main May 14, 2024
35 checks passed
@abey79 abey79 deleted the antoine/data-ui-list-update branch May 14, 2024 11:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
include in changelog ui concerns graphical user interface
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Change UiVerbosity to UiLayout and tighten up related implementations
2 participants