@parallelworks/ui 0.19.0 → 0.19.1

package/dist/graph/JobSummary.js

@@ -0,0 +1,104 @@
+import { useNavigation, useSlots, useStrings, useWorkflowEngine } from "../components/Provider.js";
+import { DocumentIcon, OpenInNewGraphIcon } from "../icons.js";
+import { TOOLTIP_ID } from "../components/Tooltip.js";
+import { Indicator } from "../components/Indicator.js";
+import { Reveal } from "./Reveal.js";
+import cx from "classnames";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/graph/JobSummary.tsx
+function UsesIcon({ uses, subworkflow }) {
+	const navigation = useNavigation();
+	const slots = useSlots();
+	const { jobActions } = useStrings();
+	if (!uses || !slots.workflowIcon) return null;
+	const open = () => navigation.openStepSource(uses, subworkflow.sourceUrl);
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": jobActions.openOriginalWorkflow,
+		"data-tooltip-id": TOOLTIP_ID,
+		"data-tooltip-content": jobActions.openOriginalWorkflow,
+		onClick: open,
+		className: "cursor-pointer",
+		children: slots.workflowIcon({
+			image: subworkflow.image,
+			type: subworkflow.type,
+			className: "ml-1.5 h-[1.2em] w-[1.2em]"
+		})
+	});
+}
+function Joblist(inputs) {
+	const { jobActions } = useStrings();
+	const engine = useWorkflowEngine();
+	return inputs.jobNames.map((jobName) => {
+		if (inputs.jobs[jobName]?._matrixGroup) return null;
+		const jobStatus = inputs.jobs[jobName]?.status;
+		const matrixMeta = inputs.jobs[jobName]?._matrix;
+		const jobLabel = matrixMeta?.originaljob ? `${matrixMeta.originaljob[0].toUpperCase() + matrixMeta.originaljob.slice(1)} (${(matrixMeta.index ?? 0) + 1}/${matrixMeta.totalingroup ?? "?"})` : (jobName[0].toUpperCase() + jobName.slice(1)).replace(/_/g, " ");
+		return /* @__PURE__ */ jsxs("div", {
+			className: "py-1 select-none",
+			children: [/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				"aria-expanded": inputs.isStepsOpen(jobName),
+				onClick: () => inputs.onJobClick(jobName),
+				className: cx("flex items-center gap-x-1.5 w-full text-left", jobStatus === "skipped" || jobStatus === "skipped-failed" ? "cursor-default" : "cursor-pointer"),
+				children: [!inputs.preview && /* @__PURE__ */ jsx(Indicator, { status: inputs.jobs[jobName]?.status }), /* @__PURE__ */ jsx("div", {
+					className: "font-medium",
+					children: jobLabel
+				})]
+			}), /* @__PURE__ */ jsx(Reveal, {
+				open: inputs.isStepsOpen(jobName),
+				growWidth: inputs.growWidth ?? false,
+				children: /* @__PURE__ */ jsx("div", {
+					className: "flex flex-col gap-y-0.5 mt-0.5",
+					children: (inputs.jobs[jobName]?.steps || []).map((step, i) => {
+						const stepLabel = engine.stepLabel(step, i);
+						const stepKey = `${jobName}:${i}`;
+						const subJobs = step.subworkflow?.jobs;
+						const canExpand = !!inputs.renderSubworkflow && !!subJobs && Object.keys(subJobs).length > 0;
+						return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+							className: cx("flex items-center", step.status === "skipped" || step.status === "skipped-failed" ? "cursor-default" : "cursor-pointer"),
+							children: [/* @__PURE__ */ jsxs("button", {
+								type: "button",
+								onClick: () => inputs.onStepClick(jobName, i),
+								className: cx(inputs.preview ? "ml-1.5" : "ml-4", "gap-x-1.5 flex items-center text-left"),
+								"data-testid": stepLabel,
+								children: [inputs.preview ? "↳" : /* @__PURE__ */ jsx(Indicator, { status: step.status }), /* @__PURE__ */ jsx("div", { children: stepLabel })]
+							}), step.subworkflow && /* @__PURE__ */ jsxs(Fragment, { children: [
+								inputs.onStepLogClick && /* @__PURE__ */ jsx("button", {
+									type: "button",
+									"aria-label": jobActions.openSubworkflowLogs,
+									"data-tooltip-id": "global-tooltip",
+									"data-tooltip-content": jobActions.openSubworkflowLogs,
+									onClick: (e) => {
+										e.stopPropagation();
+										inputs.onStepLogClick?.(jobName, i);
+									},
+									className: "link ml-1",
+									children: /* @__PURE__ */ jsx(DocumentIcon, { className: "w-[1.2em] h-[1.2em]" })
+								}),
+								/* @__PURE__ */ jsx(UsesIcon, {
+									uses: step.uses,
+									subworkflow: step.subworkflow
+								}),
+								inputs.onSubworkflowIcon && /* @__PURE__ */ jsx("button", {
+									type: "button",
+									"aria-label": jobActions.openInNewGraph,
+									"data-tooltip-id": "global-tooltip",
+									"data-tooltip-content": jobActions.openInNewGraph,
+									onClick: (e) => {
+										e.stopPropagation();
+										inputs.onSubworkflowIcon?.(jobName, i);
+									},
+									className: "link ml-1",
+									children: /* @__PURE__ */ jsx(OpenInNewGraphIcon, { className: "w-[1.2em] h-[1.2em]" })
+								})
+							] })]
+						}), canExpand && inputs.renderSubworkflow?.(jobName, i)] }, stepKey);
+					})
+				})
+			})]
+		}, "job-" + jobName);
+	});
+}
+//#endregion
+export { Joblist };

