@ocelescope/core 0.10.1 → 0.11.0

package/dist/index.js

@@ -1,8 +1,7 @@
-import { t as useCurrentOcel } from "./useCurrentOCEL-BeBa7K0g.js";
-import { t as useOcelId } from "./useOcelId-BSU0-Srk.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, useEventIds, useGetDefaultOcel, useGetOcels, useImportDefaultOcel, useLogout, useO2o, useO2oCombinations, useObjectAttributes, useObjectIds, useObjectTypes, useUpload } from "@ocelescope/api-base";
+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";
 import { BookOpenIcon, BugIcon, CheckIcon, ChevronDownIcon, ChevronRightIcon, ContainerIcon, DownloadIcon, FilterIcon, GlobeIcon, HelpCircleIcon, LightbulbIcon, LogOutIcon, MailIcon, PackageIcon, PackagePlusIcon, PuzzleIcon, TriangleAlertIcon, UploadIcon, XIcon } from "lucide-react";
 import { DataTable } from "mantine-datatable";
@@ -10,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";
@@ -17,7 +17,7 @@ import z from "zod";
 import { Notifications, showNotification } from "@mantine/notifications";
 import { Theme } from "@r4pm/components/ui";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-import { useDebouncedValue, useDisclosure } from "@mantine/hooks";
+import { useDisclosure } from "@mantine/hooks";
 import { env as env$1, useSessionStore } from "@ocelescope/api-client";
 import Link from "next/link.js";
 import { useRouter } from "next/router.js";
@@ -25,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");
@@ -38,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,
@@ -49,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(() => [
 		{
@@ -109,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(() => {
@@ -142,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: {
@@ -258,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",
@@ -277,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]);
@@ -297,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,
@@ -362,19 +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-Cixo5Okd.js").then((n) => n.n).then((module) => module.BarChart));
-const LineChart = browserOnly(() => import("./LineChart-CVz-dkJI.js").then((n) => n.n).then((module) => module.LineChart));
-const AreaChart = browserOnly(() => import("./AreaChart-DoD3LM50.js").then((n) => n.n).then((module) => module.AreaChart));
-const ScatterChart = browserOnly(() => import("./ScatterChart-jIQOjQes.js").then((n) => n.n).then((module) => module.ScatterChart));
-const PieChart = browserOnly(() => import("./PieChart-DBiASngC.js").then((n) => n.n).then((module) => module.PieChart));
-const SunburstChart = browserOnly(() => import("./SunburstChart-D6FhYBHI.js").then((n) => n.n).then((module) => module.SunburstChart));
-const SqlChart = browserOnly(() => import("./SqlChart-bwDArK2l.js").then((module) => module.SqlChart));
-const OcelChart = browserOnly(() => import("./OcelChart-DvGTjJXo.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;
@@ -550,6 +549,10 @@ const sseHandler = async (req, res) => {
 		});
 		const webStream = backendRes.body;
 		const nodeStream = Readable.fromWeb(webStream);
+		nodeStream.on("error", (err) => {
+			if (!controller.signal.aborted) console.error("SSE stream error:", err);
+			res.end();
+		});
 		nodeStream.pipe(res);
 		res.on("close", () => {
 			console.log("Client disconnected");
@@ -599,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",
@@ -675,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 () => {
@@ -705,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,
@@ -773,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();
@@ -859,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, {
@@ -873,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]];
@@ -887,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",
@@ -909,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();
@@ -1025,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,
@@ -1081,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);
@@ -1164,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()
@@ -1217,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",
@@ -1287,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());
@@ -1310,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",
@@ -1323,97 +1311,19 @@ const OcelescopeDocument = () => {
 		})] }), /* @__PURE__ */ jsxs("body", { children: [/* @__PURE__ */ jsx(Main, {}), /* @__PURE__ */ jsx(NextScript, {})] })]
 	});
 };
