@rivm-loculus-tools/common-frontend 0.0.0-stage → 0.1.3

package/src/components/FastaPageHeaderResetButton/index.ts

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

package/src/components/I18nWrapper/I18nWrapper.tsx

@@ -0,0 +1,39 @@
+import {
+  useEffect,
+  useState,
+} from 'react';
+import type { ReactNode } from 'react';
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+export const I18nWrapper = ({ children }: { children: ReactNode }) => {
+  const [isInitialized, setIsInitialized] = useState(false);
+
+  useEffect(() => {
+    const performInitialization = async () => {
+      await i18n
+        .use(initReactI18next) // passes i18n down to react-i18next
+        .init({
+          interpolation: {
+            escapeValue: false, // react already safes from xss
+          },
+          lng: 'en',
+          resources: {
+            en: {
+              translation: {
+              },
+            },
+          },
+        });
+      setIsInitialized(true);
+    };
+    void performInitialization();
+  }, []);
+
+
+  return (
+    <>
+      {isInitialized ? children : null}
+    </>
+  );
+};

package/src/components/I18nWrapper/index.ts

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

package/src/components/PageHeaderDocumentationButton/PageHeaderDocumentationButton.tsx

@@ -0,0 +1,25 @@
+import { useCallback } from 'react';
+import {
+  IconButton,
+  Tooltip,
+} from '@mui/material';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutlineOutlined';
+
+export const PageHeaderDocumentationButton = () => {
+  const onDocumentationButtonClick = useCallback(() => {
+    window.open('https://github.com/RIVM-bioinformatics/loculus-tools', '_blank');
+  }, []);
+
+  return (
+    <Tooltip title={'Documentation & Specifications'}>
+      <IconButton
+        color={'inherit'}
+        onClick={onDocumentationButtonClick}
+        size={'small'}
+        sx={{ opacity: 0.85 }}
+      >
+        <HelpOutlineIcon fontSize={'small'} />
+      </IconButton>
+    </Tooltip>
+  );
+};

package/src/components/PageHeaderDocumentationButton/index.ts

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

package/src/components/SearchBar/SearchBar.tsx

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

package/src/components/SearchBar/SearchBarNodeCounter.tsx

@@ -0,0 +1,23 @@
+import { Chip } from '@mui/material';
+
+export type SearchBarNodeCounterProps = {
+  numResults?: number;
+};
+
+export const SearchBarNodeCounter = ({ numResults }: SearchBarNodeCounterProps) => {
+  if (numResults === undefined || Number.isNaN(numResults)) {
+    return null;
+  }
+
+  return (
+    <Chip
+      color={numResults > 0 ? 'primary' : 'default'}
+      label={`${numResults} node${numResults === 1 ? '' : 's'}`}
+      size={'small'}
+      sx={{
+        margin: 0,
+        padding: 0,
+      }}
+    />
+  );
+};

package/src/components/SearchBar/index.ts

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

package/src/components/page/ErrorPageCommon.tsx

@@ -0,0 +1,51 @@
+import {
+  Box,
+  Typography,
+} from '@mui/material';
+import { t } from 'i18next';
+
+export type ErrorPageCommonProps = {
+  error: unknown;
+};
+
+export const ErrorPageCommon = ({ error }: ErrorPageCommonProps) => {
+  return (
+    <Box
+      sx={{
+        alignItems: 'center',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        width: '100%',
+      }}
+    >
+      <Box sx={{ padding: 1 }}>
+        <Typography
+          variant={'h1'}
+        >
+          {t`Something went wrong`}
+        </Typography>
+      </Box>
+      <Box sx={{ padding: 1 }}>
+        <Typography
+          variant={'body2'}
+        >
+          {error instanceof Error ? error.message : t`An unexpected error occurred.`}
+        </Typography>
+      </Box>
+      <Box sx={{ padding: 1 }}>
+        <Typography variant={'h6'}>
+          {t`Details for our technicians`}
+        </Typography>
+        <Box
+          component={'pre'}
+          sx={{
+            fontSize: '0.8rem',
+          }}
+        >
+          {(error as Error)?.stack}
+        </Box>
+      </Box>
+    </Box>
+  );
+};

package/src/components/page/PageCommon.tsx

