@genspectrum/dashboard-components 1.16.0 → 1.17.0

package/src/query/queryMutationsOverTime.ts

@@ -11,8 +11,8 @@ import {
     type TemporalGranularity,
 } from '../types';
 import { type Map2DContents } from '../utils/map2d';
-import { type Deletion, type Substitution, DeletionClass, SubstitutionClass } from '../utils/mutations';
-import { type Temporal } from '../utils/temporalClass';
+import { type Deletion, DeletionClass, type Substitution, SubstitutionClass } from '../utils/mutations';
+import { type Temporal, type TemporalClass } from '../utils/temporalClass';
 
 export type ProportionValue =
     | {
@@ -89,21 +89,19 @@ async function queryOverallMutationData({
     lapisFilter,
     sequenceType,
     lapis,
-    granularity,
     lapisDateField,
     includeMutations,
+    requestedDateRanges,
     signal,
 }: {
     lapisFilter: LapisFilter;
     sequenceType: SequenceType;
     lapis: string;
-    granularity: TemporalGranularity;
     lapisDateField: string;
     includeMutations?: string[];
+    requestedDateRanges: TemporalClass[];
     signal?: AbortSignal;
 }) {
-    const requestedDateRanges = await queryDatesInDataset(lapisFilter, lapis, granularity, lapisDateField, signal);
-
     if (requestedDateRanges.length === 0) {
         if (includeMutations) {
             return {
@@ -142,7 +140,11 @@ async function queryOverallMutationData({
     return dataPromise;
 }
 
-export async function queryMutationsOverTimeData(
+/**
+ * Phase 1: Fetch date buckets and the full sorted list of mutations above the threshold.
+ * This is cheap and does not depend on the current page.
+ */
+export async function queryMutationsOverTimeMetadata(
     lapisFilter: LapisFilter,
     sequenceType: SequenceType,
     lapis: string,
@@ -168,12 +170,38 @@ export async function queryMutationsOverTimeData(
         lapis,
         lapisDateField,
         includeMutations: displayMutations,
-        granularity,
+        requestedDateRanges,
+        signal,
     }).then((r) => r.content);
 
     overallMutationData.sort((a, b) => sortSubstitutionsAndDeletions(a.mutation, b.mutation));
 
-    const includeMutations = overallMutationData.map((value) => value.mutation.code);
+    return { overallMutationData, requestedDateRanges };
+}
+
+export type MutationsOverTimeMetadata = Awaited<ReturnType<typeof queryMutationsOverTimeMetadata>>;
+
+/**
+ * Phase 2: Fetch the time-series matrix for a specific slice of mutations (e.g. one page).
+ * Pass `requestedDateRanges` from Phase 1, plus a slice of mutation codes to fetch.
+ */
+export async function queryMutationsOverTimePage(
+    lapisFilter: LapisFilter,
+    lapis: string,
+    lapisDateField: string,
+    sequenceType: SequenceType,
+    requestedDateRanges: MutationsOverTimeMetadata['requestedDateRanges'],
+    includeMutationCodes: string[],
+    signal?: AbortSignal,
+) {
+    if (includeMutationCodes.length === 0 || requestedDateRanges.length === 0) {
+        return new BaseMutationOverTimeDataMap({
+            keysFirstAxis: new Map(),
+            keysSecondAxis: new Map(requestedDateRanges.map((date) => [date.dateString, date])),
+            data: new Map(),
+        });
+    }
+
     const apiResult = await fetchMutationsOverTime(
         lapis,
         {
@@ -182,34 +210,22 @@ export async function queryMutationsOverTimeData(
                 dateFrom: date.firstDay.toString(),
                 dateTo: date.lastDay.toString(),
             })),
-            includeMutations,
+            includeMutations: includeMutationCodes,
             dateField: lapisDateField,
         },
         sequenceType,
         signal,
     );
 
+    return buildMutationOverTimeDataMap(apiResult, requestedDateRanges);
+}
+
+function buildMutationOverTimeDataMap(
+    apiResult: Awaited<ReturnType<typeof fetchMutationsOverTime>>,
+    requestedDateRanges: MutationsOverTimeMetadata['requestedDateRanges'],
+) {
     const totalCounts = apiResult.data.totalCountsByDateRange;
     const responseMutations = apiResult.data.mutations.map(parseMutationCode);
-    const mutationEntries: SubstitutionOrDeletionEntry[] = responseMutations.map((mutation, i) => {
-        const numbers = {
-            count: overallMutationData[i].count,
-            proportion: overallMutationData[i].proportion,
-        };
-        if (mutation.type === 'deletion') {
-            return {
-                type: 'deletion',
-                mutation,
-                ...numbers,
-            };
-        } else {
-            return {
-                type: 'substitution',
-                mutation,
-                ...numbers,
-            };
-        }
-    });
 
     const mutationOverTimeData: Map2DContents<Substitution | Deletion, Temporal, ProportionValue> = {
         keysFirstAxis: new Map(responseMutations.map((mutation) => [mutation.code, mutation])),
@@ -251,10 +267,7 @@ export async function queryMutationsOverTimeData(
         ),
     };
 
-    return {
-        mutationOverTimeData: new BaseMutationOverTimeDataMap(mutationOverTimeData),
-        overallMutationData: mutationEntries,
-    };
+    return new BaseMutationOverTimeDataMap(mutationOverTimeData);
 }
 
 function parseMutationCode(code: string): SubstitutionClass | DeletionClass {

package/src/utils/useControlledState.ts

@@ -0,0 +1,15 @@
+import { useEffect, useState } from 'preact/hooks';
+
+/**
+ * For when state is supplied via an attribute to the web component,
+ * and we need to update the internal state when the attribute value changes
+ */
+export function useControlledState<S>(initialState: S) {
+    const [state, setState] = useState(initialState);
+
+    useEffect(() => {
+        setState(initialState);
+    }, [initialState]);
+
+    return [state, setState] as const;
+}

package/src/web-components/visualization/gs-mutations-over-time.stories.ts

@@ -6,10 +6,11 @@ import '../gs-app';
 import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
 import { LAPIS_URL } from '../../constants';
 import mockAminoAcidMutationsByDayAminoAcidMutations from '../../preact/mutationsOverTime/__mockData__/aminoAcidMutationsByDay/aminoAcidMutations.json';
-import mockAminoAcidMutationsByDayAminoAcidMutationsOverTime from '../../preact/mutationsOverTime/__mockData__/aminoAcidMutationsByDay/aminoAcidMutationsOverTime.json';
-import mockByWeekMutationsOverTime from '../../preact/mutationsOverTime/__mockData__/byWeek/mutationsOverTime.json';
+import mockAminoAcidMutationsByDayAminoAcidMutationsOverTimePage1 from '../../preact/mutationsOverTime/__mockData__/aminoAcidMutationsByDay/aminoAcidMutationsOverTimePage1.json';
+import mockByWeekMutationsOverTimePage1 from '../../preact/mutationsOverTime/__mockData__/byWeek/mutationsOverTimePage1.json';
 import mockByWeekNucleotideMutations from '../../preact/mutationsOverTime/__mockData__/byWeek/nucleotideMutations.json';
-import mockDefaultMutationsOverTime from '../../preact/mutationsOverTime/__mockData__/defaultMockData/mutationsOverTime.json';
+import mockDefaultMutationsOverTimePage1 from '../../preact/mutationsOverTime/__mockData__/defaultMockData/mutationsOverTimePage1.json';
+import mockDefaultMutationsOverTimePageSize20 from '../../preact/mutationsOverTime/__mockData__/defaultMockData/mutationsOverTimePageSize20.json';
 import mockDefaultNucleotideMutations from '../../preact/mutationsOverTime/__mockData__/defaultMockData/nucleotideMutations.json';
 import mockWithDisplayMutationsMutationsOverTime from '../../preact/mutationsOverTime/__mockData__/withDisplayMutations/mutationsOverTime.json';
 import { type MutationsOverTimeProps } from '../../preact/mutationsOverTime/mutations-over-time';
@@ -91,11 +92,7 @@ const meta: Meta<Required<MutationsOverTimeProps>> = {
                     matcher: {
                         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' },
@@ -105,12 +102,67 @@ const meta: Meta<Required<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',
+                        },
+                        response: {
+                            status: 200,
+                            body: mockDefaultMutationsOverTimePage1,
+                        },
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'downloadData',
+                        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',
                         },
-                        matchPartialBody: true,
                         response: {
                             status: 200,
-                            body: mockDefaultMutationsOverTime,
+                            body: mockDefaultMutationsOverTimePageSize20,
                         },
                     },
                 },
@@ -310,23 +362,30 @@ export const ByWeek: StoryObj<Required<MutationsOverTimeProps>> = {
                     matcher: {
                         url: `${LAPIS_URL}/component/nucleotideMutationsOverTime`,
                         body: {
-                            filters: {
-                                pangoLineage: 'JN.1*',
-                                dateFrom: '2024-01-15',
-                                dateTo: '2024-02-11',
-                            },
+                            filters: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-02-11' },
                             dateRanges: [
                                 { dateFrom: '2024-01-15', dateTo: '2024-01-21' },
                                 { dateFrom: '2024-01-22', dateTo: '2024-01-28' },
                                 { dateFrom: '2024-01-29', dateTo: '2024-02-04' },
                                 { dateFrom: '2024-02-05', dateTo: '2024-02-11' },
                             ],
+                            includeMutations: [
+                                'C44T',
+                                'C774T',
+                                'C1762A',
+                                'C11747T',
+                                'G17562T',
+                                'T18453C',
+                                'G21641T',
+                                'C23277T',
+                                'C29870A',
+                            ],
                             dateField: 'date',
                         },
                         matchPartialBody: true,
                         response: {
                             status: 200,
-                            body: mockByWeekMutationsOverTime,
+                            body: mockByWeekMutationsOverTimePage1,
                         },
                     },
                 },
@@ -365,11 +424,7 @@ export const AminoAcidMutationsByDay: StoryObj<Required<MutationsOverTimeProps>>
                     matcher: {
                         url: `${LAPIS_URL}/component/aminoAcidMutationsOverTime`,
                         body: {
-                            filters: {
-                                pangoLineage: 'JN.1*',
-                                dateFrom: '2024-01-20',
-                                dateTo: '2024-01-26',
-                            },
+                            filters: { pangoLineage: 'JN.1*', dateFrom: '2024-01-20', dateTo: '2024-01-26' },
                             dateRanges: [
                                 { dateFrom: '2024-01-20', dateTo: '2024-01-20' },
                                 { dateFrom: '2024-01-21', dateTo: '2024-01-21' },
@@ -379,12 +434,13 @@ export const AminoAcidMutationsByDay: StoryObj<Required<MutationsOverTimeProps>>
                                 { dateFrom: '2024-01-25', dateTo: '2024-01-25' },
                                 { dateFrom: '2024-01-26', dateTo: '2024-01-26' },
                             ],
+                            includeMutations: ['ORF1a:T170I', 'ORF1a:F499L', 'S:T572I'],
                             dateField: 'date',
                         },
                         matchPartialBody: true,
                         response: {
                             status: 200,
-                            body: mockAminoAcidMutationsByDayAminoAcidMutationsOverTime,
+                            body: mockAminoAcidMutationsByDayAminoAcidMutationsOverTimePage1,
                         },
                     },
                 },