panel-reactflow 0.5.0a1__tar.gz → 0.5.0b0__tar.gz

{panel_reactflow-0.5.0a1 → panel_reactflow-0.5.0b0}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.5
 Name: panel-reactflow
-Version: 0.5.0a1
+Version: 0.5.0b0
 Summary: A Panel wrapper for the Reactflow JS library.
 Project-URL: Homepage, https://github.com/panel-extensions/panel-reactflow
 Project-URL: Source, https://github.com/panel-extensions/panel-reactflow
@@ -114,6 +114,34 @@ flow
 
 For property schemas and richer editors, provide `node_types`/`edge_types` with `PropertySpec` and handle changes via `ReactFlow.on(...)`. `.on` callbacks receive the event payload as the first argument and can optionally accept the `ReactFlow` instance as a second argument.
 
+## Connection validation
+
+Connection checks are opt-in. For frontend-only validation, set `connection_validation` with any of `direction`, `types`, `capacity`, `duplicates`, or `cycles` set to `True`. `types` compares declared handle types case-insensitively and permits unknown types; `capacity` uses `maxConnections` on input handle dictionaries, with no limit when omitted. Existing handle connectability flags still apply.
+
+```python
+from panel_reactflow import NodeType, ReactFlow
+
+flow = ReactFlow(
+    node_types={
+        "source": NodeType(type="source", outputs=[{"id": "value", "type": "str"}]),
+        "sink": NodeType(type="sink", inputs=[{"id": "value", "type": "str", "maxConnections": 1}]),
+    },
+    connection_validation={"direction": True, "types": True, "capacity": True, "cycles": True},
+)
+```
+
+For application rules, register a Python validator. On each drag start, ReactFlow requests results for every candidate port and shows the returned reasons while dragging. The callback receives an edge-shaped payload with `source`, `target`, `sourceHandle`, and `targetHandle`; return `None` to allow or a string to reject. Hooks and frontend checks can be used together. Validate again in your `edge_added` handler before accepting the connection, since the graph may have changed after drag start.
+
+```python
+def validate_connection(edge, flow):
+    if edge["source"] == edge["target"]:
+        return "A node cannot connect to itself."
+
+flow.add_connection_validator(validate_connection)
+```
+
+Run the [connection validation demo](examples/connection_validation.py) with `PYTHONPATH=src pixi run panel serve examples/connection_validation.py --show` from the repository root.
+
 ## Development
 
 ```bash

{panel_reactflow-0.5.0a1 → panel_reactflow-0.5.0b0}/README.md

@@ -71,6 +71,34 @@ flow
 
 For property schemas and richer editors, provide `node_types`/`edge_types` with `PropertySpec` and handle changes via `ReactFlow.on(...)`. `.on` callbacks receive the event payload as the first argument and can optionally accept the `ReactFlow` instance as a second argument.
 
+## Connection validation
+
+Connection checks are opt-in. For frontend-only validation, set `connection_validation` with any of `direction`, `types`, `capacity`, `duplicates`, or `cycles` set to `True`. `types` compares declared handle types case-insensitively and permits unknown types; `capacity` uses `maxConnections` on input handle dictionaries, with no limit when omitted. Existing handle connectability flags still apply.
+
+```python
+from panel_reactflow import NodeType, ReactFlow
+
+flow = ReactFlow(
+    node_types={
+        "source": NodeType(type="source", outputs=[{"id": "value", "type": "str"}]),
+        "sink": NodeType(type="sink", inputs=[{"id": "value", "type": "str", "maxConnections": 1}]),
+    },
+    connection_validation={"direction": True, "types": True, "capacity": True, "cycles": True},
+)
+```
+
+For application rules, register a Python validator. On each drag start, ReactFlow requests results for every candidate port and shows the returned reasons while dragging. The callback receives an edge-shaped payload with `source`, `target`, `sourceHandle`, and `targetHandle`; return `None` to allow or a string to reject. Hooks and frontend checks can be used together. Validate again in your `edge_added` handler before accepting the connection, since the graph may have changed after drag start.
+
+```python
+def validate_connection(edge, flow):
+    if edge["source"] == edge["target"]:
+        return "A node cannot connect to itself."
+
+flow.add_connection_validator(validate_connection)
+```
+
+Run the [connection validation demo](examples/connection_validation.py) with `PYTHONPATH=src pixi run panel serve examples/connection_validation.py --show` from the repository root.
+
 ## Development
 
 ```bash