package/dist/graph/MatrixGroup.js

@@ -0,0 +1,107 @@
+import { useWorkflowEngine } from "../components/Provider.js";
+import { Indicator } from "../components/Indicator.js";
+import { Reveal } from "./Reveal.js";
+import { Joblist } from "./JobSummary.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/graph/MatrixGroup.tsx
+/** Matrix group item in the summary sidebar. */
+function MatrixGroupSummaryItem({ matrixGroup, status, isExpanded, onToggle, jobs, isStepsOpen, onJobClick, onStepClick, onStepLogClick, onSubworkflowIcon, isSubworkflowExpanded, renderSubworkflow, preview }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "py-1.5",
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-expanded": isExpanded,
+			onClick: onToggle,
+			className: "cursor-pointer flex items-center gap-x-1.5 w-full text-left",
+			children: [/* @__PURE__ */ jsx(Indicator, { status }), /* @__PURE__ */ jsxs("div", {
+				className: "font-semibold",
+				children: [
+					"Matrix: ",
+					matrixGroup.originaljob,
+					/* @__PURE__ */ jsxs("span", {
+						className: "font-normal text-sm ml-1",
+						children: [
+							"(",
+							matrixGroup.members.length,
+							" jobs)"
+						]
+					})
+				]
+			})]
+		}), /* @__PURE__ */ jsx(Reveal, {
+			open: isExpanded,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "ml-3 mt-0.5",
+				children: /* @__PURE__ */ jsx(Joblist, {
+					jobs,
+					jobNames: matrixGroup.members,
+					onJobClick,
+					isStepsOpen,
+					onStepClick,
+					onStepLogClick,
+					onSubworkflowIcon,
+					isSubworkflowExpanded,
+					renderSubworkflow,
+					preview
+				})
+			})
+		})]
+	}, "matrix-" + matrixGroup.originaljob);
+}
+/** Matrix group node in the DAG visualization. */
+function MatrixGroupNode({ matrixGroup, jobNames, idPrefix, isExpanded, onToggle, jobs, activeDists, onMouseEnter, onMouseLeave, hoveredRelated, animT, zBase, isStepsOpen, onJobClick, onStepClick, onStepLogClick, onSubworkflowIcon, isSubworkflowExpanded, renderSubworkflow, preview }) {
+	const matrixName = matrixGroup.originaljob;
+	const matrixMembers = matrixGroup.members;
+	const { aggStatus, statusLabel } = useWorkflowEngine().matrixStatus(matrixMembers.map((m) => jobs[m]?.status));
+	return /* @__PURE__ */ jsxs("div", {
+		id: "node_" + idPrefix + jobNames[0],
+		role: "none",
+		className: "relative m-24",
+		style: { zIndex: (activeDists?.has(jobNames[0]) ? 25 : 1) + zBase },
+		onMouseEnter,
+		onMouseLeave,
+		onFocus: onMouseEnter,
+		onBlur: onMouseLeave,
+		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(jobNames[0]) ? .5 : 1,
+				transition: `opacity ${animT}s`
+			},
+			children: [/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				"aria-expanded": isExpanded,
+				className: "cursor-pointer w-full text-left",
+				onClick: onToggle,
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "font-semibold text-md p-0.5",
+					children: ["Matrix: ", matrixName.length > 20 ? matrixName.slice(0, 20) + "..." : matrixName]
+				}), !isExpanded && /* @__PURE__ */ jsxs("div", {
+					className: "mt-1 border-t border-(--theme-border) pt-1 flex items-center gap-x-1",
+					children: [/* @__PURE__ */ jsx(Indicator, { status: aggStatus }), /* @__PURE__ */ jsx("span", { children: statusLabel })]
+				})]
+			}), /* @__PURE__ */ jsx(Reveal, {
+				open: isExpanded,
+				growWidth: true,
+				children: /* @__PURE__ */ jsx("div", {
+					className: "mt-1 border-t border-(--theme-border) pt-1",
+					children: /* @__PURE__ */ jsx(Joblist, {
+						jobs,
+						jobNames: matrixMembers,
+						onJobClick,
+						isStepsOpen,
+						onStepClick,
+						onStepLogClick,
+						onSubworkflowIcon,
+						isSubworkflowExpanded,
+						renderSubworkflow,
+						growWidth: true,
+						preview
+					})
+				})
+			})]
+		})]
+	}, "node_" + jobNames[0]);
+}
+//#endregion
+export { MatrixGroupNode, MatrixGroupSummaryItem };

