@rivm-loculus-tools/common-frontend 0.1.3 → 0.2.0

package/dist/components/FastaPageHeaderImportButton/index.js

@@ -0,0 +1,26 @@
+import { FastaDataEventBusService as e } from "../../classes/services/FastaDataEventBusService/index.js";
+import { Button as t } from "@mui/material";
+import { jsx as n } from "react/jsx-runtime";
+import { useCallback as r } from "react";
+import i from "@mui/icons-material/FileUploadOutlined";
+//#region src/components/FastaPageHeaderImportButton/FastaPageHeaderImportButton.tsx
+var a = () => {
+	let a = r(() => e.getInstance().emit("onShowImportDialog"), []);
+	return /* @__PURE__ */ n(t, {
+		color: "inherit",
+		onClick: a,
+		size: "small",
+		startIcon: /* @__PURE__ */ n(i, {}),
+		sx: {
+			"&:hover": { backgroundColor: "rgba(255, 255, 255, 0.25)" },
+			backgroundColor: "rgba(255, 255, 255, 0.15)",
+			color: "#FFFFFF"
+		},
+		variant: "contained",
+		children: "Import Data"
+	});
+};
+//#endregion
+export { a as FastaPageHeaderImportButton };
+
+//# sourceMappingURL=index.js.map

package/dist/components/FastaPageHeaderImportButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["FileUploadOutlinedIcon","FastaPageHeaderImportButton","onImportDataButtonClick","useCallback","FastaDataEventBusService","Button"],"sources":["../../../src/components/FastaPageHeaderImportButton/FastaPageHeaderImportButton.tsx"],"sourcesContent":["import FileUploadOutlinedIcon from '@mui/icons-material/FileUploadOutlined';\nimport { Button } from '@mui/material';\nimport { useCallback } from 'react';\n\nimport { FastaDataEventBusService } from '../../classes/services/FastaDataEventBusService';\n\nexport const FastaPageHeaderImportButton = () => {\n  const onImportDataButtonClick = useCallback(() => FastaDataEventBusService.getInstance().emit('onShowImportDialog'), []);\n\n  return (\n    <Button\n      color={'inherit'}\n      onClick={onImportDataButtonClick}\n      size={'small'}\n      startIcon={<FileUploadOutlinedIcon />}\n      sx={{\n        '&:hover': {\n          backgroundColor: 'rgba(255, 255, 255, 0.25)',\n        },\n        backgroundColor: 'rgba(255, 255, 255, 0.15)',\n        color: '#FFFFFF',\n      }}\n      variant={'contained'}\n    >\n      {'Import Data'}\n    </Button>\n  );\n};\n"],"mappings":";;;;;;AAMA,IAAaC,UAAoC;CAC/C,IAAMC,IAA0BC,QAAkBC,EAAyB,YAAY,CAAC,CAAC,KAAK,oBAAoB,GAAG,CAAC,CAAC;CAEvH,OACE,kBAACC,GAAD;EACE,OAAO;EACP,SAASH;EACT,MAAM;EACN,WAAW,kBAACF,GAAD,CAAyB,CAAA;EACpC,IAAI;GACF,WAAW,EACT,iBAAiB,4BACnB;GACA,iBAAiB;GACjB,OAAO;EACT;EACA,SAAS;EAER,UAAA;CACK,CAAA;AAEZ"}

package/dist/components/FastaPageHeaderResetButton/FastaPageHeaderResetButton.d.ts

@@ -0,0 +1,4 @@
+export type FastaPageHeaderResetButtonProps = {
+    onReset: () => void;
+};
+export declare const FastaPageHeaderResetButton: ({ onReset }: FastaPageHeaderResetButtonProps) => import('react').JSX.Element;

package/dist/components/FastaPageHeaderResetButton/index.js

