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

package/src/components/FastaDataImportDialog/FastaDataImportDialog.tsx

@@ -1,364 +0,0 @@
-import type {
-  ChangeEvent,
-  ReactElement,
-  SyntheticEvent,
-} from 'react';
-import {
-  useCallback,
-  useEffect,
-  useState,
-} from 'react';
-import {
-  Alert,
-  Box,
-  CircularProgress,
-  Paper,
-  Tab,
-  Tabs,
-  TextField,
-  Typography,
-} from '@mui/material';
-import DnaIcon from '@mui/icons-material/Biotech';
-import TableChartIcon from '@mui/icons-material/TableChart';
-import { FileDropZone } from '@gen-epix/ui-core-components/components/FileDropZone';
-import type {
-  WithDialogRefMethods,
-  WithDialogRenderProps,
-} from '@gen-epix/ui-core-components/hoc/withDialog';
-import { withDialog } from '@gen-epix/ui-core-components/hoc/withDialog';
-import type { DialogAction } from '@gen-epix/ui-core-components/components/Dialog';
-
-
-enum FASTA_TAB {
-  DROP = 0,
-  URL = 1,
-  PASTE = 2,
-}
-
-enum META_DATA_TAB {
-  DROP = 0,
-  URL = 1,
-  PASTE = 2,
-}
-
-export interface FastaDataImportDialogOpenProps {
-  initialErrorMessage?: string;
-}
-
-export interface FastaDataImportDialogProps extends WithDialogRenderProps<FastaDataImportDialogOpenProps> {
-  extraActions?: DialogAction[];
-  onDataChange: (fasta: string, metaData?: string) => void;
-  onError: (error: unknown) => void;
-}
-
-export type FastaDataImportDialogRefMethods = WithDialogRefMethods<FastaDataImportDialogProps, FastaDataImportDialogOpenProps>;
-
-export const FastaDataImportDialog = withDialog<FastaDataImportDialogProps, FastaDataImportDialogOpenProps>((
-  {
-    extraActions,
-    onActionsChange,
-    onClose,
-    onDataChange,
-    onDisableBackdropClickChange,
-    onError,
-    onNoCloseButtonChange,
-    openProps,
-  }: FastaDataImportDialogProps,
-): ReactElement => {
-  // FASTA state
-  const [fastaTab, setFastaTab] = useState(FASTA_TAB.DROP);
-  const [fastaFile, setFastaFile] = useState<FileList | null>(null);
-  const [fastaUrl, setFastaUrl] = useState('');
-  const [fastaText, setFastaText] = useState('');
-
-  // Metadata state
-  const [metadataTab, setMetadataTab] = useState(META_DATA_TAB.DROP);
-  const [metadataFile, setMetadataFile] = useState<FileList | null>(null);
-  const [metadataUrl, setMetadataUrl] = useState('');
-  const [metadataText, setMetadataText] = useState('');
-
-  const [isLoading, setIsLoading] = useState(false);
-  const [errorMsg, setErrorMsg] = useState<null | string>(null);
-
-  useEffect(() => {
-    setErrorMsg(openProps?.initialErrorMessage ?? null);
-  }, [openProps]);
-
-  useEffect(() => {
-    if (onNoCloseButtonChange) {
-      onNoCloseButtonChange(!!openProps?.initialErrorMessage);
-    }
-    if (onDisableBackdropClickChange) {
-      onDisableBackdropClickChange(!!openProps?.initialErrorMessage);
-    }
-  }, [onDisableBackdropClickChange, onNoCloseButtonChange, openProps?.initialErrorMessage]);
-
-  const onCloseError = useCallback(() => setErrorMsg(null), []);
-  const onChangeFastaTab = useCallback((_event: SyntheticEvent, value: number) => {
-    setFastaTab(value);
-  }, []);
-  const onChangeMetadataTab = useCallback((_event: SyntheticEvent, value: number) => {
-    setMetadataTab(value);
-  }, []);
-  const onFileSelectedFasta = useCallback((file: FileList) => setFastaFile(file), []);
-  const onFileSelectedMetadata = useCallback((file: FileList) => setMetadataFile(file), []);
-  const onChangeFastaUrl = useCallback((event: ChangeEvent<HTMLInputElement>) => {
-    setFastaUrl(event.target.value);
-  }, []);
-  const onChangeFastaText = useCallback((event: ChangeEvent<HTMLInputElement>) => {
-    setFastaText(event.target.value);
-  }, []);
-  const onChangeMetadataUrl = useCallback((event: ChangeEvent<HTMLInputElement>) => {
-    setMetadataUrl(event.target.value);
-  }, []);
-  const onChangeMetadataText = useCallback((event: ChangeEvent<HTMLInputElement>) => {
-    setMetadataText(event.target.value);
-  }, []);
-
-  const onClickLoadData = useCallback(async () => {
-    setErrorMsg(null);
-    setIsLoading(true);
-
-    try {
-      // 1. Resolve FASTA content
-      let fastaContent = '';
-      if (fastaTab === FASTA_TAB.DROP && fastaFile) {
-        fastaContent = await fastaFile[0].text();
-      } else if (fastaTab === FASTA_TAB.URL && fastaUrl.trim()) {
-        const res = await fetch(fastaUrl.trim());
-        if (!res.ok) {
-          throw new Error(`Failed to fetch FASTA from URL (${res.status} ${res.statusText})`);
-        }
-        fastaContent = await res.text();
-      } else if (fastaTab === FASTA_TAB.PASTE && fastaText.trim()) {
-        fastaContent = fastaText.trim();
-      }
-
-      if (!fastaContent?.trim()) {
-        throw new Error('Please provide FASTA sequence data via file, URL, or paste.');
-      }
-
-      // 2. Resolve Metadata content (optional)
-      let metadataContent = '';
-      if (metadataTab === META_DATA_TAB.DROP && metadataFile) {
-        metadataContent = await metadataFile[0].text();
-      } else if (metadataTab === META_DATA_TAB.URL && metadataUrl.trim()) {
-        const res = await fetch(metadataUrl.trim());
-        if (!res.ok) {
-          throw new Error(`Failed to fetch Metadata from URL (${res.status} ${res.statusText})`);
-        }
-        metadataContent = await res.text();
-      } else if (metadataTab === META_DATA_TAB.PASTE && metadataText.trim()) {
-        metadataContent = metadataText.trim();
-      }
-      onDataChange(fastaContent, metadataContent);
-      if (onClose) {
-        onClose();
-      }
-    } catch (err: unknown) {
-      console.error('Data import failed:', err);
-      onError(err);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [fastaFile, fastaTab, fastaText, fastaUrl, metadataFile, metadataTab, metadataText, metadataUrl, onClose, onDataChange, onError]);
-
-
-  useEffect(() => {
-    const actions: DialogAction[] = [
-      {
-        disabled: isLoading,
-        label: isLoading ? 'Processing...' : 'Load & Calculate',
-        onClick: onClickLoadData,
-        startIcon: isLoading ? (
-          <CircularProgress
-            color={'inherit'}
-            size={18}
-          />
-        ) : undefined,
-        variant: 'contained',
-      },
-    ];
-    if (extraActions?.length) {
-      actions.unshift(...extraActions);
-    }
-    if (onActionsChange) {
-      onActionsChange(actions);
-    }
-  }, [onActionsChange, onClickLoadData, isLoading, extraActions]);
-
-  return (
-    <>
-      {errorMsg && (
-        <Alert
-          onClose={onCloseError}
-          severity={'error'}
-          sx={{
-            marginBottom: 2,
-          }}
-        >
-          {errorMsg}
-        </Alert>
-      )}
-      <Box sx={{ display: 'grid', gap: 3, gridTemplateColumns: { md: '1fr 1fr', xs: '1fr' } }}>
-        {/* FASTA Sequences Group */}
-        <Paper
-          sx={{ borderRadius: 2, p: 2.5 }}
-          variant={'outlined'}
-        >
-          <Box sx={{ alignItems: 'center', display: 'flex', gap: 1, mb: 1.5 }}>
-            <DnaIcon color={'primary'} />
-            <Typography
-              sx={{ fontWeight: 700 }}
-              variant={'subtitle1'}
-            >
-              {'1. FASTA Sequences (Required)'}
-            </Typography>
-          </Box>
-          <Typography
-            color={'text.secondary'}
-            sx={{ display: 'block', mb: 2 }}
-            variant={'caption'}
-          >
-            {'Pre-aligned nucleotide or amino-acid sequence data.'}
-          </Typography>
-          <Tabs
-            onChange={onChangeFastaTab}
-            sx={{ mb: 2, minHeight: 36 }}
-            value={fastaTab}
-          >
-            <Tab
-              label={'File Upload'}
-              sx={{ fontSize: '0.85rem', py: 0.5 }}
-            />
-            <Tab
-              label={'Public URL'}
-              sx={{ fontSize: '0.85rem', py: 0.5 }}
-            />
-            <Tab
-              label={'Direct Paste'}
-              sx={{ fontSize: '0.85rem', py: 0.5 }}
-            />
-          </Tabs>
-          {fastaTab === FASTA_TAB.DROP && (
-            <FileDropZone
-              accept={'.fasta,.fa,.fna,.aln'}
-              files={fastaFile}
-              helperText={'Drag & drop .fasta / .fa alignment file'}
-              onFilesSelected={onFileSelectedFasta}
-            />
-          )}
-          {fastaTab === FASTA_TAB.URL && (
-            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5, justifyContent: 'center', minHeight: 180 }}>
-              <TextField
-                fullWidth
-                helperText={'Enter a publicly accessible URL to a FASTA alignment'}
-                label={'FASTA URL'}
-                onChange={onChangeFastaUrl}
-                placeholder={'https://example.com/sequences.fasta'}
-                value={fastaUrl}
-                variant={'outlined'}
-              />
-            </Box>
-          )}
-          {fastaTab === FASTA_TAB.PASTE && (
-            <Box sx={{ minHeight: 180 }}>
-              <TextField
-                fullWidth
-                label={'Paste FASTA Content'}
-                multiline
-                onChange={onChangeFastaText}
-                placeholder={'>seq1&#10;ACTG...&#10;>seq2&#10;ACTG...'}
-                rows={6}
-                sx={{ fontFamily: 'monospace' }}
-                value={fastaText}
-                variant={'outlined'}
-              />
-            </Box>
-          )}
-        </Paper>
-        {/* TSV Metadata Group */}
-        <Paper
-          sx={{ borderRadius: 2, p: 2.5 }}
-          variant={'outlined'}
-        >
-          <Box sx={{ alignItems: 'center', display: 'flex', gap: 1, mb: 1.5 }}>
-            <TableChartIcon color={'primary'} />
-            <Typography
-              sx={{ fontWeight: 700 }}
-              variant={'subtitle1'}
-            >
-              {'2. TSV Metadata (Optional)'}
-            </Typography>
-          </Box>
-          <Typography
-            color={'text.primary'}
-            sx={{ display: 'block', mb: 2 }}
-            variant={'caption'}
-          >
-            {'Sample attributes for coloring, search & custom leaf labels.'}
-          </Typography>
-          <Tabs
-            onChange={onChangeMetadataTab}
-            sx={{ mb: 2, minHeight: 36 }}
-            value={metadataTab}
-          >
-            <Tab
-              label={'File Upload'}
-              sx={{ fontSize: '0.85rem', py: 0.5 }}
-            />
-            <Tab
-              label={'Public URL'}
-              sx={{ fontSize: '0.85rem', py: 0.5 }}
-            />
-            <Tab
-              label={'Direct Paste'}
-              sx={{ fontSize: '0.85rem', py: 0.5 }}
-            />
-          </Tabs>
-          {metadataTab === META_DATA_TAB.DROP && (
-            <FileDropZone
-              accept={'.tsv,.txt,.csv'}
-              files={metadataFile}
-              label={'TSV Metadata File'}
-              onFilesSelected={onFileSelectedMetadata}
-            />
-          )}
-          {metadataTab === META_DATA_TAB.URL && (
-            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5, justifyContent: 'center', minHeight: 180 }}>
-              <TextField
-                fullWidth
-                helperText={'Enter a publicly accessible URL to a TSV metadata file'}
-                label={'Metadata TSV URL'}
-                onChange={onChangeMetadataUrl}
-                placeholder={'https://example.com/metadata.tsv'}
-                value={metadataUrl}
-                variant={'outlined'}
-              />
-            </Box>
-          )}
-          {metadataTab === META_DATA_TAB.PASTE && (
-            <Box sx={{ minHeight: 180 }}>
-              <TextField
-                fullWidth
-                label={'Paste TSV Content'}
-                multiline
-                onChange={onChangeMetadataText}
-                placeholder={'SampleID&#9;Country&#9;Date&#10;Sample1&#9;NL&#9;2024-01-01'}
-                rows={6}
-                sx={{ fontFamily: 'monospace' }}
-                value={metadataText}
-                variant={'outlined'}
-              />
-            </Box>
-          )}
-        </Paper>
-      </Box>
-    </>
-  );
-}, {
-  defaultTitle: 'Load Phylogenetic Data',
-  fullWidth: true,
-  maxWidth: 'xl',
-  testId: 'FastaDataImportDialog',
-});

