@genspectrum/dashboard-components 1.16.0 → 1.17.0

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

@@ -0,0 +1,236 @@
+import { describe, expect, it } from 'vitest';
+
+import { getFilteredMutationCodes, type MutationFilter } from './getFilteredMutationCodes';
+import { type DeletionEntry, type SubstitutionEntry } from '../../types';
+import { type Deletion, type Substitution } from '../../utils/mutations';
+import { type MutationAnnotations } from '../../web-components/mutation-annotations-context';
+import { getMutationAnnotationsContext, getMutationAnnotationsProvider } from '../MutationAnnotationsContext';
+
+describe('getFilteredMutationCodes', () => {
+    it('should filter by displayed segments', () => {
+        const result = getFilteredMutationCodes({
+            overallMutationData: [someSubstitutionEntry, anotherSubstitutionEntry, someDeletionEntry],
+            displayedSegments: [
+                { segment: 'someSegment', checked: false, label: 'Some Segment' },
+                { segment: 'someOtherSegment', checked: true, label: 'Some Other Segment' },
+            ],
+            displayedMutationTypes: [],
+            proportionInterval,
+            mutationFilterValue: { textFilter: '', annotationNameFilter: new Set() },
+            sequenceType: 'nucleotide',
+            annotationProvider: () => [],
+        });
+
+        expect(result).to.deep.equal([anotherSubstitution.code]);
+    });
+
+    it('should filter by mutation types', () => {
+        const result = getFilteredMutationCodes({
+            overallMutationData: [someSubstitutionEntry, anotherSubstitutionEntry, someDeletionEntry],
+            displayedSegments: [],
+            displayedMutationTypes: [
+                { type: 'substitution', checked: false, label: 'Substitution' },
+                { type: 'deletion', checked: true, label: 'Deletion' },
+            ],
+            proportionInterval,
+            mutationFilterValue: { textFilter: '', annotationNameFilter: new Set() },
+            sequenceType: 'nucleotide',
+            annotationProvider: () => [],
+        });
+
+        expect(result).to.deep.equal([someDeletion.code]);
+    });
+
+    it('should remove mutations where overall proportion is below filter', () => {
+        const result = getFilteredMutationCodes({
+            overallMutationData: [
+                { ...someSubstitutionEntry, proportion: belowFilter },
+                { ...anotherSubstitutionEntry, proportion: inFilter },
+                { ...someDeletionEntry, proportion: inFilter },
+            ],
+            displayedSegments: [],
+            displayedMutationTypes: [],
+            proportionInterval,
+            mutationFilterValue: { textFilter: '', annotationNameFilter: new Set() },
+            sequenceType: 'nucleotide',
+            annotationProvider: () => [],
+        });
+
+        expect(result).to.deep.equal([anotherSubstitution.code, someDeletion.code]);
+    });
+
+    it('should remove mutations where overall proportion is above filter', () => {
+        const result = getFilteredMutationCodes({
+            overallMutationData: [
+                { ...someSubstitutionEntry, proportion: aboveFilter },
+                { ...anotherSubstitutionEntry, proportion: inFilter },
+                { ...someDeletionEntry, proportion: inFilter },
+            ],
+            displayedSegments: [],
+            displayedMutationTypes: [],
+            proportionInterval,
+            mutationFilterValue: { textFilter: '', annotationNameFilter: new Set() },
+            sequenceType: 'nucleotide',
+            annotationProvider: () => [],
+        });
+
+        expect(result).to.deep.equal([anotherSubstitution.code, someDeletion.code]);
+    });
+
+    it('should not remove mutations where overall proportion is at lower bound of filter', () => {
+        const result = getFilteredMutationCodes({
+            overallMutationData: [
+                { ...someSubstitutionEntry, proportion: atFilterMin },
+                { ...anotherSubstitutionEntry, proportion: inFilter },
+                { ...someDeletionEntry, proportion: inFilter },
+            ],
+            displayedSegments: [],
+            displayedMutationTypes: [],
+            proportionInterval,
+            mutationFilterValue: { textFilter: '', annotationNameFilter: new Set() },
+            sequenceType: 'nucleotide',
+            annotationProvider: () => [],
+        });
+
+        expect(result).to.deep.equal([someSubstitution.code, anotherSubstitution.code, someDeletion.code]);
+    });
+
+    it('should not remove mutations where overall proportion is at upper bound of filter', () => {
+        const result = getFilteredMutationCodes({
+            overallMutationData: [
+                { ...someSubstitutionEntry, proportion: atFilterMax },
+                { ...anotherSubstitutionEntry, proportion: inFilter },
+                { ...someDeletionEntry, proportion: inFilter },
+            ],
+            displayedSegments: [],
+            displayedMutationTypes: [],
+            proportionInterval,
+            mutationFilterValue: { textFilter: '', annotationNameFilter: new Set() },
+            sequenceType: 'nucleotide',
+            annotationProvider: () => [],
+        });
+
+        expect(result).to.deep.equal([someSubstitution.code, anotherSubstitution.code, someDeletion.code]);
+    });
+
+    it('should filter by mutation filter text value', () => {
+        const result = getFilteredMutationCodes({
+            overallMutationData: [someSubstitutionEntry, anotherSubstitutionEntry, someDeletionEntry],
+            displayedSegments: [],
+            displayedMutationTypes: [],
+            proportionInterval,
+            mutationFilterValue: { textFilter: '23T', annotationNameFilter: new Set() },
+            sequenceType: 'nucleotide',
+            annotationProvider: () => [],
+        });
+
+        expect(result).to.deep.equal([someSubstitution.code]);
+    });
+
+    describe('should filter by annotation', () => {
+        const expectFilteredValue = (filterValue: MutationFilter, annotations: MutationAnnotations) => {
+            const annotationProvider = getMutationAnnotationsProvider(getMutationAnnotationsContext(annotations));
+
+            const result = getFilteredMutationCodes({
+                overallMutationData: [someSubstitutionEntry, anotherSubstitutionEntry, someDeletionEntry],
+                displayedSegments: [],
+                displayedMutationTypes: [],
+                proportionInterval,
+                mutationFilterValue: filterValue,
+                sequenceType: 'nucleotide',
+                annotationProvider,
+            });
+
+            expect(result).to.deep.equal([someSubstitution.code]);
+        };
+
+        it('with filter value in symbol', () => {
+            expectFilteredValue({ textFilter: '#', annotationNameFilter: new Set() }, [
+                { name: 'Annotation 1', description: 'Description 1', symbol: '#', nucleotideMutations: ['A123T'] },
+            ]);
+        });
+
+        it('with filter value in name', () => {
+            expectFilteredValue({ textFilter: 'Annota', annotationNameFilter: new Set() }, [
+                { name: 'Annotation 1 #', description: 'Description 1', symbol: '+', nucleotideMutations: ['A123T'] },
+            ]);
+        });
+
+        it('with filter value in description', () => {
+            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', symbol: '#', nucleotideMutations: ['A123T'] },
+            ]);
+        });
+    });
+
+    it('should not filter by individual time-series proportions below the overall filter', () => {
+        const result = getFilteredMutationCodes({
+            overallMutationData: [someSubstitutionEntry, anotherSubstitutionEntry, someDeletionEntry],
+            displayedSegments: [],
+            displayedMutationTypes: [],
+            proportionInterval,
+            mutationFilterValue: { textFilter: '', annotationNameFilter: new Set() },
+            sequenceType: 'nucleotide',
+            annotationProvider: () => [],
+        });
+
+        expect(result).to.deep.equal([someSubstitution.code, anotherSubstitution.code, someDeletion.code]);
+    });
+
+    const belowFilter = 0.1;
+    const atFilterMin = 0.2;
+    const inFilter = 0.5;
+    const atFilterMax = 0.9;
+    const aboveFilter = 0.99;
+    const proportionInterval = { min: atFilterMin, max: atFilterMax };
+
+    const someSubstitution: Substitution = {
+        type: 'substitution',
+        valueAtReference: 'A',
+        substitutionValue: 'T',
+        code: 'A123T',
+        segment: 'someSegment',
+        position: 123,
+    };
+    const someSubstitutionEntry: SubstitutionEntry<Substitution> = {
+        type: 'substitution',
+        mutation: someSubstitution,
+        count: 234,
+        proportion: inFilter,
+    };
+
+    const anotherSubstitution: Substitution = {
+        type: 'substitution',
+        valueAtReference: 'G',
+        substitutionValue: 'C',
+        code: 'G345C',
+        segment: 'someOtherSegment',
+        position: 345,
+    };
+    const anotherSubstitutionEntry: SubstitutionEntry<Substitution> = {
+        type: 'substitution',
+        mutation: anotherSubstitution,
+        count: 456,
+        proportion: inFilter,
+    };
+
+    const someDeletion: Deletion = {
+        type: 'deletion',
+        valueAtReference: 'A',
+        segment: 'someSegment',
+        position: 567,
+        code: 'A123-',
+    };
+    const someDeletionEntry: DeletionEntry<Deletion> = {
+        type: 'deletion',
+        mutation: someDeletion,
+        count: 789,
+        proportion: inFilter,
+    };
+});

