@genspectrum/dashboard-components 1.0.1 → 1.2.0

package/src/preact/components/mutations-over-time-mutations-filter.tsx

@@ -0,0 +1,139 @@
+import { type FunctionComponent, type h } from 'preact';
+import { type Dispatch, type StateUpdater, useCallback, useEffect, useState } from 'preact/hooks';
+
+import { Dropdown } from './dropdown';
+import { useRawMutationAnnotations } from '../MutationAnnotationsContext';
+import { type MutationFilter } from '../mutationsOverTime/getFilteredMutationsOverTimeData';
+import { DeleteIcon } from '../shared/icons/DeleteIcon';
+
+export type MutationsOverTimeMutationsFilterProps = {
+    setFilterValue: Dispatch<StateUpdater<MutationFilter>>;
+    value: MutationFilter;
+};
+
+export function MutationsOverTimeMutationsFilter({ setFilterValue, value }: MutationsOverTimeMutationsFilterProps) {
+    return (
+        <div className={'w-28 inline-flex'}>
+            <Dropdown buttonTitle={getButtonTitle(value)} placement={'bottom-start'}>
+                <TextInput value={value} setFilterValue={setFilterValue} />
+                <AnnotationCheckboxes value={value} setFilterValue={setFilterValue} />
+            </Dropdown>
+        </div>
+    );
+}
+
+function getButtonTitle(value: MutationFilter) {
+    if (value.textFilter === '' && value.annotationNameFilter.size === 0) {
+        return `Filter mutations`;
+    }
+
+    return [value.textFilter, ...value.annotationNameFilter].filter((it) => it !== '').join(', ');
+}
+
+const TextInput: FunctionComponent<MutationsOverTimeMutationsFilterProps> = ({ setFilterValue, value }) => {
+    const onInput = useCallback(
+        (newValue: string) => {
+            setFilterValue((previousFilter) => ({
+                ...previousFilter,
+                textFilter: newValue,
+            }));
+        },
+        [setFilterValue],
+    );
+
+    const onDeleteClick = () => {
+        setFilterValue((previousFilter) => ({
+            ...previousFilter,
+            textFilter: '',
+        }));
+    };
+
+    return (
+        <div>
+            <label className='flex gap-1 input input-xs'>
+                <DebouncedInput placeholder={'Filter'} onInput={onInput} value={value.textFilter} type='text' />
+                {value.textFilter !== '' && (
+                    <button className={'cursor-pointer'} onClick={onDeleteClick}>
+                        <DeleteIcon />
+                    </button>
+                )}
+            </label>
+        </div>
+    );
+};
+
+function DebouncedInput({
+    value: initialValue,
+    onInput,
+    debounce = 500,
+    ...props
+}: {
+    onInput: (value: string) => void;
+    debounce?: number;
+    value?: string;
+} & Omit<h.JSX.IntrinsicElements['input'], 'onInput'>) {
+    const [value, setValue] = useState<string | undefined>(initialValue);
+
+    useEffect(() => {
+        setValue(initialValue);
+    }, [initialValue]);
+
+    useEffect(() => {
+        const timeout = setTimeout(() => {
+            onInput(value ?? '');
+        }, debounce);
+
+        return () => clearTimeout(timeout);
+    }, [value, debounce, onInput]);
+
+    const onChangeInput = useCallback((event: h.JSX.TargetedEvent<HTMLInputElement>) => {
+        setValue(event.currentTarget.value);
+    }, []);
+
+    return <input {...props} value={value} onInput={onChangeInput} />;
+}
+
+const AnnotationCheckboxes: FunctionComponent<MutationsOverTimeMutationsFilterProps> = ({ value, setFilterValue }) => {
+    const mutationAnnotations = useRawMutationAnnotations();
+
+    if (mutationAnnotations.length === 0) {
+        return null;
+    }
+
+    return (
+        <>
+            <div className='divider mt-0.5 mb-0' />
+            <div className='text-sm'>
+                <div className='font-bold mb-1'>Filter by annotations</div>
+                {mutationAnnotations.map((annotation, index) => (
+                    <li className='flex flex-row items-center' key={annotation.name}>
+                        <label>
+                            <input
+                                className={'mr-2'}
+                                type='checkbox'
+                                id={`item-${index}`}
+                                checked={value.annotationNameFilter.has(annotation.name)}
+                                onChange={() => {
+                                    setFilterValue((previousFilter) => {
+                                        const newAnnotationFilter = previousFilter.annotationNameFilter.has(
+                                            annotation.name,
+                                        )
+                                            ? [...previousFilter.annotationNameFilter].filter(
+                                                  (name) => name !== annotation.name,
+                                              )
+                                            : [...previousFilter.annotationNameFilter, annotation.name];
+                                        return {
+                                            ...previousFilter,
+                                            annotationNameFilter: new Set(newAnnotationFilter),
+                                        };
+                                    });
+                                }}
+                            />
+                            {annotation.name} (<span className='text-red-600'>{annotation.symbol}</span>)
+                        </label>
+                    </li>
+                ))}
+            </div>
+        </>
+    );
+};

