code-node-graph 0.4.0__py3-none-any.whl → 0.6.0__py3-none-any.whl

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.6.0"
 
 __all__ = [
     "CodeGraph",

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/analysis/model.py

@@ -173,6 +173,62 @@ 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'
+    lines: dict[int, Commit | None] = field(default_factory=dict)  # each of its lines -> the commit it comes from,
+    # None for one changed since the last commit
+
+    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"
+
+    def since(self, time: int) -> str:
+        """
+        The same, short, for beside a line: 'today', '3d', '2w', '5mo', '1y'.
+        """
+        days = max(0, self.now - time) // 86_400
+        for size, unit in ((365, "y"), (30, "mo"), (7, "w"), (1, "d")):
+            if days >= size:
+                return f"{days // size}{unit}"
+        return "today"
+
+
 @dataclass
 class CodeFunction:
     """
@@ -190,6 +246,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/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/history.py

@@ -0,0 +1,156 @@
+"""
+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, the lines changed since the last commit, and
+the commit each line comes from.
+
+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
+    lines: dict[int, Commit | None] = {}
+    for k in range(start, end + 1):
+        if k not in blamed:
+            continue
+        sha, said = blamed[k]
+        if sha == _UNCOMMITTED:
+            uncommitted += 1
+            lines[k] = None
+            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
+        lines[k] = commits[sha]
+    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,
+        lines=lines,
+    )
+
+
+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/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/report/changes.py

@@ -0,0 +1,116 @@
+"""
+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 hover card and the walk's card, and in the graph's panel line by line, beside its code.
+"""
+
+from __future__ import annotations
+
+from datetime import datetime, timezone
+
+from ..kit.text import _esc
+
+from ..analysis.model import Commit, 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>"
+
+
+_AGES = 4  # shades of a line's bar, oldest to newest
+
+
+def blame_keys(history: History) -> dict[str, int]:
+    """
+    The commits its lines come from, oldest first, each with its place in that order: what a line's mark names to
+    find its commit in the panel's last row.
+    """
+    commits = {c.sha: c for c in history.lines.values() if c}
+    return {sha: k for k, sha in enumerate(sorted(commits, key=lambda sha: (commits[sha].time, sha)))}
+
+
+def blame_mark(history: History, line: int, keys: dict[str, int], same: bool) -> str:
+    """
+    What goes beside a line of the panel's code: who changed it last and how long ago (left out when the line above
+    says the same, same), over a bar darker the newer the line, amber for one not committed yet. Pointing at it says
+    the commit; '' for a line blame didn't cover, so the code stays in line.
+    """
+    if line not in history.lines:
+        return '<span class="sb"></span>'
+    commit = history.lines[line]
+    if commit is None:
+        return (
+            f'<span class="sb au{" same" if same else ""}" data-k="u" title="Changed since the last commit">'
+            "<span>Uncommitted</span></span>"
+        )
+    k = keys[commit.sha]
+    shade = _AGES - 1 if len(keys) == 1 else round(k * (_AGES - 1) / (len(keys) - 1))
+    said = f"{commit.subject} · {commit.author}, {history.ago(commit.time)} · {commit.short}"
+    return (
+        f'<span class="sb a{shade}{" same" if same else ""}" data-k="{k}" title="{_esc(said)}">'
+        f"<span>{_esc(commit.author.split(' ')[0] or commit.author)} · {_esc(history.since(commit.time))}</span></span>"
+    )
+
+
+def blame_row(history: History, keys: dict[str, int]) -> str:
+    """
+    The panel's last row: when its code was last changed and by whom, then hidden, a row for each commit its lines come
+    from, which a script shows in its place while a line from that commit is pointed at.
+    """
+
+    def sha(commit: Commit) -> str:
+        short = f"<code>{_esc(commit.short)}</code>"
+        if not commit.url:
+            return f'<span class="csfh">{short}</span>'
+        return (
+            f'<a class="csfh" href="{_esc(commit.url)}" target="_blank" rel="noopener" title="The commit">{short}</a>'
+        )
+
+    last = history.last
+    if last:
+        day = datetime.fromtimestamp(last.time, timezone.utc).strftime("%Y-%m-%d")
+        said = f'Changed <b title="{day}">{_esc(history.ago(last.time))}</b> by {_esc(last.author)}'
+        if history.commits > 1:
+            people = len(history.authors)
+            said += f" · {history.commits} commits" + (f" by {people} people" if people > 1 else "")
+    else:
+        said = "Not committed yet"
+    if history.uncommitted and last:
+        lines = f"{history.uncommitted} line{'' if history.uncommitted == 1 else 's'}"
+        said += f' · <span class="cnhu">{lines} not committed</span>'
+    rows = [f'<p class="csfs"><span>{said}</span>{sha(last) if last else ""}</p>']
+    commits = {c.sha: c for c in history.lines.values() if c}
+    for found, k in keys.items():
+        commit = commits[found]
+        rows.append(
+            f'<p data-k="{k}" hidden><span><b>{_esc(commit.subject or commit.short)}</b> · {_esc(commit.author)}, '
+            f"{_esc(history.ago(commit.time))}</span>{sha(commit)}</p>"
+        )
+    if history.uncommitted:
+        rows.append('<p data-k="u" hidden><span class="cnhu">Changed since the last commit</span></p>')
+    return f'<div class="csf">{"".join(rows)}</div>'

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 blame_keys, blame_mark, blame_row, history_html
 from .brands import AWS_LOGOS, SERVICE_LOGOS, fills, logo, small_logo
 from .editor import editor_name, open_at
 from .style import _ROOT
