@ocelescope/resources 0.10.2 → 0.12.0

package/dist/index.d.ts

@@ -1,30 +1,35 @@
-import { Select } from "@mantine/core";
-import { GetResourceResponse } from "@ocelescope/api-base";
-import { ComponentProps } from "react";
-//#region src/components/ResourceModal/ResourceModal.d.ts
+import { MultiSelectProps, SelectProps } from "@mantine/core";
+import { resourceVisualization } from "@ocelescope/api-base";
+import { ReactNode } from "react";
+type Controlled<P extends SelectProps | MultiSelectProps> = Omit<P, "defaultValue"> & Required<Pick<P, "value" | "onChange">>;
+type ActionSelectProps = {
+  actions?: ReactNode;
+} & ((Controlled<SelectProps> & {
+  multiple?: false;
+}) | (Controlled<MultiSelectProps> & {
+  multiple: true;
+}));
+export declare const ActionSelect: React.FC<ActionSelectProps>;
 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 ResourceSelectProps = ActionSelectProps & {
   type?: string;
-}>;
-//#endregion
-//#region src/types/index.d.ts
+  withUpload?: boolean;
+  withView?: boolean;
+};
+export declare const ResourceSelect: React.FC<ResourceSelectProps>;
 type RequireType<T> = T extends {
   type?: infer L;
 } ? Omit<T, "type"> & {
   type: L;
 } : T;
-type VisualizationsType = RequireType<NonNullable<GetResourceResponse["visualization"]>>;
+type VisualizationsType = RequireType<NonNullable<Awaited<ReturnType<typeof resourceVisualization>>>>;
 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 +45,4 @@ export declare const ResourceViewer: React.FC<{
   id: string;
   isPreview?: boolean;
 }>;
-//#endregion
-export type { VisualizationsType };
+export type { ActionSelectProps, ResourceSelectProps, VisualizationsType };

package/dist/index.js

