@ocelescope/resources 0.10.1 → 0.11.0

package/dist/index.d.ts

@@ -1,18 +1,13 @@
 import { Select } from "@mantine/core";
 import { GetResourceResponse } from "@ocelescope/api-base";
 import { ComponentProps } from "react";
-//#region src/components/ResourceModal/ResourceModal.d.ts
 export declare const ResourceModal: React.FC<{
   id: string;
   onClose: () => void;
 }>;
-//#endregion
-//#region src/components/ResourceSelect/ResourceSelect.d.ts
 export declare const ResourceSelect: React.FC<Omit<ComponentProps<typeof Select<string>>, "data"> & {
   type?: string;
 }>;
-//#endregion
-//#region src/types/index.d.ts
 type RequireType<T> = T extends {
   type?: infer L;
 } ? Omit<T, "type"> & {
@@ -23,8 +18,6 @@ type VisualizationsTypes = NonNullable<VisualizationsType["type"]>;
 type VisualizationByType<T extends VisualizationsTypes> = Extract<VisualizationsType, {
   type: T;
 }>;
-//#endregion
-//#region src/components/ResourceView/index.d.ts
 type ExtraMenuItem = {
   icon: React.ReactNode;
   label: string;
@@ -40,5 +33,4 @@ export declare const ResourceViewer: React.FC<{
   id: string;
   isPreview?: boolean;
 }>;
-//#endregion
 export type { VisualizationsType };

package/dist/index.js

@@ -14,12 +14,12 @@ import ELK from "elkjs/lib/elk.bundled.js";
 import { DataTable } from "mantine-datatable";
 import dayjs from "dayjs";
 import isBetween from "dayjs/plugin/isBetween.js";
-//#region src/components/ResourceView/Viewers/R4pm.tsx
+// 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 [components, { wasmViz }] = await Promise.all([import("@r4pm/components"), import("@r4pm/components/viz/wasm")]);
 	const { ViewerConfigProvider } = components;
 	const Viewer = pick(components);
-	const viewerConfig = { layout: wasmLayout };
+	const viewerConfig = { viz: wasmViz };
 	return (props) => /* @__PURE__ */ jsx(ViewerConfigProvider, {
 		value: viewerConfig,
 		children: /* @__PURE__ */ jsx(Viewer, { ...props })
@@ -37,8 +37,7 @@ const R4pmViewerContainer = ({ filename, children }) => /* @__PURE__ */ jsx(Box,
 		children
 	})
 });
-//#endregion
-//#region src/components/ResourceView/Viewers/DFG.tsx
+// 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 }) => ({
@@ -58,20 +57,17 @@ const DFGViewer = ({ visualization }) => {
 	});
 };
 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]);
+	const ocdfg = useMemo(() => ({ object_type_to_dfg: Object.fromEntries(Object.entries(visualization.object_type_to_dfg ?? {}).map(([objectType, dfg]) => [objectType, toR4pmDfg(dfg)])) }), [visualization]);
 	return /* @__PURE__ */ jsx(R4pmViewerContainer, {
 		filename: "oc-dfg",
 		children: /* @__PURE__ */ jsx(R4pmOcdfg, {
 			actions: [],
-			data: ocdfg
+			data: ocdfg,
+			objectCounts: visualization.object_counts
 		})
 	});
 };
-//#endregion
-//#region src/components/ResourceView/Viewers/SVG.tsx
+// src/components/ResourceView/Viewers/SVG.tsx
 const { saveAs: saveAs$2 } = FileSaver;
 const SvgPanWrapper = ({ children, onDownload }) => {
 	return /* @__PURE__ */ jsx(Box, {
@@ -143,8 +139,7 @@ const SvgViewer = ({ visualization, isPreview }) => {
 		children: content
 	});
 };
-//#endregion
-//#region src/components/ResourceView/Viewers/Dot.tsx
+// src/components/ResourceView/Viewers/Dot.tsx
 const { saveAs: saveAs$1 } = FileSaver;
 const DotToSvgViewer = ({ isPreview, visualization }) => {
 	const [svg, setSvg] = useState(null);
@@ -216,8 +211,7 @@ const DotToSvgViewer = ({ isPreview, visualization }) => {
 		children: content
 	});
 };
