@ocelescope/ocelot 0.6.1 → 0.8.0

package/dist/index.js

@@ -1,13 +1,13 @@
 import { defineModule, defineModuleRoute, useCurrentOcel } from "@ocelescope/core";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { ActionIcon, Box, Button, Divider, Flex, Group, Input, LoadingOverlay, ScrollArea, SegmentedControl, SimpleGrid, Stack, Table, Tabs, Text, Title } from "@mantine/core";
-import { useDebouncedState, useScrollIntoView } from "@mantine/hooks";
+import { ActionIcon, Autocomplete, Box, Divider, Flex, Group, Input, LoadingOverlay, Popover, ScrollArea, Scroller, SegmentedControl, SimpleGrid, Stack, Table, Tabs, Text, Title } from "@mantine/core";
+import { useDebouncedState, useDisclosure } from "@mantine/hooks";
 import { useE2o, useEventAttributes, useEventCounts, useO2o, useObjectAttributes, useObjectCounts } from "@ocelescope/api-base";
-import { ChevronLeftIcon, ChevronRightIcon, DownloadIcon, SearchIcon } from "lucide-react";
+import { DownloadIcon, SearchIcon } from "lucide-react";
 import { memo, useCallback, useEffect, useMemo, useState } from "react";
+import { DataTable } from "mantine-datatable";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import { customFetch } from "@ocelescope/api-client";
-import { DataTable } from "mantine-datatable";
 import { BaseEdge, Controls, EdgeLabelRenderer, Handle, MarkerType, Position, ReactFlow, ReactFlowProvider, applyNodeChanges, getSmoothStepPath, getStraightPath, useEdgesState, useInternalNode, useReactFlow } from "@xyflow/react";
 import FileSaver from "file-saver";
 import { toPng } from "html-to-image";
@@ -105,27 +105,31 @@ const EntityOverview = ({ attributes, relations, entityCounts, search = "" }) =>
 			return relationMap;
 		}, {});
 	}, [relations]);
