@parallelworks/ui 0.37.0 → 0.39.0

package/dist/graph/expressionRefs.js

@@ -0,0 +1,39 @@
+import { asRecord } from "./records.js";
+import { inputRefs, refExpression } from "./inputRefs.js";
+//#region src/graph/expressionRefs.ts
+var ref = (group, label) => ({
+	group,
+	label,
+	expression: `\${{ ${label} }}`
+});
+function names(value) {
+	if (Array.isArray(value)) return value.filter((item) => typeof item === "string");
+	return Object.keys(asRecord(value));
+}
+/** Everything an expression in `job` can read; without a job, only what the whole workflow has. */
+function expressionRefs(editing, workflow, job) {
+	const root = asRecord(workflow);
+	const jobs = asRecord(root["jobs"]);
+	const own = job === void 0 ? {} : asRecord(jobs[job]);
+	const out = inputRefs(editing, editing.workflowInputsSchema(root)).map((input) => ({
+		group: "inputs",
+		label: `inputs.${input.path.join(".")}`,
+		expression: refExpression(input.path)
+	}));
+	const needs = Array.isArray(own["needs"]) ? own["needs"] : [];
+	for (const need of needs) {
+		if (typeof need !== "string") continue;
+		const target = editing.needTarget(need);
+		for (const output of Object.keys(asRecord(asRecord(jobs[target])["outputs"]))) out.push(ref("outputs", `needs.${target}.outputs.${output}`));
+	}
+	for (const variable of editing.matrixNames(own) ?? []) out.push(ref("matrix", `matrix.${variable}`));
+	const declared = asRecord(root["needs"]);
+	for (const name of names(declared["organizationVariables"])) out.push(ref("variables", `org.${name}`));
+	for (const name of names(declared["userVariables"])) out.push(ref("variables", `var.${name}`));
+	for (const name of Object.keys(asRecord(root["sessions"]))) out.push(ref("sessions", `sessions.${name}`));
+	const env = /* @__PURE__ */ new Set([...Object.keys(asRecord(root["env"])), ...Object.keys(asRecord(own["env"]))]);
+	for (const key of env) out.push(ref("env", `env.${key}`));
+	return out;
+}
+//#endregion
+export { expressionRefs };

package/dist/graph/fieldProblems.js