{panel_reactflow-0.5.0a1 → panel_reactflow-0.5.0b0}/docs/how-to/declare-types.md

@@ -244,7 +244,8 @@ validation or auto-generated forms.
 ## Handle tooltips
 
 By default, handles are plain connection points. You can add a tooltip (shown
-on hover) by passing a dict with `"id"` and `"label"` instead of a plain string:
+on hover) by passing a dict with `"id"` and `"label"` and/or `"type"` instead
+of a plain string:
 
 ```python
 from panel_reactflow import NodeType
@@ -253,19 +254,68 @@ node_types = {
     "transform": NodeType(
         type="transform",
         label="Transform",
-        inputs=[{"id": "in", "label": "Data Input"}],
+        inputs=[{"id": "in", "label": "Data Input", "type": "DataFrame"}],
         outputs=[
-            {"id": "success", "label": "Successful results"},
-            {"id": "error", "label": "Failed records"},
+            {"id": "success", "label": "Successful results", "type": "DataFrame"},
+            {"id": "error", "label": "Failed records", "type": "list"},
         ],
     ),
 }
 ```
 
-Plain strings and dicts can be mixed freely in the same list:
+The tooltip combines both when present (`"Data Input (DataFrame)"`), or falls
+back to whichever one is given. Plain strings and dicts can be mixed freely in
+the same list:
 
 ```python
-inputs=["simple_port", {"id": "documented_port", "label": "Hover to see this"}]
+inputs=["simple_port", {"id": "documented_port", "label": "Hover to see this", "type": "int"}]
+```
+
+---
+
+## Show a port's current value on click
+
+Clicking a handle emits a `"handle_clicked"` event with the node id, handle
+id, direction (`"input"`/`"output"`) and a screen position. Clicking an edge
+emits `"edge_clicked"` with the edge id and position. Use
+`ReactFlow.show_popup(content, position)` in the handler to display whatever
+you consider the "current value" for that port or connection:
+
+```python
+def on_handle_clicked(payload, flow):
+    node_id, handle_id = payload["node_id"], payload["handle_id"]
+    value = live_values.get(node_id, {}).get(handle_id)
+    flow.show_popup(pn.pane.Markdown(f"**{handle_id}**: {value!r}"), payload["position"])
+
+def on_edge_clicked(payload, flow):
+    source_id, source_port = edge_sources[payload["edge_id"]]
+    value = live_values.get(source_id, {}).get(source_port)
+    flow.show_popup(pn.pane.Markdown(f"**Value:** {value!r}"), payload["position"])
+
+flow.on("handle_clicked", on_handle_clicked)
+flow.on("edge_clicked", on_edge_clicked)
+```
+
+For `popup_trigger="hover"`, register `handle_hovered` and `edge_hovered` to
+show the popup and their corresponding `handle_unhovered` and `edge_unhovered`
+events to call `flow.close_popup()`. Match the unhovered target against the
+currently displayed one so a delayed leave event does not dismiss a newer
+popup. See the runnable example below for both pairs of callbacks.
+
+The default `popup_hover_delay` is 500 ms. After opening, an unhover event is
+emitted when the pointer moves more than 10% of the shorter canvas dimension
+from the anchor (at least 48 pixels) and is not over the popup. Click-opened
+popups dismiss on outside click; either mode can dismiss programmatically via
+`flow.close_popup()`. Use
+`popup_trigger="none"` to disable the built-in inspection events.
+`panel-reactflow` only provides the interaction events and overlay; looking up
+"the current value" for a port is application-specific.
+
+For a complete runnable graph with typed port hover tooltips and popups for
+both handles and edges, run:
+
+```bash
+panel serve examples/port_value_inspection.py --show
 ```
 
 ---

panel_reactflow-0.5.0b0/docs/how-to/validate-connections.md

