Add missing screenshots of graph view archetypes

crates/store/re_types/definitions/rerun/archetypes/graph_edges.fbs

@@ -2,14 +2,12 @@ namespace rerun.archetypes;
 
 // ---
 
-// TODO(ab): Add images to snippets.
-
 /// A list of edges in a graph.
 ///
 /// By default, edges are undirected.
 ///
-/// \example archetypes/graph_undirected !api title="Simple undirected graph" image=""
-/// \example archetypes/graph_directed !api title="Simple directed graph" image=""
+/// \example archetypes/graph_undirected !api title="Simple undirected graph" image="https://static.rerun.io/graph_undirected/15f46bec77452a8c6220558e4403b99cac188e2e/1200w.png"
+/// \example archetypes/graph_directed !api title="Simple directed graph" image="https://static.rerun.io/graph_directed/ca29a37b65e1e0b6482251dce401982a0bc568fa/1200w.png"
 table GraphEdges (
   "attr.docs.category": "Graph",
   "attr.docs.unreleased",

crates/store/re_types/definitions/rerun/archetypes/graph_nodes.fbs

@@ -2,12 +2,10 @@ namespace rerun.archetypes;
 
 // ---
 
-// TODO(ab): Add images to snippets.
-
 /// A list of nodes in a graph with optional labels, colors, etc.
 ///
-/// \example archetypes/graph_undirected !api title="Simple undirected graph" image=""
-/// \example archetypes/graph_directed !api title="Simple directed graph" image=""
+/// \example archetypes/graph_undirected !api title="Simple undirected graph" image="https://static.rerun.io/graph_undirected/15f46bec77452a8c6220558e4403b99cac188e2e/1200w.png"
+/// \example archetypes/graph_directed !api title="Simple directed graph" image="https://static.rerun.io/graph_directed/ca29a37b65e1e0b6482251dce401982a0bc568fa/1200w.png"
 table GraphNodes (
   "attr.docs.category": "Graph",
   "attr.docs.unreleased",

crates/viewer/re_space_view_graph/src/properties.rs

@@ -1,4 +1,5 @@
 use re_types::blueprint::components::VisualBounds2D;
+use re_ui::zoom_pan_area::fit_to_rect_in_scene;
 use re_viewer_context::{SpaceViewStateExt as _, TypedComponentFallbackProvider};
 
 use crate::{ui::GraphSpaceViewState, GraphSpaceView};
@@ -14,7 +15,14 @@ impl TypedComponentFallbackProvider<VisualBounds2D> for GraphSpaceView {
         };
 
         match state.layout_state.bounding_rect() {
-            Some(rect) if valid_bound(&rect) => rect.into(),
+            Some(rect) if valid_bound(&rect) => {
+                if let Some(rect_in_ui) = state.rect_in_ui {
+                    let ui_from_world = fit_to_rect_in_scene(rect_in_ui, rect);
+                    (ui_from_world.inverse() * rect_in_ui).into()
+                } else {
+                    rect.into()
+                }
+            }
             _ => VisualBounds2D::default(),
         }
     }

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

@@ -1,4 +1,4 @@
-use egui::Rect;
+use egui::{emath::TSTransform, Rect};
 use re_format::format_f32;
 use re_types::blueprint::components::VisualBounds2D;
 use re_ui::UiExt;
@@ -16,6 +16,8 @@ pub struct GraphSpaceViewState {
     pub show_debug: bool,
 
     pub visual_bounds: Option<VisualBounds2D>,
+    pub ui_from_world: Option<TSTransform>,
+    pub rect_in_ui: Option<Rect>,
 }
 
 impl GraphSpaceViewState {

crates/viewer/re_space_view_graph/src/view.rs

@@ -164,15 +164,17 @@ Display a graph of nodes and edges.
         let rect_in_scene: blueprint::components::VisualBounds2D =
             bounds_property.component_or_fallback(ctx, self, state)?;
 
-        let rect_in_ui = ui.max_rect();
+        let rect_in_ui = *state.rect_in_ui.insert(ui.max_rect());
 
         let request = LayoutRequest::from_graphs(graphs.iter());
         let layout_was_empty = state.layout_state.is_none();
         let layout = state.layout_state.get(request);
 
-        let mut ui_from_world = fit_to_rect_in_scene(rect_in_ui, rect_in_scene.into());
+        let ui_from_world = state
+            .ui_from_world
+            .get_or_insert_with(|| fit_to_rect_in_scene(rect_in_ui, rect_in_scene.into()));
 
-        let resp = zoom_pan_area(ui, rect_in_ui, &mut ui_from_world, |ui| {
+        let resp = zoom_pan_area(ui, rect_in_ui, ui_from_world, |ui| {
             let mut world_bounding_rect = egui::Rect::NOTHING;
 
             for graph in &graphs {
@@ -191,6 +193,7 @@ Display a graph of nodes and edges.
             blueprint::components::VisualBounds2D::from(ui_from_world.inverse() * rect_in_ui);
         if resp.double_clicked() || layout_was_empty {
             bounds_property.reset_blueprint_component::<blueprint::components::VisualBounds2D>(ctx);
+            state.ui_from_world = None;
         } else if rect_in_scene != updated_rect_in_scene {
             bounds_property.save_blueprint_component(ctx, &updated_rect_in_scene);
         }

examples/rust/graph_lattice/README.md

@@ -1,3 +1,28 @@
-# graph_lattice
+<!--[metadata]
+title = "Graph lattice"
+tags = ["Graph", "Layout"]
+thumbnail = "https://static.rerun.io/graph_lattice/f9169da9c3f35b7260c9d74cd5be5fe710aec6a8/480w.png"
+thumbnail_dimensions = [480, 269]
+channel = "main"
+-->
 
-Demonstrates graph layout of a lattice without explicit positions.
+This example shows different attributes that you can associate with nodes in a graph.
+Since no explicit positions are passed for the nodes, Rerun will layout the graph automatically.
+
+<picture>
+  <img src="https://static.rerun.io/graph_lattice/f9169da9c3f35b7260c9d74cd5be5fe710aec6a8/full.png" alt="">
+  <source media="(max-width: 480px)" srcset="https://static.rerun.io/graph_lattice/f9169da9c3f35b7260c9d74cd5be5fe710aec6a8/480w.png">
+  <source media="(max-width: 768px)" srcset="https://static.rerun.io/graph_lattice/f9169da9c3f35b7260c9d74cd5be5fe710aec6a8/768w.png">
+  <source media="(max-width: 1024px)" srcset="https://static.rerun.io/graph_lattice/f9169da9c3f35b7260c9d74cd5be5fe710aec6a8/1024w.png">
+  <source media="(max-width: 1200px)" srcset="https://static.rerun.io/graph_lattice/f9169da9c3f35b7260c9d74cd5be5fe710aec6a8/1200w.png">
+</picture>
+
+## Used Rerun types
+[`GraphNodes`](https://www.rerun.io/docs/reference/types/archetypes/graph_nodes?speculative-link),
+[`GraphEdges`](https://www.rerun.io/docs/reference/types/archetypes/graph_edges?speculative-link)
+
+## Run the code
+
+```bash
+cargo run --release
+```