@@ -1,9 +1,13 @@
-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 { ActionIcon, Alert, Autocomplete, Badge, Box, Button, ButtonGroup, Center, Code, FileButton, Group, LoadingOverlay, Menu, Modal, MultiSelect, Popover, ScrollArea, Scroller, Select, Stack, Tabs, Text, Title, Tooltip } from "@mantine/core";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useResource, useResourceTableColumnValues, useResourceTableRows, useResourceTables, useResourceVisualization, useResources, useUpload } from "@ocelescope/api-base";
+import { DownloadIcon, EyeIcon, EyeOffIcon, Maximize2Icon, MaximizeIcon, MinusIcon, PlusIcon, SearchIcon, UploadIcon, XIcon } from "lucide-react";
+import { useDebouncedValue, useDisclosure } from "@mantine/hooks";
+import { DataTable } from "mantine-datatable";
+import { memo, useCallback, useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
+import dayjs from "dayjs";
+import isBetween from "dayjs/plugin/isBetween.js";
+import dynamic from "next/dynamic.js";
 import { Graphviz } from "@hpcc-js/wasm-graphviz";
 import FileSaver from "file-saver";
 import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
@@ -11,15 +15,302 @@ import { Background, BaseEdge, ControlButton, Controls, EdgeLabelRenderer, Handl
 import { toPng, toSvg } from "html-to-image";
 import { jsPDF } from "jspdf";
 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/ActionSelect/ActionSelect.tsx
+const attachedStyles = { input: {
+	borderTopRightRadius: 0,
+	borderBottomRightRadius: 0
+} };
+const renderSelect = (props) => {
+	const styles = props.actions ? attachedStyles : void 0;
+	if (props.multiple) {
+		const { multiple: _, actions: __, ...rest } = props;
+		return /* @__PURE__ */ jsx(MultiSelect, {
+			flex: 1,
+			miw: 0,
+			styles,
+			...rest
+		});
+	}
+	const { multiple: _, actions: __, ...rest } = props;
+	return /* @__PURE__ */ jsx(Select, {
+		flex: 1,
+		miw: 0,
+		styles,
+		...rest
+	});
+};
+const ActionSelect = (props) => /* @__PURE__ */ jsxs(Group, {
+	wrap: "nowrap",
+	gap: 0,
+	align: "flex-end",
+	children: [renderSelect(props), props.actions && /* @__PURE__ */ jsxs(ActionIcon.Group, { children: [/* @__PURE__ */ jsx(ActionIcon.GroupSection, { hidden: true }), props.actions] })]
+});
+// 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");
+// 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$1 = [
+	20,
+	50,
+	75
+];
+const TableView = ({ visualization }) => {
+	const [pageSize, setPageSize] = useState(PAGE_SIZES$1[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
+	]);
+	const paginationProps = visualization.rows.length > PAGE_SIZES$1[0] ? {
+		totalRecords: visualization.rows.length,
+		recordsPerPage: pageSize,
+		onPageChange: (p) => setPage(p),
+		page,
+		recordsPerPageOptions: [...PAGE_SIZES$1],
+		onRecordsPerPageChange: (newPageSize) => {
+			setPageSize(newPageSize);
+			setPage(1);
+		}
+	} : {};
+	return /* @__PURE__ */ jsx(DataTable, {
+		records,
+		columns,
+		withTableBorder: true,
+		withColumnBorders: true,
+		withRowBorders: true,
+		...paginationProps
+	});
+};
+// src/components/ResourceView/TabularView.tsx
+const PAGE_SIZES = [
+	20,
+	50,
+	100
+];
+const UNSORTED = {
+	columnAccessor: "",
+	direction: "asc"
+};
+const VALUE_LIMIT = 50;
+const ColumnFilter = ({ resourceId, tableName, columnId, selected, onChange }) => {
+	const [search, setSearch] = useState("");
+	const [debouncedSearch] = useDebouncedValue(search, 250);
+	const { data, isFetching } = useResourceTableColumnValues(resourceId, tableName, columnId, {
+		size: VALUE_LIMIT,
+		...debouncedSearch && { search: debouncedSearch }
+	}, { query: { placeholderData: (previous) => previous } });
+	const options = useMemo(() => [.../* @__PURE__ */ new Set([...selected, ...data?.response ?? []])], [selected, data?.response]);
+	const total = data?.total_items ?? 0;
+	return /* @__PURE__ */ jsx(MultiSelect, {
+		w: 280,
+		searchable: true,
+		clearable: true,
+		data: options,
+		value: selected,
+		onChange,
+		searchValue: search,
+		onSearchChange: setSearch,
+		filter: ({ options: unfiltered }) => unfiltered,
+		placeholder: `Search ${columnId}`,
+		nothingFoundMessage: isFetching ? "Loading..." : "No values found",
+		description: total > VALUE_LIMIT ? `Showing ${VALUE_LIMIT} of ${total} values, type to narrow down` : void 0,
+		comboboxProps: { withinPortal: false }
+	});
+};
+const TableRows = ({ resourceId, table }) => {
+	const [page, setPage] = useState(1);
+	const [pageSize, setPageSize] = useState(PAGE_SIZES[0]);
+	const [sortStatus, setSortStatus] = useState(UNSORTED);
+	const [filters, setFilters] = useState({});
+	const hasFilters = Object.values(filters).some((values) => values.length > 0);
+	const { data, isError, isFetching } = useResourceTableRows(resourceId, table.name, {
+		page,
+		size: pageSize,
+		...sortStatus.columnAccessor && {
+			sort_by: sortStatus.columnAccessor,
+			descending: sortStatus.direction === "desc"
+		},
+		...hasFilters && { filters: JSON.stringify(filters) }
+	}, { query: { placeholderData: (previous) => previous } });
+	const columns = useMemo(() => table.columns.map((column) => ({
+		accessor: column.id,
+		title: column.id,
+		sortable: true,
+		render: (row) => formatCell(row[column.id], column.data_type),
+		filtering: (filters[column.id] ?? []).length > 0,
+		filter: /* @__PURE__ */ jsx(ColumnFilter, {
+			resourceId,
+			tableName: table.name,
+			columnId: column.id,
+			selected: filters[column.id] ?? [],
+			onChange: (values) => {
+				setFilters((current) => ({
+					...current,
+					[column.id]: values
+				}));
+				setPage(1);
+			}
+		})
+	})), [
+		resourceId,
+		table.name,
+		table.columns,
+		filters
+	]);
+	const records = useMemo(() => (data?.response ?? []).map((row, index) => ({
+		...row,
+		rowKey: (page - 1) * pageSize + index
+	})), [
+		data?.response,
+		page,
+		pageSize
+	]);
+	if (isError) return /* @__PURE__ */ jsx(Center, {
+		h: "100%",
+		p: "md",
+		children: /* @__PURE__ */ jsx(Text, {
+			c: "dimmed",
+			children: "Could not load the table"
+		})
+	});
+	return /* @__PURE__ */ jsx(DataTable, {
+		height: "100%",
+		idAccessor: "rowKey",
+		records,
+		columns,
+		fetching: isFetching,
+		withTableBorder: true,
+		withColumnBorders: true,
+		sortStatus,
+		onSortStatusChange: (status) => {
+			setSortStatus(status);
+			setPage(1);
+		},
+		totalRecords: data?.total_items ?? 0,
+		recordsPerPage: pageSize,
+		page,
+		onPageChange: setPage,
+		recordsPerPageOptions: PAGE_SIZES,
+		onRecordsPerPageChange: (size) => {
+			setPageSize(size);
+			setPage(1);
+		}
+	});
+};
+const TableTabs = ({ resourceId, tables }) => {
+	const [activeTable, setActiveTable] = useState(tables[0]?.name ?? null);
+	const [searchOpened, { toggle: toggleSearch, close: closeSearch }] = useDisclosure(false);
+	return /* @__PURE__ */ jsxs(Tabs, {
+		keepMounted: false,
+		h: "100%",
+		style: {
+			display: "flex",
+			flexDirection: "column"
+		},
+		value: activeTable,
+		onChange: setActiveTable,
+		children: [tables.length > 1 && /* @__PURE__ */ jsxs(Group, {
+			wrap: "nowrap",
+			gap: "0",
+			style: { flexShrink: 0 },
+			children: [/* @__PURE__ */ jsxs(Popover, {
+				width: 300,
+				position: "bottom-start",
+				withArrow: true,
+				shadow: "md",
+				opened: searchOpened,
+				onChange: closeSearch,
+				trapFocus: true,
+				returnFocus: true,
+				children: [/* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(ActionIcon, {
+					size: "lg",
+					h: "100%",
+					onClick: toggleSearch,
+					"aria-label": "Search tables",
+					bdrs: 0,
+					children: /* @__PURE__ */ jsx(SearchIcon, { size: 16 })
+				}) }), /* @__PURE__ */ jsx(Popover.Dropdown, { children: /* @__PURE__ */ jsx(Autocomplete, {
+					data: tables.map(({ name }) => name),
+					"aria-label": "Table",
+					placeholder: "Search tables",
+					selectFirstOptionOnChange: true,
+					comboboxProps: { withinPortal: false },
+					onOptionSubmit: (name) => {
+						setActiveTable(name);
+						closeSearch();
+					}
+				}) })]
+			}), /* @__PURE__ */ jsx(Tabs.List, {
+				flex: 1,
+				miw: 0,
+				children: /* @__PURE__ */ jsx(Scroller, { children: tables.map(({ name }) => /* @__PURE__ */ jsx(Tabs.Tab, {
+					value: name,
+					children: name
+				}, name)) })
+			})]
+		}), tables.map((table) => /* @__PURE__ */ jsx(Tabs.Panel, {
+			value: table.name,
+			flex: 1,
+			mih: 0,
+			children: /* @__PURE__ */ jsx(TableRows, {
+				resourceId,
+				table
+			})
+		}, table.name))]
+	});
+};
+const TabularView = ({ resourceId }) => {
+	const { data: tables, isError, isPending } = useResourceTables(resourceId);
+	if (isError) return /* @__PURE__ */ jsx(Center, {
+		h: "100%",
+		p: "md",
+		children: /* @__PURE__ */ jsx(Text, {
+			c: "dimmed",
+			children: "Could not load the tables"
+		})
+	});
+	if (isPending) return /* @__PURE__ */ jsx(LoadingOverlay, { visible: true });
+	if (tables.length === 0) return /* @__PURE__ */ jsx(Center, {
+		h: "100%",
+		p: "md",
+		children: /* @__PURE__ */ jsx(Text, {
+			c: "dimmed",
+			children: "This resource has no tables"
+		})
+	});
+	return /* @__PURE__ */ jsx(TableTabs, {
+		resourceId,
+		tables
+	});
+};
+// 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 +328,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 +348,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 +430,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 +502,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 +546,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 +671,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 +735,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 +765,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 +783,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 +933,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 +1101,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 +1117,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 +1136,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 +1181,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 +1241,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 +1303,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 +1470,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 +1530,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 +1584,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 +1698,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 +1828,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 +1924,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 +2002,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 +2010,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 +2024,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 +2054,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,68 +2079,7 @@ const PlotlyViewer = ({ visualization, isPreview }) => {
 		}
 	});
 };
