Add a tooltip to column headers with the content of the descriptor (#9947)

### What

Title.

TODO:
- [x] validate design
- [x] provide more explanation on stuff?
- [x] happy with the button to copy? (note the info message feedback)

cc @gavrelina 

<img width="287" alt="image"
src="https://github.com/user-attachments/assets/5b0102f6-1b3d-408d-a2c1-c30029659b40"
/>
<img width="373" alt="image"
src="https://github.com/user-attachments/assets/5be65caf-7868-4d97-b166-ed938af5b1d1"
/>
<img width="264" alt="image"
src="https://github.com/user-attachments/assets/d6accc46-f98e-43a7-bde7-488f09c1c94b"
/>

---------

Co-authored-by: Emil Ernerfeldt <[email protected]>

Author: abey79

Cargo.lock

@@ -6921,6 +6921,7 @@ dependencies = [
  "re_arrow_util",
  "re_chunk_store",
  "re_dataframe",
+ "re_log",
  "re_log_types",
  "re_sorbet",
  "re_tracing",

crates/store/re_sorbet/src/index_column_descriptor.rs

@@ -14,15 +14,15 @@ pub struct UnsupportedTimeType {
 #[derive(Debug, Clone, PartialEq, Eq, Hash)]
 pub struct IndexColumnDescriptor {
     /// The timeline this column is associated with.
-    timeline: Timeline,
+    pub timeline: Timeline,
 
     /// The Arrow datatype of the column.
-    datatype: ArrowDatatype,
+    pub datatype: ArrowDatatype,
 
     /// Are the indices in this column sorted?
     ///
     /// `false` means either "unsorted" or "unknown".
-    is_sorted: bool,
+    pub is_sorted: bool,
 }
 
 impl PartialOrd for IndexColumnDescriptor {

crates/viewer/re_dataframe_ui/Cargo.toml

@@ -22,6 +22,7 @@ all-features = true
 re_arrow_util.workspace = true
 re_chunk_store.workspace = true
 re_dataframe.workspace = true
+re_log.workspace = true
 re_log_types.workspace = true
 re_sorbet.workspace = true
 re_tracing.workspace = true

crates/viewer/re_dataframe_ui/src/datafusion_table_widget.rs

@@ -393,48 +393,57 @@ impl egui_table::TableDelegate for DataFusionTableDelegate<'_> {
             });
 
             header_ui(ui, |ui| {
-                egui::Sides::new().show(
-                    ui,
-                    |ui| {
-                        ui.label(egui::RichText::new(name).strong().monospace());
-
-                        if let Some(dir_icon) = current_sort_direction.map(SortDirection::icon) {
-                            ui.add_space(-5.0);
-                            ui.small_icon(
-                                dir_icon,
-                                Some(
-                                    ui.design_tokens()
-                                        .color(re_ui::ColorToken::blue(re_ui::Scale::S450)),
-                                ),
-                            );
-                        }
-                    },
-                    |ui| {
-                        egui::containers::menu::MenuButton::from_button(
-                            ui.small_icon_button_widget(&re_ui::icons::MORE),
-                        )
-                        .ui(ui, |ui| {
-                            for sort_direction in SortDirection::iter() {
-                                let already_sorted =
-                                    Some(&sort_direction) == current_sort_direction;
-
-                                if ui
-                                    .add_enabled_ui(!already_sorted, |ui| {
-                                        sort_direction.menu_button(ui)
-                                    })
-                                    .inner
-                                    .clicked()
-                                {
-                                    self.new_blueprint.sort_by = Some(SortBy {
-                                        column: column_name.to_owned(),
-                                        direction: sort_direction,
-                                    });
-                                    ui.close();
-                                }
+                egui::Sides::new()
+                    .show(
+                        ui,
+                        |ui| {
+                            let response = ui.label(egui::RichText::new(name).strong().monospace());
+
+                            if let Some(dir_icon) = current_sort_direction.map(SortDirection::icon)
+                            {
+                                ui.add_space(-5.0);
+                                ui.small_icon(
+                                    dir_icon,
+                                    Some(
+                                        ui.design_tokens()
+                                            .color(re_ui::ColorToken::blue(re_ui::Scale::S450)),
+                                    ),
+                                );
                             }
-                        });
-                    },
-                );
+
+                            response
+                        },
+                        |ui| {
+                            egui::containers::menu::MenuButton::from_button(
+                                ui.small_icon_button_widget(&re_ui::icons::MORE),
+                            )
+                            .ui(ui, |ui| {
+                                for sort_direction in SortDirection::iter() {
+                                    let already_sorted =
+                                        Some(&sort_direction) == current_sort_direction;
+
+                                    if ui
+                                        .add_enabled_ui(!already_sorted, |ui| {
+                                            sort_direction.menu_button(ui)
+                                        })
+                                        .inner
+                                        .clicked()
+                                    {
+                                        self.new_blueprint.sort_by = Some(SortBy {
+                                            column: column_name.to_owned(),
+                                            direction: sort_direction,
+                                        });
+                                        ui.close();
+                                    }
+                                }
+                            });
+                        },
+                    )
+                    .0
+            })
+            .inner
+            .on_hover_ui(|ui| {
+                column_descriptor_ui(ui, desc);
             });
         }
     }
@@ -481,3 +490,94 @@ impl egui_table::TableDelegate for DataFusionTableDelegate<'_> {
         re_ui::DesignTokens::table_line_height() + CELL_MARGIN.sum().y
     }
 }
