@genspectrum/dashboard-components 1.5.0 → 1.6.0

package/dist/util.d.ts

@@ -917,7 +917,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-genome-data-viewer': GenomeDataViewerComponent;
+        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
     }
 }
 
@@ -925,7 +925,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-genome-data-viewer': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -949,7 +949,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations': MutationsComponent;
+        'gs-genome-data-viewer': GenomeDataViewerComponent;
     }
 }
 
@@ -957,7 +957,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-genome-data-viewer': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -965,7 +965,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-mutations': MutationsComponent;
     }
 }
 
@@ -973,7 +973,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -997,7 +997,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -1005,7 +1005,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1013,7 +1013,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -1021,7 +1021,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1029,7 +1029,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1037,7 +1037,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1045,7 +1045,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1053,7 +1053,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1061,7 +1061,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-statistics': StatisticsComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -1069,7 +1069,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1077,10 +1077,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        [gsEventNames.locationChanged]: LocationChangedEvent;
+        'gs-statistics': StatisticsComponent;
     }
 }
 
@@ -1088,7 +1085,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1096,7 +1093,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
+        'gs-date-range-filter': DateRangeFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.dateRangeFilterChanged]: CustomEvent<Record<string, string>>;
+        [gsEventNames.dateRangeOptionChanged]: DateRangeOptionChangedEvent;
     }
 }
 
@@ -1104,7 +1105,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 +1113,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 +1124,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/package.json

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

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

@@ -27,6 +27,11 @@ const meta: Meta<MutationFilterProps> = {
                 type: 'object',
             },
         },
+        enabledMutationTypes: {
+            control: {
+                type: 'object',
+            },
+        },
     },
 };
 
@@ -36,7 +41,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 +226,67 @@ export const IgnoresDuplicatesOnPasteCommaSeparatedList: StoryObj<MutationFilter
     },
 };
 