-//#endregion
-//#region src/components/pickers/IdPicker.tsx
-/**
-* Picking ids by typing.
-*
-* Presentational: a log holds far more events and objects than a list can
-* show, so the caller decides which ids a search turns up.
-*/
-const IdPicker = ({ ids, label, placeholder = "Search…", search, onSearch, loading = false, emptyText, disabled, ...selection }) => {
-	const picked = selection.multiple ? [...selection.value] : selection.value ? [selection.value] : [];
-	const shared = {
-		size: "xs",
-		label,
-		placeholder,
-		searchable: true,
-		disabled,
-		data: [.../* @__PURE__ */ new Set([...ids, ...picked])],
-		searchValue: search,
-		onSearchChange: onSearch,
-		nothingFoundMessage: emptyText ?? (loading ? "Searching…" : "Nothing found")
-	};
-	return selection.multiple ? /* @__PURE__ */ jsx(MultiSelect, {
-		...shared,
-		value: picked,
-		onChange: selection.onChange,
-		clearable: true
-	}) : /* @__PURE__ */ jsx(Select, {
-		...shared,
-		value: picked[0] ?? null,
-		onChange: (next) => selection.onChange(next ?? void 0)
-	});
-};
-//#endregion
-//#region src/components/pickers/internal/useSearch.ts
-/** What the reader has typed, slowed to one request per pause in typing. */
-const useSearch = () => {
-	const [search, setSearch] = useState("");
-	const [debounced] = useDebouncedValue(search, 300);
-	return {
-		search,
-		setSearch,
-		debounced: debounced || void 0
-	};
-};
-//#endregion
-//#region src/components/pickers/EventPicker.tsx
-/** Events of the log, found by typing part of an id. */
-const EventPicker = ({ ocelId, ocelVersion = "filtered", limit = 50, ...picker }) => {
-	const id = useOcelId(ocelId);
-	const { search, setSearch, debounced } = useSearch();
-	const { data, isPending } = useEventIds(id, {
-		search: debounced,
-		size: limit,
-		ocel_version: ocelVersion
-	}, { query: { enabled: id != null } });
-	return /* @__PURE__ */ jsx(IdPicker, {
-		ids: data?.response ?? [],
-		search,
-		onSearch: setSearch,
-		loading: isPending,
-		...picker
-	});
-};
-//#endregion
-//#region src/components/pickers/ObjectPicker.tsx
-/** Objects of the log, found by typing part of an id. */
-const ObjectPicker = ({ ocelId, ocelVersion = "filtered", limit = 50, ...picker }) => {
-	const id = useOcelId(ocelId);
-	const { search, setSearch, debounced } = useSearch();
-	const { data, isPending } = useObjectIds(id, {
-		search: debounced,
-		size: limit,
-		ocel_version: ocelVersion
-	}, { query: { enabled: id != null } });
-	return /* @__PURE__ */ jsx(IdPicker, {
-		ids: data?.response ?? [],
-		search,
-		onSearch: setSearch,
-		loading: isPending,
-		...picker
-	});
-};
-//#endregion
-//#region src/components/pickers/index.tsx
-const NamePicker = dynamic(() => import("./NamePicker-Be-qmr1x.js").then((module) => module.NamePicker), { ssr: false });
-const ActivityPicker = dynamic(() => import("./ActivityPicker-DbrGeiC_.js").then((module) => module.ActivityPicker), { ssr: false });
-const ObjectTypePicker = dynamic(() => import("./ObjectTypePicker-CKmszS0y.js").then((module) => module.ObjectTypePicker), { ssr: false });
-const EventAttributePicker = dynamic(() => import("./EventAttributePicker-Cf2vVKv5.js").then((module) => module.EventAttributePicker), { ssr: false });
-const ObjectAttributePicker = dynamic(() => import("./ObjectAttributePicker-CL43EsYt.js").then((module) => module.ObjectAttributePicker), { ssr: false });
-//#endregion
-//#region src/components/RelationTable.tsx
+// src/components/Pickers/index.tsx
+const clientOnly = (load) => dynamic(load, { ssr: false });
+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,
@@ -1424,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(() => [
 		{
@@ -1487,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]);
@@ -1531,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 }
@@ -1664,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) => {
@@ -1708,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, AttributesTable, BarChart, BarList, EventAttributePicker, EventPicker, FileDropzone, FullScreenUpload, HelpModal, IdPicker, LineChart, NamePicker, ObjectAttributePicker, ObjectPicker, ObjectTypePicker, OcelChart, OcelSelect, OcelescopeApp, OcelescopeDocument, PieChart, RelationTable, ScatterChart, SqlChart, SunburstChart, UploadModal, UploadSection, createModulesPage, defineModule, defineModuleRoute, env, formatAttributeValue, getModuleRoute, sseHandler, useCurrentOcel, useDownloadFile, useDownloadFlatOCEL, useDownloadOCEL, useDownloadResource, useDownloadResourceAsPnml, useDownloadVariantFlatLog, useInvalidate, useOcelQuery };
+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-hEEsEQrx.js

@@ -0,0 +1,32 @@
+// src/components/Pickers/internal/relationOptions.ts
+const relationId = (relation) => JSON.stringify([
+	relation.source,
+	relation.target,
+	relation.qualifier
+]);
+const relationLabel = (relation) => relation.qualifier ? `${relation.target} · ${relation.qualifier}` : relation.target;
+/**
+* Rows of the E2O or O2O endpoint as options: one per target type and
+* qualifier, counted by how many relations there are. Grouped by source
+* unless the picker is narrowed to one.
+*/
+const relationOptions = ({ rows, source, unit, sourceColor, targetColor }) => rows.filter((row) => source === void 0 || row.source === source).map((row) => {
+	const relation = {
+		source: row.source,
+		target: row.target,
+		qualifier: row.qualifier
+	};
+	const perSource = row.min_count === row.max_count ? `${row.min_count}` : `${row.min_count}–${row.max_count}`;
+	return {
+		value: relation,
+		label: relationLabel(relation),
+		description: `${perSource} per ${unit}`,
+		count: row.sum,
+		color: targetColor(row.target),
+		group: source === void 0 ? {
+			label: row.source,
+			color: sourceColor(row.source)
+		} : void 0
+	};
+});
+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-BBXVjHHY.js → series-Bx0HVnSy.js}

@@ -1,5 +1,5 @@
-import { a as plotted, i as measureOf, r as label } from "./Plot-CxHHyXot.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 };