@ocelescope/resources 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/Cytoscape-BpEZfi09.js

@@ -0,0 +1,110 @@
+import { t as CytoscapeContext } from "./CytoscapeContext-DrvVpY9-.js";
+import { useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import CytoscapeComponent from "react-cytoscapejs";
+
+//#region src/components/Cytoscape/Cytoscape.tsx
+const CytoscapeGraph = ({ children, ...props }) => {
+	const cytoscapeRef = useRef(null);
+	useEffect(() => {
+		const cy = cytoscapeRef.current;
+		if (!cy) return;
+		const handleResize = () => {
+			cy.fit();
+		};
+		cy.on("resize", handleResize);
+		return () => {
+			cy.removeListener("resize", handleResize);
+		};
+	}, []);
+	const nodeStyles = [{
+		selector: "node",
+		css: {
+			"font-size": 14,
+			shape: "data(shape)",
+			label: "data(label)",
+			"text-valign": "data(label_pos)",
+			"text-halign": "center",
+			width: "data(width)",
+			height: "data(height)",
+			"background-color": "data(color)"
+		}
+	}, {
+		selector: "node[border_color]",
+		css: {
+			"border-width": 2,
+			"border-color": "data(border_color)",
+			"border-style": "solid"
+		}
+	}];
+	const edgeStyles = [
+		{
+			selector: "edge",
+			css: {
+				"line-color": "data(color)",
+				"target-arrow-color": "data(color)",
+				"source-arrow-color": "data(color)",
+				"arrow-scale": 1.5,
+				"curve-style": "bezier",
+				"font-size": 12,
+				"text-background-opacity": 1,
+				"text-background-shape": "roundrectangle",
+				"text-background-padding": "3px",
+				"text-background-color": "#888"
+			}
+		},
+		{
+			selector: "edge[color]",
+			css: { "text-background-color": "data(color)" }
+		},
+		{
+			selector: "edge[label]",
+			css: {
+				label: "data(label)",
+				"text-rotation": "autorotate"
+			}
+		},
+		{
+			selector: "edge[start_label]",
+			css: {
+				"source-label": "data(start_label)",
+				"source-text-rotation": "autorotate",
+				"source-text-offset": 20
+			}
+		},
+		{
+			selector: "edge[end_label]",
+			css: {
+				"target-label": "data(end_label)",
+				"target-text-rotation": "autorotate",
+				"target-text-offset": 20
+			}
+		},
+		{
+			selector: "edge[start_arrow]",
+			css: { "source-arrow-shape": "data(start_arrow)" }
+		},
+		{
+			selector: "edge[end_arrow]",
+			css: { "target-arrow-shape": "data(end_arrow)" }
+		}
+	];
+	return /* @__PURE__ */ jsxs(CytoscapeContext.Provider, {
+		value: { cy: cytoscapeRef },
+		children: [/* @__PURE__ */ jsx(CytoscapeComponent, {
+			style: {
+				width: "100%",
+				height: "100%"
+			},
+			stylesheet: [...nodeStyles, ...edgeStyles],
+			cy: (cy) => {
+				cytoscapeRef.current = cy;
+			},
+			...props
+		}), children]
+	});
+};
+var Cytoscape_default = CytoscapeGraph;
+
+//#endregion
+export { Cytoscape_default as default };

package/dist/CytoscapeContext-DrvVpY9-.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from "react";
+
+//#region src/components/Cytoscape/CytoscapeContext.tsx
+const CytoscapeContext = createContext(void 0);
+const useCytoscapeContext = () => {
+	return useContext(CytoscapeContext);
+};
+
+//#endregion
+export { useCytoscapeContext as n, CytoscapeContext as t };

package/dist/index.d.ts

@@ -0,0 +1,27 @@
+import { GetResourceResponse } from "@ocelescope/api-base";
+
+//#region src/types/index.d.ts
+type RequireType<T> = T extends {
+  type?: infer L;
+} ? Omit<T, "type"> & {
+  type: L;
+} : T;
+type VisulizationsType = RequireType<NonNullable<GetResourceResponse["visualization"]>>;
+//#endregion
+//#region src/components/ResourceView/index.d.ts
+declare const Visualization: React.FC<{
+  visualization: VisulizationsType;
+  isPreview?: boolean;
+}>;
+declare const ResourceViewer: React.FC<{
+  id: string;
+  isPreview?: boolean;
+}>;
+//#endregion
+//#region src/components/ResourceModal/ResourceModal.d.ts
+declare const ResourceModal: React.FC<{
+  id: string;
+  onClose: () => void;
+}>;
+//#endregion
+export { ResourceModal, ResourceViewer, Visualization };

package/dist/index.js

@@ -0,0 +1,694 @@
+import { n as useCytoscapeContext } from "./CytoscapeContext-DrvVpY9-.js";
+import { ActionIcon, Box, Button, ButtonGroup, Group, LoadingOverlay, Modal, Paper, Stack, ThemeIcon, Title } from "@mantine/core";
+import dynamic from "next/dynamic";
+import { DownloadIcon, EyeOffIcon, Maximize, MaximizeIcon, MinusIcon, PlusIcon, Save, Settings, XIcon } from "lucide-react";
+import { Fragment, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { arrow, flip, offset, shift, useFloating } from "@floating-ui/react";
+import { Graphviz } from "@hpcc-js/wasm-graphviz";
+import { isNil, omitBy } from "lodash";
+import { DataTable } from "mantine-datatable";
+import dayjs from "dayjs";
+import isBetween from "dayjs/plugin/isBetween";
+import { saveAs } from "file-saver";
+import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
+import { useResource } from "@ocelescope/api-base";
+
+//#region src/components/Cytoscape/index.tsx
+var Cytoscape_default = dynamic(() => import("./Cytoscape-BpEZfi09.js"), { ssr: false });
+
+//#endregion
+//#region src/components/Cytoscape/components/ActionButtons.tsx
+const ActionButtons = ({ toggleOptions, onSave }) => {
+	const context = useCytoscapeContext();
+	const downloadGraphAsPng = () => {
+		const cytoscape = context?.cy.current;
+		if (!cytoscape) return;
+		const pngData = cytoscape.png({
+			full: true,
+			scale: 2,
+			bg: "#ffffff"
+		});
+		const a = document.createElement("a");
+		a.href = pngData;
+		a.download = "graph.png";
+		a.dispatchEvent(new MouseEvent("click", {
+			bubbles: true,
+			cancelable: true,
+			view: window
+		}));
+	};
+	return /* @__PURE__ */ jsxs(ButtonGroup, {
+		style: { zIndex: 2 },
+		orientation: "vertical",
+		pos: "absolute",
+		bottom: 0,
+		left: 0,
+		children: [
+			/* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+				disabled: !context,
+				px: "xs",
+				variant: "default",
+				onClick: context && (() => {
+					if (context.cy.current) context.cy.current.fit();
+				}),
+				children: /* @__PURE__ */ jsx(Maximize, { size: 18 })
+			}), /* @__PURE__ */ jsx(Button, {
+				disabled: !context,
+				onClick: downloadGraphAsPng,
+				px: "xs",
+				variant: "default",
+				children: /* @__PURE__ */ jsx(DownloadIcon, { size: 18 })
+			})] }),
+			toggleOptions && /* @__PURE__ */ jsx(Button, {
+				onClick: toggleOptions,
+				px: "xs",
+				variant: "default",
+				children: /* @__PURE__ */ jsx(Settings, { size: 18 })
+			}),
+			onSave && /* @__PURE__ */ jsx(Button, {
+				onClick: onSave,
+				px: "xs",
+				variant: "default",
+				children: /* @__PURE__ */ jsx(Save, { size: 18 })
+			})
+		]
+	});
+};
+var ActionButtons_default = ActionButtons;
+
+//#endregion
+//#region src/components/Cytoscape/hooks/useEntityClick.ts
+const triggerActionToStartEvent = {
+	hover: "tapdragover",
+	rightClick: "cxttap",
+	leftClick: "tap",
+	doubleClick: "dbltap"
+};
+const useEntityClick = ({ trigger }) => {
+	const context = useCytoscapeContext();
+	const [entity, setEntity] = useState();
+	const containerRef = useRef(null);
+	useEffect(() => {
+		const cytoscape = context?.cy.current;
+		const container = cytoscape?.container();
+		if (!cytoscape || !container) return;
+		containerRef.current = container;
+		const handleEntitySelect = (event) => {
+			const target = event.target;
+			if (target.isNode()) setEntity({
+				type: "node",
+				id: target.id(),
+				boundingBox: target.renderedBoundingBox()
+			});
+			else if (target.isEdge()) {
+				const midpoint = target.renderedMidpoint();
+				setEntity({
+					type: "edge",
+					id: target.id(),
+					midpoint: {
+						x: midpoint.x,
+						y: midpoint.y
+					}
+				});
+			}
+		};
+		const handleClickOutside = (e) => {
+			if (e.target === context?.cy.current) setEntity(void 0);
+		};
+		const handleViewChange = () => {
+			setEntity((prev) => {
+				if (!prev) return prev;
+				const ele = context?.cy.current?.getElementById(prev.id);
+				if (!ele || ele.empty()) return prev;
+				if (prev.type === "node") return {
+					...prev,
+					boundingBox: ele.renderedBoundingBox()
+				};
+				const midpoint = ele.renderedMidpoint();
+				return {
+					...prev,
+					midpoint
+				};
+			});
+		};
+		cytoscape.on(triggerActionToStartEvent[trigger], "node, edge", handleEntitySelect);
+		cytoscape.on("pan zoom position", handleViewChange);
+		cytoscape.on("tap", handleClickOutside);
+		return () => {
+			cytoscape.removeListener(triggerActionToStartEvent[trigger], "node, edge", handleEntitySelect);
+			cytoscape.removeListener("pan zoom position", handleViewChange);
+			cytoscape.removeListener("tap", handleClickOutside);
+		};
+	}, [context, trigger]);
+	return {
+		entity,
+		container: containerRef,
+		resetEntity: () => setEntity(void 0)
+	};
+};
+var useEntityClick_default = useEntityClick;
+
+//#endregion
+//#region src/components/Cytoscape/components/FloatingAnnotation.tsx
+const FloatingAnnotation = ({ trigger = "leftClick", children }) => {
+	const { entity, container } = useEntityClick_default({ trigger });
+	const arrowRef = useRef(null);
+	const virtualRef = useMemo(() => {
+		const containerRect = container.current?.getBoundingClientRect();
+		if (!entity || !containerRect) return;
+		if (entity.type === "node") {
+			const b = entity.boundingBox;
+			const width = b.x2 - b.x1;
+			const height = b.y2 - b.y1;
+			const top = containerRect.top + b.y1;
+			const left = containerRect.left + b.x1;
+			return { getBoundingClientRect: () => ({
+				x: left,
+				y: top,
+				width,
+				height,
+				top,
+				left,
+				right: left + width,
+				bottom: top + height
+			}) };
+		}
+		const m = entity.midpoint;
+		const x$1 = containerRect.left + m.x;
+		const y$1 = containerRect.top + m.y;
+		return { getBoundingClientRect: () => ({
+			x: x$1,
+			y: y$1,
+			width: 0,
+			height: 0,
+			top: y$1,
+			left: x$1,
+			right: x$1,
+			bottom: y$1
+		}) };
+	}, [entity, container]);
+	const { x, y, refs, strategy } = useFloating({
+		placement: "right",
+		strategy: "fixed",
+		middleware: [
+			flip(),
+			offset(10),
+			shift({ padding: 8 }),
+			arrow({ element: arrowRef })
+		]
+	});
+	useEffect(() => {
+		refs.setReference(virtualRef);
+	}, [virtualRef, refs]);
+	const child = useMemo(() => entity ? children(entity) : void 0, [entity, children]);
+	if (!entity || !virtualRef || child == null) return null;
+	return /* @__PURE__ */ jsx(Paper, {
+		ref: refs.setFloating,
+		shadow: "md",
+		radius: "md",
+		p: "md",
+		withBorder: true,
+		style: {
+			position: strategy,
+			top: y ?? 0,
+			left: x ?? 0,
+			width: "min(90vw, 400px)",
+			height: "min(80vh, 300px)",
+			overflow: "auto",
+			zIndex: 9999
+		},
+		children: child
+	});
+};
+var FloatingAnnotation_default = FloatingAnnotation;
+
+//#endregion
+//#region src/hooks/useGraphvizLayout.ts
+const esc = (val) => {
+	return val.replaceAll("\"", "\\\"");
+};
+const safeId = (id) => id.replace(/[^a-zA-Z0-9_]/g, "_");
+const attrsToDot = (obj) => {
+	if (!obj) return "";
+	return Object.entries(obj).filter(([_, v]) => v !== null && v !== void 0).map(([k, v]) => typeof v === "string" ? `${k}="${esc(v)}"` : `${k}=${String(v)}`).join(",");
+};
+const toDot = (visualization) => {
+	const gAttrs = attrsToDot(visualization.layout_config?.graphAttrs ?? void 0);
+	const nAttrs = attrsToDot(visualization.layout_config?.nodeAttrs ?? void 0);
+	const eAttrs = attrsToDot(visualization.layout_config?.edgeAttrs ?? void 0);
+	const lines = [
+		"digraph G {",
+		`graph [${gAttrs}];`,
+		`node [${nAttrs}];`,
+		`edge [${eAttrs}];`
+	];
+	for (const node of visualization.nodes ?? []) {
+		const id = safeId(node?.id ?? "");
+		const attrs = {
+			...node.layout_attrs,
+			label: node.label ? esc(node.label) : void 0,
+			shape: node.shape,
+			color: node.color,
+			...node.width && { width: (node.width / 72).toFixed(4) },
+			...node.height && { height: (node.height / 72).toFixed(4) }
+		};
+		lines.push(`"${id}" [${attrsToDot(attrs)}];`);
+	}
+	for (const edge of visualization.edges ?? []) {
+		const attrs = {
+			...edge.layout_attrs,
+			label: edge.label ? esc(edge.label) : void 0,
+			color: edge.color
+		};
+		lines.push(`"${esc(safeId(edge.source))}" -> "${esc(safeId(edge.target))}" [${attrsToDot(attrs)}];`);
+	}
+	const ranks = (visualization.nodes ?? []).filter(({ rank }) => rank != null).reduce((acc, current) => {
+		const key = current.rank;
+		acc[key] ??= [];
+		acc[key].push(esc(safeId(current?.id ?? "")));
+		return acc;
+	}, {});
+	lines.push(...Object.entries(ranks).map(([key, value]) => `{ rank=${["source", "sink"].includes(key) ? key : "same"}; ${(value ?? []).join(" ")} } `));
+	lines.push("}");
+	return lines.join("\n");
+};
+const parsePos = (s) => {
+	if (s) {
+		const [xs, ys] = s.split(",");
+		const x = Number.parseFloat(xs ?? "0");
+		const y = Number.parseFloat(ys ?? "0");
+		if (Number.isFinite(x) && Number.isFinite(y)) return {
+			x,
+			y
+		};
+	}
+	return {
+		x: 0,
+		y: 0
+	};
+};
+const useGraphvizLayout = (visualization) => {
+	const [elements, setElements] = useState(null);
+	const [error, setError] = useState(null);
+	const cancelRef = useRef({ cancelled: false });
+	const dot = useMemo(() => toDot(visualization), [visualization]);
+	useEffect(() => {
+		cancelRef.current.cancelled = false;
+		setError(null);
+		(async () => {
+			try {
+				const jsonStr = (await Graphviz.load()).layout(dot, "json", visualization.layout_config?.engine ?? "dot");
+				const gvJson = JSON.parse(jsonStr);
+				const nodePos = {};
+				for (const o of gvJson.objects ?? []) {
+					if (!o.name || !o.pos) return;
+					const p = parsePos(o.pos);
+					if (!p) return;
+					nodePos[o.name] = {
+						...p,
+						width: o.width ? Number.parseFloat(o.width) * 72 : 0
+					};
+				}
+				const nodes = (visualization.nodes ?? []).map((node) => ({
+					data: {
+						...omitBy(node, isNil),
+						label: node.label ?? "",
+						shape: node.shape !== "circle" ? node.shape : "ellipse",
+						width: node.width ?? nodePos[safeId(node.id ?? "")]?.width,
+						height: node.height ?? 30
+					},
+					position: nodePos[safeId(node.id ?? "")] ?? {
+						x: 0,
+						y: 0
+					}
+				}));
+				const edges = (visualization.edges ?? []).map((edge) => ({ data: omitBy(edge, isNil) }));
+				if (!cancelRef.current.cancelled) setElements([...nodes, ...edges]);
+			} catch (e) {
+				if (!cancelRef.current.cancelled) {
+					setError(e?.message ?? "Graphviz layout failed.");
+					setElements(null);
+				}
+			}
+		})();
+		return () => {
+			cancelRef.current.cancelled = true;
+		};
+	}, [dot, visualization]);
+	return {
+		elements,
+		error
+	};
+};
+
+//#endregion
+//#region src/components/ResourceView/Viewers/Graph.tsx
+const GraphViewer = ({ visualization, isPreview }) => {
+	const { elements } = useGraphvizLayout(visualization);
+	return /* @__PURE__ */ jsx(Box, {
+		h: "100%",
+		w: "100%",
+		pos: "relative",
+		style: { overflow: "hidden" },
+		children: elements && /* @__PURE__ */ jsx(Cytoscape_default, {
+			userZoomingEnabled: !isPreview,
+			userPanningEnabled: !isPreview,
+			style: {
+				width: "100%",
+				height: "100%"
+			},
+			elements,
+			layout: { name: "preset" },
+			children: !isPreview && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ActionButtons_default, {}), /* @__PURE__ */ jsx(FloatingAnnotation_default, { children: (entity) => {
+				const visualizationEntity = visualization[entity.type === "edge" ? "edges" : "nodes"]?.find(({ id }) => id === entity.id);
+				if (!visualizationEntity?.annotation) return;
+				return /* @__PURE__ */ jsx(Visualization, {
+					visualization: visualizationEntity.annotation,
+					isPreview: true
+				});
+			} })] })
+		})
+	});
+};
+var Graph_default = GraphViewer;
+
+//#endregion
+//#region 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
+const formatCell = (value, dataType) => {
+	if (value == null) return "";
+	switch (dataType) {
+		case "boolean": return value ? "✅" : "❌";
+		case "date": return dayjs_default(value).isValid() ? formatDate(value) : String(value);
+		case "datetime": return dayjs_default(value).isValid() ? formatDateTime(value) : String(value);
+		default: return String(value);
+	}
+};
+const PAGE_SIZES = [
+	20,
+	50,
+	75
+];
+const TableView = ({ visualization }) => {
+	const [pageSize, setPageSize] = useState(PAGE_SIZES[0]);
+	const columns = useMemo(() => visualization.columns.map((col) => ({
+		accessor: col.id,
+		title: col.label ?? col.id,
+		render: (record) => formatCell(record[col.id], col.data_type)
+	})), [visualization.columns]);
+	const [page, setPage] = useState(1);
+	const [records, setRecords] = useState(visualization.rows.slice(0, pageSize));
+	useEffect(() => {
+		const from = (page - 1) * pageSize;
+		const to = from + pageSize;
+		setRecords(visualization.rows.slice(from, to));
+	}, [
+		page,
+		pageSize,
+		visualization
+	]);
+	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);
+			}
+		} : {}
+	});
+};
+var Table_default = TableView;
+
+//#endregion
+//#region src/components/ResourceView/Viewers/SVG.tsx
+const SvgPanWrapper = ({ children, onDownload }) => {
+	return /* @__PURE__ */ jsx(Box, {
+		w: "100%",
+		h: "100%",
+		pos: "relative",
+		children: /* @__PURE__ */ jsx(TransformWrapper, {
+			initialScale: 1,
+			minScale: .1,
+			maxScale: 10,
+			centerOnInit: true,
+			children: ({ zoomIn, zoomOut, resetTransform }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(TransformComponent, {
+				wrapperStyle: {
+					width: "100%",
+					height: "100%"
+				},
+				contentStyle: {
+					width: "100%",
+					height: "100%"
+				},
+				children
+			}), /* @__PURE__ */ jsxs(ButtonGroup, {
+				orientation: "vertical",
+				pos: "absolute",
+				bottom: 0,
+				children: [
+					/* @__PURE__ */ jsx(Button, {
+						px: "xs",
+						children: /* @__PURE__ */ jsx(MaximizeIcon, {
+							width: 18,
+							onClick: () => resetTransform(0)
+						})
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						px: "xs",
+						children: /* @__PURE__ */ jsx(PlusIcon, {
+							width: 18,
+							onClick: () => zoomIn()
+						})
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						px: "xs",
+						children: /* @__PURE__ */ jsx(MinusIcon, {
+							width: 18,
+							onClick: () => zoomOut()
+						})
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						px: "xs",
+						onClick: onDownload,
+						children: /* @__PURE__ */ jsx(DownloadIcon, { width: 18 })
+					})
+				]
+			})] })
+		})
+	});
+};
+const SvgViewer = ({ visualization, isPreview }) => {
+	const cleanedSvg = visualization.svg.replace(/width="[^"]+"/, "width=\"100%\"").replace(/height="[^"]+"/, "height=\"100%\"").replace(/<svg(?![^>]*xmlns=)/, "<svg xmlns=\"http://www.w3.org/2000/svg\"");
+	const Wrapper = isPreview ? Fragment : SvgPanWrapper;
+	const handleDownload = () => {
+		if (!cleanedSvg) return;
+		saveAs(new Blob([cleanedSvg], { type: "image/svg+xml;charset=utf-8" }), "resource.svg");
+	};
+	return /* @__PURE__ */ jsx(Wrapper, {
+		onDownload: handleDownload,
+		children: /* @__PURE__ */ jsx("div", {
+			style: {
+				width: "100%",
+				height: "100%"
+			},
+			dangerouslySetInnerHTML: { __html: cleanedSvg }
+		})
+	});
+};
+var SVG_default = SvgViewer;
+
+//#endregion
+//#region src/components/ResourceView/Viewers/Dot.tsx
+const DotToSvgViewer = ({ isPreview, visualization }) => {
+	const [svg, setSvg] = useState(null);
+	const [error, setError] = useState(null);
+	const cancelRef = useRef({ cancelled: false });
+	useEffect(() => {
+		cancelRef.current.cancelled = false;
+		setError(null);
+		setSvg(null);
+		(async () => {
+			try {
+				const out = (await Graphviz.load()).layout(visualization.dot_str, "svg", visualization.layout_engine);
+				if (!cancelRef.current.cancelled) setSvg(out);
+			} catch (e) {
+				if (!cancelRef.current.cancelled) setError(e?.message ?? "Graphviz rendering failed.");
+			}
+		})();
+		return () => {
+			cancelRef.current.cancelled = true;
+		};
+	}, [visualization]);
+	const cleanedSvg = useMemo(() => {
+		if (!svg) return null;
+		let s = svg.replace(/width="[^"]+"/, "width=\"100%\"").replace(/height="[^"]+"/, "height=\"100%\"").replace(/<svg(?![^>]*xmlns=)/, "<svg xmlns=\"http://www.w3.org/2000/svg\"");
+		if (!s.trim().startsWith("<?xml")) s = `<?xml version="1.0" encoding="UTF-8"?>\n${s}`;
+		return s;
+	}, [svg]);
+	const handleDownload = () => {
+		if (!cleanedSvg) return;
+		saveAs(new Blob([cleanedSvg], { type: "image/svg+xml;charset=utf-8" }), "resource.svg");
+	};
+	return /* @__PURE__ */ jsx(isPreview ? Fragment : SvgPanWrapper, {
+		onDownload: handleDownload,
+		children: /* @__PURE__ */ jsxs("div", {
+			style: {
+				width: "100%",
+				height: "100%",
+				position: "relative"
+			},
+			children: [error && /* @__PURE__ */ jsxs("div", {
+				style: {
+					position: "absolute",
+					top: 8,
+					left: 8,
+					color: "red",
+					zIndex: 10
+				},
+				children: ["Graphviz error: ", error]
+			}), cleanedSvg ? /* @__PURE__ */ jsx("div", {
+				style: {
+					width: "100%",
+					height: "100%"
+				},
+				dangerouslySetInnerHTML: { __html: cleanedSvg }
+			}) : !error && /* @__PURE__ */ jsx("div", {
+				style: {
+					width: "100%",
+					height: "100%",
+					display: "grid",
+					placeItems: "center",
+					opacity: .6,
+					fontSize: 14
+				},
+				children: "Rendering…"
+			})]
+		})
+	});
+};
+var Dot_default = DotToSvgViewer;
+
+//#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 },
+		config: {
+			responsive: true,
+			displaylogo: false,
+			staticPlot: !!isPreview,
+			showTips: false
+		},
+		useResizeHandler: true,
+		style: {
+			width: "100%",
+			height: "100%"
+		}
+	});
+};
+var Plotly_default = PlotlyViewer;
+
+//#endregion
+//#region src/components/ResourceView/index.tsx
+const visulizationMap = {
+	table: Table_default,
+	svg: SVG_default,
+	graph: Graph_default,
+	dot: Dot_default,
+	plotly: Plotly_default
+};
+const Visualization = ({ visualization, isPreview = false }) => {
+	const Component = visulizationMap[visualization.type];
+	return /* @__PURE__ */ jsx(Component, {
+		visualization,
+		isPreview
+	});
+};
+const ResourceViewer = ({ id, isPreview = false }) => {
+	const { data } = useResource(id);
+	if (!data) return /* @__PURE__ */ jsx(LoadingOverlay, {});
+	if (!data.visualization?.type) return /* @__PURE__ */ jsx(Stack, {
+		justify: "center",
+		align: "center",
+		h: "100%",
+		children: /* @__PURE__ */ jsx(ThemeIcon, {
+			w: 150,
+			h: 150,
+			variant: "transparent",
+			color: "gray",
+			children: /* @__PURE__ */ jsx(EyeOffIcon, {
+				width: 150,
+				height: 150
+			})
+		})
+	});
+	return /* @__PURE__ */ jsx(Visualization, {
+		visualization: data.visualization,
+		isPreview
+	});
+};
+
+//#endregion
+//#region src/components/ResourceModal/ResourceModal.tsx
+const ResourceModal = ({ id, onClose }) => {
+	const { data } = useResource(id, { query: { enabled: !!id } });
+	return data?.resource.id && /* @__PURE__ */ jsx(Modal, {
+		opened: !!data,
+		onClose,
+		fullScreen: true,
+		styles: { body: {
+			height: "100%",
+			overflow: "hidden"
+		} },
+		withCloseButton: false,
+		transitionProps: {
+			transition: "fade",
+			duration: 200
+		},
+		pos: "relative",
+		children: /* @__PURE__ */ jsxs(Stack, {
+			w: "100%",
+			h: "100%",
+			children: [/* @__PURE__ */ jsxs(Group, {
+				justify: "space-between",
+				children: [/* @__PURE__ */ jsx(Title, {
+					size: "h5",
+					children: data.resource.name
+				}), /* @__PURE__ */ jsx(ActionIcon, {
+					variant: "subtle",
+					color: "red",
+					onClick: onClose,
+					children: /* @__PURE__ */ jsx(XIcon, {})
+				})]
+			}), /* @__PURE__ */ jsx(Box, {
+				w: "100%",
+				h: "100%",
+				flex: 1,
+				mih: 0,
+				children: /* @__PURE__ */ jsx(ResourceViewer, { id: data.resource.id })
+			})]
+		})
+	});
+};
+
+//#endregion
+export { ResourceModal, ResourceViewer, Visualization };

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@ocelescope/resources",
+  "type": "module",
+  "version": "0.0.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",
+  "homepage": "https://www.ocelescope.org",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/promi4s/ocelescope.git"
+  },
+  "bugs": {
+    "url": "git+https://github.com/promi4s/ocelescope.git"
+  },
+  "exports": {
+    ".": "./dist/index.js",
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@hpcc-js/wasm-graphviz": "^1.21.0",
+    "@mantine/core": "^8.3.14",
+    "cytoscape": "^3.33.1",
+    "dayjs": "^1.11.19",
+    "file-saver": "^2.0.5",
+    "lodash": "^4.17.23",
+    "lucide-react": "^0.563.0",
+    "mantine-datatable": "^8.3.13",
+    "next": "16.1.6",
+    "react": "^19.2.0",
+    "react-cytoscapejs": "^2.0.0",
+    "react-dom": "^19.2.0",
+    "react-plotly.js": "^2.6.0",
+    "react-zoom-pan-pinch": "^3.7.0",
+    "@floating-ui/react": "^0.27.18",
+    "@ocelescope/api-base": "0.0.0"
+  },
+  "devDependencies": {
+    "@tsconfig/strictest": "^2.0.8",
+    "@types/file-saver": "^2.0.7",
+    "@types/lodash": "^4.17.23",
+    "@types/node": "^25.0.3",
+    "@types/react": "^19.2.7",
+    "@types/react-cytoscapejs": "^1.2.6",
+    "@types/react-dom": "^19.2.3",
+    "@types/react-plotly.js": "^2.6.4",
+    "bumpp": "^10.3.2",
+    "tsdown": "^0.18.1",
+    "typescript": "^5.9.3"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "typecheck": "tsc --noEmit",
+    "release": "bumpp && pnpm publish"
+  }
+}