code-node-graph 0.4.0__tar.gz → 0.5.0__tar.gz

{code_node_graph-0.4.0 → code_node_graph-0.5.0}/CHANGELOG.md

@@ -4,6 +4,25 @@ Every change a user would notice, newest first ([Keep a Changelog](https://keepa
 follow [Semantic Versioning](https://semver.org/); before 1.0, a minor version may change what a command does.
 ## [Unreleased]
 
+## [0.5.0] - 2026-10-20
+
+### Added
+
+- The graph moves like a canvas: drag it to pan in any direction, hold Ctrl (⌘ on a Mac) and scroll, or pinch a
+  trackpad, to zoom around the pointer, and `+`, `-` and `0` when it has focus. It stays in a box as wide as the page and
+  about the window's height, however far it's zoomed, so the scroll bar under a tall graph is no longer the only way across;
+  **Fit** puts all of it in that box, and − and + buttons in its corner say how big it's drawn. This needs JavaScript;
+  without it the graph scrolls as before.
+
+- Each function says what git says about it, when the folder is in git: who changed it last, how long ago and in
+  which commit (a link to the commit on GitHub or GitLab), how many commits and people its lines come from, and how
+  many of its lines changed since the last commit. It's in a box's hover card and code panel and in the step that
+  goes into it. It's read with `git blame`, once per file; `--no-git` leaves it out.
+
+### Changed
+
+- A box's code opens in a panel over the graph, rather than pushing the graph aside on a wide screen.
+
 ## [0.4.0] - 2026-10-20
 
 ### Fixed
@@ -193,7 +212,8 @@ follow [Semantic Versioning](https://semver.org/); before 1.0, a minor version m
 - `--platform NAME` runs a platform's checks whatever the entry point is; `--lambda` is short for
   `--platform lambda`. `EntryPoint.is_lambda` and `PageOptions.is_lambda` are now `platform` (`"lambda"` or `""`).
 
-[Unreleased]: https://github.com/utkarsh5026/code-node/compare/v0.4.0...HEAD
+[Unreleased]: https://github.com/utkarsh5026/code-node/compare/v0.5.0...HEAD
+[0.5.0]: https://github.com/utkarsh5026/code-node/compare/v0.4.0...v0.5.0
 [0.4.0]: https://github.com/utkarsh5026/code-node/compare/v0.3.0...v0.4.0
 [0.3.0]: https://github.com/utkarsh5026/code-node/compare/v0.2.0...v0.3.0
 [0.2.0]: https://github.com/utkarsh5026/code-node/compare/v0.1.0...v0.2.0

{code_node_graph-0.4.0 → code_node_graph-0.5.0}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.5
 Name: code-node-graph
-Version: 0.4.0
+Version: 0.5.0
 Summary: See how Python code works without running it: a graph of who calls whom from an entry point, and what each path reaches.
 Project-URL: Homepage, https://github.com/utkarsh5026/code-node
 Project-URL: Documentation, https://utkarsh5026.github.io/code-node/
@@ -117,6 +117,7 @@ string is flagged.
 | `-o`, `--out`, `--no-open` | Where to save (default `~/.cache/code-node/`), and whether to open it |
 | `--platform NAME`, `--lambda` | Run a platform's checks on any entry point |
 | `--editor vscode\|cursor\|none` | Editor the line links open (default `vscode`, WSL-aware) |
+| `--no-git` | Leave out what git says about each function (who changed it last, when, in which commit) |
 
 </details>
 

{code_node_graph-0.4.0 → code_node_graph-0.5.0}/README.md

@@ -87,6 +87,7 @@ string is flagged.
 | `-o`, `--out`, `--no-open` | Where to save (default `~/.cache/code-node/`), and whether to open it |
 | `--platform NAME`, `--lambda` | Run a platform's checks on any entry point |
 | `--editor vscode\|cursor\|none` | Editor the line links open (default `vscode`, WSL-aware) |
+| `--no-git` | Leave out what git says about each function (who changed it last, when, in which commit) |
 
 </details>
 

{code_node_graph-0.4.0 → code_node_graph-0.5.0}/src/code_node/__init__.py

@@ -13,7 +13,7 @@ from .libraries import Library, register_library
 from .platforms import Platform, get_platform, register_platform
 from .project import EntryPoint, Project, entry_points, read_project
 
-__version__ = "0.4.0"
+__version__ = "0.5.0"
 
 __all__ = [
     "CodeGraph",

{code_node_graph-0.4.0 → code_node_graph-0.5.0}/src/code_node/analysis/graph.py

@@ -15,7 +15,7 @@ from ..kit.text import _clip
 
 from .syntax import _a
 from .aws_model import _service_name
-from .model import AwsCall, CodeFunction, CodeMap, CodeSpot, CodeStep, LibraryCall
+from .model import AwsCall, CodeFunction, CodeMap, CodeSpot, CodeStep, History, LibraryCall
 from .findings import _listed, _short_name
 from ..platforms import get_platform
 
@@ -56,6 +56,7 @@ class GraphNode:
     icon: str = ""  # a service's icon, when its plugin names one: 'database', 'queue', 'spark'; or the entry
     # point's logo, when its platform names one: 'fastapi-icon'
     name: str = ""  # a function's box: the function, as module.name ('orders.repo.save')
+    history: History | None = None  # a function's box: what git says about its lines
 
 
 @dataclass
@@ -834,6 +835,7 @@ def code_graph(
                 when=_when(f, f.called_from),
                 icon=platform.entry_icon(cmap) if is_entry and not focus else "",
                 name=f.name,
+                history=f.history,
             )
         )
     out_column = 1 + max([n.column for n in graph.nodes if n.kind in ("handler", "function", "start")] + [1])

{code_node_graph-0.4.0 → code_node_graph-0.5.0}/src/code_node/analysis/model.py

@@ -173,6 +173,50 @@ class EventField:
         return _event_label(self.path)
 
 
+@dataclass
+class Commit:
+    """
+    A commit, as git blame tells it.
+    """
+
+    sha: str
+    author: str
+    time: int  # when it was made, in seconds since 1970
+    subject: str  # its message's first line
+    url: str = ""  # its page on the repository's host, when that's GitHub or GitLab
+
+    @property
+    def short(self) -> str:
+        return self.sha[:7]
+
+
+@dataclass
+class History:
+    """
+    What git says about a function's lines as they are now: the commit that last changed one of them, how many commits
+    and people they come from, and how many have changed since the last commit. Read by history.py; None on a
+    function when the folder isn't in git.
+    """
+
+    last: Commit | None  # the newest commit among its lines; None when none of them is committed yet
+    commits: int  # the commits its lines come from
+    authors: list[str]  # who wrote them, most lines first
+    first: int  # when the oldest of them was made (about when the function was written), in seconds since 1970
+    uncommitted: int  # its lines changed since the last commit
+    now: int  # when this was read, for 'three days ago'
+
+    def ago(self, time: int) -> str:
+        """
+        'today', '3 days ago', '2 months ago', '1 year ago'.
+        """
+        days = max(0, self.now - time) // 86_400
+        for size, unit in ((365, "year"), (30, "month"), (7, "week"), (1, "day")):
+            if days >= size:
+                count = days // size
+                return f"{count} {unit}{'' if count == 1 else 's'} ago"
+        return "today"
+
+
 @dataclass
 class CodeFunction:
     """
@@ -190,6 +234,7 @@ class CodeFunction:
     # nearest around the call, else the nearest `if x: return` above it ('args.serve', not every check before it)
     depth: int = 0  # calls from the entry point (the entry point is 0)
     is_async: bool = False  # async def: a call that blocks in it holds up everything else on its event loop
+    history: History | None = None  # what git says about its lines, when the folder is in git (history.py)
 
 
 @dataclass

{code_node_graph-0.4.0 → code_node_graph-0.5.0}/src/code_node/cli.py

@@ -99,6 +99,9 @@ def _parse_args(argv: list[str] | None) -> argparse.Namespace:
         default="vscode",
         help="the editor the page's line links open (default vscode; none for no links)",
     )
+    parser.add_argument(
+        "--no-git", action="store_true", help="leave out what git says about each function (who changed it, when)"
+    )
     return parser.parse_args(argv)
 
 
@@ -286,7 +289,12 @@ def main(argv: list[str] | None = None) -> int:
     if entry is None:
         return 1
     options = PageOptions(
-        draw_all=args.all, functions=args.functions, depth=args.depth, platform=args.platform, editor=args.editor
+        draw_all=args.all,
+        functions=args.functions,
+        depth=args.depth,
+        platform=args.platform,
+        editor=args.editor,
+        git=not args.no_git,
     )
     if args.mermaid:
         print(make_mermaid(project.root, entry, options))

code_node_graph-0.5.0/src/code_node/history.py

@@ -0,0 +1,151 @@
+"""
+What git says about the functions a map shows: `git blame` on the lines of each one, once per file, for the commit
+that last changed it, how many commits and people its lines come from, and the lines changed since the last commit.
+
+git is run on the folder, never the code in it, and only to read: blame with no text conversion and no file system
+monitor. A folder whose own git config names a filter command (one git would run on the files) isn't read at all.
+"""
+
+from __future__ import annotations
+
+import os
+import re
+import subprocess
+import time
+from collections import Counter
+from concurrent.futures import ThreadPoolExecutor
+from pathlib import Path
+
+from .analysis.model import CodeFunction, Commit, History
+
+_TIMEOUT = 20  # seconds a git command may take before its file goes without history
+
+_WORKERS = 8  # files blamed at once
+
+_UNCOMMITTED = "0" * 40  # the commit blame gives lines changed since the last one
+
+_HOSTS = {"github.com": "{}/commit/{}", "gitlab.com": "{}/-/commit/{}"}  # a commit's page, by host
+
+_SAFE = ["-c", "core.fsmonitor=false", "--no-pager"]  # no program of the folder's config runs
+
+
+def _git(root: Path, *args: str) -> str | None:
+    """
+    What a git command prints, run in root; None when git isn't there or fails (not a repository, a file it doesn't
+    track, a folder it doesn't trust).
+    """
+    try:
+        done = subprocess.run(
+            ["git", *_SAFE, "-C", str(root), *args],
+            capture_output=True,
+            text=True,
+            encoding="utf-8",
+            errors="replace",
+            timeout=_TIMEOUT,
+            env={**os.environ, "GIT_TERMINAL_PROMPT": "0", "GIT_OPTIONAL_LOCKS": "0"},
+        )
+    except (OSError, subprocess.SubprocessError):
+        return None
+    return done.stdout if done.returncode == 0 else None
+
+
+def _runs_filters(root: Path) -> bool:
+    """
+    Whether the folder's own git config (not the user's) names a filter command, which blame would run on its files.
+    """
+    found = _git(root, "config", "--show-scope", "--get-regexp", r"^filter\..*\.(clean|process)$")
+    return any(line.split("\t", 1)[0] in ("local", "worktree") for line in (found or "").splitlines())
+
+
+def _commit_page(remote: str) -> str:
+    """
+    The repository's web address with a {} for the sha, from its origin: 'https://github.com/o/r/commit/{}'.
+    """
+    found = re.fullmatch(r"(?:https?://(?:[^@/]+@)?|ssh://(?:[^@/]+@)?|[^@/]+@)([^/:]+)[:/](.+?)(?:\.git)?/?", remote)
+    if not found or found.group(1) not in _HOSTS:
+        return ""
+    return _HOSTS[found.group(1)].format(f"https://{found.group(1)}/{found.group(2)}", "{}")
+
+
+def _blame(root: Path, file: str, start: int, end: int) -> dict[int, tuple[str, dict[str, str]]]:
+    """
+    Each line from start to end of the file as it is now: line -> (the commit it comes from, that commit's headers).
+    """
+    out = _git(root, "blame", "--porcelain", "--no-textconv", "-L", f"{start},{end}", "--", file)
+    lines: dict[int, tuple[str, dict[str, str]]] = {}
+    if not out:
+        return lines
+    headers: dict[str, dict[str, str]] = {}
+    sha = ""
+    for row in out.splitlines():
+        if row.startswith("\t"):
+            continue
+        parts = row.split(" ")
+        if len(parts) >= 3 and len(parts[0]) == 40 and parts[1].isdigit() and parts[2].isdigit():
+            sha = parts[0]
+            headers.setdefault(sha, {})
+            lines[int(parts[2])] = (sha, headers[sha])
+        elif sha:
+            key, _, value = row.partition(" ")
+            headers[sha].setdefault(key, value)
+    return lines
+
+
+def _history(blamed: dict[int, tuple[str, dict[str, str]]], start: int, end: int, page: str, now: int) -> History:
+    """
+    A function's history from its lines' blame.
+    """
+    commits: dict[str, Commit] = {}
+    by_author: Counter[str] = Counter()
+    uncommitted = 0
+    for k in range(start, end + 1):
+        if k not in blamed:
+            continue
+        sha, said = blamed[k]
+        if sha == _UNCOMMITTED:
+            uncommitted += 1
+            continue
+        if sha not in commits:
+            commits[sha] = Commit(
+                sha,
+                said.get("author", "?"),
+                int(said.get("author-time", "0") or 0),
+                said.get("summary", ""),
+                page.format(sha) if page else "",
+            )
+        by_author[commits[sha].author] += 1
+    last = max(commits.values(), key=lambda c: c.time, default=None)
+    return History(
+        last=last,
+        commits=len(commits),
+        authors=[name for name, _ in by_author.most_common()],
+        first=min((c.time for c in commits.values()), default=0),
+        uncommitted=uncommitted,
+        now=now,
+    )
+
+
+def read_history(root: Path, functions: list[CodeFunction]) -> int:
+    """
+    Fills in each function's history from git, blaming each file once over the lines its functions take up. How many
+    functions it found history for: 0 when the folder isn't in git, git isn't installed, or the folder's config would
+    have git run a program of its own.
+    """
+    spans: dict[str, tuple[int, int]] = {}
+    for f in functions:
+        if f.file and f.line and f.lines:
+            start, end = spans.get(f.file, (f.line, f.line + f.lines - 1))
+            spans[f.file] = (min(start, f.line), max(end, f.line + f.lines - 1))
+    if not spans or _git(root, "rev-parse", "--is-inside-work-tree") is None or _runs_filters(root):
+        return 0
+    page = _commit_page((_git(root, "remote", "get-url", "origin") or "").strip())
+    now = int(time.time())
+    with ThreadPoolExecutor(max_workers=min(_WORKERS, len(spans))) as pool:
+        blamed = dict(zip(spans, pool.map(lambda file: _blame(root, file, *spans[file]), spans)))
+    found = 0
+    for f in functions:
+        lines = blamed.get(f.file)
+        if lines:
+            f.history = _history(lines, f.line, f.line + f.lines - 1, page, now)
+            found += 1
+    return found

{code_node_graph-0.4.0 → code_node_graph-0.5.0}/src/code_node/pages.py

@@ -6,13 +6,14 @@ once, and the server makes it again on every change.
 from __future__ import annotations
 
 import os
-from dataclasses import dataclass
+from dataclasses import dataclass, replace
 from pathlib import Path
 
 from .analysis.graph import code_graph
 from .analysis.mapping import entry_file, map_code
 from .analysis.model import CodeMap
 from .deploys import find_deployment
+from .history import read_history
 from .project import EntryPoint, Project, read_project
 from .report.build import page_blocks
 from .report.editor import editor_link
@@ -38,6 +39,7 @@ class PageOptions:
     depth: int = GRAPH_DEPTH
     platform: str = ""  # --platform: its checks run whatever the entry point is ('' leaves it to the entry point)
     editor: str = "vscode"  # --editor: the editor its line links open ('vscode', 'cursor'; 'none' for no links)
+    git: bool = True  # what git says about each function (--no-git leaves it out)
 
     @property
     def limits(self) -> tuple[int, int]:
@@ -63,6 +65,8 @@ def map_entry(root: Path, entry: EntryPoint, options: PageOptions) -> tuple[Code
         platform=options.platform or entry.platform,
         deployment=deployment,
     )
+    if options.git:
+        read_history(project.root, cmap.functions)
     return cmap, project
 
 
@@ -87,6 +91,6 @@ def make_mermaid(root: Path, entry: EntryPoint, options: PageOptions) -> str:
     """
     The graph as Mermaid.
     """
-    cmap, _ = map_entry(root, entry, options)
+    cmap, _ = map_entry(root, entry, replace(options, git=False))  # Mermaid has nowhere to say it
     max_functions, max_depth = options.limits
     return code_graph(cmap, max_functions=max_functions, max_depth=max_depth).mermaid()

code_node_graph-0.5.0/src/code_node/report/changes.py

@@ -0,0 +1,42 @@
+"""
+What git says about a function, as HTML: who changed it last and when, with a link to the commit when the repository
+is on GitHub or GitLab, how many commits and people its lines come from, and its lines not committed yet. The same
+in the graph's panel, its hover card and the walk's card.
+"""
+
+from __future__ import annotations
+
+from datetime import datetime, timezone
+
+from ..kit.text import _esc
+
+from ..analysis.model import History
+
+
+def history_html(history: History | None, short: bool = False) -> str:
+    """
+    The function's history as a few lines, or '' without one. short: the last change alone, for a hover card.
+    """
+    if history is None or not (history.last or history.uncommitted):
+        return ""
+    said = []
+    last = history.last
+    if last:
+        day = datetime.fromtimestamp(last.time, timezone.utc).strftime("%Y-%m-%d")
+        sha = f"<code>{_esc(last.short)}</code>"
+        if last.url and not short:
+            sha = f'<a href="{_esc(last.url)}" target="_blank" rel="noopener" title="The commit">{sha} ↗</a>'
+        said.append(
+            f'Last changed <b title="{day}">{_esc(history.ago(last.time))}</b> by {_esc(last.author)} in {sha}'
+            + (f": <q>{_esc(last.subject)}</q>" if last.subject else "")
+        )
+        if history.commits > 1 and not short:
+            people = f"{len(history.authors)} people" if len(history.authors) > 1 else _esc(history.authors[0])
+            said.append(
+                f"Its lines come from {history.commits} commits by {people}, the oldest "
+                f"{_esc(history.ago(history.first))}"
+            )
+    if history.uncommitted:
+        changed = f"{history.uncommitted} line{'' if history.uncommitted == 1 else 's'} changed since the last commit"
+        said.append(f'<span class="cnhu">{changed if last else "Not committed yet"}</span>')
+    return '<div class="cnh">' + "".join(f"<p>{line}</p>" for line in said) + "</div>"

{code_node_graph-0.4.0 → code_node_graph-0.5.0}/src/code_node/report/graph.py

@@ -19,6 +19,7 @@ from ..kit.text import _esc
 
 from ..analysis.findings import _short_name
 from ..analysis.graph import CodeGraph, GraphEdge, GraphNode, GraphView
+from .changes import history_html
 from .brands import AWS_LOGOS, SERVICE_LOGOS, fills, logo, small_logo
 from .editor import editor_name, open_at
 from .style import _ROOT
@@ -1195,6 +1196,7 @@ def _g_panel(n: GraphNode, lines_of: Callable[[str], list[str]], editor: str = "
             if n.kind in ("handler", "function", "start")
             else '<p class="csd csl">The lit lines are where the code uses it.</p>'
         )
+    said += history_html(n.history)
     mono = " mono" if n.kind in ("handler", "function") else ""
     return (
         f'<aside class="cside" id="{_esc(panel or _g_panel_id(n))}" aria-label="{_esc("The code of " + n.label)}">'
@@ -1300,6 +1302,10 @@ def _g_tip(n: GraphNode, lines_of: Callable[[str], list[str]], opens: bool) -> t
         else:
             body.append(f'<p class="ctp">{_g_tip_text(line)}</p>')
             tall += 23 * math.ceil(len(line) / 42) + 10
+    changed = history_html(n.history, short=True)
+    if changed:
+        body.append(changed)
+        tall += 23 * math.ceil(len(re.sub(r"<[^>]*>", "", changed)) / 42) + 14
     if warnings:
         body.append(
             '<div class="ctw"><b>Warning</b><ul>'
@@ -1414,7 +1420,7 @@ _G_SCRIPT = """<script>
     const from = view ? document.getElementById(view)?.content : wrap.main;
     if (!from) return;
     for (const part of parts) {
-      wrap.querySelector(".cgb > ." + part).innerHTML = from.querySelector(".x-" + part).innerHTML;
+      wrap.querySelector(".cgb ." + part).innerHTML = from.querySelector(".x-" + part).innerHTML;
     }
     wrap.dataset.view = view;
     wrap.querySelector(".cgb").scrollIntoView({block: "nearest"});
@@ -1424,7 +1430,7 @@ _G_SCRIPT = """<script>
     for (const part of parts) {
       const kept = document.createElement("div");
       kept.className = "x-" + part;
-      kept.innerHTML = wrap.querySelector(".cgb > ." + part).innerHTML;
+      kept.innerHTML = wrap.querySelector(".cgb ." + part).innerHTML;
       main.content.append(kept);
     }
     wrap.main = main.content;
@@ -1440,6 +1446,97 @@ _G_SCRIPT = """<script>
     if (open && !open.contains(e.target) && !e.target.closest("a[href], label, input, .cgt")) close();
   });
   document.addEventListener("keydown", (e) => { if (e.key === "Escape") close(); });
+  // Moving about a graph as on a canvas: drag it to pan, Ctrl or ⌘ with the wheel (or a trackpad's pinch) to zoom
+  // around the pointer, and + - 0 when it has focus. A zoom of its own unchecks the bar's buttons, so the plain rule
+  // (the SVG's width times --z) draws it; picking a button again takes it back. Its box keeps one size, and Fit
+  // (--fit) puts all of it in that box, both ways.
+  for (const wrap of document.querySelectorAll(".cgw")) {
+    const box = wrap.querySelector(".cgb .cg"), radios = wrap.querySelectorAll(":scope > .cgs[type=radio]");
+    const said = wrap.querySelector(".cgtp"), svg = () => box.querySelector("svg");
+    const scale = () => {
+      const s = svg();
+      return s && s.viewBox.baseVal.width ? s.getBoundingClientRect().width / s.viewBox.baseVal.width : 1;
+    };
+    const fit = () => {
+      const s = svg(), w = s && s.viewBox.baseVal.width, h = s && s.viewBox.baseVal.height;
+      if (w && h && box.clientWidth) {
+        box.style.setProperty("--fit", Math.min((box.clientWidth - 24) / w, (box.clientHeight - 24) / h, 1.5));
+      }
+    };
+    const tell = () => { fit(); if (said) said.textContent = Math.round(scale() * 100) + "%"; };
+    const pan = (dx, dy) => {  // the graph's box first, then the page for what it can't scroll
+      const top = box.scrollTop;
+      box.scrollLeft += dx;
+      box.scrollTop += dy;
+      const left = dy - (box.scrollTop - top);
+      if (Math.abs(left) > 0.5) scrollBy(0, left);
+    };
+    const zoom = (by, x, y) => {  // keeps the point at (x, y) where it is
+      const s = svg();
+      if (!s) return;
+      const from = scale(), to = Math.min(4, Math.max(0.1, from * by)), was = s.getBoundingClientRect();
+      const px = (x - was.left) / from, py = (y - was.top) / from;
+      radios.forEach((r) => { r.checked = false; });
+      box.style.setProperty("--z", to);
+      const now = s.getBoundingClientRect();
+      pan(now.left + px * to - x, now.top + py * to - y);
+      tell();
+    };
+    const auto = () => {  // back to the Auto button
+      const radio = wrap.querySelector(":scope > .cgz-auto");
+      radio.checked = true;
+      radio.dispatchEvent(new Event("change", {bubbles: true}));
+    };
+    const step = (by) => {  // around the middle of what's in sight
+      const r = box.getBoundingClientRect();
+      zoom(by, r.left + r.width / 2, (Math.max(r.top, 0) + Math.min(r.bottom, innerHeight)) / 2);
+    };
+    wrap.querySelector(".cgb .zi")?.addEventListener("click", () => step(1.25));
+    wrap.querySelector(".cgb .zo")?.addEventListener("click", () => step(0.8));
+    let drag = null, moved = false;
+    box.addEventListener("pointerdown", (e) => {
+      moved = false;
+      if (e.button === 0 && e.pointerType !== "touch") drag = {x: e.clientX, y: e.clientY, id: e.pointerId};
+    });
+    box.addEventListener("pointermove", (e) => {
+      if (!drag || e.pointerId !== drag.id) return;
+      const dx = e.clientX - drag.x, dy = e.clientY - drag.y;
+      if (!moved && Math.hypot(dx, dy) < 4) return;  // a click on a box stays a click
+      if (!moved) { moved = true; box.setPointerCapture(e.pointerId); box.classList.add("pan"); }
+      pan(-dx, -dy);
+      drag.x = e.clientX;
+      drag.y = e.clientY;
+    });
+    const end = () => { drag = null; box.classList.remove("pan"); };
+    box.addEventListener("pointerup", end);
+    box.addEventListener("pointercancel", end);
+    box.addEventListener("click", (e) => { if (moved) { e.preventDefault(); e.stopPropagation(); } }, true);
+    box.addEventListener("dragstart", (e) => e.preventDefault());
+    box.addEventListener("wheel", (e) => {
+      if (!e.ctrlKey && !e.metaKey) return;
+      e.preventDefault();
+      const d = e.deltaY * (e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? 400 : 1);
+      zoom(Math.exp(-Math.max(-100, Math.min(100, d)) * 0.0015), e.clientX, e.clientY);
+    }, {passive: false});
+    box.tabIndex = 0;
+    box.addEventListener("keydown", (e) => {
+      if (e.ctrlKey || e.metaKey || e.altKey) return;
+      if (e.key === "+" || e.key === "=") step(1.25);
+      else if (e.key === "-" || e.key === "_") step(0.8);
+      else if (e.key === "0") auto();
+      else return;
+      e.preventDefault();
+    });
+    wrap.addEventListener("change", (e) => {
+      if (!e.target.matches(".cgs")) return;  // a zoom button, or full screen: its box's size changes
+      if (e.target.type === "radio") box.style.removeProperty("--z");
+      requestAnimationFrame(tell);
+    });
+    addEventListener("hashchange", () => requestAnimationFrame(tell));
+    addEventListener("resize", tell);
+    wrap.classList.add("pz");
+    tell();
+  }
 })();
 </script>"""
 
@@ -1604,7 +1701,7 @@ def _g_canvas(
     hint = (
         '<span class="kt">Point at a box to see only what it\'s joined to'
         + ("; click it to read its code" if panel_of else "")
-        + "</span>"
+        + '</span><span class="kt pzo">Drag to move about; Ctrl or ⌘ and scroll, or pinch, to zoom</span>'
     )
     svg = (
         f'<svg viewBox="0 0 {width:.0f} {tall:.0f}" width="{width:.0f}" height="{tall:.0f}" '
@@ -1681,8 +1778,14 @@ def _graph_html(block: _Graph, report: _Report) -> str:
         + f'</span><label class="cgtf" for="{group}-full"><span class="on">Full screen</span>'
         '<span class="off">Close full screen</span></label></div>'
     )
+    zoom = (  # over the graph's corner, as a canvas has it: with JavaScript only
+        '<span class="cgtm pzo" role="group" aria-label="Zoom out or in">'
+        '<button type="button" class="zo" title="Zoom out (-, or Ctrl and scroll)">−</button>'
+        '<span class="cgtp" title="How big the graph is drawn"></span>'
+        '<button type="button" class="zi" title="Zoom in (+, or Ctrl and scroll)">+</button></span>'
+    )
     script = ""
-    if (views or panels) and not report.shared("graph-script", lambda: [False])[0]:
+    if not report.shared("graph-script", lambda: [False])[0]:  # once, for every graph: moving about and zooming
         report.shared("graph-script", lambda: [False])[0] = True
         script = _G_SCRIPT
     # in a box of its own with its panels: the :has() rules that outline a box whose code is open look only in here,
@@ -1690,7 +1793,7 @@ def _graph_html(block: _Graph, report: _Report) -> str:
     data = f' data-group="{group}"' if views else ""
     return (
         f'{title}<div class="cgw"{data}>{switches}<div class="cgb">{bar}'
-        f'<nav class="cgc" aria-label="Where this graph starts"></nav><div class="cg">{svg}</div>'
+        f'<nav class="cgc" aria-label="Where this graph starts"></nav><div class="cgv"><div class="cg">{svg}</div>{zoom}</div>'
         f'<div class="cgk">{legend}</div></div>{"".join(html for _, html in panels.values())}{"".join(views)}</div>'
         f"{script}"
     )

{code_node_graph-0.4.0 → code_node_graph-0.5.0}/src/code_node/report/style.py

@@ -102,7 +102,8 @@ _EXTRA_CSS = """\
 .cnd :is(.flow,.cside,.walk,.ctip) .pa{font-style:italic}
 .cnd :is(.flow,.cside,.walk,.ctip) .pc{opacity:.6;font-style:italic}
 .cnd .cgb{width:fit-content;max-width:min(100%,1180px)}
