@genspectrum/dashboard-components 0.18.5 → 0.19.0

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/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,
+            },
         },
     });
 

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];

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

@@ -19,6 +19,7 @@ import {
 import { type Deletion, type Substitution } from '../../utils/mutations';
 import { toTemporalClass } from '../../utils/temporalClass';
 import { useLapisUrl } from '../LapisUrlContext';
+import { useMutationAnnotationsProvider } from '../MutationAnnotationsContext';
 import { type ColorScale } from '../components/color-scale-selector';
 import { ColorScaleSelectorDropdown } from '../components/color-scale-selector-dropdown';
 import { CsvDownloadButton } from '../components/csv-download-button';
@@ -27,6 +28,7 @@ import { Fullscreen } from '../components/fullscreen';
 import Info, { InfoComponentCode, InfoHeadline1, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { type DisplayedMutationType, MutationTypeSelector } from '../components/mutation-type-selector';
+import { MutationsOverTimeTextFilter } from '../components/mutations-over-time-text-filter';
 import { NoDataDisplay } from '../components/no-data-display';
 import type { ProportionInterval } from '../components/proportion-selector';
 import { ProportionSelectorDropdown } from '../components/proportion-selector-dropdown';
@@ -34,6 +36,7 @@ import { ResizeContainer } from '../components/resize-container';
 import { type DisplayedSegment, SegmentSelector, useDisplayedSegments } from '../components/segment-selector';
 import Tabs from '../components/tabs';
 import { pageSizesSchema } from '../shared/tanstackTable/pagination';
+import { PageSizeContextProvider } from '../shared/tanstackTable/pagination-context';
 import { useWebWorker } from '../webWorkers/useWebWorker';
 
 const mutationsOverTimeViewSchema = z.literal(views.grid);
@@ -123,6 +126,9 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
     originalComponentProps,
     overallMutationData,
 }) => {
+    const [mutationFilterValue, setMutationFilterValue] = useState('');
+    const annotationProvider = useMutationAnnotationsProvider();
+
     const [proportionInterval, setProportionInterval] = useState(originalComponentProps.initialMeanProportionInterval);
     const [colorScale, setColorScale] = useState<ColorScale>({ min: 0, max: 1, color: 'indigo' });
 
@@ -132,8 +138,6 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
         { label: 'Deletions', checked: true, type: 'deletion' },
     ]);
 
-    const displayMutations = originalComponentProps.displayMutations;
-
     const filteredData = useMemo(() => {
         return getFilteredMutationOverTimeData({
             data: mutationOverTimeData,
@@ -141,7 +145,10 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
             displayedSegments,
             displayedMutationTypes,
             proportionInterval,
-            displayMutations,
+            displayMutations: originalComponentProps.displayMutations,
+            mutationFilterValue,
+            sequenceType: originalComponentProps.sequenceType,
+            annotationProvider,
         });
     }, [
         mutationOverTimeData,
@@ -149,7 +156,10 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
         displayedSegments,
         displayedMutationTypes,
         proportionInterval,
-        displayMutations,
+        originalComponentProps.displayMutations,
+        originalComponentProps.sequenceType,
+        mutationFilterValue,
+        annotationProvider,
     ]);
 
     const getTab = (view: MutationsOverTimeView) => {
@@ -190,10 +200,16 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
             colorScale={colorScale}
             setColorScale={setColorScale}
             originalComponentProps={originalComponentProps}
+            setFilterValue={setMutationFilterValue}
+            mutationFilterValue={mutationFilterValue}
         />
     );
 
-    return <Tabs tabs={tabs} toolbar={toolbar} />;
+    return (
+        <PageSizeContextProvider pageSizes={originalComponentProps.pageSizes}>
+            <Tabs tabs={tabs} toolbar={toolbar} />
+        </PageSizeContextProvider>
+    );
 };
 
 type ToolbarProps = {
@@ -208,6 +224,8 @@ type ToolbarProps = {
     colorScale: ColorScale;
     setColorScale: Dispatch<StateUpdater<ColorScale>>;
     originalComponentProps: MutationsOverTimeProps;
+    mutationFilterValue: string;
+    setFilterValue: (filterValue: string) => void;
 };
 
 const Toolbar: FunctionComponent<ToolbarProps> = ({
@@ -222,9 +240,12 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
     colorScale,
     setColorScale,
     originalComponentProps,
+    setFilterValue,
+    mutationFilterValue,
 }) => {
     return (
         <>
+            <MutationsOverTimeTextFilter setFilterValue={setFilterValue} value={mutationFilterValue} />
             {activeTab === 'Grid' && (
                 <ColorScaleSelectorDropdown colorScale={colorScale} setColorScale={setColorScale} />
             )}