@@ -0,0 +1,82 @@
+# Validate Connections
+
+Use `connection_validation` to reject invalid connections as users drag between handles. The policies run in the browser; a Python validator can add application-specific rules. Both are opt-in and can be used together.
+
+## Configure browser policies
+
+Set only the checks your graph needs:
+
+| Policy | Rejects |
+|--------|---------|
+| `direction` | Connections that do not run from a declared output to a declared input. Users can still start a drag at either end. |
+| `types` | Connections between handles with different declared `type` values (case-insensitive). If either type is missing, the connection is allowed. |
+| `capacity` | Connections to an input handle that has reached its positive integer `maxConnections` limit. Inputs without a limit are unrestricted. |
+| `duplicates` | A second edge with the same source, target, source handle, and target handle. Different handle pairs can still connect the same nodes. |
+| `cycles` | Connections that would create a cycle, including a self-connection. |
+
+Policies default to off. Existing `NodeType` connectable flags still control whether a handle can start or receive a drag; see [Control Handle Connectivity](control-handle-connectivity.md).
+
+The following app uses handle types and capacity limits alongside a Python rule. Save it as `validation_app.py` and run `panel serve validation_app.py --show`:
+
+```python
+import panel as pn
+
+from panel_reactflow import NodeSpec, NodeType, ReactFlow
+
+pn.extension("jsoneditor")
+
+flow = ReactFlow(
+    nodes=[
+        NodeSpec(id="source", type="source", label="Source", position={"x": 0, "y": 0}),
+        NodeSpec(id="transform", type="transform", label="Transform", position={"x": 260, "y": 0}),
+        NodeSpec(id="publish", type="publish", label="Publish", position={"x": 520, "y": 0}),
+    ],
+    node_types={
+        "source": NodeType(type="source", outputs=[{"id": "text", "type": "Text"}]),
+        "transform": NodeType(
+            type="transform",
+            inputs=[{"id": "text", "type": "text", "maxConnections": 1}],
+            outputs=[{"id": "cleaned", "type": "Text"}],
+        ),
+        "publish": NodeType(type="publish", inputs=[{"id": "text", "type": "Text", "maxConnections": 1}]),
+    },
+    connection_validation={
+        "direction": True,
+        "types": True,
+        "capacity": True,
+        "duplicates": True,
+        "cycles": True,
+    },
+    height=350,
+    width=800,
+)
+
+
+def validate_connection(edge, flow):
+    if edge["source"] == "source" and edge["target"] == "publish":
+        return "Publish requires the Transform output."
+    return None
+
+
+flow.add_connection_validator(validate_connection)
+
+
+def on_edge_added(event, flow):
+    edge = event["edge"]
+    if validate_connection(edge, flow):
+        flow.remove_edge(edge["id"])
+
+
+flow.on("edge_added", on_edge_added)
+flow.servable()
+```
+
+Drag from **Source.text** to **Transform.text**, then from **Transform.cleaned** to **Publish.text**. A direct connection from Source to Publish is rejected by Python. Try connecting Source.text to Transform.cleaned (two outputs) to see the direction check, or connect an output to an already occupied input to see the capacity check.
+
+## Add application rules
+
+Register callbacks with `flow.add_connection_validator(callback)` and unregister them with `flow.remove_connection_validator(callback)`. Each callback accepts either `edge` or `(edge, flow)` and returns `None` to allow the connection or a reason string to reject it. The payload has `source`, `target`, `sourceHandle`, and `targetHandle` keys; handles without an explicit ID use `None`.
+
+When a user starts dragging from an output or input, Python checks every candidate handle on the opposite side. Validators run in registration order until one rejects a candidate. Browser policies and Python reasons are shown on handles while dragging; the browser prevents a rejected connection. Python results must arrive before the connection is dropped: pending requests and requests taking longer than three seconds block the connection. Exceptions also reject the candidate and are logged on the server. Keep validators fast.
+
+Validation is for interactive drags, not a constraint on `flow.edges` or `flow.add_edge()`. Python validators run at drag start, not when the edge is added. If the rule depends on graph state that may change during the drag, check it again in an `edge_added` handler before keeping or persisting the edge. The example above removes an edge if its application rule no longer holds.

{panel_reactflow-0.5.0a1 → panel_reactflow-0.5.0b0}/docs/index.md

@@ -62,6 +62,7 @@ flow.servable()
 - [Define Nodes & Edges](how-to/define-nodes-edges.md)
 - [Declare Node & Edge Types](how-to/declare-types.md)
 - [Control Handle Connectivity](how-to/control-handle-connectivity.md) — restrict connections
