Create a more convincing example of the graph view (#8421)

### What

This PR tries to create a more convincing example for the graph view.

It consists of 4 views:

* A tree that randomly grows over time
* A bubble chart with new bubbles coming in over time
* The lattice, which is logged statically but without positions
* And finally a Markov-Chain with fixed positions

There are still some minor things to fix:

* [x] That one weird edge in the Markov-Chain
* [x] It would be nice if the viewer would fit the resulting graphs to
the view.

<img width="1775" alt="image"
src="https://github.com/user-attachments/assets/806f7408-9b4d-435b-80da-dacb680a8d93"
/>

<!--
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.
-->

---------

Co-authored-by: Clement Rey <cr.rey.clement@gmail.com>

Cargo.lock

@@ -2915,15 +2915,6 @@ dependencies = [
  "bitflags 2.6.0",
 ]
 
-[[package]]
-name = "graph_binary_tree"
-version = "0.21.0-alpha.1+dev"
-dependencies = [
- "anyhow",
- "clap",
- "rerun",
-]
-
 [[package]]
 name = "graph_lattice"
 version = "0.21.0-alpha.1+dev"

crates/viewer/re_view_graph/src/layout/provider.rs

@@ -236,7 +236,7 @@ impl ForceLayoutProvider {
                                 let c1_base = source_pos + delta * 0.25;
                                 let c2_base = source_pos + delta * 0.75;
 
-                                let base_n = Vec2::new(-c1_base.y, c1_base.x).normalized();
+                                let base_n = Vec2::new(-delta.y, delta.x).normalized();
 
                                 let c1_left = c1_base + base_n * (fan_amount / 2.);
                                 let c2_left = c2_base + base_n * (fan_amount / 2.);

crates/viewer/re_view_graph/src/view.rs

@@ -180,7 +180,6 @@ Display a graph of nodes and edges.
 
         // Perform all layout-related tasks.
         let request = LayoutRequest::from_graphs(graphs.iter());
-        let layout_was_empty = state.layout_state.is_none();
         let layout = state.layout_state.get(request, params);
 
         // Prepare the view and the transformations.
@@ -216,7 +215,7 @@ Display a graph of nodes and edges.
         // Update blueprint if changed
         let updated_rect_in_scene =
             blueprint::components::VisualBounds2D::from(ui_from_world.inverse() * rect_in_ui);
-        if resp.double_clicked() || layout_was_empty {
+        if resp.double_clicked() {
             bounds_property.reset_blueprint_component::<blueprint::components::VisualBounds2D>(ctx);
             state.ui_from_world = None;
         } else if rect_in_scene != updated_rect_in_scene {

examples/manifest.toml

@@ -142,6 +142,7 @@ examples = [
   "notebook",
   "clock",
   "dna",
+  "graphs",
   "log_file",
   "openstreetmap_data",
   "minimal",
@@ -150,8 +151,6 @@ examples = [
   "plots",
   "live_scrolling_plot",
   "raw_mesh",
-  "graph_lattice",
-  "graph_binary_tree",
   "air_traffic_data",
 ]
 
@@ -169,6 +168,8 @@ examples = [
   "drone_lidar",
   "extend_viewer_ui",
   "external_data_loader",
+  "graph_binary_tree",
+  "graph_lattice",
   "incremental_logging",
   "minimal_serve",
   "shared_recording",

examples/python/graph_lattice/README.md

@@ -23,7 +23,7 @@ Since no explicit positions are passed for the nodes, Rerun will layout the grap
 
 ## Run the code
 
-```bash
-pip install -e examples/python/graph_lattice
-python -m graph_lattice
-```
+ ```bash
+ pip install -e examples/python/graph_lattice
+ python -m graph_lattice
+ ```

examples/python/graphs/README.md

@@ -0,0 +1,29 @@
+<!--[metadata]
+title = "Graphs"
+tags = ["Graph", "Layout"]
+thumbnail = "https://static.rerun.io/graphs/19e6ca2e0752cdc7107c10b0cb79a4b7192d9e0b/480w.png"
+thumbnail_dimensions = [480, 399]
+channel = "main"
+-->
+
+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/graphs/19e6ca2e0752cdc7107c10b0cb79a4b7192d9e0b/full.png" alt="">
+  <source media="(max-width: 480px)" srcset="https://static.rerun.io/graphs/19e6ca2e0752cdc7107c10b0cb79a4b7192d9e0b/480w.png">
+  <source media="(max-width: 768px)" srcset="https://static.rerun.io/graphs/19e6ca2e0752cdc7107c10b0cb79a4b7192d9e0b/768w.png">
+  <source media="(max-width: 1024px)" srcset="https://static.rerun.io/graphs/19e6ca2e0752cdc7107c10b0cb79a4b7192d9e0b/1024w.png">
+  <source media="(max-width: 1200px)" srcset="https://static.rerun.io/graphs/19e6ca2e0752cdc7107c10b0cb79a4b7192d9e0b/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
+pip install -e examples/python/graphs
+python -m graphs
+```