@ocelescope/alignments 0.0.0-stage → 0.10.2

package/README.md

@@ -1,3 +1,9 @@
-# Temporary Holding Version
+# @ocelescope/case-centric-alignments
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+An [Ocelescope](https://www.ocelescope.org) frontend module for computing and
+viewing case-centric alignments of the current object-centric event log.
+
+Select a Petri net (or let Alpha+++ discover one), run the alignment, and
+explore the results as a list of aligned variants or on the net.
+
+Requires the `ocelescope-module-case-centric-alignments` backend module.

package/dist/alignments-BbW-dZVR.js

@@ -0,0 +1,256 @@
+import { useCurrentOcel } from "@ocelescope/core";
+import { PlayIcon } from "lucide-react";
+import "@r4pm/components/styles.css";
+import { Box, Button, Group, LoadingOverlay, SegmentedControl, Stack, Tabs, Text } from "@mantine/core";
+import { AlignmentListViewer, AlignmentNetViewer, ViewerConfigProvider } from "@r4pm/components";
+import { wasmLayout } from "@r4pm/components/rust-layout/wasm";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import { customFetch } from "@ocelescope/api-client";
+import { ResourceSelect } from "@ocelescope/resources";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/lib/fetcher.ts
+const customFetch$1 = async (config, options) => customFetch(config, options);
+//#endregion
+//#region src/api/caseCentricAlignments.ts
+/**
+* Generated by orval 🍺
+* Do not edit manually.
+* Case-Centric Alignments
+* 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 Alignments
+*/
+const getAlignments = (ocelId, params, options, signal) => {
+	return customFetch$1({
+		url: `/api/external/modules/alignments/v1/${ocelId}/alignments`,
+		method: "GET",
+		params,
+		signal
+	}, options);
+};
+const getGetAlignmentsQueryKey = (ocelId, params) => {
+	return [`/api/external/modules/alignments/v1/${ocelId}/alignments`, ...params ? [params] : []];
+};
+const getGetAlignmentsQueryOptions = (ocelId, params, options) => {
+	const { query: queryOptions, request: requestOptions } = options ?? {};
+	const queryKey = queryOptions?.queryKey ?? getGetAlignmentsQueryKey(ocelId, params);
+	const queryFn = ({ signal }) => getAlignments(ocelId, params, requestOptions, signal);
+	return {
+		queryKey,
+		queryFn,
+		enabled: ocelId !== null && ocelId !== void 0,
+		staleTime: 3e5,
+		...queryOptions
+	};
+};
+/**
+* @summary Get Alignments
+*/
+function useGetAlignments(ocelId, params, options, queryClient) {
+	const queryOptions = getGetAlignmentsQueryOptions(ocelId, params, options);
+	const query = useQuery(queryOptions, queryClient);
+	return withQueryKey(query, queryOptions.queryKey);
+}
+/**
+* @summary Get Object Types
+*/
+const objectTypes = (ocelId, params, options, signal) => {
+	return customFetch$1({
+		url: `/api/external/modules/alignments/v1/${ocelId}/objects/types`,
+		method: "GET",
+		params,
+		signal
+	}, options);
+};
+const getObjectTypesQueryKey = (ocelId, params) => {
+	return [`/api/external/modules/alignments/v1/${ocelId}/objects/types`, ...params ? [params] : []];
+};
+const getObjectTypesQueryOptions = (ocelId, params, options) => {
+	const { query: queryOptions, request: requestOptions } = options ?? {};
+	const queryKey = queryOptions?.queryKey ?? getObjectTypesQueryKey(ocelId, params);
+	const queryFn = ({ signal }) => objectTypes(ocelId, params, requestOptions, signal);
+	return {
+		queryKey,
+		queryFn,
+		enabled: ocelId !== null && ocelId !== void 0,
+		staleTime: 3e5,
+		...queryOptions
+	};
+};
+/**
+* @summary Get Object Types
+*/
+function useObjectTypes(ocelId, params, options, queryClient) {
+	const queryOptions = getObjectTypesQueryOptions(ocelId, params, options);
+	const query = useQuery(queryOptions, queryClient);
+	return withQueryKey(query, queryOptions.queryKey);
+}
+//#endregion
+//#region src/components/alignments.tsx
+const runStateStore = /* @__PURE__ */ new Map();
+const initialRunState = {
+	selectedResourceId: null,
+	submittedResourceId: void 0
+};
+const AlignmentComponent = ({ ocelId, objectType, mode }) => {
+	const storeKey = `${ocelId}::${objectType}`;
+	const [runState, setRunStateLocal] = useState(() => runStateStore.get(storeKey) ?? initialRunState);
+	const setRunState = (next) => {
+		runStateStore.set(storeKey, next);
+		setRunStateLocal(next);
+	};
+	const hasRun = runState.submittedResourceId !== void 0;
+	const { data, isFetching } = useGetAlignments(ocelId, {
+		object_type: objectType,
+		resource_id: runState.submittedResourceId ?? null
+	}, { query: {
+		enabled: hasRun,
+		staleTime: Infinity,
+		gcTime: Infinity,
+		refetchOnWindowFocus: false,
+		refetchOnReconnect: false,
+		placeholderData: keepPreviousData,
+		retry: false
+	} });
+	const runAlignment = () => {
+		setRunState({
+			...runState,
+			submittedResourceId: runState.selectedResourceId
+		});
+	};
+	const resourceId = runState.selectedResourceId;
+	const setResourceId = (id) => setRunState({
+		...runState,
+		selectedResourceId: id
+	});
+	return /* @__PURE__ */ jsxs(Box, {
+		pos: "relative",
+		h: "100%",
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			minHeight: 0
+		},
+		children: [
+			/* @__PURE__ */ jsx(LoadingOverlay, { visible: isFetching }),
+			/* @__PURE__ */ jsxs(Group, {
+				align: "flex-end",
+				gap: "sm",
+				children: [/* @__PURE__ */ jsx(ResourceSelect, {
+					label: "Model",
+					description: "Select Process Model to align against",
+					type: "e8a4b93820f2f145136e404a06dceb73e074982534c39d64895eda58ab5b5dc1",
+					value: resourceId,
+					placeholder: "Auto-Discover with Alpha +++",
+					onChange: (newResourceId) => setResourceId(newResourceId),
+					style: { flex: 1 }
+				}), /* @__PURE__ */ jsx(Button, {
+					leftSection: /* @__PURE__ */ jsx(PlayIcon, { size: 16 }),
+					onClick: runAlignment,
+					children: "Run"
+				})]
+			}),
+			/* @__PURE__ */ jsx(Box, {
+				style: {
+					flex: 1,
+					minHeight: 0,
+					overflow: "hidden"
+				},
+				children: !hasRun ? /* @__PURE__ */ jsx(Text, {
+					c: "dimmed",
+					ta: "center",
+					mt: "xl",
+					children: "Select a model (or leave on Auto-Discover) and press Run to compute alignments."
+				}) : data && (mode === "list" ? /* @__PURE__ */ jsx(AlignmentListViewer, { data }) : /* @__PURE__ */ jsx(ViewerConfigProvider, {
+					value: { layout: wasmLayout },
+					children: /* @__PURE__ */ jsx(AlignmentNetViewer, { data })
+				}))
+			})
+		]
+	});
+};
+const Alignment = () => {
+	const { id } = useCurrentOcel();
+	const { data: objectTypes } = useObjectTypes(id, void 0, { query: { enabled: !!id } });
+	const [mode, setMode] = useState("list");
+	if (!id || !objectTypes) return /* @__PURE__ */ jsx(LoadingOverlay, { visible: true });
+	const [firstObjectType, ...otherObjectTypes] = objectTypes;
+	if (!firstObjectType) return null;
+	return /* @__PURE__ */ jsx(Fragment, { children: otherObjectTypes.length > 0 ? /* @__PURE__ */ jsx(Tabs, {
+		defaultValue: firstObjectType,
+		keepMounted: false,
+		h: "100%",
+		children: /* @__PURE__ */ jsxs(Stack, {
+			h: "100%",
+			gap: "xs",
+			children: [/* @__PURE__ */ jsx(Tabs.List, {
+				mb: "sm",
+				children: objectTypes.map((objectType) => /* @__PURE__ */ jsx(Tabs.Tab, {
+					value: objectType,
+					children: objectType
+				}, objectType))
+			}), /* @__PURE__ */ jsxs(Stack, {
+				h: "100%",
+				px: "xs",
+				children: [/* @__PURE__ */ jsx(SegmentedControl, {
+					value: mode,
+					onChange: setMode,
+					data: [{
+						label: "Alignment List",
+						value: "list"
+					}, {
+						label: "Alignment Net",
+						value: "net"
+					}],
+					size: "xs",
+					w: 280
+				}), objectTypes.map((objectType) => /* @__PURE__ */ jsx(Tabs.Panel, {
+					value: objectType,
+					flex: 1,
+					children: /* @__PURE__ */ jsx(AlignmentComponent, {
+						ocelId: id,
+						objectType,
+						mode
+					})
+				}, objectType))]
+			})]
+		})
+	}) : /* @__PURE__ */ jsxs(Stack, {
+		h: "100%",
+		px: "xs",
+		pt: "xs",
+		children: [/* @__PURE__ */ jsx(SegmentedControl, {
+			value: mode,
+			onChange: setMode,
+			data: [{
+				label: "Alignment List",
+				value: "list"
+			}, {
+				label: "Alignment Net",
+				value: "net"
+			}],
+			size: "xs",
+			w: 280
+		}), /* @__PURE__ */ jsx(AlignmentComponent, {
+			ocelId: id,
+			objectType: firstObjectType,
+			mode
+		})]
+	}) });
+};
+//#endregion
+export { Alignment as default };

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+//#region src/index.d.ts
+export declare const alignmentspage: import("@ocelescope/core").ModuleRouteDefinition;
+declare const _default: import("@ocelescope/core").ModuleDefinition;
+//#endregion
+export { _default as default };