@@ -1130,6 +1131,18 @@ _G_PANEL_KINDS = {
 }
 
 
+_G_GEAR = (  # the panel's settings
+    '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" '
+    'stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/>'
+    '<path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21'
+    "a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 "
+    "1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1"
+    "a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1"
+    'a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/>'
+    "</svg>"
+)
+
+
 def _g_panel_id(n: GraphNode) -> str:
     return f"cn-code-{n.id}"
 
@@ -1145,9 +1158,12 @@ def _g_panel(n: GraphNode, lines_of: Callable[[str], list[str]], editor: str = "
     """
     A box's code, in a panel that slides in from the right when the box is clicked (its id, panel or the box's own, is
     the link's target, so it's CSS's :target that opens it): what the box is, then each place it's about with its
-    lines numbered, the lines worth pointing at lit. '' when none of its code is in the files read.
+    lines numbered, the lines worth pointing at lit. A function's lines each say who changed them last and when, and
+    its last row what git says about it, when the folder is in git. '' when none of its code is in the files read.
     """
-    shown, lit_any = [], False
+    history = n.history if n.history and n.history.lines else None
+    keys = blame_keys(history) if history else {}
+    places = []  # (file, first line, last line, lines left out, the editor's link, its rows)
     for span in n.code[:_G_PANEL_SPANS]:
         lines = lines_of(span.file)
         start, end = max(1, span.start), min(len(lines), span.end)
@@ -1162,47 +1178,66 @@ def _g_panel(n: GraphNode, lines_of: Callable[[str], list[str]], editor: str = "
             continue
         more = end - start + 1 - _G_PANEL_LINES
         end = min(end, start + _G_PANEL_LINES - 1)
-        lit_any |= any(start <= k <= end for k in span.lit)
-        rows = "".join(
-            f'<span class="sl{" lit" if k in span.lit else ""}"><span class="sn">{k}</span>{lines[k - 1]}</span>'
-            for k in range(start, end + 1)
-        )
-        where = f"line {start}" if start == end else f"lines {start}–{end}"
-        href = open_at(editor, span.file, min(span.lit, default=start))
-        link = (
-            f' <a class="ced" href="{_esc(href)}" title="Open it in {_esc(editor_name(editor))}">open ↗</a>'
-            if href
-            else ""
-        )
+        rows, above = [], ""
+        for k in range(start, end + 1):
+            mark = ""
+            if history:
+                commit = history.lines.get(k)
+                said = commit.sha if commit else "u" if k in history.lines else ""  # the commit, to say it once a run
+                mark = blame_mark(history, k, keys, bool(said) and said == above)
+                above = said
+            rows.append(
+                f'<span class="sl{" lit" if k in span.lit else ""}">{mark}<span class="sn">{k}</span>'
+                f'<span class="sc">{lines[k - 1]}</span></span>'
+            )
+        places.append((span.file, start, end, more, open_at(editor, span.file, min(span.lit, default=start)), rows))
+    if not places:
+        return ""
+
+    def opens(href: str) -> str:
+        return f'<a class="ced" href="{_esc(href)}">Open in {_esc(editor_name(editor))}</a>' if href else ""
+
+    shown = []
+    for file, start, end, more, href, rows in places:
+        if len(places) > 1:  # one place is in the panel's head
+            where = f"line {start}" if start == end else f"lines {start}–{end}"
+            shown.append(f'<div class="csw">{_esc(file)} <span>{where}</span>{opens(href)}</div>')
         shown.append(
-            f'<div class="csw">{_esc(span.file)} <span>{where}</span>{link}</div>'
-            f'<pre class="csc">{rows}</pre>'
+            f'<pre class="csc{" blame" if history else ""}">{"".join(rows)}</pre>'
             + (f'<div class="csm">+{_plural(more, "more line")}</div>' if more > 0 else "")
         )
-    if not shown:
-        return ""
     rest = len(n.code) - _G_PANEL_SPANS
     if rest > 0:
         shown.append(f'<div class="csm">+{_plural(rest, "more place")}: the tables below list them all</div>')
-    said = "".join(  # not the calls this graph leaves out: a function's panel is the same in every graph it's in
-        f'<p class="csd">{_prose(line)}</p>'
-        for line in (n.tip or "").split("\n")
-        if line and not (n.more and line.startswith("It calls ") and "the graph leaves out" in line)
-    )
-    if lit_any:
-        said += (
-            '<p class="csd csl">The lit lines are where it calls, reads or sends what its arrows show.</p>'
-            if n.kind in ("handler", "function", "start")
-            else '<p class="csd csl">The lit lines are where the code uses it.</p>'
+    mono = n.kind in ("handler", "function")
+    said = []
+    for line in (n.tip or "").split("\n"):
+        if not line or (n.more and line.startswith("It calls ") and "the graph leaves out" in line):
+            continue  # not the calls this graph leaves out: a function's panel is the same in every graph it's in
+        if mono and not said:  # 'name(args) in file, 3 lines: its doc': its def is the code's first line
+            head = re.fullmatch(r".+? in .+?, \d+ lines?(?:: (.*))?", line)
+            if head:
+                line = head.group(1) or ""
+        if line:
+            said.append(f'<p class="csd">{_prose(line)}</p>')
+    about = [_esc(_G_PANEL_KINDS.get(n.kind, n.kind))] + ([_esc(n.sub)] if n.sub else [])
+    if len(places) == 1 and places[0][4]:
+        about.append(opens(places[0][4]))
+    key = panel or _g_panel_id(n)
+    opens_bar = bar = gear = ""
+    if history:  # its settings: a bar under its head that the gear opens, the checkbox before it so CSS can
+        opens_bar = f'<input type="checkbox" class="cso" id="{_esc(key)}-set" aria-label="Settings">'
+        gear = f'<label class="csx csgr" for="{_esc(key)}-set" title="Settings">{_G_GEAR}</label>'
+        bar = (
+            '<div class="csob"><label><input type="checkbox" class="csg" checked> '
+            "Who changed each line, from git</label></div>"
         )
-    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)}">'
-        f'<div class="csh"><div class="cst"><span class="csk">{_esc(_G_PANEL_KINDS.get(n.kind, n.kind))}</span>'
-        f'<b class="csn{mono}">{_esc(n.label)}</b>'
-        + (f'<span class="css">{_esc(n.sub)}</span>' if n.sub else "")
-        + '</div><a class="csx" href="#cn-closed" aria-label="Close" title="Close">×</a></div>'
-        f"{said}{''.join(shown)}</aside>"
+        f'<aside class="cside" id="{_esc(key)}" aria-label="{_esc("The code of " + n.label)}">{opens_bar}'
+        f'<div class="csh"><div class="cst"><b class="csn{" mono" if mono else ""}">{_esc(n.label)}</b>'
+        f'<span class="css">{" · ".join(about)}</span></div>{gear}'
+        f'<a class="csx" href="#cn-closed" aria-label="Close" title="Close">×</a></div>{bar}'
+        f"{''.join(said)}{''.join(shown)}{blame_row(history, keys) if history else ''}</aside>"
     )
 
 
