@parallelworks/ui 0.36.0 → 0.37.0

package/dist/graph/InputDialog.js

@@ -0,0 +1,596 @@
+import "classnames";
+import "react";
+import "react/jsx-runtime";
+//#region src/graph/InputDialog.tsx
+/** Input types by menu group, in the order the add menu lists them. */
+var INPUT_TYPE_GROUPS = [
+	["basic", [
+		"string",
+		"number",
+		"duration",
+		"boolean",
+		"password",
+		"editor",
+		"color-picker"
+	]],
+	["choices", [
+		"dropdown",
+		"multi-dropdown",
+		"radio",
+		"checkbox-group"
+	]],
+	["layout", [
+		"group",
+		"list",
+		"header",
+		"step"
+	]],
+	["compute", [
+		"compute-clusters",
+		"compute-resources",
+		"compute-target",
+		"bucket"
+	]],
+	["schedulers", [
+		"slurm-accounts",
+		"slurm-partitions",
+		"slurm-qos",
+		"pbs-queues"
+	]],
+	["cloud", [
+		"region",
+		"zone",
+		"instance-type"
+	]],
+	["kubernetes", [
+		"kubernetes-clusters",
+		"kubernetes-namespaces",
+		"kubernetes-pods",
+		"kubernetes-pvc",
+		"kubernetes-secrets",
+		"kubernetes-configmaps",
+		"kubernetes-statefulsets",
+		"kubernetes-deployments",
+		"kubernetes-services",
+		"kubernetes-workloads"
+	]],
+	["platform", [
+		"organization-groups",
+		"ai-model",
+		"allocations"
+	]]
+];
+var DEFAULT = {
+	key: "default",
+	kind: "text",
+	help: "default"
+};
+var DEFAULT_OBJECT = {
+	...DEFAULT,
+	nested: "object"
+};
+var DEFAULT_LIST = {
+	key: "default",
+	kind: "values",
+	help: "defaultList"
+};
+var RESOURCE_DEFAULT = {
+	...DEFAULT,
+	help: "defaultResource",
+	nested: "any"
+};
+var RESOURCE_DEFAULTS = {
+	...DEFAULT_LIST,
+	help: "defaultResources"
+};
+var AUTOSELECT = {
+	key: "autoselect",
+	kind: "flag",
+	help: "autoselect",
+	nested: "object",
+	conditional: true
+};
+var PLACEHOLDER = {
+	key: "placeholder",
+	kind: "text",
+	help: "placeholder",
+	prose: true
+};
+var CLUSTER = {
+	key: "clusterName",
+	kind: "ref",
+	help: "clusterName",
+	required: true,
+	refTypes: ["kubernetes-clusters"]
+};
+var NAMESPACE = {
+	key: "namespace",
+	kind: "ref",
+	help: "namespace",
+	required: true,
+	refTypes: ["kubernetes-namespaces"]
+};
+var CSP = {
+	key: "csp",
+	kind: "ref",
+	help: "csp",
+	refTypes: ["dropdown", "radio"],
+	choices: [
+		"aws",
+		"azure",
+		"google",
+		"openstack"
+	]
+};
+var CSP_REQUIRED = {
+	...CSP,
+	required: true
+};
+var REGION = {
+	key: "region",
+	kind: "ref",
+	help: "region",
+	required: true,
+	refTypes: ["region"]
+};
+var RESOURCE = {
+	key: "resource",
+	kind: "ref",
+	help: "resource",
+	required: true,
+	refTypes: ["compute-clusters", "compute-resources"],
+	literal: false
+};
+var ACCOUNT = {
+	key: "account",
+	kind: "ref",
+	help: "account",
+	refTypes: ["slurm-accounts"],
+	literal: false
+};
+var DEFAULT_FROM_INPUT = {
+	key: "default",
+	kind: "ref",
+	help: "defaultFromInput",
+	refTypes: [
+		"string",
+		"dropdown",
+		"radio"
+	],
+	literal: false
+};
+var OPTIONS = {
+	key: "options",
+	kind: "options",
+	help: "options",
+	required: true
+};
+var MULTI = {
+	key: "multi",
+	kind: "bool",
+	help: "multi"
+};
+var COMPUTE = [
+	RESOURCE_DEFAULT,
+	RESOURCE_DEFAULTS,
+	AUTOSELECT,
+	{
+		key: "include-workspace",
+		kind: "flag",
+		help: "includeWorkspace",
+		conditional: true
+	},
+	{
+		key: "include-unprovisioned",
+		kind: "flag",
+		help: "includeUnprovisioned",
+		conditional: true
+	},
+	CSP,
+	{
+		key: "provider",
+		kind: "providers",
+		help: "provider"
+	},
+	MULTI
+];
+var IN_NAMESPACE = [
+	DEFAULT_OBJECT,
+	CLUSTER,
+	NAMESPACE,
+	AUTOSELECT
+];
+var TYPE_PROPS = {
+	string: [
+		DEFAULT,
+		PLACEHOLDER,
+		{
+			key: "textarea",
+			kind: "bool",
+			help: "textarea"
+		},
+		{
+			key: "prefillDefault",
+			kind: "flag",
+			help: "prefillDefault"
+		},
+		{
+			key: "minLength",
+			kind: "number",
+			help: "minLength",
+			wholeFrom: 0
+		},
+		{
+			key: "maxLength",
+			kind: "number",
+			help: "maxLength",
+			wholeFrom: 1
+		},
+		{
+			key: "lowercase",
+			kind: "bool",
+			help: "lowercase"
+		},
+		{
+			key: "sanitize",
+			kind: "text",
+			help: "sanitize",
+			pattern: true
+		}
+	],
+	number: [
+		{
+			key: "default",
+			kind: "number",
+			help: "default"
+		},
+		{
+			key: "min",
+			kind: "number",
+			help: "minNumber"
+		},
+		{
+			key: "max",
+			kind: "number",
+			help: "maxNumber"
+		},
+		{
+			key: "step",
+			kind: "number",
+			help: "step"
+		},
+		{
+			key: "slider",
+			kind: "flag",
+			help: "slider"
+		}
+	],
+	boolean: [{
+		key: "default",
+		kind: "flag",
+		help: "default"
+	}],
+	password: [DEFAULT],
+	editor: [{
+		key: "default",
+		kind: "textarea",
+		help: "default"
+	}, {
+		key: "language",
+		kind: "language",
+		help: "language"
+	}],
+	"color-picker": [DEFAULT],
+	dropdown: [
+		OPTIONS,
+		{
+			key: "option-key",
+			kind: "ref",
+			help: "optionKey",
+			refTypes: [
+				"dropdown",
+				"radio",
+				"string"
+			],
+			literal: false
+		},
+		DEFAULT_OBJECT,
+		PLACEHOLDER,
+		AUTOSELECT
+	],
+	"multi-dropdown": [OPTIONS, DEFAULT_LIST],
+	radio: [
+		OPTIONS,
+		DEFAULT,
+		{
+			key: "optionLabelPosition",
+			kind: "choice",
+			help: "optionLabelPosition",
+			choices: ["left", "top"]
+		}
+	],
+	"checkbox-group": [
+		OPTIONS,
+		DEFAULT_LIST,
+		{
+			key: "implies",
+			kind: "implies",
+			help: "implies"
+		}
+	],
+	duration: [
+		{
+			key: "default",
+			kind: "duration",
+			help: "durationDefault"
+		},
+		PLACEHOLDER,
+		{
+			key: "min",
+			kind: "duration",
+			help: "minDuration"
+		},
+		{
+			key: "max",
+			kind: "duration",
+			help: "maxDuration"
+		},
+		{
+			key: "disableLabel",
+			kind: "text",
+			help: "disableLabel",
+			prose: true
+		},
+		{
+			key: "disableValue",
+			kind: "number",
+			help: "disableValue"
+		}
+	],
+	group: [{
+		key: "collapsed",
+		kind: "flag",
+		help: "collapsed",
+		conditional: true
+	}, {
+		key: "flatten",
+		kind: "bool",
+		help: "flatten"
+	}],
+	list: [
+		{
+			key: "template",
+			kind: "template",
+			help: "template",
+			required: true
+		},
+		{
+			key: "default",
+			kind: "rows",
+			help: "listDefault"
+		},
+		{
+			key: "items-collapsible",
+			kind: "flag",
+			help: "itemsCollapsible"
+		},
+		{
+			key: "min",
+			kind: "number",
+			help: "minItems"
+		},
+		{
+			key: "max",
+			kind: "number",
+			help: "maxItems"
+		}
+	],
+	header: [
+		{
+			key: "text",
+			kind: "textarea",
+			help: "text",
+			required: true,
+			grow: true,
+			prose: true
+		},
+		{
+			key: "size",
+			kind: "number",
+			help: "size"
+		},
+		{
+			key: "bold",
+			kind: "flag",
+			help: "bold",
+			fallback: true
+		}
+	],
+	step: [
+		{
+			key: "title",
+			kind: "perCopy",
+			help: "title",
+			required: true,
+			prose: true
+		},
+		{
+			key: "nextLabel",
+			kind: "text",
+			help: "nextLabel",
+			prose: true
+		},
+		{
+			key: "prevLabel",
+			kind: "text",
+			help: "prevLabel",
+			prose: true
+		},
+		{
+			key: "multi",
+			kind: "bool",
+			help: "multiStep",
+			label: "multiStep"
+		},
+		{
+			key: "min",
+			kind: "number",
+			help: "minCopies"
+		},
+		{
+			key: "max",
+			kind: "number",
+			help: "maxCopies"
+		}
+	],
+	"compute-clusters": COMPUTE,
+	"compute-resources": COMPUTE,
+	bucket: [
+		RESOURCE_DEFAULT,
+		RESOURCE_DEFAULTS,
+		CSP,
+		{
+			key: "generateCredentials",
+			kind: "flag",
+			help: "generateCredentials"
+		},
+		MULTI
+	],
+	region: [
+		DEFAULT_OBJECT,
+		CSP_REQUIRED,
+		AUTOSELECT
+	],
+	zone: [
+		DEFAULT_OBJECT,
+		CSP_REQUIRED,
+		REGION,
+		AUTOSELECT
+	],
+	"instance-type": [
+		DEFAULT_OBJECT,
+		CSP_REQUIRED,
+		REGION,
+		AUTOSELECT
+	],
+	"slurm-accounts": [DEFAULT_FROM_INPUT, RESOURCE],
+	"slurm-partitions": [
+		DEFAULT_FROM_INPUT,
+		RESOURCE,
+		ACCOUNT
+	],
+	"slurm-qos": [
+		DEFAULT_FROM_INPUT,
+		RESOURCE,
+		ACCOUNT,
+		{
+			key: "partition",
+			kind: "ref",
+			help: "partition",
+			refTypes: ["slurm-partitions"],
+			literal: false
+		}
+	],
+	"pbs-queues": [DEFAULT_FROM_INPUT, RESOURCE],
+	"organization-groups": [DEFAULT_FROM_INPUT],
+	"ai-model": [
+		DEFAULT,
+		PLACEHOLDER,
+		AUTOSELECT
+	],
+	allocations: [
+		DEFAULT,
+		PLACEHOLDER,
+		AUTOSELECT,
+		{
+			key: "includeEmpty",
+			kind: "bool",
+			help: "includeEmpty",
+			fallback: true
+		}
+	],
+	"kubernetes-clusters": [DEFAULT_OBJECT, AUTOSELECT],
+	"kubernetes-namespaces": [
+		DEFAULT_OBJECT,
+		CLUSTER,
+		AUTOSELECT
+	],
+	"kubernetes-pods": IN_NAMESPACE,
+	"kubernetes-pvc": IN_NAMESPACE,
+	"kubernetes-secrets": IN_NAMESPACE,
+	"kubernetes-configmaps": IN_NAMESPACE,
+	"kubernetes-statefulsets": IN_NAMESPACE,
+	"kubernetes-deployments": IN_NAMESPACE,
+	"kubernetes-services": IN_NAMESPACE,
+	"kubernetes-workloads": IN_NAMESPACE
+};
+var TEXT_FIELDS = [
+	"label",
+	"description",
+	"tooltip"
+];
+var FLAG_FIELDS = [
+	"optional",
+	"hidden",
+	"disabled",
+	"ignore"
+];
+var COMMON_KEYS = {
+	group: [
+		"label",
+		"description",
+		"tooltip",
+		"hidden",
+		"ignore"
+	],
+	header: [
+		"label",
+		"description",
+		"tooltip",
+		"hidden"
+	],
+	step: ["description"]
+};
+var ALL_COMMON = [...TEXT_FIELDS, ...FLAG_FIELDS];
+[...ALL_COMMON, ...Object.values(TYPE_PROPS).flatMap((props) => props.map((prop) => prop.key))];
+function inputTypes() {
+	return INPUT_TYPE_GROUPS.flatMap(([, types]) => types);
+}
+function commonKeys(type) {
+	return COMMON_KEYS[type] ?? ALL_COMMON;
+}
+/** Every key the dialog can write for an input of `type`. */
+function offeredInputKeys(editing, type) {
+	const children = editing.inputChildrenKey(type);
+	return [
+		"type",
+		...commonKeys(type),
+		...(TYPE_PROPS[type] ?? []).map((prop) => prop.key),
+		...children ? [children] : []
+	];
+}
+function commonProp(key) {
+	const flag = FLAG_FIELDS.includes(key);
+	return {
+		key,
+		kind: flag ? "flag" : key === "label" ? "text" : "textarea",
+		help: key,
+		...flag ? { conditional: true } : { prose: true },
+		...key === "description" || key === "tooltip" ? { grow: true } : {}
+	};
+}
+var COMMON_PROPS = ALL_COMMON.map(commonProp);
+var STEP_DESCRIPTION = {
+	...commonProp("description"),
+	kind: "perCopy"
+};
+function draftKey(prop) {
+	return `${prop.kind}:${prop.key}`;
+}
+[...new Map([
+	...COMMON_PROPS,
+	STEP_DESCRIPTION,
+	...Object.values(TYPE_PROPS).flat()
+].map((prop) => [draftKey(prop), prop])).values()];
+//#endregion
+export { INPUT_TYPE_GROUPS, commonKeys, inputTypes, offeredInputKeys };

