@genspectrum/dashboard-components 1.2.0 → 1.3.1

package/src/preact/mutationsOverTime/__mockData__/withDisplayMutations.ts

@@ -0,0 +1,352 @@
+import { type MutationOverTimeMockData } from './mockConversion';
+
+export const withDisplayMutations: MutationOverTimeMockData = {
+    query: {
+        lapisFilter: {
+            pangoLineage: 'JN.1*',
+            dateFrom: '2024-01-15',
+            dateTo: '2024-07-10',
+        },
+        sequenceType: 'nucleotide',
+        granularity: 'month',
+        lapisDateField: 'date',
+        lapis: 'https://lapis.cov-spectrum.org/open/v2',
+        displayMutations: ['A19722G', 'G21641T', 'T21653-'],
+        useNewEndpoint: false,
+    },
+    response: {
+        overallMutationData: [
+            {
+                type: 'substitution',
+                mutation: {
+                    valueAtReference: 'A',
+                    substitutionValue: 'G',
+                    position: 19722,
+                    type: 'substitution',
+                    code: 'A19722G',
+                },
+                count: 10234,
+                proportion: 0.09900453714363107,
+            },
+            {
+                type: 'substitution',
+                mutation: {
+                    valueAtReference: 'G',
+                    substitutionValue: 'T',
+                    position: 21641,
+                    type: 'substitution',
+                    code: 'G21641T',
+                },
+                count: 4485,
+                proportion: 0.05001951709139575,
+            },
+            {
+                type: 'deletion',
+                mutation: {
+                    valueAtReference: 'T',
+                    position: 21653,
+                    type: 'deletion',
+                    code: 'T21653-',
+                },
+                count: 17169,
+                proportion: 0.16814713976514833,
+            },
+        ],
+        mutationOverTimeSerializedAsArray: {
+            data: [
+                [
+                    'A19722G',
+                    [
+                        [
+                            '2024-01',
+                            {
+                                type: 'belowThreshold',
+                                totalCount: 26387,
+                            },
+                        ],
+                        [
+                            '2024-02',
+                            {
+                                type: 'belowThreshold',
+                                totalCount: 17340,
+                            },
+                        ],
+                        [
+                            '2024-03',
+                            {
+                                type: 'value',
+                                count: 36,
+                                proportion: 0.0043859649122807015,
+                                totalCount: 8236,
+                            },
+                        ],
+                        [
+                            '2024-04',
+                            {
+                                type: 'value',
+                                count: 194,
+                                proportion: 0.030082183284230114,
+                                totalCount: 6488,
+                            },
+                        ],
+                        [
+                            '2024-05',
+                            {
+                                type: 'value',
+                                count: 759,
+                                proportion: 0.08675277174534232,
+                                totalCount: 8799,
+                            },
+                        ],
+                        [
+                            '2024-06',
+                            {
+                                type: 'value',
+                                count: 2921,
+                                proportion: 0.19071559153826065,
+                                totalCount: 15400,
+                            },
+                        ],
+                        [
+                            '2024-07',
+                            {
+                                type: 'value',
+                                count: 6318,
+                                proportion: 0.2995448511283899,
+                                totalCount: 21234,
+                            },
+                        ],
+                    ],
+                ],
+                [
+                    'G21641T',
+                    [
+                        [
+                            '2024-01',
+                            {
+                                type: 'value',
+                                count: 1625,
+                                proportion: 0.07085858806087297,
+                                totalCount: 26387,
+                            },
+                        ],
+                        [
+                            '2024-02',
+                            {
+                                type: 'value',
+                                count: 419,
+                                proportion: 0.027931471235250985,
+                                totalCount: 17340,
+                            },
+                        ],
+                        [
+                            '2024-03',
+                            {
+                                type: 'value',
+                                count: 228,
+                                proportion: 0.03451930355791068,
+                                totalCount: 8236,
+                            },
+                        ],
+                        [
+                            '2024-04',
+                            {
+                                type: 'value',
+                                count: 545,
+                                proportion: 0.10551790900290416,
+                                totalCount: 6488,
+                            },
+                        ],
+                        [
+                            '2024-05',
+                            {
+                                type: 'value',
+                                count: 666,
+                                proportion: 0.09498003422703936,
+                                totalCount: 8799,
+                            },
+                        ],
+                        [
+                            '2024-06',
+                            {
+                                type: 'value',
+                                count: 732,
+                                proportion: 0.05598470363288719,
+                                totalCount: 15400,
+                            },
+                        ],
+                        [
+                            '2024-07',
+                            {
+                                type: 'value',
+                                count: 270,
+                                proportion: 0.013585589212035825,
+                                totalCount: 21234,
+                            },
+                        ],
+                    ],
+                ],
+                [
+                    'T21653-',
+                    [
+                        [
+                            '2024-01',
+                            {
+                                type: 'belowThreshold',
+                                totalCount: 26387,
+                            },
+                        ],
+                        [
+                            '2024-02',
+                            {
+                                type: 'belowThreshold',
+                                totalCount: 17340,
+                            },
+                        ],
+                        [
+                            '2024-03',
+                            {
+                                type: 'value',
+                                count: 40,
+                                proportion: 0.004921259842519685,
+                                totalCount: 8236,
+                            },
+                        ],
+                        [
+                            '2024-04',
+                            {
+                                type: 'value',
+                                count: 228,
+                                proportion: 0.03576470588235294,
+                                totalCount: 6488,
+                            },
+                        ],
+                        [
+                            '2024-05',
+                            {
+                                type: 'value',
+                                count: 1304,
+                                proportion: 0.151504589287789,
+                                totalCount: 8799,
+                            },
+                        ],
+                        [
+                            '2024-06',
+                            {
+                                type: 'value',
+                                count: 4744,
+                                proportion: 0.31656212464967304,
+                                totalCount: 15400,
+                            },
+                        ],
+                        [
+                            '2024-07',
+                            {
+                                type: 'value',
+                                count: 10815,
+                                proportion: 0.5221610660486674,
+                                totalCount: 21234,
+                            },
+                        ],
+                    ],
+                ],
+            ],
+            keysFirstAxis: [
+                [
+                    'A19722G',
+                    {
+                        type: 'substitution',
+                        code: 'A19722G',
+                        position: 19722,
+                        valueAtReference: 'A',
+                        substitutionValue: 'G',
+                    },
+                ],
+                [
+                    'G21641T',
+                    {
+                        type: 'substitution',
+                        code: 'G21641T',
+                        position: 21641,
+                        valueAtReference: 'G',
+                        substitutionValue: 'T',
+                    },
+                ],
+                [
+                    'T21653-',
+                    {
+                        type: 'deletion',
+                        code: 'T21653-',
+                        position: 21653,
+                        valueAtReference: 'T',
+                    },
+                ],
+            ],
+            keysSecondAxis: [
+                [
+                    '2024-01',
+                    {
+                        type: 'YearMonth',
+                        yearNumber: 2024,
+                        monthNumber: 1,
+                        dateString: '2024-01',
+                    },
+                ],
+                [
+                    '2024-02',
+                    {
+                        type: 'YearMonth',
+                        yearNumber: 2024,
+                        monthNumber: 2,
+                        dateString: '2024-02',
+                    },
+                ],
+                [
+                    '2024-03',
+                    {
+                        type: 'YearMonth',
+                        yearNumber: 2024,
+                        monthNumber: 3,
+                        dateString: '2024-03',
+                    },
+                ],
+                [
+                    '2024-04',
+                    {
+                        type: 'YearMonth',
+                        yearNumber: 2024,
+                        monthNumber: 4,
+                        dateString: '2024-04',
+                    },
+                ],
+                [
+                    '2024-05',
+                    {
+                        type: 'YearMonth',
+                        yearNumber: 2024,
+                        monthNumber: 5,
+                        dateString: '2024-05',
+                    },
+                ],
+                [
+                    '2024-06',
+                    {
+                        type: 'YearMonth',
+                        yearNumber: 2024,
+                        monthNumber: 6,
+                        dateString: '2024-06',
+                    },
+                ],
+                [
+                    '2024-07',
+                    {
+                        type: 'YearMonth',
+                        yearNumber: 2024,
+                        monthNumber: 7,
+                        dateString: '2024-07',
+                    },
+                ],
+            ],
+        },
+    },
+};

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