-//#endregion
-//#region src/components/ResourceView/Viewers/GraphFlow/GraphControls.tsx
+// src/components/ResourceView/Viewers/GraphFlow/GraphControls.tsx
 const GraphControls = ({ onFitView, onDownloadPng, onDownloadSvg, onDownloadPdf, menuItems, isPreview }) => {
 	if (isPreview) return null;
 	return /* @__PURE__ */ jsxs(Controls, {
@@ -261,8 +255,7 @@ const GraphControls = ({ onFitView, onDownloadPng, onDownloadSvg, onDownloadPdf,
 		]
 	});
 };
-//#endregion
-//#region src/components/ResourceView/Viewers/GraphFlow/utils/bounds.ts
+// src/components/ResourceView/Viewers/GraphFlow/utils/bounds.ts
 function nodeBoundsFromData(nodes) {
 	if (nodes.length === 0) return {
 		x: 0,
@@ -387,8 +380,7 @@ function getContentBounds(nodes, viewportEl, getNodesBounds) {
 	}
 	return combined;
 }
-//#endregion
-//#region src/components/ResourceView/Viewers/GraphFlow/utils/download.ts
+// src/components/ResourceView/Viewers/GraphFlow/utils/download.ts
 const { saveAs } = FileSaver;
 const MAX_PX = 2048;
 const EXPORT_PADDING = .05;
@@ -452,8 +444,7 @@ async function downloadPdf(container, nodes, getNodesBounds) {
 	pdf.addImage(dataUrl, "PNG", 0, 0, imageWidth, imageHeight);
 	pdf.save("graph.pdf");
 }
-//#endregion
-//#region src/components/ResourceView/Viewers/GraphFlow/hooks/useGraphExport.ts
+// src/components/ResourceView/Viewers/GraphFlow/hooks/useGraphExport.ts
 const useGraphExport = (wrapperRef) => {
 	const { getNodes, getNodesBounds } = useReactFlow();
 	return {
@@ -483,8 +474,7 @@ const useGraphExport = (wrapperRef) => {
 		])
 	};
 };
-//#endregion
-//#region src/components/ResourceView/Viewers/GraphFlow/model/types.ts
+// src/components/ResourceView/Viewers/GraphFlow/model/types.ts
 var GraphError = class extends Error {
 	details;
 	constructor(message, details) {
@@ -502,8 +492,7 @@ const DEFAULT_COLORS = {
 	text: "#1a1a1a"
 };
 const FIT_VIEW_PADDING = .15;
-//#endregion
-//#region src/components/ResourceView/Viewers/GraphFlow/layout/elk.ts
+// src/components/ResourceView/Viewers/GraphFlow/layout/elk.ts
 const EDGE_ROUTINGS = /* @__PURE__ */ new Set([
 	"SPLINES",
 	"ORTHOGONAL",
@@ -653,8 +642,7 @@ var ElkEngine = class ElkEngine {
 		return routes;
 	}
 };
-//#endregion
-//#region src/components/ResourceView/Viewers/GraphFlow/layout/graphviz.ts
+// src/components/ResourceView/Viewers/GraphFlow/layout/graphviz.ts
 const GRAPHVIZ_DPI = 72;
 const parsePoint = (value) => {
 	if (!value) return null;
@@ -822,8 +810,7 @@ var GraphvizEngine = class GraphvizEngine {
 		return Object.entries(ranks).map(([rank, ids]) => `{ rank=${["source", "sink"].includes(rank) ? rank : "same"}; ${(ids ?? []).join(" ")} }`);
 	}
 };
-//#endregion
-//#region src/components/ResourceView/Viewers/GraphFlow/layout/engine.ts
+// src/components/ResourceView/Viewers/GraphFlow/layout/engine.ts
 const selectEngine = (visualization) => {
 	const config = visualization.layout_config;
 	switch (config?.type) {
@@ -839,8 +826,7 @@ const selectEngine = (visualization) => {
 		default: throw new GraphError("Invalid graph layout config.", ["Expected an ELK or Graphviz layout config from the backend."]);
 	}
 };
-//#endregion
-//#region src/components/ResourceView/Viewers/GraphFlow/model/buildModel.ts
+// src/components/ResourceView/Viewers/GraphFlow/model/buildModel.ts
 const requireNodeId = (node, index) => {
 	if (!node.id) throw new GraphError("Invalid graph node.", [`Node at index ${index} is missing an id.`]);
 	return {
@@ -859,8 +845,7 @@ const buildGraphModel = (visualization) => ({
 	nodes: (visualization.nodes ?? []).map(requireNodeId),
 	edges: (visualization.edges ?? []).map(requireEdgeId)
 });
-//#endregion
-//#region src/components/ResourceView/Viewers/GraphFlow/render/routeToPath.ts
+// src/components/ResourceView/Viewers/GraphFlow/render/routeToPath.ts
 const buildPolylinePath = (points) => {
 	if (points.length < 2) return null;
 	return points.map((point, index) => `${index === 0 ? "M" : "L"} ${point.x},${point.y}`).join(" ");
@@ -905,8 +890,7 @@ const straightEdgeLayout = (source, target) => ({
 	endPoint: target,
 	labelPosition: midpoint(source, target)
 });
-//#endregion
-//#region src/components/ResourceView/Viewers/GraphFlow/render/project.ts
+// src/components/ResourceView/Viewers/GraphFlow/render/project.ts
 const projectToRenderModel = (model, layout) => {
 	const centers = nodeCenters(model.nodes, layout.positions);
 	return {
@@ -966,8 +950,7 @@ const routeToEdgeLayout = (route) => {
 		labelPosition: route.labelPosition
 	};
 };
-//#endregion
-//#region src/components/ResourceView/Viewers/GraphFlow/hooks/useGraphLayout.ts
+// src/components/ResourceView/Viewers/GraphFlow/hooks/useGraphLayout.ts
 const prepare = (visualization) => {
 	try {
 		return {
@@ -1029,8 +1012,7 @@ const useGraphLayout = (visualization) => {
 		onNodesChange
 	};
 };
-//#endregion
-//#region src/components/ResourceView/Viewers/GraphFlow/render/edgeArrows.tsx
+// src/components/ResourceView/Viewers/GraphFlow/render/edgeArrows.tsx
 const colorToId = (color) => color.replace(/[^a-zA-Z0-9]/g, "");
 const ArrowMarker = ({ id, type, color, isStart }) => {
 	if (!type) return null;
@@ -1197,8 +1179,7 @@ const getMarkerIds = ({ color, startArrow, endArrow }) => {
 		endMarkerId: endArrow ? `arrow-end-${endArrow}-${colorKey}` : null
 	};
 };
-//#endregion
-//#region src/components/ResourceView/Viewers/GraphFlow/render/annotation.tsx
+// src/components/ResourceView/Viewers/GraphFlow/render/annotation.tsx
 const AnnotationBadge = () => /* @__PURE__ */ jsx(Badge, {
 	size: "xs",
 	variant: "filled",
@@ -1258,8 +1239,7 @@ const NodeAnnotation = ({ annotation }) => {
 		})]
 	});
 };
-//#endregion
-//#region src/components/ResourceView/Viewers/GraphFlow/render/edgeLabels.tsx
+// src/components/ResourceView/Viewers/GraphFlow/render/edgeLabels.tsx
 const EdgeLabel = ({ color, label, hasAnnotation, x, y }) => /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsxs("div", {
 	style: {
 		position: "absolute",
@@ -1313,8 +1293,7 @@ const endLabelPositions = (start, end) => {
 		}
 	};
 };
-//#endregion
-//#region src/components/ResourceView/Viewers/GraphFlow/render/Edge.tsx
+// src/components/ResourceView/Viewers/GraphFlow/render/Edge.tsx
 const centerOf = ({ sourceX, sourceY, targetX, targetY }) => ({
 	x: (sourceX + targetX) / 2,
 	y: (sourceY + targetY) / 2
@@ -1428,8 +1407,7 @@ const GraphFlowEdge = memo((props) => {
 	] });
 });
 GraphFlowEdge.displayName = "GraphFlowEdge";
-//#endregion
-//#region src/components/ResourceView/Viewers/GraphFlow/render/nodeShapes.tsx
+// src/components/ResourceView/Viewers/GraphFlow/render/nodeShapes.tsx
 const InnerSymbol = ({ symbol, color }) => {
 	if (symbol === "triangle") return /* @__PURE__ */ jsx("div", { style: {
 		width: 0,
@@ -1559,8 +1537,7 @@ const BoxShape = ({ shape, color, borderColor, doubleBorder, innerSymbol, width,
 		} })]
 	});
 };
-//#endregion
-//#region src/components/ResourceView/Viewers/GraphFlow/render/Node.tsx
+// src/components/ResourceView/Viewers/GraphFlow/render/Node.tsx
 const HIDDEN_HANDLE_STYLE = {
 	opacity: 0,
 	pointerEvents: "none"
@@ -1656,8 +1633,7 @@ const GraphFlowNode = memo(({ data }) => {
 	});
 });
 GraphFlowNode.displayName = "GraphFlowNode";
-//#endregion
-//#region src/components/ResourceView/Viewers/GraphFlow/index.tsx
+// src/components/ResourceView/Viewers/GraphFlow/index.tsx
 const nodeTypes = { node: GraphFlowNode };
 const edgeTypes = { graphflow: GraphFlowEdge };
 const GraphFlowCanvas = ({ visualization, isPreview, menuItems }) => {
@@ -1735,8 +1711,7 @@ const GraphFlowCanvas = ({ visualization, isPreview, menuItems }) => {
 	})] });
 };
 const GraphFlow = (props) => /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(GraphFlowCanvas, { ...props }) });
