feat: new interactive graph visualization (#609)

## Description
Adds a new lightweight way to visualize graphs interactively. No added
dependencies (the javascript code runs entirely in the broswer and
sources libraries via CDN). The way this is implemented is quite simple:
the data is embedded directly in the HTML in json format using a jinja
template. Then javascript code does the rest (yes, definitely with the
help of coding assistants).

The largest graph on which this was tested was a cutout graph with n320
grid globally and a 2km grid over central Europe (the one we currently
have at MeteoSwiss). Loaded in about 6s and then still runs relatively
smoothly. Still, we might be reaching a limit with >1'500'000 nodes with
lots of connections - we might need to find some optimizations to the
code at some point as I am sure there are some left.

Nothing changes in terms of interface - this will simply add another
output to the command:

```shell
anemoi-graphs inspect graph.pt output_dir/
```

## Features
- fast GPU-based rendering
- full 3D scene navigation
- interactive controls for nodes and edges (toggles, radius scaling,
colors, etc.)
- nodes selection and highlighting
- globe map
- only for nodes coordinates and edges (no attributes values, for now) 

## Graphs tested
- [x] n320 global (+ hidden)
- [x] CERRA LAM graph from RMI (+ hidden)
- [x] COSMO SGM graph from MeteoSwiss (+hidden)
- [x] n320 global hierarchical (+ multiple hidden levels) 

----
<img width="1599" height="900" alt="image"
src="https://github.com/user-attachments/assets/83af87bb-7753-4243-9619-2825e78a62bc"
/>

<!-- readthedocs-preview anemoi-training start -->
----
📚 Documentation preview 📚:
https://anemoi-training--609.org.readthedocs.build/en/609/

<!-- readthedocs-preview anemoi-training end -->

<!-- readthedocs-preview anemoi-graphs start -->
----
📚 Documentation preview 📚:
https://anemoi-graphs--609.org.readthedocs.build/en/609/

<!-- readthedocs-preview anemoi-graphs end -->

<!-- readthedocs-preview anemoi-models start -->
----
📚 Documentation preview 📚:
https://anemoi-models--609.org.readthedocs.build/en/609/

<!-- readthedocs-preview anemoi-models end -->

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

Author: frazane

graphs/src/anemoi/graphs/inspect.py

@@ -16,9 +16,10 @@
 from anemoi.graphs.plotting.displots import plot_distribution_edge_attributes
 from anemoi.graphs.plotting.displots import plot_distribution_node_attributes
 from anemoi.graphs.plotting.displots import plot_distribution_node_derived_attributes
-from anemoi.graphs.plotting.interactive_html import plot_interactive_nodes
-from anemoi.graphs.plotting.interactive_html import plot_interactive_subgraph
-from anemoi.graphs.plotting.interactive_html import plot_isolated_nodes
+from anemoi.graphs.plotting.interactive_2d_html import plot_interactive_nodes_2d
+from anemoi.graphs.plotting.interactive_2d_html import plot_interactive_subgraph_2d
+from anemoi.graphs.plotting.interactive_2d_html import plot_isolated_nodes_2d
+from anemoi.graphs.plotting.interactive_3d_html import plot_interactive_graph_3d
 from anemoi.graphs.processors.post_process import SubsetNodesInArea
 
 LOGGER = logging.getLogger(__name__)
@@ -68,13 +69,17 @@ def __init__(
 
     def inspect(self):
         """Run all the inspector methods."""
+
+        LOGGER.info("Saving interactive 3d plot of the graph...")
+        plot_interactive_graph_3d(self.graph, out_file=self.output_path / "graph.html")
+
         LOGGER.info("Saving interactive plots of isolated nodes ...")
-        plot_isolated_nodes(self.graph, self.output_path / "isolated_nodes.html")
+        plot_isolated_nodes_2d(self.graph, self.output_path / "isolated_nodes.html")
 
         LOGGER.info("Saving interactive plots of subgraphs ...")
         for edges_subgraph in self.graph.edge_types:
             ofile = self.output_path / f"{edges_subgraph[0]}_to_{edges_subgraph[2]}.html"
-            plot_interactive_subgraph(self.graph, edges_subgraph, out_file=ofile)
+            plot_interactive_subgraph_2d(self.graph, edges_subgraph, out_file=ofile)
 
         if self.show_attribute_distributions:
             LOGGER.info("Saving distribution plots of node ande edge attributes ...")
@@ -85,4 +90,6 @@ def inspect(self):
         if self.show_nodes:
             LOGGER.info("Saving interactive plots of nodes ...")
             for nodes_name in self.graph.node_types:
-                plot_interactive_nodes(self.graph, nodes_name, out_file=self.output_path / f"{nodes_name}_nodes.html")
+                plot_interactive_nodes_2d(
+                    self.graph, nodes_name, out_file=self.output_path / f"{nodes_name}_nodes.html"
+                )

graphs/src/anemoi/graphs/plotting/interactive_html.py renamed to graphs/src/anemoi/graphs/plotting/interactive_2d_html.py

@@ -9,6 +9,8 @@
 
 import logging
 from pathlib import Path
+from typing import Optional
+from typing import Union
 
 import matplotlib.pyplot as plt
 import numpy as np
@@ -28,10 +30,10 @@
 LOGGER = logging.getLogger(__name__)
 
 
-def plot_interactive_subgraph(
+def plot_interactive_subgraph_2d(
     graph: HeteroData,
     edges_to_plot: tuple[str, str, str],
-    out_file: str | Path | None = None,
+    out_file: Optional[Union[str, Path]] = None,
 ) -> None:
     """Plots a bipartite graph (bi-graph).
 
@@ -117,7 +119,7 @@ def plot_interactive_subgraph(
         fig.show()
 
 
-def plot_isolated_nodes(graph: HeteroData, out_file: str | Path | None = None) -> None:
+def plot_isolated_nodes_2d(graph: HeteroData, out_file: Optional[Union[str, Path]] = None) -> None:
     """Plot isolated nodes.
 
     This method creates an interactive visualization of the isolated nodes in the graph.
@@ -169,7 +171,7 @@ def plot_isolated_nodes(graph: HeteroData, out_file: str | Path | None = None) -
         fig.show()
 
 
-def plot_interactive_nodes(graph: HeteroData, nodes_name: str, out_file: str | None = None) -> None:
+def plot_interactive_nodes_2d(graph: HeteroData, nodes_name: str, out_file: Optional[str] = None) -> None:
     """Plot nodes.
 
     This method creates an interactive visualization of a set of nodes.
@@ -235,6 +237,7 @@ def plot_interactive_nodes(graph: HeteroData, nodes_name: str, out_file: str | N
             sliders=[
                 dict(active=0, currentvalue={"visible": False}, len=0.4, x=0.5, xanchor="center", steps=slider_steps)
             ],
+            titlefont_size=16,
             showlegend=False,
             hovermode="closest",
             margin={"b": 20, "l": 5, "r": 5, "t": 40},