@@ -211,30 +211,6 @@ describe('getFilteredMutationOverTimeData', () => {
         expect(result.getFirstAxisKeys()).to.deep.equal([someSubstitution, anotherSubstitution, someDeletion]);
     });
 
-    it('should filter by displayMutations', () => {
-        const { data, overallMutationData } = prepareMutationOverTimeData([
-            someSubstitutionEntry,
-            anotherSubstitutionEntry,
-            someDeletionEntry,
-        ]);
-
-        const result = getFilteredMutationOverTimeData({
-            data,
-            overallMutationData,
-            displayedSegments: [],
-            displayedMutationTypes: [],
-            proportionInterval,
-            displayMutations: [anotherSubstitution.code, someDeletion.code],
-            mutationFilterValue: { textFilter: '', annotationNameFilter: new Set() },
-            sequenceType: 'nucleotide',
-            annotationProvider: () => {
-                return [];
-            },
-        });
-
-        expect(result.getFirstAxisKeys()).to.deep.equal([anotherSubstitution, someDeletion]);
-    });
-
     it('should filter by mutation filter text value', () => {
         const { data, overallMutationData } = prepareMutationOverTimeData([
             someSubstitutionEntry,

package/src/preact/mutationsOverTime/getFilteredMutationsOverTimeData.ts

@@ -34,16 +34,12 @@ export function getFilteredMutationOverTimeData({
     displayedSegments,
     displayedMutationTypes,
     proportionInterval,
-    displayMutations,
     mutationFilterValue,
     sequenceType,
     annotationProvider,
 }: GetFilteredMutationOverTimeDataArgs) {
     const filteredData = new Map2dView(data);
 
-    const displayMutationsSet =
-        displayMutations === undefined ? null : new Set(displayMutations.map((it) => it.toUpperCase()));
-
     const mutationsToFilterOut = overallMutationData.filter((entry) => {
         if (entry.proportion < proportionInterval.min || entry.proportion > proportionInterval.max) {
             return true;
@@ -52,10 +48,6 @@ export function getFilteredMutationOverTimeData({
             return true;
         }
 
-        if (displayMutationsSet !== null && !displayMutationsSet.has(entry.mutation.code.toUpperCase())) {
-            return true;
-        }
-
         if (
             mutationOrAnnotationDoNotMatchFilter(entry.mutation, sequenceType, mutationFilterValue, annotationProvider)
         ) {

package/src/preact/mutationsOverTime/mutationOverTimeWorker.mock.ts

@@ -7,11 +7,13 @@ import { defaultMockData } from './__mockData__/defaultMockData';
 import { getMutationOverTimeMock } from './__mockData__/mockConversion';
 import { noDataWhenNoMutationsAreInFilter } from './__mockData__/noDataWhenNoMutationsAreInFilter';
 import { showsMessageWhenTooManyMutations } from './__mockData__/showsMessageWhenTooManyMutations';
+import { withDisplayMutations } from './__mockData__/withDisplayMutations';
 
 const mockQueries: { query: MutationOverTimeQuery; response: MutationOverTimeWorkerResponse }[] = [
     getMutationOverTimeMock(defaultMockData),
     getMutationOverTimeMock(showsMessageWhenTooManyMutations),
     getMutationOverTimeMock(byWeek),
+    getMutationOverTimeMock(withDisplayMutations),
     getMutationOverTimeMock(aminoAcidMutationsByDay),
     getMutationOverTimeMock(noDataWhenNoMutationsAreInFilter),
 ];

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

@@ -36,6 +36,7 @@ const meta: Meta<MutationsOverTimeProps> = {
         displayMutations: { control: 'object' },
         initialMeanProportionInterval: { control: 'object' },
         pageSizes: { control: 'object' },
+        useNewEndpoint: { control: 'boolean' },
     },
     parameters: {
         fetchMock: {},
@@ -80,6 +81,7 @@ export const Default: StoryObj<MutationsOverTimeProps> = {
         granularity: 'month',
         lapisDateField: 'date',
         initialMeanProportionInterval: { min: 0.05, max: 0.9 },
+        useNewEndpoint: false,
         pageSizes: [10, 20, 30, 40, 50],
     },
 };

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

@@ -12,6 +12,7 @@ import {
 } from './getFilteredMutationsOverTimeData';
 import { type MutationOverTimeWorkerResponse } from './mutationOverTimeWorker';
 import MutationsOverTimeGrid from './mutations-over-time-grid';
+import { type MutationOverTimeQuery } from '../../query/queryMutationsOverTime';
 import {
     lapisFilterSchema,
     sequenceTypeSchema,
@@ -52,6 +53,7 @@ const mutationOverTimeSchema = z.object({
     views: z.array(mutationsOverTimeViewSchema),
     granularity: temporalGranularitySchema,
     lapisDateField: z.string().min(1),
+    useNewEndpoint: z.boolean().optional(),
     displayMutations: displayMutationsSchema.optional(),
     initialMeanProportionInterval: z.object({
         min: z.number().min(0).max(1),
@@ -76,19 +78,24 @@ export const MutationsOverTime: FunctionComponent<MutationsOverTimeProps> = (com
     );
 };
 
-export const MutationsOverTimeInner: FunctionComponent<MutationsOverTimeProps> = (componentProps) => {
+export const MutationsOverTimeInner: FunctionComponent<MutationsOverTimeProps> = ({
+    useNewEndpoint = false,
+    ...componentProps
+}) => {
     const lapis = useLapisUrl();
-    const { lapisFilter, sequenceType, granularity, lapisDateField } = componentProps;
+    const { lapisFilter, sequenceType, granularity, lapisDateField, displayMutations } = componentProps;
 
-    const messageToWorker = useMemo(() => {
+    const messageToWorker: MutationOverTimeQuery = useMemo(() => {
         return {
             lapisFilter,
             sequenceType,
             granularity,
             lapisDateField,
             lapis,
+            displayMutations,
+            useNewEndpoint,
         };
-    }, [granularity, lapis, lapisDateField, lapisFilter, sequenceType]);
+    }, [granularity, lapis, lapisDateField, lapisFilter, sequenceType, displayMutations, useNewEndpoint]);
 
     const { data, error, isLoading } = useWebWorker<MutationOverTimeWorkerResponse>(
         messageToWorker,
@@ -154,7 +161,6 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
             displayedSegments,
             displayedMutationTypes,
             proportionInterval,
-            displayMutations: originalComponentProps.displayMutations,
             mutationFilterValue,
             sequenceType: originalComponentProps.sequenceType,
             annotationProvider,
@@ -165,7 +171,6 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
         displayedSegments,
         displayedMutationTypes,
         proportionInterval,
-        originalComponentProps.displayMutations,
         originalComponentProps.sequenceType,
         mutationFilterValue,
         annotationProvider,

package/src/query/queryMutationsOverTime.spec.ts

@@ -876,6 +876,104 @@ describe('queryMutationsOverTime', () => {
         expect(mutationOverTimeData.getAsArray()).to.deep.equal([[null]]);
     });
 
+    it('should respect the includeMutations parameter', async () => {
+        const lapisFilter = { field1: 'value1', field2: 'value2' };
+        const dateField = 'dateField';
+
+        lapisRequestMocks.multipleAggregated([
+            {
+                body: { ...lapisFilter, fields: [dateField] },
+                response: {
+                    data: [
+                        { count: 1, [dateField]: '2023-01-05' },
+                        { count: 2, [dateField]: '2023-02-15' },
+                    ],
+                },
+            },
+            {
+                body: {
+                    ...lapisFilter,
+                    dateFieldFrom: '2023-01-01',
+                    dateFieldTo: '2023-01-31',
+                    fields: [],
+                },
+                response: { data: [{ count: 11 }] },
+            },
+            {
+                body: {
+                    ...lapisFilter,
+                    dateFieldFrom: '2023-02-01',
+                    dateFieldTo: '2023-02-28',
+                    fields: [],
+                },
+                response: { data: [{ count: 12 }] },
+            },
+        ]);
+
+        lapisRequestMocks.multipleMutations(
+            [
+                {
+                    body: {
+                        ...lapisFilter,
+                        dateFieldFrom: '2023-01-01',
+                        dateFieldTo: '2023-01-31',
+                        minProportion: 0.001,
+                    },
+                    response: { data: [getSomeTestMutation(0.1, 1), getSomeOtherTestMutation(0.4, 4)] },
+                },
+                {
+                    body: {
+                        ...lapisFilter,
+                        dateFieldFrom: '2023-02-01',
+                        dateFieldTo: '2023-02-28',
+                        minProportion: 0.001,
+                    },
+                    response: { data: [getSomeTestMutation(0.2, 2)] },
+                },
+                {
+                    body: {
+                        ...lapisFilter,
+                        dateFieldFrom: '2023-01-01',
+                        dateFieldTo: '2023-02-28',
+                        minProportion: 0.001,
+                    },
+                    response: {
+                        data: [getSomeTestMutation(0.21, 6), getSomeOtherTestMutation(0.22, 4)],
+                    },
+                },
+            ],
+            'nucleotide',
+        );
+
+        const { mutationOverTimeData } = await queryMutationsOverTimeData({
+            lapisFilter,
+            sequenceType: 'nucleotide',
+            lapis: DUMMY_LAPIS_URL,
+            lapisDateField: dateField,
+            granularity: 'month',
+            displayMutations: ['otherSequenceName:G234C', 'A44T'],
+        });
+
+        expect(mutationOverTimeData.getAsArray()).to.deep.equal([
+            [
+                { type: 'belowThreshold', totalCount: 11 },
+                { type: 'belowThreshold', totalCount: 12 },
+            ],
+            [
+                { type: 'value', proportion: 0.4, count: 4, totalCount: 11 },
+                { type: 'belowThreshold', totalCount: 12 },
+            ],
+        ]);
+
+        const sequences = mutationOverTimeData.getFirstAxisKeys();
+        expect(sequences[0].code).toBe('A44T');
+        expect(sequences[1].code).toBe('otherSequenceName:G234C');
+
+        const dates = mutationOverTimeData.getSecondAxisKeys();
+        expect(dates[0].dateString).toBe('2023-01');
+        expect(dates[1].dateString).toBe('2023-02');
+    });
+
     function getSomeTestMutation(proportion: number, count: number) {
         return {
             mutation: 'sequenceName:A123T',