@parallelworks/ui 0.20.0 → 0.21.0

package/dist/graph/DependencyGraph.js

@@ -9,6 +9,7 @@ import { toAbsHumanDuration } from "../duration.js";
 import { AnnotationBanner } from "./AnnotationBanner.js";
 import { Collapse } from "./Collapse.js";
 import { Reveal } from "./Reveal.js";
+import { jobLabel, toggled } from "./util.js";
 import { Joblist } from "./JobSummary.js";
 import { MatrixGroupNode, MatrixGroupSummaryItem } from "./MatrixGroup.js";
 import TreeView from "./TreeView.js";
@@ -54,7 +55,7 @@ var addCleanupSteps = ({ jobs }) => {
 					linkedStep: `${sourceSteps.length - index - 1}`
 				};
 				delete newStep.cleanup;
-				const clonedStep = cloned.steps[index];
+				const clonedStep = cloned.steps[sourceSteps.length - index - 1];
 				if (clonedStep) delete clonedStep.cleanup;
 				cloned.steps.push(newStep);
 			});
@@ -72,7 +73,7 @@ var addCleanupSteps = ({ jobs }) => {
 					linkedStep: `${sourceCleanup.length - index - 1 + cloned.steps.length}`
 				};
 				delete newStep.cleanup;
-				const clonedStep = clonedCleanup[index];
+				const clonedStep = clonedCleanup[sourceCleanup.length - index - 1];
 				if (clonedStep) delete clonedStep.cleanup;
 				clonedCleanup.push(newStep);
 			});
@@ -124,10 +125,14 @@ function parsePrefixToPath(prefix) {
 	}
 	return path;
 }
-function computeGraphLayout(engine, jobs, matrixGroups) {
+function displayJobsOf(engine, jobs, matrixGroups) {
 	const visibleJobs = structuredClone(jobs);
-	for (const jobName of Object.keys(jobs ?? {})) if (jobs[jobName]?.if === false) delete visibleJobs[jobName];
+	for (const jobName of Object.keys(jobs)) if (jobs[jobName]?.if === false) delete visibleJobs[jobName];
 	engine.collapseMatrixGroups(matrixGroups, visibleJobs);
+	return visibleJobs;
+}
+function computeGraphLayout(engine, jobs, matrixGroups) {
+	const visibleJobs = displayJobsOf(engine, jobs, matrixGroups);
 	const allDeps = {};
 	for (const jobName of Object.keys(visibleJobs)) allDeps[jobName] = engine.jobDependencies(jobName, visibleJobs, allDeps);
 	const filteredDeps = {};
@@ -142,37 +147,29 @@ function computeGraphLayout(engine, jobs, matrixGroups) {
 		}).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);
+	for (const jobName of Object.keys(visibleJobs)) for (const dep of filteredDeps[jobName] ?? []) {
+		depended_on[dep] ??= [];
+		depended_on[dep].push(jobName);
+	}
+	for (const dependents of Object.values(depended_on)) dependents.sort();
+	const unfinished = new Set(Object.keys(visibleJobs));
 	const rootLevel = [];
 	const deps = [rootLevel];
-	Object.keys(visibleJobs).forEach((jobName) => {
-		if (filteredDeps[jobName]?.length === 0) {
-			rootLevel.push(jobName);
-			delete unfinished[jobName];
-		}
-	});
+	for (const jobName of unfinished) if (filteredDeps[jobName]?.length === 0) {
+		rootLevel.push(jobName);
+		unfinished.delete(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];
-			}
-		});
+		const pending = new Set(unfinished);
+		prevLen = pending.size;
+		for (const jobName of pending) if ((filteredDeps[jobName] ?? []).every((dep) => !pending.has(dep))) {
+			toAppend.push(jobName);
+			unfinished.delete(jobName);
+		}
 		if (toAppend.length > 0) deps.push(toAppend);
-	} while (prevLen !== Object.keys(unfinished).length);
+	} while (prevLen !== unfinished.size);
 	const finalDeps = [];
 	deps.forEach((col) => {
 		const toAppend = [];
@@ -201,16 +198,7 @@ function computeGraphLayout(engine, jobs, matrixGroups) {
 		}
 		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);
-	}
+	if (finalDeps[0]?.length === 0) finalDeps.shift();
 	const ancestorDists = {};
 	const descendantDists = {};
 	const jobNames = Object.keys(visibleJobs);
