@ocelescope/ocelot 0.0.0 → 0.1.3

package/README.md

@@ -1,29 +1,47 @@
-# react-components-starter
+# @ocelescope/ocelot
 
-A starter for creating a React component library.
+The **Ocelot** module for [Ocelescope](https://github.com/promi4s/ocelescope).
 
-## Development
+A tool for exploring object-centric event logs, allowing you to search events and objects and visualize their relationships and attributes.
 
-- Install dependencies:
+It is a frontend module that plugs into the Ocelescope app shell via
+`@ocelescope/core`'s `defineModule`.
 
-```bash
-npm install
-```
+It pairs with the [`ocelescope-module-ocelot`](https://pypi.org/project/ocelescope-module-ocelot/)
+backend module, which provides its API.
 
-- Run the playground:
+## Installation
 
 ```bash
-npm run play
+pnpm add @ocelescope/ocelot
 ```
 
-- Run the unit tests:
+## Integration
 
-```bash
-npm run test
+Register the module in your `ocelescope.config.ts` by adding its default
+export to the `modules` array:
+
+```ts
+// ocelescope.config.ts
+import type { OcelescopeConfig } from "@ocelescope/core";
+import ocelot from "@ocelescope/ocelot";
+
+export default {
+  modules: [ocelot],
+} satisfies OcelescopeConfig;
 ```
 
-- Build the library:
+This module ships its own styles, so also import them once in your app
+entry point (`pages/_app.tsx`):
 
-```bash
-npm run build
+```tsx
+import "@ocelescope/ocelot/styles.css";
 ```
+
+## About
+
+Part of [Ocelescope](https://github.com/promi4s/ocelescope), a framework for
+working with Object-Centric Event Logs (OCEL) developed at the Chair of Process
+and Data Science (PADS), RWTH Aachen University.
+
+📖 Documentation: <https://www.ocelescope.org>

package/dist/index.d.ts

@@ -1,6 +1,4 @@
-import * as _ocelescope_core0 from "@ocelescope/core";
-
 //#region src/config.d.ts
-declare const _default: _ocelescope_core0.ModuleDefinition;
+declare const _default: import("@ocelescope/core").ModuleDefinition;
 //#endregion
 export { _default as default };

package/dist/index.js

@@ -1,56 +1,345 @@
 import { defineModule, defineModuleRoute, useCurrentOcel } from "@ocelescope/core";
-import { ActionIcon, Box, Button, Divider, Flex, Group, Input, LoadingOverlay, ScrollArea, SegmentedControl, SimpleGrid, Stack, Table, Tabs, Text } from "@mantine/core";
-import { useE2o, useEventAttributes, useEventCounts, useO2o, useObjectAttributes, useObjectCounts, useOcelotPaginatedEvents, useOcelotPaginatedObjects } from "@ocelescope/api-base";
-import { keepPreviousData } from "@tanstack/react-query";
-import { memo, useCallback, useEffect, useMemo, useState } from "react";
-import { DataTable } from "mantine-datatable";
 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 { useE2o, useEventAttributes, useEventCounts, useO2o, useObjectAttributes, useObjectCounts } from "@ocelescope/api-base";
 import { ChevronLeftIcon, ChevronRightIcon, DownloadIcon, SearchIcon } from "lucide-react";
+import { memo, useCallback, useEffect, useMemo, useState } from "react";
+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 { saveAs } from "file-saver";
+import FileSaver from "file-saver";
 import { toPng } from "html-to-image";
 import dagre from "@dagrejs/dagre";
 import ELK from "elkjs/lib/elk.bundled.js";
-
-//#region src/components/EntityTable.tsx
-const EntityTable = ({ entities, withTimestamp, attributes = [], relations = [], onPageChange, onPageSizeChange, sortStatus, onStartStatusChange }) => {
-	const columns = useMemo(() => [
-		{
-			accessor: "id",
-			title: "#",
-			sortable: true
+//#region src/components/OcelotIcon.tsx
+const OcelotIcon = (props) => /* @__PURE__ */ jsxs("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: 128,
+	height: 128,
+	viewBox: "0 0 96 96",
+	...props,
+	fill: "currentColor",
+	children: [
+		/* @__PURE__ */ jsx("title", { children: "Ocelot" }),
+		/* @__PURE__ */ jsx("path", { d: "M2.5 8.2c-2.2 5.6-2.3 18-.2 23 .9 2.1 2.7 5.3 4.1 7.1C8.2 40.6 8.6 42 8 43c-2 3.2-1.1 9.1 2.4 14.8 1.9 3.2 4 8.4 4.6 11.7 1.6 8 2.9 9.9 9.4 12.8 3 1.4 7.1 4.2 9.1 6.1l3.6 3.6h21.8l3.6-3.6c2-1.9 6-4.7 8.9-6 3-1.4 5.9-3.1 6.6-3.9.6-.8 2-4.9 3.1-9.1 1.1-4.3 3.3-9.9 4.9-12.4 3.1-4.8 4-10.9 2-14-.6-1-.2-2.4 1.6-4.7 1.4-1.8 3.2-5 4.1-7.1 2.1-5 2-17.4-.2-23C91.8 4.1 91.7 4 87 4c-5.6 0-12 2.1-17.3 5.6-3.9 2.5-3.9 2.5-7.5.7-2.9-1.4-6-1.8-14.2-1.8s-11.3.4-14.2 1.8c-3.6 1.8-3.6 1.8-7.5-.7C21 6.1 14.6 4 9 4c-4.7 0-4.8.1-6.5 4.2zM19 11.1c2.5 1.1 6.1 3.3 8.2 4.9 3.2 2.6 3.8 2.8 4.9 1.4 2.9-3.5 7.3-4.8 15.9-4.8 6.9 0 9.3.4 12.8 2.2 2.3 1.2 4.2 2.7 4.2 3.3 0 .5 1.7-.4 3.8-2 4.3-3.5 11.1-6.7 16.3-7.6 3.6-.7 3.7-.6 4.9 3.1 3 8.9.5 19.7-5.9 25.8l-2.9 2.8 1.9 3.2c2.5 4.2 2.4 6.5-.6 10.7-1.4 1.9-3.3 5.8-4.1 8.6-.9 2.9-1.8 5.3-2.1 5.3-.9 0 .6-8.1 2.8-14.6 1.9-5.6 1.9-6.3.5-9.7-1.6-4-2.7-4.5-4.6-2.2-1 1.2-1 1.8 0 3 1.3 1.6 1.1 3.8-1.5 12.5-.9 3.3-1.4 8.3-1.3 12.5l.3 7-4.9 2.8c-2.7 1.5-5.1 2.5-5.4 2.2-.2-.2.7-1.8 2.2-3.5 2.2-2.7 2.6-4.1 2.6-9.5 0-7.6-.9-10.1-5.5-16.2-4.5-5.8-4.6-8.1-.5-7.5 1.9.3 4.3-.4 6.6-1.7 2-1.2 3.9-1.9 4.2-1.7.5.6 3.1-2.4 3.2-3.5 0-1.1-7.9-3.9-11.1-3.9-7.1 0-11.8 5.6-10.5 12.5.4 1.9 2.3 5.6 4.3 8.2 5.5 7.2 6.6 17.9 2.2 21.9-1.4 1.3-2.6 1.4-5.6.7-3.5-.8-3.8-1.1-4.1-4.8-.3-3.7 0-4.1 2.8-5.2 2.3-.9 3-1.7 3-3.9 0-2.5-.1-2.6-1.7-1.2-2.2 1.8-10.4 1.8-12.6-.1-1.5-1.2-1.7-1-1.7 1.4 0 2.1.7 2.9 3 3.8 2.8 1.1 3.1 1.5 2.8 5.2-.3 3.7-.6 4-4.1 4.8-3.3.8-4.2.6-5.9-1.1-1.7-1.7-2.1-3.2-2-8.8.1-4.3.7-7.4 1.7-8.8 5.1-6.9 7.5-11.3 7.5-13.7C43 38.5 38.5 34 32.1 34 28.9 34 21 36.8 21 37.9c.1 1.1 2.7 4.1 3.2 3.5.3-.2 2.2.5 4.2 1.7 2.3 1.3 4.7 2 6.6 1.7 4.1-.6 4 1.7-.5 7.5-4.6 6.1-5.5 8.6-5.5 16.2 0 5.4.4 6.8 2.6 9.5 1.5 1.7 2.4 3.3 2.2 3.5-.3.3-2.7-.7-5.4-2.2l-4.9-2.8.3-7.7c.2-5.6-.2-9.2-1.8-13.7-2.3-6.9-2.5-9.2-.8-10.9.8-.8.8-1.5-.2-2.7-1.9-2.3-3-1.8-4.6 2.2-1.4 3.4-1.4 4.1.5 9.7 2.2 6.5 3.7 14.6 2.8 14.6-.3 0-1.2-2.4-2.1-5.3-.8-2.8-2.7-6.7-4.1-8.6-3-4.2-3.1-6.5-.6-10.7l1.9-3.2-2.9-2.8C5.5 31.3 3 20.5 6 11.6c1.2-3.7 1.3-3.8 4.9-3.1 2 .4 5.6 1.5 8.1 2.6zm39.2 72.8C60.6 86.3 56.3 88 48 88c-12.3 0-15-4.2-4.2-6.5 5.1-1.1 12.2 0 14.4 2.4z" }),
+		/* @__PURE__ */ jsx("path", { d: "M8.6 15.1c-1.3 6.8.1 13.2 4 17.9l2.6 3 2.7-4.2c1.5-2.4 4.3-5.8 6.1-7.7 3.3-3.2 3.3-3.4 1.4-4.8-2.5-1.9-13.6-7.3-15-7.3-.6 0-1.4 1.4-1.8 3.1zm8.9 4.1c3.1 1.4 3.1 2.5.2 6.2-2.8 3.4-4.4 2.9-5.3-1.9-1-5.3.4-6.5 5.1-4.3zM78.5 14.9c-3.3 1.6-6.9 3.6-7.9 4.4-1.9 1.4-1.9 1.6 1.4 4.8 1.8 1.9 4.6 5.3 6.1 7.7l2.7 4.2 2.6-3c2.5-3.1 4.6-8.7 4.6-12.6 0-4-1.2-8.4-2.4-8.4-.6 0-3.8 1.3-7.1 2.9zm5.2 7.2c-.8 6.1-2.3 7-5.3 3.4-1.3-1.7-2.4-3.5-2.4-4.1 0-1.3 3.7-3.2 6.4-3.3 1.6-.1 1.8.4 1.3 4z" })
+	]
+});
+//#endregion
+//#region src/components/EntityCard.tsx
+const EntityCard = ({ name, count, attributeSummaries = [], relationSummaries = [], maw }) => {
+	return /* @__PURE__ */ jsxs(Flex, {
+		w: "100%",
+		bd: "1px solid black",
+		bg: "white",
+		miw: 200,
+		maw,
+		mih: 100,
+		direction: "column",
+		children: [
+			/* @__PURE__ */ jsx(Text, {
+				fw: 700,
+				size: "sm",
+				ta: "center",
+				py: "4",
+				px: "xs",
+				style: { wordBreak: "break-word" },
+				children: `${name} (${count})`
+			}),
+			/* @__PURE__ */ jsx(Divider, {
+				c: "black",
+				size: "md"
+			}),
+			attributeSummaries.length !== 0 && /* @__PURE__ */ jsxs(Table, {
+				withRowBorders: false,
+				captionSide: "top",
+				layout: "fixed",
+				children: [/* @__PURE__ */ jsx(Table.Caption, {
+					mb: 0,
+					children: "Attributes"
+				}), /* @__PURE__ */ jsx(Table.Tbody, { children: attributeSummaries.map((attribute) => /* @__PURE__ */ jsxs(Table.Tr, { children: [/* @__PURE__ */ jsx(Table.Td, {
+					style: { wordBreak: "break-word" },
+					children: attribute.name
+				}), /* @__PURE__ */ jsx(Table.Td, {
+					ta: "end",
+					style: { wordBreak: "break-word" },
+					children: attribute.type
+				})] }, attribute.name)) })]
+			}),
+			relationSummaries.length !== 0 && /* @__PURE__ */ jsxs(Table, {
+				withRowBorders: false,
+				captionSide: "top",
+				layout: "fixed",
+				children: [/* @__PURE__ */ jsx(Table.Caption, {
+					mb: 0,
+					children: "Relations"
+				}), /* @__PURE__ */ jsx(Table.Tbody, { children: relationSummaries.map(({ target, qualifier, min_count, max_count }) => /* @__PURE__ */ jsxs(Table.Tr, { children: [
+					/* @__PURE__ */ jsx(Table.Td, {
+						style: { wordBreak: "break-word" },
+						children: target
+					}),
+					/* @__PURE__ */ jsx(Table.Td, {
+						style: { wordBreak: "break-word" },
+						children: qualifier ?? "None"
+					}),
+					/* @__PURE__ */ jsx(Table.Td, {
+						ta: "end",
+						w: 70,
+						style: { whiteSpace: "nowrap" },
+						children: min_count < max_count ? `${min_count}-${max_count}` : min_count
+					})
+				] }, `${target}-${qualifier}`)) })]
+			})
+		]
+	});
+};
+//#endregion
+//#region src/components/EntityOverview.tsx
+const EntityOverview = ({ attributes, relations, entityCounts, search = "" }) => {
+	const relationMap = useMemo(() => {
+		return relations.reduce((relationMap, currentRelation) => {
+			if (currentRelation.source in relationMap) relationMap[currentRelation.source]?.push(currentRelation);
+			else relationMap[currentRelation.source] = [currentRelation];
+			return relationMap;
+		}, {});
+	}, [relations]);
+	return /* @__PURE__ */ jsx(SimpleGrid, {
+		cols: {
+			base: 1,
+			sm: 2,
+			md: 4
 		},
-		...withTimestamp ? [{
-			accessor: "timestamp",
-			title: "date",
-			sortable: true
-		}] : [],
-		...attributes.map(({ attribute }) => ({
-			accessor: attribute,
-			sortable: true
-		})),
-		...relations.map(({ qualifier, target }) => ({
-			accessor: `${qualifier}::${target}`,
-			title: `${qualifier} (${target})`
-		}))
-	], [
-		withTimestamp,
-		attributes,
-		relations
-	]);
+		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);
+		})
+	});
+};
+//#endregion
+//#region src/routes/eventOverview.tsx
+const EventOverview = () => {
+	const { id } = useCurrentOcel();
+	const { data: eventsAttributes = [] } = useEventAttributes(id);
+	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
+		})
+	] })] });
+};
+var eventOverview_default = defineModuleRoute({
+	component: EventOverview,
+	label: "Event Overview",
+	name: "eventOverview",
+	requiresOcel: true
+});
+//#endregion
+//#region src/lib/fetcher.ts
+const customFetch$1 = async (config, options) => customFetch(config, options);
+//#endregion
+//#region src/api/base.ts
+/**
+* Generated by orval v8.19.0 🍺
+* Do not edit manually.
+* Ocelot
+* OpenAPI spec version: 1.0
+*/
+const withQueryKey = (query, queryKey) => {
+	const result = { queryKey };
+	for (const key of Object.keys(query)) {
+		if (key === "queryKey") continue;
+		Object.defineProperty(result, key, {
+			enumerable: true,
+			configurable: true,
+			get: () => query[key]
+		});
+	}
+	return result;
+};
+/**
+* @summary Get Events
+*/
+const paginatedEvents = (ocelId, params, options, signal) => {
+	return customFetch$1({
+		url: `/api/external/modules/ocelot/v1/${ocelId}/events`,
+		method: "GET",
+		params,
+		signal
+	}, options);
+};
+const getPaginatedEventsQueryKey = (ocelId, params) => {
+	return [`/api/external/modules/ocelot/v1/${ocelId}/events`, ...params ? [params] : []];
+};
+const getPaginatedEventsQueryOptions = (ocelId, params, options) => {
+	const { query: queryOptions, request: requestOptions } = options ?? {};
+	const queryKey = queryOptions?.queryKey ?? getPaginatedEventsQueryKey(ocelId, params);
+	const queryFn = ({ signal }) => paginatedEvents(ocelId, params, requestOptions, signal);
+	return {
+		queryKey,
+		queryFn,
+		enabled: ocelId !== null && ocelId !== void 0,
+		staleTime: 3e5,
+		...queryOptions
+	};
+};
+/**
+* @summary Get Events
+*/
+function usePaginatedEvents(ocelId, params, options, queryClient) {
+	const queryOptions = getPaginatedEventsQueryOptions(ocelId, params, options);
+	return withQueryKey(useQuery(queryOptions, queryClient), queryOptions.queryKey);
+}
+/**
+* @summary Get Objects
+*/
+const paginatedObjects = (ocelId, params, options, signal) => {
+	return customFetch$1({
+		url: `/api/external/modules/ocelot/v1/${ocelId}/objects`,
+		method: "GET",
+		params,
+		signal
+	}, options);
+};
+const getPaginatedObjectsQueryKey = (ocelId, params) => {
+	return [`/api/external/modules/ocelot/v1/${ocelId}/objects`, ...params ? [params] : []];
+};
+const getPaginatedObjectsQueryOptions = (ocelId, params, options) => {
+	const { query: queryOptions, request: requestOptions } = options ?? {};
+	const queryKey = queryOptions?.queryKey ?? getPaginatedObjectsQueryKey(ocelId, params);
+	const queryFn = ({ signal }) => paginatedObjects(ocelId, params, requestOptions, signal);
+	return {
+		queryKey,
+		queryFn,
+		enabled: ocelId !== null && ocelId !== void 0,
+		staleTime: 3e5,
+		...queryOptions
+	};
+};
+/**
+* @summary Get Objects
+*/
+function usePaginatedObjects(ocelId, params, options, queryClient) {
+	const queryOptions = getPaginatedObjectsQueryOptions(ocelId, params, options);
+	return withQueryKey(useQuery(queryOptions, queryClient), queryOptions.queryKey);
+}
+/**
+* @summary Get Object Columns
+*/
+const objectColumns = (ocelId, params, options, signal) => {
+	return customFetch$1({
+		url: `/api/external/modules/ocelot/v1/${ocelId}/objects/columns`,
+		method: "GET",
+		params,
+		signal
+	}, options);
+};
+const getObjectColumnsQueryKey = (ocelId, params) => {
+	return [`/api/external/modules/ocelot/v1/${ocelId}/objects/columns`, ...params ? [params] : []];
+};
+const getObjectColumnsQueryOptions = (ocelId, params, options) => {
+	const { query: queryOptions, request: requestOptions } = options ?? {};
+	const queryKey = queryOptions?.queryKey ?? getObjectColumnsQueryKey(ocelId, params);
+	const queryFn = ({ signal }) => objectColumns(ocelId, params, requestOptions, signal);
+	return {
+		queryKey,
+		queryFn,
+		enabled: ocelId !== null && ocelId !== void 0,
+		staleTime: 3e5,
+		...queryOptions
+	};
+};
+/**
+* @summary Get Object Columns
+*/
+function useObjectColumns(ocelId, params, options, queryClient) {
+	const queryOptions = getObjectColumnsQueryOptions(ocelId, params, options);
+	return withQueryKey(useQuery(queryOptions, queryClient), queryOptions.queryKey);
+}
+/**
+* @summary Get Activity Columns
+*/
+const activityColumns = (ocelId, params, options, signal) => {
+	return customFetch$1({
+		url: `/api/external/modules/ocelot/v1/${ocelId}/events/columns`,
+		method: "GET",
+		params,
+		signal
+	}, options);
+};
+const getActivityColumnsQueryKey = (ocelId, params) => {
+	return [`/api/external/modules/ocelot/v1/${ocelId}/events/columns`, ...params ? [params] : []];
+};
+const getActivityColumnsQueryOptions = (ocelId, params, options) => {
+	const { query: queryOptions, request: requestOptions } = options ?? {};
+	const queryKey = queryOptions?.queryKey ?? getActivityColumnsQueryKey(ocelId, params);
+	const queryFn = ({ signal }) => activityColumns(ocelId, params, requestOptions, signal);
+	return {
+		queryKey,
+		queryFn,
+		enabled: ocelId !== null && ocelId !== void 0,
+		staleTime: 3e5,
+		...queryOptions
+	};
+};
+/**
+* @summary Get Activity Columns
+*/
+function useActivityColumns(ocelId, params, options, queryClient) {
+	const queryOptions = getActivityColumnsQueryOptions(ocelId, params, options);
+	return withQueryKey(useQuery(queryOptions, queryClient), queryOptions.queryKey);
+}
+//#endregion
+//#region src/components/EntityTable.tsx
+const EntityTable = ({ entities, columns, onPageChange, onPageSizeChange, sortStatus, onStartStatusChange }) => {
 	const records = useMemo(() => entities.items.map((entity) => ({
 		...entity,
 		...entity.attributes,
 		...Object.assign({}, ...Object.entries(entity.relations).map(([qualifierName, entityIds]) => ({ [qualifierName]: entityIds.join(", ") })))
 	})), [entities]);
+	const transformedColumns = useMemo(() => columns.map((column) => ({
+		...column,
+		sortable: column.type === "attribute"
+	})), [columns]);
 	return /* @__PURE__ */ jsx(DataTable, {
 		page: entities.page,
 		totalRecords: entities.total_items,
 		recordsPerPage: entities.page_size,
 		onPageChange,
 		withColumnBorders: true,
-		columns,
+		columns: transformedColumns,
 		records,
 		recordsPerPageOptions: [
 			20,
@@ -65,8 +354,6 @@ const EntityTable = ({ entities, withTimestamp, attributes = [], relations = [],
 		onSortStatusChange: onStartStatusChange
 	});
 };
-var EntityTable_default = EntityTable;
-
 //#endregion
 //#region src/components/SingleLineTabs/SingleLineTabs.tsx
 const SingleLineTabs = ({ setCurrentTab, currentTab, tabs }) => {
@@ -79,7 +366,7 @@ const SingleLineTabs = ({ setCurrentTab, currentTab, tabs }) => {
 		setCurrentTab(newTab);
 		scrollIntoView({ alignment: "center" });
 	}, [scrollIntoView, setCurrentTab]);
-	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Flex, {
+	return /* @__PURE__ */ jsxs(Flex, {
 		align: "center",
 		justify: "center",
 		children: [
@@ -125,29 +412,20 @@ const SingleLineTabs = ({ setCurrentTab, currentTab, tabs }) => {
 				children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
 			})
 		]
-	}) });
+	});
 };
