@ocelescope/core 0.10.2 → 0.11.0

package/dist/index.js

@@ -1,5 +1,5 @@
-import { t as useCurrentOcel } from "./useCurrentOCEL-BeBa7K0g.js";
-import { t as useOcelQuery } from "./useOcelQuery-D1QM-Zgv.js";
+import { t as useCurrentOcel } from "./useCurrentOCEL-BUH5XGje.js";
+import { t as useOcelQuery } from "./useOcelQuery-6vtgZNzz.js";
 import { ActionIcon, Anchor, AppShell, Box, Burger, Button, Center, ColorSchemeScript, CopyButton, Divider, Group, LoadingOverlay, MantineProvider, Modal, MultiSelect, NavLink, Select, Stack, Table, Text, ThemeIcon, Tooltip, UnstyledButton, createTheme, mantineHtmlProps, useMantineTheme } from "@mantine/core";
 import { getDownloadFlatLogQueryKey, getDownloadOCELQueryKey, getDownloadResourceAsPnmlQueryKey, getDownloadResourceQueryKey, getDownloadVariantFlatLogQueryKey, 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";
@@ -9,6 +9,7 @@ import { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, use
 import dayjs from "dayjs";
 import isBetween from "dayjs/plugin/isBetween.js";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
 import dynamic from "next/dynamic.js";
 import { Dropzone } from "@mantine/dropzone";
 import { Readable } from "node:stream";
@@ -24,11 +25,10 @@ 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
+// src/lib/dayjs.ts
 dayjs.extend(isBetween);
 const formatDateTime = (dateString) => dayjs(dateString).format("YYYY-MM-DD HH:mm");
-//#endregion
-//#region src/lib/attributes.ts
+// src/lib/attributes.ts
 const formatAttributeValue = (type, value) => {
 	switch (type) {
 		case "int": return value.toLocaleString("en-US");
@@ -37,8 +37,7 @@ const formatAttributeValue = (type, value) => {
 		default: return value;
 	}
 };
-//#endregion
-//#region src/components/AttributeTable.tsx
+// src/components/AttributeTable.tsx
 const PAGE_SIZE$1 = 10;
 const COLUMN_WIDTHS$1 = {
 	selector: 30,
@@ -48,12 +47,13 @@ const COLUMN_WIDTHS$1 = {
 	range: 200,
 	distinctValues: 120
 };
-const SubAttributeTable = ({ ocelId, entityType = "objects", attributeName, entityNames, hideRange = false, hideValues = false, ocelVersion, extraColumns = [] }) => {
+const SubAttributeTable = ({ ocelId, entityType = "objects", attributeName, entityNames, hideRange = false, hideValues = false, ocelVersion, viewId, extraColumns = [] }) => {
 	const isEvent = entityType === "events";
 	const { data, isFetching } = (isEvent ? useEventAttributes : useObjectAttributes)(ocelId, {
 		attribute_names: [attributeName],
 		names: entityNames,
-		ocel_version: ocelVersion
+		ocel_version: ocelVersion,
+		view_id: viewId
 	}, { query: { placeholderData: keepPreviousData } });
 	const columns = useMemo(() => [
 		{
@@ -108,15 +108,19 @@ const SubAttributeTable = ({ ocelId, entityType = "objects", attributeName, enti
 		}
 	});
 };
-const AttributesTable = ({ ocelId, entityType = "objects", extraColumns = [], hideRange = false, hideValues = false, subTableExtraColumns, ocelVersion, alwaysExpandable = false, visibleAttributes, height, className, style }) => {
+const AttributesTable = ({ ocelId, entityType = "objects", extraColumns = [], hideRange = false, hideValues = false, subTableExtraColumns, ocelVersion, viewId, alwaysExpandable = false, visibleAttributes, height, className, style }) => {
 	const isEvent = entityType === "events";
 	const [currentPage, setCurrentPage] = useState(1);
 	const { data: attributeNames } = useAttributeNames(ocelId, {
 		entity_type: entityType,
-		ocel_version: ocelVersion
+		ocel_version: ocelVersion,
+		view_id: viewId
 	});
 	const [filteredAttributes, setFilteredAttributes] = useState([]);
-	const { data: entityNames } = (isEvent ? useActivities : useObjectTypes)(ocelId, { ocel_version: ocelVersion });
+	const { data: entityNames } = (isEvent ? useActivities : useObjectTypes)(ocelId, {
+		ocel_version: ocelVersion,
+		view_id: viewId
+	});
 	const [filteredEntityNames, setFilteredEntityNames] = useState([]);
 	const isConstrained = visibleAttributes !== void 0;
 	const attributeNameOptions = useMemo(() => {
@@ -141,6 +145,7 @@ const AttributesTable = ({ ocelId, entityType = "objects", extraColumns = [], hi
 		page: currentPage,
 		page_size: PAGE_SIZE$1,
 		ocel_version: ocelVersion,
+		view_id: viewId,
 		...effectiveAttributeNames.length > 0 && { attribute_names: effectiveAttributeNames },
 		...filteredEntityNames.length > 0 && { entity_names: filteredEntityNames }
 	}, { query: {
@@ -257,13 +262,13 @@ const AttributesTable = ({ ocelId, entityType = "objects", extraColumns = [], hi
 				hideRange,
 				hideValues,
 				ocelVersion,
+				viewId,
 				...filteredEntityNames.length > 0 && { entityNames: filteredEntityNames }
 			})
 		}
 	});
 };
-//#endregion
-//#region src/components/BarList/BarList.module.css
+// src/components/BarList/BarList.module.css
 var BarList_module_default = {
 	"bar": "uf8oba_bar",
 	"barCell": "uf8oba_barCell",
@@ -276,9 +281,8 @@ var BarList_module_default = {
 	"scrollArea": "uf8oba_scrollArea",
 	"toggleRow": "uf8oba_toggleRow"
 };
-//#endregion
-//#region src/components/BarList/BarList.tsx
-const BarList = ({ data, labelHeader, valueHeader = "Frequency", maxVisibleItems = 8 }) => {
+// src/components/BarList/BarList.tsx
+const BarList = ({ data, labelHeader, valueHeader = "Frequency", maxVisibleItems = 8, className, style }) => {
 	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]);
@@ -296,7 +300,8 @@ const BarList = ({ data, labelHeader, valueHeader = "Frequency", maxVisibleItems
 		maxVisibleItems
 	]);
 	return /* @__PURE__ */ jsxs("div", {
-		className: BarList_module_default.container,
+		className: clsx(BarList_module_default.container, className),
+		style,
 		children: [/* @__PURE__ */ jsx("div", {
 			ref: scrollRef,
 			className: BarList_module_default.scrollArea,
@@ -361,20 +366,18 @@ const BarList = ({ data, labelHeader, valueHeader = "Frequency", maxVisibleItems
 		})]
 	});
 };
-//#endregion
-//#region src/components/charts/index.tsx
+// src/components/charts/index.tsx
 const browserOnly = (load) => dynamic(load, { ssr: false });
-const BarChart = browserOnly(() => import("./BarChart-BLZS87ex.js").then((n) => n.n).then((module) => module.BarChart));
-const HistogramChart = browserOnly(() => import("./HistogramChart-GgiQdlsk.js").then((n) => n.n).then((module) => module.HistogramChart));
-const LineChart = browserOnly(() => import("./LineChart-Cq935Tk2.js").then((n) => n.n).then((module) => module.LineChart));
-const AreaChart = browserOnly(() => import("./AreaChart-q6rVcUIp.js").then((n) => n.n).then((module) => module.AreaChart));
-const ScatterChart = browserOnly(() => import("./ScatterChart-DJfJmABJ.js").then((n) => n.n).then((module) => module.ScatterChart));
-const PieChart = browserOnly(() => import("./PieChart-DZFHaTXD.js").then((n) => n.n).then((module) => module.PieChart));
-const SunburstChart = browserOnly(() => import("./SunburstChart-CMNYlKon.js").then((n) => n.n).then((module) => module.SunburstChart));
-const SqlChart = browserOnly(() => import("./SqlChart-Bf7D5o5P.js").then((module) => module.SqlChart));
-const OcelChart = browserOnly(() => import("./OcelChart-BnXjHb_r.js").then((module) => module.OcelChart));
-//#endregion
-//#region src/components/Dropzone/Dropzone.module.css
+const BarChart = browserOnly(() => import("./BarChart-CyMePf1z.js").then((n) => n.n).then((module) => module.BarChart));
+const HistogramChart = browserOnly(() => import("./HistogramChart-CJwvvDUu.js").then((n) => n.n).then((module) => module.HistogramChart));
+const LineChart = browserOnly(() => import("./LineChart-Cbxnm338.js").then((n) => n.n).then((module) => module.LineChart));
+const AreaChart = browserOnly(() => import("./AreaChart-BSwN1fMp.js").then((n) => n.n).then((module) => module.AreaChart));
+const ScatterChart = browserOnly(() => import("./ScatterChart-CASPRlZU.js").then((n) => n.n).then((module) => module.ScatterChart));
+const PieChart = browserOnly(() => import("./PieChart-BmMoI0TY.js").then((n) => n.n).then((module) => module.PieChart));
+const SunburstChart = browserOnly(() => import("./SunburstChart-Ddx9EaL-.js").then((n) => n.n).then((module) => module.SunburstChart));
+const SqlChart = browserOnly(() => import("./SqlChart-cxKpWkyh.js").then((module) => module.SqlChart));
+const OcelChart = browserOnly(() => import("./OcelChart-DJNM5peW.js").then((module) => module.OcelChart));
+// src/components/Dropzone/Dropzone.module.css
 var Dropzone_module_default = {
 	"control": "IgW5Wa_control",
 	"description": "IgW5Wa_description",
@@ -382,8 +385,7 @@ var Dropzone_module_default = {
 	"icon": "IgW5Wa_icon",
 	"wrapper": "IgW5Wa_wrapper"
 };
-//#endregion
-//#region src/components/Dropzone/Dropzone.tsx
+// src/components/Dropzone/Dropzone.tsx
 const FileDropzone = ({ onUpload, accept, content }) => {
 	const theme = useMantineTheme();
 	const openRef = useRef(null);
@@ -441,8 +443,7 @@ const FileDropzone = ({ onUpload, accept, content }) => {
 		})]
 	});
 };
-//#endregion
-//#region src/hooks/useInvalidate.ts
+// src/hooks/useInvalidate.ts
 const ROUTE_PATH = {
 	ocels: "modules/ocel/",
 	resources: "resources",
@@ -454,8 +455,7 @@ 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_PATH[route]}`)) });
 };
-//#endregion
-//#region src/components/Dropzone/FullScreenUpload.tsx
+// src/components/Dropzone/FullScreenUpload.tsx
 const defaultLabel = `Drag'n'drop your ${[
 	"OCELs",
 	"Plugins",
@@ -527,8 +527,7 @@ const FullScreenUpload = ({ onSuccess, accept, label = defaultLabel, active = tr
 		})
 	})] });
 };
-//#endregion
-//#region src/components/EventHandler.ts
+// 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;
@@ -603,8 +602,7 @@ const env = z.object({
 	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
+// src/components/HelpModal/HelpModal.tsx
 const HelpLink = ({ icon: Icon, label, href }) => /* @__PURE__ */ jsx(Anchor, {
 	href,
 	target: "_blank",
@@ -679,8 +677,7 @@ const HelpModal = ({ visible, onClose }) => {
 		})
 	});
 };
-//#endregion
-//#region src/components/ModulePage.tsx
+// src/components/ModulePage.tsx
 const createModulesPage = (config) => {
 	const { modules = [] } = config;
 	const getStaticPaths = async () => {
@@ -709,8 +706,7 @@ const createModulesPage = (config) => {
 		ModulePage
 	};
 };
-//#endregion
-//#region src/components/OcelSelect/OcelSelect.tsx
+// src/components/OcelSelect/OcelSelect.tsx
 const iconProps = {
 	color: "currentColor",
 	opacity: .6,
@@ -777,8 +773,7 @@ const CurrentOcelSelect = () => {
 		}
 	});
 };
-//#endregion
-//#region src/components/UploadSection/UploadSection.tsx
+// src/components/UploadSection/UploadSection.tsx
 const DefaultOcels = ({ onSuccess, setIsPending }) => {
 	const { data: ocels = [] } = useGetDefaultOcel({});
 	const invalidate = useInvalidate();
@@ -863,8 +858,7 @@ const UploadSection = ({ onSuccess }) => {
 		]
 	});
 };
-//#endregion
-//#region src/components/UploadModal/UploadModal.tsx
+// src/components/UploadModal/UploadModal.tsx
 const UploadModal = ({ visible, onClose }) => {
 	return /* @__PURE__ */ jsx(Modal, {
 		title: /* @__PURE__ */ jsx(Text, {
@@ -877,8 +871,7 @@ const UploadModal = ({ visible, onClose }) => {
 		children: /* @__PURE__ */ jsx(UploadSection, { onSuccess: onClose })
 	});
 };
-//#endregion
-//#region src/hooks/useModulePath.ts
+// src/hooks/useModulePath.ts
 const useModulePath = (config) => {
 	const { slug } = useRouter().query;
 	const [moduleName, routeName] = [slug?.[0], slug?.[1]];
@@ -891,16 +884,14 @@ const useModulePath = (config) => {
 		};
 	}, [moduleName, routeName]);
 };
-//#endregion
-//#region src/lib/getModuleRoute.ts
+// 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
+// src/components/AppShell/AppShell.module.css
 var AppShell_module_default = {
 	"button": "rZS5FG_button",
 	"buttonIcon": "rZS5FG_buttonIcon",
@@ -913,8 +904,7 @@ var AppShell_module_default = {
 	"links": "rZS5FG_links",
 	"navbar": "rZS5FG_navbar"
 };
-//#endregion
-//#region src/components/AppShell/components/NavBar.tsx
+// src/components/AppShell/components/NavBar.tsx
 const LogoutButton = () => {
 	const [isModalOpen, setIsModalOpen] = useState(false);
 	const queryClient = useQueryClient();
@@ -1029,8 +1019,7 @@ const NavBar = ({ config }) => {
 		})
 	});
 };
-//#endregion
-//#region src/components/AppShell/components/OcelescopeLogo.tsx
+// src/components/AppShell/components/OcelescopeLogo.tsx
 const OcelescopeLogo = ({ size = 32 }) => /* @__PURE__ */ jsxs("svg", {
 	width: size,
 	height: size * 32 / 40,
@@ -1085,8 +1074,7 @@ const OcelescopeLogo = ({ size = 32 }) => /* @__PURE__ */ jsxs("svg", {
 		})
 	]
 });