@@ -0,0 +1,76 @@
+import {
+  Box,
+  useTheme,
+} from '@mui/material';
+import {
+  use,
+  useEffect,
+} from 'react';
+import type { ReactNode } from 'react';
+
+import { DRAWER_WIDTH } from '../../constants/page';
+
+import { PageCommonContext } from './PageCommonContext';
+
+export type PageCommonProps = {
+  readonly children: ReactNode;
+  readonly drawerComponent?: ReactNode;
+  readonly headerComponent?: ReactNode;
+  readonly isNoInteraction?: boolean;
+};
+
+
+export const PageCommon = ({ children, drawerComponent, headerComponent, isNoInteraction }: PageCommonProps) => {
+  const theme = useTheme();
+  const { isDrawerOpen, setIsNoInteraction } = use(PageCommonContext);
+
+  useEffect(() => {
+    setIsNoInteraction(!!isNoInteraction);
+  }, [isNoInteraction, setIsNoInteraction]);
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100vh',
+        overflow: 'hidden',
+        position: 'relative',
+        width: '100vw',
+      }}
+    >
+      {headerComponent}
+      {/* Main Body */}
+      <Box
+        sx={{
+          display: 'flex',
+          flex: 1,
+          height: 'calc(100vh - 56px)',
+          overflow: 'hidden',
+          position: 'relative',
+          width: '100%',
+        }}
+      >
+        {drawerComponent}
+        <Box
+          component={'main'}
+          sx={{
+            flexGrow: 1,
+            height: '100%',
+            overflow: 'hidden',
+            position: 'relative',
+            transition: () =>
+              theme.transitions.create(['margin', 'width'], {
+                duration: theme.transitions.duration.leavingScreen,
+                easing: theme.transitions.easing.sharp,
+              }),
+            width: isDrawerOpen ? `calc(100% - ${DRAWER_WIDTH}px)` : '100%',
+          }}
+        >
+          {children}
+        </Box>
+
+      </Box>
+    </Box>
+  );
+};

package/src/components/page/PageCommonContext.ts

@@ -0,0 +1,15 @@
+import { createContext } from 'react';
+
+export type PageCommonContextData = {
+  readonly isDrawerOpen: boolean;
+  readonly isNoInteraction: boolean;
+  readonly setIsDrawerOpen: (open: boolean) => void;
+  readonly setIsNoInteraction: (open: boolean) => void;
+};
+
+export const PageCommonContext = createContext<PageCommonContextData>({
+  isDrawerOpen: false,
+  isNoInteraction: false,
+  setIsDrawerOpen: () => null,
+  setIsNoInteraction: () => null,
+});

package/src/components/page/PageCommonContextProvider.tsx

@@ -0,0 +1,30 @@
+import {
+  useMemo,
+  useState,
+} from 'react';
+import type { PropsWithChildren } from 'react';
+
+import type { PageCommonContextData } from './PageCommonContext';
+import { PageCommonContext } from './PageCommonContext';
+
+export type PageCommonContextProviderProps = PropsWithChildren;
+
+export const PageCommonContextProvider = ({ children }: PageCommonContextProviderProps) => {
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  const [isNoInteraction, setIsNoInteraction] = useState(false);
+
+  const contextValue = useMemo<PageCommonContextData>(() => {
+    return {
+      isDrawerOpen,
+      isNoInteraction,
+      setIsDrawerOpen,
+      setIsNoInteraction,
+    };
+  }, [isDrawerOpen, isNoInteraction]);
+
+  return (
+    <PageCommonContext value={contextValue}>
+      { children }
+    </PageCommonContext>
+  );
+};

package/src/components/page/PageCommonDrawer.tsx

@@ -0,0 +1,35 @@
+import { Drawer } from '@mui/material';
+import { use } from 'react';
+import type { ReactNode } from 'react';
+
+import { DRAWER_WIDTH } from '../../constants/page';
+
+import { PageCommonContext } from './PageCommonContext';
+
+export type PageCommonDrawerProps = {
+  readonly children: ReactNode;
+};
+
+export const PageCommonDrawer = ({ children }: PageCommonDrawerProps) => {
+  const { isDrawerOpen } = use(PageCommonContext);
+
+  return (
+    <Drawer
+      anchor={'left'}
+      open={isDrawerOpen}
+      sx={{
+        '& .MuiDrawer-paper': {
+          height: 'calc(100% - 56px)',
+          overflowY: 'auto',
+          top: '56px',
+          width: DRAWER_WIDTH,
+        },
+        flexShrink: 0,
+        width: isDrawerOpen ? DRAWER_WIDTH : 0,
+      }}
+      variant={'persistent'}
+    >
+      {children}
+    </Drawer>
+  );
+};

package/src/components/page/PageCommonHeader.tsx

