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

package/src/stores/fastaDataStore/fastaDataStore.ts

@@ -1,103 +0,0 @@
-import type { StoreApi } from 'zustand';
-
-import type { FastaParseResult } from '../../models/fasta';
-import { LOADING_STATUS } from '../../models/fasta';
-import type { MetadataParseResult } from '../../models/metadata';
-import { FastaUtil } from '../../utils/FastaUtil';
-import { MetaDataUtil } from '../../utils/MetaDataUtil';
-
-export type FastaDataStore = FastaDataStoreActions & FastaDataStoreState;
-
-export interface FastaDataStoreActions {
-  resetDataset: () => void;
-  setColumnMatchCounts: (counts: Record<string, number>) => void;
-  setData: (fasta: string, tsv?: string) => Promise<{ fastaResult: FastaParseResult; metadataResult?: MetadataParseResult }>;
-  setLoadingStatus: (status: LOADING_STATUS) => void;
-  setMatchKeyField: (field: null | string) => void;
-}
-
-export interface FastaDataStoreState {
-  columnMatchCounts: Record<string, number>;
-  loadingError: null | string;
-  loadingStatus: LOADING_STATUS;
-  matchKeyField: null | string;
-  parsedFasta: FastaParseResult | null;
-  parsedMetadata: MetadataParseResult | null;
-  rawFasta: string;
-  rawMetadata: string;
-}
-
-export const createFastaDataStoreInitialState = (): FastaDataStoreState => ({
-  columnMatchCounts: {},
-  loadingError: null,
-  loadingStatus: LOADING_STATUS.IDLE,
-  matchKeyField: null,
-  parsedFasta: null,
-  parsedMetadata: null,
-  rawFasta: '',
-  rawMetadata: '',
-});
-
-
-type Get<T extends FastaDataStore> = StoreApi<T>['getState'];
-type Set<T extends FastaDataStore> = StoreApi<T>['setState'];
-
-export const createFastaDataStoreActions = <T extends FastaDataStore>(kwArgs: { get: Get<T>; set: Set<T> }): FastaDataStoreActions => {
-  const { get, set } = kwArgs;
-  const setBaseState = (partial: Partial<FastaDataStoreState>) => set(partial as Partial<T>);
-
-  return {
-    resetDataset: () => setBaseState(createFastaDataStoreInitialState()),
-    setColumnMatchCounts: (counts: Record<string, number>) => setBaseState({ columnMatchCounts: counts }),
-    setData: async (fasta: string, tsv?: string) => {
-      const parsedFasta = FastaUtil.parseFasta(fasta);
-
-      if (parsedFasta.error) {
-        setBaseState({
-          loadingError: parsedFasta.error,
-          loadingStatus: LOADING_STATUS.ERROR,
-        });
-        throw new Error(parsedFasta.error);
-      }
-
-      setBaseState({
-        parsedFasta,
-        rawFasta: fasta,
-      });
-
-      let parsedMetadata: MetadataParseResult | undefined;
-      if (tsv) {
-        parsedMetadata = MetaDataUtil.parseTsv(tsv);
-        if (parsedMetadata.error) {
-          setBaseState({
-            loadingError: parsedMetadata.error,
-            loadingStatus: LOADING_STATUS.ERROR,
-          });
-          throw new Error(parsedMetadata.error);
-        }
-
-        setBaseState({
-          parsedMetadata,
-          rawMetadata: tsv,
-        });
-
-        const fastaIds = parsedFasta.sequences.map((s) => s.id);
-        const { bestColumn, matchCounts } = MetaDataUtil.findBestMatchingColumn(
-          parsedMetadata.columns,
-          parsedMetadata.recordsByColumn,
-          fastaIds,
-        );
-        get().setColumnMatchCounts(matchCounts);
-        get().setMatchKeyField(bestColumn);
-      }
-
-      setBaseState({
-        loadingError: null,
-        loadingStatus: LOADING_STATUS.SUCCESS,
-      });
-      return Promise.resolve({ fastaResult: parsedFasta, metadataResult: parsedMetadata });
-    },
-    setLoadingStatus: (status: LOADING_STATUS) => setBaseState({ loadingStatus: status }),
-    setMatchKeyField: (field: null | string) => setBaseState({ matchKeyField: field }),
-  };
-};

package/src/theme/theme.ts

