code-node-graph 0.1.0__py3-none-any.whl → 0.3.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.1.0"
+__version__ = "0.3.0"
 
 __all__ = [
     "CodeGraph",

code_node/report/graph.py

@@ -13,8 +13,8 @@ from typing import Any, Callable
 
 from ..kit.blocks import _Report, _draws
 from ..kit.fmt import _plural
-from ..kit.highlight import _python_lines
-from ..kit.render import _prose
+from ..kit.highlight import _python_html, _python_lines
+from ..kit.render import _CALL_RE, _prose
 from ..kit.text import _esc
 
 from ..analysis.graph import CodeGraph, GraphEdge, GraphNode
@@ -1081,7 +1081,7 @@ def _node_svg(
         )
     classes = " ".join(["cn", f"k-{n.kind}", f"n-{n.id}", *(f"a-{m}" for m in neighbours)]) + (" warn" if warn else "")
     return (
-        f'<g class="{_esc(classes)}" transform="translate({x:.1f},{y:.1f})"><title>{_esc(n.tip or n.label)}</title>'
+        f'<g class="{_esc(classes)}" transform="translate({x:.1f},{y:.1f})">'
         f'<rect class="bg" width="{w:.0f}" height="{h:.0f}" rx="11"/>'
         f'<rect class="fg" x=".5" y=".5" width="{w - 1:.0f}" height="{h - 1:.0f}" rx="10.5"/>{"".join(parts)}</g>'
     )
@@ -1175,6 +1175,153 @@ def _g_panel(n: GraphNode, lines_of: Callable[[str], list[str]], editor: str = "
     )
 
 
+_G_TIP_W = 420  # a box's hover card, wide
+
+_G_TIP_SIGNATURE = 6  # lines of a def its hover card shows, at most
+
+_G_TIP_WARNING = "A warning is about it: "
+
+# a name in the card's sentences worth setting as code: a dotted or keyed path (Records[].s3.bucket.name,
+# book:{book_id}, s3:GetObject, orders/handler.py) or a variable in capitals (DB_HOST)
+_G_CODE_RE = re.compile(
+    r"(?<![\w.\-/])([A-Za-z_][\w\-]*(?:[.:/]+[\w{}\-]+|\[\]|\{\w*\})+|[A-Z][A-Z0-9]*_[A-Z0-9_]*[A-Z0-9])(?![\w{])"
+)
+
+
+def _g_tip_text(text: str) -> str:
+    """
+    One of the card's sentences as HTML, its calls coloured as Python and its names set as code, every piece escaped.
+    """
+    out = []
+    for i, piece in enumerate(_CALL_RE.split(text)):
+        if i % 2:
+            out.append(f'<code class="ctk">{_python_html(piece)}</code>')
+            continue
+        for k, part in enumerate(_G_CODE_RE.split(piece)):
+            out.append(f'<code class="ctk ctn">{_esc(part)}</code>' if k % 2 else _esc(part))
+    return "".join(out)
+
+
+def _g_tip_item(item: str) -> str:
+    """
+    One thing a service box lists, for its card: 'PutItem (dynamodb:PutItem)' as the operation in code and what it
+    needs beside it.
+    """
+    m = re.fullmatch(r"(.+?) \((.+)\)", item)
+    if not m:
+        return f'<li><code class="ctk ctn">{_esc(item)}</code></li>'
+    return (
+        f'<li><code class="ctk ctn">{_esc(m.group(1))}</code> <span class="ctm">{_g_tip_text(m.group(2))}</span></li>'
+    )
+
+
+def _g_tip_signature(n: GraphNode, lines_of: Callable[[str], list[str]]) -> list[str]:
+    """
+    A function's def as it's written, in colour: its decorators and the lines up to the colon that opens its body.
+    [] when its file wasn't read.
+    """
+    if not n.code:
+        return []
+    span = n.code[0]
+    lines = lines_of(span.file)
+    if not lines or span.start > len(lines):
+        return []
+    start = span.start
+    while start > 1 and lines[start - 2].lstrip().startswith("@"):
+        start -= 1
+    shown = []
+    for k in range(start, min(len(lines), span.end, start + _G_TIP_SIGNATURE - 1) + 1):
+        shown.append(lines[k - 1])
+        if k >= span.start and re.sub(r"<[^>]*>", "", lines[k - 1]).rstrip().endswith(":"):
+            break
+    indent = min((len(line) - len(line.lstrip(" ")) for line in shown if line.strip()), default=0)
+    return [line[indent:] for line in shown]
+
+
+def _g_tip(n: GraphNode, lines_of: Callable[[str], list[str]], opens: bool) -> tuple[str, float]:
+    """
+    What a box says on hover, as a card: what kind of box it is and its name, a function's def in colour and its
+    docstring, then the rest of its words with the code in them set as code, its warnings apart, and when it has a
+    panel (opens), that a click shows its code. With how tall it is likely to be, to pick whether it goes under the
+    box or over it.
+    """
+    said = [line for line in (n.tip or n.label).split("\n") if line]
+    warnings = [w for line in said if line.startswith(_G_TIP_WARNING) for w in line[len(_G_TIP_WARNING) :].split("; ")]
+    said = [line for line in said if not line.startswith(_G_TIP_WARNING)]
+    mono = n.kind in ("handler", "function")
+    body, tall, sub = [], 80.0 + (20 if n.sub else 0), n.sub
+    if mono and said and _CALL_RE.match(said[0]) and " in " in said[0]:  # 'name(args) in file, 3 lines: its doc'
+        head = said.pop(0)
+        signature = _g_tip_signature(n, lines_of) or [_python_html(head.split(" in ", 1)[0])]
+        body.append(f'<pre class="ctc">{chr(10).join(signature)}</pre>')
+        tall += 21 * len(signature) + 34
+        lines = re.search(r", (\d+ lines?)", head)
+        sub = f"{n.sub} · {lines.group(1)}" if lines and n.sub else sub
+        if n.lines and n.lines[0]:
+            body.append(f'<p class="ctd">{_g_tip_text(n.lines[0])}</p>')
+            tall += 23 * math.ceil(len(n.lines[0]) / 42) + 10
+    for line in said:
+        lead, _, rest = line.partition(": ")
+        if rest and lead == n.label:  # 'S3: GetObject (s3:GetObject), PutObject (s3:PutObject)': a list
+            items = rest.split(", ")
+            body.append(f'<ul class="ctl">{"".join(_g_tip_item(item) for item in items)}</ul>')
+            tall += 30 * len(items) + 8
+        else:
+            body.append(f'<p class="ctp">{_g_tip_text(line)}</p>')
+            tall += 23 * math.ceil(len(line) / 42) + 10
+    if warnings:
+        body.append(
+            '<div class="ctw"><b>Warning</b><ul>'
+            + "".join(f"<li>{_g_tip_text(w)}</li>" for w in warnings)
+            + "</ul></div>"
+        )
+        tall += 50 + sum(23 * math.ceil(len(w) / 36) + 4 for w in warnings)
+    kind = _G_PANEL_KINDS.get(n.kind, n.kind)
+    name = _python_html(n.label) if mono else _esc(n.label)
+    card = (
+        f'<div class="ctt k-{_esc(n.kind)}{" warn" if warnings else ""}"><div class="cth">'
+        f'<span class="ctkd">{_esc(kind)}</span><b class="ctn{" mono" if mono else ""}">{name}</b>'
+        + (f'<span class="cts{" mono" if mono else ""}">{_esc(sub)}</span>' if sub else "")
+        + f"</div>{''.join(body)}"
+        + ('<div class="cto">Click it to read its code</div>' if opens else "")
+        + "</div>"
+    )
+    return card, tall + (40 if opens else 0)
+
+
+def _g_tip_svg(
+    n: GraphNode,
+    box: tuple[float, float, float, float],
+    width: float,
+    tall: float,
+    lines_of: Callable[[str], list[str]],
+    opens: bool,
+) -> str:
+    """
+    A box's hover card, in the graph so it zooms with it: under the box when it fits there, else over it, else beside
+    it, and inside the graph from left to right. Hidden until the box is pointed at.
+    """
+    card, high = _g_tip(n, lines_of, opens)
+    x, y, w, h = box
+    card_w = min(_G_TIP_W, max(width - 16, 220))
+    left = max(8.0, min(x, width - card_w - 8))
+    below, above = tall - (y + h + 10) - 8, y - 10 - 8
+    if high <= below:
+        top, room, side = y + h + 10, below, "dn"
+    elif high <= above:
+        top, room, side = 8.0, above, "up"
+    else:  # beside the box, as high up as keeps all of it in the graph; over the box only when there's no room beside
+        if width - (x + w + 12) - 8 >= card_w:
+            left = x + w + 12
+        elif x - 12 - 8 >= card_w:
+            left = x - 12 - card_w
+        top, room, side = max(8.0, min(y, tall - high - 8)), high, "dn"
+    return (
+        f'<foreignObject class="ctip tp-{_esc(n.id)} {side}" x="{left:.0f}" y="{top:.0f}" width="{card_w:.0f}" '
+        f'height="{room:.0f}" aria-hidden="true"><div class="ctx">{card}</div></foreignObject>'
+    )
+
+
 def _g_captions(graph: CodeGraph, xs: dict[int, float], widths: dict[int, float], column_of: dict[str, int]) -> str:
     """
     The words over the columns: COMES IN, HANDLER, CALLS, REACHES, each over the columns it covers.
@@ -1256,6 +1403,7 @@ def _graph_html(block: _Graph, report: _Report) -> str:
     for n in graph.nodes:  # pointing at a box leaves only it, its arrows and the boxes they join in sight
         report.rules.add(f".{root} .cg:has(.n-{n.id}:hover) .ce:not(.s-{n.id}):not(.t-{n.id}){{opacity:.06}}")
         report.rules.add(f".{root} .cg:has(.n-{n.id}:hover) .cn:not(.n-{n.id}):not(.a-{n.id}){{opacity:.28}}")
+        report.rules.add(f".{root} .cg:has(.n-{n.id}:hover) .tp-{n.id}{{display:inline}}")
         report.rules.add(
             f".{root} .cg:has(.n-{n.id}:hover) :is(.s-{n.id},.t-{n.id}) .ln{{stroke-width:2.4;stroke-opacity:1}}"
         )
@@ -1307,6 +1455,7 @@ def _graph_html(block: _Graph, report: _Report) -> str:
         for n in graph.nodes
         for box in [_node_svg(cards[n.id], boxes[n.id], list(dict.fromkeys(near[n.id])), access[n.id])]
     )
+    tips = "".join(_g_tip_svg(n, boxes[n.id], width, tall, lines_of, bool(panels.get(n.id))) for n in graph.nodes)
     kinds = {e.kind for e in graph.edges}
     pills = [f'<span class="kp">{_g_swatch(k)}{_esc(word)}</span>' for k, word in _G_LEGEND if k in kinds]
     if any(e.guessed for e in graph.edges):
@@ -1362,7 +1511,7 @@ def _graph_html(block: _Graph, report: _Report) -> str:
         f'{title}<div class="cgw">{switches}<div class="cgb">{bar}<div class="cg">'
         f'<svg viewBox="0 0 {width:.0f} {tall:.0f}" width="{width:.0f}" height="{tall:.0f}" '
         f'style="--w:{width:.0f}px" role="img" aria-label="{_esc(block.title or "How the code fits together")}">'
-        f"{_g_captions(graph, xs, widths, column_of)}{edges}{nodes}{ports}</svg></div>"
+        f"{_g_captions(graph, xs, widths, column_of)}{edges}{nodes}{ports}{tips}</svg></div>"
         f'<div class="cgk">{"".join(pills)}{hidden}{hint}</div></div>{"".join(panels.values())}</div>'
     )
 

code_node/report/style.py

@@ -95,12 +95,12 @@ _EXTRA_CSS = """\
 .cnd .flow .oq{font-style:italic}
 .cnd .flow .os{display:inline-flex;flex-wrap:wrap;gap:3px 5px}
 .cnd .flow .ob{margin-left:22px}
-.cnd :is(.flow,.cside,.walk) .pk{color:var(--jp-mirror-editor-keyword-color,light-dark(#7c3aed,#c792ea))}
-.cnd :is(.flow,.cside,.walk) .pf{color:var(--jp-mirror-editor-def-color,light-dark(#2563eb,#82aaff))}
-.cnd :is(.flow,.cside,.walk) :is(.js,.jk){color:var(--jp-mirror-editor-string-color,light-dark(#047857,#a5d6a7))}
-.cnd :is(.flow,.cside,.walk) :is(.jn,.jl){color:var(--jp-mirror-editor-number-color,light-dark(#c2410c,#f78c6c))}
-.cnd :is(.flow,.cside,.walk) .pa{font-style:italic}
-.cnd :is(.flow,.cside,.walk) .pc{opacity:.6;font-style:italic}
+.cnd :is(.flow,.cside,.walk,.ctip) .pk{color:var(--jp-mirror-editor-keyword-color,light-dark(#7c3aed,#c792ea))}
+.cnd :is(.flow,.cside,.walk,.ctip) .pf{color:var(--jp-mirror-editor-def-color,light-dark(#2563eb,#82aaff))}
+.cnd :is(.flow,.cside,.walk,.ctip) :is(.js,.jk){color:var(--jp-mirror-editor-string-color,light-dark(#047857,#a5d6a7))}
+.cnd :is(.flow,.cside,.walk,.ctip) :is(.jn,.jl){color:var(--jp-mirror-editor-number-color,light-dark(#c2410c,#f78c6c))}
+.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;
  background-image:radial-gradient(circle at 1px 1px,rgba(127,127,127,.3) 1px,transparent 0);background-position:9px 9px}
@@ -221,6 +221,34 @@ _EXTRA_CSS = """\
 .cnd .cgk .kl path{fill:none;stroke:currentColor;stroke-opacity:.8;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
 .cnd .cg a.cl{cursor:pointer;outline:none}
 .cnd .cg a.cl:focus-visible .fg{stroke:light-dark(#2563eb,#60a5fa);stroke-opacity:1;stroke-width:2}
+.cnd .cg .ctip{display:none;overflow:visible;pointer-events:none}
+.cnd .cg .ctip .ctx{display:flex;flex-direction:column;height:100%}
+.cnd .cg .ctip.up .ctx{justify-content:flex-end}
+.cnd .cg .ctt{position:relative;box-sizing:border-box;padding:16px 18px;border:1px solid rgba(127,127,127,.3);border-radius:12px;background:var(--jp-layout-color0,var(--vscode-editor-background,Canvas));color:CanvasText;box-shadow:0 2px 6px rgba(15,23,42,.08),0 14px 34px rgba(15,23,42,.18);font-size:14px;line-height:1.6;text-align:left;animation:cnTip .14s ease-out .18s both}
+@keyframes cnTip{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
+@media (prefers-reduced-motion:reduce){.cnd .cg .ctt{animation:none}}
+.cnd .cg .ctt.k-function,.cnd .cg .ctt.k-handler{--c:light-dark(#2563eb,#82aaff)}
+.cnd .cg .cth{display:flex;flex-direction:column;gap:3px;margin:0 0 14px}
+.cnd .cg .ctkd{font-size:10.5px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--c,currentColor);opacity:.9}
+.cnd .cg .ctt b.ctn{font-size:16px;font-weight:650;overflow-wrap:anywhere}
+.cnd .cg .ctt b.ctn.mono{font:650 15px var(--mono)}
+.cnd .cg .cts{font-size:12.5px;opacity:.65;overflow-wrap:anywhere}
+.cnd .cg .cts.mono{font-family:var(--mono)}
+.cnd .cg .ctt pre.ctc{margin:0 0 12px;padding:10px 12px;border:1px solid rgba(127,127,127,.2);border-radius:8px;background:rgba(127,127,127,.06);font:13px/1.55 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere}
+.cnd .cg .cto{margin:16px -18px -16px;padding:9px 18px;border-top:1px solid rgba(127,127,127,.16);border-radius:0 0 12px 12px;background:rgba(127,127,127,.05);font-size:12px;opacity:.7}
+.cnd .cg .ctt p{margin:0 0 10px;overflow-wrap:anywhere}
+.cnd .cg .ctt p:last-child{margin-bottom:0}
+.cnd .cg .ctt p.ctd{font-style:italic;opacity:.85}
+.cnd .cg .ctt p.ctp{opacity:.88}
+.cnd .cg .ctt code.ctk{font:12.5px var(--mono);padding:1px 5px;border-radius:4px;background:rgba(127,127,127,.12);overflow-wrap:anywhere}
+.cnd .cg .ctt code.ctn{color:light-dark(#0f766e,#7dd3c0)}
+.cnd .cg .ctt ul{margin:0;padding:0;list-style:none}
+.cnd .cg .ctt ul.ctl li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;padding:6px 0;border-top:1px solid rgba(127,127,127,.14)}
+.cnd .cg .ctt ul.ctl li:first-child{border-top:none}
+.cnd .cg .ctt .ctm{font-size:12px;opacity:.7}
+.cnd .cg .ctt .ctw{margin:12px 0 0;padding:10px 14px;border-radius:8px;background:rgba(245,158,11,.12);border-left:3px solid #f59e0b}
+.cnd .cg .ctt .ctw b{display:block;margin:0 0 4px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:light-dark(#b45309,#fbbf24)}
+.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)}
@@ -270,13 +298,27 @@ _EXTRA_CSS = """\
 .cnd .walk .ws{border-left:1px solid rgba(127,127,127,.2)}
 .cnd .walk .wch{position:sticky;top:0;z-index:2;padding:12px 16px 9px;font-size:12.5px;font-weight:650;background:var(--bg);border-bottom:1px solid rgba(127,127,127,.14)}
 .cnd .walk .wr{display:block;width:0;height:0;margin:0;border:0;padding:0;opacity:0;appearance:none;-webkit-appearance:none;pointer-events:none}
-.cnd .walk .wil{display:flex;align-items:center;gap:10px;min-height:30px;padding:0 14px 0 4px;cursor:pointer;white-space:nowrap;user-select:none;-webkit-user-select:none;transition:background-color .15s}
+.cnd .walk .wil{display:flex;align-items:center;gap:10px;min-height:30px;padding:0 14px 0 4px;cursor:pointer;white-space:nowrap;user-select:none;-webkit-user-select:none;transition:background-color .2s,box-shadow .2s;animation:cnd-row .22s ease-out}
+@keyframes cnd-row{from{opacity:0;transform:translateY(-3px)}}
+.cnd .walk .wcx{position:absolute;width:0;height:0;margin:0;opacity:0;pointer-events:none}
+.cnd .walk .wtg{position:relative;z-index:1;display:block;height:0}
+.cnd .walk .wtg i{position:absolute;top:0;left:calc(40px + var(--d)*16px);width:16px;height:30px;border-radius:4px;cursor:pointer;opacity:.45;transition:opacity .15s,background-color .15s}
+.cnd .walk .wtg i::before{content:"";position:absolute;left:5px;top:12px;width:5px;height:5px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);transition:transform .2s cubic-bezier(.3,.7,.3,1)}
+.cnd .walk .wtg:hover i{opacity:1;background:rgba(127,127,127,.14)}
+.cnd .walk .wcx:checked+.wtg i{opacity:.8}
+.cnd .walk .wcx:checked+.wtg i::before{transform:translate(-1px,1px) rotate(-45deg)}
+.cnd .walk .wcnt{display:none;flex:none;font-size:11px;padding:0 7px;border-radius:9px;line-height:17px;background:rgba(127,127,127,.14);opacity:.75;animation:cnd-in .2s ease}
+.cnd .walk .wcx:checked+.wtg+.wr+.wil .wcnt{display:inline-block}
 .cnd .walk .wil:hover{background-color:rgba(127,127,127,.08)}
 .cnd .walk .wr:checked+.wil{background-color:rgba(245,158,11,.16);box-shadow:inset 3px 0 #f59e0b}
 .cnd .walk .wr:focus-visible+.wil{outline:2px solid var(--blue);outline-offset:-2px}
 .cnd .walk .wno{flex:0 0 26px;text-align:right;font:11px var(--mono);opacity:.4;font-variant-numeric:tabular-nums}
-.cnd .walk .wr:checked+.wil .wno{opacity:.8}
-.cnd .walk .wx{display:flex;align-items:center;align-self:stretch;gap:8px;min-width:0;flex:1;padding-left:calc(var(--d)*16px);background:repeating-linear-gradient(90deg,rgba(127,127,127,.18) 0 1px,transparent 1px 16px) 5px 0/calc(var(--d)*16px) 100% no-repeat}
+.cnd .walk .wr:checked+.wil .wno{opacity:.9;color:#d97706;font-weight:600}
+.cnd .walk .wtx{transition:transform .2s ease}
+.cnd .walk .wr:checked+.wil .wtx{transform:translateX(2px)}
+.cnd .walk .wr:checked+.wil .wdot{animation:cnd-ping 1s ease-out 2}
+@keyframes cnd-ping{from{box-shadow:0 0 0 0 var(--c,rgba(127,127,127,.6))}to{box-shadow:0 0 0 6px transparent}}
+.cnd .walk .wx{display:flex;align-items:center;align-self:stretch;gap:8px;min-width:0;flex:1;padding-left:calc(var(--d)*16px + 18px);background:repeating-linear-gradient(90deg,rgba(127,127,127,.18) 0 1px,transparent 1px 16px) 8px 0/calc(var(--d)*16px) 100% no-repeat}
 .cnd .walk .wtx{min-width:0;overflow:hidden;text-overflow:ellipsis}
 .cnd .walk .wtx code{font:12px var(--mono);background:none;padding:0}
 .cnd .walk :is(.k-def,.k-module) .wtx b{font:650 12.5px var(--mono)}
@@ -284,7 +326,10 @@ _EXTRA_CSS = """\
 .cnd .walk .wdot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--c,rgba(127,127,127,.6))}
 .cnd .walk :is(.d-aws-reads,.d-lib-reads){--c:#3b82f6}.cnd .walk :is(.d-aws-writes,.d-lib-writes){--c:#ea580c}
 .cnd .walk :is(.d-aws-sends,.d-lib-sends,.d-http){--c:#db2777}.cnd .walk :is(.d-aws-runs,.d-lib-runs){--c:#9333ea}.cnd .walk .d-aws-signs{--c:#64748b}
-.cnd .walk .wc{display:none;position:absolute;left:var(--lw);right:0;top:0;height:var(--ch);box-sizing:border-box;overflow:auto;padding:14px 22px 12px;white-space:normal;cursor:auto;border-left:1px solid rgba(127,127,127,.2);border-bottom:1px solid rgba(127,127,127,.18);background:var(--bg);animation:cnd-in .18s ease}
+.cnd .walk .wc{display:none;position:absolute;left:var(--lw);right:0;top:0;height:var(--ch);box-sizing:border-box;overflow:auto;padding:14px 22px 12px;white-space:normal;cursor:auto;border-left:1px solid rgba(127,127,127,.2);border-bottom:1px solid rgba(127,127,127,.18);background:var(--bg)}
+.cnd .walk .wc>*{animation:cnd-in .24s ease both}
+.cnd .walk .wc>.whead{animation-delay:.03s}.cnd .walk .wc>.wstk{animation-delay:.06s}.cnd .walk .wc>.wsay{animation-delay:.09s}.cnd .walk .wc>.wthen{animation-delay:.12s}
+.cnd .walk .wfacts li{animation:cnd-in .24s ease both;animation-delay:.12s}.cnd .walk .wfacts li:nth-child(2){animation-delay:.15s}.cnd .walk .wfacts li:nth-child(n+3){animation-delay:.18s}
 .cnd .walk .wr:checked+.wil+.wc{display:block}
 .cnd .walk .wnav{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
 .cnd .walk .wbt{display:inline-flex;align-items:center;gap:5px;padding:4px 14px;border:1px solid rgba(127,127,127,.32);border-radius:8px;font-size:13px;font-weight:600;line-height:20px;cursor:pointer;user-select:none;-webkit-user-select:none;transition:background-color .12s,transform .06s}
@@ -320,7 +365,9 @@ _EXTRA_CSS = """\
 .cnd .walk :is(.wfm,.wfv){opacity:.6}
 .cnd .walk .wthen{margin-top:10px;font-size:12px;opacity:.6}
 .cnd .walk .wf{display:none;position:absolute;left:var(--lw);right:0;top:var(--ch);bottom:0;flex-direction:column;border-left:1px solid rgba(127,127,127,.2);background:var(--bg)}
-.cnd .walk .wfn>.wr:checked~.wf{display:flex}
+.cnd .walk .wfn>.wr:checked~.wf{display:flex;animation:cnd-fade .25s ease}
+.cnd .walk .wfh{animation:cnd-in .25s ease}
+@keyframes cnd-fade{from{opacity:0}}
 .cnd .walk .wfh{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:8px 22px;font-size:12px;border-bottom:1px solid rgba(127,127,127,.12)}
 .cnd .walk .wfh b{font:650 12.5px var(--mono)}
 .cnd .walk .wfh span{opacity:.62}
@@ -328,15 +375,16 @@ _EXTRA_CSS = """\
 .cnd .walk .wfw{position:relative;flex:1;min-height:0;overflow-x:auto;overflow-y:hidden;container-type:size;background:rgba(127,127,127,.03)}
 .cnd .walk .wfp{position:relative;box-sizing:border-box;width:max-content;min-width:100%;padding:var(--pad) 0;font:12.5px/var(--lh) var(--mono);
  translate:0 min(0px,max(calc(100cqh - var(--n)*var(--lh) - 2*var(--pad)),calc(36cqh - var(--k,0)*var(--lh))));transition:translate .32s cubic-bezier(.25,.8,.25,1)}
-.cnd .walk .wbar{position:absolute;left:0;right:0;top:calc(var(--pad) + var(--k,-9)*var(--lh));height:var(--lh);background:rgba(245,158,11,.2);box-shadow:inset 3px 0 #f59e0b;transition:top .32s cubic-bezier(.25,.8,.25,1)}
+.cnd .walk .wbar{position:absolute;left:0;right:0;top:calc(var(--pad) + var(--k,-9)*var(--lh));height:var(--lh);background:rgba(245,158,11,.2);box-shadow:inset 3px 0 #f59e0b;transition:top .32s cubic-bezier(.25,.8,.25,1);animation:cnd-glow 1.2s ease-in-out 2}
+@keyframes cnd-glow{50%{background:rgba(245,158,11,.3)}}
 .cnd .walk .sl{position:relative;display:block;padding-right:16px;white-space:pre}
 .cnd .walk span.sl{opacity:.6}
-.cnd .walk label.sl{cursor:pointer}
+.cnd .walk label.sl{cursor:pointer;transition:background-color .15s}
 .cnd .walk label.sl:hover{background:rgba(127,127,127,.1)}
 .cnd .walk .sn{display:inline-block;width:3.2em;padding-right:14px;text-align:right;opacity:.42;user-select:none;-webkit-user-select:none}
 .cnd .walk label.sl .sn{opacity:.8}
 @media (max-width:860px){.cnd .walk{--lt:40vh;grid-template-columns:minmax(0,1fr);grid-template-rows:var(--lt) 1fr;height:calc(var(--lt) + var(--ch) + 380px)}.cnd .walk .wl{max-height:none}.cnd .walk :is(.wc,.wf){left:0;border-left:0}.cnd .walk .wc{top:var(--lt);border-top:1px solid rgba(127,127,127,.2);padding:12px 16px}.cnd .walk .wf{top:calc(var(--lt) + var(--ch))}.cnd .walk .ws{border-left:0}}
-@media (prefers-reduced-motion:reduce){.cnd .walk .wfp,.cnd .walk .wbar,.cnd .walk .wc,.cnd .tabs>.tp{transition:none;animation:none}}"""
+@media (prefers-reduced-motion:reduce){.cnd .walk :is(.wfp,.wbar,.wc,.wc>*,.wfacts li,.wil,.wtx,.wdot,.wcnt,.wf,.wfh,.wtg i,.wtg i::before),.cnd .tabs>.tp{transition:none;animation:none}}"""
 
 _CSS = _base_css(_ROOT, _EXTRA_CSS)
 

code_node/report/walk.py

@@ -7,6 +7,11 @@ No JavaScript: each step is a radio button (one group, so once one has focus the
 Each function's steps sit in a box of their own, with the function's code drawn once at the end of it; the CSS shows
 the card after the checked button and the code of its box with sibling selectors, so the light slides from line to
 line as you step, and a step costs the same however many there are.
+
+The list folds like a tree: a step with steps under it has a checkbox before it, and its arrow folds them away. Each
+step under it carries the class `wu<step>`, so one rule per fold hides them, whether they sit beside it or inside the
+box of a function it calls (`#cx5:checked ~ .wu5, #cx5:checked ~ * .wu5`). Only the steps' rows are hidden: the
+current one's card and code still show when it's folded away.
 """
 
 from __future__ import annotations
@@ -523,11 +528,29 @@ def _frame_html(index: int, frame: _Frame, rows: list[tuple[int, str]]) -> str:
     )
 
 
-def _item_html(stops: list[_Stop], i: int, card: str) -> str:
+def _folds(stops: list[_Stop]) -> tuple[list[int], list[list[int]]]:
+    """
+    How many steps sit under each stop in the list, and the stops each one sits under, outermost first.
+    """
+    under = [0] * len(stops)
+    above: list[list[int]] = []
+    opened: list[int] = []
+    for i, stop in enumerate(stops):
+        while opened and (stops[opened[-1]].depth >= stop.depth or stops[opened[-1]].chapter != stop.chapter):
+            opened.pop()
+        for j in opened:
+            under[j] += 1
+        above.append(list(opened))
+        opened.append(i)
+    return under, above
+
+
+def _item_html(stops: list[_Stop], i: int, card: str, under: int = 0, above: tuple[int, ...] = ()) -> str:
     """
     A step in the list: its radio button, then its number and what it does in a few words (or, for a function it goes
     into, the function's name and file, as a heading over its steps) as the button's label, then its card, which shows
-    (beside the list) while the button is checked.
+    (beside the list) while the button is checked. under: how many steps sit under it, folded away by the checkbox and
+    arrow before it; above: the steps it sits under, whose folds hide it.
     """
     stop = stops[i]
     step = stop.step
@@ -543,10 +566,18 @@ def _item_html(stops: list[_Stop], i: int, card: str) -> str:
         dot = f'<span class="wdot d-{said}" title="{_esc(_NOTE_TIPS.get(said, ""))}"></span>' if said in _DOTS else ""
         text = f'<span class="wtx">{headline}</span>{dot}'
     checked = " checked" if i == 0 else ""
+    hidden_by = "".join(f" wu{j}" for j in above)
+    fold = ""
+    if under:
+        fold = (
+            f'<input type="checkbox" class="wcx" id="cx{i}" tabindex="-1"><label class="wtg{hidden_by}" for="cx{i}" '
+            f'style="--d:{stop.depth}" title="Fold or unfold the {_plural(under, "step")} under it"><i></i></label>'
+        )
+        text += f'<span class="wcnt">{_plural(under, "step")}</span>'
     return (
-        f'<input type="radio" class="wr" name="{_GROUP}" id="cw{i}"{checked}><label class="wil k-{_esc(step.kind)}" '
-        f'for="cw{i}" style="--d:{stop.depth}"><span class="wno">{i + 1}</span><span class="wx">{text}</span>'
-        f"</label>{card}"
+        f'{fold}<input type="radio" class="wr" name="{_GROUP}" id="cw{i}"{checked}><label class="wil '
+        f'k-{_esc(step.kind)}{hidden_by}" for="cw{i}" style="--d:{stop.depth}"><span class="wno">{i + 1}</span>'
+        f'<span class="wx">{text}</span></label>{card}'
     )
 
 
@@ -576,6 +607,7 @@ def _walk_html(block: _Walk, report: _Report) -> str:
         rows = _frame_rows(frame, highlighted.get(frame.file, []), stops)
         rows_of.append({number: n for n, (number, _) in enumerate(rows) if number})
         drawn.append(_frame_html(k, frame, rows))
+    under, above = _folds(stops)
     out: list[str] = []
     opened: list[int] = []  # the frames whose boxes are open, innermost last
     chapter = -1
@@ -593,7 +625,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)))
+        out.append(_item_html(stops, i, _card_html(stops, i, first, docs, block.editor), 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)
         if at is not None:  # the line its code lights
             report.rules.add(f".{root} #cw{i}:checked~.wf{stop.frame}{{--k:{at}}}")
@@ -601,7 +635,8 @@ def _walk_html(block: _Walk, report: _Report) -> str:
         out.append(drawn[opened.pop()] + "</div>")
     sub = (
         f'<div class="wsub">{_plural(len(stops), "step")}, in the order the code runs. Press Next or click a step to '
-        "light its line in the code; after a click, <kbd>↑</kbd> <kbd>↓</kbd> move through them.</div>"
+        "light its line in the code; after a click, <kbd>↑</kbd> <kbd>↓</kbd> move through them. The arrow beside a "
+        "step folds the steps under it away.</div>"
     )
     return (
         f'{title}{sub}<div class="walk"><div class="wl" role="radiogroup" aria-label="The steps">{"".join(out)}'

{code_node_graph-0.1.0.dist-info → code_node_graph-0.3.0.dist-info}/METADATA

@@ -1,6 +1,6 @@
 Metadata-Version: 2.5
 Name: code-node-graph
-Version: 0.1.0
+Version: 0.3.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/

{code_node_graph-0.1.0.dist-info → code_node_graph-0.3.0.dist-info}/RECORD

@@ -1,4 +1,4 @@
-code_node/__init__.py,sha256=P00enhUnqmeAPpAajqOLb8MJQ7ljxA1RS4mSfcurHPU,1106
+code_node/__init__.py,sha256=RGdvFZ4nq5pe5UXLWQMZaZvneTOwgLS-aGK6TqTBTG4,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
@@ -34,11 +34,11 @@ code_node/report/__init__.py,sha256=l3dfZFbLEo-7Fl7O_Rk2lvyAElQnyugSZPI_PzHrG_Q,
 code_node/report/brands.py,sha256=n32BfFz2d02ZVUHvy8L4wPHBtiD_1FCTKzdR4NyvU88,8372
 code_node/report/build.py,sha256=F0wdC0ibu3WSAenUsovUWuKwLC0vVxnNYKJVXtU5jRk,4644
 code_node/report/editor.py,sha256=TRUX6BTB-oe-m5Vf3xM9PppnC99sCLL4PObXkYAGKoU,1466
-code_node/report/graph.py,sha256=bLbsB8YxByX7RWH9Hmyc76aq6VHsllgcPyIKQpszW6Y,60090
+code_node/report/graph.py,sha256=YbrVWbymYUL8-KOdsDSRhD2RxCMWbGVEhHD0-MSjX1I,66832
 code_node/report/outline.py,sha256=3RRxU4FMUZKBVjFDsscKZkvDlj_W4ZeW4DwUztg4wd0,8539
-code_node/report/style.py,sha256=rpubo57Qbgp1m4zsn4sfBikkzNSJuRTNXC__07qylEs,31021
+code_node/report/style.py,sha256=a5JesVQaDnqLqmqnuh-ZeayA-VZKTlUoDCPDcoUrK3M,35883
 code_node/report/tabs.py,sha256=K2XR16owfgEL1kfux61PI9nBcRsgjQurTx1ptMM5Mac,3016
-code_node/report/walk.py,sha256=jumSV-x1X0D614V7K0zECCSWk69OkHNR7IuDt8K4ggg,27516
+code_node/report/walk.py,sha256=LWJDGJ3efF0fPWlMO4G4HBQqnNVn2RHXgLeuLrC-WnA,29466
 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 +171,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.1.0.dist-info/METADATA,sha256=h488K0OzyyEL7CfcJxU8_HOogMK3qIP2Qm_tfK3hwuk,7619
-code_node_graph-0.1.0.dist-info/WHEEL,sha256=W3fkpkm7-wf9vBI5Z-7s0eWkeM-spu78I8Neb98DeEg,87
-code_node_graph-0.1.0.dist-info/entry_points.txt,sha256=eEArp-uk7ZzODIWr6l62rI0-mIA0-mLDaqJEyKikPJw,49
-code_node_graph-0.1.0.dist-info/licenses/LICENSE,sha256=xx0jnfkXJvxRnG63LTGOxlggYnIysveWIZ6H3PNdCrQ,11357
-code_node_graph-0.1.0.dist-info/RECORD,,
+code_node_graph-0.3.0.dist-info/METADATA,sha256=N1ODeR5ZEpH4roWDSuYXxMNjQu_q31V2uCuYsQQyTig,7619
+code_node_graph-0.3.0.dist-info/WHEEL,sha256=W3fkpkm7-wf9vBI5Z-7s0eWkeM-spu78I8Neb98DeEg,87
+code_node_graph-0.3.0.dist-info/entry_points.txt,sha256=eEArp-uk7ZzODIWr6l62rI0-mIA0-mLDaqJEyKikPJw,49
+code_node_graph-0.3.0.dist-info/licenses/LICENSE,sha256=xx0jnfkXJvxRnG63LTGOxlggYnIysveWIZ6H3PNdCrQ,11357
+code_node_graph-0.3.0.dist-info/RECORD,,