@@ -1300,6 +1335,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 +1453,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 +1463,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 +1479,118 @@ _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(); });
+  // A function's code: pointing at a line puts the commit it comes from in its panel's last row, in place of what git
+  // says about all of it.
+  // Its settings, one for every panel: turning git off in one turns it off in all, and the page remembers it.
+  const blame = (on) => document.querySelectorAll(".csg").forEach((box) => { box.checked = on; });
+  try { if (localStorage.getItem("code-node.blame") === "off") blame(false); } catch (e) {}
+  document.addEventListener("change", (e) => {
+    if (!e.target.matches(".csg")) return;
+    blame(e.target.checked);
+    try { localStorage.setItem("code-node.blame", e.target.checked ? "on" : "off"); } catch (e) {}
+  });
+  let blamed = "";
+  document.addEventListener("mouseover", (e) => {
+    const mark = e.target.closest(".cside .sl")?.querySelector(".sb[data-k]");
+    const panel = mark && mark.closest(".cside"), key = mark ? mark.dataset.k : "";
+    const row = (panel || document).querySelector(".csf");
+    if (key + (panel && panel.id) === blamed) return;
+    document.querySelectorAll(".csf p").forEach((p) => {
+      p.hidden = p.closest(".csf") === row && key ? p.dataset.k !== key : p.hasAttribute("data-k");
+    });
+    blamed = key + (panel && panel.id);
+  });
+  // 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 +1755,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 +1832,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 +1847,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/report/style.py