package/src/components/FastaDataImportDialogLoader/FastaDataImportDialogLoader.tsx

@@ -1,124 +0,0 @@
-import type { DialogAction } from '@gen-epix/ui-core-components/components/Dialog';
-import {
-  useCallback,
-  useEffect,
-  useRef,
-} from 'react';
-import type { StoreApi } from 'zustand';
-import { useStore } from 'zustand';
-
-import { FastaDataEventBusService } from '../../classes/services/FastaDataEventBusService';
-import { LOADING_STATUS } from '../../models/fasta';
-import type { FastaDataStore } from '../../stores/fastaDataStore';
-import { UrlUtil } from '../../utils/UrlUtil';
-import type { FastaDataImportDialogRefMethods } from '../FastaDataImportDialog/FastaDataImportDialog';
-import { FastaDataImportDialog } from '../FastaDataImportDialog/FastaDataImportDialog';
-import { ErrorUtil } from '../../utils/ErrorUtil';
-
-
-export type FastaDataImportDialogLoaderProps = {
-  extraActions: DialogAction[];
-  store: StoreApi<FastaDataStore>;
-};
-
-export const FastaDataImportDialogLoader = ({ extraActions, store }: FastaDataImportDialogLoaderProps) => {
-  const setData = useStore(store, (state) => state.setData);
-  const setLoadingStatus = useStore(store, (state) => state.setLoadingStatus);
-  const fastaDataImportDialogRef = useRef<FastaDataImportDialogRefMethods>(null);
-
-  useEffect(() => {
-    const removers = [
-      // eslint-disable-next-line @eslint-react/web-api-no-leaked-event-listener
-      FastaDataEventBusService.getInstance().addEventListener('onShowImportDialog', (initialErrorMessage?: string) => {
-        fastaDataImportDialogRef.current?.open(initialErrorMessage ? { initialErrorMessage } : undefined);
-      }),
-      // eslint-disable-next-line @eslint-react/web-api-no-leaked-event-listener
-      FastaDataEventBusService.getInstance().addEventListener('onCloseImportDialog', () => {
-        fastaDataImportDialogRef.current?.close();
-      }),
-    ];
-    return () => {
-      removers.forEach((remove) => remove());
-    };
-  }, []);
-
-  useEffect(() => {
-    // Scan URL parameters for deep-linking
-    const urlParams = new URLSearchParams(window.location.search);
-    const inputFastaUrl = urlParams.get('input-fasta');
-    const inputMetadataUrl = urlParams.get('input-metadata');
-
-    const handleDeepLinking = async () => {
-      if (inputFastaUrl) {
-        setLoadingStatus(LOADING_STATUS.LOADING);
-        try {
-          const fastaRes = await fetch(inputFastaUrl);
-          if (!fastaRes.ok) {
-            throw new Error(`FASTA fetch failed (${fastaRes.status})`);
-          }
-          const fastaText = await fastaRes.text();
-
-          if (!fastaText.trim()) {
-            setLoadingStatus(LOADING_STATUS.ERROR);
-            throw new Error('The input-fasta URL returned no sequence data. Check that the URL and requested accession(s) are correct.');
-          }
-
-          let metaText: string | undefined;
-          if (inputMetadataUrl) {
-            try {
-              const metaRes = await fetch(inputMetadataUrl);
-              if (metaRes.ok) {
-                metaText = await metaRes.text();
-              }
-            } catch (metaErr) {
-              console.warn('[App] Failed to auto-fetch metadata:', metaErr);
-            }
-          }
-
-          await setData(fastaText, metaText);
-        } catch (fastaErr) {
-          console.error('[App] Failed to auto-load FASTA:', fastaErr);
-          const message = fastaErr instanceof Error ? fastaErr.message : 'Failed to auto-load FASTA from the provided URL.';
-          FastaDataEventBusService.getInstance().emit('onShowImportDialog', message);
-        }
-      } else {
-        // PV1-02: Show data loading modal if no data provided via URL query params
-        FastaDataEventBusService.getInstance().emit('onShowImportDialog');
-      }
-    };
-
-    void handleDeepLinking();
-  }, [setData, setLoadingStatus]);
-
-  const handleError = useCallback((errorMessage: string) => {
-    fastaDataImportDialogRef.current?.close();
-    FastaDataEventBusService.getInstance().emit('onShowImportDialog', errorMessage);
-  }, []);
-
-  const onDataChange = useCallback(async (fastaContent: string, metadataContent?: string) => {
-    try {
-      await setData(fastaContent, metadataContent);
-      fastaDataImportDialogRef.current?.close();
-    } catch (e) {
-      handleError(ErrorUtil.getErrorMessage(e, 'Unknown error'));
-    } finally {
-      // clear any search params from the URL
-      UrlUtil.clearSearchParams();
-    }
-  }, [handleError, setData]);
-
-  const onError = useCallback((errorMessage: unknown) => {
-    handleError(ErrorUtil.getErrorMessage(errorMessage, 'Unknown error'));
-  }, [handleError]);
-
-  return (
-    <>
-      <FastaDataImportDialog
-        extraActions={extraActions}
-        onDataChange={onDataChange}
-        onError={onError}
-        ref={fastaDataImportDialogRef}
-      />
-    </>
-  );
-};