@@ -0,0 +1,111 @@
+import { useWorkflowEditing } from "../components/Provider.js";
+import { TbAlertTriangle } from "../icons/tb/TbAlertTriangle.js";
+import { keyedByContent } from "../components/keys.js";
+import { useGraphEditorStrings } from "./editorStrings.js";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/graph/fieldProblems.tsx
+var FieldProblemsContext = createContext(null);
+var keyOf = (at) => at.join(".");
+var within = (problem, key) => keyOf(problem.at) === key || keyOf(problem.at).startsWith(`${key}.`);
+/** Hands a form's fields the problems at the keys they set. */
+function FieldProblems({ problems, children }) {
+	const [fields, setFields] = useState(/* @__PURE__ */ new Map());
+	const register = useCallback((key, id) => {
+		setFields((current) => current.get(key) === id ? current : new Map(current).set(key, id));
+		return () => setFields((current) => {
+			if (current.get(key) !== id) return current;
+			const next = new Map(current);
+			next.delete(key);
+			return next;
+		});
+	}, []);
+	const value = useMemo(() => ({
+		problems,
+		fields,
+		register
+	}), [
+		problems,
+		fields,
+		register
+	]);
+	return /* @__PURE__ */ jsx(FieldProblemsContext.Provider, {
+		value,
+		children
+	});
+}
+var LintScopeContext = createContext("");
+/** Where the fields inside sit, such as `ssh` for a remote host's fields. */
+function LintScope({ at, children }) {
+	const outer = useContext(LintScopeContext);
+	return /* @__PURE__ */ jsx(LintScopeContext.Provider, {
+		value: outer ? `${outer}.${at}` : at,
+		children
+	});
+}
+/** The problems at the field with id `id`, which sets `key`; the dialog's list then leads to it. */
+function useFieldProblems(key, id) {
+	const context = useContext(FieldProblemsContext);
+	const scope = useContext(LintScopeContext);
+	const full = key === void 0 ? void 0 : scope ? `${scope}.${key}` : key;
+	const register = context?.register;
+	useEffect(() => full && register ? register(full, id) : void 0, [
+		full,
+		id,
+		register
+	]);
+	return full && context ? context.problems.filter((problem) => within(problem, full)) : [];
+}
+/** A field's problems as one message, and the buttons that make their likely fixes. */
+function useFieldLint(key, id, value, onChange) {
+	const { replaceReference } = useWorkflowEditing();
+	const problems = useFieldProblems(key, id);
+	const fixes = problems.flatMap(({ fix }) => fix && !fix.key && replaceReference(value, fix.find, fix.replace) !== value ? [fix] : []);
+	return {
+		message: problems.length > 0 ? problems.map((problem) => problem.message).join(" ") : void 0,
+		fixes: /* @__PURE__ */ jsx(FixButtons, {
+			fixes,
+			onFix: (fix) => onChange(replaceReference(value, fix.find, fix.replace))
+		})
+	};
+}
+function FixButtons({ fixes, onFix }) {
+	const t = useGraphEditorStrings();
+	if (fixes.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-wrap gap-2",
+		children: fixes.map((fix) => /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "cursor-pointer text-left text-xs font-medium text-(--theme-link) hover:underline",
+			onClick: () => onFix(fix),
+			children: t.applyFix(fix.replace)
+		}, `${fix.find}>${fix.replace}`))
+	});
+}
+function reveal(id) {
+	const element = document.getElementById(id);
+	for (let section = element?.closest("details"); section; section = section.parentElement?.closest("details")) section.open = true;
+	element?.focus();
+}
+function ProblemList({ problems }) {
+	const fields = useContext(FieldProblemsContext)?.fields;
+	if (problems.length === 0) return null;
+	const fieldOf = (problem) => [...fields ?? []].filter(([key]) => within(problem, key)).sort(([a], [b]) => b.length - a.length)[0]?.[1];
+	return /* @__PURE__ */ jsx("ul", {
+		className: "flex flex-col gap-1 text-sm text-(--theme-error)",
+		children: keyedByContent(problems, (problem) => `${problem.at.join(".")}:${problem.message}`).map(({ key, item: problem }) => {
+			const field = fieldOf(problem);
+			return /* @__PURE__ */ jsxs("li", {
+				className: "flex gap-1.5",
+				children: [/* @__PURE__ */ jsx(TbAlertTriangle, { className: "mt-0.5 h-4 w-4 shrink-0" }), field ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "cursor-pointer text-left hover:underline",
+					onClick: () => reveal(field),
+					children: problem.message
+				}) : problem.message]
+			}, key);
+		})
+	});
+}
+//#endregion
+export { FieldProblems, FixButtons, LintScope, ProblemList, useFieldLint, useFieldProblems };

package/dist/graph/graphEditorState.d.ts

