@genspectrum/dashboard-components 0.6.18 → 0.7.0

package/src/preact/dateRangeSelector/date-range-selector.tsx

@@ -4,33 +4,28 @@ import { useEffect, useRef, useState } from 'preact/hooks';
 
 import { computeInitialValues } from './computeInitialValues';
 import { toYYYYMMDD } from './dateConversion';
-import {
-    type CustomSelectOption,
-    getDatesForSelectorValue,
-    getSelectableOptions,
-    type PresetOptionValues,
-} from './selectableOptions';
+import { type DateRangeOption } from './dateRangeOption';
+import { getDatesForSelectorValue, getSelectableOptions } from './selectableOptions';
 import { ErrorBoundary } from '../components/error-boundary';
 import { Select } from '../components/select';
 import type { ScaleType } from '../shared/charts/getYAxisScale';
 
-export interface DateRangeSelectorProps<CustomLabel extends string> extends DateRangeSelectorPropsInner<CustomLabel> {
+const customOption = 'Custom';
+
+export interface DateRangeSelectorProps extends DateRangeSelectorPropsInner {
     width: string;
 }
 
-export interface DateRangeSelectorPropsInner<CustomLabel extends string> {
-    customSelectOptions: CustomSelectOption<CustomLabel>[];
+export interface DateRangeSelectorPropsInner {
+    dateRangeOptions: DateRangeOption[];
     earliestDate: string;
-    initialValue: PresetOptionValues | CustomLabel;
+    initialValue: string | undefined;
     initialDateFrom: string;
     initialDateTo: string;
     dateColumn: string;
 }
 
-export const DateRangeSelector = <CustomLabel extends string>({
-    width,
-    ...innerProps
-}: DateRangeSelectorProps<CustomLabel>) => {
+export const DateRangeSelector = ({ width, ...innerProps }: DateRangeSelectorProps) => {
     const size = { width, height: '3rem' };
 
     return (
@@ -42,20 +37,20 @@ export const DateRangeSelector = <CustomLabel extends string>({
     );
 };
 
-export const DateRangeSelectorInner = <CustomLabel extends string>({
-    customSelectOptions,
+export const DateRangeSelectorInner = ({
+    dateRangeOptions,
     earliestDate = '1900-01-01',
     initialValue,
     dateColumn,
     initialDateFrom,
     initialDateTo,
-}: DateRangeSelectorPropsInner<CustomLabel>) => {
+}: DateRangeSelectorPropsInner) => {
     const initialValues = computeInitialValues(
         initialValue,
         initialDateFrom,
         initialDateTo,
         earliestDate,
-        customSelectOptions,
+        dateRangeOptions,
     );
 
     const fromDatePickerRef = useRef<HTMLInputElement>(null);
@@ -64,7 +59,7 @@ export const DateRangeSelectorInner = <CustomLabel extends string>({
     const [dateFromPicker, setDateFromPicker] = useState<flatpickr.Instance | null>(null);
     const [dateToPicker, setDateToPicker] = useState<flatpickr.Instance | null>(null);
 
-    const [selectedDateRange, setSelectedDateRange] = useState<CustomLabel | PresetOptionValues>(
+    const [selectedDateRange, setSelectedDateRange] = useState<string | undefined>(
         initialValues.initialSelectedDateRange,
     );
 
@@ -104,10 +99,10 @@ export const DateRangeSelectorInner = <CustomLabel extends string>({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [fromDatePickerRef, toDatePickerRef]);
 
-    const onSelectChange = (value: CustomLabel | PresetOptionValues) => {
+    const onSelectChange = (value: string) => {
         setSelectedDateRange(value);
 
-        const dateRange = getDatesForSelectorValue(value, customSelectOptions, earliestDate);
+        const dateRange = getDatesForSelectorValue(value, dateRangeOptions, earliestDate);
 
         dateToPicker?.set('minDate', dateRange.dateFrom);
         dateFromPicker?.set('maxDate', dateRange.dateTo);
@@ -130,7 +125,7 @@ export const DateRangeSelectorInner = <CustomLabel extends string>({
 
         selectedDates.dateFrom = dateFromPicker?.selectedDates[0] || new Date();
         dateToPicker?.set('minDate', dateFromPicker?.selectedDates[0]);
-        setSelectedDateRange('custom');
+        setSelectedDateRange(customOption);
 
         submit();
     };
@@ -142,7 +137,7 @@ export const DateRangeSelectorInner = <CustomLabel extends string>({
 
         selectedDates.dateTo = dateToPicker?.selectedDates[0] || new Date();
         dateFromPicker?.set('maxDate', dateToPicker?.selectedDates[0]);
-        setSelectedDateRange('custom');
+        setSelectedDateRange(customOption);
 
         submit();
     };
@@ -168,14 +163,17 @@ export const DateRangeSelectorInner = <CustomLabel extends string>({
     return (
         <div class='flex flex-wrap' ref={divRef}>
             <Select
-                items={getSelectableOptions(customSelectOptions)}
-                selected={selectedDateRange}
+                items={[
+                    ...getSelectableOptions(dateRangeOptions),
+                    { label: customOption, value: customOption, disabled: true },
+                ]}
+                selected={selectedDateRange ?? customOption}
                 selectStyle='select-bordered rounded-none flex-grow min-w-[7.5rem]'
                 onChange={(event: Event) => {
                     event.preventDefault();
                     const select = event.target as HTMLSelectElement;
                     const value = select.value as ScaleType;
-                    onSelectChange(value as CustomLabel | PresetOptionValues);
+                    onSelectChange(value);
                 }}
             />
             <div className={'flex flex-wrap flex-grow'}>

package/src/preact/dateRangeSelector/dateRangeOption.ts

@@ -0,0 +1,65 @@
+import { toYYYYMMDD } from './dateConversion';
+
+/**
+ * A date range option that can be used in the `gs-date-range-selector` component.
+ */
+export type DateRangeOption = {
+    /** The label of the date range option that will be shown to the user */
+    label: string;
+    /**
+     * The start date of the date range in the format `YYYY-MM-DD`.
+     * If not set, the date range selector will default to the `earliestDate` property.
+     */
+    dateFrom?: string;
+    /**
+     * The end date of the date range in the format `YYYY-MM-DD`.
+     * If not set, the date range selector will default to the current date.
+     */
+    dateTo?: string;
+};
+
+const today = new Date();
+
+const twoWeeksAgo = new Date();
+twoWeeksAgo.setDate(today.getDate() - 14);
+
+const lastMonth = new Date(today);
+lastMonth.setMonth(today.getMonth() - 1);
+
+const last2Months = new Date(today);
+last2Months.setMonth(today.getMonth() - 2);
+
+const last3Months = new Date(today);
+last3Months.setMonth(today.getMonth() - 3);
+
+const last6Months = new Date(today);
+last6Months.setMonth(today.getMonth() - 6);
+
+/**
+ * Presets for the `gs-date-range-selector` component that can be used as `dateRangeOptions`.
+ */
+export const dateRangeOptionPresets = {
+    last2Weeks: {
+        label: 'Last 2 weeks',
+        dateFrom: toYYYYMMDD(twoWeeksAgo),
+    },
+    lastMonth: {
+        label: 'Last month',
+        dateFrom: toYYYYMMDD(lastMonth),
+    },
+    last2Months: {
+        label: 'Last 2 months',
+        dateFrom: toYYYYMMDD(last2Months),
+    },
+    last3Months: {
+        label: 'Last 3 months',
+        dateFrom: toYYYYMMDD(last3Months),
+    },
+    last6Months: {
+        label: 'Last 6 months',
+        dateFrom: toYYYYMMDD(last6Months),
+    },
+    allTimes: {
+        label: 'All times',
+    },
+} satisfies Record<string, DateRangeOption>;

package/src/preact/dateRangeSelector/selectableOptions.ts

@@ -1,79 +1,30 @@
-export const PRESET_VALUE_CUSTOM = 'custom';
-export const PRESET_VALUE_ALL_TIMES = 'allTimes';
-export const PRESET_VALUE_LAST_2_WEEKS = 'last2Weeks';
-export const PRESET_VALUE_LAST_MONTH = 'lastMonth';
-export const PRESET_VALUE_LAST_2_MONTHS = 'last2Months';
-export const PRESET_VALUE_LAST_3_MONTHS = 'last3Months';
-export const PRESET_VALUE_LAST_6_MONTHS = 'last6Months';
+import { type DateRangeOption } from './dateRangeOption';
 
-export const presets = {
-    [PRESET_VALUE_CUSTOM]: { label: 'Custom' },
-    [PRESET_VALUE_ALL_TIMES]: { label: 'All times' },
-    [PRESET_VALUE_LAST_2_WEEKS]: { label: 'Last 2 weeks' },
-    [PRESET_VALUE_LAST_MONTH]: { label: 'Last month' },
-    [PRESET_VALUE_LAST_2_MONTHS]: { label: 'Last 2 months' },
-    [PRESET_VALUE_LAST_3_MONTHS]: { label: 'Last 3 months' },
-    [PRESET_VALUE_LAST_6_MONTHS]: { label: 'Last 6 months' },
-};
-
-export type PresetOptionValues = keyof typeof presets;
-
-export type CustomSelectOption<CustomLabel extends string> = { label: CustomLabel; dateFrom: string; dateTo: string };
-
-export const getSelectableOptions = <Label extends string>(customSelectOptions: CustomSelectOption<Label>[]) => {
-    const presetOptions = Object.entries(presets).map(([key, value]) => {
-        return { label: value.label, value: key };
-    });
-
-    const customOptions = customSelectOptions.map((customSelectOption) => {
+export const getSelectableOptions = (dateRangeOptions: DateRangeOption[]) => {
+    return dateRangeOptions.map((customSelectOption) => {
         return { label: customSelectOption.label, value: customSelectOption.label };
     });
-
-    return [...presetOptions, ...customOptions];
 };
 
-export const getDatesForSelectorValue = <Label extends string>(
-    selectorValue: string,
-    customSelectOptions: CustomSelectOption<Label>[],
+export const getDatesForSelectorValue = (
+    initialSelectedDateRange: string | undefined,
+    dateRangeOptions: DateRangeOption[],
     earliestDate: string,
 ) => {
     const today = new Date();
+    const defaultDates = { dateFrom: new Date(earliestDate), dateTo: today };
 
-    const customSelectOption = customSelectOptions.find((option) => option.label === selectorValue);
-    if (customSelectOption) {
-        return { dateFrom: new Date(customSelectOption.dateFrom), dateTo: new Date(customSelectOption.dateTo) };
+    if (initialSelectedDateRange === undefined) {
+        return defaultDates;
     }
 
-    switch (selectorValue) {
-        case PRESET_VALUE_LAST_2_WEEKS: {
-            const twoWeeksAgo = new Date(today);
-            twoWeeksAgo.setDate(today.getDate() - 14);
-            return { dateFrom: twoWeeksAgo, dateTo: today };
-        }
-        case PRESET_VALUE_LAST_MONTH: {
-            const lastMonth = new Date(today);
-            lastMonth.setMonth(today.getMonth() - 1);
-            return { dateFrom: lastMonth, dateTo: today };
-        }
-        case PRESET_VALUE_LAST_2_MONTHS: {
-            const twoMonthsAgo = new Date(today);
-            twoMonthsAgo.setMonth(today.getMonth() - 2);
-            return { dateFrom: twoMonthsAgo, dateTo: today };
-        }
-        case PRESET_VALUE_LAST_3_MONTHS: {
-            const threeMonthsAgo = new Date(today);
-            threeMonthsAgo.setMonth(today.getMonth() - 3);
-            return { dateFrom: threeMonthsAgo, dateTo: today };
-        }
-        case PRESET_VALUE_LAST_6_MONTHS: {
-            const sixMonthsAgo = new Date(today);
-            sixMonthsAgo.setMonth(today.getMonth() - 6);
-            return { dateFrom: sixMonthsAgo, dateTo: today };
-        }
-        case PRESET_VALUE_ALL_TIMES: {
-            return { dateFrom: new Date(earliestDate), dateTo: today };
-        }
-        default:
-            return { dateFrom: today, dateTo: today };
+    const dateRangeOption = dateRangeOptions.find((option) => option.label === initialSelectedDateRange);
+    if (dateRangeOption) {
+        return {
+            dateFrom: new Date(dateRangeOption.dateFrom ?? earliestDate),
+            dateTo: new Date(dateRangeOption.dateTo ?? today),
+        };
     }
+
+    return defaultDates;
 };

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) {