spaday-dagre

dagre graph rendering for spaday

Overview

spaday-dagre renders directed graphs in spaday from a serializable node/edge config, laid out by @dagrejs/dagre and drawn as light-DOM SVG. Colors ride the spaday shell's --spa-* tokens, so bind_root_class("wa-dark", ...) re-themes the graph with the rest of the page, and application CSS reaches every shape. dagre-node-click bubbles the node id (scalar detail, so SetField("selected", event_value()) just works); dagre-edge-click bubbles {source, target}.

Quick example

from spaday import element
from spaday.backends.starlette import serve
from spaday_dagre import Dagre, package

graph = Dagre(
    graph={
        "nodes": [{"id": "a", "label": "Alpha"}, {"id": "b"}],
        "edges": [{"source": "a", "target": "b", "label": "flow"}],
    },
    layout={"rankdir": "LR"},
)
app = serve(element("main").child(graph), packages=[package])

Node sizes default from label measurement; per-node width/height/class and per-edge label/class override. layout passes through to dagre (rankdir, align, nodesep, ranksep, edgesep, marginx/marginy, ranker). Installing the package registers the dagre entry point, so packages=["dagre"] also works.

Run the local example

python -m spaday_dagre.example

Open http://127.0.0.1:8016: a pipeline DAG with direction switching, node selection, and the dark-mode toggle.

[!NOTE] This library was generated using copier from the Base Python Project Template repository.