@@ -0,0 +1,191 @@
+import { type PointerEvent as ReactPointerEvent } from 'react';
+import type { GraphEdit, GraphSlot, NeedRef, NudgeDirection, StepRef } from '../editing.js';
+import type { EditorProblem, RevealTarget } from './editorApi.js';
+import type { Box, Point, Store } from './editorPrimitives.js';
+import type { GraphEditorStrings } from './editorStrings.js';
+/** Pointer-downs on this class drag editor items instead of panning the graph. */
+export declare const EDITOR_HANDLE_CLASS = "dag-editor-handle";
+/** A node's left circle takes dependencies; its right circle gives them. */
+export type PortSide = 'in' | 'out';
+export type ConnectPayload = {
+    kind: 'connect';
+    from: string[];
+    side: PortSide;
+    label: string;
+    /** The circle dragged from: `node:<head job>`, or `selection`. */
+    port: string;
+    /** An end of a connector being moved: its needs go on the drop, and the line starts at its other end. */
+    replaces?: NeedRef[];
+    origin?: Point;
+};
+export type DragPayload = 
+/** `anchor` lands where the drag drops; the other jobs keep their offsets from it. */
+{
+    kind: 'jobs';
+    jobs: string[];
+    label: string;
+    anchor?: string;
+} | {
+    kind: 'new';
+    matrix: boolean;
+    label: string;
+} | ConnectPayload | {
+    kind: 'steps';
+    steps: StepRef[];
+    label: string;
+};
+export type DropTarget = 
+/** `blocked` when the move would cut a need an expression of a moved job reads. */
+{
+    kind: 'slot';
+    slot: GraphSlot;
+    indicator: Box;
+    blocked?: boolean;
+} | {
+    kind: 'trash';
+}
+/** `edits` is null when the drop can't connect. */
+ | {
+    kind: 'connect';
+    edits: GraphEdit[] | null;
+    box: Box;
+}
+/** Dragged jobs join `into`'s node, taking its needs; `valid` is false when that would loop. */
+ | {
+    kind: 'merge';
+    into: string;
+    jobs: string[];
+    valid: boolean;
+    box: Box;
+}
+/** Steps land at `index` of `job`; `around` outlines a job whose steps aren't shown, `problem` refuses the drop. */
+ | {
+    kind: 'steps';
+    job: string;
+    index: number;
+    indicator: Box;
+    around?: boolean;
+    problem?: string;
+};
+export interface DragView {
+    payload: DragPayload;
+    client: Point;
+    content: Point | null;
+    origin: Point | null;
+    target: DropTarget | null;
+}
+/** A job or step being added: `yml` is the workflow as if `edit` were applied, which the dialog's first save does. */
+export interface Addition {
+    edit: GraphEdit;
+    yml: string;
+}
+export type Dialog = {
+    kind: 'job';
+    job: string;
+    addition?: Addition;
+} | {
+    kind: 'step';
+    job: string;
+    index: number;
+    addition?: Addition;
+};
+export declare const labelsOf: (jobs: string[]) => string;
+/** A drawn connector, named by the head jobs of the boxes it joins. */
+export interface EdgeSelection {
+    from: string;
+    to: string;
+}
+export interface UiState {
+    drag: DragView | null;
+    /** Selected connectors. Jobs, steps and connectors are never selected together. */
+    edges: EdgeSelection[];
+    dialog: Dialog | null;
+    selection: string[];
+    steps: StepRef[];
+    problems: EditorProblem[];
+    /** The box being dragged out on empty space, in content coordinates. */
+    marquee: Box | null;
+}
+export declare const NO_SELECTION: string[];
+export declare const NO_STEPS: StepRef[];
+export declare const NO_EDGES: EdgeSelection[];
+export declare const NO_PROBLEMS: EditorProblem[];
+export declare const problemsIn: (problems: EditorProblem[], job: string, step?: number) => EditorProblem[];
+export declare const sameStep: (a: StepRef, b: StepRef) => boolean;
+export type UiStore = Store<UiState>;
+/** The drawn grid of the level being edited; `rows` holds each box's row, `columns` each column's number. */
+export interface GraphGrid {
+    wrapper: HTMLDivElement;
+    cols: string[][][];
+    rows: number[][];
+    columns: number[];
+}
+/** What the editor asks of the graph's view. */
+export interface GraphView {
+    /** Keeps `job` where it is on screen through the next layout change, rather than refitting. */
+    hold: (job: string) => void;
+}
+export interface GraphEditorApi {
+    store: UiStore;
+    /** The editor's strings, so what the graph draws for it needn't load them itself. */
+    t: GraphEditorStrings;
+    isMatrixJob: (job: string) => boolean;
+    startDrag: (e: ReactPointerEvent, payload: DragPayload) => void;
+    openJobMenu: (x: number, y: number, job: string) => void;
+    openStepMenu: (x: number, y: number, job: string, index: number) => void;
+    openEdgeMenu: (x: number, y: number, edge: EdgeSelection) => void;
+    /**
+     * Selects a connector alone, or with `add` adds it to the selected connectors or takes it out;
+     * selected jobs or steps give way to it.
+     */
+    selectEdge: (edge: EdgeSelection, add: boolean) => void;
+    /** Whether an expression reads one of a connector's needs, so it can't be removed or moved. */
+    edgeInUse: (edge: EdgeSelection) => boolean;
+    /** Starts moving one end of a connector; `fixed` is its other end, in the graph's own pixels. */
+    startEdgeEnd: (e: ReactPointerEvent, edge: EdgeSelection, end: 'from' | 'to', fixed: Point) => void;
+    /** Removes the selected jobs, steps and connectors; false when nothing is selected. */
+    deleteSelection: () => boolean;
+    /** Opens the dialog of the one selected job or step, reporting whether there was one. */
+    editSelection: () => boolean;
+    addJob: (matrix: boolean) => void;
+    addStep: (job: string) => void;
+    editJob: (job: string) => void;
+    editStep: (job: string, index: number) => void;
+    registerGrid: (grid: GraphGrid | null) => void;
+    grid: () => GraphGrid | null;
+    registerView: (view: GraphView | null) => void;
+    /** The selected jobs that still exist. */
+    selected: () => string[];
+    /** Adds a job to the selected jobs or takes it out; selected steps or connectors give way to it. */
+    toggleSelected: (job: string) => void;
+    /** The selected steps that still exist. */
+    selectedSteps: () => StepRef[];
+    /** Adds a step to the selected steps or takes it out; selected jobs or connectors give way to it. */
+    toggleStep: (step: StepRef) => void;
+    /** Puts the selected jobs or steps on the clipboard, as YAML; null when nothing is selected. */
+    copySelection: () => string | null;
+    /** Adds the jobs or steps in `text` near `pointer`; false when `text` holds neither. */
+    paste: (text: string, pointer: Point | null) => boolean;
+    /** Moves the selected jobs one slot; false when no jobs are selected. */
+    nudge: (direction: NudgeDirection) => boolean;
+    reveal: (target: RevealTarget) => void;
+    /** Selects a job, or one of its steps, alone. */
+    focus: (target: {
+        job: string;
+        step?: number;
+    }) => void;
+}
+export declare const GraphEditorProvider: import("react").Provider<GraphEditorApi | null>;
+export declare function useGraphEditor(): GraphEditorApi | null;
+export declare function useUi<T>(api: GraphEditorApi | null, select: (state: UiState) => T, fallback: T): T;
+export declare function useSelectedEdges(api: GraphEditorApi | null): EdgeSelection[];
+export declare const sameEdge: (a: EdgeSelection, b: EdgeSelection) => boolean;
+export declare function toContent(wrapper: HTMLElement, client: Point): Point;
+export declare function contentBox(wrapper: HTMLElement, el: Element): Box;
+/**
+ * The outline around the selected jobs, in content coordinates: as tall as their rows and
+ * as wide as their nodes, so its circles sit clear of the nodes' own.
+ */
+export declare function selectionBounds(wrapper: HTMLElement, jobs: string[]): (Box & {
+    connectorY: number;
+}) | null;