package/src/preact/components/proportion-selector.tsx

@@ -60,21 +60,21 @@ export const ProportionSelector: FunctionComponent<ProportionSelectorProps> = ({
     const indicateError = internalMinProportion > internalMaxProportion;
 
     return (
-        <div class='flex flex-col w-64 mb-2'>
-            <div class='flex items-center '>
+        <div className='flex flex-col w-64 mb-2'>
+            <div className='flex items-center '>
                 <PercentInput
                     percentage={internalMinProportion * 100}
                     setPercentage={updateMinPercentage}
                     indicateError={indicateError}
                 />
-                <div class='m-2'>-</div>
+                <div className='m-2'>-</div>
                 <PercentInput
                     percentage={internalMaxProportion * 100}
                     setPercentage={updateMaxPercentage}
                     indicateError={indicateError}
                 />
             </div>
-            <div class='my-1'>
+            <div className='my-1'>
                 <MinMaxRangeSlider
                     min={internalMinProportion * 100}
                     max={internalMaxProportion * 100}

package/src/preact/components/select.tsx

@@ -10,7 +10,7 @@ export interface SelectProps {
 
 export const Select: FunctionComponent<SelectProps> = ({ items, selected, onChange, selectStyle }) => {
     return (
-        <select class={`select ${selectStyle} w-fit`} value={selected} onChange={onChange}>
+        <select className={`select ${selectStyle} w-fit`} value={selected} onChange={onChange}>
             {items.map((item) => (
                 <option key={item.value} value={item.value} disabled={item.disabled}>
                     {item.label}

package/src/preact/components/table.tsx

@@ -29,7 +29,7 @@ export interface TableProps {
 export const Table = ({ data, columns, pageSize }: TableProps) => {
     const pagination = typeof pageSize === 'number' ? { limit: pageSize } : pageSize;
 
-    const wrapper = useRef(null);
+    const wrapper = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
         if (wrapper.current === null) {

package/src/preact/components/tabs.tsx

@@ -40,7 +40,7 @@ const Tabs = forwardRef<HTMLDivElement, ComponentTabsProps>(({ tabs, toolbar },
     const toolbarElement = typeof toolbar === 'function' ? toolbar(activeTab) : toolbar;
 
     return (
-        <div ref={ref} className='h-full w-full flex flex-col'>
+        <div ref={ref} className='h-full w-full flex flex-col bg-white'>
             <div className='flex flex-row justify-between flex-wrap'>
                 {tabElements}
                 {toolbar && <div className='py-2 flex flex-wrap gap-y-1'>{toolbarElement}</div>}

package/src/preact/components/tooltip.stories.tsx

@@ -24,7 +24,7 @@ const tooltipContent = 'This is some content.';
 
 export const TooltipStory: StoryObj<TooltipProps> = {
     render: (args) => (
-        <div class='flex justify-center px-4 py-16'>
+        <div className='flex justify-center px-4 py-16'>
             <Tooltip {...args}>
                 <div className='bg-red-200'>Hover me</div>
             </Tooltip>

package/src/preact/components/tooltip.tsx

@@ -47,7 +47,7 @@ const Tooltip: FunctionComponent<TooltipProps> = ({ children, content, position
             <div>{children}</div>
             <div
                 className={`absolute z-10 w-max bg-white p-4 border border-gray-200 rounded-md invisible group-hover:visible ${getPositionCss(position)}`}
-                style={{ ...tooltipStyle }}
+                style={tooltipStyle}
             >
                 {content}
             </div>

package/src/preact/genomeViewer/CDSPlot.tsx

@@ -72,7 +72,7 @@ const XAxis: FunctionComponent<XAxisProps> = (componentProps) => {
                 return (
                     <div
                         key={idx}
-                        class='absolute text-xs text-black px-1 hover:opacity-80 border-l border-r border-gray-400 border-t'
+                        className='absolute text-xs text-black px-1 hover:opacity-80 border-l border-r border-gray-400 border-t'
                         style={{
                             left: `calc(${leftPercent}% - 1px)`,
                             width: `calc(${widthPercent}% - 1px)`,
@@ -200,10 +200,10 @@ const CDSPlot: FunctionComponent<CDSProps> = (componentProps) => {
     };
 
     return (
-        <div ref={ref} class='p-4'>
+        <div ref={ref} className='p-4'>
             <CDSBars gffData={gffData} zoomStart={zoomStart} zoomEnd={zoomEnd} />
             <XAxis zoomStart={zoomStart} zoomEnd={zoomEnd} fullWidth={width} />
-            <div class='relative w-full h-5'>
+            <div className='relative w-full h-5'>
                 <MinMaxRangeSlider
                     min={zoomStart}
                     max={zoomEnd}

package/src/preact/genomeViewer/loadGff3.ts

@@ -12,9 +12,7 @@ type Position = {
     end: number;
 };
 
-type CDSMap = {
-    [id: string]: { positions: Position[]; label: string };
-};
+type CDSMap = Record<string, { positions: Position[]; label: string }>;
 
 export async function loadGff3(gff3Source: string, genomeLength: number | undefined) {
     try {
@@ -25,9 +23,7 @@ export async function loadGff3(gff3Source: string, genomeLength: number | undefi
 
     const response = await fetch(gff3Source);
     const content = await response.text();
-    if (!genomeLength) {
-        genomeLength = loadGenomeLength(content);
-    }
+    genomeLength ??= loadGenomeLength(content);
     return { features: parseGFF3(content), length: genomeLength };
 }
 
@@ -89,7 +85,7 @@ function getCDSMap(lines: string[], genome_type: string, geneMap: CDSMap): CDSMa
         }
 
         const attrPairs = getAttributes(attributes);
-        const labelAttribute = attrPairs.get('Name') || attrPairs.get('gene') || attrPairs.get('gene_name');
+        const labelAttribute = attrPairs.get('Name') ?? attrPairs.get('gene') ?? attrPairs.get('gene_name');
         if (!labelAttribute) {
             throw new UserFacingError(
                 'Invalid gff3 source',
@@ -97,11 +93,12 @@ function getCDSMap(lines: string[], genome_type: string, geneMap: CDSMap): CDSMa
             );
         }
         const label = removeQuotes(labelAttribute);
-        const id = removeQuotes(attrPairs.get('ID') || labelAttribute);
+        const id = removeQuotes(attrPairs.get('ID') ?? labelAttribute);
         const parentAttribute = attrPairs.get('Parent');
         if (parentAttribute) {
             const parent = removeQuotes(parentAttribute);
             if (parent && parent in geneMap) {
+                // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
                 delete geneMap[parent];
             }
         }

package/src/preact/lineageFilter/lineage-filter.tsx

@@ -99,5 +99,5 @@ function filterByInputValue(item: LineageItem, inputValue: string | null) {
     if (inputValue === null || inputValue === '') {
         return true;
     }
-    return item.lineage?.toLowerCase().includes(inputValue?.toLowerCase() || '');
+    return item.lineage.toLowerCase().includes(inputValue.toLowerCase() || '');
 }

package/src/preact/locationFilter/location-filter.tsx

@@ -110,8 +110,8 @@ function filterByInputValue(item: SelectItem, inputValue: string | null) {
         return true;
     }
     return (
-        item?.label?.toLowerCase().includes(inputValue.toLowerCase()) ||
-        item?.description.toLowerCase().includes(inputValue.toLowerCase())
+        !!item.label?.toLowerCase().includes(inputValue.toLowerCase()) ||
+        item.description.toLowerCase().includes(inputValue.toLowerCase())
     );
 }
 
@@ -143,8 +143,8 @@ function concatenateLocation(locationFilter: LapisLocationFilter, fields: string
 }
 
 function emptyLocationFilter(fields: string[]) {
-    return fields.reduce((acc, field) => {
+    return fields.reduce<LapisLocationFilter>((acc, field) => {
         acc[field] = undefined;
         return acc;
-    }, {} as LapisLocationFilter);
+    }, {});
 }

package/src/preact/mutationComparison/getMutationComparisonTableData.ts

@@ -3,9 +3,7 @@ import { type Dataset } from '../../operator/Dataset';
 import { type DeletionClass, type SubstitutionClass } from '../../utils/mutations';
 import { type ProportionInterval } from '../components/proportion-selector';
 
-type Proportions = {
-    [displayName: string]: number;
-};
+type Proportions = Record<string, number>;
 
 type MutationComparisonRow = {
     mutation: SubstitutionClass | DeletionClass;

package/src/preact/mutationComparison/mutation-comparison-venn.tsx

@@ -110,7 +110,7 @@ export const MutationComparisonVenn: FunctionComponent<MutationComparisonVennPro
             <div className='flex-1'>
                 <GsChart configuration={config} />
             </div>
-            <p class='flex flex-wrap break-words m-2'>
+            <p className='flex flex-wrap break-words m-2'>
                 <SelectedMutationsDescription
                     selectedDatasetIndex={selectedDatasetIndex}
                     sets={sets}

package/src/preact/mutationComparison/mutation-comparison.tsx

@@ -16,7 +16,6 @@ import Info, { InfoComponentCode, InfoHeadline1, InfoHeadline2, InfoParagraph }
 import { LoadingDisplay } from '../components/loading-display';
 import { DeletionsLink, ProportionExplanation, SubstitutionsLink } from '../components/mutation-info';
 import { type DisplayedMutationType, MutationTypeSelector } from '../components/mutation-type-selector';
-import { NoDataDisplay } from '../components/no-data-display';
 import { type ProportionInterval } from '../components/proportion-selector';
 import { ProportionSelectorDropdown } from '../components/proportion-selector-dropdown';
 import { ResizeContainer } from '../components/resize-container';
@@ -68,10 +67,6 @@ const MutationComparisonInner: FunctionComponent<MutationComparisonProps> = (com
         throw error;
     }
 
-    if (data === null) {
-        return <NoDataDisplay />;
-    }
-
     return <MutationComparisonTabs data={data.mutationData} originalComponentProps={componentProps} />;
 };
 

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

@@ -191,10 +191,10 @@ const exampleSegmentString = (referenceGenome: ReferenceGenome) => {
 
 const exampleSegment = (referenceGenome: ReferenceGenome) => {
     if (referenceGenome.genes.length > 0) {
-        return `${referenceGenome.genes[0].name}`;
+        return referenceGenome.genes[0].name;
     }
     if (referenceGenome.nucleotideSequences.length > 1) {
-        return `${referenceGenome.nucleotideSequences[0].name}`;
+        return referenceGenome.nucleotideSequences[0].name;
     }
     return '';
 };

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

@@ -112,7 +112,7 @@ function MutationFilterInner({ initialValue }: MutationFilterInnerProps) {
     const handleInputChange = (newInputValue: string | undefined) => {
         setShowErrorIndicator(false);
         if (newInputValue?.includes(',')) {
-            const values = newInputValue?.split(',').map((value) => {
+            const values = newInputValue.split(',').map((value) => {
                 return { value, parsedValue: parseAndValidateMutation(value.trim(), referenceGenome) };
             });
             const validEntries = values.map((value) => value.parsedValue).filter((value) => value !== null);

package/src/preact/mutations/getMutationsGridData.ts

@@ -18,9 +18,7 @@ const accumulateByPosition = (data: SubstitutionOrDeletionEntry[], sequenceType:
     const referenceBases = new Map<string, string | undefined>();
 
     for (const mutationEntry of data) {
-        const position =
-            (mutationEntry.mutation.segment ? `${mutationEntry.mutation.segment}:` : '') +
-            mutationEntry.mutation.position;
+        const position = `${mutationEntry.mutation.segment ? `${mutationEntry.mutation.segment}:` : ''}${mutationEntry.mutation.position}`;
         referenceBases.set(position, mutationEntry.mutation.valueAtReference);
 
         const initiallyFillPositionsToProportionAtBase = () => {
@@ -69,9 +67,7 @@ const accumulateByPosition = (data: SubstitutionOrDeletionEntry[], sequenceType:
     });
 };
 
-export type BasesData = {
-    [base: string]: BaseCell;
-};
+export type BasesData = Record<string, BaseCell>;
 export type MutationsGridDataRow = BasesData & { position: string };
 
 const byProportion = (row: MutationsGridDataRow, proportionInterval: ProportionInterval) => {

package/src/preact/mutations/getMutationsTableData.ts

@@ -30,7 +30,7 @@ export function getMutationsTableData(
     }, new Map<string, number>());
 
     return tableData.map((datum) => {
-        const baselineMutationCount = baselineMutationCounts.get(datum.mutation.code) || 0;
+        const baselineMutationCount = baselineMutationCounts.get(datum.mutation.code) ?? 0;
         const jaccardSimilarity = calculateJaccardSimilarity(overallVariantCount, baselineMutationCount, datum.count);
 
         return {

package/src/preact/mutations/mutations-grid.tsx

@@ -62,7 +62,7 @@ export const MutationsGrid: FunctionComponent<MutationsGridProps> = ({
                 },
                 formatter: (cell: BaseCell) => formatProportion(cell.proportion),
                 attributes: (cell: BaseCell, row: Row) => {
-                    // grid-js: the cell and row are null for header cells
+                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- grid-js: the cell and row are null for header cells
                     if (row === null) {
                         return {};
                     }

package/src/preact/mutations/mutations.tsx

@@ -24,7 +24,6 @@ import Info, { InfoComponentCode, InfoHeadline1, InfoParagraph } from '../compon
 import { LoadingDisplay } from '../components/loading-display';
 import { DeletionsLink, InsertionsLink, ProportionExplanation, SubstitutionsLink } from '../components/mutation-info';
 import { type DisplayedMutationType, MutationTypeSelector } from '../components/mutation-type-selector';
-import { NoDataDisplay } from '../components/no-data-display';
 import type { ProportionInterval } from '../components/proportion-selector';
 import { ProportionSelectorDropdown } from '../components/proportion-selector-dropdown';
 import { ResizeContainer } from '../components/resize-container';
@@ -75,10 +74,6 @@ export const MutationsInner: FunctionComponent<MutationsProps> = (componentProps
         throw error;
     }
 
-    if (data === null) {
-        return <NoDataDisplay />;
-    }
-
     return <MutationsTabs mutationsData={data} originalComponentProps={componentProps} />;
 };
 

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

@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest';
 
 import { BaseMutationOverTimeDataMap } from './MutationOverTimeData';
-import { getFilteredMutationOverTimeData } from './getFilteredMutationsOverTimeData';
+import { getFilteredMutationOverTimeData, type MutationFilter } from './getFilteredMutationsOverTimeData';
 import { type MutationOverTimeMutationValue } from '../../query/queryMutationsOverTime';
 import { type DeletionEntry, type SubstitutionEntry } from '../../types';
 import { type Deletion, type Substitution } from '../../utils/mutations';
@@ -28,7 +28,7 @@ describe('getFilteredMutationOverTimeData', () => {
             displayedMutationTypes: [],
             proportionInterval,
             displayMutations: undefined,
-            mutationFilterValue: '',
+            mutationFilterValue: { textFilter: '', annotationNameFilter: new Set() },
             sequenceType: 'nucleotide',
             annotationProvider: () => {
                 return [];
@@ -62,7 +62,7 @@ describe('getFilteredMutationOverTimeData', () => {
                 },
             ],
             proportionInterval,
-            mutationFilterValue: '',
+            mutationFilterValue: { textFilter: '', annotationNameFilter: new Set() },
             sequenceType: 'nucleotide',
             annotationProvider: () => {
                 return [];
@@ -85,7 +85,7 @@ describe('getFilteredMutationOverTimeData', () => {
             displayedSegments: [],
             displayedMutationTypes: [],
             proportionInterval,
-            mutationFilterValue: '',
+            mutationFilterValue: { textFilter: '', annotationNameFilter: new Set() },
             sequenceType: 'nucleotide',
             annotationProvider: () => {
                 return [];
@@ -108,7 +108,7 @@ describe('getFilteredMutationOverTimeData', () => {
             displayedSegments: [],
             displayedMutationTypes: [],
             proportionInterval,
-            mutationFilterValue: '',
+            mutationFilterValue: { textFilter: '', annotationNameFilter: new Set() },
             sequenceType: 'nucleotide',
             annotationProvider: () => {
                 return [];
@@ -132,7 +132,7 @@ describe('getFilteredMutationOverTimeData', () => {
             displayedSegments: [],
             displayedMutationTypes: [],
             proportionInterval,
-            mutationFilterValue: '',
+            mutationFilterValue: { textFilter: '', annotationNameFilter: new Set() },
             sequenceType: 'nucleotide',
             annotationProvider: () => {
                 return [];
@@ -156,7 +156,7 @@ describe('getFilteredMutationOverTimeData', () => {
             displayedSegments: [],
             displayedMutationTypes: [],
             proportionInterval,
-            mutationFilterValue: '',
+            mutationFilterValue: { textFilter: '', annotationNameFilter: new Set() },
             sequenceType: 'nucleotide',
             annotationProvider: () => {
                 return [];
@@ -178,7 +178,7 @@ describe('getFilteredMutationOverTimeData', () => {
             displayedSegments: [],
             displayedMutationTypes: [],
             proportionInterval,
-            mutationFilterValue: '',
+            mutationFilterValue: { textFilter: '', annotationNameFilter: new Set() },
             sequenceType: 'nucleotide',
             annotationProvider: () => {
                 return [];
@@ -201,7 +201,7 @@ describe('getFilteredMutationOverTimeData', () => {
             displayedSegments: [],
             displayedMutationTypes: [],
             proportionInterval,
-            mutationFilterValue: '',
+            mutationFilterValue: { textFilter: '', annotationNameFilter: new Set() },
             sequenceType: 'nucleotide',
             annotationProvider: () => {
                 return [];
@@ -225,7 +225,7 @@ describe('getFilteredMutationOverTimeData', () => {
             displayedMutationTypes: [],
             proportionInterval,
             displayMutations: [anotherSubstitution.code, someDeletion.code],
-            mutationFilterValue: '',
+            mutationFilterValue: { textFilter: '', annotationNameFilter: new Set() },
             sequenceType: 'nucleotide',
             annotationProvider: () => {
                 return [];
@@ -235,7 +235,7 @@ describe('getFilteredMutationOverTimeData', () => {
         expect(result.getFirstAxisKeys()).to.deep.equal([anotherSubstitution, someDeletion]);
     });
 
-    it('should filter by mutation filter value', () => {
+    it('should filter by mutation filter text value', () => {
         const { data, overallMutationData } = prepareMutationOverTimeData([
             someSubstitutionEntry,
             anotherSubstitutionEntry,
@@ -248,7 +248,7 @@ describe('getFilteredMutationOverTimeData', () => {
             displayedSegments: [],
             displayedMutationTypes: [],
             proportionInterval,
-            mutationFilterValue: '23T',
+            mutationFilterValue: { textFilter: '23T', annotationNameFilter: new Set() },
             sequenceType: 'nucleotide',
             annotationProvider: () => {
                 return [];
@@ -265,7 +265,7 @@ describe('getFilteredMutationOverTimeData', () => {
             someDeletionEntry,
         ]);
 
-        const expectFilteredValue = (filterValue: string, annotations: MutationAnnotations) => {
+        const expectFilteredValue = (filterValue: MutationFilter, annotations: MutationAnnotations) => {
             const annotationProvider = getMutationAnnotationsProvider(getMutationAnnotationsContext(annotations));
 
             const result = getFilteredMutationOverTimeData({
@@ -283,7 +283,7 @@ describe('getFilteredMutationOverTimeData', () => {
         };
 
         it('with filter value in symbol', () => {
-            expectFilteredValue('#', [
+            expectFilteredValue({ textFilter: '#', annotationNameFilter: new Set() }, [
                 {
                     name: 'Annotation 1',
                     description: 'Description 1',
@@ -294,7 +294,7 @@ describe('getFilteredMutationOverTimeData', () => {
         });
 
         it('with filter value in name', () => {
-            expectFilteredValue('Annota', [
+            expectFilteredValue({ textFilter: 'Annota', annotationNameFilter: new Set() }, [
                 {
                     name: 'Annotation 1 #',
                     description: 'Description 1',
@@ -305,7 +305,18 @@ describe('getFilteredMutationOverTimeData', () => {
         });
 
         it('with filter value in name', () => {
-            expectFilteredValue('Descr', [
+            expectFilteredValue({ textFilter: 'Descr', annotationNameFilter: new Set() }, [
+                {
+                    name: 'Annotation 1',
+                    description: 'Description 1',
+                    symbol: '#',
+                    nucleotideMutations: ['A123T'],
+                },
+            ]);
+        });
+
+        it('with annotation name filter', () => {
+            expectFilteredValue({ textFilter: '', annotationNameFilter: new Set(['Annotation 1']) }, [
                 {
                     name: 'Annotation 1',
                     description: 'Description 1',