@parallelworks/ui 0.40.0 → 0.40.1

package/README.md

@@ -99,6 +99,12 @@ const engine = { ...createWorkflowEngine(), editing: workflowPackage }
 
 Without `editing`, the graph lays its jobs out by their needs alone.
 
+The graph draws thousands of jobs, and subworkflows opened inline several levels deep. Layout is
+near linear in jobs and needs; hovering a job re-renders only the nodes and connectors whose
+highlight changes, and panning, zooming and a running run's clock re-render none. The view fits
+the whole graph, zooms out to 1% to show the shape of the largest, and in to 200% to read a node;
+the wheel zooms by the same factor at every scale, about the pointer.
+
 The editor checks YAML against the schemas a host registers with `configureEditorYaml` from
 `@parallelworks/ui/editor`. The job, step, input and settings dialogs edit their YAML at their own
 paths (`JOB_YAML_PATH`, `STEP_YAML_PATH`, `INPUT_YAML_PATH`, `SETTINGS_YAML_PATH`); `settingsSchemas`

package/dist/ai/ai.css

@@ -471,8 +471,10 @@
   color: color-mix(in oklab, var(--theme-accent, #06354f) 70%, var(--theme-panel-bg, #fff));
 }
 
-/* The reply being written ends in the accent's caret. */
-.chat-thread [style*="--streamdown-caret"] > :last-child::after {
+/* The reply being written ends in the accent's caret. Matched by a class, not by the inline style
+   that sets the caret: a rule reaching past an element its style attribute selects makes every
+   inline style change anywhere on the page restyle that element's whole subtree. */
+.chat-thread .markdown-streaming > :last-child::after {
   color: var(--chat-accent);
 }
 

package/dist/ai/ui/Markdown.js

@@ -57,7 +57,10 @@ function Markdown({ children, isStreaming }) {
 		children: /* @__PURE__ */ jsx(Streamdown, {
 			mode: isStreaming ? "streaming" : "static",
 			...isStreaming === void 0 ? {} : { isAnimating: isStreaming },
-			...isStreaming ? { caret: "block" } : {},
+			...isStreaming ? {
+				caret: "block",
+				className: "markdown-streaming"
+			} : {},
 			plugins,
 			rehypePlugins,
 			shikiTheme,

package/dist/graph/Connectors.d.ts

@@ -0,0 +1,11 @@
+import type { DrawnEdge } from './connectorGeometry.js';
+/**
+ * A graph level's connectors in three layers: lines behind the nodes, the lineage shown above the
+ * nodes outside it, and the dots above all. However many connectors there are, the lines are one
+ * path and the dots two, each dimming as one; only the lineage shown draws connectors of its own,
+ * and a hover re-renders only those.
+ */
+export declare const ConnectorLayers: import("react").MemoExoticComponent<({ edges, zBase, }: {
+    edges: DrawnEdge[];
+    zBase: number;
+}) => import("react").JSX.Element>;

package/dist/graph/Connectors.js

@@ -0,0 +1,158 @@
+import { highlightOf, useLineage, useLineageStore } from "./lineage.js";
+import { dimClasses } from "./GraphNode.js";
+import { memo, useMemo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/graph/Connectors.tsx
+var CONNECTOR_COLOR = "var(--theme-border)";
+var HIGHLIGHT_COLOR = "var(--theme-element)";
+var PANEL_COLOR = "var(--theme-panel-bg)";
+var STROKE = 6;
+var KEYFRAMES = [
+	"@keyframes dag-draw-in{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}",
+	"@keyframes dag-draw-out{from{stroke-dashoffset:0}to{stroke-dashoffset:1}}",
+	`@keyframes dag-light{from{fill:${CONNECTOR_COLOR}}to{fill:${HIGHLIGHT_COLOR}}}`,
+	`@keyframes dag-unlight{from{fill:${HIGHLIGHT_COLOR}}to{fill:${CONNECTOR_COLOR}}}`
+].join("");
+/** Plays the named keyframes once `delay` seconds pass, holding the first until then and the last after. */
+var play = (name, seconds, delay) => ({ animation: `${name} ${seconds}s ease ${delay}s both` });
+var LitEdge = memo(function LitEdge({ d, reversed, highlight, animT }) {
+	const { lit, delay, back } = highlightOf(highlight);
+	return /* @__PURE__ */ jsx("path", {
+		d: back ? reversed : d,
+		pathLength: 1,
+		fill: "none",
+		stroke: HIGHLIGHT_COLOR,
+		strokeWidth: STROKE,
+		strokeDasharray: "1 1",
+		strokeDashoffset: lit ? 0 : 1,
+		style: play(lit ? "dag-draw-in" : "dag-draw-out", animT, delay)
+	});
+});
+var LitDot = memo(function LitDot({ x, y, highlight, animT }) {
+	const { lit, delay } = highlightOf(highlight);
+	return /* @__PURE__ */ jsx("circle", {
+		cx: x,
+		cy: y,
+		r: 8,
+		fill: lit ? HIGHLIGHT_COLOR : CONNECTOR_COLOR,
+		style: play(lit ? "dag-light" : "dag-unlight", animT, delay)
+	});
+});
+function LitEdges({ edges }) {
+	const lineage = useLineageStore();
+	useLineage((l) => l.version, 0);
+	if (!lineage?.showing) return null;
+	const { animT } = lineage;
+	const lines = [];
+	const lit = [];
+	for (const { from, to, path } of edges) {
+		const highlight = lineage.between(from, to);
+		if (highlight) {
+			if (lineage.hovering) lines.push(path.d);
+			lit.push(/* @__PURE__ */ jsx(LitEdge, {
+				d: path.d,
+				reversed: path.reversed,
+				highlight,
+				animT
+			}, `${from}→${to}`));
+		}
+	}
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [lines.length > 0 && /* @__PURE__ */ jsx("path", {
+		d: lines.join(" "),
+		stroke: CONNECTOR_COLOR,
+		strokeWidth: STROKE,
+		fill: "none"
+	}), lit] });
+}
+function LitDots({ ports }) {
+	const lineage = useLineageStore();
+	useLineage((l) => l.version, 0);
+	if (!lineage?.showing) return null;
+	const at = [];
+	const lit = [];
+	for (const [key, port] of ports) {
+		const highlight = lineage.between(port.job, port.job);
+		if (highlight) {
+			at.push(port);
+			lit.push(/* @__PURE__ */ jsx(LitDot, {
+				x: port.x,
+				y: port.y,
+				highlight,
+				animT: lineage.animT
+			}, key));
+		}
+	}
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [at.length > 0 && /* @__PURE__ */ jsx("path", {
+		d: squaresAt(at),
+		fill: PANEL_COLOR
+	}), lit] });
+}
+/** A square of panel color around each dot, which leaves a gap at the node's edge. */
+var squaresAt = (at) => at.map(({ x, y }) => `M ${x - 16} ${y - 16} h 32 v 32 h -32 Z`).join(" ");
+/**
+* A graph level's connectors in three layers: lines behind the nodes, the lineage shown above the
+* nodes outside it, and the dots above all. However many connectors there are, the lines are one
+* path and the dots two, each dimming as one; only the lineage shown draws connectors of its own,
+* and a hover re-renders only those.
+*/
+var ConnectorLayers = memo(function ConnectorLayers({ edges, zBase }) {
+	const fade = dimClasses(useLineageStore()?.depth ?? 0).edge;
+	const { lines, squares, dots, ports } = useMemo(() => {
+		const ports = /* @__PURE__ */ new Map();
+		for (const { from, to, start, end } of edges) {
+			ports.set(`${from}\0out`, {
+				job: from,
+				...start
+			});
+			ports.set(`${to}\0in`, {
+				job: to,
+				...end
+			});
+		}
+		const at = [...ports.values()];
+		return {
+			lines: edges.map(({ path }) => path.d).join(" "),
+			squares: squaresAt(at),
+			dots: at.map(({ x, y }) => `M ${x - 8} ${y} a 8 8 0 1 0 16 0 a 8 8 0 1 0 -16 0`).join(" "),
+			ports
+		};
+	}, [edges]);
+	const keyframes = /* @__PURE__ */ jsx("style", {
+		href: "dependency-graph-highlight",
+		precedence: "default",
+		children: KEYFRAMES
+	});
+	if (edges.length === 0) return keyframes;
+	const layer = (z, children) => /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": "true",
+		overflow: "visible",
+		className: "absolute pointer-events-none",
+		style: { zIndex: z + zBase },
+		children
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		keyframes,
+		layer(-1, /* @__PURE__ */ jsx("path", {
+			d: lines,
+			stroke: CONNECTOR_COLOR,
+			strokeWidth: STROKE,
+			fill: "none",
+			className: fade
+		})),
+		layer(20, /* @__PURE__ */ jsx(LitEdges, { edges })),
+		layer(30, /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx("path", {
+				d: squares,
+				fill: PANEL_COLOR
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: dots,
+				fill: CONNECTOR_COLOR,
+				className: fade
+			}),
+			/* @__PURE__ */ jsx(LitDots, { ports })
+		] }))
+	] });
+});
+//#endregion
+export { ConnectorLayers };

