@ocelescope/resources 0.11.0 → 0.12.0

package/dist/index.d.ts

@@ -1,19 +1,31 @@
-import { Select } from "@mantine/core";
-import { GetResourceResponse } from "@ocelescope/api-base";
-import { ComponentProps } from "react";
+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;
 }>;
-export declare const ResourceSelect: React.FC<Omit<ComponentProps<typeof Select<string>>, "data"> & {
+type ResourceSelectProps = ActionSelectProps & {
   type?: string;
-}>;
+  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;
@@ -33,4 +45,4 @@ export declare const ResourceViewer: React.FC<{
   id: string;
   isPreview?: boolean;
 }>;
-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,9 +15,296 @@ 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";
+// 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, { wasmViz }] = await Promise.all([import("@r4pm/components"), import("@r4pm/components/viz/wasm")]);
@@ -1788,64 +2079,6 @@ const PlotlyViewer = ({ visualization, isPreview }) => {
 		}
 	});
 };
-// 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 = [
-	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
-	});
-};
 // src/components/ResourceView/index.tsx
 const visualizationMap = {
 	table: TableView,
@@ -1866,33 +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
 	});
 };
+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,
@@ -1913,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",
@@ -1925,20 +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 })
 			})]
 		})
 	});
 };
 // src/components/ResourceSelect/ResourceSelect.tsx
-const ResourceSelect = ({ type, value, ...props }) => {
+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)
+	})] });
 };
-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.11.0",
+  "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",
@@ -30,7 +30,8 @@
     "@floating-ui/react": "^0.27.18",
     "@hpcc-js/wasm-graphviz": "^1.30.0",
     "@mantine/core": "^9.7.4",
-    "@ocelescope/api-base": "^0.11.0",
+    "@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",