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

Improve UI of various components in the selection panel #6297

Merged
merged 11 commits into from
May 14, 2024
Merged

Improve UI of various components in the selection panel #6297

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
e484b67
Fix UI of `UiLayout::List` of many `DataUi` implementation
abey79 May 10, 2024
4439c48
WIP checklist
abey79 May 13, 2024
1789453
improved tensor shape display
abey79 May 13, 2024
673bd78
Improved rangeXD display
abey79 May 13, 2024
5f871e3
all_comp_checklist: added tensor with more dims
abey79 May 13, 2024
15d9c28
Lints
abey79 May 13, 2024
8cbbdd1
Improve UI for tensors
abey79 May 13, 2024
3857fb9
Clone iter instead of duplicate
abey79 May 14, 2024
dd79e58
Use the correct "multiplication" character
abey79 May 14, 2024
8622eff
Rename `text_ui` to `data_label_for_ui_layout` and used it in many pl…
abey79 May 14, 2024
0569595
Make data_label_for_ui_layout pub
abey79 May 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 21 additions & 14 deletions crates/re_data_ui/src/annotation_context.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ use re_types::datatypes::{
};
use re_viewer_context::{auto_color, UiLayout, ViewerContext};

use super::{table_for_ui_layout, DataUi};
use super::{data_label_for_ui_layout, label_for_ui_layout, table_for_ui_layout, DataUi};

