@genspectrum/dashboard-components 1.1.0 → 1.3.0

package/src/preact/textFilter/text-filter.tsx

@@ -8,7 +8,6 @@ import { lapisFilterSchema } from '../../types';
 import { DownshiftCombobox } from '../components/downshift-combobox';
 import { ErrorBoundary } from '../components/error-boundary';
 import { LoadingDisplay } from '../components/loading-display';
-import { NoDataDisplay } from '../components/no-data-display';
 import { ResizeContainer } from '../components/resize-container';
 import { useQuery } from '../useQuery';
 
@@ -60,10 +59,6 @@ const TextFilterInner: FunctionComponent<TextFilterInnerProps> = ({
         throw error;
     }
 
-    if (data === null) {
-        return <NoDataDisplay />;
-    }
-
     return <TextSelector lapisField={lapisField} value={value} placeholderText={placeholderText} data={data} />;
 };
 
@@ -106,5 +101,5 @@ function filterByInputValue(item: SelectItem, inputValue: string | null) {
     if (inputValue === null || inputValue === '') {
         return true;
     }
-    return item.value?.toLowerCase().includes(inputValue?.toLowerCase() || '');
+    return item.value.toLowerCase().includes(inputValue.toLowerCase());
 }

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

@@ -100,7 +100,7 @@ function useDisplayedSegments(mutations: MutationOverTimeDataPerLocation) {
     const displayedSegments = useMemo(() => {
         const unique = [
             ...new Set(
-                mutations.flatMap(({ data }) => data.getFirstAxisKeys().map((mutation) => mutation.segment || '')),
+                mutations.flatMap(({ data }) => data.getFirstAxisKeys().map((mutation) => mutation.segment ?? '')),
             ),
         ];
 

package/src/preact/webWorkers/useWebWorker.ts

@@ -23,7 +23,8 @@ export type ErrorWorkerStatus =
       };
 export type WorkerStatus<Response> = LoadingWorkerStatus | SuccessWorkerStatus<Response> | ErrorWorkerStatus;
 
-export function useWebWorker<Request, Response>(messageToWorker: Request, WorkerConstructor: new () => Worker) {
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-parameters -- We need the return type
+export function useWebWorker<Response>(messageToWorker: unknown, WorkerConstructor: new () => Worker) {
     const [data, setData] = useState<Response | undefined>(undefined);
     const [error, setError] = useState<Error | undefined>(undefined);
     const [isLoading, setIsLoading] = useState(true);

package/src/preact/webWorkers/workerFunction.ts

@@ -1,7 +1,7 @@
 import { type ErrorWorkerStatus, type LoadingWorkerStatus, type SuccessWorkerStatus } from './useWebWorker';
 import { UserFacingError } from '../components/error-display';
 
-export async function workerFunction<R>(queryFunction: () => R) {
+export async function workerFunction(queryFunction: () => unknown) {
     try {
         postMessage({ status: 'loading' } satisfies LoadingWorkerStatus);
 
@@ -10,7 +10,7 @@ export async function workerFunction<R>(queryFunction: () => R) {
         postMessage({
             status: 'success',
             data: workerResponse,
-        } satisfies SuccessWorkerStatus<R>);
+        } satisfies SuccessWorkerStatus<unknown>);
     } catch (error) {
         postMessage(
             (error instanceof UserFacingError

package/src/query/computeMapLocationData.ts

@@ -83,7 +83,7 @@ function matchLocationDataAndGeoJsonFeatures(
 
     const locations: Feature<GeometryObject, EnhancedGeoJsonFeatureProperties>[] = geojsonData.features.map(
         (feature) => {
-            const name = feature?.properties?.name;
+            const name = feature.properties.name;
             if (typeof name !== 'string') {
                 throw new Error(
                     `GeoJSON feature with id '${feature.id}' does not have 'properties.name' of type string, was: '${name}'`,

package/src/query/queryAggregatedDataOverTime.ts

@@ -14,13 +14,13 @@ import {
     type TemporalClass,
 } from '../utils/temporalClass';
 
-export function queryAggregatedDataOverTime<LapisDateField extends string>(
+export function queryAggregatedDataOverTime(
     filter: LapisFilter,
     granularity: TemporalGranularity,
     smoothingWindow: number,
-    lapisDateField: LapisDateField,
+    lapisDateField: string,
 ) {
-    const fetchData = new FetchAggregatedOperator<{ [key in LapisDateField]: string | null }>(filter, [lapisDateField]);
+    const fetchData = new FetchAggregatedOperator<Record<string, string | null>>(filter, [lapisDateField]);
     const dataWithFixedDateKey = new RenameFieldOperator(fetchData, lapisDateField, 'date');
     const mapData = new MapOperator(dataWithFixedDateKey, (d) => mapDateToGranularityRange(d, granularity));
     const groupByData = new GroupByAndSumOperator(mapData, 'dateRange', 'count');

package/src/query/queryMutationsOverTime.spec.ts

@@ -231,18 +231,14 @@ describe('queryMutationsOverTime', () => {
                         minProportion: 0.001,
                     },
                     response: {
-                        data: [
-                            getSomeTestMutation(0.1, 1),
-                            getSomeTestMutation(0.3, 3),
-                            getSomeOtherTestMutation(0.4, 4),
-                        ],
+                        data: [getSomeTestMutation(0.2, 4), getSomeOtherTestMutation(0.4, 4)],
                     },
                 },
             ],
             'nucleotide',
         );
 
-        const { mutationOverTimeData } = await queryMutationsOverTimeData({
+        const { mutationOverTimeData, overallMutationData } = await queryMutationsOverTimeData({
             lapisFilter,
             sequenceType: 'nucleotide',
             lapis: DUMMY_LAPIS_URL,
@@ -263,6 +259,8 @@ describe('queryMutationsOverTime', () => {
             ],
         ]);
 
+        expect(overallMutationData.length).toBe(2);
+
         const sequences = mutationOverTimeData.getFirstAxisKeys();
         expect(sequences[0].code).toBe('otherSequenceName:G234C');
         expect(sequences[1].code).toBe('sequenceName:A123T');
@@ -435,14 +433,14 @@ describe('queryMutationsOverTime', () => {
                         minProportion: 0.001,
                     },
                     response: {
-                        data: [getSomeTestMutation(0.2, 2), getSomeTestMutation(0.3, 3)],
+                        data: [getSomeTestMutation(0.25, 5)],
                     },
                 },
             ],
             'nucleotide',
         );
 
-        const { mutationOverTimeData } = await queryMutationsOverTimeData({
+        const { mutationOverTimeData, overallMutationData } = await queryMutationsOverTimeData({
             lapisFilter,
             sequenceType: 'nucleotide',
             lapis: DUMMY_LAPIS_URL,
@@ -450,6 +448,8 @@ describe('queryMutationsOverTime', () => {
             granularity: 'day',
         });
 
+        expect(overallMutationData.length).toBe(1);
+
         expect(mutationOverTimeData.getAsArray()).to.deep.equal([
             [
                 { type: 'value', proportion: 0.2, count: 2, totalCount: 11 },
@@ -527,7 +527,7 @@ describe('queryMutationsOverTime', () => {
                         minProportion: 0.001,
                     },
                     response: {
-                        data: [getSomeTestMutation(0.1, 1), getSomeTestMutation(0.2, 2)],
+                        data: [getSomeTestMutation(0.15, 3)],
                     },
                 },
             ],

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,
@@ -54,7 +56,7 @@ export type MutationOverTimeMutationValue =
 const MAX_NUMBER_OF_GRID_COLUMNS = 200;
 export const MUTATIONS_OVER_TIME_MIN_PROPORTION = 0.001;
 
-export async function queryOverallMutationData({
+async function queryOverallMutationData({
     lapisFilter,
     sequenceType,
     lapis,
@@ -69,9 +71,9 @@ export async function queryOverallMutationData({
     lapisDateField: string;
     signal?: AbortSignal;
 }) {
-    const allDates = await getDatesInDataset(lapisFilter, lapis, granularity, lapisDateField, signal);
+    const requestedDateRanges = await getDatesInDataset(lapisFilter, lapis, granularity, lapisDateField, signal);
 
-    if (allDates.length === 0) {
+    if (requestedDateRanges.length === 0) {
         return {
             content: [],
         };
@@ -79,8 +81,8 @@ export async function queryOverallMutationData({
 
     const filter = {
         ...lapisFilter,
-        [`${lapisDateField}From`]: allDates[0].firstDay.toString(),
-        [`${lapisDateField}To`]: allDates[allDates.length - 1].lastDay.toString(),
+        [`${lapisDateField}From`]: requestedDateRanges[0].firstDay.toString(),
+        [`${lapisDateField}To`]: requestedDateRanges[requestedDateRanges.length - 1].lastDay.toString(),
     };
 
     return fetchAndPrepareSubstitutionsOrDeletions(filter, sequenceType).evaluate(lapis, signal);
@@ -92,28 +94,42 @@ export type MutationOverTimeQuery = {
     lapis: string;
     lapisDateField: string;
     granularity: TemporalGranularity;
+    useNewEndpoint?: boolean;
     signal?: AbortSignal;
 };
 
-export async function queryMutationsOverTimeData({
-    lapisFilter,
-    sequenceType,
-    lapis,
-    lapisDateField,
-    granularity,
-    signal,
-}: MutationOverTimeQuery) {
-    const allDates = await getDatesInDataset(lapisFilter, lapis, granularity, lapisDateField, signal);
+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 (allDates.length > MAX_NUMBER_OF_GRID_COLUMNS) {
+    if (requestedDateRanges.length > MAX_NUMBER_OF_GRID_COLUMNS) {
         throw new UserFacingError(
             'Too many dates',
-            `The dataset would contain ${allDates.length} date intervals. ` +
+            `The dataset would contain ${requestedDateRanges.length} date intervals. ` +
                 `Please reduce the number to below ${MAX_NUMBER_OF_GRID_COLUMNS} to display the data. ` +
                 'You can achieve this by either narrowing the date range in the provided LAPIS filter or by selecting a larger granularity.',
         );
     }
 
+    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,23 +153,89 @@ 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,
     };
 }
 
+/**
+ * Returns a list of date ranges as TemporalClass.
+ * Respects date range filters given in the lapisFilter as <lapisDateField>From and <lapisDateField>To.
+ * If either side (or both sides) of the range are not given, the min and max are determined from
+ * the available data.
+ */
 async function getDatesInDataset(
     lapisFilter: LapisFilter,
     lapis: string,
@@ -159,6 +243,11 @@ async function getDatesInDataset(
     lapisDateField: string,
     signal: AbortSignal | undefined,
 ) {
+    const { dateFrom, dateTo } = getDateRangeFromFilter(lapisFilter, lapisDateField, granularity);
+    if (dateFrom !== null && dateTo !== null) {
+        return generateAllInRange(dateFrom, dateTo);
+    }
+
     const { content: availableDates } = await queryAvailableDates(
         lapisFilter,
         lapis,
@@ -167,7 +256,6 @@ async function getDatesInDataset(
         signal,
     );
 
-    const { dateFrom, dateTo } = getDateRangeFromFilter(lapisFilter, lapisDateField, granularity);
     const { min, max } = getMinMaxTemporal(availableDates);
 
     return generateAllInRange(dateFrom ?? min, dateTo ?? max);
@@ -202,12 +290,8 @@ function queryAvailableDates(
     return fetchAndPrepareDates(lapisFilter, granularity, lapisDateField).evaluate(lapis, signal);
 }
 
-function fetchAndPrepareDates<LapisDateField extends string>(
-    filter: LapisFilter,
-    granularity: TemporalGranularity,
-    lapisDateField: LapisDateField,
-) {
-    const fetchData = new FetchAggregatedOperator<{ [key in LapisDateField]: string | null }>(filter, [lapisDateField]);
+function fetchAndPrepareDates(filter: LapisFilter, granularity: TemporalGranularity, lapisDateField: string) {
+    const fetchData = new FetchAggregatedOperator<Record<string, string | null>>(filter, [lapisDateField]);
     const dataWithFixedDateKey = new RenameFieldOperator(fetchData, lapisDateField, 'date');
     const mapData = new MapOperator(dataWithFixedDateKey, (data) => mapDateToGranularityRange(data, granularity));
     const groupByData = new GroupByAndSumOperator(mapData, 'dateRange', 'count');
@@ -230,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);