@parallelworks/ui 0.74.0 → 0.75.0

package/dist/graph/RunWarningsList.js

@@ -0,0 +1,94 @@
+import { cx } from "../cx.js";
+import { WarningIcon } from "../icons.js";
+import { toneIcon } from "../components/tone.js";
+import { keyedByContent, withPositionKeys } from "../components/keys.js";
+import { Tooltip } from "../components/Tooltip.js";
+import { useStrings, useWorkflowEngine } from "../components/Provider.js";
+import { Callout } from "../components/Callout.js";
+import { jobLabel } from "./util.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/graph/RunWarningsList.tsx
+/** A warning's message, with the text it puts in backticks, such as a keyword, set as code. */
+function WarningText({ message }) {
+	const parts = message.split("`");
+	if (parts.length < 3 || parts.length % 2 === 0) return message;
+	return withPositionKeys(parts).map(({ key, item }, i) => i % 2 === 1 ? /* @__PURE__ */ jsx("code", {
+		className: "rounded bg-current/10 px-1 font-mono text-[0.9em]",
+		children: item
+	}, key) : item);
+}
+/** Flags a job or step that warnings are about, or that holds something they're about; hovering
+*  it lists them. */
+function WarningMark({ warnings, className }) {
+	const { dag } = useStrings();
+	if (warnings.length === 0) return null;
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: /* @__PURE__ */ jsx("ul", {
+			className: "m-0 flex list-none flex-col gap-1 p-0",
+			children: keyedByContent(warnings, (w) => w.message).map(({ key, item }) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(WarningText, { message: item.message }) }, key))
+		}),
+		children: /* @__PURE__ */ jsx("span", {
+			role: "img",
+			"aria-label": dag.warningCount(warnings.length),
+			"data-warning-mark": "",
+			className: cx("inline-flex shrink-0", toneIcon.warning, className),
+			children: /* @__PURE__ */ jsx(WarningIcon, { className: "h-[1.1em] w-[1.1em]" })
+		})
+	});
+}
+/** Where a warning is, as people read it, outermost first: each subworkflow step it's under, its job and
+*  its step. Jobs go by the workflow's names, which a matrix's runs share. */
+function placeOf({ warning, targets: [target] }, rootJobs, stepLabel, stepNumber) {
+	const parts = [];
+	let jobs = rootJobs;
+	const path = warning.path ?? [];
+	for (let i = 0; i + 1 < path.length; i += 2) {
+		const via = target?.via[i / 2];
+		const step = via ? jobs?.[via.job]?.steps?.[via.step] : void 0;
+		const segment = path[i + 1] ?? "";
+		const index = /^step_(\d+)$/.exec(segment)?.[1];
+		parts.push(jobLabel(path[i] ?? ""), step && via ? stepLabel(step, via.step) : index === void 0 ? segment : stepNumber(Number(index)));
+		jobs = step?.subworkflow?.jobs;
+	}
+	parts.push(jobLabel(warning.job));
+	if (warning.step !== void 0 && warning.step !== null) {
+		const step = target ? jobs?.[target.job]?.steps?.[warning.step] : void 0;
+		parts.push(step ? stepLabel(step, warning.step) : stepNumber(warning.step));
+	}
+	return parts;
+}
+/** The run's warnings, each with a link to the job or step it's about. */
+function RunWarningsList({ warnings, rootJobs, onShow }) {
+	const { dag } = useStrings();
+	const engine = useWorkflowEngine();
+	if (warnings.length === 0) return null;
+	return /* @__PURE__ */ jsx(Callout, {
+		tone: "warning",
+		title: dag.warningCount(warnings.length),
+		testId: "run-warnings",
+		children: /* @__PURE__ */ jsx("ul", {
+			className: "m-0 flex max-h-72 list-none flex-col gap-2.5 overflow-y-auto p-0",
+			children: keyedByContent(warnings, ({ warning }) => `${(warning.path ?? []).join("/")}/${warning.job}:${warning.step ?? ""}:${warning.message}`).map(({ key, item }) => {
+				const where = placeOf(item, rootJobs, (step, index) => engine.stepLabel(step, index), (index) => dag.stepNumber(index)).join(" › ");
+				const [target] = item.targets;
+				return /* @__PURE__ */ jsxs("li", {
+					className: "flex flex-col items-start gap-0.5",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 break-words",
+						children: /* @__PURE__ */ jsx(WarningText, { message: item.warning.message })
+					}), target && onShow ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => onShow(target),
+						className: "cursor-pointer rounded-sm text-xs font-medium underline underline-offset-2 hover:decoration-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--theme-focus)",
+						children: where
+					}) : /* @__PURE__ */ jsx("span", {
+						className: "text-xs",
+						children: where
+					})]
+				}, key);
+			})
+		})
+	});
+}
+//#endregion
+export { RunWarningsList, WarningMark, WarningText };

