@genspectrum/dashboard-components 1.12.0 → 1.13.0

package/src/preact/mutationsOverTime/__mockData__/request1800s/mutationsOverTime.json

@@ -0,0 +1,16 @@
+{
+    "data": {
+        "mutations": [],
+        "dateRanges": [{ "dateFrom": "1800-01-01", "dateTo": "1800-12-31" }],
+        "data": [],
+        "totalCountsByDateRange": []
+    },
+    "info": {
+        "dataVersion": null,
+        "requestId": "dff5f887-1b84-4789-93be-3bca6c8adb1c",
+        "requestInfo": "sars_cov-2_nextstrain_open on lapis.cov-spectrum.org at 2025-12-17T16:48:49.532134692",
+        "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": "12a364c66262f2f56289873faddf0552b550742e",
+        "siloVersion": "0.8.0"
+    }
+}

package/src/preact/mutationsOverTime/__mockData__/request1800s/nucleotideMutations.json

@@ -0,0 +1,11 @@
+{
+    "data": [],
+    "info": {
+        "dataVersion": "1765731908",
+        "requestId": "3bb9782f-49fa-459c-98e6-ef13e122238d",
+        "requestInfo": "sars_cov-2_nextstrain_open on lapis.cov-spectrum.org at 2025-12-17T16:48:49.434876617",
+        "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": "12a364c66262f2f56289873faddf0552b550742e",
+        "siloVersion": "0.8.0"
+    }
+}

package/src/preact/mutationsOverTime/__mockData__/withDisplayMutations/mutationsOverTime.json

@@ -0,0 +1,52 @@
+{
+    "data": {
+        "mutations": ["A13121T", "T21653-", "G24872T"],
+        "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" }
+        ],
+        "data": [
+            [
+                { "count": 1, "coverage": 14030 },
+                { "count": 1, "coverage": 17545 },
+                { "count": 1, "coverage": 8418 },
+                { "count": 0, "coverage": 0 },
+                { "count": 43, "coverage": 9236 },
+                { "count": 922, "coverage": 16466 },
+                { "count": 1119, "coverage": 7468 }
+            ],
+            [
+                { "count": 13, "coverage": 13946 },
+                { "count": 15, "coverage": 17353 },
+                { "count": 41, "coverage": 8318 },
+                { "count": 0, "coverage": 0 },
+                { "count": 1369, "coverage": 9052 },
+                { "count": 5080, "coverage": 16078 },
+                { "count": 3245, "coverage": 7342 }
+            ],
+            [
+                { "count": 42, "coverage": 13765 },
+                { "count": 203, "coverage": 17274 },
+                { "count": 563, "coverage": 8256 },
+                { "count": 0, "coverage": 0 },
+                { "count": 4631, "coverage": 9024 },
+                { "count": 11162, "coverage": 16188 },
+                { "count": 5451, "coverage": 7393 }
+            ]
+        ],
+        "totalCountsByDateRange": [14063, 17577, 8431, 0, 9250, 16513, 7508]
+    },
+    "info": {
+        "dataVersion": "1765731908",
+        "requestId": "220cae2b-f73c-42fd-a3ac-1c49e0f239ec",
+        "requestInfo": "sars_cov-2_nextstrain_open on lapis.cov-spectrum.org at 2025-12-17T16:59:33.639804323",
+        "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": "12a364c66262f2f56289873faddf0552b550742e",
+        "siloVersion": "0.8.0"
+    }
+}

package/src/preact/mutationsOverTime/getFilteredMutationsOverTime.spec.ts

@@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest';
 
 import { BaseMutationOverTimeDataMap } from './MutationOverTimeData';
 import { getFilteredMutationOverTimeData, type MutationFilter } from './getFilteredMutationsOverTimeData';
-import { type MutationOverTimeMutationValue } from '../../query/queryMutationsOverTime';
+import { type ProportionValue } from '../../query/queryMutationsOverTime';
 import { type DeletionEntry, type SubstitutionEntry } from '../../types';
 import { type Deletion, type Substitution } from '../../utils/mutations';
 import { type TemporalClass } from '../../utils/temporalClass';
@@ -392,13 +392,13 @@ describe('getFilteredMutationOverTimeData', () => {
         count: 1,
         proportion: inFilter,
         totalCount: 10,
-    } satisfies MutationOverTimeMutationValue;
+    } satisfies ProportionValue;
     const emptyMutationOverTimeValue = {
         type: 'value',
         count: 0,
         proportion: NaN,
         totalCount: 0,
-    } satisfies MutationOverTimeMutationValue;
+    } satisfies ProportionValue;
 
     function prepareMutationOverTimeData(
         mutationEntries: (SubstitutionEntry<Substitution> | DeletionEntry<Deletion>)[],

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

@@ -1,9 +1,6 @@
 import type { FunctionComponent } from 'preact';
 
-import {
-    type MutationOverTimeMutationValue,
-    MUTATIONS_OVER_TIME_MIN_PROPORTION,
-} from '../../query/queryMutationsOverTime';
+import { type ProportionValue, MUTATIONS_OVER_TIME_MIN_PROPORTION } from '../../query/queryMutationsOverTime';
 import type { Deletion, Substitution } from '../../utils/mutations';
 import { type Temporal, type TemporalClass, toTemporalClass, YearMonthDayClass } from '../../utils/temporalClass';
 import { formatProportion } from '../shared/table/formatProportion';
@@ -11,7 +8,7 @@ import { formatProportion } from '../shared/table/formatProportion';
 export type MutationsOverTimeGridTooltipProps = {
     mutation: Substitution | Deletion;
     date: Temporal;
-    value: MutationOverTimeMutationValue;
+    value: ProportionValue;
 };
 
 export const MutationsOverTimeGridTooltip: FunctionComponent<MutationsOverTimeGridTooltipProps> = ({
@@ -66,7 +63,7 @@ export const MutationsOverTimeGridTooltip: FunctionComponent<MutationsOverTimeGr
 };
 
 const TooltipValueCountsDescription: FunctionComponent<{
-    value: NonNullable<MutationOverTimeMutationValue>;
+    value: NonNullable<ProportionValue>;
     mutationCode: string;
     mutationPosition: number;
 }> = ({ value, mutationCode, mutationPosition }) => {

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

@@ -4,11 +4,16 @@ import { type Canvas } from '@storybook/types';
 
 import { MutationsOverTime, type MutationsOverTimeProps } from './mutations-over-time';
 import { LAPIS_URL } from '../../constants';
-import referenceGenome from '../../lapisApi/__mockData__/referenceGenome.json';
 import { type MutationAnnotations } from '../../web-components/mutation-annotations-context';
 import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { MutationAnnotationsContextProvider } from '../MutationAnnotationsContext';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
+import mockDefaultMutationsOverTime from './__mockData__/defaultMockData/mutationsOverTime.json';
+import mockDefaultNucleotideMutations from './__mockData__/defaultMockData/nucleotideMutations.json';
+import mock1800sMutationsOverTime from './__mockData__/request1800s/mutationsOverTime.json';
+import mock1800sNucleotideMutations from './__mockData__/request1800s/nucleotideMutations.json';
+import mockWithDisplayMutationsMutationsOverTime from './__mockData__/withDisplayMutations/mutationsOverTime.json';
+import referenceGenome from '../../lapisApi/__mockData__/referenceGenome.json';
 import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectErrorMessage';
 import { playThatExpectsFinishedLoadingEvent } from '../shared/stories/expectFinishedLoadingEvent';
 import { expectMutationAnnotation } from '../shared/stories/expectMutationAnnotation';
@@ -37,11 +42,55 @@ const meta: Meta<MutationsOverTimeProps> = {
         initialMeanProportionInterval: { control: 'object' },
         hideGaps: { control: 'boolean' },
         pageSizes: { control: 'object' },
-        useNewEndpoint: { control: 'boolean' },
         customColumns: { control: 'object' },
     },
     parameters: {
-        fetchMock: {},
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        url: `${LAPIS_URL}/sample/nucleotideMutations`,
+                        body: {
+                            pangoLineage: 'JN.1*',
+                            dateFrom: '2024-01-01',
+                            dateTo: '2024-07-31',
+                            minProportion: 0.001,
+                        },
+                        response: {
+                            status: 200,
+                            body: mockDefaultNucleotideMutations,
+                        },
+                    },
+                },
+                {
+                    matcher: {
+                        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' },
+                            ],
+                            dateField: 'date',
+                        },
+                        matchPartialBody: true, // includeMutations left out
+                        response: {
+                            status: 200,
+                            body: mockDefaultMutationsOverTime,
+                        },
+                    },
+                },
+            ],
+        },
     },
 };
 
@@ -84,7 +133,6 @@ export const Default: StoryObj<MutationsOverTimeProps> = {
         lapisDateField: 'date',
         initialMeanProportionInterval: { min: 0.05, max: 0.9 },
         hideGaps: false,
-        useNewEndpoint: false,
         pageSizes: [10, 20, 30, 40, 50],
     },
 };
@@ -109,6 +157,38 @@ export const ShowsNoDataWhenNoMutationsAreInFilter: StoryObj<MutationsOverTimePr
         height: '700px',
         granularity: 'year',
     },
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        url: `${LAPIS_URL}/sample/nucleotideMutations`,
+                        body: { dateFrom: '1800-01-01', dateTo: '1800-12-31', minProportion: 0.001 },
+                        response: {
+                            status: 200,
+                            body: mock1800sNucleotideMutations,
+                        },
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'mockDefaultMutationsOverTime',
+                        url: `${LAPIS_URL}/component/nucleotideMutationsOverTime`,
+                        body: {
+                            filters: { dateFrom: '1800-01-01', dateTo: '1800-01-02' },
+                            dateRanges: [{ dateFrom: '1800-01-01', dateTo: '1800-12-31' }],
+                            includeMutations: [],
+                            dateField: 'date',
+                        },
+                        response: {
+                            status: 200,
+                            body: mock1800sMutationsOverTime,
+                        },
+                    },
+                },
+            ],
+        },
+    },
     play: async ({ canvas }) => {
         await waitFor(() => expect(canvas.getByText('No data available.', { exact: false })).toBeVisible(), {
             timeout: 10000,
@@ -120,7 +200,51 @@ export const UsesHideGaps: StoryObj<MutationsOverTimeProps> = {
     ...Default,
     args: {
         ...Default.args,
-        displayMutations: ['A19722G', 'G21641T', 'T21652-'],
+        displayMutations: ['A13121T', 'G24872T', 'T21653-'],
+    },
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        url: `${LAPIS_URL}/sample/nucleotideMutations`,
+                        body: {
+                            pangoLineage: 'JN.1*',
+                            dateFrom: '2024-01-01',
+                            dateTo: '2024-07-31',
+                            minProportion: 0.001,
+                        },
+                        response: {
+                            status: 200,
+                            body: mockDefaultNucleotideMutations,
+                        },
+                    },
+                },
+                {
+                    matcher: {
+                        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: ['A13121T', 'T21653-', 'G24872T'],
+                            dateField: 'date',
+                        },
+                        response: {
+                            status: 200,
+                            body: mockWithDisplayMutationsMutationsOverTime,
+                        },
+                    },
+                },
+            ],
+        },
     },
     play: async ({ canvas, step }) => {
         await expectDateRangeOnPage(canvas, '2024-04');
@@ -201,17 +325,61 @@ export const WithCustomColumns: StoryObj<MutationsOverTimeProps> = {
     ...Default,
     args: {
         ...Default.args,
-        displayMutations: ['A19722G', 'G21641T', 'T21653-'],
+        displayMutations: ['A13121T', 'G24872T', 'T21653-'],
         customColumns: [
             {
                 header: 'Jaccard Index',
                 values: {
-                    A19722G: 0.75,
-                    G21641T: 'Foobar',
+                    A13121T: 0.75,
+                    G24872T: 'Foobar',
                 },
             },
         ],
     },
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        url: `${LAPIS_URL}/sample/nucleotideMutations`,
+                        body: {
+                            pangoLineage: 'JN.1*',
+                            dateFrom: '2024-01-01',
+                            dateTo: '2024-07-31',
+                            minProportion: 0.001,
+                        },
+                        response: {
+                            status: 200,
+                            body: mockDefaultNucleotideMutations,
+                        },
+                    },
+                },
+                {
+                    matcher: {
+                        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: ['A13121T', 'T21653-', 'G24872T'],
+                            dateField: 'date',
+                        },
+                        response: {
+                            status: 200,
+                            body: mockWithDisplayMutationsMutationsOverTime,
+                        },
+                    },
+                },
+            ],
+        },
+    },
     play: async ({ canvas }) => {
         await waitFor(() => expect(canvas.getByText('Jaccard Index')).toBeVisible(), {
             timeout: 5000,
@@ -245,6 +413,29 @@ export const ShowsNoDataMessageWhenThereAreNoDatesInFilter: StoryObj<MutationsOv
         height: '700px',
         granularity: 'year',
     },
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        url: `${LAPIS_URL}/sample/nucleotideMutations`,
+                        body: {
+                            filters: { dateFrom: '2345-01-01', dateTo: '2020-01-02' },
+                            dateRanges: [],
+                            includeMutations: [],
+                            dateField: 'date',
+                        },
+                        response: {
+                            status: 200,
+                            body: {
+                                data: { mutations: [], dateRanges: [], data: [], totalCountsByDateRange: [] },
+                            },
+                        },
+                    },
+                },
+            ],
+        },
+    },
     play: async ({ canvas }) => {
         await waitFor(() => expect(canvas.getByText('No data available.', { exact: false })).toBeVisible(), {
             timeout: 10000,
@@ -254,10 +445,6 @@ export const ShowsNoDataMessageWhenThereAreNoDatesInFilter: StoryObj<MutationsOv
 
 export const ShowsNoDataMessageForStrictFilters: StoryObj<MutationsOverTimeProps> = {
     ...Default,
-    args: {
-        ...Default.args,
-        lapisFilter: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-07-10' },
-    },
     play: async ({ canvas }) => {
         await waitFor(() => expect(canvas.getByText('Grid')).toBeVisible(), { timeout: 10000 });
 

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

@@ -2,17 +2,14 @@ import { type FunctionComponent } from 'preact';
 import { type Dispatch, type StateUpdater, useMemo, useState, useEffect, useLayoutEffect, useRef } from 'preact/hooks';
 import z from 'zod';
 
-// @ts-expect-error -- uses subpath imports and vite worker import
-import MutationOverTimeWorker from '#mutationOverTime?worker&inline';
-import { BaseMutationOverTimeDataMap, type MutationOverTimeDataMap } from './MutationOverTimeData';
+import { type BaseMutationOverTimeDataMap, type MutationOverTimeDataMap } from './MutationOverTimeData';
 import {
     displayMutationsSchema,
     getFilteredMutationOverTimeData,
     type MutationFilter,
 } from './getFilteredMutationsOverTimeData';
-import { type MutationOverTimeWorkerResponse } from './mutationOverTimeWorker';
-import MutationsOverTimeGrid, { customColumnSchema } from './mutations-over-time-grid';
-import { getProportion, type MutationOverTimeQuery } from '../../query/queryMutationsOverTime';
+import { MutationsOverTimeGridTooltip } from './mutations-over-time-grid-tooltip';
+import { type ProportionValue, getProportion, queryMutationsOverTimeData } from '../../query/queryMutationsOverTime';
 import {
     lapisFilterSchema,
     sequenceTypeSchema,
@@ -21,14 +18,16 @@ import {
     views,
 } from '../../types';
 import { type Deletion, type Substitution } from '../../utils/mutations';
-import { toTemporalClass } from '../../utils/temporalClass';
+import { type Temporal, toTemporalClass } from '../../utils/temporalClass';
 import { useDispatchFinishedLoadingEvent } from '../../utils/useDispatchFinishedLoadingEvent';
 import { useLapisUrl } from '../LapisUrlContext';
 import { useMutationAnnotationsProvider } from '../MutationAnnotationsContext';
+import { AnnotatedMutation } from '../components/annotated-mutation';
 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 FeaturesOverTimeGrid, { type FeatureRenderer, customColumnSchema } from '../components/features-over-time-grid';
 import { Fullscreen } from '../components/fullscreen';
 import Info, { InfoComponentCode, InfoHeadline1, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
@@ -42,7 +41,7 @@ import { type DisplayedSegment, SegmentSelector, useDisplayedSegments } from '..
 import Tabs from '../components/tabs';
 import { pageSizesSchema } from '../shared/tanstackTable/pagination';
 import { PageSizeContextProvider } from '../shared/tanstackTable/pagination-context';
-import { useWebWorker } from '../webWorkers/useWebWorker';
+import { useQuery } from '../useQuery';
 
 const mutationsOverTimeViewSchema = z.literal(views.grid);
 export type MutationsOverTimeView = z.infer<typeof mutationsOverTimeViewSchema>;
@@ -59,7 +58,6 @@ const mutationOverTimeSchema = z.object({
     views: z.array(mutationsOverTimeViewSchema),
     granularity: temporalGranularitySchema,
     lapisDateField: z.string().min(1),
-    useNewEndpoint: z.boolean().optional(),
     displayMutations: displayMutationsSchema.optional(),
     initialMeanProportionInterval: meanProportionIntervalSchema,
     hideGaps: z.boolean().optional(),
@@ -83,45 +81,29 @@ export const MutationsOverTime: FunctionComponent<MutationsOverTimeProps> = (com
     );
 };
 
-export const MutationsOverTimeInner: FunctionComponent<MutationsOverTimeProps> = ({
-    useNewEndpoint = false,
-    ...componentProps
-}) => {
+export const MutationsOverTimeInner: FunctionComponent<MutationsOverTimeProps> = ({ ...componentProps }) => {
     const lapis = useLapisUrl();
     const { lapisFilter, sequenceType, granularity, lapisDateField, displayMutations } = componentProps;
 
-    const messageToWorker: MutationOverTimeQuery = useMemo(() => {
-        return {
-            lapisFilter,
-            sequenceType,
-            granularity,
-            lapisDateField,
-            lapis,
-            displayMutations,
-            useNewEndpoint,
-        };
-    }, [granularity, lapis, lapisDateField, lapisFilter, sequenceType, displayMutations, useNewEndpoint]);
-
-    const { data, error, isLoading } = useWebWorker<MutationOverTimeWorkerResponse>(
-        messageToWorker,
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-        MutationOverTimeWorker,
+    const { data, error, isLoading } = useQuery(
+        () =>
+            queryMutationsOverTimeData(lapisFilter, sequenceType, lapis, lapisDateField, granularity, displayMutations),
+        [granularity, lapis, lapisDateField, lapisFilter, sequenceType, displayMutations],
     );
 
     if (isLoading) {
         return <LoadingDisplay />;
     }
 
-    if (error !== undefined) {
+    if (error !== null) {
         throw error;
     }
 
-    if (data === undefined || data.overallMutationData.length === 0) {
+    if (data.overallMutationData.length === 0) {
         return <NoDataDisplay />;
     }
 
-    const { overallMutationData, mutationOverTimeSerialized } = data;
-    const mutationOverTimeData = new BaseMutationOverTimeDataMap(mutationOverTimeSerialized);
+    const { overallMutationData, mutationOverTimeData } = data;
     return (
         <MutationsOverTimeTabs
             overallMutationData={overallMutationData}
@@ -193,6 +175,18 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
         annotationProvider,
     ]);
 
+    const mutationRenderer: FeatureRenderer<Substitution | Deletion> = {
+        asString: (value: Substitution | Deletion) => value.code,
+        renderRowLabel: (value: Substitution | Deletion) => (
+            <div className={'text-center'}>
+                <AnnotatedMutation mutation={value} sequenceType={originalComponentProps.sequenceType} />
+            </div>
+        ),
+        renderTooltip: (value: Substitution | Deletion, temporal: Temporal, proportionValue: ProportionValue) => (
+            <MutationsOverTimeGridTooltip mutation={value} date={temporal} value={proportionValue} />
+        ),
+    };
+
     const getTab = (view: MutationsOverTimeView) => {
         switch (view) {
             // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- for extensibility
@@ -200,12 +194,13 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
                 return {
                     title: 'Grid',
                     content: (
-                        <MutationsOverTimeGrid
+                        <FeaturesOverTimeGrid
+                            rowLabelHeader='Mutation'
                             data={filteredData}
                             colorScale={colorScale}
-                            sequenceType={originalComponentProps.sequenceType}
                             pageSizes={originalComponentProps.pageSizes}
                             customColumns={originalComponentProps.customColumns}
+                            featureRenderer={mutationRenderer}
                             tooltipPortalTarget={tooltipPortalTarget}
                         />
                     ),

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

@@ -3,14 +3,19 @@ import { type Dispatch, type StateUpdater, useMemo, useState, useRef } from 'pre
 import z from 'zod';
 
 import { computeWastewaterMutationsOverTimeDataPerLocation } from './computeWastewaterMutationsOverTimeDataPerLocation';
+import { type ProportionValue } from '../../../query/queryMutationsOverTime';
 import { lapisFilterSchema, type SequenceType, sequenceTypeSchema } from '../../../types';
 import { Map2dView } from '../../../utils/map2d';
+import { type Deletion, type Substitution } from '../../../utils/mutations';
+import { type Temporal } from '../../../utils/temporalClass';
 import { useDispatchFinishedLoadingEvent } from '../../../utils/useDispatchFinishedLoadingEvent';
 import { useLapisUrl } from '../../LapisUrlContext';
 import { useMutationAnnotationsProvider } from '../../MutationAnnotationsContext';
+import { AnnotatedMutation } from '../../components/annotated-mutation';
 import { type ColorScale } from '../../components/color-scale-selector';
 import { ColorScaleSelectorDropdown } from '../../components/color-scale-selector-dropdown';
 import { ErrorBoundary } from '../../components/error-boundary';
+import FeaturesOverTimeGrid from '../../components/features-over-time-grid';
 import { Fullscreen } from '../../components/fullscreen';
 import Info, { InfoComponentCode, InfoHeadline1, InfoParagraph } from '../../components/info';
 import { LoadingDisplay } from '../../components/loading-display';
@@ -24,7 +29,7 @@ import {
     type MutationFilter,
     mutationOrAnnotationDoNotMatchFilter,
 } from '../../mutationsOverTime/getFilteredMutationsOverTimeData';
-import MutationsOverTimeGrid from '../../mutationsOverTime/mutations-over-time-grid';
+import { MutationsOverTimeGridTooltip } from '../../mutationsOverTime/mutations-over-time-grid-tooltip';
 import { pageSizesSchema } from '../../shared/tanstackTable/pagination';
 import { PageSizeContextProvider } from '../../shared/tanstackTable/pagination-context';
 import { useQuery } from '../../useQuery';
@@ -166,7 +171,8 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
             mutationOverTimeDataPerLocation.map(({ location, data }) => ({
                 title: location,
                 content: (
-                    <MutationsOverTimeGrid
+                    <FeaturesOverTimeGrid
+                        rowLabelHeader='Mutation'
                         data={getFilteredMutationOverTimeData({
                             data,
                             displayedSegments,
@@ -176,7 +182,28 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
                         })}
                         colorScale={colorScale}
                         pageSizes={originalComponentProps.pageSizes}
-                        sequenceType={originalComponentProps.sequenceType}
+                        featureRenderer={{
+                            asString: (value: Substitution | Deletion) => value.code,
+                            renderRowLabel: (value: Substitution | Deletion) => (
+                                <div className={'text-center'}>
+                                    <AnnotatedMutation
+                                        mutation={value}
+                                        sequenceType={originalComponentProps.sequenceType}
+                                    />
+                                </div>
+                            ),
+                            renderTooltip: (
+                                value: Substitution | Deletion,
+                                temporal: Temporal,
+                                proportionValue: ProportionValue,
+                            ) => (
+                                <MutationsOverTimeGridTooltip
+                                    mutation={value}
+                                    date={temporal}
+                                    value={proportionValue}
+                                />
+                            ),
+                        }}
                         tooltipPortalTarget={tooltipPortalTargetRef.current}
                     />
                 ),