@@ -0,0 +1,35 @@
+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";
+//#region src/components/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, {
+		title: "Reset current session and dataset",
+		children: /* @__PURE__ */ i(e, {
+			color: "inherit",
+			onClick: f,
+			size: "small",
+			sx: { opacity: .85 },
+			children: /* @__PURE__ */ i(c, { 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?`
+	})] });
+};
+//#endregion
+export { u as FastaPageHeaderResetButton };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_Fragment","RestartAltIcon","FastaPageHeaderResetButton","confirmationRef","useRef","onClickResetSession","useCallback","onConfirm","onReset","Fragment","Tooltip","IconButton","Confirmation"],"sources":["../../../src/components/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"}

package/dist/components/I18nWrapper/I18nWrapper.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+export declare const I18nWrapper: ({ children }: {
+    children: ReactNode;
+}) => import('react').JSX.Element;

package/dist/components/I18nWrapper/index.js

@@ -0,0 +1,21 @@
+import e from "i18next";
+import { Fragment as t, jsx as n } from "react/jsx-runtime";
+import { useEffect as r, useState as i } from "react";
+import { initReactI18next as a } from "react-i18next";
+//#region src/components/I18nWrapper/I18nWrapper.tsx
+var o = ({ children: o }) => {
+	let [s, c] = i(!1);
+	return r(() => {
+		(async () => {
+			await e.use(a).init({
+				interpolation: { escapeValue: !1 },
+				lng: "en",
+				resources: { en: { translation: {} } }
+			}), c(!0);
+		})();
+	}, []), /* @__PURE__ */ n(t, { children: s ? o : null });
+};
+//#endregion
+export { o as I18nWrapper };
+
+//# sourceMappingURL=index.js.map

package/dist/components/I18nWrapper/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_Fragment","i18n","I18nWrapper","isInitialized","setIsInitialized","useState","useEffect","initReactI18next","Fragment","children"],"sources":["../../../src/components/I18nWrapper/I18nWrapper.tsx"],"sourcesContent":["import {\n  useEffect,\n  useState,\n} from 'react';\nimport type { ReactNode } from 'react';\nimport i18n from 'i18next';\nimport { initReactI18next } from 'react-i18next';\n\nexport const I18nWrapper = ({ children }: { children: ReactNode }) => {\n  const [isInitialized, setIsInitialized] = useState(false);\n\n  useEffect(() => {\n    const performInitialization = async () => {\n      await i18n\n        .use(initReactI18next) // passes i18n down to react-i18next\n        .init({\n          interpolation: {\n            escapeValue: false, // react already safes from xss\n          },\n          lng: 'en',\n          resources: {\n            en: {\n              translation: {\n              },\n            },\n          },\n        });\n      setIsInitialized(true);\n    };\n    void performInitialization();\n  }, []);\n\n\n  return (\n    <>\n      {isInitialized ? children : null}\n    </>\n  );\n};\n"],"mappings":";;;;;AAQA,IAAaE,KAAe,EAAE,kBAAwC;CACpE,IAAM,CAACC,GAAeC,KAAoBC,EAAS,EAAK;CAwBxD,OAtBAC,QAAgB;EAkBd,aAjB0C;GAexC,AAdA,MAAML,EACH,IAAIM,CAAgB,CAAC,CACrB,KAAK;IACJ,eAAe,EACb,aAAa,GACf;IACA,KAAK;IACL,WAAW,EACT,IAAI,EACF,aAAa,CACb,EACF,EACF;GACF,CAAC,GACHH,EAAiB,EAAI;EACvB,EACK,CAAsB;CAC7B,GAAG,CAAC,CAAC,GAIH,kBAAAJ,GAAA,EAAA,UACGG,IAAgBM,IAAW,KAC5B,CAAA;AAEN"}

package/dist/components/PageHeaderDocumentationButton/PageHeaderDocumentationButton.d.ts

@@ -0,0 +1 @@
+export declare const PageHeaderDocumentationButton: () => import('react').JSX.Element;

package/dist/components/PageHeaderDocumentationButton/index.js

@@ -0,0 +1,24 @@
+import { IconButton as e, Tooltip as t } from "@mui/material";
+import { jsx as n } from "react/jsx-runtime";
+import { useCallback as r } from "react";
+import i from "@mui/icons-material/HelpOutlineOutlined";
+//#region src/components/PageHeaderDocumentationButton/PageHeaderDocumentationButton.tsx
+var a = () => {
+	let a = r(() => {
+		window.open("https://github.com/RIVM-bioinformatics/loculus-tools", "_blank");
+	}, []);
+	return /* @__PURE__ */ n(t, {
+		title: "Documentation & Specifications",
+		children: /* @__PURE__ */ n(e, {
+			color: "inherit",
+			onClick: a,
+			size: "small",
+			sx: { opacity: .85 },
+			children: /* @__PURE__ */ n(i, { fontSize: "small" })
+		})
+	});
+};
+//#endregion
+export { a as PageHeaderDocumentationButton };
+
+//# sourceMappingURL=index.js.map

package/dist/components/PageHeaderDocumentationButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["HelpOutlineIcon","PageHeaderDocumentationButton","onDocumentationButtonClick","useCallback","Tooltip","IconButton"],"sources":["../../../src/components/PageHeaderDocumentationButton/PageHeaderDocumentationButton.tsx"],"sourcesContent":["import { useCallback } from 'react';\nimport {\n  IconButton,\n  Tooltip,\n} from '@mui/material';\nimport HelpOutlineIcon from '@mui/icons-material/HelpOutlineOutlined';\n\nexport const PageHeaderDocumentationButton = () => {\n  const onDocumentationButtonClick = useCallback(() => {\n    window.open('https://github.com/RIVM-bioinformatics/loculus-tools', '_blank');\n  }, []);\n\n  return (\n    <Tooltip title={'Documentation & Specifications'}>\n      <IconButton\n        color={'inherit'}\n        onClick={onDocumentationButtonClick}\n        size={'small'}\n        sx={{ opacity: 0.85 }}\n      >\n        <HelpOutlineIcon fontSize={'small'} />\n      </IconButton>\n    </Tooltip>\n  );\n};\n"],"mappings":";;;;;AAOA,IAAaC,UAAsC;CACjD,IAAMC,IAA6BC,QAAkB;EACnD,OAAO,KAAK,wDAAwD,QAAQ;CAC9E,GAAG,CAAC,CAAC;CAEL,OACE,kBAACC,GAAD;EAAS,OAAO;EACd,UAAA,kBAACC,GAAD;GACE,OAAO;GACP,SAASH;GACT,MAAM;GACN,IAAI,EAAE,SAAS,IAAK;GAEpB,UAAA,kBAACF,GAAD,EAAiB,UAAU,QAAU,CAAA;EAC3B,CAAA;CACL,CAAA;AAEb"}

package/dist/components/SearchBar/SearchBar.d.ts

@@ -0,0 +1,10 @@
+export type SearchBarProps = {
+    allowNavigation?: boolean;
+    highlightedIndex?: null | number;
+    numResults?: number;
+    onHighlightedIndexChange?: (index: number) => void;
+    onSearchQueryChange: (query: string) => void;
+    searchQuery: string;
+    truncated?: boolean;
+};
+export declare const SearchBar: ({ allowNavigation, highlightedIndex, numResults, onHighlightedIndexChange, onSearchQueryChange, searchQuery, truncated }: SearchBarProps) => import('react').JSX.Element;

package/dist/components/SearchBar/SearchBarNodeCounter.d.ts

@@ -0,0 +1,4 @@
+export type SearchBarNodeCounterProps = {
+    numResults?: number;
+};
+export declare const SearchBarNodeCounter: ({ numResults }: SearchBarNodeCounterProps) => import('react').JSX.Element | null;

package/dist/components/SearchBar/index.js

@@ -0,0 +1,129 @@
+import { Box as e, FilledInput as t, IconButton as n, InputAdornment as r, useTheme as i } from "@mui/material";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useCallback as c, useMemo as l, useRef as u } from "react";
+import d from "@mui/icons-material/Search";
+import f from "@mui/icons-material/KeyboardArrowUp";
+import p from "@mui/icons-material/KeyboardArrowDown";
+import m from "@mui/icons-material/Close";
+//#region src/components/SearchBar/SearchBar.tsx
+var h = ({ allowNavigation: h, highlightedIndex: g, numResults: _ = 0, onHighlightedIndexChange: v, onSearchQueryChange: y, searchQuery: b, truncated: x }) => {
+	let S = i(), C = u(null), w = u(null), T = u(null), E = c((e) => {
+		let t = e.target.value;
+		y(t);
+	}, [y]), D = c(() => {
+		y(""), C.current?.focus();
+	}, [y]), O = c((e) => {
+		if (e.key === "Enter") {
+			if (!_) return;
+			e.preventDefault(), v?.(0), T.current?.focus();
+		}
+	}, [_, v]), k = c(() => {
+		if (!_) return;
+		let e = g == null || Number.isNaN(g) || g <= 0 ? _ - 1 : g - 1;
+		v?.(e);
+	}, [
+		_,
+		g,
+		v
+	]), A = c(() => {
+		if (!_) return;
+		let e = g == null || Number.isNaN(g) || g >= _ - 1 ? 0 : g + 1;
+		v?.(e);
+	}, [
+		_,
+		g,
+		v
+	]), j = c((e) => {
+		if (e.key === "ArrowRight") {
+			e.preventDefault();
+			let t = e.currentTarget.nextElementSibling;
+			t && t.focus();
+		}
+		if (e.key === "ArrowLeft") {
+			if (e.preventDefault(), e.target === w.current) {
+				C.current?.focus();
+				return;
+			}
+			let t = e.currentTarget.previousElementSibling;
+			t && t.focus();
+		}
+	}, []), M = l(() => b ? b && (Number.isNaN(_) || _ <= 0) ? "No results" : g == null || Number.isNaN(g) || g < 0 || !h ? `${_}${x ? "+" : ""} results` : h ? `${g + 1}/${_}${x ? "+" : ""} results` : "" : "", [
+		b,
+		_,
+		g,
+		h,
+		x
+	]);
+	return /* @__PURE__ */ o(t, {
+		endAdornment: /* @__PURE__ */ s(r, {
+			position: "end",
+			children: [
+				M && /* @__PURE__ */ o(e, {
+					"aria-atomic": "true",
+					"aria-live": "polite",
+					role: "status",
+					sx: { fontSize: "1rem" },
+					children: M
+				}),
+				_ > 0 && h && /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(n, {
+					"aria-label": "Goto previous search result",
+					disabled: !_,
+					edge: "end",
+					onClick: k,
+					onKeyDown: j,
+					ref: w,
+					sx: { color: S.palette.primary.main },
+					children: /* @__PURE__ */ o(f, {})
+				}), /* @__PURE__ */ o(n, {
+					"aria-label": "Goto next search result",
+					disabled: !_,
+					edge: "end",
+					onClick: A,
+					onKeyDown: j,
+					ref: T,
+					sx: { color: S.palette.primary.main },
+					children: /* @__PURE__ */ o(p, {})
+				})] }),
+				b && /* @__PURE__ */ o(n, {
+					"aria-label": "Clear",
+					edge: "end",
+					onClick: D,
+					onKeyDown: j,
+					children: /* @__PURE__ */ o(m, {})
+				})
+			]
+		}),
+		fullWidth: !0,
+		inputRef: C,
+		name: "Search",
+		onChange: E,
+		onKeyDown: O,
+		placeholder: "Search",
+		size: "small",
+		slotProps: { input: {
+			"aria-label": "Search",
+			sx: {
+				"&::-webkit-search-cancel-button": { display: "none" },
+				fontSize: "1rem",
+				height: S.spacing(4),
+				outline: "none !important",
+				paddingBottom: "0 !important",
+				paddingTop: "0 !important"
+			}
+		} },
+		startAdornment: /* @__PURE__ */ o(r, {
+			position: "start",
+			children: /* @__PURE__ */ o(d, { fontSize: "small" })
+		}),
+		sx: {
+			backgroundColor: S.palette.background.paper,
+			height: S.spacing(4)
+		},
+		type: "search",
+		value: b
+	});
+};
+//#endregion
+export { h as SearchBar };
+
+//# sourceMappingURL=index.js.map

package/dist/components/SearchBar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_Fragment","SearchIcon","KeyboardArrowUpIcon","KeyboardArrowDownIcon","CloseIcon","SearchBar","theme","useTheme","inputRef","useRef","arrowUpButtonRef","arrowDownButtonRef","onTextInputChange","useCallback","nextSearchText","event","onSearchQueryChange","onClearButtonClick","onTextInputKeyDown","numResults","onHighlightedIndexChange","onUpArrowButtonClick","newHighlightedIndex","highlightedIndex","onDownArrowButtonClick","onGenericKeyDown","nextFocusableElement","previousFocusableElement","searchResultStatusText","useMemo","searchQuery","allowNavigation","truncated","FilledInput","InputAdornment","Box","Fragment","IconButton"],"sources":["../../../src/components/SearchBar/SearchBar.tsx"],"sourcesContent":["import type {\n  ChangeEvent,\n  KeyboardEvent,\n} from 'react';\nimport {\n  useCallback,\n  useMemo,\n  useRef,\n} from 'react';\nimport {\n  Box,\n  FilledInput,\n  IconButton,\n  InputAdornment,\n  useTheme,\n} from '@mui/material';\nimport SearchIcon from '@mui/icons-material/Search';\nimport KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';\nimport KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';\nimport CloseIcon from '@mui/icons-material/Close';\n\n\nexport type SearchBarProps = {\n  allowNavigation?: boolean;\n  highlightedIndex?: null | number;\n  numResults?: number;\n  onHighlightedIndexChange?: (index: number) => void;\n  onSearchQueryChange: (query: string) => void;\n  searchQuery: string;\n  truncated?: boolean;\n};\n\nexport const SearchBar = ({ allowNavigation, highlightedIndex, numResults = 0, onHighlightedIndexChange, onSearchQueryChange, searchQuery, truncated }: SearchBarProps) => {\n  const theme = useTheme();\n  const inputRef = useRef<HTMLInputElement>(null);\n  const arrowUpButtonRef = useRef<HTMLButtonElement>(null);\n  const arrowDownButtonRef = useRef<HTMLButtonElement>(null);\n\n  const onTextInputChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {\n    const nextSearchText = event.target.value;\n    onSearchQueryChange(nextSearchText);\n  }, [onSearchQueryChange]);\n\n  const onClearButtonClick = useCallback(() => {\n    onSearchQueryChange('');\n    inputRef.current?.focus();\n  }, [onSearchQueryChange]);\n\n  const onTextInputKeyDown = useCallback((event: KeyboardEvent<HTMLInputElement>) => {\n    // on enter press, highlight the first result and focus the down arrow button\n    if (event.key === 'Enter') {\n      if (!numResults) {\n        return;\n      }\n      event.preventDefault();\n      onHighlightedIndexChange?.(0);\n      arrowDownButtonRef.current?.focus();\n    }\n  }, [numResults, onHighlightedIndexChange]);\n\n  const onUpArrowButtonClick = useCallback(() => {\n    // goto previous result\n    if (!numResults) {\n      return;\n    }\n    const newHighlightedIndex = highlightedIndex === null || highlightedIndex === undefined || Number.isNaN(highlightedIndex) || highlightedIndex <= 0 ? numResults - 1 : highlightedIndex - 1;\n\n    onHighlightedIndexChange?.(newHighlightedIndex);\n  }, [numResults, highlightedIndex, onHighlightedIndexChange]);\n\n  const onDownArrowButtonClick = useCallback(() => {\n    // goto next result\n    if (!numResults) {\n      return;\n    }\n    const newHighlightedIndex = highlightedIndex === null || highlightedIndex === undefined || Number.isNaN(highlightedIndex) || highlightedIndex >= numResults - 1 ? 0 : highlightedIndex + 1;\n    onHighlightedIndexChange?.(newHighlightedIndex);\n  }, [numResults, highlightedIndex, onHighlightedIndexChange]);\n\n  const onGenericKeyDown = useCallback((event: KeyboardEvent<HTMLButtonElement>) => {\n    // arrow right, focus the next focusable element\n    if (event.key === 'ArrowRight') {\n      event.preventDefault();\n      const nextFocusableElement = event.currentTarget.nextElementSibling as HTMLElement;\n      if (nextFocusableElement) {\n        nextFocusableElement.focus();\n      }\n    }\n    // arrow left, focus the previous focusable element\n    if (event.key === 'ArrowLeft') {\n      event.preventDefault();\n      if (event.target === arrowUpButtonRef.current) {\n        inputRef.current?.focus();\n        return;\n      }\n      const previousFocusableElement = event.currentTarget.previousElementSibling as HTMLElement;\n      if (previousFocusableElement) {\n        previousFocusableElement.focus();\n      }\n    }\n  }, []);\n\n  const searchResultStatusText = useMemo(() => {\n    if (!searchQuery) {\n      return '';\n    }\n    if (searchQuery && (Number.isNaN(numResults) || numResults <= 0)) {\n      return 'No results';\n    } else if (highlightedIndex === null || highlightedIndex === undefined || Number.isNaN(highlightedIndex) || highlightedIndex < 0 || !allowNavigation) {\n      return `${numResults}${truncated ? '+' : ''} results`;\n    } else if (allowNavigation) {\n      return `${highlightedIndex + 1}/${numResults}${truncated ? '+' : ''} results`;\n    }\n    return '';\n  }, [searchQuery, numResults, highlightedIndex, allowNavigation, truncated]);\n\n\n  return (\n    <FilledInput\n      endAdornment={(\n        <InputAdornment position={'end'}>\n          {searchResultStatusText && (\n            <Box\n              aria-atomic={'true'}\n              aria-live={'polite'}\n              role={'status'}\n              sx={{\n                fontSize: '1rem',\n              }}\n            >\n              {searchResultStatusText}\n            </Box>\n          )}\n          {numResults > 0 && allowNavigation && (\n            <>\n              <IconButton\n                aria-label={'Goto previous search result'}\n                disabled={!numResults}\n                edge={'end'}\n                onClick={onUpArrowButtonClick}\n                onKeyDown={onGenericKeyDown}\n                ref={arrowUpButtonRef}\n                sx={{ color: theme.palette.primary.main }}\n              >\n                <KeyboardArrowUpIcon />\n              </IconButton>\n              <IconButton\n                aria-label={'Goto next search result'}\n                disabled={!numResults}\n                edge={'end'}\n                onClick={onDownArrowButtonClick}\n                onKeyDown={onGenericKeyDown}\n                ref={arrowDownButtonRef}\n                sx={{ color: theme.palette.primary.main }}\n              >\n                <KeyboardArrowDownIcon />\n              </IconButton>\n            </>\n          )}\n          {searchQuery && (\n            <IconButton\n              aria-label={'Clear'}\n              edge={'end'}\n              onClick={onClearButtonClick}\n              onKeyDown={onGenericKeyDown}\n            >\n              <CloseIcon />\n            </IconButton>\n          )}\n        </InputAdornment>\n      )}\n      fullWidth\n      inputRef={inputRef}\n      name={'Search'}\n      onChange={onTextInputChange}\n      onKeyDown={onTextInputKeyDown}\n      placeholder={'Search'}\n      size={'small'}\n      slotProps={{\n        input: {\n          'aria-label': 'Search',\n          sx: {\n            '&::-webkit-search-cancel-button': {\n              display: 'none',\n            },\n            fontSize: '1rem',\n            height: theme.spacing(4),\n            outline: 'none !important',\n            paddingBottom: '0 !important',\n            paddingTop: '0 !important',\n          },\n        },\n      }}\n      startAdornment={(\n        <InputAdornment position={'start'}>\n          <SearchIcon fontSize={'small'} />\n        </InputAdornment>\n      )}\n      sx={{\n        backgroundColor: theme.palette.background.paper,\n        height: theme.spacing(4),\n      }}\n      type={'search'}\n      value={searchQuery}\n    />\n  );\n};\n"],"mappings":"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"}

package/dist/components/page/ErrorPageCommon.d.ts

@@ -0,0 +1,4 @@
+export type ErrorPageCommonProps = {
+    error: unknown;
+};
+export declare const ErrorPageCommon: ({ error }: ErrorPageCommonProps) => import('react').JSX.Element;

package/dist/components/page/PageCommon.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export type PageCommonProps = {
+    readonly children: ReactNode;
+    readonly drawerComponent?: ReactNode;
+    readonly headerComponent?: ReactNode;
+    readonly isNoInteraction?: boolean;
+};
+export declare const PageCommon: ({ children, drawerComponent, headerComponent, isNoInteraction }: PageCommonProps) => import('react').JSX.Element;

package/dist/components/page/PageCommonContext.d.ts

@@ -0,0 +1,7 @@
+export type PageCommonContextData = {
+    readonly isDrawerOpen: boolean;
+    readonly isNoInteraction: boolean;
+    readonly setIsDrawerOpen: (open: boolean) => void;
+    readonly setIsNoInteraction: (open: boolean) => void;
+};
+export declare const PageCommonContext: import('react').Context<PageCommonContextData>;

package/dist/components/page/PageCommonContextProvider.d.ts

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from 'react';
+export type PageCommonContextProviderProps = PropsWithChildren;
+export declare const PageCommonContextProvider: ({ children }: PageCommonContextProviderProps) => import('react').JSX.Element;

package/dist/components/page/PageCommonDrawer.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export type PageCommonDrawerProps = {
+    readonly children: ReactNode;
+};
+export declare const PageCommonDrawer: ({ children }: PageCommonDrawerProps) => import('react').JSX.Element;

package/dist/components/page/PageCommonHeader.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export type PageCommonHeaderProps = {
+    readonly centerComponent?: ReactNode;
+    readonly icon?: ReactNode;
+    readonly rightComponent?: ReactNode;
+    readonly title: string;
+};
+export declare const PageCommonHeader: ({ centerComponent, icon, rightComponent, title }: PageCommonHeaderProps) => import('react').JSX.Element;

package/dist/components/page/index.js

@@ -0,0 +1,207 @@
+import "../../constants/page.js";
+import { AppBar as e, Box as t, Drawer as n, IconButton as r, Toolbar as i, Typography as a, useTheme as o } from "@mui/material";
+import { t as s } from "i18next";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { createContext as d, use as f, useCallback as p, useEffect as m, useMemo as h, useState as g } from "react";
+import _ from "@mui/icons-material/Menu";
+//#region src/components/page/ErrorPageCommon.tsx
+var v = ({ error: e }) => /* @__PURE__ */ u(t, {
+	sx: {
+		alignItems: "center",
+		display: "flex",
+		flexDirection: "column",
+		justifyContent: "center",
+		width: "100%"
+	},
+	children: [
+		/* @__PURE__ */ l(t, {
+			sx: { padding: 1 },
+			children: /* @__PURE__ */ l(a, {
+				variant: "h1",
+				children: s`Something went wrong`
+			})
+		}),
+		/* @__PURE__ */ l(t, {
+			sx: { padding: 1 },
+			children: /* @__PURE__ */ l(a, {
+				variant: "body2",
+				children: e instanceof Error ? e.message : s`An unexpected error occurred.`
+			})
+		}),
+		/* @__PURE__ */ u(t, {
+			sx: { padding: 1 },
+			children: [/* @__PURE__ */ l(a, {
+				variant: "h6",
+				children: s`Details for our technicians`
+			}), /* @__PURE__ */ l(t, {
+				component: "pre",
+				sx: { fontSize: "0.8rem" },
+				children: e?.stack
+			})]
+		})
+	]
+}), y = d({
+	isDrawerOpen: !1,
+	isNoInteraction: !1,
+	setIsDrawerOpen: () => null,
+	setIsNoInteraction: () => null
+}), b = ({ children: e, drawerComponent: n, headerComponent: r, isNoInteraction: i }) => {
+	let a = o(), { isDrawerOpen: s, setIsNoInteraction: c } = f(y);
+	return m(() => {
+		c(!!i);
+	}, [i, c]), /* @__PURE__ */ u(t, {
+		sx: {
+			display: "flex",
+			flexDirection: "column",
+			height: "100vh",
+			overflow: "hidden",
+			position: "relative",
+			width: "100vw"
+		},
+		children: [r, /* @__PURE__ */ u(t, {
+			sx: {
+				display: "flex",
+				flex: 1,
+				height: "calc(100vh - 56px)",
+				overflow: "hidden",
+				position: "relative",
+				width: "100%"
+			},
+			children: [n, /* @__PURE__ */ l(t, {
+				component: "main",
+				sx: {
+					flexGrow: 1,
+					height: "100%",
+					overflow: "hidden",
+					position: "relative",
+					transition: () => a.transitions.create(["margin", "width"], {
+						duration: a.transitions.duration.leavingScreen,
+						easing: a.transitions.easing.sharp
+					}),
+					width: s ? "calc(100% - 340px)" : "100%"
+				},
+				children: e
+			})]
+		})]
+	});
+}, x = ({ children: e }) => {
+	let [t, n] = g(!1), [r, i] = g(!1), a = h(() => ({
+		isDrawerOpen: t,
+		isNoInteraction: r,
+		setIsDrawerOpen: n,
+		setIsNoInteraction: i
+	}), [t, r]);
+	return /* @__PURE__ */ l(y, {
+		value: a,
+		children: e
+	});
+}, S = ({ children: e }) => {
+	let { isDrawerOpen: t } = f(y);
+	return /* @__PURE__ */ l(n, {
+		anchor: "left",
+		open: t,
+		sx: {
+			"& .MuiDrawer-paper": {
+				height: "calc(100% - 56px)",
+				overflowY: "auto",
+				top: "56px",
+				width: 340
+			},
+			flexShrink: 0,
+			width: t ? 340 : 0
+		},
+		variant: "persistent",
+		children: e
+	});
+}, C = ({ centerComponent: n, icon: o, rightComponent: s, title: d }) => {
+	let { isDrawerOpen: m, isNoInteraction: h, setIsDrawerOpen: g } = f(y), v = p(() => {
+		g(!m);
+	}, [m, g]);
+	return /* @__PURE__ */ l(e, {
+		elevation: 1,
+		position: "static",
+		sx: {
+			backgroundColor: "primary.main",
+			color: "#FFFFFF",
+			height: 56,
+			justifyContent: "center",
+			zIndex: (e) => e.zIndex.drawer + 1
+		},
+		children: /* @__PURE__ */ u(i, {
+			sx: {
+				display: "flex",
+				justifyContent: "space-between",
+				px: 2
+			},
+			variant: "dense",
+			children: [
+				/* @__PURE__ */ u(t, {
+					sx: {
+						alignItems: "center",
+						display: "flex",
+						gap: 1.5
+					},
+					children: [
+						!h && /* @__PURE__ */ l(r, {
+							"aria-label": "open drawer",
+							color: "inherit",
+							edge: "start",
+							onClick: v,
+							size: "small",
+							children: /* @__PURE__ */ l(_, {})
+						}),
+						o && /* @__PURE__ */ l(c, { children: o }),
+						/* @__PURE__ */ l(a, {
+							component: "div",
+							noWrap: !0,
+							sx: {
+								color: "inherit",
+								fontSize: "1.05rem",
+								fontWeight: 700,
+								letterSpacing: "-0.01em"
+							},
+							variant: "h6",
+							children: d
+						}),
+						/* @__PURE__ */ l(a, {
+							sx: {
+								backgroundColor: "rgba(255, 255, 255, 0.15)",
+								borderRadius: 1,
+								display: {
+									sm: "inline-block",
+									xs: "none"
+								},
+								fontSize: "0.7rem",
+								fontWeight: 600,
+								px: 1,
+								py: .25
+							},
+							variant: "caption",
+							children: "Loculus Tool"
+						})
+					]
+				}),
+				/* @__PURE__ */ l(t, {
+					sx: {
+						alignItems: "center",
+						display: "flex",
+						gap: 1
+					},
+					children: n
+				}),
+				!h && /* @__PURE__ */ l(t, {
+					sx: {
+						alignItems: "center",
+						display: "flex",
+						gap: 1
+					},
+					children: s
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { v as ErrorPageCommon, b as PageCommon, y as PageCommonContext, x as PageCommonContextProvider, S as PageCommonDrawer, C as PageCommonHeader };
+
+//# sourceMappingURL=index.js.map

package/dist/components/page/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_Fragment","MenuIcon","ErrorPageCommon","Box","Typography","error","PageCommonContext","createContext","PageCommon","theme","useTheme","use","useEffect","isNoInteraction","setIsNoInteraction","headerComponent","drawerComponent","isDrawerOpen","PageCommonContextProvider","setIsDrawerOpen","useState","contextValue","useMemo","PageCommonDrawer","Drawer","PageCommonHeader","onToggleDrawerButtonClick","useCallback","AppBar","Toolbar","IconButton","icon","Fragment","title","centerComponent","rightComponent"],"sources":["../../../src/components/page/ErrorPageCommon.tsx","../../../src/components/page/PageCommonContext.ts","../../../src/components/page/PageCommon.tsx","../../../src/components/page/PageCommonContextProvider.tsx","../../../src/components/page/PageCommonDrawer.tsx","../../../src/components/page/PageCommonHeader.tsx"],"sourcesContent":["import {\n  Box,\n  Typography,\n} from '@mui/material';\nimport { t } from 'i18next';\n\nexport type ErrorPageCommonProps = {\n  error: unknown;\n};\n\nexport const ErrorPageCommon = ({ error }: ErrorPageCommonProps) => {\n  return (\n    <Box\n      sx={{\n        alignItems: 'center',\n        display: 'flex',\n        flexDirection: 'column',\n        justifyContent: 'center',\n        width: '100%',\n      }}\n    >\n      <Box sx={{ padding: 1 }}>\n        <Typography\n          variant={'h1'}\n        >\n          {t`Something went wrong`}\n        </Typography>\n      </Box>\n      <Box sx={{ padding: 1 }}>\n        <Typography\n          variant={'body2'}\n        >\n          {error instanceof Error ? error.message : t`An unexpected error occurred.`}\n        </Typography>\n      </Box>\n      <Box sx={{ padding: 1 }}>\n        <Typography variant={'h6'}>\n          {t`Details for our technicians`}\n        </Typography>\n        <Box\n          component={'pre'}\n          sx={{\n            fontSize: '0.8rem',\n          }}\n        >\n          {(error as Error)?.stack}\n        </Box>\n      </Box>\n    </Box>\n  );\n};\n","import { createContext } from 'react';\n\nexport type PageCommonContextData = {\n  readonly isDrawerOpen: boolean;\n  readonly isNoInteraction: boolean;\n  readonly setIsDrawerOpen: (open: boolean) => void;\n  readonly setIsNoInteraction: (open: boolean) => void;\n};\n\nexport const PageCommonContext = createContext<PageCommonContextData>({\n  isDrawerOpen: false,\n  isNoInteraction: false,\n  setIsDrawerOpen: () => null,\n  setIsNoInteraction: () => null,\n});\n","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';\n\nimport { PageCommonContext } from './PageCommonContext';\n\nexport type PageCommonProps = {\n  readonly children: ReactNode;\n  readonly drawerComponent?: ReactNode;\n  readonly headerComponent?: ReactNode;\n  readonly isNoInteraction?: boolean;\n};\n\n\nexport const PageCommon = ({ children, drawerComponent, headerComponent, isNoInteraction }: PageCommonProps) => {\n  const theme = useTheme();\n  const { isDrawerOpen, setIsNoInteraction } = use(PageCommonContext);\n\n  useEffect(() => {\n    setIsNoInteraction(!!isNoInteraction);\n  }, [isNoInteraction, setIsNoInteraction]);\n\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        flexDirection: 'column',\n        height: '100vh',\n        overflow: 'hidden',\n        position: 'relative',\n        width: '100vw',\n      }}\n    >\n      {headerComponent}\n      {/* Main Body */}\n      <Box\n        sx={{\n          display: 'flex',\n          flex: 1,\n          height: 'calc(100vh - 56px)',\n          overflow: 'hidden',\n          position: 'relative',\n          width: '100%',\n        }}\n      >\n        {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","import {\n  useMemo,\n  useState,\n} from 'react';\nimport type { PropsWithChildren } from 'react';\n\nimport type { PageCommonContextData } from './PageCommonContext';\nimport { PageCommonContext } from './PageCommonContext';\n\nexport type PageCommonContextProviderProps = PropsWithChildren;\n\nexport const PageCommonContextProvider = ({ children }: PageCommonContextProviderProps) => {\n  const [isDrawerOpen, setIsDrawerOpen] = useState(false);\n  const [isNoInteraction, setIsNoInteraction] = useState(false);\n\n  const contextValue = useMemo<PageCommonContextData>(() => {\n    return {\n      isDrawerOpen,\n      isNoInteraction,\n      setIsDrawerOpen,\n      setIsNoInteraction,\n    };\n  }, [isDrawerOpen, isNoInteraction]);\n\n  return (\n    <PageCommonContext value={contextValue}>\n      { children }\n    </PageCommonContext>\n  );\n};\n","import { Drawer } from '@mui/material';\nimport { use } from 'react';\nimport type { ReactNode } from 'react';\n\nimport { DRAWER_WIDTH } from '../../constants/page';\n\nimport { PageCommonContext } from './PageCommonContext';\n\nexport type PageCommonDrawerProps = {\n  readonly children: ReactNode;\n};\n\nexport const PageCommonDrawer = ({ children }: PageCommonDrawerProps) => {\n  const { isDrawerOpen } = use(PageCommonContext);\n\n  return (\n    <Drawer\n      anchor={'left'}\n      open={isDrawerOpen}\n      sx={{\n        '& .MuiDrawer-paper': {\n          height: 'calc(100% - 56px)',\n          overflowY: 'auto',\n          top: '56px',\n          width: DRAWER_WIDTH,\n        },\n        flexShrink: 0,\n        width: isDrawerOpen ? DRAWER_WIDTH : 0,\n      }}\n      variant={'persistent'}\n    >\n      {children}\n    </Drawer>\n  );\n};\n","import type { ReactNode } from 'react';\nimport {\n  use,\n  useCallback,\n} from 'react';\nimport {\n  AppBar,\n  Box,\n  IconButton,\n  Toolbar,\n  Typography,\n} from '@mui/material';\nimport MenuIcon from '@mui/icons-material/Menu';\n\nimport { PageCommonContext } from './PageCommonContext';\n\nexport type PageCommonHeaderProps = {\n  readonly centerComponent?: ReactNode;\n  readonly icon?: ReactNode;\n  readonly rightComponent?: ReactNode;\n  readonly title: string;\n};\n\nexport const PageCommonHeader = ({ centerComponent, icon, rightComponent, title }: PageCommonHeaderProps) => {\n  const { isDrawerOpen, isNoInteraction, setIsDrawerOpen } = use(PageCommonContext);\n\n  const onToggleDrawerButtonClick = useCallback(() => {\n    setIsDrawerOpen(!isDrawerOpen);\n  }, [isDrawerOpen, setIsDrawerOpen]);\n\n  return (\n    <AppBar\n      elevation={1}\n      position={'static'}\n      sx={{\n        backgroundColor: 'primary.main',\n        color: '#FFFFFF',\n        height: 56,\n        justifyContent: 'center',\n        zIndex: (theme) => theme.zIndex.drawer + 1,\n      }}\n    >\n      <Toolbar\n        sx={{ display: 'flex', justifyContent: 'space-between', px: 2 }}\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          {icon && (\n            <>\n              {icon}\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          <Typography\n            sx={{\n              backgroundColor: 'rgba(255, 255, 255, 0.15)',\n              borderRadius: 1,\n              display: { sm: 'inline-block', xs: 'none' },\n              fontSize: '0.7rem',\n              fontWeight: 600,\n              px: 1,\n              py: 0.25,\n            }}\n            variant={'caption'}\n          >\n            {'Loculus Tool'}\n          </Typography>\n        </Box>\n        <Box sx={{ alignItems: 'center', display: 'flex', gap: 1 }}>\n          {centerComponent}\n        </Box>\n        {!isNoInteraction && (\n          <Box sx={{ alignItems: 'center', display: 'flex', gap: 1 }}>\n            {rightComponent}\n          </Box>\n        )}\n      </Toolbar>\n    </AppBar>\n  );\n};\n"],"mappings":"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"}

package/dist/constants/page.d.ts

@@ -0,0 +1 @@
+export declare const DRAWER_WIDTH = 340;

package/dist/constants/page.js

@@ -0,0 +1,6 @@
+//#region src/constants/page.ts
+var e = 340;
+//#endregion
+export { e as DRAWER_WIDTH };
+
+//# sourceMappingURL=page.js.map

package/dist/constants/page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page.js","names":["DRAWER_WIDTH"],"sources":["../../src/constants/page.ts"],"sourcesContent":["export const DRAWER_WIDTH = 340;\n"],"mappings":";AAAA,IAAaA,IAAe"}

package/dist/models/fasta.d.ts

@@ -0,0 +1,23 @@
+export declare enum LOADING_STATUS {
+    ERROR = "ERROR",
+    IDLE = "IDLE",
+    LOADING = "LOADING",
+    SUCCESS = "SUCCESS"
+}
+export type FastaParseResult = {
+    error?: string;
+    expectedLength: number;
+    invalidSequences?: {
+        id: string;
+        length: number;
+    }[];
+    isAligned: boolean;
+    sequences: FastaSequence[];
+};
+export type FastaSequence = {
+    accessionVersion: string;
+    header: string;
+    id: string;
+    length: number;
+    sequence: string;
+};