-var SingleLineTabs_default = SingleLineTabs;
-
 //#endregion
 //#region src/components/EntityPage.tsx
-const EntityPage = ({ type }) => {
-	const { id } = useCurrentOcel();
+const EntityPage = ({ ocelId, type, title, description }) => {
 	const areEntitiesEvents = type === "events";
-	const { data: entityCounts } = (areEntitiesEvents ? useEventCounts : useObjectCounts)({ ocel_id: id });
-	const { data: attributes } = (areEntitiesEvents ? useEventAttributes : useObjectAttributes)({ ocel_id: id });
-	const [currentTab, setCurrentTab] = useState("");
+	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: unfilteredRelations = [] } = (areEntitiesEvents ? useE2o : useO2o)({ ocel_id: id });
-	const relations = useMemo(() => {
-		return unfilteredRelations.filter(({ source }) => source === currentTab);
-	}, [unfilteredRelations, currentTab]);
-	const { data: entities } = (areEntitiesEvents ? useOcelotPaginatedEvents : useOcelotPaginatedObjects)({
-		ocel_id: id,
-		type: currentTab,
+	const { data: entities } = (areEntitiesEvents ? usePaginatedEvents : usePaginatedObjects)(ocelId, {
+		type: currentTab ?? "",
 		page_size: pageSize,
 		page,
 		...sort && {
@@ -155,9 +433,11 @@ const EntityPage = ({ type }) => {
 			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]);
@@ -165,172 +445,58 @@ const EntityPage = ({ type }) => {
 	return /* @__PURE__ */ jsxs(Flex, {
 		direction: "column",
 		h: "100%",
-		children: [/* @__PURE__ */ jsx(SingleLineTabs_default, {
-			tabs: Object.entries(entityCounts ?? {}).map(([entityName, count]) => ({
-				value: entityName,
-				label: `${entityName} (${count})`
-			})),
-			setCurrentTab: (newTab) => {
-				setCurrentTab(newTab);
-				setPage(1);
-				setSort(void 0);
-			},
-			currentTab: currentTab ?? entityNames[0]
-		}), entities && /* @__PURE__ */ jsx(EntityTable_default, {
-			entities,
-			attributes: attributes?.[currentTab ?? entityNames[0]],
-			withTimestamp: type === "events",
-			onPageChange: (newPage) => setPage(newPage),
-			onPageSizeChange: (newPageSize) => setPageSize(newPageSize),
-			relations,
-			sortStatus: sort,
-			onStartStatusChange: (sortStatus) => setSort(sortStatus)
-		})]
-	});
-};
-var EntityPage_default = EntityPage;
-
-//#endregion
-//#region src/routes/events.tsx
-const EventPage = () => /* @__PURE__ */ jsx(EntityPage_default, { type: "events" });
-var events_default = defineModuleRoute({
-	component: EventPage,
-	label: "Events",
-	name: "events",
-	requiresOcel: true
-});
-
-//#endregion
-//#region src/routes/objects.tsx
-const ObjectPage = () => /* @__PURE__ */ jsx(EntityPage_default, { type: "objects" });
-var objects_default = defineModuleRoute({
-	component: ObjectPage,
-	label: "Objects",
-	name: "objects",
-	requiresOcel: true
-});
-
-//#endregion
-//#region src/components/EntityCard.tsx
-const EntityCard = ({ name, count, attributeSummaries = [], relationSummaries = [] }) => {
-	return /* @__PURE__ */ jsxs(Flex, {
-		w: "100%",
-		bd: "1px solid black",
-		bg: "white",
-		miw: 200,
-		mih: 100,
-		direction: "column",
 		children: [
-			/* @__PURE__ */ jsx(Text, {
-				fw: 700,
-				size: "sm",
-				ta: "center",
-				py: "4",
-				children: `${name} (${count})`
+			title && /* @__PURE__ */ jsx(Title, {
+				order: 2,
+				children: title
 			}),
-			/* @__PURE__ */ jsx(Divider, {
-				c: "black",
-				size: "md"
+			description && /* @__PURE__ */ jsx(Text, {
+				c: "dimmed",
+				size: "sm",
+				mb: "xs",
+				children: description
 			}),
-			attributeSummaries.length !== 0 && /* @__PURE__ */ jsxs(Table, {
-				withRowBorders: false,
-				captionSide: "top",
-				style: {
-					overflow: "hidden",
-					textOverflow: "ellipsis"
+			/* @__PURE__ */ jsx(SingleLineTabs, {
+				tabs: Object.entries(entityCounts ?? {}).map(([entityName, count]) => ({
+					value: entityName,
+					label: `${entityName} (${count})`
+				})),
+				setCurrentTab: (newTab) => {
+					setCurrentTab(newTab);
+					setPage(1);
+					setSort(void 0);
 				},
-				children: [/* @__PURE__ */ jsx(Table.Caption, {
-					mb: 0,
-					children: "Attributes"
-				}), /* @__PURE__ */ jsx(Table.Tbody, { children: attributeSummaries.map((attribute) => /* @__PURE__ */ jsxs(Table.Tr, { children: [/* @__PURE__ */ jsxs(Table.Td, { children: [" ", attribute.attribute] }), /* @__PURE__ */ jsx(Table.Td, {
-					ta: "end",
-					children: attribute.type
-				})] }, attribute.attribute)) })]
+				currentTab: currentTab ?? entityNames[0] ?? ""
 			}),
-			relationSummaries.length !== 0 && /* @__PURE__ */ jsxs(Table, {
-				withRowBorders: false,
-				captionSide: "top",
-				style: {
-					overflow: "hidden",
-					textOverflow: "ellipsis"
-				},
-				children: [/* @__PURE__ */ jsx(Table.Caption, {
-					mb: 0,
-					children: "Relations"
-				}), /* @__PURE__ */ jsx(Table.Tbody, { children: relationSummaries.map(({ target, qualifier, min_count, max_count }) => /* @__PURE__ */ jsxs(Table.Tr, { children: [
-					/* @__PURE__ */ jsx(Table.Td, { children: target }),
-					/* @__PURE__ */ jsx(Table.Td, { children: qualifier ?? "None" }),
-					/* @__PURE__ */ jsx(Table.Td, { children: min_count < max_count ? `${min_count}-${max_count}` : min_count })
-				] }, `${target}-${qualifier}`)) })]
+			entities && /* @__PURE__ */ jsx(EntityTable, {
+				entities,
+				columns: data ?? [],
+				withTimestamp: type === "events",
+				onPageChange: (newPage) => setPage(newPage),
+				onPageSizeChange: (newPageSize) => setPageSize(newPageSize),
+				sortStatus: sort,
+				onStartStatusChange: (sortStatus) => setSort(sortStatus)
 			})
 		]
 	});
 };
-var EntityCard_default = EntityCard;
-
-//#endregion
-//#region src/components/EntityOverview.tsx
-const EntityOverview = ({ attributes, relations, entityCounts, search = "" }) => {
-	const relationMap = useMemo(() => {
-		return relations.reduce((relationMap$1, currentRelation) => {
-			if (currentRelation.source in relationMap$1) relationMap$1[currentRelation.source]?.push(currentRelation);
-			else relationMap$1[currentRelation.source] = [currentRelation];
-			return relationMap$1;
-		}, {});
-	}, [relations]);
-	return /* @__PURE__ */ jsx(SimpleGrid, {
-		cols: {
-			base: 1,
-			sm: 2,
-			md: 4,
-			lg: 5
-		},
-		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[event]?.some(({ attribute }) => attribute.toLowerCase().includes(toSearch)));
-		}, [
-			search,
-			relationMap,
-			entityCounts,
-			attributes
-		]).map(([name, count]) => {
-			return /* @__PURE__ */ jsx(EntityCard_default, {
-				count,
-				name,
-				attributeSummaries: attributes[name] ?? [],
-				relationSummaries: relationMap[name] ?? []
-			}, name);
-		})
-	});
-};
-var EntityOverview_default = EntityOverview;
-
 //#endregion
-//#region src/routes/eventOverview.tsx
-const EventOverview = () => {
+//#region src/routes/events.tsx
+const EventPage = () => {
 	const { id } = useCurrentOcel();
-	const { data: eventsAttributes = {} } = useEventAttributes({ ocel_id: id });
-	const { data: e2o = [] } = useE2o({ ocel_id: id });
-	const { data: eventCounts, isLoading: isEventCountsLoading } = useEventCounts({ ocel_id: id });
-	const [searchValue, setSearchValue] = useDebouncedState("", 200);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(LoadingOverlay, { visible: isEventCountsLoading }), /* @__PURE__ */ jsxs(Stack, { children: [/* @__PURE__ */ jsx(Input, {
-		leftSection: /* @__PURE__ */ jsx(SearchIcon, {}),
-		defaultValue: searchValue,
-		onChange: (newSearch) => setSearchValue(newSearch.target.value)
-	}), eventCounts && /* @__PURE__ */ jsx(EntityOverview_default, {
-		relations: e2o,
-		entityCounts: eventCounts,
-		attributes: eventsAttributes,
-		search: searchValue
-	})] })] });
+	return /* @__PURE__ */ jsx(EntityPage, {
+		ocelId: id ?? "",
+		type: "events",
+		title: "Event Inspector",
+		description: "Browse the individual events in this log. Pick an event type to see its records in a table, with their attributes and the objects they have a relation with."
+	}, id);
 };
-var eventOverview_default = defineModuleRoute({
-	component: EventOverview,
-	label: "Event Overview",
-	name: "eventOverview",
+var events_default = defineModuleRoute({
+	component: EventPage,
+	label: "Events",
+	name: "events",
 	requiresOcel: true
 });
-
 //#endregion
 //#region src/components/Graph/util/getEdgeParams.tsx
 const getRectangleIntersection = (targetNode, sourceNode) => {
@@ -404,7 +570,6 @@ function getEdgeParams(source, target) {
 		targetPos
 	};
 }
-
 //#endregion
 //#region src/components/Graph/edges/BaseEdge.tsx
 const EdgeLabel = ({ transform, label }) => {
@@ -422,7 +587,7 @@ const EdgeLabel = ({ transform, label }) => {
 		children: label
 	});
 };
-const customMarkes = ["url('#double-rect')", "url('#rect')"];
+const customMarkers = ["url('#double-rect')", "url('#rect')"];
 const BaseEdge$1 = ({ labels = [], markerEnd, path, ...rest }) => {
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsx("svg", {
@@ -521,14 +686,12 @@ const BaseEdge$1 = ({ labels = [], markerEnd, path, ...rest }) => {
 		}),
 		/* @__PURE__ */ jsx(BaseEdge, {
 			path,
-			markerEnd: customMarkes.includes(markerEnd ?? "") ? markerEnd?.replace("rect", "rect-end") : markerEnd,
+			markerEnd: customMarkers.includes(markerEnd ?? "") ? markerEnd?.replace("rect", "rect-end") : markerEnd,
 			...rest
 		}),
 		/* @__PURE__ */ jsx(EdgeLabelRenderer, { children: labels.map((props, index) => /* @__PURE__ */ jsx(EdgeLabel, { ...props }, index)) })
 	] });
 };
-var BaseEdge_default = BaseEdge$1;
-
 //#endregion
 //#region src/components/Graph/edges/FloatingEdge.tsx
 const FloatingEdge = ({ data, source, target, ...props }) => {
@@ -543,17 +706,15 @@ const FloatingEdge = ({ data, source, target, ...props }) => {
 		targetY: ty
 	});
 	const angle = Math.atan2((sy > ty ? -1 : 1) * offsetY, offsetX) * (180 / Math.PI);
-	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(BaseEdge_default, {
+	return /* @__PURE__ */ jsx(BaseEdge$1, {
 		path: edgePath,
 		...props,
 		labels: data?.mid ? [{
 			transform: `translate(-50% , -50%) translate(${labelX}px, ${labelY}px) rotate(${angle}deg)`,
 			label: data.mid
 		}] : []
-	}) });
+	});
 };
-var FloatingEdge_default = FloatingEdge;
-
 //#endregion
 //#region src/components/Graph/edges/LoopEdge.tsx
 const LoopingEdge = ({ data, source, ...props }) => {
@@ -573,7 +734,7 @@ const LoopingEdge = ({ data, source, ...props }) => {
 		targetPosition: Position.Top,
 		offset: (data?.offset ?? 0) * 15
 	});
-	return /* @__PURE__ */ jsx(BaseEdge_default, {
+	return /* @__PURE__ */ jsx(BaseEdge$1, {
 		path: edgePath,
 		...props,
 		labels: data?.mid ? [{
@@ -582,8 +743,6 @@ const LoopingEdge = ({ data, source, ...props }) => {
 		}] : []
 	});
 };
-var LoopEdge_default = LoopingEdge;
-
 //#endregion
 //#region src/components/Graph/layout/dagre.ts
 const useDagreLayout = () => {
@@ -617,7 +776,6 @@ const useDagreLayout = () => {
 		fitView
 	]) };
 };
-
 //#endregion
 //#region src/components/Graph/layout/elk.ts
 const elk = new ELK();
@@ -635,7 +793,7 @@ const useElkLayout = () => {
 		"elk.edgeRouting": "ORTHOGONAL",
 		"elk.layered.nodePlacement.strategy": "NETWORK_SIMPLEX"
 	};
-	return { layout: useCallback(async (options) => {
+	return { layout: useCallback(async (_options) => {
 		const nodes = getNodes();
 		const edges = getEdges();
 		const graph = {
@@ -654,7 +812,7 @@ const useElkLayout = () => {
 				id: edge.id,
 				sources: [edge.source],
 				targets: [edge.target],
-				layoutOptions: edge?.data?.["mid"] ? { "elk.edge.minimalLength": edge.data["mid"].toString() } : void 0
+				layoutOptions: edge?.data?.mid ? { "elk.edge.minimalLength": edge.data.mid.toString() } : void 0
 			}))
 		};
 		try {
@@ -685,7 +843,7 @@ const useElkLayout = () => {
 				};
 			}));
 			fitView();
-		} catch (error) {}
+		} catch (_error) {}
 	}, [
 		setEdges,
 		setNodes,
@@ -694,7 +852,6 @@ const useElkLayout = () => {
 		fitView
 	]) };
 };
-
 //#endregion
 //#region src/components/Graph/nodes/CircleNode.tsx
 const CircleNode = memo(({ data: { color, label, inner, diameter = 50 } }) => {
@@ -737,8 +894,6 @@ const CircleNode = memo(({ data: { color, label, inner, diameter = 50 } }) => {
 		})
 	] });
 });