+
+fn column_descriptor_ui(ui: &mut egui::Ui, column: &ColumnDescriptorRef<'_>) {
+    match *column {
+        ColumnDescriptorRef::RowId(desc) => {
+            let re_sorbet::RowIdColumnDescriptor { is_sorted } = desc;
+
+            header_property_ui(ui, "Type", "row id");
+            header_property_ui(ui, "Sorted", sorted_text(*is_sorted));
+        }
+        ColumnDescriptorRef::Time(desc) => {
+            let re_sorbet::IndexColumnDescriptor {
+                timeline,
+                datatype,
+                is_sorted,
+            } = desc;
+
+            header_property_ui(ui, "Type", "index");
+            header_property_ui(ui, "Timeline", timeline.name());
+            header_property_ui(ui, "Sorted", sorted_text(*is_sorted));
+            datatype_ui(ui, &column.display_name(), datatype);
+        }
+        ColumnDescriptorRef::Component(desc) => {
+            let re_sorbet::ComponentColumnDescriptor {
+                store_datatype,
+                component_name,
+                entity_path,
+                archetype_name,
+                archetype_field_name,
+                is_static,
+                is_indicator,
+                is_tombstone,
+                is_semantically_empty,
+            } = desc;
+
+            header_property_ui(ui, "Type", "component");
+            header_property_ui(ui, "Component", component_name.full_name());
+            header_property_ui(ui, "Entity path", entity_path.to_string());
+            datatype_ui(ui, &column.display_name(), store_datatype);
+            header_property_ui(
+                ui,
+                "Archetype",
+                archetype_name.map(|a| a.full_name()).unwrap_or("-"),
+            );
+            //TODO(#9978): update this if we rename this descriptor field.
+            header_property_ui(
+                ui,
+                "Archetype field",
+                archetype_field_name.map(|a| a.as_str()).unwrap_or("-"),
+            );
+            header_property_ui(ui, "Static", is_static.to_string());
+            header_property_ui(ui, "Indicator", is_indicator.to_string());
+            header_property_ui(ui, "Tombstone", is_tombstone.to_string());
+            header_property_ui(ui, "Empty", is_semantically_empty.to_string());
+        }
+    }
+}
+
+fn sorted_text(sorted: bool) -> &'static str {
+    if sorted { "true" } else { "unknown" }
+}
+
+fn header_property_ui(ui: &mut egui::Ui, label: &str, value: impl AsRef<str>) {
+    egui::Sides::new().show(ui, |ui| ui.strong(label), |ui| ui.monospace(value.as_ref()));
+}
+
+fn datatype_ui(ui: &mut egui::Ui, column_name: &str, datatype: &arrow::datatypes::DataType) {
+    egui::Sides::new().show(
+        ui,
+        |ui| ui.strong("Datatype"),
+        |ui| {
+            // We don't want the copy button to stand out next to the other properties. The copy
+            // icon already indicates that it's a button.
+            ui.visuals_mut().widgets.inactive.fg_stroke =
+                ui.visuals_mut().widgets.noninteractive.fg_stroke;
+
+            if ui
+                .add(
+                    egui::Button::image_and_text(
+                        re_ui::icons::COPY.as_image(),
+                        egui::RichText::new(re_arrow_util::format_data_type(datatype)).monospace(),
+                    )
+                    .image_tint_follows_text_color(true),
+                )
+                .clicked()
+            {
+                ui.ctx().copy_text(format!("{datatype:#?}"));
+                re_log::info!("Copied full datatype of column `{column_name}` to clipboard");
+            }
+        },
+    );
+}

crates/viewer/re_ui/data/icons/copy.png

@@ -173,3 +173,4 @@ pub const SHIFT: Icon = icon_from_path!("../data/icons/shift.png");
 pub const CONTROL: Icon = icon_from_path!("../data/icons/control.png");
 pub const COMMAND: Icon = icon_from_path!("../data/icons/command.png");
 pub const OPTION: Icon = icon_from_path!("../data/icons/option.png");
+pub const COPY: Icon = icon_from_path!("../data/icons/copy.png");