Spaces:

FireRedTeam
/

FireRed-OpenStoryline

Running

FireRed-OpenStoryline / web /node_map /node_map.html

xusijie

Clean branch for HF push

06ba7ea 17 days ago

31.9 kB

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>Workflow Node Map</title>
	<style>
	:root{
	--bg:#0f0f0f;
	--panel:#171717;
	--panel2:#1f1f1f;
	--text:#eaeaea;
	--muted:#b5b5b5;
	--border:#2c2c2c;
	--edge:#8a8a8a;
	--edge-muted:#3f3f3f;
	--shadow: 0 10px 30px rgba(0,0,0,.35);
	--radius: 12px;
	--mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	--sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
	}
	*{ box-sizing:border-box; }
	html,body{ height:100%; }
	body{
	margin:0;
	background:var(--bg);
	color:var(--text);
	font-family:var(--sans);
	overflow:hidden;
	}

	/* Topbar */
	#topbar{
	height:56px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:0 14px;
	border-bottom:1px solid var(--border);
	background:linear-gradient(to bottom, #121212, #0f0f0f);
	}
	#titleBlock{
	display:flex;
	flex-direction:column;
	gap:2px;
	min-width: 220px;
	}
	#wfName{
	font-weight:650;
	font-size:14px;
	letter-spacing:.2px;
	line-height:1.1;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	}
	#wfDesc{
	font-size:12px;
	color:var(--muted);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	max-width: 54vw;
	}
	#controls{
	display:flex;
	align-items:center;
	gap:10px;
	}
	.btn{
	appearance:none;
	background:transparent;
	color:var(--text);
	border:1px solid var(--border);
	border-radius:10px;
	padding:8px 10px;
	font-size:12px;
	cursor:pointer;
	transition:transform .05s ease, border-color .2s ease, background .2s ease;
	user-select:none;
	}
	.btn:hover{ border-color:#3a3a3a; background:#141414; }
	.btn:active{ transform: translateY(1px); }
	.sep{ width:1px; height:20px; background:var(--border); margin:0 2px; }

	#hint{
	font-size:12px;
	color:var(--muted);
	user-select:none;
	white-space:nowrap;
	}

	/* Viewport + canvas */
	#viewport{
	height: calc(100vh - 56px);
	overflow:auto;
	position:relative;
	}
	#canvas{
	position:relative;
	/*
	IMPORTANT: the workflow can have many depth columns; nodes may extend wider/taller
	than the initial minimum. We keep a safe base size here, and JS will expand the
	canvas to fit all nodes so edges/arrow coordinates stay 1:1 with pixels.
	*/
	min-width: 2600px;
	min-height: 1600px;
	padding: 24px;
	box-sizing: border-box;
	}

	/* Edges svg */
	#edges{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	pointer-events:none;
	overflow:visible;
	z-index: 1;
	}
	.edge{
	stroke: var(--edge);
	stroke-width: 1.6;
	fill: none;
	opacity: .85;
	}
	.edge.dim{ opacity:.18; }
	.edge.highlight{ opacity:1; stroke-width:2.2; }

	/* Nodes */
	.node{
	position:absolute;
	width: 340px;
	background: var(--panel);
	border:1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	z-index: 2;
	user-select:none;
	touch-action: none;
	}
	.node:focus{ outline:none; box-shadow: 0 0 0 2px #3a3a3a, var(--shadow); }

	.node-header{
	padding: 12px 12px 10px;
	border-bottom:1px solid var(--border);
	background: var(--panel2);
	border-top-left-radius: var(--radius);
	border-top-right-radius: var(--radius);
	cursor: grab;
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:10px;
	}
	.node-header:active{ cursor: grabbing; }

	/* Title + collapsed description stack */
	.node-titlewrap{
	display:flex;
	flex-direction:column;
	gap:2px;
	min-width:0;
	flex: 1 1 auto;
	}

	.node-title{
	font-weight: 650;
	font-size: 13px;
	line-height: 1.2;
	letter-spacing: .2px;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	}

	/* Collapsed-state description (smaller font) */
	.node-desc-collapsed{
	display:none;
	font-size: 11px;
	line-height: 1.25;
	color: var(--muted);
	opacity: .92;
	overflow:hidden;
	text-overflow:ellipsis;
	}
	.node-desc-collapsed:empty{ display:none !important; }
	.node.collapsed .node-desc-collapsed{
	display:block; /* fallback */
	display:-webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	}

	.node-badges{
	display:flex;
	align-items:center;
	gap:6px;
	flex: 0 0 auto;
	}
	.badge{
	font-family: var(--mono);
	font-size: 10px;
	padding: 2px 6px;
	border-radius: 999px;
	border:1px solid var(--border);
	color: var(--muted);
	background: #141414;
	max-width: 120px;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	}

	.node-body{
	padding: 12px;
	display:block;
	font-size: 12px;
	line-height: 1.35;
	color: var(--text);
	}
	.node.collapsed .node-body{
	display:none;
	}
	.node.collapsed .node-header{
	border-bottom: none;
	}
	.node-meta{
	color: var(--muted);
	font-size: 11px;
	margin-bottom: 10px;
	font-family: var(--mono);
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	}
	.kv{
	border:1px solid var(--border);
	padding: 3px 6px;
	border-radius: 8px;
	background:#121212;
	}

	.section{
	margin-top: 10px;
	border-top: 1px dashed #2e2e2e;
	padding-top: 10px;
	}
	.section h4{
	margin: 0 0 8px;
	font-size: 11px;
	letter-spacing: .2px;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 650;
	}
	.desc{
	color: var(--text);
	margin: 0 0 8px;
	opacity: .95;
	}
	.pillRow{
	display:flex;
	flex-wrap:wrap;
	gap:6px;
	}
	.pill{
	font-size: 11px;
	color: var(--muted);
	border:1px solid var(--border);
	background:#121212;
	border-radius: 999px;
	padding: 3px 8px;
	font-family: var(--mono);
	}
	.empty{
	color: var(--muted);
	font-style: italic;
	font-size: 11px;
	}

	table.schema{
	width:100%;
	border-collapse: collapse;
	table-layout: fixed;
	border:1px solid var(--border);
	border-radius: 10px;
	overflow:hidden;
	}
	table.schema thead th{
	background:#121212;
	color: var(--muted);
	font-size: 10px;
	letter-spacing: .2px;
	text-transform: uppercase;
	padding: 8px 8px;
	border-bottom: 1px solid var(--border);
	font-weight: 650;
	}
	table.schema td{
	padding: 8px 8px;
	border-bottom: 1px solid #242424;
	vertical-align: top;
	word-break: break-word;
	}
	table.schema tr:last-child td{ border-bottom:none; }
	.mono{ font-family: var(--mono); }
	.right{ text-align:right; }
	.small{ font-size: 11px; color: var(--muted); }

	/* Hover highlighting */
	.node:hover{ border-color:#3a3a3a; }
	.node.dragging{ opacity: .95; border-color:#4a4a4a; }

	/* Loading / error */
	#overlay{
	position:absolute;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	z-index: 10;
	background: rgba(0,0,0,.35);
	backdrop-filter: blur(3px);
	}
	#overlay.hidden{ display:none; }
	#overlayCard{
	width:min(560px, 92vw);
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 16px;
	box-shadow: var(--shadow);
	}
	#overlayTitle{
	font-weight: 650;
	font-size: 14px;
	margin:0 0 8px;
	}
	#overlayText{
	margin:0;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.4;
	font-family: var(--mono);
	white-space: pre-wrap;
	}
	</style>
	</head>
	<body>
	<div id="topbar">
	<div id="titleBlock">
	<div id="wfName">Workflow Node Map</div>
	<div id="wfDesc">Reads workflow.json and renders a draggable node map (minimal grayscale).</div>
	</div>

	<div id="controls">
	<button class="btn" id="btnExpand">Expand All</button>
	<button class="btn" id="btnCollapse">Collapse All</button>
	<div class="sep"></div>
	<button class="btn" id="btnReset">Reset Layout</button>
	<div class="sep"></div>
	<div id="hint">Tip: drag nodes; click the header to expand/collapse.</div>
	</div>
	</div>

	<div id="viewport">
	<div id="canvas">
	<svg id="edges" aria-hidden="true">
	<defs>
	<marker id="arrowHead" markerWidth="10" markerHeight="10" refX="8.7" refY="3" orient="auto" markerUnits="strokeWidth">
	<path d="M0,0 L9,3 L0,6 Z" fill="var(--edge)"></path>
	</marker>
	</defs>
	</svg>
	</div>

	<div id="overlay">
	<div id="overlayCard">
	<p id="overlayTitle">Loading…</p>
	<p id="overlayText">Reading JSON and rendering nodes…</p>
	</div>
	</div>
	</div>

	<script>
	(function(){
	const SVG_NS = "http://www.w3.org/2000/svg";

	const viewport = document.getElementById("viewport");
	const canvas = document.getElementById("canvas");
	const edgesSvg = document.getElementById("edges");

	const overlay = document.getElementById("overlay");
	const overlayTitle = document.getElementById("overlayTitle");
	const overlayText = document.getElementById("overlayText");

	const wfNameEl = document.getElementById("wfName");
	const wfDescEl = document.getElementById("wfDesc");

	const btnExpand = document.getElementById("btnExpand");
	const btnCollapse = document.getElementById("btnCollapse");
	const btnReset = document.getElementById("btnReset");

	const params = new URLSearchParams(location.search);
	const DATA_URL = params.get("data") \|\| "node_map/workflow.json";

	const state = {
	data: null,
	nodesById: new Map(),
	nodeEls: new Map(),
	edges: [], // {from,to,el}
	layoutKey: null,
	saveTimer: null
	};

	function escapeHtml(s){
	return String(s)
	.replaceAll("&","&")
	.replaceAll("<","<")
	.replaceAll(">",">")
	.replaceAll('"',""")
	.replaceAll("'","'");
	}

	function formatValue(v){
	if (v === undefined) return "";
	if (v === null) return "null";
	if (typeof v === "string") return v;
	try { return JSON.stringify(v); } catch (e) { return String(v); }
	}

	function setOverlay(title, text, hidden){
	overlayTitle.textContent = title \|\| "";
	overlayText.textContent = text \|\| "";
	overlay.classList.toggle("hidden", !!hidden);
	}

	function computeDepths(nodes){
	const byId = new Map(nodes.map(n => [n.id, n]));
	const depth = new Map(nodes.map(n => [n.id, 0]));

	// Relaxation: depth(n) = max(depth(dep)+1)
	const MAX_ITERS = nodes.length + 5;
	for(let i=0;i<MAX_ITERS;i++){
	let changed = false;
	for(const n of nodes){
	const deps = Array.isArray(n.dependencies) ? n.dependencies : [];
	if(!deps.length) continue;
	let maxD = 0;
	for(const depId of deps){
	if(!byId.has(depId)) continue;
	maxD = Math.max(maxD, (depth.get(depId) \|\| 0) + 1);
	}
	if(maxD !== (depth.get(n.id) \|\| 0)){
	depth.set(n.id, maxD);
	changed = true;
	}
	}
	if(!changed) break;
	}
	return depth;
	}

	function autoLayout(nodes){
	const depth = computeDepths(nodes);
	const cols = new Map(); // depth -> array of node ids
	for(const n of nodes){
	const d = depth.get(n.id) \|\| 0;
	if(!cols.has(d)) cols.set(d, []);
	cols.get(d).push(n.id);
	}
	// Stable sort by name within each column
	for(const [d, arr] of cols){
	arr.sort((a,b)=>{
	const na = state.nodesById.get(a)?.name \|\| a;
	const nb = state.nodesById.get(b)?.name \|\| b;
	return na.localeCompare(nb);
	});
	}

	const columnWidth = 420;
	const rowHeight = 170;

	const positions = {};
	const depths = Array.from(cols.keys()).sort((a,b)=>a-b);
	for(const d of depths){
	const arr = cols.get(d);
	for(let i=0;i<arr.length;i++){
	const id = arr[i];
	positions[id] = {
	x: 40 + d * columnWidth,
	y: 40 + i * rowHeight
	};
	}
	}
	return positions;
	}

	// Ensure the scrollable canvas is big enough to contain all nodes.
	// This avoids SVG scaling issues (arrows not landing on cards) and keeps
	// the whole graph reachable via scroll.
	function ensureCanvasSize(){
	const BASE_W = 2600;
	const BASE_H = 1600;
	const EXTRA = 260; // breathing room to the right/bottom

	if(!state.nodeEls \|\| state.nodeEls.size === 0) return;

	let maxRight = 0;
	let maxBottom = 0;

	for(const el of state.nodeEls.values()){
	const left = parseFloat(el.style.left \|\| "0") \|\| 0;
	const top = parseFloat(el.style.top \|\| "0") \|\| 0;
	const right = left + el.offsetWidth;
	const bottom = top + el.offsetHeight;
	maxRight = Math.max(maxRight, right);
	maxBottom = Math.max(maxBottom, bottom);
	}

	const desiredW = Math.max(BASE_W, Math.ceil(maxRight + EXTRA));
	const desiredH = Math.max(BASE_H, Math.ceil(maxBottom + EXTRA));

	// Only expand; do not shrink automatically to avoid jarring jumps.
	const currentW = canvas.clientWidth \|\| 0;
	const currentH = canvas.clientHeight \|\| 0;

	if(desiredW > currentW) canvas.style.width = desiredW + "px";
	if(desiredH > currentH) canvas.style.height = desiredH + "px";
	}

	function loadLayout(){
	if(!state.layoutKey) return null;
	try{
	const raw = localStorage.getItem(state.layoutKey);
	if(!raw) return null;
	return JSON.parse(raw);
	}catch(e){
	return null;
	}
	}

	function saveLayoutDebounced(){
	if(!state.layoutKey) return;
	clearTimeout(state.saveTimer);
	state.saveTimer = setTimeout(saveLayout, 120);
	}

	function saveLayout(){
	if(!state.layoutKey) return;
	const positions = {};
	const collapsed = {};
	for(const [id, el] of state.nodeEls){
	positions[id] = {
	x: parseFloat(el.style.left \|\| "0"),
	y: parseFloat(el.style.top \|\| "0")
	};
	collapsed[id] = el.classList.contains("collapsed");
	}
	const payload = { positions, collapsed };
	try{
	localStorage.setItem(state.layoutKey, JSON.stringify(payload));
	}catch(e){
	// ignore quota errors
	}
	}

	function resetLayout(){
	if(state.layoutKey){
	localStorage.removeItem(state.layoutKey);
	}
	const positions = autoLayout(state.data.nodes);
	for(const n of state.data.nodes){
	const el = state.nodeEls.get(n.id);
	if(!el) continue;
	const p = positions[n.id] \|\| {x:40,y:40};
	el.style.left = p.x + "px";
	el.style.top = p.y + "px";
	}
	ensureCanvasSize();
	updateAllEdges();
	}

	function schemaTable(schema){
	if(!Array.isArray(schema) \|\| schema.length === 0){
	return '<div class="empty">—</div>';
	}
	const rows = schema.map(f => {
	const name = escapeHtml(f.name ?? "");
	const type = escapeHtml(f.type ?? "");
	const def = escapeHtml(formatValue(f.default ?? ""));
	const opts = Array.isArray(f.options) ? escapeHtml(f.options.join(", ")) : "";
	const desc = escapeHtml(f.description ?? "");
	return `<tr>
	<td class="mono">${name}</td>
	<td class="mono">${type}</td>
	<td class="mono">${def}</td>
	<td class="mono">${opts}</td>
	<td>${desc}</td>
	</tr>`;
	}).join("");
	return `<table class="schema">
	<thead><tr>
	<th class="right">name</th>
	<th>type</th>
	<th>default</th>
	<th>options</th>
	<th>description</th>
	</tr></thead>
	<tbody>${rows}</tbody>
	</table>`;
	}

	function pillList(ids){
	if(!Array.isArray(ids) \|\| ids.length === 0){
	return '<div class="empty">—</div>';
	}
	const pills = ids.map(id => `<span class="pill">${escapeHtml(id)}</span>`).join("");
	return `<div class="pillRow">${pills}</div>`;
	}

	function nodeBodyHtml(node){
	const meta = `
	<div class="node-meta">
	<span class="kv">id: ${escapeHtml(node.id)}</span>
	<span class="kv">kind: ${escapeHtml(node.kind ?? "")}</span>
	<span class="kv">pro: ${node.pro ? "true" : "false"}</span>
	</div>
	`;

	const desc = node.description ? `<p class="desc">${escapeHtml(node.description)}</p>` : '';

	const deps = `
	<div class="section">
	<h4>Dependencies</h4>
	${pillList(node.dependencies)}
	</div>
	`;

	const nexts = `
	<div class="section">
	<h4>Next Nodes</h4>
	${pillList(node.next_nodes)}
	</div>
	`;

	const input = `
	<div class="section">
	<h4>Input Schema</h4>
	${schemaTable(node.input_schema)}
	</div>
	`;

	const output = `
	<div class="section">
	<h4>Output Schema</h4>
	${schemaTable(node.output_schema)}
	</div>
	`;

	return meta + desc + deps + nexts + input + output;
	}

	function createNodeEl(node){
	const el = document.createElement("div");
	el.className = "node collapsed";
	el.tabIndex = 0;
	el.dataset.id = node.id;

	const header = document.createElement("div");
	header.className = "node-header";

	const titleWrap = document.createElement("div");
	titleWrap.className = "node-titlewrap";

	const title = document.createElement("div");
	title.className = "node-title";
	title.textContent = node.name \|\| node.id;

	const descCollapsed = document.createElement("div");
	descCollapsed.className = "node-desc-collapsed";
	descCollapsed.textContent = node.description \|\| "";

	titleWrap.appendChild(title);
	titleWrap.appendChild(descCollapsed);

	const badges = document.createElement("div");
	badges.className = "node-badges";
	// Badges intentionally hidden in collapsed state requirement: keep only tool name visible.
	// We show badges only when expanded, by toggling their visibility in JS.
	const badgeKind = document.createElement("span");
	badgeKind.className = "badge";
	badgeKind.textContent = node.kind \|\| "node";
	const badgePro = document.createElement("span");
	badgePro.className = "badge";
	badgePro.textContent = node.pro ? "PRO" : "NORMAL";
	badges.appendChild(badgeKind);
	badges.appendChild(badgePro);

	header.appendChild(titleWrap);
	header.appendChild(badges);

	const body = document.createElement("div");
	body.className = "node-body";
	body.innerHTML = nodeBodyHtml(node);

	el.appendChild(header);
	el.appendChild(body);

	// Collapsed view: hide badges; keep title + description visible.
	badges.style.display = "none";

	attachDragAndToggle(el, header, badges);

	// Hover highlights
	el.addEventListener("mouseenter", () => highlightConnections(node.id, true));
	el.addEventListener("mouseleave", () => highlightConnections(node.id, false));

	return el;
	}

	function setCollapsed(el, collapsed){
	const header = el.querySelector(".node-header");
	const badges = header.querySelector(".node-badges");
	el.classList.toggle("collapsed", !!collapsed);
	badges.style.display = collapsed ? "none" : "flex";
	}

	function toggleNode(el){
	const collapsed = el.classList.contains("collapsed");
	setCollapsed(el, !collapsed);
	// Expanding/collapsing changes node height; keep the canvas large enough.
	ensureCanvasSize();
	// Canvas/SVG size may change, so update all edges (also refreshes SVG viewBox).
	updateAllEdges();
	saveLayoutDebounced();
	}

	function attachDragAndToggle(el, header, badges){
	let startX = 0, startY = 0;
	let originLeft = 0, originTop = 0;
	let dragging = false;

	const DRAG_THRESHOLD = 4;

	header.addEventListener("pointerdown", (e) => {
	if(e.button !== 0) return;
	header.setPointerCapture(e.pointerId);
	dragging = false;
	startX = e.clientX;
	startY = e.clientY;

	const canvasRect = canvas.getBoundingClientRect();
	const rect = el.getBoundingClientRect();
	originLeft = rect.left - canvasRect.left;
	originTop = rect.top - canvasRect.top;

	el.classList.add("dragging");
	e.preventDefault();
	});

	header.addEventListener("pointermove", (e) => {
	if(!header.hasPointerCapture(e.pointerId)) return;

	const dx = e.clientX - startX;
	const dy = e.clientY - startY;

	if(!dragging && (Math.abs(dx) + Math.abs(dy) > DRAG_THRESHOLD)){
	dragging = true;
	}

	if(dragging){
	// Keep nodes inside the 0,0 quadrant so the scroll area is always reachable.
	const newLeft = Math.max(0, originLeft + dx);
	const newTop = Math.max(0, originTop + dy);
	el.style.left = newLeft + "px";
	el.style.top = newTop + "px";
	updateEdgesForNode(el.dataset.id);
	}
	});

	function endPointer(e){
	if(!header.hasPointerCapture(e.pointerId)) return;
	header.releasePointerCapture(e.pointerId);
	el.classList.remove("dragging");

	if(!dragging){
	// Click without drag -> toggle
	toggleNode(el);
	}else{
	// Dragging may move nodes beyond current canvas bounds.
	ensureCanvasSize();
	saveLayoutDebounced();
	}
	}

	header.addEventListener("pointerup", endPointer);
	header.addEventListener("pointercancel", endPointer);

	// Keyboard toggle
	el.addEventListener("keydown", (e) => {
	if(e.key === "Enter" \|\| e.key === " "){
	e.preventDefault();
	toggleNode(el);
	}
	});
	}

	function addEdge(fromId, toId, dedupe){
	if(!state.nodesById.has(fromId) \|\| !state.nodesById.has(toId)) return;
	const key = fromId + "→" + toId;
	if(dedupe.has(key)) return;
	dedupe.add(key);

	const path = document.createElementNS(SVG_NS, "path");
	path.classList.add("edge");
	path.setAttribute("marker-end", "url(#arrowHead)");
	path.dataset.from = fromId;
	path.dataset.to = toId;
	edgesSvg.appendChild(path);

	state.edges.push({ from: fromId, to: toId, el: path });
	}

	function buildEdges(){
	// Remove existing
	state.edges = [];
	// Keep defs (arrow marker)
	const defs = edgesSvg.querySelector("defs");
	edgesSvg.innerHTML = "";
	edgesSvg.appendChild(defs);

	const dedupe = new Set();
	for(const node of state.data.nodes){
	const deps = Array.isArray(node.dependencies) ? node.dependencies : [];
	for(const depId of deps){
	addEdge(depId, node.id, dedupe);
	}
	const nexts = Array.isArray(node.next_nodes) ? node.next_nodes : [];
	for(const nxt of nexts){
	addEdge(node.id, nxt, dedupe);
	}
	}
	}

	function rectInCanvas(el){
	/*
	IMPORTANT:
	Use the SVG element as the coordinate reference, not `canvas.scrollWidth`.
	If the workflow spans wider than the base canvas size, using scrollWidth in
	the SVG viewBox would introduce a scale factor and arrows would drift away
	from cards.

	Here we measure everything in CSS pixels relative to the SVG viewport.
	*/
	const svgRect = edgesSvg.getBoundingClientRect();
	const r = el.getBoundingClientRect();

	const left = r.left - svgRect.left;
	const top = r.top - svgRect.top;
	const width = r.width;
	const height = r.height;

	return {
	left,
	top,
	width,
	height,
	right: left + width,
	bottom: top + height,
	cx: left + width/2,
	cy: top + height/2
	};
	}

	function anchorPoint(rect, side){
	switch(side){
	case "left": return { x: rect.left, y: rect.cy };
	case "right": return { x: rect.right, y: rect.cy };
	case "top": return { x: rect.cx, y: rect.top };
	case "bottom": return { x: rect.cx, y: rect.bottom };
	default: return { x: rect.cx, y: rect.cy };
	}
	}

	function edgePath(fromRect, toRect){
	const dx = toRect.cx - fromRect.cx;
	const dy = toRect.cy - fromRect.cy;

	const horizontal = Math.abs(dx) >= Math.abs(dy);

	let fromSide, toSide;
	if(horizontal){
	fromSide = dx >= 0 ? "right" : "left";
	toSide = dx >= 0 ? "left" : "right";
	}else{
	fromSide = dy >= 0 ? "bottom" : "top";
	toSide = dy >= 0 ? "top" : "bottom";
	}

	const p1 = anchorPoint(fromRect, fromSide);
	const p2 = anchorPoint(toRect, toSide);

	// Bezier control points
	const curvature = 0.55;
	let c1, c2;

	if(horizontal){
	const d = Math.max(60, Math.abs(p2.x - p1.x) * curvature);
	c1 = { x: p1.x + (fromSide === "right" ? d : -d), y: p1.y };
	c2 = { x: p2.x + (toSide === "left" ? -d : d), y: p2.y };
	}else{
	const d = Math.max(60, Math.abs(p2.y - p1.y) * curvature);
	c1 = { x: p1.x, y: p1.y + (fromSide === "bottom" ? d : -d) };
	c2 = { x: p2.x, y: p2.y + (toSide === "top" ? -d : d) };
	}

	return `M ${p1.x.toFixed(1)} ${p1.y.toFixed(1)} C ${c1.x.toFixed(1)} ${c1.y.toFixed(1)}, ${c2.x.toFixed(1)} ${c2.y.toFixed(1)}, ${p2.x.toFixed(1)} ${p2.y.toFixed(1)}`;
	}

	function updateEdge(edge){
	const fromEl = state.nodeEls.get(edge.from);
	const toEl = state.nodeEls.get(edge.to);
	if(!fromEl \|\| !toEl) return;

	const fromRect = rectInCanvas(fromEl);
	const toRect = rectInCanvas(toEl);

	edge.el.setAttribute("d", edgePath(fromRect, toRect));
	}

	function updateAllEdges(){
	// Keep SVG user units == CSS pixels (no implicit scaling).
	const w = Math.max(1, edgesSvg.clientWidth);
	const h = Math.max(1, edgesSvg.clientHeight);
	edgesSvg.setAttribute("viewBox", `0 0 ${w} ${h}`);
	for(const e of state.edges) updateEdge(e);
	}

	function updateEdgesForNode(nodeId){
	for(const e of state.edges){
	if(e.from === nodeId \|\| e.to === nodeId){
	updateEdge(e);
	}
	}
	}

	function highlightConnections(nodeId, on){
	for(const e of state.edges){
	const connected = (e.from === nodeId \|\| e.to === nodeId);
	e.el.classList.toggle("dim", on && !connected);
	e.el.classList.toggle("highlight", on && connected);
	}
	}

	function collapseAll(){
	for(const [id, el] of state.nodeEls){
	setCollapsed(el, true);
	}
	updateAllEdges();
	saveLayoutDebounced();
	}

	function expandAll(){
	for(const [id, el] of state.nodeEls){
	setCollapsed(el, false);
	}
	updateAllEdges();
	saveLayoutDebounced();
	}

	btnCollapse.addEventListener("click", collapseAll);
	btnExpand.addEventListener("click", expandAll);
	btnReset.addEventListener("click", resetLayout);

	async function main(){
	setOverlay("Loading…", `fetch("${DATA_URL}")`, false);

	let data;
	try{
	const resp = await fetch(DATA_URL, { cache: "no-store" });
	if(!resp.ok) throw new Error(`HTTP ${resp.status}`);
	data = await resp.json();
	}catch(err){
	setOverlay("Load failed", [
	"Unable to load the JSON file.",
	"If you opened index.html directly (file://), your browser may block fetch().",
	"",
	"Tip: run a local static server in this folder, for example:",
	" python -m http.server 8000",
	"Then open:",
	" http://localhost:8000/index.html",
	"",
	"Error:",
	String(err)
	].join("\n"), false);
	return;
	}

	state.data = data;
	state.layoutKey = "node_layout_" + (data.workflow_meta?.id \|\| "workflow");
	state.nodesById = new Map((data.nodes \|\| []).map(n => [n.id, n]));

	wfNameEl.textContent = data.workflow_meta?.name \|\| "Workflow Node Map";
	wfDescEl.textContent = data.workflow_meta?.description \|\| `data: ${DATA_URL}`;
	document.title = wfNameEl.textContent;

	// Build nodes
	const saved = loadLayout();
	const positions = saved?.positions \|\| autoLayout(data.nodes \|\| []);
	const collapsed = saved?.collapsed \|\| null;

	// Clear existing nodes but keep svg
	Array.from(canvas.querySelectorAll(".node")).forEach(n => n.remove());

	for(const node of (data.nodes \|\| [])){
	const el = createNodeEl(node);
	const p = positions[node.id] \|\| {x:40, y:40};
	el.style.left = p.x + "px";
	el.style.top = p.y + "px";
	const isCollapsed = collapsed ? !!collapsed[node.id] : true;
	setCollapsed(el, isCollapsed);

	canvas.appendChild(el);
	state.nodeEls.set(node.id, el);
	}

	// Make sure the canvas is large enough to contain all nodes before drawing edges.
	ensureCanvasSize();

	// Build edges
	buildEdges();
	// Initial edge layout
	requestAnimationFrame(() => {
	updateAllEdges();
	setOverlay("", "", true);
	});

	// Keep edges updated on window resize
	window.addEventListener("resize", () => updateAllEdges());

	// Optional: keep edges updated while scrolling (helps with some browsers/subpixel issues)
	viewport.addEventListener("scroll", () => {
	// Edges are in canvas, so they scroll together, but updating can avoid minor jitter.
	updateAllEdges();
	}, { passive: true });
	}

	main();
	})();
	</script>
	</body>
	</html>