@ocelescope/plugin 0.1.0

package/dist/index.js

@@ -0,0 +1,833 @@
+import { BarList, FileDropzone, OcelSelect, defineModule, defineModuleRoute, env, getModuleRoute } 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, Flex, Group, Loader, LoadingOverlay, Menu, Modal, MultiSelect, ScrollArea, Select, SimpleGrid, Splitter, Stack, Text, ThemeIcon, Title, Tooltip } from "@mantine/core";
+import { useDeletePlugin, useDownloadPluginResults, useEventAttributes, useEventCounts, useEventIds, useGetComputedValues, useGetExtensionMeta, useGetPlugin, useGetPluginMethod, useGetResourceMeta, 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 { 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,
+		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 };
+			}
+		}
+	});
+	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: ""
+			},
+			formData: field.value,
+			validator,
+			uiSchema,
+			fields: {
+				...fields,
+				...computedFields
+			},
+			onChange: (data) => {
+				field.onChange(data.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])),
+		formData: {}
+	} });
+	const onSubmit = useCallback(() => handleSubmit((data) => runPlugin({
+		data,
+		methodName: method.name,
+		pluginId
+	}))(), [
+		handleSubmit,
+		pluginId,
+		method,
+		runPlugin
+	]);
+	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"
+			})
+		]
+	});
+};
+//#endregion
+//#region src/components/PluginBreadcrumbs/PluginBreadcrumbs.tsx
+const PluginBreadcrumbs = () => {
+	const { query } = useRouter();
+	const { pluginId, methodName } = query;
+	const { data: plugin } = useGetPlugin(pluginId ?? "", { query: { enabled: !!pluginId } });
+	const pluginMethod = useMemo(() => plugin?.methods.find(({ name }) => name === methodName), [plugin, methodName]);
+	return /* @__PURE__ */ jsxs(Breadcrumbs, { children: [
+		/* @__PURE__ */ jsx(Anchor, {
+			component: Link,
+			href: { query: {
+				...query,
+				pluginId: void 0,
+				methodName: void 0
+			} },
+			children: "Plugins"
+		}),
+		plugin && /* @__PURE__ */ jsx(Anchor, {
+			component: Link,
+			href: { query: {
+				...query,
+				pluginId: plugin?.id,
+				methodName: void 0
+			} },
+			children: plugin?.meta.label
+		}),
+		pluginMethod && /* @__PURE__ */ jsx(Anchor, {
+			component: Link,
+			href: { query: {
+				...query,
+				pluginId: plugin?.id,
+				methodName: pluginMethod.name
+			} },
+			children: pluginMethod.label ?? pluginMethod.name
+		})
+	] });
+};
+//#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];
+const MethodPage = ({ pluginId, methodName }) => {
+	const { data: pluginMethod } = useGetPluginMethod(pluginId, methodName);
+	const [currentTask, setCurrentTask] = useState();
+	const [sizes, setSizes] = useState(COLLAPSED_SIZES);
+	if (!pluginMethod) return /* @__PURE__ */ jsx(LoadingOverlay, { visible: true });
+	const handleSuccess = (taskId) => {
+		setCurrentTask(taskId);
+		setSizes((prev) => prev[0] === 0 ? SPLIT_SIZES : prev);
+	};
+	return /* @__PURE__ */ jsx(Flex, {
+		direction: "column",
+		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, {
+							c: "dimmed",
+							ta: "center",
+							children: "Run the method to see its results here."
+						})
+					})
+				})
+			}), /* @__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
+//#region src/components/PluginCard/GenericCard.tsx
+const GenericCard = ({ menuItems, title, description, link, tags, version }) => {
+	return /* @__PURE__ */ jsxs(Card, {
+		shadow: "sm",
+		padding: "sm",
+		radius: "md",
+		withBorder: true,
+		h: "100%",
+		children: [
+			/* @__PURE__ */ jsxs(Group, {
+				justify: "space-between",
+				align: "start",
+				wrap: "nowrap",
+				children: [/* @__PURE__ */ jsxs(Stack, {
+					gap: "xs",
+					mb: "xs",
+					children: [tags && /* @__PURE__ */ jsx(Group, {
+						gap: "xs",
+						children: tags.map((tag) => /* @__PURE__ */ jsx(Badge, {
+							size: "sm",
+							color: generateColor(tag),
+							children: tag
+						}, tag))
+					}), /* @__PURE__ */ jsxs(Text, {
+						fw: 500,
+						children: [title, version && /* @__PURE__ */ jsx(Text, {
+							ml: "xs",
+							c: "dimmed",
+							component: "span",
+							children: `v${version}`
+						})]
+					})]
+				}), menuItems && /* @__PURE__ */ jsxs(Menu, {
+					width: 200,
+					position: "left",
+					children: [/* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(ActionIcon, {
+						variant: "transparent",
+						size: "sm",
+						children: /* @__PURE__ */ jsx(EllipsisVertical, {})
+					}) }), /* @__PURE__ */ jsx(Menu.Dropdown, { children: menuItems })]
+				})]
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				size: "sm",
+				mb: "xs",
+				c: "dimmed",
+				children: description
+			}),
+			link && /* @__PURE__ */ jsx(Button, {
+				mt: "auto",
+				component: Link,
+				variant: "outline",
+				...link
+			})
+		]
+	});
+};
+//#endregion
+//#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
+	]);
+	return /* @__PURE__ */ jsx(GenericCard, {
+		title: method.label ?? method.name,
+		description: method.description ?? "",
+		tags,
+		link: {
+			href: { query: {
+				...query,
+				methodName: method.name
+			} },
+			children: "Run Method"
+		}
+	});
+};
+const PluginPage = ({ pluginId }) => {
+	const { data: plugin } = useGetPlugin(pluginId);
+	return /* @__PURE__ */ jsx(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))
+		})] })
+	});
+};
+//#endregion
+//#region src/components/PluginUploadSection/PluginUploadSection.tsx
+const PluginUploadSection = ({ onSuccess }) => {
+	const { mutateAsync: upload } = useUpload({ mutation: { onSuccess } });
+	return /* @__PURE__ */ jsx(FileDropzone, {
+		onUpload: async (data) => await upload({ data: { files: data } }),
+		content: { description: "Drag'n'drop your Plugins to upload." },
+		accept: ["application/x-zip-compressed", "application/zip"]
+	});
+};
+//#endregion
+//#region src/components/PluginCard/PluginCard.tsx
+const PluginCard = ({ plugin }) => {
+	const { description, label, version } = plugin.meta;
+	const { mutate: deletePlugin } = useDeletePlugin();
+	return /* @__PURE__ */ jsx(GenericCard, {
+		title: label,
+		description: description ?? "",
+		version,
+		menuItems: /* @__PURE__ */ jsx(Menu.Item, {
+			leftSection: /* @__PURE__ */ jsx(Trash2Icon, {}),
+			color: "red",
+			fw: "bold",
+			onClick: () => {
+				deletePlugin({ pluginId: plugin.id });
+			},
+			children: "Delete"
+		}),
+		link: {
+			href: getModuleRoute({
+				routeName: "plugins",
+				moduleName: "plugins",
+				query: { pluginId: plugin.id }
+			}),
+			children: "View Plugin"
+		}
+	});
+};
+const UploadPluginCard = () => {
+	const [isModalOpen, setIsModalOpen] = useState(false);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Modal, {
+		title: /* @__PURE__ */ jsx(Text, {
+			size: "h3",
+			children: "Upload"
+		}),
+		opened: isModalOpen,
+		onClose: () => setIsModalOpen(false),
+		size: "xl",
+		children: /* @__PURE__ */ jsx(PluginUploadSection, { onSuccess: () => setIsModalOpen(false) })
+	}), /* @__PURE__ */ jsx(Card, {
+		shadow: "sm",
+		padding: "lg",
+		radius: "md",
+		withBorder: true,
+		h: "100%",
+		onClick: () => setIsModalOpen(true),
+		style: { cursor: "pointer" },
+		children: /* @__PURE__ */ jsxs(Stack, {
+			align: "center",
+			justify: "center",
+			h: "100%",
+			children: [/* @__PURE__ */ jsx(ThemeIcon, {
+				size: "xl",
+				variant: "transparent",
+				children: /* @__PURE__ */ jsx(UploadIcon, { size: 50 })
+			}), /* @__PURE__ */ jsx(Text, {
+				fw: "bold",
+				c: "blue.6",
+				children: "Upload Plugin"
+			})]
+		})
+	})] });
+};
+//#endregion
+//#region src/pages/PluginsOverview.tsx
+const PluginsOverview = () => {
+	const { data: plugins } = usePlugins();
+	return /* @__PURE__ */ jsxs(Stack, {
+		gap: "md",
+		children: [/* @__PURE__ */ jsxs("div", {
+			style: { maxWidth: 720 },
+			children: [/* @__PURE__ */ jsx(Title, {
+				order: 2,
+				children: "Plugin Overview"
+			}), /* @__PURE__ */ jsxs(Text, {
+				c: "dimmed",
+				size: "sm",
+				mt: 4,
+				children: [
+					"Upload plugins to extend Ocelescope with custom process mining functionality. Plugins are packaged as .zip files. Documentation for writing your own plugins is available on the",
+					" ",
+					/* @__PURE__ */ jsx(Anchor, {
+						href: env.projectPage,
+						target: "_blank",
+						rel: "noopener noreferrer",
+						children: "project page"
+					}),
+					"."
+				]
+			})]
+		}), plugins && plugins.length === 0 ? /* @__PURE__ */ jsx(PluginUploadSection, {}) : /* @__PURE__ */ jsxs(SimpleGrid, {
+			cols: {
+				base: 1,
+				sm: 2,
+				md: 3,
+				lg: 3
+			},
+			spacing: {
+				base: 10,
+				sm: "xl"
+			},
+			verticalSpacing: {
+				base: "md",
+				sm: "xl"
+			},
+			children: [plugins?.map((plugin) => /* @__PURE__ */ jsx(PluginCard, { plugin }, plugin.id)), /* @__PURE__ */ jsx(UploadPluginCard, {})]
+		})]
+	});
+};
+//#endregion
+//#region src/pages/index.tsx
+const PluginRoute = () => {
+	const { query } = useRouter();
+	const { pluginId, methodName } = query;
+	if (pluginId) {
+		if (methodName) return /* @__PURE__ */ jsx(MethodPage, {
+			methodName,
+			pluginId
+		});
+		return /* @__PURE__ */ jsx(PluginPage, { pluginId });
+	}
+	return /* @__PURE__ */ jsx(PluginsOverview, {});
+};
+//#endregion
+//#region src/index.ts
+var src_default = defineModule({
+	name: "plugins",
+	description: "Run process mining plugins inside ocelescope",
+	label: "Plugins",
+	authors: [{ name: "Öztürk, Görkem-Emre" }],
+	routes: [defineModuleRoute({
+		name: "plugins",
+		label: "Plugins",
+		component: PluginRoute
+	})],
+	icon: PuzzleIcon
+});
+//#endregion
+export { src_default as default };