-//#endregion
-//#region src/components/ResourceView/Viewers/Graph.tsx
+// src/components/ResourceView/Viewers/Graph.tsx
 const GraphViewer = (props) => /* @__PURE__ */ jsx(Box, {
 	h: "100%",
 	w: "100%",
@@ -1744,8 +1719,7 @@ const GraphViewer = (props) => /* @__PURE__ */ jsx(Box, {
 	style: { overflow: "hidden" },
 	children: /* @__PURE__ */ jsx(GraphFlow, { ...props })
 });
-//#endregion
-//#region src/components/ResourceView/Viewers/PetriNet.tsx
+// src/components/ResourceView/Viewers/PetriNet.tsx
 const R4pmOcpn = r4pmViewer((c) => c.ObjectCentricPetriNetViewer);
 const R4pmPetriNet = r4pmViewer((c) => c.PetriNetViewer);
 const toR4pmPetriNet = (visualization) => ({
@@ -1759,22 +1733,24 @@ const toR4pmPetriNet = (visualization) => ({
 	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]);
+	const ocpnData = useMemo(() => ({
+		places: (visualization.places ?? []).map(({ id, object_type }) => ({
+			name: id,
+			object_type
+		})),
+		transitions: (visualization.transitions ?? []).map(({ id, label }) => ({
+			name: id,
+			label
+		})),
+		arcs: visualization.arcs.map(({ source, target, weight, variable }) => ({
+			source,
+			target,
+			type: variable ? "variable" : "normal",
+			...weight != null && { weight }
+		})),
+		initial_marking: visualization.initial_marking ?? {},
+		final_marking: visualization.final_marking ?? {}
+	}), [visualization]);
 	return /* @__PURE__ */ jsx(R4pmViewerContainer, {
 		filename: "oc-petri-net",
 		children: /* @__PURE__ */ jsx(R4pmOcpn, { data: ocpnData })
@@ -1787,8 +1763,7 @@ const PetriNetViewer = ({ visualization }) => {
 		children: /* @__PURE__ */ jsx(R4pmPetriNet, { data: petriNet })
 	});
 };
-//#endregion
-//#region src/components/ResourceView/Viewers/Plotly.tsx
+// src/components/ResourceView/Viewers/Plotly.tsx
 const Plot = dynamic(() => import("react-plotly.js"), { ssr: false });
 const PlotlyViewer = ({ visualization, isPreview }) => {
 	const { data, layout } = visualization.data;
@@ -1813,14 +1788,12 @@ const PlotlyViewer = ({ visualization, isPreview }) => {
 		}
 	});
 };
-//#endregion
-//#region src/util/dayjs.ts
+// src/util/dayjs.ts
 dayjs.extend(isBetween);
 var dayjs_default = dayjs;
 const formatDateTime = (dateString) => dayjs(dateString).format("YYYY-MM-DD HH:mm");
 const formatDate = (dateString) => dayjs(dateString).format("YYYY-MM-DD");
-//#endregion
-//#region src/components/ResourceView/Viewers/Table.tsx
+// src/components/ResourceView/Viewers/Table.tsx
 const formatCell = (value, dataType) => {
 	if (value == null) return "";
 	switch (dataType) {
@@ -1873,8 +1846,7 @@ const TableView = ({ visualization }) => {
 		...paginationProps
 	});
 };
-//#endregion
-//#region src/components/ResourceView/index.tsx
+// src/components/ResourceView/index.tsx
 const visualizationMap = {
 	table: TableView,
 	svg: SvgViewer,
@@ -1917,8 +1889,7 @@ const ResourceViewer = ({ id, isPreview = false }) => {
 		isPreview
 	});
 };
-//#endregion
-//#region src/components/ResourceModal/ResourceModal.tsx
+// src/components/ResourceModal/ResourceModal.tsx
 const ResourceModal = ({ id, onClose }) => {
 	const { data } = useResource(id, { query: { enabled: !!id } });
 	return data?.resource.id && /* @__PURE__ */ jsx(Modal, {
@@ -1959,8 +1930,7 @@ const ResourceModal = ({ id, onClose }) => {
 		})
 	});
 };
