@ocelescope/core 0.1.1 → 0.5.0

package/README.md

@@ -26,13 +26,30 @@ for a complete setup.
 
 ```tsx
 // pages/_app.tsx
+
+// 1. Third-party global styles core relies on. Import these FIRST, in this
+//    order (@mantine/core must come before its extensions).
+import "@mantine/core/styles.css";
+import "@mantine/dropzone/styles.css";
+import "@mantine/notifications/styles.css";
+import "mantine-datatable/styles.css";
+
+// 2. core's own (scoped) styles — must come AFTER the above so its overrides win.
 import "@ocelescope/core/styles.css";
+
 import { OcelescopeApp } from "@ocelescope/core";
 import config from "../ocelescope.config";
 
 export default OcelescopeApp(config);
 ```
 
+> **Styles.** `@ocelescope/core` ships only its own component styles in
+> `@ocelescope/core/styles.css`; it does **not** bundle its dependencies'
+> global CSS. Your app must import the Mantine / mantine-datatable stylesheets
+> above itself (and add those packages to its `dependencies`), in order, before
+> core's stylesheet. Each Ocelescope module documents any additional
+> stylesheets it needs.
+
 ```tsx
 // pages/_document.tsx
 import { OcelescopeDocument } from "@ocelescope/core";

package/dist/index.d.ts

@@ -4,7 +4,6 @@ import { DataTableColumn } from "mantine-datatable";
 import { ComponentProps, SVGProps } from "react";
 import { Dropzone, FileWithPath } from "@mantine/dropzone";
 import { GetStaticPaths, GetStaticProps, NextApiRequest, NextApiResponse } from "next";
-
 //#region src/components/AttributeTable.d.ts
 type OcelVersion$1 = "original" | "filtered";
 declare const AttributesTable: React.FC<{
@@ -39,6 +38,14 @@ declare const FileDropzone: React.FC<{
   };
 }>;
 //#endregion
+//#region src/components/Dropzone/FullScreenUpload.d.ts
+declare const FullScreenUpload: React.FC<{
+  onSuccess?: () => void;
+  accept?: ComponentProps<typeof Dropzone.FullScreen>["accept"];
+  label?: React.ReactNode;
+  active?: boolean;
+}>;
+//#endregion
 //#region src/components/EventHandler.d.ts
 declare const sseHandler: (req: NextApiRequest, res: NextApiResponse) => Promise<void>;
 //#endregion
@@ -150,11 +157,14 @@ declare const useCurrentOcel: () => {
 //#region src/hooks/useDownload.d.ts
 declare const useDownloadFile: () => (path: string) => Promise<void>;
 declare const useDownloadOCEL: () => {
-  download: (ocelId: string | null, params?: import("@ocelescope/api-base").DownloadOCELParams | undefined) => void;
+  download: (ocelId: string, params?: import("@ocelescope/api-base").DownloadOCELParams | undefined) => void;
 };
 declare const useDownloadFlatOCEL: () => {
   download: (ocelId: string | null, params?: import("@ocelescope/api-base").DownloadFlatLogParams | undefined) => void;
 };
+declare const useDownloadVariantFlatLog: () => {
+  download: (ocelId: string | null, params?: import("@ocelescope/api-base").DownloadVariantFlatLogParams | undefined) => void;
+};
 declare const useDownloadResource: () => {
   download: (resourceId: string) => void;
 };
@@ -163,7 +173,7 @@ declare const useDownloadResourceAsPnml: () => {
 };
 //#endregion
 //#region src/hooks/useInvalidate.d.ts
-type InvalidationRouteName = "ocels" | "resources" | "tasks" | "plugins";
+type InvalidationRouteName = "ocels" | "resources" | "tasks" | "plugins" | "discoveryMethods";
 declare const useInvalidate: () => (routeNames: InvalidationRouteName[]) => Promise<void>;
 //#endregion
 //#region src/lib/attributes.d.ts
@@ -185,11 +195,7 @@ declare const env: {
 };
 //#endregion
 //#region src/lib/getModuleRoute.d.ts
-declare const getModuleRoute: ({
-  moduleName,
-  routeName,
-  query
-}: {
+declare const getModuleRoute: ({ moduleName, routeName, query }: {
   moduleName: string;
   routeName?: string;
   query?: Record<string, string>;
@@ -200,4 +206,4 @@ declare const getModuleRoute: ({
   pathname: string;
 };
 //#endregion
-export { AttributesTable, BarList, FileDropzone, HelpModal, ModuleDefinition, ModuleRouteDefinition, OcelSelect, OcelescopeApp, OcelescopeConfig, OcelescopeDocument, RelationTable, UploadModal, UploadSection, createModulesPage, defineModule, defineModuleRoute, env, formatAttributeValue, getModuleRoute, sseHandler, useCurrentOcel, useDownloadFile, useDownloadFlatOCEL, useDownloadOCEL, useDownloadResource, useDownloadResourceAsPnml, useInvalidate };
+export { AttributesTable, BarList, FileDropzone, FullScreenUpload, HelpModal, ModuleDefinition, ModuleRouteDefinition, OcelSelect, OcelescopeApp, OcelescopeConfig, OcelescopeDocument, RelationTable, UploadModal, UploadSection, createModulesPage, defineModule, defineModuleRoute, env, formatAttributeValue, getModuleRoute, sseHandler, useCurrentOcel, useDownloadFile, useDownloadFlatOCEL, useDownloadOCEL, useDownloadResource, useDownloadResourceAsPnml, useDownloadVariantFlatLog, useInvalidate };

package/dist/index.js

@@ -1,5 +1,5 @@
 import { ActionIcon, Anchor, AppShell, Box, Burger, Button, ColorSchemeScript, Combobox, CopyButton, Divider, Group, Input, InputBase, LoadingOverlay, MantineProvider, Modal, MultiSelect, NavLink, Stack, Table, Text, ThemeIcon, Tooltip, UnstyledButton, createTheme, mantineHtmlProps, useCombobox, useMantineTheme } from "@mantine/core";
-import { getDownloadFlatLogQueryKey, getDownloadOCELQueryKey, getDownloadResourceAsPnmlQueryKey, getDownloadResourceQueryKey, useActivities, useAggregatedAttributes, useAttributeNames, useE2o, useE2oCombinations, useEventAttributes, useGetDefaultOcel, useGetOcels, useImportDefaultOcel, useLogout, useO2o, useO2oCombinations, useObjectAttributes, useObjectTypes, useUpload } from "@ocelescope/api-base";
+import { getDownloadFlatLogQueryKey, getDownloadOCELQueryKey, getDownloadResourceAsPnmlQueryKey, getDownloadResourceQueryKey, getDownloadVariantFlatLogQueryKey, useActivities, useAggregatedAttributes, useAttributeNames, useE2o, useE2oCombinations, useEventAttributes, useGetDefaultOcel, useGetOcels, useImportDefaultOcel, useLogout, useO2o, useO2oCombinations, useObjectAttributes, useObjectTypes, useUpload } from "@ocelescope/api-base";
 import { HydrationBoundary, QueryClient, QueryClientProvider, keepPreviousData, useQueryClient } from "@tanstack/react-query";
 import { BookOpenIcon, BugIcon, ChevronDownIcon, ChevronRightIcon, ContainerIcon, DownloadIcon, FilterIcon, GlobeIcon, HelpCircleIcon, LightbulbIcon, LogOutIcon, MailIcon, PackageIcon, PackagePlusIcon, PuzzleIcon, TriangleAlertIcon, UploadIcon, XIcon } from "lucide-react";
 import { DataTable } from "mantine-datatable";
@@ -422,6 +422,92 @@ const FileDropzone = ({ onUpload, accept, content }) => {
 	});
 };
 //#endregion
+//#region src/hooks/useInvalidate.ts
+const ROUTE_PATH = {
+	ocels: "ocels",
+	resources: "resources",
+	tasks: "tasks",
+	plugins: "plugins",
+	discoveryMethods: "discovery/methods"
+};
+const useInvalidate = () => {
+	const queryClient = useQueryClient();
+	return async (routeNames) => await queryClient.invalidateQueries({ predicate: (query) => typeof query.queryKey[0] === "string" && routeNames.some((route) => query.queryKey[0].includes(`/${ROUTE_PATH[route]}`)) });
+};
+//#endregion
+//#region src/components/Dropzone/FullScreenUpload.tsx
+const defaultLabel = `Drag'n'drop your ${[
+	"OCELs",
+	"Plugins",
+	"Resources"
+].join(", ")} here to upload.`;
+const FullScreenUpload = ({ onSuccess, accept, label = defaultLabel, active = true }) => {
+	const invalidate = useInvalidate();
+	const { mutate: upload, isPending } = useUpload({ mutation: { onSuccess: async () => {
+		await invalidate(["tasks"]);
+		onSuccess?.();
+	} } });
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(LoadingOverlay, {
+		visible: isPending,
+		overlayProps: { blur: 2 }
+	}), /* @__PURE__ */ jsx(Dropzone.FullScreen, {
+		active,
+		accept,
+		withinPortal: false,
+		styles: {
+			fullScreen: {
+				position: "absolute",
+				padding: 0,
+				backgroundColor: "var(--mantine-color-body)"
+			},
+			root: { backgroundColor: "transparent" },
+			inner: {
+				height: "100%",
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center"
+			}
+		},
+		onDrop: (files) => {
+			upload({ data: { files } });
+		},
+		children: /* @__PURE__ */ jsxs(Group, {
+			justify: "center",
+			gap: "xl",
+			mih: 220,
+			style: { pointerEvents: "none" },
+			children: [
+				/* @__PURE__ */ jsx(Dropzone.Accept, { children: /* @__PURE__ */ jsx(DownloadIcon, {
+					size: 52,
+					color: "var(--mantine-color-blue-6)"
+				}) }),
+				/* @__PURE__ */ jsx(Dropzone.Reject, { children: /* @__PURE__ */ jsx(XIcon, {
+					size: 52,
+					color: "var(--mantine-color-red-6)"
+				}) }),
+				/* @__PURE__ */ jsx(Dropzone.Idle, { children: /* @__PURE__ */ jsx(UploadIcon, {
+					size: 52,
+					color: "var(--mantine-color-dimmed)"
+				}) }),
+				/* @__PURE__ */ jsxs("div", {
+					style: { textAlign: "center" },
+					children: [/* @__PURE__ */ jsx(Text, {
+						size: "xl",
+						inline: true,
+						children: label
+					}), /* @__PURE__ */ jsx(Text, {
+						size: "sm",
+						c: "dimmed",
+						inline: true,
+						mt: 7,
+						children: "Release to start the upload."
+					})]
+				})
+			]
+		})
+	})] });
+};
+//#endregion
 //#region src/components/EventHandler.ts
 const apiBase = process.env.EXTERNAL_API_BASE_URL ?? "http://localhost:8000";
 const sseHandler = async (req, res) => {
@@ -466,7 +552,7 @@ const env = z.object({
 	NEXT_PUBLIC_TROUBLESHOOTING_URL: z.url().default("https://www.ocelescope.org/community/troubleshooting/"),
 	NEXT_PUBLIC_REQUEST_FEATURE_URL: z.url().default("https://www.ocelescope.org/community/request-feature/"),
 	NEXT_PUBLIC_SUBMIT_PLUGIN_URL: z.url().default("https://www.ocelescope.org/community/submit-plugin/"),
-	NEXT_PUBLIC_REQUEST_ENVIRONMENT_URL: z.url().default("https://www.ocelescope.org/plugin-development/request-package/"),
+	NEXT_PUBLIC_REQUEST_ENVIRONMENT_URL: z.url().default("https://www.ocelescope.org/community/request-package/"),
 	NEXT_PUBLIC_CONTACT_EMAIL: z.string().default("ocelescope@pads.rwth-aachen.de")
 }).transform((env) => ({
 	appVersion: env.NEXT_PUBLIC_APP_VERSION,
@@ -685,12 +771,6 @@ const CurrentOcelSelect = () => {
 	});
 };
 //#endregion
-//#region src/hooks/useInvalidate.ts
-const useInvalidate = () => {
-	const queryClient = useQueryClient();
-	return async (routeNames) => await queryClient.invalidateQueries({ predicate: (query) => typeof query.queryKey[0] === "string" && routeNames.some((route) => query.queryKey[0].includes(`/${route}`)) });
-};
-//#endregion
 //#region src/components/UploadSection/UploadSection.tsx
 const DefaultOcels = ({ onSuccess, setIsPending }) => {
 	const { data: ocels = [] } = useGetDefaultOcel({});
@@ -863,7 +943,7 @@ const LogoutButton = () => {
 			w: "100%",
 			children: [/* @__PURE__ */ jsx(Text, {
 				style: { lineHeight: 1 },
-				children: "Logout"
+				children: "Reset Session"
 			}), /* @__PURE__ */ jsx(LogOutIcon, { className: AppShell_module_default.buttonIcon })]
 		})
 	})] });
@@ -943,6 +1023,62 @@ const NavBar = ({ config }) => {
 	});
 };
 //#endregion
+//#region src/components/AppShell/components/OcelescopeLogo.tsx
+const OcelescopeLogo = ({ size = 32 }) => /* @__PURE__ */ jsxs("svg", {
+	width: size,
+	height: size * 32 / 40,
+	viewBox: "0 0 40 32",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	children: [
+		/* @__PURE__ */ jsx("circle", {
+			cx: "8",
+			cy: "16",
+			r: "5.6",
+			stroke: "#17a3b8",
+			strokeWidth: "2.2"
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: "8",
+			cy: "16",
+			r: "2.1",
+			fill: "#17a3b8"
+		}),
+		/* @__PURE__ */ jsx("line", {
+			x1: "13.6",
+			y1: "16",
+			x2: "16.6",
+			y2: "16",
+			stroke: "#17a3b8",
+			strokeWidth: "2.2"
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			x: "16.9",
+			y: "9.5",
+			width: "5.4",
+			height: "13",
+			rx: "1.4",
+			stroke: "#17a3b8",
+			strokeWidth: "2.2"
+		}),
+		/* @__PURE__ */ jsx("line", {
+			x1: "22.7",
+			y1: "16",
+			x2: "26",
+			y2: "16",
+			stroke: "#17a3b8",
+			strokeWidth: "2.2"
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: "31.6",
+			cy: "16",
+			r: "5.6",
+			stroke: "#17a3b8",
+			strokeWidth: "2.2"
+		})
+	]
+});
+//#endregion
 //#region src/components/AppShell/AppShell.tsx
 const AppShell$1 = ({ config, children }) => {
 	const [mobileOpened, { toggle: toggleMobile }] = useDisclosure(true);
@@ -980,6 +1116,7 @@ const AppShell$1 = ({ config, children }) => {
 							visibleFrom: "sm",
 							size: "sm"
 						}),
+						/* @__PURE__ */ jsx(OcelescopeLogo, { size: 32 }),
 						/* @__PURE__ */ jsx(Text, {
 							size: "xs",
 							c: "dimmed",
@@ -1063,7 +1200,8 @@ const InvalidationRequest = z.object({
 		"ocels",
 		"resources",
 		"tasks",
-		"plugins"
+		"plugins",
+		"discoveryMethods"
 	]))
 });
 const ErrorNotification = z.object({
@@ -1079,6 +1217,11 @@ const ServerEventMessage = z.discriminatedUnion("type", [
 ]);
 //#endregion
 //#region src/components/SSEWrapper.tsx
+const NotificationColorMap = {
+	warning: "yellow",
+	info: "blue",
+	error: "red"
+};
 const SSEWrapper = () => {
 	const { sessionId } = useSessionStore();
 	const invalidate = useInvalidate();
@@ -1097,7 +1240,7 @@ const SSEWrapper = () => {
 					showNotification({
 						title: message.title,
 						message: message.message,
-						color: "green"
+						color: NotificationColorMap[message.notification_type]
 					});
 					break;
 				case "error":
@@ -1171,7 +1314,11 @@ const OcelescopeDocument = () => {
 	return /* @__PURE__ */ jsxs(Html, {
 		lang: "en",
 		...mantineHtmlProps,
-		children: [/* @__PURE__ */ jsx(Head, { children: /* @__PURE__ */ jsx(ColorSchemeScript, { defaultColorScheme: "auto" }) }), /* @__PURE__ */ jsxs("body", { children: [/* @__PURE__ */ jsx(Main, {}), /* @__PURE__ */ jsx(NextScript, {})] })]
+		children: [/* @__PURE__ */ jsxs(Head, { children: [/* @__PURE__ */ jsx(ColorSchemeScript, { defaultColorScheme: "auto" }), /* @__PURE__ */ jsx("link", {
+			rel: "icon",
+			type: "image/svg+xml",
+			href: "/favicon.svg"
+		})] }), /* @__PURE__ */ jsxs("body", { children: [/* @__PURE__ */ jsx(Main, {}), /* @__PURE__ */ jsx(NextScript, {})] })]
 	});
 };
 //#endregion
@@ -1461,6 +1608,7 @@ const useDownloadFromServer = (getQueryKey) => () => {
 };
 const useDownloadOCEL = useDownloadFromServer(getDownloadOCELQueryKey);
 const useDownloadFlatOCEL = useDownloadFromServer(getDownloadFlatLogQueryKey);
+const useDownloadVariantFlatLog = useDownloadFromServer(getDownloadVariantFlatLogQueryKey);
 const useDownloadResource = useDownloadFromServer(getDownloadResourceQueryKey);
 const useDownloadResourceAsPnml = useDownloadFromServer(getDownloadResourceAsPnmlQueryKey);
 //#endregion
@@ -1468,4 +1616,4 @@ const useDownloadResourceAsPnml = useDownloadFromServer(getDownloadResourceAsPnm
 const defineModule = (def) => def;
 const defineModuleRoute = (def) => def;
 //#endregion
-export { AttributesTable, BarList, FileDropzone, HelpModal, OcelSelect, OcelescopeApp, OcelescopeDocument, RelationTable, UploadModal, UploadSection, createModulesPage, defineModule, defineModuleRoute, env, formatAttributeValue, getModuleRoute, sseHandler, useCurrentOcel, useDownloadFile, useDownloadFlatOCEL, useDownloadOCEL, useDownloadResource, useDownloadResourceAsPnml, useInvalidate };
+export { AttributesTable, BarList, FileDropzone, FullScreenUpload, HelpModal, OcelSelect, OcelescopeApp, OcelescopeDocument, RelationTable, UploadModal, UploadSection, createModulesPage, defineModule, defineModuleRoute, env, formatAttributeValue, getModuleRoute, sseHandler, useCurrentOcel, useDownloadFile, useDownloadFlatOCEL, useDownloadOCEL, useDownloadResource, useDownloadResourceAsPnml, useDownloadVariantFlatLog, useInvalidate };