-.cnd .cg{border:1px solid rgba(127,127,127,.2);border-radius:14px;margin:6px 0 8px;overflow:auto;background-color:rgba(127,127,127,.035);background-attachment:local;background-size:18px 18px;
+.cnd .cgv{position:relative;margin:6px 0 8px}
+.cnd .cg{border:1px solid rgba(127,127,127,.2);border-radius:14px;overflow:auto;background-color:rgba(127,127,127,.035);background-attachment:local;background-size:18px 18px;
  background-image:radial-gradient(circle at 1px 1px,rgba(127,127,127,.3) 1px,transparent 0);background-position:9px 9px}
 .cnd .cg svg{display:block;width:calc(var(--w)*var(--z,1));max-width:none;height:auto;overflow:visible;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
 .cnd .cgw{position:relative}
@@ -121,11 +122,25 @@ _EXTRA_CSS = """\
 .cnd .cgz-auto:checked~.cgb .cg svg{width:var(--w);max-width:100%;min-width:calc(var(--w)*.8)}
 .cnd .cgz-fit:checked~.cgb .cg svg{width:var(--w);max-width:100%}
 .cnd .cgfs:checked~.cgb{position:fixed;inset:0;z-index:25;width:auto;max-width:none;display:flex;flex-direction:column;box-sizing:border-box;padding:12px clamp(12px,2vw,28px) 4px;background:var(--jp-layout-color0,var(--vscode-editor-background,Canvas))}
-.cnd .cgfs:checked~.cgb .cg{flex:1;min-height:0;margin:0 0 8px}
+.cnd .cgfs:checked~.cgb .cgv{flex:1;min-height:0;display:flex;flex-direction:column;margin:0 0 8px}
+.cnd .cgfs:checked~.cgb .cg{flex:1;min-height:0}
 .cnd .cgfs:checked~.cgz-fit:checked~.cgb .cg svg{width:100%;height:100%;max-width:none}
 .cnd .cgfs:checked~.cgz-auto:checked~.cgb .cg svg{min-width:0}
-@media (min-width:1100px){.cnd .cgw:has(.cside:target) .cgfs:checked~.cgb{right:min(660px,94vw)}}
 .cnd .cgw:not(.js) :is(.oj,.dr),.cnd .cgw.js .nj{display:none}
+.cnd .cgw:not(.pz) .pzo{display:none}
+.cnd .cgw.pz .cg{cursor:grab;user-select:none;-webkit-user-select:none}
+.cnd .cgw.pz .cg.pan,.cnd .cgw.pz .cg.pan *{cursor:grabbing}
+.cnd .cgw.pz .cg:focus-visible{outline:2px solid light-dark(#2563eb,#60a5fa);outline-offset:-2px}
+.cnd .cgw.pz>.cgfs:not(:checked)~.cgb{width:100%;max-width:none}
+.cnd .cgw.pz>.cgfs:not(:checked)~.cgb .cg{height:max(360px,72vh)}
+.cnd .cgw.pz .cg{display:flex}
+.cnd .cgw.pz .cg svg{flex:none;margin:auto}
+.cnd .cgw.pz>.cgz-fit:checked~.cgb .cg svg{width:calc(var(--w)*var(--fit,1));height:auto;max-width:none}
+.cnd .cgtm{position:absolute;right:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;font-size:12px;user-select:none;-webkit-user-select:none;border:1px solid rgba(127,127,127,.3);border-radius:8px;overflow:hidden;background:var(--jp-layout-color0,var(--vscode-editor-background,Canvas));box-shadow:0 1px 2px rgba(0,0,0,.06),0 4px 12px rgba(15,23,42,.08)}
+.cnd .cgtm button{font:inherit;font-size:16px;line-height:1;color:inherit;background:none;border:0;padding:6px 11px;cursor:pointer;opacity:.75}
+.cnd .cgtm button:hover{opacity:1;background:rgba(127,127,127,.08)}
+.cnd .cgtm button:focus-visible{outline:2px solid light-dark(#2563eb,#60a5fa);outline-offset:-2px}
+.cnd .cgtp{min-width:3.4em;padding:3px 2px;text-align:center;opacity:.7;font-variant-numeric:tabular-nums;border-inline:1px solid rgba(127,127,127,.2)}
 .cnd .cgta{padding:3px 10px;border:1px solid rgba(127,127,127,.28);border-radius:8px;color:inherit;text-decoration:none;opacity:.7}
 .cnd .cgta:hover{opacity:.95;background:rgba(127,127,127,.08)}
 .cnd .cgw[data-view$="-all"] .cgta{opacity:1;font-weight:650;background:rgba(127,127,127,.14)}
@@ -284,7 +299,6 @@ _EXTRA_CSS = """\
 .cnd .cside .sl.lit{background:rgba(245,158,11,.16);box-shadow:inset 3px 0 #f59e0b}
 .cnd .cside .sn{display:inline-block;width:3.2em;padding-right:14px;text-align:right;opacity:.42;user-select:none;-webkit-user-select:none}
 .cnd .cside .csm{font-size:12px;font-style:italic;opacity:.6;margin:6px 2px 0}
-@media (min-width:1100px){.cnd .cgw:has(.cside:target){margin-right:min(660px,94vw)}}
 @media (prefers-reduced-motion:reduce){.cnd .cside,.cnd .cside:target{transition:none}}
 .cnd .tabs{position:relative;margin:0 0 8px}
 .cnd .tbar{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;align-items:flex-end;gap:2px;padding-top:6px;margin:0 0 18px;border-bottom:1px solid rgba(127,127,127,.22);background:var(--jp-layout-color0,var(--vscode-editor-background,Canvas))}
@@ -372,6 +386,14 @@ _EXTRA_CSS = """\
 .cnd .walk .wsay p{margin:4px 0 0;opacity:.85}
 .cnd .walk .wsay code{font-size:12.5px}
 .cnd .walk .wdoc{font-style:italic;opacity:.7}
+.cnd .cnh{margin:10px 0 0;padding:8px 0 0 10px;border-left:2px solid rgba(127,127,127,.3);font-size:12.5px;line-height:1.5}
+.cnd .cnh p{margin:0 0 3px;opacity:.75;overflow-wrap:anywhere}
+.cnd .cnh p:last-child{margin-bottom:0}
+.cnd .cnh b{font-weight:600}
+.cnd .cnh code{font:12px var(--mono)}
+.cnd .cnh a{color:light-dark(#2563eb,#60a5fa);text-decoration:none}
+.cnd .cnh a:hover{text-decoration:underline}
+.cnd .cnh .cnhu{color:light-dark(#b45309,#fbbf24)}
 .cnd .walk .wjump{user-select:none;-webkit-user-select:none;color:var(--blue);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
 .cnd .walk .wfacts{list-style:none;margin:10px 0 0;padding:10px 0 0;border-top:1px solid rgba(127,127,127,.14);display:flex;flex-direction:column;gap:5px}
 .cnd .walk .wfacts li{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;font-size:12.5px;overflow-wrap:anywhere}