-//#endregion
-//#region src/components/AppShell/AppShell.tsx
+// src/components/AppShell/AppShell.tsx
 const AppShell$1 = ({ config, children }) => {
 	const [mobileOpened, { toggle: toggleMobile }] = useDisclosure(true);
 	const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);
@@ -1168,8 +1156,7 @@ const AppShell$1 = ({ config, children }) => {
 		]
 	});
 };
-//#endregion
-//#region src/lib/sse.ts
+// src/lib/sse.ts
 const OCELLink = z.object({
 	type: z.literal("ocel"),
 	ocel_id: z.string()
@@ -1221,8 +1208,7 @@ const ServerEventMessage = z.discriminatedUnion("type", [
 	InvalidationRequest,
 	ErrorNotification
 ]);
-//#endregion
-//#region src/components/SSEWrapper.tsx
+// src/components/SSEWrapper.tsx
 const NotificationColorMap = {
 	warning: "yellow",
 	info: "blue",
@@ -1291,8 +1277,7 @@ const SSEWrapper = () => {
 	}, [sessionId, invalidate]);
 	return null;
 };
-//#endregion
-//#region src/components/OcelescopeApp.tsx
+// src/components/OcelescopeApp.tsx
 const theme = createTheme({ fontWeights: { medium: "500" } });
 const OcelescopeApp = (config) => ({ Component, pageProps }) => {
 	const [client] = useState(() => new QueryClient());
@@ -1314,8 +1299,7 @@ const OcelescopeApp = (config) => ({ Component, pageProps }) => {
 		}), /* @__PURE__ */ jsx(ReactQueryDevtools, {})]
 	});
 };
