@genspectrum/dashboard-components 1.16.0 → 1.17.0

package/dist/util.d.ts

@@ -848,11 +848,11 @@ declare const queriesOverTimeSchema: default_2.ZodObject<{
         max: number;
     };
     height?: string | undefined;
-    hideGaps?: boolean | undefined;
     customColumns?: {
         values: Record<string, string | number>;
         header: string;
     }[] | undefined;
+    hideGaps?: boolean | undefined;
 }, {
     lapisFilter: Record<string, string | number | boolean | string[] | null | undefined> & {
         nucleotideMutations?: string[] | undefined;
@@ -876,11 +876,11 @@ declare const queriesOverTimeSchema: default_2.ZodObject<{
         max: number;
     };
     height?: string | undefined;
-    hideGaps?: boolean | undefined;
     customColumns?: {
         values: Record<string, string | number>;
         header: string;
     }[] | undefined;
+    hideGaps?: boolean | undefined;
 }>;
 
 export declare type QueriesOverTimeView = default_2.infer<typeof queriesOverTimeViewSchema>;
@@ -1188,7 +1188,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -1196,7 +1196,7 @@ declare global {
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+            'gs-aggregate': AggregateComponent;
         }
     }
 }
@@ -1204,7 +1204,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1212,7 +1212,7 @@ declare global {
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'gs-aggregate': AggregateComponent;
+            'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "1.16.0",
+    "version": "1.17.0",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",

package/src/preact/MutationAnnotationsContext.tsx

@@ -98,7 +98,7 @@ export function useRawMutationAnnotations() {
 export function useMutationAnnotationsProvider() {
     const mutationAnnotations = useContext(MutationAnnotationsContext);
 
-    return getMutationAnnotationsProvider(mutationAnnotations);
+    return useMemo(() => getMutationAnnotationsProvider(mutationAnnotations), [mutationAnnotations]);
 }
 
 export function getMutationAnnotationsProvider(mutationAnnotations: MutationAnnotationsContextValue) {

package/src/preact/components/csv-download-button.tsx

@@ -1,4 +1,5 @@
 import { type FunctionComponent } from 'preact';
+import { useState } from 'preact/hooks';
 
 type ToStringable = {
     toString: () => string;
@@ -9,7 +10,7 @@ export type DataValue = string | number | boolean | null | undefined | ToStringa
 export interface CsvDownloadButtonProps {
     label?: string;
     filename?: string;
-    getData: () => Record<string, DataValue>[];
+    getData: () => Record<string, DataValue>[] | Promise<Record<string, DataValue>[]>;
     className?: string;
 }
 
@@ -19,19 +20,26 @@ export const CsvDownloadButton: FunctionComponent<CsvDownloadButtonProps> = ({
     getData,
     className,
 }) => {
-    const download = () => {
-        const content = getDownloadContent();
-        const blob = new Blob([content], { type: 'text/csv' });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = filename;
-        a.click();
-        URL.revokeObjectURL(url);
+    const [isDownloading, setIsDownloading] = useState(false);
+
+    const download = async () => {
+        setIsDownloading(true);
+        try {
+            const content = await getDownloadContent();
+            const blob = new Blob([content], { type: 'text/csv' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = filename;
+            a.click();
+            URL.revokeObjectURL(url);
+        } finally {
+            setIsDownloading(false);
+        }
     };
 
-    const getDownloadContent = () => {
-        const data = getData();
+    const getDownloadContent = async () => {
+        const data = await getData();
         const keys = getDataKeys(data);
         const header = keys.join(',');
         const rows = data.map((row) => keys.map((key) => row[key]).join(',')).join('\n');
@@ -50,8 +58,8 @@ export const CsvDownloadButton: FunctionComponent<CsvDownloadButtonProps> = ({
     };
 
     return (
-        <button className={className} onClick={download}>
-            {label}
+        <button className={className} onClick={() => void download()} disabled={isDownloading}>
+            {isDownloading ? 'Downloading...' : label}
         </button>
     );
 };

package/src/preact/components/features-over-time-grid.tsx

@@ -1,5 +1,7 @@
+import { createColumnHelper, getCoreRowModel, getPaginationRowModel } from '@tanstack/table-core';
+import type { Table } from '@tanstack/table-core';
 import { type FunctionComponent, type JSX } from 'preact';
-import { useMemo } from 'preact/hooks';
+import { type Dispatch, type StateUpdater, useMemo } from 'preact/hooks';
 import z from 'zod';
 
 import { type ColorScale, getColorWithinScale, getTextColorForScale } from './color-scale-selector';
@@ -11,13 +13,7 @@ import { type TemporalDataMap } from '../mutationsOverTime/MutationOverTimeData'
 import { formatProportion } from '../shared/table/formatProportion';
 import { type PageSizes, Pagination } from '../shared/tanstackTable/pagination';
 import { usePageSizeContext } from '../shared/tanstackTable/pagination-context';
-import {
-    createColumnHelper,
-    flexRender,
-    getCoreRowModel,
-    getPaginationRowModel,
-    usePreactTable,
-} from '../shared/tanstackTable/tanstackTable';
+import { flexRender, usePreactTable } from '../shared/tanstackTable/tanstackTable';
 
 const NON_BREAKING_SPACE = '\u00A0';
 
@@ -60,18 +56,118 @@ function FeaturesOverTimeGrid<F>({
     featureRenderer,
     tooltipPortalTarget,
 }: FeaturesOverTimeGridProps<F>) {
-    const tableData = useMemo(() => {
-        const firstAxisKeys = data.getFirstAxisKeys();
-        return data.getAsArray().map((row, index): RowType<F> => {
-            const firstAxisKey = firstAxisKeys[index];
-            const customValues = customColumns.map((col) => col.values[featureRenderer.asString(firstAxisKey)]);
-            return { feature: firstAxisKey, values: [...row], customValues };
-        });
-    }, [data, customColumns, featureRenderer]);
+    const tableData = useGridTableData(data, customColumns, featureRenderer);
+    const columns = useGridColumns(
+        data.getSecondAxisKeys(),
+        rowLabelHeader,
+        customColumns,
+        colorScale,
+        tooltipPortalTarget,
+        featureRenderer,
+    );
+    const { pageSize } = usePageSizeContext();
+
+    const table = usePreactTable({
+        data: tableData,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        initialState: {
+            pagination: { pageIndex: 0, pageSize },
+        },
+    });
+
+    return <FeaturesOverTimeGridDisplay table={table} pageSizes={pageSizes} />;
+}
+
+export interface FeaturesOverTimeGridServerPaginatedProps<F> {
+    rowLabelHeader: string;
+    data: TemporalDataMap<F> | null;
+    isLoading: boolean;
+    /** Labels to show in the row label column while the page data is loading. */
+    loadingRowLabels: string[];
+    /** Date columns to show in the header while loading */
+    requestedDateRanges: Temporal[];
+    colorScale: ColorScale;
+    pageSizes: PageSizes;
+    /** Controlled page index (0-based). */
+    pageIndex: number;
+    /** Total number of rows across all pages. */
+    totalRows: number;
+    onPageChange: Dispatch<StateUpdater<number>>;
+    customColumns?: CustomColumn[];
+    featureRenderer: FeatureRenderer<F>;
+    tooltipPortalTarget: HTMLElement | null;
+}
+
+export function FeaturesOverTimeGridServerPaginated<F>({
+    rowLabelHeader,
+    data,
+    isLoading,
+    loadingRowLabels,
+    requestedDateRanges,
+    colorScale,
+    pageSizes,
+    pageIndex,
+    totalRows,
+    onPageChange,
+    customColumns = EMPTY_COLUMNS,
+    featureRenderer,
+    tooltipPortalTarget,
+}: FeaturesOverTimeGridServerPaginatedProps<F>) {
+    const tableData = useGridTableData(data, customColumns, featureRenderer);
+    const columns = useGridColumns(
+        data?.getSecondAxisKeys() ?? requestedDateRanges,
+        rowLabelHeader,
+        customColumns,
+        colorScale,
+        tooltipPortalTarget,
+        featureRenderer,
+    );
+    const { pageSize, setPageSize } = usePageSizeContext();
+
+    const table = usePreactTable({
+        data: tableData,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        // getPaginationRowModel not needed with manualPagination: true
+        manualPagination: true,
+        pageCount: Math.ceil(totalRows / pageSize),
+        state: {
+            pagination: { pageIndex, pageSize },
+        },
+        onPaginationChange: (updater) => {
+            const current = { pageIndex, pageSize };
+            const next = typeof updater === 'function' ? updater(current) : updater;
+            if (next.pageIndex !== current.pageIndex) {
+                onPageChange(next.pageIndex);
+            }
+            if (next.pageSize !== current.pageSize) {
+                setPageSize(next.pageSize);
+            }
+        },
+    });
 
-    const columns = useMemo(() => {
+    return (
+        <FeaturesOverTimeGridDisplay
+            table={table}
+            pageSizes={pageSizes}
+            loadingState={{ isLoading, loadingRowLabels }}
+            totalRows={totalRows}
+        />
+    );
+}
+
+function useGridColumns<F>(
+    dates: Temporal[],
+    rowLabelHeader: string,
+    customColumns: CustomColumn[],
+    colorScale: ColorScale,
+    tooltipPortalTarget: HTMLElement | null,
+    featureRenderer: FeatureRenderer<F>,
+) {
+    return useMemo(() => {
         const columnHelper = createColumnHelper<RowType<F>>();
-        const dates = data.getSecondAxisKeys();
 
         const featureHeader = columnHelper.accessor((row) => row.feature, {
             id: 'feature',
@@ -137,21 +233,48 @@ function FeaturesOverTimeGrid<F>({
         });
 
         return [featureHeader, ...customColumnHeaders, ...dateHeaders];
-    }, [colorScale, data, customColumns, tooltipPortalTarget, featureRenderer, rowLabelHeader]);
+    }, [colorScale, dates, customColumns, tooltipPortalTarget, featureRenderer, rowLabelHeader]);
+}
 
-    const { pageSize } = usePageSizeContext();
-    const table = usePreactTable({
-        data: tableData,
-        columns,
-        getCoreRowModel: getCoreRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
-        initialState: {
-            pagination: {
-                pageIndex: 0,
-                pageSize,
-            },
-        },
-    });
+function useGridTableData<F>(
+    data: TemporalDataMap<F> | null | undefined,
+    customColumns: CustomColumn[],
+    featureRenderer: FeatureRenderer<F>,
+) {
+    return useMemo(() => {
+        if (!data) {
+            return [];
+        }
+        const firstAxisKeys = data.getFirstAxisKeys();
+        return data.getAsArray().map((row, index): RowType<F> => {
+            const firstAxisKey = firstAxisKeys[index];
+            const customValues = customColumns.map((col) => col.values[featureRenderer.asString(firstAxisKey)]);
+            return { feature: firstAxisKey, values: [...row], customValues };
+        });
+    }, [data, customColumns, featureRenderer]);
+}
+
+type FeaturesOverTimeGridDisplayProps<F> = {
+    table: Table<RowType<F>>;
+    pageSizes: PageSizes;
+    /** Override for the pagination row count (server-driven pagination). */
+    totalRows?: number;
+    loadingState?:
+        | {
+              isLoading: boolean;
+              /** Labels to render in the row label column while loading. One skeleton row is shown per label. */
+              loadingRowLabels: string[];
+          }
+        | { isLoading: false; loadingRowLabels?: never };
+};
+
+function FeaturesOverTimeGridDisplay<F>({
+    table,
+    pageSizes,
+    loadingState,
+    totalRows,
+}: FeaturesOverTimeGridDisplayProps<F>) {
+    const displayedTotalRows = totalRows ?? table.getCoreRowModel().rows.length;
 
     return (
         <div className='w-full'>
@@ -170,22 +293,45 @@ function FeaturesOverTimeGrid<F>({
                     ))}
                 </thead>
                 <tbody>
-                    {table.getRowModel().rows.map((row) => (
-                        <tr key={row.id}>
-                            {row.getVisibleCells().map((cell) => (
-                                <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
+                    {loadingState?.isLoading ? (
+                        loadingState.loadingRowLabels.map((label, rowIndex) => (
+                            <tr key={label}>
+                                <td className='text-center'>{label}</td>
+                                {rowIndex === 0 && (
+                                    <td
+                                        rowSpan={loadingState.loadingRowLabels.length}
+                                        colSpan={table.getFlatHeaders().length - 1}
+                                        className='text-center'
+                                    >
+                                        <span className='loading loading-spinner loading-sm' />
+                                    </td>
+                                )}
+                            </tr>
+                        ))
+                    ) : (
+                        <>
+                            {table.getRowModel().rows.map((row) => (
+                                <tr key={row.id}>
+                                    {row.getVisibleCells().map((cell) => (
+                                        <td key={cell.id}>
+                                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                        </td>
+                                    ))}
+                                </tr>
                             ))}
-                        </tr>
-                    ))}
-                    {table.getRowModel().rows.length === 0 && (
-                        <td colSpan={table.getFlatHeaders().length}>
-                            <div className={'text-center'}>No data available for your filters.</div>
-                        </td>
+                            {table.getRowModel().rows.length === 0 && (
+                                <tr>
+                                    <td colSpan={table.getFlatHeaders().length}>
+                                        <div className={'text-center'}>No data available for your filters.</div>
+                                    </td>
+                                </tr>
+                            )}
+                        </>
                     )}
                 </tbody>
             </table>
             <div className={'mt-2'}>
-                <Pagination table={table} pageSizes={pageSizes} />
+                <Pagination table={table} pageSizes={pageSizes} totalRows={displayedTotalRows} />
             </div>
         </div>
     );

package/src/preact/components/mutations-over-time-mutations-filter.stories.tsx

@@ -9,7 +9,7 @@ import {
 } from './mutations-over-time-mutations-filter';
 import { type MutationAnnotations } from '../../web-components/mutation-annotations-context';
 import { MutationAnnotationsContextProvider } from '../MutationAnnotationsContext';
-import { type MutationFilter } from '../mutationsOverTime/getFilteredMutationsOverTimeData';
+import { type MutationFilter } from '../mutationsOverTime/getFilteredMutationCodes';
 
 const meta: Meta = {
     title: 'Component/Mutations over time mutations filter',

package/src/preact/components/mutations-over-time-mutations-filter.tsx

@@ -3,7 +3,7 @@ import { type Dispatch, type StateUpdater, useCallback, useEffect, useState } fr
 
 import { Dropdown } from './dropdown';
 import { useRawMutationAnnotations } from '../MutationAnnotationsContext';
-import { type MutationFilter } from '../mutationsOverTime/getFilteredMutationsOverTimeData';
+import { type MutationFilter } from '../mutationsOverTime/getFilteredMutationCodes';
 import { DeleteIcon } from '../shared/icons/DeleteIcon';
 
 export type MutationsOverTimeMutationsFilterProps = {

package/src/preact/mutationsOverTime/__mockData__/aminoAcidMutationsByDay/aminoAcidMutationsOverTimePage1.json

@@ -0,0 +1,52 @@
+{
+    "data": {
+        "mutations": ["ORF1a:T170I", "ORF1a:F499L", "S:T572I"],
+        "dateRanges": [
+            { "dateFrom": "2024-01-20", "dateTo": "2024-01-20" },
+            { "dateFrom": "2024-01-21", "dateTo": "2024-01-21" },
+            { "dateFrom": "2024-01-22", "dateTo": "2024-01-22" },
+            { "dateFrom": "2024-01-23", "dateTo": "2024-01-23" },
+            { "dateFrom": "2024-01-24", "dateTo": "2024-01-24" },
+            { "dateFrom": "2024-01-25", "dateTo": "2024-01-25" },
+            { "dateFrom": "2024-01-26", "dateTo": "2024-01-26" }
+        ],
+        "data": [
+            [
+                { "count": 121, "coverage": 455 },
+                { "count": 155, "coverage": 535 },
+                { "count": 314, "coverage": 1100 },
+                { "count": 245, "coverage": 1032 },
+                { "count": 225, "coverage": 968 },
+                { "count": 197, "coverage": 839 },
+                { "count": 171, "coverage": 635 }
+            ],
+            [
+                { "count": 20, "coverage": 459 },
+                { "count": 33, "coverage": 536 },
+                { "count": 79, "coverage": 1149 },
+                { "count": 71, "coverage": 1061 },
+                { "count": 66, "coverage": 995 },
+                { "count": 49, "coverage": 857 },
+                { "count": 42, "coverage": 668 }
+            ],
+            [
+                { "count": 26, "coverage": 456 },
+                { "count": 37, "coverage": 541 },
+                { "count": 83, "coverage": 1141 },
+                { "count": 81, "coverage": 1051 },
+                { "count": 70, "coverage": 986 },
+                { "count": 64, "coverage": 848 },
+                { "count": 48, "coverage": 664 }
+            ]
+        ],
+        "totalCountsByDateRange": [466, 548, 1155, 1067, 1007, 865, 671]
+    },
+    "info": {
+        "dataVersion": "1774200829",
+        "requestId": "74b55554-9ee9-4776-ba5f-48b93782ed51",
+        "requestInfo": "sars_cov-2_nextstrain_open on lapis.cov-spectrum.org at 2026-03-24T08:59:15.215671655",
+        "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.7.0",
+        "siloVersion": "0.10.0"
+    }
+}

package/src/preact/mutationsOverTime/__mockData__/byWeek/mutationsOverTimePage1.json

@@ -0,0 +1,76 @@
+{
+    "data": {
+        "mutations": ["C44T", "C774T", "C1762A", "C11747T", "G17562T", "T18453C", "G21641T", "C23277T", "C29870A"],
+        "dateRanges": [
+            { "dateFrom": "2024-01-15", "dateTo": "2024-01-21" },
+            { "dateFrom": "2024-01-22", "dateTo": "2024-01-28" },
+            { "dateFrom": "2024-01-29", "dateTo": "2024-02-04" },
+            { "dateFrom": "2024-02-05", "dateTo": "2024-02-11" }
+        ],
+        "data": [
+            [
+                { "count": 548, "coverage": 923 },
+                { "count": 605, "coverage": 1040 },
+                { "count": 571, "coverage": 916 },
+                { "count": 481, "coverage": 858 }
+            ],
+            [
+                { "count": 1404, "coverage": 5260 },
+                { "count": 1358, "coverage": 5415 },
+                { "count": 1473, "coverage": 5404 },
+                { "count": 1370, "coverage": 5120 }
+            ],
+            [
+                { "count": 348, "coverage": 5345 },
+                { "count": 360, "coverage": 5592 },
+                { "count": 273, "coverage": 5470 },
+                { "count": 214, "coverage": 5158 }
+            ],
+            [
+                { "count": 322, "coverage": 5006 },
+                { "count": 323, "coverage": 5215 },
+                { "count": 259, "coverage": 5214 },
+                { "count": 191, "coverage": 4831 }
+            ],
+            [
+                { "count": 381, "coverage": 5383 },
+                { "count": 402, "coverage": 5618 },
+                { "count": 353, "coverage": 5500 },
+                { "count": 303, "coverage": 5194 }
+            ],
+            [
+                { "count": 1175, "coverage": 5348 },
+                { "count": 1104, "coverage": 5557 },
+                { "count": 1156, "coverage": 5474 },
+                { "count": 1100, "coverage": 5176 }
+            ],
+            [
+                { "count": 300, "coverage": 4800 },
+                { "count": 512, "coverage": 4860 },
+                { "count": 311, "coverage": 4833 },
+                { "count": 124, "coverage": 4390 }
+            ],
+            [
+                { "count": 337, "coverage": 5391 },
+                { "count": 431, "coverage": 5615 },
+                { "count": 565, "coverage": 5497 },
+                { "count": 662, "coverage": 5193 }
+            ],
+            [
+                { "count": 17, "coverage": 251 },
+                { "count": 7, "coverage": 260 },
+                { "count": 17, "coverage": 237 },
+                { "count": 13, "coverage": 185 }
+            ]
+        ],
+        "totalCountsByDateRange": [5395, 5624, 5506, 5200]
+    },
+    "info": {
+        "dataVersion": "1774200829",
+        "requestId": "84c09426-1724-49bb-8e8e-fcc0d98d2c89",
+        "requestInfo": "sars_cov-2_nextstrain_open on lapis.cov-spectrum.org at 2026-03-24T08:56:49.830150373",
+        "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.7.0",
+        "siloVersion": "0.10.0"
+    }
+}

package/src/preact/mutationsOverTime/__mockData__/defaultMockData/mockDefaultMutationsOverTimeWithFilter.json

@@ -0,0 +1,43 @@
+{
+    "data": {
+        "mutations": ["T21653-", "T21655-"],
+        "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": 13, "coverage": 13948 },
+                { "count": 15, "coverage": 17359 },
+                { "count": 41, "coverage": 8319 },
+                { "count": 237, "coverage": 6564 },
+                { "count": 1370, "coverage": 9054 },
+                { "count": 5079, "coverage": 16077 },
+                { "count": 3245, "coverage": 7342 }
+            ],
+            [
+                { "count": 12, "coverage": 13941 },
+                { "count": 14, "coverage": 17360 },
+                { "count": 41, "coverage": 8327 },
+                { "count": 235, "coverage": 6596 },
+                { "count": 1376, "coverage": 9143 },
+                { "count": 5089, "coverage": 16368 },
+                { "count": 3256, "coverage": 7477 }
+            ]
+        ],
+        "totalCountsByDateRange": [14065, 17583, 8432, 6680, 9252, 16512, 7508]
+    },
+    "info": {
+        "dataVersion": "1774200829",
+        "requestId": "dcc96846-d1d8-4ae2-afbe-60fcda8e64f0",
+        "requestInfo": "sars_cov-2_nextstrain_open on lapis.cov-spectrum.org at 2026-03-24T09:25:28.706437897",
+        "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.7.0",
+        "siloVersion": "0.10.0"
+    }
+}