@parallelworks/ui 0.38.0 → 0.39.0

package/dist/graph/DependencyGraph.js

@@ -16,15 +16,17 @@ import { toAbsHumanDuration } from "../duration.js";
 import { initializeValues } from "../form/lib.js";
 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 { 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";
 import { isJobRecord } from "./types.js";
 import cx from "classnames";
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, { Suspense, lazy, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { flushSync } from "react-dom";
 import { DateTime } from "luxon";
@@ -362,7 +364,7 @@ function computeGraphLayout(engine, jobs, matrixGroups, layout) {
 		descendantDists
 	};
 }
-function jobHandlers({ engine, jobs, displayJobs, pathPrefix, stepsOpen, toggleSteps, expandedSubworkflows, toggleSubworkflow, openInNewGraph, setSublogOpen, renderWell }) {
+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}`;
 	const openLog = (j, s) => setSublogOpen(engine.stepLogPath(pathPrefix, j, s));
@@ -376,6 +378,10 @@ function jobHandlers({ engine, jobs, displayJobs, pathPrefix, stepsOpen, toggleS
 		onStepClick: (j, s) => {
 			const step = jobs[j]?.steps?.[s];
 			if (step?.status === "skipped" || step?.status === "skipped-failed") return;
+			if (editStep && !step?.linkedStep) {
+				editStep(jobs[j]?._matrix?.originaljob ?? j, s);
+				return;
+			}
 			if (step?.subworkflow) toggleSubworkflow(subworkflowKey(j, s));
 			else openLog(j, s);
 		},
@@ -401,6 +407,7 @@ function SubworkflowWell({ expanded, onSettled, className, children }) {
 	});
 }
 var SUBGRAPH_Z_STEP = 100;
+var GraphEditorOverlays = lazy(() => import("./GraphEditor.js"));
 var CONNECTOR_COLOR = "var(--theme-border)";
 var HIGHLIGHT_COLOR = "var(--theme-element)";
 var FIT_ANIMATION_MS = 300;
@@ -422,10 +429,18 @@ 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 }) {
+function Subgraph({ jobs, pathPrefix, depth, preview, animT, expandedSubworkflows, toggleSubworkflow, openInNewGraph, setSublogOpen, invalidateConnectors, requestFit, stepsOpen, toggleSteps, matrixOpen, toggleMatrix, onReady, layout, editable = false }) {
 	const engine = useWorkflowEngine();
 	const wrapperRef = 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);
@@ -443,6 +458,23 @@ function Subgraph({ jobs, pathPrefix, depth, preview, animT, expandedSubworkflow
 		matrixGroups,
 		placed
 	]);
+	useEffect(() => {
+		const wrapper = wrapperRef.current;
+		if (!editable || !editorApi || !wrapper) return;
+		editorApi.registerGrid({
+			wrapper,
+			cols: dependencyCols,
+			rows: rowSlots,
+			columns: colSlots
+		});
+		return () => editorApi.registerGrid(null);
+	}, [
+		editable,
+		editorApi,
+		dependencyCols,
+		rowSlots,
+		colSlots
+	]);
 	const hoveredDistances = useMemo(() => {
 		if (!hoveredJob) return null;
 		const dist = /* @__PURE__ */ new Map();
@@ -533,6 +565,7 @@ function Subgraph({ jobs, pathPrefix, depth, preview, animT, expandedSubworkflow
 			},
 			openInNewGraph,
 			setSublogOpen,
+			editStep: editable && editorApi ? (j, s) => editorApi.editStep(j, s) : void 0,
 			renderWell: (subJobs, subPrefix, expanded) => /* @__PURE__ */ jsx(SubworkflowWell, {
 				expanded,
 				onSettled: requestFit,
@@ -581,6 +614,7 @@ function Subgraph({ jobs, pathPrefix, depth, preview, animT, expandedSubworkflow
 							zBase,
 							handlers,
 							preview,
+							editable,
 							rowsAbove
 						}, `node_${first}`);
 						return /* @__PURE__ */ jsxs("div", {
@@ -595,19 +629,20 @@ function Subgraph({ jobs, pathPrefix, depth, preview, animT, expandedSubworkflow
 							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", {
+							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: /* @__PURE__ */ jsx(Joblist, {
+								children: [editable && jobNames.length > 1 && /* @__PURE__ */ jsx(BoxGrip, { jobs: jobNames }), /* @__PURE__ */ jsx(Joblist, {
 									jobs: displayJobs,
 									jobNames,
 									...handlers,
 									growWidth: true,
-									preview
-								})
+									preview,
+									editable
+								})]
 							})]
 						}, `node_${first}`);
 					})
@@ -637,7 +672,9 @@ function Subgraph({ jobs, pathPrefix, depth, preview, animT, expandedSubworkflow
 		setSublogOpen,
 		engine,
 		invalidateConnectors,
-		requestFit
+		requestFit,
+		editable,
+		editorApi
 	]);
 	const memoizedBoxLayer = useMemo(() => buildBoxLayer(), [buildBoxLayer]);
 	const hasLiveNestedGraph = Array.from(expandedSubworkflows).some((k) => k.startsWith(pathPrefix));
@@ -645,191 +682,259 @@ function Subgraph({ jobs, pathPrefix, depth, preview, animT, expandedSubworkflow
 	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;
+		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);
 				}
-			}
-			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: 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 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 (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));
 				}
-				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", {
+				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-panel-bg)",
-							strokeWidth: "6",
+							stroke: "var(--theme-element)",
+							strokeWidth: "10",
 							fill: "transparent"
-						}), /* @__PURE__ */ jsx("path", {
+						}), /* @__PURE__ */ jsx(EdgeHitPath, {
 							d: pathD,
-							stroke: CONNECTOR_COLOR,
-							strokeWidth: "6",
-							fill: "transparent",
-							style: {
-								opacity: hoveredRelated && !isHighlighted ? .3 : 1,
-								transition: `opacity 0s`
+							edge: {
+								from: dep,
+								to: first
 							}
-						})]
-					}),
-					/* @__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`
-								}
-							});
-						})()]
-					})
-				] }, dep);
-			}) }, first)) }, col[0]?.[0]));
-		})(), hasLiveNestedGraph ? buildBoxLayer() : memoizedBoxLayer]
+						})] }, `${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, {})
+		]
 	});
 }
 var NestedSubgraph = Subgraph;
@@ -918,7 +1023,7 @@ function walkJobPath(root, path) {
 	}
 	return isJobRecord(cursor) ? cursor : {};
 }
-function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag", setViewMode, layout, yamlJobs, fixedHeight }) {
+function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag", setViewMode, layout, editor, yamlJobs, inputs, workflow, fixedHeight }) {
 	const engine = useWorkflowEngine();
 	const animT = .125;
 	const minScale = .2;
@@ -950,8 +1055,10 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 	}, []);
 	const [topOffset, setTopOffset] = useState(null);
 	const topObserverRef = useRef(null);
+	const [containerEl, setContainerEl] = useState(null);
 	const setContainerElement = useCallback((el) => {
 		containerRef.current = el;
+		setContainerEl(el);
 		topObserverRef.current?.disconnect();
 		topObserverRef.current = null;
 		if (!el || preview) return;
@@ -1025,6 +1132,20 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 		yamlJobs,
 		jobs
 	]);
+	const [editorApi, setEditorApi] = useState(null);
+	const editorOverlays = editor ? /* @__PURE__ */ jsx(Suspense, {
+		fallback: null,
+		children: /* @__PURE__ */ jsx(GraphEditorOverlays, {
+			editor,
+			jobs,
+			yamlJobs,
+			inputs,
+			workflow,
+			layout: placed,
+			container: containerEl,
+			onApi: setEditorApi
+		})
+	}) : null;
 	const resetGraph = useCallback(() => {
 		setSublogOpen("");
 		setStepsOpen(/* @__PURE__ */ new Set());
@@ -1077,6 +1198,26 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 		jobs,
 		matrixGroups
 	]);
+	const held = useRef(null);
+	const viewed = useRef(false);
+	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 hold = useCallback((job) => {
+		const content = graphContentRef.current;
+		const transform = transformRef.current;
+		const node = nodeOf(job);
+		if (!content || !transform || !node) return;
+		const { positionX, positionY, scale } = transform.instance.state;
+		const pos = offsetWithin(node, content);
+		held.current = {
+			job,
+			x: positionX + pos.x * scale,
+			y: positionY + pos.y * scale,
+			at: performance.now()
+		};
+	}, [nodeOf]);
 	const fitGraph = useCallback((animationMs = 0) => {
 		const container = containerRef.current;
 		const content = graphContentRef.current;
@@ -1100,8 +1241,26 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 		const graphH = maxY - minY;
 		const containerW = container.clientWidth;
 		const containerH = container.clientHeight;
-		if (graphW === 0 || graphH === 0) return;
 		const margin = Math.min(containerW, containerH) * .05;
+		const 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 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();
+			});
+			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);
@@ -1117,7 +1276,11 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 			transform.setTransform(offsetX, offsetY, scale, 0);
 			invalidateConnectors();
 		});
-	}, [invalidateConnectors]);
+	}, [
+		invalidateConnectors,
+		nodeOf,
+		editor
+	]);
 	const fitWhenSettled = useCallback(async () => {
 		const container = containerRef.current;
 		const content = graphContentRef.current;
@@ -1142,15 +1305,55 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 		preview,
 		fixedHeight
 	]);
+	const centerOn = useCallback((el) => {
+		const container = containerRef.current;
+		const content = graphContentRef.current;
+		const transform = transformRef.current;
+		if (!container || !content || !transform) return;
+		const { scale } = transform.instance.state;
+		const pos = offsetWithin(el, content);
+		transform.setTransform(container.clientWidth / 2 - (pos.x + el.offsetWidth / 2) * scale, container.clientHeight / 2 - (pos.y + el.offsetHeight / 2) * scale, scale, FIT_ANIMATION_MS, "easeOut");
+	}, []);
+	const registerShow = editor?.registerShow;
+	useEffect(() => {
+		if (!editorApi) return;
+		editorApi.registerView({ hold });
+		return () => editorApi.registerView(null);
+	}, [editorApi, hold]);
+	useEffect(() => {
+		if (!registerShow || !editorApi) return;
+		return registerShow(({ job, step }) => {
+			const row = [...containerRef.current?.querySelectorAll("[data-dag-job]") ?? []].find((el) => el.dataset["dagJob"] === 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 } : {
+				job,
+				step
+			});
+			requestAnimationFrame(() => centerOn(row.closest("[id^=\"node_\"]") ?? row));
+			if (step === void 0) editorApi.editJob(job);
+			else editorApi.editStep(job, step);
+			return true;
+		});
+	}, [
+		registerShow,
+		editorApi,
+		centerOn
+	]);
 	const [zoomedAll, setZoomedAll] = useState("in");
 	const onTransform = useCallback((_, { scale }) => {
 		setZoomedAll(scale >= .599 ? "in" : scale <= .201 ? "out" : null);
 		invalidateConnectors();
 	}, [invalidateConnectors]);
+	const moved = useCallback(() => {
+		viewed.current = true;
+		invalidateConnectors();
+	}, [invalidateConnectors]);
 	const zoomBy = useCallback((step) => {
 		const container = containerRef.current;
 		const transform = transformRef.current;
 		if (!container || !transform) return;
+		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;
@@ -1191,7 +1394,10 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 			resetGraph();
 			setExecutedJobsPath([[], ...executedJobsPath.slice(executedJobsPathIdx, 10)]);
 			setExecutedJobsPathIdx(0);
-		} else fitGraph(FIT_ANIMATION_MS);
+		} else {
+			viewed.current = false;
+			fitGraph(FIT_ANIMATION_MS);
+		}
 	};
 	const toggleExpandAll = () => {
 		flushSync(() => {
@@ -1261,7 +1467,15 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 		toggleMatrix,
 		openInNewGraph
 	]);
-	if (!dependencyCols[0]?.length) return;
+	if (!dependencyCols[0]?.length) return editor ? /* @__PURE__ */ jsx(GraphEditorProvider, {
+		value: editorApi,
+		children: /* @__PURE__ */ jsx(EmptyGraphEditor, {
+			containerRef: setContainerElement,
+			overlays: editorOverlays,
+			height: fixedHeight ?? "240px",
+			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);
@@ -1294,7 +1508,7 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 		},
 		children: /* @__PURE__ */ jsx("span", { children: sublogIsSubworkflow ? "Open Subworkflow" : sublogShowsLog ? "Show Script" : "Show Logs" })
 	}) : void 0;
-	return /* @__PURE__ */ jsxs("div", {
+	const graph = /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col lg:flex-row w-full",
 		children: [
 			!preview && /* @__PURE__ */ jsxs("div", {
@@ -1407,27 +1621,29 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 							expandedJobs,
 							setExpandedJobs
 						})
-					}) : /* @__PURE__ */ jsx("div", {
+					}) : /* @__PURE__ */ jsxs("div", {
 						ref: setContainerElement,
-						className: cx("panel w-full overflow-hidden relative", removeBorder ? "border-none" : "border"),
+						tabIndex: editor ? -1 : void 0,
+						className: cx("panel w-full overflow-hidden relative", removeBorder ? "border-none" : "border", editor && "outline-none"),
 						style: {
 							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, {
+						children: [/* @__PURE__ */ jsx(TransformWrapper, {
 							ref: transformRef,
 							minScale,
 							maxScale,
 							initialScale: maxScale,
+							...editor ? { panning: { excluded: [EDITOR_HANDLE_CLASS] } } : {},
 							doubleClick: { disabled: true },
 							limitToBounds: false,
 							onInit: () => {
 								setTimeout(invalidateConnectors, 0);
 							},
-							onPanning: invalidateConnectors,
-							onPinch: invalidateConnectors,
+							onPanning: moved,
+							onPinch: moved,
 							onTransform,
-							onWheel: invalidateConnectors,
+							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",
@@ -1471,10 +1687,11 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 									matrixOpen,
 									toggleMatrix,
 									onReady: fitGraph,
-									layout: placed
+									layout: placed,
+									editable: !!editorApi && currentPath.length === 0
 								}, `sg-${executedJobsPathIdx}-${pathAppend}`)
 							}) })] })
-						})
+						}), editorOverlays]
 					})
 				]
 			}),
@@ -1523,6 +1740,10 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 			})
 		]
 	});
+	return /* @__PURE__ */ jsx(GraphEditorProvider, {
+		value: editorApi,
+		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. */
@@ -1617,14 +1838,19 @@ function DependencyGraphPreview(inputs) {
 	const execute = isJobRecord(on) ? on["execute"] : void 0;
 	const executeInputs = isJobRecord(execute) ? execute["inputs"] : void 0;
 	const workflowInputs = isJobRecord(executeInputs) ? executeInputs : void 0;
+	const editable = !!inputs.editor;
 	const executedJobs = useMemo(() => {
-		const withCleanup = addCleanupSteps({ jobs });
+		const withCleanup = addCleanupSteps({ jobs: editable ? Object.fromEntries(Object.entries(jobs).map(([name, job]) => {
+			const { if: condition, ...rest } = job;
+			return [name, condition === false ? rest : job];
+		})) : jobs });
 		const evaluated = ready ? withRunExpressions(engine, withCleanup, workflowInputs) : withCleanup;
 		return editing ? editing.expandMatrixJobs(evaluated) : evaluated;
 	}, [
 		engine,
 		editing,
 		ready,
+		editable,
 		jobs,
 		workflowInputs
 	]);
@@ -1637,9 +1863,12 @@ function DependencyGraphPreview(inputs) {
 		preview: true,
 		removeBorder: inputs.removeBorder,
 		layout: inputs.layout,
+		editor: inputs.editor,
 		yamlJobs: jobs,
+		inputs: workflowInputs,
+		workflow: inputs.yml,
 		fixedHeight: inputs.height
 	});
 }
 //#endregion
-export { DependencyGraphPreview, addCleanupSteps, computeGraphLayout, DependencyGraph as default };
+export { DependencyGraphPreview, addCleanupSteps, computeGraphLayout, DependencyGraph as default, intoView };