-//#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
-	]);
-	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,
-		...paginationProps
-	});
-};
-//#endregion
-//#region src/components/ResourceView/index.tsx
+// src/components/ResourceView/index.tsx
 const visualizationMap = {
 	table: TableView,
 	svg: SvgViewer,
@@ -1894,34 +2099,72 @@ const Visualization = ({ visualization, isPreview = false, menuItems }) => {
 		...menuItems && { menuItems }
 	});
 };
-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",
+const LoadError = () => /* @__PURE__ */ jsx(Center, {
+	h: "100%",
+	p: "md",
+	children: /* @__PURE__ */ jsx(Text, {
+		c: "dimmed",
+		children: "Could not load the visualization"
+	})
+});
+const NoVisualization = ({ resourceTypeLabel }) => /* @__PURE__ */ jsx(Center, {
+	h: "100%",
+	p: "md",
+	children: /* @__PURE__ */ jsxs(Stack, {
 		align: "center",
-		h: "100%",
-		children: /* @__PURE__ */ jsx(ThemeIcon, {
-			w: 150,
-			h: 150,
-			variant: "transparent",
-			color: "gray",
-			children: /* @__PURE__ */ jsx(EyeOffIcon, {
-				width: 150,
-				height: 150
+		gap: "xs",
+		children: [
+			/* @__PURE__ */ jsx(EyeOffIcon, {
+				size: 64,
+				strokeWidth: 1.5,
+				color: "var(--mantine-color-dimmed)"
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				fw: 500,
+				children: "No visualization available"
+			}),
+			/* @__PURE__ */ jsxs(Group, {
+				gap: 6,
+				justify: "center",
+				children: [/* @__PURE__ */ jsx(Badge, {
+					size: "sm",
+					color: "gray",
+					children: resourceTypeLabel
+				}), /* @__PURE__ */ jsx(Text, {
+					size: "sm",
+					c: "dimmed",
+					children: "does not provide a visualization"
+				})]
 			})
-		})
-	});
+		]
+	})
+});
+const ResourceVisualization = ({ id, resourceTypeLabel, isPreview }) => {
+	const { data, isError, isPending } = useResourceVisualization(id);
+	if (isError) return /* @__PURE__ */ jsx(LoadError, {});
+	if (isPending) return /* @__PURE__ */ jsx(LoadingOverlay, { visible: true });
+	if (!data) return /* @__PURE__ */ jsx(NoVisualization, { resourceTypeLabel });
 	return /* @__PURE__ */ jsx(Visualization, {
-		visualization: data.visualization,
+		visualization: data,
 		isPreview
 	});
 };
