@ocelescope/core 0.0.1 → 0.1.1

package/dist/index.js

@@ -1,77 +1,367 @@
-import { ActionIcon, AppShell, Badge, Box, Burger, Button, ColorSchemeScript, Container, Divider, Group, LoadingOverlay, MantineProvider, Menu, MenuItem, Modal, NavLink, Select, Stack, Text, TextInput, ThemeIcon, Title, mantineHtmlProps, useMantineTheme } from "@mantine/core";
-import { generateColor } from "@marko19907/string-to-color";
-import { useDeleteOcel, useDeleteResource, useGetDefaultOcel, useGetOcels, useGetResourceMeta, useImportDefaultOcel, useRenameOcel, useRenameResource, useResources, useUpload } from "@ocelescope/api-base";
-import { ResourceModal } from "@ocelescope/resources";
-import { CheckIcon, ContainerIcon, DownloadIcon, EllipsisVerticalIcon, EyeIcon, HomeIcon, PackageIcon, PencilIcon, TrashIcon, Upload, UploadIcon, X, XIcon } from "lucide-react";
+import { ActionIcon, Anchor, AppShell, Box, Burger, Button, ColorSchemeScript, Combobox, CopyButton, Divider, Group, Input, InputBase, LoadingOverlay, MantineProvider, Modal, MultiSelect, NavLink, Stack, Table, Text, ThemeIcon, Tooltip, UnstyledButton, createTheme, mantineHtmlProps, useCombobox, useMantineTheme } from "@mantine/core";
+import { getDownloadFlatLogQueryKey, getDownloadOCELQueryKey, getDownloadResourceAsPnmlQueryKey, getDownloadResourceQueryKey, useActivities, useAggregatedAttributes, useAttributeNames, useE2o, useE2oCombinations, useEventAttributes, useGetDefaultOcel, useGetOcels, useImportDefaultOcel, useLogout, useO2o, useO2oCombinations, useObjectAttributes, useObjectTypes, useUpload } from "@ocelescope/api-base";
+import { HydrationBoundary, QueryClient, QueryClientProvider, keepPreviousData, useQueryClient } from "@tanstack/react-query";
+import { BookOpenIcon, BugIcon, ChevronDownIcon, ChevronRightIcon, ContainerIcon, DownloadIcon, FilterIcon, GlobeIcon, HelpCircleIcon, LightbulbIcon, LogOutIcon, MailIcon, PackageIcon, PackagePlusIcon, PuzzleIcon, TriangleAlertIcon, UploadIcon, XIcon } from "lucide-react";
 import { DataTable } from "mantine-datatable";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { env, useSessionStore } from "@ocelescope/api-client";