package/dist/graph/ProblemsButton.d.ts

@@ -0,0 +1,9 @@
+import type { EditorProblem } from './editorApi.js';
+/** A problem as a pane lists it; `pick` shows where it is, when an open pane can. */
+export interface ListedProblem extends EditorProblem {
+    pick?: (() => void) | undefined;
+}
+/** A toolbar's count of the problems it lists, which opens the list. */
+export declare function ProblemsButton({ problems }: {
+    problems: ListedProblem[];
+}): import("react").JSX.Element | null;

package/dist/graph/ProblemsButton.js

@@ -0,0 +1,61 @@
+import { TbAlertTriangle } from "../icons/tb/TbAlertTriangle.js";
+import { keyedByContent } from "../components/keys.js";
+import { TOOLTIP_ID } from "../components/Tooltip.js";
+import { useGraphEditorStrings } from "./editorStrings.js";
+import { ToolbarPopover } from "./ToolbarPopover.js";
+import { useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/graph/ProblemsButton.tsx
+/** A toolbar's count of the problems it lists, which opens the list. */
+function ProblemsButton({ problems }) {
+	const t = useGraphEditorStrings();
+	const [open, setOpen] = useState(false);
+	const button = useRef(null);
+	if (problems.length === 0) return null;
+	const label = t.problemCount(problems.length);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("button", {
+		ref: button,
+		type: "button",
+		"aria-label": label,
+		"aria-expanded": open,
+		...open ? {} : { "data-tooltip-id": TOOLTIP_ID },
+		"data-tooltip-content": label,
+		className: "flex h-7 cursor-pointer items-center gap-1 rounded px-2 text-xs font-medium text-(--theme-error) theme-hover",
+		onClick: () => setOpen((current) => !current),
+		children: [/* @__PURE__ */ jsx(TbAlertTriangle, { className: "h-3.5 w-3.5" }), problems.length]
+	}), open && /* @__PURE__ */ jsxs(ToolbarPopover, {
+		anchor: button,
+		label,
+		onClose: () => setOpen(false),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "mb-2 text-[0.8125rem] font-semibold",
+			children: label
+		}), /* @__PURE__ */ jsx("ul", {
+			className: "flex flex-col gap-0.5",
+			children: keyedByContent(problems, (problem) => `${problem.line}:${problem.message}`).map(({ key, item: problem }) => {
+				const { pick } = problem;
+				const text = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+					className: "mr-1.5 theme-muted-text",
+					children: t.problemLine(problem.line)
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-(--theme-error)",
+					children: problem.message
+				})] });
+				return /* @__PURE__ */ jsx("li", { children: pick ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "w-full cursor-pointer rounded px-1.5 py-1 text-left theme-hover",
+					onClick: () => {
+						setOpen(false);
+						pick();
+					},
+					children: text
+				}) : /* @__PURE__ */ jsx("div", {
+					className: "px-1.5 py-1",
+					children: text
+				}) }, key);
+			})
+		})]
+	})] });
+}
+//#endregion
+export { ProblemsButton };

