@ocelescope/plugin 0.5.0 → 0.7.0

package/dist/index.js

@@ -1,188 +1,312 @@
 import { BarList, FileDropzone, FullScreenUpload, OcelSelect, defineModule, defineModuleRoute, env, getModuleRoute, useInvalidate } from "@ocelescope/core";
 import { CheckIcon, Columns2Icon, DatabaseIcon, DownloadIcon, EllipsisVertical, PuzzleIcon, Rows2Icon, Trash2Icon, UploadIcon } from "lucide-react";
 import { useRouter } from "next/router.js";
-import { ActionIcon, Anchor, Badge, Box, Breadcrumbs, Button, Card, Center, Container, Divider, Flex, Group, Loader, LoadingOverlay, Menu, Modal, MultiSelect, ScrollArea, Select, SimpleGrid, Splitter, Stack, Switch, Text, ThemeIcon, Title, Tooltip } from "@mantine/core";
+import { ActionIcon, Anchor, Badge, Box, Breadcrumbs, Button, Card, Center, Container, Divider, Flex, Group, Input, Loader, LoadingOverlay, Menu, Modal, MultiSelect, ScrollArea, Select, SimpleGrid, Skeleton, Slider, Splitter, Stack, Switch, Text, ThemeIcon, Title, Tooltip, useComputedColorScheme } from "@mantine/core";
 import { useDeletePlugin, useDisableDiscoveryMethod, useDownloadPluginResults, useEnableDiscoveryMethod, useEventAttributes, useEventCounts, useEventIds, useGetComputedValues, useGetExtensionMeta, useGetPlugin, useGetPluginMethod, useGetResourceMeta, useListDiscoveryMethods, useObjectAttributes, useObjectCounts, useObjectIds, usePluginResult, usePlugins, useRunPlugin, useSavePluginResults, useUpload } from "@ocelescope/api-base";
