adapt

components/src/preact/wastewater/mutationsOverTime/wastewater-mutations-over-time.stories.tsx

@@ -12,7 +12,11 @@ const meta: Meta<WastewaterMutationsOverTimeProps> = {
     argTypes: {
         width: { control: 'text' },
         height: { control: 'text' },
-        locations: { control: 'object' },
+        lapisFilter: { control: 'object' },
+        sequenceType: {
+            options: ['nucleotide', 'amino acid'],
+            control: { type: 'radio' },
+        },
     },
     parameters: {
         fetchMock: {},
@@ -25,7 +29,12 @@ const Template = {
     render: (args: WastewaterMutationsOverTimeProps) => (
         <LapisUrlContext.Provider value={WISE_LAPIS_URL}>
             <ReferenceGenomeContext.Provider value={referenceGenome}>
-                <WastewaterMutationsOverTime width={args.width} height={args.height} locations={args.locations} />
+                <WastewaterMutationsOverTime
+                    width={args.width}
+                    height={args.height}
+                    lapisFilter={args.lapisFilter}
+                    sequenceType={args.sequenceType}
+                />
             </ReferenceGenomeContext.Provider>
         </LapisUrlContext.Provider>
     ),
@@ -37,6 +46,7 @@ export const Default: StoryObj<WastewaterMutationsOverTimeProps> = {
     args: {
         width: '100%',
         height: '700px',
-        locations: [],
+        lapisFilter: {},
+        sequenceType: 'nucleotide',
     },
 };

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

@@ -2,12 +2,12 @@ import { type FunctionComponent } from 'preact';
 import { type Dispatch, type StateUpdater, useContext, useState } from 'preact/hooks';
 
 import { queryWastewaterData } from '../../../query/queryWastewaterData';
+import { type LapisFilter, type SequenceType } from '../../../types';
 import { LapisUrlContext } from '../../LapisUrlContext';
 import { type ColorScale } from '../../components/color-scale-selector';
 import { ColorScaleSelectorDropdown } from '../../components/color-scale-selector-dropdown';
 import { CsvDownloadButton } from '../../components/csv-download-button';
 import { ErrorBoundary } from '../../components/error-boundary';
-import { ErrorDisplay } from '../../components/error-display';
 import { Fullscreen } from '../../components/fullscreen';
 import Info, { InfoComponentCode, InfoHeadline1, InfoParagraph } from '../../components/info';
 import { LoadingDisplay } from '../../components/loading-display';
@@ -24,7 +24,8 @@ import { useQuery } from '../../useQuery';
 export interface WastewaterMutationsOverTimeProps {
     width: string;
     height: string;
-    locations: string[];
+    lapisFilter: LapisFilter;
+    sequenceType: SequenceType;
 }
 
 export const WastewaterMutationsOverTime: FunctionComponent<WastewaterMutationsOverTimeProps> = (componentProps) => {
@@ -45,14 +46,14 @@ export const WastewaterMutationsOverTimeInner: FunctionComponent<WastewaterMutat
 ) => {
     const lapis = useContext(LapisUrlContext);
 
-    const { data, error, isLoading } = useQuery(() => queryWastewaterData(lapis), []); // TODO fetch and transform data, filter by locations
+    const { data, error, isLoading } = useQuery(() => queryWastewaterData(lapis, componentProps.lapisFilter), []);
 
     if (isLoading) {
         return <LoadingDisplay />;
     }
 
     if (error !== null) {
-        return <ErrorDisplay error={error} />;
+        throw error;
     }
 
     if (data === null || data === undefined) {
@@ -61,14 +62,13 @@ export const WastewaterMutationsOverTimeInner: FunctionComponent<WastewaterMutat
 
     const locationMap = new Map<string, MutationOverTimeDataMap>();
     for (const row of data) {
-        if (componentProps.locations.length > 0 && !componentProps.locations.includes(row.location)) {
-            continue;
-        }
         if (!locationMap.has(row.location)) {
             locationMap.set(row.location, new BaseMutationOverTimeDataMap());
         }
         const map = locationMap.get(row.location)!;
-        for (const mutation of row.mutations) {
+        for (const mutation of componentProps.sequenceType === 'nucleotide'
+            ? row.nucleotideMutationFrequency
+            : row.aminoAcidMutationFrequency) {
             map.set(mutation.mutation, row.date, { proportion: mutation.proportion, count: NaN, totalCount: NaN });
         }
     }

components/src/query/queryWastewaterData.ts

@@ -1,25 +1,40 @@
-import { parseDateStringToTemporal, TemporalClass, toTemporalClass } from '../utils/temporalClass';
+import { parseDateStringToTemporal, type TemporalClass, toTemporalClass } from '../utils/temporalClass';
 import { FetchDetailsOperator } from '../operator/FetchDetailsOperator';
-import { Substitution, SubstitutionClass } from '../utils/mutations';
+import { type Substitution, SubstitutionClass } from '../utils/mutations';
+import { LapisFilter } from '../types';
 
 export type WastewaterData = {
     location: string;
     date: TemporalClass;
-    mutations: { mutation: Substitution; proportion: number }[];
+    nucleotideMutationFrequency: { mutation: Substitution; proportion: number }[];
+    aminoAcidMutationFrequency: { mutation: Substitution; proportion: number }[];
 }[];
 
-export async function queryWastewaterData(lapis: string, signal?: AbortSignal): Promise<WastewaterData> {
-    const fetchData = new FetchDetailsOperator<Record<string, string | null | number>>({}, [
+export async function queryWastewaterData(
+    lapis: string,
+    lapisFilter: LapisFilter,
+    signal?: AbortSignal,
+): Promise<WastewaterData> {
+    const fetchData = new FetchDetailsOperator<Record<string, string | null | number>>(lapisFilter, [
         'date',
         'location',
-        'mutations',
+        'reference',
+        'nucleotideMutationFrequency',
+        'aminoAcidMutationFrequency',
     ]);
     const data = (await fetchData.evaluate(lapis, signal)).content;
 
     return data.map((row) => ({
         location: row.location as string,
         date: toTemporalClass(parseDateStringToTemporal(row.date as string, 'day')),
-        mutations: transformMutations(JSON.parse(row.mutations as string)),
+        nucleotideMutationFrequency:
+            row.nucleotideMutationFrequency !== null
+                ? transformMutations(JSON.parse(row.nucleotideMutationFrequency as string))
+                : [],
+        aminoAcidMutationFrequency:
+            row.aminoAcidMutationFrequency !== null
+                ? transformMutations(JSON.parse(row.aminoAcidMutationFrequency as string))
+                : [],
     }));
 }
 

components/src/web-components/visualization/gs-wastewater-mutations-over-time.tsx

@@ -1,10 +1,8 @@
 import { customElement, property } from 'lit/decorators.js';
 import { type DetailedHTMLProps, type HTMLAttributes } from 'react';
 
-import { MutationsOverTime, type MutationsOverTimeProps } from '../../preact/mutationsOverTime/mutations-over-time';
-import type { Equals, Expect } from '../../utils/typeAssertions';
-import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsStyles';
 import { WastewaterMutationsOverTime } from '../../preact/wastewater/mutationsOverTime/wastewater-mutations-over-time';
+import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsStyles';
 
 /**
  * ## Context
@@ -15,10 +13,20 @@ import { WastewaterMutationsOverTime } from '../../preact/wastewater/mutationsOv
 @customElement('gs-wastewater-mutations-over-time')
 export class WastewaterMutationsOverTimeComponent extends PreactLitAdapterWithGridJsStyles {
     /**
-     * A list of locations that should be shown. If empty, all locations will be displayed.
+     * Required.
+     *
+     * LAPIS filter to select the displayed data.
+     */
+    @property({ type: Object })
+    lapisFilter: Record<string, string | number | null | boolean> = {};
+
+    /**
+     * Required.
+     *
+     * "nucleotide" or "amino acid"
      */
-    @property({ type: Array })
-    locations: string[] = [];
+    @property({ type: String })
+    sequenceType: 'nucleotide' | 'amino acid' = 'nucleotide';
 
     /**
      * The width of the component.
@@ -37,7 +45,14 @@ export class WastewaterMutationsOverTimeComponent extends PreactLitAdapterWithGr
     height: string = '700px';
 
     override render() {
-        return <WastewaterMutationsOverTime locations={this.locations} width={this.width} height={this.height} />;
+        return (
+            <WastewaterMutationsOverTime
+                lapisFilter={this.lapisFilter}
+                sequenceType={this.sequenceType}
+                width={this.width}
+                height={this.height}
+            />
+        );
     }
 }