package/src/components/FastaNotLoaded/FastaNotLoaded.tsx

@@ -1,62 +0,0 @@
-import {
-  Box,
-  Button,
-  Typography,
-} from '@mui/material';
-import FileUploadOutlinedIcon from '@mui/icons-material/FileUploadOutlined';
-import type { ReactNode } from 'react';
-import { useCallback } from 'react';
-
-import { FastaDataEventBusService } from '../../classes/services/FastaDataEventBusService';
-
-export type FastaNotLoadedProps = {
-  description: ReactNode;
-  icon: ReactNode;
-  title: ReactNode;
-};
-
-export const FastaNotLoaded = ({ description, icon, title }: FastaNotLoadedProps) => {
-  const onClickLoadData = useCallback(() => {
-    FastaDataEventBusService.getInstance().emit('onShowImportDialog');
-  }, []);
-
-  return (
-    <Box
-      sx={{
-        alignItems: 'center',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 2,
-        height: '100%',
-        justifyContent: 'center',
-        p: 3,
-        width: '100%',
-      }}
-    >
-      {icon}
-      <Typography
-        color={'text.secondary'}
-        sx={{ fontWeight: 600 }}
-        variant={'h6'}
-      >
-        {title}
-      </Typography>
-      <Typography
-        color={'text.secondary'}
-        sx={{ maxWidth: 450, textAlign: 'center' }}
-        variant={'body2'}
-      >
-        {description}
-      </Typography>
-      <Button
-        color={'primary'}
-        onClick={onClickLoadData}
-        startIcon={<FileUploadOutlinedIcon />}
-        sx={{ mt: 1 }}
-        variant={'contained'}
-      >
-        {'Load Data'}
-      </Button>
-    </Box>
-  );
-};

