@genspectrum/dashboard-components 1.2.0 → 1.3.0

package/dist/util.d.ts

@@ -917,7 +917,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
+        'gs-genome-data-viewer': GenomeDataViewerComponent;
     }
 }
 
@@ -925,7 +925,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-genome-data-viewer': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -933,7 +933,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-genome-data-viewer': GenomeDataViewerComponent;
+        'gs-mutation-comparison-component': MutationComparisonComponent;
     }
 }
 
@@ -941,7 +941,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-genome-data-viewer': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -981,7 +981,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-comparison-component': MutationComparisonComponent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -989,7 +989,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -997,7 +997,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -1005,7 +1005,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1013,7 +1013,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1021,7 +1021,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1045,7 +1045,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -1053,7 +1053,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1061,7 +1061,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
     }
 }
 
@@ -1069,7 +1069,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "1.2.0",
+    "version": "1.3.0",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",

package/src/lapisApi/lapisApi.ts

@@ -9,6 +9,8 @@ import {
     mutationsResponse,
     problemDetail,
     type ProblemDetail,
+    type MutationsOverTimeRequest,
+    mutationsOverTimeResponse,
 } from './lapisTypes';
 import { type SequenceType } from '../types';
 import { lineageDefinitionResponseSchema } from './LineageDefinition';
@@ -112,6 +114,28 @@ export async function fetchSubstitutionsOrDeletions(
     return mutationsResponse.parse(await response.json());
 }
 
