Show first line of the docs when hovering a component name (#6609)

### What
* Part of #6556

Now that we can override all kinds of components in the UI, we should
also take care to explain them to the user.

Previously all the user had to go on was the name. With this PR they get
the first line of the docstring for the component, plus a link to the
full docs on our website.

This required adding a new (generated) reflection API.


![image](https://github.com/rerun-io/rerun/assets/1148717/358b1517-a36f-4b7c-8dd0-fc42f29a2e78)

Best reviewed commit-by-commit.

### Related
* lampsitter/egui_commonmark#54

### Later PR
* #6616

### 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):
* Using examples from latest `main` build:
[rerun.io/viewer](https://rerun.io/viewer/pr/6609?manifest_url=https://app.rerun.io/version/main/examples_manifest.json)
* Using full set of examples from `nightly` build:
[rerun.io/viewer](https://rerun.io/viewer/pr/6609?manifest_url=https://app.rerun.io/version/nightly/examples_manifest.json)
* [x] The PR title and labels are set such as to maximize their
usefulness for the next release's CHANGELOG
* [x] If applicable, add a new check to the [release
checklist](https://github.com/rerun-io/rerun/blob/main/tests/python/release_checklist)!

- [PR Build Summary](https://build.rerun.io/pr/6609)
- [Recent benchmark results](https://build.rerun.io/graphs/crates.html)
- [Wasm size tracking](https://build.rerun.io/graphs/sizes.html)

To run all checks from `main`, comment on the PR with `@rerun-bot
full-check`.

---------

Co-authored-by: Andreas Reich <[email protected]>

Author: emilk

Cargo.lock

@@ -5141,6 +5141,7 @@ dependencies = [
  "criterion",
  "document-features",
  "itertools 0.13.0",
+ "nohash-hasher",
  "once_cell",
  "re_arrow2",
  "re_case",
@@ -5283,6 +5284,7 @@ dependencies = [
  "re_string_interner",
  "re_tracing",
  "re_types",
+ "re_types_core",
  "re_ui",
  "serde",
  "slotmap",

crates/re_data_ui/src/component_name.rs

@@ -0,0 +1,39 @@
+use re_types_core::ComponentName;
+use re_ui::UiExt as _;
+use re_viewer_context::{UiLayout, ViewerContext};
+
+use super::DataUi;
+
+impl DataUi for ComponentName {
+    fn data_ui(
+        &self,
+        ctx: &ViewerContext<'_>,
+        ui: &mut egui::Ui,
+        ui_layout: UiLayout,
+        _query: &re_data_store::LatestAtQuery,
+        _db: &re_entity_db::EntityDb,
+    ) {
+        if ui_layout == UiLayout::List {
+            ui.label(self.full_name());
+        } else {
+            ui.scope(|ui| {
+                ui.style_mut().wrap_mode = Some(egui::TextWrapMode::Extend);
+                ui.label(format!("Full name: {}", self.full_name()));
+
+                // Only show the first line of the docs:
+                if let Some(markdown) = ctx
+                    .reflection
+                    .components
+                    .get(self)
+                    .and_then(|info| info.docstring_md.lines().next())
+                {
+                    ui.markdown_ui(egui::Id::new(self), markdown);
+                }
+
+                if let Some(url) = self.doc_url() {
+                    ui.re_hyperlink("Full documentation", url);
+                }
+            });
+        }
+    }
+}

crates/re_data_ui/src/instance_path.rs

@@ -42,7 +42,7 @@ impl DataUi for InstancePath {
             return;
         };
 
-        let components = crate::component_list_for_ui(&components);
+        let components = crate::sorted_component_list_for_ui(&components);
         let indicator_count = components
             .iter()
             .filter(|c| c.is_indicator_component())
@@ -147,6 +147,10 @@ impl DataUi for InstancePath {
                     list_item.show_flat(ui, content)
                 };
 
+                let response = response.on_hover_ui(|ui| {
+                    component_name.data_ui_recording(ctx, ui, UiLayout::Tooltip);
+                });
+
                 if interactive {
                     ctx.select_hovered_on_click(&response, item);
                 }

crates/re_data_ui/src/item_ui.rs

@@ -588,13 +588,7 @@ pub fn app_id_button_ui(
     );
 
     let response = response.on_hover_ui(|ui| {
-        app_id.data_ui(
-            ctx,
-            ui,
-            re_viewer_context::UiLayout::Tooltip,
-            &ctx.current_query(), // unused
-            ctx.recording(),      // unused
-        );
+        app_id.data_ui_recording(ctx, ui, re_viewer_context::UiLayout::Tooltip);
     });
 
     cursor_interact_with_selectable(ctx, response, item)
@@ -615,13 +609,7 @@ pub fn data_source_button_ui(
     );
 
     let response = response.on_hover_ui(|ui| {
-        data_source.data_ui(
-            ctx,
-            ui,
-            re_viewer_context::UiLayout::Tooltip,
-            &ctx.current_query(),
-            ctx.recording(), // unused
-        );
+        data_source.data_ui_recording(ctx, ui, re_viewer_context::UiLayout::Tooltip);
     });
 
     cursor_interact_with_selectable(ctx, response, item)

crates/re_data_ui/src/lib.rs

@@ -13,6 +13,7 @@ mod app_id;
 mod blueprint_data;
 mod blueprint_types;
 mod component;
+mod component_name;
 mod component_path;
 mod component_ui_registry;
 mod data;
@@ -40,13 +41,14 @@ pub use component_ui_registry::{add_to_registry, create_component_ui_registry};
 pub use image_meaning::image_meaning_for_entity;
 
 /// Sort components for display in the UI.
-pub fn component_list_for_ui<'a>(
+pub fn sorted_component_list_for_ui<'a>(
     iter: impl IntoIterator<Item = &'a ComponentName> + 'a,
 ) -> Vec<ComponentName> {
     let mut components: Vec<ComponentName> = iter.into_iter().copied().collect();
 
-    // Put indicator components first:
-    components.sort_by_key(|c| (!c.is_indicator_component(), c.full_name()));
+    // Put indicator components first.
+    // We then sort by the short name, as that is what is shown in the UI.
+    components.sort_by_key(|c| (!c.is_indicator_component(), c.short_name()));
 
     components
 }
@@ -62,6 +64,11 @@ pub trait DataUi {
         query: &re_data_store::LatestAtQuery,
         db: &re_entity_db::EntityDb,
     );
+
+    /// Called [`Self::data_ui`] using the default query and recording.
+    fn data_ui_recording(&self, ctx: &ViewerContext<'_>, ui: &mut egui::Ui, ui_layout: UiLayout) {
+        self.data_ui(ctx, ui, ui_layout, &ctx.current_query(), ctx.recording());
+    }
 }
 
 /// Similar to [`DataUi`], but for data that is related to an entity (e.g. a component).

crates/re_selection_panel/src/defaults_ui.rs

@@ -1,8 +1,7 @@
 use std::collections::{BTreeMap, BTreeSet};
 
-use itertools::Itertools;
-
 use re_data_store::LatestAtQuery;
+use re_data_ui::{sorted_component_list_for_ui, DataUi as _};
 use re_log_types::{DataCell, DataRow, EntityPath, RowId};
 use re_types_core::ComponentName;
 use re_ui::UiExt as _;
@@ -59,7 +58,7 @@ pub fn defaults_ui(ctx: &ViewContext<'_>, space_view: &SpaceViewBlueprint, ui: &
         &space_view.defaults_path,
     );
 
-    let sorted_overrides = active_defaults.iter().sorted();
+    let sorted_overrides = sorted_component_list_for_ui(active_defaults.iter());
 
     let query_context = QueryContext {
         viewer_ctx: ctx.viewer_ctx,
@@ -73,7 +72,7 @@ pub fn defaults_ui(ctx: &ViewContext<'_>, space_view: &SpaceViewBlueprint, ui: &
     re_ui::list_item::list_item_scope(ui, "defaults", |ui| {
         ui.spacing_mut().item_spacing.y = 0.0;
         for component_name in sorted_overrides {
-            let Some(visualizer_identifier) = component_to_vis.get(component_name) else {
+            let Some(visualizer_identifier) = component_to_vis.get(&component_name) else {
                 continue;
             };
             let Ok(visualizer) = ctx
@@ -94,10 +93,10 @@ pub fn defaults_ui(ctx: &ViewContext<'_>, space_view: &SpaceViewBlueprint, ui: &
                     db.store(),
                     query,
                     &space_view.defaults_path,
-                    [*component_name],
+                    [component_name],
                 )
                 .components
-                .get(component_name)
+                .get(&component_name)
                 .cloned(); /* arc */
 
             if let Some(component_data) = component_data {
@@ -107,7 +106,7 @@ pub fn defaults_ui(ctx: &ViewContext<'_>, space_view: &SpaceViewBlueprint, ui: &
                         ui,
                         db,
                         &space_view.defaults_path,
-                        *component_name,
+                        component_name,
                         &component_data,
                         visualizer.as_fallback_provider(),
                     );
@@ -122,12 +121,18 @@ pub fn defaults_ui(ctx: &ViewContext<'_>, space_view: &SpaceViewBlueprint, ui: &
                             .action_button(&re_ui::icons::CLOSE, || {
                                 ctx.save_empty_blueprint_component_by_name(
                                     &space_view.defaults_path,
-                                    *component_name,
+                                    component_name,
                                 );
                             })
                             .value_fn(|ui, _| value_fn(ui)),
                     )
-                    .on_hover_text(component_name.full_name());
+                    .on_hover_ui(|ui| {
+                        component_name.data_ui_recording(
+                            ctx.viewer_ctx,
+                            ui,
+                            re_viewer_context::UiLayout::Tooltip,
+                        );
+                    });
             }
         }
     });

crates/re_selection_panel/src/visualizer_ui.rs

@@ -1,6 +1,6 @@
 use itertools::Itertools;
 
-use re_data_ui::DataUi;
+use re_data_ui::{sorted_component_list_for_ui, DataUi};
 use re_entity_db::EntityDb;
 use re_log_types::EntityPath;
 use re_space_view::latest_at_with_blueprint_resolved_data;
@@ -123,7 +123,7 @@ fn visualizer_components(
     );
 
     // TODO(andreas): Should we show required components in a special way?
-    for &component in query_info.queried.iter() {
+    for component in sorted_component_list_for_ui(query_info.queried.iter()) {
         if component.is_indicator_component() {
             continue;
         }
@@ -249,7 +249,9 @@ fn visualizer_components(
                 ui,
                 list_item::PropertyContent::new(component.short_name()).value_fn(value_fn),
             )
-            .on_hover_text(component.full_name());
+            .on_hover_ui(|ui| {
+                component.data_ui_recording(ctx.viewer_ctx, ui, UiLayout::Tooltip);
+            });
     }
 }
 

crates/re_space_view_spatial/src/ui.rs

@@ -637,13 +637,7 @@ pub fn picking(
                     Some(query.space_view_id),
                     &instance_path,
                 );
-                instance_path.data_ui(
-                    ctx,
-                    ui,
-                    UiLayout::Tooltip,
-                    &ctx.current_query(),
-                    ctx.recording(),
-                );
+                instance_path.data_ui_recording(ctx, ui, UiLayout::Tooltip);
             })
         };
     }
@@ -720,22 +714,10 @@ fn image_hover_ui(
             instance_path.entity_path.clone(),
             re_types::components::TensorData::name(),
         );
-        component_path.data_ui(
-            ctx,
-            ui,
-            UiLayout::List,
-            &ctx.current_query(),
-            ctx.recording(),
-        );
+        component_path.data_ui_recording(ctx, ui, UiLayout::List);
     } else {
         // Show it all, like we do for any other thing we hover
-        instance_path.data_ui(
-            ctx,
-            ui,
-            UiLayout::List,
-            &ctx.current_query(),
-            ctx.recording(),
-        );
+        instance_path.data_ui_recording(ctx, ui, UiLayout::List);
     }
 
     if let Some([h, w, ..]) = tensor.image_height_width_channels() {

crates/re_time_panel/src/lib.rs

@@ -17,8 +17,8 @@ use egui::emath::Rangef;
 use egui::{pos2, Color32, CursorIcon, NumExt, Painter, PointerButton, Rect, Shape, Ui, Vec2};
 
 use re_context_menu::{context_menu_ui_for_item, SelectionUpdateBehavior};
-use re_data_ui::item_ui::guess_instance_path_icon;
 use re_data_ui::DataUi as _;
+use re_data_ui::{item_ui::guess_instance_path_icon, sorted_component_list_for_ui};
 use re_entity_db::{EntityTree, InstancePath, TimeHistogram};
 use re_log_types::{
     external::re_types_core::ComponentName, ComponentPath, EntityPath, EntityPathPart,
@@ -745,7 +745,7 @@ impl TimePanel {
 
         // If this is an entity:
         if !tree.entity.components.is_empty() {
-            for component_name in re_data_ui::component_list_for_ui(tree.entity.components.keys()) {
+            for component_name in sorted_component_list_for_ui(tree.entity.components.keys()) {
                 let data = &tree.entity.components[&component_name];
 
                 let is_static = data.is_static();

crates/re_types_builder/src/codegen/cpp/mod.rs

@@ -174,13 +174,12 @@ impl CppCodeGenerator {
         let mut files_to_write = GeneratedFiles::default();
 
         // Generate folder contents:
-        let ordered_objects = objects
-            .ordered_objects(object_kind.into())
-            .into_iter()
+        let objects_of_kind = objects
+            .objects_of_kind(object_kind)
             .filter(|obj| &obj.scope() == scope)
             .collect_vec();
 
-        for &obj in &ordered_objects {
+        for &obj in &objects_of_kind {
             if let Err(err) = generate_object_files(
                 objects,
                 &folder_path_sdk,
@@ -196,7 +195,7 @@ impl CppCodeGenerator {
         for testing in [false, true] {
             let hash = quote! { # };
             let pragma_once = pragma_once();
-            let header_file_names = ordered_objects
+            let header_file_names = objects_of_kind
                 .iter()
                 .filter(|obj| obj.is_testing() == testing)
                 .map(|obj| format!("{folder_name}/{}.hpp", obj.snake_case_name()))