package/src/components/FastaPageHeaderCenterComponent/FastaPageHeaderCenterComponent.tsx

@@ -1,50 +0,0 @@
-import {
-  Box,
-  Chip,
-} from '@mui/material';
-import type { StoreApi } from 'zustand';
-import { useStore } from 'zustand';
-
-import type { FastaDataStore } from '../../stores/fastaDataStore';
-
-
-export type FastaPageHeaderCenterComponentProps = {
-  store: StoreApi<FastaDataStore>;
-};
-
-export const FastaPageHeaderCenterComponent = ({ store }: FastaPageHeaderCenterComponentProps) => {
-  const parsedFasta = useStore(store, (state) => state.parsedFasta);
-  const parsedMetadata = useStore(store, (state) => state.parsedMetadata);
-
-  const seqCount = parsedFasta?.sequences?.length || 0;
-  const metaCount = parsedMetadata?.records?.length || 0;
-
-  return (
-    <Box sx={{ alignItems: 'center', display: 'flex', gap: 1 }}>
-      {seqCount > 0 && (
-        <Chip
-          label={`${seqCount} Sequences`}
-          size={'small'}
-          sx={{
-            backgroundColor: 'rgba(255, 255, 255, 0.2)',
-            color: '#FFFFFF',
-            fontSize: '0.75rem',
-            fontWeight: 600,
-          }}
-        />
-      )}
-      {metaCount > 0 && (
-        <Chip
-          label={`${metaCount} Metadata Records`}
-          size={'small'}
-          sx={{
-            backgroundColor: 'rgba(255, 255, 255, 0.2)',
-            color: '#FFFFFF',
-            fontSize: '0.75rem',
-            fontWeight: 600,
-          }}
-        />
-      )}
-    </Box>
-  );
-};