-	return /* @__PURE__ */ jsx(SimpleGrid, {
-		cols: {
-			base: 1,
-			sm: 2,
-			md: 4
-		},
-		children: useMemo(() => {
-			const toSearch = search.toLowerCase();
-			return Object.entries(entityCounts).filter(([event, _]) => event.toLowerCase().includes(search.toLowerCase()) || relationMap[event]?.some(({ target, qualifier }) => target.toLowerCase().includes(toSearch) || qualifier.toLowerCase().includes(toSearch)) || attributes?.some(({ name, entity_type }) => event === entity_type && name.toLowerCase().includes(toSearch)));
-		}, [
-			search,
-			relationMap,
-			entityCounts,
-			attributes
-		]).map(([name, count]) => {
-			return /* @__PURE__ */ jsx(EntityCard, {
-				count,
-				name,
-				attributeSummaries: attributes.filter(({ entity_type }) => entity_type === name) ?? [],
-				relationSummaries: relationMap[name] ?? []
-			}, name);
+	const filteredEvents = useMemo(() => {
+		const toSearch = search.toLowerCase();
+		return Object.entries(entityCounts).filter(([event, _]) => event.toLowerCase().includes(search.toLowerCase()) || relationMap[event]?.some(({ target, qualifier }) => target.toLowerCase().includes(toSearch) || qualifier.toLowerCase().includes(toSearch)) || attributes?.some(({ name, entity_type }) => event === entity_type && name.toLowerCase().includes(toSearch)));
+	}, [
+		search,
+		relationMap,
+		entityCounts,
+		attributes
+	]);
+	return /* @__PURE__ */ jsx(ScrollArea, {
+		offsetScrollbars: true,
+		children: /* @__PURE__ */ jsx(SimpleGrid, {
+			cols: {
+				base: 1,
+				sm: 2,
+				md: 4
+			},
+			children: filteredEvents.map(([name, count]) => {
+				return /* @__PURE__ */ jsx(EntityCard, {
+					count,
+					name,
+					attributeSummaries: attributes.filter(({ entity_type }) => entity_type === name) ?? [],
+					relationSummaries: relationMap[name] ?? []
+				}, name);
+			})
 		})
 	});
 };
@@ -137,28 +141,32 @@ const EventOverview = () => {
 	const { data: e2o } = useE2o(id);
 	const { data: eventCounts, isLoading: isEventCountsLoading } = useEventCounts(id);
 	const [searchValue, setSearchValue] = useDebouncedState("", 200);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(LoadingOverlay, { visible: isEventCountsLoading }), /* @__PURE__ */ jsxs(Stack, { children: [
-		/* @__PURE__ */ jsx(Title, {
-			order: 2,
-			children: "Event Overview"
-		}),
-		/* @__PURE__ */ jsx(Text, {
-			c: "dimmed",
-			size: "sm",
-			children: "Get an overview of all event types in this log. Search through them and see how often each type occurs, what attributes it carries, and which objects it has a relation with."
-		}),
-		/* @__PURE__ */ jsx(Input, {
-			leftSection: /* @__PURE__ */ jsx(SearchIcon, {}),
-			defaultValue: searchValue,
-			onChange: (newSearch) => setSearchValue(newSearch.target.value)
-		}),
-		eventCounts && /* @__PURE__ */ jsx(EntityOverview, {
-			relations: e2o?.response ?? [],
-			entityCounts: eventCounts,
-			attributes: eventsAttributes,
-			search: searchValue
-		})
-	] })] });
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(LoadingOverlay, { visible: isEventCountsLoading }), /* @__PURE__ */ jsxs(Stack, {
+		p: "xs",
+		h: "100%",
+		children: [
+			/* @__PURE__ */ jsx(Title, {
+				order: 2,
+				children: "Event Overview"
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				c: "dimmed",
+				size: "sm",
+				children: "Get an overview of all event types in this log. Search through them and see how often each type occurs, what attributes it carries, and which objects it has a relation with."
+			}),
+			/* @__PURE__ */ jsx(Input, {
+				leftSection: /* @__PURE__ */ jsx(SearchIcon, {}),
+				defaultValue: searchValue,
+				onChange: (newSearch) => setSearchValue(newSearch.target.value)
+			}),
+			eventCounts && /* @__PURE__ */ jsx(EntityOverview, {
+				relations: e2o?.response ?? [],
+				entityCounts: eventCounts,
+				attributes: eventsAttributes,
+				search: searchValue
+			})
+		]
+	})] });
 };
 var eventOverview_default = defineModuleRoute({
 	component: EventOverview,
@@ -172,7 +180,7 @@ const customFetch$1 = async (config, options) => customFetch(config, options);
 //#endregion
 //#region src/api/base.ts
 /**
-* Generated by orval v8.19.0 🍺
+* Generated by orval 🍺
 * Do not edit manually.
 * Ocelot
 * OpenAPI spec version: 1.0
@@ -220,7 +228,8 @@ const getPaginatedEventsQueryOptions = (ocelId, params, options) => {
 */
 function usePaginatedEvents(ocelId, params, options, queryClient) {
 	const queryOptions = getPaginatedEventsQueryOptions(ocelId, params, options);
-	return withQueryKey(useQuery(queryOptions, queryClient), queryOptions.queryKey);
+	const query = useQuery(queryOptions, queryClient);
+	return withQueryKey(query, queryOptions.queryKey);
 }
 /**
 * @summary Get Objects
@@ -253,7 +262,8 @@ const getPaginatedObjectsQueryOptions = (ocelId, params, options) => {
 */
 function usePaginatedObjects(ocelId, params, options, queryClient) {
 	const queryOptions = getPaginatedObjectsQueryOptions(ocelId, params, options);
-	return withQueryKey(useQuery(queryOptions, queryClient), queryOptions.queryKey);
+	const query = useQuery(queryOptions, queryClient);
+	return withQueryKey(query, queryOptions.queryKey);
 }
 /**
 * @summary Get Object Columns
@@ -286,7 +296,8 @@ const getObjectColumnsQueryOptions = (ocelId, params, options) => {
 */
 function useObjectColumns(ocelId, params, options, queryClient) {
 	const queryOptions = getObjectColumnsQueryOptions(ocelId, params, options);
-	return withQueryKey(useQuery(queryOptions, queryClient), queryOptions.queryKey);
+	const query = useQuery(queryOptions, queryClient);
+	return withQueryKey(query, queryOptions.queryKey);
 }
 /**
 * @summary Get Activity Columns
@@ -319,12 +330,30 @@ const getActivityColumnsQueryOptions = (ocelId, params, options) => {
 */
 function useActivityColumns(ocelId, params, options, queryClient) {
 	const queryOptions = getActivityColumnsQueryOptions(ocelId, params, options);
-	return withQueryKey(useQuery(queryOptions, queryClient), queryOptions.queryKey);
+	const query = useQuery(queryOptions, queryClient);
+	return withQueryKey(query, queryOptions.queryKey);
 }
 //#endregion
 //#region src/components/EntityTable.tsx
-const EntityTable = ({ entities, columns, onPageChange, onPageSizeChange, sortStatus, onStartStatusChange }) => {
-	const records = useMemo(() => entities.items.map((entity) => ({
+const EntityTable = ({ type, ocelId, entityName }) => {
+	const areEntitiesEvents = type === "events";
+	const [page, setPage] = useState(1);
+	const [sort, setSort] = useState(void 0);
+	const [pageSize, setPageSize] = useState(20);
+	const { data: entities } = (areEntitiesEvents ? usePaginatedEvents : usePaginatedObjects)(ocelId, {
+		type: entityName,
+		page_size: pageSize,
+		page,
+		...sort && {
+			sort_by: sort.columnAccessor,
+			ascending: sort.direction === "asc"
+		}
+	}, { query: {
+		placeholderData: keepPreviousData,
+		staleTime: 5e3
+	} });
+	const { data: columns = [] } = (areEntitiesEvents ? useActivityColumns : useObjectColumns)(ocelId, { type_name: entityName });
+	const records = useMemo(() => entities?.items.map((entity) => ({
 		...entity,
 		...entity.attributes,
 		...Object.assign({}, ...Object.entries(entity.relations).map(([qualifierName, entityIds]) => ({ [qualifierName]: entityIds.join(", ") })))
@@ -334,11 +363,12 @@ const EntityTable = ({ entities, columns, onPageChange, onPageSizeChange, sortSt
 		render: (record) => record[column.accessor],
 		sortable: column.type === "attribute"
 	})), [columns]);
-	return /* @__PURE__ */ jsx(DataTable, {
+	return entities ? /* @__PURE__ */ jsx(DataTable, {
+		height: "100%",
 		page: entities.page,
 		totalRecords: entities.total_items,
 		recordsPerPage: entities.page_size,
-		onPageChange,
+		onPageChange: setPage,
 		withColumnBorders: true,
 		columns: transformedColumns,
 		records,
@@ -347,104 +377,25 @@ const EntityTable = ({ entities, columns, onPageChange, onPageSizeChange, sortSt
 			40,
 			50
 		],
-		onRecordsPerPageChange: onPageSizeChange,
-		sortStatus: sortStatus ?? {
+		onRecordsPerPageChange: setPageSize,
+		sortStatus: sort ?? {
 			columnAccessor: "id",
 			direction: "asc"
 		},
-		onSortStatusChange: onStartStatusChange
-	});
-};
-//#endregion
-//#region src/components/SingleLineTabs/SingleLineTabs.tsx
-const SingleLineTabs = ({ setCurrentTab, currentTab, tabs }) => {
-	const currentTabIndex = useMemo(() => tabs.findIndex((tab) => tab.value === currentTab), [currentTab, tabs]);
-	const { targetRef, scrollableRef, scrollIntoView } = useScrollIntoView({
-		axis: "x",
-		duration: 0
-	});
-	const onChangeCurrentTab = useCallback((newTab) => {
-		setCurrentTab(newTab);
-		scrollIntoView({ alignment: "center" });
-	}, [scrollIntoView, setCurrentTab]);
-	return /* @__PURE__ */ jsxs(Flex, {
-		align: "center",
-		justify: "center",
-		children: [
-			/* @__PURE__ */ jsx(Button, {
-				variant: "subtle",
-				onClick: () => {
-					onChangeCurrentTab(tabs[Math.max(0, currentTabIndex - 1)].value);
-				},
-				disabled: currentTabIndex === 0,
-				children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
-			}),
-			/* @__PURE__ */ jsx(ScrollArea, {
-				w: "100%",
-				scrollbars: false,
-				viewportRef: scrollableRef,
-				children: /* @__PURE__ */ jsx(Tabs, {
-					variant: "default",
-					value: currentTab,
-					onChange: (newTab) => {
-						if (newTab) onChangeCurrentTab(newTab);
-					},
-					children: /* @__PURE__ */ jsx(Tabs.List, {
-						style: {
-							flexWrap: "unset",
-							minWidth: "max-content"
-						},
-						grow: true,
-						justify: "space-between",
-						children: tabs.map((tab) => /* @__PURE__ */ jsx(Tabs.Tab, {
-							value: tab.value,
-							ref: currentTab === tab.value ? targetRef : void 0,
-							children: tab.label
-						}, tab.value))
-					})
-				})
-			}),
-			/* @__PURE__ */ jsx(Button, {
-				variant: "subtle",
-				onClick: () => {
-					onChangeCurrentTab(tabs[Math.min(tabs.length - 1, currentTabIndex + 1)].value);
-				},
-				disabled: currentTabIndex === tabs.length - 1,
-				children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
-			})
-		]
-	});
+		onSortStatusChange: setSort
+	}) : /* @__PURE__ */ jsx(LoadingOverlay, { visible: true });
 };
 //#endregion
 //#region src/components/EntityPage.tsx
 const EntityPage = ({ ocelId, type, title, description }) => {
-	const areEntitiesEvents = type === "events";
-	const { data: entityCounts } = (areEntitiesEvents ? useEventCounts : useObjectCounts)(ocelId);
-	const [currentTab, setCurrentTab] = useState(null);
-	const [page, setPage] = useState(1);
-	const [sort, setSort] = useState(void 0);
-	const [pageSize, setPageSize] = useState(20);
-	const entityNames = useMemo(() => Object.keys(entityCounts ?? {}), [entityCounts]);
-	const { data: entities } = (areEntitiesEvents ? usePaginatedEvents : usePaginatedObjects)(ocelId, {
-		type: currentTab ?? "",
-		page_size: pageSize,
-		page,
-		...sort && {
-			sort_by: sort.columnAccessor,
-			ascending: sort.direction === "asc"
-		}
-	}, { query: {
-		enabled: !!currentTab,
-		placeholderData: keepPreviousData,
-		staleTime: 5e3
-	} });
-	const { data } = (areEntitiesEvents ? useActivityColumns : useObjectColumns)(ocelId, { type_name: currentTab ?? "" }, { query: { enabled: !!currentTab } });
-	useEffect(() => {
-		if (!currentTab && entityNames.length > 0) setCurrentTab(entityNames[0]);
-	}, [currentTab, entityNames]);
-	if (entityNames.length === 0) return null;
-	return /* @__PURE__ */ jsxs(Flex, {
-		direction: "column",
+	const { data: entityCounts, isLoading } = (type === "events" ? useEventCounts : useObjectCounts)(ocelId);
+	const [activeTab, setActiveTab] = useState(null);
+	const [searchOpened, { close: closeSearch, toggle: toggleSearch }] = useDisclosure(false);
+	const entityNames = useMemo(() => Object.keys(entityCounts ?? []), [entityCounts]);
+	return /* @__PURE__ */ jsxs(Stack, {
+		gap: "xs",
+		p: "xs",
+		pos: "relative",
 		h: "100%",
 		children: [
 			title && /* @__PURE__ */ jsx(Title, {
@@ -457,27 +408,71 @@ const EntityPage = ({ ocelId, type, title, description }) => {
 				mb: "xs",
 				children: description
 			}),
-			/* @__PURE__ */ jsx(SingleLineTabs, {
-				tabs: Object.entries(entityCounts ?? {}).map(([entityName, count]) => ({
+			entityCounts && /* @__PURE__ */ jsxs(Tabs, {
+				keepMounted: false,
+				value: activeTab ?? entityNames[0],
+				onChange: setActiveTab,
+				flex: 1,
+				mih: 0,
+				display: "flex",
+				style: { flexDirection: "column" },
+				children: [/* @__PURE__ */ jsxs(Group, {
+					wrap: "nowrap",
+					gap: "0",
+					style: { flexShrink: 0 },
+					children: [/* @__PURE__ */ jsxs(Popover, {
+						width: 300,
+						position: "bottom-start",
+						withArrow: true,
+						shadow: "md",
+						opened: searchOpened,
+						onChange: closeSearch,
+						trapFocus: true,
+						returnFocus: true,
+						children: [/* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(ActionIcon, {
+							size: "lg",
+							h: "100%",
+							onClick: toggleSearch,
+							"aria-label": `Search ${type} types`,
+							bdrs: 0,
+							children: /* @__PURE__ */ jsx(SearchIcon, { size: 16 })
+						}) }), /* @__PURE__ */ jsx(Popover.Dropdown, { children: /* @__PURE__ */ jsx(Autocomplete, {
+							data: entityNames,
+							"aria-label": `${type} type`,
+							placeholder: `Search ${type} types`,
+							selectFirstOptionOnChange: true,
+							comboboxProps: { withinPortal: false },
+							onOptionSubmit: (value) => {
+								setActiveTab(value);
+								closeSearch();
+							}
+						}) })]
+					}), /* @__PURE__ */ jsx(Tabs.List, {
+						flex: 1,
+						miw: 0,
+						children: /* @__PURE__ */ jsx(Scroller, { children: Object.entries(entityCounts ?? {}).map(([entityName, count]) => /* @__PURE__ */ jsxs(Tabs.Tab, {
+							value: entityName,
+							children: [
+								entityName,
+								" (",
+								count,
+								")"
+							]
+						}, entityName)) })
+					})]
+				}), entityNames.map((entityName) => /* @__PURE__ */ jsx(Tabs.Panel, {
 					value: entityName,
-					label: `${entityName} (${count})`
-				})),
-				setCurrentTab: (newTab) => {
-					setCurrentTab(newTab);
-					setPage(1);
-					setSort(void 0);
-				},
-				currentTab: currentTab ?? entityNames[0] ?? ""
+					pos: "relative",
+					flex: 1,
+					mih: 0,
+					children: /* @__PURE__ */ jsx(EntityTable, {
+						type,
+						ocelId,
+						entityName
+					})
+				}, entityName))]
 			}),
-			entities && /* @__PURE__ */ jsx(EntityTable, {
-				entities,
-				columns: data ?? [],
-				withTimestamp: type === "events",
-				onPageChange: (newPage) => setPage(newPage),
-				onPageSizeChange: (newPageSize) => setPageSize(newPageSize),
-				sortStatus: sort,
-				onStartStatusChange: (sortStatus) => setSort(sortStatus)
-			})
+			/* @__PURE__ */ jsx(LoadingOverlay, { visible: isLoading })
 		]
 	});
 };
@@ -759,7 +754,7 @@ const useDagreLayout = () => {
 		});
 		for (const edge of getEdges()) dagreGraph.setEdge(edge.source, edge.target);
 		dagre.layout(dagreGraph);
-		setNodes(nodes.map((node) => {
+		const positionedNodes = nodes.map((node) => {
 			const { x, y } = dagreGraph.node(node.id);
 			return {
 				...node,
@@ -768,7 +763,8 @@ const useDagreLayout = () => {
 					y
 				}
 			};
-		}));
+		});
+		setNodes(positionedNodes);
 		await fitView();
 	}, [
 		getNodes,
@@ -954,7 +950,8 @@ const layoutToHook = {
 const handleDownload = async (fileName) => {
 	const flow = document.querySelector(".react-flow__viewport");
 	if (!flow) return;
-	saveAs(await toPng(flow, { backgroundColor: "white" }), `${fileName}.png`);
+	const dataUrl = await toPng(flow, { backgroundColor: "white" });
+	saveAs(dataUrl, `${fileName}.png`);
 };
 const InnerFlow = ({ initialNodes, initialEdges, layoutOptions = { type: "dagre" } }) => {
 	const [nodes, setNodes] = useState(initialNodes.map((node) => ({
@@ -1075,6 +1072,7 @@ const ObjectGraph = () => {
 	return /* @__PURE__ */ jsxs(Stack, {
 		w: "100%",
 		h: "100%",
+		p: "xs",
 		children: [
 			/* @__PURE__ */ jsx(Title, {
 				order: 2,
@@ -1148,6 +1146,12 @@ const ObjectPage = () => {
 		description: "Browse the individual objects in this log. Pick an object type to see its records in a table, with their attributes and the objects they have a relation with."
 	}, id);
 };
+var objects_default = defineModuleRoute({
+	component: ObjectPage,
+	label: "Objects",
+	name: "objects",
+	requiresOcel: true
+});
 //#endregion
 //#region src/index.ts
 var src_default = defineModule({
@@ -1157,12 +1161,7 @@ var src_default = defineModule({
 	authors: [{ name: "Öztürk, Görkem-Emre" }],
 	routes: [
 		events_default,
-		defineModuleRoute({
-			component: ObjectPage,
-			label: "Objects",
-			name: "objects",
-			requiresOcel: true
-		}),
+		objects_default,
 		eventOverview_default,
 		objectOverview_default
 	],

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ocelescope/ocelot",
   "type": "module",
-  "version": "0.6.1",
+  "version": "0.8.0",
   "description": "A module for inspections of OCELs",
   "author": "Görkem-Emre Öztürk <goerkem.oeztuerk@rwth-aachen.de>",
   "license": "MIT",
@@ -29,36 +29,36 @@
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^3.0.0",
-    "@mantine/core": "^9.4.0",
-    "@mantine/hooks": "^9.4.0",
-    "@ocelescope/api-base": "^0.6.0",
-    "@ocelescope/core": "^0.6.0",
+    "@mantine/core": "^9.5.1",
+    "@mantine/hooks": "^9.5.1",
+    "@ocelescope/api-base": "^0.8.0",
+    "@ocelescope/api-client": "^0.8.0",
+    "@ocelescope/core": "^0.8.0",
     "@tanstack/react-query": "^5.90.21",
-    "@xyflow/react": "^12.10.1",
-    "dayjs": "^1.11.19",
-    "elkjs": "^0.11.0",
+    "@xyflow/react": "^12.11.3",
+    "axios": "^1.20.0",
+    "dayjs": "^1.11.23",
+    "elkjs": "^0.12.0",
     "file-saver": "^2.0.5",
     "html-to-image": "1.11.13",
     "lucide-react": "^1.0.0",
-    "mantine-datatable": "^9.3.1",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "recharts": "^3.2.1",
-    "axios": "^1.18.0",
-    "@ocelescope/api-client": "^0.6.0"
+    "mantine-datatable": "^9.4.0",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "recharts": "^3.2.1"
   },
   "devDependencies": {
-    "@tsdown/css": "^0.22.0",
-    "@types/css-modules": "^1.0.5",
+    "@ocelescope/api-config": "^0.8.0",
     "@tsconfig/strictest": "^2.0.8",
+    "@tsdown/css": "^0.23.0",
+    "@types/css-modules": "^1.0.5",
     "@types/file-saver": "^2.0.7",
-    "@types/node": "^25.0.3",
-    "@types/react": "^19.2.7",
-    "@types/react-dom": "^19.2.3",
-    "@ocelescope/api-config": "^0.6.0",
-    "tsdown": "^0.22.0",
-    "typescript": "^5.9.3",
-    "orval": "^8.5.2"
+    "@types/node": "^26.6.1",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "orval": "^8.33.0",
+    "tsdown": "^0.23.0",
+    "typescript": "^6.0.3"
   },
   "scripts": {
     "dev": "tsdown --watch ./src",