@genspectrum/dashboard-components 0.6.17 → 0.6.19

package/dist/genspectrum-components.d.ts

@@ -989,10 +989,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-selector': DateRangeSelectorComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-date-range-changed': CustomEvent<Record<string, string>>;
+        'gs-mutation-comparison-component': MutationComparisonComponent;
     }
 }
 
@@ -1000,7 +997,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-selector': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1008,10 +1005,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-location-changed': CustomEvent<Record<string, string>>;
+        'gs-mutations-component': MutationsComponent;
     }
 }
 
@@ -1019,7 +1013,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1027,10 +1021,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-input': TextInputComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-text-input-changed': CustomEvent<Record<string, string>>;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -1038,7 +1029,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-input-changed': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1046,11 +1037,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<SelectedMutationFilterStrings>;
-        'gs-mutation-filter-on-blur': CustomEvent<SelectedMutationFilterStrings>;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -1058,7 +1045,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1066,10 +1053,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-lineage-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-aggregate-component': AggregateComponent;
     }
 }
 
@@ -1077,7 +1061,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1085,7 +1069,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-comparison-component': MutationComparisonComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1093,7 +1077,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1101,7 +1085,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-component': MutationsComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1109,7 +1093,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1117,7 +1101,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-date-range-selector': DateRangeSelectorComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-date-range-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -1125,7 +1112,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-selector': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1133,7 +1120,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-location-filter': LocationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-location-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -1141,7 +1131,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1149,7 +1139,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate-component': AggregateComponent;
+        'gs-text-input': TextInputComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-text-input-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -1157,7 +1150,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1165,7 +1158,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-lineage-filter': LineageFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-lineage-filter-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -1173,7 +1169,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1181,7 +1177,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time-component': MutationsOverTimeComponent;
+        'gs-mutation-filter': MutationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-mutation-filter-changed': CustomEvent<SelectedMutationFilterStrings>;
+        'gs-mutation-filter-on-blur': CustomEvent<SelectedMutationFilterStrings>;
     }
 }
 
@@ -1189,7 +1189,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/dist/style.css

@@ -482,7 +482,7 @@ input[type="range"] {
   --tw-contain-paint:  ;
   --tw-contain-style:  ;
 }/*
-! tailwindcss v3.4.13 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.14 | MIT License | https://tailwindcss.com
 *//*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@@ -873,7 +873,7 @@ video {
 }
 
 /* Make elements with the HTML hidden attribute stay hidden by default */