-//#endregion
-//#region src/components/OcelescopeDocument.tsx
+// src/components/OcelescopeDocument.tsx
 const OcelescopeDocument = () => {
 	return /* @__PURE__ */ jsxs(Html, {
 		lang: "en",
@@ -1327,21 +1311,19 @@ const OcelescopeDocument = () => {
 		})] }), /* @__PURE__ */ jsxs("body", { children: [/* @__PURE__ */ jsx(Main, {}), /* @__PURE__ */ jsx(NextScript, {})] })]
 	});
 };
-//#endregion
-//#region src/components/Pickers/index.tsx
+// src/components/Pickers/index.tsx
 const clientOnly = (load) => dynamic(load, { ssr: false });
-const OptionPicker = clientOnly(() => import("./OptionPicker-D9rUIwbY.js").then((m) => m.OptionPicker));
-const ActivityPicker = clientOnly(() => import("./ActivityPicker-BfA34hBU.js").then((m) => m.ActivityPicker));
-const ObjectTypePicker = clientOnly(() => import("./ObjectTypePicker-CXCMky34.js").then((m) => m.ObjectTypePicker));
-const EventPicker = clientOnly(() => import("./EventPicker-DbqFMMr2.js").then((m) => m.EventPicker));
-const ObjectPicker = clientOnly(() => import("./ObjectPicker-Bd68wl9p.js").then((m) => m.ObjectPicker));
-const EventAttributePicker = clientOnly(() => import("./EventAttributePicker-Ch0rYS1h.js").then((m) => m.EventAttributePicker));
-const ObjectAttributePicker = clientOnly(() => import("./ObjectAttributePicker-Dpt3IfC5.js").then((m) => m.ObjectAttributePicker));
-const AttributePicker = clientOnly(() => import("./AttributePicker-Dd8eKA_3.js").then((m) => m.AttributePicker));
-const E2ORelationPicker = clientOnly(() => import("./E2ORelationPicker-CcDSJWc0.js").then((m) => m.E2ORelationPicker));
-const O2ORelationPicker = clientOnly(() => import("./O2ORelationPicker-_XU1FfIX.js").then((m) => m.O2ORelationPicker));
-//#endregion
-//#region src/components/RelationTable.tsx
+const OptionPicker = clientOnly(() => import("./OptionPicker-DQ-WYFQZ.js").then((m) => m.OptionPicker));
+const ActivityPicker = clientOnly(() => import("./ActivityPicker-CtFSu1YR.js").then((m) => m.ActivityPicker));
+const ObjectTypePicker = clientOnly(() => import("./ObjectTypePicker-Bw8Fsktx.js").then((m) => m.ObjectTypePicker));
+const EventPicker = clientOnly(() => import("./EventPicker-D5uNOTw1.js").then((m) => m.EventPicker));
+const ObjectPicker = clientOnly(() => import("./ObjectPicker-D-ksQveT.js").then((m) => m.ObjectPicker));
+const EventAttributePicker = clientOnly(() => import("./EventAttributePicker-BgEdydek.js").then((m) => m.EventAttributePicker));
+const ObjectAttributePicker = clientOnly(() => import("./ObjectAttributePicker-D_I3LQsY.js").then((m) => m.ObjectAttributePicker));
+const AttributePicker = clientOnly(() => import("./AttributePicker-Cq7luTEi.js").then((m) => m.AttributePicker));
+const E2ORelationPicker = clientOnly(() => import("./E2ORelationPicker-C8EmrbFx.js").then((m) => m.E2ORelationPicker));
+const O2ORelationPicker = clientOnly(() => import("./O2ORelationPicker-CryAxxUo.js").then((m) => m.O2ORelationPicker));
+// src/components/RelationTable.tsx
 const PAGE_SIZE = 10;
 const COLUMN_WIDTHS = {
 	selector: 30,
@@ -1352,13 +1334,14 @@ const COLUMN_WIDTHS = {
 	total: 120
 };
 const relationId = ({ source, target }) => `${source} ${target}`;
-const SubRelationTable = ({ ocelId, relationType, direction, source, target, hideRange = false, hideTotal = false, ocelVersion, extraColumns = [] }) => {
+const SubRelationTable = ({ ocelId, relationType, direction, source, target, hideRange = false, hideTotal = false, ocelVersion, viewId, extraColumns = [] }) => {
 	const { data, isFetching } = (relationType === "e2o" ? useE2o : useO2o)(ocelId, {
 		direction,
 		source_types: [source],
 		target_types: [target],
 		with_qualifier: true,
-		ocel_version: ocelVersion
+		ocel_version: ocelVersion,
+		view_id: viewId
 	}, { query: { placeholderData: keepPreviousData } });
 	const columns = useMemo(() => [
 		{
@@ -1415,13 +1398,14 @@ const SubRelationTable = ({ ocelId, relationType, direction, source, target, hid
 		}
 	});
 };
-const RelationTable = ({ ocelId, relationType = "o2o", direction = "source", extraColumns = [], subTableExtraColumns, hideRange = false, hideTotal = false, ocelVersion, visibleRelations, height, className, style }) => {
+const RelationTable = ({ ocelId, relationType = "o2o", direction = "source", extraColumns = [], subTableExtraColumns, hideRange = false, hideTotal = false, ocelVersion, viewId, visibleRelations, height, className, style }) => {
 	const isE2O = relationType === "e2o";
 	const isSource = direction === "source";
 	const [currentPage, setCurrentPage] = useState(1);
 	const { data: combinations = [] } = (isE2O ? useE2oCombinations : useO2oCombinations)(ocelId, {
 		direction,
-		ocel_version: ocelVersion
+		ocel_version: ocelVersion,
+		view_id: viewId
 	});
 	const sourceOptions = useMemo(() => Array.from(new Set(combinations.map(({ source }) => source))), [combinations]);
 	const targetOptions = useMemo(() => Array.from(new Set(combinations.map(({ target }) => target))), [combinations]);
@@ -1459,6 +1443,7 @@ const RelationTable = ({ ocelId, relationType = "o2o", direction = "source", ext
 		page_size: PAGE_SIZE,
 		with_qualifier: false,
 		ocel_version: ocelVersion,
+		view_id: viewId,
 		...effectiveSources.length > 0 && { source_types: effectiveSources },
 		...effectiveTargets.length > 0 && { target_types: effectiveTargets },
 		...filteredQualifiers.length > 0 && { qualifiers: filteredQualifiers }
@@ -1592,13 +1577,13 @@ const RelationTable = ({ ocelId, relationType = "o2o", direction = "source", ext
 				hideRange,
 				hideTotal,
 				ocelVersion,
+				viewId,
 				extraColumns: subTableExtraColumns
 			})
 		}
 	});
 };
-//#endregion
-//#region src/hooks/useDownload.ts
+// src/hooks/useDownload.ts
 const useDownloadFile = () => {
 	const { sessionId } = useSessionStore();
 	const downloadFile = async (path) => {
@@ -1636,9 +1621,7 @@ const useDownloadFlatOCEL = useDownloadFromServer(getDownloadFlatLogQueryKey);
 const useDownloadVariantFlatLog = useDownloadFromServer(getDownloadVariantFlatLogQueryKey);
 const useDownloadResource = useDownloadFromServer(getDownloadResourceQueryKey);
 const useDownloadResourceAsPnml = useDownloadFromServer(getDownloadResourceAsPnmlQueryKey);
-//#endregion
-//#region src/lib/config.ts
+// src/lib/config.ts
 const defineModule = (def) => def;
 const defineModuleRoute = (def) => def;
-//#endregion
 export { ActivityPicker, AreaChart, AttributePicker, AttributesTable, BarChart, BarList, E2ORelationPicker, EventAttributePicker, EventPicker, FileDropzone, FullScreenUpload, HelpModal, HistogramChart, LineChart, O2ORelationPicker, ObjectAttributePicker, ObjectPicker, ObjectTypePicker, OcelChart, OcelSelect, OcelescopeApp, OcelescopeDocument, OptionPicker, PieChart, RelationTable, ScatterChart, SqlChart, SunburstChart, UploadModal, UploadSection, createModulesPage, defineModule, defineModuleRoute, env, formatAttributeValue, getModuleRoute, sseHandler, useCurrentOcel, useDownloadFile, useDownloadFlatOCEL, useDownloadOCEL, useDownloadResource, useDownloadResourceAsPnml, useDownloadVariantFlatLog, useInvalidate, useOcelQuery };

package/dist/{relationOptions-DTtIOIr1.js → relationOptions-hEEsEQrx.js}

@@ -1,4 +1,4 @@
-//#region src/components/Pickers/internal/relationOptions.ts
+// src/components/Pickers/internal/relationOptions.ts
 const relationId = (relation) => JSON.stringify([
 	relation.source,
 	relation.target,
@@ -29,5 +29,4 @@ const relationOptions = ({ rows, source, unit, sourceColor, targetColor }) => ro
 		} : void 0
 	};
 });
-//#endregion
 export { relationLabel as n, relationOptions as r, relationId as t };

package/dist/{rolldown-runtime-D7D4PA-g.js → rolldown-runtime-D8jQpDG7.js}

@@ -1,4 +1,4 @@
-//#region \0rolldown/runtime.js
+// \0rolldown/runtime.js
 var __defProp = Object.defineProperty;
 var __exportAll = (all, no_symbols) => {
 	let target = {};
@@ -9,5 +9,4 @@ var __exportAll = (all, no_symbols) => {
 	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
 	return target;
 };
-//#endregion
 export { __exportAll as t };

package/dist/{series-W1jsVape.js → series-Bx0HVnSy.js}

@@ -1,5 +1,5 @@
-import { a as measureOf, i as label, o as plotted } from "./useChart-jzzXgs0j.js";
-//#region src/components/charts/internal/series.ts
+import { a as measureOf, i as label, o as plotted } from "./useChart-BK4pjGal.js";
+// src/components/charts/internal/series.ts
 /**
 * The rows as traces: one per value of the `series` column, or one per measure
 * when there is no series column.
@@ -28,5 +28,4 @@ const paint = (series, colorOf, alone) => {
 	if (!colorOf) return void 0;
 	return alone ? series.labels.map(colorOf) : colorOf(series.name);
 };
-//#endregion
 export { toSeries as n, paint as t };

package/dist/style.css

@@ -609,19 +609,19 @@ fieldset:disabled .mantine-active:active {
 
 .m_c0783ff9:where([data-scrollbars="xy"], [data-scrollbars="y"]):where([data-offset-scrollbars="xy"], [data-offset-scrollbars="y"], [data-offset-scrollbars="present"]):not([data-vertical-hidden]) {
   padding-inline-start: unset;
-  padding-inline-end: var(--scrollarea-scrollbar-size);
+  padding-inline-end: var(--scrollarea-offset-size, var(--scrollarea-scrollbar-size));
 }
 
 .m_c0783ff9:where([data-scrollbars="xy"], [data-scrollbars="y"]):where([data-offset-scrollbars="xy"], [data-offset-scrollbars="y"], [data-offset-scrollbars="present"]):not([data-vertical-hidden]):where([data-vertical-scrollbar-position="left"]) {
   padding-inline-end: unset;
-  padding-left: var(--scrollarea-scrollbar-size);
+  padding-left: var(--scrollarea-offset-size, var(--scrollarea-scrollbar-size));
   padding-right: unset;
 }
 
 .m_c0783ff9:where([data-scrollbars="xy"], [data-scrollbars="y"]):where([data-offset-scrollbars="xy"], [data-offset-scrollbars="y"], [data-offset-scrollbars="present"]):not([data-vertical-hidden]):where([data-vertical-scrollbar-position="right"]) {
   padding-inline-end: unset;
   padding-left: unset;
-  padding-right: var(--scrollarea-scrollbar-size);
+  padding-right: var(--scrollarea-offset-size, var(--scrollarea-scrollbar-size));
 }
 
 .m_c0783ff9:where([data-scrollbars="xy"], [data-scrollbars="x"]):where([data-offset-scrollbars="xy"], [data-offset-scrollbars="x"], [data-offset-scrollbars="present"]):where([data-horizontal-hidden]) {
@@ -629,7 +629,7 @@ fieldset:disabled .mantine-active:active {
 }
 
 .m_c0783ff9:where([data-scrollbars="xy"], [data-scrollbars="x"]):where([data-offset-scrollbars="xy"], [data-offset-scrollbars="x"], [data-offset-scrollbars="present"]):not([data-horizontal-hidden]) {
-  padding-bottom: var(--scrollarea-scrollbar-size);
+  padding-bottom: var(--scrollarea-offset-size, var(--scrollarea-scrollbar-size));
 }
 
 .m_f8f631dd {
@@ -13025,6 +13025,11 @@ svg.react-flow__connectionline {
     height: calc(var(--spacing) * 5);
   }
 
+  .size-\[22px\] {
+    width: 22px;
+    height: 22px;
+  }
+
   .\!h-24 {
     height: calc(var(--spacing) * 24) !important;
   }
@@ -13165,6 +13170,10 @@ svg.react-flow__connectionline {
     max-width: calc(var(--spacing) * 56);
   }
 
+  .max-w-\[7rem\] {
+    max-width: 7rem;
+  }
+
   .max-w-\[8rem\] {
     max-width: 8rem;
   }
@@ -13367,10 +13376,6 @@ svg.react-flow__connectionline {
     column-gap: var(--spacing);
   }
 
-  .gap-x-1\.5 {
-    column-gap: calc(var(--spacing) * 1.5);
-  }
-
   .gap-x-2 {
     column-gap: calc(var(--spacing) * 2);
   }
@@ -13886,6 +13891,11 @@ svg.react-flow__connectionline {
     line-height: 1.5;
   }
 
+  .leading-\[1\.35\] {
+    --tw-leading: 1.35;
+    line-height: 1.35;
+  }
+
   .leading-none {
     --tw-leading: 1;
     line-height: 1;
@@ -14001,6 +14011,10 @@ svg.react-flow__connectionline {
     color: var(--gray-9);
   }
 
+  .text-\(--gray-10\) {
+    color: var(--gray-10);
+  }
+
   .text-\[var\(--accent-11\)\] {
     color: var(--accent-11);
   }
@@ -14066,6 +14080,10 @@ svg.react-flow__connectionline {
     opacity: 0;
   }
 
+  .opacity-35 {
+    opacity: .35;
+  }
+
   .opacity-50 {
     opacity: .5;
   }
@@ -14144,12 +14162,6 @@ svg.react-flow__connectionline {
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
 
-  .transition-all {
-    transition-property: all;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
-
   .transition-colors {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -14236,6 +14248,10 @@ svg.react-flow__connectionline {
       background-color: var(--gray-2);
     }
 
+    .hover\:bg-\(--gray-a2\):hover {
+      background-color: var(--gray-a2);
+    }
+
     .hover\:bg-\(--gray-a3\):hover {
       background-color: var(--gray-a3);
     }
@@ -46456,10 +46472,14 @@ svg.react-flow__connectionline {
 .uf8oba_container {
   border: 1px solid var(--mantine-color-default-border);
   border-radius: var(--mantine-radius-default);
+  flex-direction: column;
+  display: flex;
   overflow: hidden;
 }
 
 .uf8oba_scrollArea {
+  flex: 1;
+  min-height: 0;
   overflow-y: auto;
 }
 

package/dist/{useChart-jzzXgs0j.js → useChart-BK4pjGal.js}

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { colorForSeed, useViewerConfig } from "@r4pm/components";
 import { ThemedPlot } from "@r4pm/components/charts";
-//#region src/components/charts/types.ts
+// src/components/charts/types.ts
 /** How a cell reads once it is a label. */
 const label = (value) => value == null ? "∅" : String(value);
 /** A cell as the chart plots it: a number where it is one, else its text. */
@@ -13,8 +13,7 @@ const plotted = (value) => {
 };
 /** The first, or only, column holding numbers. */
 const measureOf = (y) => (Array.isArray(y) ? y[0] : y) ?? "";
-//#endregion
-//#region src/components/charts/internal/Plot.tsx
+// src/components/charts/internal/Plot.tsx
 /**
 * The plot every chart draws on: r4pm's themed Plotly, with the parts that
 * should look the same everywhere - margins, legend, no mode bar - already set.
@@ -72,8 +71,7 @@ const axis = (title, range) => ({
 	} },
 	...range && { range: [...range] }
 });
-//#endregion
-//#region src/components/charts/internal/useChart.ts
+// src/components/charts/internal/useChart.ts
 /**
 * A chart's props with colour and selection resolved the way every r4pm
 * viewer does: the chart's own prop, else the ambient `ViewerConfig`, else
@@ -98,5 +96,4 @@ const useChart = ({ rows, x, y, series, colorScope, colorOf, onSelect }) => {
 		}) }
 	};
 };
-//#endregion
 export { measureOf as a, label as i, Plot as n, plotted as o, axis as r, useChart as t };