Improve UI of various components in the selection panel

crates/re_data_ui/src/annotation_context.rs

@@ -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::{label_for_ui_layout, table_for_ui_layout, DataUi};
 
 impl crate::EntityDataUi for re_types::components::ClassId {
     fn entity_data_ui(
@@ -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_str(" ");
+                    text.push_str(label.as_str());
                 }
+                label_for_ui_layout(ui, ui_layout, text);
             });
 
             let id = self.0;
@@ -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);
                         });
                     }
                 }
@@ -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));
         }
     }
 }
@@ -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,
@@ -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_str(" ");
+                    text.push_str(label.as_str());
                 }
+
+                label_for_ui_layout(ui, ui_layout, text);
             });
         } else {
-            ui.label(format!("{}", self.0));
+            label_for_ui_layout(ui, ui_layout, format!("{}", self.0));
         }
     }
 }
@@ -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| {

crates/re_data_ui/src/component_ui_registry.rs

@@ -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);

crates/re_data_ui/src/data.rs

@@ -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::{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;
@@ -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());
             }
         }
     }
@@ -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());
+        label_for_ui_layout(ui, ui_layout, self.to_string());
     }
 }
 
@@ -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());
+        label_for_ui_layout(ui, ui_layout, self.to_string());
     }
 }
 
@@ -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());
+        label_for_ui_layout(ui, ui_layout, self.to_string());
     }
 }
 
@@ -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());
+        label_for_ui_layout(ui, ui_layout, self.to_string());
     }
 }
 
@@ -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());
+        label_for_ui_layout(ui, ui_layout, self.to_string());
     }
 }
 
@@ -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());
+        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,
+    ) {
+        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());
     }
 }
 
@@ -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;
@@ -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;

crates/re_data_ui/src/image.rs

@@ -12,18 +12,17 @@ use re_viewer_context::{
     ViewerContext,
 };
 
-use crate::image_meaning_for_entity;
+use crate::{image_meaning_for_entity, label_for_ui_layout};
 
 use super::EntityDataUi;
 
 pub fn format_tensor_shape_single_line(shape: &[TensorDimension]) -> String {
     const MAX_SHOWN: usize = 4; // should be enough for width/height/depth and then some!
     let shapes = shape.iter().take(MAX_SHOWN).join(", ");
-    if shape.len() > MAX_SHOWN {
-        format!("{shapes}…")
-    } else {
-        shapes
-    }
+    format!(
+        "shape: {shapes}{}",
+        if shape.len() > MAX_SHOWN { ",…" } else { "" }
+    )
 }
 
 impl EntityDataUi for re_types::components::TensorData {
@@ -64,7 +63,7 @@ impl EntityDataUi for re_types::components::TensorData {
                 );
             }
             Err(err) => {
-                ui.label(ctx.re_ui.error_text(err.to_string()));
+                label_for_ui_layout(ui, ui_layout, ctx.re_ui.error_text(err.to_string()));
             }
         }
     }
@@ -157,7 +156,7 @@ pub fn tensor_ui(
                     ],
                     None => tensor.shape.clone(),
                 };
-                ui.add(egui::Label::new(format_tensor_shape_single_line(&shape)).wrap(true))
+                label_for_ui_layout(ui, ui_layout, format_tensor_shape_single_line(&shape))
                     .on_hover_ui(|ui| {
                         tensor_summary_ui(
                             ctx.re_ui,

crates/re_data_ui/src/lib.rs

@@ -208,3 +208,20 @@ pub fn table_for_ui_layout(
         }
     }
 }
+
+pub fn label_for_ui_layout(
+    ui: &mut egui::Ui,
+    ui_layout: UiLayout,
+    text: impl Into<egui::WidgetText>,
+) -> egui::Response {
+    let mut label = egui::Label::new(text);
+
+    match ui_layout {
+        UiLayout::List => label = label.truncate(true),
+        UiLayout::Tooltip | UiLayout::SelectionPanelLimitHeight | UiLayout::SelectionPanelFull => {
+            label = label.wrap(true)
+        }
+    }
+
+    ui.add(label)
+}

crates/re_data_ui/src/pinhole.rs

@@ -1,7 +1,7 @@
 use re_types::components::{PinholeProjection, Resolution};
 use re_viewer_context::{UiLayout, ViewerContext};
 
-use crate::DataUi;
+use crate::{label_for_ui_layout, DataUi};
 
 impl DataUi for PinholeProjection {
     fn data_ui(
@@ -12,24 +12,32 @@ impl DataUi for PinholeProjection {
         query: &re_data_store::LatestAtQuery,
         db: &re_entity_db::EntityDb,
     ) {
-        if ui_layout == UiLayout::List {
-            // See if this is a trivial pinhole, and can be displayed as such:
-            let fl = self.focal_length_in_pixels();
-            let pp = self.principal_point();
-            if *self == Self::from_focal_length_and_principal_point(fl, pp) {
-                let fl = if fl.x() == fl.y() {
-                    fl.x().to_string()
-                } else {
-                    fl.to_string()
-                };
+        match ui_layout {
+            UiLayout::List => {
+                // See if this is a trivial pinhole, and can be displayed as such:
+                let fl = self.focal_length_in_pixels();
+                let pp = self.principal_point();
+                if *self == Self::from_focal_length_and_principal_point(fl, pp) {
+                    let fl = if fl.x() == fl.y() {
+                        fl.x().to_string()
+                    } else {
+                        fl.to_string()
+                    };
 
-                ui.label(format!("Focal length: {fl}\nPrincipal point: {pp}"))
-                    .on_hover_ui(|ui| self.data_ui(ctx, ui, UiLayout::Tooltip, query, db));
-                return;
+                    label_for_ui_layout(
+                        ui,
+                        ui_layout,
+                        format!("Focal length: {fl}, principal point: {pp}"),
+                    )
+                } else {
+                    label_for_ui_layout(ui, ui_layout, "3x3 projection matrix")
+                }
+                .on_hover_ui(|ui| self.data_ui(ctx, ui, UiLayout::Tooltip, query, db));
+            }
+            _ => {
+                self.0.data_ui(ctx, ui, ui_layout, query, db);
             }
         }
-
-        self.0.data_ui(ctx, ui, ui_layout, query, db);
     }
 }
 
@@ -38,11 +46,11 @@ impl DataUi for Resolution {
         &self,
         _ctx: &ViewerContext<'_>,
         ui: &mut egui::Ui,
-        _ui_layout: UiLayout,
+        ui_layout: UiLayout,
         _query: &re_data_store::LatestAtQuery,
         _db: &re_entity_db::EntityDb,
     ) {
         let [x, y] = self.0 .0;
-        ui.monospace(format!("{x}x{y}"));
+        label_for_ui_layout(ui, ui_layout, format!("{x}x{y}"));
     }
 }