package/dist/graph/TreeView.js

@@ -9,6 +9,8 @@ import { Elapsed } from "../components/relativeTime.js";
 import { RunStatusIcon } from "../components/RunStatusIcon.js";
 import { LogViewer } from "../logviewer/LogViewer.js";
 import { jobLabel, toggled } from "./util.js";
+import { WarningMark } from "./RunWarningsList.js";
+import { rowKey, useWarningMarks } from "./runWarnings.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useId, useMemo, useState } from "react";
 //#region src/graph/TreeView.tsx
@@ -52,6 +54,7 @@ function JobRow({ jobName, job, isExpanded, onToggle, prefix, state }) {
 	const dependencies = Array.isArray(job.needs) ? job.needs : [];
 	const panelId = useId();
 	const { dag: t } = useStrings();
+	const marks = useWarningMarks();
 	const skipped = job.status === "skipped" || job.status === "skipped-failed";
 	return /* @__PURE__ */ jsxs("div", {
 		className: "border-b border-[var(--theme-border)] last:border-b-0",
@@ -70,9 +73,12 @@ function JobRow({ jobName, job, isExpanded, onToggle, prefix, state }) {
 				/* @__PURE__ */ jsx(RunStatusIcon, { status: job.status }),
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex flex-col gap-1 min-w-0 flex-1",
-					children: [/* @__PURE__ */ jsx("span", {
-						className: "font-mono text-sm text-[var(--theme-app)] truncate",
-						children: jobLabel(jobName, job)
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "flex min-w-0 items-center gap-1.5",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "font-mono text-sm text-[var(--theme-app)] truncate",
+							children: jobLabel(jobName, job)
+						}), /* @__PURE__ */ jsx(WarningMark, { warnings: marks.under(rowKey(prefix, jobName)) })]
 					}), dependencies.length > 0 && /* @__PURE__ */ jsxs("div", {
 						className: "flex items-center gap-1.5",
 						children: [/* @__PURE__ */ jsx("span", {
@@ -120,6 +126,7 @@ function StepRow({ step, index, isExpanded, onToggle, prefix, jobName, state })
 	const panelId = useId();
 	const subworkflowPanelId = useId();
 	const { dag: t } = useStrings();
+	const marks = useWarningMarks();
 	const subworkflowJobs = subworkflow?.jobs ?? {};
 	const subworkflowJobNames = Object.keys(subworkflowJobs).filter((name) => subworkflowJobs[name]?.if !== false);
 	const subworkflowPrefix = `${prefix}subworkflows/${jobName}/step_${index}/`;
@@ -139,12 +146,14 @@ function StepRow({ step, index, isExpanded, onToggle, prefix, jobName, state })
 					className: "h-4 w-4 flex-shrink-0"
 				}),
 				/* @__PURE__ */ jsxs("span", {
-					className: "font-mono text-sm text-[var(--theme-app)] truncate flex-1",
+					className: "font-mono text-sm text-[var(--theme-app)] truncate min-w-0",
 					children: [label, subworkflow && /* @__PURE__ */ jsx("span", {
 						className: "ml-2 text-xs text-[var(--theme-muted-text-color)]",
 						children: t.subworkflow
 					})]
 				}),
+				/* @__PURE__ */ jsx(WarningMark, { warnings: marks.under(rowKey(prefix, jobName, index)) }),
+				/* @__PURE__ */ jsx("div", { className: "flex-1" }),
 				/* @__PURE__ */ jsx(Elapsed, {
 					start: step.startedAt,
 					end: step.completedAt,
@@ -189,6 +198,7 @@ function TreeView({ jobs, slug, expandedJobs, setExpandedJobs }) {
 	const engine = useWorkflowEngine();
 	const matrixPanelId = useId();
 	const { common, dag } = useStrings();
+	const marks = useWarningMarks();
 	const visibleJobNames = useMemo(() => {
 		return Object.keys(jobs).filter((jobName) => jobs[jobName]?.if !== false);
 	}, [jobs]);
@@ -293,7 +303,8 @@ function TreeView({ jobs, slug, expandedJobs, setExpandedJobs }) {
 										dag.jobCount(group.members.length),
 										")"
 									]
-								})
+								}),
+								!isGroupExpanded && /* @__PURE__ */ jsx(WarningMark, { warnings: marks.underAny(group.members.map((m) => rowKey("", m))) })
 							]
 						}), /* @__PURE__ */ jsx(DisclosurePanel, {
 							open: isGroupExpanded,

package/dist/graph/index.d.ts

@@ -6,6 +6,7 @@ export { JOB_FIELDS, RETRY_FIELDS, RUNS_ON_FIELDS, SSH_KEYS, STEP_FIELDS, STRATE
 export { inputTypes, offeredInputKeys } from './InputDialog.js';
 export { InputsFormEditor } from './InputsEditor.js';
 export { type ListedProblem, ProblemsButton } from './ProblemsButton.js';
+export type { RunWarning } from './runWarnings.js';
 export type { SettingsView } from './settingsViews.js';
 export { type WorkflowActions, withFields } from './stepWith.js';
 export type { RunLink } from './types.js';

package/dist/graph/runWarnings.d.ts

@@ -0,0 +1,58 @@
+import type { WorkflowJob } from './types.js';
+/** Something probably wrong with a run's workflow, found when the run was created, about one of its jobs or steps. */
+export interface RunWarning {
+    /** The steps that lead to the subworkflow the job is in, as `[job, 'step_<n>', …]`, outermost
+     *  first; absent for the run's own workflow. */
+    path?: readonly string[] | null | undefined;
+    /** The job, by the name the workflow gives it, which every run of its matrix shares. */
+    job: string;
+    /** The step's index among the job's steps as the run lists them; absent for the job's own. */
+    step?: number | null | undefined;
+    /** What is wrong and what to write instead. Text in backticks shows as code. */
+    message: string;
+}
+/** A subworkflow step on the way to a warning: its level's prefix, its job and its index. */
+interface Via {
+    prefix: string;
+    job: string;
+    step: number;
+}
+/** One place in the graph a warning is about, by the keys the graph opens and finds rows by. */
+export interface WarningTarget {
+    /** The subworkflow steps it sits under, outermost first, each of which opens to show it. */
+    via: Via[];
+    /** `subworkflows/<job>/step_<n>/` for each of them, as the graph prefixes the level it is on. */
+    prefix: string;
+    /** The job as the run lists it, such as one run of a matrix. */
+    job: string;
+    step?: number | undefined;
+    /** `prefix + job`, and `:step` for a step's. */
+    key: string;
+}
+/** A warning and where it is: one place, or one for each run of its job's matrix; none while the
+ *  run lists no such job, such as before a subworkflow's jobs are known. */
+export interface LocatedWarning {
+    warning: RunWarning;
+    targets: WarningTarget[];
+}
+/** The key a job's row, or with `step` one of its step's rows, is found and marked by. */
+export declare const rowKey: (prefix: string, job: string, step?: number) => string;
+/** Finds each warning's job or step among the jobs the run lists, through the subworkflows its path names. */
+export declare function locateWarnings(warnings: readonly RunWarning[], rootJobs: Record<string, WorkflowJob>): LocatedWarning[];
+/** Which warnings each job and step row shows a mark for: its own, and those of anything inside it. */
+export declare class WarningMarks {
+    static readonly EMPTY: WarningMarks;
+    private readonly byKey;
+    /** Equal for two sets of marks that mark the same rows with the same warnings. */
+    readonly signature: string;
+    constructor(located: readonly LocatedWarning[]);
+    /** The warnings about the job or step at `key`, or about anything in it, such as its steps or a
+     *  subworkflow it runs. */
+    under(key: string): RunWarning[];
+    /** The warnings under any of `keys`, each once, such as a matrix's runs. */
+    underAny(keys: readonly string[]): RunWarning[];
+}
+export declare const WarningMarksContext: import("react").Context<WarningMarks>;
+/** The run's warning marks, which every job list and tree row in a run's graph reads. */
+export declare const useWarningMarks: () => WarningMarks;
+export {};

package/dist/graph/runWarnings.js

@@ -0,0 +1,84 @@
+import { createContext, use } from "react";
+//#region src/graph/runWarnings.ts
+/** The key a job's row, or with `step` one of its step's rows, is found and marked by. */
+var rowKey = (prefix, job, step) => step === void 0 ? `${prefix}${job}` : `${prefix}${job}:${step}`;
+function jobsNamed(jobs, name) {
+	if (Object.hasOwn(jobs, name)) return [name];
+	return Object.keys(jobs).filter((key) => jobs[key]?._matrix?.originaljob === name);
+}
+var STEP_SEGMENT = /^step_(\d+)$/;
+/** Finds each warning's job or step among the jobs the run lists, through the subworkflows its path names. */
+function locateWarnings(warnings, rootJobs) {
+	return warnings.map((warning) => {
+		let levels = [{
+			prefix: "",
+			jobs: rootJobs,
+			via: []
+		}];
+		const path = warning.path ?? [];
+		for (let i = 0; i + 1 < path.length; i += 2) {
+			const index = Number(STEP_SEGMENT.exec(path[i + 1] ?? "")?.[1] ?? NaN);
+			levels = levels.flatMap((level) => Number.isNaN(index) ? [] : jobsNamed(level.jobs, path[i] ?? "").flatMap((job) => {
+				const jobs = level.jobs[job]?.steps?.[index]?.subworkflow?.jobs;
+				return jobs ? [{
+					prefix: `${level.prefix}subworkflows/${job}/step_${index}/`,
+					jobs,
+					via: [...level.via, {
+						prefix: level.prefix,
+						job,
+						step: index
+					}]
+				}] : [];
+			}));
+		}
+		const step = warning.step ?? void 0;
+		return {
+			warning,
+			targets: levels.flatMap(({ prefix, jobs, via }) => jobsNamed(jobs, warning.job).map((job) => ({
+				via,
+				prefix,
+				job,
+				step,
+				key: rowKey(prefix, job, step)
+			})))
+		};
+	});
+}
+/** Which warnings each job and step row shows a mark for: its own, and those of anything inside it. */
+var WarningMarks = class WarningMarks {
+	static EMPTY = new WarningMarks([]);
+	byKey = /* @__PURE__ */ new Map();
+	/** Equal for two sets of marks that mark the same rows with the same warnings. */
+	signature;
+	constructor(located) {
+		for (const { warning, targets } of located) for (const target of targets) {
+			const keys = target.via.flatMap((v) => [rowKey(v.prefix, v.job), rowKey(v.prefix, v.job, v.step)]);
+			keys.push(rowKey(target.prefix, target.job));
+			if (target.step !== void 0) keys.push(target.key);
+			for (const key of keys) {
+				const marked = this.byKey.get(key);
+				if (!marked) this.byKey.set(key, [warning]);
+				else if (!marked.includes(warning)) marked.push(warning);
+			}
+		}
+		this.signature = JSON.stringify([...this.byKey].map(([key, marked]) => [key, marked.map((w) => [
+			w.message,
+			w.job,
+			w.step
+		])]));
+	}
+	/** The warnings about the job or step at `key`, or about anything in it, such as its steps or a
+	*  subworkflow it runs. */
+	under(key) {
+		return this.byKey.get(key) ?? [];
+	}
+	/** The warnings under any of `keys`, each once, such as a matrix's runs. */
+	underAny(keys) {
+		return [...new Set(keys.flatMap((key) => this.under(key)))];
+	}
+};
+var WarningMarksContext = createContext(WarningMarks.EMPTY);
+/** The run's warning marks, which every job list and tree row in a run's graph reads. */
+var useWarningMarks = () => use(WarningMarksContext);
+//#endregion
+export { WarningMarks, WarningMarksContext, locateWarnings, rowKey, useWarningMarks };

package/dist/graph/viewport.d.ts

@@ -38,3 +38,22 @@ export declare function fitView(bounds: Bounds, panel: {
 }): View | null;
 /** The least shift that brings [start, end] inside [low, high]; none when it can't all fit, so the view stays. */
 export declare function intoView(start: number, end: number, low: number, high: number): number;
+/** A box on screen, as `getBoundingClientRect` gives it. */
+export interface Rect {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+/** The smallest box around all of `rects`, which must not be empty. */
+export declare function enclosing(rects: readonly Rect[]): Rect;
+/**
+ * The view that shows `region`, a job or step and what it is in, in `visible`, zoomed in to `readable`
+ * if it is further out: all of it in the middle where it fits, or else `target`, a part of it, with as
+ * much of the rest before it as fits. None while all of it already shows, readable. Boxes are on screen,
+ * and a view's x and y count from `origin`, where the pan and zoom place the graph.
+ */
+export declare function viewShowing(region: Rect, target: Rect, visible: Rect, origin: {
+    left: number;
+    top: number;
+}, view: View, readable: number): View | null;

package/dist/graph/viewport.js

@@ -52,5 +52,66 @@ function intoView(start, end, low, high) {
 	if (start < low) return low - start;
 	return end > high ? high - end : 0;
 }
+/** The smallest box around all of `rects`, which must not be empty. */
+function enclosing(rects) {
+	const left = Math.min(...rects.map((r) => r.left));
+	const top = Math.min(...rects.map((r) => r.top));
+	const right = Math.max(...rects.map((r) => r.left + r.width));
+	const bottom = Math.max(...rects.map((r) => r.top + r.height));
+	return {
+		left,
+		top,
+		width: right - left,
+		height: bottom - top
+	};
+}
+var within = (inner, outer, margin) => inner.left >= outer.left + margin && inner.top >= outer.top + margin && inner.left + inner.width <= outer.left + outer.width - margin && inner.top + inner.height <= outer.top + outer.height - margin;
+function placeOnAxis(region, target, visible, margin) {
+	const low = visible.start + margin;
+	const high = visible.start + visible.size - margin;
+	if (region.size <= high - low) return visible.start + (visible.size - region.size) / 2;
+	const before = target.start - region.start;
+	if (target.size > high - low) return visible.start + (visible.size - target.size) / 2 - before;
+	return Math.min(low, high - target.size - before);
+}
+/**
+* The view that shows `region`, a job or step and what it is in, in `visible`, zoomed in to `readable`
+* if it is further out: all of it in the middle where it fits, or else `target`, a part of it, with as
+* much of the rest before it as fits. None while all of it already shows, readable. Boxes are on screen,
+* and a view's x and y count from `origin`, where the pan and zoom place the graph.
+*/
+function viewShowing(region, target, visible, origin, view, readable) {
+	const margin = fitMargin(visible);
+	if (view.scale >= readable && within(region, visible, margin)) return null;
+	const scale = Math.max(view.scale, readable);
+	const grow = scale / view.scale;
+	const x = (left) => (left - origin.left - view.x) / view.scale * scale;
+	const y = (top) => (top - origin.top - view.y) / view.scale * scale;
+	const left = placeOnAxis({
+		start: x(region.left),
+		size: region.width * grow
+	}, {
+		start: x(target.left),
+		size: target.width * grow
+	}, {
+		start: visible.left,
+		size: visible.width
+	}, margin);
+	const top = placeOnAxis({
+		start: y(region.top),
+		size: region.height * grow
+	}, {
+		start: y(target.top),
+		size: target.height * grow
+	}, {
+		start: visible.top,
+		size: visible.height
+	}, margin);
+	return {
+		x: left - origin.left - x(region.left),
+		y: top - origin.top - y(region.top),
+		scale
+	};
+}
 //#endregion
-export { FIT_MAX_SCALE, MIN_SCALE, ZOOM_STEP, fitMargin, fitView, intoView, wheelFactor, zoomAround, zoomLimit };
+export { FIT_MAX_SCALE, MIN_SCALE, ZOOM_STEP, enclosing, fitMargin, fitView, intoView, viewShowing, wheelFactor, zoomAround, zoomLimit };