package/dist/graph/ShortcutsButton.d.ts

@@ -0,0 +1,15 @@
+/** What a gesture or key does; each combo is a set of keys, and a second combo does the same. */
+export interface Shortcut {
+    combos: string[][];
+    does: string;
+}
+export interface ShortcutGroup {
+    title: string;
+    shortcuts: Shortcut[];
+}
+export declare const MOD_KEY: string;
+export declare const ALT_KEY: string;
+/** A toolbar button that opens the list of gestures and keys a pane takes. */
+export declare function ShortcutsButton({ groups }: {
+    groups: ShortcutGroup[];
+}): import("react").JSX.Element;

package/dist/graph/SuggestionInput.d.ts

@@ -0,0 +1,18 @@
+import { type IProps as DropdownProps } from '../components/Dropdown.js';
+import type { IOptions } from '../components/dropdownUtils.js';
+/** A value a typed field offers, with what it means. */
+export interface Suggestion {
+    value: string;
+    label?: string | undefined;
+}
+export declare function suggestionOptions(suggestions: Suggestion[]): (IOptions | string)[];
+export declare const FIELD_TEXT_BOX = "py-3 pl-4 rounded-lg text-sm !bg-[var(--theme-muted-panel-bg)]";
+/**
+ * The dropdown for a field that takes any typed value as well as the ones it offers. Any of
+ * the dropdown's own props can still be passed, such as `allowCustomValue={false}`.
+ */
+export declare function SuggestionInput({ value, onChange, suggestions, allowCustomValue, ...props }: Omit<DropdownProps, 'options' | 'value' | 'onChange'> & {
+    value: string;
+    onChange: (value: string) => void;
+    suggestions: Suggestion[];
+}): import("react").JSX.Element;

package/dist/graph/ToolbarPopover.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode, type RefObject } from 'react';
+/** A toolbar button's panel, drawn over the page so the pane it sits in can't clip it. */
+export declare function ToolbarPopover({ anchor, label, onClose, children, }: {
+    anchor: RefObject<HTMLElement | null>;
+    label: string;
+    onClose: () => void;
+    children: ReactNode;
+}): import("react").ReactPortal;