@@ -1,368 +0,0 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-import { createTheme } from '@mui/material';
-
-import robotoFlexWoff2 from './fonts/RobotoFlex.woff2';
-
-const FONT_SIZE = 16;
-
-const MuiCssBaselineStyleOverrides = `
-    /**
-    *:focus-visible, .Mui-focusVisible {
-      outline: 2px dotted #000 !important;
-      outline-offset: 0 !important;
-      box-shadow: 0 0 0 2px #fff !important;
-    }
-      **/
-
-    html, body {
-      font-size: ${FONT_SIZE}px;
-      height: 100%;
-      overscroll-behavior: none;
-    }
-    #root {
-      height: 100%;
-    }
-
-    /* cyrillic-ext */
-    @font-face {
-      font-family: 'Roboto Flex';
-      font-style: normal;
-      font-weight: 100 1000;
-      font-stretch: 100%;
-      font-display: swap;
-      src: url(${robotoFlexWoff2}) format('woff2');
-      unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-    }
-    /* cyrillic */
-    @font-face {
-      font-family: 'Roboto Flex';
-      font-style: normal;
-      font-weight: 100 1000;
-      font-stretch: 100%;
-      font-display: swap;
-      src: url(${robotoFlexWoff2}) format('woff2');
-      unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-    }
-    /* greek */
-    @font-face {
-      font-family: 'Roboto Flex';
-      font-style: normal;
-      font-weight: 100 1000;
-      font-stretch: 100%;
-      font-display: swap;
-      src: url(${robotoFlexWoff2}) format('woff2');
-      unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
-    }
-    /* vietnamese */
-    @font-face {
-      font-family: 'Roboto Flex';
-      font-style: normal;
-      font-weight: 100 1000;
-      font-stretch: 100%;
-      font-display: swap;
-      src: url(${robotoFlexWoff2}) format('woff2');
-      unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-    }
-    /* latin-ext */
-    @font-face {
-      font-family: 'Roboto Flex';
-      font-style: normal;
-      font-weight: 100 1000;
-      font-stretch: 100%;
-      font-display: swap;
-      src: url(${robotoFlexWoff2}) format('woff2');
-      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-    }
-    /* latin */
-    @font-face {
-      font-family: 'Roboto Flex';
-      font-style: normal;
-      font-weight: 100 1000;
-      font-stretch: 100%;
-      font-display: swap;
-      src: url(${robotoFlexWoff2}) format('woff2');
-      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-    }
-  `;
-
-export const theme = createTheme({
-  breakpoints: {
-    values: {
-      lg: 1340,
-      md: 1024,
-      sm: 640,
-      xl: 1920,
-      xs: 0,
-    },
-  },
-  components: {
-    MuiAlertTitle: {
-      styleOverrides: {
-        root: {
-          color: 'inherit',
-          fontWeight: 'bold',
-          marginBottom: 0,
-        },
-      },
-    },
-    MuiButton: {
-      defaultProps: {
-        color: 'primary',
-        variant: 'contained',
-      },
-      styleOverrides: {
-        root: {
-          fontWeight: 'bold',
-        },
-      },
-    },
-    MuiCssBaseline: {
-      styleOverrides: MuiCssBaselineStyleOverrides,
-    },
-    MuiDivider: {
-      styleOverrides: {
-        root: {
-          backgroundColor: '#c9defc',
-        },
-      },
-    },
-    MuiFab: {
-      styleOverrides: {
-        root: {
-          fontWeight: 'bold',
-        },
-      },
-    },
-    MuiFilledInput: {
-      styleOverrides: {
-        input: {
-          color: '#282245',
-        },
-        root: {
-          '&:hover': {
-            backgroundColor: 'rgba(186,214,237,0.6)',
-          },
-          '&.Mui-disabled': {
-            backgroundColor: 'rgba(186,214,237,0.1)',
-          },
-          '&.Mui-error': {
-            '&:after': {
-              borderBottomColor: '#a45c4f',
-            },
-            '&:hover': {
-              backgroundColor: 'rgba(240,180,186,0.6)',
-            },
-            '&.Mui-disabled': {
-              backgroundColor: 'rgba(240,180,186,0.1)',
-            },
-            '&.Mui-focused': {
-              backgroundColor: 'rgba(240,180,186,0.6)',
-            },
-            backgroundColor: 'rgba(240,180,186,0.4)',
-          },
-          '&.Mui-focused': {
-            backgroundColor: 'rgba(186,214,237,0.3)',
-          },
-          '&.Mui-warning': {
-            '&:after': {
-              borderBottomColor: 'rgb(119,80,21)',
-              transform: 'scaleX(1)',
-            },
-            '&:hover': {
-              '@media (hover: none)': {
-                backgroundColor: 'rgb(248,214,140,0.3)',
-              },
-              backgroundColor: 'rgb(248,214,140,0.6)',
-            },
-            '&.Mui-disabled': {
-              backgroundColor: 'rgb(248,214,140,0.1)',
-            },
-            '&.Mui-focused': {
-              backgroundColor: 'rgb(248,214,140,0.3)',
-            },
-            backgroundColor: 'rgb(248,214,140,0.3)',
-          },
-          backgroundColor: 'rgba(186,214,237,0.2)',
-        },
-      },
-    },
-    MuiFormControlLabel: {
-      styleOverrides: {
-        label: {
-          color: '#282245',
-        },
-      },
-    },
-    MuiFormHelperText: {
-      styleOverrides: {
-        root: {
-          '&.Mui-error': {
-            color: '#ba2818',
-          },
-          '&.Mui-warning': {
-            color: 'rgb(119,80,21)',
-          },
-          color: '#453e6d',
-        },
-      },
-    },
-    MuiFormLabel: {
-      styleOverrides: {
-        asterisk: {
-          color: '#D90000',
-        },
-        root: {
-          '&.Mui-error': {
-            color: '#ba2818',
-          },
-          '&.Mui-warning': {
-            color: 'rgb(119,80,21)',
-          },
-          color: '#453e6d',
-        },
-      },
-    },
-    MuiInputLabel: {
-      styleOverrides: {
-        root: {
-          '&.Mui-error': {
-            color: '#a45c4f',
-          },
-          '&.Mui-warning': {
-            color: 'rgb(119,80,21)',
-          },
-          color: '#453e6d',
-        },
-      },
-    },
-    MuiLink: {
-      styleOverrides: {
-        root: {
-          '&:hover': {
-            textDecoration: 'underline',
-          },
-          textDecoration: 'underline',
-        },
-      },
-    },
-    MuiOutlinedInput: {
-      styleOverrides: {
-        root: {
-          '& input': {
-            padding: '7.5px 4px 7.5px 5px',
-          },
-          padding: '9px',
-        },
-      },
-    },
-    MuiSelect: {
-      styleOverrides: {
-        select: {
-          padding: '7.5px 32px 7.5px 5px',
-        },
-      },
-    },
-    MuiTableCell: {
-      styleOverrides: {
-        root: {
-          borderColor: '#c9defc',
-        },
-      },
-    },
-    MuiTooltip: {
-      defaultProps: {
-        enterDelay: 500,
-        enterNextDelay: 500,
-      },
-    },
-    MuiTypography: {
-      styleOverrides: {
-        body1: {
-          color: 'rgba(0,0,0,0.87)',
-          fontSize: '1rem', // 14
-        },
-        body2: {
-          color: 'rgba(0,0,0,0.87)',
-          fontSize: '1rem', // 14
-        },
-        caption: {
-          fontStyle: 'italic',
-        },
-        h1: {
-          color: '#171c42',
-          fontSize: '2.143rem', // 30
-          fontWeight: 700,
-        },
-        h2: {
-          color: '#171c42',
-          fontSize: '1.857rem', // 26
-          fontWeight: 400,
-        },
-        h3: {
-          color: '#171c42',
-          fontSize: '1.714rem', // 24
-          fontWeight: 700,
-        },
-        h4: {
-          color: '#171c42',
-          fontSize: '1.429rem', // 20
-          fontWeight: 700,
-        },
-        h5: {
-          color: '#171c42',
-          fontSize: '1.286rem', // 16
-          fontWeight: 700,
-        },
-        h6: {
-          color: '#171c42',
-          fontSize: '1.143rem', // 16
-          fontWeight: 400,
-        },
-        subtitle1: {
-          color: 'rgba(0,0,0,0.87)',
-          fontSize: '1.286rem', // 18
-          fontWeight: 400,
-        },
-        subtitle2: {
-          color: '#171c42',
-          fontSize: '1.143rem', // 16
-          fontWeight: 700,
-        },
-      },
-    },
-  },
-  palette: {
-    divider: '#eeeeee',
-    error: {
-      contrastText: '#fff',
-      main: '#cf0101',
-    },
-    grey: {
-      100: '#eeeeee',
-      500: '#777777',
-    },
-    mode: 'light',
-    primary: {
-      contrastText: '#fff',
-      main: '#154273',
-    },
-    secondary: {
-      contrastText: '#fff',
-      main: '#2a2b33',
-    },
-    success: {
-      contrastText: '#fff',
-      main: '#05B803',
-    },
-  },
-  spacing: 8,
-  typography: {
-    button: {
-      fontWeight: 600,
-      textTransform: 'none',
-    },
-    fontFamily: 'Roboto Flex',
-    fontSize: FONT_SIZE,
-    htmlFontSize: FONT_SIZE,
-  },
-});

