@rivm-loculus-tools/common-frontend 0.9.0 → 0.11.0

package/dist/components/fasta/FastaPageHeaderCenterComponent/index.js

@@ -1,8 +1,7 @@
-import { t as e } from "../../../_chunks/react.js";
-import { Box as t, Chip as n, styled as r } from "@mui/material";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Box as e, Chip as t, styled as n } from "@mui/material";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 // src/components/fasta/FastaPageHeaderCenterComponent/FastaPageHeaderCenterComponent.tsx
-var o = r(n, {
+var a = n(t, {
 	name: "RivmLoculusToolsCommonFrontendFastaPageHeaderCenterComponent",
 	slot: "Root"
 })({
@@ -10,23 +9,20 @@ var o = r(n, {
 	color: "#FFFFFF",
 	fontSize: "0.75rem",
 	fontWeight: 600
-}), s = ({ store: n }) => {
-	let r = e(n, (e) => e.parsedFasta), s = e(n, (e) => e.parsedMetadata), c = r?.sequences?.length || 0, l = s?.records?.length || 0;
-	return /* @__PURE__ */ a(t, {
-		sx: {
-			alignItems: "center",
-			display: "flex",
-			gap: 1
-		},
-		children: [c > 0 && /* @__PURE__ */ i(o, {
-			label: `${c} Sequences`,
-			size: "small"
-		}), l > 0 && /* @__PURE__ */ i(o, {
-			label: `${l} Metadata Records`,
-			size: "small"
-		})]
-	});
-};
-export { s as FastaPageHeaderCenterComponent };
+}), o = ({ metaDataCount: t, sequenceCount: n }) => /* @__PURE__ */ i(e, {
+	sx: {
+		alignItems: "center",
+		display: "flex",
+		gap: 1
+	},
+	children: [n > 0 && /* @__PURE__ */ r(a, {
+		label: `${n} Sequences`,
+		size: "small"
+	}), t > 0 && /* @__PURE__ */ r(a, {
+		label: `${t} Metadata Records`,
+		size: "small"
+	})]
+});
+export { o as FastaPageHeaderCenterComponent };
 
 //# sourceMappingURL=index.js.map

package/dist/components/fasta/FastaPageHeaderCenterComponent/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useStore","FastaPageHeaderCenterChip","styled","Chip","FastaPageHeaderCenterComponent","parsedFasta","store","state","parsedMetadata","seqCount","metaCount","Box"],"sources":["../../../../src/components/fasta/FastaPageHeaderCenterComponent/FastaPageHeaderCenterComponent.tsx"],"sourcesContent":["import {\n  Box,\n  Chip,\n  styled,\n} from '@mui/material';\nimport type {\n  ComponentsOverrides,\n  Theme,\n} from '@mui/material/styles';\nimport type { StoreApi } from 'zustand';\nimport { useStore } from 'zustand';\n\nimport type { FastaDataStore } from '../../../stores/fastaDataStore';\n\n\nexport type FastaPageHeaderCenterComponentProps = {\n  store: StoreApi<FastaDataStore>;\n};\n\nexport type FastaPageHeaderCenterComponentTheme = {\n  styleOverrides?: ComponentsOverrides<Theme>['MuiChip'];\n};\n\nconst FastaPageHeaderCenterChip = styled(Chip, {\n  name: 'RivmLoculusToolsCommonFrontendFastaPageHeaderCenterComponent',\n  slot: 'Root',\n})({\n  backgroundColor: 'rgba(255, 255, 255, 0.2)',\n  color: '#FFFFFF',\n  fontSize: '0.75rem',\n  fontWeight: 600,\n});\n\nexport const FastaPageHeaderCenterComponent = ({ store }: FastaPageHeaderCenterComponentProps) => {\n  const parsedFasta = useStore(store, (state) => state.parsedFasta);\n  const parsedMetadata = useStore(store, (state) => state.parsedMetadata);\n\n  const seqCount = parsedFasta?.sequences?.length || 0;\n  const metaCount = parsedMetadata?.records?.length || 0;\n\n  return (\n    <Box sx={{ alignItems: 'center', display: 'flex', gap: 1 }}>\n      {seqCount > 0 && (\n        <FastaPageHeaderCenterChip\n          label={`${seqCount} Sequences`}\n          size={'small'}\n        />\n      )}\n      {metaCount > 0 && (\n        <FastaPageHeaderCenterChip\n          label={`${metaCount} Metadata Records`}\n          size={'small'}\n        />\n      )}\n    </Box>\n  );\n};\n"],"mappings":";;;;AAuBA,IAAMC,IAA4BC,EAAOC,GAAM;CAC7C,MAAM;CACN,MAAM;AACR,CAAC,CAAC,CAAC;CACD,iBAAiB;CACjB,OAAO;CACP,UAAU;CACV,YAAY;AACd,CAAC,GAEYC,KAAkC,EAAE,eAAiD;CAChG,IAAMC,IAAcL,EAASM,IAAQ,MAAUC,EAAM,WAAW,GAC1DC,IAAiBR,EAASM,IAAQ,MAAUC,EAAM,cAAc,GAEhEE,IAAWJ,GAAa,WAAW,UAAU,GAC7CK,IAAYF,GAAgB,SAAS,UAAU;CAErD,OACE,kBAACG,GAAD;EAAK,IAAI;GAAE,YAAY;GAAU,SAAS;GAAQ,KAAK;EAAE;EAAzD,UAAA,CACGF,IAAW,KACV,kBAACR,GAAD;GACE,OAAO,GAAGQ,EAAS;GACnB,MAAM;EACP,CAAA,GAEFC,IAAY,KACX,kBAACT,GAAD;GACE,OAAO,GAAGS,EAAU;GACpB,MAAM;EACP,CAAA,CAEA;;AAET"}
+{"version":3,"file":"index.js","names":["FastaPageHeaderCenterChip","styled","Chip","FastaPageHeaderCenterComponent","Box","sequenceCount","metaDataCount"],"sources":["../../../../src/components/fasta/FastaPageHeaderCenterComponent/FastaPageHeaderCenterComponent.tsx"],"sourcesContent":["import {\n  Box,\n  Chip,\n  styled,\n} from '@mui/material';\nimport type {\n  ComponentsOverrides,\n  Theme,\n} from '@mui/material/styles';\n\n\nexport type FastaPageHeaderCenterComponentProps = {\n  metaDataCount: number;\n  sequenceCount: number;\n};\n\nexport type FastaPageHeaderCenterComponentTheme = {\n  styleOverrides?: ComponentsOverrides<Theme>['MuiChip'];\n};\n\nconst FastaPageHeaderCenterChip = styled(Chip, {\n  name: 'RivmLoculusToolsCommonFrontendFastaPageHeaderCenterComponent',\n  slot: 'Root',\n})({\n  backgroundColor: 'rgba(255, 255, 255, 0.2)',\n  color: '#FFFFFF',\n  fontSize: '0.75rem',\n  fontWeight: 600,\n});\n\nexport const FastaPageHeaderCenterComponent = ({ metaDataCount, sequenceCount }: FastaPageHeaderCenterComponentProps) => {\n\n  return (\n    <Box sx={{ alignItems: 'center', display: 'flex', gap: 1 }}>\n      {sequenceCount > 0 && (\n        <FastaPageHeaderCenterChip\n          label={`${sequenceCount} Sequences`}\n          size={'small'}\n        />\n      )}\n      {metaDataCount > 0 && (\n        <FastaPageHeaderCenterChip\n          label={`${metaDataCount} Metadata Records`}\n          size={'small'}\n        />\n      )}\n    </Box>\n  );\n};\n"],"mappings":";;;AAoBA,IAAMA,IAA4BC,EAAOC,GAAM;CAC7C,MAAM;CACN,MAAM;AACR,CAAC,CAAC,CAAC;CACD,iBAAiB;CACjB,OAAO;CACP,UAAU;CACV,YAAY;AACd,CAAC,GAEYC,KAAkC,EAAE,kBAAe,uBAG5D,kBAACC,GAAD;CAAK,IAAI;EAAE,YAAY;EAAU,SAAS;EAAQ,KAAK;CAAE;CAAzD,UAAA,CACGC,IAAgB,KACf,kBAACL,GAAD;EACE,OAAO,GAAGK,EAAc;EACxB,MAAM;CACP,CAAA,GAEFC,IAAgB,KACf,kBAACN,GAAD;EACE,OAAO,GAAGM,EAAc;EACxB,MAAM;CACP,CAAA,CAEA"}

package/dist/components/fasta/FastaPageHeaderResetButton/index.js

@@ -1,34 +1,37 @@
-import { IconButton as e, Tooltip as t } from "@mui/material";
-import { t as n } from "i18next";
-import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
-import { useCallback as o, useRef as s } from "react";
-import c from "@mui/icons-material/RestartAlt";
-import { Confirmation as l } from "@gen-epix/ui-core-components/components/Confirmation";
+import { UrlUtil as e } from "../../../utils/UrlUtil/index.js";
+import { t } from "../../../_chunks/LoculusService.js";
+import { container as n } from "tsyringe";
+import { IconButton as r, Tooltip as i } from "@mui/material";
+import { t as a } from "i18next";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useCallback as l, useRef as u } from "react";
+import d from "@mui/icons-material/RestartAlt";
+import { Confirmation as f } from "@gen-epix/ui-core-components/components/Confirmation";
 // src/components/fasta/FastaPageHeaderResetButton/FastaPageHeaderResetButton.tsx
-var u = ({ onReset: u }) => {
-	let d = s(null), f = o(() => {
-		d.current?.open();
-	}, []), p = o(() => {
-		u();
-	}, [u]);
-	return /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i(t, {
+var p = ({ onReset: p }) => {
+	let m = u(null), h = l(() => {
+		m.current?.open();
+	}, []), g = l(() => {
+		e.clearSearchParams(), n.resolve(t).clear(), p();
+	}, [p]);
+	return /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s(i, {
 		title: "Reset current session and dataset",
-		children: /* @__PURE__ */ i(e, {
+		children: /* @__PURE__ */ s(r, {
 			color: "inherit",
-			onClick: f,
+			onClick: h,
 			size: "small",
 			sx: { opacity: .85 },
-			children: /* @__PURE__ */ i(c, { fontSize: "small" })
+			children: /* @__PURE__ */ s(d, { fontSize: "small" })
 		})
-	}), /* @__PURE__ */ i(l, {
-		body: n`Are you sure you want to reset the current session and dataset?`,
-		cancelLabel: n`Cancel`,
-		confirmLabel: n`Reset`,
-		onConfirm: p,
-		ref: d,
-		title: n`Reset current session and dataset?`
+	}), /* @__PURE__ */ s(f, {
+		body: a`Are you sure you want to reset the current session and dataset?`,
+		cancelLabel: a`Cancel`,
+		confirmLabel: a`Reset`,
+		onConfirm: g,
+		ref: m,
+		title: a`Reset current session and dataset?`
 	})] });
 };
-export { u as FastaPageHeaderResetButton };
+export { p as FastaPageHeaderResetButton };
 
 //# sourceMappingURL=index.js.map

package/dist/components/fasta/FastaPageHeaderResetButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_Fragment","RestartAltIcon","FastaPageHeaderResetButton","confirmationRef","useRef","onClickResetSession","useCallback","onConfirm","onReset","Fragment","Tooltip","IconButton","Confirmation"],"sources":["../../../../src/components/fasta/FastaPageHeaderResetButton/FastaPageHeaderResetButton.tsx"],"sourcesContent":["import RestartAltIcon from '@mui/icons-material/RestartAlt';\nimport {\n  IconButton,\n  Tooltip,\n} from '@mui/material';\nimport {\n  useCallback,\n  useRef,\n} from 'react';\nimport { Confirmation } from '@gen-epix/ui-core-components/components/Confirmation';\nimport type { ConfirmationRefMethods } from '@gen-epix/ui-core-components/components/Confirmation';\nimport { t } from 'i18next';\n\nexport type FastaPageHeaderResetButtonProps = {\n  onReset: () => void;\n};\n\nexport const FastaPageHeaderResetButton = ({ onReset }: FastaPageHeaderResetButtonProps) => {\n  const confirmationRef = useRef<ConfirmationRefMethods>(null);\n  const onClickResetSession = useCallback(() => {\n    confirmationRef.current?.open();\n  }, []);\n\n  const onConfirm = useCallback(() => {\n    onReset();\n  }, [onReset]);\n\n  return (\n    <>\n      <Tooltip title={'Reset current session and dataset'}>\n        <IconButton\n          color={'inherit'}\n          onClick={onClickResetSession}\n          size={'small'}\n          sx={{ opacity: 0.85 }}\n        >\n          <RestartAltIcon fontSize={'small'} />\n        </IconButton>\n      </Tooltip>\n      <Confirmation\n        body={t`Are you sure you want to reset the current session and dataset?`}\n        cancelLabel={t`Cancel`}\n        confirmLabel={t`Reset`}\n        onConfirm={onConfirm}\n        ref={confirmationRef}\n        title={t`Reset current session and dataset?`}\n      />\n    </>\n  );\n};\n"],"mappings":";;;;;;;AAiBA,IAAaE,KAA8B,EAAE,iBAA+C;CAC1F,IAAMC,IAAkBC,EAA+B,IAAI,GACrDC,IAAsBC,QAAkB;EAC5C,EAAgB,SAAS,KAAK;CAChC,GAAG,CAAC,CAAC,GAECC,IAAYD,QAAkB;EAClC,EAAQ;CACV,GAAG,CAACE,CAAO,CAAC;CAEZ,OACE,kBAAAR,GAAA,EAAA,UAAA,CACE,kBAACU,GAAD;EAAS,OAAO;EACd,UAAA,kBAACC,GAAD;GACE,OAAO;GACP,SAASN;GACT,MAAM;GACN,IAAI,EAAE,SAAS,IAAK;GAEpB,UAAA,kBAACJ,GAAD,EAAgB,UAAU,QAAU,CAAA;EAC1B,CAAA;CACL,CAAA,GACT,kBAACW,GAAD;EACE,MAAM,CAAC;EACP,aAAa,CAAC;EACd,cAAc,CAAC;EACJ;EACX,KAAKT;EACL,OAAO,CAAC;CACT,CAAA,CACD,EAAA,CAAA;AAEN"}
+{"version":3,"file":"index.js","names":["_Fragment","RestartAltIcon","FastaPageHeaderResetButton","confirmationRef","useRef","onClickResetSession","useCallback","onConfirm","UrlUtil","container","LoculusService","onReset","Fragment","Tooltip","IconButton","Confirmation"],"sources":["../../../../src/components/fasta/FastaPageHeaderResetButton/FastaPageHeaderResetButton.tsx"],"sourcesContent":["import RestartAltIcon from '@mui/icons-material/RestartAlt';\nimport {\n  IconButton,\n  Tooltip,\n} from '@mui/material';\nimport {\n  useCallback,\n  useRef,\n} from 'react';\nimport { Confirmation } from '@gen-epix/ui-core-components/components/Confirmation';\nimport type { ConfirmationRefMethods } from '@gen-epix/ui-core-components/components/Confirmation';\nimport { t } from 'i18next';\nimport { container } from 'tsyringe';\n\nimport { UrlUtil } from '../../../utils/UrlUtil';\nimport { LoculusService } from '../../../classes/services/LoculusService';\n\nexport type FastaPageHeaderResetButtonProps = {\n  onReset: () => void;\n};\n\nexport const FastaPageHeaderResetButton = ({ onReset }: FastaPageHeaderResetButtonProps) => {\n  const confirmationRef = useRef<ConfirmationRefMethods>(null);\n  const onClickResetSession = useCallback(() => {\n    confirmationRef.current?.open();\n  }, []);\n\n  const onConfirm = useCallback(() => {\n    UrlUtil.clearSearchParams();\n    container.resolve(LoculusService).clear();\n    onReset();\n  }, [onReset]);\n\n  return (\n    <>\n      <Tooltip title={'Reset current session and dataset'}>\n        <IconButton\n          color={'inherit'}\n          onClick={onClickResetSession}\n          size={'small'}\n          sx={{ opacity: 0.85 }}\n        >\n          <RestartAltIcon fontSize={'small'} />\n        </IconButton>\n      </Tooltip>\n      <Confirmation\n        body={t`Are you sure you want to reset the current session and dataset?`}\n        cancelLabel={t`Cancel`}\n        confirmLabel={t`Reset`}\n        onConfirm={onConfirm}\n        ref={confirmationRef}\n        title={t`Reset current session and dataset?`}\n      />\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;;AAqBA,IAAaE,KAA8B,EAAE,iBAA+C;CAC1F,IAAMC,IAAkBC,EAA+B,IAAI,GACrDC,IAAsBC,QAAkB;EAC5C,EAAgB,SAAS,KAAK;CAChC,GAAG,CAAC,CAAC,GAECC,IAAYD,QAAkB;EAGlC,AAFAE,EAAQ,kBAAkB,GAC1BC,EAAU,QAAQC,CAAc,CAAC,CAAC,MAAM,GACxCC,EAAQ;CACV,GAAG,CAACA,CAAO,CAAC;CAEZ,OACE,kBAAAX,GAAA,EAAA,UAAA,CACE,kBAACa,GAAD;EAAS,OAAO;EACd,UAAA,kBAACC,GAAD;GACE,OAAO;GACP,SAAST;GACT,MAAM;GACN,IAAI,EAAE,SAAS,IAAK;GAEpB,UAAA,kBAACJ,GAAD,EAAgB,UAAU,QAAU,CAAA;EAC1B,CAAA;CACL,CAAA,GACT,kBAACc,GAAD;EACE,MAAM,CAAC;EACP,aAAa,CAAC;EACd,cAAc,CAAC;EACJ;EACX,KAAKZ;EACL,OAAO,CAAC;CACT,CAAA,CACD,EAAA,CAAA;AAEN"}

package/dist/components/loculus/UploadToLoculusModal/UploadToLoculusModal.d.ts

@@ -0,0 +1,11 @@
+import { WithDialogRefMethods, WithDialogRenderProps } from '@gen-epix/ui-core-components/hoc/withDialog';
+import { MetadataParseResult } from '../../../models/metadata.models';
+export interface UploadToLoculusModalOpenProps {
+    fasta: string;
+    metaData: MetadataParseResult | null;
+    rawFasta: string;
+}
+export interface UploadToLoculusModalProps extends WithDialogRenderProps<UploadToLoculusModalOpenProps> {
+}
+export type UploadToLoculusModalRefMethods = WithDialogRefMethods<UploadToLoculusModalProps, UploadToLoculusModalOpenProps>;
+export declare const UploadToLoculusModal: import('react').ComponentClass<UploadToLoculusModalProps, import('@gen-epix/ui-core-components/hoc/withDialog').WithDialogState<UploadToLoculusModalOpenProps>>;

package/dist/components/loculus/UploadToLoculusModal/index.d.ts

@@ -0,0 +1 @@
+export * from './UploadToLoculusModal';

package/dist/components/loculus/UploadToLoculusModal/index.js

@@ -0,0 +1,159 @@
+import { FastaUtil as e } from "../../../utils/FastaUtil/index.js";
+import { t } from "../../../_chunks/LoculusService.js";
+import { UrlService as n } from "../../../classes/services/UrlService/index.js";
+import { container as r } from "tsyringe";
+import { Alert as i, Box as a, Paper as o, Table as s, TableBody as c, TableCell as l, TableContainer as u, TableHead as d, TableRow as f } from "@mui/material";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+import { useCallback as g, useEffect as _, useMemo as v, useRef as y, useState as b } from "react";
+import { Spinner as x } from "@gen-epix/ui-core-components/components/Spinner";
+import { withDialog as S } from "@gen-epix/ui-core-components/hoc/withDialog";
+// src/components/loculus/UploadToLoculusModal/UploadToLoculusModal.tsx
+var C = S(({ onActionsChange: S, onClose: C, openProps: w }) => {
+	let T = v(() => r.resolve(t), []), E = v(() => r.resolve(n), []), [D, O] = b(!1), [k, A] = b(!1), [j, M] = b(null), N = y(null), P = w?.fasta ?? "", F = w?.metaData ?? null, I = w?.rawFasta ?? "";
+	_(() => () => {
+		N.current?.abort();
+	}, []);
+	let L = v(() => {
+		let n = [];
+		T.data.authenticated || n.push("You must be authenticated to upload to Loculus."), E.hasReturnParams() || n.push("The Loculus return URL and organism must be provided."), F || n.push("Metadata must be loaded before uploading.");
+		let r = e.parseFasta(P);
+		if (r.error ? n.push(r.error) : r.sequences.length === 0 && n.push("At least one FASTA sequence is required."), F?.error && n.push(F.error), n.length > 0 || !F) return {
+			errors: n,
+			revisedSequences: null
+		};
+		try {
+			let e = t.createRevisedSequences(P, F, I);
+			return e.sequenceCount === 0 && n.push("No FASTA sequences match the metadata."), {
+				errors: n,
+				revisedSequences: e
+			};
+		} catch (e) {
+			return n.push(e instanceof Error ? e.message : "Failed to prepare the upload preview."), {
+				errors: n,
+				revisedSequences: null
+			};
+		}
+	}, [
+		P,
+		T,
+		F,
+		I,
+		E
+	]), R = L.revisedSequences?.metadata.split("\n").slice(1).filter((e) => e.length > 0).reduce((e, t) => {
+		let n = e.filter((e) => e.key.startsWith(`${t}-`)).length;
+		return e.push({
+			key: `${t}-${n}`,
+			values: t.split("	")
+		}), e;
+	}, []), z = g(async () => {
+		if (L.errors.length > 0 || !L.revisedSequences || !F || !E.hasReturnParams()) return;
+		M(null), O(!0);
+		let e = new AbortController();
+		N.current = e;
+		try {
+			let { organism: t, returnUrl: n } = E.data;
+			await T.reviseSequences(P, F, n, t, e), A(!0);
+		} catch (t) {
+			e.signal.aborted || M(t instanceof Error ? t.message : "Failed to upload sequences to Loculus.");
+		} finally {
+			e.signal.aborted || (N.current = null, O(!1));
+		}
+	}, [
+		P,
+		T,
+		F,
+		E,
+		L.errors.length,
+		L.revisedSequences
+	]), B = g(() => {
+		N.current?.abort(), N.current = null, O(!1), C?.();
+	}, [C]);
+	return _(() => {
+		let e = k ? [{
+			label: "Close tab",
+			onClick: () => window.close(),
+			variant: "contained"
+		}] : [...D ? [{
+			label: "Cancel",
+			onClick: B,
+			variant: "outlined"
+		}] : [], {
+			disabled: D || L.errors.length > 0 || L.revisedSequences === null,
+			label: j ? "Try again" : "Upload",
+			onClick: z,
+			variant: "contained"
+		}];
+		S?.(e);
+	}, [
+		k,
+		D,
+		S,
+		B,
+		z,
+		j,
+		L.errors.length,
+		L.revisedSequences
+	]), /* @__PURE__ */ m(a, {
+		sx: {
+			display: "grid",
+			gap: 2,
+			position: "relative"
+		},
+		children: D ? /* @__PURE__ */ m(x, {
+			inline: !0,
+			label: "Uploading sequences to Loculus"
+		}) : /* @__PURE__ */ h(p, { children: [
+			L.errors.length > 0 && /* @__PURE__ */ m(i, {
+				severity: "error",
+				children: L.errors.join(" ")
+			}),
+			j && /* @__PURE__ */ m(i, {
+				severity: "error",
+				children: j
+			}),
+			k && /* @__PURE__ */ m(i, {
+				severity: "success",
+				children: "Sequences successfully uploaded to Loculus. You can close this tab."
+			}),
+			!k && L.revisedSequences && /* @__PURE__ */ h(p, { children: [
+				/* @__PURE__ */ m(i, {
+					severity: "info",
+					children: `${L.revisedSequences.sequenceCount} sequence(s) and the matching metadata will be uploaded to Loculus.`
+				}),
+				L.revisedSequences.removedSequences.length > 0 && /* @__PURE__ */ m(i, {
+					severity: "warning",
+					children: `Sequences removed during editing and therefore not uploaded: ${L.revisedSequences.removedSequences.length}`
+				}),
+				L.revisedSequences.addedSequencesWithoutMetadata.length > 0 && /* @__PURE__ */ m(i, {
+					severity: "warning",
+					children: `Added sequences without matching metadata will not be uploaded: ${L.revisedSequences.addedSequencesWithoutMetadata.length}`
+				}),
+				/* @__PURE__ */ m(u, {
+					component: o,
+					sx: {
+						maxHeight: "400px",
+						overflowX: "auto"
+					},
+					children: /* @__PURE__ */ h(s, {
+						size: "small",
+						stickyHeader: !0,
+						sx: {
+							minWidth: "100%",
+							whiteSpace: "nowrap",
+							width: "max-content"
+						},
+						children: [/* @__PURE__ */ m(d, { children: /* @__PURE__ */ m(f, { children: F?.columns.map((e) => /* @__PURE__ */ m(l, { children: e }, e)) }) }), /* @__PURE__ */ m(c, { children: R?.map(({ key: e, values: t }) => /* @__PURE__ */ m(f, { children: t.map((t, n) => /* @__PURE__ */ m(l, { children: t }, `${e}-${F?.columns[n] ?? n}`)) }, e)) })]
+					})
+				})
+			] })
+		] })
+	});
+}, {
+	defaultTitle: "Upload to Loculus",
+	fullWidth: !0,
+	maxWidth: "md",
+	testId: "UploadToLoculusModal"
+});
+export { C as UploadToLoculusModal };
+
+//# sourceMappingURL=index.js.map

package/dist/components/loculus/UploadToLoculusModal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_Fragment","UploadToLoculusModal","withDialog","loculusService","useMemo","container","LoculusService","urlService","UrlService","isUploading","setIsUploading","useState","didUpload","setDidUpload","uploadError","setUploadError","abortControllerRef","useRef","fasta","openProps","metaData","rawFasta","validation","errors","parsedFasta","FastaUtil","revisedSequences","error","previewMetadataRows","row","occurrence","rows","existingRow","onClickUpload","useCallback","abortController","returnUrl","organism","onCancelUpload","onClose","useEffect","actions","onActionsChange","Box","Spinner","Fragment","Alert","TableContainer","Paper","Table","TableHead","TableRow","TableCell","column","TableBody","values","value","key","columnIndex"],"sources":["../../../../src/components/loculus/UploadToLoculusModal/UploadToLoculusModal.tsx"],"sourcesContent":["import {\n  Alert,\n  Box,\n  Paper,\n  Table,\n  TableBody,\n  TableCell,\n  TableContainer,\n  TableHead,\n  TableRow,\n} from '@mui/material';\nimport type { DialogAction } from '@gen-epix/ui-core-components/components/Dialog';\nimport { Spinner } from '@gen-epix/ui-core-components/components/Spinner';\nimport type {\n  WithDialogRefMethods,\n  WithDialogRenderProps,\n} from '@gen-epix/ui-core-components/hoc/withDialog';\nimport { withDialog } from '@gen-epix/ui-core-components/hoc/withDialog';\nimport type { ReactElement } from 'react';\nimport {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { container } from 'tsyringe';\n\nimport { LoculusService } from '../../../classes/services/LoculusService';\nimport { UrlService } from '../../../classes/services/UrlService';\nimport type { MetadataParseResult } from '../../../models/metadata.models';\nimport { FastaUtil } from '../../../utils/FastaUtil';\n\nexport interface UploadToLoculusModalOpenProps {\n  fasta: string;\n  metaData: MetadataParseResult | null;\n  rawFasta: string;\n}\n\nexport interface UploadToLoculusModalProps extends WithDialogRenderProps<UploadToLoculusModalOpenProps> {\n  //\n}\n\nexport type UploadToLoculusModalRefMethods = WithDialogRefMethods<UploadToLoculusModalProps, UploadToLoculusModalOpenProps>;\n\nexport const UploadToLoculusModal = withDialog<UploadToLoculusModalProps, UploadToLoculusModalOpenProps>(({\n  onActionsChange,\n  onClose,\n  openProps,\n}: UploadToLoculusModalProps): ReactElement => {\n  const loculusService = useMemo(() => container.resolve(LoculusService), []);\n  const urlService = useMemo(() => container.resolve(UrlService), []);\n  const [isUploading, setIsUploading] = useState(false);\n  const [didUpload, setDidUpload] = useState(false);\n  const [uploadError, setUploadError] = useState<null | string>(null);\n  const abortControllerRef = useRef<AbortController | null>(null);\n\n  const fasta = openProps?.fasta ?? '';\n  const metaData = openProps?.metaData ?? null;\n  const rawFasta = openProps?.rawFasta ?? '';\n\n  useEffect(() => () => {\n    abortControllerRef.current?.abort();\n  }, []);\n\n  const validation = useMemo(() => {\n    const errors: string[] = [];\n    if (!loculusService.data.authenticated) {\n      errors.push('You must be authenticated to upload to Loculus.');\n    }\n    if (!urlService.hasReturnParams()) {\n      errors.push('The Loculus return URL and organism must be provided.');\n    }\n    if (!metaData) {\n      errors.push('Metadata must be loaded before uploading.');\n    }\n\n    const parsedFasta = FastaUtil.parseFasta(fasta);\n    if (parsedFasta.error) {\n      errors.push(parsedFasta.error);\n    } else if (parsedFasta.sequences.length === 0) {\n      errors.push('At least one FASTA sequence is required.');\n    }\n\n    if (metaData?.error) {\n      errors.push(metaData.error);\n    }\n\n    if (errors.length > 0 || !metaData) {\n      return { errors, revisedSequences: null };\n    }\n\n    try {\n      const revisedSequences = LoculusService.createRevisedSequences(fasta, metaData, rawFasta);\n      if (revisedSequences.sequenceCount === 0) {\n        errors.push('No FASTA sequences match the metadata.');\n      }\n      return {\n        errors,\n        revisedSequences,\n      };\n    } catch (error: unknown) {\n      errors.push(error instanceof Error ? error.message : 'Failed to prepare the upload preview.');\n      return { errors, revisedSequences: null };\n    }\n  }, [fasta, loculusService, metaData, rawFasta, urlService]);\n  const previewMetadataRows = validation.revisedSequences?.metadata\n    .split('\\n')\n    .slice(1)\n    .filter((row) => row.length > 0)\n    .reduce<{ key: string; values: string[] }[]>((rows, row) => {\n      const occurrence = rows.filter((existingRow) => existingRow.key.startsWith(`${row}-`)).length;\n      rows.push({ key: `${row}-${occurrence}`, values: row.split('\\t') });\n      return rows;\n    }, []);\n\n  const onClickUpload = useCallback(async () => {\n    if (validation.errors.length > 0 || !validation.revisedSequences || !metaData || !urlService.hasReturnParams()) {\n      return;\n    }\n\n    setUploadError(null);\n    setIsUploading(true);\n    const abortController = new AbortController();\n    abortControllerRef.current = abortController;\n    try {\n      const { organism, returnUrl } = urlService.data;\n      await loculusService.reviseSequences(fasta, metaData, returnUrl, organism, abortController);\n      setDidUpload(true);\n    } catch (error: unknown) {\n      if (!abortController.signal.aborted) {\n        setUploadError(error instanceof Error ? error.message : 'Failed to upload sequences to Loculus.');\n      }\n    } finally {\n      if (!abortController.signal.aborted) {\n        abortControllerRef.current = null;\n        setIsUploading(false);\n      }\n    }\n  }, [fasta, loculusService, metaData, urlService, validation.errors.length, validation.revisedSequences]);\n\n  const onCancelUpload = useCallback(() => {\n    abortControllerRef.current?.abort();\n    abortControllerRef.current = null;\n    setIsUploading(false);\n    onClose?.();\n  }, [onClose]);\n\n  useEffect(() => {\n    const actions: DialogAction[] = didUpload\n      ? [{\n        label: 'Close tab',\n        onClick: () => window.close(),\n        variant: 'contained',\n      }]\n      : [\n        ...(isUploading ? [{\n          label: 'Cancel',\n          onClick: onCancelUpload,\n          variant: 'outlined' as const,\n        }] : []),\n        {\n          disabled: isUploading || validation.errors.length > 0 || validation.revisedSequences === null,\n          label: uploadError ? 'Try again' : 'Upload',\n          onClick: onClickUpload,\n          variant: 'contained',\n        },\n      ];\n    onActionsChange?.(actions);\n  }, [didUpload, isUploading, onActionsChange, onCancelUpload, onClickUpload, uploadError, validation.errors.length, validation.revisedSequences]);\n\n  return (\n    <Box sx={{ display: 'grid', gap: 2, position: 'relative' }}>\n      {isUploading ? (\n        <Spinner\n          inline\n          label={'Uploading sequences to Loculus'}\n        />\n      ) : (\n        <>\n          {validation.errors.length > 0 && (\n            <Alert severity={'error'}>\n              {validation.errors.join(' ')}\n            </Alert>\n          )}\n          {uploadError && (\n            <Alert severity={'error'}>\n              {uploadError}\n            </Alert>\n          )}\n          {didUpload && (\n            <Alert severity={'success'}>\n              {'Sequences successfully uploaded to Loculus. You can close this tab.'}\n            </Alert>\n          )}\n          {!didUpload && validation.revisedSequences && (\n            <>\n              <Alert severity={'info'}>\n                {`${validation.revisedSequences.sequenceCount} sequence(s) and the matching metadata will be uploaded to Loculus.`}\n              </Alert>\n              {validation.revisedSequences.removedSequences.length > 0 && (\n                <Alert severity={'warning'}>\n                  {`Sequences removed during editing and therefore not uploaded: ${validation.revisedSequences.removedSequences.length}`}\n                </Alert>\n              )}\n              {validation.revisedSequences.addedSequencesWithoutMetadata.length > 0 && (\n                <Alert severity={'warning'}>\n                  {`Added sequences without matching metadata will not be uploaded: ${validation.revisedSequences.addedSequencesWithoutMetadata.length}`}\n                </Alert>\n              )}\n              <TableContainer\n                component={Paper}\n                sx={{ maxHeight: '400px', overflowX: 'auto' }}\n              >\n                <Table\n                  size={'small'}\n                  stickyHeader\n                  sx={{ minWidth: '100%', whiteSpace: 'nowrap', width: 'max-content' }}\n                >\n                  <TableHead>\n                    <TableRow>\n                      {metaData?.columns.map((column) => (\n                        <TableCell key={column}>\n                          {column}\n                        </TableCell>\n                      ))}\n                    </TableRow>\n                  </TableHead>\n                  <TableBody>\n                    {previewMetadataRows?.map(({ key, values }) => (\n                      <TableRow key={key}>\n                        {values.map((value, columnIndex) => (\n                          <TableCell key={`${key}-${metaData?.columns[columnIndex] ?? columnIndex}`}>\n                            {value}\n                          </TableCell>\n                        ))}\n                      </TableRow>\n                    ))}\n                  </TableBody>\n                </Table>\n              </TableContainer>\n            </>\n          )}\n        </>\n      )}\n    </Box>\n  );\n}, {\n  defaultTitle: 'Upload to Loculus',\n  fullWidth: true,\n  maxWidth: 'md',\n  testId: 'UploadToLoculusModal',\n});\n"],"mappings":"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"}

package/dist/components/ui/ButtonWithMenu/ButtonWithMenu.d.ts

@@ -5,6 +5,7 @@ export type ButtonWithMenuProps = {
     buttonColor?: ButtonOwnProps['color'];
     disabled?: boolean;
     items: Array<{
+        disabled?: boolean;
         icon: ReactElement;
         label: string;
         onClick: () => void;

package/dist/components/ui/ButtonWithMenu/index.js

@@ -38,12 +38,13 @@ var f = a(e, {
 			horizontal: "right",
 			vertical: "top"
 		},
-		children: m.map(({ icon: e, label: r, onClick: a }) => /* @__PURE__ */ l(i, {
+		children: m.map(({ disabled: e, icon: r, label: a, onClick: o }) => /* @__PURE__ */ l(i, {
+			disabled: e,
 			onClick: () => {
-				x(), a();
+				x(), o();
 			},
-			children: [/* @__PURE__ */ c(t, { children: e }), /* @__PURE__ */ c(n, { primary: r })]
-		}, r))
+			children: [/* @__PURE__ */ c(t, { children: r }), /* @__PURE__ */ c(n, { primary: a })]
+		}, a))
 	})] });
 };
 export { p as ButtonWithMenu };

package/dist/components/ui/ButtonWithMenu/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_Fragment","ButtonWithMenuButton","styled","Button","ButtonWithMenu","useThemeProps","inProps","anchorElement","setAnchorElement","useState","isMenuOpen","onClickMenu","useCallback","event","onCloseMenu","Fragment","buttonColor","label","Menu","items","itemLabel","MenuItem","onClick","ListItemIcon","icon","ListItemText"],"sources":["../../../../src/components/ui/ButtonWithMenu/ButtonWithMenu.tsx"],"sourcesContent":["import {\n  Button,\n  ListItemIcon,\n  ListItemText,\n  Menu,\n  MenuItem,\n  styled,\n  useThemeProps,\n} from '@mui/material';\nimport type { ButtonOwnProps } from '@mui/material';\nimport type {\n  ComponentsOverrides,\n  Theme,\n} from '@mui/material/styles';\nimport {\n  useCallback,\n  useState,\n} from 'react';\nimport type {\n  MouseEvent,\n  ReactElement,\n} from 'react';\n\nexport type ButtonWithMenuProps = {\n  buttonColor?: ButtonOwnProps['color'];\n  disabled?: boolean;\n  items: Array<{\n    icon: ReactElement;\n    label: string;\n    onClick: () => void;\n  }>;\n  label: string;\n  startIcon?: ReactElement;\n};\n\nexport type ButtonWithMenuTheme = {\n  styleOverrides?: ComponentsOverrides<Theme>['MuiButton'];\n};\n\nconst ButtonWithMenuButton = styled(Button, {\n  name: 'RivmLoculusToolsCommonFrontendButtonWithMenu',\n  slot: 'Root',\n})({\n  '&:hover': {\n    backgroundColor: 'rgba(255, 255, 255, 0.25)',\n  },\n  backgroundColor: 'rgba(255, 255, 255, 0.15)',\n  color: '#FFFFFF',\n});\n\nexport const ButtonWithMenu = (inProps: ButtonWithMenuProps) => {\n  const {\n    buttonColor = 'inherit',\n    disabled,\n    items,\n    label,\n    startIcon,\n  } = useThemeProps({ name: 'RivmLoculusToolsCommonFrontendButtonWithMenu', props: inProps });\n  const [anchorElement, setAnchorElement] = useState<HTMLElement | null>(null);\n  const isMenuOpen = Boolean(anchorElement);\n\n  const onClickMenu = useCallback((event: MouseEvent<HTMLButtonElement>) => {\n    setAnchorElement(event.currentTarget);\n  }, []);\n\n  const onCloseMenu = useCallback(() => {\n    setAnchorElement(null);\n  }, []);\n\n  return (\n    <>\n      <ButtonWithMenuButton\n        color={buttonColor}\n        disabled={disabled}\n        onClick={onClickMenu}\n        size={'small'}\n        startIcon={startIcon}\n        variant={'contained'}\n      >\n        {label}\n      </ButtonWithMenuButton>\n      <Menu\n        anchorEl={anchorElement}\n        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}\n        onClose={onCloseMenu}\n        open={isMenuOpen}\n        transformOrigin={{ horizontal: 'right', vertical: 'top' }}\n      >\n        {items.map(({ icon, label: itemLabel, onClick }) => (\n          <MenuItem\n            key={itemLabel}\n            // eslint-disable-next-line @eslint-react/kit/jsx-no-bind\n            onClick={() => {\n              onCloseMenu();\n              onClick();\n            }}\n          >\n            <ListItemIcon>\n              {icon}\n            </ListItemIcon>\n            <ListItemText primary={itemLabel} />\n          </MenuItem>\n        ))}\n      </Menu>\n    </>\n  );\n};\n"],"mappings":";;;;AAuCA,IAAMC,IAAuBC,EAAOC,GAAQ;CAC1C,MAAM;CACN,MAAM;AACR,CAAC,CAAC,CAAC;CACD,WAAW,EACT,iBAAiB,4BACnB;CACA,iBAAiB;CACjB,OAAO;AACT,CAAC,GAEYC,KAAkB,MAAiC;CAC9D,IAAM,EACJ,iBAAc,WACd,aACA,UACA,UACA,iBACEC,EAAc;EAAE,MAAM;EAAgD,OAAOC;CAAQ,CAAC,GACpF,CAACC,GAAeC,KAAoBC,EAA6B,IAAI,GACrEC,IAAa,EAAQH,GAErBI,IAAcC,GAAa,MAAyC;EACxE,EAAiBC,EAAM,aAAa;CACtC,GAAG,CAAC,CAAC,GAECC,IAAcF,QAAkB;EACpC,EAAiB,IAAI;CACvB,GAAG,CAAC,CAAC;CAEL,OACE,kBAAAZ,GAAA,EAAA,UAAA,CACE,kBAACC,GAAD;EACE,OAAOe;EACG;EACV,SAASL;EACT,MAAM;EACK;EACX,SAAS;EAER,UAAAM;CACmB,CAAA,GACtB,kBAACC,GAAD;EACE,UAAUX;EACV,cAAc;GAAE,YAAY;GAAS,UAAU;EAAS;EACxD,SAASO;EACT,MAAMJ;EACN,iBAAiB;GAAE,YAAY;GAAS,UAAU;EAAM;EAEvD,UAAAS,EAAM,KAAK,EAAE,SAAM,OAAOC,GAAW,iBACpC,kBAACC,GAAD;GAGE,eAAe;IAEb,AADAP,EAAY,GACZQ,EAAQ;GACV;GANF,UAAA,CAQE,kBAACC,GAAD,EAAA,UACGC,EACW,CAAA,GACd,kBAACC,GAAD,EAAc,SAASL,EAAY,CAAA,CAC3B;EAXH,GAAAA,CAWG,CACX;CACG,CAAA,CACN,EAAA,CAAA;AAEN"}
+{"version":3,"file":"index.js","names":["_Fragment","ButtonWithMenuButton","styled","Button","ButtonWithMenu","useThemeProps","inProps","anchorElement","setAnchorElement","useState","isMenuOpen","onClickMenu","useCallback","event","onCloseMenu","Fragment","buttonColor","label","Menu","items","itemDisabled","itemLabel","MenuItem","onClick","ListItemIcon","icon","ListItemText"],"sources":["../../../../src/components/ui/ButtonWithMenu/ButtonWithMenu.tsx"],"sourcesContent":["import {\n  Button,\n  ListItemIcon,\n  ListItemText,\n  Menu,\n  MenuItem,\n  styled,\n  useThemeProps,\n} from '@mui/material';\nimport type { ButtonOwnProps } from '@mui/material';\nimport type {\n  ComponentsOverrides,\n  Theme,\n} from '@mui/material/styles';\nimport {\n  useCallback,\n  useState,\n} from 'react';\nimport type {\n  MouseEvent,\n  ReactElement,\n} from 'react';\n\nexport type ButtonWithMenuProps = {\n  buttonColor?: ButtonOwnProps['color'];\n  disabled?: boolean;\n  items: Array<{\n    disabled?: boolean;\n    icon: ReactElement;\n    label: string;\n    onClick: () => void;\n  }>;\n  label: string;\n  startIcon?: ReactElement;\n};\n\nexport type ButtonWithMenuTheme = {\n  styleOverrides?: ComponentsOverrides<Theme>['MuiButton'];\n};\n\nconst ButtonWithMenuButton = styled(Button, {\n  name: 'RivmLoculusToolsCommonFrontendButtonWithMenu',\n  slot: 'Root',\n})({\n  '&:hover': {\n    backgroundColor: 'rgba(255, 255, 255, 0.25)',\n  },\n  backgroundColor: 'rgba(255, 255, 255, 0.15)',\n  color: '#FFFFFF',\n});\n\nexport const ButtonWithMenu = (inProps: ButtonWithMenuProps) => {\n  const {\n    buttonColor = 'inherit',\n    disabled,\n    items,\n    label,\n    startIcon,\n  } = useThemeProps({ name: 'RivmLoculusToolsCommonFrontendButtonWithMenu', props: inProps });\n  const [anchorElement, setAnchorElement] = useState<HTMLElement | null>(null);\n  const isMenuOpen = Boolean(anchorElement);\n\n  const onClickMenu = useCallback((event: MouseEvent<HTMLButtonElement>) => {\n    setAnchorElement(event.currentTarget);\n  }, []);\n\n  const onCloseMenu = useCallback(() => {\n    setAnchorElement(null);\n  }, []);\n\n  return (\n    <>\n      <ButtonWithMenuButton\n        color={buttonColor}\n        disabled={disabled}\n        onClick={onClickMenu}\n        size={'small'}\n        startIcon={startIcon}\n        variant={'contained'}\n      >\n        {label}\n      </ButtonWithMenuButton>\n      <Menu\n        anchorEl={anchorElement}\n        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}\n        onClose={onCloseMenu}\n        open={isMenuOpen}\n        transformOrigin={{ horizontal: 'right', vertical: 'top' }}\n      >\n        {items.map(({ disabled: itemDisabled, icon, label: itemLabel, onClick }) => (\n          <MenuItem\n            disabled={itemDisabled}\n            key={itemLabel}\n            // eslint-disable-next-line @eslint-react/kit/jsx-no-bind\n            onClick={() => {\n              onCloseMenu();\n              onClick();\n            }}\n          >\n            <ListItemIcon>\n              {icon}\n            </ListItemIcon>\n            <ListItemText primary={itemLabel} />\n          </MenuItem>\n        ))}\n      </Menu>\n    </>\n  );\n};\n"],"mappings":";;;;AAwCA,IAAMC,IAAuBC,EAAOC,GAAQ;CAC1C,MAAM;CACN,MAAM;AACR,CAAC,CAAC,CAAC;CACD,WAAW,EACT,iBAAiB,4BACnB;CACA,iBAAiB;CACjB,OAAO;AACT,CAAC,GAEYC,KAAkB,MAAiC;CAC9D,IAAM,EACJ,iBAAc,WACd,aACA,UACA,UACA,iBACEC,EAAc;EAAE,MAAM;EAAgD,OAAOC;CAAQ,CAAC,GACpF,CAACC,GAAeC,KAAoBC,EAA6B,IAAI,GACrEC,IAAa,EAAQH,GAErBI,IAAcC,GAAa,MAAyC;EACxE,EAAiBC,EAAM,aAAa;CACtC,GAAG,CAAC,CAAC,GAECC,IAAcF,QAAkB;EACpC,EAAiB,IAAI;CACvB,GAAG,CAAC,CAAC;CAEL,OACE,kBAAAZ,GAAA,EAAA,UAAA,CACE,kBAACC,GAAD;EACE,OAAOe;EACG;EACV,SAASL;EACT,MAAM;EACK;EACX,SAAS;EAER,UAAAM;CACmB,CAAA,GACtB,kBAACC,GAAD;EACE,UAAUX;EACV,cAAc;GAAE,YAAY;GAAS,UAAU;EAAS;EACxD,SAASO;EACT,MAAMJ;EACN,iBAAiB;GAAE,YAAY;GAAS,UAAU;EAAM;EAEvD,UAAAS,EAAM,KAAK,EAAE,UAAUC,GAAc,SAAM,OAAOC,GAAW,iBAC5D,kBAACC,GAAD;GACE,UAAUF;GAGV,eAAe;IAEb,AADAN,EAAY,GACZS,EAAQ;GACV;GAPF,UAAA,CASE,kBAACC,GAAD,EAAA,UACGC,EACW,CAAA,GACd,kBAACC,GAAD,EAAc,SAASL,EAAY,CAAA,CAC3B;EAXH,GAAAA,CAWG,CACX;CACG,CAAA,CACN,EAAA,CAAA;AAEN"}

package/dist/components/ui/PageCommon/index.js

@@ -9,20 +9,32 @@ import { use as s, useEffect as c } from "react";
 var l = ({ children: l, isNoInteraction: u, title: d }) => {
 	let { drawerComponent: f, headerComponent: p } = t();
 	n(d);
-	let m = i(), { drawerContainerId: h, isDrawerOpen: g, setIsNoInteraction: _ } = s(e);
+	let m = i(), { drawerButtonId: h, drawerContainerId: g, isDrawerOpen: _, setIsDrawerOpen: v, setIsNoInteraction: y } = s(e);
 	return c(() => {
-		_(!!u);
-	}, [u, _]), /* @__PURE__ */ o(r, {
+		y(!!u);
+	}, [u, y]), c(() => {
+		let e = (e) => {
+			e.key === "Escape" && _ && document.getElementById(g)?.contains(document.activeElement) && (v(!1), document.getElementById(h)?.focus());
+		};
+		return document.addEventListener("keydown", e), () => {
+			document.removeEventListener("keydown", e);
+		};
+	}, [
+		h,
+		g,
+		_,
+		v
+	]), /* @__PURE__ */ o(r, {
 		sx: {
 			display: "grid",
-			gridTemplateRows: "max-content auto",
+			gridTemplateRows: p ? "max-content auto" : "auto",
 			height: "100vh",
 			overflow: "hidden",
 			position: "relative",
 			width: "100vw"
 		},
 		children: [p && /* @__PURE__ */ a(p, {}), /* @__PURE__ */ o(r, {
-			id: h,
+			id: g,
 			sx: {
 				display: "flex",
 				flex: 1,
@@ -36,13 +48,14 @@ var l = ({ children: l, isNoInteraction: u, title: d }) => {
 				sx: {
 					flexGrow: 1,
 					height: "100%",
+					marginLeft: _ ? "540px" : 0,
 					overflow: "hidden",
 					position: "relative",
 					transition: () => m.transitions.create(["margin", "width"], {
 						duration: m.transitions.duration.leavingScreen,
 						easing: m.transitions.easing.sharp
 					}),
-					width: g ? "calc(100% - 540px)" : "100%"
+					width: _ ? "calc(100% - 540px)" : "100%"
 				},
 				children: l
 			})]

package/dist/components/ui/PageCommon/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["PageCommon","DrawerComponent","HeaderComponent","useConfig","title","theme","useTheme","use","PageCommonContext","useEffect","isNoInteraction","setIsNoInteraction","Box","drawerContainerId","isDrawerOpen"],"sources":["../../../../src/components/ui/PageCommon/PageCommon.tsx"],"sourcesContent":["import {\n  Box,\n  useTheme,\n} from '@mui/material';\nimport {\n  use,\n  useEffect,\n} from 'react';\nimport type { ReactNode } from 'react';\n\nimport { DRAWER_WIDTH } from '../../../constants/page.constants';\nimport { PageCommonContext } from '../../../context/pageCommonContext';\nimport { useUpdateDocumentTitle } from '../../../hooks/useUpdateDocumentTitle';\nimport { useConfig } from '../../../hooks/useConfig';\n\nexport type PageCommonProps = {\n  readonly children: ReactNode;\n  readonly isNoInteraction?: boolean;\n  readonly title: string;\n};\n\n\nexport const PageCommon = ({ children, isNoInteraction, title }: PageCommonProps) => {\n  const { drawerComponent: DrawerComponent, headerComponent: HeaderComponent } = useConfig();\n\n  useUpdateDocumentTitle(title);\n  const theme = useTheme();\n  const { drawerContainerId, isDrawerOpen, setIsNoInteraction } = use(PageCommonContext);\n\n  useEffect(() => {\n    setIsNoInteraction(!!isNoInteraction);\n  }, [isNoInteraction, setIsNoInteraction]);\n\n  return (\n    <Box\n      sx={{\n        display: 'grid',\n        gridTemplateRows: 'max-content auto',\n        height: '100vh',\n        overflow: 'hidden',\n        position: 'relative',\n        width: '100vw',\n      }}\n    >\n      {HeaderComponent && <HeaderComponent />}\n      <Box\n        id={drawerContainerId}\n        sx={{\n          display: 'flex',\n          flex: 1,\n          height: '100%',\n          overflow: 'hidden',\n          position: 'relative',\n          width: '100%',\n        }}\n      >\n        {DrawerComponent && <DrawerComponent />}\n        <Box\n          component={'main'}\n          sx={{\n            flexGrow: 1,\n            height: '100%',\n            overflow: 'hidden',\n            position: 'relative',\n            transition: () =>\n              theme.transitions.create(['margin', 'width'], {\n                duration: theme.transitions.duration.leavingScreen,\n                easing: theme.transitions.easing.sharp,\n              }),\n            width: isDrawerOpen ? `calc(100% - ${DRAWER_WIDTH}px)` : '100%',\n          }}\n        >\n          {children}\n        </Box>\n\n      </Box>\n    </Box>\n  );\n};\n"],"mappings":";;;;;;;;AAsBA,IAAaA,KAAc,EAAE,aAAU,oBAAiB,eAA6B;CACnF,IAAM,EAAE,iBAAiBC,GAAiB,iBAAiBC,MAAoBC,EAAU;CAEzF,EAAuBC,CAAK;CAC5B,IAAMC,IAAQC,EAAS,GACjB,EAAE,sBAAmB,iBAAc,0BAAuBC,EAAIC,CAAiB;CAMrF,OAJAC,QAAgB;EACd,EAAmB,CAAC,CAACC,CAAe;CACtC,GAAG,CAACA,GAAiBC,CAAkB,CAAC,GAGtC,kBAACC,GAAD;EACE,IAAI;GACF,SAAS;GACT,kBAAkB;GAClB,QAAQ;GACR,UAAU;GACV,UAAU;GACV,OAAO;EACT;EARF,UAAA,CAUGV,KAAmB,kBAACA,GAAD,CAAkB,CAAA,GACtC,kBAACU,GAAD;GACE,IAAIC;GACJ,IAAI;IACF,SAAS;IACT,MAAM;IACN,QAAQ;IACR,UAAU;IACV,UAAU;IACV,OAAO;GACT;GATF,UAAA,CAWGZ,KAAmB,kBAACA,GAAD,CAAkB,CAAA,GACtC,kBAACW,GAAD;IACE,WAAW;IACX,IAAI;KACF,UAAU;KACV,QAAQ;KACR,UAAU;KACV,UAAU;KACV,kBACEP,EAAM,YAAY,OAAO,CAAC,UAAU,OAAO,GAAG;MAC5C,UAAUA,EAAM,YAAY,SAAS;MACrC,QAAQA,EAAM,YAAY,OAAO;KACnC,CAAC;KACH,OAAOS,IAAe,uBAAmC;IAC3D;IAEC;GACE,CAAA,CAEF;EACF,CAAA,CAAA;;AAET"}
+{"version":3,"file":"index.js","names":["PageCommon","DrawerComponent","HeaderComponent","useConfig","title","theme","useTheme","use","PageCommonContext","useEffect","isNoInteraction","setIsNoInteraction","handleKeyDown","event","isDrawerOpen","drawerContainerId","setIsDrawerOpen","drawerButtonId","Box"],"sources":["../../../../src/components/ui/PageCommon/PageCommon.tsx"],"sourcesContent":["import {\n  Box,\n  useTheme,\n} from '@mui/material';\nimport {\n  use,\n  useEffect,\n} from 'react';\nimport type { ReactNode } from 'react';\n\nimport { DRAWER_WIDTH } from '../../../constants/page.constants';\nimport { PageCommonContext } from '../../../context/pageCommonContext';\nimport { useUpdateDocumentTitle } from '../../../hooks/useUpdateDocumentTitle';\nimport { useConfig } from '../../../hooks/useConfig';\n\nexport type PageCommonProps = {\n  readonly children: ReactNode;\n  readonly isNoInteraction?: boolean;\n  readonly title: string;\n};\n\n\nexport const PageCommon = ({ children, isNoInteraction, title }: PageCommonProps) => {\n  const { drawerComponent: DrawerComponent, headerComponent: HeaderComponent } = useConfig();\n\n  useUpdateDocumentTitle(title);\n  const theme = useTheme();\n  const { drawerButtonId, drawerContainerId, isDrawerOpen, setIsDrawerOpen, setIsNoInteraction } = use(PageCommonContext);\n\n  useEffect(() => {\n    setIsNoInteraction(!!isNoInteraction);\n  }, [isNoInteraction, setIsNoInteraction]);\n\n\n  useEffect(() => {\n    // when the focus is inside the drawer and the drawer is open, pressing Escape should close the drawer\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape' && isDrawerOpen) {\n        const drawer = document.getElementById(drawerContainerId);\n        if (drawer?.contains(document.activeElement)) {\n          setIsDrawerOpen(false);\n          document.getElementById(drawerButtonId)?.focus();\n        }\n      }\n    };\n    document.addEventListener('keydown', handleKeyDown);\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [drawerButtonId, drawerContainerId, isDrawerOpen, setIsDrawerOpen]);\n\n  return (\n    <Box\n      sx={{\n        display: 'grid',\n        gridTemplateRows: HeaderComponent ? 'max-content auto' : 'auto',\n        height: '100vh',\n        overflow: 'hidden',\n        position: 'relative',\n        width: '100vw',\n      }}\n    >\n      {HeaderComponent && <HeaderComponent />}\n      <Box\n        id={drawerContainerId}\n        sx={{\n          display: 'flex',\n          flex: 1,\n          height: '100%',\n          overflow: 'hidden',\n          position: 'relative',\n          width: '100%',\n        }}\n      >\n        {DrawerComponent && <DrawerComponent />}\n        <Box\n          component={'main'}\n          sx={{\n            flexGrow: 1,\n            height: '100%',\n            marginLeft: isDrawerOpen ? `${DRAWER_WIDTH}px` : 0,\n            overflow: 'hidden',\n            position: 'relative',\n            transition: () =>\n              theme.transitions.create(['margin', 'width'], {\n                duration: theme.transitions.duration.leavingScreen,\n                easing: theme.transitions.easing.sharp,\n              }),\n            width: isDrawerOpen ? `calc(100% - ${DRAWER_WIDTH}px)` : '100%',\n          }}\n        >\n          {children}\n        </Box>\n\n      </Box>\n    </Box>\n  );\n};\n"],"mappings":";;;;;;;;AAsBA,IAAaA,KAAc,EAAE,aAAU,oBAAiB,eAA6B;CACnF,IAAM,EAAE,iBAAiBC,GAAiB,iBAAiBC,MAAoBC,EAAU;CAEzF,EAAuBC,CAAK;CAC5B,IAAMC,IAAQC,EAAS,GACjB,EAAE,mBAAgB,sBAAmB,iBAAc,oBAAiB,0BAAuBC,EAAIC,CAAiB;CAwBtH,OAtBAC,QAAgB;EACd,EAAmB,CAAC,CAACC,CAAe;CACtC,GAAG,CAACA,GAAiBC,CAAkB,CAAC,GAGxCF,QAAgB;EAEd,IAAMG,KAAiB,MAAyB;GAC9C,AAAIC,EAAM,QAAQ,YAAYC,KACb,SAAS,eAAeC,CACnC,CAAA,EAAQ,SAAS,SAAS,aAAa,MACzCC,EAAgB,EAAK,GACrB,SAAS,eAAeC,CAAc,CAAC,EAAE,MAAM;EAGrD;EAEA,OADA,SAAS,iBAAiB,WAAWL,CAAa,SACrC;GACX,SAAS,oBAAoB,WAAWA,CAAa;EACvD;CACF,GAAG;EAACK;EAAgBF;EAAmBD;EAAcE;CAAe,CAAC,GAGnE,kBAACE,GAAD;EACE,IAAI;GACF,SAAS;GACT,kBAAkBhB,IAAkB,qBAAqB;GACzD,QAAQ;GACR,UAAU;GACV,UAAU;GACV,OAAO;EACT;EARF,UAAA,CAUGA,KAAmB,kBAACA,GAAD,CAAkB,CAAA,GACtC,kBAACgB,GAAD;GACE,IAAIH;GACJ,IAAI;IACF,SAAS;IACT,MAAM;IACN,QAAQ;IACR,UAAU;IACV,UAAU;IACV,OAAO;GACT;GATF,UAAA,CAWGd,KAAmB,kBAACA,GAAD,CAAkB,CAAA,GACtC,kBAACiB,GAAD;IACE,WAAW;IACX,IAAI;KACF,UAAU;KACV,QAAQ;KACR,YAAYJ,IAAe,UAAsB;KACjD,UAAU;KACV,UAAU;KACV,kBACET,EAAM,YAAY,OAAO,CAAC,UAAU,OAAO,GAAG;MAC5C,UAAUA,EAAM,YAAY,SAAS;MACrC,QAAQA,EAAM,YAAY,OAAO;KACnC,CAAC;KACH,OAAOS,IAAe,uBAAmC;IAC3D;IAEC;GACE,CAAA,CAEF;EACF,CAAA,CAAA;;AAET"}

package/dist/components/ui/PageCommonDrawer/index.js

@@ -2,28 +2,36 @@ import "../../../constants/page.constants.js";
 import { PageCommonContext as e } from "../../../context/pageCommonContext/index.js";
 import { Drawer as t } from "@mui/material";
 import { jsx as n } from "react/jsx-runtime";
-import { use as r } from "react";
+import { use as r, useEffect as i } from "react";
 // src/components/ui/PageCommonDrawer/PageCommonDrawer.tsx
-var i = ({ children: i }) => {
-	let { drawerContainerId: a, isDrawerOpen: o } = r(e);
-	return /* @__PURE__ */ n(t, {
+var a = ({ children: a }) => {
+	let { drawerContainerId: o, isDrawerOpen: s } = r(e);
+	return i(() => {
+		if (s) {
+			let e = document.getElementById(o);
+			if (e) {
+				let t = e.querySelector("button");
+				t && t.focus();
+			}
+		}
+	}, [o, s]), /* @__PURE__ */ n(t, {
 		anchor: "left",
 		ModalProps: {
-			container: () => document.getElementById(a),
+			container: () => document.getElementById(o),
 			style: { position: "absolute" }
 		},
-		open: o,
+		open: s,
 		sx: { "& .MuiDrawer-paper": {
 			flexShrink: 0,
 			height: "100%",
 			overflowY: "auto",
 			position: "absolute",
-			width: o ? 540 : 0
+			width: s ? 540 : 0
 		} },
-		variant: "persistent",
-		children: i
+		variant: "permanent",
+		children: a
 	});
 };
-export { i as PageCommonDrawer };
+export { a as PageCommonDrawer };
 
 //# sourceMappingURL=index.js.map

package/dist/components/ui/PageCommonDrawer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["PageCommonDrawer","use","PageCommonContext","Drawer","drawerContainerId","isDrawerOpen"],"sources":["../../../../src/components/ui/PageCommonDrawer/PageCommonDrawer.tsx"],"sourcesContent":["import { Drawer } from '@mui/material';\nimport { use } from 'react';\nimport type { ReactNode } from 'react';\n\nimport { DRAWER_WIDTH } from '../../../constants/page.constants';\nimport { PageCommonContext } from '../../../context/pageCommonContext';\n\nexport type PageCommonDrawerProps = {\n  readonly children: ReactNode;\n};\n\nexport const PageCommonDrawer = ({ children }: PageCommonDrawerProps) => {\n  const { drawerContainerId, isDrawerOpen } = use(PageCommonContext);\n\n  return (\n    <Drawer\n      anchor={'left'}\n      ModalProps={{\n        container: () => document.getElementById(drawerContainerId),\n        style: { position: 'absolute' }, // Forces modal overlay to stay inside the container\n      }}\n      open={isDrawerOpen}\n      sx={{\n        '& .MuiDrawer-paper': {\n          flexShrink: 0,\n          height: '100%',\n          overflowY: 'auto',\n          position: 'absolute',\n          width: isDrawerOpen ? DRAWER_WIDTH : 0,\n        },\n      }}\n      variant={'persistent'}\n    >\n      {children}\n    </Drawer>\n  );\n};\n"],"mappings":";;;;;;AAWA,IAAaA,KAAoB,EAAE,kBAAsC;CACvE,IAAM,EAAE,sBAAmB,oBAAiBC,EAAIC,CAAiB;CAEjE,OACE,kBAACC,GAAD;EACE,QAAQ;EACR,YAAY;GACV,iBAAiB,SAAS,eAAeC,CAAiB;GAC1D,OAAO,EAAE,UAAU,WAAW;EAChC;EACA,MAAMC;EACN,IAAI,EACF,sBAAsB;GACpB,YAAY;GACZ,QAAQ;GACR,WAAW;GACX,UAAU;GACV,OAAOA,IAAA,MAA8B;EACvC,EACF;EACA,SAAS;EAER;CACK,CAAA;AAEZ"}
+{"version":3,"file":"index.js","names":["PageCommonDrawer","use","PageCommonContext","useEffect","isDrawerOpen","drawer","drawerContainerId","firstButton","Drawer"],"sources":["../../../../src/components/ui/PageCommonDrawer/PageCommonDrawer.tsx"],"sourcesContent":["import { Drawer } from '@mui/material';\nimport {\n  use,\n  useEffect,\n} from 'react';\nimport type { ReactNode } from 'react';\n\nimport { DRAWER_WIDTH } from '../../../constants/page.constants';\nimport { PageCommonContext } from '../../../context/pageCommonContext';\n\nexport type PageCommonDrawerProps = {\n  readonly children: ReactNode;\n};\n\nexport const PageCommonDrawer = ({ children }: PageCommonDrawerProps) => {\n  const { drawerContainerId, isDrawerOpen } = use(PageCommonContext);\n\n  useEffect(() => {\n    if (isDrawerOpen) {\n      // find the first button inside the drawer and focus it\n      const drawer = document.getElementById(drawerContainerId);\n      if (drawer) {\n        const firstButton = drawer.querySelector('button');\n        if (firstButton) {\n          (firstButton as HTMLElement).focus();\n        }\n      }\n    }\n  }, [drawerContainerId, isDrawerOpen]);\n\n  return (\n    <Drawer\n      anchor={'left'}\n      ModalProps={{\n        container: () => document.getElementById(drawerContainerId),\n        style: { position: 'absolute' }, // Forces modal overlay to stay inside the container\n      }}\n      open={isDrawerOpen}\n      sx={{\n        '& .MuiDrawer-paper': {\n          flexShrink: 0,\n          height: '100%',\n          overflowY: 'auto',\n          position: 'absolute',\n          width: isDrawerOpen ? DRAWER_WIDTH : 0,\n        },\n      }}\n      variant={'permanent'}\n    >\n      {children}\n    </Drawer>\n  );\n};\n"],"mappings":";;;;;;AAcA,IAAaA,KAAoB,EAAE,kBAAsC;CACvE,IAAM,EAAE,sBAAmB,oBAAiBC,EAAIC,CAAiB;CAejE,OAbAC,QAAgB;EACd,IAAIC,GAAc;GAEhB,IAAMC,IAAS,SAAS,eAAeC,CAAiB;GACxD,IAAID,GAAQ;IACV,IAAME,IAAcF,EAAO,cAAc,QAAQ;IACjD,AAAIE,KACFA,EAA6B,MAAM;GAEvC;EACF;CACF,GAAG,CAACD,GAAmBF,CAAY,CAAC,GAGlC,kBAACI,GAAD;EACE,QAAQ;EACR,YAAY;GACV,iBAAiB,SAAS,eAAeF,CAAiB;GAC1D,OAAO,EAAE,UAAU,WAAW;EAChC;EACA,MAAMF;EACN,IAAI,EACF,sBAAsB;GACpB,YAAY;GACZ,QAAQ;GACR,WAAW;GACX,UAAU;GACV,OAAOA,IAAA,MAA8B;EACvC,EACF;EACA,SAAS;EAER;CACK,CAAA;AAEZ"}

package/dist/components/ui/PageCommonHeader/index.js

@@ -12,9 +12,9 @@ var h = (h) => {
 		backgroundColor: y.palette.primary.main,
 		color: y.palette.primary.contrastText,
 		...y.components?.RivmLoculusToolsCommonFrontendPageCommonHeader ?? {}
-	}), [y]), { afterAppBarComponent: x, afterAppBarRightComponent: S, appBarHeight: C = 48, appBarIcon: w, beforeAppBarComponent: T, beforeAppBarRightComponent: E, isDrawerOpen: D, isNoInteraction: O, setIsDrawerOpen: k } = d(e), A = f(() => {
-		k(!D);
-	}, [D, k]);
+	}), [y]), { afterAppBarComponent: x, afterAppBarRightComponent: S, appBarHeight: C = 48, appBarIcon: w, beforeAppBarComponent: T, beforeAppBarRightComponent: E, drawerButtonId: D, isDrawerOpen: O, isNoInteraction: k, setIsDrawerOpen: A } = d(e), j = f(() => {
+		A(!O);
+	}, [O, A]);
 	return /* @__PURE__ */ u(n, { children: [
 		T,
 		/* @__PURE__ */ l(t, {
@@ -41,11 +41,12 @@ var h = (h) => {
 						gap: 1.5
 					},
 					children: [
-						!O && /* @__PURE__ */ l(r, {
+						!k && /* @__PURE__ */ l(r, {
 							"aria-label": "open drawer",
 							color: "inherit",
 							edge: "start",
-							onClick: A,
+							id: D,
+							onClick: j,
 							size: "small",
 							children: /* @__PURE__ */ l(m, {})
 						}),
@@ -63,7 +64,7 @@ var h = (h) => {
 							children: v
 						})
 					]
-				}), !O && /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(n, {
+				}), !k && /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(n, {
 					sx: {
 						alignItems: "center",
 						display: "flex",

package/dist/components/ui/PageCommonHeader/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_Fragment","MenuIcon","PageCommonHeader","useThemeProps","inProps","theme","useTheme","pageCommonHeaderTheme","useMemo","use","PageCommonContext","onToggleDrawerButtonClick","useCallback","isDrawerOpen","setIsDrawerOpen","Box","beforeAppBarComponent","AppBar","appBarHeight","Toolbar","isNoInteraction","IconButton","appBarIcon","Fragment","Typography","title","centerComponent","beforeAppBarRightComponent","rightComponent","afterAppBarRightComponent","afterAppBarComponent"],"sources":["../../../../src/components/ui/PageCommonHeader/PageCommonHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport {\n  use,\n  useCallback,\n  useMemo,\n} from 'react';\nimport {\n  AppBar,\n  Box,\n  IconButton,\n  Toolbar,\n  Typography,\n  useTheme,\n  useThemeProps,\n} from '@mui/material';\nimport MenuIcon from '@mui/icons-material/Menu';\n\nimport { PageCommonContext } from '../../../context/pageCommonContext';\n\nexport type PageCommonHeaderProps = {\n  readonly centerComponent?: ReactNode;\n  readonly rightComponent?: ReactNode;\n  readonly title: string;\n};\n\nexport interface PageCommonHeaderTheme {\n  backgroundColor: string;\n  color: string;\n}\n\nexport const PageCommonHeader = (inProps: PageCommonHeaderProps) => {\n  const { centerComponent, rightComponent, title } = useThemeProps({ name: 'RivmLoculusToolsCommonFrontendPageCommonHeader', props: inProps });\n  const theme = useTheme();\n  const pageCommonHeaderTheme = useMemo<PageCommonHeaderTheme>(() => ({\n    ...{\n      backgroundColor: theme.palette.primary.main,\n      color: theme.palette.primary.contrastText,\n    } satisfies PageCommonHeaderTheme,\n    ...(theme.components?.RivmLoculusToolsCommonFrontendPageCommonHeader ?? {}),\n  }), [theme]);\n\n\n  const { afterAppBarComponent, afterAppBarRightComponent, appBarHeight = 48, appBarIcon, beforeAppBarComponent, beforeAppBarRightComponent, isDrawerOpen, isNoInteraction, setIsDrawerOpen } = use(PageCommonContext);\n\n  const onToggleDrawerButtonClick = useCallback(() => {\n    setIsDrawerOpen(!isDrawerOpen);\n  }, [isDrawerOpen, setIsDrawerOpen]);\n\n  return (\n    <Box>\n      {beforeAppBarComponent}\n      <AppBar\n        elevation={1}\n        position={'static'}\n        sx={{\n          backgroundColor: pageCommonHeaderTheme.backgroundColor,\n          color: pageCommonHeaderTheme.color,\n          height: appBarHeight,\n          justifyContent: 'center',\n          zIndex: theme.zIndex.drawer + 1,\n        }}\n      >\n        <Toolbar\n          sx={{\n            display: 'flex',\n            justifyContent: 'space-between',\n            px: `${theme.spacing(1)} !important`, // using !important to override media queries\n          }}\n          variant={'dense'}\n        >\n          {/* Left: Menu toggle and App Branding */}\n          <Box sx={{ alignItems: 'center', display: 'flex', gap: 1.5 }}>\n            {!isNoInteraction && (\n              <IconButton\n                aria-label={'open drawer'}\n                color={'inherit'}\n                edge={'start'}\n                onClick={onToggleDrawerButtonClick}\n                size={'small'}\n              >\n                <MenuIcon />\n              </IconButton>\n            )}\n            {appBarIcon && (\n              <>\n                {appBarIcon}\n              </>\n            )}\n            <Typography\n              component={'div'}\n              noWrap\n              sx={{ color: 'inherit', fontSize: '1.05rem', fontWeight: 700, letterSpacing: '-0.01em' }}\n              variant={'h6'}\n            >\n              {title}\n            </Typography>\n          </Box>\n          {!isNoInteraction && (\n            <>\n              <Box sx={{ alignItems: 'center', display: 'flex', gap: 1 }}>\n                {centerComponent}\n              </Box>\n              <Box sx={{ alignItems: 'center', display: 'flex', gap: 1 }}>\n                {beforeAppBarRightComponent && (\n                  <Box sx={{ alignItems: 'center', display: 'flex', gap: 1 }}>\n                    {beforeAppBarRightComponent}\n                  </Box>\n                )}\n                <Box sx={{ alignItems: 'center', display: 'flex', gap: 1 }}>\n                  {rightComponent}\n                </Box>\n                {afterAppBarRightComponent && (\n                  <Box sx={{ alignItems: 'center', display: 'flex', gap: 1 }}>\n                    {afterAppBarRightComponent}\n                  </Box>\n                )}\n              </Box>\n            </>\n          )}\n        </Toolbar>\n      </AppBar>\n      {afterAppBarComponent}\n    </Box>\n  );\n};\n"],"mappings":";;;;;;AA8BA,IAAaE,KAAoB,MAAmC;CAClE,IAAM,EAAE,oBAAiB,mBAAgB,aAAUC,EAAc;EAAE,MAAM;EAAkD,OAAOC;CAAQ,CAAC,GACrIC,IAAQC,EAAS,GACjBC,IAAwBC,SAAsC;EAEhE,iBAAiBH,EAAM,QAAQ,QAAQ;EACvC,OAAOA,EAAM,QAAQ,QAAQ;EAE/B,GAAIA,EAAM,YAAY,kDAAkD,CAAC;CAC3E,IAAI,CAACA,CAAK,CAAC,GAGL,EAAE,yBAAsB,8BAA2B,kBAAe,IAAI,eAAY,0BAAuB,+BAA4B,iBAAc,oBAAiB,uBAAoBI,EAAIC,CAAiB,GAE7MC,IAA4BC,QAAkB;EAClD,EAAgB,CAACC,CAAY;CAC/B,GAAG,CAACA,GAAcC,CAAe,CAAC;CAElC,OACE,kBAACC,GAAD,EAAA,UAAA;EACGC;EACD,kBAACC,GAAD;GACE,WAAW;GACX,UAAU;GACV,IAAI;IACF,iBAAiBV,EAAsB;IACvC,OAAOA,EAAsB;IAC7B,QAAQW;IACR,gBAAgB;IAChB,QAAQb,EAAM,OAAO,SAAS;GAChC;GAEA,UAAA,kBAACc,GAAD;IACE,IAAI;KACF,SAAS;KACT,gBAAgB;KAChB,IAAI,GAAGd,EAAM,QAAQ,CAAC,EAAE;IAC1B;IACA,SAAS;IANX,UAAA,CASE,kBAACU,GAAD;KAAK,IAAI;MAAE,YAAY;MAAU,SAAS;MAAQ,KAAK;KAAI;KAA3D,UAAA;MACG,CAACK,KACA,kBAACC,GAAD;OACE,cAAY;OACZ,OAAO;OACP,MAAM;OACN,SAASV;OACT,MAAM;OAEN,UAAA,kBAACV,GAAD,CAAW,CAAA;MACD,CAAA;MAEbqB,KACC,kBAAAtB,GAAA,EAAA,UACGsB,EACD,CAAA;MAEJ,kBAACE,GAAD;OACE,WAAW;OACX,QAAA;OACA,IAAI;QAAE,OAAO;QAAW,UAAU;QAAW,YAAY;QAAK,eAAe;OAAU;OACvF,SAAS;OAER,UAAAC;MACS,CAAA;KACT;IACJ,CAAA,GAAA,CAACL,KACA,kBAAApB,GAAA,EAAA,UAAA,CACE,kBAACe,GAAD;KAAK,IAAI;MAAE,YAAY;MAAU,SAAS;MAAQ,KAAK;KAAE;KACtD,UAAAW;IACE,CAAA,GACL,kBAACX,GAAD;KAAK,IAAI;MAAE,YAAY;MAAU,SAAS;MAAQ,KAAK;KAAE;KAAzD,UAAA;MACGY,KACC,kBAACZ,GAAD;OAAK,IAAI;QAAE,YAAY;QAAU,SAAS;QAAQ,KAAK;OAAE;OACtD,UAAAY;MACE,CAAA;MAEP,kBAACZ,GAAD;OAAK,IAAI;QAAE,YAAY;QAAU,SAAS;QAAQ,KAAK;OAAE;OACtD,UAAAa;MACE,CAAA;MACJC,KACC,kBAACd,GAAD;OAAK,IAAI;QAAE,YAAY;QAAU,SAAS;QAAQ,KAAK;OAAE;OACtD,UAAAc;MACE,CAAA;KAEJ;IACL,CAAA,CAAA,EAAA,CAAA,CAEG;;EACH,CAAA;EACPC;CACE,EAAA,CAAA;AAET"}
+{"version":3,"file":"index.js","names":["_Fragment","MenuIcon","PageCommonHeader","useThemeProps","inProps","theme","useTheme","pageCommonHeaderTheme","useMemo","use","PageCommonContext","onToggleDrawerButtonClick","useCallback","isDrawerOpen","setIsDrawerOpen","Box","beforeAppBarComponent","AppBar","appBarHeight","Toolbar","isNoInteraction","IconButton","drawerButtonId","appBarIcon","Fragment","Typography","title","centerComponent","beforeAppBarRightComponent","rightComponent","afterAppBarRightComponent","afterAppBarComponent"],"sources":["../../../../src/components/ui/PageCommonHeader/PageCommonHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport {\n  use,\n  useCallback,\n  useMemo,\n} from 'react';\nimport {\n  AppBar,\n  Box,\n  IconButton,\n  Toolbar,\n  Typography,\n  useTheme,\n  useThemeProps,\n} from '@mui/material';\nimport MenuIcon from '@mui/icons-material/Menu';\n\nimport { PageCommonContext } from '../../../context/pageCommonContext';\n\nexport type PageCommonHeaderProps = {\n  readonly centerComponent?: ReactNode;\n  readonly rightComponent?: ReactNode;\n  readonly title: string;\n};\n\nexport interface PageCommonHeaderTheme {\n  backgroundColor: string;\n  color: string;\n}\n\nexport const PageCommonHeader = (inProps: PageCommonHeaderProps) => {\n  const { centerComponent, rightComponent, title } = useThemeProps({ name: 'RivmLoculusToolsCommonFrontendPageCommonHeader', props: inProps });\n  const theme = useTheme();\n  const pageCommonHeaderTheme = useMemo<PageCommonHeaderTheme>(() => ({\n    ...{\n      backgroundColor: theme.palette.primary.main,\n      color: theme.palette.primary.contrastText,\n    } satisfies PageCommonHeaderTheme,\n    ...(theme.components?.RivmLoculusToolsCommonFrontendPageCommonHeader ?? {}),\n  }), [theme]);\n\n\n  const { afterAppBarComponent, afterAppBarRightComponent, appBarHeight = 48, appBarIcon, beforeAppBarComponent, beforeAppBarRightComponent, drawerButtonId, isDrawerOpen, isNoInteraction, setIsDrawerOpen } = use(PageCommonContext);\n\n  const onToggleDrawerButtonClick = useCallback(() => {\n    setIsDrawerOpen(!isDrawerOpen);\n  }, [isDrawerOpen, setIsDrawerOpen]);\n\n  return (\n    <Box>\n      {beforeAppBarComponent}\n      <AppBar\n        elevation={1}\n        position={'static'}\n        sx={{\n          backgroundColor: pageCommonHeaderTheme.backgroundColor,\n          color: pageCommonHeaderTheme.color,\n          height: appBarHeight,\n          justifyContent: 'center',\n          zIndex: theme.zIndex.drawer + 1,\n        }}\n      >\n        <Toolbar\n          sx={{\n            display: 'flex',\n            justifyContent: 'space-between',\n            px: `${theme.spacing(1)} !important`, // using !important to override media queries\n          }}\n          variant={'dense'}\n        >\n          {/* Left: Menu toggle and App Branding */}\n          <Box sx={{ alignItems: 'center', display: 'flex', gap: 1.5 }}>\n            {!isNoInteraction && (\n              <IconButton\n                aria-label={'open drawer'}\n                color={'inherit'}\n                edge={'start'}\n                id={drawerButtonId}\n                onClick={onToggleDrawerButtonClick}\n                size={'small'}\n              >\n                <MenuIcon />\n              </IconButton>\n            )}\n            {appBarIcon && (\n              <>\n                {appBarIcon}\n              </>\n            )}\n            <Typography\n              component={'div'}\n              noWrap\n              sx={{ color: 'inherit', fontSize: '1.05rem', fontWeight: 700, letterSpacing: '-0.01em' }}\n              variant={'h6'}\n            >\n              {title}\n            </Typography>\n          </Box>\n          {!isNoInteraction && (\n            <>\n              <Box sx={{ alignItems: 'center', display: 'flex', gap: 1 }}>\n                {centerComponent}\n              </Box>\n              <Box sx={{ alignItems: 'center', display: 'flex', gap: 1 }}>\n                {beforeAppBarRightComponent && (\n                  <Box sx={{ alignItems: 'center', display: 'flex', gap: 1 }}>\n                    {beforeAppBarRightComponent}\n                  </Box>\n                )}\n                <Box sx={{ alignItems: 'center', display: 'flex', gap: 1 }}>\n                  {rightComponent}\n                </Box>\n                {afterAppBarRightComponent && (\n                  <Box sx={{ alignItems: 'center', display: 'flex', gap: 1 }}>\n                    {afterAppBarRightComponent}\n                  </Box>\n                )}\n              </Box>\n            </>\n          )}\n        </Toolbar>\n      </AppBar>\n      {afterAppBarComponent}\n    </Box>\n  );\n};\n"],"mappings":";;;;;;AA8BA,IAAaE,KAAoB,MAAmC;CAClE,IAAM,EAAE,oBAAiB,mBAAgB,aAAUC,EAAc;EAAE,MAAM;EAAkD,OAAOC;CAAQ,CAAC,GACrIC,IAAQC,EAAS,GACjBC,IAAwBC,SAAsC;EAEhE,iBAAiBH,EAAM,QAAQ,QAAQ;EACvC,OAAOA,EAAM,QAAQ,QAAQ;EAE/B,GAAIA,EAAM,YAAY,kDAAkD,CAAC;CAC3E,IAAI,CAACA,CAAK,CAAC,GAGL,EAAE,yBAAsB,8BAA2B,kBAAe,IAAI,eAAY,0BAAuB,+BAA4B,mBAAgB,iBAAc,oBAAiB,uBAAoBI,EAAIC,CAAiB,GAE7NC,IAA4BC,QAAkB;EAClD,EAAgB,CAACC,CAAY;CAC/B,GAAG,CAACA,GAAcC,CAAe,CAAC;CAElC,OACE,kBAACC,GAAD,EAAA,UAAA;EACGC;EACD,kBAACC,GAAD;GACE,WAAW;GACX,UAAU;GACV,IAAI;IACF,iBAAiBV,EAAsB;IACvC,OAAOA,EAAsB;IAC7B,QAAQW;IACR,gBAAgB;IAChB,QAAQb,EAAM,OAAO,SAAS;GAChC;GAEA,UAAA,kBAACc,GAAD;IACE,IAAI;KACF,SAAS;KACT,gBAAgB;KAChB,IAAI,GAAGd,EAAM,QAAQ,CAAC,EAAE;IAC1B;IACA,SAAS;IANX,UAAA,CASE,kBAACU,GAAD;KAAK,IAAI;MAAE,YAAY;MAAU,SAAS;MAAQ,KAAK;KAAI;KAA3D,UAAA;MACG,CAACK,KACA,kBAACC,GAAD;OACE,cAAY;OACZ,OAAO;OACP,MAAM;OACN,IAAIC;OACJ,SAASX;OACT,MAAM;OAEN,UAAA,kBAACV,GAAD,CAAW,CAAA;MACD,CAAA;MAEbsB,KACC,kBAAAvB,GAAA,EAAA,UACGuB,EACD,CAAA;MAEJ,kBAACE,GAAD;OACE,WAAW;OACX,QAAA;OACA,IAAI;QAAE,OAAO;QAAW,UAAU;QAAW,YAAY;QAAK,eAAe;OAAU;OACvF,SAAS;OAER,UAAAC;MACS,CAAA;KACT;IACJ,CAAA,GAAA,CAACN,KACA,kBAAApB,GAAA,EAAA,UAAA,CACE,kBAACe,GAAD;KAAK,IAAI;MAAE,YAAY;MAAU,SAAS;MAAQ,KAAK;KAAE;KACtD,UAAAY;IACE,CAAA,GACL,kBAACZ,GAAD;KAAK,IAAI;MAAE,YAAY;MAAU,SAAS;MAAQ,KAAK;KAAE;KAAzD,UAAA;MACGa,KACC,kBAACb,GAAD;OAAK,IAAI;QAAE,YAAY;QAAU,SAAS;QAAQ,KAAK;OAAE;OACtD,UAAAa;MACE,CAAA;MAEP,kBAACb,GAAD;OAAK,IAAI;QAAE,YAAY;QAAU,SAAS;QAAQ,KAAK;OAAE;OACtD,UAAAc;MACE,CAAA;MACJC,KACC,kBAACf,GAAD;OAAK,IAAI;QAAE,YAAY;QAAU,SAAS;QAAQ,KAAK;OAAE;OACtD,UAAAe;MACE,CAAA;KAEJ;IACL,CAAA,CAAA,EAAA,CAAA,CAEG;;EACH,CAAA;EACPC;CACE,EAAA,CAAA;AAET"}