Add re_data_ui tooltip to graph view nodes (#8311)

### Related

<!--
Include links to any related issues/PRs in a bulleted list, for example:
* Closes #1234
* Part of #1337
-->

* Closes #8279.

### What

Title.

<img width="330" alt="image"
src="https://github.com/user-attachments/assets/c2f0e65e-d532-41ca-a1b9-6d0f758c78a6">


<!--
Make sure the PR title and labels are set to maximize their usefulness
for the CHANGELOG,
and our `git log`.

If you have noticed any breaking changes, include them in the migration
guide.

We track various metrics at <https://build.rerun.io>.

For maintainers:
* To run all checks from `main`, comment on the PR with `@rerun-bot
full-check`.
* To deploy documentation changes immediately after merging this PR, add
the `deploy docs` label.
-->

Cargo.lock

@@ -1923,7 +1923,7 @@ checksum = "0d6ef0072f8a535281e4876be788938b528e9a1d43900b82c2569af7da799125"
 [[package]]
 name = "ecolor"
 version = "0.29.1"
-source = "git+https://github.com/emilk/egui.git?rev=eac7ba01fa37bad35f71bc303561761952361b7c#eac7ba01fa37bad35f71bc303561761952361b7c"
+source = "git+https://github.com/emilk/egui.git?rev=c5ac7d301a90afbaec843ee04fb43d8a0956cc90#c5ac7d301a90afbaec843ee04fb43d8a0956cc90"
 dependencies = [
  "bytemuck",
  "color-hex",
@@ -1940,7 +1940,7 @@ checksum = "18aade80d5e09429040243ce1143ddc08a92d7a22820ac512610410a4dd5214f"
 [[package]]
 name = "eframe"
 version = "0.29.1"
-source = "git+https://github.com/emilk/egui.git?rev=eac7ba01fa37bad35f71bc303561761952361b7c#eac7ba01fa37bad35f71bc303561761952361b7c"
+source = "git+https://github.com/emilk/egui.git?rev=c5ac7d301a90afbaec843ee04fb43d8a0956cc90#c5ac7d301a90afbaec843ee04fb43d8a0956cc90"
 dependencies = [
  "ahash",
  "bytemuck",
@@ -1979,7 +1979,7 @@ dependencies = [
 [[package]]
 name = "egui"
 version = "0.29.1"
-source = "git+https://github.com/emilk/egui.git?rev=eac7ba01fa37bad35f71bc303561761952361b7c#eac7ba01fa37bad35f71bc303561761952361b7c"
+source = "git+https://github.com/emilk/egui.git?rev=c5ac7d301a90afbaec843ee04fb43d8a0956cc90#c5ac7d301a90afbaec843ee04fb43d8a0956cc90"
 dependencies = [
  "accesskit",
  "ahash",
@@ -1996,7 +1996,7 @@ dependencies = [
 [[package]]
 name = "egui-wgpu"
 version = "0.29.1"
-source = "git+https://github.com/emilk/egui.git?rev=eac7ba01fa37bad35f71bc303561761952361b7c#eac7ba01fa37bad35f71bc303561761952361b7c"
+source = "git+https://github.com/emilk/egui.git?rev=c5ac7d301a90afbaec843ee04fb43d8a0956cc90#c5ac7d301a90afbaec843ee04fb43d8a0956cc90"
 dependencies = [
  "ahash",
  "bytemuck",
@@ -2015,7 +2015,7 @@ dependencies = [
 [[package]]
 name = "egui-winit"
 version = "0.29.1"
-source = "git+https://github.com/emilk/egui.git?rev=eac7ba01fa37bad35f71bc303561761952361b7c#eac7ba01fa37bad35f71bc303561761952361b7c"
+source = "git+https://github.com/emilk/egui.git?rev=c5ac7d301a90afbaec843ee04fb43d8a0956cc90#c5ac7d301a90afbaec843ee04fb43d8a0956cc90"
 dependencies = [
  "accesskit_winit",
  "ahash",
@@ -2057,7 +2057,7 @@ dependencies = [
 [[package]]
 name = "egui_extras"
 version = "0.29.1"
-source = "git+https://github.com/emilk/egui.git?rev=eac7ba01fa37bad35f71bc303561761952361b7c#eac7ba01fa37bad35f71bc303561761952361b7c"
+source = "git+https://github.com/emilk/egui.git?rev=c5ac7d301a90afbaec843ee04fb43d8a0956cc90#c5ac7d301a90afbaec843ee04fb43d8a0956cc90"
 dependencies = [
  "ahash",
  "egui",
@@ -2074,7 +2074,7 @@ dependencies = [
 [[package]]
 name = "egui_glow"
 version = "0.29.1"
-source = "git+https://github.com/emilk/egui.git?rev=eac7ba01fa37bad35f71bc303561761952361b7c#eac7ba01fa37bad35f71bc303561761952361b7c"
+source = "git+https://github.com/emilk/egui.git?rev=c5ac7d301a90afbaec843ee04fb43d8a0956cc90#c5ac7d301a90afbaec843ee04fb43d8a0956cc90"
 dependencies = [
  "ahash",
  "bytemuck",
@@ -2092,7 +2092,7 @@ dependencies = [
 [[package]]
 name = "egui_kittest"
 version = "0.29.1"
-source = "git+https://github.com/emilk/egui.git?rev=eac7ba01fa37bad35f71bc303561761952361b7c#eac7ba01fa37bad35f71bc303561761952361b7c"
+source = "git+https://github.com/emilk/egui.git?rev=c5ac7d301a90afbaec843ee04fb43d8a0956cc90#c5ac7d301a90afbaec843ee04fb43d8a0956cc90"
 dependencies = [
  "dify",
  "egui",
@@ -2161,7 +2161,7 @@ checksum = "60b1af1c220855b6ceac025d3f6ecdd2b7c4894bfe9cd9bda4fbb4bc7c0d4cf0"
 [[package]]
 name = "emath"
 version = "0.29.1"
-source = "git+https://github.com/emilk/egui.git?rev=eac7ba01fa37bad35f71bc303561761952361b7c#eac7ba01fa37bad35f71bc303561761952361b7c"
+source = "git+https://github.com/emilk/egui.git?rev=c5ac7d301a90afbaec843ee04fb43d8a0956cc90#c5ac7d301a90afbaec843ee04fb43d8a0956cc90"
 dependencies = [
  "bytemuck",
  "serde",
@@ -2277,7 +2277,7 @@ dependencies = [
 [[package]]
 name = "epaint"
 version = "0.29.1"
-source = "git+https://github.com/emilk/egui.git?rev=eac7ba01fa37bad35f71bc303561761952361b7c#eac7ba01fa37bad35f71bc303561761952361b7c"
+source = "git+https://github.com/emilk/egui.git?rev=c5ac7d301a90afbaec843ee04fb43d8a0956cc90#c5ac7d301a90afbaec843ee04fb43d8a0956cc90"
 dependencies = [
  "ab_glyph",
  "ahash",
@@ -2296,7 +2296,7 @@ dependencies = [
 [[package]]
 name = "epaint_default_fonts"
 version = "0.29.1"
-source = "git+https://github.com/emilk/egui.git?rev=eac7ba01fa37bad35f71bc303561761952361b7c#eac7ba01fa37bad35f71bc303561761952361b7c"
+source = "git+https://github.com/emilk/egui.git?rev=c5ac7d301a90afbaec843ee04fb43d8a0956cc90#c5ac7d301a90afbaec843ee04fb43d8a0956cc90"
 
 [[package]]
 name = "equivalent"
@@ -6242,6 +6242,7 @@ dependencies = [
  "fjadra",
  "nohash-hasher",
  "re_chunk",
+ "re_data_ui",
  "re_entity_db",
  "re_format",
  "re_log_types",

Cargo.toml

@@ -559,13 +559,13 @@ significant_drop_tightening = "allow" # An update of parking_lot made this trigg
 # As a last resport, patch with a commit to our own repository.
 # ALWAYS document what PR the commit hash is part of, or when it was merged into the upstream trunk.
 
-ecolor = { git = "https://github.com/emilk/egui.git", rev = "eac7ba01fa37bad35f71bc303561761952361b7c" }       # egui master 2024-12-03
-eframe = { git = "https://github.com/emilk/egui.git", rev = "eac7ba01fa37bad35f71bc303561761952361b7c" }       # egui master 2024-12-03
-egui = { git = "https://github.com/emilk/egui.git", rev = "eac7ba01fa37bad35f71bc303561761952361b7c" }         # egui master 2024-12-03
-egui_extras = { git = "https://github.com/emilk/egui.git", rev = "eac7ba01fa37bad35f71bc303561761952361b7c" }  # egui master 2024-12-03
-egui_kittest = { git = "https://github.com/emilk/egui.git", rev = "eac7ba01fa37bad35f71bc303561761952361b7c" } # egui master 2024-12-03
-egui-wgpu = { git = "https://github.com/emilk/egui.git", rev = "eac7ba01fa37bad35f71bc303561761952361b7c" }    # egui master 2024-12-03
-emath = { git = "https://github.com/emilk/egui.git", rev = "eac7ba01fa37bad35f71bc303561761952361b7c" }        # egui master 2024-12-03
+ecolor = { git = "https://github.com/emilk/egui.git", rev = "c5ac7d301a90afbaec843ee04fb43d8a0956cc90" }       # egui master 2024-12-03
+eframe = { git = "https://github.com/emilk/egui.git", rev = "c5ac7d301a90afbaec843ee04fb43d8a0956cc90" }       # egui master 2024-12-03
+egui = { git = "https://github.com/emilk/egui.git", rev = "c5ac7d301a90afbaec843ee04fb43d8a0956cc90" }         # egui master 2024-12-03
+egui_extras = { git = "https://github.com/emilk/egui.git", rev = "c5ac7d301a90afbaec843ee04fb43d8a0956cc90" }  # egui master 2024-12-03
+egui_kittest = { git = "https://github.com/emilk/egui.git", rev = "c5ac7d301a90afbaec843ee04fb43d8a0956cc90" } # egui master 2024-12-03
+egui-wgpu = { git = "https://github.com/emilk/egui.git", rev = "c5ac7d301a90afbaec843ee04fb43d8a0956cc90" }    # egui master 2024-12-03
+emath = { git = "https://github.com/emilk/egui.git", rev = "c5ac7d301a90afbaec843ee04fb43d8a0956cc90" }        # egui master 2024-12-03
 
 # Useful while developing:
 # ecolor = { path = "../../egui/crates/ecolor" }

crates/viewer/re_space_view_graph/Cargo.toml

@@ -19,6 +19,7 @@ workspace = true
 all-features = true
 
 [dependencies]
+re_data_ui.workspace = true
 re_chunk.workspace = true
 re_entity_db.workspace = true
 re_format.workspace = true

crates/viewer/re_space_view_graph/src/ui/draw.rs

@@ -5,11 +5,13 @@ use egui::{
     Rect, Response, RichText, Sense, Shape, Stroke, TextWrapMode, Ui, UiBuilder, Vec2, WidgetText,
 };
 use re_chunk::EntityPath;
+use re_data_ui::{item_ui, DataUi as _};
 use re_entity_db::InstancePath;
 use re_types::ArrowString;
+use re_ui::list_item;
 use re_viewer_context::{
-    HoverHighlight, InteractionHighlight, Item, SelectionHighlight, SpaceViewHighlights, ViewQuery,
-    ViewerContext,
+    HoverHighlight, InteractionHighlight, Item, SelectionHighlight, SpaceViewHighlights, UiLayout,
+    ViewQuery, ViewerContext,
 };
 
 use crate::{
@@ -281,29 +283,37 @@ pub fn draw_graph(
         let response = match node {
             Node::Explicit { instance, .. } => {
                 let highlight = entity_highlights.index_highlight(instance.instance_index);
-                let response = draw_node(ui, center, node.label(), highlight);
-
-                let response = if let Label::Text { text, .. } = &instance.label {
-                    response.on_hover_text(format!(
-                        "Graph Node: {}\nLabel: {text}",
-                        instance.graph_node.as_str(),
-                    ))
-                } else {
-                    response.on_hover_text(format!("Graph Node: {}", instance.graph_node.as_str(),))
-                };
+                let mut response = draw_node(ui, center, node.label(), highlight);
 
                 let instance_path =
                     InstancePath::instance(entity_path.clone(), instance.instance_index);
                 ctx.select_hovered_on_click(
                     &response,
-                    vec![(Item::DataResult(query.space_view_id, instance_path), None)].into_iter(),
+                    Item::DataResult(query.space_view_id, instance_path.clone()),
                 );
 
+                response = response.on_hover_ui_at_pointer(|ui| {
+                    list_item::list_item_scope(ui, "graph_node_hover", |ui| {
+                        item_ui::instance_path_button(
+                            ctx,
+                            &query.latest_at_query(),
+                            ctx.recording(),
+                            ui,
+                            Some(query.space_view_id),
+                            &instance_path,
+                        );
+
+                        instance_path.data_ui_recording(ctx, ui, UiLayout::Tooltip);
+                    });
+                });
+
                 response
             }
             Node::Implicit { graph_node, .. } => {
-                draw_node(ui, center, node.label(), Default::default())
-                    .on_hover_text(format!("Implicit Graph Node: {}", graph_node.as_str(),))
+                draw_node(ui, center, node.label(), Default::default()).on_hover_text(format!(
+                    "Implicit node {} created via a reference in a GraphEdge component",
+                    graph_node.as_str(),
+                ))
             }
         };
 

crates/viewer/re_space_view_graph/src/visualizers/edges.rs

@@ -1,5 +1,5 @@
 use re_chunk::LatestAtQuery;
-use re_log_types::EntityPath;
+use re_log_types::{EntityPath, Instance};
 use re_space_view::{DataResultQuery, RangeResultsExt};
 use re_types::{
     self, archetypes,
@@ -19,30 +19,14 @@ pub struct EdgesVisualizer {
 }
 
 pub struct EdgeInstance {
+    // We will need this in the future, when we want to select individual edges.
+    pub _instance: Instance,
     pub source: GraphNode,
     pub target: GraphNode,
     pub source_index: NodeId,
     pub target_index: NodeId,
 }
 
-impl std::hash::Hash for EdgeInstance {
-    fn hash<H: std::hash::Hasher>(&self, state: &mut H) {
-        // We use the more verbose destructring here, to make sure that we
-        // exhaustively consider all fields when hashing (we get a compiler
-        // warning when we forget a field).
-        let Self {
-            // The index fields already uniquely identify `source` and `target`.
-            source: _,
-            target: _,
-            source_index,
-            target_index,
-        } = self;
-        source_index.hash(state);
-        target_index.hash(state);
-    }
-}
-
-#[derive(Hash)]
 pub struct EdgeData {
     pub graph_type: components::GraphType,
     pub edges: Vec<EdgeInstance>,
@@ -81,7 +65,8 @@ impl VisualizerSystem for EdgesVisualizer {
             for (_index, edges) in all_indexed_edges.component::<GraphEdge>() {
                 let edges = edges
                     .iter()
-                    .map(|edge| {
+                    .enumerate()
+                    .map(|(i, edge)| {
                         let source = GraphNode::from(edge.first.clone());
                         let target = GraphNode::from(edge.second.clone());
 
@@ -90,6 +75,7 @@ impl VisualizerSystem for EdgesVisualizer {
                         let target_index = NodeId::from_entity_node(entity_path, &target);
 
                         EdgeInstance {
+                            _instance: Instance::from(i as u64),
                             source,
                             target,
                             source_index,