+export const FiltersOutDisabledMutationTypes: StoryObj<MutationFilterProps> = {
+    ...Default,
+    args: {
+        ...Default.args,
+        enabledMutationTypes: ['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,6 +1,6 @@
 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';
@@ -15,8 +15,18 @@ import { ErrorBoundary } from '../components/error-boundary';
 import { UserFacingError } from '../components/error-display';
 import { singleGraphColorRGBByName } from '../shared/charts/colors';
 
+const mutationTypeSchema = z.enum([
+    'nucleotideMutations',
+    'aminoAcidMutations',
+    'nucleotideInsertions',
+    'aminoAcidInsertions',
+]);
+
+export type MutationType = z.infer<typeof mutationTypeSchema>;
+
 const mutationFilterInnerPropsSchema = z.object({
     initialValue: z.union([mutationsFilterSchema.optional(), z.array(z.string()), z.undefined()]),
+    enabledMutationTypes: z.array(mutationTypeSchema).optional(),
 });
 
 const mutationFilterPropsSchema = mutationFilterInnerPropsSchema.extend({
@@ -53,7 +63,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 +72,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 = ['nucleotideMutations', 'nucleotideInsertions', 'aminoAcidMutations', 'aminoAcidInsertions'],
+}: 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 +96,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 +134,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 +160,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 +244,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 +289,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,18 +302,27 @@ 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('nucleotideMutations')) {
+        exampleMutationList.push(getExampleMutation(referenceGenome, 'nucleotide', 'substitution'));
+    }
+    if (enabledMutationTypes.includes('nucleotideInsertions')) {
+        exampleMutationList.push(getExampleMutation(referenceGenome, 'nucleotide', 'insertion'));
+    }
+    if (enabledMutationTypes.includes('aminoAcidMutations')) {
+        exampleMutationList.push(getExampleMutation(referenceGenome, 'amino acid', 'substitution'));
+    }
+    if (enabledMutationTypes.includes('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})`;
 }

package/src/query/queryMutationsOverTime.ts

@@ -326,7 +326,7 @@ function parseMutationCode(code: string): SubstitutionClass | DeletionClass {
     if (maybeSubstitution) {
         return maybeSubstitution;
     }
-    throw Error('Given code is not valid');
+    throw Error(`Given code is not valid: ${code}`);
 }
 
 /**

package/src/utils/mutations.spec.ts

@@ -8,6 +8,11 @@ describe('SubstitutionClass', () => {
         expect(SubstitutionClass.parse('seg1:A1T')).deep.equal(new SubstitutionClass('seg1', 'A', 'T', 1));
     });
 
+    it('should be parsed with stop codons', () => {
+        expect(SubstitutionClass.parse('S:*1247T')).deep.equal(new SubstitutionClass('S', '*', 'T', 1247));
+        expect(SubstitutionClass.parse('S:T1247*')).deep.equal(new SubstitutionClass('S', 'T', '*', 1247));
+    });
+
     it('should render to string correctly', () => {
         const substitutions = [
             {
@@ -30,6 +35,10 @@ describe('DeletionClass', () => {
         expect(DeletionClass.parse('seg1:A1-')).deep.equal(new DeletionClass('seg1', 'A', 1));
     });
 
+    it('should be parsed with stop codons', () => {
+        expect(DeletionClass.parse('seg1:*1-')).deep.equal(new DeletionClass('seg1', '*', 1));
+    });
+
     it('should render to string correctly', () => {
         const substitutions = [
             {
@@ -61,4 +70,8 @@ describe('InsertionClass', () => {
         expect(InsertionClass.parse('ins_geNe1:1:A')).deep.equal(new InsertionClass('geNe1', 1, 'A'));
         expect(InsertionClass.parse('ins_1:aA')).deep.equal(new InsertionClass(undefined, 1, 'aA'));
     });
+
+    it('should be parsed with stop codon insertion', () => {
+        expect(InsertionClass.parse('ins_134:*')).deep.equal(new InsertionClass(undefined, 134, '*'));
+    });
 });

package/src/utils/mutations.ts

@@ -14,7 +14,7 @@ export interface MutationClass extends Mutation {
 }
 
 export const substitutionRegex =
-    /^((?<segment>[A-Z0-9_-]+)(?=:):)?(?<valueAtReference>[A-Z])?(?<position>\d+)(?<substitutionValue>[A-Z.*])?$/i;
+    /^((?<segment>[A-Z0-9_-]+)(?=:):)?(?<valueAtReference>[A-Z*])?(?<position>\d+)(?<substitutionValue>[A-Z.*])?$/i;
 
 export interface Substitution extends Mutation {
     type: 'substitution';
@@ -68,7 +68,7 @@ export class SubstitutionClass implements MutationClass, Substitution {
     }
 }
 
-export const deletionRegex = /^((?<segment>[A-Z0-9_-]+)(?=:):)?(?<valueAtReference>[A-Z])?(?<position>\d+)(-)$/i;
+export const deletionRegex = /^((?<segment>[A-Z0-9_-]+)(?=:):)?(?<valueAtReference>[A-Z*])?(?<position>\d+)(-)$/i;
 
 export interface Deletion extends Mutation {
     type: 'deletion';
@@ -119,7 +119,7 @@ export class DeletionClass implements MutationClass, Deletion {
 }
 
 export const insertionRegexp =
-    /^ins_((?<segment>[A-Z0-9_-]+)(?=:):)?(?<position>\d+):(?<insertedSymbols>(([A-Z?]|(\.\*))+))$/i;
+    /^ins_((?<segment>[A-Z0-9_-]+)(?=:):)?(?<position>\d+):(?<insertedSymbols>(([A-Z?*]|(\.\*))+))$/i;
 
 export interface Insertion extends Mutation {
     type: 'insertion';

package/src/web-components/input/gs-mutation-filter.stories.ts

@@ -38,6 +38,11 @@ const meta: Meta<MutationFilterProps> = {
             },
         },
         width: { control: 'text' },
+        enabledMutationTypes: {
+            control: {
+                type: 'object',
+            },
+        },
     },
     tags: ['autodocs'],
 };
@@ -48,7 +53,11 @@ const Template: StoryObj<MutationFilterProps> = {
     render: (args) => {
         return html` <gs-app lapis="${LAPIS_URL}">
             <div class="max-w-(--breakpoint-lg)">
-                <gs-mutation-filter .initialValue=${args.initialValue} .width=${args.width}></gs-mutation-filter>
+                <gs-mutation-filter
+                    .initialValue=${args.initialValue}
+                    .width=${args.width}
+                    .enabledMutationTypes=${args.enabledMutationTypes}
+                ></gs-mutation-filter>
             </div>
         </gs-app>`;
     },
@@ -104,6 +113,25 @@ export const FiresFilterChangedEvent: StoryObj<MutationFilterProps> = {
     },
 };
 
+export const RestrictEnabledMutationTypes: StoryObj<MutationFilterProps> = {
+    ...Template,
+    args: {
+        ...Template.args,
+        enabledMutationTypes: ['nucleotideMutations', 'aminoAcidMutations'],
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-filter');
+
+        const inputField = () => canvas.getByPlaceholderText('Enter a mutation', { exact: false });
+
+        await waitFor(async () => {
+            const placeholderText = inputField().getAttribute('placeholder');
+
+            await expect(placeholderText).toEqual('Enter a mutation (e.g. 23T, E:57Q)');
+        });
+    },
+};
+
 export const MultiSegmentedReferenceGenomes: StoryObj<MutationFilterProps> = {
     ...Template,
     args: {

package/src/web-components/input/gs-mutation-filter.tsx

@@ -2,7 +2,11 @@ import { customElement, property } from 'lit/decorators.js';
 import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { ReferenceGenomesAwaiter } from '../../preact/components/ReferenceGenomesAwaiter';
-import { MutationFilter, type MutationFilterProps } from '../../preact/mutationFilter/mutation-filter';
+import {
+    MutationFilter,
+    type MutationType,
+    type MutationFilterProps,
+} from '../../preact/mutationFilter/mutation-filter';
 import type { MutationsFilter } from '../../types';
 import { type gsEventNames } from '../../utils/gsEventNames';
 import type { Equals, Expect } from '../../utils/typeAssertions';
@@ -43,6 +47,11 @@ import { PreactLitAdapter } from '../PreactLitAdapter';
  *
  * Examples: `ins_S:614:G`, `ins_614:G`
  *
+ * ### Enabled mutation types
+ *
+ * After parsing, the entered mutation/insertion also has to match the enabled mutation types,
+ * which are configured with the `enabledMutationTypes` attribute.
+ *
  * @fires {CustomEvent<{
  *      nucleotideMutations: string[],
  *      aminoAcidMutations: string[],
@@ -81,10 +90,28 @@ export class MutationFilterComponent extends PreactLitAdapter {
     @property({ type: String })
     width: string = '100%';
 
+    /**
+     * Which mutation types this input will accept.
+     * Any (or all) of the following can be given in a list:
+     *
+     * - `nucleotideMutations`
+     * - `nucleotideInsertions`
+     * - `aminoAcidMutations`
+     * - `aminoAcidInsertions`
+     *
+     * By default or if none are given, all types are accepted.
+     */
+    @property({ type: Object })
+    enabledMutationTypes: MutationType[] | undefined = undefined;
+
     override render() {
         return (
             <ReferenceGenomesAwaiter>
-                <MutationFilter initialValue={this.initialValue} width={this.width} />
+                <MutationFilter
+                    initialValue={this.initialValue}
+                    width={this.width}
+                    enabledMutationTypes={this.enabledMutationTypes}
+                />
             </ReferenceGenomesAwaiter>
         );
     }