Implement basic UI to display recording properties (#9381)

### Related

* Closes #9188

### What

This crates a basic _Properties_ section in the `re_selection_panel` to
show the recording properties.

> [!IMPORTANT]
> The truncation in the screenshot below will be handled by:
>
> * #9391

<img width="355" alt="image"
src="https://github.com/user-attachments/assets/a1d30aa4-8564-4f9c-a4bc-9cb043084d70"
/>

Author: grtlr

Cargo.lock

@@ -6629,6 +6629,7 @@ dependencies = [
  "egui_tiles",
  "itertools 0.14.0",
  "nohash-hasher",
+ "re_case",
  "re_chunk",
  "re_chunk_store",
  "re_context_menu",

crates/viewer/re_component_ui/src/datatype_uis/mod.rs

@@ -6,6 +6,7 @@ mod range1d;
 mod singleline_string;
 mod vec;
 mod view_id;
+mod view_timestamp;
 mod view_uuid;
 
 pub use bool_toggle::edit_bool;
@@ -23,4 +24,5 @@ pub use range1d::edit_view_range1d;
 pub use singleline_string::{edit_multiline_string, edit_singleline_string};
 pub use vec::{edit_or_view_vec2d, edit_or_view_vec3d, edit_or_view_vec3d_raw};
 pub use view_id::view_view_id;
+pub use view_timestamp::view_timestamp;
 pub use view_uuid::view_uuid;

crates/viewer/re_component_ui/src/datatype_uis/view_timestamp.rs

@@ -0,0 +1,16 @@
+use re_log_types::Timestamp;
+use re_types::datatypes;
+use re_ui::UiLayout;
+use re_viewer_context::MaybeMutRef;
+
+pub fn view_timestamp(
+    ctx: &re_viewer_context::ViewerContext<'_>,
+    ui: &mut egui::Ui,
+    value: &mut MaybeMutRef<'_, impl std::ops::DerefMut<Target = datatypes::TimeInt>>,
+) -> egui::Response {
+    let value: &datatypes::TimeInt = value;
+    UiLayout::List.data_label(
+        ui,
+        Timestamp::from(*value).format(ctx.app_options().timestamp_format),
+    )
+}

crates/viewer/re_component_ui/src/lib.rs

@@ -29,11 +29,12 @@ use datatype_uis::{
     edit_bool, edit_f32_min_to_max_float, edit_f32_zero_to_max, edit_f32_zero_to_one,
     edit_f64_min_to_max_float, edit_f64_zero_to_max, edit_multiline_string, edit_or_view_vec2d,
     edit_or_view_vec3d, edit_singleline_string, edit_u64_range, edit_ui_points, edit_view_enum,
-    edit_view_enum_with_variant_available, edit_view_range1d, view_uuid, view_view_id,
+    edit_view_enum_with_variant_available, edit_view_range1d, view_timestamp, view_uuid,
+    view_view_id,
 };
 
 use re_types::blueprint::components::{RootContainer, ViewMaximized};
-use re_types::components::SeriesVisible;
+use re_types::components::{SeriesVisible, Timestamp};
 use re_types::{
     blueprint::components::{
         BackgroundKind, Corner2D, Enabled, ForceDistance, ForceIterations, ForceStrength,
@@ -98,6 +99,9 @@ pub fn create_component_ui_registry() -> re_viewer_context::ComponentUiRegistry
     registry.add_singleline_edit_or_view::<Visible>(edit_bool);
     registry.add_singleline_edit_or_view::<SeriesVisible>(edit_bool);
 
+    // Date components:
+    registry.add_singleline_edit_or_view::<Timestamp>(view_timestamp);
+
     // Text components:
     registry.add_singleline_edit_or_view::<Text>(edit_singleline_string);
     registry.add_multiline_edit_or_view::<Text>(edit_multiline_string);

crates/viewer/re_component_ui/tests/snapshots/all_components_list_item_narrow/Timestamp_placeholder.png

@@ -1,8 +1,7 @@
 use re_byte_size::SizeBytes as _;
 use re_chunk_store::ChunkStoreConfig;
 use re_entity_db::EntityDb;
-use re_log_types::{StoreKind, Timestamp};
-use re_types::components;
+use re_log_types::StoreKind;
 use re_ui::UiExt as _;
 use re_viewer_context::{UiLayout, ViewerContext};
 
@@ -15,7 +14,7 @@ impl crate::DataUi for EntityDb {
         ui: &mut egui::Ui,
         ui_layout: UiLayout,
         _query: &re_chunk_store::LatestAtQuery,
-        db: &re_entity_db::EntityDb,
+        _db: &re_entity_db::EntityDb,
     ) {
         if ui_layout.is_single_line() {
             // TODO(emilk): standardize this formatting with that in `entity_db_button_ui`
@@ -73,18 +72,6 @@ impl crate::DataUi for EntityDb {
                 ui.grid_left_hand_label("Kind");
                 ui.label(store_id.kind.to_string());
                 ui.end_row();
-
-                if let Some(name) = db.recording_property::<components::Name>() {
-                     ui.grid_left_hand_label("Name");
-                     ui.label(name.to_string());
-                     ui.end_row();
-                }
-
-                if let Some(started) = db.recording_property::<components::Timestamp>() {
-                    ui.grid_left_hand_label("Created");
-                    ui.label(Timestamp::from(started.0).format(ctx.app_options().timestamp_format));
-                    ui.end_row();
-                }
             }
 
             if let Some(latest_row_id) = self.latest_row_id() {
@@ -174,10 +161,9 @@ impl crate::DataUi for EntityDb {
 
         match self.store_kind() {
             StoreKind::Recording => {
-                // TODO(#9188): Create a dedicated UI for the recording properties.
                 if store_id.as_ref() == hub.active_recording_id() {
                     ui.add_space(8.0);
-                    ui.label("This is the active recording");
+                    ui.label("This is the active recording.");
                 }
             }
             StoreKind::Blueprint => {

crates/viewer/re_component_ui/tests/snapshots/all_components_list_item_wide/Timestamp_placeholder.png

@@ -19,6 +19,7 @@ workspace = true
 all-features = true
 
 [dependencies]
+re_case.workspace = true
 re_chunk_store.workspace = true
 re_chunk.workspace = true
 re_context_menu.workspace = true

crates/viewer/re_data_ui/src/entity_db.rs

@@ -281,17 +281,46 @@ impl SelectionPanel {
             _ => {}
         }
 
+        let (query, db) = if let Some(entity_path) = item.entity_path() {
+            guess_query_and_db_for_selected_entity(ctx, entity_path)
+        } else {
+            (ctx.current_query(), ctx.recording())
+        };
+
         if let Some(data_ui_item) = data_section_ui(item) {
             ui.section_collapsing_header("Data").show(ui, |ui| {
                 // TODO(#6075): Because `list_item_scope` changes it. Temporary until everything is `ListItem`.
                 ui.spacing_mut().item_spacing.y = ui.ctx().style().spacing.item_spacing.y;
+                data_ui_item.data_ui(ctx, ui, ui_layout, &query, db);
+            });
+        }
 
-                let (query, db) = if let Some(entity_path) = item.entity_path() {
-                    guess_query_and_db_for_selected_entity(ctx, entity_path)
+        if let Item::StoreId(_) = item {
+            ui.section_collapsing_header("Properties").show(ui, |ui| {
+                let filtered = db
+                    .entity_paths()
+                    .into_iter()
+                    .filter(|entity_path| {
+                        // Only check for properties, but skip the recording properties,
+                        // because we display them already elsewhere in the UI.
+                        entity_path.is_descendant_of(&EntityPath::properties())
+                    })
+                    .collect::<Vec<_>>();
+
+                if filtered.is_empty() {
+                    ui.label("No properties found for this recording.");
                 } else {
-                    (ctx.current_query(), ctx.recording())
-                };
-                data_ui_item.data_ui(ctx, ui, ui_layout, &query, db);
+                    for entity_path in filtered {
+                        // We strip the property part
+                        let name = entity_path
+                            .to_string()
+                            .strip_prefix(format!("{}/", EntityPath::properties()).as_str())
+                            .map(re_case::to_human_case)
+                            .unwrap_or("<unknown>".to_owned());
+                        ui.label(name);
+                        entity_path.data_ui(ctx, ui, ui_layout, &query, db);
+                    }
+                }
             });
         }