-import { parse } from "content-disposition-attachment";
-import { saveAs } from "file-saver";
-import { HydrationBoundary, QueryClient, QueryClientProvider, useQueryClient } from "@tanstack/react-query";
+import { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import dayjs from "dayjs";
-import isBetween from "dayjs/plugin/isBetween";
+import isBetween from "dayjs/plugin/isBetween.js";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Dropzone } from "@mantine/dropzone";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Readable } from "node:stream";
+import z from "zod";
+import { Notifications, showNotification } from "@mantine/notifications";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { useDisclosure } from "@mantine/hooks";
+import { env as env$1, useSessionStore } from "@ocelescope/api-client";
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
-import Link from "next/link";
-import { useRouter } from "next/router";
-import { Head, Html, Main, NextScript } from "next/document";
-
-import './index.css';
-//#region src/hooks/useDownload.ts
-const useDownloadFile = () => {
-	const { sessionId } = useSessionStore();
-	const downloadFile = async (path) => {
-		try {
-			const response = await fetch(`${env.backend_url}${path}`, {
-				method: "GET",
-				headers: { [env.session_id]: sessionId ?? "" }
-			});
-			if (!response.ok) throw new Error("Failed to download file");
-			const blob = await response.blob();
-			const contentDisposition = parse(response.headers.get("Content-Disposition") ?? "");
-			saveAs(blob, contentDisposition.attachment ? contentDisposition.filename : "fileName");
-		} catch (err) {
-			console.error("Download error:", err);
+import Link from "next/link.js";
+import { useRouter } from "next/router.js";
+import { Head, Html, Main, NextScript } from "next/document.js";
+import { parse } from "content-disposition-attachment";
+import FileSaver from "file-saver";
+import qs from "qs";
+//#region src/lib/dayjs.ts
+dayjs.extend(isBetween);
+const formatDateTime = (dateString) => dayjs(dateString).format("YYYY-MM-DD HH:mm");
+//#endregion
+//#region src/lib/attributes.ts
+const formatAttributeValue = (type, value) => {
+	switch (type) {
+		case "int": return value.toLocaleString("en-US");
+		case "float": return value.toLocaleString("en-US");
+		case "date": return formatDateTime(value);
+		default: return value;
+	}
+};
+//#endregion
+//#region src/components/AttributeTable.tsx
+const PAGE_SIZE$1 = 10;
+const COLUMN_WIDTHS$1 = {
+	selector: 30,
+	name: 200,
+	entityType: 200,
+	type: 100,
+	range: 200,
+	distinctValues: 120
+};
+const SubAttributeTable = ({ ocelId, entityType = "objects", attributeName, entityNames, hideRange = false, hideValues = false, ocelVersion, extraColumns = [] }) => {
+	const isEvent = entityType === "events";
+	const { data, isFetching } = (isEvent ? useEventAttributes : useObjectAttributes)(ocelId, {
+		attribute_names: [attributeName],
+		names: entityNames,
+		ocel_version: ocelVersion
+	}, { query: { placeholderData: keepPreviousData } });
+	const columns = useMemo(() => [
+		{
+			accessor: "selector",
+			title: "",
+			width: COLUMN_WIDTHS$1.selector
+		},
+		{
+			accessor: "",
+			title: "Attribute Name",
+			width: COLUMN_WIDTHS$1.name
+		},
+		{
+			accessor: "entity_type",
+			title: isEvent ? "Activity" : "Object Type",
+			width: COLUMN_WIDTHS$1.entityType
+		},
+		{
+			accessor: "type",
+			title: "Data Type",
+			width: COLUMN_WIDTHS$1.type,
+			noWrap: true
+		},
+		{
+			accessor: "range",
+			width: COLUMN_WIDTHS$1.range,
+			render: ({ type, min, max }) => `${formatAttributeValue(type, min)} - ${formatAttributeValue(type, max)}`,
+			hidden: hideRange
+		},
+		{
+			accessor: "distinct_values",
+			title: "Values",
+			width: COLUMN_WIDTHS$1.distinctValues,
+			hidden: hideValues
+		},
+		...extraColumns
+	], [
+		isEvent,
+		hideRange,
+		hideValues,
+		extraColumns
+	]);
+	return /* @__PURE__ */ jsx(DataTable, {
+		noHeader: true,
+		idAccessor: "entity_type",
+		records: data ?? [],
+		columns,
+		fetching: isFetching,
+		backgroundColor: {
+			light: "gray.0",
+			dark: "dark.6"
 		}
-	};
-	return downloadFile;
+	});
+};
+const AttributesTable = ({ ocelId, entityType = "objects", extraColumns = [], hideRange = false, hideValues = false, subTableExtraColumns, ocelVersion, alwaysExpandable = false, visibleAttributes }) => {
+	const isEvent = entityType === "events";
+	const [currentPage, setCurrentPage] = useState(1);
+	const { data: attributeNames } = useAttributeNames(ocelId, {
+		entity_type: entityType,
+		ocel_version: ocelVersion
+	});
+	const [filteredAttributes, setFilteredAttributes] = useState([]);
+	const { data: entityNames } = (isEvent ? useActivities : useObjectTypes)(ocelId, { ocel_version: ocelVersion });
+	const [filteredEntityNames, setFilteredEntityNames] = useState([]);
+	const isConstrained = visibleAttributes !== void 0;
+	const attributeNameOptions = useMemo(() => {
+		if (!isConstrained) return attributeNames ?? [];
+		return (attributeNames ?? []).filter((name) => visibleAttributes.includes(name));
+	}, [
+		attributeNames,
+		isConstrained,
+		visibleAttributes
+	]);
+	const effectiveAttributeNames = useMemo(() => {
+		if (!isConstrained) return filteredAttributes;
+		return (filteredAttributes.length > 0 ? filteredAttributes : visibleAttributes).filter((name) => visibleAttributes.includes(name));
+	}, [
+		filteredAttributes,
+		isConstrained,
+		visibleAttributes
+	]);
+	const showNoAttributes = isConstrained && effectiveAttributeNames.length === 0;
+	const { data, isFetching } = useAggregatedAttributes(ocelId, {
+		entity_type: entityType,
+		page: currentPage,
+		page_size: PAGE_SIZE$1,
+		ocel_version: ocelVersion,
+		...effectiveAttributeNames.length > 0 && { attribute_names: effectiveAttributeNames },
+		...filteredEntityNames.length > 0 && { entity_names: filteredEntityNames }
+	}, { query: {
+		placeholderData: keepPreviousData,
+		enabled: !showNoAttributes
+	} });
+	const [selectedAttributes, setSelectedAttributes] = useState([]);
+	const columns = useMemo(() => [
+		{
+			accessor: "selector",
+			title: "",
+			textAlign: "center",
+			render: ({ entity_type_names, name }) => {
+				if (!alwaysExpandable && entity_type_names.length === 1) return null;
+				return /* @__PURE__ */ jsx(ThemeIcon, {
+					size: "sm",
+					variant: "transparent",
+					style: { display: "flex" },
+					children: selectedAttributes.includes(name) ? /* @__PURE__ */ jsx(ChevronDownIcon, { size: 16 }) : /* @__PURE__ */ jsx(ChevronRightIcon, { size: 16 })
+				});
+			},
+			width: COLUMN_WIDTHS$1.selector,
+			cellsStyle: () => ({ padding: 5 })
+		},
+		{
+			accessor: "name",
+			title: "Attribute Name",
+			width: COLUMN_WIDTHS$1.name,
+			filter: () => /* @__PURE__ */ jsx(MultiSelect, {
+				data: attributeNameOptions,
+				value: filteredAttributes,
+				onChange: (newSelection) => setFilteredAttributes(newSelection),
+				comboboxProps: { withinPortal: false },
+				clearable: true,
+				searchable: true
+			}),
+			filtering: filteredAttributes.length > 0
+		},
+		{
+			accessor: "entityTypeField",
+			title: isEvent ? "Activity" : "Object Type",
+			width: COLUMN_WIDTHS$1.entityType,
+			render: ({ entity_type_names }) => `${entity_type_names.slice(0, 2).join(", ")}${entity_type_names.length > 3 ? `, ... (${entity_type_names.length} total)` : ""}`,
+			filter: () => /* @__PURE__ */ jsx(MultiSelect, {
+				data: entityNames,
+				value: filteredEntityNames,
+				onChange: (newSelection) => setFilteredEntityNames(newSelection),
+				comboboxProps: { withinPortal: false },
+				clearable: true,
+				searchable: true
+			}),
+			filtering: filteredEntityNames.length > 0
+		},
+		{
+			accessor: "type",
+			title: "Data Type",
+			width: COLUMN_WIDTHS$1.type
+		},
+		{
+			accessor: "range",
+			width: COLUMN_WIDTHS$1.range,
+			render: ({ type, min, max }) => `${formatAttributeValue(type, min)} - ${formatAttributeValue(type, max)}`,
+			hidden: hideRange
+		},
+		{
+			accessor: "distinct_values",
+			title: "Values",
+			width: COLUMN_WIDTHS$1.distinctValues,
+			hidden: hideValues
+		},
+		...extraColumns
+	], [
+		isEvent,
+		entityNames,
+		filteredEntityNames,
+		selectedAttributes,
+		filteredAttributes,
+		attributeNameOptions,
+		extraColumns,
+		hideRange,
+		hideValues,
+		alwaysExpandable
+	]);
+	return /* @__PURE__ */ jsx(DataTable, {
+		idAccessor: "name",
+		records: showNoAttributes ? [] : data?.response,
+		columns,
+		withTableBorder: true,
+		fetching: isFetching,
+		totalRecords: showNoAttributes ? 0 : data?.total_items ?? 0,
+		page: currentPage,
+		recordsPerPage: PAGE_SIZE$1,
+		onPageChange: setCurrentPage,
+		noRecordsText: "No attributes found",
+		height: 500,
+		rowExpansion: {
+			allowMultiple: false,
+			expandable: ({ record: { entity_type_names } }) => alwaysExpandable || entity_type_names.length > 1,
+			expanded: {
+				recordIds: selectedAttributes,
+				onRecordIdsChange: setSelectedAttributes
+			},
+			content: ({ record }) => /* @__PURE__ */ jsx(SubAttributeTable, {
+				entityType,
+				attributeName: record.name,
+				ocelId,
+				extraColumns: subTableExtraColumns,
+				hideRange,
+				hideValues,
+				ocelVersion,
+				...filteredEntityNames.length > 0 && { entityNames: filteredEntityNames }
+			})
+		}
+	});
 };
-
 //#endregion
-//#region src/hooks/useInvalidate.ts
-const useInvalidate = () => {
-	const queryClient = useQueryClient();
-	return async (routeNames) => await queryClient.invalidateQueries({ predicate: (query) => typeof query.queryKey[0] === "string" && routeNames.some((route) => query.queryKey[0].includes(`/${route}`)) });
+//#region src/components/BarList/BarList.module.css
+var BarList_module_default = {
+	"bar": "uf8oba_bar",
+	"barCell": "uf8oba_barCell",
+	"container": "uf8oba_container",
+	"head": "uf8oba_head",
+	"headCount": "uf8oba_headCount",
+	"headLabel": "uf8oba_headLabel",
+	"labelInside": "uf8oba_labelInside",
+	"labelOutside": "uf8oba_labelOutside",
+	"scrollArea": "uf8oba_scrollArea",
+	"toggleRow": "uf8oba_toggleRow"
 };
-var useInvalidate_default = useInvalidate;
-
 //#endregion
-//#region src/lib/dayjs.ts
-dayjs.extend(isBetween);
-var dayjs_default = dayjs;
-const formatDateTime = (dateString) => dayjs(dateString).format("YYYY-MM-DD HH:mm");
-
+//#region src/components/BarList/BarList.tsx
+const BarList = ({ data, labelHeader, valueHeader = "Frequency", maxVisibleItems = 8 }) => {
+	const [expanded, setExpanded] = useState(false);
+	const entries = useMemo(() => Object.entries(data).sort((a, b) => b[1] - a[1]), [data]);
+	const max = useMemo(() => Math.max(0, ...entries.map(([, c]) => c)), [entries]);
+	const typeCount = entries.length;
+	const totalFrequency = useMemo(() => entries.reduce((sum, [, count]) => sum + count, 0), [entries]);
+	const hasOverflow = typeCount > maxVisibleItems;
+	const visibleEntries = hasOverflow && !expanded ? entries.slice(0, maxVisibleItems) : entries;
+	const scrollRef = useRef(null);
+	const [collapsedHeight, setCollapsedHeight] = useState();
+	useLayoutEffect(() => {
+		if (!expanded && scrollRef.current) setCollapsedHeight(scrollRef.current.offsetHeight);
+	}, [
+		expanded,
+		typeCount,
+		maxVisibleItems
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: BarList_module_default.container,
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: scrollRef,
+			className: BarList_module_default.scrollArea,
+			style: expanded ? { maxHeight: collapsedHeight } : void 0,
+			children: /* @__PURE__ */ jsxs(Table, {
+				variant: "vertical",
+				layout: "fixed",
+				stickyHeader: true,
+				children: [/* @__PURE__ */ jsx(Table.Thead, {
+					className: BarList_module_default.head,
+					children: /* @__PURE__ */ jsxs(Table.Tr, { children: [/* @__PURE__ */ jsx(Table.Th, { children: /* @__PURE__ */ jsxs("span", {
+						className: BarList_module_default.headLabel,
+						children: [
+							labelHeader,
+							" ",
+							/* @__PURE__ */ jsxs("span", {
+								className: BarList_module_default.headCount,
+								children: [
+									"(",
+									typeCount.toLocaleString(),
+									")"
+								]
+							})
+						]
+					}) }), /* @__PURE__ */ jsx(Table.Th, { children: /* @__PURE__ */ jsxs("span", {
+						className: BarList_module_default.headLabel,
+						children: [
+							valueHeader,
+							" ",
+							/* @__PURE__ */ jsxs("span", {
+								className: BarList_module_default.headCount,
+								children: [
+									"(",
+									totalFrequency.toLocaleString(),
+									")"
+								]
+							})
+						]
+					}) })] })
+				}), /* @__PURE__ */ jsx(Table.Tbody, { children: visibleEntries.map(([name, count]) => {
+					const percentage = max > 0 ? Math.ceil(count / max * 100) : 0;
+					return /* @__PURE__ */ jsxs(Table.Tr, { children: [/* @__PURE__ */ jsx(Table.Td, { children: name }), /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsxs("div", {
+						className: BarList_module_default.barCell,
+						children: [/* @__PURE__ */ jsx("div", {
+							className: BarList_module_default.bar,
+							style: { width: `${percentage}%` },
+							children: percentage > 50 && /* @__PURE__ */ jsx("span", {
+								className: BarList_module_default.labelInside,
+								children: count
+							})
+						}), percentage <= 50 && /* @__PURE__ */ jsx("span", {
+							className: BarList_module_default.labelOutside,
+							children: count
+						})]
+					}) })] }, name);
+				}) })]
+			})
+		}), hasOverflow && /* @__PURE__ */ jsx(UnstyledButton, {
+			className: BarList_module_default.toggleRow,
+			onClick: () => setExpanded((prev) => !prev),
+			children: expanded ? "Show less" : `Show ${typeCount - maxVisibleItems} more`
+		})]
+	});
+};
 //#endregion