package/src/preact/mutationsOverTime/{getFilteredMutationsOverTimeData.ts → getFilteredMutationCodes.ts}

@@ -1,8 +1,6 @@
 import z from 'zod';
 
-import { type MutationOverTimeDataMap } from './MutationOverTimeData';
 import { type SequenceType, type SubstitutionOrDeletionEntry } from '../../types';
-import { Map2dView } from '../../utils/map2d';
 import type { Deletion, Mutation, Substitution } from '../../utils/mutations';
 import { type useMutationAnnotationsProvider } from '../MutationAnnotationsContext';
 import type { DisplayedMutationType } from '../components/mutation-type-selector';
@@ -11,7 +9,6 @@ import type { DisplayedSegment } from '../components/segment-selector';
 export const displayMutationsSchema = z.array(z.string(), {
     errorMap: () => ({ message: `invalid display mutations` }),
 });
-export type DisplayMutations = z.infer<typeof displayMutationsSchema>;
 
 export type MutationFilter = {
     textFilter: string;
@@ -19,63 +16,51 @@ export type MutationFilter = {
 };
 
 export type GetFilteredMutationOverTimeDataArgs = {
-    data: MutationOverTimeDataMap;
     overallMutationData: SubstitutionOrDeletionEntry<Substitution, Deletion>[];
     displayedSegments: DisplayedSegment[];
     displayedMutationTypes: DisplayedMutationType[];
     proportionInterval: { min: number; max: number };
-    hideGaps: boolean;
-    displayMutations?: DisplayMutations;
     mutationFilterValue: MutationFilter;
     sequenceType: SequenceType;
     annotationProvider: ReturnType<typeof useMutationAnnotationsProvider>;
 };
 
-export function getFilteredMutationOverTimeData({
-    data,
+/**
+ * Extracts a list of mutation codes that should be displayed based on the provided filters and overall mutation data.
+ */
+export function getFilteredMutationCodes({
     overallMutationData,
     displayedSegments,
     displayedMutationTypes,
     proportionInterval,
-    hideGaps,
     mutationFilterValue,
     sequenceType,
     annotationProvider,
-}: GetFilteredMutationOverTimeDataArgs) {
-    const filteredData = new Map2dView(data);
-
-    const mutationsToFilterOut = overallMutationData.filter((entry) => {
-        if (entry.proportion < proportionInterval.min || entry.proportion > proportionInterval.max) {
-            return true;
-        }
-        if (displayedSegments.some((segment) => segment.segment === entry.mutation.segment && !segment.checked)) {
-            return true;
-        }
-
-        if (
-            mutationOrAnnotationDoNotMatchFilter(entry.mutation, sequenceType, mutationFilterValue, annotationProvider)
-        ) {
-            return true;
-        }
-
-        return displayedMutationTypes.some(
-            (mutationType) => mutationType.type === entry.mutation.type && !mutationType.checked,
-        );
-    });
-
-    mutationsToFilterOut.forEach((entry) => {
-        filteredData.deleteRow(entry.mutation);
-    });
-
-    if (hideGaps) {
-        const dateRangesToFilterOut = filteredData.getSecondAxisKeys().filter((dateRange) => {
-            const vals = filteredData.getColumn(dateRange);
-            return !vals.some((v) => (v?.type === 'value' || v?.type === 'valueWithCoverage') && v.totalCount > 0);
-        });
-        dateRangesToFilterOut.forEach((dateRange) => filteredData.deleteColumn(dateRange));
-    }
-
-    return filteredData;
+}: GetFilteredMutationOverTimeDataArgs): string[] {
+    return overallMutationData
+        .filter((entry) => {
+            if (entry.proportion < proportionInterval.min || entry.proportion > proportionInterval.max) {
+                return false;
+            }
+            if (displayedSegments.some((segment) => segment.segment === entry.mutation.segment && !segment.checked)) {
+                return false;
+            }
+
+            if (
+                mutationOrAnnotationDoNotMatchFilter(
+                    entry.mutation,
+                    sequenceType,
+                    mutationFilterValue,
+                    annotationProvider,
+                )
+            ) {
+                return false;
+            }
+            return !displayedMutationTypes.some(
+                (mutationType) => mutationType.type === entry.mutation.type && !mutationType.checked,
+            );
+        })
+        .map((e) => e.mutation.code);
 }
 
 export function mutationOrAnnotationDoNotMatchFilter(

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

@@ -8,7 +8,10 @@ import { type MutationAnnotations } from '../../web-components/mutation-annotati
 import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { MutationAnnotationsContextProvider } from '../MutationAnnotationsContext';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
-import mockDefaultMutationsOverTime from './__mockData__/defaultMockData/mutationsOverTime.json';
+import mockDefaultMutationsOverTimeWithFilter from './__mockData__/defaultMockData/mockDefaultMutationsOverTimeWithFilter.json';
+import mockDefaultMutationsOverTimePage1 from './__mockData__/defaultMockData/mutationsOverTimePage1.json';
+import mockDefaultMutationsOverTimePage2 from './__mockData__/defaultMockData/mutationsOverTimePage2.json';
+import mockDefaultMutationsOverTimePageSize20 from './__mockData__/defaultMockData/mutationsOverTimePageSize20.json';
 import mockDefaultNucleotideMutations from './__mockData__/defaultMockData/nucleotideMutations.json';
 import mock1800sMutationsOverTime from './__mockData__/request1800s/mutationsOverTime.json';
 import mock1800sNucleotideMutations from './__mockData__/request1800s/nucleotideMutations.json';
@@ -64,13 +67,10 @@ const meta: Meta<MutationsOverTimeProps> = {
                 },
                 {
                     matcher: {
+                        name: 'page1',
                         url: `${LAPIS_URL}/component/nucleotideMutationsOverTime`,
                         body: {
-                            filters: {
-                                pangoLineage: 'JN.1*',
-                                dateFrom: '2024-01-15',
-                                dateTo: '2024-07-10',
-                            },
+                            filters: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-07-10' },
                             dateRanges: [
                                 { dateFrom: '2024-01-01', dateTo: '2024-01-31' },
                                 { dateFrom: '2024-02-01', dateTo: '2024-02-29' },
@@ -80,12 +80,125 @@ const meta: Meta<MutationsOverTimeProps> = {
                                 { dateFrom: '2024-06-01', dateTo: '2024-06-30' },
                                 { dateFrom: '2024-07-01', dateTo: '2024-07-31' },
                             ],
+                            includeMutations: [
+                                'C44T',
+                                'C774T',
+                                'C7113T',
+                                'C12616T',
+                                'A13121T',
+                                'G15372T',
+                                'G17334T',
+                                'T18453C',
+                                'A19722G',
+                                'T21653-',
+                            ],
                             dateField: 'date',
                         },
-                        matchPartialBody: true, // includeMutations left out
                         response: {
                             status: 200,
-                            body: mockDefaultMutationsOverTime,
+                            body: mockDefaultMutationsOverTimePage1,
+                        },
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'page2',
+                        url: `${LAPIS_URL}/component/nucleotideMutationsOverTime`,
+                        body: {
+                            filters: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-07-10' },
+                            dateRanges: [
+                                { dateFrom: '2024-01-01', dateTo: '2024-01-31' },
+                                { dateFrom: '2024-02-01', dateTo: '2024-02-29' },
+                                { dateFrom: '2024-03-01', dateTo: '2024-03-31' },
+                                { dateFrom: '2024-04-01', dateTo: '2024-04-30' },
+                                { dateFrom: '2024-05-01', dateTo: '2024-05-31' },
+                                { dateFrom: '2024-06-01', dateTo: '2024-06-30' },
+                                { dateFrom: '2024-07-01', dateTo: '2024-07-31' },
+                            ],
+                            includeMutations: [
+                                'C21654-',
+                                'T21655-',
+                                'G22111T',
+                                'G22599C',
+                                'T22928C',
+                                'T23011-',
+                                'C23039G',
+                                'C23277T',
+                                'G24872T',
+                            ],
+                            dateField: 'date',
+                        },
+                        response: {
+                            status: 200,
+                            body: mockDefaultMutationsOverTimePage2,
+                        },
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'page1-pageSize20',
+                        url: `${LAPIS_URL}/component/nucleotideMutationsOverTime`,
+                        body: {
+                            filters: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-07-10' },
+                            dateRanges: [
+                                { dateFrom: '2024-01-01', dateTo: '2024-01-31' },
+                                { dateFrom: '2024-02-01', dateTo: '2024-02-29' },
+                                { dateFrom: '2024-03-01', dateTo: '2024-03-31' },
+                                { dateFrom: '2024-04-01', dateTo: '2024-04-30' },
+                                { dateFrom: '2024-05-01', dateTo: '2024-05-31' },
+                                { dateFrom: '2024-06-01', dateTo: '2024-06-30' },
+                                { dateFrom: '2024-07-01', dateTo: '2024-07-31' },
+                            ],
+                            includeMutations: [
+                                'C44T',
+                                'C774T',
+                                'C7113T',
+                                'C12616T',
+                                'A13121T',
+                                'G15372T',
+                                'G17334T',
+                                'T18453C',
+                                'A19722G',
+                                'T21653-',
+                                'C21654-',
+                                'T21655-',
+                                'G22111T',
+                                'G22599C',
+                                'T22928C',
+                                'T23011-',
+                                'C23039G',
+                                'C23277T',
+                                'G24872T',
+                            ],
+                            dateField: 'date',
+                        },
+                        response: {
+                            status: 200,
+                            body: mockDefaultMutationsOverTimePageSize20,
+                        },
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'withFilter',
+                        url: `${LAPIS_URL}/component/nucleotideMutationsOverTime`,
+                        body: {
+                            filters: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-07-10' },
+                            dateRanges: [
+                                { dateFrom: '2024-01-01', dateTo: '2024-01-31' },
+                                { dateFrom: '2024-02-01', dateTo: '2024-02-29' },
+                                { dateFrom: '2024-03-01', dateTo: '2024-03-31' },
+                                { dateFrom: '2024-04-01', dateTo: '2024-04-30' },
+                                { dateFrom: '2024-05-01', dateTo: '2024-05-31' },
+                                { dateFrom: '2024-06-01', dateTo: '2024-06-30' },
+                                { dateFrom: '2024-07-01', dateTo: '2024-07-31' },
+                            ],
+                            includeMutations: ['T21653-', 'T21655-'],
+                            dateField: 'date',
+                        },
+                        response: {
+                            status: 200,
+                            body: mockDefaultMutationsOverTimeWithFilter,
                         },
                     },
                 },
@@ -270,7 +383,7 @@ export const UsesPagination: StoryObj<MutationsOverTimeProps> = {
     ...Default,
     play: async ({ canvas, step }) => {
         const mutationOnFirstPage = 'C44T';
-        const mutationOnSecondPage = 'T21653-';
+        const mutationOnSecondPage = 'C21654-';
         await expectMutationOnPage(canvas, mutationOnFirstPage);
 
         await step('Navigate to next page', async () => {
@@ -279,11 +392,8 @@ export const UsesPagination: StoryObj<MutationsOverTimeProps> = {
             await expectMutationOnPage(canvas, mutationOnSecondPage);
         });
 
-        await step('Use goto page input', async () => {
-            const gotoPageInput = canvas.getByRole('spinbutton', { name: 'Enter page number to go to' });
-            await userEvent.clear(gotoPageInput);
-            await userEvent.type(gotoPageInput, '1');
-            await userEvent.tab();
+        await step('Go to previous page', async () => {
+            canvas.getByRole('button', { name: 'Previous page' }).click();
 
             await expectMutationOnPage(canvas, mutationOnFirstPage);
         });
@@ -448,16 +558,11 @@ export const ShowsNoDataMessageForStrictFilters: StoryObj<MutationsOverTimeProps
     play: async ({ canvas }) => {
         await waitFor(() => expect(canvas.getByText('Grid')).toBeVisible(), { timeout: 10000 });
 
-        const button = canvas.getByRole('button', { name: 'Mean proportion 5.0% - 90.0%' });
-        await userEvent.click(button);
-
-        const minInput = canvas.getAllByLabelText('%')[0];
-        await userEvent.clear(minInput);
-        await userEvent.type(minInput, '40');
+        const filterButton = canvas.getByRole('button', { name: 'Filter mutations' });
+        await userEvent.click(filterButton);
 
-        const maxInput = canvas.getAllByLabelText('%')[1];
-        await userEvent.clear(maxInput);
-        await userEvent.type(maxInput, '41');
+        const filterInput = canvas.getByPlaceholderText('Filter');
+        await userEvent.type(filterInput, 'too strict');
 
         await waitFor(
             () => expect(canvas.getByText('No data available for your filters.', { exact: false })).toBeVisible(),