package/src/utils/DownloadUtil/DownloadUtil.ts

@@ -1,10 +0,0 @@
-export class DownloadUtil {
-  public static datasetFilename(label: string): string {
-    const withoutExtension = label.trim().replace(/\.[^.]+$/, '');
-    const safeLabel = withoutExtension
-      .replace(/[^a-zA-Z0-9._-]+/g, '_')
-      .replace(/^\.+|\.+$/g, '')
-      .slice(0, 80);
-    return `${safeLabel || 'alignment'}.fasta`;
-  }
-}

package/src/utils/ErrorUtil/ErrorUtil.ts

@@ -1,5 +0,0 @@
-export class ErrorUtil {
-  public static getErrorMessage(error: unknown, fallback: string): string {
-    return error instanceof Error ? error.message : fallback;
-  }
-}

package/src/utils/FastaUtil/FastaUtil.ts

@@ -1,109 +0,0 @@
-import type {
-  FastaParseResult,
-  FastaSequence,
-} from '../../models/fasta';
-
-export class FastaUtil {
-  public static parseFasta(content: string): FastaParseResult {
-    if (!content?.trim()) {
-      return FastaUtil.createErrorResult('The FASTA input is empty.');
-    }
-
-    const lines = content.split(/\r?\n/);
-    const sequences: FastaSequence[] = [];
-    let currentHeader = '';
-    let currentSeqParts: string[] = [];
-
-    const commitSequence = (): FastaParseResult | null => {
-      if (currentHeader) {
-        const fullSeq = currentSeqParts.join('').replace(/\s/g, '').toUpperCase();
-        if (!fullSeq.length) {
-          return FastaUtil.createErrorResult(`FASTA record "${currentHeader}" has no sequence.`);
-        }
-
-        // Extract ID: part before pipe or tab, sanitized for Newick compatibility
-        const firstPart = currentHeader.split(/[|\t]/)[0].trim();
-        const safeId = firstPart.replace(/[():;,']/g, '_');
-
-        sequences.push({
-          accessionVersion: safeId,
-          header: currentHeader,
-          id: safeId,
-          length: fullSeq.length,
-          sequence: fullSeq,
-        });
-      }
-      return null;
-    };
-
-    for (const sourceLine of lines) {
-      const line = sourceLine.trim();
-      if (!line) {
-        continue;
-      }
-
-      if (line.startsWith('>')) {
-        const error = commitSequence();
-        if (error) {
-          return error;
-        }
-        currentHeader = line.slice(1).trim();
-        if (!currentHeader) {
-          return FastaUtil.createErrorResult('Every FASTA record needs a non-empty header.');
-        }
-        currentSeqParts = [];
-      } else {
-        if (!currentHeader) {
-          return FastaUtil.createErrorResult('FASTA sequence data appeared before its first header.');
-        }
-        currentSeqParts.push(line);
-      }
-    }
-    const error = commitSequence();
-    if (error) {
-      return error;
-    }
-
-    if (sequences.length === 0) {
-      return FastaUtil.createErrorResult('No FASTA records were found.');
-    }
-
-    // Pre-alignment validation: verify all sequence lengths are equal
-    const firstLength = sequences[0].length;
-    const invalidSequences = sequences.filter((s) => s.length !== firstLength).map((s) => ({ id: s.id, length: s.length }));
-
-    const isAligned = invalidSequences.length === 0;
-
-    return {
-      expectedLength: firstLength,
-      invalidSequences: isAligned ? undefined : invalidSequences,
-      isAligned,
-      sequences,
-    };
-  }
-
-  public static stripFastaHeaders(fastaContent: string): string {
-    const lines = fastaContent.split('\n');
-    const strippedLines = lines.map((line) => {
-      if (line.startsWith('>')) {
-        const cleanHeader = line.substring(1).trim();
-        const firstPart = cleanHeader.split(/[|\t]/)[0].trim();
-        const safeId = firstPart.replace(/[():;,']/g, '_');
-        return `>${safeId}`;
-      }
-      return line;
-    });
-    return strippedLines.join('\n');
-  }
-
-
-  private static createErrorResult(error: string): FastaParseResult {
-    return {
-      error,
-      expectedLength: 0,
-      isAligned: false,
-      sequences: [],
-    };
-  }
-
-}