@genspectrum/dashboard-components 1.15.0 → 1.17.0

package/src/preact/mutationsOverTime/{getFilteredMutationsOverTimeData.ts → getFilteredMutationCodes.ts}

@@ -1,15 +1,14 @@
 import z from 'zod';
 
-import { type MutationOverTimeDataMap } from './MutationOverTimeData';
 import { type SequenceType, type SubstitutionOrDeletionEntry } from '../../types';
-import { Map2dView } from '../../utils/map2d';
 import type { Deletion, Mutation, Substitution } from '../../utils/mutations';
 import { type useMutationAnnotationsProvider } from '../MutationAnnotationsContext';
 import type { DisplayedMutationType } from '../components/mutation-type-selector';
 import type { DisplayedSegment } from '../components/segment-selector';
 
-export const displayMutationsSchema = z.array(z.string());
-export type DisplayMutations = z.infer<typeof displayMutationsSchema>;
+export const displayMutationsSchema = z.array(z.string(), {
+    errorMap: () => ({ message: `invalid display mutations` }),
+});
 
 export type MutationFilter = {
     textFilter: string;
@@ -17,63 +16,51 @@ export type MutationFilter = {
 };
 
 export type GetFilteredMutationOverTimeDataArgs = {
-    data: MutationOverTimeDataMap;
     overallMutationData: SubstitutionOrDeletionEntry<Substitution, Deletion>[];
     displayedSegments: DisplayedSegment[];
     displayedMutationTypes: DisplayedMutationType[];
     proportionInterval: { min: number; max: number };
-    hideGaps: boolean;
-    displayMutations?: DisplayMutations;
     mutationFilterValue: MutationFilter;
     sequenceType: SequenceType;
     annotationProvider: ReturnType<typeof useMutationAnnotationsProvider>;
 };
 
-export function getFilteredMutationOverTimeData({
-    data,
+/**
+ * Extracts a list of mutation codes that should be displayed based on the provided filters and overall mutation data.
+ */
+export function getFilteredMutationCodes({
     overallMutationData,
     displayedSegments,
     displayedMutationTypes,
     proportionInterval,
-    hideGaps,
     mutationFilterValue,
     sequenceType,
     annotationProvider,
-}: GetFilteredMutationOverTimeDataArgs) {
-    const filteredData = new Map2dView(data);
-
-    const mutationsToFilterOut = overallMutationData.filter((entry) => {
-        if (entry.proportion < proportionInterval.min || entry.proportion > proportionInterval.max) {
-            return true;
-        }
-        if (displayedSegments.some((segment) => segment.segment === entry.mutation.segment && !segment.checked)) {
-            return true;
-        }
-
-        if (
-            mutationOrAnnotationDoNotMatchFilter(entry.mutation, sequenceType, mutationFilterValue, annotationProvider)
-        ) {
-            return true;
-        }
-
-        return displayedMutationTypes.some(
-            (mutationType) => mutationType.type === entry.mutation.type && !mutationType.checked,
-        );
-    });
-
-    mutationsToFilterOut.forEach((entry) => {
-        filteredData.deleteRow(entry.mutation);
-    });
-
-    if (hideGaps) {
-        const dateRangesToFilterOut = filteredData.getSecondAxisKeys().filter((dateRange) => {
-            const vals = filteredData.getColumn(dateRange);
-            return !vals.some((v) => (v?.type === 'value' || v?.type === 'valueWithCoverage') && v.totalCount > 0);
-        });
-        dateRangesToFilterOut.forEach((dateRange) => filteredData.deleteColumn(dateRange));
-    }
-
-    return filteredData;
+}: GetFilteredMutationOverTimeDataArgs): string[] {
+    return overallMutationData
+        .filter((entry) => {
+            if (entry.proportion < proportionInterval.min || entry.proportion > proportionInterval.max) {
+                return false;
+            }
+            if (displayedSegments.some((segment) => segment.segment === entry.mutation.segment && !segment.checked)) {
+                return false;
+            }
+
+            if (
+                mutationOrAnnotationDoNotMatchFilter(
+                    entry.mutation,
+                    sequenceType,
+                    mutationFilterValue,
+                    annotationProvider,
+                )
+            ) {
+                return false;
+            }
+            return !displayedMutationTypes.some(
+                (mutationType) => mutationType.type === entry.mutation.type && !mutationType.checked,
+            );
+        })
+        .map((e) => e.mutation.code);
 }
 
 export function mutationOrAnnotationDoNotMatchFilter(

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

@@ -8,7 +8,10 @@ import { type MutationAnnotations } from '../../web-components/mutation-annotati
 import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { MutationAnnotationsContextProvider } from '../MutationAnnotationsContext';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
-import mockDefaultMutationsOverTime from './__mockData__/defaultMockData/mutationsOverTime.json';
+import mockDefaultMutationsOverTimeWithFilter from './__mockData__/defaultMockData/mockDefaultMutationsOverTimeWithFilter.json';
+import mockDefaultMutationsOverTimePage1 from './__mockData__/defaultMockData/mutationsOverTimePage1.json';
+import mockDefaultMutationsOverTimePage2 from './__mockData__/defaultMockData/mutationsOverTimePage2.json';
+import mockDefaultMutationsOverTimePageSize20 from './__mockData__/defaultMockData/mutationsOverTimePageSize20.json';
 import mockDefaultNucleotideMutations from './__mockData__/defaultMockData/nucleotideMutations.json';
 import mock1800sMutationsOverTime from './__mockData__/request1800s/mutationsOverTime.json';
 import mock1800sNucleotideMutations from './__mockData__/request1800s/nucleotideMutations.json';
@@ -64,13 +67,10 @@ const meta: Meta<MutationsOverTimeProps> = {
                 },
                 {
                     matcher: {
+                        name: 'page1',
                         url: `${LAPIS_URL}/component/nucleotideMutationsOverTime`,
                         body: {
-                            filters: {
-                                pangoLineage: 'JN.1*',
-                                dateFrom: '2024-01-15',
-                                dateTo: '2024-07-10',
-                            },
+                            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' },
@@ -80,12 +80,125 @@ const meta: Meta<MutationsOverTimeProps> = {
                                 { dateFrom: '2024-06-01', dateTo: '2024-06-30' },
                                 { dateFrom: '2024-07-01', dateTo: '2024-07-31' },
                             ],
+                            includeMutations: [
+                                'C44T',
+                                'C774T',
+                                'C7113T',
+                                'C12616T',
+                                'A13121T',
+                                'G15372T',
+                                'G17334T',
+                                'T18453C',
+                                'A19722G',
+                                'T21653-',
+                            ],
                             dateField: 'date',
                         },
-                        matchPartialBody: true, // includeMutations left out
                         response: {
                             status: 200,
-                            body: mockDefaultMutationsOverTime,
+                            body: mockDefaultMutationsOverTimePage1,
+                        },
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'page2',
+                        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: [
+                                'C21654-',
+                                'T21655-',
+                                'G22111T',
+                                'G22599C',
+                                'T22928C',
+                                'T23011-',
+                                'C23039G',
+                                'C23277T',
+                                'G24872T',
+                            ],
+                            dateField: 'date',
+                        },
+                        response: {
+                            status: 200,
+                            body: mockDefaultMutationsOverTimePage2,
+                        },
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'page1-pageSize20',
+                        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: [
+                                'C44T',
+                                'C774T',
+                                'C7113T',
+                                'C12616T',
+                                'A13121T',
+                                'G15372T',
+                                'G17334T',
+                                'T18453C',
+                                'A19722G',
+                                'T21653-',
+                                'C21654-',
+                                'T21655-',
+                                'G22111T',
+                                'G22599C',
+                                'T22928C',
+                                'T23011-',
+                                'C23039G',
+                                'C23277T',
+                                'G24872T',
+                            ],
+                            dateField: 'date',
+                        },
+                        response: {
+                            status: 200,
+                            body: mockDefaultMutationsOverTimePageSize20,
+                        },
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'withFilter',
+                        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: ['T21653-', 'T21655-'],
+                            dateField: 'date',
+                        },
+                        response: {
+                            status: 200,
+                            body: mockDefaultMutationsOverTimeWithFilter,
                         },
                     },
                 },
