@rho-workspace/rho 0.5.2 → 0.5.4

package/node_modules/@rho-workspace/plugin-kernel/dist/ui-base.js

@@ -10,6 +10,16 @@ const Shell = createContext({});
 export const ShellProvider = Shell.Provider;
 export const useShell = () => useContext(Shell);
 export const withShell = (shell, node) => shell ? _jsx(ShellProvider, { value: shell, children: node }) : node;
+export const environmentOf = (session) => {
+    const program = session.program;
+    if (!program || /^([A-Za-z]:)?[\\/]/.test(program))
+        return null;
+    return program.match(/^(.+?)[\\/](?:bin|Scripts)[\\/][^\\/]+$/)?.[1] ?? program;
+};
+export const versionOf = (session) => {
+    const version = session.version?.replace(/^R version (\S+).*$/, 'R $1') ?? (session.language === 'r' ? 'R' : 'Python'), environment = environmentOf(session);
+    return environment ? version + ' · ' + environment : version;
+};
 export const clock = (ms, seconds = false) => new Date(ms).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', ...(seconds ? { second: '2-digit' } : {}), hourCycle: 'h23' });
 export function durationText(ms) {
     if (ms < 10_000)

package/node_modules/@rho-workspace/plugin-kernel/dist/ui-flow.d.ts

@@ -1,9 +1,37 @@
+import { type ReactNode } from 'react';
+import { type GraphNode, type Making, type ValueGraph } from './value-graph.js';
 import { type Cell } from './ui-notebook.js';
 import { type KernelShell, type UiClient, type UiSnapshot } from './ui-base.js';
 type Language = Cell['language'];
+export declare const lineageViewLimits: {
+    nodes: number;
+    results: number;
+    wide: number;
+};
+type Facts = Map<string, {
+    type: string;
+    size?: string | null;
+    summary?: string | null;
+}>;
+interface LineageProps {
+    graph: ValueGraph;
+    language: Language;
+    selected?: string | null;
+    onSelect?: (id: string | null) => void;
+    onGo?: (making: Making) => void;
+    canGo?: (making: Making) => boolean;
+    onObject?: (name: string) => void;
+    onPath?: (path: string) => void;
+    folders?: boolean;
+    facts?: Facts;
+    code?: boolean;
+    more?: (node: GraphNode) => ReactNode;
+    hint?: string;
+    pinned?: boolean;
+}
 export declare function FlowPane({ shell, ...props }: Parameters<typeof FlowBody>[0] & {
     shell?: KernelShell;
-}): string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+}): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
 declare function FlowBody({ client, snapshot, onObject, onPath, onRemote }: {
     client: UiClient;
     snapshot: UiSnapshot;
@@ -11,8 +39,14 @@ declare function FlowBody({ client, snapshot, onObject, onPath, onRemote }: {
     onPath?: (path: string) => void;
     onRemote?: (placeId: string, path: string) => void;
 }): import("react").JSX.Element;
-export declare const flowLimits: {
-    lanes: number;
-    reads: number;
+export declare function ScriptFlowView({ shell, ...props }: Omit<LineageProps, 'code'> & {
+    shell?: KernelShell;
+}): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+export declare const innerFlowLimits: {
+    values: number;
 };
+export declare function CellScriptFlow({ code, language }: {
+    code: string;
+    language: Language;
+}): import("react").JSX.Element | null;
 export {};

package/node_modules/@rho-workspace/plugin-kernel/dist/ui-flow.js

@@ -1,17 +1,172 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { cellLabel, lanes, lineage, related } from './lineage.js';
+import { scriptFlow, scriptFlowLimits } from './script-flow.js';
+import { graphPath, graphRows, scriptGraph, sessionGraph } from './value-graph.js';
 import { Icon } from './ui-icons.js';
 import { at, Code, languageName, languages, latestSessions, useAuthors, useKernel, usePlot, versionOf } from './ui-notebook.js';
 import { whereOf } from './ui-servers.js';
 import { withShell } from './ui-base.js';
-// How the values of a live session were made, as a view beside the Notebook and Variables: each
-// cell that made something still there, as a box in the order the cells ran, holding what it made
-// one to a line. A line in the margin runs from a value (or a written file) to each box that read
-// it. A value opens as its own view and a file in its viewer; a box opens to show its cell's code.
-// Pointing at a box keeps its path in view: what it came from and what came of it. A file named in
-// a session on a server is in that server's folder, and is shown there.
-// The page that shows it may give it the application's code highlighting.
+// The protected resource is the reader's page: at most `nodes` values and files are drawn at once
+// (those nearest the results first; the rest are counted), and the results bar names at most
+// `results` results until the reader asks for the rest.
+export const lineageViewLimits = { nodes: 80, results: 8, wide: 6 };
+// A folder's path ends in /, and keeps it as its name.
+const folder = (path) => path.endsWith('/');
+const fileName = (path) => (path.replace(/\/$/, '').split('/').at(-1) ?? path) + (folder(path) ? '/' : '');
+const isFile = (n) => n.id.startsWith('in:') || n.id.startsWith('out:');
+// A long name keeps its first word and its end, where the files of one analysis differ.
+const short = (name, most = 24) => {
+    if (name.length <= most)
+        return name;
+    const head = (name.match(/^[^_\-. ]+/)?.[0] ?? name).slice(0, 10);
+    let tail = name.slice(-(most - head.length - 1));
+    const cut = tail.search(/[_\-. ]/);
+    if (cut > 0 && cut < tail.length - 4)
+        tail = tail.slice(cut);
+    return head + '…' + tail;
+};
+const labelOf = (n) => short(isFile(n) ? fileName(n.name) : n.name);
+// What a reader is told a node is: what the code says it is, else its name.
+const titleOf = (n) => n.means ?? labelOf(n);
+const plural = (count, one, many = one + 's') => `${count} ${count === 1 ? one : many}`;
+const linesText = (m) => m.from === m.to ? 'line ' + m.from : `lines ${m.from}–${m.to}`;
+// What is drawn: what leads to the chosen result, or to any result; past the limit, what is nearest
+// the results.
+function drawnOf(graph, result) {
+    const behind = result ? [...graphPath(graph, result).up] : [...graph.nodes.keys()].filter(id => !graph.others.includes(id));
+    if (behind.length <= lineageViewLimits.nodes)
+        return { ids: new Set(behind), cut: 0 };
+    const ids = new Set(), queue = result ? [result] : [...graph.results];
+    while (queue.length && ids.size < lineageViewLimits.nodes) {
+        const id = queue.shift();
+        if (ids.has(id))
+            continue;
+        ids.add(id);
+        queue.push(...graph.nodes.get(id).parents);
+    }
+    return { ids, cut: behind.length - ids.size };
+}
+function Lineage({ graph, language, selected: given, onSelect, onGo, canGo, onObject, onPath, folders = true, facts, code = true, more, hint, pinned = false }) {
+    const [own, setOwn] = useState(null);
+    const selected = (given !== undefined ? given : own) ?? null, chosen = selected && graph.nodes.has(selected) ? graph.nodes.get(selected) : null;
+    const select = (id) => { if (given === undefined)
+        setOwn(id); onSelect?.(id); };
+    const [result, setResult] = useState(undefined), [everyResult, setEveryResult] = useState(false);
+    const wide = useMemo(() => graph.results.length > 1 && graphRows(graph, drawnOf(graph, null).ids).some(row => row.length > lineageViewLimits.wide), [graph]);
+    const traced = result === undefined ? (wide ? graph.results[0] : null) : result && graph.nodes.has(result) ? result : null;
+    const drawn = useMemo(() => drawnOf(graph, traced), [graph, traced]);
+    const rows = useMemo(() => graphRows(graph, drawn.ids), [graph, drawn]);
+    const [pointed, setPointed] = useState(null);
+    const focus = pointed && graph.nodes.has(pointed) ? pointed : chosen?.id ?? null;
+    const path = useMemo(() => focus ? graphPath(graph, focus) : null, [graph, focus]);
+    const canvas = useRef(null);
+    const edges = useEdges(canvas, graph, drawn.ids, rows);
+    // A value chosen elsewhere (at the cursor) is drawn: the graph shows every result again if the
+    // one traced does not lead through it, and the value comes into view.
+    useEffect(() => { if (chosen && traced && !drawn.ids.has(chosen.id) && !graph.others.includes(chosen.id))
+        setResult(null); }, [chosen, traced, drawn, graph]);
+    useEffect(() => { if (chosen)
+        canvas.current?.querySelector(`[data-node="${CSS.escape(chosen.id)}"]`)?.scrollIntoView({ block: 'nearest' }); }, [chosen?.id]);
+    const choose = (id, again = false) => {
+        if (id === chosen?.id && !again) {
+            select(null);
+            return;
+        }
+        select(id);
+        const made = graph.nodes.get(id)?.made[0];
+        if (made && onGo && !code && (!canGo || canGo(made)))
+            onGo(made);
+    };
+    const trace = (id) => { setResult(id); if (id)
+        choose(id, true); };
+    if (graph.tooLong)
+        return _jsxs("p", { className: "nb-empty-line", children: ["This script is larger than ", Math.round(scriptFlowLimits.bytes / 1024), " KB, so how its values are made is not read."] });
+    if (!graph.nodes.size)
+        return _jsx("p", { className: "nb-empty-line", children: "Nothing here makes a value or writes a file that can be read from the code." });
+    const results = everyResult ? graph.results : graph.results.slice(0, lineageViewLimits.results);
+    const state = (id) => !path ? '' : id === focus ? ' here' : path.up.has(id) ? ' from' : path.down.has(id) ? ' into' : ' dim';
+    return _jsxs("div", { className: "lin", children: [graph.results.length > 1 && _jsxs("div", { className: "lin-results", role: "group", "aria-label": "Which result to trace", children: [_jsx("span", { children: "Results" }), _jsx("button", { "aria-pressed": !traced, onClick: () => trace(null), children: "All" }), [...results, ...traced && !results.includes(traced) ? [traced] : []].map(id => { const n = graph.nodes.get(id); return _jsxs("button", { "aria-pressed": id === traced, className: n.kind, title: n.name, onClick: () => trace(id), children: [_jsx(Icon, { name: n.kind === 'plot' ? 'chart' : isFile(n) ? 'file' : 'braces', size: 11, stroke: 1.8 }), _jsx("span", { children: titleOf(n) })] }, id); }), results.length < graph.results.length && _jsxs("button", { className: "text-button", onClick: () => setEveryResult(true), children: [graph.results.length - results.length, " more"] })] }), _jsxs("div", { className: 'lin-main' + (pinned ? ' pinned' : ''), children: [_jsx(Detail, { graph: graph, node: chosen, language: language, facts: facts, code: code, onGo: onGo, canGo: canGo, onObject: onObject, onPath: onPath, folders: folders, onChoose: choose, more: more, hint: hint }), _jsxs("div", { className: "lin-canvas", ref: canvas, onPointerLeave: () => setPointed(null), children: [_jsx("svg", { className: "lin-edges", "aria-hidden": "true", children: edges.map(e => _jsx("path", { d: e.d, className: !path ? '' : path.up.has(e.from) && path.up.has(e.to) ? 'from' : path.down.has(e.from) && path.down.has(e.to) ? 'into' : 'off' }, e.key)) }), rows.map((row, i) => _jsx("div", { className: "lin-row", children: row.map(id => {
+                                    const n = graph.nodes.get(id), fact = facts?.get(n.name);
+                                    return _jsxs("button", { "data-node": id, className: 'lin-node ' + n.kind + state(id) + (id === chosen?.id ? ' chosen' : ''), "aria-pressed": id === chosen?.id, title: [n.means, n.name, fact && `${fact.type}${fact.size ? ' · ' + fact.size : ''}`].filter(Boolean).join('\n'), onClick: () => choose(id), onPointerEnter: () => setPointed(id), onFocus: () => setPointed(id), onBlur: () => setPointed(null), children: [_jsx(Icon, { name: n.kind === 'plot' ? 'chart' : isFile(n) ? 'file' : 'braces', size: 12, stroke: 1.8 }), _jsx("span", { className: "lin-text", children: n.means
+                                                    ? _jsxs(_Fragment, { children: [_jsx("span", { className: "lin-title", children: n.means }), _jsx("span", { className: "lin-name lin-sub", children: labelOf(n) })] })
+                                                    : _jsx("span", { className: "lin-name", children: labelOf(n) }) })] }, id);
+                                }) }, i))] })] }), drawn.cut > 0 && _jsxs("p", { className: "nb-note", children: [plural(drawn.cut, 'value'), " further from the results ", drawn.cut === 1 ? 'is' : 'are', " not drawn. Choose a result, or a value, to follow it."] }), graph.others.length > 0 && _jsxs("p", { className: "nb-note lin-others", children: ["Leading to no result: ", graph.others.map(id => _jsx("button", { className: 'lin-chip' + (id === traced ? ' chosen' : ''), title: 'Draw what leads to ' + graph.nodes.get(id).name, onClick: () => trace(id), children: _jsx("span", { children: titleOf(graph.nodes.get(id)) }) }, id))] }), graph.quiet > 0 && _jsxs("p", { className: "nb-note", children: [plural(graph.quiet, 'statement makes', 'statements make'), " nothing and ", graph.quiet === 1 ? 'is' : 'are', " not drawn: prints, checks and library calls."] }), graph.cut > 0 && _jsxs("p", { className: "nb-note", children: ["The last ", plural(graph.cut, 'step is', 'steps are'), " not read."] })] });
+}
+// The value chosen: what it is, how it was made and where, what it comes from and uses, what it
+// leads to and which results it reaches. With nothing chosen, how much there is.
+function Detail({ graph, node, language, facts, code, onGo, canGo, onObject, onPath, folders, onChoose, more, hint }) {
+    if (!node) {
+        const values = [...graph.nodes.values()].filter(n => n.kind === 'value').length, sources = graph.inputs.length;
+        const explained = [...graph.nodes.values()].filter(n => n.kind === 'value' && n.means).length;
+        return _jsxs("section", { className: "lin-detail empty", children: [_jsxs("p", { className: "lin-sum", children: [_jsx("b", { children: sources }), " ", sources === 1 ? 'source' : 'sources', _jsx("span", { "aria-hidden": "true", children: "\u2192" }), _jsx("b", { children: values }), " ", values === 1 ? 'value' : 'values', _jsx("span", { "aria-hidden": "true", children: "\u2192" }), _jsx("b", { children: graph.results.length }), " ", graph.results.length === 1 ? 'result' : 'results'] }), _jsxs("p", { children: [explained, " of ", values, " ", values === 1 ? 'value has' : 'values have', " a meaning written in the code."] }), _jsxs("p", { children: ["Choose a value to see what it comes from and what comes of it.", hint ? ' ' + hint : ''] })] });
+    }
+    const { down } = graphPath(graph, node.id), fact = facts?.get(node.name);
+    const reaches = graph.results.filter(r => r !== node.id && down.has(r) && !node.children.includes(r));
+    const chips = (ids, kind) => ids.map(id => { const n = graph.nodes.get(id); return _jsx("button", { className: 'lin-chip ' + kind, title: [n.means, n.name].filter(Boolean).join('\n'), onClick: () => onChoose(id), children: _jsx("span", { children: titleOf(n) }) }, id); });
+    const what = node.kind === 'input' ? (isFile(node) ? 'Data file' : 'Value already in the session') : node.kind === 'output' ? 'Written file' : node.kind === 'plot' ? 'Plot' : 'Value';
+    const file = isFile(node), openable = file && onPath && !(folder(node.name) && !folders);
+    // The statements of one cell that make it are named once, with that cell.
+    const groups = [];
+    for (const m of node.made) {
+        const last = groups.at(-1);
+        if (m.cell && last?.[0].cell?.cellId === m.cell.cellId)
+            last.push(m);
+        else
+            groups.push([m]);
+    }
+    const made = groups.map((group, i) => {
+        const m = group[0], where = m.cell ? `${languageName[language]} ${m.cell.number}` : linesText(m), go = onGo && (!canGo || canGo(m));
+        const whole = group.length === 1 && m.from === 1 && m.to === m.code.split('\n').length;
+        return _jsxs("span", { className: "lin-made", children: [i === 0 ? (node.kind === 'output' ? 'Written ' : 'Made ') + (m.cell ? 'by ' : 'at ') : 'changed ' + (m.cell ? 'by ' : 'at '), go ? _jsx("button", { className: "text-button", title: m.cell ? 'Show this cell in the Notebook' : 'Go to ' + linesText(m), onClick: () => onGo(m), children: where }) : _jsx("b", { children: where }), m.cell && !whole && _jsxs("span", { children: [", ", group.map(linesText).join(', ').replace(/, line /g, ', ').replace(/, lines /g, ', ')] }), m.cell && m.cell.label && i === groups.length - 1 && _jsxs("span", { className: "lin-purpose", children: [_jsx("span", { "aria-hidden": "true", children: " \u00B7 " }), m.cell.label] })] }, i);
+    });
+    return _jsxs("section", { className: "lin-detail", "aria-label": 'About ' + titleOf(node), children: [_jsxs("header", { children: [_jsx(Icon, { name: node.kind === 'plot' ? 'chart' : file ? 'file' : 'braces', size: 14, stroke: 1.8 }), _jsx("h3", { title: node.name, className: node.means ? undefined : 'lin-bare', children: titleOf(node) }), _jsxs("span", { className: "lin-kind", children: [what, fact ? ` · ${fact.type}${fact.size ? ' · ' + fact.size : ''}` : ''] }), !file && node.kind !== 'plot' && onObject && fact && _jsx("button", { className: "text-button", onClick: () => onObject(node.name), children: "Look at" }), openable && _jsx("button", { className: "text-button", onClick: () => onPath(node.name), children: "Open" })] }), _jsx("p", { className: "lin-said", children: node.means || file ? _jsxs(_Fragment, { children: [_jsx("code", { className: "lin-ident", children: node.name }), node.means ? ' · written in the code' : ' · no meaning written in the code'] }) : 'No meaning written in the code' }), made.length > 0 && _jsx("p", { className: "lin-made-line", children: made }), more?.(node), _jsxs("dl", { children: [_jsx("dt", { children: "From" }), _jsx("dd", { children: node.parents.length ? chips(node.parents, 'from') : _jsx("span", { children: node.kind === 'input' ? (file ? 'Read from the project' : 'Made before Rho kept a record') : 'Nothing read from the code' }) }), node.uses.length > 0 && _jsxs(_Fragment, { children: [_jsx("dt", { children: "Uses" }), _jsx("dd", { className: "lin-uses", children: node.uses.map(u => { const helper = graph.folded.get(u); return _jsxs("span", { className: "lin-use", children: [_jsx("code", { children: u }), helper?.means && _jsxs("span", { className: "lin-use-means", children: [" \u2014 ", helper.means] })] }, u); }) })] }), _jsx("dt", { children: "Leads to" }), _jsx("dd", { children: node.children.length ? chips(node.children, 'into') : _jsx("span", { children: graph.results.includes(node.id) ? 'Nothing yet: this is a result' : 'Nothing' }) }), !graph.results.includes(node.id) && (reaches.length > 0 || !node.children.some(c => graph.results.includes(c))) && _jsxs(_Fragment, { children: [_jsx("dt", { children: "Reaches" }), _jsx("dd", { children: reaches.length ? chips(reaches, 'into') : _jsx("span", { children: "No result" }) })] })] }), node.stale && _jsxs("p", { className: "lin-stale", children: ["Its cell also read ", node.stale.map(fileName).join(', '), ", made again since."] }), code && node.made.length > 0 && _jsxs("details", { className: "lin-code", children: [_jsx("summary", { children: "The code that made it" }), node.made.map((m, i) => _jsx(Code, { code: m.code, language: language }, i))] })] });
+}
+// The lines between values, measured from where the page put them, again as the view changes size:
+// from the bottom of what a value comes from to its top.
+function useEdges(canvas, graph, ids, rows) {
+    const [edges, setEdges] = useState([]);
+    const [size, setSize] = useState(0);
+    useEffect(() => {
+        const element = canvas.current;
+        if (!element)
+            return;
+        const observer = new ResizeObserver(() => setSize(s => s + 1));
+        observer.observe(element);
+        for (const row of element.querySelectorAll('.lin-row'))
+            observer.observe(row);
+        return () => observer.disconnect();
+    }, [canvas, rows]);
+    useLayoutEffect(() => {
+        const element = canvas.current;
+        if (!element)
+            return;
+        const origin = element.getBoundingClientRect(), f = (n) => n.toFixed(1), box = new Map();
+        for (const node of element.querySelectorAll('[data-node]'))
+            box.set(node.dataset.node, node.getBoundingClientRect());
+        const next = [];
+        for (const id of ids) {
+            const to = box.get(id);
+            if (!to)
+                continue;
+            const parents = graph.nodes.get(id).parents.filter(p => box.has(p));
+            parents.forEach((p, i) => {
+                const from = box.get(p), x1 = from.left + from.width / 2 - origin.left, y1 = from.bottom - origin.top;
+                // Lines into one value arrive spread along its top.
+                const x2 = to.left + to.width * (parents.length > 1 ? 0.2 + 0.6 * i / (parents.length - 1) : 0.5) - origin.left, y2 = to.top - origin.top;
+                const bend = Math.max(14, Math.abs(y2 - y1) / 2);
+                next.push({ key: p + '>' + id, from: p, to: id, d: `M${f(x1)} ${f(y1)} C${f(x1)} ${f(y1 + bend)} ${f(x2)} ${f(y2 - bend)} ${f(x2)} ${f(y2)}` });
+            });
+        }
+        setEdges(now => JSON.stringify(now) === JSON.stringify(next) ? now : next);
+    }, [canvas, graph, ids, rows, size]);
+    return edges;
+}
+// How the values of a live session came about, as a view beside the Notebook and Variables: from
+// what each cell recorded as it ran, the files and values it read and what it made of them. A
+// value opens as its own view and a file in its viewer; a cell named on a value is shown in the
+// Notebook when the page holds it. A file named in a session on a server is in that server's
+// folder, and is shown there. The page that shows it may give it the application's code
+// highlighting.
 export function FlowPane({ shell, ...props }) { return withShell(shell, _jsx(FlowBody, { ...props })); }
 function FlowBody({ client, snapshot, onObject, onPath, onRemote }) {
     const projectId = snapshot.project.id;
@@ -24,65 +179,29 @@ function FlowBody({ client, snapshot, onObject, onPath, onRemote }) {
     const shown = chosen && live.includes(chosen) ? chosen : recent && live.includes(recent) ? recent : live.at(-1) ?? null;
     const session = shown ? latest[shown] : undefined;
     const cells = useMemo(() => (read?.cells ?? []).filter(c => c.sessionId === session?.sessionId), [read, session?.sessionId]);
-    const graph = useMemo(() => session ? lineage(cells.map(c => ({ ...c, plots: c.outputs.filter(o => o.kind === 'plot').length })), session.variables.map(v => v.name)) : null, [cells, session]);
+    const graph = useMemo(() => session ? sessionGraph(cells.map(c => ({ ...c, plots: c.outputs.filter(o => o.kind === 'plot').length })), session.variables, session.language) : null, [cells, session]);
+    const facts = useMemo(() => new Map(session?.variables.map(v => [v.name, v]) ?? []), [session?.variables]);
+    const byCell = useMemo(() => new Map(cells.map(c => [c.cellId, c])), [cells]);
+    const who = useAuthors(snapshot);
     const id = useId();
     if (off || (problem && !read))
         return _jsx("div", { className: "nb-pane", children: _jsx("p", { className: "nb-empty-line", children: problem }) });
     if (!read)
         return _jsx("div", { className: "nb-pane", children: _jsx("p", { className: "nb-empty-line", children: "Reading the live sessions\u2026" }) });
-    return _jsxs("div", { className: "nb-pane flow-pane", "aria-labelledby": id, children: [_jsxs("header", { className: "flow-head", children: [_jsx("h2", { id: id, className: "nb-pane-state", children: session ? _jsxs(_Fragment, { children: [_jsx("span", { className: 'nb-dot ' + session.state, "aria-hidden": "true" }), [versionOf(session), whereOf(session), session.state === 'busy' ? 'running a cell' : session.state === 'starting' ? 'starting' : 'idle'].filter(Boolean).join(' · ')] }) : 'Data flow' }), live.length > 1 && _jsx("div", { className: "nb-tabs", role: "group", "aria-label": "Session", children: live.map(l => _jsx("button", { "aria-pressed": l === shown, onClick: () => setChosen(l), children: languageName[l] }, l)) })] }), !session || !graph ? _jsx("p", { className: "nb-empty-line", children: "No live session. Once a cell runs in R or Python, this shows how its values were made: the files and values each cell read, and what it made of them." })
-                : !graph.steps.length ? _jsxs("p", { className: "nb-empty-line", children: ["Nothing made in ", languageName[session.language], " yet."] })
-                    : _jsx(Flow, { graph: graph, session: session, cells: cells, client: client, snapshot: snapshot, onObject: onObject, onPath: session.place ? (onRemote && (file => onRemote(session.place.placeId, file))) : onPath }, session.sessionId)] });
-}
-// The margin holds at most this many lanes; past them, lanes share places. A box names at most
-// this many of the files its cell read; the rest are counted.
-export const flowLimits = { lanes: 8, reads: 4 };
-const lanePx = 9;
-function Flow({ graph, session, cells, client, snapshot, onObject, onPath }) {
-    const byCell = useMemo(() => new Map(cells.map(c => [c.cellId, c])), [cells]);
-    const values = useMemo(() => new Map(session.variables.map(v => [v.name, v])), [session.variables]);
-    const laid = useMemo(() => lanes(graph), [graph]);
-    const [selected, setSelected] = useState(null);
-    const [pointed, setPointed] = useState(null);
-    const focus = pointed ?? selected, path = useMemo(() => focus && graph.steps.some(s => s.id === focus) ? related(graph, focus) : null, [graph, focus]);
-    const stepOfNode = useMemo(() => new Map(graph.steps.flatMap(s => s.nodes.map(n => [n.id, s.id]))), [graph]);
-    const canvas = useRef(null);
-    const gutter = 12 + Math.min(laid.count, flowLimits.lanes) * lanePx;
-    const lines = useLinks(canvas, graph, laid.lane, gutter);
-    // The newest cell's box comes into view as it is made.
-    const newest = graph.steps.find(s => s.latest)?.id;
-    useEffect(() => { if (newest)
-        canvas.current?.querySelector(`[data-step="${CSS.escape(newest)}"]`)?.scrollIntoView({ block: 'nearest' }); }, [newest]);
-    const unknown = graph.steps.some(s => s.unknownInputs), omitted = graph.omitted;
-    return _jsxs(_Fragment, { children: [_jsx("p", { className: "flow-lede", children: "Each box is a cell, in the order they ran, with what it made. A line joins a value to each cell that read it." }), _jsxs("div", { className: "flow-canvas", ref: canvas, style: { paddingLeft: gutter }, onPointerLeave: () => setPointed(null), children: [_jsxs("svg", { className: "flow-links", "aria-hidden": "true", children: [_jsx("defs", { children: _jsx("marker", { id: "flow-arrow", viewBox: "0 0 8 8", refX: "7", refY: "4", markerWidth: "6", markerHeight: "6", orient: "auto", children: _jsx("path", { d: "M0 0 8 4 0 8z" }) }) }), lines.map(line => _jsx("path", { d: line.d, markerEnd: "url(#flow-arrow)", className: path ? (path.has(stepOfNode.get(line.from)) && path.has(line.to) ? 'on' : 'off') : '' }, line.key))] }), laid.order.map(s => {
-                        const cell = s.cell ? byCell.get(s.cell.cellId) : undefined;
-                        return _jsx(StepBox, { step: s, cell: cell, values: values, faded: !!path && !path.has(s.id), onPoint: setPointed, open: s.id === selected, onOpen: () => setSelected(selected === s.id ? null : s.id), onNode: node => node.kind === 'value' ? onObject?.(session.language, node.name) : node.kind === 'file' ? onPath?.(node.name) : setSelected(s.id), onFile: file => onPath?.(file), folders: !!session.place, children: s.id === selected && cell && _jsx(StepCell, { step: s, cell: cell, byCell: byCell, client: client, snapshot: snapshot }) }, s.id);
-                    })] }), unknown && _jsx("p", { className: "nb-note", children: "Cells run before Rho kept what each cell read show what they made, without lines into them." }), omitted.values + omitted.plots + omitted.files > 0 && _jsxs("p", { className: "nb-note", children: ["Not drawn: ", [omitted.values && `${omitted.values} older ${omitted.values === 1 ? 'value' : 'values'}`, omitted.plots && `${omitted.plots} older ${omitted.plots === 1 ? 'plot' : 'plots'}`, omitted.files && `${omitted.files} older written ${omitted.files === 1 ? 'file' : 'files'}`].filter(Boolean).join(', '), "."] }), session.variablesOmitted > 0 && _jsxs("p", { className: "nb-note", children: [session.variablesOmitted, " more ", session.variablesOmitted === 1 ? 'value' : 'values', " in the session are not listed."] })] });
-}
-// A folder's path ends in /, and keeps it as its name.
-const folder = (path) => path.endsWith('/');
-const fileName = (path) => (path.replace(/\/$/, '').split('/').at(-1) ?? path) + (folder(path) ? '/' : '');
-const and = (items) => items.length < 2 ? items.join('') : items.slice(0, -1).join(', ') + ' and ' + items.at(-1);
-// A folder opens where it can be listed: in a session on a server, in the Servers view.
-function StepBox({ step, cell, values, faded, open, onPoint, onOpen, onNode, onFile, folders = false, children }) {
-    const reads = step.reads.slice(0, flowLimits.reads), name = cell ? languageName[cell.language] : '';
-    return _jsxs("section", { className: 'flow-step ' + step.kind + (step.latest ? ' latest' : '') + (open ? ' open' : '') + (faded ? ' faded' : ''), "data-step": step.id, onPointerEnter: () => onPoint(step.id), children: [step.cell && cell
-                ? _jsxs("button", { className: "flow-step-head", "aria-expanded": open, title: open ? 'Hide the code' : 'Show the code that made this', onClick: onOpen, children: [_jsxs("span", { className: 'nb-lang ' + cell.language, children: [name, " ", cell.number] }), _jsx("code", { children: cellLabel(step.cell) }), step.latest && _jsx("span", { className: "flow-newest", children: "Newest" }), _jsx(Icon, { name: "chevron", size: 12 })] })
-                : _jsx("p", { className: "flow-step-head", children: "Already in the session" }), reads.length > 0 && _jsxs("p", { className: "flow-reads", children: ["Reads ", reads.map(file => folder(file) && !folders
-                        ? _jsxs("span", { className: "flow-file", title: file, children: [_jsx(Icon, { name: "folder", size: 11, stroke: 1.8 }), fileName(file)] }, file)
-                        : _jsxs("button", { className: "flow-file", title: 'Open ' + file, onClick: () => onFile(file), children: [_jsx(Icon, { name: folder(file) ? 'folder' : 'file', size: 11, stroke: 1.8 }), fileName(file)] }, file)), step.reads.length > reads.length && _jsxs("span", { children: ["and ", step.reads.length - reads.length, " more"] })] }), step.earlier.length > 0 && _jsxs("p", { className: "flow-step-note", children: ["Changes what ", and(step.earlier.map(c => `${name} ${c.number}`)), " made"] }), _jsx("ul", { className: "flow-outs", children: step.nodes.map(node => {
-                    const value = node.kind === 'value' ? values.get(node.name) : undefined, wrote = node.id.startsWith('wrote:'), into = node.kind === 'file' && folder(node.name);
-                    return _jsx("li", { children: _jsxs("button", { "data-node": node.id, className: 'flow-out ' + node.kind + (wrote ? ' wrote' : ''), disabled: into && !folders, title: node.kind === 'value' ? `Look at ${node.name}${value?.summary ? ' · ' + value.summary : ''}` : into ? `Wrote into ${node.name}` : node.kind === 'file' ? `Open ${node.name}` : 'Show the code that drew it', onClick: () => onNode(node), children: [_jsx(Icon, { name: node.kind === 'value' ? 'braces' : node.kind === 'plot' ? 'chart' : into ? 'folder' : 'file', size: 12, stroke: 1.8 }), _jsx("span", { children: node.kind === 'file' ? fileName(node.name) : node.name }), _jsx("small", { children: value ? `${value.type}${value.size ? ' · ' + value.size : ''}` : into ? 'written into' : wrote ? 'written' : '' })] }) }, node.id);
-                }) }), step.stale.length > 0 && _jsxs("p", { className: "flow-step-note stale", children: ["Read before ", step.stale.length === 1 ? 'it was' : 'they were', " made again: ", step.stale.map(fileName).join(', ')] }), step.unknownInputs && _jsx("p", { className: "flow-step-note", children: "What it read was not recorded" }), children] });
-}
-// The cell a box stands for, opened in place: the cells whose values it changed, its code, who ran
-// it and when, and the plots it drew.
-function StepCell({ step, cell, byCell, client, snapshot }) {
-    const who = useAuthors(snapshot);
-    const earlier = step.earlier.map(c => byCell.get(c.cellId)).filter((c) => !!c);
-    const inNotebook = document.getElementById('cell-' + cell.cellId) ? cell.cellId : null;
-    const plots = cell.outputs.filter(o => o.kind === 'plot');
-    return _jsxs("div", { className: "flow-cell", children: [earlier.map(c => _jsxs("div", { className: "flow-cell-earlier", children: [_jsxs("span", { className: 'nb-lang ' + c.language, children: [languageName[c.language], " ", c.number] }), _jsx(Code, { code: c.code, language: c.language })] }, c.cellId)), _jsx(Code, { code: cell.code, language: cell.language }), plots.length > 0 && _jsx("div", { className: "flow-cell-plots", children: plots.map(o => _jsx(CellPlot, { client: client, projectId: snapshot.project.id, cellId: cell.cellId, plot: o.plot }, o.plot)) }), _jsxs("footer", { children: [_jsxs("span", { children: [who(cell.by).name, " \u00B7 ", at(cell.queuedAt)] }), inNotebook && _jsx("button", { className: "text-button", onClick: () => document.getElementById('cell-' + inNotebook)?.scrollIntoView({ block: 'start', behavior: 'smooth' }), children: "Show in the Notebook" })] })] });
+    const inNotebook = (m) => !!m.cell && !!document.getElementById('cell-' + m.cell.cellId);
+    const toCell = (m) => { const element = m.cell && document.getElementById('cell-' + m.cell.cellId); element?.scrollIntoView({ block: 'start', behavior: 'smooth' }); };
+    // A plot shows with the cell that drew it, and a value with who ran that cell and when.
+    const more = (node) => {
+        const cell = node.made.at(-1)?.cell && byCell.get(node.made.at(-1).cell.cellId);
+        if (!cell)
+            return null;
+        const plots = node.kind === 'plot' ? cell.outputs.filter(o => o.kind === 'plot') : [];
+        return _jsxs(_Fragment, { children: [plots.length > 0 && _jsx("div", { className: "flow-cell-plots", children: plots.map(o => _jsx(CellPlot, { client: client, projectId: projectId, cellId: cell.cellId, plot: o.plot }, o.plot)) }), _jsxs("p", { className: "lin-who", children: ["Ran for ", who(cell.by).name, " at ", at(cell.queuedAt)] })] });
+    };
+    const unknown = cells.some(c => c.state !== 'queued' && c.state !== 'running' && c.used === undefined);
+    return _jsxs("div", { className: "nb-pane flow-pane", "aria-labelledby": id, children: [_jsxs("header", { className: "flow-head", children: [_jsx("h2", { id: id, className: "nb-pane-state", children: session ? _jsxs(_Fragment, { children: [_jsx("span", { className: 'nb-dot ' + session.state, "aria-hidden": "true" }), [versionOf(session), whereOf(session), session.state === 'busy' ? 'running a cell' : session.state === 'starting' ? 'starting' : 'idle'].filter(Boolean).join(' · ')] }) : 'Data flow' }), live.length > 1 && _jsx("div", { className: "nb-tabs", role: "group", "aria-label": "Session", children: live.map(l => _jsx("button", { "aria-pressed": l === shown, onClick: () => setChosen(l), children: languageName[l] }, l)) })] }), !session || !graph ? _jsx("p", { className: "nb-empty-line", children: "No live session. Once a cell runs in R or Python, this shows how each of its values came about: the files and values it comes from, and what comes of it." })
+                : !graph.nodes.size ? _jsxs("p", { className: "nb-empty-line", children: ["Nothing made in ", languageName[session.language], " yet."] })
+                    : _jsxs(_Fragment, { children: [_jsx("p", { className: "flow-lede", children: "From the files the session read, at the top, to what it wrote and plotted, at the bottom." }), _jsx(Lineage, { graph: graph, language: session.language, facts: facts, pinned: true, onObject: onObject && (name => onObject(session.language, name)), onPath: session.place ? (onRemote && (file => onRemote(session.place.placeId, file))) : onPath, folders: !!session.place, onGo: toCell, canGo: inNotebook, more: more }, session.sessionId), unknown && _jsx("p", { className: "nb-note", children: "Cells run before Rho kept what each cell read show what they made, without what it came from." }), graph.omitted.values + graph.omitted.plots + graph.omitted.files > 0 && _jsxs("p", { className: "nb-note", children: ["Not drawn: ", [graph.omitted.values && `${graph.omitted.values} older ${graph.omitted.values === 1 ? 'value' : 'values'}`, graph.omitted.plots && `${graph.omitted.plots} older ${graph.omitted.plots === 1 ? 'plot' : 'plots'}`, graph.omitted.files && `${graph.omitted.files} older written ${graph.omitted.files === 1 ? 'file' : 'files'}`].filter(Boolean).join(', '), "."] }), session.variablesOmitted > 0 && _jsxs("p", { className: "nb-note", children: [session.variablesOmitted, " more ", session.variablesOmitted === 1 ? 'value' : 'values', " in the session are not listed."] })] })] });
 }
 function CellPlot({ client, projectId, cellId, plot }) {
     const { src, problem } = usePlot(client, projectId, cellId, plot);
@@ -90,38 +209,16 @@ function CellPlot({ client, projectId, cellId, plot }) {
         return _jsxs("p", { className: "nb-note", children: ["This plot could not be read. ", problem] });
     return src ? _jsx("img", { src: src, alt: `Plot ${plot + 1}` }) : _jsx("span", { className: "nb-plot-wait", "aria-label": "Reading the plot" });
 }
-// The lines in the margin, measured from where the page put the boxes, again as the view or a box
-// changes size: out of the box at the line that made a value, along its lane, and into the head of
-// each box that read it.
-function useLinks(canvas, graph, lane, gutter) {
-    const [lines, setLines] = useState([]);
-    const [size, setSize] = useState(0);
-    useEffect(() => {
-        const element = canvas.current;
-        if (!element)
-            return;
-        const observer = new ResizeObserver(() => setSize(s => s + 1));
-        observer.observe(element);
-        for (const child of element.querySelectorAll('.flow-step'))
-            observer.observe(child);
-        return () => observer.disconnect();
-    }, [canvas, graph]);
-    useLayoutEffect(() => {
-        const element = canvas.current;
-        if (!element)
-            return;
-        const origin = element.getBoundingClientRect(), r = 5, f = (n) => n.toFixed(1);
-        const next = graph.links.flatMap(link => {
-            const out = element.querySelector(`[data-node="${CSS.escape(link.from)}"]`), box = out?.closest('.flow-step');
-            const into = element.querySelector(`[data-step="${CSS.escape(link.to)}"]`), head = into?.querySelector('.flow-step-head');
-            if (!out || !box || !into || !head)
-                return [];
-            const sy = out.getBoundingClientRect().top + out.getBoundingClientRect().height / 2 - origin.top, sx = box.getBoundingClientRect().left - origin.left;
-            const ty = head.getBoundingClientRect().top + head.getBoundingClientRect().height / 2 - origin.top, tx = into.getBoundingClientRect().left - origin.left - 1;
-            const x = gutter - 8 - (lane.get(link.from) % flowLimits.lanes) * lanePx;
-            return [{ key: link.from + '>' + link.to, from: link.from, to: link.to, d: `M${f(sx)} ${f(sy)} H${f(x + r)} Q${f(x)} ${f(sy)} ${f(x)} ${f(sy + r)} V${f(ty - r)} Q${f(x)} ${f(ty)} ${f(x + r)} ${f(ty)} H${f(tx)}` }];
-        });
-        setLines(now => JSON.stringify(now) === JSON.stringify(next) ? now : next);
-    }, [canvas, graph, lane, gutter, size]);
-    return lines;
+// A script's values, read from its text, for a page that shows the script: its editor follows
+// the value chosen (marking the lines behind it) and goes to where a value is made.
+export function ScriptFlowView({ shell, ...props }) {
+    return withShell(shell, _jsx(Lineage, { ...props, code: false, pinned: true, hint: "Read from the code; nothing runs. The code marks the same path." }));
+}
+// A cell that makes its values over several statements shows how, as its script would.
+export const innerFlowLimits = { values: 3 };
+export function CellScriptFlow({ code, language }) {
+    const graph = useMemo(() => scriptGraph(scriptFlow(code, language), language), [code, language]);
+    if ([...graph.nodes.values()].filter(n => n.kind !== 'input').length < innerFlowLimits.values)
+        return null;
+    return _jsxs("details", { className: "flow-inner", children: [_jsx("summary", { children: "How its values came about" }), _jsx(Lineage, { graph: graph, language: language })] });
 }

package/node_modules/@rho-workspace/plugin-kernel/dist/ui-notebook-work.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { Icon } from './ui-icons.js';
 import { askCell } from './ui-notebook-target.js';
-import { call, agentName, when } from './ui-base.js';
+import { call, agentName, when, versionOf } from './ui-base.js';
 // What was done in the project's live sessions, for the Overview: where each session with cells
 // runs and what it holds, and the newest cells by their purpose. Work done only in the Notebook,
 // on this machine or on a server, is work. One small read follows the project's records; a read
@@ -23,7 +23,6 @@ export function useNotebookWork(client, projectId, cursor, enabled) {
     }, [client, projectId, cursor, enabled]);
     return { ...state, cells: state.read ? state.read.cells.length + state.read.omitted : 0 };
 }
-const versionOf = (s) => s.version?.replace(/^R version (\S+).*$/, 'R $1') ?? (s.language === 'r' ? 'R' : 'Python');
 const firstLine = (code) => code.split('\n').map(line => line.trim()).find(line => line && !line.startsWith('#')) ?? 'A cell';
 export function NotebookWorkSection({ work, snapshot, onOpen }) {
     const { read, problem, cells } = work;

package/node_modules/@rho-workspace/plugin-kernel/dist/ui-notebook.d.ts

@@ -1,4 +1,6 @@
-import { type KernelShell, type SessionScope, type UiClient, type UiSnapshot, type KernelOutputs } from './ui-base.js';
+import { type CellRelations } from './lineage.js';
+import { versionOf, type KernelShell, type SessionScope, type UiClient, type UiSnapshot, type KernelOutputs } from './ui-base.js';
+export { versionOf };
 type Read = KernelOutputs['kernel.read'];
 export type Cell = Read['cells'][number];
 export type Session = Read['sessions'][number];
@@ -13,7 +15,6 @@ export declare const notebookViewLimits: {
     cachedPlots: number;
     wideViewPx: number;
 };
-export declare const versionOf: (session: Session) => string;
 export declare const at: (iso: string) => string;
 interface Author {
     name: string;
@@ -39,6 +40,13 @@ export declare function Code({ code, language }: {
     code: string;
     language: Language;
 }): import("react").JSX.Element;
+export declare const relationLimits: {
+    cells: number;
+};
+export declare function useRelations(cells: Cell[]): {
+    bySession: Map<string, CellRelations>;
+    all: CellRelations;
+};
 export { FormSwitch, type NotebookForm } from './ui-notebook-form.js';
 import type { NotebookForm } from './ui-notebook-form.js';
 export interface Prepared {