@parallelworks/ui 0.39.0 → 0.40.1

package/dist/graph/DependencyGraph.js

@@ -18,15 +18,22 @@ import { AnnotationBanner } from "./AnnotationBanner.js";
 import { Collapse } from "./Collapse.js";
 import { jobLabel, toggled } from "./util.js";
 import { EDITOR_HANDLE_CLASS, GraphEditorProvider, useGraphEditor, useSelectedEdges } from "./graphEditorState.js";
-import { BoxGrip, EdgeEnds, EdgeHitPath, EmptyGraphEditor, GraphEditorCanvas, NodePorts } from "./editorRows.js";
-import { emptyColumnsStyle, emptyRowsStyle } from "./gridSpacing.js";
+import { EdgeEnds, EdgeHitPath, EmptyGraphEditor, GraphEditorCanvas, NodePorts } from "./editorRows.js";
+import { emptyColumnsStyle } from "./gridSpacing.js";
 import { Reveal } from "./Reveal.js";
 import { Joblist } from "./JobSummary.js";
+import { Store, useStore } from "./store.js";
+import { Lineage, LineageContext } from "./lineage.js";
+import { DimRules, JobNode, setDimmed } from "./GraphNode.js";
+import { ConnectorLayers } from "./Connectors.js";
+import { routeConnectors, sameBoxes } from "./connectorGeometry.js";
+import { isJobRecord } from "./types.js";
+import { computeGraphLayout, displayJobsOf, hopDistances, positionsOf } from "./graphLayout.js";
 import { MatrixGroupNode, MatrixGroupSummaryItem } from "./MatrixGroup.js";
 import TreeView from "./TreeView.js";
-import { isJobRecord } from "./types.js";
+import { FIT_MAX_SCALE, MIN_SCALE, ZOOM_STEP, fitMargin, fitView, intoView, wheelFactor, zoomAround, zoomLimit } from "./viewport.js";
 import cx from "classnames";
-import React, { Suspense, lazy, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, Suspense, createContext, lazy, memo, useCallback, useContext, 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";
@@ -199,171 +206,6 @@ function parsePrefixToPath(prefix) {
 	}
 	return path;
 }
-function unitsOnly(columns, together) {
-	return columns.map((col) => {
-		const boxes = [];
-		const rows = [];
-		let last = -1;
-		col.boxes.forEach((box, i) => {
-			const groups = [];
-			for (const job of box) {
-				const group = groups.find((g) => together(g[0] ?? job, job));
-				if (group) group.push(job);
-				else groups.push([job]);
-			}
-			const main = groups.reduce((a, b) => b.length > a.length ? b : a);
-			let row = Math.max(col.rows[i] ?? i, last + 1);
-			for (const group of [main, ...groups.filter((g) => g !== main)]) {
-				boxes.push(group);
-				rows.push(row);
-				last = row;
-				row += 1;
-			}
-		});
-		return {
-			...col,
-			boxes,
-			rows
-		};
-	});
-}
-function withLoneMatrixSlots({ layoutPosition, mapLayout }, layout, jobs, matrixGroups) {
-	const lone = Object.entries(jobs).flatMap(([name, job]) => {
-		const original = job._matrix?.originaljob;
-		const slot = original && !matrixGroups[original] ? layoutPosition(layout, original) : void 0;
-		return slot && !layoutPosition(layout, name) ? [{
-			name,
-			slot
-		}] : [];
-	});
-	if (lone.length === 0) return layout;
-	const next = mapLayout(layout, (position) => position);
-	for (const { name, slot } of lone) next[name] = slot;
-	return next;
-}
-function displayJobsOf(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);
-	return visibleJobs;
-}
-function computeGraphLayout(engine, jobs, matrixGroups, layout) {
-	const visibleJobs = displayJobsOf(engine, jobs, matrixGroups);
-	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) ? [...new Set(needs.map((need) => typeof need === "string" && engine.editing ? engine.editing.needTarget(need) : need))] : [];
-		filteredDeps[jobName] = oldNeeds.filter((dep) => {
-			return !oldNeeds.some((other) => {
-				if (other === dep) return false;
-				return allDeps[other]?.has(dep) === true;
-			});
-		}).sort();
-	}
-	const depended_on = {};
-	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];
-	for (const jobName of unfinished) if (filteredDeps[jobName]?.length === 0) {
-		rootLevel.push(jobName);
-		unfinished.delete(jobName);
-	}
-	let prevLen;
-	do {
-		const toAppend = [];
-		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 !== unfinished.size);
-	const together = (head, jobName) => {
-		const depsA = depended_on[head];
-		const depsB = depended_on[jobName];
-		const depsA2 = filteredDeps[head];
-		const depsB2 = filteredDeps[jobName];
-		return (!depsA && !depsB || !!depsA && !!depsB && depsA.length === depsB.length) && (!depsA2 && !depsB2 || !!depsA2 && !!depsB2 && depsA2.length === depsB2.length) && (!depsA || depsA.every((dep, i) => dep === depsB?.[i])) && (!depsA2 || depsA2.every((dep, i) => dep === depsB2?.[i]));
-	};
-	const alone = (job) => !!visibleJobs[job]?._matrixGroup;
-	const editing = engine.editing;
-	const laidOut = layout && editing?.hasLayout(layout) ? unitsOnly(editing.boxesFromLayout(Object.keys(visibleJobs), filteredDeps, withLoneMatrixSlots(editing, layout, visibleJobs, matrixGroups), {
-		together,
-		alone
-	}), together) : null;
-	const finalDeps = laidOut ? laidOut.map((col) => col.boxes) : [];
-	if (!laidOut) 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 (!alone(head) && !alone(jobName) && together(head, jobName)) {
-					grouped.push(jobName);
-					toRm.push(j + 1);
-				}
-			});
-			col.splice(0, col.length, ...col.filter((_, i) => !toRm.includes(i)));
-			toAppend.push(grouped);
-		}
-		finalDeps.push(toAppend);
-	});
-	if (finalDeps[0]?.length === 0) {
-		finalDeps.shift();
-		laidOut?.shift();
-	}
-	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]];
-		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]);
-			}
-		}
-		ancestorDists[start] = aDist;
-		const dDist = /* @__PURE__ */ new Map();
-		const q2 = [[start, 0]];
-		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]);
-			}
-		}
-		descendantDists[start] = dDist;
-	}
-	return {
-		dependencyCols: finalDeps,
-		/** Each box's row; above a box, rows the layout leaves empty stay as space. */
-		rowSlots: laidOut ? laidOut.map((col) => col.rows) : finalDeps.map((col) => col.map((_, i) => i)),
-		/** Each column's number; between two drawn columns, numbers skipped stay as space. */
-		colSlots: laidOut ? laidOut.map((col) => col.column) : finalDeps.map((_, i) => i),
-		directDeps: filteredDeps,
-		displayJobs: visibleJobs,
-		ancestorDists,
-		descendantDists
-	};
-}
 function jobHandlers({ engine, jobs, displayJobs, pathPrefix, stepsOpen, toggleSteps, expandedSubworkflows, toggleSubworkflow, openInNewGraph, setSublogOpen, renderWell, editStep }) {
 	const isStepsOpen = (j) => stepsOpen.has(pathPrefix + j);
 	const subworkflowKey = (j, s) => `${pathPrefix}${j}:${s}`;
@@ -407,10 +249,13 @@ function SubworkflowWell({ expanded, onSettled, className, children }) {
 	});
 }
 var SUBGRAPH_Z_STEP = 100;
