@parallelworks/ui 0.20.0 → 0.21.1

package/dist/graph/JobSummary.d.ts

@@ -1,15 +1,17 @@
 import type { ReactNode } from 'react';
 import type { WorkflowJob } from './types.js';
-export declare function Joblist(inputs: {
+/** What a job list does when its jobs and steps are clicked, at one graph level. */
+export interface JobHandlers {
+    isStepsOpen: (jobName: string) => boolean;
+    onJobClick: (jobName: string) => void;
+    onStepClick: (jobName: string, stepIndex: number) => void;
+    onStepLogClick: (jobName: string, stepIndex: number) => void;
+    onSubworkflowIcon: (jobName: string, stepIndex: number) => void;
+    renderSubworkflow: (jobName: string, stepIndex: number) => ReactNode;
+}
+export declare function Joblist(inputs: JobHandlers & {
     jobs: Record<string, WorkflowJob>;
     jobNames: string[];
-    onJobClick: (jobName: string) => void;
-    onStepClick: (jobName: string, stepName: string | number) => void;
-    onStepLogClick?: (jobName: string, stepIndex: number) => void;
-    onSubworkflowIcon?: (jobName: string, stepIndex: number) => void;
-    isSubworkflowExpanded?: (jobName: string, stepIndex: number) => boolean;
-    renderSubworkflow?: (jobName: string, stepIndex: number) => ReactNode;
-    isStepsOpen: (jobName: string) => boolean;
     growWidth?: boolean;
     preview?: boolean;
 }): (import("react").JSX.Element | null)[];

package/dist/graph/JobSummary.js

@@ -1,8 +1,10 @@
 import { useNavigation, useSlots, useStrings, useWorkflowEngine } from "../components/Provider.js";
-import { DocumentIcon, OpenInNewGraphIcon } from "../icons.js";
+import { IoDocumentTextOutline } from "../icons/io5/IoDocumentTextOutline.js";
+import { PiArrowBendUpRightBold } from "../icons/pi/PiArrowBendUpRightBold.js";
 import { TOOLTIP_ID } from "../components/Tooltip.js";
 import { Indicator } from "../components/Indicator.js";
 import { Reveal } from "./Reveal.js";
+import { jobLabel } from "./util.js";
 import cx from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/graph/JobSummary.tsx
@@ -31,9 +33,8 @@ function Joblist(inputs) {
 	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, " ");
+		const job = inputs.jobs[jobName];
+		const jobStatus = job?.status;
 		return /* @__PURE__ */ jsxs("div", {
 			className: "py-1 select-none",
 			children: [/* @__PURE__ */ jsxs("button", {
@@ -41,20 +42,20 @@ function Joblist(inputs) {
 				"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", {
+				children: [!inputs.preview && /* @__PURE__ */ jsx(Indicator, { status: jobStatus }), /* @__PURE__ */ jsx("div", {
 					className: "font-medium",
-					children: jobLabel
+					children: jobLabel(jobName, job)
 				})]
 			}), /* @__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) => {
+					children: (job?.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;
+						const canExpand = !!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", {
@@ -64,40 +65,40 @@ function Joblist(inputs) {
 								"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", {
+								/* @__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);
+										inputs.onStepLogClick(jobName, i);
 									},
 									className: "link ml-1",
-									children: /* @__PURE__ */ jsx(DocumentIcon, { className: "w-[1.2em] h-[1.2em]" })
+									children: /* @__PURE__ */ jsx(IoDocumentTextOutline, { className: "w-[1.2em] h-[1.2em]" })
 								}),
 								/* @__PURE__ */ jsx(UsesIcon, {
 									uses: step.uses,
 									subworkflow: step.subworkflow
 								}),
-								inputs.onSubworkflowIcon && /* @__PURE__ */ jsx("button", {
+								/* @__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);
+										inputs.onSubworkflowIcon(jobName, i);
 									},
 									className: "link ml-1",
-									children: /* @__PURE__ */ jsx(OpenInNewGraphIcon, { className: "w-[1.2em] h-[1.2em]" })
+									children: /* @__PURE__ */ jsx(PiArrowBendUpRightBold, { className: "w-[1.2em] h-[1.2em]" })
 								})
 							] })]
-						}), canExpand && inputs.renderSubworkflow?.(jobName, i)] }, stepKey);
+						}), canExpand && inputs.renderSubworkflow(jobName, i)] }, stepKey);
 					})
 				})
 			})]
-		}, "job-" + jobName);
+		}, `job-${jobName}`);
 	});
 }
 //#endregion

package/dist/graph/MatrixGroup.d.ts

@@ -1,24 +1,18 @@
-import type { ReactNode } from 'react';
 import type { MatrixGroup, RunStatus } from '../engine.js';
+import { type JobHandlers } from './JobSummary.js';
 import type { WorkflowJob } from './types.js';
 /** Matrix group item in the summary sidebar. */
