@genspectrum/dashboard-components 0.18.4 → 0.18.6

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

@@ -27,135 +27,150 @@ describe('parseMutation', () => {
         insertions: [
             {
                 name: 'should parse nucleotide insertions',
-                input: 'ins_10:ACGT',
-                expected: { type: 'nucleotideInsertions', value: new InsertionClass(undefined, 10, 'ACGT') },
+                input: 'ins_3:ACGT',
+                expected: { type: 'nucleotideInsertions', value: new InsertionClass(undefined, 3, 'ACGT') },
             },
             {
                 name: 'should parse amino acid insertions',
-                input: 'ins_gene1:10:ACGT',
-                expected: { type: 'aminoAcidInsertions', value: new InsertionClass('gene1', 10, 'ACGT') },
+                input: 'ins_gene1:3:ACGT',
+                expected: { type: 'aminoAcidInsertions', value: new InsertionClass('gene1', 3, 'ACGT') },
             },
             {
                 name: 'should parse amino acid insertions in all upper case',
-                input: 'INS_GENE1:10:ACGT',
-                expected: { type: 'aminoAcidInsertions', value: new InsertionClass('GENE1', 10, 'ACGT') },
+                input: 'INS_GENE1:3:ACGT',
+                expected: { type: 'aminoAcidInsertions', value: new InsertionClass('GENE1', 3, 'ACGT') },
             },
             {
                 name: 'should parse amino acid insertions in all lower case',
-                input: 'ins_gene1:10:acgt',
-                expected: { type: 'aminoAcidInsertions', value: new InsertionClass('gene1', 10, 'acgt') },
+                input: 'ins_gene1:3:acgt',
+                expected: { type: 'aminoAcidInsertions', value: new InsertionClass('gene1', 3, 'acgt') },
             },
             {
                 name: 'should parse amino acid insertion with LAPIS-style wildcard',
-                input: 'ins_gene1:10:?AC?GT',
-                expected: { type: 'aminoAcidInsertions', value: new InsertionClass('gene1', 10, '?AC?GT') },
+                input: 'ins_gene1:3:?AC?GT',
+                expected: { type: 'aminoAcidInsertions', value: new InsertionClass('gene1', 3, '?AC?GT') },
             },
             {
                 name: 'should parse amino acid insertion with SILO-style wildcard',
-                input: 'ins_gene1:10:.*AC.*GT',
-                expected: { type: 'aminoAcidInsertions', value: new InsertionClass('gene1', 10, '.*AC.*GT') },
+                input: 'ins_gene1:3:.*AC.*GT',
+                expected: { type: 'aminoAcidInsertions', value: new InsertionClass('gene1', 3, '.*AC.*GT') },
             },
             {
                 name: 'should return null for insertion with segment not in reference genome',
-                input: 'INS_notInReferenceGenome:10:ACGT',
+                input: 'INS_notInReferenceGenome:3:ACGT',
                 expected: null,
             },
             { name: 'should return null for insertion with missing position', input: 'ins_gene1:ACGT', expected: null },
+            {
+                name: 'should return null for insertion with position outside of reference genome',
+                input: 'ins_gene1:10:ACGT',
+                expected: null,
+            },
         ],
         deletions: [
             {
                 name: 'should parse nucleotide deletion in single segmented reference genome, when no segment is given',
-                input: 'A123-',
-                expected: { type: 'nucleotideMutations', value: new DeletionClass(undefined, 'A', 123) },
+                input: 'A3-',
+                expected: { type: 'nucleotideMutations', value: new DeletionClass(undefined, 'A', 3) },
             },
             {
                 name: 'should parse nucleotide deletion without valueAtReference when no segment is given',
-                input: '123-',
-                expected: { type: 'nucleotideMutations', value: new DeletionClass(undefined, undefined, 123) },
+                input: '3-',
+                expected: { type: 'nucleotideMutations', value: new DeletionClass(undefined, undefined, 3) },
             },
             {
                 name: 'should parse nucleotide deletion',
-                input: 'nuc1:A123-',
-                expected: { type: 'nucleotideMutations', value: new DeletionClass('nuc1', 'A', 123) },
+                input: 'nuc1:A3-',
+                expected: { type: 'nucleotideMutations', value: new DeletionClass('nuc1', 'A', 3) },
             },
             {
                 name: 'should parse nucleotide deletion without valueAtReference',
-                input: 'nuc1:123-',
-                expected: { type: 'nucleotideMutations', value: new DeletionClass('nuc1', undefined, 123) },
+                input: 'nuc1:3-',
+                expected: { type: 'nucleotideMutations', value: new DeletionClass('nuc1', undefined, 3) },
             },
             {
                 name: 'should parse amino acid deletion',
-                input: 'gene1:A123-',
-                expected: { type: 'aminoAcidMutations', value: new DeletionClass('gene1', 'A', 123) },
+                input: 'gene1:A3-',
+                expected: { type: 'aminoAcidMutations', value: new DeletionClass('gene1', 'A', 3) },
             },
             {
                 name: 'should parse amino acid deletion in all upper case',
-                input: 'GENE1:A123-',
-                expected: { type: 'aminoAcidMutations', value: new DeletionClass('GENE1', 'A', 123) },
+                input: 'GENE1:A3-',
+                expected: { type: 'aminoAcidMutations', value: new DeletionClass('GENE1', 'A', 3) },
             },
             {
                 name: 'should parse amino acid deletion in all lower case',
-                input: 'gene1:a123-',
-                expected: { type: 'aminoAcidMutations', value: new DeletionClass('gene1', 'a', 123) },
+                input: 'gene1:a3-',
+                expected: { type: 'aminoAcidMutations', value: new DeletionClass('gene1', 'a', 3) },
             },
             {
                 name: 'should parse amino acid deletion without valueAtReference',
-                input: 'gene1:123-',
-                expected: { type: 'aminoAcidMutations', value: new DeletionClass('gene1', undefined, 123) },
+                input: 'gene1:3-',
+                expected: { type: 'aminoAcidMutations', value: new DeletionClass('gene1', undefined, 3) },
             },
             {
                 name: 'should return null for deletion with segment not in reference genome',
-                input: 'notInReferenceGenome:A123-',
+                input: 'notInReferenceGenome:A3-',
+                expected: null,
+            },
+            {
+                name: 'should return null for deletion with position outside reference genome',
+                input: 'gene1:A10-',
                 expected: null,
             },
         ],
         substitutions: [
             {
                 name: 'should parse nucleotide substitution in single segmented reference genome, when no segment is given',
-                input: 'A123T',
-                expected: { type: 'nucleotideMutations', value: new SubstitutionClass(undefined, 'A', 'T', 123) },
+                input: 'A3T',
+                expected: { type: 'nucleotideMutations', value: new SubstitutionClass(undefined, 'A', 'T', 3) },
             },
             {
                 name: 'should parse substitution without valueAtReference',
-                input: '123T',
-                expected: { type: 'nucleotideMutations', value: new SubstitutionClass(undefined, undefined, 'T', 123) },
+                input: '3T',
+                expected: { type: 'nucleotideMutations', value: new SubstitutionClass(undefined, undefined, 'T', 3) },
             },
             {
                 name: 'should parse substitution with neither valueAtReference not substitutionValue',
-                input: '123',
+                input: '3',
                 expected: {
                     type: 'nucleotideMutations',
-                    value: new SubstitutionClass(undefined, undefined, undefined, 123),
+                    value: new SubstitutionClass(undefined, undefined, undefined, 3),
                 },
             },
             {
                 name: 'should parse a "no mutation" substitution',
-                input: '123.',
-                expected: { type: 'nucleotideMutations', value: new SubstitutionClass(undefined, undefined, '.', 123) },
+                input: '3.',
+                expected: { type: 'nucleotideMutations', value: new SubstitutionClass(undefined, undefined, '.', 3) },
             },
             {
                 name: 'should parse nucleotide substitution',
-                input: 'nuc1:A123T',
-                expected: { type: 'nucleotideMutations', value: new SubstitutionClass('nuc1', 'A', 'T', 123) },
+                input: 'nuc1:A3T',
+                expected: { type: 'nucleotideMutations', value: new SubstitutionClass('nuc1', 'A', 'T', 3) },
             },
             {
                 name: 'should parse amino acid substitution',
-                input: 'gene1:A123T',
-                expected: { type: 'aminoAcidMutations', value: new SubstitutionClass('gene1', 'A', 'T', 123) },
+                input: 'gene1:A3T',
+                expected: { type: 'aminoAcidMutations', value: new SubstitutionClass('gene1', 'A', 'T', 3) },
             },
             {
                 name: 'should parse amino acid substitution in all upper case',
-                input: 'GENE1:A123T',
-                expected: { type: 'aminoAcidMutations', value: new SubstitutionClass('GENE1', 'A', 'T', 123) },
+                input: 'GENE1:A3T',
+                expected: { type: 'aminoAcidMutations', value: new SubstitutionClass('GENE1', 'A', 'T', 3) },
             },
             {
                 name: 'should parse amino acid substitution in all lower case',
-                input: 'gene1:a123t',
-                expected: { type: 'aminoAcidMutations', value: new SubstitutionClass('gene1', 'a', 't', 123) },
+                input: 'gene1:a3t',
+                expected: { type: 'aminoAcidMutations', value: new SubstitutionClass('gene1', 'a', 't', 3) },
             },
             {
                 name: 'should return null for substitution with segment not in reference genome',
-                input: 'notInReferenceGenome:A123T',
+                input: 'notInReferenceGenome:A3T',
+                expected: null,
+            },
+            {
+                name: 'should return null for substitution with position outside reference genome',
+                input: 'gene1:A10T',
                 expected: null,
             },
         ],

package/src/preact/mutations/mutations.tsx

@@ -185,7 +185,11 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
 }) => {
     return (
         <>
-            <SegmentSelector displayedSegments={displayedSegments} setDisplayedSegments={setDisplayedSegments} />
+            <SegmentSelector
+                displayedSegments={displayedSegments}
+                setDisplayedSegments={setDisplayedSegments}
+                sequenceType={originalComponentProps.sequenceType}
+            />
             {activeTab === 'Table' && (
                 <MutationTypeSelector
                     setDisplayedMutationTypes={setDisplayedMutationTypes}

package/src/preact/mutationsOverTime/getFilteredMutationsOverTime.spec.ts

@@ -7,6 +7,8 @@ import { type DeletionEntry, type SubstitutionEntry } from '../../types';
 import { type Deletion, type Substitution } from '../../utils/mutations';
 import { type TemporalClass } from '../../utils/temporalClass';
 import { yearMonthDay } from '../../utils/temporalTestHelpers';
+import { type MutationAnnotations } from '../../web-components/mutation-annotations-context';
+import { getMutationAnnotationsContext, getMutationAnnotationsProvider } from '../MutationAnnotationsContext';
 
 describe('getFilteredMutationOverTimeData', () => {
     it('should filter by displayed segments', () => {
@@ -26,6 +28,11 @@ describe('getFilteredMutationOverTimeData', () => {
             displayedMutationTypes: [],
             proportionInterval,
             displayMutations: undefined,
+            mutationFilterValue: '',
+            sequenceType: 'nucleotide',
+            annotationProvider: () => {
+                return [];
+            },
         });
 
         expect(result.getFirstAxisKeys()).to.deep.equal([anotherSubstitution]);
@@ -55,6 +62,11 @@ describe('getFilteredMutationOverTimeData', () => {
                 },
             ],
             proportionInterval,
+            mutationFilterValue: '',
+            sequenceType: 'nucleotide',
+            annotationProvider: () => {
+                return [];
+            },
         });
 
         expect(result.getFirstAxisKeys()).to.deep.equal([someDeletion]);
@@ -73,6 +85,11 @@ describe('getFilteredMutationOverTimeData', () => {
             displayedSegments: [],
             displayedMutationTypes: [],
             proportionInterval,
+            mutationFilterValue: '',
+            sequenceType: 'nucleotide',
+            annotationProvider: () => {
+                return [];
+            },
         });
 
         expect(result.getFirstAxisKeys()).to.deep.equal([anotherSubstitution, someDeletion]);
@@ -91,6 +108,11 @@ describe('getFilteredMutationOverTimeData', () => {
             displayedSegments: [],
             displayedMutationTypes: [],
             proportionInterval,
+            mutationFilterValue: '',
+            sequenceType: 'nucleotide',
+            annotationProvider: () => {
+                return [];
+            },
         });
 
         expect(result.getFirstAxisKeys()).to.deep.equal([anotherSubstitution, someDeletion]);
@@ -110,6 +132,11 @@ describe('getFilteredMutationOverTimeData', () => {
             displayedSegments: [],
             displayedMutationTypes: [],
             proportionInterval,
+            mutationFilterValue: '',
+            sequenceType: 'nucleotide',
+            annotationProvider: () => {
+                return [];
+            },
         });
 
         expect(result.getFirstAxisKeys()).to.deep.equal([someSubstitution, anotherSubstitution, someDeletion]);
@@ -129,6 +156,11 @@ describe('getFilteredMutationOverTimeData', () => {
             displayedSegments: [],
             displayedMutationTypes: [],
             proportionInterval,
+            mutationFilterValue: '',
+            sequenceType: 'nucleotide',
+            annotationProvider: () => {
+                return [];
+            },
         });
 
         expect(result.getFirstAxisKeys()).to.deep.equal([someSubstitution, anotherSubstitution, someDeletion]);
@@ -146,6 +178,11 @@ describe('getFilteredMutationOverTimeData', () => {
             displayedSegments: [],
             displayedMutationTypes: [],
             proportionInterval,
+            mutationFilterValue: '',
+            sequenceType: 'nucleotide',
+            annotationProvider: () => {
+                return [];
+            },
         });
 
         expect(result.getFirstAxisKeys()).to.deep.equal([someSubstitution, anotherSubstitution, someDeletion]);
@@ -164,6 +201,11 @@ describe('getFilteredMutationOverTimeData', () => {
             displayedSegments: [],
             displayedMutationTypes: [],
             proportionInterval,
+            mutationFilterValue: '',
+            sequenceType: 'nucleotide',
+            annotationProvider: () => {
+                return [];
+            },
         });
 
         expect(result.getFirstAxisKeys()).to.deep.equal([someSubstitution, anotherSubstitution, someDeletion]);
@@ -183,11 +225,97 @@ describe('getFilteredMutationOverTimeData', () => {
             displayedMutationTypes: [],
             proportionInterval,
             displayMutations: [anotherSubstitution.code, someDeletion.code],
+            mutationFilterValue: '',
+            sequenceType: 'nucleotide',
+            annotationProvider: () => {
+                return [];
+            },
         });
 
         expect(result.getFirstAxisKeys()).to.deep.equal([anotherSubstitution, someDeletion]);
     });
 
+    it('should filter by mutation filter value', () => {
+        const { data, overallMutationData } = prepareMutationOverTimeData([
+            someSubstitutionEntry,
+            anotherSubstitutionEntry,
+            someDeletionEntry,
+        ]);
+
+        const result = getFilteredMutationOverTimeData({
+            data,
+            overallMutationData,
+            displayedSegments: [],
+            displayedMutationTypes: [],
+            proportionInterval,
+            mutationFilterValue: '23T',
+            sequenceType: 'nucleotide',
+            annotationProvider: () => {
+                return [];
+            },
+        });
+
+        expect(result.getFirstAxisKeys()).to.deep.equal([someSubstitution]);
+    });
+
+    describe('should filter by annotation', () => {
+        const { data, overallMutationData } = prepareMutationOverTimeData([
+            someSubstitutionEntry,
+            anotherSubstitutionEntry,
+            someDeletionEntry,
+        ]);
+
+        const expectFilteredValue = (filterValue: string, annotations: MutationAnnotations) => {
+            const annotationProvider = getMutationAnnotationsProvider(getMutationAnnotationsContext(annotations));
+
+            const result = getFilteredMutationOverTimeData({
+                data,
+                overallMutationData,
+                displayedSegments: [],
+                displayedMutationTypes: [],
+                proportionInterval,
+                mutationFilterValue: filterValue,
+                sequenceType: 'nucleotide',
+                annotationProvider,
+            });
+
+            expect(result.getFirstAxisKeys()).to.deep.equal([someSubstitution]);
+        };
+
+        it('with filter value in symbol', () => {
+            expectFilteredValue('#', [
+                {
+                    name: 'Annotation 1',
+                    description: 'Description 1',
+                    symbol: '#',
+                    nucleotideMutations: ['A123T'],
+                },
+            ]);
+        });
+
+        it('with filter value in name', () => {
+            expectFilteredValue('Annota', [
+                {
+                    name: 'Annotation 1 #',
+                    description: 'Description 1',
+                    symbol: '+',
+                    nucleotideMutations: ['A123T'],
+                },
+            ]);
+        });
+
+        it('with filter value in name', () => {
+            expectFilteredValue('Descr', [
+                {
+                    name: 'Annotation 1',
+                    description: 'Description 1',
+                    symbol: '#',
+                    nucleotideMutations: ['A123T'],
+                },
+            ]);
+        });
+    });
+
     const belowFilter = 0.1;
     const atFilterMin = 0.2;
     const inFilter = 0.5;

package/src/preact/mutationsOverTime/getFilteredMutationsOverTimeData.ts

@@ -1,9 +1,10 @@
 import z from 'zod';
 
 import { type MutationOverTimeDataMap } from './MutationOverTimeData';
-import { type SubstitutionOrDeletionEntry } from '../../types';
+import { type SequenceType, type SubstitutionOrDeletionEntry } from '../../types';
 import { Map2dView } from '../../utils/map2d';
-import type { Deletion, Substitution } from '../../utils/mutations';
+import type { Deletion, Mutation, Substitution } from '../../utils/mutations';
+import { type useMutationAnnotationsProvider } from '../MutationAnnotationsContext';
 import type { DisplayedMutationType } from '../components/mutation-type-selector';
 import type { DisplayedSegment } from '../components/segment-selector';
 
@@ -17,6 +18,9 @@ export type GetFilteredMutationOverTimeDataArgs = {
     displayedMutationTypes: DisplayedMutationType[];
     proportionInterval: { min: number; max: number };
     displayMutations?: DisplayMutations;
+    mutationFilterValue: string;
+    sequenceType: SequenceType;
+    annotationProvider: ReturnType<typeof useMutationAnnotationsProvider>;
 };
 
 export function getFilteredMutationOverTimeData({
@@ -26,6 +30,9 @@ export function getFilteredMutationOverTimeData({
     displayedMutationTypes,
     proportionInterval,
     displayMutations,
+    mutationFilterValue,
+    sequenceType,
+    annotationProvider,
 }: GetFilteredMutationOverTimeDataArgs) {
     const filteredData = new Map2dView(data);
 
@@ -44,6 +51,10 @@ export function getFilteredMutationOverTimeData({
             return true;
         }
 
+        if (applySearchFilter(entry.mutation, sequenceType, mutationFilterValue, annotationProvider)) {
+            return true;
+        }
+
         return displayedMutationTypes.some(
             (mutationType) => mutationType.type === entry.mutation.type && !mutationType.checked,
         );
@@ -55,3 +66,29 @@ export function getFilteredMutationOverTimeData({
 
     return filteredData;
 }
+
+export function applySearchFilter(
+    mutation: Mutation,
+    sequenceType: SequenceType,
+    filterValue: string,
+    annotationProvider: ReturnType<typeof useMutationAnnotationsProvider>,
+) {
+    if (filterValue === '') {
+        return false;
+    }
+
+    if (mutation.code.includes(filterValue)) {
+        return false;
+    }
+
+    const mutationAnnotations = annotationProvider(mutation, sequenceType);
+    if (mutationAnnotations === undefined || mutationAnnotations.length === 0) {
+        return true;
+    }
+    return !mutationAnnotations.some(
+        (annotation) =>
+            annotation.description.includes(filterValue) ||
+            annotation.name.includes(filterValue) ||
+            annotation.symbol.includes(filterValue),
+    );
+}

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

@@ -1,6 +1,5 @@
-import { type PaginationState } from '@tanstack/table-core';
 import { type FunctionComponent } from 'preact';
-import { useMemo, useState } from 'preact/hooks';
+import { useMemo } from 'preact/hooks';
 
 import { type MutationOverTimeDataMap } from './MutationOverTimeData';
 import { MutationsOverTimeGridTooltip } from './mutations-over-time-grid-tooltip';
@@ -13,6 +12,7 @@ import { type ColorScale, getColorWithinScale, getTextColorForScale } from '../c
 import Tooltip, { type TooltipPosition } from '../components/tooltip';
 import { formatProportion } from '../shared/table/formatProportion';
 import { type PageSizes, Pagination } from '../shared/tanstackTable/pagination';
+import { usePageSizeContext } from '../shared/tanstackTable/pagination-context';
 import {
     createColumnHelper,
     flexRender,
@@ -43,11 +43,6 @@ const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
         });
     }, [data]);
 
-    const [pagination, setPagination] = useState<PaginationState>({
-        pageIndex: 0,
-        pageSize: typeof pageSizes === 'number' ? pageSizes : (pageSizes.at(0) ?? 10),
-    });
-
     const columns = useMemo(() => {
         const columnHelper = createColumnHelper<RowType>();
         const dates = data.getSecondAxisKeys();
@@ -104,15 +99,17 @@ const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
         return [mutationHeader, ...dateHeaders];
     }, [colorScale, data, sequenceType]);
 
+    const { pageSize } = usePageSizeContext();
     const table = usePreactTable({
         data: tableData,
         columns,
         getCoreRowModel: getCoreRowModel(),
         getPaginationRowModel: getPaginationRowModel(),
-        debugTable: true,
-        onPaginationChange: setPagination,
-        state: {
-            pagination,
+        initialState: {
+            pagination: {
+                pageIndex: 0,
+                pageSize,
+            },
         },
     });
 
@@ -192,7 +189,7 @@ const ProportionCell: FunctionComponent<{
                         backgroundColor: getColorWithinScale(proportion, colorScale),
                         color: getTextColorForScale(proportion, colorScale),
                     }}
-                    className={`w-full h-full hover:font-bold text-xs group @container`}
+                    className={`w-full h-full hover:font-bold text-xs group @container text-nowrap`}
                 >
                     {value === null ? (
                         <span className='invisible'>No data</span>

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

@@ -81,6 +81,10 @@ export const Default: StoryObj<MutationsOverTimeProps> = {
         initialMeanProportionInterval: { min: 0.05, max: 0.9 },
         pageSizes: [10, 20, 30, 40, 50],
     },
+};
+
+export const ShowsMutationAnnotations: StoryObj<MutationsOverTimeProps> = {
+    ...Default,
     play: async ({ canvasElement }) => {
         await expectMutationAnnotation(canvasElement, 'C44T');
     },
@@ -133,6 +137,29 @@ export const UsesPagination: StoryObj<MutationsOverTimeProps> = {
     },
 };
 
+export const UsesMutationFilter: StoryObj<MutationsOverTimeProps> = {
+    ...Default,
+    play: async ({ canvas, step }) => {
+        await expectMutationOnPage(canvas, 'C44T');
+
+        await step('input filter', async () => {
+            const filterButton = canvas.getByRole('button', { name: 'Filter mutations' });
+            await userEvent.click(filterButton);
+
+            const filterInput = canvas.getByPlaceholderText('Filter');
+            await userEvent.type(filterInput, 'T21');
+        });
+
+        await step('should show only matching filter', async () => {
+            await expectMutationOnPage(canvas, 'T21653-');
+            await expectMutationOnPage(canvas, 'T21655-');
+
+            const filteredMutation = canvas.queryByText('C44T');
+            await expect(filteredMutation).not.toBeInTheDocument();
+        });
+    },
+};
+
 async function expectMutationOnPage(canvas: Canvas, mutation: string) {
     await waitFor(async () => {
         const mutationOnFirstPage = canvas.getAllByText(mutation)[0];