@@ -31,7 +31,7 @@ FAVICON_LINK = f'<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,
 _ROOT = "cnd"  # the class around each page's HTML: its stylesheet's rules are scoped to it
 
 _EXTRA_CSS = """\
-.cnd{--mono:"Cascadia Mono","Cascadia Code",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}
+.cnd{--mono:"Cascadia Code","Cascadia Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}
 .cnd code,.cnd table.t td.tree{font-family:var(--mono)}
 .cnd .wire{display:grid;grid-template-columns:minmax(0,1fr) 26px minmax(0,.9fr) 26px minmax(0,1fr);align-items:center;margin:6px 0 10px;max-width:980px}
 .cnd .wire .wc{display:flex;flex-direction:column;gap:6px;min-width:0}
@@ -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)}
@@ -265,26 +280,64 @@ _EXTRA_CSS = """\
 .cnd .cg .ctt .ctw li{margin:4px 0 0;overflow-wrap:anywhere}
 .cnd .cside{position:fixed;top:0;right:0;bottom:0;z-index:30;box-sizing:border-box;width:min(660px,94vw);overflow:auto;padding:0 20px 28px;background:var(--jp-layout-color0,var(--vscode-editor-background,Canvas));color:CanvasText;border-left:1px solid rgba(127,127,127,.3);box-shadow:-14px 0 36px rgba(15,23,42,.14);transform:translateX(104%);visibility:hidden;transition:transform .22s ease,visibility 0s linear .22s}
 .cnd .cside:target{transform:none;visibility:visible;transition:transform .22s ease}
-.cnd .cside .csh{display:flex;align-items:flex-start;gap:12px;position:sticky;top:0;z-index:1;margin:0 -20px 12px;padding:16px 20px 12px;background:var(--jp-layout-color0,var(--vscode-editor-background,Canvas));border-bottom:1px solid rgba(127,127,127,.2)}
+.cnd .cside .csh{display:flex;align-items:flex-start;gap:12px;position:sticky;top:0;z-index:1;margin:0 -20px 12px;padding:18px 18px 16px 20px;background:var(--jp-layout-color0,var(--vscode-editor-background,Canvas));border-bottom:1px solid rgba(127,127,127,.2)}
 .cnd .cside .cst{flex:1;min-width:0}