-export declare function MatrixGroupSummaryItem({ matrixGroup, status, isExpanded, onToggle, jobs, isStepsOpen, onJobClick, onStepClick, onStepLogClick, onSubworkflowIcon, isSubworkflowExpanded, renderSubworkflow, preview, }: {
+export declare function MatrixGroupSummaryItem({ matrixGroup, status, isExpanded, onToggle, jobs, handlers, preview, }: {
     matrixGroup: MatrixGroup;
     status: RunStatus;
     isExpanded: boolean;
     onToggle: () => void;
     jobs: Record<string, WorkflowJob>;
-    isStepsOpen: (j: string) => boolean;
-    onJobClick: (j: string) => void;
-    onStepClick: (j: string, s: string | number) => void;
-    onStepLogClick: (j: string, s: number) => void;
-    onSubworkflowIcon: (j: string, s: number) => void;
-    isSubworkflowExpanded: (j: string, s: number) => boolean;
-    renderSubworkflow: (j: string, s: number) => ReactNode;
+    handlers: JobHandlers;
     preview: boolean;
 }): import("react").JSX.Element;
 /** Matrix group node in the DAG visualization. */
-export declare function MatrixGroupNode({ matrixGroup, jobNames, idPrefix, isExpanded, onToggle, jobs, activeDists, onMouseEnter, onMouseLeave, hoveredRelated, animT, zBase, isStepsOpen, onJobClick, onStepClick, onStepLogClick, onSubworkflowIcon, isSubworkflowExpanded, renderSubworkflow, preview, }: {
+export declare function MatrixGroupNode({ matrixGroup, jobNames, idPrefix, isExpanded, onToggle, jobs, activeDists, onMouseEnter, onMouseLeave, hoveredRelated, animT, zBase, handlers, preview, }: {
     matrixGroup: MatrixGroup;
     jobNames: string[];
     idPrefix: string;
@@ -31,12 +25,6 @@ export declare function MatrixGroupNode({ matrixGroup, jobNames, idPrefix, isExp
     hoveredRelated: Set<string> | null;
     animT: number;
     zBase: number;
-    isStepsOpen: (j: string) => boolean;
-    onJobClick: (j: string) => void;
-    onStepClick: (j: string, s: string | number) => void;
-    onStepLogClick: (j: string, s: number) => void;
-    onSubworkflowIcon: (j: string, s: number) => void;
-    isSubworkflowExpanded: (j: string, s: number) => boolean;
-    renderSubworkflow: (j: string, s: number) => ReactNode;
+    handlers: JobHandlers;
     preview: boolean;
 }): import("react").JSX.Element;

package/dist/graph/MatrixGroup.js

@@ -5,7 +5,7 @@ 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 }) {
+function MatrixGroupSummaryItem({ matrixGroup, status, isExpanded, onToggle, jobs, handlers, preview }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "py-1.5",
 		children: [/* @__PURE__ */ jsxs("button", {
@@ -35,29 +35,24 @@ function MatrixGroupSummaryItem({ matrixGroup, status, isExpanded, onToggle, job
 				children: /* @__PURE__ */ jsx(Joblist, {
 					jobs,
 					jobNames: matrixGroup.members,
-					onJobClick,
-					isStepsOpen,
-					onStepClick,
-					onStepLogClick,
-					onSubworkflowIcon,
-					isSubworkflowExpanded,
-					renderSubworkflow,
+					...handlers,
 					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 }) {
+function MatrixGroupNode({ matrixGroup, jobNames, idPrefix, isExpanded, onToggle, jobs, activeDists, onMouseEnter, onMouseLeave, hoveredRelated, animT, zBase, handlers, preview }) {
 	const matrixName = matrixGroup.originaljob;
+	const first = jobNames[0] ?? "";
 	const matrixMembers = matrixGroup.members;
 	const { aggStatus, statusLabel } = useWorkflowEngine().matrixStatus(matrixMembers.map((m) => jobs[m]?.status));
 	return /* @__PURE__ */ jsxs("div", {
-		id: "node_" + idPrefix + jobNames[0],
+		id: `node_${idPrefix}${first}`,
 		role: "none",
 		className: "relative m-24",
-		style: { zIndex: (activeDists?.has(jobNames[0]) ? 25 : 1) + zBase },
+		style: { zIndex: (activeDists?.has(first) ? 25 : 1) + zBase },
 		onMouseEnter,
 		onMouseLeave,
 		onFocus: onMouseEnter,
@@ -65,7 +60,7 @@ function MatrixGroupNode({ matrixGroup, jobNames, idPrefix, isExpanded, onToggle
 		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,
+				opacity: hoveredRelated && !hoveredRelated.has(first) ? .5 : 1,
 				transition: `opacity ${animT}s`
 			},
 			children: [/* @__PURE__ */ jsxs("button", {
@@ -75,7 +70,7 @@ function MatrixGroupNode({ matrixGroup, jobNames, idPrefix, isExpanded, onToggle
 				onClick: onToggle,
 				children: [/* @__PURE__ */ jsxs("div", {
 					className: "font-semibold text-md p-0.5",
-					children: ["Matrix: ", matrixName.length > 20 ? matrixName.slice(0, 20) + "..." : matrixName]
+					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 })]
@@ -88,20 +83,14 @@ function MatrixGroupNode({ matrixGroup, jobNames, idPrefix, isExpanded, onToggle
 					children: /* @__PURE__ */ jsx(Joblist, {
 						jobs,
 						jobNames: matrixMembers,
-						onJobClick,
-						isStepsOpen,
-						onStepClick,
-						onStepLogClick,
-						onSubworkflowIcon,
-						isSubworkflowExpanded,
-						renderSubworkflow,
+						...handlers,
 						growWidth: true,
 						preview
 					})
 				})
 			})]
 		})]
-	}, "node_" + jobNames[0]);
+	});
 }
 //#endregion
 export { MatrixGroupNode, MatrixGroupSummaryItem };

package/dist/graph/TreeView.d.ts

@@ -1,11 +1,9 @@
 import type { WorkflowJob as Job } from './types.js';
 interface TreeViewProps {
     jobs: Record<string, Job>;
-    workflowName: string;
-    runNumber: number;
     slug: string;
     expandedJobs: Set<string>;
     setExpandedJobs: (jobs: Set<string>) => void;
 }
-export default function TreeView({ jobs, workflowName, runNumber, slug, expandedJobs, setExpandedJobs, }: TreeViewProps): import("react").JSX.Element;
+export default function TreeView({ jobs, slug, expandedJobs, setExpandedJobs }: TreeViewProps): import("react").JSX.Element;
 export {};