@parallelworks/ui 0.34.0 → 0.35.0

package/dist/graph/DependencyGraph.js

@@ -2,14 +2,21 @@ import { useRunFile, useSlots, useStrings, useWorkflowEngine } from "../componen
 import { FaArrowLeft } from "../icons/fa/FaArrowLeft.js";
 import { FaArrowRight } from "../icons/fa/FaArrowRight.js";
 import { IoDocumentTextOutline } from "../icons/io5/IoDocumentTextOutline.js";
+import { LuChevronLeft } from "../icons/lu/LuChevronLeft.js";
+import { LuChevronRight } from "../icons/lu/LuChevronRight.js";
+import { LuZoomIn } from "../icons/lu/LuZoomIn.js";
+import { LuZoomOut } from "../icons/lu/LuZoomOut.js";
 import { TooltipInfo } from "../components/Tooltip.js";
 import { BareModal, modalPanelClasses } from "../components/BareModal.js";
+import { IconButton } from "../components/IconButton.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 { initializeValues } from "../form/lib.js";
 import { AnnotationBanner } from "./AnnotationBanner.js";
 import { Collapse } from "./Collapse.js";
+import { emptyColumnsStyle, emptyRowsStyle } from "./gridSpacing.js";
 import { Reveal } from "./Reveal.js";
 import { jobLabel, toggled } from "./util.js";
 import { Joblist } from "./JobSummary.js";
@@ -39,6 +46,65 @@ function ViewToggle({ viewMode, setViewMode }) {
 		})]
 	});
 }
+var VIEW_BAR = "flex max-w-full flex-wrap items-center justify-end gap-0.5 rounded-md border theme-border bg-(--theme-panel-bg) p-0.5";
+/** The graph's view buttons, the same wherever a graph is drawn. */
+function GraphViewControls({ history, expand, onReset, onZoom, zoomedAll }) {
+	const { dag } = useStrings();
+	const chip = "flex h-7 cursor-pointer items-center whitespace-nowrap rounded px-2 text-xs theme-hover";
+	return /* @__PURE__ */ jsxs("div", {
+		className: VIEW_BAR,
+		children: [
+			history && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsx(IconButton, {
+					icon: /* @__PURE__ */ jsx(LuChevronLeft, { className: "h-4 w-4" }),
+					label: dag.previousGraph,
+					size: "sm",
+					variant: "ghost",
+					disabled: !history.back,
+					onClick: history.back
+				}),
+				/* @__PURE__ */ jsx(IconButton, {
+					icon: /* @__PURE__ */ jsx(LuChevronRight, { className: "h-4 w-4" }),
+					label: dag.nextGraph,
+					size: "sm",
+					variant: "ghost",
+					disabled: !history.forward,
+					onClick: history.forward
+				}),
+				/* @__PURE__ */ jsx("div", { className: "mx-0.5 h-5 w-px bg-(--theme-border)" })
+			] }),
+			expand && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: chip,
+				onClick: expand.onClick,
+				children: expand.label
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: chip,
+				onClick: onReset,
+				children: dag.resetView
+			}),
+			/* @__PURE__ */ jsx("div", { className: "mx-0.5 h-5 w-px bg-(--theme-border)" }),
+			/* @__PURE__ */ jsx(IconButton, {
+				icon: /* @__PURE__ */ jsx(LuZoomOut, { className: "h-4 w-4" }),
+				label: dag.zoomOut,
+				size: "sm",
+				variant: "ghost",
+				disabled: zoomedAll === "out",
+				onClick: () => onZoom(-1)
+			}),
+			/* @__PURE__ */ jsx(IconButton, {
+				icon: /* @__PURE__ */ jsx(LuZoomIn, { className: "h-4 w-4" }),
+				label: dag.zoomIn,
+				size: "sm",
+				variant: "ghost",
+				disabled: zoomedAll === "in",
+				onClick: () => onZoom(1)
+			})
+		]
+	});
+}
 var addCleanupSteps = ({ jobs }) => {
 	const clonedJobs = structuredClone(jobs);
 	for (const job in jobs) {
@@ -87,8 +153,12 @@ var addCleanupSteps = ({ jobs }) => {
 	return clonedJobs;
 };
 var PREVIEW_PADDING = 24;
+function outerNodes(content) {
+	const top = content.querySelectorAll(":scope > div > div > div > div[id^=\"node_\"]");
+	return top.length > 0 ? top : content.querySelectorAll("[id^=\"node_\"]");
+}
 function measurePreviewHeight(content, viewRef) {
-	const nodes = content?.querySelectorAll("[id^=\"node_\"]");
+	const nodes = content ? outerNodes(content) : void 0;
 	const transform = content?.parentElement ? getComputedStyle(content.parentElement).transform : "none";
 	if (!content || !nodes?.length || transform === "none") return null;
 	if (!viewRef.current) {
@@ -127,20 +197,62 @@ 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) {
+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) ? 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;
@@ -172,8 +284,21 @@ function computeGraphLayout(engine, jobs, matrixGroups) {
 		}
 		if (toAppend.length > 0) deps.push(toAppend);
 	} while (prevLen !== unfinished.size);
-	const finalDeps = [];
-	deps.forEach((col) => {
+	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];
@@ -181,18 +306,9 @@ function computeGraphLayout(engine, jobs, matrixGroups) {
 			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);
-						}
-					}
+				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)));
@@ -200,7 +316,10 @@ function computeGraphLayout(engine, jobs, matrixGroups) {
 		}
 		finalDeps.push(toAppend);
 	});
