Metadata-Version: 2.5
Name: spaday-dagre
Version: 0.2.2
Summary: dagre graph rendering for spaday
Project-URL: Repository, https://github.com/1kbgz/spaday-dagre
Project-URL: Homepage, https://github.com/1kbgz/spaday-dagre
Author-email: 1kbgz <dev@1kbgz.com>
License: Apache-2.0
License-File: LICENSE
Classifier: Development Status :: 3 - Alpha
Classifier: Programming Language :: Python
Classifier: Programming Language :: Python :: 3
Classifier: Programming Language :: Python :: 3.11
Classifier: Programming Language :: Python :: 3.12
Classifier: Programming Language :: Python :: 3.13
Classifier: Programming Language :: Python :: 3.14
Classifier: Programming Language :: Python :: Implementation :: CPython
Classifier: Programming Language :: Python :: Implementation :: PyPy
Requires-Python: >=3.11
Requires-Dist: spaday<1.0,>=0.7.4
Provides-Extra: develop
Requires-Dist: build; extra == 'develop'
Requires-Dist: bump-my-version; extra == 'develop'
Requires-Dist: check-dist; extra == 'develop'
Requires-Dist: codespell; extra == 'develop'
Requires-Dist: hatch-js; extra == 'develop'
Requires-Dist: hatchling; extra == 'develop'
Requires-Dist: mdformat; extra == 'develop'
Requires-Dist: mdformat-tables>=1; extra == 'develop'
Requires-Dist: pydantic>=2; extra == 'develop'
Requires-Dist: pytest; extra == 'develop'
Requires-Dist: pytest-cov; extra == 'develop'
Requires-Dist: ruff; extra == 'develop'
Requires-Dist: starlette; extra == 'develop'
Requires-Dist: transports; extra == 'develop'
Requires-Dist: twine; extra == 'develop'
Requires-Dist: ty; extra == 'develop'
Requires-Dist: uv; extra == 'develop'
Requires-Dist: uvicorn; extra == 'develop'
Requires-Dist: websockets; extra == 'develop'
Requires-Dist: wheel; extra == 'develop'
Provides-Extra: examples
Requires-Dist: pydantic>=2; extra == 'examples'
Requires-Dist: starlette; extra == 'examples'
Requires-Dist: transports; extra == 'examples'
Requires-Dist: uvicorn; extra == 'examples'
Requires-Dist: websockets; extra == 'examples'
Description-Content-Type: text/markdown

<a href="https://github.com/1kbgz/spaday-dagre">
  <picture>
    <source media="(prefers-color-scheme: dark)" srcset="https://github.com/1kbgz/spaday-dagre/raw/main/docs/img/logo-dark.png?raw=true">
    <img alt="spaday-dagre logo, a layered directed graph inside a browser window" src="https://github.com/1kbgz/spaday-dagre/raw/main/docs/img/logo-light.png?raw=true" width="800">
  </picture>
</a>

dagre graph rendering for spaday

