@ocelescope/resources 0.7.0 → 0.9.0

package/dist/index.d.ts

@@ -2,14 +2,14 @@ import { Select } from "@mantine/core";
 import { GetResourceResponse } from "@ocelescope/api-base";
 import { ComponentProps } from "react";
 //#region src/components/ResourceModal/ResourceModal.d.ts
-declare const ResourceModal: React.FC<{
+export declare const ResourceModal: React.FC<{
   id: string;
   onClose: () => void;
 }>;
 //#endregion
 //#region src/components/ResourceSelect/ResourceSelect.d.ts
-declare const ResourceSelect: React.FC<ComponentProps<typeof Select> & {
-  type: string;
+export declare const ResourceSelect: React.FC<Omit<ComponentProps<typeof Select<string>>, "data"> & {
+  type?: string;
 }>;
 //#endregion
 //#region src/types/index.d.ts
@@ -35,10 +35,10 @@ type VisualizationProps<T extends VisualizationsTypes> = {
   isPreview?: boolean;
   menuItems?: ExtraMenuItem[];
 };
-declare const Visualization: ({ visualization, isPreview, menuItems }: VisualizationProps<VisualizationsTypes>) => import("react").JSX.Element;
-declare const ResourceViewer: React.FC<{
+export declare const Visualization: ({ visualization, isPreview, menuItems }: VisualizationProps<VisualizationsTypes>) => import("react").JSX.Element;
+export declare const ResourceViewer: React.FC<{
   id: string;
   isPreview?: boolean;
 }>;
 //#endregion
-export { ResourceModal, ResourceSelect, ResourceViewer, Visualization, type VisualizationsType };
+export type { VisualizationsType };

package/dist/index.js

@@ -1,19 +1,76 @@
 import { ActionIcon, Alert, Badge, Box, Button, ButtonGroup, Code, Group, LoadingOverlay, Menu, Modal, Popover, ScrollArea, Select, Stack, Text, ThemeIcon, Title } from "@mantine/core";
 import { useResource, useResources } from "@ocelescope/api-base";
 import { DownloadIcon, EyeOffIcon, Maximize2Icon, MaximizeIcon, MinusIcon, PlusIcon, XIcon } from "lucide-react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import dynamic from "next/dynamic.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Graphviz } from "@hpcc-js/wasm-graphviz";
 import FileSaver from "file-saver";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
 import { Background, BaseEdge, ControlButton, Controls, EdgeLabelRenderer, Handle, Position, ReactFlow, ReactFlowProvider, applyNodeChanges, getBezierPath, getSmoothStepPath, useInternalNode, useReactFlow } from "@xyflow/react";
 import { toPng, toSvg } from "html-to-image";
 import { jsPDF } from "jspdf";
 import ELK from "elkjs/lib/elk.bundled.js";
-import dynamic from "next/dynamic.js";
 import { DataTable } from "mantine-datatable";
 import dayjs from "dayjs";
 import isBetween from "dayjs/plugin/isBetween.js";
+//#region src/components/ResourceView/Viewers/R4pm.tsx
+const r4pmViewer = (pick) => dynamic(async () => {
+	const [components, { wasmLayout }] = await Promise.all([import("@r4pm/components"), import("@r4pm/components/rust-layout/wasm")]);
+	const { ViewerConfigProvider } = components;
+	const Viewer = pick(components);
+	const viewerConfig = { layout: wasmLayout };
+	return (props) => /* @__PURE__ */ jsx(ViewerConfigProvider, {
+		value: viewerConfig,
+		children: /* @__PURE__ */ jsx(Viewer, { ...props })
+	});
+}, { ssr: false });
+const ExportFrame = dynamic(() => import("@r4pm/components").then((c) => c.ViewerExportFrame), { ssr: false });
+const R4pmViewerContainer = ({ filename, children }) => /* @__PURE__ */ jsx(Box, {
+	h: "100%",
+	w: "100%",
+	pos: "relative",
+	style: { overflow: "hidden" },
+	children: /* @__PURE__ */ jsx(ExportFrame, {
+		filename,
+		style: { height: "100%" },
+		children
+	})
+});
+//#endregion
+//#region src/components/ResourceView/Viewers/DFG.tsx
+const R4pmDfg = r4pmViewer((c) => c.DFGViewer);
+const R4pmOcdfg = r4pmViewer((c) => c.OCDFGViewer);
+const toR4pmDfg = ({ activities, directly_follows_relations, start_activities, end_activities }) => ({
+	activities: activities ?? {},
+	directly_follows_relations: directly_follows_relations ?? [],
+	start_activities: start_activities ?? {},
+	end_activities: end_activities ?? {}
+});
+const DFGViewer = ({ visualization }) => {
+	const dfg = useMemo(() => toR4pmDfg(visualization), [visualization]);
+	return /* @__PURE__ */ jsx(R4pmViewerContainer, {
+		filename: "dfg",
+		children: /* @__PURE__ */ jsx(R4pmDfg, {
+			actions: [],
+			data: dfg
+		})
+	});
+};
+const OCDFGViewer = ({ visualization }) => {
+	const ocdfg = useMemo(() => ({
+		object_type_to_dfg: Object.fromEntries(Object.entries(visualization.object_type_to_dfg ?? {}).map(([objectType, dfg]) => [objectType, toR4pmDfg(dfg)])),
+		object_counts: visualization.object_counts ?? {}
+	}), [visualization]);
+	return /* @__PURE__ */ jsx(R4pmViewerContainer, {
+		filename: "oc-dfg",
+		children: /* @__PURE__ */ jsx(R4pmOcdfg, {
+			actions: [],
+			data: ocdfg
+		})
+	});
+};
+//#endregion
 //#region src/components/ResourceView/Viewers/SVG.tsx
 const { saveAs: saveAs$2 } = FileSaver;
 const SvgPanWrapper = ({ children, onDownload }) => {
@@ -1539,7 +1596,7 @@ const GraphFlowNode = memo(({ data }) => {
 	const initialTokens = style?.initial_tokens ?? null;
 	const finalTokens = style?.final_tokens ?? null;
 	const isExternalLabel = Boolean(label && label_pos !== "center" && label_pos != null);
-	const maxLabelLines = height != null ? Math.max(1, Math.floor((height - 4) / (14 * 1.2))) : void 0;
+	const maxLabelLines = height != null ? Math.max(1, Math.floor((height - 4) / 16.8)) : void 0;
 	return /* @__PURE__ */ jsxs("div", {
 		style: {
 			position: "relative",
@@ -1688,13 +1745,61 @@ const GraphViewer = (props) => /* @__PURE__ */ jsx(Box, {
 	children: /* @__PURE__ */ jsx(GraphFlow, { ...props })
 });
 //#endregion
+//#region src/components/ResourceView/Viewers/PetriNet.tsx
+const R4pmOcpn = r4pmViewer((c) => c.ObjectCentricPetriNetViewer);
+const R4pmPetriNet = r4pmViewer((c) => c.PetriNetViewer);
+const toR4pmPetriNet = (visualization) => ({
+	places: (visualization.places ?? []).map(({ id }) => ({ id })),
+	transitions: visualization.transitions ?? [],
+	arcs: visualization.arcs.map(({ source, target, weight }) => ({
+		nodes: [source, target],
+		...weight != null && { weight }
+	})),
+	initial_marking: visualization.initial_marking ?? null,
+	final_marking: visualization.final_marking ?? null
+});
+const OCPetriNetViewer = ({ visualization }) => {
+	const ocpnData = useMemo(() => {
+		const places = visualization.places ?? [];
+		const placeInOutMult = Object.fromEntries(places.map(({ id }) => [id, [{}, {}]]));
+		for (const { source, target, variable } of visualization.arcs) {
+			if (!variable) continue;
+			const incoming = placeInOutMult[target];
+			if (incoming) incoming[0][source] = true;
+			const outgoing = placeInOutMult[source];
+			if (outgoing) outgoing[1][target] = true;
+		}
+		return {
+			petri_net: toR4pmPetriNet(visualization),
+			place_object_type: Object.fromEntries(places.map(({ id, object_type }) => [id, object_type])),
+			place_in_out_mult: placeInOutMult
+		};
+	}, [visualization]);
+	return /* @__PURE__ */ jsx(R4pmViewerContainer, {
+		filename: "oc-petri-net",
+		children: /* @__PURE__ */ jsx(R4pmOcpn, { data: ocpnData })
+	});
+};
+const PetriNetViewer = ({ visualization }) => {
+	const petriNet = useMemo(() => toR4pmPetriNet(visualization), [visualization]);
+	return /* @__PURE__ */ jsx(R4pmViewerContainer, {
+		filename: "petri-net",
+		children: /* @__PURE__ */ jsx(R4pmPetriNet, { data: petriNet })
+	});
+};
+//#endregion
 //#region src/components/ResourceView/Viewers/Plotly.tsx
 const Plot = dynamic(() => import("react-plotly.js"), { ssr: false });
 const PlotlyViewer = ({ visualization, isPreview }) => {
 	const { data, layout } = visualization.data;
 	return /* @__PURE__ */ jsx(Plot, {
 		data,
-		layout: { ...layout },
+		layout: {
+			...layout,
+			autosize: true,
+			width: void 0,
+			height: void 0
+		},
 		config: {
 			responsive: true,
 			displaylogo: false,
@@ -1748,23 +1853,24 @@ const TableView = ({ visualization }) => {
 		pageSize,
 		visualization
 	]);
+	const paginationProps = visualization.rows.length > PAGE_SIZES[0] ? {
+		totalRecords: visualization.rows.length,
+		recordsPerPage: pageSize,
+		onPageChange: (p) => setPage(p),
+		page,
+		recordsPerPageOptions: [...PAGE_SIZES],
+		onRecordsPerPageChange: (newPageSize) => {
+			setPageSize(newPageSize);
+			setPage(1);
+		}
+	} : {};
 	return /* @__PURE__ */ jsx(DataTable, {
 		records,
 		columns,
 		withTableBorder: true,
 		withColumnBorders: true,
 		withRowBorders: true,
-		...visualization.rows.length > PAGE_SIZES[0] ? {
-			totalRecords: visualization.rows.length,
-			recordsPerPage: pageSize,
-			onPageChange: (p) => setPage(p),
-			page,
-			recordsPerPageOptions: [...PAGE_SIZES],
-			onRecordsPerPageChange: (newPageSize) => {
-				setPageSize(newPageSize);
-				setPage(1);
-			}
-		} : {}
+		...paginationProps
 	});
 };
 //#endregion
@@ -1774,7 +1880,11 @@ const visualizationMap = {
 	svg: SvgViewer,
 	graph: GraphViewer,
 	dot: DotToSvgViewer,
-	plotly: PlotlyViewer
+	plotly: PlotlyViewer,
+	r4pm_oc_petri_net: OCPetriNetViewer,
+	r4pm_petri_net: PetriNetViewer,
+	r4pm_dfg: DFGViewer,
+	r4pm_ocdfg: OCDFGViewer
 };
 const Visualization = ({ visualization, isPreview = false, menuItems }) => {
 	const Component = visualizationMap[visualization.type];
@@ -1852,10 +1962,9 @@ const ResourceModal = ({ id, onClose }) => {
 //#endregion
 //#region src/components/ResourceSelect/ResourceSelect.tsx
 const ResourceSelect = ({ type, value, ...props }) => {
-	const { data: resources = [] } = useResources({ resource_type: type });
+	const { data: resources = [] } = useResources({ schema_hash: type ?? null });
 	return /* @__PURE__ */ jsx(Select, {
 		...props,
-		value: value ?? null,
 		data: resources.map(({ name, id }) => ({
 			value: id,
 			label: name

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ocelescope/resources",
   "type": "module",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "Ocelescope resources: helpers and UI components for rendering and exporting data.",
   "author": "Görkem-Emre Öztürk <goerkem.oeztuerk@rwth-aachen.de>",
   "license": "MIT",
@@ -30,26 +30,27 @@
     "@floating-ui/react": "^0.27.18",
     "@hpcc-js/wasm-graphviz": "^1.21.0",
     "@mantine/core": "^9.5.1",
+    "@ocelescope/api-base": "^0.9.0",
+    "@r4pm/components": "^0.3.2",
     "@xyflow/react": "^12.11.3",
-    "dayjs": "^1.11.19",
+    "dayjs": "^1.11.23",
     "elkjs": "^0.12.0",
     "file-saver": "^2.0.5",
     "lucide-react": "^1.0.0",
     "mantine-datatable": "^9.4.0",
-    "next": "16.3.0",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
+    "next": "16.3.6",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
     "react-plotly.js": "^4.0.0",
-    "react-zoom-pan-pinch": "^4.0.0",
-    "@ocelescope/api-base": "^0.7.0"
+    "react-zoom-pan-pinch": "^4.0.0"
   },
   "devDependencies": {
-    "@tsdown/css": "^0.22.14",
+    "@tsdown/css": "^0.23.0",
     "@types/file-saver": "^2.0.7",
-    "@types/node": "^26.2.0",
-    "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.4",
-    "tsdown": "^0.22.14",
+    "@types/node": "^26.6.1",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "tsdown": "^0.23.0",
     "typescript": "^6.0.3"
   },
   "dependencies": {