@genspectrum/dashboard-components 1.5.0 → 1.7.0

package/dist/util.d.ts

@@ -194,6 +194,19 @@ declare const mapSourceSchema: default_2.ZodObject<{
     topologyObjectsKey: string;
 }>;
 
+export declare type MeanProportionInterval = default_2.infer<typeof meanProportionIntervalSchema>;
+
+declare const meanProportionIntervalSchema: default_2.ZodObject<{
+    min: default_2.ZodNumber;
+    max: default_2.ZodNumber;
+}, "strip", default_2.ZodTypeAny, {
+    min: number;
+    max: number;
+}, {
+    min: number;
+    max: number;
+}>;
+
 export declare type MutationAnnotation = default_2.infer<typeof mutationAnnotationSchema>;
 
 export declare type MutationAnnotations = default_2.infer<typeof mutationAnnotationsSchema>;
@@ -430,6 +443,17 @@ export declare type MutationsView = default_2.infer<typeof mutationsViewSchema>;
 
 declare const mutationsViewSchema: default_2.ZodUnion<[default_2.ZodLiteral<"table">, default_2.ZodLiteral<"grid">, default_2.ZodLiteral<"insertions">]>;
 
+export declare type MutationType = default_2.infer<typeof mutationTypeSchema>;
+
+export declare const mutationType: {
+    readonly nucleotideMutations: "nucleotideMutations";
+    readonly nucleotideInsertions: "nucleotideInsertions";
+    readonly aminoAcidMutations: "aminoAcidMutations";
+    readonly aminoAcidInsertions: "aminoAcidInsertions";
+};
+
+declare const mutationTypeSchema: default_2.ZodEnum<["nucleotideMutations", "nucleotideInsertions", "aminoAcidMutations", "aminoAcidInsertions"]>;
+
 export declare type NamedLapisFilter = default_2.infer<typeof namedLapisFilterSchema>;
 
 declare const namedLapisFilterSchema: default_2.ZodObject<{
@@ -1013,7 +1037,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1021,7 +1045,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1029,7 +1053,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1037,7 +1061,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1045,7 +1069,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -1053,7 +1077,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1077,26 +1101,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
+        'gs-date-range-filter': DateRangeFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.locationChanged]: LocationChangedEvent;
-    }
-}
-
-
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
-        }
-    }
-}
-
-
-declare global {
-    interface HTMLElementTagNameMap {
-        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
+        [gsEventNames.dateRangeFilterChanged]: CustomEvent<Record<string, string>>;
+        [gsEventNames.dateRangeOptionChanged]: DateRangeOptionChangedEvent;
     }
 }
 
@@ -1104,7 +1113,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1112,11 +1121,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-filter': DateRangeFilterComponent;
+        'gs-location-filter': LocationFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.dateRangeFilterChanged]: CustomEvent<Record<string, string>>;
-        [gsEventNames.dateRangeOptionChanged]: DateRangeOptionChangedEvent;
+        [gsEventNames.locationChanged]: LocationChangedEvent;
     }
 }
 
@@ -1124,7 +1132,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1207,6 +1215,22 @@ declare global {
 }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