-//#endregion
-//#region src/components/ResourceModal/ResourceModal.tsx
+const ResourceViewer = ({ id, isPreview = false }) => {
+	const { data: resource, isError, isPending } = useResource(id);
+	if (isError) return /* @__PURE__ */ jsx(LoadError, {});
+	if (isPending) return /* @__PURE__ */ jsx(LoadingOverlay, { visible: true });
+	if (resource.has_visualization) return /* @__PURE__ */ jsx(ResourceVisualization, {
+		id,
+		resourceTypeLabel: resource.resource_type_label,
+		isPreview
+	});
+	if (resource.kind === "tabular") return /* @__PURE__ */ jsx(TabularView, { resourceId: id });
+	return /* @__PURE__ */ jsx(NoVisualization, { resourceTypeLabel: resource.resource_type_label });
+};
+// src/components/ResourceModal/ResourceModal.tsx
 const ResourceModal = ({ id, onClose }) => {
 	const { data } = useResource(id, { query: { enabled: !!id } });
-	return data?.resource.id && /* @__PURE__ */ jsx(Modal, {
+	return data?.id && /* @__PURE__ */ jsx(Modal, {
 		opened: !!data,
 		onClose,
 		fullScreen: true,
@@ -1942,7 +2185,7 @@ const ResourceModal = ({ id, onClose }) => {
 				justify: "space-between",
 				children: [/* @__PURE__ */ jsx(Title, {
 					size: "h5",
-					children: data.resource.name
+					children: data.name
 				}), /* @__PURE__ */ jsx(ActionIcon, {
 					variant: "subtle",
 					color: "red",
@@ -1954,22 +2197,92 @@ const ResourceModal = ({ id, onClose }) => {
 				h: "100%",
 				flex: 1,
 				mih: 0,
-				children: /* @__PURE__ */ jsx(ResourceViewer, { id: data.resource.id })
+				children: /* @__PURE__ */ jsx(ResourceViewer, { id: data.id })
 			})]
 		})
 	});
 };
-//#endregion
-//#region src/components/ResourceSelect/ResourceSelect.tsx
-const ResourceSelect = ({ type, value, ...props }) => {
+// src/components/ResourceSelect/ResourceSelect.tsx
+const useResourceOptions = (type, onUploaded) => {
 	const { data: resources = [] } = useResources({ schema_hash: type ?? null });
-	return /* @__PURE__ */ jsx(Select, {
-		...props,
-		data: resources.map(({ name, id }) => ({
+	const [pendingTaskIds, setPendingTaskIds] = useState([]);
+	const options = useMemo(() => resources.map(({ name, id }) => ({
+		value: id,
+		label: name
+	})), [resources]);
+	const handleUploaded = useEffectEvent(onUploaded);
+	useEffect(() => {
+		const uploaded = resources.filter(({ source_id }) => source_id && pendingTaskIds.includes(source_id));
+		if (!uploaded.length) return;
+		setPendingTaskIds((taskIds) => taskIds.filter((taskId) => !uploaded.some(({ source_id }) => source_id === taskId)));
+		handleUploaded(uploaded.map(({ id, name }) => ({
 			value: id,
 			label: name
-		}))
+		})));
+	}, [resources, pendingTaskIds]);
+	const trackUpload = (taskIds) => setPendingTaskIds((pending) => [...pending, ...taskIds]);
+	return {
+		options,
+		trackUpload
+	};
+};
+const UploadButton = ({ disabled, onUpload }) => {
+	const { mutate: upload, isPending } = useUpload({ mutation: { onSuccess: onUpload } });
+	return /* @__PURE__ */ jsx(FileButton, {
+		accept: ".ocelescope",
+		multiple: true,
+		onChange: (files) => {
+			if (files.length) upload({ data: { files } });
+		},
+		children: (props) => /* @__PURE__ */ jsx(Tooltip, {
+			label: "Upload resource",
+			withArrow: true,
+			children: /* @__PURE__ */ jsx(ActionIcon, {
+				...props,
+				size: "input-sm",
+				loading: isPending,
+				disabled,
+				"aria-label": "Upload resource",
+				children: /* @__PURE__ */ jsx(UploadIcon, { size: 16 })
+			})
+		})
+	});
+};
+const ViewButton = ({ resourceId, onView }) => /* @__PURE__ */ jsx(Tooltip, {
+	label: resourceId ? "View resource" : "Select a resource to view it",
+	withArrow: true,
+	children: /* @__PURE__ */ jsx(ActionIcon, {
+		variant: "default",
+		size: "input-sm",
+		"data-disabled": !resourceId || void 0,
+		"aria-disabled": !resourceId,
+		onClick: resourceId ? () => onView(resourceId) : void 0,
+		"aria-label": "View resource",
+		children: /* @__PURE__ */ jsx(EyeIcon, { size: 16 })
+	})
+});
+const ResourceSelect = (props) => {
+	const { type, withUpload = true, withView = true, ...selectProps } = props;
+	const [viewedId, setViewedId] = useState();
+	const { options, trackUpload } = useResourceOptions(type, (uploaded) => {
+		if (props.multiple) props.onChange([.../* @__PURE__ */ new Set([...props.value, ...uploaded.map(({ value }) => value)])]);
+		else if (uploaded[0]) props.onChange(uploaded[0].value, uploaded[0]);
 	});
+	const viewId = props.multiple ? null : props.value;
+	const showView = withView && !props.multiple;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ActionSelect, {
+		...selectProps,
+		data: options,
+		actions: (showView || withUpload) && /* @__PURE__ */ jsxs(Fragment, { children: [showView && /* @__PURE__ */ jsx(ViewButton, {
+			resourceId: viewId,
+			onView: setViewedId
+		}), withUpload && /* @__PURE__ */ jsx(UploadButton, {
+			disabled: props.disabled,
+			onUpload: trackUpload
+		})] })
+	}), viewedId && /* @__PURE__ */ jsx(ResourceModal, {
+		id: viewedId,
+		onClose: () => setViewedId(void 0)
+	})] });
 };
-//#endregion
-export { ResourceModal, ResourceSelect, ResourceViewer, Visualization };
+export { ActionSelect, ResourceModal, ResourceSelect, ResourceViewer, Visualization };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ocelescope/resources",
   "type": "module",
-  "version": "0.10.2",
+  "version": "0.12.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,30 @@
   },
   "peerDependencies": {
     "@floating-ui/react": "^0.27.18",
-    "@hpcc-js/wasm-graphviz": "^1.21.0",
-    "@mantine/core": "^9.7.2",
-    "@ocelescope/api-base": "^0.10.2",
-    "@r4pm/components": "^0.3.2",
-    "@xyflow/react": "^12.11.3",
+    "@hpcc-js/wasm-graphviz": "^1.30.0",
+    "@mantine/core": "^9.7.4",
+    "@mantine/hooks": "^9.7.4",
+    "@ocelescope/api-base": "^0.12.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.56.0",
+    "lucide-react": "^1.63.0",
     "mantine-datatable": "^9.4.0",
-    "next": "16.4.0",
-    "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.1",
+    "@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.1",
+    "tsdown": "^0.23.3",
     "typescript": "^6.0.3"
   },
   "dependencies": {