package/dist/graph/graphEditorState.js

@@ -0,0 +1,74 @@
+import { jobLabel } from "./util.js";
+import { createContext, useContext, useSyncExternalStore } from "react";
+//#region src/graph/graphEditorState.ts
+/** Pointer-downs on this class drag editor items instead of panning the graph. */
+var EDITOR_HANDLE_CLASS = "dag-editor-handle";
+var labelsOf = (jobs) => jobs.map((job) => jobLabel(job)).join(", ");
+var NO_SELECTION = [];
+var NO_STEPS = [];
+var NO_EDGES = [];
+var NO_PROBLEMS = [];
+var problemsIn = (problems, job, step) => problems.filter((problem) => problem.job === job && problem.step === step);
+var sameStep = (a, b) => a.job === b.job && a.index === b.index;
+var EditorContext = createContext(null);
+var GraphEditorProvider = EditorContext.Provider;
+function useGraphEditor() {
+	return useContext(EditorContext);
+}
+var noopSubscribe = () => () => {};
+function useUi(api, select, fallback) {
+	const snapshot = () => api ? select(api.store.get()) : fallback;
+	return useSyncExternalStore(api ? api.store.subscribe : noopSubscribe, snapshot, snapshot);
+}
+function useSelectedEdges(api) {
+	return useUi(api, (state) => state.edges, NO_EDGES);
+}
+var sameEdge = (a, b) => a.from === b.from && a.to === b.to;
+function toContent(wrapper, client) {
+	const rect = wrapper.getBoundingClientRect();
+	const scale = wrapper.offsetWidth > 0 ? rect.width / wrapper.offsetWidth : 1;
+	return {
+		x: (client.x - rect.left) / scale,
+		y: (client.y - rect.top) / scale
+	};
+}
+function contentBox(wrapper, el) {
+	const rect = wrapper.getBoundingClientRect();
+	const scale = wrapper.offsetWidth > 0 ? rect.width / wrapper.offsetWidth : 1;
+	const r = el.getBoundingClientRect();
+	return {
+		left: (r.left - rect.left) / scale,
+		top: (r.top - rect.top) / scale,
+		right: (r.right - rect.left) / scale,
+		bottom: (r.bottom - rect.top) / scale
+	};
+}
+var SELECTION_PAD = 12;
+var SELECTION_SIDE_PAD = 36;
+/**
+* The outline around the selected jobs, in content coordinates: as tall as their rows and
+* as wide as their nodes, so its circles sit clear of the nodes' own.
+*/
+function selectionBounds(wrapper, jobs) {
+	const found = jobs.flatMap((job) => {
+		const row = wrapper.querySelector(`[data-dag-job="${CSS.escape(job)}"]`);
+		const node = row?.closest("[id^=\"node_\"]");
+		const first = node?.querySelector("[data-dag-job]");
+		return row && node && first ? [{
+			row: contentBox(wrapper, row),
+			node: contentBox(wrapper, node),
+			first: contentBox(wrapper, first)
+		}] : [];
+	});
+	if (found.length === 0) return null;
+	const connectors = found.map((f) => f.node.top + 37 + f.row.top - f.first.top);
+	return {
+		left: Math.min(...found.map((f) => f.node.left)) - SELECTION_SIDE_PAD,
+		top: Math.min(...found.map((f) => f.row.top)) - SELECTION_PAD,
+		right: Math.max(...found.map((f) => f.node.right)) + SELECTION_SIDE_PAD,
+		bottom: Math.max(...found.map((f) => f.row.bottom)) + SELECTION_PAD,
+		connectorY: (Math.min(...connectors) + Math.max(...connectors)) / 2
+	};
+}
+//#endregion
+export { EDITOR_HANDLE_CLASS, GraphEditorProvider, NO_EDGES, NO_PROBLEMS, NO_SELECTION, NO_STEPS, contentBox, labelsOf, problemsIn, sameEdge, sameStep, selectionBounds, toContent, useGraphEditor, useSelectedEdges, useUi };