package/dist/index.js

@@ -0,0 +1,23 @@
+import { defineModule, defineModuleRoute } from "@ocelescope/core";
+import { SquareCenterlineDashedVertical } from "lucide-react";
+import dynamic from "next/dynamic";
+//#region src/routes/alignments.tsx
+const Alignment = dynamic(() => import("./alignments-BbW-dZVR.js"), { ssr: false });
+//#endregion
+//#region src/index.ts
+const alignmentspage = defineModuleRoute({
+	component: Alignment,
+	label: "case-centric",
+	name: "Case Centric",
+	requiresOcel: true
+});
+var src_default = defineModule({
+	name: "alignments",
+	label: "Case-Centric Alignments",
+	description: "Case-centric Alignments",
+	authors: [{ name: "Uy Sa Huynh" }],
+	icon: SquareCenterlineDashedVertical,
+	routes: [alignmentspage]
+});
+//#endregion
+export { alignmentspage, src_default as default };

package/package.json

@@ -1,6 +1,53 @@
 {
   "name": "@ocelescope/alignments",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.10.2",
+  "description": "case-centric Alignments",
+  "author": "Uy Sa Huynh",
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.js",
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "@ocelescope/api-client": "^0.10.1",
+    "@ocelescope/core": "^0.10.1",
+    "@ocelescope/resources": "^0.10.1",
+    "@tanstack/react-query": "^5.90.21",
+    "axios": "^1.20.0",
+    "lucide-react": "^1.0.0",
+    "next": "16.3.6",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "@r4pm/components": "^0.3.2",
+    "@mantine/hooks": "9.4.0",
+    "@mantine/core": "^9.4.0",
+    "@xyflow/react": "^12.10.1",
+    "@mantine/notifications": "^9.7.1"
+  },
+  "devDependencies": {
+    "@ocelescope/api-client": "^0.10.1",
+    "@ocelescope/api-config": "^0.10.1",
+    "@ocelescope/core": "^0.10.1",
+    "@ocelescope/resources": "^0.10.1",
+    "@tanstack/react-query": "^5.90.21",
+    "@types/react": "^19.3.0",
+    "axios": "^1.20.0",
+    "lucide-react": "^1.0.0",
+    "next": "16.3.6",
+    "orval": "^8.33.0",
+    "react": "^19.3.0",
+    "tsdown": "^0.23.0",
+    "typescript": "^6.0.3"
+  },
+  "scripts": {
+    "generate:api": "uv run ocelescope-backend openapi --module alignments",
+    "build": "pnpm run generate:api && orval && tsdown",
+    "dev": "tsdown --watch ./src",
+    "typecheck": "tsc --noEmit"
+  }
 }