@ocelescope/discovery 0.7.0 → 0.8.0

package/dist/index.js

@@ -1,495 +1,151 @@
 import { defineModule, defineModuleRoute, useCurrentOcel } from "@ocelescope/core";
-import { BookmarkIcon, ChartNetwork, SettingsIcon } from "lucide-react";
-import { ActionIcon, Alert, Box, Card, Center, Divider, Drawer, Input, LoadingOverlay, MultiSelect, NumberInput, Select, Slider, Stack, Text, Tooltip } from "@mantine/core";
-import { useLocalStorage } from "@mantine/hooks";
-import { useCreateDiscoveryTask, useDiscoveryTask, useEventCounts, useListDiscoveryFilters, useListDiscoveryMethods, useObjectCounts, useSaveDiscovery } from "@ocelescope/api-base";
-import { Visualization } from "@ocelescope/resources";
-import { memo, useEffect, useMemo, useState } from "react";
-import { create } from "zustand";
-import { persist } from "zustand/middleware";
-import validator from "@rjsf/validator-ajv8";
-import dynamic from "next/dynamic.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/stores/discoveryStore.ts
-const EMPTY = {
-	selectedMethodId: null,
-	formDataByMethod: {},
-	filters: [],
-	filtersInitialized: false
-};
-const updateOcel = (state, ocelId, patch) => ({ byOcel: {
-	...state.byOcel,
-	[ocelId]: {
-		...state.byOcel[ocelId] ?? EMPTY,
-		...patch
-	}
-} });
-const useDiscoveryStore = create()(persist((set) => ({
-	byOcel: {},
-	setSelectedMethodId: (ocelId, methodId) => set((s) => updateOcel(s, ocelId, { selectedMethodId: methodId })),
-	setFormData: (ocelId, methodId, data) => set((s) => {
-		const current = s.byOcel[ocelId] ?? EMPTY;
-		return updateOcel(s, ocelId, { formDataByMethod: {
-			...current.formDataByMethod,
-			[methodId]: data
-		} });
-	}),
-	setFilters: (ocelId, filters) => set((s) => updateOcel(s, ocelId, { filters })),
-	initializeFilters: (ocelId, filters) => set((s) => {
-		if (s.byOcel[ocelId]?.filtersInitialized) return s;
-		return updateOcel(s, ocelId, {
-			filters,
-			filtersInitialized: true
-		});
-	})
-}), { name: "ocelescope:discovery" }));
-const selectOcelFormState = (ocelId) => (s) => s.byOcel[ocelId] ?? EMPTY;
-//#endregion
-//#region src/utils/discoveryState.ts
-const getInitialFormData = (schema) => {
-	const initial = {};
-	for (const [name, property] of Object.entries(schema?.properties ?? {})) {
-		if (property.default !== void 0) {
-			initial[name] = property.default;
-			continue;
-		}
-		if (property.type === "array") initial[name] = [];
-	}
-	return initial;
-};
-const normalizeFormData = (formData) => Object.fromEntries(Object.entries(formData).filter(([_, value]) => {
-	if (value === void 0 || value === null || value === "") return false;
-	if (Array.isArray(value) && value.length === 0) return false;
-	return true;
-}));
-//#endregion
-//#region src/components/DiscoveryForm.tsx
-const Form = dynamic(() => import("@rjsf/mantine").then((m) => m.Form), { ssr: false });
-const MantineSliderWidget = ({ value, onChange, schema, label, required }) => {
-	const min = schema.minimum ?? schema.exclusiveMinimum;
-	const max = schema.maximum ?? schema.exclusiveMaximum;
-	const description = schema.description;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsx(Input.Label, {
-			required,
-			children: label
-		}),
-		description && /* @__PURE__ */ jsx(Input.Description, { children: description }),
-		/* @__PURE__ */ jsx(NumberInput, {
-			mt: "5px",
-			min,
-			max,
-			step: 1e-4,
-			decimalScale: 4,
-			hideControls: true,
-			value: typeof value === "number" ? value : schema.default ?? min,
-			onChange: (v) => typeof v === "number" && onChange(v)
-		}),
-		/* @__PURE__ */ jsx(Slider, {
-			min,
-			max,
-			step: 1e-4,
-			label: (v) => v.toFixed(4),
-			value: typeof value === "number" ? value : schema.default ?? min,
-			onChange
-		})
-	] });
-};
-const WIDGETS = { "mantine-slider": MantineSliderWidget };
-const FieldTemplate = ({ children, errors, help, hidden }) => {
-	if (hidden) return /* @__PURE__ */ jsx("div", {
-		style: { display: "none" },
-		children
-	});
-	return /* @__PURE__ */ jsxs("div", { children: [
-		children,
-		errors,
-		help
-	] });
-};
-const DescriptionFieldTemplate = ({ id, description }) => description ? /* @__PURE__ */ jsx(Input.Description, {
-	id,
-	mt: -8,
-	mb: 8,
-	children: description
-}) : null;
-const TEMPLATES = {
-	DescriptionFieldTemplate,
-	FieldTemplate
-};
-const UI_SCHEMA_BASE = { "ui:submitButtonOptions": { norender: true } };
-const buildUiSchema = (schema) => {
-	const uiSchema = { ...UI_SCHEMA_BASE };
-	for (const [key, prop] of Object.entries(schema.properties ?? {})) if (prop.fieldType) uiSchema[key] = { "ui:field": prop.fieldType };
-	else if ((prop.type === "number" || prop.type === "integer") && (prop.minimum !== void 0 || prop.exclusiveMinimum !== void 0) && (prop.maximum !== void 0 || prop.exclusiveMaximum !== void 0)) uiSchema[key] = { "ui:widget": "mantine-slider" };
-	return uiSchema;
-};
-const makeOcelFields = (eventTypeOptions, objectTypeOptions) => {
-	const OcelTypeField = (options) => memo(({ schema, formData, onChange, required, fieldPathId: { path } }) => {
-		return /* @__PURE__ */ jsx(schema.type === "array" ? MultiSelect : Select, {
-			label: schema.title,
-			description: schema.description,
-			required,
-			value: formData ?? (schema.type === "array" ? [] : null),
-			onChange: (v) => onChange(v, path),
-			data: options,
-			clearable: true,
-			searchable: true
-		});
-	});
+import { ChartNetwork, Settings } from "lucide-react";
+import { ActionIcon, Box, LoadingOverlay, ScrollArea, Select, Splitter, Stack, Text, Tooltip } from "@mantine/core";
+import { useDebouncedValue } from "@mantine/hooks";
+import { usePlugins, useRunPlugin } from "@ocelescope/api-base";
+import { PluginForm, ResultSection } from "@ocelescope/plugin-components";
+import { useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/hooks/useDiscoveryMethods.tsx
+const useDiscoveryMethods = () => {
+	const { data: plugins, isLoading } = usePlugins({ include_base: true });
+	const discoveryGroups = useMemo(() => {
+		return (plugins ?? []).map(({ methods, ...plugin }) => ({
+			...plugin,
+			methods: methods.filter(({ inputs, outputs }) => inputs.length === 1 && outputs.length === 1 && inputs[0]?.type === "ocel" && outputs[0]?.type === "resource").map(({ outputs, inputs, ...rest }) => ({
+				...rest,
+				id: `${plugin.id}:${rest.name}`,
+				input: inputs[0],
+				pluginId: plugin.id,
+				output: outputs[0]
+			}))
+		}));
+	}, [plugins]);
 	return {
-		event_type: OcelTypeField(eventTypeOptions),
-		object_type: OcelTypeField(objectTypeOptions)
+		discoveryGroups,
+		discoveryMethods: useMemo(() => discoveryGroups.flatMap(({ methods }) => methods), [discoveryGroups]),
+		isLoading
 	};
 };
-const DiscoveryForm = ({ schema, formData, onChange, eventTypeOptions, objectTypeOptions }) => {
-	const uiSchema = useMemo(() => buildUiSchema(schema), [schema]);
-	const fields = useMemo(() => makeOcelFields(eventTypeOptions, objectTypeOptions), [eventTypeOptions, objectTypeOptions]);
-	return /* @__PURE__ */ jsx(Form, {
-		schema: {
-			...schema,
-			title: ""
-		},
-		formData,
-		validator,
-		uiSchema,
-		fields,
-		widgets: WIDGETS,
-		templates: TEMPLATES,
-		onChange: (data) => onChange(data.formData ?? {})
-	});
-};
 //#endregion
-//#region src/components/DiscoveryFiltersSection.tsx
-const DiscoveryFiltersSection = ({ availableFilters, filters, onFiltersChange, eventTypeOptions, objectTypeOptions }) => {
-	const handleChange = (filterName, data) => {
-		if (filters.some((f) => f.name === filterName)) onFiltersChange(filters.map((f) => f.name === filterName ? {
-			...f,
-			payload: data
-		} : f));
-		else onFiltersChange([...filters, {
-			name: filterName,
-			payload: data
-		}]);
-	};
-	return /* @__PURE__ */ jsxs(Stack, {
-		gap: "xs",
-		children: [/* @__PURE__ */ jsx(Text, {
-			fw: 500,
-			children: "Filters"
-		}), availableFilters.map((filterSchema) => {
-			const schema = filterSchema.json_schema;
-			const payload = filters.find((f) => f.name === filterSchema.name)?.payload ?? {};
-			return /* @__PURE__ */ jsxs(Card, {
-				withBorder: true,
-				padding: "sm",
-				radius: "sm",
-				children: [/* @__PURE__ */ jsx(Text, {
-					size: "sm",
-					fw: 500,
-					mb: "xs",
-					children: filterSchema.name
-				}), /* @__PURE__ */ jsx(DiscoveryForm, {
-					schema,
-					formData: payload,
-					onChange: (data) => handleChange(filterSchema.name, data),
-					eventTypeOptions,
-					objectTypeOptions
-				})]
-			}, filterSchema.name);
-		})]
+//#region src/components/DiscoveryPage.tsx
+const uiSchema = { "ui:submitButtonOptions": { norender: true } };
+const DiscoveryConfiguration = ({ method, ocelId, onSuccess }) => {
+	const [input, setInput] = useState({});
+	const [debouncedInput] = useDebouncedValue(input, 1e3);
+	const ref = useRef(null);
+	const { mutate } = useRunPlugin({ mutation: { onSuccess } });
+	const run = useEffectEvent((data) => {
+		if (method.configuration_schema && ref.current?.validate(data).errors.length !== 0) return;
+		mutate({
+			methodName: method.name,
+			pluginId: method.pluginId,
+			data: {
+				input_resources: { [method.input.name]: ocelId },
+				input: data
+			}
+		});
+	});
+	useEffect(() => {
+		run(debouncedInput);
+	}, [debouncedInput]);
+	return method.configuration_schema && /* @__PURE__ */ jsx(ScrollArea, {
+		h: "100%",
+		offsetScrollbars: true,
+		children: /* @__PURE__ */ jsx(PluginForm, {
+			methodName: method.name,
+			pluginId: method.pluginId,
+			schema: method.configuration_schema,
+			inputResources: { [method.input.name]: ocelId },
+			onChange: ({ formData }) => setInput(formData),
+			formData: input,
+			ref,
+			uiSchema
+		})
 	});
 };
-//#endregion
-//#region src/components/DiscoverySettingsContent.tsx
-const DiscoverySettingsContent = ({ methods, selectedMethodId, setSelectedMethodId, selectedMethod, selectedSchema, activeFormData, setActiveFormData, eventCounts, objectCounts, errorMessage, availableFilters, filters, setFilters }) => {
-	const selectedVariants = selectedMethod?.variants ?? [];
+const DiscoverySideBar = ({ onSuccess }) => {
+	const { discoveryGroups, discoveryMethods, isLoading } = useDiscoveryMethods();
+	const { id } = useCurrentOcel();
+	const [currentMethod, setCurrentMethod] = useState(void 0);
+	useEffect(() => {
+		if (discoveryMethods.length > 0 && !currentMethod) setCurrentMethod(discoveryMethods[0]);
+	}, [discoveryMethods]);
 	return /* @__PURE__ */ jsxs(Stack, {
-		gap: "xl",
+		maw: 400,
+		px: "md",
+		pt: "xs",
+		h: "100%",
 		children: [
-			/* @__PURE__ */ jsxs(Stack, {
-				gap: "xs",
-				children: [
-					/* @__PURE__ */ jsx(Select, {
-						label: "Discovery Method",
-						value: selectedMethod?.name ?? null,
-						onChange: (name) => {
-							setSelectedMethodId(methods.find((m) => m.name === name)?.variants[0]?.methodId ?? null);
-						},
-						data: methods.map((m) => ({
-							value: m.name,
-							label: m.name
-						})),
-						allowDeselect: false
-					}),
-					selectedVariants.find((v) => v.methodId === selectedMethodId)?.description && /* @__PURE__ */ jsx(Text, {
-						size: "sm",
-						c: "dimmed",
-						children: selectedVariants.find((v) => v.methodId === selectedMethodId)?.description
-					}),
-					selectedVariants.length > 1 && /* @__PURE__ */ jsx(Select, {
-						label: "Output Format",
-						value: selectedMethodId,
-						onChange: setSelectedMethodId,
-						data: selectedVariants.map((v) => ({
-							value: v.methodId,
-							label: v.resourceType
-						})),
-						allowDeselect: false
-					}),
-					/* @__PURE__ */ jsx(DiscoveryForm, {
-						schema: selectedSchema,
-						formData: activeFormData,
-						onChange: setActiveFormData,
-						eventTypeOptions: Object.keys(eventCounts),
-						objectTypeOptions: Object.keys(objectCounts)
-					})
-				]
+			/* @__PURE__ */ jsx(Select, {
+				label: "Discovery Method",
+				searchable: true,
+				value: currentMethod?.id,
+				onChange: (newMethod) => setCurrentMethod(discoveryMethods.find(({ id }) => id === newMethod)),
+				data: discoveryGroups.filter(({ methods }) => methods.length > 0).map(({ label, methods }) => ({
+					group: label,
+					items: methods.map(({ label, id }) => ({
+						value: id,
+						label
+					}))
+				})),
+				loading: isLoading
 			}),
-			/* @__PURE__ */ jsx(Divider, {}),
-			/* @__PURE__ */ jsx(DiscoveryFiltersSection, {
-				availableFilters,
-				filters,
-				onFiltersChange: setFilters,
-				eventTypeOptions: Object.keys(eventCounts),
-				objectTypeOptions: Object.keys(objectCounts)
+			currentMethod && /* @__PURE__ */ jsx(Text, {
+				c: "dimmed",
+				children: currentMethod.description
 			}),
-			errorMessage && /* @__PURE__ */ jsx(Alert, {
-				color: "red",
-				title: "Discovery failed",
-				children: errorMessage
+			/* @__PURE__ */ jsxs(Box, {
+				pos: "relative",
+				flex: 1,
+				mih: 0,
+				children: [/* @__PURE__ */ jsx(LoadingOverlay, { visible: isLoading }), currentMethod && id && /* @__PURE__ */ jsx(DiscoveryConfiguration, {
+					method: currentMethod,
+					ocelId: id,
+					onSuccess
+				}, `${currentMethod.id}:${id}`)]
 			})
 		]
 	});
 };
-//#endregion
-//#region src/components/DiscoveryPage.tsx
-const PANEL_OPEN_KEY = "ocelescope:discovery:panel-open";
-const DiscoveryPageContent = ({ ocelId }) => {
-	const { selectedMethodId, formDataByMethod, filters, filtersInitialized } = useDiscoveryStore(selectOcelFormState(ocelId));
-	const setSelectedMethodId = useDiscoveryStore((s) => s.setSelectedMethodId);
-	const setFormData = useDiscoveryStore((s) => s.setFormData);
-	const setFiltersInStore = useDiscoveryStore((s) => s.setFilters);
-	const initializeFilters = useDiscoveryStore((s) => s.initializeFilters);
-	const [taskId, setTaskId] = useState();
-	const [savedTaskId, setSavedTaskId] = useState();
-	const [submitError, setSubmitError] = useState();
-	const [panelOpen, setPanelOpen] = useLocalStorage({
-		key: PANEL_OPEN_KEY,
-		defaultValue: true
-	});
-	const { data: rawMethods = [], isLoading: isMethodsLoading, error: methodsError } = useListDiscoveryMethods();
-	const methods = useMemo(() => rawMethods.map((m) => ({
-		...m,
-		variants: m.variants.filter((v) => v.enabled)
-	})).filter((m) => m.variants.length), [rawMethods]);
-	const { data: availableFilters = [] } = useListDiscoveryFilters();
-	const { data: eventCounts = {} } = useEventCounts(ocelId, void 0, { query: { enabled: true } });
-	const { data: objectCounts = {} } = useObjectCounts(ocelId, void 0, { query: { enabled: true } });
-	useEffect(() => {
-		if (filtersInitialized || availableFilters.length === 0) return;
-		initializeFilters(ocelId, availableFilters.map((f) => ({
-			name: f.name,
-			payload: getInitialFormData(f.json_schema)
-		})));
-	}, [
-		filtersInitialized,
-		availableFilters,
-		ocelId,
-		initializeFilters
-	]);
-	useEffect(() => {
-		if (!selectedMethodId || isMethodsLoading) return;
-		if (!methods.flatMap((m) => m.variants.map((v) => v.methodId)).includes(selectedMethodId)) setSelectedMethodId(ocelId, null);
-	}, [
-		methods,
-		selectedMethodId,
-		isMethodsLoading,
-		ocelId,
-		setSelectedMethodId
-	]);
-	useEffect(() => {
-		if (selectedMethodId || methods.length === 0) return;
-		setSelectedMethodId(ocelId, methods.flatMap((m) => m.variants).find((v) => v.resourceType === "DirectlyFollowsGraph")?.methodId ?? methods[0]?.variants[0]?.methodId ?? null);
-	}, [
-		methods,
-		selectedMethodId,
-		ocelId,
-		setSelectedMethodId
-	]);
-	const selectedMethod = useMemo(() => methods.find((m) => m.variants.some((v) => v.methodId === selectedMethodId)) ?? null, [methods, selectedMethodId]);
-	const selectedSchema = useMemo(() => selectedMethod?.variants.find((v) => v.methodId === selectedMethodId) ?? null, [selectedMethod, selectedMethodId])?.inputSchema ?? {};
-	useEffect(() => {
-		if (!selectedMethodId || !selectedMethod) return;
-		if (formDataByMethod[selectedMethodId]) return;
-		setFormData(ocelId, selectedMethodId, getInitialFormData(selectedSchema));
-	}, [
-		selectedMethod,
-		selectedMethodId,
-		selectedSchema,
-		formDataByMethod,
-		ocelId,
-		setFormData
-	]);
-	const activeFormData = selectedMethodId ? formDataByMethod[selectedMethodId] ?? {} : {};
-	const { mutate: runDiscovery, isPending: isSubmittingDiscovery } = useCreateDiscoveryTask({ mutation: {
-		onSuccess: (newTaskId) => {
-			setSubmitError(void 0);
-			setTaskId(newTaskId);
-		},
-		onError: (error) => {
-			setSubmitError(error instanceof Error ? error.message : "Discovery failed");
-		}
-	} });
-	const { data: task, error: taskError } = useDiscoveryTask(taskId ?? "", { query: {
-		enabled: !!taskId,
-		refetchInterval: ({ state }) => {
-			if (state.data?.state === "PENDING" || state.data?.state === "STARTED") return 1e3;
-			return false;
-		}
-	} });
-	const { mutate: saveDiscovery, isPending: isSaving } = useSaveDiscovery({ mutation: { onSuccess: (_data, { taskId: savedId }) => setSavedTaskId(savedId) } });
-	const isSaved = !!taskId && savedTaskId === taskId;
-	const requestPayload = useMemo(() => normalizeFormData(activeFormData), [activeFormData]);
-	useEffect(() => {
-		if (!selectedMethodId) return;
-		const timeoutId = window.setTimeout(() => {
-			runDiscovery({
-				ocelId,
-				data: {
-					methodId: selectedMethodId,
-					parameters: requestPayload,
-					filters
-				}
-			});
-		}, 650);
-		return () => window.clearTimeout(timeoutId);
-	}, [
-		ocelId,
-		runDiscovery,
-		useMemo(() => JSON.stringify({
-			selectedMethodId,
-			requestPayload,
-			ocelId,
-			filters
-		}), [
-			ocelId,
-			requestPayload,
-			selectedMethodId,
-			filters
-		]),
-		requestPayload,
-		selectedMethodId,
-		filters
-	]);
-	const isDiscovering = isSubmittingDiscovery || task?.state === "PENDING" || task?.state === "STARTED";
-	const errorMessage = submitError || (methodsError instanceof Error ? methodsError.message : void 0) || (taskError instanceof Error ? taskError.message : void 0) || (task?.state === "FAILURE" ? "The backend discovery task failed." : void 0);
-	return /* @__PURE__ */ jsxs(Box, {
-		pos: "relative",
+const DiscoveryPage = () => {
+	const [discoveryTask, setDiscoveryTask] = useState(void 0);
+	const splitterRef = useRef(null);
+	return /* @__PURE__ */ jsxs(Splitter, {
+		splitterRef,
+		withHandle: false,
 		h: "100%",
-		style: { overflow: "hidden" },
-		children: [
-			task?.state === "SUCCESS" ? /* @__PURE__ */ jsx(Box, {
-				h: "100%",
-				p: "sm",
-				children: /* @__PURE__ */ jsx(Visualization, {
-					visualization: task.visualization,
-					menuItems: [{
-						icon: /* @__PURE__ */ jsx(BookmarkIcon, { style: {
-							width: 16,
-							height: 16,
-							maxWidth: "none",
-							maxHeight: "none",
-							stroke: isSaved ? "var(--mantine-color-green-6)" : "currentColor",
-							fill: isSaved ? "var(--mantine-color-green-6)" : "none"
-						} }),
-						label: isSaved ? "Saved" : "Save",
-						onClick: () => {
-							if (taskId && !isSaving && taskId !== savedTaskId) saveDiscovery({ taskId });
-						}
-					}]
-				})
-			}) : /* @__PURE__ */ jsx(Center, {
-				h: "100%",
-				children: /* @__PURE__ */ jsx(Text, {
-					c: "dimmed",
-					ta: "center",
-					children: isDiscovering ? "Discovering visualization..." : "The discovery preview will appear here."
-				})
-			}),
-			!panelOpen && /* @__PURE__ */ jsx(Tooltip, {
-				label: "Open settings",
-				position: "left",
-				withArrow: true,
-				children: /* @__PURE__ */ jsx(ActionIcon, {
-					variant: "default",
-					size: "lg",
-					radius: "md",
-					onClick: () => setPanelOpen(true),
-					style: {
-						position: "absolute",
-						top: 12,
-						right: 12,
-						zIndex: 5
-					},
-					children: /* @__PURE__ */ jsx(SettingsIcon, { size: 16 })
-				})
-			}),
-			/* @__PURE__ */ jsx(LoadingOverlay, {
-				visible: isMethodsLoading || isDiscovering,
-				zIndex: 100
-			}),
-			/* @__PURE__ */ jsx(Drawer, {
-				opened: panelOpen,
-				onClose: () => setPanelOpen(false),
-				position: "right",
-				title: "Discovery settings",
-				size: 380,
-				withOverlay: false,
-				lockScroll: false,
-				trapFocus: false,
-				returnFocus: false,
-				withinPortal: false,
-				styles: {
-					root: {
-						position: "absolute",
-						inset: 0,
-						pointerEvents: "none"
-					},
-					inner: {
-						position: "absolute",
-						inset: 0,
-						pointerEvents: "none"
-					},
-					content: {
-						height: "100%",
-						pointerEvents: "auto"
-					}
-				},
-				children: /* @__PURE__ */ jsx(DiscoverySettingsContent, {
-					methods,
-					selectedMethodId,
-					setSelectedMethodId: (id) => setSelectedMethodId(ocelId, id),
-					selectedMethod,
-					selectedSchema,
-					activeFormData,
-					setActiveFormData: (data) => selectedMethodId && setFormData(ocelId, selectedMethodId, data),
-					eventCounts,
-					objectCounts,
-					errorMessage,
-					availableFilters,
-					filters,
-					setFilters: (next) => setFiltersInStore(ocelId, next)
+		handleColor: "var(--mantine-color-default-border)",
+		lineSize: 2,
+		children: [/* @__PURE__ */ jsx(Splitter.Pane, {
+			defaultSize: 70,
+			children: /* @__PURE__ */ jsx(ResultSection, {
+				taskId: discoveryTask,
+				extraActions: /* @__PURE__ */ jsx(Tooltip, {
+					label: "Toggle settings",
+					children: /* @__PURE__ */ jsx(ActionIcon, {
+						size: "input-sm",
+						variant: "outline",
+						onClick: () => splitterRef.current?.toggleCollapse(1),
+						children: /* @__PURE__ */ jsx(Settings, { size: 20 })
+					})
 				})
 			})
-		]
+		}), /* @__PURE__ */ jsx(Splitter.Pane, {
+			defaultSize: 30,
+			max: "400px",
+			min: "300px",
+			collapsible: true,
+			children: /* @__PURE__ */ jsx(DiscoverySideBar, { onSuccess: (discoveryTaskId) => setDiscoveryTask(discoveryTaskId) })
+		})]
 	});
 };
-const DiscoveryPage = () => {
-	const { id: ocelId } = useCurrentOcel();
-	if (!ocelId) return /* @__PURE__ */ jsx(LoadingOverlay, { visible: true });
-	return /* @__PURE__ */ jsx(DiscoveryPageContent, { ocelId }, ocelId);
-};
+var DiscoveryPage_default = defineModuleRoute({
+	label: "Discovery",
+	name: "discovery",
+	component: DiscoveryPage,
+	requiresOcel: true
+});
 //#endregion
 //#region src/index.ts
 var src_default = defineModule({
@@ -497,12 +153,7 @@ var src_default = defineModule({
 	description: "A tool for discovering object-centric event logs, allowing you create various plots like OC-DFGs or OC-Petri-Nets.",
 	label: "Model Discovery",
 	authors: [{ name: "Menne, Sebastian" }],
-	routes: [defineModuleRoute({
-		component: DiscoveryPage,
-		label: "Discovery",
-		name: "discovery",
-		requiresOcel: true
-	})],
+	routes: [DiscoveryPage_default],
 	icon: ChartNetwork
 });
 //#endregion

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ocelescope/discovery",
   "type": "module",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "A module for discovery of OCELs",
   "author": "Sebastian Menne <sebastian.menne@rwth-aachen.de>",
   "license": "MIT",
@@ -30,6 +30,10 @@
     "@mantine/carousel": "^9.5.1",
     "@mantine/core": "^9.5.1",
     "@mantine/hooks": "^9.5.1",
+    "@ocelescope/api-base": "^0.8.0",
+    "@ocelescope/core": "^0.8.0",
+    "@ocelescope/plugin-components": "^0.8.0",
+    "@ocelescope/resources": "^0.8.0",
     "@rjsf/core": "^6.8.0",
     "@rjsf/mantine": "^6.8.0",
     "@rjsf/utils": "^6.8.0",
@@ -38,23 +42,20 @@
     "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",
+    "next": "16.3.2",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
     "react-hook-form": "^7.71.2",
     "uniqolor": "^1.1.1",
-    "zustand": "^5.0.11",
-    "@ocelescope/api-base": "^0.7.0",
-    "@ocelescope/core": "^0.7.0",
-    "@ocelescope/resources": "^0.7.0"
+    "zustand": "^5.0.15"
   },
   "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": {