impl crate::EntityDataUi for re_types::components::ClassId {
fn entity_data_ui(
Expand All @@ -27,10 +27,12 @@ impl crate::EntityDataUi for re_types::components::ClassId {
let response = ui.horizontal(|ui| {
// Color first, to keep subsequent rows of the same things aligned
small_color_ui(ui, &class.info);
ui.label(format!("{}", self.0));
let mut text = format!("{}", self.0);
if let Some(label) = &class.info.label {
ui.label(label.as_str());
text.push(' ');
text.push_str(label.as_str());
}
label_for_ui_layout(ui, ui_layout, text);
});

let id = self.0;
Expand All @@ -40,7 +42,7 @@ impl crate::EntityDataUi for re_types::components::ClassId {
|| !class.keypoint_annotations.is_empty()
{
response.response.on_hover_ui(|ui| {
class_description_ui(ctx, ui, ui_layout, class, id);
class_description_ui(ctx, ui, UiLayout::Tooltip, class, id);
});
}
}
Expand All @@ -52,7 +54,7 @@ impl crate::EntityDataUi for re_types::components::ClassId {
}
}
} else {
ui.label(format!("{}", self.0));
label_for_ui_layout(ui, ui_layout, format!("{}", self.0));
}
}
}
Expand All @@ -62,7 +64,7 @@ impl crate::EntityDataUi for re_types::components::KeypointId {
&self,
ctx: &ViewerContext<'_>,
ui: &mut egui::Ui,
_ui_layout: UiLayout,
ui_layout: UiLayout,
entity_path: &re_log_types::EntityPath,
query: &re_data_store::LatestAtQuery,
_db: &re_entity_db::EntityDb,
Expand All @@ -71,13 +73,16 @@ impl crate::EntityDataUi for re_types::components::KeypointId {
ui.horizontal(|ui| {
// Color first, to keep subsequent rows of the same things aligned
small_color_ui(ui, &info);
ui.label(format!("{}", self.0));
let mut text = format!("{}", self.0);
if let Some(label) = &info.label {
ui.label(label.as_str());
text.push(' ');
text.push_str(label.as_str());
}

data_label_for_ui_layout(ui, ui_layout, text);
});
} else {
ui.label(format!("{}", self.0));
data_label_for_ui_layout(ui, ui_layout, format!("{}", self.0));
}
}
}
Expand Down Expand Up @@ -108,16 +113,18 @@ impl DataUi for AnnotationContext {
) {
match ui_layout {
UiLayout::List | UiLayout::Tooltip => {
if self.0.len() == 1 {
let text = if self.0.len() == 1 {
let descr = &self.0[0].class_description;
ui.label(format!(

format!(
"One class containing {} keypoints and {} connections",
descr.keypoint_annotations.len(),
descr.keypoint_connections.len()
));
)
} else {
ui.label(format!("{} classes", self.0.len()));
}
format!("{} classes", self.0.len())
};
label_for_ui_layout(ui, ui_layout, text);
}
UiLayout::SelectionPanelLimitHeight | UiLayout::SelectionPanelFull => {
ui.vertical(|ui| {
Expand Down
50 changes: 7 additions & 43 deletions crates/re_data_ui/src/component_ui_registry.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ use re_viewer_context::{ComponentUiRegistry, UiLayout, ViewerContext};

use crate::editors::register_editors;

use super::EntityDataUi;
use super::{data_label_for_ui_layout, EntityDataUi};

pub fn create_component_ui_registry() -> ComponentUiRegistry {
re_tracing::profile_function!();
Expand All @@ -20,6 +20,8 @@ pub fn create_component_ui_registry() -> ComponentUiRegistry {
add_to_registry::<re_types::components::KeypointId>(&mut registry);
add_to_registry::<re_types::components::LineStrip2D>(&mut registry);
add_to_registry::<re_types::components::LineStrip3D>(&mut registry);
add_to_registry::<re_types::components::Range1D>(&mut registry);
add_to_registry::<re_types::components::Range2D>(&mut registry);
add_to_registry::<re_types::components::Resolution>(&mut registry);
add_to_registry::<re_types::components::Rotation3D>(&mut registry);
add_to_registry::<re_types::components::Material>(&mut registry);
Expand Down Expand Up @@ -88,14 +90,14 @@ fn arrow_ui(ui: &mut egui::Ui, ui_layout: UiLayout, array: &dyn arrow2::array::A
if let Some(utf8) = array.as_any().downcast_ref::<Utf8Array<i32>>() {
if utf8.len() == 1 {
let string = utf8.value(0);
text_ui(ui, ui_layout, string);
data_label_for_ui_layout(ui, ui_layout, string);
return;
}
}
if let Some(utf8) = array.as_any().downcast_ref::<Utf8Array<i64>>() {
if utf8.len() == 1 {
let string = utf8.value(0);
text_ui(ui, ui_layout, string);
data_label_for_ui_layout(ui, ui_layout, string);
return;
}
}
Expand All @@ -106,7 +108,7 @@ fn arrow_ui(ui: &mut egui::Ui, ui_layout: UiLayout, array: &dyn arrow2::array::A
let mut string = String::new();
let display = arrow2::array::get_display(array, "null");
if display(&mut string, 0).is_ok() {
text_ui(ui, ui_layout, &string);
data_label_for_ui_layout(ui, ui_layout, &string);
return;
}
}
Expand All @@ -119,47 +121,9 @@ fn arrow_ui(ui: &mut egui::Ui, ui_layout: UiLayout, array: &dyn arrow2::array::A

if data_type_formatted.len() < 20 {
// e.g. "4.2 KiB of Float32"
text_ui(ui, ui_layout, &format!("{bytes} of {data_type_formatted}"));
data_label_for_ui_layout(ui, ui_layout, &format!("{bytes} of {data_type_formatted}"));
} else {
// Huge datatype, probably a union horror show
ui.label(format!("{bytes} of data"));
}
}

fn text_ui(ui: &mut egui::Ui, ui_layout: UiLayout, string: &str) {
let font_id = egui::TextStyle::Monospace.resolve(ui.style());
let color = ui.visuals().text_color();
let wrap_width = ui.available_width();
let mut layout_job =
egui::text::LayoutJob::simple(string.to_owned(), font_id, color, wrap_width);

let mut needs_scroll_area = false;

match ui_layout {
UiLayout::List => {
// Elide
layout_job.wrap.max_rows = 1;
layout_job.wrap.break_anywhere = true;
}
UiLayout::Tooltip => {
layout_job.wrap.max_rows = 3;
}
UiLayout::SelectionPanelLimitHeight => {
let num_newlines = string.chars().filter(|&c| c == '\n').count();
needs_scroll_area = 10 < num_newlines || 300 < string.len();
}
UiLayout::SelectionPanelFull => {
needs_scroll_area = false;
}
}

let galley = ui.fonts(|f| f.layout_job(layout_job)); // We control the text layout; not the label

if needs_scroll_area {
egui::ScrollArea::vertical().show(ui, |ui| {
ui.label(galley);
});
} else {
ui.label(galley);
}
}
66 changes: 47 additions & 19 deletions crates/re_data_ui/src/data.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
use egui::Vec2;
use egui::{Ui, Vec2};
use re_data_store::LatestAtQuery;
use re_entity_db::EntityDb;

use re_format::format_f32;
use re_types::components::{Color, LineStrip2D, LineStrip3D, ViewCoordinates};
use re_types::components::{Color, LineStrip2D, LineStrip3D, Range1D, Range2D, ViewCoordinates};
use re_viewer_context::{UiLayout, ViewerContext};

use super::{table_for_ui_layout, DataUi};
use super::{data_label_for_ui_layout, label_for_ui_layout, table_for_ui_layout, DataUi};

/// Default number of ui points to show a number.
const DEFAULT_NUMBER_WIDTH: f32 = 52.0;
Expand Down Expand Up @@ -62,13 +64,13 @@ impl DataUi for ViewCoordinates {
) {
match ui_layout {
UiLayout::List => {
ui.label(self.describe_short())
label_for_ui_layout(ui, ui_layout, self.describe_short())
.on_hover_text(self.describe());
}
UiLayout::SelectionPanelFull
| UiLayout::SelectionPanelLimitHeight
| UiLayout::Tooltip => {
ui.label(self.describe());
label_for_ui_layout(ui, ui_layout, self.describe());
}
}
}
Expand Down Expand Up @@ -107,11 +109,11 @@ impl DataUi for re_types::datatypes::Vec2D {
&self,
_ctx: &ViewerContext<'_>,
ui: &mut egui::Ui,
_ui_layout: UiLayout,
ui_layout: UiLayout,
_query: &re_data_store::LatestAtQuery,
_db: &re_entity_db::EntityDb,
) {
ui.label(self.to_string());
data_label_for_ui_layout(ui, ui_layout, self.to_string());
}
}

Expand All @@ -120,11 +122,11 @@ impl DataUi for re_types::datatypes::Vec3D {
&self,
_ctx: &ViewerContext<'_>,
ui: &mut egui::Ui,
_ui_layout: UiLayout,
ui_layout: UiLayout,
_query: &re_data_store::LatestAtQuery,
_db: &re_entity_db::EntityDb,
) {
ui.label(self.to_string());
data_label_for_ui_layout(ui, ui_layout, self.to_string());
}
}

Expand All @@ -133,11 +135,11 @@ impl DataUi for re_types::datatypes::Vec4D {
&self,
_ctx: &ViewerContext<'_>,
ui: &mut egui::Ui,
_ui_layout: UiLayout,
ui_layout: UiLayout,
_query: &re_data_store::LatestAtQuery,
_db: &re_entity_db::EntityDb,
) {
ui.label(self.to_string());
data_label_for_ui_layout(ui, ui_layout, self.to_string());
}
}

Expand All @@ -146,11 +148,11 @@ impl DataUi for re_types::datatypes::UVec2D {
&self,
_ctx: &ViewerContext<'_>,
ui: &mut egui::Ui,
_ui_layout: UiLayout,
ui_layout: UiLayout,
_query: &re_data_store::LatestAtQuery,
_db: &re_entity_db::EntityDb,
) {
ui.label(self.to_string());
data_label_for_ui_layout(ui, ui_layout, self.to_string());
}
}

Expand All @@ -159,11 +161,11 @@ impl DataUi for re_types::datatypes::UVec3D {
&self,
_ctx: &ViewerContext<'_>,
ui: &mut egui::Ui,
_ui_layout: UiLayout,
ui_layout: UiLayout,
_query: &re_data_store::LatestAtQuery,
_db: &re_entity_db::EntityDb,
) {
ui.label(self.to_string());
data_label_for_ui_layout(ui, ui_layout, self.to_string());
}
}

Expand All @@ -172,11 +174,37 @@ impl DataUi for re_types::datatypes::UVec4D {
&self,
_ctx: &ViewerContext<'_>,
ui: &mut egui::Ui,
_ui_layout: UiLayout,
ui_layout: UiLayout,
_query: &re_data_store::LatestAtQuery,
_db: &re_entity_db::EntityDb,
) {
ui.label(self.to_string());
data_label_for_ui_layout(ui, ui_layout, self.to_string());
}
}

impl DataUi for Range1D {
fn data_ui(
&self,
_ctx: &ViewerContext<'_>,
ui: &mut Ui,
ui_layout: UiLayout,
_query: &LatestAtQuery,
_db: &EntityDb,
) {
data_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,
) {
data_label_for_ui_layout(ui, ui_layout, self.to_string());
}
}

Expand All @@ -191,7 +219,7 @@ impl DataUi for LineStrip2D {
) {
match ui_layout {
UiLayout::List | UiLayout::Tooltip => {
ui.label(format!("{} positions", self.0.len()));
label_for_ui_layout(ui, ui_layout, format!("{} positions", self.0.len()));
}
UiLayout::SelectionPanelLimitHeight | UiLayout::SelectionPanelFull => {
use egui_extras::Column;
Expand Down Expand Up @@ -238,7 +266,7 @@ impl DataUi for LineStrip3D {
) {
match ui_layout {
UiLayout::List | UiLayout::Tooltip => {
ui.label(format!("{} positions", self.0.len()));
label_for_ui_layout(ui, ui_layout, format!("{} positions", self.0.len()));
}
UiLayout::SelectionPanelFull | UiLayout::SelectionPanelLimitHeight => {
use egui_extras::Column;
Expand Down
Loading
Loading