@ocelescope/plugin 0.6.0 → 0.8.0

package/dist/index.js

@@ -1,201 +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, Loader, LoadingOverlay, Menu, Modal, MultiSelect, ScrollArea, Select, SimpleGrid, Splitter, Stack, Switch, Text, ThemeIcon, Title, Tooltip } 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 { 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 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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useDebouncedValue } from "@mantine/hooks";
-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 }) => {
-	const formValues = useWatch({ control });
-	const { data } = useGetComputedValues(pluginId, methodName, provider, {
-		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: {
-		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,
+//#region src/components/Form/index.tsx
+const compact = (record) => Object.fromEntries(Object.entries(record ?? {}).filter(([, value]) => !!value));
+const ConfigurationSection = ({ control, schema, pluginId, methodName, onSubmit }) => {
+	const inputResources = useWatch({
 		control,
-		provider: meta.provider
-	});
-	return /* @__PURE__ */ jsx(SelectComponent, {
-		label: schema.title,
-		description: schema.description,
-		required,
-		value: formData ?? (schema.type === "array" ? [] : 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,
-		required,
-		description,
-		clearable: true,
-		data: [...attributeNames]
-	});
-};
-const TypeSelector = (query) => ({ ocelId, onChange, required, value, isMulti, label, description }) => {
-	const { data = {} } = query(ocelId);
-	return /* @__PURE__ */ jsx(isMulti ? MultiSelect : Select, {
-		value: value ?? (isMulti ? [] : null),
-		label,
-		required,
-		clearable: true,
-		description,
-		onChange,
-		data: Object.keys(data)
-	});
-};
-const IdSelect = (query) => ({ ocelId, isMulti, value, ...rest }) => {
-	const [searchValue, setSearchValue] = useState();
-	const [debouncedSearch] = useDebouncedValue(searchValue, 300);
-	const { data: ids } = query(ocelId, { search: debouncedSearch });
-	return /* @__PURE__ */ jsx(isMulti ? MultiSelect : Select, {
-		searchable: true,
-		searchValue,
-		onSearchChange: (newSearchValue) => setSearchValue(newSearchValue),
-		data: ids?.response,
-		value: value ?? (isMulti ? [] : null),
-		...rest
-	});
-};
-const ocelFieldMap = {
-	event_type: TypeSelector(useEventCounts),
-	object_type: TypeSelector(useObjectCounts),
-	event_attribute: AttributeSelector(useEventAttributes),
-	object_attribute: AttributeSelector(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;
-};
-//#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 };
-			}
-		}
+		name: "input_resources"
 	});
-	return unflatten(uiSchema);
-};
-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,
-		pluginId,
-		control
-	}), [
-		methodName,
-		pluginId,
-		control
-	]);
 	return /* @__PURE__ */ jsx(Controller, {
 		control,
 		name: "input",
-		render: ({ field }) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Form, {
-			schema: {
-				...schema,
-				title: ""
-			},
+		render: ({ field }) => /* @__PURE__ */ jsx(PluginForm, {
+			pluginId,
+			methodName,
+			schema,
+			inputResources,
 			formData: field.value,
-			validator,
-			uiSchema,
-			fields: {
-				...fields,
-				...computedFields
-			},
-			onChange: (data) => {
-				field.onChange(data.formData);
-			},
+			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
 	}))(), [
@@ -206,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
@@ -272,7 +113,7 @@ const PluginBreadcrumbs = () => {
 				pluginId: plugin?.id,
 				methodName: void 0
 			} },
-			children: plugin?.meta.label
+			children: plugin?.label
 		}),
 		pluginMethod && /* @__PURE__ */ jsx(Anchor, {
 			component: Link,
@@ -286,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];
@@ -478,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
@@ -614,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
@@ -734,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,
@@ -808,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, {
@@ -880,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({
@@ -887,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.6.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",
@@ -27,40 +27,29 @@
     "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",
-    "@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",
-    "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",
-    "react-hook-form": "^7.71.2",
-    "@ocelescope/api-base": "^0.6.0",
-    "@ocelescope/resources": "^0.6.0",
-    "@ocelescope/core": "^0.6.0"
+    "next": "16.3.2",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "react-hook-form": "^7.71.2"
   },
   "devDependencies": {
-    "@apidevtools/json-schema-ref-parser": "^15.5.0",
-    "@rjsf/mantine": "^6.7.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.6.1",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "tsdown": "^0.23.0",
+    "typescript": "^6.0.3"
   },
   "scripts": {
     "build": "tsdown",