+- [Validate Connections](how-to/validate-connections.md) — check types, capacity, cycles, and application rules
 - [Define Editors](how-to/define-editors.md) — node *and* edge editors
 - [Embed Views in Nodes](how-to/embed-views-in-nodes.md)
 - [Style Nodes & Edges](how-to/style-nodes-edges.md)

{panel_reactflow-0.5.0a1 → panel_reactflow-0.5.0b0}/docs/releases.md

@@ -1,15 +1,57 @@
 # Release Notes
 
-## Unreleased
+## Version 0.5.0
 
-### Bug fixes
+This release adds port and edge value inspection and connection checks
+for interactive graph editing. `Node` and `Edge` properties now sync to
+the browser in place, batches of changes render as a single update, and
+an error boundary keeps a malformed graph from blanking the canvas.
 
-- **Progressive re-render when deleting multiple elements** — deleting a
-  multi-node selection removed the nodes one at a time, syncing an
-  intermediate graph to the browser per node so the nodes visibly
-  disappeared one by one. Updates triggered by a frontend message are now
-  held and combined into a single patch, and node/edge deletion assigns
-  `nodes` and `edges` once.
+### Highlights
+
+- **Port and edge inspection**: handle and edge click events can open a
+  Panel popup with `flow.show_popup(content, position)`. Set
+  `popup_trigger="hover"` to use hover events instead; use
+  `flow.close_popup()` to dismiss it. Applications supply the value to
+  display, and `examples/port_value_inspection.py` shows both interactions
+  ([#74](https://github.com/panel-extensions/panel-reactflow/pull/74)).
+
+- **Connection validation**: opt-in browser policies reject connections
+  with the wrong direction or handle type, full inputs, duplicate edges,
+  and cycles. Register Python rules with `add_connection_validator()` to
+  show rejection reasons on candidate handles during a drag. Python
+  validators check interactive drags only; they do not restrict
+  `flow.add_edge()` or direct changes to `flow.edges`. See
+  [Validate Connections](how-to/validate-connections.md) and
+  `examples/connection_validation.py`
+  ([#75](https://github.com/panel-extensions/panel-reactflow/pull/75)).
+
+- **Error recovery** — the canvas is now wrapped in an error boundary,
+  controlled by the new `error_recovery` parameter (`"auto"` by default,
+  or `"manual"` / `"off"`). In `"auto"` mode a React render error
+  remounts the canvas, then remounts again in a view-only safe mode that
+  repairs or hides elements it cannot render (invalid positions, unknown
+  node/edge types, dangling edges, duplicate or missing ids) without
+  mutating the server-side graph. If retries are exhausted a recovery
+  panel offers *Try again*, *Reload page* and *Copy details*. Every
+  error is logged to the `panel.reactflow` logger and emitted as a
+  `client_error` event, so browser-side failures are no longer invisible
+  to the server
+  ([#70](https://github.com/panel-extensions/panel-reactflow/pull/70)).
+
+- **Base property sync** — the top-level React Flow fields on `Node` and
+  `Edge` (`label`, `type`, `style`, `className`, `draggable`,
+  `connectable`, `deletable`, ...) are now synced to the frontend, so
+  assigning `node.label = "Start (running)"` patches the browser in place
+  instead of requiring `flow.nodes` to be replaced. Parameters declared
+  on a subclass continue to sync into `data`. New `patch_node_props()`
+  and `patch_edge_props()` methods do the same for dict-based nodes and
+  edges, where passing `None` clears a field back to the CSS/theme
+  default, and new `on_props_change` hooks fire on `Node`/`Edge`
+  subclasses when the frontend changes a property. `position` and
+  `selected` remain browser-owned during drag and selection and are only
+  pushed via `patch_node_props()`
+  ([#71](https://github.com/panel-extensions/panel-reactflow/pull/71)).
 
 ### Enhancements
 
@@ -18,7 +60,18 @@
   (`flow.remove_node("n1", "n2")`) or as a sequence
   (`flow.remove_node(["n1", "n2"])`), and remove them in a single update.
   For any other batch of changes made from Python, wrap them in
-  `pn.io.hold()` to render them at once.
+  `pn.io.hold()` to render them at once
+  ([#72](https://github.com/panel-extensions/panel-reactflow/pull/72)).
+
+### Bug fixes
+
+- **Progressive re-render when deleting multiple elements** — deleting a
+  multi-node selection removed the nodes one at a time, syncing an
+  intermediate graph to the browser per node so the nodes visibly
+  disappeared one by one. Updates triggered by a frontend message are now
+  held and combined into a single patch, and node/edge deletion assigns
+  `nodes` and `edges` once
+  ([#72](https://github.com/panel-extensions/panel-reactflow/pull/72)).
 
 ## Version 0.4.1
 

panel_reactflow-0.5.0b0/examples/connection_validation.py

@@ -0,0 +1,89 @@
+"""Try frontend rules and Python connection hooks in one graph.
+
+Run from the repository root with:
+
+    PYTHONPATH=src pixi run panel serve examples/connection_validation.py --show
+"""
+
+import panel as pn
+import panel_material_ui as pmui
+
+from panel_reactflow import NodeSpec, NodeType, ReactFlow
+
+pn.extension()
+
+
+class ConnectionValidationDemo(pn.viewable.Viewer):
+    def __init__(self, **params):
+        super().__init__(**params)
+        self._status = pn.pane.Markdown("No connections yet.")
+        self._flow = ReactFlow(
+            nodes=[
+                NodeSpec(id="source", type="source", label="Source", position={"x": 0, "y": 60}).to_dict(),
+                NodeSpec(id="number", type="number", label="Number", position={"x": 0, "y": 280}).to_dict(),
+                NodeSpec(id="transform", type="transform", label="Transform", position={"x": 290, "y": 60}).to_dict(),
+                NodeSpec(id="publish", type="publish", label="Publish", position={"x": 610, "y": 60}).to_dict(),
+                NodeSpec(id="monitor", type="monitor", label="Monitor", position={"x": 610, "y": 280}).to_dict(),
+            ],
+            node_types={
+                "source": NodeType(type="source", outputs=[{"id": "text", "type": "Text"}]),
+                "number": NodeType(type="number", outputs=[{"id": "value", "type": "Number"}]),
+                "transform": NodeType(
+                    type="transform",
+                    inputs=[{"id": "text", "type": "Text", "maxConnections": 1}],
+                    outputs=[{"id": "cleaned", "type": "Text"}],
+                ),
+                "publish": NodeType(type="publish", inputs=[{"id": "text", "type": "Text", "maxConnections": 1}]),
+                "monitor": NodeType(type="monitor", inputs=[{"id": "text", "type": "Text"}]),
+            },
+            connection_validation={
+                "direction": True,
+                "types": True,
+                "capacity": True,
+                "duplicates": True,
+                "cycles": True,
+            },
+            height=510,
+            sizing_mode="stretch_width",
+        )
+        self._flow.add_connection_validator(self._validate_connection)
+        self._flow.on("edge_added", self._on_edge_added)
+        self._page = pmui.Page(
+            title="Connection validation",
+            main=[
+                pmui.Container(
+                    pmui.Column(
+                        pn.pane.Markdown(
+                            "Drag **Source.text** to **Transform.text**, then **Transform.cleaned** to **Publish.text**. "
+                            "**Number.value** to **Transform.text** fails the frontend type check; "
+                            "**Source.text** to **Publish.text** is rejected by Python. "
+                            "Try connecting both text outputs to **Monitor.text**, or creating a cycle."
+                        ),
+                        self._flow,
+                        self._status,
+                        sizing_mode="stretch_width",
+                    ),
+                    width_option="lg",
+                ),
+            ],
+        )
+
+    def _validate_connection(self, edge, flow):
+        if edge["source"] == "source" and edge["target"] == "publish":
+            return "Publish requires text from Transform, not Source."
+
+    def _on_edge_added(self, event, flow):
+        edge = event["edge"]
+        reason = self._validate_connection(edge, flow)
+        if reason:
+            flow.remove_edge(edge["id"])
+            self._status.object = f"Rejected: {reason}"
+        else:
+            self._status.object = f"Connected: {edge['source']}.{edge['sourceHandle']} to {edge['target']}.{edge['targetHandle']}"
+
+    def __panel__(self):
+        return self._page
+
+
+demo = ConnectionValidationDemo()
+demo.servable()

panel_reactflow-0.5.0b0/examples/port_value_inspection.py

@@ -0,0 +1,123 @@
+"""Inspect typed port values by hovering over handles and edges.
+
+Run with:
+
+    panel serve examples/port_value_inspection.py --show
+"""
+
+import panel as pn
+
+from panel_reactflow import EdgeSpec, NodeSpec, NodeType, ReactFlow
+
+pn.extension("jsoneditor")
+
+node_types = {
+    "source": NodeType(
+        type="source",
+        label="Data Source",
+        outputs=[{"id": "records", "label": "Output records", "type": "list[dict]"}],
+    ),
+    "transform": NodeType(
+        type="transform",
+        label="Transform",
+        inputs=[{"id": "records", "label": "Input records", "type": "list[dict]"}],
+        outputs=[{"id": "summary", "label": "Summary", "type": "dict[str, int]"}],
+    ),
+    "sink": NodeType(
+        type="sink",
+        label="Sink",
+        inputs=[{"id": "summary", "label": "Input summary", "type": "dict[str, int]"}],
+    ),
+}
+
+nodes = [
+    NodeSpec(id="source", type="source", position={"x": 0, "y": 100}, data={}).to_dict(),
+    NodeSpec(id="transform", type="transform", position={"x": 300, "y": 100}, data={}).to_dict(),
+    NodeSpec(id="sink", type="sink", position={"x": 600, "y": 100}, data={}).to_dict(),
+]
+
+edges = [
+    EdgeSpec(id="records", source="source", target="transform", sourceHandle="records", targetHandle="records").to_dict(),
+    EdgeSpec(id="summary", source="transform", target="sink", sourceHandle="summary", targetHandle="summary").to_dict(),
+]
+
+# In an application this mapping would be updated by the code that executes
+# the graph. It is intentionally separate from ReactFlow's graph metadata.
+live_values = {
+    "source": {"records": [{"city": "Berlin", "sales": 12}, {"city": "Oslo", "sales": 8}]},
+    "transform": {"summary": {"record_count": 2, "total_sales": 20}},
+    "sink": {"summary": {"record_count": 2, "total_sales": 20}},
+}
+
+edge_sources = {
+    "records": ("source", "records"),
+    "summary": ("transform", "summary"),
+}
+
+flow = ReactFlow(
+    nodes=nodes,
+    edges=edges,
+    node_types=node_types,
+    popup_trigger="hover",  # Change to "click" to inspect on click instead.
+    popup_hover_delay=500,
+    sizing_mode="stretch_both",
+    min_height=450,
+)
+
+
+active_target = None
+
+
+def show_value(title, value, position, target):
+    global active_target
+    active_target = target
+    flow.show_popup(
+        pn.Column(
+            pn.pane.Markdown(f"**{title}**", margin=(0, 0, 6, 0)),
+            pn.pane.JSON(value, depth=3, sizing_mode="stretch_width"),
+            sizing_mode="stretch_width",
+        ),
+        position,
+    )
+
+
+def on_handle_inspected(payload, flow):
+    node_id = payload["node_id"]
+    handle_id = payload["handle_id"]
+    value = live_values.get(node_id, {}).get(handle_id)
+    show_value(f"{node_id}.{handle_id}", value, payload["position"], ("handle", node_id, handle_id, payload["direction"]))
+
+
+def on_edge_inspected(payload, flow):
+    node_id, handle_id = edge_sources[payload["edge_id"]]
+    value = live_values[node_id][handle_id]
+    show_value(f"{node_id}.{handle_id}", value, payload["position"], ("edge", payload["edge_id"]))
+
+
+def on_handle_unhovered(payload, flow):
+    global active_target
+    if active_target == ("handle", payload["node_id"], payload["handle_id"], payload["direction"]):
+        active_target = None
+        flow.close_popup()
+
+
+def on_edge_unhovered(payload, flow):
+    global active_target
+    if active_target == ("edge", payload["edge_id"]):
+        active_target = None
+        flow.close_popup()
+
+
+flow.on("handle_clicked", on_handle_inspected)
+flow.on("edge_clicked", on_edge_inspected)
+flow.on("handle_hovered", on_handle_inspected)
+flow.on("edge_hovered", on_edge_inspected)
+flow.on("handle_unhovered", on_handle_unhovered)
+flow.on("edge_unhovered", on_edge_unhovered)
+
+pn.Column(
+    "# Port value inspection",
+    "Hover a port to see its type and pause over a port or edge to inspect its current value.",
+    flow,
+    sizing_mode="stretch_both",
+).servable()