-	if (finalDeps[0]?.length === 0) finalDeps.shift();
+	if (finalDeps[0]?.length === 0) {
+		finalDeps.shift();
+		laidOut?.shift();
+	}
 	const ancestorDists = {};
 	const descendantDists = {};
 	const jobNames = Object.keys(visibleJobs);
@@ -233,6 +352,10 @@ function computeGraphLayout(engine, jobs, matrixGroups) {
 	}
 	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,
@@ -279,9 +402,28 @@ function SubworkflowWell({ expanded, onSettled, className, children }) {
 }
 var SUBGRAPH_Z_STEP = 100;
 var CONNECTOR_COLOR = "var(--theme-border)";
-var HIGHLIGHT_COLOR = "#3B82F6";
+var HIGHLIGHT_COLOR = "var(--theme-element)";
 var FIT_ANIMATION_MS = 300;
-function Subgraph({ jobs, pathPrefix, depth, preview, animT, expandedSubworkflows, toggleSubworkflow, openInNewGraph, setSublogOpen, invalidateConnectors, requestFit, stepsOpen, toggleSteps, matrixOpen, toggleMatrix, onReady }) {
+function sizesSettled(els) {
+	return new Promise((resolve) => {
+		let frame = 0;
+		const observer = new ResizeObserver(() => {
+			cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(() => {
+				frame = requestAnimationFrame(() => {
+					observer.disconnect();
+					resolve();
+				});
+			});
+		});
+		for (const el of els) observer.observe(el);
+	});
+}
+function sizingTransitions(el) {
+	return el.getAnimations({ subtree: true }).filter((animation) => animation instanceof CSSTransition && (animation.transitionProperty === "grid-template-rows" || animation.transitionProperty === "width"));
+}
+var ZOOM_STEP = .25;
+function Subgraph({ jobs, pathPrefix, depth, preview, animT, expandedSubworkflows, toggleSubworkflow, openInNewGraph, setSublogOpen, invalidateConnectors, requestFit, stepsOpen, toggleSteps, matrixOpen, toggleMatrix, onReady, layout }) {
 	const engine = useWorkflowEngine();
 	const wrapperRef = useRef(null);
 	const zBase = depth * SUBGRAPH_Z_STEP;
@@ -290,10 +432,16 @@ function Subgraph({ jobs, pathPrefix, depth, preview, animT, expandedSubworkflow
 	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), [
+	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), [
 		engine,
 		jobs,
-		matrixGroups
+		matrixGroups,
+		placed
 	]);
 	const hoveredDistances = useMemo(() => {
 		if (!hoveredJob) return null;
@@ -410,56 +558,66 @@ function Subgraph({ jobs, pathPrefix, depth, preview, animT, expandedSubworkflow
 		});
 		return /* @__PURE__ */ jsx("div", {
 			className: "flex relative",
-			children: dependencyCols.map((col) => {
-				return /* @__PURE__ */ jsx("div", { children: col.map((jobNames) => {
-					const first = jobNames[0];
-					if (first === void 0) return null;
-					const matrixGroup = displayJobs[first]?._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(first),
-						onMouseLeave: () => setHoveredJob(null),
-						hoveredRelated,
-						animT,
-						zBase,
-						handlers,
-						preview
-					}, `node_${first}`);
-					return /* @__PURE__ */ jsxs("div", {
-						id: `node_${pathPrefix}${first}`,
-						role: "none",
-						className: "relative m-24",
-						style: { zIndex: (activeDists?.has(first) ? 25 : 1) + zBase },
-						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__ */ jsx("div", {
-							className: "relative border-solid shadow py-4 px-8 rounded-xl border-4 whitespace-nowrap bg-(--theme-panel-bg) text-2xl",
+			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,
+							rowsAbove
+						}, `node_${first}`);
+						return /* @__PURE__ */ jsxs("div", {
+							id: `node_${pathPrefix}${first}`,
+							role: "none",
+							className: "relative m-24",
 							style: {
-								opacity: hoveredRelated && !hoveredRelated.has(first) ? .5 : 1,
-								transition: `opacity ${animT}s`
+								zIndex: (activeDists?.has(first) ? 25 : 1) + zBase,
+								...emptyRowsStyle(rowsAbove)
 							},
-							children: /* @__PURE__ */ jsx(Joblist, {
-								jobs: displayJobs,
-								jobNames,
-								...handlers,
-								growWidth: true,
-								preview
-							})
-						})]
-					}, `node_${first}`);
-				}) }, col[0]?.[0]);
+							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__ */ 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(first) ? .5 : 1,
+									transition: `opacity ${animT}s`
+								},
+								children: /* @__PURE__ */ jsx(Joblist, {
+									jobs: displayJobs,
+									jobNames,
+									...handlers,
+									growWidth: true,
+									preview
+								})
+							})]
+						}, `node_${first}`);
+					})
+				}, col[0]?.[0]);
 			})
 		});
 	}, [
 		dependencyCols,
+		rowSlots,
+		colSlots,
 		displayJobs,
 		jobs,
 		stepsOpen,
@@ -492,17 +650,23 @@ function Subgraph({ jobs, pathPrefix, depth, preview, animT, expandedSubworkflow
 			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 directDeps[first] ?? []) {
+				for (const dep of depsOf(first)) {
 					const s = gid(dep);
 					const e = gid(first);
 					if (!s || !e) continue;
@@ -512,7 +676,7 @@ function Subgraph({ jobs, pathPrefix, depth, preview, animT, expandedSubworkflow
 			}
 			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(([first]) => first === void 0 ? null : /* @__PURE__ */ jsx(React.Fragment, { children: (directDeps[first] ?? []).map((dep) => {
+			return dependencyCols.map((col) => /* @__PURE__ */ jsx(React.Fragment, { children: col.map(([first]) => first === void 0 ? null : /* @__PURE__ */ jsx(React.Fragment, { children: depsOf(first).map((dep) => {
 				const isHighlighted = hoveredRelated?.has(first) && hoveredRelated?.has(dep);
 				const depDist = activeDists?.get(dep) ?? 0;
 				const targetDist = activeDists?.get(first) ?? 0;
@@ -706,7 +870,7 @@ function SidebarJobs({ jobs, pathPrefix, preview, stepsOpen, toggleSteps, expand
 	const seenMatrixGroups = /* @__PURE__ */ new Set();
 	const orderedKeys = Object.keys(jobs).flatMap((jobName) => {
 		const originaljob = jobs[jobName]?._matrix?.originaljob;
-		if (!originaljob) return [jobName];
+		if (!originaljob || !displayJobs[originaljob]?._matrixGroup) return [jobName];
 		if (seenMatrixGroups.has(originaljob)) return [];
 		seenMatrixGroups.add(originaljob);
 		return [originaljob];
@@ -754,7 +918,7 @@ function walkJobPath(root, path) {
 	}
 	return isJobRecord(cursor) ? cursor : {};
 }
-function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag", setViewMode }) {
+function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag", setViewMode, layout, yamlJobs, fixedHeight }) {
 	const engine = useWorkflowEngine();
 	const animT = .125;
 	const minScale = .2;
@@ -812,7 +976,7 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 	const previewViewRef = useRef(null);
 	useEffect(() => {
 		const container = containerRef.current;
-		if (!preview || !container) return;
+		if (!preview || !container || fixedHeight) return;
 		let raf = 0;
 		let attempts = 0;
 		const measure = () => {
@@ -837,7 +1001,7 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 			observer.disconnect();
 			cancelAnimationFrame(raf);
 		};
-	}, [preview]);
+	}, [preview, fixedHeight]);
 	const { dag: dagStrings } = useStrings();
 	const slots = useSlots();
 	const [executedJobsPath, setExecutedJobsPath] = useState([[]]);
@@ -853,6 +1017,14 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 	}, [isRunFinished]);
 	const currentPath = executedJobsPath[executedJobsPathIdx] ?? [];
 	const jobs = walkJobPath(rootJobs, currentPath);
+	const root = currentPath.length === 0;
+	const placed = useMemo(() => root && engine.editing?.hasLayout(layout) ? layout : positionsOf(root ? yamlJobs ?? jobs : jobs), [
+		engine,
+		root,
+		layout,
+		yamlJobs,
+		jobs
+	]);
 	const resetGraph = useCallback(() => {
 		setSublogOpen("");
 		setStepsOpen(/* @__PURE__ */ new Set());
@@ -910,8 +1082,7 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 		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_\"]");
+		const nodes = outerNodes(content);
 		if (nodes.length === 0) return;
 		let minX = Number.POSITIVE_INFINITY;
 		let minY = Number.POSITIVE_INFINITY;
@@ -947,7 +1118,45 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 			invalidateConnectors();
 		});
 	}, [invalidateConnectors]);
-	const animatedFit = useCallback(() => fitGraph(FIT_ANIMATION_MS), [fitGraph]);
+	const fitWhenSettled = useCallback(async () => {
+		const container = containerRef.current;
+		const content = graphContentRef.current;
+		if (!container || !content) return;
+		let running = sizingTransitions(content);
+		while (running.length > 0) {
+			await Promise.allSettled(running.map((transition) => transition.finished));
+			running = sizingTransitions(content);
+		}
+		const panelHeight = preview && !fixedHeight ? measurePreviewHeight(content, previewViewRef) : null;
+		if (panelHeight !== null) flushSync(() => setPreviewHeight(panelHeight));
+		await sizesSettled([
+			container,
+			content,
+			...outerNodes(content)
+		]);
+		invalidateConnectors();
+		fitGraph(FIT_ANIMATION_MS);
+	}, [
+		fitGraph,
+		invalidateConnectors,
+		preview,
+		fixedHeight
+	]);
+	const [zoomedAll, setZoomedAll] = useState("in");
+	const onTransform = useCallback((_, { scale }) => {
+		setZoomedAll(scale >= .599 ? "in" : scale <= .201 ? "out" : null);
+		invalidateConnectors();
+	}, [invalidateConnectors]);
+	const zoomBy = useCallback((step) => {
+		const container = containerRef.current;
+		const transform = transformRef.current;
+		if (!container || !transform) return;
+		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");
+	}, []);
 	useEffect(() => {
 		if (preview) return;
 		const raf = requestAnimationFrame(() => fitGraph());
@@ -977,20 +1186,26 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 	]);
 	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 resetView = () => {
+		if (currentPath.length > 0) {
+			resetGraph();
+			setExecutedJobsPath([[], ...executedJobsPath.slice(executedJobsPathIdx, 10)]);
+			setExecutedJobsPathIdx(0);
+		} else fitGraph(FIT_ANIMATION_MS);
+	};
 	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();
+		flushSync(() => {
+			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));
+			}
 		});
+		fitWhenSettled();
 	};
 	const nextStep = useCallback((backward) => {
 		const sublogSplit = sublogOpen.split("/");
@@ -1196,8 +1411,8 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 						ref: setContainerElement,
 						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
+							height: fixedHeight ?? (containerHeight !== null ? `${containerHeight}px` : previewHeight !== null ? `${Math.min(previewHeight, windowSize.h * .62)}px` : "62vh"),
+							minHeight: previewHeight !== null && !fixedHeight ? 0 : 160
 						},
 						children: /* @__PURE__ */ jsx(TransformWrapper, {
 							ref: transformRef,
@@ -1211,56 +1426,30 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 							},
 							onPanning: invalidateConnectors,
 							onPinch: invalidateConnectors,
-							onTransform: invalidateConnectors,
+							onTransform,
 							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 (currentPath.length > 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: ">"
-										})]
-									})
-								]
+							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, {
+									history: executedJobsPath.length > 1 ? {
+										back: executedJobsPathIdx + 1 < executedJobsPath.length ? () => {
+											resetGraph();
+											setExecutedJobsPathIdx(executedJobsPathIdx + 1);
+										} : void 0,
+										forward: executedJobsPathIdx > 0 ? () => {
+											resetGraph();
+											setExecutedJobsPathIdx(executedJobsPathIdx - 1);
+										} : void 0
+									} : void 0,
+									expand: hasExpandable ? {
+										label: allExpanded ? dagStrings.collapseAll : dagStrings.expandAll,
+										onClick: toggleExpandAll
+									} : void 0,
+									onReset: resetView,
+									onZoom: (direction) => zoomBy(direction * ZOOM_STEP),
+									zoomedAll
+								})
 							}), /* @__PURE__ */ jsx(TransformComponent, { children: /* @__PURE__ */ jsx("div", {
 								ref: graphContentRef,
 								className: "flex relative mr-[8000px]",
@@ -1276,12 +1465,13 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 									openInNewGraph,
 									setSublogOpen,
 									invalidateConnectors,
-									requestFit: animatedFit,
+									requestFit: fitWhenSettled,
 									stepsOpen,
 									toggleSteps,
 									matrixOpen,
 									toggleMatrix,
-									onReady: fitGraph
+									onReady: fitGraph,
+									layout: placed
 								}, `sg-${executedJobsPathIdx}-${pathAppend}`)
 							}) })] })
 						})
