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

package/src/components/I18nWrapper/I18nWrapper.tsx

@@ -1,39 +0,0 @@
-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/PageHeaderDocumentationButton/PageHeaderDocumentationButton.tsx

@@ -1,25 +0,0 @@
-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/SearchBar/SearchBar.tsx

@@ -1,207 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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/page/ErrorPageCommon.tsx

@@ -1,51 +0,0 @@
-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

@@ -1,76 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,99 +0,0 @@
-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/constants/page.ts

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

package/src/index.ts

@@ -1,21 +0,0 @@
-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

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

@@ -1,10 +0,0 @@
-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>;