package/src/components/FastaPageHeaderImportButton/FastaPageHeaderImportButton.tsx

@@ -1,28 +0,0 @@
-import FileUploadOutlinedIcon from '@mui/icons-material/FileUploadOutlined';
-import { Button } from '@mui/material';
-import { useCallback } from 'react';
-
-import { FastaDataEventBusService } from '../../classes/services/FastaDataEventBusService';
-
-export const FastaPageHeaderImportButton = () => {
-  const onImportDataButtonClick = useCallback(() => FastaDataEventBusService.getInstance().emit('onShowImportDialog'), []);
-
-  return (
-    <Button
-      color={'inherit'}
-      onClick={onImportDataButtonClick}
-      size={'small'}
-      startIcon={<FileUploadOutlinedIcon />}
-      sx={{
-        '&:hover': {
-          backgroundColor: 'rgba(255, 255, 255, 0.25)',
-        },
-        backgroundColor: 'rgba(255, 255, 255, 0.15)',
-        color: '#FFFFFF',
-      }}
-      variant={'contained'}
-    >
-      {'Import Data'}
-    </Button>
-  );
-};

package/src/components/FastaPageHeaderResetButton/FastaPageHeaderResetButton.tsx

@@ -1,50 +0,0 @@
-import RestartAltIcon from '@mui/icons-material/RestartAlt';
-import {
-  IconButton,
-  Tooltip,
-} from '@mui/material';
-import {
-  useCallback,
-  useRef,
-} from 'react';
-import { Confirmation } from '@gen-epix/ui-core-components/components/Confirmation';
-import type { ConfirmationRefMethods } from '@gen-epix/ui-core-components/components/Confirmation';
-import { t } from 'i18next';
-
-export type FastaPageHeaderResetButtonProps = {
-  onReset: () => void;
-};
-
-export const FastaPageHeaderResetButton = ({ onReset }: FastaPageHeaderResetButtonProps) => {
-  const confirmationRef = useRef<ConfirmationRefMethods>(null);
-  const onClickResetSession = useCallback(() => {
-    confirmationRef.current?.open();
-  }, []);
-
-  const onConfirm = useCallback(() => {
-    onReset();
-  }, [onReset]);
-
-  return (
-    <>
-      <Tooltip title={'Reset current session and dataset'}>
-        <IconButton
-          color={'inherit'}
-          onClick={onClickResetSession}
-          size={'small'}
-          sx={{ opacity: 0.85 }}
-        >
-          <RestartAltIcon fontSize={'small'} />
-        </IconButton>
-      </Tooltip>
-      <Confirmation
-        body={t`Are you sure you want to reset the current session and dataset?`}
-        cancelLabel={t`Cancel`}
-        confirmLabel={t`Reset`}
-        onConfirm={onConfirm}
-        ref={confirmationRef}
-        title={t`Reset current session and dataset?`}
-      />
-    </>
-  );
-};