-//#endregion
-//#region src/components/ResourceSelect/ResourceSelect.tsx
+// src/components/ResourceSelect/ResourceSelect.tsx
 const ResourceSelect = ({ type, value, ...props }) => {
 	const { data: resources = [] } = useResources({ schema_hash: type ?? null });
 	return /* @__PURE__ */ jsx(Select, {
@@ -1971,5 +1941,4 @@ const ResourceSelect = ({ type, value, ...props }) => {
 		}))
 	});
 };
-//#endregion
 export { ResourceModal, ResourceSelect, ResourceViewer, Visualization };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ocelescope/resources",
   "type": "module",
-  "version": "0.10.1",
+  "version": "0.11.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",
@@ -28,29 +28,29 @@
   },
   "peerDependencies": {
     "@floating-ui/react": "^0.27.18",
-    "@hpcc-js/wasm-graphviz": "^1.21.0",
-    "@mantine/core": "^9.5.1",
-    "@ocelescope/api-base": "^0.10.1",
-    "@r4pm/components": "^0.3.2",
-    "@xyflow/react": "^12.11.3",
+    "@hpcc-js/wasm-graphviz": "^1.30.0",
+    "@mantine/core": "^9.7.4",
+    "@ocelescope/api-base": "^0.11.0",
+    "@r4pm/components": "^0.4.0",
+    "@xyflow/react": "^12.12.0",
     "dayjs": "^1.11.23",
     "elkjs": "^0.12.0",
     "file-saver": "^2.0.5",
-    "lucide-react": "^1.0.0",
+    "lucide-react": "^1.63.0",
     "mantine-datatable": "^9.4.0",
-    "next": "16.3.6",
-    "react": "^19.3.0",
-    "react-dom": "^19.3.0",
+    "next": "16.4.3",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
     "react-plotly.js": "^4.0.0",
     "react-zoom-pan-pinch": "^4.0.0"
   },
   "devDependencies": {
-    "@tsdown/css": "^0.23.0",
+    "@tsdown/css": "^0.23.3",
     "@types/file-saver": "^2.0.7",
-    "@types/node": "^26.6.1",
+    "@types/node": "^26.6.5",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
-    "tsdown": "^0.23.0",
+    "tsdown": "^0.23.3",
     "typescript": "^6.0.3"
   },
   "dependencies": {