@@ -1334,17 +1524,122 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 		]
 	});
 }
+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;
+	const evaluate = (obj) => {
+		values ??= defaultInputValues(engine, workflowInputs);
+		return engine.evaluate({
+			inputs: values,
+			obj
+		});
+	};
+	const out = {};
+	for (const [name, job] of Object.entries(jobs)) {
+		const { strategy, needs } = job;
+		const next = { ...job };
+		if (engine.editing && isJobRecord(strategy) && engine.inputDependencies(strategy).hasExpressions) next["strategy"] = evaluate(strategy);
+		if (typeof needs === "string" && engine.inputDependencies(needs).hasExpressions) {
+			const evaluated = evaluate({ needs })["needs"];
+			if (Array.isArray(evaluated) && evaluated.every((need) => typeof need === "string")) next["needs"] = evaluated;
+		}
+		out[name] = next;
+	}
+	return out;
+}
+/** The input values a run started without any gets: each one's default. */
+function defaultInputValues(engine, workflowInputs) {
+	try {
+		const fields = prefilled(engine.convertInputs(workflowInputs ?? {}));
+		const initial = initializeValues(fields) ?? {};
+		return engine.evaluate({
+			inputs: initial,
+			obj: initial
+		});
+	} catch {
+		return {};
+	}
+}
+function prefilled(value) {
+	if (Array.isArray(value)) return value.map(prefilled);
+	if (!isJobRecord(value)) return value;
+	const field = Object.fromEntries(Object.entries(value).map(([key, entry]) => [key, prefilled(entry)]));
+	return "type" in field && "default" in field ? {
+		...field,
+		prefillDefault: true
+	} : field;
+}
 function DependencyGraphPreview(inputs) {
+	const engine = useWorkflowEngine();
+	const { editing } = engine;
 	const ymlJobs = inputs.yml?.["jobs"];
+	const jobs = isJobRecord(ymlJobs) ? ymlJobs : {};
+	const evaluates = useMemo(() => Object.values(jobs).some((job) => {
+		const { strategy, needs } = job;
+		return engine.inputDependencies({
+			strategy: editing ? strategy : void 0,
+			needs
+		}).hasExpressions;
+	}), [
+		engine,
+		editing,
+		jobs
+	]);
+	const [ready, setReady] = useState(() => engine.isReady());
+	useEffect(() => {
+		if (!evaluates) return;
+		engine.init();
+		const unsubscribe = engine.onReady(setReady);
+		setReady(engine.isReady());
+		return unsubscribe;
+	}, [engine, evaluates]);
+	const on = inputs.yml?.["on"];
+	const execute = isJobRecord(on) ? on["execute"] : void 0;
+	const executeInputs = isJobRecord(execute) ? execute["inputs"] : void 0;
+	const workflowInputs = isJobRecord(executeInputs) ? executeInputs : void 0;
+	const executedJobs = useMemo(() => {
+		const withCleanup = addCleanupSteps({ jobs });
+		const evaluated = ready ? withRunExpressions(engine, withCleanup, workflowInputs) : withCleanup;
+		return editing ? editing.expandMatrixJobs(evaluated) : evaluated;
+	}, [
+		engine,
+		editing,
+		ready,
+		jobs,
+		workflowInputs
+	]);
 	return /* @__PURE__ */ jsx(DependencyGraph, {
 		run: {
-			executedJobs: addCleanupSteps({ jobs: isJobRecord(ymlJobs) ? ymlJobs : {} }),
+			executedJobs,
 			number: 0,
 			workflowName: ""
 		},
 		preview: true,
-		removeBorder: inputs.removeBorder
+		removeBorder: inputs.removeBorder,
+		layout: inputs.layout,
+		yamlJobs: jobs,
+		fixedHeight: inputs.height
 	});
 }
 //#endregion
-export { DependencyGraphPreview, addCleanupSteps, DependencyGraph as default };
+export { DependencyGraphPreview, addCleanupSteps, computeGraphLayout, DependencyGraph as default };