feat(components): gs-mutations-over-time: lazily load pages

[fengelniederhammer]

resolves #1093

Summary

This adds lazy loading to the gs-mutations-over-time. Data fetching is split into two phases:

1. load the overall data, i.e. the columns (dates) and the rows (mutations) of the table
2. fetch the page data based on which rows (mutations) should be shown

Pages are cached, we don't prefetch more that the current page. I don't know yet whether that would be worth the effort.

I also noted layout shifts while loading a page, but decided to split it out into a separate issue.
#1102

Screenshot

PR Checklist

• All necessary documentation has been adapted.
• The implemented feature is covered by an appropriate test.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
dashboard-components	Ready	Preview, Comment	Mar 26, 2026 10:21am

[Copilot]

Pull request overview

Implements lazy loading for the “Mutations over time” grid to avoid fetching time-series data for thousands of mutations up front (resolves #1093), while keeping “download all” behavior.

Changes:

• Split mutations-over-time querying into metadata (date buckets + overall mutation list) and per-page time-series fetching.
• Add a server-paginated grid path (manual pagination + total row count) and a hook to fetch/cache page data.
• Update stories, mocks, and snapshots to reflect paged loading and async CSV download.

Reviewed changes

Copilot reviewed 26 out of 29 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
components/tests/snapshots.spec.ts-snapshots/Mutations-over-time-Download-of-visualization-mutations-over-time--by-week-should-match-snapshot-1-firefox-linux.txt	Snapshot update for CSV download output (firefox).
components/tests/snapshots.spec.ts-snapshots/Mutations-over-time-Download-of-visualization-mutations-over-time--by-week-should-match-snapshot-1-chromium-linux.txt	Snapshot update for CSV download output (chromium).
components/tests/snapshots.spec.ts-snapshots/Mutations-over-time-Download-of-visualization-mutations-over-time--by-month-should-match-snapshot-1-firefox-linux.txt	Snapshot update for CSV download output (firefox).
components/tests/snapshots.spec.ts-snapshots/Mutations-over-time-Download-of-visualization-mutations-over-time--by-month-should-match-snapshot-1-chromium-linux.txt	Snapshot update for CSV download output (chromium).
components/src/web-components/visualization/gs-mutations-over-time.stories.ts	Update story mocks to request/include only page-sized mutation lists + download-all mock.
components/src/query/queryMutationsOverTime.ts	Introduce metadata + page query functions; refactor map building.
components/src/query/queryMutationsOverTime.spec.ts	Update tests to cover new metadata/page APIs and date-range behaviors.
components/src/preact/wastewater/mutationsOverTime/wastewater-mutations-over-time.tsx	Switch import to new filtering helper module.
components/src/preact/shared/tanstackTable/tanstackTable.tsx	Avoid syncing page size from context when pagination is externally controlled.
components/src/preact/shared/tanstackTable/pagination.tsx	Add totalRows override for server-driven pagination UI.
components/src/preact/mutationsOverTime/useMutationsOverTimePageData.tsx	New hook to fetch and cache per-page time-series data + hide-gaps handling.
components/src/preact/mutationsOverTime/mutations-over-time.tsx	Wire metadata query + server-side pagination + download-all fetch.
components/src/preact/mutationsOverTime/mutations-over-time.stories.tsx	Update story mocks and pagination play steps for lazy-loaded pages.
components/src/preact/mutationsOverTime/getFilteredMutationsOverTime.spec.ts	Remove old “filter full map” tests (replaced by code-based filtering tests).
components/src/preact/mutationsOverTime/getFilteredMutationCodes.ts	Refactor filtering to return mutation codes (not a filtered 2D map).
components/src/preact/mutationsOverTime/getFilteredMutationCodes.spec.ts	New unit tests for code-based filtering behavior.
components/src/preact/mutationsOverTime/mockData/defaultMockData/mutationsOverTimePageSize20.json	Add mock response for larger page size (download-all / pageSize=20 scenario).
components/src/preact/mutationsOverTime/mockData/defaultMockData/mutationsOverTimePage2.json	Add mock response for second page.
components/src/preact/mutationsOverTime/mockData/defaultMockData/mutationsOverTimePage1.json	Add mock response for first page.
components/src/preact/mutationsOverTime/mockData/defaultMockData/mockDefaultMutationsOverTimeWithFilter.json	Add mock response for strict include-mutations filtering.
components/src/preact/mutationsOverTime/mockData/byWeek/mutationsOverTimePage1.json	Add mock response for by-week first page.
components/src/preact/mutationsOverTime/mockData/aminoAcidMutationsByDay/aminoAcidMutationsOverTimePage1.json	Add mock response for amino-acid-by-day first page.
components/src/preact/components/mutations-over-time-mutations-filter.tsx	Update MutationFilter type import to new module.
components/src/preact/components/mutations-over-time-mutations-filter.stories.tsx	Update MutationFilter type import to new module.
components/src/preact/components/features-over-time-grid.tsx	Add server-paginated grid variant + loading state + pagination total row support.
components/src/preact/components/csv-download-button.tsx	Make CSV generation async and show “Downloading…” + disable button during download.

Comments suppressed due to low confidence (1)

components/src/preact/shared/tanstackTable/pagination.tsx:49

• When the current page has 0 loaded rows (e.g. during server-side loading), maxRow becomes minRow - 1, which can render an invalid range like "1 - 0 of N". Consider computing maxRow from pageSize/numRows when table.getRowModel().rows.length === 0, or hiding the indicator until rows are loaded.

function PageIndicator({ table, totalRows }: PaginationProps & { totalRows?: number }) {
    const numRows = totalRows ?? table.getCoreRowModel().rows.length;

    if (table.getRowModel().rows.length <= 1 && numRows <= 1) {
        return null;
    }

    const minRow = table.getState().pagination.pageIndex * table.getState().pagination.pageSize + 1;
    const maxRow = minRow + table.getRowModel().rows.length - 1;

    return (
        <span className='text-sm'>
            {minRow} - {maxRow} of {numRows}
        </span>

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 28 out of 31 changed files in this pull request and generated 4 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.