+    }
+}
+
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
+
 declare module 'chart.js' {
     interface CartesianScaleTypeRegistry {
         logit: {

package/dist/util.js

@@ -1,4 +1,4 @@
-import { D, a, L, N, b, T, d, g, v } from "./NumberRangeFilterChangedEvent-CQ32Qy8D.js";
+import { D, a, L, N, b, T, d, g, m, v } from "./NumberRangeFilterChangedEvent-BnPI-Asz.js";
 export {
   D as DateRangeOptionChangedEvent,
   a as LineageFilterChangedEvent,
@@ -8,6 +8,7 @@ export {
   T as TextFilterChangedEvent,
   d as dateRangeOptionPresets,
   g as gsEventNames,
+  m as mutationType,
   v as views
 };
 //# sourceMappingURL=util.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "1.5.0",
+    "version": "1.7.0",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",

package/src/preact/genomeViewer/CDSPlot.tsx

@@ -20,9 +20,16 @@ function getMaxTickNumber(fullWidth: number): number {
 }
 
 function getTicks(zoomStart: number, zoomEnd: number, fullWidth: number) {
-    const maxTickNumber = getMaxTickNumber(fullWidth);
+    let maxTickNumber = getMaxTickNumber(fullWidth);
     const length = zoomEnd - zoomStart;
-    const minTickSize = length / maxTickNumber;
+    let minTickSize = length / maxTickNumber;
+    if (minTickSize <= 1) {
+        maxTickNumber = MIN_TICK_NUMBER;
+        minTickSize = length / maxTickNumber;
+    }
+    if (minTickSize <= 1) {
+        return [];
+    }
     let maxTickSize = 10 ** Math.round(Math.log(minTickSize) / Math.log(10));
     const numTicks = Math.round(length / maxTickSize);
     if (numTicks > maxTickNumber) {
@@ -78,6 +85,7 @@ const XAxis: FunctionComponent<XAxisProps> = (componentProps) => {
                             width: `calc(${widthPercent}% - 1px)`,
                         }}
                     >
+                        {/* TODO(#994): determine if text can be shown based on text width */}
                         {width >= averageWidth ? tick.start : ''}
                     </div>
                 );
@@ -142,6 +150,9 @@ const CDSBars: FunctionComponent<CDSBarsProps> = (componentProps) => {
                                 if (start >= end) {
                                     return null;
                                 }
+                                if (zoomEnd - zoomStart <= 2) {
+                                    return null;
+                                }
 
                                 const widthPercent = ((end - start) / visibleRegionLength) * 100;
                                 const leftPercent = ((start - zoomStart) / visibleRegionLength) * 100;

package/src/preact/genomeViewer/loadGff3.ts

@@ -22,6 +22,12 @@ export async function loadGff3(gff3Source: string, genomeLength: number | undefi
     }
 
     const response = await fetch(gff3Source);
+    if (!response.ok) {
+        throw new UserFacingError(
+            'GFF3 download failed',
+            `Server returned ${response.status} ${response.statusText} for ${response.url}`,
+        );
+    }
     const content = await response.text();
     genomeLength ??= loadGenomeLength(content);
     return { features: parseGFF3(content), length: genomeLength };

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

@@ -139,8 +139,8 @@ const AminoAcidMutationsInfo = () => {
             <InfoParagraph>
                 An amino acid mutation has the format <b>&lt;gene&gt;:&lt;position&gt;&lt;base&gt;</b> or
                 <b>&lt;gene&gt;:&lt;base_ref&gt;&lt;position&gt;&lt;base&gt;</b>. A <b>&lt;base&gt;</b> can be one of
-                the 20 amino acid codes. It can also be <b>-</b> for deletion and <b>X</b> for unknown. Example:{' '}
-                <ExampleMutation mutationType='substitution' sequenceType='amino acid' />.
+                the 20 amino acid codes. It can also be <b>*</b> for a stop codon, <b>-</b> for deletion and <b>X</b>{' '}
+                for unknown. Example: <ExampleMutation mutationType='substitution' sequenceType='amino acid' />.
             </InfoParagraph>
             <InfoParagraph>
                 Insertions can be searched for in the same manner, they just need to have <b>ins_</b> appended to the

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

@@ -6,6 +6,7 @@ import { MutationFilter, type MutationFilterProps } from './mutation-filter';
 import { previewHandles } from '../../../.storybook/preview';
 import { LAPIS_URL } from '../../constants';
 import referenceGenome from '../../lapisApi/__mockData__/referenceGenome.json';
+import { mutationType } from '../../types';
 import { gsEventNames } from '../../utils/gsEventNames';
 import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
@@ -27,6 +28,11 @@ const meta: Meta<MutationFilterProps> = {
                 type: 'object',
             },
         },
+        enabledMutationTypes: {
+            control: {
+                type: 'object',
+            },
+        },
     },
 };
 
@@ -36,7 +42,11 @@ export const Default: StoryObj<MutationFilterProps> = {
     render: (args) => (
         <LapisUrlContextProvider value={LAPIS_URL}>
             <ReferenceGenomeContext.Provider value={referenceGenome}>
-                <MutationFilter width={args.width} initialValue={args.initialValue} />
+                <MutationFilter
+                    width={args.width}
+                    initialValue={args.initialValue}
+                    enabledMutationTypes={args.enabledMutationTypes}
+                />
             </ReferenceGenomeContext.Provider>
         </LapisUrlContextProvider>
     ),
@@ -217,6 +227,67 @@ export const IgnoresDuplicatesOnPasteCommaSeparatedList: StoryObj<MutationFilter
     },
 };
 
+export const FiltersOutDisabledMutationTypes: StoryObj<MutationFilterProps> = {
+    ...Default,
+    args: {
+        ...Default.args,
+        enabledMutationTypes: [mutationType.nucleotideMutations],
+    },
+    play: async ({ canvasElement, step }) => {
+        const { canvas, changedListenerMock } = await prepare(canvasElement, step);
+
+        await step('Enters an invalid insertion mutation', async () => {
+            await testNoOptionsExist(canvas, 'ins_23:T');
+            await expect(changedListenerMock).not.toHaveBeenCalled();
+
+            await userEvent.type(inputField(canvas), '{backspace>12/}', INPUT_DELAY);
+        });
+
+        await step('Enters an invalid amino acid mutation', async () => {
+            await testNoOptionsExist(canvas, 'S:A1234T');
+            await expect(changedListenerMock).not.toHaveBeenCalled();
+
+            await userEvent.type(inputField(canvas), '{backspace>12/}', INPUT_DELAY);
+        });
+
+        await step('Enter a comma separated list of invalid mutations', async () => {
+            await pasteMutations(canvas, 'insX, ins_123:AA');
+
+            await waitFor(() =>
+                expect(changedListenerMock).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        detail: {
+                            nucleotideMutations: [],
+                            aminoAcidMutations: [],
+                            nucleotideInsertions: [],
+                            aminoAcidInsertions: [],
+                        },
+                    }),
+                ),
+            );
+
+            await userEvent.type(inputField(canvas), '{backspace>24/}', INPUT_DELAY);
+        });
+
+        await step('Enter a valid mutation', async () => {
+            await submitMutation(canvas, 'A123T');
+
+            await waitFor(() =>
+                expect(changedListenerMock).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        detail: {
+                            nucleotideMutations: ['A123T'],
+                            aminoAcidMutations: [],
+                            nucleotideInsertions: [],
+                            aminoAcidInsertions: [],
+                        },
+                    }),
+                ),
+            );
+        });
+    },
+};
+
 export const FiresFilterChangedEvents: StoryObj<MutationFilterProps> = {
     ...Default,
     play: async ({ canvasElement, step }) => {

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

@@ -1,13 +1,19 @@
 import { useCombobox, useMultipleSelection } from 'downshift/preact';
 import { type FunctionComponent } from 'preact';
-import { useContext, useMemo, useRef, useState } from 'preact/hooks';
+import { useContext, useEffect, useMemo, useRef, useState } from 'preact/hooks';
 import z from 'zod';
 
 import { getExampleMutation } from './ExampleMutation';
 import { MutationFilterInfo } from './mutation-filter-info';
 import { parseAndValidateMutation } from './parseAndValidateMutation';
 import { type ReferenceGenome } from '../../lapisApi/ReferenceGenome';
-import { type MutationsFilter, mutationsFilterSchema } from '../../types';
+import {
+    type MutationsFilter,
+    mutationsFilterSchema,
+    mutationType,
+    mutationTypeSchema,
+    type MutationType,
+} from '../../types';
 import { gsEventNames } from '../../utils/gsEventNames';
 import { type DeletionClass, type InsertionClass, type SubstitutionClass } from '../../utils/mutations';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
@@ -17,6 +23,7 @@ import { singleGraphColorRGBByName } from '../shared/charts/colors';
 
 const mutationFilterInnerPropsSchema = z.object({
     initialValue: z.union([mutationsFilterSchema.optional(), z.array(z.string()), z.undefined()]),
+    enabledMutationTypes: z.array(mutationTypeSchema).optional(),
 });
 
 const mutationFilterPropsSchema = mutationFilterInnerPropsSchema.extend({
@@ -27,22 +34,22 @@ export type MutationFilterInnerProps = z.infer<typeof mutationFilterInnerPropsSc
 export type MutationFilterProps = z.infer<typeof mutationFilterPropsSchema>;
 
 type SelectedNucleotideMutation = {
-    type: 'nucleotideMutations';
+    type: typeof mutationType.nucleotideMutations;
     value: SubstitutionClass | DeletionClass;
 };
 
 type SelectedAminoAcidMutation = {
-    type: 'aminoAcidMutations';
+    type: typeof mutationType.aminoAcidMutations;
     value: SubstitutionClass | DeletionClass;
 };
 
 type SelectedNucleotideInsertion = {
-    type: 'nucleotideInsertions';
+    type: typeof mutationType.nucleotideInsertions;
     value: InsertionClass;
 };
 
 type SelectedAminoAcidInsertion = {
-    type: 'aminoAcidInsertions';
+    type: typeof mutationType.aminoAcidInsertions;
     value: InsertionClass;
 };
 
@@ -53,7 +60,7 @@ export type MutationFilterItem =
     | SelectedAminoAcidInsertion;
 
 export const MutationFilter: FunctionComponent<MutationFilterProps> = (props) => {
-    const { width, initialValue } = props;
+    const { width, initialValue, enabledMutationTypes } = props;
     return (
         <ErrorBoundary
             size={{ height: '40px', width }}
@@ -62,20 +69,23 @@ export const MutationFilter: FunctionComponent<MutationFilterProps> = (props) =>
             componentProps={props}
         >
             <div style={{ width }}>
-                <MutationFilterInner initialValue={initialValue} />
+                <MutationFilterInner initialValue={initialValue} enabledMutationTypes={enabledMutationTypes} />
             </div>
         </ErrorBoundary>
     );
 };
 
-function MutationFilterInner({ initialValue }: MutationFilterInnerProps) {
+function MutationFilterInner({
+    initialValue,
+    enabledMutationTypes = Object.values(mutationType),
+}: MutationFilterInnerProps) {
     const referenceGenome = useContext(ReferenceGenomeContext);
     const filterRef = useRef<HTMLDivElement>(null);
     const [inputValue, setInputValue] = useState('');
 
     const initialState = useMemo(() => {
-        return getInitialState(initialValue, referenceGenome);
-    }, [initialValue, referenceGenome]);
+        return getInitialState(initialValue, referenceGenome, enabledMutationTypes);
+    }, [initialValue, referenceGenome, enabledMutationTypes]);
 
     const [selectedItems, setSelectedItems] = useState<MutationFilterItem[]>(initialState);
     const [itemCandidate, setItemCandidate] = useState<MutationFilterItem | null>(null);
@@ -83,6 +93,12 @@ function MutationFilterInner({ initialValue }: MutationFilterInnerProps) {
 
     const items = itemCandidate ? [itemCandidate] : [];
 
+    useEffect(() => {
+        setSelectedItems((prevSelectedItems) =>
+            prevSelectedItems.filter((mutFilterItem) => enabledMutationTypes.includes(mutFilterItem.type)),
+        );
+    }, [enabledMutationTypes, selectedItems]);
+
     const fireChangeEvent = (selectedFilters: MutationFilterItem[]) => {
         const detail = mapToMutationFilterStrings(selectedFilters);
 
@@ -115,16 +131,24 @@ function MutationFilterInner({ initialValue }: MutationFilterInnerProps) {
             const values = newInputValue.split(',').map((value) => {
                 return { value, parsedValue: parseAndValidateMutation(value.trim(), referenceGenome) };
             });
-            const validEntries = values.map((value) => value.parsedValue).filter((value) => value !== null);
-            const invalidInput = values
-                .filter((value) => value.parsedValue === null)
-                .map((value) => value.value.trim())
-                .join(',');
+
+            const validEntries: MutationFilterItem[] = [];
+            const rejected: string[] = [];
+
+            for (const v of values) {
+                if (v.parsedValue === null) {
+                    rejected.push(v.value.trim());
+                } else if (enabledMutationTypes.includes(v.parsedValue.type)) {
+                    validEntries.push(v.parsedValue);
+                } else {
+                    rejected.push(v.parsedValue.value.code);
+                }
+            }
 
             const selectedItemCandidates = [...selectedItems, ...validEntries];
 
             handleSelectedItemsChanged(extractUniqueValues(selectedItemCandidates));
-            setInputValue(invalidInput);
+            setInputValue(rejected.join(','));
             setItemCandidate(null);
         } else {
             setInputValue(newInputValue ?? '');
@@ -133,7 +157,8 @@ function MutationFilterInner({ initialValue }: MutationFilterInnerProps) {
                 const alreadyExists = selectedItems.find(
                     (selectedItem) => selectedItem.value.code === candidate?.value.code,
                 );
-                if (!alreadyExists) {
+                const allowedType = candidate !== null && enabledMutationTypes.includes(candidate.type);
+                if (!alreadyExists && allowedType) {
                     setItemCandidate(candidate);
                 }
             }
@@ -216,7 +241,7 @@ function MutationFilterInner({ initialValue }: MutationFilterInnerProps) {
                 })}
                 <div className='flex gap-0.5 grow p-1'>
                     <input
-                        placeholder={getPlaceholder(referenceGenome)}
+                        placeholder={getPlaceholder(referenceGenome, enabledMutationTypes)}
                         className='w-full focus:outline-none min-w-8'
                         {...getInputProps(getDropdownProps({ preventKeyAction: isOpen }))}
                         onBlur={() => {
@@ -261,7 +286,11 @@ function extractUniqueValues(newSelectedItems: MutationFilterItem[]) {
     return Array.from(uniqueMutationsMap.values());
 }
 
-function getInitialState(initialValue: MutationsFilter | string[] | undefined, referenceGenome: ReferenceGenome) {
+function getInitialState(
+    initialValue: MutationsFilter | string[] | undefined,
+    referenceGenome: ReferenceGenome,
+    enabledMutationTypes: MutationType[],
+) {
     if (initialValue === undefined) {
         return [];
     }
@@ -270,31 +299,40 @@ function getInitialState(initialValue: MutationsFilter | string[] | undefined, r
 
     return values
         .map((value) => parseAndValidateMutation(value, referenceGenome))
-        .filter((parsedMutation) => parsedMutation !== null);
+        .filter((parsedMutation): parsedMutation is MutationFilterItem => parsedMutation !== null)
+        .filter((mutation) => enabledMutationTypes.includes(mutation.type));
 }
 
-function getPlaceholder(referenceGenome: ReferenceGenome) {
-    const nucleotideSubstitution = getExampleMutation(referenceGenome, 'nucleotide', 'substitution');
-    const nucleotideInsertion = getExampleMutation(referenceGenome, 'nucleotide', 'insertion');
-    const aminoAcidSubstitution = getExampleMutation(referenceGenome, 'amino acid', 'substitution');
-    const aminoAcidInsertion = getExampleMutation(referenceGenome, 'amino acid', 'insertion');
+function getPlaceholder(referenceGenome: ReferenceGenome, enabledMutationTypes: MutationType[]) {
+    const exampleMutationList = [];
+
+    if (enabledMutationTypes.includes(mutationType.nucleotideMutations)) {
+        exampleMutationList.push(getExampleMutation(referenceGenome, 'nucleotide', 'substitution'));
+    }
+    if (enabledMutationTypes.includes(mutationType.nucleotideInsertions)) {
+        exampleMutationList.push(getExampleMutation(referenceGenome, 'nucleotide', 'insertion'));
+    }
+    if (enabledMutationTypes.includes(mutationType.aminoAcidMutations)) {
+        exampleMutationList.push(getExampleMutation(referenceGenome, 'amino acid', 'substitution'));
+    }
+    if (enabledMutationTypes.includes(mutationType.aminoAcidInsertions)) {
+        exampleMutationList.push(getExampleMutation(referenceGenome, 'amino acid', 'insertion'));
+    }
 
-    const exampleMutations = [nucleotideSubstitution, nucleotideInsertion, aminoAcidSubstitution, aminoAcidInsertion]
-        .filter((example) => example !== '')
-        .join(', ');
+    const exampleMutations = exampleMutationList.filter((example) => example !== '').join(', ');
 
     return `Enter a mutation (e.g. ${exampleMutations})`;
 }
 
 const backgroundColorMap = (data: MutationFilterItem, alpha: number = 0.4) => {
     switch (data.type) {
-        case 'nucleotideMutations':
+        case mutationType.nucleotideMutations:
             return singleGraphColorRGBByName('green', alpha);
-        case 'aminoAcidMutations':
+        case mutationType.aminoAcidMutations:
             return singleGraphColorRGBByName('teal', alpha);
-        case 'nucleotideInsertions':
+        case mutationType.nucleotideInsertions:
             return singleGraphColorRGBByName('indigo', alpha);
-        case 'aminoAcidInsertions':
+        case mutationType.aminoAcidInsertions:
             return singleGraphColorRGBByName('purple', alpha);
     }
 };
@@ -329,13 +367,13 @@ function mapToMutationFilterStrings(selectedFilters: MutationFilterItem[]) {
     return selectedFilters.reduce<MutationsFilter>(
         (acc, filter) => {
             switch (filter.type) {
-                case 'nucleotideMutations':
+                case mutationType.nucleotideMutations:
                     return { ...acc, nucleotideMutations: [...acc.nucleotideMutations, filter.value.toString()] };
-                case 'aminoAcidMutations':
+                case mutationType.aminoAcidMutations:
                     return { ...acc, aminoAcidMutations: [...acc.aminoAcidMutations, filter.value.toString()] };
-                case 'nucleotideInsertions':
+                case mutationType.nucleotideInsertions:
                     return { ...acc, nucleotideInsertions: [...acc.nucleotideInsertions, filter.value.toString()] };
-                case 'aminoAcidInsertions':
+                case mutationType.aminoAcidInsertions:
                     return { ...acc, aminoAcidInsertions: [...acc.aminoAcidInsertions, filter.value.toString()] };
             }
         },

package/src/preact/mutationFilter/parseAndValidateMutation.ts

@@ -1,7 +1,7 @@
 import { type MutationFilterItem } from './mutation-filter';
 import { sequenceTypeFromSegment } from './sequenceTypeFromSegment';
 import type { ReferenceGenome } from '../../lapisApi/ReferenceGenome';
-import type { SequenceType } from '../../types';
+import { type SequenceType, mutationType } from '../../types';
 import { DeletionClass, InsertionClass, type Mutation, SubstitutionClass } from '../../utils/mutations';
 
 export const parseAndValidateMutation = (
@@ -22,11 +22,11 @@ export const parseAndValidateMutation = (
 
 const getSequenceType = (type: MutationFilterItem['type']) => {
     switch (type) {
-        case 'nucleotideInsertions':
-        case 'nucleotideMutations':
+        case mutationType.nucleotideInsertions:
+        case mutationType.nucleotideMutations:
             return 'nucleotide';
-        case 'aminoAcidInsertions':
-        case 'aminoAcidMutations':
+        case mutationType.aminoAcidInsertions:
+        case mutationType.aminoAcidMutations:
             return 'amino acid';
     }
 };
@@ -37,10 +37,10 @@ const parseMutation = (value: string, referenceGenome: ReferenceGenome): Mutatio
         const sequenceType = sequenceTypeFromSegment(possibleInsertion.segment, referenceGenome);
         switch (sequenceType) {
             case 'nucleotide': {
-                return { type: 'nucleotideInsertions', value: possibleInsertion };
+                return { type: mutationType.nucleotideInsertions, value: possibleInsertion };
             }
             case 'amino acid':
-                return { type: 'aminoAcidInsertions', value: possibleInsertion };
+                return { type: mutationType.aminoAcidInsertions, value: possibleInsertion };
             case undefined:
                 return null;
         }
@@ -51,9 +51,9 @@ const parseMutation = (value: string, referenceGenome: ReferenceGenome): Mutatio
         const sequenceType = sequenceTypeFromSegment(possibleDeletion.segment, referenceGenome);
         switch (sequenceType) {
             case 'nucleotide':
-                return { type: 'nucleotideMutations', value: possibleDeletion };
+                return { type: mutationType.nucleotideMutations, value: possibleDeletion };
             case 'amino acid':
-                return { type: 'aminoAcidMutations', value: possibleDeletion };
+                return { type: mutationType.aminoAcidMutations, value: possibleDeletion };
             case undefined:
                 return null;
         }
@@ -64,10 +64,10 @@ const parseMutation = (value: string, referenceGenome: ReferenceGenome): Mutatio
         const sequenceType = sequenceTypeFromSegment(possibleSubstitution.segment, referenceGenome);
         switch (sequenceType) {
             case 'nucleotide': {
-                return { type: 'nucleotideMutations', value: possibleSubstitution };
+                return { type: mutationType.nucleotideMutations, value: possibleSubstitution };
             }
             case 'amino acid': {
-                return { type: 'aminoAcidMutations', value: possibleSubstitution };
+                return { type: mutationType.aminoAcidMutations, value: possibleSubstitution };
             }
 
             case undefined: