@genspectrum/dashboard-components 0.13.0 → 0.13.1

package/dist/style.css

@@ -3199,6 +3199,9 @@ input.tab:checked + .tab-content,
 .grid {
   display: grid;
 }
+.contents {
+  display: contents;
+}
 .hidden {
   display: none;
 }

package/dist/util.d.ts

@@ -836,6 +836,22 @@ declare global {
 }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
+    }
+}
+
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
+
 declare global {
     interface HTMLElementTagNameMap {
         'gs-mutation-comparison-component': MutationComparisonComponent;
@@ -934,7 +950,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -942,7 +958,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>;
         }
     }
 }
@@ -950,7 +966,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -958,7 +974,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.13.0",
+    "version": "0.13.1",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -142,6 +142,6 @@
         "typescript": "~5.7.2",
         "vite": "^6.0.3",
         "vite-plugin-dts": "^4.0.3",
-        "vitest": "^2.0.1"
+        "vitest": "^3.0.2"
     }
 }

package/src/constants.ts

@@ -5,3 +5,9 @@ export const NUCLEOTIDE_MUTATIONS_ENDPOINT = `${LAPIS_URL}/sample/nucleotideMuta
 export const AMINO_ACID_MUTATIONS_ENDPOINT = `${LAPIS_URL}/sample/aminoAcidMutations`;
 export const NUCLEOTIDE_INSERTIONS_ENDPOINT = `${LAPIS_URL}/sample/nucleotideInsertions`;
 export const REFERENCE_GENOME_ENDPOINT = `${LAPIS_URL}/sample/referenceGenome`;
+
+// WISE Wastewater
+// This is a special instance for storing Swiss wastewater data generated by the WISE consortium
+export const WISE_LAPIS_URL = 'https://api.wise-loculus.genspectrum.org/rsv';
+export const WISE_DETAILS_ENDPOINT = `${WISE_LAPIS_URL}/sample/details`;
+export const WISE_REFERENCE_GENOME_ENDPOINT = `${WISE_LAPIS_URL}/sample/referenceGenome`;

package/src/lapisApi/__mockData__/wiseReferenceGenome.json

@@ -0,0 +1,9 @@
+{
+    "nucleotideSequences": [
+        {
+            "name": "main",
+            "sequence": "NNN"
+        }
+    ],
+    "genes": []
+}

package/src/lapisApi/lapisApi.ts

@@ -1,6 +1,7 @@
 import { referenceGenomeResponse } from './ReferenceGenome';
 import {
     aggregatedResponse,
+    detailsResponse,
     insertionsResponse,
     type LapisBaseRequest,
     lapisError,
@@ -51,6 +52,21 @@ export async function fetchAggregated(lapisUrl: string, body: LapisBaseRequest,
     return aggregatedResponse.parse(await response.json());
 }
 
+export async function fetchDetails(lapisUrl: string, body: LapisBaseRequest, signal?: AbortSignal) {
+    const response = await fetch(detailsEndpoint(lapisUrl), {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(body),
+        signal,
+    });
+
+    await handleErrors(response, 'aggregated data');
+
+    return detailsResponse.parse(await response.json());
+}
+
 export async function fetchInsertions(
     lapisUrl: string,
     body: LapisBaseRequest,
@@ -163,6 +179,7 @@ const handleErrors = async (response: Response, requestedData: string) => {
 };
 
 export const aggregatedEndpoint = (lapisUrl: string) => `${lapisUrl}/sample/aggregated`;
+export const detailsEndpoint = (lapisUrl: string) => `${lapisUrl}/sample/details`;
 export const insertionsEndpoint = (lapisUrl: string, sequenceType: SequenceType) => {
     return sequenceType === 'amino acid'
         ? `${lapisUrl}/sample/aminoAcidInsertions`

package/src/lapisApi/lapisTypes.ts

@@ -41,10 +41,16 @@ const insertionCount = z.object({
 });
 export const insertionsResponse = makeLapisResponse(z.array(insertionCount));
 
-export const aggregatedItem = z.object({ count: z.number() }).catchall(z.union([z.string(), z.number(), z.null()]));
+const baseResponseValueSchema = z.union([z.string(), z.number(), z.boolean(), z.null()]);
+
+export const aggregatedItem = z.object({ count: z.number() }).catchall(baseResponseValueSchema);
 export const aggregatedResponse = makeLapisResponse(z.array(aggregatedItem));
 export type AggregatedItem = z.infer<typeof aggregatedItem>;
 
+export const detailsItem = z.object({}).catchall(baseResponseValueSchema);
+export const detailsResponse = makeLapisResponse(z.array(detailsItem));
+export type DetailsItem = z.infer<typeof detailsItem>;
+
 function makeLapisResponse<T extends ZodTypeAny>(data: T) {
     return z.object({
         data,

package/src/operator/FetchDetailsOperator.ts

@@ -0,0 +1,28 @@
+import { type Dataset } from './Dataset';
+import { type Operator } from './Operator';
+import { fetchDetails } from '../lapisApi/lapisApi';
+import { type LapisFilter } from '../types';
+
+type Details<Fields extends string> = { [field in Fields]: string | number | boolean | null };
+
+export class FetchDetailsOperator<Fields extends string> implements Operator<Details<Fields>> {
+    constructor(
+        private filter: LapisFilter,
+        private fields: Fields[] = [],
+    ) {}
+
+    async evaluate(lapisUrl: string, signal?: AbortSignal): Promise<Dataset<Details<Fields>>> {
+        const detailsResponse = (
+            await fetchDetails(
+                lapisUrl,
+                {
+                    ...this.filter,
+                    fields: this.fields,
+                },
+                signal,
+            )
+        ).data;
+
+        return { content: detailsResponse as Details<Fields>[] };
+    }
+}

package/src/preact/components/tabs.tsx

@@ -16,7 +16,7 @@ const Tabs: FunctionComponent<ComponentTabsProps> = ({ tabs, toolbar }) => {
     const [activeTab, setActiveTab] = useState(tabs[0]?.title);
 
     const tabElements = (
-        <div className='flex flex-row'>
+        <div className='flex flex-row flex-wrap'>
             {tabs.map((tab) => {
                 return (
                     <button

package/src/preact/mutationsOverTime/MutationOverTimeData.ts

@@ -5,16 +5,20 @@ import {
 } from '../../query/queryMutationsOverTime';
 import { type Map2d, Map2dBase, type Map2DContents } from '../../utils/map2d';
 import type { Deletion, Substitution } from '../../utils/mutations';
-import type { Temporal } from '../../utils/temporalClass';
+import type { Temporal, TemporalClass } from '../../utils/temporalClass';
 
-export type MutationOverTimeDataMap = Map2d<Substitution | Deletion, Temporal, MutationOverTimeMutationValue>;
+export type MutationOverTimeDataMap<T extends Temporal | TemporalClass = Temporal> = Map2d<
+    Substitution | Deletion,
+    T,
+    MutationOverTimeMutationValue
+>;
 
-export class BaseMutationOverTimeDataMap extends Map2dBase<
+export class BaseMutationOverTimeDataMap<T extends Temporal | TemporalClass = Temporal> extends Map2dBase<
     Substitution | Deletion,
-    Temporal,
+    T,
     MutationOverTimeMutationValue
 > {
-    constructor(initialContent?: Map2DContents<Substitution | Deletion, Temporal, MutationOverTimeMutationValue>) {
+    constructor(initialContent?: Map2DContents<Substitution | Deletion, T, MutationOverTimeMutationValue>) {
         super(serializeSubstitutionOrDeletion, serializeTemporal, initialContent);
     }
 }

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

@@ -111,9 +111,11 @@ const ProportionCell: FunctionComponent<{
             ) : (
                 <>
                     <p>Proportion: {formatProportion(value.proportion)}</p>
-                    <p>
-                        Count: {value.count} / {value.totalCount} total
-                    </p>
+                    {value.count !== null && value.totalCount !== null && (
+                        <p>
+                            Count: {value.count} / {value.totalCount} total
+                        </p>
+                    )}
                 </>
             )}
         </div>

package/src/preact/shared/sort/sortSubstitutionsAndDeletions.ts

@@ -1,9 +1,6 @@
-import { DeletionClass, type SubstitutionClass } from '../../../utils/mutations';
+import type { Deletion, Substitution } from '../../../utils/mutations';
 
-export const sortSubstitutionsAndDeletions = (
-    a: SubstitutionClass | DeletionClass,
-    b: SubstitutionClass | DeletionClass,
-) => {
+export const sortSubstitutionsAndDeletions = (a: Substitution | Deletion, b: Substitution | Deletion) => {
     if (a.segment !== b.segment) {
         return compareSegments(a.segment, b.segment);
     }
@@ -12,8 +9,8 @@ export const sortSubstitutionsAndDeletions = (
         return comparePositions(a.position, b.position);
     }
 
-    const aIsDeletion = a instanceof DeletionClass;
-    const bIsDeletion = b instanceof DeletionClass;
+    const aIsDeletion = a.type === 'deletion';
+    const bIsDeletion = b.type === 'deletion';
 
     if (aIsDeletion !== bIsDeletion) {
         return aIsDeletion ? 1 : -1;

package/src/preact/wastewater/mutationsOverTime/__mockData__/details.json

@@ -0,0 +1,88 @@
+{
+    "data": [
+        {
+            "aminoAcidMutationFrequency": null,
+            "date": "2024-11-13",
+            "location": "Lugano",
+            "nucleotideMutationFrequency": "{\"A12183T\": null, \"C2554T\": null, \"C3422A\": 0.9598659873008728, \"A966C\": null, \"G6661A\": 0.5527499914169312, \"G7731A\": 0.9832900166511536, \"T4026G\": 0.9991809725761414, \"T5260C\": null, \"T5287C\": null}",
+            "reference": "RSV-B"
+        },
+        {
+            "aminoAcidMutationFrequency": null,
+            "date": "2024-11-17",
+            "location": "Genève",
+            "nucleotideMutationFrequency": "{\"A12183T\": 1.0, \"C2554T\": null, \"C3422A\": 0.0, \"A966C\": null, \"G6661A\": 0.8785049915313721, \"G7731A\": 0.9855599999427795, \"T4026G\": null, \"T5260C\": 1.0, \"T5287C\": 0.9932659864425659}",
+            "reference": "RSV-B"
+        },
+        {
+            "aminoAcidMutationFrequency": "{\"ORF1a:S4286C\": null, \"S:R346T\": 0.25, \"S:Q493E\": 0.60, \"N:G204P\": null}",
+            "date": "2024-11-17",
+            "location": "Lugano",
+            "nucleotideMutationFrequency": "{\"A12183T\": 0.998993992805481, \"C2554T\": null, \"C3422A\": null, \"A966C\": null, \"G6661A\": 0.8917459845542908, \"G7731A\": 0.9770470261573792, \"T4026G\": 0.0, \"T5260C\": null, \"T5287C\": null}",
+            "reference": "RSV-B"
+        },
+        {
+            "aminoAcidMutationFrequency": "{\"ORF1a:S4286C\": 0.42, \"S:R346T\": 0.22, \"S:Q493E\": 0.66, \"N:G204P\": null}",
+            "date": "2024-11-16",
+            "location": "Lugano",
+            "nucleotideMutationFrequency": "{\"A12183T\": null, \"C2554T\": null, \"C3422A\": null, \"A966C\": null, \"G6661A\": 0.9476320147514343, \"G7731A\": 0.9809200167655945, \"T4026G\": 0.9992259740829468, \"T5260C\": null, \"T5287C\": null}",
+            "reference": "RSV-B"
+        },
+        {
+            "aminoAcidMutationFrequency": null,
+            "date": "2024-11-18",
+            "location": "Genève",
+            "nucleotideMutationFrequency": "{\"A12183T\": null, \"C2554T\": 0.9978219866752625, \"C3422A\": null, \"A966C\": 1.0, \"G6661A\": null, \"G7731A\": null, \"T4026G\": null, \"T5260C\": null, \"T5287C\": null}",
+            "reference": "RSV-B"
+        },
+        {
+            "aminoAcidMutationFrequency": null,
+            "date": "2024-11-14",
+            "location": "Genève",
+            "nucleotideMutationFrequency": "{\"A12183T\": null, \"C2554T\": 0.9994590282440186, \"C3422A\": 0.05333299934864044, \"A966C\": 1.0, \"G6661A\": 0.9282640218734741, \"G7731A\": 0.9803630113601685, \"T4026G\": 0.0, \"T5260C\": 0.9970409870147705, \"T5287C\": 0.996694028377533}",
+            "reference": "RSV-B"
+        },
+        {
+            "aminoAcidMutationFrequency": null,
+            "date": "2024-11-13",
+            "location": "Laupen",
+            "nucleotideMutationFrequency": "{\"A12668G\": null, \"A3564G\": null, \"C10862T\": null, \"C12710T\": null, \"C3624T\": null, \"G11123A\": null, \"G3616A\": null, \"G7379A\": 0.9470750093460083, \"T11034A\": null, \"T3483C\": null}",
+            "reference": "RSV-A"
+        },
+        {
+            "aminoAcidMutationFrequency": null,
+            "date": "2024-11-13",
+            "location": "Zürich",
+            "nucleotideMutationFrequency": "{\"A12668G\": 0.9988809823989868, \"A3564G\": null, \"C10862T\": 1.0, \"C12710T\": 0.9991809725761414, \"C3624T\": null, \"G11123A\": 1.0, \"G3616A\": null, \"G7379A\": 0.9414680004119873, \"T11034A\": 0.9988250136375427, \"T3483C\": null}",
+            "reference": "RSV-A"
+        },
+        {
+            "aminoAcidMutationFrequency": null,
+            "date": "2024-11-16",
+            "location": "Zürich",
+            "nucleotideMutationFrequency": "{\"A12668G\": 0.999222993850708, \"A3564G\": 0.9998199939727783, \"C10862T\": 1.0, \"C12710T\": 0.9996299743652344, \"C3624T\": 0.9999099969863892, \"G11123A\": 1.0, \"G3616A\": 0.08799900114536285, \"G7379A\": null, \"T11034A\": 0.9970099925994873, \"T3483C\": 0.9993579983711243}",
+            "reference": "RSV-A"
+        },
+        {
+            "aminoAcidMutationFrequency": null,
+            "date": "2024-11-16",
+            "location": "Chur",
+            "nucleotideMutationFrequency": "{\"A12668G\": null, \"A3564G\": null, \"C10862T\": null, \"C12710T\": null, \"C3624T\": null, \"G11123A\": null, \"G3616A\": null, \"G7379A\": 0.6464089751243591, \"T11034A\": null, \"T3483C\": null}",
+            "reference": "RSV-A"
+        },
+        {
+            "aminoAcidMutationFrequency": null,
+            "date": "2024-11-18",
+            "location": "Basel",
+            "nucleotideMutationFrequency": "{\"A12668G\": null, \"A3564G\": 1.0, \"C10862T\": null, \"C12710T\": null, \"C3624T\": 1.0, \"G11123A\": null, \"G3616A\": 0.08222199976444244, \"G7379A\": null, \"T11034A\": null, \"T3483C\": 0.9998080134391785}",
+            "reference": "RSV-A"
+        }
+    ],
+    "info": {
+        "dataVersion": "1737327031",
+        "requestId": "5591b455-3d84-438c-8434-2e57ee2ad569",
+        "requestInfo": "RSV on api.wise-loculus.genspectrum.org at 2025-01-20T11:58:03.498206810",
+        "reportTo": "Please report to https://github.com/GenSpectrum/LAPIS/issues in case you encounter any unexpected issues. Please include the request ID and the requestInfo in your report.",
+        "lapisVersion": "0.3.10"
+    }
+}

package/src/preact/wastewater/mutationsOverTime/computeWastewaterMutationsOverTimeDataPerLocation.spec.ts

@@ -0,0 +1,159 @@
+import { describe, expect, test } from 'vitest';
+
+import { groupMutationDataByLocation } from './computeWastewaterMutationsOverTimeDataPerLocation';
+import type { WastewaterData } from '../../../query/queryWastewaterMutationsOverTime';
+import { SubstitutionClass } from '../../../utils/mutations';
+import { TemporalCache } from '../../../utils/temporalClass';
+
+const temporalCache = TemporalCache.getInstance();
+
+const mutation1 = SubstitutionClass.parse('1T')!;
+const mutation2 = SubstitutionClass.parse('2G')!;
+const mutation3 = SubstitutionClass.parse('3C')!;
+
+const location1 = 'location1';
+const location2 = 'location2';
+
+describe('groupMutationDataByLocation', () => {
+    test('should group nucleotide mutations by location', () => {
+        const input: WastewaterData = [
+            {
+                location: location1,
+                date: temporalCache.getYearMonthDay('2025-01-01'),
+                nucleotideMutationFrequency: [
+                    { mutation: mutation1, proportion: 0.1 },
+                    { mutation: mutation2, proportion: 0.2 },
+                ],
+                aminoAcidMutationFrequency: [],
+            },
+            {
+                location: location1,
+                date: temporalCache.getYearMonthDay('2025-01-02'),
+                nucleotideMutationFrequency: [
+                    { mutation: mutation1, proportion: null },
+                    { mutation: mutation2, proportion: 0.3 },
+                ],
+                aminoAcidMutationFrequency: [],
+            },
+            {
+                location: location2,
+                date: temporalCache.getYearMonthDay('2025-01-01'),
+                nucleotideMutationFrequency: [
+                    { mutation: mutation1, proportion: 0.1 },
+                    { mutation: mutation3, proportion: 0.2 },
+                ],
+                aminoAcidMutationFrequency: [],
+            },
+        ];
+
+        const result = groupMutationDataByLocation(input, 'nucleotide');
+
+        expect(result).to.have.length(2);
+        expect(result[0].location).to.equal(location1);
+        expect(result[1].location).to.equal(location2);
+
+        const location1Data = result[0].data;
+        expect(location1Data.getFirstAxisKeys()).to.deep.equal([mutation1, mutation2]);
+        expect(location1Data.getSecondAxisKeys()).to.deep.equal([
+            temporalCache.getYearMonthDay('2025-01-01'),
+            temporalCache.getYearMonthDay('2025-01-02'),
+        ]);
+        expect(location1Data.getAsArray()).to.deep.equal([
+            [{ count: null, proportion: 0.1, totalCount: null }, null],
+            [
+                { count: null, proportion: 0.2, totalCount: null },
+                { count: null, proportion: 0.3, totalCount: null },
+            ],
+        ]);
+    });
+
+    test('should group amino acid mutations by location', () => {
+        const input: WastewaterData = [
+            {
+                location: location1,
+                date: temporalCache.getYearMonthDay('2025-01-01'),
+                nucleotideMutationFrequency: [{ mutation: mutation1, proportion: 0.1 }],
+                aminoAcidMutationFrequency: [
+                    { mutation: mutation2, proportion: 0.2 },
+                    { mutation: mutation3, proportion: 0.3 },
+                ],
+            },
+            {
+                location: location2,
+                date: temporalCache.getYearMonthDay('2025-01-01'),
+                nucleotideMutationFrequency: [],
+                aminoAcidMutationFrequency: [{ mutation: mutation3, proportion: 0.3 }],
+            },
+        ];
+
+        const result = groupMutationDataByLocation(input, 'amino acid');
+
+        expect(result).to.have.length(2);
+        expect(result[0].location).to.equal(location1);
+        expect(result[1].location).to.equal(location2);
+
+        const location1Data = result[0].data;
+        expect(location1Data.getFirstAxisKeys()).to.deep.equal([mutation2, mutation3]);
+        expect(location1Data.getSecondAxisKeys()).to.deep.equal([temporalCache.getYearMonthDay('2025-01-01')]);
+        expect(location1Data.getAsArray()).to.deep.equal([
+            [{ count: null, proportion: 0.2, totalCount: null }],
+            [{ count: null, proportion: 0.3, totalCount: null }],
+        ]);
+    });
+
+    test('should sort date axis correctly', () => {
+        const input: WastewaterData = [
+            {
+                location: location1,
+                date: temporalCache.getYearMonthDay('2025-01-02'),
+                nucleotideMutationFrequency: [{ mutation: mutation1, proportion: 0.2 }],
+                aminoAcidMutationFrequency: [],
+            },
+            {
+                location: location1,
+                date: temporalCache.getYearMonthDay('2025-01-01'),
+                nucleotideMutationFrequency: [{ mutation: mutation1, proportion: 0.1 }],
+                aminoAcidMutationFrequency: [],
+            },
+            {
+                location: location1,
+                date: temporalCache.getYearMonthDay('2025-01-03'),
+                nucleotideMutationFrequency: [{ mutation: mutation1, proportion: 0.3 }],
+                aminoAcidMutationFrequency: [],
+            },
+        ];
+
+        const result = groupMutationDataByLocation(input, 'nucleotide');
+
+        expect(result).to.have.length(1);
+        const location1Data = result[0].data;
+
+        expect(location1Data.getSecondAxisKeys()).to.deep.equal([
+            temporalCache.getYearMonthDay('2025-01-01'),
+            temporalCache.getYearMonthDay('2025-01-02'),
+            temporalCache.getYearMonthDay('2025-01-03'),
+        ]);
+    });
+
+    test('should sort mutations correctly', () => {
+        const input: WastewaterData = [
+            {
+                location: location1,
+                date: temporalCache.getYearMonthDay('2025-01-01'),
+                nucleotideMutationFrequency: [
+                    { mutation: mutation3, proportion: 0.3 },
+                    { mutation: mutation1, proportion: 0.1 },
+                    { mutation: mutation2, proportion: 0.2 },
+                ],
+                aminoAcidMutationFrequency: [],
+            },
+        ];
+
+        const result = groupMutationDataByLocation(input, 'nucleotide');
+
+        expect(result).to.have.length(1);
+        const location1Data = result[0].data;
+
+        expect(location1Data.getFirstAxisKeys()).to.deep.equal([mutation1, mutation2, mutation3]);
+    });
+});

package/src/preact/wastewater/mutationsOverTime/computeWastewaterMutationsOverTimeDataPerLocation.ts

@@ -0,0 +1,51 @@
+import { queryWastewaterMutationsOverTime, type WastewaterData } from '../../../query/queryWastewaterMutationsOverTime';
+import type { LapisFilter, SequenceType } from '../../../types';
+import { SortedMap2d } from '../../../utils/map2d';
+import { compareTemporal, type TemporalClass } from '../../../utils/temporalClass';
+import {
+    BaseMutationOverTimeDataMap,
+    type MutationOverTimeDataMap,
+} from '../../mutationsOverTime/MutationOverTimeData';
+import { sortSubstitutionsAndDeletions } from '../../shared/sort/sortSubstitutionsAndDeletions';
+
+export async function computeWastewaterMutationsOverTimeDataPerLocation(
+    lapis: string,
+    lapisFilter: LapisFilter,
+    sequenceType: SequenceType,
+    signal?: AbortSignal,
+) {
+    const data = await queryWastewaterMutationsOverTime(lapis, lapisFilter, signal);
+
+    return groupMutationDataByLocation(data, sequenceType);
+}
+
+export function groupMutationDataByLocation(data: WastewaterData, sequenceType: 'nucleotide' | 'amino acid') {
+    const locationMap = new Map<string, MutationOverTimeDataMap<TemporalClass>>();
+    for (const row of data) {
+        if (!locationMap.has(row.location)) {
+            locationMap.set(row.location, new BaseMutationOverTimeDataMap<TemporalClass>());
+        }
+        const map = locationMap.get(row.location)!;
+
+        const mutationFrequencies =
+            sequenceType === 'nucleotide' ? row.nucleotideMutationFrequency : row.aminoAcidMutationFrequency;
+        for (const mutation of mutationFrequencies) {
+            map.set(
+                mutation.mutation,
+                row.date,
+                mutation.proportion !== null
+                    ? { proportion: mutation.proportion, count: null, totalCount: null }
+                    : null,
+            );
+        }
+    }
+
+    return [...locationMap.entries()].map(([location, data]) => ({
+        location,
+        data: new SortedMap2d(
+            data,
+            (a, b) => sortSubstitutionsAndDeletions(a, b),
+            (a, b) => compareTemporal(a, b),
+        ),
+    }));
+}

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

@@ -0,0 +1,71 @@
+import { type Meta, type StoryObj } from '@storybook/preact';
+
+import { WastewaterMutationsOverTime, type WastewaterMutationsOverTimeProps } from './wastewater-mutations-over-time';
+import { WISE_DETAILS_ENDPOINT, WISE_LAPIS_URL } from '../../../constants';
+import referenceGenome from '../../../lapisApi/__mockData__/referenceGenome.json';
+import { LapisUrlContext } from '../../LapisUrlContext';
+import { ReferenceGenomeContext } from '../../ReferenceGenomeContext';
+import details from './__mockData__/details.json';
+
+const meta: Meta<WastewaterMutationsOverTimeProps> = {
+    title: 'Wastewater visualization/Wastewater mutations over time',
+    component: WastewaterMutationsOverTime,
+    argTypes: {
+        width: { control: 'text' },
+        height: { control: 'text' },
+        lapisFilter: { control: 'object' },
+        sequenceType: {
+            options: ['nucleotide', 'amino acid'],
+            control: { type: 'radio' },
+        },
+    },
+    parameters: {
+        fetchMock: {},
+    },
+};
+
+export default meta;
+
+const Template = {
+    render: (args: WastewaterMutationsOverTimeProps) => (
+        <LapisUrlContext.Provider value={WISE_LAPIS_URL}>
+            <ReferenceGenomeContext.Provider value={referenceGenome}>
+                <WastewaterMutationsOverTime
+                    width={args.width}
+                    height={args.height}
+                    lapisFilter={args.lapisFilter}
+                    sequenceType={args.sequenceType}
+                />
+            </ReferenceGenomeContext.Provider>
+        </LapisUrlContext.Provider>
+    ),
+};
+
+export const Default: StoryObj<WastewaterMutationsOverTimeProps> = {
+    ...Template,
+    args: {
+        width: '100%',
+        height: '700px',
+        lapisFilter: {},
+        sequenceType: 'nucleotide',
+    },
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'details',
+                        url: WISE_DETAILS_ENDPOINT,
+                        body: {
+                            fields: ['date', 'location', 'nucleotideMutationFrequency', 'aminoAcidMutationFrequency'],
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: details,
+                    },
+                },
+            ],
+        },
+    },
+};