package/dist/graph/DependencyGraph.d.ts

@@ -1,24 +1,10 @@
-import React from 'react';
 import type { GraphLayout } from '../editing.js';
-import type { MatrixGroup, WorkflowEngine } from '../engine.js';
 import type { DependencyGraphEditor } from './editorApi.js';
 import { type RunLink, type WorkflowJob } from './types.js';
 export type ViewMode = 'dag' | 'tree';
 export declare const addCleanupSteps: ({ jobs }: {
     jobs: Record<string, WorkflowJob>;
 }) => Record<string, WorkflowJob>;
-export declare function computeGraphLayout(engine: WorkflowEngine, jobs: Record<string, WorkflowJob>, matrixGroups: Record<string, MatrixGroup>, layout?: GraphLayout): {
-    dependencyCols: string[][][];
-    /** Each box's row; above a box, rows the layout leaves empty stay as space. */
-    rowSlots: number[][];
-    /** Each column's number; between two drawn columns, numbers skipped stay as space. */
-    colSlots: number[];
-    directDeps: Record<string, string[]>;
-    displayJobs: Record<string, WorkflowJob>;
-    ancestorDists: Record<string, Map<string, number>>;
-    descendantDists: Record<string, Map<string, number>>;
-};
-export declare function intoView(start: number, end: number, low: number, high: number): number;
 interface GraphRun {
     id?: string | undefined;
     number?: number | undefined;
@@ -44,7 +30,7 @@ export default function DependencyGraph({ run, preview, removeBorder, viewMode,
     /** The workflow as written, for what the editor's expressions can read. */
     workflow?: Record<string, unknown> | undefined;
     fixedHeight?: string | undefined;
-}): React.JSX.Element | undefined;
+}): import("react").JSX.Element | undefined;
 export declare function DependencyGraphPreview(inputs: {
     yml?: Record<string, unknown>;
     removeBorder?: boolean;
@@ -52,5 +38,5 @@ export declare function DependencyGraphPreview(inputs: {
     editor?: DependencyGraphEditor | undefined;
     /** A fixed panel height; without one the panel is only as tall as the graph. */
     height?: string | undefined;
-}): React.JSX.Element;
+}): import("react").JSX.Element;
 export {};