[![Build Status](https://github.com/1kbgz/spaday-dagre/actions/workflows/build.yaml/badge.svg?branch=main&event=push)](https://github.com/1kbgz/spaday-dagre/actions/workflows/build.yaml)
[![codecov](https://codecov.io/gh/1kbgz/spaday-dagre/branch/main/graph/badge.svg)](https://codecov.io/gh/1kbgz/spaday-dagre)
[![License](https://img.shields.io/github/license/1kbgz/spaday-dagre)](https://github.com/1kbgz/spaday-dagre)
[![PyPI](https://img.shields.io/pypi/v/spaday-dagre.svg)](https://pypi.python.org/pypi/spaday-dagre)

## Overview

`spaday-dagre` renders directed graphs in [spaday](https://1kbgz.github.io/spaday/) from a
serializable node/edge config, laid out by [@dagrejs/dagre](https://github.com/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 `{id, label, x, y}` and `dagre-edge-click` bubbles
`{source, target, label, x, y}` — the graph context plus the pointer position — so
`SetField("selected", event_value("id"))` selects and `open_popup(..., x=event_value("x"), y=event_value("y"))` positions. Right-clicking a node or edge bubbles `dagre-node-contextmenu` /
`dagre-edge-contextmenu` with the same shape, pairing with spaday's `open_popup` for context menus.

Navigation is dagre-d3-class: cursor-anchored wheel zoom, drag pan (clamped so the graph can never
be dragged out of view), double-click reset, and an optional GitHub-mermaid-style D-pad
(`controls`) with pan arrows around a center reset circle.

The host draws into an absolutely positioned frame and contributes no intrinsic height: give
`<spaday-dagre>` or an ancestor an explicit height (e.g. `style="height: 32rem"`). An unsized host
falls back to the graph's natural height, with a one-time console warning.

## Quick example

```python
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", "shape": "diamond"}],
        "edges": [{"source": "a", "target": "b", "label": "flow"}],
    },
    layout={"rankdir": "LR"},
    controls=True,
)
app = serve(element("main").child(graph), packages=[package])
```

Node sizes default from label measurement; per-node `width`/`height`/`class`/`shape` (`rect`,
`diamond`, `ellipse`) and per-edge `label`/`class` override. The `maxLabelWidth` prop (px) caps
label-driven width: wider labels are ellipsized, with the full label as a native tooltip. `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.

A node with `parent` nests inside the cluster named by another node's id (dagre's compound
layout): the cluster renders as a rounded container behind its children, labeled along its top
edge, and clicks/right-clicks on it dispatch the node events with the same detail shape.
Parentless nodes mix freely with clustered ones; graphs without parents keep the flat layout
path.

The `emphasis` prop (a list of node ids; a single id string works too, null clears) toggles the
`.emphasis` class on the matching rendered nodes by pure class reconciliation — no re-layout, no
`graph` rebuild — and re-applies after re-renders, so a live selection binds directly:
`.bind("emphasis", "selected")`. The `focusNode(id)` method (declared in the
manifest for spaday's `Invoke`) pans — and zooms to a comfortable level when needed — so the node
or cluster is centered in the view; the bindable `focus` prop is a property spelling that calls
it on set, with the method as the primary API.

## Theming

Component-scoped tokens layer over the shell's `--spa-*` tokens, so an application can theme the
graph from the host (or any ancestor) without knowing its internals — a token set once wins in both
light and dark page modes:

| Token                    | Themes                                                |
| ------------------------ | ----------------------------------------------------- |
| `--dagre-node-fill`      | node shape fill                                       |
| `--dagre-node-stroke`    | node shape outline                                    |
| `--dagre-node-text`      | node and cluster label text                           |
| `--dagre-edge-stroke`    | edge lines and arrowheads                             |
| `--dagre-edge-label`     | edge label text                                       |
| `--dagre-cluster-fill`   | cluster container fill                                |
| `--dagre-cluster-stroke` | cluster container outline                             |
| `--dagre-accent`         | hover, connected-endpoint, and `emphasis` affordances |

Node and edge `class` values are forwarded onto the rendered `<g>` groups (alongside
`spaday-dagre-node` / `spaday-dagre-edge`), so custom classes are CSS-targetable directly. One
variant is built in: a node or edge whose `class` includes `emphasis` gets an accent outline.

## Run the local example

```bash
python -m spaday_dagre.example
```

Open <http://127.0.0.1:8016>: a pipeline DAG live over a transports wire — the server sweeps an
active-stage highlight through the graph while node/edge selection rides back as model edits — with
direction switching, mixed node shapes, a "modeling" cluster grouping the middle stages, selection
mirrored into the `emphasis` prop, a right-click menu for nodes and edges (its Focus item centers
via `focusNode`), view controls, and the dark-mode toggle.

> [!NOTE]
> This library was generated using [copier](https://copier.readthedocs.io/en/stable/) from the [Base Python Project Template repository](https://github.com/python-project-templates/base).
