@ocelescope/plugin 0.7.0 → 0.8.0

package/dist/index.js

@@ -1,325 +1,48 @@
-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 { FileDropzone, FullScreenUpload, OcelSelect, defineModule, defineModuleRoute, env, getModuleRoute } from "@ocelescope/core";
+import { EllipsisVertical, PuzzleIcon, Trash2Icon, UploadIcon } from "lucide-react";
 import { useRouter } from "next/router.js";
-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 { createContext, memo, useCallback, useContext, useEffect, useMemo, useState } from "react";
-import { ResourceSelect, Visualization } from "@ocelescope/resources";
+import { ActionIcon, Anchor, Badge, Breadcrumbs, Button, Card, Container, Group, LoadingOverlay, Menu, Modal, ScrollArea, SimpleGrid, Splitter, Stack, Text, ThemeIcon, Title } from "@mantine/core";
+import { useDeletePlugin, useGetPlugin, useGetPluginMethod, usePlugins, useRunPlugin, useUpload } from "@ocelescope/api-base";
+import { PluginForm, ResultSection } from "@ocelescope/plugin-components";
+import { useCallback, useMemo, useState } from "react";
+import { ResourceSelect } from "@ocelescope/resources";
 import { Controller, useForm, useWatch } from "react-hook-form";
-import validator from "@rjsf/validator-ajv8";
-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/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
+//#region src/components/Form/index.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 [debouncedBody] = useDebouncedValue(useMemo(() => JSON.stringify({
-		input: formValues.input,
-		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 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 ?? (isMulti ? [] : null),
-		onChange: (value) => onChange(value, path),
-		data: options
-	});
-});
-//#endregion
-//#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,
-		error: rawErrors?.[0],
-		data: options,
-		value: Array.isArray(formData) ? formData : [],
-		onChange: (value) => onChange(value, path),
-		disabled: disabled || readonly,
-		clearable: true,
-		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 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),
-		data: types,
-		clearable: true
-	});
-};
-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, {
-		...props,
-		value: value ?? (isMulti ? [] : null),
-		data: ids?.response,
-		searchValue: search,
-		onSearchChange: setSearch,
-		searchable: true
-	});
-};
-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 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
-			})
-		})
+const ConfigurationSection = ({ control, schema, pluginId, methodName, onSubmit }) => {
+	const inputResources = useWatch({
+		control,
+		name: "input_resources"
 	});
-});
-//#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 FIELDS = { SchemaField: CustomSchemaField };
-const PluginForm = ({ schema, control, pluginId, methodName, onSubmit }) => {
-	const formSchema = useMemo(() => ({
-		...schema,
-		title: ""
-	}), [schema]);
-	return /* @__PURE__ */ jsx(PluginFormProvider, {
+	return /* @__PURE__ */ jsx(Controller, {
 		control,
-		pluginId,
-		methodName,
-		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
-			})
+		name: "input",
+		render: ({ field }) => /* @__PURE__ */ jsx(PluginForm, {
+			pluginId,
+			methodName,
+			schema,
+			inputResources,
+			formData: field.value,
+			onChange: ({ formData }) => field.onChange(formData),
+			onSubmit
 		})
 	});
 };
