@ocelescope/discovery 0.1.0 → 0.5.0

package/README.md

@@ -28,6 +28,14 @@ export default {
 } satisfies OcelescopeConfig;
 ```
 
+This module's graph viewer uses [`@xyflow/react`](https://reactflow.dev). Add
+`@xyflow/react` to your app's `dependencies` and import its stylesheet once in
+your app entry point (`pages/_app.tsx`):
+
+```tsx
+import "@xyflow/react/dist/style.css";
+```
+
 ## About
 
 Part of [Ocelescope](https://github.com/promi4s/ocelescope), a framework for

package/dist/index.js

@@ -1,12 +1,14 @@
 import { defineModule, defineModuleRoute, useCurrentOcel } from "@ocelescope/core";
 import { BookmarkIcon, ChartNetwork, SettingsIcon } from "lucide-react";
-import { ActionIcon, Alert, Box, Card, Center, Divider, Drawer, LoadingOverlay, MultiSelect, NumberInput, Select, Slider, Stack, Switch, Text, TextInput, Tooltip } from "@mantine/core";
+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 { useEffect, useMemo, useState } from "react";
+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 = {
@@ -26,8 +28,9 @@ 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: {
-			...(s.byOcel[ocelId] ?? EMPTY).formDataByMethod,
+			...current.formDataByMethod,
 			[methodId]: data
 		} });
 	}),
@@ -60,115 +63,115 @@ const normalizeFormData = (formData) => Object.fromEntries(Object.entries(formDa
 	return true;
 }));
 //#endregion
-//#region src/components/DiscoveryField.tsx
-const DiscoveryField = ({ name, property, value, eventTypeOptions, objectTypeOptions, onChange }) => {
-	const label = property.title ?? name;
-	const description = property.description;
-	const fieldType = property.fieldType;
-	if (property.type === "array" && fieldType === "event_type") return /* @__PURE__ */ jsx(MultiSelect, {
-		label,
-		description,
-		value: value ?? [],
-		onChange,
-		data: eventTypeOptions,
-		clearable: true,
-		searchable: true
-	});
-	if (property.type === "array" && fieldType === "object_type") return /* @__PURE__ */ jsx(MultiSelect, {
-		label,
-		description,
-		value: value ?? [],
-		onChange,
-		data: objectTypeOptions,
-		clearable: true,
-		searchable: true
-	});
-	if (property.type === "string" && fieldType === "object_type") return /* @__PURE__ */ jsx(Select, {
-		label,
-		description,
-		value: value ?? null,
-		onChange,
-		data: objectTypeOptions,
-		searchable: true,
-		allowDeselect: false
-	});
-	if (property.type === "string" && fieldType === "event_type") return /* @__PURE__ */ jsx(Select, {
-		label,
-		description,
-		value: value ?? null,
-		onChange,
-		data: eventTypeOptions,
-		searchable: true,
-		allowDeselect: false
-	});
-	if (property.type === "string" && property.enum) return /* @__PURE__ */ jsx(Select, {
-		label,
-		description,
-		value: value ?? null,
-		onChange,
-		data: property.enum.map((item, index) => ({
-			value: item,
-			label: property.enumNames?.[index] ?? item
-		})),
-		allowDeselect: false
+//#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
 	});
-	if ((property.type === "number" || property.type === "integer") && property.minimum !== void 0 && property.maximum !== void 0) {
-		const currentValue = typeof value === "number" ? value : property.default;
-		const isPercentage = property.maximum === 100 && property.minimum === 0;
-		return /* @__PURE__ */ jsxs(Stack, {
-			gap: 6,
-			children: [
-				/* @__PURE__ */ jsx(Text, {
-					size: "sm",
-					fw: 500,
-					children: label
-				}),
-				description && /* @__PURE__ */ jsx(Text, {
-					size: "xs",
-					c: "dimmed",
-					children: description
-				}),
-				/* @__PURE__ */ jsx(Slider, {
-					min: property.minimum,
-					max: property.maximum,
-					value: currentValue ?? property.minimum,
-					onChange,
-					label: (val) => isPercentage ? `${val}%` : val
-				})
-			]
+	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
 		});
-	}
-	if (property.type === "integer" || property.type === "number") return /* @__PURE__ */ jsx(NumberInput, {
-		label,
-		description,
-		value,
-		onChange,
-		min: property.minimum,
-		max: property.maximum
-	});
-	if (property.type === "boolean") return /* @__PURE__ */ jsx(Switch, {
-		label,
-		description,
-		checked: Boolean(value),
-		onChange: (event) => onChange(event.currentTarget.checked)
 	});
-	return /* @__PURE__ */ jsx(TextInput, {
-		label,
-		description,
-		value: value ?? "",
-		onChange: (event) => onChange(event.currentTarget.value)
+	return {
+		event_type: OcelTypeField(eventTypeOptions),
+		object_type: OcelTypeField(objectTypeOptions)
+	};
+};
+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 updateField = (filterName, fieldName, value) => onFiltersChange(filters.map((f) => f.name === filterName ? {
-		...f,
-		payload: {
-			...f.payload,
-			[fieldName]: value
-		}
-	} : f));
+	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, {
@@ -186,16 +189,12 @@ const DiscoveryFiltersSection = ({ availableFilters, filters, onFiltersChange, e
 					fw: 500,
 					mb: "xs",
 					children: filterSchema.name
-				}), /* @__PURE__ */ jsx(Stack, {
-					gap: "sm",
-					children: Object.entries(schema.properties ?? {}).map(([fieldName, property]) => /* @__PURE__ */ jsx(DiscoveryField, {
-						name: fieldName,
-						property,
-						value: payload[fieldName],
-						eventTypeOptions,
-						objectTypeOptions,
-						onChange: (value) => updateField(filterSchema.name, fieldName, value)
-					}, fieldName))
+				}), /* @__PURE__ */ jsx(DiscoveryForm, {
+					schema,
+					formData: payload,
+					onChange: (data) => handleChange(filterSchema.name, data),
+					eventTypeOptions,
+					objectTypeOptions
 				})]
 			}, filterSchema.name);
 		})]
@@ -223,7 +222,12 @@ const DiscoverySettingsContent = ({ methods, selectedMethodId, setSelectedMethod
 						})),
 						allowDeselect: false
 					}),
-					selectedVariants.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Select, {
+					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,
@@ -232,22 +236,14 @@ const DiscoverySettingsContent = ({ methods, selectedMethodId, setSelectedMethod
 							label: v.resourceType
 						})),
 						allowDeselect: false
-					}), /* @__PURE__ */ jsx(Text, {
-						size: "sm",
-						c: "dimmed",
-						children: selectedVariants.find((v) => v.methodId === selectedMethodId)?.description
-					})] }),
-					Object.entries(selectedSchema.properties ?? {}).map(([name, property]) => /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(DiscoveryField, {
-						name,
-						property,
-						value: activeFormData[name],
+					}),
+					/* @__PURE__ */ jsx(DiscoveryForm, {
+						schema: selectedSchema,
+						formData: activeFormData,
+						onChange: setActiveFormData,
 						eventTypeOptions: Object.keys(eventCounts),
-						objectTypeOptions: Object.keys(objectCounts),
-						onChange: (value) => setActiveFormData({
-							...activeFormData,
-							[name]: value
-						})
-					}) }, name))
+						objectTypeOptions: Object.keys(objectCounts)
+					})
 				]
 			}),
 			/* @__PURE__ */ jsx(Divider, {}),
@@ -282,7 +278,11 @@ const DiscoveryPageContent = ({ ocelId }) => {
 		key: PANEL_OPEN_KEY,
 		defaultValue: true
 	});
-	const { data: methods = [], isLoading: isMethodsLoading, error: methodsError } = useListDiscoveryMethods();
+	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 } });
@@ -298,6 +298,16 @@ const DiscoveryPageContent = ({ ocelId }) => {
 		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);
@@ -341,7 +351,6 @@ const DiscoveryPageContent = ({ ocelId }) => {
 	const { mutate: saveDiscovery, isPending: isSaving } = useSaveDiscovery({ mutation: { onSuccess: (_data, { taskId: savedId }) => setSavedTaskId(savedId) } });
 	const isSaved = !!taskId && savedTaskId === taskId;
 	const requestPayload = useMemo(() => normalizeFormData(activeFormData), [activeFormData]);
-	const activeFilters = useMemo(() => filters.filter((entry) => Object.values(entry.payload).every((v) => !Array.isArray(v) || v.length > 0)), [filters]);
 	useEffect(() => {
 		if (!selectedMethodId) return;
 		const timeoutId = window.setTimeout(() => {
@@ -350,7 +359,7 @@ const DiscoveryPageContent = ({ ocelId }) => {
 				data: {
 					methodId: selectedMethodId,
 					parameters: requestPayload,
-					filters: activeFilters
+					filters
 				}
 			});
 		}, 650);
@@ -362,16 +371,16 @@ const DiscoveryPageContent = ({ ocelId }) => {
 			selectedMethodId,
 			requestPayload,
 			ocelId,
-			filters: activeFilters
+			filters
 		}), [
 			ocelId,
 			requestPayload,
 			selectedMethodId,
-			activeFilters
+			filters
 		]),
 		requestPayload,
 		selectedMethodId,
-		activeFilters
+		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);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ocelescope/discovery",
   "type": "module",
-  "version": "0.1.0",
+  "version": "0.5.0",
   "description": "A module for discovery of OCELs",
   "author": "Sebastian Menne <sebastian.menne@rwth-aachen.de>",
   "license": "MIT",
@@ -27,40 +27,34 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@apidevtools/json-schema-ref-parser": "^15.3.1",
-    "@mantine/carousel": "^9.4.0",
-    "@mantine/core": "^9.4.0",
-    "@mantine/hooks": "^9.4.0",
-    "@rjsf/core": "^6.6.2",
-    "@rjsf/mantine": "^6.6.2",
-    "@rjsf/utils": "^6.6.2",
-    "@rjsf/validator-ajv8": "^6.6.2",
+    "@mantine/carousel": "^9.4.2",
+    "@mantine/core": "^9.4.2",
+    "@mantine/hooks": "^9.4.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",
     "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.1.6",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
+    "next": "^16.2.10",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
     "react-hook-form": "^7.71.2",
     "uniqolor": "^1.1.1",
     "zustand": "^5.0.11",
-    "@ocelescope/api-base": "0.1.0",
-    "@ocelescope/core": "0.1.0",
-    "@ocelescope/resources": "0.1.0"
+    "@ocelescope/api-base": "^0.5.0",
+    "@ocelescope/core": "^0.5.0",
+    "@ocelescope/resources": "^0.5.0"
   },
   "devDependencies": {
-    "@apidevtools/json-schema-ref-parser": "^15.3.1",
-    "@rjsf/mantine": "^6.6.2",
+    "@rjsf/mantine": "^6.7.0",
     "@types/file-saver": "^2.0.7",
-    "@types/node": "^25.0.3",
-    "@types/react": "^19.2.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.0",
+    "tsdown": "^0.22.12",
     "typescript": "^5.9.3"
   },
   "scripts": {