-import { memo, useCallback, useEffect, useMemo, useState } from "react";
+import { createContext, memo, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { ResourceSelect, Visualization } from "@ocelescope/resources";
 import { Controller, useForm, useWatch } from "react-hook-form";
-import RefParser from "@apidevtools/json-schema-ref-parser";
 import validator from "@rjsf/validator-ajv8";
-import { unflatten } from "flat";
-import traverse from "json-schema-traverse";
-import { keepPreviousData } from "@tanstack/react-query";
+import { getDefaultRegistry } from "@rjsf/core";
+import Editor from "@monaco-editor/react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useDebouncedValue } from "@mantine/hooks";
+import { keepPreviousData } from "@tanstack/react-query";
 import dynamic from "next/dynamic.js";
 import Link from "next/link.js";
 import { generateColor } from "@marko19907/string-to-color";
-//#region src/components/Form/Fields/custom.tsx
-const useSelectOptions = ({ pluginId, methodName, provider, control }) => {
+//#region src/components/Form/Fields/CodeField.tsx
+const EDITOR_HEIGHT = 160;
+const OPTIONS = {
+	minimap: { enabled: false },
+	quickSuggestions: false,
+	suggestOnTriggerCharacters: false,
+	wordBasedSuggestions: "off",
+	lineNumbers: "on",
+	scrollBeyondLastLine: false,
+	automaticLayout: true,
+	scrollbar: { alwaysConsumeMouseWheel: false },
+	wordWrap: "on",
+	tabSize: 2,
+	fontSize: 13,
+	padding: {
+		top: 8,
+		bottom: 8
+	}
+};
+const CodeField = memo(({ schema, required, formData, onChange, rawErrors, disabled, readonly, fieldPathId: { path } }) => {
+	const meta = schema["x-ui-meta"];
+	const colorScheme = useComputedColorScheme("light", { getInitialValueInEffect: true });
+	const readOnly = disabled || readonly;
+	const options = useMemo(() => ({
+		...OPTIONS,
+		readOnly
+	}), [readOnly]);
+	return /* @__PURE__ */ jsx(Input.Wrapper, {
+		label: schema.title,
+		description: schema.description,
+		required,
+		error: rawErrors?.[0],
+		children: /* @__PURE__ */ jsx(Box, {
+			style: {
+				border: "1px solid var(--mantine-color-default-border)",
+				borderRadius: "var(--mantine-radius-default)",
+				overflow: "hidden"
+			},
+			children: /* @__PURE__ */ jsx(Editor, {
+				height: EDITOR_HEIGHT,
+				language: meta?.language ?? "plaintext",
+				value: formData ?? "",
+				theme: colorScheme === "dark" ? "vs-dark" : "light",
+				options,
+				onChange: (value) => onChange(value ?? "", path),
+				loading: /* @__PURE__ */ jsx(Skeleton, {
+					height: EDITOR_HEIGHT,
+					radius: 0
+				})
+			})
+		})
+	});
+});
+//#endregion
+//#region src/components/Form/PluginFormContext.tsx
+const PluginFormContext = createContext(void 0);
+const usePluginForm = () => {
+	const context = useContext(PluginFormContext);
+	if (!context) throw new Error("Custom plugin fields have to be rendered inside <PluginFormProvider>");
+	return context;
+};
+const useOcelId = (ocelRef) => {
+	const { control } = usePluginForm();
+	return useWatch({
+		control,
+		name: `input_ocels.${ocelRef}`
+	});
+};
+const PluginFormProvider = ({ pluginId, methodName, control, children }) => {
+	const value = useMemo(() => ({
+		pluginId,
+		methodName,
+		control
+	}), [
+		pluginId,
+		methodName,
+		control
+	]);
+	return /* @__PURE__ */ jsx(PluginFormContext.Provider, {
+		value,
+		children
+	});
+};
+//#endregion
+//#region src/components/Form/Fields/ComputedSelect.tsx
+const compact = (record) => Object.fromEntries(Object.entries(record ?? {}).filter(([, value]) => !!value));
+const useSelectOptions = (provider) => {
+	const { pluginId, methodName, control } = usePluginForm();
 	const formValues = useWatch({ control });
-	const { data } = useGetComputedValues(pluginId, methodName, provider, {
+	const [debouncedBody] = useDebouncedValue(useMemo(() => JSON.stringify({
 		input: formValues.input,
-		input_ocels: Object.fromEntries(Object.entries(formValues.input_ocels ?? {}).filter(([_, v]) => !!v && v.length >= 0)),
-		input_resources: Object.fromEntries(Object.entries(formValues.input_resources ?? {}).filter(([_, v]) => !!v && v.length >= 0))
-	}, { query: {
+		input_ocels: compact(formValues.input_ocels),
+		input_resources: compact(formValues.input_resources)
+	}), [formValues]), 300);
+	const { data } = useGetComputedValues(pluginId, methodName, provider, useMemo(() => JSON.parse(debouncedBody), [debouncedBody]), { query: {
 		placeholderData: keepPreviousData,
 		refetchOnWindowFocus: false,
 		refetchOnReconnect: false
 	} });
 	return { options: data };
 };
-const getComputedSelect = ({ pluginId, methodName, control }) => ({ computed_select: memo(({ schema, required, formData, onChange, fieldPathId: { path } }) => {
-	const meta = schema?.["x-ui-meta"];
-	const SelectComponent = schema.type === "array" ? MultiSelect : Select;
-	const { options } = useSelectOptions({
-		pluginId,
-		methodName,
-		control,
-		provider: meta.provider
-	});
+const ComputedSelect = memo(({ schema, required, formData, onChange, fieldPathId: { path } }) => {
+	const meta = schema["x-ui-meta"];
+	const isMulti = schema.type === "array";
+	const SelectComponent = isMulti ? MultiSelect : Select;
+	const { options } = useSelectOptions(meta.provider);
 	return /* @__PURE__ */ jsx(SelectComponent, {
 		label: schema.title,
 		description: schema.description,
 		required,
-		value: formData ?? (schema.type === "array" ? [] : null),
+		value: formData ?? (isMulti ? [] : null),
 		onChange: (value) => onChange(value, path),
 		data: options
 	});
-}) });
+});
 //#endregion
-//#region src/components/Form/Fields/ocel.tsx
-const AttributeSelector = (query) => ({ isMulti, ocelId, onChange, value, label, required, description }) => {
-	const { data: attributes = [] } = query(ocelId);
-	const attributeNames = new Set(attributes.map(({ name }) => name));
-	return /* @__PURE__ */ jsx(isMulti ? MultiSelect : Select, {
-		value: value ?? (isMulti ? [] : null),
-		label,
-		onChange,
+//#region src/components/Form/Fields/EnumMultiSelect.tsx
+const itemsOf = (schema, registry) => {
+	const { items } = schema;
+	if (!items || typeof items === "boolean" || Array.isArray(items)) return;
+	return registry.schemaUtils.retrieveSchema(items);
+};
+const isStringEnumArray = (schema, registry) => {
+	if (schema.type !== "array") return false;
+	const enumValues = itemsOf(schema, registry)?.enum;
+	return Array.isArray(enumValues) && enumValues.length > 0 && enumValues.every((value) => typeof value === "string");
+};
+const EnumMultiSelect = memo(({ schema, registry, required, formData, onChange, rawErrors, disabled, readonly, fieldPathId: { path } }) => {
+	const options = useMemo(() => itemsOf(schema, registry)?.enum ?? [], [schema, registry]);
+	return /* @__PURE__ */ jsx(MultiSelect, {
+		label: schema.title,
+		description: schema.description,
 		required,
-		description,
+		error: rawErrors?.[0],
+		data: options,
+		value: Array.isArray(formData) ? formData : [],
+		onChange: (value) => onChange(value, path),
+		disabled: disabled || readonly,
 		clearable: true,
-		data: [...attributeNames]
+		searchable: true
+	});
+});
+//#endregion
+//#region src/components/Form/Fields/OCELField.tsx
+const AttributeSelect = (useAttributes) => ({ ocelId, isMulti, value, ...props }) => {
+	const { data: attributes } = useAttributes(ocelId);
+	const names = useMemo(() => [...new Set((attributes ?? []).map(({ name }) => name))], [attributes]);
+	return /* @__PURE__ */ jsx(isMulti ? MultiSelect : Select, {
+		value: value ?? (isMulti ? [] : null),
+		...props,
+		data: names,
+		disabled: !ocelId,
+		clearable: true
 	});
 };
-const TypeSelector = (query) => ({ ocelId, onChange, required, value, isMulti, label, description }) => {
-	const { data = {} } = query(ocelId);
+const TypeSelect = (useCounts) => ({ ocelId, isMulti, value, ...props }) => {
+	const { data: counts } = useCounts(ocelId);
+	const types = useMemo(() => Object.keys(counts ?? {}), [counts]);
 	return /* @__PURE__ */ jsx(isMulti ? MultiSelect : Select, {
+		...props,
 		value: value ?? (isMulti ? [] : null),
-		label,
-		required,
-		clearable: true,
-		description,
-		onChange,
-		data: Object.keys(data)
+		data: types,
+		clearable: true
 	});
 };
-const IdSelect = (query) => ({ ocelId, isMulti, value, ...rest }) => {
-	const [searchValue, setSearchValue] = useState();
-	const [debouncedSearch] = useDebouncedValue(searchValue, 300);
-	const { data: ids } = query(ocelId, { search: debouncedSearch });
+const IdSelect = (useIds) => ({ ocelId, isMulti, value, ...props }) => {
+	const [search, setSearch] = useState();
+	const [debouncedSearch] = useDebouncedValue(search, 300);
+	const { data: ids } = useIds(ocelId, { search: debouncedSearch });
 	return /* @__PURE__ */ jsx(isMulti ? MultiSelect : Select, {
-		searchable: true,
-		searchValue,
-		onSearchChange: (newSearchValue) => setSearchValue(newSearchValue),
-		data: ids?.response,
+		...props,
 		value: value ?? (isMulti ? [] : null),
-		...rest
+		data: ids?.response,
+		searchValue: search,
+		onSearchChange: setSearch,
+		searchable: true
 	});
 };
-const ocelFieldMap = {
-	event_type: TypeSelector(useEventCounts),
-	object_type: TypeSelector(useObjectCounts),
-	event_attribute: AttributeSelector(useEventAttributes),
-	object_attribute: AttributeSelector(useObjectAttributes),
+const OCEL_FIELDS = {
+	event_type: TypeSelect(useEventCounts),
+	object_type: TypeSelect(useObjectCounts),
+	event_attribute: AttributeSelect(useEventAttributes),
+	object_attribute: AttributeSelect(useObjectAttributes),
 	event_id: IdSelect(useEventIds),
 	object_id: IdSelect(useObjectIds)
 };
-const wrapFieldsWithContext = (control) => {
-	const wrapped = {};
-	for (const [name, Field] of Object.entries(ocelFieldMap)) {
-		const Comp = ({ schema, required, formData, fieldPathId: { path }, onChange }) => {
-			const ocelRef = schema?.["x-ui-meta"]?.ocel_id;
-			const isMulti = schema?.type === "array";
-			const ocelId = useWatch({
-				control,
-				name: `input_ocels.${ocelRef}`
-			});
-			return /* @__PURE__ */ jsx(Field, {
-				label: schema?.title,
-				required,
-				description: schema?.description,
-				isMulti,
-				onChange: (data) => onChange(data, path),
-				value: formData,
-				ocelId
-			});
-		};
-		wrapped[name] = memo(Comp);
-	}
-	return wrapped;
+const OCELField = memo(({ schema, required, formData, onChange, fieldPathId: { path } }) => {
+	const ocelRef = schema["x-ui-meta"]?.["ocel_id"];
+	const ocelFieldType = schema["x-ui-meta"]?.["field_type"];
+	const ocelId = useOcelId(ocelRef);
+	const isMulti = schema.type === "array";
+	useEffect(() => {
+		onChange(isMulti ? [] : void 0, path);
+	}, [
+		ocelId,
+		isMulti,
+		onChange,
+		path
+	]);
+	const Selector = OCEL_FIELDS[ocelFieldType];
+	return Selector && /* @__PURE__ */ jsx(Selector, {
+		ocelId,
+		isMulti,
+		value: formData,
+		onChange: (value) => onChange(value, path),
+		label: schema.title,
+		description: schema.description,
+		disabled: !ocelId,
+		required
+	}, ocelId);
+});
+//#endregion
+//#region src/components/Form/Fields/SliderField.tsx
+const decimalsOf = (step) => String(step).split(".")[1]?.length ?? 0;
+const SliderField = memo(({ schema, required, formData, onChange, rawErrors, disabled, readonly, fieldPathId: { path } }) => {
+	const meta = schema["x-ui-meta"];
+	const { min, max } = meta;
+	const step = meta.step ?? (schema.type === "integer" ? 1 : (max - min) / 100);
+	const decimals = decimalsOf(step);
+	const marks = useMemo(() => meta.marks?.map((value) => ({
+		value,
+		label: value.toFixed(decimals)
+	})), [meta.marks, decimals]);
+	const fallback = typeof schema.default === "number" ? schema.default : min;
+	const value = typeof formData === "number" ? formData : fallback;
+	return /* @__PURE__ */ jsx(Input.Wrapper, {
+		label: schema.title,
+		description: schema.description,
+		required,
+		error: rawErrors?.[0],
+		children: /* @__PURE__ */ jsx(Box, {
+			px: marks ? "md" : void 0,
+			pb: marks ? "xl" : void 0,
+			children: /* @__PURE__ */ jsx(Slider, {
+				mt: "xs",
+				min,
+				max,
+				step,
+				marks,
+				label: (current) => current.toFixed(decimals),
+				value,
+				onChange: (current) => onChange(current, path),
+				disabled: disabled || readonly
+			})
+		})
+	});
+});
+//#endregion
+//#region src/components/Form/Fields/index.tsx
+const DefaultSchemaField = getDefaultRegistry().fields.SchemaField;
+const CUSTOM_FORM_MAP = {
+	ocel: OCELField,
+	computed_select: ComputedSelect,
+	code: CodeField,
+	slider: SliderField
+};
+const resolveField = ({ schema, registry }) => {
+	const uiType = schema["x-ui-meta"]?.type;
+	if (uiType) return CUSTOM_FORM_MAP[uiType];
+	if (isStringEnumArray(schema, registry)) return EnumMultiSelect;
+};
+const CustomSchemaField = (props) => {
+	const FormComponent = resolveField(props);
+	return FormComponent ? /* @__PURE__ */ jsx(FormComponent, { ...props }) : /* @__PURE__ */ jsx(DefaultSchemaField, { ...props });
 };
 //#endregion
 //#region src/components/Form/MantineForm.tsx
 const Form = dynamic(() => import("@rjsf/mantine").then((m) => m.Form), { ssr: false });
 //#endregion
 //#region src/components/Form/PluginForm.tsx
-const buildUiSchemaV2 = async ({ schema }) => {
-	const deref = await RefParser.dereference(schema, { dereference: { circular: "ignore" } });
-	const uiSchema = {};
-	traverse(deref, {
-		allKeys: true,
-		cb: (subschema, pointer) => {
-			const pointerComponents = pointer.split("/").slice(1);
-			if (pointerComponents[0] !== "properties") return;
-			if (pointerComponents[0] === "properties" && pointerComponents.at(-1) === "x-ui-meta") {
-				const path = pointerComponents.filter((pathComponent) => !["x-ui-meta", "properties"].includes(pathComponent)).join(".");
-				uiSchema[path] = { "ui:field": subschema.field_type ?? subschema.type };
-			}
-		}
-	});
-	return unflatten(uiSchema);
-};
+const FIELDS = { SchemaField: CustomSchemaField };
 const PluginForm = ({ schema, control, pluginId, methodName, onSubmit }) => {
-	const [uiSchema, setUiSchema] = useState(void 0);
-	useEffect(() => {
-		let cancelled = false;
-		(async () => {
-			const ui = await buildUiSchemaV2({ schema });
-			if (!cancelled) setUiSchema(ui);
-		})();
-		return () => {
-			cancelled = true;
-		};
-	}, [schema]);
-	const fields = useMemo(() => wrapFieldsWithContext(control), [control]);
-	const computedFields = useMemo(() => getComputedSelect({
-		methodName,
+	const formSchema = useMemo(() => ({
+		...schema,
+		title: ""
+	}), [schema]);
+	return /* @__PURE__ */ jsx(PluginFormProvider, {
+		control,
 		pluginId,
-		control
-	}), [
 		methodName,
-		pluginId,
-		control
-	]);
-	return /* @__PURE__ */ jsx(Controller, {
-		control,
-		name: "input",
-		render: ({ field }) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Form, {
-			schema: {
-				...schema,
-				title: ""
-			},
-			formData: field.value,
-			validator,
-			uiSchema,
-			fields: {
-				...fields,
-				...computedFields
-			},
-			onChange: (data) => {
-				field.onChange(data.formData);
-			},
-			onSubmit
-		}) })
+		children: /* @__PURE__ */ jsx(Controller, {
+			control,
+			name: "input",
+			render: ({ field }) => /* @__PURE__ */ jsx(Form, {
+				schema: formSchema,
+				formData: field.value,
+				validator,
+				fields: FIELDS,
+				onChange: ({ formData }) => field.onChange(formData),
+				onSubmit
+			})
+		})
 	});
 };
 //#endregion

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ocelescope/plugin",
   "type": "module",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "A module for inspections of OCELs",
   "author": "Görkem-Emre Öztürk <goerkem.oeztuerk@rwth-aachen.de>",
   "license": "MIT",
@@ -27,40 +27,35 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@apidevtools/json-schema-ref-parser": "^15.5.0",
-    "@mantine/carousel": "^9.4.2",
-    "@mantine/core": "^9.4.2",
-    "@mantine/hooks": "^9.4.2",
+    "@mantine/carousel": "^9.5.1",
+    "@mantine/core": "^9.5.1",
+    "@mantine/hooks": "^9.5.1",
     "@marko19907/string-to-color": "^1.0.2",
-    "@rjsf/core": "^6.7.0",
-    "@rjsf/mantine": "^6.7.0",
-    "@rjsf/utils": "^6.7.0",
-    "@rjsf/validator-ajv8": "^6.7.0",
+    "@monaco-editor/react": "^4.7.0",
+    "@rjsf/core": "^6.8.0",
+    "@rjsf/mantine": "^6.8.0",
+    "@rjsf/utils": "^6.8.0",
+    "@rjsf/validator-ajv8": "^6.8.0",
     "@tanstack/react-query": "^5.90.21",
     "embla-carousel": "^8.6.0",
     "embla-carousel-react": "^8.6.0",
-    "flat": "^6.0.1",
-    "json-schema-traverse": "^1.0.0",
     "lucide-react": "^1.0.0",
-    "next": "^16.2.10",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
+    "next": "16.3.0",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
     "react-hook-form": "^7.71.2",
-    "@ocelescope/core": "^0.5.0",
-    "@ocelescope/resources": "^0.5.0",
-    "@ocelescope/api-base": "^0.5.0"
+    "@ocelescope/core": "^0.7.0",
+    "@ocelescope/api-base": "^0.7.0",
+    "@ocelescope/resources": "^0.7.0"
   },
   "devDependencies": {
-    "@apidevtools/json-schema-ref-parser": "^15.5.0",
-    "@rjsf/mantine": "^6.7.0",
+    "@rjsf/mantine": "^6.8.0",
     "@types/file-saver": "^2.0.7",
-    "@types/node": "^26.1.1",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
-    "flat": "^6.0.1",
-    "json-schema-traverse": "^1.0.0",
-    "tsdown": "^0.22.12",
-    "typescript": "^5.9.3"
+    "@types/node": "^26.2.0",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "tsdown": "^0.22.14",
+    "typescript": "^6.0.3"
   },
   "scripts": {
     "build": "tsdown",