@@ -270,7 +383,7 @@ export const UsesPagination: StoryObj<MutationsOverTimeProps> = {
     ...Default,
     play: async ({ canvas, step }) => {
         const mutationOnFirstPage = 'C44T';
-        const mutationOnSecondPage = 'T21653-';
+        const mutationOnSecondPage = 'C21654-';
         await expectMutationOnPage(canvas, mutationOnFirstPage);
 
         await step('Navigate to next page', async () => {
@@ -279,11 +392,8 @@ export const UsesPagination: StoryObj<MutationsOverTimeProps> = {
             await expectMutationOnPage(canvas, mutationOnSecondPage);
         });
 
-        await step('Use goto page input', async () => {
-            const gotoPageInput = canvas.getByRole('spinbutton', { name: 'Enter page number to go to' });
-            await userEvent.clear(gotoPageInput);
-            await userEvent.type(gotoPageInput, '1');
-            await userEvent.tab();
+        await step('Go to previous page', async () => {
+            canvas.getByRole('button', { name: 'Previous page' }).click();
 
             await expectMutationOnPage(canvas, mutationOnFirstPage);
         });
@@ -448,16 +558,11 @@ export const ShowsNoDataMessageForStrictFilters: StoryObj<MutationsOverTimeProps
     play: async ({ canvas }) => {
         await waitFor(() => expect(canvas.getByText('Grid')).toBeVisible(), { timeout: 10000 });
 
-        const button = canvas.getByRole('button', { name: 'Mean proportion 5.0% - 90.0%' });
-        await userEvent.click(button);
-
-        const minInput = canvas.getAllByLabelText('%')[0];
-        await userEvent.clear(minInput);
-        await userEvent.type(minInput, '40');
+        const filterButton = canvas.getByRole('button', { name: 'Filter mutations' });
+        await userEvent.click(filterButton);
 
-        const maxInput = canvas.getAllByLabelText('%')[1];
-        await userEvent.clear(maxInput);
-        await userEvent.type(maxInput, '41');
+        const filterInput = canvas.getByPlaceholderText('Filter');
+        await userEvent.type(filterInput, 'too strict');
 
         await waitFor(
             () => expect(canvas.getByText('No data available for your filters.', { exact: false })).toBeVisible(),

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

@@ -1,33 +1,33 @@
 import { type FunctionComponent } from 'preact';
-import { type Dispatch, type StateUpdater, useMemo, useState, useEffect, useLayoutEffect, useRef } from 'preact/hooks';
+import { type Dispatch, type StateUpdater, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'preact/hooks';
 import z from 'zod';
 
-import { type BaseMutationOverTimeDataMap, type MutationOverTimeDataMap } from './MutationOverTimeData';
-import {
-    displayMutationsSchema,
-    getFilteredMutationOverTimeData,
-    type MutationFilter,
-} from './getFilteredMutationsOverTimeData';
+import { displayMutationsSchema, getFilteredMutationCodes, type MutationFilter } from './getFilteredMutationCodes';
 import { MutationsOverTimeGridTooltip } from './mutations-over-time-grid-tooltip';
-import { type ProportionValue, getProportion, queryMutationsOverTimeData } from '../../query/queryMutationsOverTime';
 import {
-    lapisFilterSchema,
-    sequenceTypeSchema,
-    type SubstitutionOrDeletionEntry,
-    temporalGranularitySchema,
-    views,
-} from '../../types';
+    getProportion,
+    type MutationsOverTimeMetadata,
+    type ProportionValue,
+    queryMutationsOverTimeMetadata,
+    queryMutationsOverTimePage,
+} from '../../query/queryMutationsOverTime';
+import { lapisFilterSchema, sequenceTypeSchema, temporalGranularitySchema, views } from '../../types';
 import { type Deletion, type Substitution } from '../../utils/mutations';
 import { type Temporal, toTemporalClass } from '../../utils/temporalClass';
 import { useDispatchFinishedLoadingEvent } from '../../utils/useDispatchFinishedLoadingEvent';
 import { useLapisUrl } from '../LapisUrlContext';
 import { useMutationAnnotationsProvider } from '../MutationAnnotationsContext';
+import { type MutationOverTimeDataMap } from './MutationOverTimeData';
 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 {
+    customColumnSchema,
+    type FeatureRenderer,
+    FeaturesOverTimeGridServerPaginated,
+} 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';
@@ -40,8 +40,9 @@ import { ResizeContainer } from '../components/resize-container';
 import { type DisplayedSegment, SegmentSelector, useDisplayedSegments } from '../components/segment-selector';
 import Tabs from '../components/tabs';
 import { pageSizesSchema } from '../shared/tanstackTable/pagination';
-import { PageSizeContextProvider } from '../shared/tanstackTable/pagination-context';
+import { PageSizeContextProvider, usePageSizeContext } from '../shared/tanstackTable/pagination-context';
 import { useQuery } from '../useQuery';
+import { handleHideGaps, useMutationsOverTimePageData } from './useMutationsOverTimePageData';
 
 const mutationsOverTimeViewSchema = z.literal(views.grid);
 export type MutationsOverTimeView = z.infer<typeof mutationsOverTimeViewSchema>;
@@ -83,47 +84,68 @@ export const MutationsOverTime: FunctionComponent<MutationsOverTimeProps> = (com
 
 export const MutationsOverTimeInner: FunctionComponent<MutationsOverTimeProps> = ({ ...componentProps }) => {
     const lapis = useLapisUrl();
-    const { lapisFilter, sequenceType, granularity, lapisDateField, displayMutations } = componentProps;
-
-    const { data, error, isLoading } = useQuery(
-        () =>
-            queryMutationsOverTimeData(lapisFilter, sequenceType, lapis, lapisDateField, granularity, displayMutations),
-        [granularity, lapis, lapisDateField, lapisFilter, sequenceType, displayMutations],
-    );
+    const { lapisFilter, sequenceType, granularity, lapisDateField, displayMutations, pageSizes } = componentProps;
+
+    const [pageIndex, setPageIndex] = useState(0);
+
+    const {
+        data: metadata,
+        error: metadataError,
+        isLoading: metadataLoading,
+    } = useQuery(() => {
+        setPageIndex(0);
+        return queryMutationsOverTimeMetadata(
+            lapisFilter,
+            sequenceType,
+            lapis,
+            lapisDateField,
+            granularity,
+            displayMutations,
+        );
+    }, [granularity, lapis, lapisDateField, lapisFilter, sequenceType, displayMutations]);
 
-    if (isLoading) {
+    if (metadataLoading) {
         return <LoadingDisplay />;
     }
 
-    if (error !== null) {
-        throw error;
+    if (metadataError) {
+        throw metadataError;
     }
 
-    if (data.overallMutationData.length === 0) {
+    if (metadata.overallMutationData.length === 0) {
         return <NoDataDisplay />;
     }
 
-    const { overallMutationData, mutationOverTimeData } = data;
     return (
-        <MutationsOverTimeTabs
-            overallMutationData={overallMutationData}
-            mutationOverTimeData={mutationOverTimeData}
-            originalComponentProps={componentProps}
-        />
+        <PageSizeContextProvider pageSizes={pageSizes}>
+            <MutationsOverTimeTabs
+                metadata={metadata}
+                originalComponentProps={componentProps}
+                pageIndex={pageIndex}
+                setPageIndex={setPageIndex}
+            />
+        </PageSizeContextProvider>
     );
 };
 
 type MutationOverTimeTabsProps = {
-    mutationOverTimeData: BaseMutationOverTimeDataMap;
+    metadata: MutationsOverTimeMetadata;
     originalComponentProps: MutationsOverTimeProps;
-    overallMutationData: SubstitutionOrDeletionEntry<Substitution, Deletion>[];
+    pageIndex: number;
+    setPageIndex: Dispatch<StateUpdater<number>>;
 };
 
 const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
-    mutationOverTimeData,
+    metadata,
     originalComponentProps,
-    overallMutationData,
+    pageIndex,
+    setPageIndex,
 }) => {
+    const lapis = useLapisUrl();
+    const { lapisFilter, sequenceType, lapisDateField } = originalComponentProps;
+    const { overallMutationData, requestedDateRanges } = metadata;
+    const { pageSize } = usePageSizeContext();
+
     const tabsRef = useDispatchFinishedLoadingEvent();
     const tooltipPortalTargetRef = useRef<HTMLDivElement>(null);
     const [tooltipPortalTarget, setTooltipPortalTarget] = useState<HTMLDivElement | null>(null);
@@ -148,44 +170,65 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
     ]);
 
     const [hideGaps, setHideGaps] = useState<boolean>(originalComponentProps.hideGaps ?? false);
-
     useEffect(() => setHideGaps(originalComponentProps.hideGaps ?? false), [originalComponentProps.hideGaps]);
 
-    const filteredData = useMemo(() => {
-        return getFilteredMutationOverTimeData({
-            data: mutationOverTimeData,
+    const filteredMutationCodes = useMemo(
+        () =>
+            getFilteredMutationCodes({
+                overallMutationData,
+                displayedSegments,
+                displayedMutationTypes,
+                proportionInterval,
+                mutationFilterValue,
+                sequenceType: originalComponentProps.sequenceType,
+                annotationProvider,
+            }),
+        [
             overallMutationData,
             displayedSegments,
             displayedMutationTypes,
             proportionInterval,
-            hideGaps,
+            originalComponentProps.sequenceType,
             mutationFilterValue,
-            sequenceType: originalComponentProps.sequenceType,
             annotationProvider,
-        });
-    }, [
-        mutationOverTimeData,
-        overallMutationData,
-        displayedSegments,
-        displayedMutationTypes,
-        proportionInterval,
+        ],
+    );
+
+    useEffect(() => {
+        setPageIndex(0);
+    }, [filteredMutationCodes, setPageIndex]);
+
+    const totalFilteredRows = filteredMutationCodes.length;
+    const {
+        isLoading: isPageLoading,
+        data: pageData,
+        pageMutationCodes,
+    } = useMutationsOverTimePageData(
+        filteredMutationCodes,
+        pageIndex,
+        pageSize,
+        lapisFilter,
+        lapis,
+        lapisDateField,
+        sequenceType,
+        requestedDateRanges,
         hideGaps,
-        originalComponentProps.sequenceType,
-        mutationFilterValue,
-        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 mutationRenderer: FeatureRenderer<Substitution | Deletion> = useMemo(
+        () => ({
+            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} />
+            ),
+        }),
+        [originalComponentProps.sequenceType],
+    );
 
     const getTab = (view: MutationsOverTimeView) => {
         switch (view) {
@@ -194,11 +237,17 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
                 return {
                     title: 'Grid',
                     content: (
-                        <FeaturesOverTimeGrid
+                        <FeaturesOverTimeGridServerPaginated
                             rowLabelHeader='Mutation'
-                            data={filteredData}
+                            data={pageData}
+                            isLoading={isPageLoading}
+                            loadingRowLabels={pageMutationCodes}
+                            requestedDateRanges={requestedDateRanges}
                             colorScale={colorScale}
                             pageSizes={originalComponentProps.pageSizes}
+                            pageIndex={pageIndex}
+                            totalRows={totalFilteredRows}
+                            onPageChange={setPageIndex}
                             customColumns={originalComponentProps.customColumns}
                             featureRenderer={mutationRenderer}
                             tooltipPortalTarget={tooltipPortalTarget}
@@ -221,20 +270,19 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
             setProportionInterval={setProportionInterval}
             hideGaps={hideGaps}
             setHideGaps={setHideGaps}
-            filteredData={filteredData}
             colorScale={colorScale}
             setColorScale={setColorScale}
             originalComponentProps={originalComponentProps}
             setFilterValue={setMutationFilterValue}
             mutationFilterValue={mutationFilterValue}
+            filteredMutationCodes={filteredMutationCodes}
+            metadata={metadata}
         />
     );
 
     return (
         <div ref={tooltipPortalTargetRef}>
-            <PageSizeContextProvider pageSizes={originalComponentProps.pageSizes}>
-                <Tabs ref={tabsRef} tabs={tabs} toolbar={toolbar} />
-            </PageSizeContextProvider>
+            <Tabs ref={tabsRef} tabs={tabs} toolbar={toolbar} />
         </div>
     );
 };
@@ -249,12 +297,13 @@ type ToolbarProps = {
     setProportionInterval: Dispatch<StateUpdater<ProportionInterval>>;
     hideGaps: boolean;
     setHideGaps: Dispatch<StateUpdater<boolean>>;
-    filteredData: MutationOverTimeDataMap;
     colorScale: ColorScale;
     setColorScale: Dispatch<StateUpdater<ColorScale>>;
     originalComponentProps: MutationsOverTimeProps;
     mutationFilterValue: MutationFilter;
     setFilterValue: Dispatch<StateUpdater<MutationFilter>>;
+    filteredMutationCodes: string[];
+    metadata: MutationsOverTimeMetadata;
 };
 
 const Toolbar: FunctionComponent<ToolbarProps> = ({
@@ -267,13 +316,29 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
     setProportionInterval,
     hideGaps,
     setHideGaps,
-    filteredData,
     colorScale,
     setColorScale,
     originalComponentProps,
     setFilterValue,
     mutationFilterValue,
+    filteredMutationCodes,
+    metadata,
 }) => {
+    const lapis = useLapisUrl();
+    const { lapisFilter, sequenceType, lapisDateField } = originalComponentProps;
+
+    const getDownloadDataAsync = async (): Promise<Record<string, string | number>[]> => {
+        const pageData = await queryMutationsOverTimePage(
+            lapisFilter,
+            lapis,
+            lapisDateField,
+            sequenceType,
+            metadata.requestedDateRanges,
+            filteredMutationCodes,
+        );
+        return getDownloadData(handleHideGaps(pageData, hideGaps));
+    };
+
     return (
         <>
             <MutationsOverTimeMutationsFilter setFilterValue={setFilterValue} value={mutationFilterValue} />
@@ -308,7 +373,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
             )}
             <CsvDownloadButton
                 className='btn btn-xs'
-                getData={() => getDownloadData(filteredData)}
+                getData={getDownloadDataAsync}
                 filename='mutations_over_time.csv'
             />
             <MutationsOverTimeInfo originalComponentProps={originalComponentProps} />