package/dist/graph/Reveal.js

@@ -0,0 +1,57 @@
+import { useLayoutEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/graph/Reveal.tsx
+var EASE = "cubic-bezier(0.25, 0.1, 0.25, 1)";
+var ROWS_TRANSITION = `grid-template-rows 200ms ${EASE}`;
+var FULL_TRANSITION = `${ROWS_TRANSITION}, width 200ms ${EASE}`;
+function Reveal({ open, children, growWidth = false, onSettled }) {
+	const contentRef = useRef(null);
+	const [width, setWidth] = useState(0);
+	const [prevOpen, setPrevOpen] = useState(open);
+	const [clipped, setClipped] = useState(!open);
+	const [toggling, setToggling] = useState(false);
+	const [renderChildren, setRenderChildren] = useState(open);
+	if (open && !renderChildren) setRenderChildren(true);
+	if (prevOpen !== open) {
+		setPrevOpen(open);
+		setToggling(true);
+		setClipped(true);
+	}
+	useLayoutEffect(() => {
+		if (!growWidth || !renderChildren) return;
+		const el = contentRef.current;
+		if (!el) return;
+		const measure = () => setWidth(el.offsetWidth);
+		measure();
+		const ro = new ResizeObserver(measure);
+		ro.observe(el);
+		return () => ro.disconnect();
+	}, [growWidth, renderChildren]);
+	return /* @__PURE__ */ jsx("div", {
+		className: "grid",
+		style: {
+			gridTemplateRows: open ? "1fr" : "0fr",
+			overflow: clipped ? "hidden" : "visible",
+			...growWidth ? {
+				width: open ? width : 0,
+				transition: toggling ? FULL_TRANSITION : ROWS_TRANSITION
+			} : { transition: ROWS_TRANSITION }
+		},
+		onTransitionEnd: (e) => {
+			if (e.target === e.currentTarget && e.propertyName === "grid-template-rows") {
+				setToggling(false);
+				setClipped(!open);
+				if (!open) setRenderChildren(false);
+				onSettled?.();
+			}
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			ref: contentRef,
+			className: "min-h-0",
+			...growWidth ? { style: { width: "max-content" } } : {},
+			children: renderChildren ? children : null
+		})
+	});
+}
+//#endregion
+export { Reveal };