+export async function fetchMutationsOverTime(
+    lapisUrl: string,
+    body: MutationsOverTimeRequest,
+    sequenceType: SequenceType,
+    signal?: AbortSignal,
+) {
+    const response = await callLapis(
+        mutationsOverTimeEndpoint(lapisUrl, sequenceType),
+        {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(body),
+            signal,
+        },
+        `${sequenceType} mutations over time`,
+    );
+
+    return mutationsOverTimeResponse.parse(await response.json());
+}
+
 export async function fetchReferenceGenome(lapisUrl: string, signal?: AbortSignal) {
     const response = await callLapis(
         referenceGenomeEndpoint(lapisUrl),
@@ -215,6 +239,11 @@ export const substitutionsOrDeletionsEndpoint = (lapisUrl: string, sequenceType:
         ? `${lapisUrl}/sample/aminoAcidMutations`
         : `${lapisUrl}/sample/nucleotideMutations`;
 };
+export const mutationsOverTimeEndpoint = (lapisUrl: string, sequenceType: SequenceType) => {
+    return sequenceType === 'amino acid'
+        ? `${lapisUrl}/component/aminoAcidMutationsOverTime`
+        : `${lapisUrl}/component/nucleotideMutationsOverTime`;
+};
 export const referenceGenomeEndpoint = (lapisUrl: string) => `${lapisUrl}/sample/referenceGenome`;
 export const lineageDefinitionEndpoint = (lapisUrl: string, lapisField: string) =>
     `${lapisUrl}/sample/lineageDefinition/${lapisField}`;

package/src/lapisApi/lapisTypes.ts

@@ -7,6 +7,13 @@ export const orderBy = z.object({
     type: orderByType,
 });
 
+const filterValue = z.union([z.string(), z.number(), z.boolean(), z.null(), z.undefined(), z.array(z.string())]);
+
+const dateRange = z.object({
+    dateFrom: z.string(),
+    dateTo: z.string(),
+});
+
 export const lapisBaseRequest = z
     .object({
         limit: z.number().optional(),
@@ -14,7 +21,7 @@ export const lapisBaseRequest = z
         fields: z.array(z.string()).optional(),
         orderBy: z.array(orderBy).optional(),
     })
-    .catchall(z.union([z.boolean(), z.undefined(), z.string(), z.number(), z.null(), z.array(z.string())]));
+    .catchall(filterValue);
 export type LapisBaseRequest = z.infer<typeof lapisBaseRequest>;
 
 export const mutationsRequest = lapisBaseRequest.extend({ minProportion: z.number().optional() });
@@ -32,6 +39,33 @@ const mutationProportionCount = z.object({
 export const mutationsResponse = makeLapisResponse(z.array(mutationProportionCount));
 export type MutationsResponse = z.infer<typeof mutationsResponse>;
 
+export const mutationsOverTimeRequest = z.object({
+    filters: z.record(filterValue),
+    downloadAsFile: z.boolean().optional(),
+    downloadFileBasename: z.string().optional(),
+    compression: z.enum(['gzip', 'none']).optional(),
+    includeMutations: z.array(z.string()).optional(),
+    dateRanges: z.array(dateRange).optional(),
+    dateField: z.string().optional(),
+});
+export type MutationsOverTimeRequest = z.infer<typeof mutationsOverTimeRequest>;
+
+export const mutationsOverTimeResponse = makeLapisResponse(
+    z.object({
+        mutations: z.array(z.string()),
+        dateRanges: z.array(dateRange),
+        data: z.array(
+            z.array(
+                z.object({
+                    count: z.number(),
+                    coverage: z.number(),
+                }),
+            ),
+        ),
+    }),
+);
+export type MutationsOverTimeResponse = z.infer<typeof mutationsOverTimeResponse>;
+
 const insertionCount = z.object({
     insertion: z.string(),
     count: z.number(),

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

@@ -11,6 +11,7 @@ export const aminoAcidMutationsByDay: MutationOverTimeMockData = {
         granularity: 'day',
         lapisDateField: 'date',
         lapis: 'https://lapis.cov-spectrum.org/open/v2',
+        useNewEndpoint: false,
     },
     response: {
         overallMutationData: [

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

@@ -11,6 +11,7 @@ export const byWeek: MutationOverTimeMockData = {
         granularity: 'week',
         lapisDateField: 'date',
         lapis: 'https://lapis.cov-spectrum.org/open/v2',
+        useNewEndpoint: false,
     },
     response: {
         overallMutationData: [

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

@@ -11,6 +11,7 @@ export const defaultMockData: MutationOverTimeMockData = {
         granularity: 'month',
         lapisDateField: 'date',
         lapis: 'https://lapis.cov-spectrum.org/open/v2',
+        useNewEndpoint: false,
     },
     response: {
         overallMutationData: [

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

@@ -10,6 +10,7 @@ export const noDataWhenNoMutationsAreInFilter: MutationOverTimeMockData = {
         granularity: 'year',
         lapisDateField: 'date',
         lapis: 'https://lapis.cov-spectrum.org/open/v2',
+        useNewEndpoint: false,
     },
     response: {
         overallMutationData: [],

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

@@ -10,6 +10,7 @@ export const noDataWhenNoMutationsAreInFilter: MutationOverTimeMockData = {
         granularity: 'year',
         lapisDateField: 'date',
         lapis: 'https://lapis.cov-spectrum.org/open/v2',
+        useNewEndpoint: false,
     },
     response: {
         overallMutationData: [],

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

@@ -10,6 +10,7 @@ export const showsMessageWhenTooManyMutations: MutationOverTimeMockData = {
         granularity: 'year',
         lapisDateField: 'date',
         lapis: 'https://lapis.cov-spectrum.org/open/v2',
+        useNewEndpoint: false,
     },
     response: {
         overallMutationData: [

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,23 @@ 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 messageToWorker = useMemo(() => {
+    const messageToWorker: MutationOverTimeQuery = useMemo(() => {
         return {
             lapisFilter,
             sequenceType,
             granularity,
             lapisDateField,
             lapis,
+            useNewEndpoint,
         };
-    }, [granularity, lapis, lapisDateField, lapisFilter, sequenceType]);
+    }, [granularity, lapis, lapisDateField, lapisFilter, sequenceType, useNewEndpoint]);
 
     const { data, error, isLoading } = useWebWorker<MutationOverTimeWorkerResponse>(
         messageToWorker,

package/src/query/queryMutationsOverTime.ts

@@ -1,4 +1,5 @@
 import { mapDateToGranularityRange } from './queryAggregatedDataOverTime';
+import { fetchMutationsOverTime } from '../lapisApi/lapisApi';
 import { FetchAggregatedOperator } from '../operator/FetchAggregatedOperator';
 import { FetchSubstitutionsOrDeletionsOperator } from '../operator/FetchSubstitutionsOrDeletionsOperator';
 import { GroupByAndSumOperator } from '../operator/GroupByAndSumOperator';
@@ -16,6 +17,7 @@ import {
     type SubstitutionOrDeletionEntry,
     type TemporalGranularity,
 } from '../types';
+import { type Map2DContents } from '../utils/map2d';
 import { type Deletion, type Substitution, toSubstitutionOrDeletion } from '../utils/mutations';
 import {
     compareTemporal,
@@ -92,17 +94,13 @@ export type MutationOverTimeQuery = {
     lapis: string;
     lapisDateField: string;
     granularity: TemporalGranularity;
+    useNewEndpoint?: boolean;
     signal?: AbortSignal;
 };
 
-export async function queryMutationsOverTimeData({
-    lapisFilter,
-    sequenceType,
-    lapis,
-    lapisDateField,
-    granularity,
-    signal,
-}: MutationOverTimeQuery) {
+export async function queryMutationsOverTimeData(query: MutationOverTimeQuery) {
+    const { lapisFilter, sequenceType, lapis, lapisDateField, granularity, useNewEndpoint, signal } = query;
+
     const requestedDateRanges = await getDatesInDataset(lapisFilter, lapis, granularity, lapisDateField, signal);
 
     if (requestedDateRanges.length > MAX_NUMBER_OF_GRID_COLUMNS) {
@@ -114,7 +112,25 @@ export async function queryMutationsOverTimeData({
         );
     }
 
-    const subQueries = requestedDateRanges.map(async (date) => {
+    const overallMutationData = queryOverallMutationData({
+        lapisFilter,
+        sequenceType,
+        lapis,
+        lapisDateField,
+        granularity,
+    }).then((r) => r.content);
+
+    return useNewEndpoint === true
+        ? queryMutationsOverTimeDataDirectEndpoint(requestedDateRanges, overallMutationData, query)
+        : queryMutationsOverTimeDataMultiQuery(requestedDateRanges, overallMutationData, query);
+}
+
+async function queryMutationsOverTimeDataMultiQuery(
+    allDates: TemporalClass[],
+    overallMutationDataPromise: Promise<SubstitutionOrDeletionEntry[]>,
+    { lapisFilter, sequenceType, lapis, lapisDateField, signal }: MutationOverTimeQuery,
+) {
+    const subQueries = allDates.map(async (date) => {
         const dateFrom = date.firstDay.toString();
         const dateTo = date.lastDay.toString();
 
@@ -124,8 +140,10 @@ export async function queryMutationsOverTimeData({
             [`${lapisDateField}To`]: dateTo,
         };
 
-        const data = await fetchAndPrepareSubstitutionsOrDeletions(filter, sequenceType).evaluate(lapis, signal);
-        const totalCountQuery = await getTotalNumberOfSequencesInDateRange(filter).evaluate(lapis, signal);
+        const [data, totalCountQuery] = await Promise.all([
+            fetchAndPrepareSubstitutionsOrDeletions(filter, sequenceType).evaluate(lapis, signal),
+            getTotalNumberOfSequencesInDateRange(filter).evaluate(lapis, signal),
+        ]);
 
         return {
             date,
@@ -135,20 +153,80 @@ export async function queryMutationsOverTimeData({
     });
 
     const data = await Promise.all(subQueries);
+    const overallMutationData = await overallMutationDataPromise;
 
-    const overallMutationsData = (
-        await queryOverallMutationData({
-            lapisFilter,
-            sequenceType,
-            lapis,
-            lapisDateField,
-            granularity,
-        })
-    ).content;
+    return {
+        mutationOverTimeData: groupByMutation(data, overallMutationData),
+        overallMutationData,
+    };
+}
+
+async function queryMutationsOverTimeDataDirectEndpoint(
+    allDates: TemporalClass[],
+    overallMutationDataPromise: Promise<SubstitutionOrDeletionEntry[]>,
+    { lapisFilter, sequenceType, lapis, lapisDateField, signal }: MutationOverTimeQuery,
+): Promise<{
+    mutationOverTimeData: BaseMutationOverTimeDataMap;
+    overallMutationData: SubstitutionOrDeletionEntry[];
+}> {
+    const overallMutationData = await overallMutationDataPromise;
+    overallMutationData.sort((a, b) => sortSubstitutionsAndDeletions(a.mutation, b.mutation));
+    const totalCounts = await Promise.all(
+        allDates.map(async (date) => {
+            const filter = {
+                ...lapisFilter,
+                [`${lapisDateField}From`]: date.firstDay.toString(),
+                [`${lapisDateField}To`]: date.lastDay.toString(),
+            };
+
+            const totalCountQuery = await getTotalNumberOfSequencesInDateRange(filter).evaluate(lapis, signal);
+
+            return totalCountQuery.content[0].count;
+        }),
+    );
+
+    const includeMutations = overallMutationData.map((value) => value.mutation.code);
+    const apiResult = await fetchMutationsOverTime(
+        lapis,
+        {
+            filters: lapisFilter,
+            dateRanges: allDates.map((date) => ({
+                dateFrom: date.firstDay.toString(),
+                dateTo: date.lastDay.toString(),
+            })),
+            includeMutations,
+            dateField: lapisDateField,
+        },
+        sequenceType,
+        signal,
+    );
+
+    const mutationOverTimeData: Map2DContents<Substitution | Deletion, Temporal, MutationOverTimeMutationValue> = {
+        keysFirstAxis: new Map(overallMutationData.map((value) => [value.mutation.code, value.mutation])),
+        keysSecondAxis: new Map(allDates.map((date) => [date.dateString, date])),
+        data: new Map(
+            overallMutationData.map((mutation, i) => [
+                mutation.mutation.code,
+                new Map(
+                    allDates.map((date, j): [string, MutationOverTimeMutationValue] => [
+                        date.dateString,
+                        {
+                            type: 'value',
+                            // 'coverage' in the API resp. is the number of seqs. that have a non-ambiguous symbol at position
+                            // 'count' in the API resp. is the number of seqs with the mutation
+                            proportion: apiResult.data.data[i][j].count / apiResult.data.data[i][j].coverage,
+                            count: apiResult.data.data[i][j].count,
+                            totalCount: totalCounts[j],
+                        },
+                    ]),
+                ),
+            ]),
+        ),
+    };
 
     return {
-        mutationOverTimeData: groupByMutation(data, overallMutationsData),
-        overallMutationData: overallMutationsData,
+        mutationOverTimeData: new BaseMutationOverTimeDataMap(mutationOverTimeData),
+        overallMutationData,
     };
 }
 
@@ -236,7 +314,7 @@ export function serializeTemporal(date: Temporal) {
 export function groupByMutation(
     data: MutationOverTimeData[],
     overallMutationData: (SubstitutionEntry | DeletionEntry)[],
-) {
+): BaseMutationOverTimeDataMap {
     const dataArray = new BaseMutationOverTimeDataMap();
 
     const allDates = data.map((mutationData) => mutationData.date);