-[hidden] {
+[hidden]:where(:not([hidden="until-found"])) {
   display: none;
 }
 
@@ -2707,6 +2707,7 @@ input.tab:checked + .tab-content,
 }
 .join.join-horizontal > :where(*:not(:first-child)):is(.btn) {
   margin-inline-start: calc(var(--border-btn) * -1);
+  margin-top: 0px;
 }
 .modal-top :where(.modal-box) {
   width: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.6.17",
+    "version": "0.6.19",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -10,6 +10,17 @@
     "publishConfig": {
         "access": "public"
     },
+    "imports": {
+        "#mutationOverTime": {
+            "storybook": "./src/preact/mutationsOverTime/mutationOverTimeWorker.mock.ts",
+            "default": "./src/preact/mutationsOverTime/mutationOverTimeWorker.ts"
+        },
+        "#*": [
+            "./*",
+            "./*.ts",
+            "./*.tsx"
+        ]
+    },
     "exports": {
         ".": {
             "import": "./dist/dashboard-components.js",
@@ -102,7 +113,7 @@
         "eslint-config-preact": "^1.3.0",
         "eslint-plugin-import": "^2.29.1",
         "eslint-plugin-jest": "^28.2.0",
-        "eslint-plugin-storybook": "^0.8.0",
+        "eslint-plugin-storybook": "^0.10.1",
         "http-server": "^14.1.1",
         "lit-analyzer": "^2.0.3",
         "msw": "^2.2.14",

package/src/operator/FetchInsertionsOperator.ts

@@ -2,7 +2,7 @@ import { type Dataset } from './Dataset';
 import { type Operator } from './Operator';
 import { fetchInsertions } from '../lapisApi/lapisApi';
 import { type InsertionEntry, type LapisFilter, type SequenceType } from '../types';
-import { Insertion } from '../utils/mutations';
+import { InsertionClass } from '../utils/mutations';
 
 export class FetchInsertionsOperator implements Operator<InsertionEntry> {
     constructor(
@@ -15,7 +15,7 @@ export class FetchInsertionsOperator implements Operator<InsertionEntry> {
 
         const content: InsertionEntry[] = insertions.map(({ count, insertedSymbols, sequenceName, position }) => ({
             type: 'insertion',
-            mutation: new Insertion(sequenceName ?? undefined, position, insertedSymbols),
+            mutation: new InsertionClass(sequenceName ?? undefined, position, insertedSymbols),
             count,
         }));
 

package/src/operator/FetchSubstitutionsOrDeletionsOperator.ts

@@ -2,7 +2,7 @@ import { type Dataset } from './Dataset';
 import { type Operator } from './Operator';
 import { fetchSubstitutionsOrDeletions } from '../lapisApi/lapisApi';
 import { type LapisFilter, type SequenceType, type SubstitutionOrDeletionEntry } from '../types';
-import { Deletion, Substitution } from '../utils/mutations';
+import { DeletionClass, SubstitutionClass } from '../utils/mutations';
 
 export class FetchSubstitutionsOrDeletionsOperator implements Operator<SubstitutionOrDeletionEntry> {
     constructor(
@@ -19,14 +19,14 @@ export class FetchSubstitutionsOrDeletionsOperator implements Operator<Substitut
                 if (mutationTo === '-') {
                     return {
                         type: 'deletion',
-                        mutation: new Deletion(sequenceName ?? undefined, mutationFrom, position),
+                        mutation: new DeletionClass(sequenceName ?? undefined, mutationFrom, position),
                         count,
                         proportion,
                     };
                 }
                 return {
                     type: 'substitution',
-                    mutation: new Substitution(sequenceName ?? undefined, mutationFrom, mutationTo, position),
+                    mutation: new SubstitutionClass(sequenceName ?? undefined, mutationFrom, mutationTo, position),
                     count,
                     proportion,
                 };

package/src/preact/mutationComparison/fetchMutationData.spec.ts

@@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest';
 
 import { filterMutationData } from './queryMutationData';
 import { type SubstitutionOrDeletion, type SubstitutionOrDeletionEntry } from '../../types';
-import { Deletion, Substitution } from '../../utils/mutations';
+import { DeletionClass, SubstitutionClass } from '../../utils/mutations';
 
 const segment = 'testSegment';
 const displayedSegment = { segment, label: 'label', checked: true };
@@ -19,14 +19,14 @@ describe('filterMutationData', () => {
             case 'substitution':
                 return {
                     type: 'substitution',
-                    mutation: new Substitution(segment, 'A', 'B', 0),
+                    mutation: new SubstitutionClass(segment, 'A', 'B', 0),
                     count: 0,
                     proportion: 0,
                 };
             case 'deletion':
                 return {
                     type: 'deletion',
-                    mutation: new Deletion(segment, 'A', 0),
+                    mutation: new DeletionClass(segment, 'A', 0),
                     count: 0,
                     proportion: 0,
                 };

package/src/preact/mutationComparison/getMutationComparisonTableData.spec.ts

@@ -4,7 +4,7 @@ import { getMutationComparisonTableData } from './getMutationComparisonTableData
 import { type MutationData } from './queryMutationData';
 import { type Dataset } from '../../operator/Dataset';
 import { type SubstitutionEntry } from '../../types';
-import { Substitution } from '../../utils/mutations';
+import { SubstitutionClass } from '../../utils/mutations';
 
 describe('getPrevalenceOverTimeTableData', () => {
     it('should flatten the data to CSV format', () => {
@@ -15,13 +15,13 @@ describe('getPrevalenceOverTimeTableData', () => {
                     data: [
                         {
                             type: 'substitution',
-                            mutation: new Substitution(undefined, 'A', 'T', 123),
+                            mutation: new SubstitutionClass(undefined, 'A', 'T', 123),
                             count: 1,
                             proportion: 0.123,
                         },
                         {
                             type: 'substitution',
-                            mutation: new Substitution(undefined, 'G', 'A', 234),
+                            mutation: new SubstitutionClass(undefined, 'G', 'A', 234),
                             count: 2,
                             proportion: 0.567,
                         },
@@ -32,13 +32,13 @@ describe('getPrevalenceOverTimeTableData', () => {
                     data: [
                         {
                             type: 'substitution',
-                            mutation: new Substitution(undefined, 'A', 'T', 123),
+                            mutation: new SubstitutionClass(undefined, 'A', 'T', 123),
                             count: 3,
                             proportion: 0.345,
                         },
                         {
                             type: 'substitution',
-                            mutation: new Substitution(undefined, 'G', 'A', 234),
+                            mutation: new SubstitutionClass(undefined, 'G', 'A', 234),
                             count: 4,
                             proportion: 0.789,
                         },
@@ -51,12 +51,12 @@ describe('getPrevalenceOverTimeTableData', () => {
 
         expect(result).toEqual([
             {
-                mutation: new Substitution(undefined, 'A', 'T', 123),
+                mutation: new SubstitutionClass(undefined, 'A', 'T', 123),
                 'Test 1 prevalence': 0.123,
                 'Test 2 prevalence': 0.345,
             },
             {
-                mutation: new Substitution(undefined, 'G', 'A', 234),
+                mutation: new SubstitutionClass(undefined, 'G', 'A', 234),
                 'Test 1 prevalence': 0.567,
                 'Test 2 prevalence': 0.789,
             },
@@ -67,7 +67,7 @@ describe('getPrevalenceOverTimeTableData', () => {
         function makeSubstitutionWithProportionAtPosition(proportion: number, position: number): SubstitutionEntry {
             return {
                 type: 'substitution',
-                mutation: new Substitution(undefined, 'A', 'T', position),
+                mutation: new SubstitutionClass(undefined, 'A', 'T', position),
                 count: 1,
                 proportion,
             };
@@ -106,17 +106,17 @@ describe('getPrevalenceOverTimeTableData', () => {
 
         expect(result).toEqual([
             {
-                mutation: new Substitution(undefined, 'A', 'T', 200),
+                mutation: new SubstitutionClass(undefined, 'A', 'T', 200),
                 'Test 1 prevalence': inRange,
                 'Test 2 prevalence': belowRange,
             },
             {
-                mutation: new Substitution(undefined, 'A', 'T', 300),
+                mutation: new SubstitutionClass(undefined, 'A', 'T', 300),
                 'Test 1 prevalence': inRange,
                 'Test 2 prevalence': inRange,
             },
             {
-                mutation: new Substitution(undefined, 'A', 'T', 400),
+                mutation: new SubstitutionClass(undefined, 'A', 'T', 400),
                 'Test 1 prevalence': inRange,
                 'Test 2 prevalence': aboveRange,
             },

package/src/preact/mutationComparison/getMutationComparisonTableData.ts

@@ -1,6 +1,6 @@
 import { type MutationData } from './queryMutationData';
 import { type Dataset } from '../../operator/Dataset';
-import { type Deletion, type Substitution } from '../../utils/mutations';
+import { type DeletionClass, type SubstitutionClass } from '../../utils/mutations';
 import { type ProportionInterval } from '../components/proportion-selector';
 
 type Proportions = {
@@ -8,7 +8,7 @@ type Proportions = {
 };
 
 type MutationComparisonRow = {
-    mutation: Substitution | Deletion;
+    mutation: SubstitutionClass | DeletionClass;
     proportions: Proportions;
 };
 
@@ -47,7 +47,7 @@ export function getMutationComparisonTableData(data: Dataset<MutationData>, prop
                         };
                     })
                     .reduce((acc, val) => ({ ...acc, ...val }), {}),
-            } as { mutation: Substitution | Deletion } & Proportions;
+            } as { mutation: SubstitutionClass | DeletionClass } & Proportions;
         })
         .filter((row) =>
             Object.values(row).some(
@@ -58,7 +58,7 @@ export function getMutationComparisonTableData(data: Dataset<MutationData>, prop
 }
 
 function initializeMutationRow(
-    mutation: Substitution | Deletion,
+    mutation: SubstitutionClass | DeletionClass,
     displayName: string,
     proportion: number,
 ): MutationComparisonRow {

package/src/preact/mutationComparison/mutation-comparison-table.tsx

@@ -3,7 +3,7 @@ import { type FunctionComponent } from 'preact';
 import { getMutationComparisonTableData } from './getMutationComparisonTableData';
 import { type MutationData } from './queryMutationData';
 import { type Dataset } from '../../operator/Dataset';
-import { type Deletion, type Substitution } from '../../utils/mutations';
+import { type DeletionClass, type SubstitutionClass } from '../../utils/mutations';
 import { type ProportionInterval } from '../components/proportion-selector';
 import { Table } from '../components/table';
 import { sortSubstitutionsAndDeletions } from '../shared/sort/sortSubstitutionsAndDeletions';
@@ -26,7 +26,7 @@ export const MutationComparisonTable: FunctionComponent<MutationsTableProps> = (
             sort: {
                 compare: sortSubstitutionsAndDeletions,
             },
-            formatter: (cell: Substitution | Deletion) => cell.toString(),
+            formatter: (cell: SubstitutionClass | DeletionClass) => cell.toString(),
         },
         {
             name: 'Prevalence',

package/src/preact/mutationFilter/mutation-filter.tsx

@@ -4,7 +4,12 @@ import { useContext, useRef, useState } from 'preact/hooks';
 import { MutationFilterInfo } from './mutation-filter-info';
 import { parseAndValidateMutation } from './parseAndValidateMutation';
 import { type ReferenceGenome } from '../../lapisApi/ReferenceGenome';
-import { type Deletion, type Insertion, type Mutation, type Substitution } from '../../utils/mutations';
+import {
+    type DeletionClass,
+    type InsertionClass,
+    type MutationClass,
+    type SubstitutionClass,
+} from '../../utils/mutations';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
 import { ErrorBoundary } from '../components/error-boundary';
 import { singleGraphColorRGBByName } from '../shared/charts/colors';
@@ -18,10 +23,10 @@ export interface MutationFilterProps extends MutationFilterInnerProps {
 }
 
 export type SelectedFilters = {
-    nucleotideMutations: (Substitution | Deletion)[];
-    aminoAcidMutations: (Substitution | Deletion)[];
-    nucleotideInsertions: Insertion[];
-    aminoAcidInsertions: Insertion[];
+    nucleotideMutations: (SubstitutionClass | DeletionClass)[];
+    aminoAcidMutations: (SubstitutionClass | DeletionClass)[];
+    nucleotideInsertions: InsertionClass[];
+    aminoAcidInsertions: InsertionClass[];
 };
 
 export type SelectedMutationFilterStrings = {
@@ -199,14 +204,18 @@ const SelectedMutationDisplay: FunctionComponent<{
                 <SelectedNucleotideMutation
                     key={mutation.toString()}
                     mutation={mutation}
-                    onDelete={(mutation: Substitution | Deletion) => onSelectedRemoved(mutation, 'nucleotideMutations')}
+                    onDelete={(mutation: SubstitutionClass | DeletionClass) =>
+                        onSelectedRemoved(mutation, 'nucleotideMutations')
+                    }
                 />
             ))}
             {selectedFilters.aminoAcidMutations.map((mutation) => (
                 <SelectedAminoAcidMutation
                     key={mutation.toString()}
                     mutation={mutation}
-                    onDelete={(mutation: Substitution | Deletion) => onSelectedRemoved(mutation, 'aminoAcidMutations')}
+                    onDelete={(mutation: SubstitutionClass | DeletionClass) =>
+                        onSelectedRemoved(mutation, 'aminoAcidMutations')
+                    }
                 />
             ))}
             {selectedFilters.nucleotideInsertions.map((insertion) => (
@@ -220,7 +229,7 @@ const SelectedMutationDisplay: FunctionComponent<{
                 <SelectedAminoAcidInsertion
                     key={insertion.toString()}
                     insertion={insertion}
-                    onDelete={(insertion: Insertion) => onSelectedRemoved(insertion, 'aminoAcidInsertions')}
+                    onDelete={(insertion: InsertionClass) => onSelectedRemoved(insertion, 'aminoAcidInsertions')}
                 />
             ))}
         </>
@@ -228,8 +237,8 @@ const SelectedMutationDisplay: FunctionComponent<{
 };
 
 const SelectedAminoAcidInsertion: FunctionComponent<{
-    insertion: Insertion;
-    onDelete: (insertion: Insertion) => void;
+    insertion: InsertionClass;
+    onDelete: (insertion: InsertionClass) => void;
 }> = ({ insertion, onDelete }) => {
     const backgroundColor = singleGraphColorRGBByName('teal', 0.3);
     const textColor = singleGraphColorRGBByName('teal', 1);
@@ -244,8 +253,8 @@ const SelectedAminoAcidInsertion: FunctionComponent<{
 };
 
 const SelectedAminoAcidMutation: FunctionComponent<{
-    mutation: Substitution | Deletion;
-    onDelete: (mutation: Substitution | Deletion) => void;
+    mutation: SubstitutionClass | DeletionClass;
+    onDelete: (mutation: SubstitutionClass | DeletionClass) => void;
 }> = ({ mutation, onDelete }) => {
     const backgroundColor = singleGraphColorRGBByName('rose', 0.3);
     const textColor = singleGraphColorRGBByName('rose', 1);
@@ -260,8 +269,8 @@ const SelectedAminoAcidMutation: FunctionComponent<{
 };
 
 const SelectedNucleotideMutation: FunctionComponent<{
-    mutation: Substitution | Deletion;
-    onDelete: (insertion: Substitution | Deletion) => void;
+    mutation: SubstitutionClass | DeletionClass;
+    onDelete: (insertion: SubstitutionClass | DeletionClass) => void;
 }> = ({ mutation, onDelete }) => {
     const backgroundColor = singleGraphColorRGBByName('indigo', 0.3);
     const textColor = singleGraphColorRGBByName('indigo', 1);
@@ -276,8 +285,8 @@ const SelectedNucleotideMutation: FunctionComponent<{
 };
 
 const SelectedNucleotideInsertion: FunctionComponent<{
-    insertion: Insertion;
-    onDelete: (insertion: Insertion) => void;
+    insertion: InsertionClass;
+    onDelete: (insertion: InsertionClass) => void;
 }> = ({ insertion, onDelete }) => {
     const backgroundColor = singleGraphColorRGBByName('green', 0.3);
     const textColor = singleGraphColorRGBByName('green', 1);
@@ -292,14 +301,14 @@ const SelectedNucleotideInsertion: FunctionComponent<{
     );
 };
 
-type SelectedFilterProps<MutationType extends Mutation> = {
+type SelectedFilterProps<MutationType extends MutationClass> = {
     mutation: MutationType;
     onDelete: (mutation: MutationType) => void;
     backgroundColor: string;
     textColor: string;
 };
 
-const SelectedFilter = <MutationType extends Mutation>({
+const SelectedFilter = <MutationType extends MutationClass>({
     mutation,
     onDelete,
     backgroundColor,

package/src/preact/mutationFilter/parseAndValidateMutation.ts

@@ -1,7 +1,7 @@
 import { type SelectedFilters } from './mutation-filter';
 import { sequenceTypeFromSegment } from './sequenceTypeFromSegment';
 import type { ReferenceGenome } from '../../lapisApi/ReferenceGenome';
-import { Deletion, Insertion, Substitution } from '../../utils/mutations';
+import { DeletionClass, InsertionClass, SubstitutionClass } from '../../utils/mutations';
 
 type ParsedMutationFilter = {
     [MutationType in keyof SelectedFilters]: { type: MutationType; value: SelectedFilters[MutationType][number] };
@@ -11,7 +11,7 @@ export const parseAndValidateMutation = (
     value: string,
     referenceGenome: ReferenceGenome,
 ): ParsedMutationFilter | null => {
-    const possibleInsertion = Insertion.parse(value);
+    const possibleInsertion = InsertionClass.parse(value);
     if (possibleInsertion !== null) {
         const sequenceType = sequenceTypeFromSegment(possibleInsertion.segment, referenceGenome);
         switch (sequenceType) {
@@ -24,7 +24,7 @@ export const parseAndValidateMutation = (
         }
     }
 
-    const possibleDeletion = Deletion.parse(value);
+    const possibleDeletion = DeletionClass.parse(value);
     if (possibleDeletion !== null) {
         const sequenceType = sequenceTypeFromSegment(possibleDeletion.segment, referenceGenome);
         switch (sequenceType) {
@@ -37,7 +37,7 @@ export const parseAndValidateMutation = (
         }
     }
 
-    const possibleSubstitution = Substitution.parse(value);
+    const possibleSubstitution = SubstitutionClass.parse(value);
     if (possibleSubstitution !== null) {
         const sequenceType = sequenceTypeFromSegment(possibleSubstitution.segment, referenceGenome);
         switch (sequenceType) {