-//#endregion
-//#region src/components/Form/index.tsx
 const PluginInput = ({ pluginId, method, onSuccess }) => {
 	const { mutate: runPlugin } = useRunPlugin({ mutation: { onSuccess } });
-	const { control, handleSubmit } = useForm({ defaultValues: {
-		input_ocels: Object.fromEntries(Object.keys(method.input_ocels ?? {}).map((name) => [name, void 0])),
-		input_resources: Object.fromEntries(Object.keys(method.input_resources ?? {}).map((name) => [name, void 0])),
+	const defaultValue = {
+		input_resources: Object.fromEntries(method.inputs.map(({ name }) => [name, void 0])),
 		formData: {}
-	} });
-	const onSubmit = useCallback(() => handleSubmit((data) => runPlugin({
-		data,
+	};
+	const { control, handleSubmit } = useForm({ defaultValues: defaultValue });
+	const onSubmit = useCallback(() => handleSubmit(({ input_resources, input }) => runPlugin({
+		data: {
+			input_resources: compact(input_resources),
+			input
+		},
 		methodName: method.name,
 		pluginId
 	}))(), [
@@ -330,46 +53,40 @@ const PluginInput = ({ pluginId, method, onSuccess }) => {
 	]);
 	return /* @__PURE__ */ jsxs(Stack, {
 		gap: "md",
-		children: [
-			Object.entries(method.input_ocels ?? {}).map(([name, { label, description, extension }]) => /* @__PURE__ */ jsx(Controller, {
-				control,
-				name: `input_ocels.${name}`,
-				rules: { required: "Please select a value" },
-				render: ({ field, fieldState }) => /* @__PURE__ */ jsx(OcelSelect, {
-					label,
-					required: true,
-					extension: extension ?? void 0,
-					description,
-					error: fieldState.error?.message,
-					onChange: field.onChange,
-					value: field.value
-				})
-			}, name)),
-			Object.entries(method.input_resources ?? {}).map(([name, [resource_type, { label, description }]]) => /* @__PURE__ */ jsx(Controller, {
-				control,
-				name: `input_resources.${name}`,
-				rules: { required: "Please select a value" },
-				render: ({ field, fieldState }) => /* @__PURE__ */ jsx(ResourceSelect, {
-					label,
-					required: true,
-					type: resource_type,
-					description,
-					onChange: field.onChange,
-					error: fieldState.error?.message,
-					value: field.value
-				})
-			}, name)),
-			method.input_schema ? /* @__PURE__ */ jsx(PluginForm, {
-				pluginId,
-				methodName: method.name,
-				schema: method.input_schema,
-				control,
-				onSubmit
-			}) : /* @__PURE__ */ jsx(Button, {
-				onClick: onSubmit,
-				children: "Submit"
+		children: [method.inputs.map((io) => /* @__PURE__ */ jsx(Controller, {
+			control,
+			name: `input_resources.${io.name}`,
+			rules: !io.is_optional ? { required: "Please select a value" } : {},
+			render: ({ field, fieldState }) => io.type === "ocel" ? /* @__PURE__ */ jsx(OcelSelect, {
+				label: io.label,
+				clearable: io.is_optional,
+				required: !io.is_optional,
+				description: io.description,
+				searchable: true,
+				error: fieldState.error?.message,
+				onChange: field.onChange,
+				value: field.value
+			}) : /* @__PURE__ */ jsx(ResourceSelect, {
+				clearable: io.is_optional,
+				label: io.label,
+				required: !io.is_optional,
+				type: io.schema_id,
+				description: io.description,
+				onChange: field.onChange,
+				error: fieldState.error?.message,
+				value: field.value,
+				searchable: true
 			})
-		]
+		}, io.name)), method.configuration_schema ? /* @__PURE__ */ jsx(ConfigurationSection, {
+			control,
+			pluginId,
+			methodName: method.name,
+			schema: method.configuration_schema,
+			onSubmit
+		}) : /* @__PURE__ */ jsx(Button, {
+			onClick: onSubmit,
+			children: "Submit"
+		})]
 	});
 };
 //#endregion
@@ -396,7 +113,7 @@ const PluginBreadcrumbs = () => {
 				pluginId: plugin?.id,
 				methodName: void 0
 			} },
-			children: plugin?.meta.label
+			children: plugin?.label
 		}),
 		pluginMethod && /* @__PURE__ */ jsx(Anchor, {
 			component: Link,
@@ -410,186 +127,6 @@ const PluginBreadcrumbs = () => {
 	] });
 };
 //#endregion
-//#region src/components/ResultSection/ResultSection.tsx
-const ResourceView = ({ resource }) => {
-	return /* @__PURE__ */ jsx(Visualization, { visualization: resource.visualization });
-};
-const OCELView = ({ ocel }) => {
-	return /* @__PURE__ */ jsxs(Stack, {
-		gap: "md",
-		children: [/* @__PURE__ */ jsx(BarList, {
-			data: ocel.activity_count,
-			labelHeader: "Activity"
-		}), /* @__PURE__ */ jsx(BarList, {
-			data: ocel.object_count,
-			labelHeader: "Object type"
-		})]
-	});
-};
-const entityTypeOf = (output) => output.type === "ocel" ? "ocel" : output.resource_type || "resource";
-const ResultLabel = ({ label, entityType, bold }) => /* @__PURE__ */ jsxs(Group, {
-	gap: "xs",
-	wrap: "nowrap",
-	children: [/* @__PURE__ */ jsx(Text, {
-		fw: bold ? 600 : void 0,
-		truncate: true,
-		children: label
-	}), /* @__PURE__ */ jsx(Badge, {
-		size: "sm",
-		color: generateColor(entityType),
-		children: entityType
-	})]
-});
-const ResultSection = ({ pluginId, methodName, taskId }) => {
-	const { data: pluginSummary } = usePluginResult(pluginId, methodName, taskId, { query: { refetchInterval: ({ state }) => {
-		if (state.data == null) return 1e3;
-		return false;
-	} } });
-	const [selected, setSelected] = useState([0]);
-	const [orientation, setOrientation] = useState("vertical");
-	const { mutate: saveResults, isPending: isSaving, isSuccess: isSaved, reset: resetSave } = useSavePluginResults();
-	const { mutate: downloadResults, isPending: isDownloading } = useDownloadPluginResults({ request: { responseType: "blob" } });
-	const options = useMemo(() => (pluginSummary ?? []).map((output) => {
-		return {
-			value: output.result_index,
-			label: entityTypeOf(output),
-			entityType: output.type
-		};
-	}), [pluginSummary]);
-	if (!pluginSummary) return /* @__PURE__ */ jsx(Center, {
-		h: "100%",
-		children: /* @__PURE__ */ jsxs(Stack, {
-			align: "center",
-			gap: "sm",
-			children: [/* @__PURE__ */ jsx(Loader, {}), /* @__PURE__ */ jsx(Text, {
-				c: "dimmed",
-				children: "Running…"
-			})]
-		})
-	});
-	if (pluginSummary.length === 0) return /* @__PURE__ */ jsx(Center, {
-		h: "100%",
-		children: /* @__PURE__ */ jsx(Text, {
-			c: "dimmed",
-			children: "This run produced no results."
-		})
-	});
-	const handleSelectionChange = (value) => {
-		setSelected(value);
-		resetSave();
-	};
-	const handleDownload = () => {
-		downloadResults({
-			pluginId,
-			methodName,
-			taskId,
-			data: { indices: selected }
-		}, { onSuccess: (data) => {
-			const url = URL.createObjectURL(data);
-			const anchor = document.createElement("a");
-			anchor.href = url;
-			anchor.download = `${methodName}_results.zip`;
-			anchor.click();
-			URL.revokeObjectURL(url);
-		} });
-	};
-	const handleSaveToSession = () => {
-		saveResults({
-			pluginId,
-			methodName,
-			taskId,
-			data: { indices: selected }
-		});
-	};
-	return /* @__PURE__ */ jsxs(Stack, {
-		gap: 0,
-		h: "100%",
-		children: [/* @__PURE__ */ jsxs(Group, {
-			px: "sm",
-			py: "xs",
-			wrap: "nowrap",
-			style: { borderBottom: "1px solid var(--mantine-color-default-border)" },
-			children: [options.length > 1 ? /* @__PURE__ */ jsx(MultiSelect, {
-				flex: 1,
-				data: options,
-				onChange: handleSelectionChange,
-				value: selected,
-				placeholder: "Select results to display",
-				searchable: true,
-				clearable: true,
-				comboboxProps: { withinPortal: true },
-				renderOption: ({ option }) => {
-					const output = pluginSummary[Number(option.value)];
-					return /* @__PURE__ */ jsx(ResultLabel, {
-						label: option.label,
-						entityType: output ? entityTypeOf(output) : option.label
-					});
-				}
-			}) : options[0] && /* @__PURE__ */ jsx(ResultLabel, {
-				label: options[0].label,
-				entityType: options[0].entityType,
-				bold: true
-			}), /* @__PURE__ */ jsxs(Group, {
-				gap: "xs",
-				ml: "auto",
-				wrap: "nowrap",
-				children: [
-					selected.length > 1 && /* @__PURE__ */ jsx(Tooltip, {
-						label: orientation === "vertical" ? "Show side by side" : "Stack vertically",
-						children: /* @__PURE__ */ jsx(ActionIcon, {
-							variant: "default",
-							size: "lg",
-							onClick: () => setOrientation((prev) => prev === "vertical" ? "horizontal" : "vertical"),
-							children: orientation === "vertical" ? /* @__PURE__ */ jsx(Columns2Icon, { size: 16 }) : /* @__PURE__ */ jsx(Rows2Icon, { size: 16 })
-						})
-					}),
-					/* @__PURE__ */ jsx(Button, {
-						variant: "default",
-						leftSection: /* @__PURE__ */ jsx(DownloadIcon, { size: 16 }),
-						onClick: handleDownload,
-						loading: isDownloading,
-						disabled: selected.length === 0,
-						children: "Download"
-					}),
-					/* @__PURE__ */ jsx(Button, {
-						variant: "light",
-						color: isSaved ? "green" : void 0,
-						leftSection: isSaved ? /* @__PURE__ */ jsx(CheckIcon, { size: 16 }) : /* @__PURE__ */ jsx(DatabaseIcon, { size: 16 }),
-						onClick: handleSaveToSession,
-						loading: isSaving,
-						disabled: selected.length === 0,
-						children: isSaved ? "Saved" : "Save to session"
-					})
-				]
-			})]
-		}), selected.length === 0 ? /* @__PURE__ */ jsx(Center, {
-			style: { flex: 1 },
-			children: /* @__PURE__ */ jsx(Text, {
-				c: "dimmed",
-				children: "Select one or more results to display."
-			})
-		}) : /* @__PURE__ */ jsx(Splitter, {
-			orientation,
-			lineSize: 4,
-			handleColor: "var(--mantine-color-default-border)",
-			style: {
-				flex: 1,
-				minHeight: 0
-			},
-			children: pluginSummary?.filter(({ result_index }) => selected.includes(result_index)).map((output, index) => /* @__PURE__ */ jsx(Splitter.Pane, {
-				defaultSize: 100 / selected.length,
-				min: "15%",
-				children: /* @__PURE__ */ jsx(Box, {
-					h: "100%",
-					p: "xs",
-					pos: "relative",
-					children: output.type === "ocel" ? /* @__PURE__ */ jsx(OCELView, { ocel: output }) : /* @__PURE__ */ jsx(ResourceView, { resource: output })
-				})
-			}, index))
-		}, `${orientation}:${selected.join(",")}`)]
-	});
-};
-//#endregion
 //#region src/pages/MethodPage.tsx
 const COLLAPSED_SIZES = [0, 100];
 const SPLIT_SIZES = [75, 25];
@@ -602,78 +139,53 @@ const MethodPage = ({ pluginId, methodName }) => {
 		setCurrentTask(taskId);
 		setSizes((prev) => prev[0] === 0 ? SPLIT_SIZES : prev);
 	};
-	return /* @__PURE__ */ jsx(Flex, {
-		direction: "column",
+	return /* @__PURE__ */ jsxs(Splitter, {
+		sizes,
+		onSizeChange: setSizes,
+		lineSize: 4,
+		handleColor: "var(--mantine-color-default-border)",
 		h: "100%",
-		children: /* @__PURE__ */ jsxs(Splitter, {
-			sizes,
-			onSizeChange: setSizes,
-			lineSize: 4,
-			handleColor: "var(--mantine-color-default-border)",
-			px: "xs",
-			style: {
-				flex: 1,
-				minHeight: 0
-			},
-			children: [/* @__PURE__ */ jsx(Splitter.Pane, {
-				defaultSize: 0,
-				min: "20%",
-				collapsible: true,
-				children: /* @__PURE__ */ jsx(Box, {
-					h: "100%",
-					pos: "relative",
-					style: { overflow: "hidden" },
-					children: currentTask ? /* @__PURE__ */ jsx(ResultSection, {
-						pluginId,
-						methodName,
-						taskId: currentTask
-					}) : /* @__PURE__ */ jsx(Center, {
-						h: "100%",
-						p: "md",
-						children: /* @__PURE__ */ jsx(Text, {
+		children: [/* @__PURE__ */ jsx(Splitter.Pane, {
+			defaultSize: 0,
+			min: "20%",
+			collapsible: true,
+			children: /* @__PURE__ */ jsx(ResultSection, { taskId: currentTask })
+		}), /* @__PURE__ */ jsx(Splitter.Pane, {
+			defaultSize: 100,
+			min: "20%",
+			collapsible: true,
+			children: /* @__PURE__ */ jsx(ScrollArea, {
+				h: "100%",
+				type: "auto",
+				children: /* @__PURE__ */ jsxs(Stack, {
+					gap: "sm",
+					p: "md",
+					maw: 640,
+					mx: "auto",
+					w: "100%",
+					children: [
+						/* @__PURE__ */ jsx(Group, {
+							justify: "center",
+							children: /* @__PURE__ */ jsx(PluginBreadcrumbs, {})
+						}),
+						/* @__PURE__ */ jsx(Title, {
+							ta: "center",
+							children: pluginMethod.label ?? methodName
+						}),
+						pluginMethod.description && /* @__PURE__ */ jsx(Text, {
 							c: "dimmed",
 							ta: "center",
-							children: "Run the method to see its results here."
+							children: pluginMethod.description
+						}),
+						/* @__PURE__ */ jsx(PluginInput, {
+							onSuccess: handleSuccess,
+							pluginId,
+							method: pluginMethod
 						})
-					})
-				})
-			}), /* @__PURE__ */ jsx(Splitter.Pane, {
-				defaultSize: 100,
-				min: "20%",
-				collapsible: true,
-				children: /* @__PURE__ */ jsx(ScrollArea, {
-					h: "100%",
-					type: "auto",
-					children: /* @__PURE__ */ jsxs(Stack, {
-						gap: "sm",
-						p: "md",
-						maw: 640,
-						mx: "auto",
-						w: "100%",
-						children: [
-							/* @__PURE__ */ jsx(Group, {
-								justify: "center",
-								children: /* @__PURE__ */ jsx(PluginBreadcrumbs, {})
-							}),
-							/* @__PURE__ */ jsx(Title, {
-								ta: "center",
-								children: pluginMethod.label ?? methodName
-							}),
-							pluginMethod.description && /* @__PURE__ */ jsx(Text, {
-								c: "dimmed",
-								ta: "center",
-								children: pluginMethod.description
-							}),
-							/* @__PURE__ */ jsx(PluginInput, {
-								onSuccess: handleSuccess,
-								pluginId,
-								method: pluginMethod
-							})
-						]
-					})
+					]
 				})
-			})]
-		})
+			})
+		})]
 	});
 };
 //#endregion
@@ -738,111 +250,58 @@ const GenericCard = ({ menuItems, title, description, link, tags, version }) =>
 //#region src/pages/PluginPage.tsx
 const MethodCard = ({ method }) => {
 	const { query } = useRouter();
-	const { data: resourceMeta = {} } = useGetResourceMeta();
-	const { data: extensionMeta = {} } = useGetExtensionMeta();
-	const tags = useMemo(() => {
-		const extensions = Object.values(method.input_ocels ?? {}).map(({ extension }) => extension ? extensionMeta[extension]?.label : void 0);
-		const inputResources = Object.values(method.input_resources ?? {}).map(([resourceName]) => resourceMeta[resourceName]?.label ?? resourceName);
-		const resultNames = (method.results ?? []).filter((result) => result.type === "resource").map((result) => resourceMeta[result.resource_type]?.label ?? result.resource_type);
-		return Array.from(/* @__PURE__ */ new Set([
-			...inputResources,
-			...resultNames,
-			...extensions
-		])).filter((tag) => !!tag);
-	}, [
-		resourceMeta,
-		extensionMeta,
-		method
-	]);
+	const tags = Array.from(new Set([...method.inputs, ...method.outputs].map((io) => io.type === "ocel" ? "OCEL" : io.resource_label)));
 	return /* @__PURE__ */ jsx(GenericCard, {
 		title: method.label ?? method.name,
 		description: method.description ?? "",
-		tags,
 		link: {
 			href: { query: {
 				...query,
 				methodName: method.name
 			} },
 			children: "Run Method"
-		}
+		},
+		tags
 	});
 };
 const PluginPage = ({ pluginId }) => {
 	const { data: plugin } = useGetPlugin(pluginId);
-	const { data: allMethods = [] } = useListDiscoveryMethods();
-	const invalidate = useInvalidate();
-	const onSuccess = () => invalidate(["discoveryMethods"]);
-	const { mutate: disableMethod } = useDisableDiscoveryMethod({ mutation: { onSuccess } });
-	const { mutate: enableMethod } = useEnableDiscoveryMethod({ mutation: { onSuccess } });
-	const discoveryMethods = useMemo(() => allMethods.flatMap((meta) => meta.variants.filter((v) => v.pluginId === pluginId).map((v) => ({
-		name: meta.name,
-		variant: v
-	}))), [allMethods, pluginId]);
-	return /* @__PURE__ */ jsx(Container, {
+	return /* @__PURE__ */ jsxs(Container, {
 		fluid: true,
-		children: /* @__PURE__ */ jsxs(Stack, { children: [
-			/* @__PURE__ */ jsxs(Stack, {
-				gap: 0,
-				align: "center",
-				children: [
-					/* @__PURE__ */ jsx(PluginBreadcrumbs, {}),
-					/* @__PURE__ */ jsxs(Title, {
-						mt: "xs",
-						children: [" ", plugin?.meta.label]
-					}),
-					/* @__PURE__ */ jsx(Text, {
-						c: "dimmed",
-						children: plugin?.meta.description
-					})
-				]
-			}),
-			/* @__PURE__ */ jsx(SimpleGrid, {
-				cols: {
-					base: 1,
-					sm: 2,
-					lg: 4
-				},
-				spacing: {
-					base: 10,
-					sm: "xl"
-				},
-				verticalSpacing: {
-					base: "md",
-					sm: "xl"
-				},
-				children: plugin?.methods.map((method) => /* @__PURE__ */ jsx(MethodCard, {
-					method,
-					pluginId: plugin.id
-				}, method.name))
-			}),
-			discoveryMethods.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Divider, {}), /* @__PURE__ */ jsxs(Stack, {
-				gap: "xs",
-				children: [/* @__PURE__ */ jsx(Title, {
-					order: 4,
-					children: "Discovery Methods"
-				}), discoveryMethods.map(({ name, variant }) => /* @__PURE__ */ jsxs(Group, {
-					justify: "space-between",
-					children: [/* @__PURE__ */ jsxs(Stack, {
-						gap: 0,
-						children: [/* @__PURE__ */ jsx(Text, {
-							fw: 500,
-							children: name
-						}), variant.description && /* @__PURE__ */ jsx(Text, {
-							size: "sm",
-							c: "dimmed",
-							children: variant.description
-						})]
-					}), /* @__PURE__ */ jsx(Switch, {
-						label: "Active in Discovery",
-						checked: variant.enabled ?? true,
-						onChange: (e) => {
-							if (e.currentTarget.checked) enableMethod({ methodId: variant.methodId });
-							else disableMethod({ methodId: variant.methodId });
-						}
-					})]
-				}, variant.methodId))]
-			})] })
-		] })
+		p: "md",
+		children: [/* @__PURE__ */ jsxs(Stack, {
+			gap: 0,
+			align: "center",
+			children: [
+				/* @__PURE__ */ jsx(PluginBreadcrumbs, {}),
+				/* @__PURE__ */ jsxs(Title, {
+					mt: "xs",
+					children: [" ", plugin?.label]
+				}),
+				/* @__PURE__ */ jsx(Text, {
+					c: "dimmed",
+					children: plugin?.description
+				})
+			]
+		}), /* @__PURE__ */ jsx(SimpleGrid, {
+			cols: {
+				base: 1,
+				sm: 2,
+				lg: 4
+			},
+			spacing: {
+				base: 10,
+				sm: "xl"
+			},
+			verticalSpacing: {
+				base: "md",
+				sm: "xl"
+			},
+			children: plugin?.methods.map((method) => /* @__PURE__ */ jsx(MethodCard, {
+				method,
+				pluginId: plugin.id
+			}, method.name))
+		})]
 	});
 };
 //#endregion
@@ -858,7 +317,7 @@ const PluginUploadSection = ({ onSuccess }) => {
 //#endregion
 //#region src/components/PluginCard/PluginCard.tsx
 const PluginCard = ({ plugin }) => {
-	const { description, label, version } = plugin.meta;
+	const { description, label, version } = plugin;
 	const { mutate: deletePlugin } = useDeletePlugin();
 	return /* @__PURE__ */ jsx(GenericCard, {
 		title: label,
@@ -932,6 +391,7 @@ const PluginsOverview = () => {
 	const { data: plugins } = usePlugins();
 	return /* @__PURE__ */ jsxs(Stack, {
 		gap: "md",
+		p: "md",
 		children: [/* @__PURE__ */ jsxs("div", {
 			style: { maxWidth: 720 },
 			children: [/* @__PURE__ */ jsx(Title, {
@@ -1004,6 +464,11 @@ const PluginRoute = () => {
 	}
 	return /* @__PURE__ */ jsx(PluginsOverview, {});
 };
+var pages_default = defineModuleRoute({
+	name: "plugins",
+	label: "Plugins",
+	component: PluginRoute
+});
 //#endregion
 //#region src/index.ts
 var src_default = defineModule({
@@ -1011,11 +476,7 @@ var src_default = defineModule({
 	description: "Run process mining plugins inside ocelescope",
 	label: "Plugins",
 	authors: [{ name: "Öztürk, Görkem-Emre" }],
-	routes: [defineModuleRoute({
-		name: "plugins",
-		label: "Plugins",
-		component: PluginRoute
-	})],
+	routes: [pages_default],
 	icon: PuzzleIcon
 });
 //#endregion

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ocelescope/plugin",
   "type": "module",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "A module for inspections of OCELs",
   "author": "Görkem-Emre Öztürk <goerkem.oeztuerk@rwth-aachen.de>",
   "license": "MIT",
@@ -31,30 +31,24 @@
     "@mantine/core": "^9.5.1",
     "@mantine/hooks": "^9.5.1",
     "@marko19907/string-to-color": "^1.0.2",
-    "@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",
+    "@ocelescope/api-base": "^0.8.0",
+    "@ocelescope/core": "^0.8.0",
+    "@ocelescope/plugin-components": "^0.8.0",
+    "@ocelescope/resources": "^0.8.0",
     "embla-carousel": "^8.6.0",
     "embla-carousel-react": "^8.6.0",
     "lucide-react": "^1.0.0",
-    "next": "16.3.0",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
-    "react-hook-form": "^7.71.2",
-    "@ocelescope/core": "^0.7.0",
-    "@ocelescope/api-base": "^0.7.0",
-    "@ocelescope/resources": "^0.7.0"
+    "next": "16.3.2",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "react-hook-form": "^7.71.2"
   },
   "devDependencies": {
-    "@rjsf/mantine": "^6.8.0",
     "@types/file-saver": "^2.0.7",
-    "@types/node": "^26.2.0",
-    "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.4",
-    "tsdown": "^0.22.14",
+    "@types/node": "^26.6.1",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "tsdown": "^0.23.0",
     "typescript": "^6.0.3"
   },
   "scripts": {