@ocelescope/ocelot 0.0.0

package/README.md

@@ -0,0 +1,29 @@
+# react-components-starter
+
+A starter for creating a React component library.
+
+## Development
+
+- Install dependencies:
+
+```bash
+npm install
+```
+
+- Run the playground:
+
+```bash
+npm run play
+```
+
+- Run the unit tests:
+
+```bash
+npm run test
+```
+
+- Build the library:
+
+```bash
+npm run build
+```

package/dist/index.css

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

package/dist/index.d.ts

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

package/dist/index.js

@@ -0,0 +1,1003 @@
+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 { useDebouncedState, useScrollIntoView } from "@mantine/hooks";
+import { ChevronLeftIcon, ChevronRightIcon, DownloadIcon, SearchIcon } from "lucide-react";
+import { BaseEdge, Controls, EdgeLabelRenderer, Handle, MarkerType, Position, ReactFlow, ReactFlowProvider, applyNodeChanges, getSmoothStepPath, getStraightPath, useEdgesState, useInternalNode, useReactFlow } from "@xyflow/react";
+import { saveAs } 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
+		},
+		...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
+	]);
+	const records = useMemo(() => entities.items.map((entity) => ({
+		...entity,
+		...entity.attributes,
+		...Object.assign({}, ...Object.entries(entity.relations).map(([qualifierName, entityIds]) => ({ [qualifierName]: entityIds.join(", ") })))
+	})), [entities]);
+	return /* @__PURE__ */ jsx(DataTable, {
+		page: entities.page,
+		totalRecords: entities.total_items,
+		recordsPerPage: entities.page_size,
+		onPageChange,
+		withColumnBorders: true,
+		columns,
+		records,
+		recordsPerPageOptions: [
+			20,
+			40,
+			50
+		],
+		onRecordsPerPageChange: onPageSizeChange,
+		sortStatus: sortStatus ?? {
+			columnAccessor: "id",
+			direction: "asc"
+		},
+		onSortStatusChange: onStartStatusChange
+	});
+};
+var EntityTable_default = EntityTable;
+
+//#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__ */ jsx(Fragment, { children: /* @__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, {})
+			})
+		]
+	}) });
+};
+var SingleLineTabs_default = SingleLineTabs;
+
+//#endregion
+//#region src/components/EntityPage.tsx
+const EntityPage = ({ type }) => {
+	const { id } = useCurrentOcel();
+	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 [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,
+		page_size: pageSize,
+		page,
+		...sort && {
+			sort_by: sort.columnAccessor,
+			ascending: sort.direction === "asc"
+		}
+	}, { query: {
+		placeholderData: keepPreviousData,
+		staleTime: 5e3
+	} });
+	useEffect(() => {
+		if (!currentTab && entityNames.length > 0) setCurrentTab(entityNames[0]);
+	}, [currentTab, entityNames]);
+	if (entityNames.length === 0) return null;
+	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})`
+			}),
+			/* @__PURE__ */ jsx(Divider, {
+				c: "black",
+				size: "md"
+			}),
+			attributeSummaries.length !== 0 && /* @__PURE__ */ jsxs(Table, {
+				withRowBorders: false,
+				captionSide: "top",
+				style: {
+					overflow: "hidden",
+					textOverflow: "ellipsis"
+				},
+				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)) })]
+			}),
+			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}`)) })]
+			})
+		]
+	});
+};
+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 = () => {
+	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
+	})] })] });
+};
+var eventOverview_default = defineModuleRoute({
+	component: EventOverview,
+	label: "Event Overview",
+	name: "eventOverview",
+	requiresOcel: true
+});
+
+//#endregion
+//#region src/components/Graph/util/getEdgeParams.tsx
+const getRectangleIntersection = (targetNode, sourceNode) => {
+	const { width = 0, height = 0 } = sourceNode.measured;
+	const sourcePos = sourceNode.internals.positionAbsolute;
+	const targetPos = targetNode.internals.positionAbsolute;
+	const w = width / 2;
+	const h = height / 2;
+	const x2 = sourcePos.x + w;
+	const y2 = sourcePos.y + h;
+	const x1 = targetPos.x + (targetNode.measured.width ?? 0) / 2;
+	const y1 = targetPos.y + (targetNode.measured.height ?? 0) / 2;
+	const xx1 = (x1 - x2) / (2 * w) - (y1 - y2) / (2 * h);
+	const yy1 = (x1 - x2) / (2 * w) + (y1 - y2) / (2 * h);
+	const a = 1 / (Math.abs(xx1) + Math.abs(yy1));
+	const xx3 = a * xx1;
+	const yy3 = a * yy1;
+	return {
+		x: w * (xx3 + yy3) + x2,
+		y: h * (-xx3 + yy3) + y2
+	};
+};
+const getCircleIntersection = (source, target) => {
+	const sourceX = source.internals.positionAbsolute.x;
+	const sourceY = source.internals.positionAbsolute.y;
+	const targetX = target.internals.positionAbsolute.x;
+	const targetY = target.internals.positionAbsolute.y;
+	const radius = (target.measured.width ?? 0) / 2;
+	const sourceCenterX = sourceX + (source.measured.width ?? 0) / 2;
+	const sourceCenterY = sourceY + (source.measured.height ?? 0) / 2;
+	const targetCenterX = targetX + radius;
+	const targetCenterY = targetY + radius;
+	const dx = targetCenterX - sourceCenterX;
+	const dy = targetCenterY - sourceCenterY;
+	const angle = Math.atan2(dy, dx);
+	return {
+		x: targetCenterX - Math.cos(angle) * radius,
+		y: targetCenterY - Math.sin(angle) * radius
+	};
+};
+function getIntersectionPoint(source, target) {
+	if (target.type === "circle") return getCircleIntersection(source, target);
+	return getRectangleIntersection(source, target);
+}
+const getEdgePosition = (node, point) => {
+	const n = {
+		...node.internals.positionAbsolute,
+		...node
+	};
+	const nx = Math.round(n.x);
+	const ny = Math.round(n.y);
+	const px = Math.round(point.x);
+	const py = Math.round(point.y);
+	if (px <= nx + 1) return Position.Left;
+	if (px >= nx + (node.measured.width ?? 0) - 1) return Position.Right;
+	if (py <= ny + 1) return Position.Top;
+	if (py >= ny + (node.measured.height ?? 0) - 1) return Position.Bottom;
+	return Position.Top;
+};
+function getEdgeParams(source, target) {
+	const sourceIntersectionPoint = getIntersectionPoint(target, source);
+	const targetIntersectionPoint = getIntersectionPoint(source, target);
+	const sourcePos = getEdgePosition(source, sourceIntersectionPoint);
+	const targetPos = getEdgePosition(target, targetIntersectionPoint);
+	return {
+		sx: sourceIntersectionPoint.x,
+		sy: sourceIntersectionPoint.y,
+		tx: targetIntersectionPoint.x,
+		ty: targetIntersectionPoint.y,
+		sourcePos,
+		targetPos
+	};
+}
+
+//#endregion
+//#region src/components/Graph/edges/BaseEdge.tsx
+const EdgeLabel = ({ transform, label }) => {
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			position: "absolute",
+			fontSize: 10,
+			fontWeight: 600,
+			padding: "0 2px",
+			transform,
+			transformOrigin: "center",
+			background: "white"
+		},
+		className: "nodrag nopan",
+		children: label
+	});
+};
+const customMarkes = ["url('#double-rect')", "url('#rect')"];
+const BaseEdge$1 = ({ labels = [], markerEnd, path, ...rest }) => {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("svg", {
+			style: {
+				position: "absolute",
+				top: 0,
+				left: 0
+			},
+			children: /* @__PURE__ */ jsxs("defs", { children: [
+				/* @__PURE__ */ jsx("marker", {
+					id: "rect-end",
+					markerWidth: "8",
+					markerHeight: "8",
+					refX: "8",
+					refY: "5",
+					orient: "auto",
+					children: /* @__PURE__ */ jsx("rect", {
+						x: "2",
+						y: "2",
+						width: "6",
+						height: "6",
+						fill: "black"
+					})
+				}),
+				/* @__PURE__ */ jsxs("marker", {
+					id: "double-rect-end",
+					markerWidth: "14",
+					markerHeight: "10",
+					refX: "12",
+					refY: "5",
+					orient: "auto",
+					children: [/* @__PURE__ */ jsx("rect", {
+						x: "2",
+						y: "2",
+						width: "4",
+						height: "6",
+						fill: "black"
+					}), /* @__PURE__ */ jsx("rect", {
+						x: "8",
+						y: "2",
+						width: "4",
+						height: "6",
+						fill: "black"
+					})]
+				}),
+				/* @__PURE__ */ jsx("marker", {
+					id: "rect",
+					markerWidth: "8",
+					markerHeight: "8",
+					refX: "3",
+					refY: "5",
+					orient: "auto",
+					children: /* @__PURE__ */ jsx("rect", {
+						x: "2",
+						y: "2",
+						width: "6",
+						height: "6",
+						fill: "black"
+					})
+				}),
+				/* @__PURE__ */ jsxs("marker", {
+					id: "double-rect",
+					markerWidth: "14",
+					markerHeight: "10",
+					refX: "2",
+					refY: "5",
+					orient: "auto",
+					children: [/* @__PURE__ */ jsx("rect", {
+						x: "2",
+						y: "2",
+						width: "4",
+						height: "6",
+						fill: "black"
+					}), /* @__PURE__ */ jsx("rect", {
+						x: "8",
+						y: "2",
+						width: "4",
+						height: "6",
+						fill: "black"
+					})]
+				}),
+				/* @__PURE__ */ jsx("marker", {
+					id: "circle",
+					markerWidth: "8",
+					markerHeight: "8",
+					refX: "5",
+					refY: "5",
+					children: /* @__PURE__ */ jsx("circle", {
+						cx: "5",
+						cy: "5",
+						r: "3",
+						fill: "black"
+					})
+				})
+			] })
+		}),
+		/* @__PURE__ */ jsx(BaseEdge, {
+			path,
+			markerEnd: customMarkes.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 }) => {
+	const sourceNode = useInternalNode(source);
+	const targetNode = useInternalNode(target);
+	if (!sourceNode || !targetNode) return null;
+	const { sx, sy, tx, ty } = getEdgeParams(sourceNode, targetNode);
+	const [edgePath, labelX, labelY, offsetX, offsetY] = getStraightPath(data?.position ?? {
+		sourceX: sx,
+		sourceY: sy,
+		targetX: tx,
+		targetY: ty
+	});
+	const angle = Math.atan2((sy > ty ? -1 : 1) * offsetY, offsetX) * (180 / Math.PI);
+	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(BaseEdge_default, {
+		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 }) => {
+	const { position, measured } = useInternalNode(source) ?? {
+		position: {
+			x: 0,
+			y: 0
+		},
+		measured: { width: 0 }
+	};
+	const [edgePath, labelX, labelY] = getSmoothStepPath({
+		sourceX: position.x,
+		sourceY: position.y,
+		targetX: position.x + (measured.width ?? 0),
+		targetY: position.y,
+		sourcePosition: Position.Top,
+		targetPosition: Position.Top,
+		offset: (data?.offset ?? 0) * 15
+	});
+	return /* @__PURE__ */ jsx(BaseEdge_default, {
+		path: edgePath,
+		...props,
+		labels: data?.mid ? [{
+			label: data.mid,
+			transform: `translate(-50% , -50%) translate(${labelX}px, ${labelY - 10}px)`
+		}] : []
+	});
+};
+var LoopEdge_default = LoopingEdge;
+
+//#endregion
+//#region src/components/Graph/layout/dagre.ts
+const useDagreLayout = () => {
+	const { getNodes, setNodes, getEdges, fitView } = useReactFlow();
+	return { layout: useCallback(async (options) => {
+		const dagreGraph = new dagre.graphlib.Graph();
+		dagreGraph.setDefaultEdgeLabel(() => ({}));
+		dagreGraph.setGraph(options ?? { rankdir: "TB" });
+		const nodes = getNodes();
+		for (const node of nodes) dagreGraph.setNode(node.id, {
+			width: node.measured?.width,
+			height: node.measured?.height
+		});
+		for (const edge of getEdges()) dagreGraph.setEdge(edge.source, edge.target);
+		dagre.layout(dagreGraph);
+		setNodes(nodes.map((node) => {
+			const { x, y } = dagreGraph.node(node.id);
+			return {
+				...node,
+				position: {
+					x,
+					y
+				}
+			};
+		}));
+		await fitView();
+	}, [
+		getNodes,
+		getEdges,
+		setNodes,
+		fitView
+	]) };
+};
+
+//#endregion
+//#region src/components/Graph/layout/elk.ts
+const elk = new ELK();
+const useElkLayout = () => {
+	const { getNodes, setNodes, setEdges, getEdges, fitView } = useReactFlow();
+	const defaultOptions = {
+		"elk.algorithm": "layered",
+		"elk.direction": "RIGHT",
+		"elk.spacing.nodeNode": "100",
+		"elk.spacing.edgeNode": "50",
+		"elk.spacing.edgeEdge": "40",
+		"elk.spacing.componentComponent": "100",
+		"elk.layered.spacing.baseValue": "50",
+		"elk.layered.spacing.nodeNodeBetweenLayers": "150",
+		"elk.edgeRouting": "ORTHOGONAL",
+		"elk.layered.nodePlacement.strategy": "NETWORK_SIMPLEX"
+	};
+	return { layout: useCallback(async (options) => {
+		const nodes = getNodes();
+		const edges = getEdges();
+		const graph = {
+			id: "root",
+			layoutOptions: defaultOptions,
+			children: nodes.map((node) => {
+				return {
+					id: node.id,
+					width: node.measured?.width,
+					height: node.measured?.height,
+					properties: {},
+					layoutOptions: {}
+				};
+			}),
+			edges: getEdges().map((edge) => ({
+				id: edge.id,
+				sources: [edge.source],
+				targets: [edge.target],
+				layoutOptions: edge?.data?.["mid"] ? { "elk.edge.minimalLength": edge.data["mid"].toString() } : void 0
+			}))
+		};
+		try {
+			const layoutedGraph = await elk.layout(graph);
+			setNodes(nodes.map((node) => {
+				const elkNode = layoutedGraph.children?.find(({ id }) => id === node.id);
+				return {
+					...node,
+					position: {
+						x: elkNode?.x ?? 0,
+						y: elkNode?.y ?? 0
+					}
+				};
+			}));
+			setEdges(edges.map((edge) => {
+				const elkEdge = layoutedGraph.edges?.find(({ id }) => id === edge.id)?.sections?.[0];
+				return {
+					...edge,
+					data: {
+						...edge.data,
+						...elkEdge && { position: {
+							sourceX: elkEdge.startPoint.x,
+							sourceY: elkEdge.startPoint.y,
+							targetX: elkEdge.endPoint.x,
+							targetY: elkEdge.endPoint.y
+						} }
+					}
+				};
+			}));
+			fitView();
+		} catch (error) {}
+	}, [
+		setEdges,
+		setNodes,
+		getNodes,
+		getEdges,
+		fitView
+	]) };
+};
+
+//#endregion
+//#region src/components/Graph/nodes/CircleNode.tsx
+const CircleNode = memo(({ data: { color, label, inner, diameter = 50 } }) => {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(Handle, {
+			type: "source",
+			position: Position.Bottom
+		}),
+		/* @__PURE__ */ jsxs(Box, {
+			w: diameter,
+			h: diameter,
+			style: { position: "relative" },
+			children: [/* @__PURE__ */ jsx(Box, {
+				w: diameter,
+				h: diameter,
+				style: {
+					borderRadius: "50%",
+					backgroundColor: color,
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center"
+				},
+				children: inner
+			}), /* @__PURE__ */ jsx(Box, {
+				size: "xs",
+				style: {
+					position: "absolute",
+					top: "100%",
+					left: "50%",
+					transform: "translateX(-50%)",
+					marginTop: 4,
+					whiteSpace: "nowrap"
+				},
+				children: label
+			})]
+		}),
+		/* @__PURE__ */ jsx(Handle, {
+			type: "target",
+			position: Position.Top
+		})
+	] });
+});
+var CircleNode_default = CircleNode;
+
+//#endregion
+//#region src/components/Graph/nodes/RectangleNode.tsx
+var RectangleNode_default = memo(({ data: { color, label, inner } }) => {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(Handle, {
+			type: "source",
+			position: Position.Bottom
+		}),
+		/* @__PURE__ */ jsxs(Box, {
+			style: {
+				position: "relative",
+				display: "inline-block"
+			},
+			children: [/* @__PURE__ */ jsx(Box, {
+				style: {
+					backgroundColor: color,
+					display: "inline-flex",
+					alignItems: "center",
+					justifyContent: "center",
+					width: "auto",
+					height: "auto"
+				},
+				children: inner
+			}), /* @__PURE__ */ jsx(Box, {
+				style: {
+					position: "absolute",
+					top: "100%",
+					left: "50%",
+					transform: "translateX(-50%)",
+					marginTop: 4,
+					whiteSpace: "nowrap"
+				},
+				children: label
+			})]
+		}),
+		/* @__PURE__ */ jsx(Handle, {
+			type: "target",
+			position: Position.Top
+		})
+	] });
+});
+
+//#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 edgeTypes = {
+	floating: FloatingEdge_default,
+	looping: LoopEdge_default
+};
+const nodeTypes = {
+	circle: CircleNode_default,
+	rectangle: RectangleNode_default
+};
+const layoutToHook = {
+	elk: useElkLayout,
+	dagre: useDagreLayout
+};
+const handleDownload = async (fileName) => {
+	const flow = document.querySelector(".react-flow__viewport");
+	if (!flow) return;
+	saveAs(await toPng(flow, { backgroundColor: "white" }), `${fileName}.png`);
+};
+const InnerFlow = ({ initialNodes, initialEdges, layoutOptions = { type: "dagre" } }) => {
+	const [nodes, setNodes] = useState(initialNodes.map((node) => ({
+		...node,
+		type: node.data.type,
+		position: {
+			x: 0,
+			y: 0
+		}
+	})));
+	const seenLoops = {};
+	const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges.map((edge, index) => {
+		const type = edge.source === edge.target ? "looping" : "floating";
+		if (type === "looping") seenLoops[edge.source] = (seenLoops[edge.source] ?? 0) + 1;
+		return {
+			...edge,
+			id: `edge_${index}`,
+			type,
+			...type === "looping" && { data: {
+				...edge.data,
+				offset: seenLoops[edge.source]
+			} }
+		};
+	}));
+	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) => ({
+				...edge,
+				data: {
+					...edge.data,
+					position: movedNodes.includes(edge.target) || movedNodes.includes(edge.source) ? void 0 : edge.data?.["position"]
+				}
+			})));
+		}
+		setNodes((nds) => applyNodeChanges(changes, nds));
+	}, [setEdges]);
+	const { layout } = layoutToHook[layoutOptions.type]();
+	const hasMeasuredNodes = nodes.some(({ measured }) => !!measured);
+	useEffect(() => {
+		if (hasMeasuredNodes) layout(layoutOptions?.options);
+	}, [
+		layout,
+		layoutOptions,
+		hasMeasuredNodes
+	]);
+	return /* @__PURE__ */ jsx(ReactFlow, {
+		className: Graph_module_default["test"],
+		style: { height: "100%" },
+		nodes,
+		edges,
+		onNodesChange,
+		onEdgesChange,
+		fitView: true,
+		edgeTypes,
+		nodeTypes,
+		minZoom: .1,
+		nodesDraggable: false,
+		proOptions: { hideAttribution: true },
+		children: /* @__PURE__ */ jsx(Controls, {
+			showInteractive: false,
+			children: /* @__PURE__ */ jsx(ActionIcon, {
+				variant: "transparent",
+				onClick: () => handleDownload("ocelot"),
+				className: "test",
+				children: /* @__PURE__ */ jsx(DownloadIcon, {
+					className: "test",
+					size: 18
+				})
+			})
+		})
+	});
+};
+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 [searchValue, setSearchValue] = useDebouncedState("", 200);
+	const [vizualization, setVizualization] = 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, {
+					count,
+					name: objectName,
+					attributeSummaries: objectAttributes[objectName]
+				}, objectName)
+			}
+		}));
+	}, [objectCounts, objectAttributes]);
+	return /* @__PURE__ */ jsxs(Stack, {
+		w: "100%",
+		h: "100%",
+		children: [
+			/* @__PURE__ */ jsxs(Group, {
+				justify: "end",
+				children: [vizualization === "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,
+					data: [{
+						label: "Graph",
+						value: "graph"
+					}, {
+						label: "Cards",
+						value: "cards"
+					}]
+				})]
+			}),
+			vizualization === "graph" && o2o && objectAttributes && /* @__PURE__ */ jsx(Graph_default, {
+				initialNodes: nodes,
+				initialEdges: o2o.map(({ source, target, sum, qualifier }) => ({
+					source,
+					target,
+					markerEnd: { type: MarkerType.ArrowClosed },
+					style: { strokeWidth: "2px" },
+					data: { mid: `${qualifier} (${sum})` }
+				})),
+				layoutOptions: {
+					type: "elk",
+					options: {
+						"elk.algorithm": "layered",
+						"elk.direction": "RIGHT",
+						"elk.spacing.nodeNode": 50,
+						"elk.layered.spacing.nodeNodeBetweenLayers": 100
+					}
+				}
+			}, ocelId),
+			vizualization === "cards" && objectCounts && /* @__PURE__ */ jsx(EntityOverview_default, {
+				entityCounts: objectCounts,
+				attributes: objectAttributes ?? {},
+				relations: o2o ?? [],
+				search: searchValue
+			})
+		]
+	});
+};
+var objectOverview_default = defineModuleRoute({
+	component: ObjectGraph,
+	label: "Object Overview",
+	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;
+
+//#endregion
+//#region src/config.ts
+var config_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.",
+	label: "Ocelot",
+	authors: [{ name: "Öztürk, Görkem-Emre" }],
+	routes: [
+		events_default,
+		objects_default,
+		eventOverview_default,
+		objectOverview_default
+	],
+	icon: OcelotIcon_default
+});
+
+//#endregion
+//#region src/index.ts
+var src_default = config_default;
+
+//#endregion
+export { src_default as default };

