@genspectrum/dashboard-components 1.5.0 → 1.7.0

package/src/preact/mutationFilter/parseMutation.spec.ts

@@ -1,6 +1,7 @@
 import { describe, expect, it } from 'vitest';
 
 import { parseAndValidateMutation } from './parseAndValidateMutation';
+import { mutationType } from '../../types';
 import { DeletionClass, InsertionClass, SubstitutionClass } from '../../utils/mutations';
 
 describe('parseMutation', () => {
@@ -28,32 +29,32 @@ describe('parseMutation', () => {
             {
                 name: 'should parse nucleotide insertions',
                 input: 'ins_3:ACGT',
-                expected: { type: 'nucleotideInsertions', value: new InsertionClass(undefined, 3, 'ACGT') },
+                expected: { type: mutationType.nucleotideInsertions, value: new InsertionClass(undefined, 3, 'ACGT') },
             },
             {
                 name: 'should parse amino acid insertions',
                 input: 'ins_gene1:3:ACGT',
-                expected: { type: 'aminoAcidInsertions', value: new InsertionClass('gene1', 3, 'ACGT') },
+                expected: { type: mutationType.aminoAcidInsertions, value: new InsertionClass('gene1', 3, 'ACGT') },
             },
             {
                 name: 'should parse amino acid insertions in all upper case',
                 input: 'INS_GENE1:3:ACGT',
-                expected: { type: 'aminoAcidInsertions', value: new InsertionClass('GENE1', 3, 'ACGT') },
+                expected: { type: mutationType.aminoAcidInsertions, value: new InsertionClass('GENE1', 3, 'ACGT') },
             },
             {
                 name: 'should parse amino acid insertions in all lower case',
                 input: 'ins_gene1:3:acgt',
-                expected: { type: 'aminoAcidInsertions', value: new InsertionClass('gene1', 3, 'acgt') },
+                expected: { type: mutationType.aminoAcidInsertions, value: new InsertionClass('gene1', 3, 'acgt') },
             },
             {
                 name: 'should parse amino acid insertion with LAPIS-style wildcard',
                 input: 'ins_gene1:3:?AC?GT',
-                expected: { type: 'aminoAcidInsertions', value: new InsertionClass('gene1', 3, '?AC?GT') },
+                expected: { type: mutationType.aminoAcidInsertions, value: new InsertionClass('gene1', 3, '?AC?GT') },
             },
             {
                 name: 'should parse amino acid insertion with SILO-style wildcard',
                 input: 'ins_gene1:3:.*AC.*GT',
-                expected: { type: 'aminoAcidInsertions', value: new InsertionClass('gene1', 3, '.*AC.*GT') },
+                expected: { type: mutationType.aminoAcidInsertions, value: new InsertionClass('gene1', 3, '.*AC.*GT') },
             },
             {
                 name: 'should return null for insertion with segment not in reference genome',
@@ -71,42 +72,42 @@ describe('parseMutation', () => {
             {
                 name: 'should parse nucleotide deletion in single segmented reference genome, when no segment is given',
                 input: 'A3-',
-                expected: { type: 'nucleotideMutations', value: new DeletionClass(undefined, 'A', 3) },
+                expected: { type: mutationType.nucleotideMutations, value: new DeletionClass(undefined, 'A', 3) },
             },
             {
                 name: 'should parse nucleotide deletion without valueAtReference when no segment is given',
                 input: '3-',
-                expected: { type: 'nucleotideMutations', value: new DeletionClass(undefined, undefined, 3) },
+                expected: { type: mutationType.nucleotideMutations, value: new DeletionClass(undefined, undefined, 3) },
             },
             {
                 name: 'should parse nucleotide deletion',
                 input: 'nuc1:A3-',
-                expected: { type: 'nucleotideMutations', value: new DeletionClass('nuc1', 'A', 3) },
+                expected: { type: mutationType.nucleotideMutations, value: new DeletionClass('nuc1', 'A', 3) },
             },
             {
                 name: 'should parse nucleotide deletion without valueAtReference',
                 input: 'nuc1:3-',
-                expected: { type: 'nucleotideMutations', value: new DeletionClass('nuc1', undefined, 3) },
+                expected: { type: mutationType.nucleotideMutations, value: new DeletionClass('nuc1', undefined, 3) },
             },
             {
                 name: 'should parse amino acid deletion',
                 input: 'gene1:A3-',
-                expected: { type: 'aminoAcidMutations', value: new DeletionClass('gene1', 'A', 3) },
+                expected: { type: mutationType.aminoAcidMutations, value: new DeletionClass('gene1', 'A', 3) },
             },
             {
                 name: 'should parse amino acid deletion in all upper case',
                 input: 'GENE1:A3-',
-                expected: { type: 'aminoAcidMutations', value: new DeletionClass('GENE1', 'A', 3) },
+                expected: { type: mutationType.aminoAcidMutations, value: new DeletionClass('GENE1', 'A', 3) },
             },
             {
                 name: 'should parse amino acid deletion in all lower case',
                 input: 'gene1:a3-',
-                expected: { type: 'aminoAcidMutations', value: new DeletionClass('gene1', 'a', 3) },
+                expected: { type: mutationType.aminoAcidMutations, value: new DeletionClass('gene1', 'a', 3) },
             },
             {
                 name: 'should parse amino acid deletion without valueAtReference',
                 input: 'gene1:3-',
-                expected: { type: 'aminoAcidMutations', value: new DeletionClass('gene1', undefined, 3) },
+                expected: { type: mutationType.aminoAcidMutations, value: new DeletionClass('gene1', undefined, 3) },
             },
             {
                 name: 'should return null for deletion with segment not in reference genome',
@@ -123,45 +124,54 @@ describe('parseMutation', () => {
             {
                 name: 'should parse nucleotide substitution in single segmented reference genome, when no segment is given',
                 input: 'A3T',
-                expected: { type: 'nucleotideMutations', value: new SubstitutionClass(undefined, 'A', 'T', 3) },
+                expected: {
+                    type: mutationType.nucleotideMutations,
+                    value: new SubstitutionClass(undefined, 'A', 'T', 3),
+                },
             },
             {
                 name: 'should parse substitution without valueAtReference',
                 input: '3T',
-                expected: { type: 'nucleotideMutations', value: new SubstitutionClass(undefined, undefined, 'T', 3) },
+                expected: {
+                    type: mutationType.nucleotideMutations,
+                    value: new SubstitutionClass(undefined, undefined, 'T', 3),
+                },
             },
             {
                 name: 'should parse substitution with neither valueAtReference not substitutionValue',
                 input: '3',
                 expected: {
-                    type: 'nucleotideMutations',
+                    type: mutationType.nucleotideMutations,
                     value: new SubstitutionClass(undefined, undefined, undefined, 3),
                 },
             },
             {
                 name: 'should parse a "no mutation" substitution',
                 input: '3.',
-                expected: { type: 'nucleotideMutations', value: new SubstitutionClass(undefined, undefined, '.', 3) },
+                expected: {
+                    type: mutationType.nucleotideMutations,
+                    value: new SubstitutionClass(undefined, undefined, '.', 3),
+                },
             },
             {
                 name: 'should parse nucleotide substitution',
                 input: 'nuc1:A3T',
-                expected: { type: 'nucleotideMutations', value: new SubstitutionClass('nuc1', 'A', 'T', 3) },
+                expected: { type: mutationType.nucleotideMutations, value: new SubstitutionClass('nuc1', 'A', 'T', 3) },
             },
             {
                 name: 'should parse amino acid substitution',
                 input: 'gene1:A3T',
-                expected: { type: 'aminoAcidMutations', value: new SubstitutionClass('gene1', 'A', 'T', 3) },
+                expected: { type: mutationType.aminoAcidMutations, value: new SubstitutionClass('gene1', 'A', 'T', 3) },
             },
             {
                 name: 'should parse amino acid substitution in all upper case',
                 input: 'GENE1:A3T',
-                expected: { type: 'aminoAcidMutations', value: new SubstitutionClass('GENE1', 'A', 'T', 3) },
+                expected: { type: mutationType.aminoAcidMutations, value: new SubstitutionClass('GENE1', 'A', 'T', 3) },
             },
             {
                 name: 'should parse amino acid substitution in all lower case',
                 input: 'gene1:a3t',
-                expected: { type: 'aminoAcidMutations', value: new SubstitutionClass('gene1', 'a', 't', 3) },
+                expected: { type: mutationType.aminoAcidMutations, value: new SubstitutionClass('gene1', 'a', 't', 3) },
             },
             {
                 name: 'should return null for substitution with segment not in reference genome',

package/src/preact/mutationsOverTime/mutations-over-time.tsx

@@ -47,6 +47,12 @@ import { useWebWorker } from '../webWorkers/useWebWorker';
 const mutationsOverTimeViewSchema = z.literal(views.grid);
 export type MutationsOverTimeView = z.infer<typeof mutationsOverTimeViewSchema>;
 
+const meanProportionIntervalSchema = z.object({
+    min: z.number().min(0).max(1),
+    max: z.number().min(0).max(1),
+});
+export type MeanProportionInterval = z.infer<typeof meanProportionIntervalSchema>;
+
 const mutationOverTimeSchema = z.object({
     lapisFilter: lapisFilterSchema,
     sequenceType: sequenceTypeSchema,
@@ -55,10 +61,7 @@ const mutationOverTimeSchema = z.object({
     lapisDateField: z.string().min(1),
     useNewEndpoint: z.boolean().optional(),
     displayMutations: displayMutationsSchema.optional(),
-    initialMeanProportionInterval: z.object({
-        min: z.number().min(0).max(1),
-        max: z.number().min(0).max(1),
-    }),
+    initialMeanProportionInterval: meanProportionIntervalSchema,
     hideGaps: z.boolean().optional(),
     width: z.string(),
     height: z.string().optional(),

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/types.ts

@@ -44,7 +44,7 @@ export type SequenceType = z.infer<typeof sequenceTypeSchema>;
 
 export type SubstitutionOrDeletion = 'substitution' | 'deletion';
 
-export type MutationType = SubstitutionOrDeletion | 'insertion';
+export type SubstitutionOrDeletionOrInsertion = SubstitutionOrDeletion | 'insertion';
 
 export type SubstitutionEntry<T extends Substitution = SubstitutionClass> = {
     type: 'substitution';
@@ -79,3 +79,19 @@ export const views = {
     bubble: 'bubble',
     map: 'map',
 } as const;
+
+export const mutationType = {
+    nucleotideMutations: 'nucleotideMutations',
+    nucleotideInsertions: 'nucleotideInsertions',
+    aminoAcidMutations: 'aminoAcidMutations',
+    aminoAcidInsertions: 'aminoAcidInsertions',
+} as const;
+
+export const mutationTypeSchema = z.enum([
+    mutationType.nucleotideMutations,
+    mutationType.nucleotideInsertions,
+    mutationType.aminoAcidMutations,
+    mutationType.aminoAcidInsertions,
+]);
+
+export type MutationType = z.infer<typeof mutationTypeSchema>;

package/src/utilEntrypoint.ts

@@ -12,6 +12,8 @@ export {
     views,
     type TemporalGranularity,
     type MutationsFilter,
+    mutationType,
+    type MutationType,
 } from './types';
 
 export type { MutationComparisonView, MutationComparisonProps } from './preact/mutationComparison/mutation-comparison';
@@ -47,3 +49,5 @@ export {
     NumberRangeFilterChangedEvent,
     NumberRangeValueChangedEvent,
 } from './preact/numberRangeFilter/NumberRangeFilterChangedEvent';
+
+export { type MeanProportionInterval } from './preact/mutationsOverTime/mutations-over-time';

package/src/utils/mutations.spec.ts

@@ -6,6 +6,18 @@ describe('SubstitutionClass', () => {
     it('should be parsed from string', () => {
         expect(SubstitutionClass.parse('A1T')).deep.equal(new SubstitutionClass(undefined, 'A', 'T', 1));
         expect(SubstitutionClass.parse('seg1:A1T')).deep.equal(new SubstitutionClass('seg1', 'A', 'T', 1));
+        expect(SubstitutionClass.parse('1')).deep.equal(new SubstitutionClass(undefined, undefined, undefined, 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('invalid substitution strings should return null', () => {
+        expect(SubstitutionClass.parse('A1-')).to.equal(null);
+        expect(SubstitutionClass.parse('ins_1:A')).to.equal(null);
+        expect(SubstitutionClass.parse('E34Q')).to.equal(null);
     });
 
     it('should render to string correctly', () => {
@@ -30,6 +42,16 @@ 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('invalid deletion strings should return null', () => {
+        expect(DeletionClass.parse('seg1:A1T')).to.equal(null);
+        expect(DeletionClass.parse('ins_1:A')).to.equal(null);
+        expect(DeletionClass.parse('E34-')).to.equal(null);
+    });
+
     it('should render to string correctly', () => {
         const substitutions = [
             {
@@ -61,4 +83,14 @@ 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, '*'));
+    });
+
+    it('invalid insertion strings should return null', () => {
+        expect(InsertionClass.parse('A1-')).to.equal(null);
+        expect(InsertionClass.parse('seg1:A1T')).to.equal(null);
+        expect(InsertionClass.parse('ins_34:Q')).to.equal(null);
+    });
 });

package/src/utils/mutations.ts

@@ -1,9 +1,9 @@
-import { type MutationType, type SequenceType } from '../types';
+import { type SubstitutionOrDeletionOrInsertion, type SequenceType } from '../types';
 
 export interface Mutation {
     readonly position: number;
     readonly code: string;
-    readonly type: MutationType;
+    readonly type: SubstitutionOrDeletionOrInsertion;
     readonly segment?: string;
 }
 
@@ -13,8 +13,28 @@ export interface MutationClass extends Mutation {
     toString(): string;
 }
 
-export const substitutionRegex =
-    /^((?<segment>[A-Z0-9_-]+)(?=:):)?(?<valueAtReference>[A-Z])?(?<position>\d+)(?<substitutionValue>[A-Z.*])?$/i;
+// Allowed IUPAC characters: https://www.bioinformatics.org/sms/iupac.html
+const nucleotideChars = 'ACGTRYKMSWBDHVN';
+const aminoAcidChars = 'ACDEFGHIKLMNPQRSTVWY';
+
+function segmentPart(type: 'nucleotide' | 'aminoAcid') {
+    return type === 'aminoAcid' ? `(?<segment>[A-Z0-9_-]+):` : `((?<segment>[A-Z0-9_-]+)(?=:):)?`;
+}
+
+function buildSubstitutionRegex(type: 'nucleotide' | 'aminoAcid') {
+    const chars = type === 'nucleotide' ? nucleotideChars : aminoAcidChars;
+
+    return new RegExp(
+        `^${segmentPart(type)}` +
+            `(?<valueAtReference>[${chars}*])?` +
+            `(?<position>\\d+)` +
+            `(?<substitutionValue>[${chars}.*])?$`,
+        'i',
+    );
+}
+
+const nucleotideSubstitutionRegex = buildSubstitutionRegex('nucleotide');
+const aminoAcidSubstitutionRegex = buildSubstitutionRegex('aminoAcid');
 
 export interface Substitution extends Mutation {
     type: 'substitution';
@@ -55,7 +75,9 @@ export class SubstitutionClass implements MutationClass, Substitution {
     }
 
     static parse(mutationStr: string): SubstitutionClass | null {
-        const match = substitutionRegex.exec(mutationStr);
+        const matchNucleotide = nucleotideSubstitutionRegex.exec(mutationStr);
+        const matchAminoAcid = aminoAcidSubstitutionRegex.exec(mutationStr);
+        const match = matchNucleotide ?? matchAminoAcid;
         if (match?.groups === undefined) {
             return null;
         }
@@ -68,7 +90,17 @@ export class SubstitutionClass implements MutationClass, Substitution {
     }
 }
 
-export const deletionRegex = /^((?<segment>[A-Z0-9_-]+)(?=:):)?(?<valueAtReference>[A-Z])?(?<position>\d+)(-)$/i;
+function buildDeletionRegex(type: 'nucleotide' | 'aminoAcid') {
+    const chars = type === 'nucleotide' ? nucleotideChars : aminoAcidChars;
+
+    return new RegExp(
+        `^${segmentPart(type)}` + `(?<valueAtReference>[${chars}*])?` + `(?<position>\\d+)` + `(-)$`,
+        'i',
+    );
+}
+
+const nucleotideDeletionRegex = buildDeletionRegex('nucleotide');
+const aminoAcidDeletionRegex = buildDeletionRegex('aminoAcid');
 
 export interface Deletion extends Mutation {
     type: 'deletion';
@@ -105,7 +137,9 @@ export class DeletionClass implements MutationClass, Deletion {
     }
 
     static parse(mutationStr: string): DeletionClass | null {
-        const match = deletionRegex.exec(mutationStr);
+        const matchNucleotide = nucleotideDeletionRegex.exec(mutationStr);
+        const matchAminoAcid = aminoAcidDeletionRegex.exec(mutationStr);
+        const match = matchNucleotide ?? matchAminoAcid;
         if (match?.groups === undefined) {
             return null;
         }
@@ -118,8 +152,19 @@ export class DeletionClass implements MutationClass, Deletion {
     }
 }
 
-export const insertionRegexp =
-    /^ins_((?<segment>[A-Z0-9_-]+)(?=:):)?(?<position>\d+):(?<insertedSymbols>(([A-Z?]|(\.\*))+))$/i;
+function buildInsertionRegex(type: 'nucleotide' | 'aminoAcid') {
+    const chars = type === 'nucleotide' ? nucleotideChars : aminoAcidChars;
+
+    const wildcardToken = `(?:\\.\\*)`;
+
+    return new RegExp(
+        `^ins_${segmentPart(type)}(?<position>\\d+):(?<insertedSymbols>(?:[${chars}?*]|${wildcardToken})+)$`,
+        'i',
+    );
+}
+
+const nucleotideInsertionRegex = buildInsertionRegex('nucleotide');
+const aminoAcidInsertionRegex = buildInsertionRegex('aminoAcid');
 
 export interface Insertion extends Mutation {
     type: 'insertion';
@@ -154,7 +199,9 @@ export class InsertionClass implements MutationClass {
     }
 
     static parse(mutationStr: string): InsertionClass | null {
-        const match = insertionRegexp.exec(mutationStr);
+        const matchNucleotide = nucleotideInsertionRegex.exec(mutationStr);
+        const matchAminoAcid = aminoAcidInsertionRegex.exec(mutationStr);
+        const match = matchNucleotide ?? matchAminoAcid;
         if (match?.groups === undefined) {
             return null;
         }

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

@@ -7,6 +7,7 @@ import { previewHandles } from '../../../.storybook/preview';
 import { LAPIS_URL, REFERENCE_GENOME_ENDPOINT } from '../../constants';
 import '../gs-app';
 import { type MutationFilterProps } from '../../preact/mutationFilter/mutation-filter';
+import { mutationType } from '../../types';
 import { gsEventNames } from '../../utils/gsEventNames';
 import { withinShadowRoot } from '../withinShadowRoot.story';
 import './gs-mutation-filter';
@@ -38,6 +39,11 @@ const meta: Meta<MutationFilterProps> = {
             },
         },
         width: { control: 'text' },
+        enabledMutationTypes: {
+            control: {
+                type: 'object',
+            },
+        },
     },
     tags: ['autodocs'],
 };
@@ -48,7 +54,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 +114,25 @@ export const FiresFilterChangedEvent: StoryObj<MutationFilterProps> = {
     },
 };
 
+export const RestrictEnabledMutationTypes: StoryObj<MutationFilterProps> = {
+    ...Template,
+    args: {
+        ...Template.args,
+        enabledMutationTypes: [mutationType.nucleotideMutations, mutationType.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

@@ -3,7 +3,7 @@ import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { ReferenceGenomesAwaiter } from '../../preact/components/ReferenceGenomesAwaiter';
 import { MutationFilter, type MutationFilterProps } from '../../preact/mutationFilter/mutation-filter';
-import type { MutationsFilter } from '../../types';
+import type { MutationType, MutationsFilter } from '../../types';
 import { type gsEventNames } from '../../utils/gsEventNames';
 import type { Equals, Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapter } from '../PreactLitAdapter';
@@ -43,6 +43,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 +86,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>
         );
     }