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

package/src/stores/fastaDataStore/fastaDataStore.ts

@@ -0,0 +1,103 @@
+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/stores/fastaDataStore/index.ts

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

package/src/theme/index.ts

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

package/src/theme/theme.ts

@@ -0,0 +1,368 @@
+/* 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

@@ -0,0 +1,10 @@
+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/DownloadUtil/index.ts

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

package/src/utils/ErrorUtil/ErrorUtil.ts

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

package/src/utils/ErrorUtil/index.ts

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

package/src/utils/FastaUtil/FastaUtil.ts

@@ -0,0 +1,109 @@
+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: [],
+    };
+  }
+
+}

package/src/utils/FastaUtil/index.ts

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