-.cnd .cside .csk{display:block;font-size:11px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;opacity:.55}
-.cnd .cside .csn{display:block;font-size:17px;font-weight:650;overflow-wrap:anywhere;margin:2px 0 1px}
-.cnd .cside .csn.mono{font:650 16px var(--mono)}
-.cnd .cside .css{font-size:12.5px;opacity:.65;overflow-wrap:anywhere}
-.cnd .cside a.csx{flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;font-size:22px;line-height:1;color:inherit;text-decoration:none;opacity:.6}
-.cnd .cside a.csx:hover,.cnd .cside a.csx:focus-visible{opacity:1;background:rgba(127,127,127,.14)}
+.cnd .cside .csn{display:block;font-size:17px;font-weight:650;overflow-wrap:anywhere;margin:0 0 3px}
+.cnd .cside .csn.mono{font:600 17px var(--mono)}
+.cnd .cside .css{display:block;font-size:12.5px;overflow-wrap:anywhere;color:color-mix(in srgb,currentColor 65%,transparent)}
+.cnd .cside .csx{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin:-4px -4px 0 0;border-radius:7px;font-size:20px;line-height:1;color:inherit;text-decoration:none;opacity:.5}
+.cnd .cside .csx:hover,.cnd .cside .csx:focus-visible{opacity:1;background:rgba(127,127,127,.14)}
+.cnd .cside .cso{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
+.cnd .cside label.csgr{cursor:pointer;margin-right:-8px}
+.cnd .cside .cso:focus-visible+.csh label.csgr{opacity:1;outline:2px solid light-dark(#2563eb,#6ea8fe)}
+.cnd .cside .cso:checked+.csh label.csgr{opacity:1;background:rgba(127,127,127,.14)}
+.cnd .cside .csob{display:none;align-items:center;gap:18px;flex-wrap:wrap;margin:-12px -20px 12px;padding:9px 20px;border-bottom:1px solid rgba(127,127,127,.2);background:rgba(127,127,127,.05);font-size:12.5px}
+.cnd .cside .cso:checked~.csob{display:flex}
+.cnd .cside .csob label{display:inline-flex;align-items:center;gap:7px;cursor:pointer}
+.cnd .cside .csob input{margin:0;accent-color:light-dark(#2563eb,#6ea8fe)}
+.cnd .cside:has(.csg:not(:checked)) :is(.sb,.csf){display:none}
+.cnd .cside:has(.csg:not(:checked)) .blame .sn{padding-left:20px}
+.cnd .cside:has(.csg:not(:checked)) .blame .sl:hover>*{background:none}
+.cnd .cside:has(.csg:not(:checked)) .blame .sl.lit>:is(.sn,.sc){background:rgba(245,158,11,.14)}
 .cnd .cside .csd{font-size:13px;line-height:1.5;margin:0 0 6px;opacity:.82;overflow-wrap:anywhere}
-.cnd .cside .csl{font-size:12px;opacity:.6}
 .cnd .cside .csw{font:12px var(--mono);margin:16px 0 5px;overflow-wrap:anywhere}
 .cnd .cside .csw span{opacity:.55}
-.cnd .cside .ced{margin-left:6px;font-family:inherit;color:light-dark(#2563eb,#60a5fa);text-decoration:none}
+.cnd .cside .csw .ced{margin-left:8px;font-family:inherit}
+.cnd .cside .ced{color:light-dark(#2563eb,#6ea8fe);text-decoration:none}
 .cnd .cside .ced:hover{text-decoration:underline}
-.cnd .cside pre.csc{margin:0;padding:8px 0;border:1px solid rgba(127,127,127,.22);border-radius:8px;overflow:auto;background:rgba(127,127,127,.04);font:12.5px/1.6 var(--mono)}
-.cnd .cside .sl{display:block;width:max-content;min-width:100%;box-sizing:border-box;padding-right:14px;white-space:pre}
-.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 pre.csc{margin:12px -20px 0;padding:6px 0 10px;border:0;border-block:1px solid rgba(127,127,127,.2);border-radius:0;max-height:none;overflow:auto;font:12.5px/1.7 var(--mono)}
+.cnd .cside :is(.csh,.csob)+pre.csc{margin-top:-12px;border-top:0}
+.cnd .cside .sl{display:flex;width:max-content;min-width:100%}
+.cnd .cside .sn{flex:none;width:2.4em;padding:0 16px 0 20px;text-align:right;opacity:.42;user-select:none;-webkit-user-select:none}
+.cnd .cside .blame .sn{width:2.4em;padding-left:0}
+.cnd .cside .sc{flex:1;padding-right:20px;white-space:pre}
+.cnd .cside .sl.lit>:is(.sn,.sc){background:rgba(245,158,11,.14)}
+.cnd .cside .sb{flex:none;display:flex;align-items:center;gap:10px;width:112px;box-sizing:border-box;padding-left:20px;font:11.5px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;white-space:nowrap;user-select:none;-webkit-user-select:none}
+.cnd .cside .sb span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;opacity:.5}
+.cnd .cside .sb::after{content:"";flex:none;width:2px;align-self:stretch;margin-right:2px;background:var(--age)}
+.cnd .cside .sb:not(.same)::after{margin-top:3px}
+.cnd .cside .sl:first-child .sb::after{margin-top:0}
+.cnd .cside .sb.same span{visibility:hidden}
+.cnd .cside .sb.a0{--age:color-mix(in srgb,light-dark(#3b6fe0,#6ea8fe) 18%,transparent)}
+.cnd .cside .sb.a1{--age:color-mix(in srgb,light-dark(#3b6fe0,#6ea8fe) 45%,transparent)}
+.cnd .cside .sb.a2{--age:color-mix(in srgb,light-dark(#3b6fe0,#6ea8fe) 72%,transparent)}
+.cnd .cside .sb.a3{--age:light-dark(#3b6fe0,#6ea8fe)}
+.cnd .cside .sb.au{--age:light-dark(#c2680c,#f2b441)}
+.cnd .cside .sb.au span{color:light-dark(#c2680c,#f2b441);opacity:1}
+.cnd .cside .blame .sl:hover>*{background:rgba(127,127,127,.09)}
+.cnd .cside .blame .sl.lit:hover>:is(.sn,.sc){background:rgba(245,158,11,.22)}
+.cnd .cside .blame .sl:hover .sb span{visibility:visible;opacity:.9}
 .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)}}
+.cnd .cside .csf{position:sticky;bottom:-28px;z-index:1;margin:0 -20px -28px;padding:11px 20px;background:var(--jp-layout-color0,var(--vscode-editor-background,Canvas));font-size:12.5px}
+.cnd .cside .csf p{margin:0}
+.cnd .cside .csf p:not([hidden]){display:flex;align-items:baseline;gap:12px}
+.cnd .cside .csf p>span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:color-mix(in srgb,currentColor 70%,transparent)}
+.cnd .cside .csf b{font-weight:600}
+.cnd .cside .csf .csfh{flex:none;color:light-dark(#2563eb,#6ea8fe);text-decoration:none}
+.cnd .cside .csf a.csfh:hover{text-decoration:underline}
+.cnd .cside .csf span.csfh{color:inherit;opacity:.6}
+.cnd .cside .csf code{font:12px var(--mono);background:none;padding:0}
+.cnd .cside .cnhu{color:light-dark(#b45309,#fbbf24)}
 @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 +425,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}

code_node/report/walk.py

@@ -27,6 +27,7 @@ from ..kit.text import _esc
 from ..analysis.findings import _short_name
 from ..analysis.model import CodeFunction, CodeStep
 from ..analysis.syntax import _a
+from .changes import history_html
 from .editor import editor_name, open_at
 from .outline import _NOTE_TIPS, _Outline, _chips_html, _outline_lines
 from .style import _ROOT
@@ -320,9 +321,12 @@ def _headline(stop: _Stop) -> tuple[str, str]:
     return f"Runs {_code(step.code)}", ""
 
 
-def _says(stops: list[_Stop], i: int, first: dict[str, int], docs: dict[str, str], over: bool) -> str:
+def _says(
+    stops: list[_Stop], i: int, first: dict[str, int], docs: dict[str, str], over: bool, changes: dict[str, str]
+) -> str:
     """
-    What the stop's line does, in a sentence or two (HTML), under its headline. over: it has a Skip call button.
+    What the stop's line does, in a sentence or two (HTML), under its headline. over: it has a Skip call button;
+    changes: what git says about each function, as HTML.
     """
     stop = stops[i]
     step = stop.step
@@ -335,6 +339,7 @@ def _says(stops: list[_Stop], i: int, first: dict[str, int], docs: dict[str, str
             said.append(f"Called from {_code(stop.stack[-2][0])}, line {stops[stop.caller].step.line}{when}.")
         doc = docs.get(step.name, "")
         out = "".join(f"<p>{line}</p>" for line in said) + (f'<p class="wdoc">{_esc(doc)}</p>' if doc else "")
+        out += changes.get(step.name, "")
         if step.seen and step.name in first:
             out += (
                 f'<p>Its steps are shown where it\'s first called: <label class="wjump" for="cw{first[step.name]}">'
@@ -414,7 +419,14 @@ def _button(target: int | None, text: str, css: str = "", tip: str = "") -> str:
     return f'<label class="{css}" for="cw{target}"{title}>{text}</label>'
 
 
-def _card_html(stops: list[_Stop], i: int, first: dict[str, int], docs: dict[str, str], editor: str = "") -> str:
+def _card_html(
+    stops: list[_Stop],
+    i: int,
+    first: dict[str, int],
+    docs: dict[str, str],
+    editor: str = "",
+    changes: dict[str, str] | None = None,
+) -> str:
     """
     The current stop's card: Back and Next (and Skip call and Finish, past what a line calls), what the line does in
     plain words, the calls it's inside (each a link back to its start), and what it touches.
@@ -471,7 +483,7 @@ def _card_html(stops: list[_Stop], i: int, first: dict[str, int], docs: dict[str
         f'<div class="wc"><div class="wnav">{"".join(nav)}</div>'
         f'<div class="whead">{headline}</div>'
         f'<div class="wstk"><span class="win">In</span>{where}{line}</div>'
-        f'<div class="wsay">{_says(stops, i, first, docs, over is not None)}{_facts_html(stop.step, said)}</div>'
+        f'<div class="wsay">{_says(stops, i, first, docs, over is not None, changes or {})}{_facts_html(stop.step, said)}</div>'
         + (f'<div class="wthen">{_esc(then)}</div>' if then else "")
         + "</div>"
     )
@@ -600,6 +612,7 @@ def _walk_html(block: _Walk, report: _Report) -> str:
         if stop.step.kind == "def" and not stop.step.seen:
             first.setdefault(stop.step.name, i)
     docs = {f.name: f.doc for f in block.functions if f.doc}
+    changes = {f.name: history_html(f.history) for f in block.functions if f.history}
     drawn, rows_of = [], []
     for k, frame in enumerate(frames):
         if frame.file in block.sources and frame.file not in highlighted:
@@ -625,7 +638,9 @@ def _walk_html(block: _Walk, report: _Report) -> str:
         if not opened or opened[-1] != stop.frame:  # into a call
             out.append('<div class="wfn">')
             opened.append(stop.frame)
-        out.append(_item_html(stops, i, _card_html(stops, i, first, docs, block.editor), under[i], tuple(above[i])))
+        out.append(
+            _item_html(stops, i, _card_html(stops, i, first, docs, block.editor, changes), under[i], tuple(above[i]))
+        )
         if under[i]:  # its fold hides the steps under it, beside it or in the boxes of what it calls
             report.rules.add(f".{root} #cx{i}:checked~.wu{i},.{root} #cx{i}:checked~* .wu{i}{{display:none}}")
         at = rows_of[stop.frame].get(stop.lit)

{code_node_graph-0.4.0.dist-info → code_node_graph-0.6.0.dist-info}/METADATA

@@ -1,6 +1,6 @@
 Metadata-Version: 2.5
 Name: code-node-graph
-Version: 0.4.0
+Version: 0.6.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.dist-info → code_node_graph-0.6.0.dist-info}/RECORD

@@ -1,15 +1,16 @@
-code_node/__init__.py,sha256=hzITZuWbNbw6NyeHwo4MC9MApmpFcoJwdY43MsPrPQw,1106
+code_node/__init__.py,sha256=XIYIBqbSGZWBP2j54pxOb7oY5thbAHRJwOliWlBU8fs,1106
 code_node/__main__.py,sha256=0W2bmerF1S96rjlTNJZKVzO4FvVhN6ENzAl451A08sQ,101
-code_node/cli.py,sha256=GI0vZY1t4Pf7qtZI2coTpWZi-ulQEWNREDJPkTtmxG0,12302
-code_node/pages.py,sha256=2UOrHUz3G_vAjPO89phJxhF4652FysVLgrLtJ-Iw6p4,3234
+code_node/cli.py,sha256=QaieNNhj6_mQTK653jeAxnraZ4hn6CiKa5ju2gVRGfY,12510
+code_node/history.py,sha256=YaaEQywgLZ2w2XvtQrQOWg5yBKDQuA5aT030BxQWfUA,6103
+code_node/pages.py,sha256=BweJffESNV-cIKET5pGVp_9edFkGyqhePKIObz0zgi4,3484
 code_node/project.py,sha256=1s6pBwQ-hiEf9v0YzE8b6TETT9E0XBnzQPWGjYDJsnw,16361
 code_node/serve.py,sha256=4yvzDaaL1XpsVinLmvlm1W2bM6WJRGe5GI8wG3XuHic,11456
 code_node/analysis/__init__.py,sha256=-KM77rYv9pPutUG29DsU8ZkAUtr2AU9RsqrDPFAjLoQ,103
 code_node/analysis/aws_model.py,sha256=R2sHppdu9PmlsOGDXf6_6JHumbA5PqbiJ0JgnyB9Xcs,6648
 code_node/analysis/findings.py,sha256=S1-VQ1iNi1PkC-2eigNzbJrULa_2Y46avmtwAlV9iqU,19010
-code_node/analysis/graph.py,sha256=4FCzBo3G0XOkXV-zkshFxaoCalqWqbJfGDGDe-pg8S8,39373
+code_node/analysis/graph.py,sha256=loAGXJI0bTMr8s5q6yCm613XOQd1MvE8gHOsIg-NVuo,39503
 code_node/analysis/mapping.py,sha256=6wYkUqaQdM-Vio8XGf_Lw8N9dP_90YtbUxauH4IQ8Tg,5102
-code_node/analysis/model.py,sha256=ORGT6BEQFonQjdRGPEbuGVGoyyK54nTEA4Th-7rEGvU,13614
+code_node/analysis/model.py,sha256=_HxrCZHl-deFOX3LihfacLpgeNgRqtSYv2qA_TrKyVA,15796
 code_node/analysis/reader.py,sha256=QIqVN2RV477ON69_5YVLXhfnfL3seS8kvP7krpmZPNI,89304
 code_node/analysis/syntax.py,sha256=wyeUr68IDjGp3i9HYYYzcjw8-CvL6a6mmZdWz5LY8j8,7952
 code_node/analysis/terms.py,sha256=ec0f51DkfDRixJSRX1hnyq9Hr5aLRhXuBRHlNJBlZD8,13782
@@ -33,12 +34,13 @@ code_node/platforms/web.py,sha256=lNjwkz3D0zJkFcJhqD_ShcfTj4uF8miLNqKMtXu-t1U,11
 code_node/report/__init__.py,sha256=l3dfZFbLEo-7Fl7O_Rk2lvyAElQnyugSZPI_PzHrG_Q,76
 code_node/report/brands.py,sha256=n32BfFz2d02ZVUHvy8L4wPHBtiD_1FCTKzdR4NyvU88,8372
 code_node/report/build.py,sha256=xnPK_6FMTSV2nyS-N6KcApdq3ZNBA_0Hy8AUZDVIea0,4884
+code_node/report/changes.py,sha256=ciD322LsDvdJlhyNOwXKC5AuKddnpfobL7I9mrpF3XE,5481
 code_node/report/editor.py,sha256=TRUX6BTB-oe-m5Vf3xM9PppnC99sCLL4PObXkYAGKoU,1466
-code_node/report/graph.py,sha256=1SEMabLWWL9E0kwhKLYZhRFj0pRzLk4eDpHfLsxuuiQ,75162
+code_node/report/graph.py,sha256=tvyhTm2iUlzJlwx3NIyVdVFsX-m66eRxuhvcVvZlwx4,84223
 code_node/report/outline.py,sha256=3RRxU4FMUZKBVjFDsscKZkvDlj_W4ZeW4DwUztg4wd0,8539
-code_node/report/style.py,sha256=YTQXlWjsnVfAZBhTr_Ot0PjdyLRSW83WDR3F02YBm4E,36833
+code_node/report/style.py,sha256=eZud8ieCCBNZu_pELY9zJgavZUaOzypOR4GCrMP6m9w,41825
 code_node/report/tabs.py,sha256=K2XR16owfgEL1kfux61PI9nBcRsgjQurTx1ptMM5Mac,3016
-code_node/report/walk.py,sha256=LWJDGJ3efF0fPWlMO4G4HBQqnNVn2RHXgLeuLrC-WnA,29466
+code_node/report/walk.py,sha256=xPQCWSfE8XnV5yMzSw5MzXH88-xRgHIalbiO2OHz9Ao,29828
 code_node/report/logos/README.md,sha256=8Evw8eApl_56QJrwY7LAtGgJMZE0mp0-HIpRz9bu1ME,613
 code_node/report/logos/anthropic-icon.svg,sha256=-_25zx86lfDTm-ksVXkLE4uQ_ldzLbTd3U0z-wjT-JA,302
 code_node/report/logos/aws-amplify.svg,sha256=62WXM0XCn4WrQYWcVZFz4ln62xidiqF8eO4ELlgO8hg,531
@@ -171,8 +173,8 @@ code_node/report/logos/small/aws-systems-manager.svg,sha256=9VzzFdTjaRZO9ulR8Ulp
 code_node/report/logos/small/aws-timestream.svg,sha256=yKdKIj7pbooFqDKClEQxW9h7dYV5mnDn0RCHnLUDf8Q,639
 code_node/report/logos/small/aws-waf.svg,sha256=l9ZzBZAl2g8bK1-m6A50ga37l5g1t-9Mj70bxWDykWE,591
 code_node/report/logos/small/aws-xray.svg,sha256=VKg_QtKGZKDCbZvKBRDn7eReuNVbJpduBUVV8MQrZZU,591
-code_node_graph-0.4.0.dist-info/METADATA,sha256=7tOOzTXKx0lvUJUZRXK4KfuWwvi_lz3RDPhnpnTn3aE,7619
-code_node_graph-0.4.0.dist-info/WHEEL,sha256=W3fkpkm7-wf9vBI5Z-7s0eWkeM-spu78I8Neb98DeEg,87
-code_node_graph-0.4.0.dist-info/entry_points.txt,sha256=eEArp-uk7ZzODIWr6l62rI0-mIA0-mLDaqJEyKikPJw,49
-code_node_graph-0.4.0.dist-info/licenses/LICENSE,sha256=xx0jnfkXJvxRnG63LTGOxlggYnIysveWIZ6H3PNdCrQ,11357
-code_node_graph-0.4.0.dist-info/RECORD,,
+code_node_graph-0.6.0.dist-info/METADATA,sha256=EEXXZjyeR0kuMOiCO8S01_uDapt0en_DRO0Br1sDlsQ,7725
+code_node_graph-0.6.0.dist-info/WHEEL,sha256=W3fkpkm7-wf9vBI5Z-7s0eWkeM-spu78I8Neb98DeEg,87
+code_node_graph-0.6.0.dist-info/entry_points.txt,sha256=eEArp-uk7ZzODIWr6l62rI0-mIA0-mLDaqJEyKikPJw,49
+code_node_graph-0.6.0.dist-info/licenses/LICENSE,sha256=xx0jnfkXJvxRnG63LTGOxlggYnIysveWIZ6H3PNdCrQ,11357
+code_node_graph-0.6.0.dist-info/RECORD,,