@@ -222,8 +210,8 @@ function computeGraphLayout(engine, jobs, matrixGroups) {
 	for (const start of jobNames) {
 		const aDist = /* @__PURE__ */ new Map();
 		const q1 = [[start, 0]];
-		while (q1.length > 0) {
-			const [job, d] = q1.shift();
+		for (let next = q1.shift(); next; next = q1.shift()) {
+			const [job, d] = next;
 			for (const dep of filteredDeps[job] ?? []) if (!aDist.has(dep)) {
 				aDist.set(dep, d + 1);
 				q1.push([dep, d + 1]);
@@ -232,8 +220,8 @@ function computeGraphLayout(engine, jobs, matrixGroups) {
 		ancestorDists[start] = aDist;
 		const dDist = /* @__PURE__ */ new Map();
 		const q2 = [[start, 0]];
-		while (q2.length > 0) {
-			const [job, d] = q2.shift();
+		for (let next = q2.shift(); next; next = q2.shift()) {
+			const [job, d] = next;
 			for (const child of reverseDeps[job] ?? []) if (!dDist.has(child)) {
 				dDist.set(child, d + 1);
 				q2.push([child, d + 1]);
@@ -249,6 +237,32 @@ function computeGraphLayout(engine, jobs, matrixGroups) {
 		descendantDists
 	};
 }
+function jobHandlers({ engine, jobs, displayJobs, pathPrefix, stepsOpen, toggleSteps, expandedSubworkflows, toggleSubworkflow, openInNewGraph, setSublogOpen, renderWell }) {
+	const isStepsOpen = (j) => stepsOpen.has(pathPrefix + j);
+	const subworkflowKey = (j, s) => `${pathPrefix}${j}:${s}`;
+	const openLog = (j, s) => setSublogOpen(engine.stepLogPath(pathPrefix, j, s));
+	return {
+		isStepsOpen,
+		onJobClick: (j) => {
+			const status = jobs[j]?.status ?? displayJobs[j]?.status;
+			if (!isStepsOpen(j) && (status === "skipped" || status === "skipped-failed")) return;
+			toggleSteps(pathPrefix + j);
+		},
+		onStepClick: (j, s) => {
+			const step = jobs[j]?.steps?.[s];
+			if (step?.status === "skipped" || step?.status === "skipped-failed") return;
+			if (step?.subworkflow) toggleSubworkflow(subworkflowKey(j, s));
+			else openLog(j, s);
+		},
+		onStepLogClick: openLog,
+		onSubworkflowIcon: (j, s) => openInNewGraph(pathPrefix, j, s),
+		renderSubworkflow: (j, s) => {
+			const subJobs = jobs[j]?.steps?.[s]?.subworkflow?.jobs;
+			if (!subJobs) return null;
+			return renderWell(subJobs, `${pathPrefix}subworkflows/${j}/step_${s}/`, expandedSubworkflows.has(subworkflowKey(j, s)));
+		}
+	};
+}
 function SubworkflowWell({ expanded, onSettled, className, children }) {
 	return /* @__PURE__ */ jsx(Reveal, {
 		open: expanded,
@@ -262,6 +276,8 @@ function SubworkflowWell({ expanded, onSettled, className, children }) {
 	});
 }
 var SUBGRAPH_Z_STEP = 100;
+var CONNECTOR_COLOR = "var(--theme-border)";
+var HIGHLIGHT_COLOR = "#3B82F6";
 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();
@@ -353,36 +369,27 @@ function Subgraph({ jobs, pathPrefix, depth, preview, animT, expandedSubworkflow
 		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),
+		const handlers = jobHandlers({
+			engine,
+			jobs,
+			displayJobs,
+			pathPrefix,
+			stepsOpen,
+			toggleSteps,
+			expandedSubworkflows,
+			toggleSubworkflow: (key) => {
+				toggleSubworkflow(key);
+				requestAnimationFrame(invalidateConnectors);
+			},
+			openInNewGraph,
+			setSublogOpen,
+			renderWell: (subJobs, subPrefix, expanded) => /* @__PURE__ */ jsx(SubworkflowWell, {
+				expanded,
 				onSettled: requestFit,
 				className: "my-2 rounded-lg border-4 border-(--theme-border)",
 				children: /* @__PURE__ */ jsx(NestedSubgraph, {
 					jobs: subJobs,
-					pathPrefix: `${pathPrefix}subworkflows/${j}/step_${s}/`,
+					pathPrefix: subPrefix,
 					depth: depth + 1,
 					preview,
 					animT,
@@ -397,13 +404,15 @@ function Subgraph({ jobs, pathPrefix, depth, preview, animT, expandedSubworkflow
 					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;
+					const first = jobNames[0];
+					if (first === void 0) return null;
+					const matrixGroup = displayJobs[first]?._matrixGroup;
 					if (matrixGroup) return /* @__PURE__ */ jsx(MatrixGroupNode, {
 						matrixGroup,
 						jobNames,
@@ -412,50 +421,38 @@ function Subgraph({ jobs, pathPrefix, depth, preview, animT, expandedSubworkflow
 						onToggle: () => toggleMatrix(pathPrefix + matrixGroup.originaljob),
 						jobs,
 						activeDists,
-						onMouseEnter: () => setHoveredJob(jobNames[0]),
+						onMouseEnter: () => setHoveredJob(first),
 						onMouseLeave: () => setHoveredJob(null),
 						hoveredRelated,
 						animT,
 						zBase,
-						isStepsOpen,
-						onJobClick,
-						onStepClick,
-						onStepLogClick,
-						onSubworkflowIcon,
-						isSubworkflowExpanded,
-						renderSubworkflow,
+						handlers,
 						preview
-					}, "node_" + jobNames[0]);
+					}, `node_${first}`);
 					return /* @__PURE__ */ jsxs("div", {
-						id: "node_" + pathPrefix + jobNames[0],
+						id: `node_${pathPrefix}${first}`,
 						role: "none",
 						className: "relative m-24",
-						style: { zIndex: (activeDists?.has(jobNames[0]) ? 25 : 1) + zBase },
-						onMouseEnter: () => setHoveredJob(jobNames[0]),
+						style: { zIndex: (activeDists?.has(first) ? 25 : 1) + zBase },
+						onMouseEnter: () => setHoveredJob(first),
 						onMouseLeave: () => setHoveredJob(null),
-						onFocus: () => setHoveredJob(jobNames[0]),
+						onFocus: () => setHoveredJob(first),
 						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,
+								opacity: hoveredRelated && !hoveredRelated.has(first) ? .5 : 1,
 								transition: `opacity ${animT}s`
 							},
 							children: /* @__PURE__ */ jsx(Joblist, {
 								jobs: displayJobs,
 								jobNames,
-								onJobClick,
-								isStepsOpen,
-								onStepClick,
-								onStepLogClick,
-								onSubworkflowIcon,
-								isSubworkflowExpanded,
-								renderSubworkflow,
+								...handlers,
 								growWidth: true,
 								preview
 							})
 						})]
-					}, "node_" + jobNames[0]);
+					}, `node_${first}`);
 				}) }, col[0]?.[0]);
 			})
 		});
@@ -484,13 +481,13 @@ function Subgraph({ jobs, pathPrefix, depth, preview, animT, expandedSubworkflow
 	]);
 	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;
+	if (!dependencyCols[0]?.length) return null;
 	return /* @__PURE__ */ jsxs("div", {
 		ref: wrapperRef,
 		className: "relative",
 		children: [(() => {
 			const wrapper = wrapperRef.current;
-			const gid = (name) => document.getElementById("node_" + pathPrefix + name);
+			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;
@@ -500,27 +497,29 @@ function Subgraph({ jobs, pathPrefix, depth, preview, animT, expandedSubworkflow
 				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;
+			for (const col of dependencyCols) for (const jobNames of col) {
+				const first = jobNames[0];
+				if (first === void 0) continue;
+				for (const dep of directDeps[first] ?? []) {
+					const s = gid(dep);
+					const e = gid(first);
+					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)";
+			return dependencyCols.map((col) => /* @__PURE__ */ jsx(React.Fragment, { children: col.map(([first]) => first === void 0 ? null : /* @__PURE__ */ jsx(React.Fragment, { children: (directDeps[first] ?? []).map((dep) => {
+				const isHighlighted = hoveredRelated?.has(first) && hoveredRelated?.has(dep);
 				const depDist = activeDists?.get(dep) ?? 0;
-				const targetDist = activeDists?.get(jobNames[0]) ?? 0;
-				const hopDelay = animT;
+				const targetDist = activeDists?.get(first) ?? 0;
 				const closerDist = Math.min(depDist, targetDist);
-				const connectorDelay = closerDist * hopDelay;
-				const retractDelay = (maxHoveredDistRef.current - closerDist) * hopDelay;
+				const connectorDelay = closerDist * animT;
+				const retractDelay = (maxHoveredDistRef.current - closerDist) * animT;
 				const drawRightToLeft = targetDist < depDist;
 				const start = gid(dep);
-				const end = gid(jobNames[0]);
+				const end = gid(first);
 				if (!start || !end) return null;
 				const x1 = ox(start) + start.offsetWidth - 2;
 				const y1 = nodeConnectorY(start);
@@ -567,7 +566,7 @@ function Subgraph({ jobs, pathPrefix, depth, preview, animT, expandedSubworkflow
 						"aria-hidden": "true",
 						overflow: "visible",
 						className: "absolute pointer-events-none",
-						style: { zIndex: (isHighlighted || activeDists?.has(dep) && activeDists?.has(jobNames[0]) ? 30 : 10) + zBase },
+						style: { zIndex: (isHighlighted || activeDists?.has(dep) && activeDists?.has(first) ? 30 : 10) + zBase },
 						children: [
 							/* @__PURE__ */ jsx("rect", {
 								x: x1 - 16,
@@ -587,20 +586,20 @@ function Subgraph({ jobs, pathPrefix, depth, preview, animT, expandedSubworkflow
 								cx: x1,
 								cy: y1,
 								r: "8",
-								fill: isHighlighted ? "#3B82F6" : baseColor,
+								fill: isHighlighted ? HIGHLIGHT_COLOR : CONNECTOR_COLOR,
 								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`
+									transition: isHighlighted ? `fill ${animT}s ${depDist * animT}s, opacity 0s` : `fill ${animT}s ${(maxHoveredDistRef.current - depDist) * animT}s, opacity 0s`
 								}
 							}),
 							/* @__PURE__ */ jsx("circle", {
 								cx: x2,
 								cy: y2,
 								r: "8",
-								fill: isHighlighted ? "#3B82F6" : baseColor,
+								fill: isHighlighted ? HIGHLIGHT_COLOR : CONNECTOR_COLOR,
 								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`
+									transition: isHighlighted ? `fill ${animT}s ${targetDist * animT}s, opacity 0s` : `fill ${animT}s ${(maxHoveredDistRef.current - targetDist) * animT}s, opacity 0s`
 								}
 							})
 						]
@@ -617,7 +616,7 @@ function Subgraph({ jobs, pathPrefix, depth, preview, animT, expandedSubworkflow
 							fill: "transparent"
 						}), /* @__PURE__ */ jsx("path", {
 							d: pathD,
-							stroke: baseColor,
+							stroke: CONNECTOR_COLOR,
 							strokeWidth: "6",
 							fill: "transparent",
 							style: {
@@ -635,7 +634,7 @@ function Subgraph({ jobs, pathPrefix, depth, preview, animT, expandedSubworkflow
 							d: drawRightToLeft ? pathDReversed : pathD,
 							fill: "transparent",
 							style: {
-								stroke: "#3B82F6",
+								stroke: HIGHLIGHT_COLOR,
 								strokeWidth: 6,
 								strokeDasharray: `${pathLen} ${pathLen}`,
 								strokeDashoffset: isHighlighted ? 0 : pathLen,
@@ -643,16 +642,16 @@ function Subgraph({ jobs, pathPrefix, depth, preview, animT, expandedSubworkflow
 								transition: isHighlighted ? `stroke-dashoffset ${animT}s ease ${connectorDelay}s, opacity 0s ease ${connectorDelay}s` : "stroke-dashoffset 0s, opacity 0s"
 							}
 						}), (() => {
-							const connKey = `${dep}→${jobNames[0]}`;
+							const connKey = `${dep}→${first}`;
 							if (isHighlighted) retractPathLensRef.current.set(connKey, pathLen);
-							const isRetracting = !isHighlighted && !!activeDists?.has(dep) && !!activeDists?.has(jobNames[0]);
+							const isRetracting = !isHighlighted && !!activeDists?.has(dep) && !!activeDists?.has(first);
 							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",
+									stroke: HIGHLIGHT_COLOR,
 									strokeWidth: 6,
 									strokeDasharray: `${frozenLen} ${frozenLen}`,
 									strokeDashoffset: isHighlighted ? 0 : frozenLen,
@@ -663,53 +662,32 @@ function Subgraph({ jobs, pathPrefix, depth, preview, animT, expandedSubworkflow
 						})()]
 					})
 				] }, dep);
-			}) }, jobNames[0])) }, col[0]?.[0]));
+			}) }, first)) }, 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), [
+	const displayJobs = useMemo(() => displayJobsOf(engine, jobs, engine.matrixGroups(jobs)), [engine, jobs]);
+	const handlers = jobHandlers({
 		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),
+		displayJobs,
+		pathPrefix,
+		stepsOpen,
+		toggleSteps,
+		expandedSubworkflows,
+		toggleSubworkflow,
+		openInNewGraph,
+		setSublogOpen,
+		renderWell: (subJobs, subPrefix, expanded) => /* @__PURE__ */ jsx(Collapse, {
+			expanded,
 			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}/`,
+					pathPrefix: subPrefix,
 					preview,
 					stepsOpen,
 					toggleSteps,
@@ -721,8 +699,8 @@ function SidebarJobs({ jobs, pathPrefix, preview, stepsOpen, toggleSteps, expand
 					setSublogOpen
 				})
 			})
-		});
-	};
+		})
+	});
 	const seenMatrixGroups = /* @__PURE__ */ new Set();
 	const orderedKeys = Object.keys(jobs).flatMap((jobName) => {
 		const originaljob = jobs[jobName]?._matrix?.originaljob;
@@ -739,27 +717,15 @@ function SidebarJobs({ jobs, pathPrefix, preview, stepsOpen, toggleSteps, expand
 			isExpanded: matrixOpen.has(pathPrefix + mg.originaljob),
 			onToggle: () => toggleMatrix(pathPrefix + mg.originaljob),
 			jobs,
-			isStepsOpen,
-			onJobClick,
-			onStepClick,
-			onStepLogClick,
-			onSubworkflowIcon,
-			isSubworkflowExpanded,
-			renderSubworkflow,
+			handlers,
 			preview
-		}, "matrix-" + pathPrefix + mg.originaljob);
+		}, `matrix-${pathPrefix}${mg.originaljob}`);
 		return /* @__PURE__ */ jsx(Joblist, {
 			jobs,
 			jobNames: [jobName],
-			onJobClick,
-			isStepsOpen,
-			onStepClick,
-			onStepLogClick,
-			onSubworkflowIcon,
-			isSubworkflowExpanded,
-			renderSubworkflow,
+			...handlers,
 			preview
-		}, "job-" + pathPrefix + jobName);
+		}, `job-${pathPrefix}${jobName}`);
 	}) });
 }
 var RUN_STATUSES = [
@@ -786,7 +752,7 @@ function walkJobPath(root, path) {
 	}
 	return isJobRecord(cursor) ? cursor : {};
 }
-function DependencyGraph({ run, preview = false, initialScale = 1, removeBorder, viewMode = "dag", setViewMode }) {
+function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag", setViewMode }) {
 	const engine = useWorkflowEngine();
 	const animT = .125;
 	const minScale = .2;
@@ -883,7 +849,8 @@ function DependencyGraph({ run, preview = false, initialScale = 1, removeBorder,
 		const timer = setInterval(() => setNow(DateTime.now()), 1e3);
 		return () => clearInterval(timer);
 	}, [isRunFinished]);
-	const jobs = walkJobPath(rootJobs, executedJobsPath[executedJobsPathIdx] ?? []);
+	const currentPath = executedJobsPath[executedJobsPathIdx] ?? [];
+	const jobs = walkJobPath(rootJobs, currentPath);
 	const resetGraph = useCallback(() => {
 		setSublogOpen("");
 		setStepsOpen(/* @__PURE__ */ new Set());
@@ -903,29 +870,14 @@ function DependencyGraph({ run, preview = false, initialScale = 1, removeBorder,
 		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;
-		});
+		setExpandedSubworkflows((prev) => toggled(prev, key));
 	}, []);
 	const toggleSteps = useCallback((key) => {
-		setStepsOpen((prev) => {
-			const next = new Set(prev);
-			if (next.has(key)) next.delete(key);
-			else next.add(key);
-			return next;
-		});
+		setStepsOpen((prev) => toggled(prev, key));
 		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;
-		});
+		setMatrixOpen((prev) => toggled(prev, key));
 		requestAnimationFrame(invalidateConnectors);
 	}, [invalidateConnectors]);
 	const { data: sublogs, isLoading: sublogsLoading, error: sublogsError } = useRunFile(runSlug, sublogOpen || null, preview ? void 0 : { refreshInterval: 2e3 });
@@ -937,11 +889,14 @@ function DependencyGraph({ run, preview = false, initialScale = 1, removeBorder,
 		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 [sublogJob = "", sublogStepDir] = sublogOpen.split("/").slice(-3, -1);
+	const sublogStep = sublogStepDir === void 0 ? void 0 : sublogStepDir.split("_")[1] ?? "";
+	const sublogIsStep = sublogStep !== void 0;
+	const sublogStepData = sublogIsStep ? jobs[sublogJob]?.steps[Number(sublogStep)] : void 0;
+	const logName = sublogIsStep ? `Job: ${jobLabel(sublogJob)} \nStep: ${sublogStepData?.name || `Step ${sublogStep}`}` : "";
+	const sublogIsSubworkflow = !!sublogStepData?.subworkflow;
+	const sublogFileStart = sublogOpen.lastIndexOf("/") + 1;
+	const sublogShowsLog = sublogOpen.slice(sublogFileStart) === "logs.out";
 	const matrixGroups = useMemo(() => engine.matrixGroups(jobs), [engine, jobs]);
 	const { dependencyCols } = useMemo(() => computeGraphLayout(engine, jobs, matrixGroups), [
 		engine,
@@ -1001,20 +956,18 @@ function DependencyGraph({ run, preview = false, initialScale = 1, removeBorder,
 		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()}/`;
+	const levelPrefixes = [];
+	for (let i = 0; i < nestingDepth; i++) levelPrefixes.push(`subworkflows/${currentPath[5 * i]}/step_${currentPath[5 * i + 2]}/`);
+	const pathAppend = levelPrefixes.join("");
 	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);
+		generalLogPath = engine.stepLogPath(levelPrefixes.slice(0, -1).join(""), 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 currentSublog = sublogOpen === "" ? "" : preview ? engine.toYaml(sublogStepData) : sublogsError || !sublogs ? missingLogText : sublogs;
 	const expansionKeys = useMemo(() => engine.expansionKeys(jobs, pathAppend), [
 		engine,
 		jobs,
@@ -1040,7 +993,7 @@ function DependencyGraph({ run, preview = false, initialScale = 1, removeBorder,
 	const nextStep = useCallback((backward) => {
 		const sublogSplit = sublogOpen.split("/");
 		let job = sublogSplit[sublogSplit.length - 3] ?? "";
-		let step = parseInt(sublogSplit[sublogSplit.length - 2].slice(5), 10);
+		let step = parseInt((sublogSplit[sublogSplit.length - 2] ?? "").slice(5), 10);
 		const jobArr = Object.keys(jobs);
 		let idx = jobArr.indexOf(job);
 		if (backward) {
@@ -1056,7 +1009,7 @@ function DependencyGraph({ run, preview = false, initialScale = 1, removeBorder,
 			job = jobArr[idx + 1] ?? "";
 			step = 0;
 		}
-		setSublogOpen(sublogSplit.slice(0, -3).join("/") + `/${job}/step_${step}/` + sublogSplit.slice(-1)[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);
@@ -1091,7 +1044,7 @@ function DependencyGraph({ run, preview = false, initialScale = 1, removeBorder,
 		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;
+	if (!dependencyCols[0]?.length) return;
 	const startDt = run.createdAt ? DateTime.fromISO(run.createdAt) : now;
 	const endDt = run.completedAt ? DateTime.fromISO(run.completedAt) : now;
 	const runtime = toAbsHumanDuration(startDt, endDt);
@@ -1113,16 +1066,16 @@ function DependencyGraph({ run, preview = false, initialScale = 1, removeBorder,
 			children: logName
 		})
 	] }) : void 0;
-	const additionalBottomRightBarComponents = (!preview || sublogIsSubworkflow) && sublogOpen && sublogIsStep ? /* @__PURE__ */ jsx("button", {
+	const additionalBottomRightBarComponents = (!preview || sublogIsSubworkflow) && sublogIsStep ? /* @__PURE__ */ jsx("button", {
 		type: "button",
 		className: "btn btn-neutral",
 		onClick: () => {
 			if (sublogIsSubworkflow) {
-				openInNewGraph(pathAppend, jobAndStep[0], parseInt(jobAndStep[1], 10));
+				openInNewGraph(pathAppend, sublogJob, parseInt(sublogStep ?? "", 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("/"));
+			} else setSublogOpen(sublogOpen.slice(0, sublogFileStart) + (sublogShowsLog ? "script-unstable-redacted.sh" : "logs.out"));
 		},
-		children: /* @__PURE__ */ jsx("span", { children: sublogIsSubworkflow ? "Open Subworkflow" : sublogOpen.split("/").slice(-1)[0] === "logs.out" ? "Show Script" : "Show Logs" })
+		children: /* @__PURE__ */ jsx("span", { children: sublogIsSubworkflow ? "Open Subworkflow" : sublogShowsLog ? "Show Script" : "Show Logs" })
 	}) : void 0;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col lg:flex-row w-full",
@@ -1212,7 +1165,7 @@ function DependencyGraph({ run, preview = false, initialScale = 1, removeBorder,
 									children: dagStrings.submitted
 								}), /* @__PURE__ */ jsx("div", {
 									className: "text-sm font-semibold flex items-center gap-x-1",
-									children: startDt ? startDt.toLocaleString(DateTime.DATETIME_SHORT) : ""
+									children: startDt.toLocaleString(DateTime.DATETIME_SHORT)
 								})]
 							}),
 							/* @__PURE__ */ jsx("div", { className: "flex-1" }),
@@ -1223,7 +1176,7 @@ function DependencyGraph({ run, preview = false, initialScale = 1, removeBorder,
 										setStepsOpen(/* @__PURE__ */ new Set());
 										requestAnimationFrame(fitGraph);
 									}
-									setViewMode?.(mode);
+									setViewMode(mode);
 								}
 							})
 						]
@@ -1233,15 +1186,13 @@ function DependencyGraph({ run, preview = false, initialScale = 1, removeBorder,
 						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",
+						className: cx("panel w-full overflow-hidden relative", removeBorder ? "border-none" : "border"),
 						style: {
 							height: containerHeight !== null ? `${containerHeight}px` : previewHeight !== null ? `${Math.min(previewHeight, windowSize.h * .62)}px` : "62vh",
 							minHeight: previewHeight !== null ? 0 : 160
@@ -1275,7 +1226,7 @@ function DependencyGraph({ run, preview = false, initialScale = 1, removeBorder,
 										className: "btn btn-info w-21 cursor-pointer h-6",
 										"aria-label": "Reset view",
 										onClick: () => {
-											if ((executedJobsPath[executedJobsPathIdx]?.length ?? 0) > 0) {
+											if (currentPath.length > 0) {
 												resetGraph();
 												setExecutedJobsPath([[], ...executedJobsPath.slice(executedJobsPathIdx, 10)]);
 												setExecutedJobsPathIdx(0);
@@ -1350,7 +1301,7 @@ function DependencyGraph({ run, preview = false, initialScale = 1, removeBorder,
 						value: currentSublog,
 						height: window.innerHeight / 1.4,
 						width: window.innerWidth / 1.4,
-						contentKey: "editor_" + sublogOpen
+						contentKey: `editor_${sublogOpen}`
 					}) ?? /* @__PURE__ */ jsx("pre", {
 						className: "h-full overflow-auto text-xs p-4",
 						style: {
@@ -1368,7 +1319,7 @@ function DependencyGraph({ run, preview = false, initialScale = 1, removeBorder,
 							})
 						}), additionalBottomRightBarComponents]
 					})] }) : /* @__PURE__ */ jsx(LogViewer, {
-						log: currentSublog?.length > 1e3 ? currentSublog.slice(-1e5) : currentSublog,
+						log: currentSublog.slice(-1e5),
 						height: windowSize.h / 1.2,
 						width: windowSize.w / 1.2,
 						hideExpand: true,
@@ -1390,9 +1341,8 @@ function DependencyGraphPreview(inputs) {
 			workflowName: ""
 		},
 		preview: true,
-		initialScale: inputs.initialScale || 1,
 		removeBorder: inputs.removeBorder
 	});
 }
 //#endregion
-export { DependencyGraphPreview, DependencyGraph as default };
+export { DependencyGraphPreview, addCleanupSteps, DependencyGraph as default };