package/dist/styles/styles.css

@@ -0,0 +1 @@
+.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

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

package/dist/styles/styles.js

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

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@ocelescope/ocelot",
+  "type": "module",
+  "version": "0.0.0",
+  "description": "A module for inspections of OCELs",
+  "author": "Görkem-Emre Öztürk <goerkem.oeztuerk@rwth-aachen.de>",
+  "license": "MIT",
+  "homepage": "https://www.ocelescope.org",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/promi4s/ocelescope.git"
+  },
+  "bugs": {
+    "url": "https://github.com/promi4s/ocelescope/issues"
+  },
+  "exports": {
+    ".": "./dist/index.js",
+    "./package.json": "./package.json",
+    "./styles": "./dist/styles/styles.js"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@dagrejs/dagre": "^2.0.4",
+    "@mantine/core": "^8.3.14",
+    "@mantine/hooks": "^8.3.14",
+    "@tanstack/react-query": "^5.90.21",
+    "@xyflow/react": "^12.10.1",
+    "file-saver": "^2.0.5",
+    "html-to-image": "^1.11.13",
+    "lucide-react": "^0.563.0",
+    "mantine-datatable": "^8.3.13",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "@ocelescope/core": "0.0.0",
+    "@ocelescope/api-base": "0.0.0"
+  },
+  "devDependencies": {
+    "@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"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "typecheck": "tsc --noEmit"
+  }
+}