-var CircleNode_default = CircleNode;
-
 //#endregion
 //#region src/components/Graph/nodes/RectangleNode.tsx
 var RectangleNode_default = memo(({ data: { color, label, inner } }) => {
@@ -780,21 +935,15 @@ var RectangleNode_default = memo(({ data: { color, label, inner } }) => {
 		})
 	] });
 });
-
-//#endregion
-//#region src/components/Graph/Graph.module.css?css_module
-const classes = { "test": "_79UKFW_test" };
-var Graph_module_default = classes;
-const _test0 = classes["test"];
-
 //#endregion
 //#region src/components/Graph/index.tsx
+const { saveAs } = FileSaver;
 const edgeTypes = {
-	floating: FloatingEdge_default,
-	looping: LoopEdge_default
+	floating: FloatingEdge,
+	looping: LoopingEdge
 };
 const nodeTypes = {
-	circle: CircleNode_default,
+	circle: CircleNode,
 	rectangle: RectangleNode_default
 };
 const layoutToHook = {
@@ -829,15 +978,35 @@ const InnerFlow = ({ initialNodes, initialEdges, layoutOptions = { type: "dagre"
 			} }
 		};
 	}));
+	useEffect(() => {
+		setNodes((prev) => {
+			const prevById = new Map(prev.map((node) => [node.id, node]));
+			return initialNodes.map((node) => {
+				const existing = prevById.get(node.id);
+				if (existing) return {
+					...existing,
+					data: node.data
+				};
+				return {
+					...node,
+					type: node.data.type,
+					position: {
+						x: 0,
+						y: 0
+					}
+				};
+			});
+		});
+	}, [initialNodes]);
 	const onNodesChange = useCallback((changes) => {
 		const positionChange = changes.filter((change) => change.type === "position");
 		if (positionChange.length > 0) {
 			const movedNodes = positionChange.map((change) => change.id);
-			setEdges((edges$1) => edges$1.map((edge) => ({
+			setEdges((edges) => edges.map((edge) => ({
 				...edge,
 				data: {
 					...edge.data,
-					position: movedNodes.includes(edge.target) || movedNodes.includes(edge.source) ? void 0 : edge.data?.["position"]
+					position: movedNodes.includes(edge.target) || movedNodes.includes(edge.source) ? void 0 : edge.data?.position
 				}
 			})));
 		}
@@ -853,7 +1022,6 @@ const InnerFlow = ({ initialNodes, initialEdges, layoutOptions = { type: "dagre"
 		hasMeasuredNodes
 	]);
 	return /* @__PURE__ */ jsx(ReactFlow, {
-		className: Graph_module_default["test"],
 		style: { height: "100%" },
 		nodes,
 		edges,
@@ -870,9 +1038,8 @@ const InnerFlow = ({ initialNodes, initialEdges, layoutOptions = { type: "dagre"
 			children: /* @__PURE__ */ jsx(ActionIcon, {
 				variant: "transparent",
 				onClick: () => handleDownload("ocelot"),
-				className: "test",
 				children: /* @__PURE__ */ jsx(DownloadIcon, {
-					className: "test",
+					color: "black",
 					size: 18
 				})
 			})
@@ -880,27 +1047,26 @@ const InnerFlow = ({ initialNodes, initialEdges, layoutOptions = { type: "dagre"
 	});
 };
 const Graph = (props) => /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(InnerFlow, { ...props }) });
-var Graph_default = Graph;
-
 //#endregion
 //#region src/routes/objectOverview.tsx
 const ObjectGraph = () => {
 	const { id: ocelId } = useCurrentOcel();
-	const { data: o2o } = useO2o({ ocel_id: ocelId });
-	const { data: objectAttributes } = useObjectAttributes({ ocel_id: ocelId });
-	const { data: objectCounts } = useObjectCounts({ ocel_id: ocelId });
+	const { data: o2o } = useO2o(ocelId);
+	const { data: objectAttributes = [] } = useObjectAttributes(ocelId);
+	const { data: objectCounts } = useObjectCounts(ocelId);
 	const [searchValue, setSearchValue] = useDebouncedState("", 200);
-	const [vizualization, setVizualization] = useState("graph");
+	const [visualization, setVisualization] = useState("graph");
 	const nodes = useMemo(() => {
 		if (!objectCounts || !objectAttributes) return [];
 		return Object.entries(objectCounts).map(([objectName, count]) => ({
 			id: objectName,
 			data: {
 				type: "rectangle",
-				inner: /* @__PURE__ */ jsx(EntityCard_default, {
+				inner: /* @__PURE__ */ jsx(EntityCard, {
 					count,
 					name: objectName,
-					attributeSummaries: objectAttributes[objectName]
+					maw: 300,
+					attributeSummaries: objectAttributes.filter(({ entity_type }) => entity_type === objectName)
 				}, objectName)
 			}
 		}));
@@ -909,15 +1075,24 @@ const ObjectGraph = () => {
 		w: "100%",
 		h: "100%",
 		children: [
+			/* @__PURE__ */ jsx(Title, {
+				order: 2,
+				children: "Object Overview"
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				c: "dimmed",
+				size: "sm",
+				children: "Get an overview of all object types in this log. Switch between an interactive graph and a card grid to see how many objects of each type exist, what attributes they have, and how they relate to one another."
+			}),
 			/* @__PURE__ */ jsxs(Group, {
 				justify: "end",
-				children: [vizualization === "cards" && /* @__PURE__ */ jsx(Input, {
+				children: [visualization === "cards" && /* @__PURE__ */ jsx(Input, {
 					leftSection: /* @__PURE__ */ jsx(SearchIcon, {}),
 					defaultValue: searchValue,
 					onChange: (newSearch) => setSearchValue(newSearch.target.value)
 				}), /* @__PURE__ */ jsx(SegmentedControl, {
-					onChange: (newViz) => setVizualization(newViz),
-					value: vizualization,
+					onChange: (newViz) => setVisualization(newViz),
+					value: visualization,
 					data: [{
 						label: "Graph",
 						value: "graph"
@@ -927,9 +1102,9 @@ const ObjectGraph = () => {
 					}]
 				})]
 			}),
-			vizualization === "graph" && o2o && objectAttributes && /* @__PURE__ */ jsx(Graph_default, {
+			visualization === "graph" && o2o && objectAttributes && /* @__PURE__ */ jsx(Graph, {
 				initialNodes: nodes,
-				initialEdges: o2o.map(({ source, target, sum, qualifier }) => ({
+				initialEdges: o2o.response.map(({ source, target, sum, qualifier }) => ({
 					source,
 					target,
 					markerEnd: { type: MarkerType.ArrowClosed },
@@ -946,10 +1121,10 @@ const ObjectGraph = () => {
 					}
 				}
 			}, ocelId),
-			vizualization === "cards" && objectCounts && /* @__PURE__ */ jsx(EntityOverview_default, {
+			visualization === "cards" && objectCounts && /* @__PURE__ */ jsx(EntityOverview, {
 				entityCounts: objectCounts,
-				attributes: objectAttributes ?? {},
-				relations: o2o ?? [],
+				attributes: objectAttributes,
+				relations: o2o?.response ?? [],
 				search: searchValue
 			})
 		]
@@ -961,43 +1136,36 @@ var objectOverview_default = defineModuleRoute({
 	name: "objectOverview",
 	requiresOcel: true
 });
-
 //#endregion
-//#region src/components/OcelotIcon.tsx
-const OcelotIcon = (props) => /* @__PURE__ */ jsxs("svg", {
-	xmlns: "http://www.w3.org/2000/svg",
-	width: 128,
-	height: 128,
-	viewBox: "0 0 96 96",
-	...props,
-	fill: "currentColor",
-	children: [
-		/* @__PURE__ */ jsx("title", { children: "Ocelot" }),
-		/* @__PURE__ */ jsx("path", { d: "M2.5 8.2c-2.2 5.6-2.3 18-.2 23 .9 2.1 2.7 5.3 4.1 7.1C8.2 40.6 8.6 42 8 43c-2 3.2-1.1 9.1 2.4 14.8 1.9 3.2 4 8.4 4.6 11.7 1.6 8 2.9 9.9 9.4 12.8 3 1.4 7.1 4.2 9.1 6.1l3.6 3.6h21.8l3.6-3.6c2-1.9 6-4.7 8.9-6 3-1.4 5.9-3.1 6.6-3.9.6-.8 2-4.9 3.1-9.1 1.1-4.3 3.3-9.9 4.9-12.4 3.1-4.8 4-10.9 2-14-.6-1-.2-2.4 1.6-4.7 1.4-1.8 3.2-5 4.1-7.1 2.1-5 2-17.4-.2-23C91.8 4.1 91.7 4 87 4c-5.6 0-12 2.1-17.3 5.6-3.9 2.5-3.9 2.5-7.5.7-2.9-1.4-6-1.8-14.2-1.8s-11.3.4-14.2 1.8c-3.6 1.8-3.6 1.8-7.5-.7C21 6.1 14.6 4 9 4c-4.7 0-4.8.1-6.5 4.2zM19 11.1c2.5 1.1 6.1 3.3 8.2 4.9 3.2 2.6 3.8 2.8 4.9 1.4 2.9-3.5 7.3-4.8 15.9-4.8 6.9 0 9.3.4 12.8 2.2 2.3 1.2 4.2 2.7 4.2 3.3 0 .5 1.7-.4 3.8-2 4.3-3.5 11.1-6.7 16.3-7.6 3.6-.7 3.7-.6 4.9 3.1 3 8.9.5 19.7-5.9 25.8l-2.9 2.8 1.9 3.2c2.5 4.2 2.4 6.5-.6 10.7-1.4 1.9-3.3 5.8-4.1 8.6-.9 2.9-1.8 5.3-2.1 5.3-.9 0 .6-8.1 2.8-14.6 1.9-5.6 1.9-6.3.5-9.7-1.6-4-2.7-4.5-4.6-2.2-1 1.2-1 1.8 0 3 1.3 1.6 1.1 3.8-1.5 12.5-.9 3.3-1.4 8.3-1.3 12.5l.3 7-4.9 2.8c-2.7 1.5-5.1 2.5-5.4 2.2-.2-.2.7-1.8 2.2-3.5 2.2-2.7 2.6-4.1 2.6-9.5 0-7.6-.9-10.1-5.5-16.2-4.5-5.8-4.6-8.1-.5-7.5 1.9.3 4.3-.4 6.6-1.7 2-1.2 3.9-1.9 4.2-1.7.5.6 3.1-2.4 3.2-3.5 0-1.1-7.9-3.9-11.1-3.9-7.1 0-11.8 5.6-10.5 12.5.4 1.9 2.3 5.6 4.3 8.2 5.5 7.2 6.6 17.9 2.2 21.9-1.4 1.3-2.6 1.4-5.6.7-3.5-.8-3.8-1.1-4.1-4.8-.3-3.7 0-4.1 2.8-5.2 2.3-.9 3-1.7 3-3.9 0-2.5-.1-2.6-1.7-1.2-2.2 1.8-10.4 1.8-12.6-.1-1.5-1.2-1.7-1-1.7 1.4 0 2.1.7 2.9 3 3.8 2.8 1.1 3.1 1.5 2.8 5.2-.3 3.7-.6 4-4.1 4.8-3.3.8-4.2.6-5.9-1.1-1.7-1.7-2.1-3.2-2-8.8.1-4.3.7-7.4 1.7-8.8 5.1-6.9 7.5-11.3 7.5-13.7C43 38.5 38.5 34 32.1 34 28.9 34 21 36.8 21 37.9c.1 1.1 2.7 4.1 3.2 3.5.3-.2 2.2.5 4.2 1.7 2.3 1.3 4.7 2 6.6 1.7 4.1-.6 4 1.7-.5 7.5-4.6 6.1-5.5 8.6-5.5 16.2 0 5.4.4 6.8 2.6 9.5 1.5 1.7 2.4 3.3 2.2 3.5-.3.3-2.7-.7-5.4-2.2l-4.9-2.8.3-7.7c.2-5.6-.2-9.2-1.8-13.7-2.3-6.9-2.5-9.2-.8-10.9.8-.8.8-1.5-.2-2.7-1.9-2.3-3-1.8-4.6 2.2-1.4 3.4-1.4 4.1.5 9.7 2.2 6.5 3.7 14.6 2.8 14.6-.3 0-1.2-2.4-2.1-5.3-.8-2.8-2.7-6.7-4.1-8.6-3-4.2-3.1-6.5-.6-10.7l1.9-3.2-2.9-2.8C5.5 31.3 3 20.5 6 11.6c1.2-3.7 1.3-3.8 4.9-3.1 2 .4 5.6 1.5 8.1 2.6zm39.2 72.8C60.6 86.3 56.3 88 48 88c-12.3 0-15-4.2-4.2-6.5 5.1-1.1 12.2 0 14.4 2.4z" }),
-		/* @__PURE__ */ jsx("path", { d: "M8.6 15.1c-1.3 6.8.1 13.2 4 17.9l2.6 3 2.7-4.2c1.5-2.4 4.3-5.8 6.1-7.7 3.3-3.2 3.3-3.4 1.4-4.8-2.5-1.9-13.6-7.3-15-7.3-.6 0-1.4 1.4-1.8 3.1zm8.9 4.1c3.1 1.4 3.1 2.5.2 6.2-2.8 3.4-4.4 2.9-5.3-1.9-1-5.3.4-6.5 5.1-4.3zM78.5 14.9c-3.3 1.6-6.9 3.6-7.9 4.4-1.9 1.4-1.9 1.6 1.4 4.8 1.8 1.9 4.6 5.3 6.1 7.7l2.7 4.2 2.6-3c2.5-3.1 4.6-8.7 4.6-12.6 0-4-1.2-8.4-2.4-8.4-.6 0-3.8 1.3-7.1 2.9zm5.2 7.2c-.8 6.1-2.3 7-5.3 3.4-1.3-1.7-2.4-3.5-2.4-4.1 0-1.3 3.7-3.2 6.4-3.3 1.6-.1 1.8.4 1.3 4z" })
-	]
-});
-var OcelotIcon_default = OcelotIcon;
-
+//#region src/routes/objects.tsx
+const ObjectPage = () => {
+	const { id } = useCurrentOcel();
+	return /* @__PURE__ */ jsx(EntityPage, {
+		ocelId: id ?? "",
+		type: "objects",
+		title: "Object Inspector",
+		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);
+};
 //#endregion
-//#region src/config.ts
-var config_default = defineModule({
+//#region src/index.ts
+var src_default = defineModule({
 	name: "ocelot",
-	description: "A tool for exploring object-centric event logs, allowing yout to search events and objects and visualize their relationships and attributes.",
+	description: "A tool for exploring object-centric event logs, allowing you to search events and objects and visualize their relationships and attributes.",
 	label: "Ocelot",
 	authors: [{ name: "Öztürk, Görkem-Emre" }],
 	routes: [
 		events_default,
-		objects_default,
+		defineModuleRoute({
+			component: ObjectPage,
+			label: "Objects",
+			name: "objects",
+			requiresOcel: true
+		}),
 		eventOverview_default,
 		objectOverview_default
 	],
-	icon: OcelotIcon_default
+	icon: OcelotIcon
 });
-
-//#endregion
-//#region src/index.ts
-var src_default = config_default;
-
 //#endregion
-export { src_default as default };
+export { src_default as default };

package/dist/style.css

@@ -0,0 +1,9 @@
+.floating-edges {
+  width: 100%;
+  height: 100vh;
+  margin: 1rem;
+}
+
+.react-flow__handle {
+  opacity: 0;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ocelescope/ocelot",
   "type": "module",
-  "version": "0.0.0",
+  "version": "0.1.3",
   "description": "A module for inspections of OCELs",
   "author": "Görkem-Emre Öztürk <goerkem.oeztuerk@rwth-aachen.de>",
   "license": "MIT",
@@ -16,7 +16,7 @@
   "exports": {
     ".": "./dist/index.js",
     "./package.json": "./package.json",
-    "./styles": "./dist/styles/styles.js"
+    "./styles.css": "./dist/style.css"
   },
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -28,35 +28,42 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@dagrejs/dagre": "^2.0.4",
-    "@mantine/core": "^8.3.14",
-    "@mantine/hooks": "^8.3.14",
+    "@dagrejs/dagre": "^3.0.0",
+    "@mantine/core": "^9.4.0",
+    "@mantine/hooks": "^9.4.0",
+    "@ocelescope/api-base": "^0.2.0",
+    "@ocelescope/core": "^0.1.2",
     "@tanstack/react-query": "^5.90.21",
     "@xyflow/react": "^12.10.1",
+    "dayjs": "^1.11.19",
+    "elkjs": "^0.11.0",
     "file-saver": "^2.0.5",
-    "html-to-image": "^1.11.13",
-    "lucide-react": "^0.563.0",
-    "mantine-datatable": "^8.3.13",
+    "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",
-    "@ocelescope/core": "0.0.0",
-    "@ocelescope/api-base": "0.0.0"
+    "recharts": "^3.2.1",
+    "axios": "^1.18.0",
+    "@ocelescope/api-client": "^0.1.0"
   },
   "devDependencies": {
+    "@tsdown/css": "^0.22.0",
+    "@types/css-modules": "^1.0.5",
     "@tsconfig/strictest": "^2.0.8",
     "@types/file-saver": "^2.0.7",
     "@types/node": "^25.0.3",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
-    "tsdown": "^0.18.1",
-    "typescript": "^5.9.3"
-  },
-  "dependencies": {
-    "elkjs": "^0.11.0"
+    "@ocelescope/api-config": "^0.1.0",
+    "tsdown": "^0.22.0",
+    "typescript": "^5.9.3",
+    "orval": "^8.5.2"
   },
   "scripts": {
-    "build": "tsdown",
-    "dev": "tsdown --watch",
-    "typecheck": "tsc --noEmit"
+    "dev": "tsdown --watch ./src",
+    "typecheck": "tsc --noEmit",
+    "build": "pnpm generate:api && orval && tsdown",
+    "generate:api": "uv run ocelescope-backend openapi --module ocelot"
   }
 }

package/dist/index.css

@@ -1 +0,0 @@
-._79UKFW_test{color:#00f;background-color:red}

package/dist/styles/styles.css

@@ -1 +0,0 @@
-.test{color:red;background-color:red}.floating-edges{width:100%;height:100vh;margin:1rem}.react-flow__handle{opacity:0}

package/dist/styles/styles.d.ts

@@ -1 +0,0 @@
-import "@xyflow/react/dist/style.css";

package/dist/styles/styles.js

@@ -1 +0,0 @@
-import "@xyflow/react/dist/style.css";