@@ -0,0 +1,99 @@
+import type { ReactNode } from 'react';
+import {
+  use,
+  useCallback,
+} from 'react';
+import {
+  AppBar,
+  Box,
+  IconButton,
+  Toolbar,
+  Typography,
+} from '@mui/material';
+import MenuIcon from '@mui/icons-material/Menu';
+
+import { PageCommonContext } from './PageCommonContext';
+
+export type PageCommonHeaderProps = {
+  readonly centerComponent?: ReactNode;
+  readonly icon?: ReactNode;
+  readonly rightComponent?: ReactNode;
+  readonly title: string;
+};
+
+export const PageCommonHeader = ({ centerComponent, icon, rightComponent, title }: PageCommonHeaderProps) => {
+  const { isDrawerOpen, isNoInteraction, setIsDrawerOpen } = use(PageCommonContext);
+
+  const onToggleDrawerButtonClick = useCallback(() => {
+    setIsDrawerOpen(!isDrawerOpen);
+  }, [isDrawerOpen, setIsDrawerOpen]);
+
+  return (
+    <AppBar
+      elevation={1}
+      position={'static'}
+      sx={{
+        backgroundColor: 'primary.main',
+        color: '#FFFFFF',
+        height: 56,
+        justifyContent: 'center',
+        zIndex: (theme) => theme.zIndex.drawer + 1,
+      }}
+    >
+      <Toolbar
+        sx={{ display: 'flex', justifyContent: 'space-between', px: 2 }}
+        variant={'dense'}
+      >
+        {/* Left: Menu toggle and App Branding */}
+        <Box sx={{ alignItems: 'center', display: 'flex', gap: 1.5 }}>
+          {!isNoInteraction && (
+            <IconButton
+              aria-label={'open drawer'}
+              color={'inherit'}
+              edge={'start'}
+              onClick={onToggleDrawerButtonClick}
+              size={'small'}
+            >
+              <MenuIcon />
+            </IconButton>
+          )}
+          {icon && (
+            <>
+              {icon}
+            </>
+          )}
+          <Typography
+            component={'div'}
+            noWrap
+            sx={{ color: 'inherit', fontSize: '1.05rem', fontWeight: 700, letterSpacing: '-0.01em' }}
+            variant={'h6'}
+          >
+            {title}
+          </Typography>
+          <Typography
+            sx={{
+              backgroundColor: 'rgba(255, 255, 255, 0.15)',
+              borderRadius: 1,
+              display: { sm: 'inline-block', xs: 'none' },
+              fontSize: '0.7rem',
+              fontWeight: 600,
+              px: 1,
+              py: 0.25,
+            }}
+            variant={'caption'}
+          >
+            {'Loculus Tool'}
+          </Typography>
+        </Box>
+        <Box sx={{ alignItems: 'center', display: 'flex', gap: 1 }}>
+          {centerComponent}
+        </Box>
+        {!isNoInteraction && (
+          <Box sx={{ alignItems: 'center', display: 'flex', gap: 1 }}>
+            {rightComponent}
+          </Box>
+        )}
+      </Toolbar>
+    </AppBar>
+  );
+};

package/src/components/page/index.ts

@@ -0,0 +1,6 @@
+export * from './ErrorPageCommon';
+export * from './PageCommon';
+export * from './PageCommonContext';
+export * from './PageCommonContextProvider';
+export * from './PageCommonDrawer';
+export * from './PageCommonHeader';

package/src/constants/page.ts

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

package/src/index.ts

@@ -0,0 +1,21 @@
+export * from './classes/services/FastaDataEventBusService';
+export * from './components/FastaDataImportDialog';
+export * from './components/FastaDataImportDialogLoader';
+export * from './components/FastaNotLoaded';
+export * from './components/FastaPageHeaderCenterComponent';
+export * from './components/FastaPageHeaderImportButton';
+export * from './components/FastaPageHeaderResetButton';
+export * from './components/I18nWrapper';
+export * from './components/page';
+export * from './components/PageHeaderDocumentationButton';
+export * from './components/SearchBar';
+export * from './constants/page';
+export * from './models/fasta';
+export * from './models/metadata';
+export * from './stores/fastaDataStore';
+export * from './theme';
+export * from './utils/DownloadUtil';
+export * from './utils/ErrorUtil';
+export * from './utils/FastaUtil';
+export * from './utils/MetaDataUtil';
+export * from './utils/UrlUtil';

package/src/models/fasta.ts

@@ -0,0 +1,22 @@
+export 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;
+};

package/src/models/metadata.ts

@@ -0,0 +1,10 @@
+export interface MetadataParseResult {
+  columns: string[];
+  error?: string;
+  records: MetadataRecord[];
+  recordsByAccession: Record<string, MetadataRecord>;
+  recordsByColumn: Record<string, Record<string, MetadataRecord>>;
+  recordsBySampleId: Record<string, MetadataRecord>;
+}
+
+export type MetadataRecord = Record<string, string>;