@parallelworks/ui 0.62.0 → 0.64.0

package/dist/graph/StepSummaries.js

@@ -0,0 +1,184 @@
+import { cx } from "../cx.js";
+import { FileTextIcon } from "../icons.js";
+import { useRunFile, useStrings, useWorkflowEngine } from "../components/Provider.js";
+import Markdown from "../components/Markdown.js";
+import { RunStatusIcon } from "../components/RunStatusIcon.js";
+import { jobLabel } from "./util.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+//#region src/graph/StepSummaries.tsx
+var SEPARATOR = " › ";
+function completion(job) {
+	const millis = job.completedAt ? Date.parse(job.completedAt) : NaN;
+	return Number.isNaN(millis) ? Number.POSITIVE_INFINITY : millis;
+}
+/** The steps, subworkflows' included, that wrote a summary, in the order their jobs completed. */
+function stepSummarySources(jobs) {
+	const found = [];
+	const collect = (level, prefix, parents) => {
+		for (const [job, value] of Object.entries(level)) {
+			const jobNames = [...parents, jobLabel(job, value)];
+			value.steps?.forEach((step, index) => {
+				if (step.summary) found.push({
+					prefix,
+					job,
+					jobNames,
+					index,
+					step,
+					completedAt: completion(value)
+				});
+				if (step.subworkflow?.jobs) collect(step.subworkflow.jobs, `${prefix}subworkflows/${job}/step_${index}/`, jobNames);
+			});
+		}
+	};
+	collect(jobs, "", []);
+	return found.sort((a, b) => a.completedAt - b.completedAt || 0).map(({ completedAt: _, ...source }) => source);
+}
+/**
+* A run's step summaries, each on its own card headed by the job and step that wrote it, so a run
+* reads like a report under its graph. The job list beside the graph already shows the run's tree,
+* so the cards are flat.
+*/
+function StepSummaries({ runSlug, jobs, onOpenLog }) {
+	const { dag } = useStrings();
+	const sources = stepSummarySources(jobs);
+	if (sources.length === 0) return null;
+	return /* @__PURE__ */ jsx("section", {
+		"aria-label": dag.stepSummaries,
+		className: "flex flex-col gap-3",
+		children: sources.map((source) => /* @__PURE__ */ jsx(SummaryCard, {
+			runSlug,
+			source,
+			onOpenLog: () => onOpenLog(source)
+		}, `${source.prefix}${source.job}:${source.index}`))
+	});
+}
+function SummaryCard({ runSlug, source, onOpenLog }) {
+	const { dag } = useStrings();
+	const engine = useWorkflowEngine();
+	const headingId = useId();
+	const ref = useRef(null);
+	const near = useNearViewport(ref);
+	const path = engine.stepLogPath(source.prefix, source.job, source.index).replace(/logs\.out$/, "summary.md");
+	const failed = source.step.status === "failed";
+	const job = source.jobNames.join(SEPARATOR);
+	const step = engine.stepLabel(source.step, source.index);
+	return /* @__PURE__ */ jsxs("article", {
+		ref,
+		"aria-labelledby": headingId,
+		className: cx("panel min-w-0 rounded-lg border", failed && "border-(--theme-error)"),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 border-b px-4 py-2.5",
+			children: [
+				/* @__PURE__ */ jsx(RunStatusIcon, { status: source.step.status }),
+				/* @__PURE__ */ jsxs("h3", {
+					id: headingId,
+					"aria-label": `${job}${SEPARATOR}${step}`,
+					className: "flex min-w-0 flex-1 items-center gap-1.5 text-sm",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "min-w-0 shrink-[2] truncate theme-muted-text",
+							title: job,
+							children: job
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "shrink-0 theme-muted-text",
+							children: SEPARATOR
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "min-w-0 truncate font-medium",
+							title: step,
+							children: step
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: onOpenLog,
+					"aria-describedby": headingId,
+					className: "inline-flex shrink-0 items-center gap-1.5 rounded px-1.5 py-0.5 text-sm theme-muted-text transition-colors hover:bg-(--theme-hover) hover:text-(--theme-link)",
+					children: [/* @__PURE__ */ jsx(FileTextIcon, {
+						"aria-hidden": true,
+						className: "h-3.5 w-3.5"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "max-sm:sr-only",
+						children: dag.logsTab
+					})]
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "px-4 py-3.5 sm:px-5",
+			children: /* @__PURE__ */ jsx(SummaryBody, {
+				runSlug,
+				path: near ? path : null
+			})
+		})]
+	});
+}
+function SummaryBody({ runSlug, path }) {
+	const { dag } = useStrings();
+	const { data, isLoading, error } = useRunFile(runSlug, path);
+	if (path === null || isLoading && data === void 0) return /* @__PURE__ */ jsx("div", {
+		role: "status",
+		"aria-label": dag.loadingSummary,
+		className: "flex flex-col gap-2 py-1",
+		children: [
+			"w-2/3",
+			"w-1/2",
+			"w-5/6"
+		].map((width) => /* @__PURE__ */ jsx("div", { className: cx("h-3 rounded bg-(--theme-border) motion-safe:animate-pulse", width) }, width))
+	});
+	if (error || data === void 0) return /* @__PURE__ */ jsx("p", {
+		className: "text-sm theme-muted-text",
+		children: dag.summaryLoadFailed
+	});
+	return /* @__PURE__ */ jsx(Clamped, { children: /* @__PURE__ */ jsx(Markdown, {
+		httpsImagesOnly: true,
+		compact: true,
+		children: data
+	}) });
+}
+function useNearViewport(ref) {
+	const [near, setNear] = useState(typeof IntersectionObserver === "undefined");
+	useEffect(() => {
+		const el = ref.current;
+		if (near || !el) return;
+		const observer = new IntersectionObserver((entries) => {
+			if (entries.some((entry) => entry.isIntersecting)) setNear(true);
+		}, { rootMargin: "200% 0px" });
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, [ref, near]);
+	return near;
+}
+function Clamped({ children }) {
+	const { common } = useStrings();
+	const ref = useRef(null);
+	const [expanded, setExpanded] = useState(false);
+	const [clipped, setClipped] = useState(false);
+	useEffect(() => {
+		const el = ref.current;
+		if (!el || expanded) return;
+		const measure = () => setClipped(el.scrollHeight > el.clientHeight + 1);
+		const observer = new ResizeObserver(measure);
+		observer.observe(el);
+		measure();
+		return () => observer.disconnect();
+	}, [expanded]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2",
+		children: [/* @__PURE__ */ jsx("div", {
+			ref,
+			className: cx("min-w-0 [overflow-wrap:anywhere] [&_table]:[overflow-wrap:normal] [&_[data-streamdown=table-wrapper]>div]:max-h-none!", !expanded && "max-h-[32rem] overflow-hidden", !expanded && clipped && "mask-[linear-gradient(to_bottom,black_75%,transparent)]"),
+			children
+		}), (clipped || expanded) && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-expanded": expanded,
+			onClick: () => setExpanded(!expanded),
+			className: "link w-fit text-sm font-medium",
+			children: expanded ? common.showLess : common.showMore
+		})]
+	});
+}
+//#endregion
+export { StepSummaries, stepSummarySources };

package/dist/list/listSearch.js

@@ -134,7 +134,7 @@ function ListSearchControl({ search, placeholder, label: labelProp }) {
 function ListCount({ total, matches, filterActive, noun, nounPlural }) {
 	const { list: t } = useStrings();
 	return /* @__PURE__ */ jsx("div", {
-		className: "flex items-center h-9",
+		className: "flex items-center h-8",
 		children: /* @__PURE__ */ jsx("span", {
 			role: "status",
 			className: "text-[13px] text-(--theme-muted-text-color)",

package/dist/styles/theme.css

@@ -137,7 +137,7 @@
 
 /* The bordered panel graphs and settings cards sit in; graph circles hide connectors with its color. */
 @utility panel {
-  @apply border-solid rounded-2xl border border-(--theme-border) theme-panel;
+  @apply border-solid rounded-xl border border-(--theme-border) theme-panel;
 }
 
 @utility theme-muted-panel {