@ocelescope/core 0.7.0 → 0.9.0

package/dist/index.js

@@ -1,21 +1,24 @@
-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, getDownloadVariantFlatLogQueryKey, useActivities, useAggregatedAttributes, useAttributeNames, useE2o, useE2oCombinations, useEventAttributes, useGetDefaultOcel, useGetOcels, useImportDefaultOcel, useLogout, useO2o, useO2oCombinations, useObjectAttributes, useObjectTypes, useUpload } from "@ocelescope/api-base";
+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 { 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 { 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 { 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";
 import { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import dayjs from "dayjs";
 import isBetween from "dayjs/plugin/isBetween.js";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import dynamic from "next/dynamic.js";
 import { Dropzone } from "@mantine/dropzone";
 import { Readable } from "node:stream";
 import z from "zod";
 import { Notifications, showNotification } from "@mantine/notifications";
+import { Theme } from "@r4pm/components/ui";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-import { useDisclosure } from "@mantine/hooks";
+import { useDebouncedValue, 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.js";
 import { useRouter } from "next/router.js";
 import { Head, Html, Main, NextScript } from "next/document.js";
@@ -106,7 +109,7 @@ const SubAttributeTable = ({ ocelId, entityType = "objects", attributeName, enti
 		}
 	});
 };
-const AttributesTable = ({ ocelId, entityType = "objects", extraColumns = [], hideRange = false, hideValues = false, subTableExtraColumns, ocelVersion, alwaysExpandable = false, visibleAttributes }) => {
+const AttributesTable = ({ ocelId, entityType = "objects", extraColumns = [], hideRange = false, hideValues = false, subTableExtraColumns, ocelVersion, alwaysExpandable = false, visibleAttributes, height, className, style }) => {
 	const isEvent = entityType === "events";
 	const [currentPage, setCurrentPage] = useState(1);
 	const { data: attributeNames } = useAttributeNames(ocelId, {
@@ -233,7 +236,13 @@ const AttributesTable = ({ ocelId, entityType = "objects", extraColumns = [], hi
 		recordsPerPage: PAGE_SIZE$1,
 		onPageChange: setCurrentPage,
 		noRecordsText: "No attributes found",
-		height: 500,
+		height,
+		className,
+		style: {
+			flex: 1,
+			minHeight: 0,
+			...style
+		},
 		rowExpansion: {
 			allowMultiple: false,
 			expandable: ({ record: { entity_type_names } }) => alwaysExpandable || entity_type_names.length > 1,
@@ -354,6 +363,17 @@ const BarList = ({ data, labelHeader, valueHeader = "Frequency", maxVisibleItems
 	});
 };
 //#endregion
+//#region 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
 var Dropzone_module_default = {
 	"control": "IgW5Wa_control",
@@ -686,78 +706,61 @@ const createModulesPage = (config) => {
 	};
 };
 //#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, {})]
+const iconProps = {
+	color: "currentColor",
+	opacity: .6,
+	size: 18
+};
+const OCELFilterIcon = ({ size }) => {
+	const theme = useMantineTheme();
+	return /* @__PURE__ */ jsx(Tooltip, {
+		label: "A filter is applied to this log",
+		children: /* @__PURE__ */ jsx(FilterIcon, {
+			size,
+			color: theme.colors.blue[8]
+		})
+	});
+};
+const OcelSelect = ({ value, ...props }) => {
+	const { data: ocels } = useGetOcels();
+	const ocelIds = useMemo(() => (ocels ?? []).map(({ id, name }) => ({
+		value: id,
+		label: name
+	})), [ocels]);
+	const filteredOcelIds = useMemo(() => (ocels ?? []).filter(({ filter_applied }) => filter_applied).map(({ id }) => id), [ocels]);
+	const renderSelectOption = useCallback(({ option, checked }) => /* @__PURE__ */ jsxs(Group, {
+		flex: "1",
+		gap: "xs",
+		wrap: "nowrap",
+		style: { overflow: "hidden" },
+		children: [
+			filteredOcelIds.includes(option.value) && /* @__PURE__ */ jsx(Center, {
+				style: { flexShrink: 0 },
+				children: /* @__PURE__ */ jsx(OCELFilterIcon, { size: 14 })
+			}),
+			/* @__PURE__ */ jsx(Box, {
+				flex: "1",
+				style: {
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+					whiteSpace: "nowrap"
+				},
+				children: option.label
+			}),
+			checked && /* @__PURE__ */ jsx(Center, {
+				style: { flexShrink: 0 },
+				children: /* @__PURE__ */ jsx(CheckIcon, { ...iconProps })
 			})
-		}, ocel.id)) }) })]
+		]
+	}), [filteredOcelIds]);
+	return /* @__PURE__ */ jsx(Select, {
+		leftSection: value && filteredOcelIds.includes(value) ? /* @__PURE__ */ jsx(OCELFilterIcon, { size: 14 }) : void 0,
+		data: ocelIds,
+		value,
+		scrollAreaProps: { styles: { content: { minWidth: 0 } } },
+		...props,
+		renderOption: renderSelectOption
 	});
 };
 const CurrentOcelSelect = () => {
@@ -1095,7 +1098,6 @@ const AppShell$1 = ({ config, children }) => {
 				desktop: !desktopOpened
 			}
 		},
-		padding: "md",
 		children: [
 			/* @__PURE__ */ jsx(AppShell.Header, { children: /* @__PURE__ */ jsxs(Group, {
 				h: "100%",
@@ -1294,16 +1296,16 @@ const OcelescopeApp = (config) => ({ Component, pageProps }) => {
 		client,
 		children: [/* @__PURE__ */ jsx(HydrationBoundary, {
 			state: pageProps.dehydratedState,
-			children: /* @__PURE__ */ jsxs(MantineProvider, {
+			children: /* @__PURE__ */ jsx(MantineProvider, {
 				theme,
-				children: [
+				children: /* @__PURE__ */ jsxs(Theme, { children: [
 					/* @__PURE__ */ jsx(SSEWrapper, {}),
 					/* @__PURE__ */ jsx(Notifications, {}),
 					/* @__PURE__ */ jsx(AppShell$1, {
 						config,
 						children: /* @__PURE__ */ jsx(Component, { ...pageProps })
 					})
-				]
+				] })
 			})
 		}), /* @__PURE__ */ jsx(ReactQueryDevtools, {})]
 	});
@@ -1322,6 +1324,95 @@ const OcelescopeDocument = () => {
 	});
 };
 //#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
 const PAGE_SIZE = 10;
 const COLUMN_WIDTHS = {
@@ -1396,7 +1487,7 @@ const SubRelationTable = ({ ocelId, relationType, direction, source, target, hid
 		}
 	});
 };
-const RelationTable = ({ ocelId, relationType = "o2o", direction = "source", extraColumns = [], subTableExtraColumns, hideRange = false, hideTotal = false, ocelVersion, visibleRelations }) => {
+const RelationTable = ({ ocelId, relationType = "o2o", direction = "source", extraColumns = [], subTableExtraColumns, hideRange = false, hideTotal = false, ocelVersion, visibleRelations, height, className, style }) => {
 	const isE2O = relationType === "e2o";
 	const isSource = direction === "source";
 	const [currentPage, setCurrentPage] = useState(1);
@@ -1550,7 +1641,13 @@ const RelationTable = ({ ocelId, relationType = "o2o", direction = "source", ext
 		recordsPerPage: PAGE_SIZE,
 		onPageChange: setCurrentPage,
 		noRecordsText: "No relations found",
-		height: 500,
+		height,
+		className,
+		style: {
+			flex: 1,
+			minHeight: 0,
+			...style
+		},
 		rowExpansion: {
 			allowMultiple: false,
 			expandable: ({ record }) => (record.qualifiers?.length ?? 0) > 1,
@@ -1616,4 +1713,4 @@ const useDownloadResourceAsPnml = useDownloadFromServer(getDownloadResourceAsPnm
 const defineModule = (def) => def;
 const defineModuleRoute = (def) => def;
 //#endregion
-export { AttributesTable, BarList, FileDropzone, FullScreenUpload, HelpModal, OcelSelect, OcelescopeApp, OcelescopeDocument, RelationTable, UploadModal, UploadSection, createModulesPage, defineModule, defineModuleRoute, env, formatAttributeValue, getModuleRoute, sseHandler, useCurrentOcel, useDownloadFile, useDownloadFlatOCEL, useDownloadOCEL, useDownloadResource, useDownloadResourceAsPnml, useDownloadVariantFlatLog, useInvalidate };
+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 };

package/dist/rolldown-runtime-D7D4PA-g.js

@@ -0,0 +1,13 @@
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
+export { __exportAll as t };

package/dist/series-BBXVjHHY.js

@@ -0,0 +1,32 @@
+import { a as plotted, i as measureOf, r as label } from "./Plot-CxHHyXot.js";
+//#region 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.
+*/
+const toSeries = ({ rows, x, y, series }) => {
+	const measures = Array.isArray(y) ? y : [y];
+	const groups = /* @__PURE__ */ new Map();
+	if (series) for (const row of rows) {
+		const key = label(row[series]);
+		groups.set(key, [...groups.get(key) ?? [], row]);
+	}
+	else for (const measure of measures) groups.set(measure, rows);
+	return [...groups].map(([name, group]) => ({
+		name,
+		labels: group.map((row) => label(row[x])),
+		values: group.map((row) => plotted(row[series ? measureOf(y) : name]))
+	}));
+};
+/**
+* What to paint a trace.
+*
+* One trace: the colours tell its categories apart, as in the r4pm activity
+* chart. Several: they tell the traces apart.
+*/
+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 };