+var FADE_NODES = 300;
 var GraphEditorOverlays = lazy(() => import("./GraphEditor.js"));
-var CONNECTOR_COLOR = "var(--theme-border)";
-var HIGHLIGHT_COLOR = "var(--theme-element)";
 var FIT_ANIMATION_MS = 300;
+var ConnectorClock = class extends Store {
+	bump = () => this.notify();
+};
+var ConnectorClockContext = createContext(null);
 function sizesSettled(els) {
 	return new Promise((resolve) => {
 		let frame = 0;
@@ -429,33 +274,36 @@ function sizesSettled(els) {
 function sizingTransitions(el) {
 	return el.getAnimations({ subtree: true }).filter((animation) => animation instanceof CSSTransition && (animation.transitionProperty === "grid-template-rows" || animation.transitionProperty === "width"));
 }
-function intoView(start, end, low, high) {
-	if (end - start > high - low) return 0;
-	if (start < low) return low - start;
-	return end > high ? high - end : 0;
-}
 var HOLD_MS = 2e3;
-var ZOOM_STEP = .25;
-function Subgraph({ jobs, pathPrefix, depth, preview, animT, expandedSubworkflows, toggleSubworkflow, openInNewGraph, setSublogOpen, invalidateConnectors, requestFit, stepsOpen, toggleSteps, matrixOpen, toggleMatrix, onReady, layout, editable = false }) {
+var skippedBefore = (slots, i) => (slots?.[i] ?? i) - (i === 0 ? 0 : (slots?.[i - 1] ?? i - 1) + 1);
+function measureBoxes(cols, pathPrefix, wrapper) {
+	const boxes = /* @__PURE__ */ new Map();
+	for (const col of cols) for (const [head] of col) {
+		const el = head === void 0 ? null : document.getElementById(`node_${pathPrefix}${head}`);
+		if (head !== void 0 && el) boxes.set(head, {
+			...offsetWithin(el, wrapper),
+			width: el.offsetWidth
+		});
+	}
+	return boxes;
+}
+var Subgraph = memo(function Subgraph({ jobs, pathPrefix, depth, preview, animT, expandedSubworkflows, toggleSubworkflow, openInNewGraph, setSublogOpen, invalidateConnectors, requestFit, stepsOpen, toggleSteps, matrixOpen, toggleMatrix, onReady, layout, graph, editable = false }) {
 	const engine = useWorkflowEngine();
+	useStore(useContext(ConnectorClockContext), (clock) => clock.version, 0);
 	const wrapperRef = useRef(null);
+	const routedRef = useRef(null);
 	const editorApi = useGraphEditor();
 	const selectedEdges = useSelectedEdges(editable ? editorApi : 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 placed = useMemo(() => layout ?? (depth > 0 ? positionsOf(jobs) : void 0), [
 		layout,
 		depth,
 		jobs
 	]);
-	const { dependencyCols, rowSlots, colSlots, directDeps, displayJobs, ancestorDists, descendantDists } = useMemo(() => computeGraphLayout(engine, jobs, matrixGroups, placed), [
+	const { dependencyCols, rowSlots, colSlots, directDeps, dependents, displayJobs } = useMemo(() => graph ?? computeGraphLayout(engine, jobs, engine.matrixGroups(jobs), placed), [
+		graph,
 		engine,
 		jobs,
-		matrixGroups,
 		placed
 	]);
 	useEffect(() => {
@@ -475,43 +323,27 @@ function Subgraph({ jobs, pathPrefix, depth, preview, animT, expandedSubworkflow
 		rowSlots,
 		colSlots
 	]);
-	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
+	const lineage = useMemo(() => new Lineage((job) => hopDistances(job, directDeps, dependents), {
+		animT,
+		depth,
+		fade: dependencyCols.reduce((n, col) => n + col.length, 0) <= FADE_NODES
+	}), [
+		directDeps,
+		dependents,
+		animT,
+		depth,
+		dependencyCols
 	]);
-	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]);
+		const wrapper = wrapperRef.current;
+		const dim = () => wrapper && setDimmed(wrapper, lineage.depth, lineage.hovering);
+		dim();
+		const unsubscribe = lineage.subscribe(dim);
+		return () => {
+			unsubscribe();
+			lineage.dispose();
+		};
+	}, [lineage]);
 	useEffect(() => {
 		const raf = requestAnimationFrame(() => {
 			invalidateConnectors();
@@ -550,394 +382,207 @@ function Subgraph({ jobs, pathPrefix, depth, preview, animT, expandedSubworkflow
 		expandedSubworkflows,
 		invalidateConnectors
 	]);
-	const buildBoxLayer = useCallback(() => {
-		const handlers = jobHandlers({
-			engine,
-			jobs,
-			displayJobs,
-			pathPrefix,
-			stepsOpen,
-			toggleSteps,
-			expandedSubworkflows,
-			toggleSubworkflow: (key) => {
-				toggleSubworkflow(key);
-				requestAnimationFrame(invalidateConnectors);
-			},
-			openInNewGraph,
-			setSublogOpen,
-			editStep: editable && editorApi ? (j, s) => editorApi.editStep(j, s) : void 0,
-			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: subPrefix,
-					depth: depth + 1,
-					preview,
-					animT,
-					expandedSubworkflows,
-					toggleSubworkflow,
-					openInNewGraph,
-					setSublogOpen,
-					invalidateConnectors,
-					requestFit,
-					stepsOpen,
-					toggleSteps,
-					matrixOpen,
-					toggleMatrix
-				})
+	const handlers = useMemo(() => jobHandlers({
+		engine,
+		jobs,
+		displayJobs,
+		pathPrefix,
+		stepsOpen,
+		toggleSteps,
+		expandedSubworkflows,
+		toggleSubworkflow: (key) => {
+			toggleSubworkflow(key);
+			requestAnimationFrame(invalidateConnectors);
+		},
+		openInNewGraph,
+		setSublogOpen,
+		editStep: editable && editorApi ? (j, s) => editorApi.editStep(j, s) : void 0,
+		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: subPrefix,
+				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, c) => {
-				return /* @__PURE__ */ jsx("div", {
-					style: emptyColumnsStyle((colSlots[c] ?? c) - (c === 0 ? 0 : (colSlots[c - 1] ?? c - 1) + 1)),
-					children: col.map((jobNames, i) => {
-						const first = jobNames[0];
-						if (first === void 0) return null;
-						const matrixGroup = displayJobs[first]?._matrixGroup;
-						const rowsAbove = (rowSlots[c]?.[i] ?? i) - (i === 0 ? 0 : (rowSlots[c]?.[i - 1] ?? i - 1) + 1);
-						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(first),
-							onMouseLeave: () => setHoveredJob(null),
-							hoveredRelated,
-							animT,
-							zBase,
-							handlers,
-							preview,
-							editable,
-							rowsAbove
-						}, `node_${first}`);
-						return /* @__PURE__ */ jsxs("div", {
-							id: `node_${pathPrefix}${first}`,
-							role: "none",
-							className: "relative m-24",
-							style: {
-								zIndex: (activeDists?.has(first) ? 25 : 1) + zBase,
-								...emptyRowsStyle(rowsAbove)
-							},
-							onMouseEnter: () => setHoveredJob(first),
-							onMouseLeave: () => setHoveredJob(null),
-							onFocus: () => setHoveredJob(first),
-							onBlur: () => setHoveredJob(null),
-							children: [/* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-2xl bg-(--theme-panel-bg)" }), /* @__PURE__ */ jsxs("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(first) ? .5 : 1,
-									transition: `opacity ${animT}s`
-								},
-								children: [editable && jobNames.length > 1 && /* @__PURE__ */ jsx(BoxGrip, { jobs: jobNames }), /* @__PURE__ */ jsx(Joblist, {
-									jobs: displayJobs,
-									jobNames,
-									...handlers,
-									growWidth: true,
-									preview,
-									editable
-								})]
-							})]
-						}, `node_${first}`);
-					})
-				}, col[0]?.[0]);
+		})
+	}), [
+		engine,
+		jobs,
+		displayJobs,
+		pathPrefix,
+		stepsOpen,
+		toggleSteps,
+		expandedSubworkflows,
+		toggleSubworkflow,
+		openInNewGraph,
+		setSublogOpen,
+		editable,
+		editorApi,
+		requestFit,
+		depth,
+		preview,
+		animT,
+		invalidateConnectors,
+		matrixOpen,
+		toggleMatrix
+	]);
+	const nodes = useMemo(() => /* @__PURE__ */ jsx("div", {
+		className: "flex relative",
+		children: dependencyCols.map((col, c) => /* @__PURE__ */ jsx("div", {
+			style: emptyColumnsStyle(skippedBefore(colSlots, c)),
+			children: col.map((jobNames, i) => {
+				const first = jobNames[0];
+				if (first === void 0) return null;
+				const shell = {
+					rowsAbove: skippedBefore(rowSlots[c], i),
+					zBase
+				};
+				const matrixGroup = displayJobs[first]?._matrixGroup;
+				return matrixGroup ? /* @__PURE__ */ jsx(MatrixGroupNode, {
+					...shell,
+					matrixGroup,
+					jobNames,
+					idPrefix: pathPrefix,
+					isExpanded: matrixOpen.has(pathPrefix + matrixGroup.originaljob),
+					toggleMatrix,
+					jobs,
+					handlers,
+					preview,
+					editable
+				}, `node_${first}`) : /* @__PURE__ */ jsx(JobNode, {
+					...shell,
+					id: `node_${pathPrefix}${first}`,
+					jobNames,
+					jobs: displayJobs,
+					handlers,
+					preview,
+					editable
+				}, `node_${first}`);
 			})
-		});
-	}, [
+		}, col[0]?.[0]))
+	}), [
 		dependencyCols,
 		rowSlots,
 		colSlots,
 		displayJobs,
 		jobs,
-		stepsOpen,
 		matrixOpen,
-		expandedSubworkflows,
-		hoveredRelated,
-		activeDists,
-		animT,
 		zBase,
 		preview,
 		pathPrefix,
-		depth,
-		toggleSteps,
-		toggleSubworkflow,
 		toggleMatrix,
-		openInNewGraph,
-		setSublogOpen,
-		engine,
-		invalidateConnectors,
-		requestFit,
-		editable,
-		editorApi
+		handlers,
+		editable
 	]);
-	const memoizedBoxLayer = useMemo(() => buildBoxLayer(), [buildBoxLayer]);
-	const hasLiveNestedGraph = Array.from(expandedSubworkflows).some((k) => k.startsWith(pathPrefix));
 	if (!dependencyCols[0]?.length) return null;
+	const wrapper = wrapperRef.current;
+	const measured = wrapper ? measureBoxes(dependencyCols, pathPrefix, wrapper) : /* @__PURE__ */ new Map();
+	const last = routedRef.current;
+	const routed = last && last.directDeps === directDeps && sameBoxes(last.boxes, measured) ? last : {
+		boxes: measured,
+		directDeps,
+		edges: routeConnectors(dependencyCols, colSlots.some((column, c) => column !== c), directDeps, measured, 37)
+	};
+	routedRef.current = routed;
+	const { boxes, edges } = routed;
 	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;
-				const depsOf = (head) => directDeps[head] ?? [];
-				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);
-				}
-				if (colSlots.some((column, c) => column !== c)) for (let c = 1; c < dependencyCols.length; c++) {
-					const left = gid(dependencyCols[c - 1]?.[0]?.[0] ?? "");
-					const right = gid(dependencyCols[c]?.[0]?.[0] ?? "");
-					if (left && right) colGap = Math.min(colGap, ox(right) - (ox(left) + left.offsetWidth));
-				}
-				let minAdy = Number.POSITIVE_INFINITY;
-				for (const col of dependencyCols) for (const jobNames of col) {
-					const first = jobNames[0];
-					if (first === void 0) continue;
-					for (const dep of depsOf(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);
-				const ports = (jobNames) => {
-					const [head] = jobNames;
-					const el = head === void 0 ? null : gid(head);
-					if (head === void 0 || !el) return null;
-					const y = nodeConnectorY(el);
-					const wiredIn = depsOf(head).some((dep) => gid(dep));
-					const wiredOut = dependencyCols.some((c) => c.some(([other = ""]) => depsOf(other).includes(head) && !!gid(other)));
-					return /* @__PURE__ */ jsx(NodePorts, {
-						jobs: jobNames,
-						left: {
-							x: ox(el) + 2,
-							y
-						},
-						right: {
-							x: ox(el) + el.offsetWidth - 2,
-							y
-						},
-						drawLeft: !wiredIn,
-						drawRight: !wiredOut,
-						zIndex: 40 + zBase
-					});
-				};
-				const hits = [];
-				const connectors = dependencyCols.map((col) => /* @__PURE__ */ jsx(React.Fragment, { children: col.map((jobNames) => {
-					const first = jobNames[0];
-					if (first === void 0) return null;
-					return /* @__PURE__ */ jsxs(React.Fragment, { children: [editable && ports(jobNames), depsOf(first).map((dep) => {
-						const isHighlighted = hoveredRelated?.has(first) && hoveredRelated?.has(dep);
-						const depDist = activeDists?.get(dep) ?? 0;
-						const targetDist = activeDists?.get(first) ?? 0;
-						const closerDist = Math.min(depDist, targetDist);
-						const connectorDelay = closerDist * animT;
-						const retractDelay = (maxHoveredDistRef.current - closerDist) * animT;
-						const drawRightToLeft = targetDist < depDist;
-						const start = gid(dep);
-						const end = gid(first);
-						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 selected = selectedEdges.some((edge) => edge.from === dep && edge.to === first);
-						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);
-						}
-						if (editable) hits.push(/* @__PURE__ */ jsxs(React.Fragment, { children: [selected && /* @__PURE__ */ jsx("path", {
-							d: pathD,
-							stroke: "var(--theme-element)",
-							strokeWidth: "10",
-							fill: "transparent"
-						}), /* @__PURE__ */ jsx(EdgeHitPath, {
-							d: pathD,
-							edge: {
-								from: dep,
-								to: first
-							}
-						})] }, `${dep}→${first}`));
-						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(first) ? 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 ? HIGHLIGHT_COLOR : CONNECTOR_COLOR,
-										style: {
-											opacity: hoveredRelated && !isHighlighted ? .3 : 1,
-											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 ? HIGHLIGHT_COLOR : CONNECTOR_COLOR,
-										style: {
-											opacity: hoveredRelated && !isHighlighted ? .3 : 1,
-											transition: isHighlighted ? `fill ${animT}s ${targetDist * animT}s, opacity 0s` : `fill ${animT}s ${(maxHoveredDistRef.current - targetDist) * animT}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: CONNECTOR_COLOR,
-									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: HIGHLIGHT_COLOR,
-										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}→${first}`;
-									if (isHighlighted) retractPathLensRef.current.set(connKey, pathLen);
-									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: HIGHLIGHT_COLOR,
-											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`
-										}
-									});
-								})()]
-							}),
-							editable && selected && /* @__PURE__ */ jsx(EdgeEnds, {
-								edge: {
-									from: dep,
-									to: first
-								},
-								start: {
-									x: x1,
-									y: y1
-								},
-								end: {
-									x: x2,
-									y: y2
-								},
-								zIndex: 45 + zBase
-							})
-						] }, dep);
-					})] }, first);
-				}) }, col[0]?.[0]));
-				return /* @__PURE__ */ jsxs(Fragment$1, { children: [connectors, editable && /* @__PURE__ */ jsx("svg", {
-					role: "none",
-					overflow: "visible",
-					className: "absolute pointer-events-none",
-					width: wrapper?.offsetWidth,
-					height: wrapper?.offsetHeight,
-					style: { zIndex: 1 + zBase },
-					children: hits
-				})] });
-			})(),
-			hasLiveNestedGraph ? buildBoxLayer() : memoizedBoxLayer,
-			editable && /* @__PURE__ */ jsx(GraphEditorCanvas, {})
-		]
+		children: [/* @__PURE__ */ jsxs(LineageContext, {
+			value: lineage,
+			children: [
+				/* @__PURE__ */ jsx(DimRules, { depth }),
+				/* @__PURE__ */ jsx(ConnectorLayers, {
+					edges,
+					zBase
+				}),
+				editable && /* @__PURE__ */ jsx(EditorEdges, {
+					edges,
+					cols: dependencyCols,
+					boxes,
+					selected: selectedEdges,
+					zBase,
+					size: wrapper ? {
+						width: wrapper.offsetWidth,
+						height: wrapper.offsetHeight
+					} : void 0
+				}),
+				nodes
+			]
+		}), editable && /* @__PURE__ */ jsx(GraphEditorCanvas, {})]
 	});
-}
+});
 var NestedSubgraph = Subgraph;
+function EditorEdges({ edges, cols, boxes, selected, zBase, size }) {
+	const wiredIn = new Set(edges.map((edge) => edge.to));
+	const wiredOut = new Set(edges.map((edge) => edge.from));
+	const chosen = new Set(selected.map((edge) => `${edge.from}→${edge.to}`));
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		cols.flatMap((col) => col.map((jobNames) => {
+			const [head] = jobNames;
+			const box = head === void 0 ? void 0 : boxes.get(head);
+			if (head === void 0 || !box) return null;
+			const y = box.y + 37;
+			return /* @__PURE__ */ jsx(NodePorts, {
+				jobs: jobNames,
+				left: {
+					x: box.x + 2,
+					y
+				},
+				right: {
+					x: box.x + box.width - 2,
+					y
+				},
+				drawLeft: !wiredIn.has(head),
+				drawRight: !wiredOut.has(head),
+				zIndex: 40 + zBase
+			}, head);
+		})),
+		edges.map(({ from, to, start, end }) => chosen.has(`${from}→${to}`) && /* @__PURE__ */ jsx(EdgeEnds, {
+			edge: {
+				from,
+				to
+			},
+			start,
+			end,
+			zIndex: 45 + zBase
+		}, `${from}→${to}`)),
+		/* @__PURE__ */ jsx("svg", {
+			role: "none",
+			overflow: "visible",
+			className: "absolute pointer-events-none",
+			width: size?.width,
+			height: size?.height,
+			style: { zIndex: 1 + zBase },
+			children: edges.map(({ from, to, path }) => /* @__PURE__ */ jsxs(Fragment, { children: [chosen.has(`${from}→${to}`) && /* @__PURE__ */ jsx("path", {
+				d: path.d,
+				stroke: "var(--theme-element)",
+				strokeWidth: "10",
+				fill: "transparent"
+			}), /* @__PURE__ */ jsx(EdgeHitPath, {
+				d: path.d,
+				edge: {
+					from,
+					to
+				}
+			})] }, `${from}→${to}`))
+		})
+	] });
+}
 function SidebarJobs({ jobs, pathPrefix, preview, stepsOpen, toggleSteps, expandedSubworkflows, toggleSubworkflow, matrixOpen, toggleMatrix, openInNewGraph, setSublogOpen }) {
 	const engine = useWorkflowEngine();
 	const displayJobs = useMemo(() => displayJobsOf(engine, jobs, engine.matrixGroups(jobs)), [engine, jobs]);
@@ -1023,11 +668,37 @@ function walkJobPath(root, path) {
 	}
 	return isJobRecord(cursor) ? cursor : {};
 }
+function RunTime({ start, end, finished }) {
+	const [now, setNow] = useState(() => DateTime.now());
+	const ticking = !end && !finished;
+	useEffect(() => {
+		if (!ticking) return;
+		const timer = setInterval(() => setNow(DateTime.now()), 1e3);
+		return () => clearInterval(timer);
+	}, [ticking]);
+	return toAbsHumanDuration(start, end ?? now);
+}
+function graphBounds(content) {
+	const nodes = outerNodes(content);
+	if (nodes.length === 0) return null;
+	const bounds = {
+		minX: Number.POSITIVE_INFINITY,
+		minY: Number.POSITIVE_INFINITY,
+		maxX: 0,
+		maxY: 0
+	};
+	for (const node of nodes) {
+		const { x, y } = offsetWithin(node, content);
+		bounds.minX = Math.min(bounds.minX, x);
+		bounds.minY = Math.min(bounds.minY, y);
+		bounds.maxX = Math.max(bounds.maxX, x + node.offsetWidth);
+		bounds.maxY = Math.max(bounds.maxY, y + node.offsetHeight);
+	}
+	return bounds;
+}
 function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag", setViewMode, layout, editor, yamlJobs, inputs, workflow, fixedHeight }) {
 	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 ?? "";
@@ -1039,8 +710,8 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 	const containerRef = useRef(null);
 	const graphContentRef = useRef(null);
 	const transformRef = useRef(null);
-	const [, forceRerender] = useState(0);
-	const invalidateConnectors = useCallback(() => forceRerender((c) => c + 1), []);
+	const [clock] = useState(() => new ConnectorClock());
+	const invalidateConnectors = clock.bump;
 	const [windowSize, setWindowSize] = useState(() => ({
 		w: typeof window !== "undefined" ? window.innerWidth : 800,
 		h: typeof window !== "undefined" ? window.innerHeight : 600
@@ -1115,13 +786,7 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 	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 [shownAt] = useState(() => DateTime.now());
 	const currentPath = executedJobsPath[executedJobsPathIdx] ?? [];
 	const jobs = walkJobPath(rootJobs, currentPath);
 	const root = currentPath.length === 0;
@@ -1192,18 +857,19 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 	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), [
+	const rootGraph = useMemo(() => computeGraphLayout(engine, jobs, engine.matrixGroups(jobs), placed), [
 		engine,
 		jobs,
-		matrixGroups
+		placed
 	]);
+	const { dependencyCols } = rootGraph;
 	const held = useRef(null);
 	const viewed = useRef(false);
+	const rowOf = useCallback((job) => [...containerRef.current?.querySelectorAll("[data-dag-job]") ?? []].find((el) => el.dataset["dagJob"] === job) ?? null, []);
 	const nodeOf = useCallback((job) => {
-		const row = [...containerRef.current?.querySelectorAll("[data-dag-job]") ?? []].find((el) => el.dataset["dagJob"] === job);
-		return row?.closest("[id^=\"node_\"]") ?? row ?? null;
-	}, []);
+		const row = rowOf(job);
+		return row?.closest("[id^=\"node_\"]") ?? row;
+	}, [rowOf]);
 	const hold = useCallback((job) => {
 		const content = graphContentRef.current;
 		const transform = transformRef.current;
@@ -1222,65 +888,38 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 		const container = containerRef.current;
 		const content = graphContentRef.current;
 		const transform = transformRef.current;
-		if (!container || !content || !transform) return;
-		const nodes = outerNodes(content);
-		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;
-		const margin = Math.min(containerW, containerH) * .05;
+		const bounds = content ? graphBounds(content) : null;
+		if (!container || !content || !transform || !bounds) return;
+		const panel = {
+			width: container.clientWidth,
+			height: container.clientHeight
+		};
 		const pending = held.current;
 		held.current = null;
 		const node = pending && performance.now() - pending.at < HOLD_MS ? nodeOf(pending.job) : null;
 		const viewing = editor && viewed.current && animationMs === 0;
 		if (pending && node || viewing) {
-			const { positionX, positionY, scale: current } = transform.instance.state;
+			const { positionX, positionY, scale } = transform.instance.state;
 			const pos = pending && node ? offsetWithin(node, content) : null;
-			const x = pending && pos ? pending.x - pos.x * current : positionX;
-			const y = pending && pos ? pending.y - pos.y * current : positionY;
-			transform.setTransform(x, y, current, 0);
-			const dx = intoView(x + minX * current, x + maxX * current, margin, containerW - margin);
-			const dy = intoView(y + minY * current, y + maxY * current, margin, containerH - margin);
-			requestAnimationFrame(() => {
-				if (dx !== 0 || dy !== 0) transform.setTransform(x + dx, y + dy, current, FIT_ANIMATION_MS, "easeOut");
-				invalidateConnectors();
-			});
+			const x = pending && pos ? pending.x - pos.x * scale : positionX;
+			const y = pending && pos ? pending.y - pos.y * scale : positionY;
+			transform.setTransform(x, y, scale, 0);
+			const margin = fitMargin(panel);
+			const dx = intoView(x + bounds.minX * scale, x + bounds.maxX * scale, margin, panel.width - margin);
+			const dy = intoView(y + bounds.minY * scale, y + bounds.maxY * scale, margin, panel.height - margin);
+			if (dx !== 0 || dy !== 0) requestAnimationFrame(() => transform.setTransform(x + dx, y + dy, scale, FIT_ANIMATION_MS, "easeOut"));
 			return;
 		}
-		if (graphW === 0 || graphH === 0) return;
-		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;
+		const view = fitView(bounds, panel);
+		if (!view) return;
 		if (animationMs > 0) {
-			transform.setTransform(offsetX, offsetY, scale, animationMs, "easeOut");
+			transform.setTransform(view.x, view.y, view.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,
-		nodeOf,
-		editor
-	]);
+		if (wrapperEl) wrapperEl.style.transform = `translate(${view.x}px, ${view.y}px) scale(${view.scale})`;
+		requestAnimationFrame(() => transform.setTransform(view.x, view.y, view.scale, 0));
+	}, [nodeOf, editor]);
 	const fitWhenSettled = useCallback(async () => {
 		const container = containerRef.current;
 		const content = graphContentRef.current;
@@ -1323,7 +962,7 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 	useEffect(() => {
 		if (!registerShow || !editorApi) return;
 		return registerShow(({ job, step }) => {
-			const row = [...containerRef.current?.querySelectorAll("[data-dag-job]") ?? []].find((el) => el.dataset["dagJob"] === job);
+			const row = job === void 0 ? null : rowOf(job);
 			if (job === void 0 || !row) return false;
 			if (step !== void 0) setStepsOpen((prev) => new Set(prev).add(job));
 			editorApi.focus(step === void 0 ? { job } : {
@@ -1338,28 +977,54 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 	}, [
 		registerShow,
 		editorApi,
-		centerOn
+		centerOn,
+		rowOf
 	]);
-	const [zoomedAll, setZoomedAll] = useState("in");
-	const onTransform = useCallback((_, { scale }) => {
-		setZoomedAll(scale >= .599 ? "in" : scale <= .201 ? "out" : null);
-		invalidateConnectors();
-	}, [invalidateConnectors]);
+	const [zoomedAll, setZoomedAll] = useState(() => zoomLimit(FIT_MAX_SCALE));
+	const onTransform = useCallback((_, { scale }) => setZoomedAll(zoomLimit(scale)), []);
 	const moved = useCallback(() => {
 		viewed.current = true;
-		invalidateConnectors();
-	}, [invalidateConnectors]);
-	const zoomBy = useCallback((step) => {
-		const container = containerRef.current;
-		const transform = transformRef.current;
-		if (!container || !transform) return;
+	}, []);
+	const zoomTo = useCallback((view, animationMs) => {
 		viewed.current = true;
-		const { positionX, positionY, scale } = transform.instance.state;
-		const next = Math.min(maxScale, Math.max(minScale, scale * Math.exp(step)));
-		const x = container.clientWidth / 2;
-		const y = container.clientHeight / 2;
-		transform.setTransform(x - (x - positionX) / scale * next, y - (y - positionY) / scale * next, next, FIT_ANIMATION_MS, "easeOut");
+		transformRef.current?.setTransform(view.x, view.y, view.scale, animationMs, "easeOut");
 	}, []);
+	const currentView = () => {
+		const state = transformRef.current?.instance.state;
+		return state ? {
+			x: state.positionX,
+			y: state.positionY,
+			scale: state.scale
+		} : null;
+	};
+	const zoomBy = (step) => {
+		const container = containerRef.current;
+		const view = currentView();
+		if (container && view) {
+			const middle = {
+				x: container.clientWidth / 2,
+				y: container.clientHeight / 2
+			};
+			zoomTo(zoomAround(view, middle, Math.exp(step)), FIT_ANIMATION_MS);
+		}
+	};
+	useEffect(() => {
+		const wrapper = transformRef.current?.instance.wrapperComponent;
+		if (!wrapper) return;
+		const onWheel = (event) => {
+			const view = currentView();
+			if (!view) return;
+			event.preventDefault();
+			const rect = wrapper.getBoundingClientRect();
+			const at = {
+				x: event.clientX - rect.left,
+				y: event.clientY - rect.top
+			};
+			zoomTo(zoomAround(view, at, wheelFactor(event)), 0);
+		};
+		wrapper.addEventListener("wheel", onWheel, { passive: false });
+		return () => wrapper.removeEventListener("wheel", onWheel);
+	}, [containerEl, zoomTo]);
 	useEffect(() => {
 		if (preview) return;
 		const raf = requestAnimationFrame(() => fitGraph());
@@ -1476,9 +1141,7 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 			removeBorder
 		})
 	}) : void 0;
-	const startDt = run.createdAt ? DateTime.fromISO(run.createdAt) : now;
-	const endDt = run.completedAt ? DateTime.fromISO(run.completedAt) : now;
-	const runtime = toAbsHumanDuration(startDt, endDt);
+	const startDt = run.createdAt ? DateTime.fromISO(run.createdAt) : shownAt;
 	const additionalBottomLeftBarComponents = sublogIsStep ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsxs("button", {
 			type: "button",
@@ -1586,7 +1249,11 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 									children: dagStrings.runtime
 								}), /* @__PURE__ */ jsx("div", {
 									className: "text-sm font-semibold flex items-center gap-x-1",
-									children: runtime
+									children: /* @__PURE__ */ jsx(RunTime, {
+										start: startDt,
+										end: run.completedAt ? DateTime.fromISO(run.completedAt) : void 0,
+										finished: run.status === "completed" || run.status === "error" || run.status === "canceled"
+									})
 								})]
 							}),
 							/* @__PURE__ */ jsxs("div", {
@@ -1631,9 +1298,10 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 						},
 						children: [/* @__PURE__ */ jsx(TransformWrapper, {
 							ref: transformRef,
-							minScale,
-							maxScale,
-							initialScale: maxScale,
+							minScale: MIN_SCALE,
+							maxScale: 2,
+							initialScale: FIT_MAX_SCALE,
+							wheel: { disabled: true },
 							...editor ? { panning: { excluded: [EDITOR_HANDLE_CLASS] } } : {},
 							doubleClick: { disabled: true },
 							limitToBounds: false,
@@ -1643,8 +1311,6 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 							onPanning: moved,
 							onPinch: moved,
 							onTransform,
-							onWheel: moved,
-							onZoom: invalidateConnectors,
 							children: () => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
 								className: "absolute z-10 top-2 right-2 flex max-w-[calc(100%-1rem)] flex-col items-end gap-y-1",
 								children: /* @__PURE__ */ jsx(GraphViewControls, {
@@ -1666,30 +1332,34 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 									onZoom: (direction) => zoomBy(direction * ZOOM_STEP),
 									zoomedAll
 								})
-							}), /* @__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: fitWhenSettled,
-									stepsOpen,
-									toggleSteps,
-									matrixOpen,
-									toggleMatrix,
-									onReady: fitGraph,
-									layout: placed,
-									editable: !!editorApi && currentPath.length === 0
-								}, `sg-${executedJobsPathIdx}-${pathAppend}`)
+							}), /* @__PURE__ */ jsx(TransformComponent, { children: /* @__PURE__ */ jsx(ConnectorClockContext, {
+								value: clock,
+								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: fitWhenSettled,
+										stepsOpen,
+										toggleSteps,
+										matrixOpen,
+										toggleMatrix,
+										onReady: fitGraph,
+										layout: placed,
+										graph: rootGraph,
+										editable: !!editorApi && currentPath.length === 0
+									}, `sg-${executedJobsPathIdx}-${pathAppend}`)
+								})
 							}) })] })
 						}), editorOverlays]
 					})
@@ -1745,26 +1415,6 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 		children: graph
 	});
 }
-var isSlot = (value) => typeof value === "number" && Number.isInteger(value) && value >= 0;
-/** Each job's place on the graph from its `position`; none when no job has one. */
-function positionsOf(jobs) {
-	const layout = Object.create(null);
-	let any = false;
-	for (const [name, job] of Object.entries(jobs)) {
-		const { position, _matrix } = isJobRecord(job) ? job : {};
-		const { column, row } = isJobRecord(position) ? position : {};
-		const original = isJobRecord(_matrix) ? _matrix["originaljob"] : void 0;
-		const key = typeof original === "string" && original ? original : name;
-		if (isSlot(column) && isSlot(row) && !(key in layout)) {
-			layout[key] = {
-				column,
-				row
-			};
-			any = true;
-		}
-	}
-	return any ? layout : void 0;
-}
 /** Jobs as a run evaluates them before it starts: each `strategy`, and a `needs` expression, from the inputs' defaults. */
 function withRunExpressions(engine, jobs, workflowInputs) {
 	let values;
@@ -1871,4 +1521,4 @@ function DependencyGraphPreview(inputs) {
 	});
 }
 //#endregion
-export { DependencyGraphPreview, addCleanupSteps, computeGraphLayout, DependencyGraph as default, intoView };
+export { DependencyGraphPreview, addCleanupSteps, DependencyGraph as default };