-//#region src/components/Dropzone/Dropzone.module.css?css_module
-const classes$1 = {
-	"icon": "_0yGNhG_icon",
-	"wrapper": "_0yGNhG_wrapper",
-	"dropzone": "_0yGNhG_dropzone",
-	"control": "_0yGNhG_control",
-	"description": "_0yGNhG_description"
-};
-var Dropzone_module_default = classes$1;
-const _icon0 = classes$1["icon"];
-const _wrapper0 = classes$1["wrapper"];
-const _dropzone0 = classes$1["dropzone"];
-const _control0$1 = classes$1["control"];
-const _description0 = classes$1["description"];
-
+//#region src/components/Dropzone/Dropzone.module.css
+var Dropzone_module_default = {
+	"control": "IgW5Wa_control",
+	"description": "IgW5Wa_description",
+	"dropzone": "IgW5Wa_dropzone",
+	"icon": "IgW5Wa_icon",
+	"wrapper": "IgW5Wa_wrapper"
+};
 //#endregion
 //#region src/components/Dropzone/Dropzone.tsx
 const FileDropzone = ({ onUpload, accept, content }) => {
@@ -82,7 +372,7 @@ const FileDropzone = ({ onUpload, accept, content }) => {
 		children: [/* @__PURE__ */ jsx(Dropzone, {
 			openRef,
 			onDrop: onUpload,
-			className: Dropzone_module_default.dropzone,
+			className: Dropzone_module_default.dropzone ?? "",
 			radius: "md",
 			accept: accept ?? {},
 			children: /* @__PURE__ */ jsxs("div", {
@@ -95,11 +385,11 @@ const FileDropzone = ({ onUpload, accept, content }) => {
 								size: 50,
 								color: theme.colors.blue[6]
 							}) }),
-							/* @__PURE__ */ jsx(Dropzone.Reject, { children: /* @__PURE__ */ jsx(X, {
+							/* @__PURE__ */ jsx(Dropzone.Reject, { children: /* @__PURE__ */ jsx(XIcon, {
 								size: 50,
 								color: theme.colors.red[6]
 							}) }),
-							/* @__PURE__ */ jsx(Dropzone.Idle, { children: /* @__PURE__ */ jsx(Upload, {
+							/* @__PURE__ */ jsx(Dropzone.Idle, { children: /* @__PURE__ */ jsx(UploadIcon, {
 								size: 50,
 								className: Dropzone_module_default.icon
 							}) })
@@ -117,13 +407,13 @@ const FileDropzone = ({ onUpload, accept, content }) => {
 						]
 					}),
 					/* @__PURE__ */ jsx(Text, {
-						className: Dropzone_module_default.description,
+						className: Dropzone_module_default.description ?? "",
 						children: content.description || /* @__PURE__ */ jsx("span", { children: "Drag'n'drop files here to upload." })
 					})
 				]
 			})
 		}), /* @__PURE__ */ jsx(Button, {
-			className: Dropzone_module_default.control,
+			className: Dropzone_module_default.control ?? "",
 			size: "sm",
 			radius: "xl",
 			onClick: () => openRef.current?.(),
@@ -131,13 +421,280 @@ const FileDropzone = ({ onUpload, accept, content }) => {
 		})]
 	});
 };
-var Dropzone_default = FileDropzone;
-
+//#endregion
+//#region src/components/EventHandler.ts
+const apiBase = process.env.EXTERNAL_API_BASE_URL ?? "http://localhost:8000";
+const sseHandler = async (req, res) => {
+	const session_id = req.query.sessionId;
+	const backendUrl = `${apiBase}/sse?session_id=${encodeURIComponent(session_id || "")}`;
+	try {
+		const controller = new AbortController();
+		const backendRes = await fetch(backendUrl, {
+			headers: { Accept: "text/event-stream" },
+			signal: controller.signal
+		});
+		if (!backendRes.body) {
+			res.status(502).end("No response body from backend");
+			return;
+		}
+		res.writeHead(200, {
+			"Content-Type": "text/event-stream",
+			"Cache-Control": "no-cache, no-transform",
+			Connection: "keep-alive"
+		});
+		const webStream = backendRes.body;
+		const nodeStream = Readable.fromWeb(webStream);
+		nodeStream.pipe(res);
+		res.on("close", () => {
+			console.log("Client disconnected");
+			controller.abort();
+			nodeStream.destroy();
+			res.end();
+		});
+	} catch (err) {
+		console.error("SSE proxy error:", err);
+		res.status(500).end("SSE proxy error");
+	}
+};
+const env = z.object({
+	NEXT_PUBLIC_APP_VERSION: z.string().default("v0.0.0"),
+	NEXT_PUBLIC_PROJECT_PAGE: z.url().default("https://www.ocelescope.org/"),
+	NEXT_PUBLIC_DOCS_URL: z.url().default("https://www.ocelescope.org/getting-started/download/"),
+	NEXT_PUBLIC_PLUGIN_DEV_GUIDE_URL: z.url().default("https://www.ocelescope.org/plugin-development/"),
+	NEXT_PUBLIC_PLUGIN_LIBRARY_URL: z.url().default("https://www.ocelescope.org/community/plugin-library/"),
+	NEXT_PUBLIC_REPORT_BUG_URL: z.url().default("https://www.ocelescope.org/community/report-bug/"),
+	NEXT_PUBLIC_TROUBLESHOOTING_URL: z.url().default("https://www.ocelescope.org/community/troubleshooting/"),
+	NEXT_PUBLIC_REQUEST_FEATURE_URL: z.url().default("https://www.ocelescope.org/community/request-feature/"),
+	NEXT_PUBLIC_SUBMIT_PLUGIN_URL: z.url().default("https://www.ocelescope.org/community/submit-plugin/"),
+	NEXT_PUBLIC_REQUEST_ENVIRONMENT_URL: z.url().default("https://www.ocelescope.org/plugin-development/request-package/"),
+	NEXT_PUBLIC_CONTACT_EMAIL: z.string().default("ocelescope@pads.rwth-aachen.de")
+}).transform((env) => ({
+	appVersion: env.NEXT_PUBLIC_APP_VERSION,
+	projectPage: env.NEXT_PUBLIC_PROJECT_PAGE,
+	docsUrl: env.NEXT_PUBLIC_DOCS_URL,
+	pluginDevGuideUrl: env.NEXT_PUBLIC_PLUGIN_DEV_GUIDE_URL,
+	pluginLibraryUrl: env.NEXT_PUBLIC_PLUGIN_LIBRARY_URL,
+	reportBugUrl: env.NEXT_PUBLIC_REPORT_BUG_URL,
+	requestFeatureUrl: env.NEXT_PUBLIC_REQUEST_FEATURE_URL,
+	submitPluginUrl: env.NEXT_PUBLIC_SUBMIT_PLUGIN_URL,
+	troubleshootingUrl: env.NEXT_PUBLIC_TROUBLESHOOTING_URL,
+	requestEnvironmentUrl: env.NEXT_PUBLIC_REQUEST_ENVIRONMENT_URL,
+	contactEmail: env.NEXT_PUBLIC_CONTACT_EMAIL
+})).parse({
+	NEXT_PUBLIC_APP_VERSION: process.env.NEXT_PUBLIC_APP_VERSION,
+	NEXT_PUBLIC_PROJECT_PAGE: process.env.NEXT_PUBLIC_PROJECT_PAGE,
+	NEXT_PUBLIC_DOCS_URL: process.env.NEXT_PUBLIC_DOCS_URL,
+	NEXT_PUBLIC_PLUGIN_DEV_GUIDE_URL: process.env.NEXT_PUBLIC_PLUGIN_DEV_GUIDE_URL,
+	NEXT_PUBLIC_PLUGIN_LIBRARY_URL: process.env.NEXT_PUBLIC_PLUGIN_LIBRARY_URL,
+	NEXT_PUBLIC_REPORT_BUG_URL: process.env.NEXT_PUBLIC_REPORT_BUG_URL,
+	NEXT_PUBLIC_TROUBLESHOOTING_URL: process.env.NEXT_PUBLIC_TROUBLESHOOTING_URL,
+	NEXT_PUBLIC_REQUEST_FEATURE_URL: process.env.NEXT_PUBLIC_REQUEST_FEATURE_URL,
+	NEXT_PUBLIC_SUBMIT_PLUGIN_URL: process.env.NEXT_PUBLIC_SUBMIT_PLUGIN_URL,
+	NEXT_PUBLIC_REQUEST_ENVIRONMENT_URL: process.env.NEXT_PUBLIC_REQUEST_ENVIRONMENT_URL,
+	NEXT_PUBLIC_CONTACT_EMAIL: process.env.NEXT_PUBLIC_CONTACT_EMAIL
+});
+//#endregion
+//#region src/components/HelpModal/HelpModal.tsx
+const HelpLink = ({ icon: Icon, label, href }) => /* @__PURE__ */ jsx(Anchor, {
+	href,
+	target: "_blank",
+	rel: "noopener noreferrer",
+	underline: "never",
+	c: "inherit",
+	children: /* @__PURE__ */ jsxs(Group, {
+		gap: "sm",
+		children: [/* @__PURE__ */ jsx(Icon, { size: 18 }), /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			children: label
+		})]
+	})
+});
+const HelpModal = ({ visible, onClose }) => {
+	return /* @__PURE__ */ jsx(Modal, {
+		title: /* @__PURE__ */ jsx(Text, {
+			size: "h3",
+			children: "Help"
+		}),
+		opened: visible,
+		onClose,
+		children: /* @__PURE__ */ jsxs(Stack, {
+			gap: "sm",
+			children: [
+				/* @__PURE__ */ jsx(HelpLink, {
+					icon: GlobeIcon,
+					label: "Website",
+					href: env.projectPage
+				}),
+				/* @__PURE__ */ jsx(HelpLink, {
+					icon: BookOpenIcon,
+					label: "Documentation",
+					href: env.docsUrl
+				}),
+				/* @__PURE__ */ jsx(HelpLink, {
+					icon: PuzzleIcon,
+					label: "Plugin development guide",
+					href: env.pluginDevGuideUrl
+				}),
+				/* @__PURE__ */ jsx(HelpLink, {
+					icon: TriangleAlertIcon,
+					label: "Known issues",
+					href: env.troubleshootingUrl
+				}),
+				/* @__PURE__ */ jsx(HelpLink, {
+					icon: BugIcon,
+					label: "Report a bug",
+					href: env.reportBugUrl
+				}),
+				/* @__PURE__ */ jsx(HelpLink, {
+					icon: LightbulbIcon,
+					label: "Request a feature",
+					href: env.requestFeatureUrl
+				}),
+				/* @__PURE__ */ jsx(HelpLink, {
+					icon: UploadIcon,
+					label: "Submit a plugin",
+					href: env.submitPluginUrl
+				}),
+				/* @__PURE__ */ jsx(HelpLink, {
+					icon: PackagePlusIcon,
+					label: "Request environment addition",
+					href: env.requestEnvironmentUrl
+				}),
+				/* @__PURE__ */ jsx(HelpLink, {
+					icon: MailIcon,
+					label: env.contactEmail,
+					href: `mailto:${env.contactEmail}`
+				})
+			]
+		})
+	});
+};
+//#endregion
+//#region src/components/ModulePage.tsx
+const createModulesPage = (config) => {
+	const { modules = [] } = config;
+	const getStaticPaths = async () => {
+		return {
+			paths: [...modules.flatMap(({ name: moduleName, routes }) => [...routes.map(({ name: routeName }) => ({ params: { slug: [moduleName, routeName] } })), { params: { slug: [moduleName] } }]), { params: { slug: [] } }],
+			fallback: false
+		};
+	};
+	const getStaticProps = async ({ params }) => {
+		const slugs = params?.slug ?? [];
+		const moduleDef = slugs[0] ? modules.find(({ name }) => name === slugs[0]) : modules[0];
+		const routeDef = slugs[1] ? moduleDef?.routes.find(({ name }) => name === slugs[1]) : moduleDef?.routes[0];
+		if (!moduleDef || !routeDef) return { notFound: true };
+		return { props: {
+			moduleName: moduleDef.name,
+			routeName: routeDef.name
+		} };
+	};
+	const ModulePage = ({ moduleName, routeName }) => {
+		const RouteComponent = modules.find(({ name }) => name === moduleName)?.routes.find(({ name }) => name === routeName)?.component;
+		return RouteComponent ? /* @__PURE__ */ jsx(RouteComponent, {}) : null;
+	};
+	return {
+		getStaticPaths,
+		getStaticProps,
+		ModulePage
+	};
+};
+//#endregion
+//#region src/store/currentOcelStore.ts
+const useCurrentOcelStore = create()(persist((set) => ({
+	ocelId: null,
+	setOcel: (id) => set({ ocelId: id }),
+	clearOcel: () => set({ ocelId: null })
+}), { name: env$1.current_ocel_id }));
+//#endregion
+//#region src/hooks/useCurrentOCEL.ts
+const useCurrentOcel = () => {
+	const { data: ocels = [] } = useGetOcels();
+	const { ocelId, setOcel, clearOcel } = useCurrentOcelStore();
+	useEffect(() => {
+		if (ocelId && !ocels?.some(({ id }) => id === ocelId)) clearOcel();
+		if (!ocelId && ocels[0]) setOcel(ocels[0].id);
+	}, [
+		clearOcel,
+		setOcel,
+		ocels,
+		ocelId
+	]);
+	return {
+		id: ocelId,
+		setCurrentOcel: setOcel
+	};
+};
+//#endregion
+//#region src/components/OcelSelect/OcelSelect.tsx
+const FilteredIndicator = () => /* @__PURE__ */ jsx(Tooltip, {
+	label: "This log has been filtered",
+	children: /* @__PURE__ */ jsx(FilterIcon, {
+		size: 14,
+		color: "var(--mantine-color-blue-6)"
+	})
+});
+const OcelSelect = ({ extension, value, onChange, placeholder = "Select an OCEL", ...inputProps }) => {
+	const { data } = useGetOcels(extension ? { extension_name: extension } : {});
+	const ocels = useMemo(() => data ?? [], [data]);
+	const combobox = useCombobox({ onDropdownClose: () => combobox.resetSelectedOption() });
+	const selected = useMemo(() => ocels.find((ocel) => ocel.id === value), [ocels, value]);
+	return /* @__PURE__ */ jsxs(Combobox, {
+		store: combobox,
+		onOptionSubmit: (val) => {
+			onChange?.(val);
+			combobox.closeDropdown();
+		},
+		children: [/* @__PURE__ */ jsx(Combobox.Target, { children: /* @__PURE__ */ jsx(InputBase, {
+			...inputProps,
+			component: "button",
+			type: "button",
+			pointer: true,
+			rightSection: /* @__PURE__ */ jsx(Combobox.Chevron, {}),
+			rightSectionPointerEvents: "none",
+			onClick: () => combobox.toggleDropdown(),
+			children: selected ? /* @__PURE__ */ jsxs(Group, {
+				gap: 6,
+				wrap: "nowrap",
+				style: { overflow: "hidden" },
+				children: [/* @__PURE__ */ jsx(Text, {
+					span: true,
+					size: "sm",
+					truncate: true,
+					children: selected.name
+				}), selected.filter_applied && /* @__PURE__ */ jsx(FilteredIndicator, {})]
+			}) : /* @__PURE__ */ jsx(Input.Placeholder, { children: placeholder })
+		}) }), /* @__PURE__ */ jsx(Combobox.Dropdown, { children: /* @__PURE__ */ jsx(Combobox.Options, { children: ocels.map((ocel) => /* @__PURE__ */ jsx(Combobox.Option, {
+			value: ocel.id,
+			children: /* @__PURE__ */ jsxs(Group, {
+				gap: 6,
+				wrap: "nowrap",
+				children: [ocel.name, ocel.filter_applied && /* @__PURE__ */ jsx(FilteredIndicator, {})]
+			})
+		}, ocel.id)) }) })]
+	});
+};
+const CurrentOcelSelect = () => {
+	const { id, setCurrentOcel } = useCurrentOcel();
+	return /* @__PURE__ */ jsx(OcelSelect, {
+		value: id,
+		w: 250,
+		onChange: (id) => {
+			if (id) setCurrentOcel(id);
+		}
+	});
+};
+//#endregion
+//#region src/hooks/useInvalidate.ts
+const useInvalidate = () => {
+	const queryClient = useQueryClient();
+	return async (routeNames) => await queryClient.invalidateQueries({ predicate: (query) => typeof query.queryKey[0] === "string" && routeNames.some((route) => query.queryKey[0].includes(`/${route}`)) });
+};
 //#endregion
 //#region src/components/UploadSection/UploadSection.tsx
 const DefaultOcels = ({ onSuccess, setIsPending }) => {
 	const { data: ocels = [] } = useGetDefaultOcel({});
-	const invalidate = useInvalidate_default();
+	const invalidate = useInvalidate();
 	const { mutate: uploadDefault } = useImportDefaultOcel({ mutation: {
 		onSuccess: async () => {
 			await invalidate(["ocels"]);
@@ -178,7 +735,7 @@ const FileUploadZone = ({ onSuccess, setIsPending }) => {
 		onMutate: () => setIsPending(true),
 		onSettled: () => setIsPending(false)
 	} });
-	return /* @__PURE__ */ jsx(Dropzone_default, {
+	return /* @__PURE__ */ jsx(FileDropzone, {
 		content: { description: /* @__PURE__ */ jsx("span", { children: `Drag'n'drop your ${[
 			"OCELs",
 			"Plugins",
@@ -191,8 +748,10 @@ const FileUploadZone = ({ onSuccess, setIsPending }) => {
 };
 const UploadSection = ({ onSuccess }) => {
 	const [isPending, setIsPending] = useState(false);
-	const onUploadSuccess = useCallback(() => {
+	const invalidate = useInvalidate();
+	const onUploadSuccess = useCallback(async () => {
 		setIsPending(false);
+		await invalidate(["tasks"]);
 		onSuccess?.();
 	}, [onSuccess]);
 	return /* @__PURE__ */ jsxs(Stack, {
@@ -217,298 +776,6 @@ const UploadSection = ({ onSuccess }) => {
 		]
 	});
 };
-var UploadSection_default = UploadSection;
-
-//#endregion
-//#region src/components/EntityTable/EntityTable.tsx
-const ocelExtenisions = [
-	".sqlite",
-	".xmlocel",
-	".jsonocel"
-];
-const EntityTable = () => {
-	const { data: ocels = [] } = useGetOcels();
-	const { data: resources = [] } = useResources();
-	const invalidate = useInvalidate_default();
-	const downloadFile = useDownloadFile();
-	const { data: resourceMeta = {} } = useGetResourceMeta();
-	const { mutate: deleteResource } = useDeleteResource({ mutation: { onSuccess: () => invalidate(["resources"]) } });
-	const { mutate: deleteOcel } = useDeleteOcel({ mutation: { onSuccess: () => invalidate(["ocels"]) } });
-	const { mutate: renameOcel } = useRenameOcel({ mutation: { onSuccess: () => invalidate(["ocels"]) } });
-	const { mutate: renameResource } = useRenameResource({ mutation: { onSuccess: () => invalidate(["resources"]) } });
-	const deleteEntity = useCallback((id, entityType) => {
-		switch (entityType) {
-			case "ocel":
-				deleteOcel({ params: { ocel_id: id } });
-				break;
-			case "resource":
-				deleteResource({ resourceId: id });
-				break;
-		}
-	}, [deleteResource, deleteOcel]);
-	const renameEntitiy = useCallback((id, entityType, newName) => {
-		switch (entityType) {
-			case "ocel":
-				renameOcel({ params: {
-					ocel_id: id,
-					new_name: newName
-				} });
-				break;
-			case "resource": renameResource({
-				resourceId: id,
-				params: { new_name: newName }
-			});
-		}
-	}, [renameOcel, renameResource]);
-	const [renamedEntitiy, setRenamedEntitiy] = useState(void 0);
-	const [viewedResouce, setViewedResource] = useState();
-	const entities = useMemo(() => {
-		const ocelEntities = ocels.map(({ name, created_at, id, extensions }) => ({
-			id,
-			name,
-			type: "ocel",
-			entityTypes: extensions.map(({ label }) => label),
-			createdAt: formatDateTime(created_at),
-			downloadFormats: [
-				".xml",
-				".json",
-				".sqlite"
-			]
-		}));
-		const resourceEntities = resources.map(({ id, name, type, created_at }) => ({
-			id,
-			name,
-			entityTypes: [resourceMeta[type]?.label ?? type],
-			type: "resource",
-			createdAt: formatDateTime(dayjs_default(created_at).toISOString())
-		}));
-		return [...ocelEntities, ...resourceEntities];
-	}, [
-		ocels,
-		resources,
-		resourceMeta
-	]);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [viewedResouce && /* @__PURE__ */ jsx(ResourceModal, {
-		id: viewedResouce,
-		onClose: () => setViewedResource(void 0)
-	}), entities.length ? /* @__PURE__ */ jsx(DataTable, {
-		withTableBorder: true,
-		borderRadius: "md",
-		idAccessor: "id",
-		columns: [
-			{
-				accessor: "name",
-				render: ({ id, type, name }) => /* @__PURE__ */ jsx(Fragment, { children: renamedEntitiy?.id === id ? /* @__PURE__ */ jsxs(Group, { children: [/* @__PURE__ */ jsx(TextInput, {
-					variant: "unstyled",
-					value: renamedEntitiy.value,
-					style: { borderBottom: "1px solid #9ca3af" },
-					onChange: (e) => {
-						setRenamedEntitiy({
-							id,
-							value: e.target.value
-						});
-					}
-				}), /* @__PURE__ */ jsxs(Group, {
-					gap: "xs",
-					children: [/* @__PURE__ */ jsx(ActionIcon, {
-						color: "green",
-						m: 0,
-						onClick: () => {
-							renameEntitiy(id, type, renamedEntitiy.value);
-							setRenamedEntitiy(void 0);
-						},
-						children: /* @__PURE__ */ jsx(CheckIcon, { size: 16 })
-					}), /* @__PURE__ */ jsx(ActionIcon, {
-						color: "red",
-						m: 0,
-						onClick: () => {
-							setRenamedEntitiy(void 0);
-						},
-						children: /* @__PURE__ */ jsx(XIcon, { size: 16 })
-					})]
-				})] }) : name })
-			},
-			{ accessor: "createdAt" },
-			{
-				accessor: "entityTypes",
-				title: "Type",
-				render: ({ type, entityTypes }) => /* @__PURE__ */ jsx(Group, {
-					gap: "xs",
-					children: [...type === "ocel" ? ["OCEL"] : [], ...entityTypes].map((entityType) => /* @__PURE__ */ jsx(Badge, {
-						color: generateColor(entityType),
-						children: entityType
-					}, entityType))
-				})
-			},
-			{
-				accessor: "",
-				textAlign: "right",
-				width: "0%",
-				render: ({ type, id, name }) => /* @__PURE__ */ jsxs(Menu, {
-					width: 200,
-					position: "left-start",
-					children: [/* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(ActionIcon, {
-						variant: "subtle",
-						onClick: (e) => e.stopPropagation(),
-						children: /* @__PURE__ */ jsx(EllipsisVerticalIcon, { size: 20 })
-					}) }), /* @__PURE__ */ jsxs(Menu.Dropdown, {
-						onClick: (e) => e.stopPropagation(),
-						children: [
-							/* @__PURE__ */ jsx(Menu.Item, {
-								leftSection: /* @__PURE__ */ jsx(PencilIcon, { size: 16 }),
-								onClick: () => setRenamedEntitiy({
-									id,
-									value: name
-								}),
-								children: "Rename"
-							}),
-							type === "resource" && /* @__PURE__ */ jsx(MenuItem, {
-								leftSection: /* @__PURE__ */ jsx(EyeIcon, { size: 16 }),
-								onClick: () => setViewedResource(id),
-								children: "Inspect"
-							}),
-							type === "ocel" ? /* @__PURE__ */ jsxs(Menu.Sub, {
-								position: "right-start",
-								children: [/* @__PURE__ */ jsx(Menu.Sub.Target, { children: /* @__PURE__ */ jsx(Menu.Sub.Item, {
-									leftSection: /* @__PURE__ */ jsx(DownloadIcon, { size: 16 }),
-									children: "Download"
-								}) }), /* @__PURE__ */ jsx(Menu.Sub.Dropdown, { children: ocelExtenisions.map((extension) => /* @__PURE__ */ jsx(Menu.Item, {
-									onClick: () => downloadFile(`/ocels/download?${new URLSearchParams({
-										ocel_id: id,
-										ext: extension
-									}).toString()}`),
-									children: extension
-								}, extension)) })]
-							}) : /* @__PURE__ */ jsx(Menu.Item, {
-								onClick: () => downloadFile(`/resources/resource/${id}/download`),
-								leftSection: /* @__PURE__ */ jsx(DownloadIcon, { size: 16 }),
-								children: "Download"
-							}),
-							/* @__PURE__ */ jsx(Menu.Divider, {}),
-							/* @__PURE__ */ jsx(Menu.Item, {
-								leftSection: /* @__PURE__ */ jsx(TrashIcon, {
-									size: 16,
-									color: "red"
-								}),
-								color: "red",
-								fw: "bold",
-								onClick: () => deleteEntity(id, type),
-								children: "Delete"
-							})
-						]
-					})]
-				})
-			}
-		],
-		records: entities
-	}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Title, {
-		size: "h3",
-		children: "Upload"
-	}), /* @__PURE__ */ jsx(UploadSection_default, {})] })] });
-};
-var EntityTable_default = EntityTable;
-
-//#endregion
-//#region src/components/DefaultHomePage/DefaultHomePage.tsx
-const DefaultHomePage = ({ children }) => {
-	return /* @__PURE__ */ jsx(Container, {
-		h: "100%",
-		children: /* @__PURE__ */ jsxs(Stack, {
-			gap: "sm",
-			h: "100%",
-			children: [/* @__PURE__ */ jsx(EntityTable_default, {}), children]
-		})
-	});
-};
-var DefaultHomePage_default = DefaultHomePage;
-
-//#endregion
-//#region src/components/ModulePage.tsx
-const createModulesPage = (config) => {
-	const { modules = [], homePage: HomePage = DefaultHomePage_default } = config;
-	const getStaticPaths = async () => {
-		return {
-			paths: [...modules.flatMap(({ name: moduleName, routes }) => routes.map(({ name: routeName }) => ({ params: { slug: [
-				"modules",
-				moduleName,
-				routeName
-			] } }))), { params: { slug: [] } }],
-			fallback: false
-		};
-	};
-	const getStaticProps = async ({ params }) => {
-		const slugs = params?.["slug"] ?? [];
-		const moduleConfig = modules.find(({ name }) => name === slugs[1]);
-		const routeName = moduleConfig?.routes.find(({ name }) => name === slugs[2])?.name;
-		return moduleConfig && routeName ? { props: { moduleProps: {
-			moduleName: moduleConfig.name,
-			routeName
-		} } } : { props: {} };
-	};
-	const ModulePage = ({ moduleProps }) => {
-		const RouteComponent = modules.find(({ name }) => name === moduleProps?.moduleName)?.routes.find(({ name }) => name === moduleProps?.routeName)?.component;
-		return RouteComponent ? /* @__PURE__ */ jsx(RouteComponent, {}) : /* @__PURE__ */ jsx(HomePage, {});
-	};
-	return {
-		getStaticPaths,
-		getStaticProps,
-		ModulePage
-	};
-};
-
-//#endregion
-//#region src/store/currentOcelStore.ts
-const useCurrentOcelStore = create()(persist((set) => ({
-	ocelId: null,
-	setOcel: (id) => set({ ocelId: id }),
-	clearOcel: () => set({ ocelId: null })
-}), { name: env.current_ocel_id }));
-var currentOcelStore_default = useCurrentOcelStore;
-
-//#endregion
-//#region src/hooks/useCurrentOCEL.ts
-const useCurrentOcel = () => {
-	const { data: ocels = [] } = useGetOcels();
-	const { ocelId, setOcel, clearOcel } = currentOcelStore_default();
-	useEffect(() => {
-		if (ocelId && !ocels?.some(({ id }) => id === ocelId)) clearOcel();
-		if (!ocelId && ocels[0]) setOcel(ocels[0].id);
-	}, [
-		clearOcel,
-		setOcel,
-		ocels,
-		ocelId
-	]);
-	return {
-		id: ocelId,
-		setCurrentOcel: setOcel
-	};
-};
-
-//#endregion
-//#region src/components/OcelSelect/OcelSelect.tsx
-const OcelSelect = ({ extension, ...props }) => {
-	const { data } = useGetOcels(extension ? { extension_name: extension } : {});
-	const ocels = useMemo(() => data ?? [], [data]);
-	return /* @__PURE__ */ jsx(Select, {
-		...props,
-		data: ocels.map(({ name, id }) => ({
-			value: id,
-			label: name
-		}))
-	});
-};
-const CurrentOcelSelect = () => {
-	const { id, setCurrentOcel } = useCurrentOcel();
-	return /* @__PURE__ */ jsx(OcelSelect, {
-		value: id,
-		unselectable: "off",
-		onChange: (id$1) => {
-			if (id$1) setCurrentOcel(id$1);
-		}
-	});
-};
-
 //#endregion
 //#region src/components/UploadModal/UploadModal.tsx
 const UploadModal = ({ visible, onClose }) => {
@@ -520,46 +787,9 @@ const UploadModal = ({ visible, onClose }) => {
 		opened: visible,
 		onClose,
 		size: "xl",
-		children: /* @__PURE__ */ jsx(UploadSection_default, { onSuccess: onClose })
+		children: /* @__PURE__ */ jsx(UploadSection, { onSuccess: onClose })
 	});
 };
-var UploadModal_default = UploadModal;
-
-//#endregion
-//#region src/components/AppShell/AppShell.module.css?css_module
-const classes = {
-	"chevron": "_4Ar51a_chevron",
-	"linkIcon": "_4Ar51a_linkIcon",
-	"links": "_4Ar51a_links",
-	"navbar": "_4Ar51a_navbar",
-	"buttonIcon": "_4Ar51a_buttonIcon",
-	"link": "_4Ar51a_link",
-	"control": "_4Ar51a_control",
-	"header": "_4Ar51a_header",
-	"footer": "_4Ar51a_footer",
-	"button": "_4Ar51a_button"
-};
-var AppShell_module_default = classes;
-const _chevron0 = classes["chevron"];
-const _linkIcon0 = classes["linkIcon"];
-const _links0 = classes["links"];
-const _navbar0 = classes["navbar"];
-const _buttonIcon0 = classes["buttonIcon"];
-const _link0 = classes["link"];
-const _control0 = classes["control"];
-const _header0 = classes["header"];
-const _footer0 = classes["footer"];
-const _button0 = classes["button"];
-
-//#endregion
-//#region src/lib/getModuleRoute.ts
-const getModuleRoute = ({ moduleName, routeName, query }) => {
-	return {
-		pathname: `/modules/${moduleName}/${routeName}`,
-		...query && { query: { ...query } }
-	};
-};
-
 //#endregion
 //#region src/hooks/useModulePath.ts
 const useModulePath = (config) => {
@@ -574,77 +804,151 @@ const useModulePath = (config) => {
 		};
 	}, [moduleName, routeName]);
 };
-var useModulePath_default = useModulePath;
-
 //#endregion
-//#region src/components/AppShell/components/Header.tsx
+//#region src/lib/getModuleRoute.ts
+const getModuleRoute = ({ moduleName, routeName, query }) => {
+	return {
+		pathname: `/${moduleName}${routeName ? `/${routeName}` : ""}`,
+		...query && { query: { ...query } }
+	};
+};
+//#endregion
+//#region src/components/AppShell/AppShell.module.css
+var AppShell_module_default = {
+	"button": "rZS5FG_button",
+	"buttonIcon": "rZS5FG_buttonIcon",
+	"chevron": "rZS5FG_chevron",
+	"control": "rZS5FG_control",
+	"footer": "rZS5FG_footer",
+	"header": "rZS5FG_header",
+	"link": "rZS5FG_link",
+	"linkIcon": "rZS5FG_linkIcon",
+	"links": "rZS5FG_links",
+	"navbar": "rZS5FG_navbar"
+};
+//#endregion
+//#region src/components/AppShell/components/NavBar.tsx
+const LogoutButton = () => {
+	const [isModalOpen, setIsModalOpen] = useState(false);
+	const queryClient = useQueryClient();
+	const { push } = useRouter();
+	const { mutate: logout } = useLogout({ mutation: { onSuccess: () => {
+		queryClient.clear();
+		setIsModalOpen(false);
+		push("/");
+	} } });
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Modal, {
+		opened: isModalOpen,
+		onClose: () => setIsModalOpen(false),
+		title: "Are you sure?",
+		children: [/* @__PURE__ */ jsxs(Text, { children: [
+			"If you leave now, all your data and progress will be",
+			" ",
+			/* @__PURE__ */ jsx("strong", { children: "deleted permanently" }),
+			". This action cannot be undone."
+		] }), /* @__PURE__ */ jsx(Button, {
+			color: "red",
+			mt: "md",
+			onClick: () => {
+				logout();
+			},
+			fullWidth: true,
+			children: "Accept"
+		})]
+	}), /* @__PURE__ */ jsx(UnstyledButton, {
+		className: AppShell_module_default.button ?? "",
+		onClick: () => setIsModalOpen(true),
+		children: /* @__PURE__ */ jsxs(Group, {
+			justify: "space-between",
+			w: "100%",
+			children: [/* @__PURE__ */ jsx(Text, {
+				style: { lineHeight: 1 },
+				children: "Logout"
+			}), /* @__PURE__ */ jsx(LogOutIcon, { className: AppShell_module_default.buttonIcon })]
+		})
+	})] });
+};
+const NavbarGroup = ({ modules, modulePath, isOcelAvailable }) => {
+	return modules.map(({ label, name, icon: Icon = PackageIcon, routes }) => {
+		const isModuleDisabled = !Object.values(routes).some(({ requiresOcel }) => !requiresOcel) && !isOcelAvailable;
+		return /* @__PURE__ */ jsx(NavLink, {
+			leftSection: /* @__PURE__ */ jsx(Icon, {
+				width: 18,
+				height: 18,
+				size: 18
+			}),
+			label,
+			defaultOpened: name === modulePath?.moduleName,
+			component: Link,
+			href: getModuleRoute({ moduleName: name }),
+			disabled: isModuleDisabled,
+			...isModuleDisabled ? { opened: false } : {},
+			active: Object.keys(routes).length === 1 && name === modulePath?.moduleName,
+			children: Object.keys(routes).length > 1 && Object.values(routes).map(({ label: routeLabel, name: routeName, requiresOcel }) => /* @__PURE__ */ jsx(NavLink, {
+				label: routeLabel,
+				href: getModuleRoute({
+					moduleName: name,
+					routeName
+				}),
+				disabled: !!requiresOcel && !isOcelAvailable,
+				component: Link,
+				active: name === modulePath?.moduleName && routeName === modulePath.routeName
+			}, routeName))
+		}, name);
+	});
+};
 const NavBar = ({ config }) => {
-	const { modules = [] } = config;
-	const router = useRouter();
-	const modulePath = useModulePath_default(config);
+	const { modules = [], navbarGroups } = config;
+	const modulePath = useModulePath(config);
 	const { data: ocels } = useGetOcels();
 	const isOcelAvailable = ocels?.length !== 0;
+	const moduleGroups = useMemo(() => {
+		if (!navbarGroups) return [{
+			title: void 0,
+			modules
+		}];
+		const groupedModuleNames = navbarGroups.flatMap(({ modulesNames }) => modulesNames);
+		const ungroupedModules = modules.filter(({ name }) => !groupedModuleNames.includes(name));
+		return [...navbarGroups.map(({ modulesNames, title }) => ({
+			title,
+			modules: modulesNames.map((moduleName) => modules.find(({ name }) => name === moduleName)).filter((module) => !!module)
+		})), ...ungroupedModules.length > 0 ? [{
+			title: void 0,
+			modules: ungroupedModules
+		}] : []];
+	}, [modules, navbarGroups]);
 	return /* @__PURE__ */ jsx(AppShell.Navbar, {
-		className: AppShell_module_default["navbar"] ?? "",
+		className: AppShell_module_default.navbar ?? "",
 		children: /* @__PURE__ */ jsxs(Stack, {
 			justify: "space-between",
 			h: "100%",
 			gap: 0,
-			children: [/* @__PURE__ */ jsxs(Stack, {
-				gap: 0,
-				flex: 1,
-				children: [
-					/* @__PURE__ */ jsx(NavLink, {
-						component: Link,
-						href: "/",
-						label: "Home",
-						leftSection: /* @__PURE__ */ jsx(HomeIcon, { size: 16 }),
-						active: router.asPath === "/"
-					}),
-					/* @__PURE__ */ jsx(Divider, {}),
-					modules.map(({ label, name, icon: Icon = PackageIcon, routes }) => {
-						const isModuleDisabled = !Object.values(routes).some(({ requiresOcel }) => !requiresOcel) && !isOcelAvailable;
-						return /* @__PURE__ */ jsx(NavLink, {
-							leftSection: /* @__PURE__ */ jsx(Icon, {
-								width: 18,
-								height: 18,
-								size: 18
-							}),
-							label,
-							defaultOpened: name === modulePath?.moduleName,
-							component: Link,
-							href: getModuleRoute({
-								moduleName: name,
-								routeName: routes[0]?.name ?? ""
-							}),
-							disabled: isModuleDisabled,
-							...isModuleDisabled ? { opened: false } : {},
-							active: Object.keys(routes).length === 1 && name === modulePath?.moduleName,
-							children: Object.keys(routes).length > 1 && Object.values(routes).map(({ label: routeLabel, name: routeName, requiresOcel }) => /* @__PURE__ */ jsx(NavLink, {
-								label: routeLabel,
-								href: getModuleRoute({
-									moduleName: name,
-									routeName
-								}),
-								disabled: !!requiresOcel && !isOcelAvailable,
-								component: Link,
-								active: name === modulePath?.moduleName && routeName === modulePath.moduleName
-							}, routeName))
-						}, name);
-					})
-				]
-			}), /* @__PURE__ */ jsx(Divider, {})]
+			children: [
+				/* @__PURE__ */ jsx(Stack, {
+					gap: 0,
+					flex: 1,
+					children: moduleGroups.map(({ modules, title }, index) => /* @__PURE__ */ jsxs(Fragment, { children: [index > 0 && /* @__PURE__ */ jsx(Divider, {
+						label: title,
+						my: !title ? 9 : void 0
+					}), /* @__PURE__ */ jsx(NavbarGroup, {
+						modules,
+						isOcelAvailable,
+						modulePath
+					})] }, index))
+				}),
+				/* @__PURE__ */ jsx(Divider, {}),
+				/* @__PURE__ */ jsx(LogoutButton, {})
+			]
 		})
 	});
 };
-var Header_default = NavBar;
-
 //#endregion
 //#region src/components/AppShell/AppShell.tsx
 const AppShell$1 = ({ config, children }) => {
 	const [mobileOpened, { toggle: toggleMobile }] = useDisclosure(true);
 	const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);
 	const [isUploadModalVisible, setIsUploadModalVisible] = useState(false);
+	const [isHelpModalVisible, setIsHelpModalVisible] = useState(false);
 	return /* @__PURE__ */ jsxs(AppShell, {
 		header: { height: 60 },
 		navbar: {
@@ -663,17 +967,25 @@ const AppShell$1 = ({ config, children }) => {
 				justify: "space-between",
 				children: [/* @__PURE__ */ jsxs(Group, {
 					align: "center",
-					children: [/* @__PURE__ */ jsx(Burger, {
-						opened: mobileOpened,
-						onClick: toggleMobile,
-						hiddenFrom: "sm",
-						size: "sm"
-					}), /* @__PURE__ */ jsx(Burger, {
-						opened: desktopOpened,
-						onClick: toggleDesktop,
-						visibleFrom: "sm",
-						size: "sm"
-					})]
+					children: [
+						/* @__PURE__ */ jsx(Burger, {
+							opened: mobileOpened,
+							onClick: toggleMobile,
+							hiddenFrom: "sm",
+							size: "sm"
+						}),
+						/* @__PURE__ */ jsx(Burger, {
+							opened: desktopOpened,
+							onClick: toggleDesktop,
+							visibleFrom: "sm",
+							size: "sm"
+						}),
+						/* @__PURE__ */ jsx(Text, {
+							size: "xs",
+							c: "dimmed",
+							children: env.appVersion
+						})
+					]
 				}), /* @__PURE__ */ jsxs(Group, { children: [
 					/* @__PURE__ */ jsx(CurrentOcelSelect, {}),
 					/* @__PURE__ */ jsx(Button, {
@@ -681,20 +993,30 @@ const AppShell$1 = ({ config, children }) => {
 						onClick: () => setIsUploadModalVisible(true),
 						children: "Upload"
 					}),
-					/* @__PURE__ */ jsx(UploadModal_default, {
+					/* @__PURE__ */ jsx(UploadModal, {
 						visible: isUploadModalVisible,
 						onClose: () => setIsUploadModalVisible(false)
+					}),
+					/* @__PURE__ */ jsx(ActionIcon, {
+						variant: "subtle",
+						"aria-label": "Help",
+						onClick: () => setIsHelpModalVisible(true),
+						children: /* @__PURE__ */ jsx(HelpCircleIcon, { size: 20 })
+					}),
+					/* @__PURE__ */ jsx(HelpModal, {
+						visible: isHelpModalVisible,
+						onClose: () => setIsHelpModalVisible(false)
 					})
 				] })]
 			}) }),
-			/* @__PURE__ */ jsx(Header_default, { config }),
+			/* @__PURE__ */ jsx(NavBar, { config }),
 			/* @__PURE__ */ jsx(AppShell.Main, {
 				style: { overflow: "hidden" },
 				h: "calc(100dvh - var(--app-shell-header-offset, 0rem) - var(--app-shell-footer-height, 0px) + var(--app-shell-padding, 0))",
 				children: /* @__PURE__ */ jsx(Box, {
 					h: "100%",
 					style: {
-						overflow: "scroll",
+						overflow: "auto",
 						position: "relative"
 					},
 					children
@@ -703,23 +1025,146 @@ const AppShell$1 = ({ config, children }) => {
 		]
 	});
 };
-
+//#endregion
+//#region src/lib/sse.ts
+const OCELLink = z.object({
+	type: z.literal("ocel"),
+	ocel_id: z.string()
+});
+const ResourceLink = z.object({
+	type: z.literal("resource"),
+	resource_id: z.string()
+});
+const PluginLink = z.object({
+	type: z.literal("plugin"),
+	id: z.string(),
+	method: z.string(),
+	task_id: z.string()
+});
+const SystemLink = z.discriminatedUnion("type", [
+	OCELLink,
+	ResourceLink,
+	PluginLink
+]);
+const SystemNotification = z.object({
+	type: z.literal("notification"),
+	title: z.string(),
+	message: z.string(),
+	notification_type: z.enum([
+		"warning",
+		"info",
+		"error"
+	]),
+	link: SystemLink.nullish()
+});
+const InvalidationRequest = z.object({
+	type: z.literal("invalidation"),
+	routes: z.array(z.enum([
+		"ocels",
+		"resources",
+		"tasks",
+		"plugins"
+	]))
+});
+const ErrorNotification = z.object({
+	type: z.literal("error"),
+	title: z.string(),
+	message: z.string(),
+	trace: z.string()
+});
+const ServerEventMessage = z.discriminatedUnion("type", [
+	SystemNotification,
+	InvalidationRequest,
+	ErrorNotification
+]);
+//#endregion
+//#region src/components/SSEWrapper.tsx
+const SSEWrapper = () => {
+	const { sessionId } = useSessionStore();
+	const invalidate = useInvalidate();
+	useEffect(() => {
+		if (!sessionId) return;
+		const es = new EventSource(`${env$1.event_url}?sessionId=${sessionId}`);
+		es.onmessage = async (event) => {
+			const result = ServerEventMessage.safeParse(JSON.parse(event.data));
+			if (!result.success) {
+				console.warn("Invalid SSE message", event.data, result.error);
+				return;
+			}
+			const message = result.data;
+			switch (message.type) {
+				case "notification":
+					showNotification({
+						title: message.title,
+						message: message.message,
+						color: "green"
+					});
+					break;
+				case "error":
+					showNotification({
+						title: message.title,
+						color: "red",
+						autoClose: 6e4,
+						message: /* @__PURE__ */ jsxs(Stack, {
+							gap: 6,
+							align: "flex-start",
+							children: [/* @__PURE__ */ jsx(Text, {
+								size: "sm",
+								style: { flex: 1 },
+								lineClamp: 2,
+								children: message.message
+							}), /* @__PURE__ */ jsx(CopyButton, {
+								value: message.trace ?? "",
+								timeout: 1500,
+								children: ({ copied, copy }) => /* @__PURE__ */ jsx(Text, {
+									size: "xs",
+									c: copied ? "teal" : "red",
+									td: "underline",
+									style: {
+										cursor: "pointer",
+										whiteSpace: "nowrap",
+										marginTop: 2
+									},
+									onClick: copy,
+									children: copied ? "Copied" : "Copy trace"
+								})
+							})]
+						})
+					});
+					break;
+				case "invalidation": await invalidate(message.routes);
+			}
+		};
+		es.onerror = (err) => {
+			console.error("SSE error:", err);
+		};
+		return () => es.close();
+	}, [sessionId, invalidate]);
+	return null;
+};
 //#endregion
 //#region src/components/OcelescopeApp.tsx
+const theme = createTheme({ fontWeights: { medium: "500" } });
 const OcelescopeApp = (config) => ({ Component, pageProps }) => {
 	const [client] = useState(() => new QueryClient());
 	return /* @__PURE__ */ jsxs(QueryClientProvider, {
 		client,
 		children: [/* @__PURE__ */ jsx(HydrationBoundary, {
 			state: pageProps.dehydratedState,
-			children: /* @__PURE__ */ jsx(MantineProvider, { children: /* @__PURE__ */ jsx(AppShell$1, {
-				config,
-				children: /* @__PURE__ */ jsx(Component, { ...pageProps })
-			}) })
+			children: /* @__PURE__ */ jsxs(MantineProvider, {
+				theme,
+				children: [
+					/* @__PURE__ */ jsx(SSEWrapper, {}),
+					/* @__PURE__ */ jsx(Notifications, {}),
+					/* @__PURE__ */ jsx(AppShell$1, {
+						config,
+						children: /* @__PURE__ */ jsx(Component, { ...pageProps })
+					})
+				]
+			})
 		}), /* @__PURE__ */ jsx(ReactQueryDevtools, {})]
 	});
 };
-
 //#endregion
 //#region src/components/OcelescopeDocument.tsx
 const OcelescopeDocument = () => {
@@ -729,11 +1174,298 @@ const OcelescopeDocument = () => {
 		children: [/* @__PURE__ */ jsx(Head, { children: /* @__PURE__ */ jsx(ColorSchemeScript, { defaultColorScheme: "auto" }) }), /* @__PURE__ */ jsxs("body", { children: [/* @__PURE__ */ jsx(Main, {}), /* @__PURE__ */ jsx(NextScript, {})] })]
 	});
 };
-
+//#endregion
+//#region src/components/RelationTable.tsx
+const PAGE_SIZE = 10;
+const COLUMN_WIDTHS = {
+	selector: 30,
+	source: 220,
+	target: 220,
+	qualifier: 220,
+	range: 160,
+	total: 120
+};
+const relationId = ({ source, target }) => `${source} ${target}`;
+const SubRelationTable = ({ ocelId, relationType, direction, source, target, hideRange = false, hideTotal = false, ocelVersion, extraColumns = [] }) => {
+	const { data, isFetching } = (relationType === "e2o" ? useE2o : useO2o)(ocelId, {
+		direction,
+		source_types: [source],
+		target_types: [target],
+		with_qualifier: true,
+		ocel_version: ocelVersion
+	}, { query: { placeholderData: keepPreviousData } });
+	const columns = useMemo(() => [
+		{
+			accessor: "selector",
+			title: "",
+			width: COLUMN_WIDTHS.selector
+		},
+		{
+			accessor: "source",
+			title: "",
+			width: COLUMN_WIDTHS.source,
+			render: () => null
+		},
+		{
+			accessor: "target",
+			title: "",
+			width: COLUMN_WIDTHS.target,
+			render: () => null
+		},
+		{
+			accessor: "qualifier",
+			title: "Qualifier",
+			width: COLUMN_WIDTHS.qualifier,
+			render: ({ qualifier }) => qualifier || /* @__PURE__ */ jsx("i", { children: "No qualifier" })
+		},
+		{
+			accessor: "range",
+			title: "Range",
+			width: COLUMN_WIDTHS.range,
+			render: ({ min_count, max_count }) => `${min_count} - ${max_count}`,
+			hidden: hideRange
+		},
+		{
+			accessor: "sum",
+			title: "Total",
+			width: COLUMN_WIDTHS.total,
+			hidden: hideTotal
+		},
+		...extraColumns
+	], [
+		hideRange,
+		hideTotal,
+		extraColumns
+	]);
+	return /* @__PURE__ */ jsx(DataTable, {
+		noHeader: true,
+		idAccessor: "qualifier",
+		records: data?.response ?? [],
+		columns,
+		fetching: isFetching,
+		backgroundColor: {
+			light: "gray.0",
+			dark: "dark.6"
+		}
+	});
+};
+const RelationTable = ({ ocelId, relationType = "o2o", direction = "source", extraColumns = [], subTableExtraColumns, hideRange = false, hideTotal = false, ocelVersion, visibleRelations }) => {
+	const isE2O = relationType === "e2o";
+	const isSource = direction === "source";
+	const [currentPage, setCurrentPage] = useState(1);
+	const { data: combinations = [] } = (isE2O ? useE2oCombinations : useO2oCombinations)(ocelId, {
+		direction,
+		ocel_version: ocelVersion
+	});
+	const sourceOptions = useMemo(() => Array.from(new Set(combinations.map(({ source }) => source))), [combinations]);
+	const targetOptions = useMemo(() => Array.from(new Set(combinations.map(({ target }) => target))), [combinations]);
+	const qualifierOptions = useMemo(() => Array.from(new Set(combinations.map(({ qualifier }) => qualifier))), [combinations]);
+	const sourceTitle = isE2O ? isSource ? "Activity" : "Object Type" : "Source";
+	const targetTitle = isE2O ? isSource ? "Object Type" : "Activity" : "Target";
+	const [filteredSources, setFilteredSources] = useState([]);
+	const [filteredTargets, setFilteredTargets] = useState([]);
+	const [filteredQualifiers, setFilteredQualifiers] = useState([]);
+	const isConstrained = visibleRelations !== void 0;
+	const visibleSources = useMemo(() => isConstrained ? Array.from(new Set(visibleRelations.map(({ source }) => source))) : [], [isConstrained, visibleRelations]);
+	const visibleTargets = useMemo(() => isConstrained ? Array.from(new Set(visibleRelations.map(({ target }) => target))) : [], [isConstrained, visibleRelations]);
+	const sourceSelectOptions = isConstrained ? sourceOptions.filter((option) => visibleSources.includes(option)) : sourceOptions;
+	const targetSelectOptions = isConstrained ? targetOptions.filter((option) => visibleTargets.includes(option)) : targetOptions;
+	const effectiveSources = useMemo(() => {
+		if (!isConstrained) return filteredSources;
+		return filteredSources.length > 0 ? filteredSources.filter((source) => visibleSources.includes(source)) : visibleSources;
+	}, [
+		isConstrained,
+		filteredSources,
+		visibleSources
+	]);
+	const effectiveTargets = useMemo(() => {
+		if (!isConstrained) return filteredTargets;
+		return filteredTargets.length > 0 ? filteredTargets.filter((target) => visibleTargets.includes(target)) : visibleTargets;
+	}, [
+		isConstrained,
+		filteredTargets,
+		visibleTargets
+	]);
+	const showNoRelations = isConstrained && (effectiveSources.length === 0 || effectiveTargets.length === 0);
+	const { data, isFetching } = (isE2O ? useE2o : useO2o)(ocelId, {
+		direction,
+		page: currentPage,
+		page_size: PAGE_SIZE,
+		with_qualifier: false,
+		ocel_version: ocelVersion,
+		...effectiveSources.length > 0 && { source_types: effectiveSources },
+		...effectiveTargets.length > 0 && { target_types: effectiveTargets },
+		...filteredQualifiers.length > 0 && { qualifiers: filteredQualifiers }
+	}, { query: {
+		placeholderData: keepPreviousData,
+		enabled: !showNoRelations
+	} });
+	const [selectedRelations, setSelectedRelations] = useState([]);
+	const columns = useMemo(() => [
+		{
+			accessor: "selector",
+			title: "",
+			textAlign: "center",
+			width: COLUMN_WIDTHS.selector,
+			cellsStyle: () => ({ padding: 5 }),
+			render: (record) => {
+				if ((record.qualifiers?.length ?? 0) <= 1) return null;
+				return /* @__PURE__ */ jsx(ThemeIcon, {
+					size: "sm",
+					variant: "transparent",
+					style: { display: "flex" },
+					children: selectedRelations.includes(relationId(record)) ? /* @__PURE__ */ jsx(ChevronDownIcon, { size: 16 }) : /* @__PURE__ */ jsx(ChevronRightIcon, { size: 16 })
+				});
+			}
+		},
+		{
+			accessor: "source",
+			title: sourceTitle,
+			width: COLUMN_WIDTHS.source,
+			filter: () => /* @__PURE__ */ jsx(MultiSelect, {
+				data: sourceSelectOptions,
+				value: filteredSources,
+				onChange: setFilteredSources,
+				comboboxProps: { withinPortal: false },
+				clearable: true,
+				searchable: true
+			}),
+			filtering: filteredSources.length > 0
+		},
+		{
+			accessor: "target",
+			title: targetTitle,
+			width: COLUMN_WIDTHS.target,
+			filter: () => /* @__PURE__ */ jsx(MultiSelect, {
+				data: targetSelectOptions,
+				value: filteredTargets,
+				onChange: setFilteredTargets,
+				comboboxProps: { withinPortal: false },
+				clearable: true,
+				searchable: true
+			}),
+			filtering: filteredTargets.length > 0
+		},
+		{
+			accessor: "qualifiers",
+			title: "Qualifiers",
+			width: COLUMN_WIDTHS.qualifier,
+			render: ({ qualifiers = [] }) => {
+				const labels = qualifiers.map((qualifier) => qualifier || "No qualifier");
+				return `${labels.slice(0, 2).join(", ")}${labels.length > 2 ? `, ... (${labels.length})` : ""}`;
+			},
+			filter: () => /* @__PURE__ */ jsx(MultiSelect, {
+				data: qualifierOptions,
+				value: filteredQualifiers,
+				onChange: setFilteredQualifiers,
+				comboboxProps: { withinPortal: false },
+				clearable: true,
+				searchable: true
+			}),
+			filtering: filteredQualifiers.length > 0
+		},
+		{
+			accessor: "range",
+			title: "Range",
+			width: COLUMN_WIDTHS.range,
+			render: ({ min_count, max_count }) => `${min_count} - ${max_count}`,
+			hidden: hideRange
+		},
+		{
+			accessor: "sum",
+			title: "Total",
+			width: COLUMN_WIDTHS.total,
+			hidden: hideTotal
+		},
+		...extraColumns
+	], [
+		sourceTitle,
+		targetTitle,
+		sourceSelectOptions,
+		targetSelectOptions,
+		qualifierOptions,
+		filteredSources,
+		filteredTargets,
+		filteredQualifiers,
+		selectedRelations,
+		hideRange,
+		hideTotal,
+		extraColumns
+	]);
+	return /* @__PURE__ */ jsx(DataTable, {
+		idAccessor: relationId,
+		records: showNoRelations ? [] : data?.response,
+		columns,
+		withTableBorder: true,
+		fetching: isFetching,
+		totalRecords: showNoRelations ? 0 : data?.total_items ?? 0,
+		page: currentPage,
+		recordsPerPage: PAGE_SIZE,
+		onPageChange: setCurrentPage,
+		noRecordsText: "No relations found",
+		height: 500,
+		rowExpansion: {
+			allowMultiple: false,
+			expandable: ({ record }) => (record.qualifiers?.length ?? 0) > 1,
+			expanded: {
+				recordIds: selectedRelations,
+				onRecordIdsChange: setSelectedRelations
+			},
+			content: ({ record }) => /* @__PURE__ */ jsx(SubRelationTable, {
+				ocelId,
+				relationType,
+				direction,
+				source: record.source,
+				target: record.target,
+				hideRange,
+				hideTotal,
+				ocelVersion,
+				extraColumns: subTableExtraColumns
+			})
+		}
+	});
+};
+//#endregion
+//#region src/hooks/useDownload.ts
+const useDownloadFile = () => {
+	const { sessionId } = useSessionStore();
+	const downloadFile = async (path) => {
+		try {
+			const response = await fetch(path, {
+				method: "GET",
+				headers: { [env$1.session_id]: sessionId ?? "" }
+			});
+			if (!response.ok) throw new Error("Failed to download file");
+			const blob = await response.blob();
+			const contentDisposition = parse(response.headers.get("Content-Disposition") ?? "");
+			const fileName = contentDisposition.attachment ? contentDisposition.filename : "fileName";
+			FileSaver.saveAs(blob, fileName);
+		} catch (err) {
+			console.error("Download error:", err);
+		}
+	};
+	return downloadFile;
+};
+const useDownloadFromServer = (getQueryKey) => () => {
+	const downloadFile = useDownloadFile();
+	return { download: (...params) => {
+		const result = getQueryKey(...params);
+		const path = result[0];
+		const searchParams = result[1];
+		const queryString = qs.stringify(searchParams, {
+			skipNulls: true,
+			indices: false
+		});
+		downloadFile(queryString ? `${path}?${queryString}` : path);
+	} };
+};
+const useDownloadOCEL = useDownloadFromServer(getDownloadOCELQueryKey);
+const useDownloadFlatOCEL = useDownloadFromServer(getDownloadFlatLogQueryKey);
+const useDownloadResource = useDownloadFromServer(getDownloadResourceQueryKey);
+const useDownloadResourceAsPnml = useDownloadFromServer(getDownloadResourceAsPnmlQueryKey);
 //#endregion
 //#region src/lib/config.ts
 const defineModule = (def) => def;
 const defineModuleRoute = (def) => def;
-
 //#endregion
-export { OcelescopeApp, OcelescopeDocument, createModulesPage, defineModule, defineModuleRoute, getModuleRoute, useCurrentOcel };
+export { AttributesTable, BarList, FileDropzone, HelpModal, OcelSelect, OcelescopeApp, OcelescopeDocument, RelationTable, UploadModal, UploadSection, createModulesPage, defineModule, defineModuleRoute, env, formatAttributeValue, getModuleRoute, sseHandler, useCurrentOcel, useDownloadFile, useDownloadFlatOCEL, useDownloadOCEL, useDownloadResource, useDownloadResourceAsPnml, useInvalidate };