@tangle-network/sandbox-ui 2.0.21 → 3.0.0

package/dist/record.js

@@ -0,0 +1,270 @@
+import { n as AgentRecord, t as ResearchReport } from "./ResearchReport-CSNpZ-pj.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from "react";
+import { useColorMode } from "@tangle-network/charts/react/agent-graph/presentation";
+import { Controls, Handle, MarkerType, Position, ReactFlow } from "@xyflow/react";
+import { NODE_H, NODE_W, PER_LANE, recordWorkGraphModel } from "@drewstone/agent-record/record";
+// src/record/WorkGraph.tsx
+function RecordCard({ data }) {
+	const node = data.record;
+	return /* @__PURE__ */ jsxs("div", {
+		title: node.title,
+		className: `graph-node kind-${node.kind}`,
+		children: [
+			/* @__PURE__ */ jsx(Handle, {
+				type: "target",
+				position: Position.Left,
+				className: "opacity-0"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "graph-node-title",
+				children: node.title
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "graph-node-sub",
+				children: node.sub
+			}),
+			/* @__PURE__ */ jsx(Handle, {
+				type: "source",
+				position: Position.Right,
+				className: "opacity-0"
+			})
+		]
+	});
+}
+const nodeTypes = { record: RecordCard };
+/** Recorded evidence relationships keep their domain kinds; the maintained graph engine owns the camera and focus. */
+function RecordWorkGraph({ record }) {
+	const graph = useMemo(() => recordWorkGraphModel(record), [record]);
+	const wrapperRef = useRef(null);
+	const colorMode = useColorMode(wrapperRef, graph.nodes.length > 0);
+	const [selected, setSelected] = useState(null);
+	const chosen = selected ? graph.byId.get(selected) : void 0;
+	const adjacent = new Set(chosen ? [chosen.id, ...graph.edges.filter((edge) => edge.from === chosen.id || edge.to === chosen.id).flatMap((edge) => [edge.from, edge.to])] : []);
+	const nodes = useMemo(() => graph.nodes.map((node) => ({
+		id: node.id,
+		type: "record",
+		position: {
+			x: node.x,
+			y: node.y
+		},
+		data: { record: node },
+		width: NODE_W,
+		height: NODE_H,
+		ariaLabel: `${node.kind}: ${node.title}`,
+		domAttributes: {
+			"data-graph-node-id": node.id,
+			"data-graph-node-kind": node.kind,
+			"aria-pressed": node.id === selected
+		},
+		selected: node.id === selected,
+		style: { opacity: selected && !adjacent.has(node.id) ? .35 : 1 }
+	})), [graph, selected]);
+	const edges = useMemo(() => graph.edges.map((edge, i) => ({
+		id: String(i),
+		source: edge.from,
+		target: edge.to,
+		label: edge.kind,
+		markerEnd: { type: MarkerType.ArrowClosed },
+		className: `edge-${edge.kind}`,
+		style: { opacity: selected && edge.from !== selected && edge.to !== selected ? .2 : 1 },
+		data: { kind: edge.kind }
+	})), [graph, selected]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: wrapperRef,
+		className: "agent-record ar-ws",
+		children: /* @__PURE__ */ jsxs("section", {
+			className: "work-graph",
+			"aria-label": graph.title,
+			"data-work-graph": graph.nodes.length,
+			"data-graph-kind": "record",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "graph-main",
+				children: [
+					/* @__PURE__ */ jsxs("header", {
+						className: "graph-head",
+						children: [/* @__PURE__ */ jsx("h2", { children: graph.title }), /* @__PURE__ */ jsx("span", {
+							className: "faint",
+							children: graph.summary
+						})]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "graph-viewport",
+						style: { height: 560 },
+						onKeyDownCapture: (event) => {
+							const target = event.target instanceof Element ? event.target.closest(".react-flow__node[data-id]") : null;
+							const from = target?.dataset.id ? graph.byId.get(target.dataset.id) : void 0;
+							if (!from) return;
+							if (event.key === "Enter" || event.key === " ") {
+								event.preventDefault();
+								event.stopPropagation();
+								setSelected(selected === from.id ? null : from.id);
+								return;
+							}
+							if (![
+								"ArrowLeft",
+								"ArrowRight",
+								"ArrowUp",
+								"ArrowDown"
+							].includes(event.key)) return;
+							const horizontal = event.key === "ArrowLeft" || event.key === "ArrowRight", sign = event.key === "ArrowLeft" || event.key === "ArrowUp" ? -1 : 1;
+							const score = (node) => horizontal ? Math.abs(node.y - from.y) * 4 + Math.abs(node.x - from.x) : Math.abs(node.x - from.x) * 4 + Math.abs(node.y - from.y);
+							const next = graph.nodes.filter((node) => node.id !== from.id && (horizontal ? node.x - from.x : node.y - from.y) * sign > 0).sort((a, b) => score(a) - score(b) || a.id.localeCompare(b.id))[0];
+							if (next) {
+								event.preventDefault();
+								event.stopPropagation();
+								event.currentTarget.querySelector(`.react-flow__node[data-id="${CSS.escape(next.id)}"]`)?.focus();
+							}
+						},
+						children: /* @__PURE__ */ jsx(ReactFlow, {
+							colorMode,
+							nodes,
+							edges,
+							nodeTypes,
+							fitView: true,
+							nodesDraggable: false,
+							nodesConnectable: false,
+							minZoom: .12,
+							maxZoom: 2,
+							onNodeClick: (_, node) => setSelected(selected === node.id ? null : node.id),
+							onPaneClick: () => setSelected(null),
+							children: /* @__PURE__ */ jsx(Controls, { showInteractive: false })
+						}, record.runId)
+					}),
+					Object.keys(graph.hidden).length > 0 && /* @__PURE__ */ jsxs("p", {
+						className: "faint",
+						children: [
+							"Each lane shows its first ",
+							PER_LANE,
+							" results, claims and checks; ",
+							Object.values(graph.hidden).reduce((a, b) => a + b, 0),
+							" more are retained in the record."
+						]
+					}),
+					/* @__PURE__ */ jsx("ul", {
+						className: "graph-legend",
+						children: graph.legend.map((entry) => /* @__PURE__ */ jsx("li", { children: entry.label }, entry.kind))
+					})
+				]
+			}), /* @__PURE__ */ jsx("aside", {
+				className: "graph-side finding-card",
+				"aria-label": "Selected card",
+				children: chosen ? /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx("h3", { children: chosen.kind }),
+					/* @__PURE__ */ jsx("div", {
+						className: "graph-side-title",
+						children: chosen.title
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "faint",
+						children: chosen.sub
+					}),
+					chosen.summary && /* @__PURE__ */ jsx("p", { children: chosen.summary }),
+					/* @__PURE__ */ jsxs("div", {
+						className: "faint",
+						children: [
+							graph.edges.filter((edge) => edge.from === chosen.id).length,
+							" links out · ",
+							graph.edges.filter((edge) => edge.to === chosen.id).length,
+							" links in"
+						]
+					}),
+					chosen.href && /* @__PURE__ */ jsx("a", {
+						href: chosen.href,
+						target: "_blank",
+						rel: "noopener noreferrer",
+						children: "Open source ↗"
+					})
+				] }) : /* @__PURE__ */ jsx("p", {
+					className: "faint",
+					children: "Select a card to see its recorded relationships and details."
+				})
+			})]
+		})
+	});
+}
+// src/record/selection.ts
+/** URL selections only name documents already supplied within the exact play. */
+function readReportLocation(report, search) {
+	const params = new URLSearchParams(search);
+	if ([
+		"play",
+		"document",
+		"line",
+		"view",
+		"agent",
+		"event"
+	].some((key) => params.getAll(key).length > 1)) return { error: "This citation contains an ambiguous selection." };
+	const viewText = params.get("view");
+	if (viewText !== null && ![
+		"results",
+		"activity",
+		"sources"
+	].includes(viewText)) return { error: "Unknown research view." };
+	const view = viewText;
+	const viewOption = view ? { view } : {};
+	const playId = params.get("play") ?? void 0;
+	const path = params.get("document") ?? void 0;
+	const lineText = params.get("line") ?? void 0;
+	const agentId = params.get("agent") ?? void 0;
+	const eventId = params.get("event") ?? void 0;
+	if (!playId && (path !== void 0 || lineText !== void 0 || agentId !== void 0 || eventId !== void 0)) return { error: "A document citation must name its play." };
+	if (!playId) return viewOption;
+	const play = report.plays.find((item) => item.id === playId);
+	if (!play) return { error: "The cited play is not included in this report." };
+	if (agentId !== void 0 || eventId !== void 0) {
+		if (path !== void 0 || lineText !== void 0 || !play.record) return { error: "Activity citation does not match this play." };
+		const node = agentId ? play.record.nodes.find((item) => item.id === agentId) : void 0;
+		const event = eventId ? play.record.events.find((item) => item.id === eventId) : void 0;
+		if (agentId && !node || eventId && !event) return { error: "This activity is not retained in the selected play." };
+		if (event && node) {
+			const observed = play.record.nodes.find((item) => item.id === event.node);
+			if (event.node !== node.id && observed?.agentId !== node.id) return { error: "The event belongs to a different agent." };
+		}
+		return {
+			playId,
+			view: "activity",
+			activity: {
+				runId: play.record.runId,
+				...agentId ? { nodeId: agentId } : {},
+				...eventId ? { eventId } : {}
+			}
+		};
+	}
+	if (path === void 0) return lineText === void 0 ? {
+		playId,
+		...viewOption
+	} : { error: "A line citation must name its document." };
+	if (!play.documents.some((item) => item.path === path)) return { error: "The cited document is not retained in this play." };
+	const line = lineText === void 0 ? void 0 : Number(lineText);
+	if (line !== void 0 && (!/^[1-9]\d*$/.test(lineText) || !Number.isSafeInteger(line))) return { error: "The cited source line must be a positive whole number." };
+	return {
+		playId,
+		...viewOption,
+		document: {
+			playId,
+			path,
+			...line === void 0 ? {} : { line }
+		}
+	};
+}
+function reportLocationSearch(search, playId, document, view, activity) {
+	const params = new URLSearchParams(search);
+	params.set("play", playId);
+	params.delete("document");
+	params.delete("line");
+	params.delete("view");
+	params.delete("agent");
+	params.delete("event");
+	if (activity) {
+		if (activity.nodeId) params.set("agent", activity.nodeId);
+		if (activity.eventId) params.set("event", activity.eventId);
+	}
+	if (view) params.set("view", view);
+	if (document && document.playId === playId) {
+		params.set("document", document.path);
+		if (document.line !== void 0) params.set("line", String(document.line));
+	}
+	return "?" + params.toString();
+}
+export { AgentRecord, RecordWorkGraph, ResearchReport, readReportLocation, reportLocationSearch };