@parallelworks/ui 0.19.0 → 0.19.1

package/dist/graph/DependencyGraph.js

@@ -0,0 +1,1398 @@
+import { useRunFile, useSlots, useStrings, useWorkflowEngine } from "../components/Provider.js";
+import { ArrowLeftIcon, ArrowRightIcon, DocumentIcon } from "../icons.js";
+import { TooltipInfo } from "../components/Tooltip.js";
+import { BareModal, modalPanelClasses } from "../components/BareModal.js";
+import { Indicator } from "../components/Indicator.js";
+import Loader from "../components/Loader.js";
+import { LogViewer } from "../logviewer/LogViewer.js";
+import { toAbsHumanDuration } from "../duration.js";
+import { AnnotationBanner } from "./AnnotationBanner.js";
+import { Collapse } from "./Collapse.js";
+import { Reveal } from "./Reveal.js";
+import { Joblist } from "./JobSummary.js";
+import { MatrixGroupNode, MatrixGroupSummaryItem } from "./MatrixGroup.js";
+import TreeView from "./TreeView.js";
+import { isJobRecord } from "./types.js";
+import cx from "classnames";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { flushSync } from "react-dom";
+import { DateTime } from "luxon";
+import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
+//#region src/graph/DependencyGraph.tsx
+function ViewToggle({ viewMode, setViewMode }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex border border-[var(--theme-border)] rounded overflow-hidden",
+		children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => setViewMode("dag"),
+			className: cx("px-3 py-1.5 text-xs font-mono transition-colors", viewMode === "dag" ? "bg-[var(--theme-element)] text-[var(--theme-element-text)]" : "text-[var(--theme-muted-text-color)] hover:text-[var(--theme-app)] hover:bg-[var(--theme-hover)]"),
+			children: "DAG"
+		}), /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => setViewMode("tree"),
+			className: cx("px-3 py-1.5 text-xs font-mono transition-colors", viewMode === "tree" ? "bg-[var(--theme-element)] text-[var(--theme-element-text)]" : "text-[var(--theme-muted-text-color)] hover:text-[var(--theme-app)] hover:bg-[var(--theme-hover)]"),
+			children: "Tree"
+		})]
+	});
+}
+var addCleanupSteps = ({ jobs }) => {
+	const clonedJobs = structuredClone(jobs);
+	for (const job in jobs) {
+		const source = jobs[job];
+		const cloned = clonedJobs[job];
+		if (!source || !cloned) continue;
+		if (Array.isArray(source.steps)) {
+			const sourceSteps = source.steps;
+			sourceSteps.slice().reverse().forEach((step, index) => {
+				if (!step.cleanup) return;
+				const linkedName = step.name ? step.name : `Step ${sourceSteps.length - index - 1}`;
+				const newStep = {
+					...step,
+					name: `POST ${linkedName}`,
+					run: step.cleanup,
+					linkedStep: `${sourceSteps.length - index - 1}`
+				};
+				delete newStep.cleanup;
+				const clonedStep = cloned.steps[index];
+				if (clonedStep) delete clonedStep.cleanup;
+				cloned.steps.push(newStep);
+			});
+		}
+		const sourceCleanup = source.cleanup;
+		const clonedCleanup = cloned.cleanup;
+		if (Array.isArray(sourceCleanup) && clonedCleanup) {
+			sourceCleanup.slice().reverse().forEach((step, index) => {
+				if (!step.cleanup) return;
+				const linkedName = step.name ? step.name : `Cleanup ${sourceCleanup.length - index - 1}`;
+				const newStep = {
+					...step,
+					name: `POST ${linkedName}`,
+					run: step.cleanup,
+					linkedStep: `${sourceCleanup.length - index - 1 + cloned.steps.length}`
+				};
+				delete newStep.cleanup;
+				const clonedStep = clonedCleanup[index];
+				if (clonedStep) delete clonedStep.cleanup;
+				clonedCleanup.push(newStep);
+			});
+			for (const clonedStep of clonedCleanup) clonedStep.linkedStep = ".";
+			cloned.steps = [...cloned.steps, ...clonedCleanup];
+			delete cloned.cleanup;
+		}
+	}
+	return clonedJobs;
+};
+var PREVIEW_PADDING = 24;
+function measurePreviewHeight(content, viewRef) {
+	const nodes = content?.querySelectorAll("[id^=\"node_\"]");
+	const transform = content?.parentElement ? getComputedStyle(content.parentElement).transform : "none";
+	if (!content || !nodes?.length || transform === "none") return null;
+	if (!viewRef.current) {
+		const view = new DOMMatrixReadOnly(transform);
+		viewRef.current = {
+			scale: view.a,
+			offsetY: view.f
+		};
+	}
+	const { scale, offsetY } = viewRef.current;
+	let bottom = 0;
+	for (const node of nodes) bottom = Math.max(bottom, offsetWithin(node, content).y + node.offsetHeight);
+	return Math.ceil(bottom * scale + offsetY + PREVIEW_PADDING);
+}
+function offsetWithin(el, ancestor) {
+	let x = 0;
+	let y = 0;
+	let cur = el;
+	while (cur && cur !== ancestor) {
+		x += cur.offsetLeft;
+		y += cur.offsetTop;
+		cur = cur.offsetParent;
+	}
+	return {
+		x,
+		y
+	};
+}
+function parsePrefixToPath(prefix) {
+	const parts = prefix.split("/").filter(Boolean);
+	const path = [];
+	for (let i = 0; i + 2 < parts.length; i += 3) {
+		const name = parts[i + 1];
+		const step = parts[i + 2];
+		if (parts[i] === "subworkflows" && name && step?.startsWith("step_")) path.push(name, "steps", Number(step.slice(5)), "subworkflow", "jobs");
+	}
+	return path;
+}
+function computeGraphLayout(engine, jobs, matrixGroups) {
+	const visibleJobs = structuredClone(jobs);
+	for (const jobName of Object.keys(jobs ?? {})) if (jobs[jobName]?.if === false) delete visibleJobs[jobName];
+	engine.collapseMatrixGroups(matrixGroups, visibleJobs);
+	const allDeps = {};
+	for (const jobName of Object.keys(visibleJobs)) allDeps[jobName] = engine.jobDependencies(jobName, visibleJobs, allDeps);
+	const filteredDeps = {};
+	for (const jobName of Object.keys(visibleJobs)) {
+		const needs = visibleJobs[jobName]?.needs;
+		const oldNeeds = Array.isArray(needs) ? needs : [];
+		filteredDeps[jobName] = oldNeeds.filter((dep) => {
+			return !oldNeeds.some((other) => {
+				if (other === dep) return false;
+				return allDeps[other]?.has(dep) === true;
+			});
+		}).sort();
+	}
+	const depended_on = {};
+	Object.keys(visibleJobs).forEach((jobName) => {
+		if (filteredDeps[jobName] && Array.isArray(filteredDeps[jobName])) filteredDeps[jobName].forEach((dep) => {
+			if (depended_on[dep]) depended_on[dep].push(jobName);
+			else depended_on[dep] = [jobName];
+		});
+	});
+	Object.keys(visibleJobs).forEach((jobName) => {
+		if (depended_on[jobName]) depended_on[jobName].sort();
+	});
+	const unfinished = structuredClone(visibleJobs);
+	const rootLevel = [];
+	const deps = [rootLevel];
+	Object.keys(visibleJobs).forEach((jobName) => {
+		if (filteredDeps[jobName]?.length === 0) {
+			rootLevel.push(jobName);
+			delete unfinished[jobName];
+		}
+	});
+	let prevLen;
+	do {
+		const toAppend = [];
+		const unfinishedArr = Object.keys(unfinished);
+		prevLen = unfinishedArr.length;
+		unfinishedArr.forEach((jobName) => {
+			if ((filteredDeps[jobName] ?? []).every((dep) => !unfinishedArr.includes(dep))) {
+				toAppend.push(jobName);
+				delete unfinished[jobName];
+			}
+		});
+		if (toAppend.length > 0) deps.push(toAppend);
+	} while (prevLen !== Object.keys(unfinished).length);
+	const finalDeps = [];
+	deps.forEach((col) => {
+		const toAppend = [];
+		while (col.length > 0) {
+			const head = col[0];
+			if (head === void 0) break;
+			const grouped = [head];
+			const toRm = [0];
+			col.slice(1).forEach((jobName, j) => {
+				if (visibleJobs[head]?._matrixGroup || visibleJobs[jobName]?._matrixGroup) return;
+				const depsA = depended_on[head];
+				const depsB = depended_on[jobName];
+				const depsA2 = filteredDeps[head];
+				const depsB2 = filteredDeps[jobName];
+				if (!depsA && !depsB || depsA && depsB && depsA.length === depsB.length) {
+					if (!depsA2 && !depsB2 || depsA2 && depsB2 && depsA2.length === depsB2.length) {
+						if ((!depsA || depsA.every((dep, i) => dep === depsB?.[i])) && (!depsA2 || depsA2.every((dep, i) => dep === depsB2?.[i]))) {
+							grouped.push(jobName);
+							toRm.push(j + 1);
+						}
+					}
+				}
+			});
+			col.splice(0, col.length, ...col.filter((_, i) => !toRm.includes(i)));
+			toAppend.push(grouped);
+		}
+		finalDeps.push(toAppend);
+	});
+	while (finalDeps.length > 0) {
+		const first = finalDeps[0];
+		if (!first) break;
+		if (first.length === 0) {
+			finalDeps.splice(0, 1);
+			continue;
+		}
+		if (first[0]?.length !== 0) break;
+		while (first.length > 0 && first[0]?.length === 0) first.splice(0, 1);
+	}
+	const ancestorDists = {};
+	const descendantDists = {};
+	const jobNames = Object.keys(visibleJobs);
+	const reverseDeps = {};
+	for (const [job, depList] of Object.entries(filteredDeps)) for (const dep of depList) {
+		if (!reverseDeps[dep]) reverseDeps[dep] = [];
+		reverseDeps[dep].push(job);
+	}
+	for (const start of jobNames) {
+		const aDist = /* @__PURE__ */ new Map();
+		const q1 = [[start, 0]];
+		while (q1.length > 0) {
+			const [job, d] = q1.shift();
+			for (const dep of filteredDeps[job] ?? []) if (!aDist.has(dep)) {
+				aDist.set(dep, d + 1);
+				q1.push([dep, d + 1]);
+			}
+		}
+		ancestorDists[start] = aDist;
+		const dDist = /* @__PURE__ */ new Map();
+		const q2 = [[start, 0]];
+		while (q2.length > 0) {
+			const [job, d] = q2.shift();
+			for (const child of reverseDeps[job] ?? []) if (!dDist.has(child)) {
+				dDist.set(child, d + 1);
+				q2.push([child, d + 1]);
+			}
+		}
+		descendantDists[start] = dDist;
+	}
+	return {
+		dependencyCols: finalDeps,
+		directDeps: filteredDeps,
+		displayJobs: visibleJobs,
+		ancestorDists,
+		descendantDists
+	};
+}
+function SubworkflowWell({ expanded, onSettled, className, children }) {
+	return /* @__PURE__ */ jsx(Reveal, {
+		open: expanded,
+		growWidth: true,
+		onSettled,
+		children: /* @__PURE__ */ jsx("div", {
+			className,
+			style: { zoom: .8 },
+			children
+		})
+	});
+}
+var SUBGRAPH_Z_STEP = 100;
+var FIT_ANIMATION_MS = 300;
+function Subgraph({ jobs, pathPrefix, depth, preview, animT, expandedSubworkflows, toggleSubworkflow, openInNewGraph, setSublogOpen, invalidateConnectors, requestFit, stepsOpen, toggleSteps, matrixOpen, toggleMatrix, onReady }) {
+	const engine = useWorkflowEngine();
+	const wrapperRef = useRef(null);
+	const zBase = depth * SUBGRAPH_Z_STEP;
+	const [hoveredJob, setHoveredJob] = useState(null);
+	const lastHoveredDistancesRef = useRef(null);
+	const maxHoveredDistRef = useRef(0);
+	const retractPathLensRef = useRef(/* @__PURE__ */ new Map());
+	const matrixGroups = useMemo(() => engine.matrixGroups(jobs), [engine, jobs]);
+	const { dependencyCols, directDeps, displayJobs, ancestorDists, descendantDists } = useMemo(() => computeGraphLayout(engine, jobs, matrixGroups), [
+		engine,
+		jobs,
+		matrixGroups
+	]);
+	const hoveredDistances = useMemo(() => {
+		if (!hoveredJob) return null;
+		const dist = /* @__PURE__ */ new Map();
+		dist.set(hoveredJob, 0);
+		const ancestors = ancestorDists[hoveredJob];
+		if (ancestors) for (const [k, v] of ancestors) dist.set(k, v);
+		const descendants = descendantDists[hoveredJob];
+		if (descendants) for (const [k, v] of descendants) dist.set(k, v);
+		return dist;
+	}, [
+		hoveredJob,
+		ancestorDists,
+		descendantDists
+	]);
+	if (hoveredDistances) {
+		lastHoveredDistancesRef.current = hoveredDistances;
+		maxHoveredDistRef.current = Math.max(...hoveredDistances.values());
+	}
+	const activeDists = hoveredDistances ?? lastHoveredDistancesRef.current;
+	useEffect(() => {
+		if (hoveredJob || !lastHoveredDistancesRef.current) return;
+		const maxDelay = maxHoveredDistRef.current * animT + animT;
+		const timer = setTimeout(() => {
+			lastHoveredDistancesRef.current = null;
+			maxHoveredDistRef.current = 0;
+			invalidateConnectors();
+		}, maxDelay * 1e3 + 200);
+		return () => clearTimeout(timer);
+	}, [
+		hoveredJob,
+		invalidateConnectors,
+		animT
+	]);
+	const hoveredRelated = useMemo(() => {
+		if (!hoveredDistances) return null;
+		return new Set(hoveredDistances.keys());
+	}, [hoveredDistances]);
+	useEffect(() => {
+		const raf = requestAnimationFrame(() => {
+			invalidateConnectors();
+			onReady?.();
+		});
+		return () => cancelAnimationFrame(raf);
+	}, [
+		dependencyCols,
+		invalidateConnectors,
+		onReady
+	]);
+	useEffect(() => {
+		const el = wrapperRef.current;
+		if (!el) return;
+		const ro = new ResizeObserver(() => invalidateConnectors());
+		ro.observe(el);
+		return () => ro.disconnect();
+	}, [invalidateConnectors]);
+	const didRevealMountRef = useRef(false);
+	useEffect(() => {
+		if (!didRevealMountRef.current) {
+			didRevealMountRef.current = true;
+			return;
+		}
+		let raf = 0;
+		const start = performance.now();
+		const tick = () => {
+			flushSync(() => invalidateConnectors());
+			if (performance.now() - start < 260) raf = requestAnimationFrame(tick);
+		};
+		raf = requestAnimationFrame(tick);
+		return () => cancelAnimationFrame(raf);
+	}, [
+		stepsOpen,
+		matrixOpen,
+		expandedSubworkflows,
+		invalidateConnectors
+	]);
+	const buildBoxLayer = useCallback(() => {
+		const isStepsOpen = (j) => stepsOpen.has(pathPrefix + j);
+		const onJobClick = (j) => {
+			const status = jobs[j]?.status ?? displayJobs[j]?.status;
+			if (!isStepsOpen(j) && (status === "skipped" || status === "skipped-failed")) return;
+			toggleSteps(pathPrefix + j);
+		};
+		const expandInline = (j, s) => {
+			toggleSubworkflow(`${pathPrefix}${j}:${s}`);
+			requestAnimationFrame(invalidateConnectors);
+		};
+		const openNew = (j, s) => openInNewGraph(pathPrefix, j, s);
+		const onStepClick = (j, s) => {
+			const stepStatus = jobs[j]?.steps?.[+s]?.status;
+			if (stepStatus === "skipped" || stepStatus === "skipped-failed") return;
+			if (jobs[j]?.steps[+s]?.subworkflow) expandInline(j, +s);
+			else setSublogOpen(engine.stepLogPath(pathPrefix, j, s));
+		};
+		const onStepLogClick = (j, s) => setSublogOpen(engine.stepLogPath(pathPrefix, j, s));
+		const onSubworkflowIcon = (j, s) => openNew(j, s);
+		const isSubworkflowExpanded = (j, s) => expandedSubworkflows.has(`${pathPrefix}${j}:${s}`);
+		const renderSubworkflow = (j, s) => {
+			const subJobs = jobs[j]?.steps?.[s]?.subworkflow?.jobs;
+			if (!subJobs) return null;
+			return /* @__PURE__ */ jsx(SubworkflowWell, {
+				expanded: isSubworkflowExpanded(j, s),
+				onSettled: requestFit,
+				className: "my-2 rounded-lg border-4 border-(--theme-border)",
+				children: /* @__PURE__ */ jsx(NestedSubgraph, {
+					jobs: subJobs,
+					pathPrefix: `${pathPrefix}subworkflows/${j}/step_${s}/`,
+					depth: depth + 1,
+					preview,
+					animT,
+					expandedSubworkflows,
+					toggleSubworkflow,
+					openInNewGraph,
+					setSublogOpen,
+					invalidateConnectors,
+					requestFit,
+					stepsOpen,
+					toggleSteps,
+					matrixOpen,
+					toggleMatrix
+				})
+			});
+		};
+		return /* @__PURE__ */ jsx("div", {
+			className: "flex relative",
+			children: dependencyCols.map((col) => {
+				return /* @__PURE__ */ jsx("div", { children: col.map((jobNames) => {
+					const matrixGroup = displayJobs[jobNames[0]]?._matrixGroup;
+					if (matrixGroup) return /* @__PURE__ */ jsx(MatrixGroupNode, {
+						matrixGroup,
+						jobNames,
+						idPrefix: pathPrefix,
+						isExpanded: matrixOpen.has(pathPrefix + matrixGroup.originaljob),
+						onToggle: () => toggleMatrix(pathPrefix + matrixGroup.originaljob),
+						jobs,
+						activeDists,
+						onMouseEnter: () => setHoveredJob(jobNames[0]),
+						onMouseLeave: () => setHoveredJob(null),
+						hoveredRelated,
+						animT,
+						zBase,
+						isStepsOpen,
+						onJobClick,
+						onStepClick,
+						onStepLogClick,
+						onSubworkflowIcon,
+						isSubworkflowExpanded,
+						renderSubworkflow,
+						preview
+					}, "node_" + jobNames[0]);
+					return /* @__PURE__ */ jsxs("div", {
+						id: "node_" + pathPrefix + jobNames[0],
+						role: "none",
+						className: "relative m-24",
+						style: { zIndex: (activeDists?.has(jobNames[0]) ? 25 : 1) + zBase },
+						onMouseEnter: () => setHoveredJob(jobNames[0]),
+						onMouseLeave: () => setHoveredJob(null),
+						onFocus: () => setHoveredJob(jobNames[0]),
+						onBlur: () => setHoveredJob(null),
+						children: [/* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-2xl bg-(--theme-panel-bg)" }), /* @__PURE__ */ jsx("div", {
+							className: "relative border-solid shadow py-4 px-8 rounded-xl border-4 whitespace-nowrap bg-(--theme-panel-bg) text-2xl",
+							style: {
+								opacity: hoveredRelated && !hoveredRelated.has(jobNames[0]) ? .5 : 1,
+								transition: `opacity ${animT}s`
+							},
+							children: /* @__PURE__ */ jsx(Joblist, {
+								jobs: displayJobs,
+								jobNames,
+								onJobClick,
+								isStepsOpen,
+								onStepClick,
+								onStepLogClick,
+								onSubworkflowIcon,
+								isSubworkflowExpanded,
+								renderSubworkflow,
+								growWidth: true,
+								preview
+							})
+						})]
+					}, "node_" + jobNames[0]);
+				}) }, col[0]?.[0]);
+			})
+		});
+	}, [
+		dependencyCols,
+		displayJobs,
+		jobs,
+		stepsOpen,
+		matrixOpen,
+		expandedSubworkflows,
+		hoveredRelated,
+		activeDists,
+		animT,
+		zBase,
+		preview,
+		pathPrefix,
+		depth,
+		toggleSteps,
+		toggleSubworkflow,
+		toggleMatrix,
+		openInNewGraph,
+		setSublogOpen,
+		engine,
+		invalidateConnectors,
+		requestFit
+	]);
+	const memoizedBoxLayer = useMemo(() => buildBoxLayer(), [buildBoxLayer]);
+	const hasLiveNestedGraph = Array.from(expandedSubworkflows).some((k) => k.startsWith(pathPrefix));
+	if (!Array.isArray(dependencyCols) || dependencyCols.length === 0 || !Array.isArray(dependencyCols[0]) || dependencyCols[0].length === 0 || !Array.isArray(dependencyCols[0][0]) || dependencyCols[0][0].length === 0) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: wrapperRef,
+		className: "relative",
+		children: [(() => {
+			const wrapper = wrapperRef.current;
+			const gid = (name) => document.getElementById("node_" + pathPrefix + name);
+			const ox = (el) => offsetWithin(el, wrapper).x;
+			const nodeConnectorY = (el) => offsetWithin(el, wrapper).y + 37;
+			let colGap = 32;
+			if (dependencyCols.length >= 2) {
+				const col0 = gid(dependencyCols[0]?.[0]?.[0] ?? "");
+				const col1 = gid(dependencyCols[1]?.[0]?.[0] ?? "");
+				if (col0 && col1) colGap = ox(col1) - (ox(col0) + col0.offsetWidth);
+			}
+			let minAdy = Number.POSITIVE_INFINITY;
+			for (const col of dependencyCols) for (const jobNames of col) for (const dep of directDeps[jobNames[0]] ?? []) {
+				const s = gid(dep);
+				const e = gid(jobNames[0]);
+				if (!s || !e) continue;
+				const dy = Math.abs(nodeConnectorY(e) - nodeConnectorY(s));
+				if (dy > 0 && dy < minAdy) minAdy = dy;
+			}
+			const MAX_ARC_R = 16;
+			const arcR = Math.min(minAdy === Number.POSITIVE_INFINITY ? MAX_ARC_R : minAdy / 4, colGap / 2, MAX_ARC_R);
+			return dependencyCols.map((col) => /* @__PURE__ */ jsx(React.Fragment, { children: col.map((jobNames) => /* @__PURE__ */ jsx(React.Fragment, { children: (directDeps[jobNames[0]] ?? []).map((dep) => {
+				const isHighlighted = hoveredRelated?.has(jobNames[0]) && hoveredRelated?.has(dep);
+				const baseColor = "var(--theme-border)";
+				const depDist = activeDists?.get(dep) ?? 0;
+				const targetDist = activeDists?.get(jobNames[0]) ?? 0;
+				const hopDelay = animT;
+				const closerDist = Math.min(depDist, targetDist);
+				const connectorDelay = closerDist * hopDelay;
+				const retractDelay = (maxHoveredDistRef.current - closerDist) * hopDelay;
+				const drawRightToLeft = targetDist < depDist;
+				const start = gid(dep);
+				const end = gid(jobNames[0]);
+				if (!start || !end) return null;
+				const x1 = ox(start) + start.offsetWidth - 2;
+				const y1 = nodeConnectorY(start);
+				const x2 = ox(end) + 2;
+				const y2 = nodeConnectorY(end);
+				const dy = y2 - y1;
+				const ady = Math.abs(dy);
+				let pathD;
+				let pathLen;
+				let pathDReversed;
+				const r = arcR;
+				if (ady === 0) {
+					pathD = `M ${x1} ${y1} L ${x2} ${y2}`;
+					pathDReversed = `M ${x2} ${y2} L ${x1} ${y1}`;
+					pathLen = x2 - x1;
+				} else {
+					const s = dy > 0 ? 1 : -1;
+					const ax2end = x2 - (colGap / 2 - r);
+					const ax = ax2end - 2 * r;
+					const sw1 = dy > 0 ? 1 : 0;
+					const sw2 = dy > 0 ? 0 : 1;
+					pathD = [
+						`M ${x1} ${y1}`,
+						`L ${ax} ${y1}`,
+						`A ${r} ${r} 0 0 ${sw1} ${ax + r} ${y1 + s * r}`,
+						`L ${ax + r} ${y2 - s * r}`,
+						`A ${r} ${r} 0 0 ${sw2} ${ax2end} ${y2}`,
+						`L ${x2} ${y2}`
+					].join(" ");
+					pathDReversed = [
+						`M ${x2} ${y2}`,
+						`L ${ax2end} ${y2}`,
+						`A ${r} ${r} 0 0 ${sw1} ${ax + r} ${y2 - s * r}`,
+						`L ${ax + r} ${y1 + s * r}`,
+						`A ${r} ${r} 0 0 ${sw2} ${ax} ${y1}`,
+						`L ${x1} ${y1}`
+					].join(" ");
+					const arcLen = Math.PI * r / 2;
+					const vSeg = Math.max(0, ady - 2 * r);
+					pathLen = ax - x1 + arcLen + vSeg + arcLen + (x2 - ax2end);
+				}
+				return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+					/* @__PURE__ */ jsxs("svg", {
+						"aria-hidden": "true",
+						overflow: "visible",
+						className: "absolute pointer-events-none",
+						style: { zIndex: (isHighlighted || activeDists?.has(dep) && activeDists?.has(jobNames[0]) ? 30 : 10) + zBase },
+						children: [
+							/* @__PURE__ */ jsx("rect", {
+								x: x1 - 16,
+								y: y1 - 16,
+								width: 32,
+								height: 32,
+								fill: "var(--theme-panel-bg)"
+							}),
+							/* @__PURE__ */ jsx("rect", {
+								x: x2 - 16,
+								y: y2 - 16,
+								width: 32,
+								height: 32,
+								fill: "var(--theme-panel-bg)"
+							}),
+							/* @__PURE__ */ jsx("circle", {
+								cx: x1,
+								cy: y1,
+								r: "8",
+								fill: isHighlighted ? "#3B82F6" : baseColor,
+								style: {
+									opacity: hoveredRelated && !isHighlighted ? .3 : 1,
+									transition: isHighlighted ? `fill ${animT}s ${depDist * hopDelay}s, opacity 0s` : `fill ${animT}s ${(maxHoveredDistRef.current - depDist) * hopDelay}s, opacity 0s`
+								}
+							}),
+							/* @__PURE__ */ jsx("circle", {
+								cx: x2,
+								cy: y2,
+								r: "8",
+								fill: isHighlighted ? "#3B82F6" : baseColor,
+								style: {
+									opacity: hoveredRelated && !isHighlighted ? .3 : 1,
+									transition: isHighlighted ? `fill ${animT}s ${targetDist * hopDelay}s, opacity 0s` : `fill ${animT}s ${(maxHoveredDistRef.current - targetDist) * hopDelay}s, opacity 0s`
+								}
+							})
+						]
+					}),
+					/* @__PURE__ */ jsxs("svg", {
+						"aria-hidden": "true",
+						overflow: "visible",
+						className: "absolute pointer-events-none",
+						style: { zIndex: (isHighlighted ? 20 : -1) + zBase },
+						children: [/* @__PURE__ */ jsx("path", {
+							d: pathD,
+							stroke: "var(--theme-panel-bg)",
+							strokeWidth: "6",
+							fill: "transparent"
+						}), /* @__PURE__ */ jsx("path", {
+							d: pathD,
+							stroke: baseColor,
+							strokeWidth: "6",
+							fill: "transparent",
+							style: {
+								opacity: hoveredRelated && !isHighlighted ? .3 : 1,
+								transition: `opacity 0s`
+							}
+						})]
+					}),
+					/* @__PURE__ */ jsxs("svg", {
+						"aria-hidden": "true",
+						overflow: "visible",
+						className: "absolute pointer-events-none",
+						style: { zIndex: 20 + zBase },
+						children: [/* @__PURE__ */ jsx("path", {
+							d: drawRightToLeft ? pathDReversed : pathD,
+							fill: "transparent",
+							style: {
+								stroke: "#3B82F6",
+								strokeWidth: 6,
+								strokeDasharray: `${pathLen} ${pathLen}`,
+								strokeDashoffset: isHighlighted ? 0 : pathLen,
+								opacity: isHighlighted ? 1 : 0,
+								transition: isHighlighted ? `stroke-dashoffset ${animT}s ease ${connectorDelay}s, opacity 0s ease ${connectorDelay}s` : "stroke-dashoffset 0s, opacity 0s"
+							}
+						}), (() => {
+							const connKey = `${dep}→${jobNames[0]}`;
+							if (isHighlighted) retractPathLensRef.current.set(connKey, pathLen);
+							const isRetracting = !isHighlighted && !!activeDists?.has(dep) && !!activeDists?.has(jobNames[0]);
+							if (!isHighlighted && !isRetracting) return null;
+							const frozenLen = retractPathLensRef.current.get(connKey) ?? pathLen;
+							return /* @__PURE__ */ jsx("path", {
+								d: drawRightToLeft ? pathDReversed : pathD,
+								fill: "transparent",
+								style: {
+									stroke: "#3B82F6",
+									strokeWidth: 6,
+									strokeDasharray: `${frozenLen} ${frozenLen}`,
+									strokeDashoffset: isHighlighted ? 0 : frozenLen,
+									opacity: isHighlighted ? 0 : 1,
+									transition: isHighlighted ? "stroke-dashoffset 0s, opacity 0s" : `stroke-dashoffset ${animT}s ease ${retractDelay}s, opacity 0s`
+								}
+							});
+						})()]
+					})
+				] }, dep);
+			}) }, jobNames[0])) }, col[0]?.[0]));
+		})(), hasLiveNestedGraph ? buildBoxLayer() : memoizedBoxLayer]
+	});
+}
+var NestedSubgraph = Subgraph;
+function SidebarWell({ expanded, children }) {
+	return /* @__PURE__ */ jsx(Collapse, {
+		expanded,
+		releaseOverflow: false,
+		children
+	});
+}
+function SidebarJobs({ jobs, pathPrefix, preview, stepsOpen, toggleSteps, expandedSubworkflows, toggleSubworkflow, matrixOpen, toggleMatrix, openInNewGraph, setSublogOpen }) {
+	const engine = useWorkflowEngine();
+	const matrixGroups = useMemo(() => engine.matrixGroups(jobs), [engine, jobs]);
+	const { displayJobs } = useMemo(() => computeGraphLayout(engine, jobs, matrixGroups), [
+		engine,
+		jobs,
+		matrixGroups
+	]);
+	const isStepsOpen = (j) => stepsOpen.has(pathPrefix + j);
+	const onJobClick = (j) => {
+		const status = jobs[j]?.status ?? displayJobs[j]?.status;
+		if (!isStepsOpen(j) && (status === "skipped" || status === "skipped-failed")) return;
+		toggleSteps(pathPrefix + j);
+	};
+	const expandInline = (j, s) => toggleSubworkflow(`${pathPrefix}${j}:${s}`);
+	const openNew = (j, s) => openInNewGraph(pathPrefix, j, s);
+	const onStepClick = (j, s) => {
+		const stepStatus = jobs[j]?.steps?.[+s]?.status;
+		if (stepStatus === "skipped" || stepStatus === "skipped-failed") return;
+		if (jobs[j]?.steps[+s]?.subworkflow) expandInline(j, +s);
+		else setSublogOpen(engine.stepLogPath(pathPrefix, j, s));
+	};
+	const onStepLogClick = (j, s) => setSublogOpen(engine.stepLogPath(pathPrefix, j, s));
+	const onSubworkflowIcon = (j, s) => openNew(j, s);
+	const isSubworkflowExpanded = (j, s) => expandedSubworkflows.has(`${pathPrefix}${j}:${s}`);
+	const renderSubworkflow = (j, s) => {
+		const subJobs = jobs[j]?.steps?.[s]?.subworkflow?.jobs;
+		if (!subJobs) return null;
+		return /* @__PURE__ */ jsx(SidebarWell, {
+			expanded: isSubworkflowExpanded(j, s),
+			children: /* @__PURE__ */ jsx("div", {
+				className: "ml-6 mt-0.5 border-l border-(--theme-border) pl-4",
+				children: /* @__PURE__ */ jsx(SidebarJobs, {
+					jobs: subJobs,
+					pathPrefix: `${pathPrefix}subworkflows/${j}/step_${s}/`,
+					preview,
+					stepsOpen,
+					toggleSteps,
+					expandedSubworkflows,
+					toggleSubworkflow,
+					matrixOpen,
+					toggleMatrix,
+					openInNewGraph,
+					setSublogOpen
+				})
+			})
+		});
+	};
+	const seenMatrixGroups = /* @__PURE__ */ new Set();
+	const orderedKeys = Object.keys(jobs).flatMap((jobName) => {
+		const originaljob = jobs[jobName]?._matrix?.originaljob;
+		if (!originaljob) return [jobName];
+		if (seenMatrixGroups.has(originaljob)) return [];
+		seenMatrixGroups.add(originaljob);
+		return [originaljob];
+	});
+	return /* @__PURE__ */ jsx(Fragment$1, { children: orderedKeys.map((jobName) => {
+		const mg = displayJobs[jobName]?._matrixGroup;
+		if (mg) return /* @__PURE__ */ jsx(MatrixGroupSummaryItem, {
+			matrixGroup: mg,
+			status: displayJobs[jobName]?.status ?? "",
+			isExpanded: matrixOpen.has(pathPrefix + mg.originaljob),
+			onToggle: () => toggleMatrix(pathPrefix + mg.originaljob),
+			jobs,
+			isStepsOpen,
+			onJobClick,
+			onStepClick,
+			onStepLogClick,
+			onSubworkflowIcon,
+			isSubworkflowExpanded,
+			renderSubworkflow,
+			preview
+		}, "matrix-" + pathPrefix + mg.originaljob);
+		return /* @__PURE__ */ jsx(Joblist, {
+			jobs,
+			jobNames: [jobName],
+			onJobClick,
+			isStepsOpen,
+			onStepClick,
+			onStepLogClick,
+			onSubworkflowIcon,
+			isSubworkflowExpanded,
+			renderSubworkflow,
+			preview
+		}, "job-" + pathPrefix + jobName);
+	}) });
+}
+var RUN_STATUSES = [
+	"started",
+	"running",
+	"completed",
+	"error",
+	"failed",
+	"canceled",
+	"skipped",
+	"faulted",
+	"canceling",
+	"skipped-failed",
+	""
+];
+function toStatus(value) {
+	return RUN_STATUSES.find((status) => status === value) ?? "";
+}
+function walkJobPath(root, path) {
+	let cursor = root;
+	for (const key of path) {
+		if (typeof cursor !== "object" || cursor === null) return {};
+		cursor = Object.getOwnPropertyDescriptor(cursor, String(key))?.value;
+	}
+	return isJobRecord(cursor) ? cursor : {};
+}
+function DependencyGraph({ run, preview = false, initialScale = 1, removeBorder, viewMode = "dag", setViewMode }) {
+	const engine = useWorkflowEngine();
+	const animT = .125;
+	const minScale = .2;
+	const maxScale = .6;
+	const rootJobs = isJobRecord(run.executedJobs) ? run.executedJobs : {};
+	const runNumber = run.number ?? 0;
+	const runSlug = run.slug ?? "";
+	const workflowName = run.workflowName ?? "";
+	const runStatus = toStatus(run.status);
+	const [sublogOpen, setSublogOpen] = useState("");
+	const [stepsOpen, setStepsOpen] = useState(/* @__PURE__ */ new Set());
+	const [expandedSubworkflows, setExpandedSubworkflows] = useState(/* @__PURE__ */ new Set());
+	const containerRef = useRef(null);
+	const graphContentRef = useRef(null);
+	const transformRef = useRef(null);
+	const [, forceRerender] = useState(0);
+	const invalidateConnectors = useCallback(() => forceRerender((c) => c + 1), []);
+	const [windowSize, setWindowSize] = useState(() => ({
+		w: typeof window !== "undefined" ? window.innerWidth : 800,
+		h: typeof window !== "undefined" ? window.innerHeight : 600
+	}));
+	useEffect(() => {
+		const onResize = () => setWindowSize({
+			w: window.innerWidth,
+			h: window.innerHeight
+		});
+		window.addEventListener("resize", onResize);
+		return () => window.removeEventListener("resize", onResize);
+	}, []);
+	const [topOffset, setTopOffset] = useState(null);
+	const topObserverRef = useRef(null);
+	const setContainerElement = useCallback((el) => {
+		containerRef.current = el;
+		topObserverRef.current?.disconnect();
+		topObserverRef.current = null;
+		if (!el || preview) return;
+		const measure = () => {
+			const cur = containerRef.current;
+			if (!cur) return;
+			setTopOffset((prev) => {
+				const next = cur.getBoundingClientRect().top;
+				return prev === next ? prev : next;
+			});
+		};
+		requestAnimationFrame(measure);
+		const parent = el.parentElement;
+		if (parent) {
+			const ro = new ResizeObserver(measure);
+			ro.observe(parent);
+			topObserverRef.current = ro;
+		}
+	}, [preview]);
+	const containerHeight = topOffset !== null ? Math.max(windowSize.h - topOffset - 16, 160) : null;
+	const [previewHeight, setPreviewHeight] = useState(null);
+	const previewViewRef = useRef(null);
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!preview || !container) return;
+		let raf = 0;
+		let attempts = 0;
+		const measure = () => {
+			cancelAnimationFrame(raf);
+			raf = requestAnimationFrame(() => {
+				const next = measurePreviewHeight(graphContentRef.current, previewViewRef);
+				if (next === null) {
+					if (attempts++ < 120) measure();
+					return;
+				}
+				attempts = 0;
+				setPreviewHeight((prev) => prev === next ? prev : next);
+			});
+		};
+		measure();
+		const observer = new MutationObserver(measure);
+		observer.observe(container, {
+			childList: true,
+			subtree: true
+		});
+		return () => {
+			observer.disconnect();
+			cancelAnimationFrame(raf);
+		};
+	}, [preview]);
+	const { dag: dagStrings } = useStrings();
+	const slots = useSlots();
+	const [executedJobsPath, setExecutedJobsPath] = useState([[]]);
+	const [executedJobsPathIdx, setExecutedJobsPathIdx] = useState(0);
+	const [expandedJobs, setExpandedJobs] = useState(/* @__PURE__ */ new Set());
+	const [matrixOpen, setMatrixOpen] = useState(/* @__PURE__ */ new Set());
+	const isRunFinished = !!run.completedAt || run.status === "completed" || run.status === "error" || run.status === "canceled";
+	const [now, setNow] = useState(() => DateTime.now());
+	useEffect(() => {
+		if (isRunFinished) return;
+		const timer = setInterval(() => setNow(DateTime.now()), 1e3);
+		return () => clearInterval(timer);
+	}, [isRunFinished]);
+	const jobs = walkJobPath(rootJobs, executedJobsPath[executedJobsPathIdx] ?? []);
+	const resetGraph = useCallback(() => {
+		setSublogOpen("");
+		setStepsOpen(/* @__PURE__ */ new Set());
+		setExpandedSubworkflows(/* @__PURE__ */ new Set());
+		setMatrixOpen(/* @__PURE__ */ new Set());
+	}, []);
+	const openInNewGraph = useCallback((prefix, job, step) => {
+		resetGraph();
+		setExecutedJobsPath((prev) => [[
+			...parsePrefixToPath(prefix),
+			job,
+			"steps",
+			step,
+			"subworkflow",
+			"jobs"
+		], ...prev.slice(executedJobsPathIdx, 10)]);
+		setExecutedJobsPathIdx(0);
+	}, [executedJobsPathIdx, resetGraph]);
+	const toggleSubworkflow = useCallback((key) => {
+		setExpandedSubworkflows((prev) => {
+			const next = new Set(prev);
+			if (next.has(key)) next.delete(key);
+			else next.add(key);
+			return next;
+		});
+	}, []);
+	const toggleSteps = useCallback((key) => {
+		setStepsOpen((prev) => {
+			const next = new Set(prev);
+			if (next.has(key)) next.delete(key);
+			else next.add(key);
+			return next;
+		});
+		requestAnimationFrame(invalidateConnectors);
+	}, [invalidateConnectors]);
+	const toggleMatrix = useCallback((key) => {
+		setMatrixOpen((prev) => {
+			const next = new Set(prev);
+			if (next.has(key)) next.delete(key);
+			else next.add(key);
+			return next;
+		});
+		requestAnimationFrame(invalidateConnectors);
+	}, [invalidateConnectors]);
+	const { data: sublogs, isLoading: sublogsLoading, error: sublogsError } = useRunFile(runSlug, sublogOpen || null, preview ? void 0 : { refreshInterval: 2e3 });
+	useEffect(() => {
+		if (sublogOpen.endsWith("/script-unstable-redacted.sh") && !sublogsLoading && (sublogsError || !sublogs)) setSublogOpen(sublogOpen.replace(/script-unstable-redacted\.sh$/, "script-unstable.sh"));
+	}, [
+		sublogOpen,
+		sublogs,
+		sublogsError,
+		sublogsLoading
+	]);
+	const jobAndStep = sublogOpen.split("/").slice(-3, -1);
+	if (jobAndStep.length > 1) jobAndStep[1] = jobAndStep[1].split("_")[1] ?? "";
+	const sublogIsStep = jobAndStep.length > 1;
+	const logName = jobAndStep.length > 1 ? "Job: " + (jobAndStep[0][0].toUpperCase() + jobAndStep[0].slice(1)).replace(/_/g, " ") + " \nStep: " + (jobs[jobAndStep[0]]?.steps[Number(jobAndStep[1])]?.name || "Step " + jobAndStep[1]) : "";
+	const sublogIsSubworkflow = jobAndStep.length > 1 && jobs[jobAndStep[0]]?.steps[Number(jobAndStep[1])]?.subworkflow;
+	const matrixGroups = useMemo(() => engine.matrixGroups(jobs), [engine, jobs]);
+	const { dependencyCols } = useMemo(() => computeGraphLayout(engine, jobs, matrixGroups), [
+		engine,
+		jobs,
+		matrixGroups
+	]);
+	const fitGraph = useCallback((animationMs = 0) => {
+		const container = containerRef.current;
+		const content = graphContentRef.current;
+		const transform = transformRef.current;
+		if (!container || !content || !transform) return;
+		const topNodes = content.querySelectorAll(":scope > div > div > div > div[id^=\"node_\"]");
+		const nodes = topNodes.length > 0 ? topNodes : content.querySelectorAll("[id^=\"node_\"]");
+		if (nodes.length === 0) return;
+		let minX = Number.POSITIVE_INFINITY;
+		let minY = Number.POSITIVE_INFINITY;
+		let maxX = 0;
+		let maxY = 0;
+		for (const node of nodes) {
+			const el = node;
+			const pos = offsetWithin(el, content);
+			minX = Math.min(minX, pos.x);
+			minY = Math.min(minY, pos.y);
+			maxX = Math.max(maxX, pos.x + el.offsetWidth);
+			maxY = Math.max(maxY, pos.y + el.offsetHeight);
+		}
+		const graphW = maxX - minX;
+		const graphH = maxY - minY;
+		const containerW = container.clientWidth;
+		const containerH = container.clientHeight;
+		if (graphW === 0 || graphH === 0) return;
+		const margin = Math.min(containerW, containerH) * .05;
+		const scaleW = (containerW - margin * 2) / graphW;
+		const scaleH = (containerH - margin * 2) / graphH;
+		const scale = Math.min(Math.max(Math.min(scaleW, scaleH), minScale), maxScale);
+		const offsetX = margin - minX * scale;
+		const offsetY = margin - minY * scale;
+		if (animationMs > 0) {
+			transform.setTransform(offsetX, offsetY, scale, animationMs, "easeOut");
+			return;
+		}
+		const wrapperEl = container.querySelector(".react-transform-component");
+		if (wrapperEl) wrapperEl.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`;
+		requestAnimationFrame(() => {
+			transform.setTransform(offsetX, offsetY, scale, 0);
+			invalidateConnectors();
+		});
+	}, [invalidateConnectors]);
+	const animatedFit = useCallback(() => fitGraph(FIT_ANIMATION_MS), [fitGraph]);
+	useEffect(() => {
+		if (preview) return;
+		const raf = requestAnimationFrame(() => fitGraph());
+		return () => cancelAnimationFrame(raf);
+	}, [
+		preview,
+		fitGraph,
+		windowSize,
+		executedJobsPathIdx
+	]);
+	const currentPath = executedJobsPath[executedJobsPathIdx] ?? [];
+	const nestingDepth = currentPath.length / 5;
+	let pathAppend = "";
+	for (let i = 0; i < nestingDepth; i++) pathAppend += `subworkflows/${currentPath[5 * i]}/step_${currentPath[5 * i + 2]?.toString()}/`;
+	let generalLogPath = "logs.out";
+	if (nestingDepth > 0) {
+		let parentPrefix = "";
+		for (let i = 0; i < nestingDepth - 1; i++) parentPrefix += `subworkflows/${currentPath[5 * i]}/step_${currentPath[5 * i + 2]?.toString()}/`;
+		const lastJob = String(currentPath[5 * (nestingDepth - 1)] ?? "");
+		const lastStep = currentPath[5 * (nestingDepth - 1) + 2] ?? "";
+		generalLogPath = engine.stepLogPath(parentPrefix, lastJob, lastStep);
+	}
+	const missingLogText = sublogIsSubworkflow ? "Subworkflows generally have no logs/scripts at this level.\nClick on the \"Open in new graph\" icon on the subworkflow step to open the subworkflow graph." : sublogsError ? dagStrings.logLoadFailed : (sublogOpen === generalLogPath ? dagStrings.statusReason(run.statusReason) : void 0) ?? dagStrings.noLogFound;
+	const currentSublog = sublogOpen === "" ? "" : preview ? engine.toYaml(jobs[jobAndStep[0]]?.steps[Number(jobAndStep[1])]) : sublogsError || !sublogs ? missingLogText : sublogs;
+	const expansionKeys = useMemo(() => engine.expansionKeys(jobs, pathAppend), [
+		engine,
+		jobs,
+		pathAppend
+	]);
+	const hasExpandable = expansionKeys.subworkflowKeys.length > 0 || expansionKeys.matrixKeys.length > 0;
+	const allExpanded = hasExpandable && expansionKeys.subworkflowKeys.every((k) => expandedSubworkflows.has(k)) && expansionKeys.matrixKeys.every((k) => matrixOpen.has(k));
+	const toggleExpandAll = () => {
+		if (allExpanded) {
+			setExpandedSubworkflows(/* @__PURE__ */ new Set());
+			setStepsOpen(/* @__PURE__ */ new Set());
+			setMatrixOpen(/* @__PURE__ */ new Set());
+		} else {
+			setExpandedSubworkflows(new Set(expansionKeys.subworkflowKeys));
+			setStepsOpen(new Set(expansionKeys.jobKeys));
+			setMatrixOpen(new Set(expansionKeys.matrixKeys));
+		}
+		requestAnimationFrame(() => {
+			invalidateConnectors();
+			fitGraph();
+		});
+	};
+	const nextStep = useCallback((backward) => {
+		const sublogSplit = sublogOpen.split("/");
+		let job = sublogSplit[sublogSplit.length - 3] ?? "";
+		let step = parseInt(sublogSplit[sublogSplit.length - 2].slice(5), 10);
+		const jobArr = Object.keys(jobs);
+		let idx = jobArr.indexOf(job);
+		if (backward) {
+			if (0 < step) step -= 1;
+			else {
+				if (idx === 0) idx = jobArr.length;
+				job = jobArr[idx - 1] ?? "";
+				step = (jobs[job]?.steps.length ?? 0) - 1;
+			}
+		} else if ((jobs[job]?.steps.length ?? 0) - 1 > step) step += 1;
+		else {
+			if (idx === jobArr.length - 1) idx = -1;
+			job = jobArr[idx + 1] ?? "";
+			step = 0;
+		}
+		setSublogOpen(sublogSplit.slice(0, -3).join("/") + `/${job}/step_${step}/` + sublogSplit.slice(-1)[0]);
+	}, [jobs, sublogOpen]);
+	const handleKeyDown = useCallback((e) => {
+		if (e.key === "ArrowRight") nextStep(false);
+		else if (e.key === "ArrowLeft") nextStep(true);
+	}, [nextStep]);
+	useEffect(() => {
+		if (!sublogIsStep) return;
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [handleKeyDown, sublogIsStep]);
+	const summarySidebar = useMemo(() => /* @__PURE__ */ jsx(SidebarJobs, {
+		jobs,
+		pathPrefix: pathAppend,
+		preview,
+		stepsOpen,
+		toggleSteps,
+		expandedSubworkflows,
+		toggleSubworkflow,
+		matrixOpen,
+		toggleMatrix,
+		openInNewGraph,
+		setSublogOpen
+	}), [
+		jobs,
+		pathAppend,
+		preview,
+		stepsOpen,
+		toggleSteps,
+		expandedSubworkflows,
+		toggleSubworkflow,
+		matrixOpen,
+		toggleMatrix,
+		openInNewGraph
+	]);
+	if (!Array.isArray(dependencyCols) || dependencyCols.length === 0 || !Array.isArray(dependencyCols[0]) || dependencyCols[0].length === 0 || !Array.isArray(dependencyCols[0][0]) || dependencyCols[0][0].length === 0) return;
+	const startDt = run.createdAt ? DateTime.fromISO(run.createdAt) : now;
+	const endDt = run.completedAt ? DateTime.fromISO(run.completedAt) : now;
+	const runtime = toAbsHumanDuration(startDt, endDt);
+	const additionalBottomLeftBarComponents = sublogIsStep ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: "btn btn-neutral",
+			onClick: () => nextStep(true),
+			children: [/* @__PURE__ */ jsx(ArrowLeftIcon, {}), /* @__PURE__ */ jsx("span", { children: "Prev" })]
+		}),
+		/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: "btn btn-neutral",
+			onClick: () => nextStep(false),
+			children: [/* @__PURE__ */ jsx(ArrowRightIcon, {}), /* @__PURE__ */ jsx("span", { children: "Next" })]
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: "pt-0.5 whitespace-pre-wrap text-xs",
+			children: logName
+		})
+	] }) : void 0;
+	const additionalBottomRightBarComponents = (!preview || sublogIsSubworkflow) && sublogOpen && sublogIsStep ? /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: "btn btn-neutral",
+		onClick: () => {
+			if (sublogIsSubworkflow) {
+				openInNewGraph(pathAppend, jobAndStep[0], parseInt(jobAndStep[1], 10));
+				setSublogOpen("");
+			} else setSublogOpen(sublogOpen.split("/").slice(-1)[0] === "logs.out" ? [...sublogOpen.split("/").slice(0, -1), "script-unstable-redacted.sh"].join("/") : [...sublogOpen.split("/").slice(0, -1), "logs.out"].join("/"));
+		},
+		children: /* @__PURE__ */ jsx("span", { children: sublogIsSubworkflow ? "Open Subworkflow" : sublogOpen.split("/").slice(-1)[0] === "logs.out" ? "Show Script" : "Show Logs" })
+	}) : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col lg:flex-row w-full",
+		children: [
+			!preview && /* @__PURE__ */ jsxs("div", {
+				className: "hidden lg:block lg:w-[280px] flex-shrink-0 lg:mr-1",
+				children: [
+					slots.runSessions && /* @__PURE__ */ jsx("div", {
+						className: "mb-4 overflow-y-auto",
+						children: slots.runSessions({
+							runId: run.id ?? "",
+							runNumber,
+							runActive: engine.isRunActive(run.status),
+							links: run.links
+						})
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "font-bold flex items-center gap-x-2",
+						children: ["Summary", /* @__PURE__ */ jsx("button", {
+							type: "button",
+							"aria-label": "General log",
+							onClick: () => setSublogOpen(generalLogPath),
+							className: "link",
+							children: /* @__PURE__ */ jsx(DocumentIcon, { className: "w-4 h-4" })
+						})]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "mx-4 mb-4 overflow-y-auto",
+						children: summarySidebar
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: cx(preview ? "w-full" : "flex-1 min-w-0 mt-2", "h-full flex flex-col gap-y-2"),
+				children: [
+					!preview && /* @__PURE__ */ jsxs("div", {
+						className: "panel w-full border rounded-lg px-4 py-2 flex flex-wrap items-center gap-x-16 gap-y-2",
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex flex-col",
+								children: [/* @__PURE__ */ jsx("div", {
+									className: "text-xs",
+									children: dagStrings.workflow
+								}), /* @__PURE__ */ jsx("div", {
+									className: "text-sm font-semibold flex items-center gap-x-1",
+									children: workflowName
+								})]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex flex-col",
+								children: [/* @__PURE__ */ jsx("div", {
+									className: "text-xs",
+									children: dagStrings.run
+								}), /* @__PURE__ */ jsx("div", {
+									className: "text-sm font-semibold flex items-center gap-x-1",
+									children: runNumber
+								})]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex flex-col",
+								children: [/* @__PURE__ */ jsx("div", {
+									className: "text-xs",
+									children: dagStrings.status
+								}), /* @__PURE__ */ jsx("div", {
+									className: "text-sm font-semibold flex items-center gap-x-1",
+									children: /* @__PURE__ */ jsxs(TooltipInfo, {
+										className: "flex items-center gap-x-1",
+										text: dagStrings.statusReason(run.statusReason) ?? "",
+										children: [/* @__PURE__ */ jsx(Indicator, { status: runStatus }), dagStrings.statusLabel(runStatus)]
+									})
+								})]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex flex-col",
+								children: [/* @__PURE__ */ jsx("div", {
+									className: "text-xs",
+									children: dagStrings.runtime
+								}), /* @__PURE__ */ jsx("div", {
+									className: "text-sm font-semibold flex items-center gap-x-1",
+									children: runtime
+								})]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex flex-col",
+								children: [/* @__PURE__ */ jsx("div", {
+									className: "text-xs",
+									children: dagStrings.submitted
+								}), /* @__PURE__ */ jsx("div", {
+									className: "text-sm font-semibold flex items-center gap-x-1",
+									children: startDt ? startDt.toLocaleString(DateTime.DATETIME_SHORT) : ""
+								})]
+							}),
+							/* @__PURE__ */ jsx("div", { className: "flex-1" }),
+							setViewMode && /* @__PURE__ */ jsx(ViewToggle, {
+								viewMode,
+								setViewMode: (mode) => {
+									if (mode === "dag") {
+										setStepsOpen(/* @__PURE__ */ new Set());
+										requestAnimationFrame(fitGraph);
+									}
+									setViewMode?.(mode);
+								}
+							})
+						]
+					}),
+					!preview && /* @__PURE__ */ jsx(AnnotationBanner, { executedJobs: jobs }),
+					viewMode === "tree" && !preview ? /* @__PURE__ */ jsx("div", {
+						className: "panel w-full border",
+						children: /* @__PURE__ */ jsx(TreeView, {
+							jobs,
+							workflowName,
+							runNumber,
+							slug: runSlug,
+							expandedJobs,
+							setExpandedJobs
+						})
+					}) : /* @__PURE__ */ jsx("div", {
+						ref: setContainerElement,
+						className: "panel w-full " + (removeBorder ? "border-none" : "border") + " overflow-hidden relative",
+						style: {
+							height: containerHeight !== null ? `${containerHeight}px` : previewHeight !== null ? `${Math.min(previewHeight, windowSize.h * .62)}px` : "62vh",
+							minHeight: previewHeight !== null ? 0 : 160
+						},
+						children: /* @__PURE__ */ jsx(TransformWrapper, {
+							ref: transformRef,
+							minScale,
+							maxScale,
+							initialScale: maxScale,
+							doubleClick: { disabled: true },
+							limitToBounds: false,
+							onInit: () => {
+								setTimeout(invalidateConnectors, 0);
+							},
+							onPanning: invalidateConnectors,
+							onPinch: invalidateConnectors,
+							onTransform: invalidateConnectors,
+							onWheel: invalidateConnectors,
+							onZoom: invalidateConnectors,
+							children: () => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+								className: "absolute z-10 top-2 right-2 flex flex-col items-end gap-y-1",
+								children: [
+									hasExpandable && /* @__PURE__ */ jsx("button", {
+										type: "button",
+										className: "btn btn-info cursor-pointer h-6",
+										onClick: toggleExpandAll,
+										children: allExpanded ? dagStrings.collapseAll : dagStrings.expandAll
+									}),
+									/* @__PURE__ */ jsx("button", {
+										type: "button",
+										className: "btn btn-info w-21 cursor-pointer h-6",
+										"aria-label": "Reset view",
+										onClick: () => {
+											if ((executedJobsPath[executedJobsPathIdx]?.length ?? 0) > 0) {
+												resetGraph();
+												setExecutedJobsPath([[], ...executedJobsPath.slice(executedJobsPathIdx, 10)]);
+												setExecutedJobsPathIdx(0);
+											} else fitGraph(FIT_ANIMATION_MS);
+										},
+										children: "Reset View"
+									}),
+									executedJobsPath.length > 1 && /* @__PURE__ */ jsxs("div", {
+										className: "flex",
+										children: [/* @__PURE__ */ jsx("button", {
+											type: "button",
+											onClick: () => {
+												if (executedJobsPath.length > executedJobsPathIdx + 1) {
+													resetGraph();
+													setExecutedJobsPathIdx(executedJobsPathIdx + 1);
+												}
+											},
+											className: "btn btn-info mr-1 cursor-pointer w-10 h-6",
+											children: "<"
+										}), /* @__PURE__ */ jsx("button", {
+											type: "button",
+											onClick: () => {
+												if (executedJobsPathIdx - 1 >= 0) {
+													resetGraph();
+													setExecutedJobsPathIdx(executedJobsPathIdx - 1);
+												}
+											},
+											className: "btn btn-info cursor-pointer w-10 h-6",
+											children: ">"
+										})]
+									})
+								]
+							}), /* @__PURE__ */ jsx(TransformComponent, { children: /* @__PURE__ */ jsx("div", {
+								ref: graphContentRef,
+								className: "flex relative mr-[8000px]",
+								style: { minHeight: 4e3 },
+								children: /* @__PURE__ */ jsx(Subgraph, {
+									jobs,
+									pathPrefix: pathAppend,
+									depth: 0,
+									preview,
+									animT,
+									expandedSubworkflows,
+									toggleSubworkflow,
+									openInNewGraph,
+									setSublogOpen,
+									invalidateConnectors,
+									requestFit: animatedFit,
+									stepsOpen,
+									toggleSteps,
+									matrixOpen,
+									toggleMatrix,
+									onReady: fitGraph
+								}, `sg-${executedJobsPathIdx}-${pathAppend}`)
+							}) })] })
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(BareModal, {
+				open: sublogOpen !== "",
+				onClose: () => setSublogOpen(""),
+				align: "center",
+				className: cx(modalPanelClasses, "max-h-full overflow-y-auto p-4 sm:p-6"),
+				children: /* @__PURE__ */ jsx("div", {
+					className: "flex w-full",
+					children: sublogsLoading && (!sublogs || !runNumber) ? /* @__PURE__ */ jsx(Loader, {
+						text: dagStrings.loadingLogs,
+						size: 70,
+						textSize: 18
+					}) : preview ? /* @__PURE__ */ jsxs("div", { children: [slots.yamlViewer?.({
+						value: currentSublog,
+						height: window.innerHeight / 1.4,
+						width: window.innerWidth / 1.4,
+						contentKey: "editor_" + sublogOpen
+					}) ?? /* @__PURE__ */ jsx("pre", {
+						className: "h-full overflow-auto text-xs p-4",
+						style: {
+							height: window.innerHeight / 1.4,
+							width: window.innerWidth / 1.4
+						},
+						children: currentSublog
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex theme-panel select-none items-center gap-x-2 p-2",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "w-full flex flex-row gap-x-2 items-center",
+							children: /* @__PURE__ */ jsx("div", {
+								className: "flex gap-x-2 w-full",
+								children: additionalBottomLeftBarComponents
+							})
+						}), additionalBottomRightBarComponents]
+					})] }) : /* @__PURE__ */ jsx(LogViewer, {
+						log: currentSublog?.length > 1e3 ? currentSublog.slice(-1e5) : currentSublog,
+						height: windowSize.h / 1.2,
+						width: windowSize.w / 1.2,
+						hideExpand: true,
+						additionalBottomLeftBarComponents,
+						additionalBottomRightBarComponents,
+						enableWorkflowCommands: true
+					})
+				})
+			})
+		]
+	});
+}
+function DependencyGraphPreview(inputs) {
+	const ymlJobs = inputs.yml?.["jobs"];
+	return /* @__PURE__ */ jsx(DependencyGraph, {
+		run: {
+			executedJobs: addCleanupSteps({ jobs: isJobRecord(ymlJobs) ? ymlJobs : {} }),
+			number: 0,
+			workflowName: ""
+		},
+		preview: true,
+		initialScale: inputs.initialScale || 1,
+		removeBorder: inputs.removeBorder
+	});
+}
+//#endregion
+export { DependencyGraphPreview, DependencyGraph as default };