package/dist/graph/index.d.ts

@@ -2,7 +2,11 @@ export { DependencyGraphPreview, default as DependencyGraph, type ViewMode, } fr
 export type { DependencyGraphEditor, EditorProblem, RevealTarget, } from './editorApi.js';
 export { trackDrag } from './editorPrimitives.js';
 export { GRAPH_EDITOR_STRINGS, INPUTS_EDITOR_STRINGS } from './editorStrings.js';
+export { JOB_FIELDS, RETRY_FIELDS, RUNS_ON_FIELDS, SSH_KEYS, STEP_FIELDS, STRATEGY_FIELDS, } from './GraphEditorDialogs.js';
 export { inputTypes, offeredInputKeys } from './InputDialog.js';
+export { InputsFormEditor } from './InputsEditor.js';
 export { type ListedProblem, ProblemsButton } from './ProblemsButton.js';
 export type { SettingsView } from './settingsViews.js';
+export { type WorkflowActions, withFields } from './stepWith.js';
 export type { RunLink } from './types.js';
+export { INPUT_FORM_FIELDS, LINK_FIELDS, NEEDS_FIELDS, SESSION_FIELDS, WORKFLOW_FIELDS, WorkflowSettingsDialog, } from './WorkflowSettingsDialog.js';

package/dist/graph/index.js

@@ -1,6 +1,10 @@
-import DependencyGraph, { DependencyGraphPreview } from "./DependencyGraph.js";
 import { trackDrag } from "./editorPrimitives.js";
+import DependencyGraph, { DependencyGraphPreview } from "./DependencyGraph.js";
 import { GRAPH_EDITOR_STRINGS, INPUTS_EDITOR_STRINGS } from "./editorStrings.js";
 import { inputTypes, offeredInputKeys } from "./InputDialog.js";
+import { withFields } from "./stepWith.js";
+import { JOB_FIELDS, RETRY_FIELDS, RUNS_ON_FIELDS, SSH_KEYS, STEP_FIELDS, STRATEGY_FIELDS } from "./GraphEditorDialogs.js";
 import { ProblemsButton } from "./ProblemsButton.js";
-export { DependencyGraph, DependencyGraphPreview, GRAPH_EDITOR_STRINGS, INPUTS_EDITOR_STRINGS, ProblemsButton, inputTypes, offeredInputKeys, trackDrag };
+import { InputsFormEditor } from "./InputsEditor.js";
+import { INPUT_FORM_FIELDS, LINK_FIELDS, NEEDS_FIELDS, SESSION_FIELDS, WORKFLOW_FIELDS, WorkflowSettingsDialog } from "./WorkflowSettingsDialog.js";
+export { DependencyGraph, DependencyGraphPreview, GRAPH_EDITOR_STRINGS, INPUTS_EDITOR_STRINGS, INPUT_FORM_FIELDS, InputsFormEditor, JOB_FIELDS, LINK_FIELDS, NEEDS_FIELDS, ProblemsButton, RETRY_FIELDS, RUNS_ON_FIELDS, SESSION_FIELDS, SSH_KEYS, STEP_FIELDS, STRATEGY_FIELDS, WORKFLOW_FIELDS, WorkflowSettingsDialog, inputTypes, offeredInputKeys, trackDrag, withFields };