@genspectrum/dashboard-components 1.15.0 → 1.17.0

package/src/preact/mutationsOverTime/useMutationsOverTimePageData.ts

@@ -0,0 +1,111 @@
+import { useEffect, useMemo, useRef } from 'preact/hooks';
+
+import { type MutationOverTimeDataMap } from './MutationOverTimeData';
+import { type MutationsOverTimeMetadata, queryMutationsOverTimePage } from '../../query/queryMutationsOverTime';
+import { type LapisFilter } from '../../types';
+import { Map2dView } from '../../utils/map2d';
+import { useQuery } from '../useQuery';
+
+type MutationsOverTimePageQuery =
+    | { isLoading: true; data: null; pageMutationCodes: string[] }
+    | { isLoading: false; data: MutationOverTimeDataMap; pageMutationCodes: string[] };
+
+/**
+ * Fetches the data for a single page of the mutations-over-time grid.
+ *
+ * Rather than loading all mutation data at once, this hook fetches only the rows (mutation codes)
+ * that are visible on the current page. The set of visible mutations is determined by
+ * `filteredMutationCodes` (all mutations that pass the current client-side filters), sliced to
+ * the current page according to `pageIndex` and `pageSize`.
+ *
+ * Results are cached in a `useRef`-backed Map keyed by the full query context (filter, date
+ * ranges, sequence type, and the specific mutation codes on the page), so revisiting a page does
+ * not trigger a new network request. The cache is cleared automatically whenever the underlying
+ * query inputs change (i.e. `lapisFilter`, `lapis`, `lapisDateField`, `sequenceType`, or
+ * `requestedDateRanges`), ensuring stale data is never served after the dataset changes.
+ *
+ * When `hideGaps` is true, date-range columns that contain no data are removed from the returned
+ * view before it is passed to the grid.
+ */
+export function useMutationsOverTimePageData(
+    filteredMutationCodes: string[],
+    pageIndex: number,
+    pageSize: number,
+    lapisFilter: LapisFilter,
+    lapis: string,
+    lapisDateField: string,
+    sequenceType: 'nucleotide' | 'amino acid',
+    requestedDateRanges: MutationsOverTimeMetadata['requestedDateRanges'],
+    hideGaps: boolean,
+): MutationsOverTimePageQuery {
+    const pageMutationCodes = useMemo(
+        () => filteredMutationCodes.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize),
+        [filteredMutationCodes, pageIndex, pageSize],
+    );
+
+    const cache = useRef<Map<string, MutationOverTimeDataMap>>(new Map());
+    useEffect(() => {
+        cache.current = new Map(); // make sure the cache doesn't grow indefinitely
+    }, [lapisFilter, lapis, lapisDateField, sequenceType, requestedDateRanges]);
+
+    const {
+        data: pageData,
+        error,
+        isLoading,
+    } = useQuery(async () => {
+        const cacheKey = JSON.stringify({
+            lapisFilter,
+            lapis,
+            lapisDateField,
+            sequenceType,
+            requestedDateRanges,
+            pageMutationCodes,
+        });
+        const cachedData = cache.current.get(cacheKey);
+        if (cachedData !== undefined) {
+            return cachedData;
+        }
+
+        const newData = await queryMutationsOverTimePage(
+            lapisFilter,
+            lapis,
+            lapisDateField,
+            sequenceType,
+            requestedDateRanges,
+            pageMutationCodes,
+        );
+        cache.current.set(cacheKey, newData);
+        return newData;
+    }, [lapisFilter, lapis, lapisDateField, sequenceType, requestedDateRanges, pageMutationCodes]);
+
+    if (error) {
+        throw error;
+    }
+
+    return useMemo(() => {
+        if (isLoading) {
+            return { isLoading: true, data: null, pageMutationCodes };
+        }
+
+        return { isLoading: false, data: handleHideGaps(pageData, hideGaps), pageMutationCodes };
+    }, [pageData, hideGaps, isLoading, pageMutationCodes]);
+}
+
+/**
+ * Returns a new view on `data` where columns (date ranges) that do not contain any data are
+ * filtered out. When `hideGaps` is false the original data is returned unchanged.
+ */
+export function handleHideGaps(data: MutationOverTimeDataMap, hideGaps: boolean) {
+    if (!hideGaps) {
+        return data;
+    }
+
+    const view = new Map2dView(data);
+    view.getSecondAxisKeys()
+        .filter((dateRange) => {
+            const vals = view.getColumn(dateRange);
+            return !vals.some((v) => (v?.type === 'value' || v?.type === 'valueWithCoverage') && v.totalCount > 0);
+        })
+        .forEach((dateRange) => view.deleteColumn(dateRange));
+    return view;
+}

package/src/preact/queriesOverTime/queries-over-time-row-label-tooltip.stories.tsx

@@ -23,20 +23,20 @@ export const Default: StoryObj<QueriesOverTimeRowLabelTooltipProps> = {
     render: (args) => <QueriesOverTimeRowLabelTooltip {...args} />,
     args: {
         query: {
-            displayLabel: 'S:F456L (single mutation)',
-            description: 'This mutation is associated with increased transmissibility.',
-            countQuery: 'S:456L',
+            displayLabel: 'Foo variant',
+            description: 'These mutations are associated with increased transmissibility.',
+            countQuery: 'S:451L & S:452L & S:453L & S:454L & S:455L & S:456L & S:457L & S:458L & S:459L & S:460L',
             coverageQuery: '!S:456N',
         },
     },
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
-        await expect(canvas.getByText('S:F456L (single mutation)', { exact: true })).toBeVisible();
-        await expect(canvas.getByText('This mutation is associated with increased transmissibility.')).toBeVisible();
+        await expect(canvas.getByText('Foo variant', { exact: true })).toBeVisible();
+        await expect(canvas.getByText('These mutations are associated with increased transmissibility.')).toBeVisible();
         await expect(canvas.getByText('Count query:')).toBeVisible();
-        await expect(canvas.getByText('S:456L')).toBeVisible();
-        await expect(canvas.getByText('Coverage query:')).toBeVisible();
-        await expect(canvas.getByText('!S:456N')).toBeVisible();
+        await expect(
+            canvas.getByText('S:451L & S:452L & S:453L & S:454L & S:455L & S:456L & S:457L & S:458L & S:459L & S:460L'),
+        ).toBeVisible();
     },
 };
 
@@ -54,7 +54,5 @@ export const WithoutDescription: StoryObj<QueriesOverTimeRowLabelTooltipProps> =
         await expect(canvas.getByText('S:R346T', { exact: true })).toBeVisible();
         await expect(canvas.getByText('Count query:')).toBeVisible();
         await expect(canvas.getByText('S:346T')).toBeVisible();
-        await expect(canvas.getByText('Coverage query:')).toBeVisible();
-        await expect(canvas.getByText('!S:346N')).toBeVisible();
     },
 };

package/src/preact/queriesOverTime/queries-over-time-row-label-tooltip.tsx

@@ -8,25 +8,15 @@ export type QueriesOverTimeRowLabelTooltipProps = {
 
 export const QueriesOverTimeRowLabelTooltip: FunctionComponent<QueriesOverTimeRowLabelTooltipProps> = ({ query }) => {
     return (
-        <div className='flex flex-col gap-2'>
+        <div className='flex flex-col gap-2 max-w-xl'>
             <div className='font-bold'>{query.displayLabel}</div>
             {query.description && <div className='text-sm text-gray-700'>{query.description}</div>}
-            <div className='flex flex-col gap-1'>
-                <div className='text-sm'>
-                    <span className='text-gray-600'>Count query:</span>
-                    <div className='p-2 border border-gray-200 rounded bg-gray-50 overflow-x-auto'>
-                        <pre className='text-xs'>
-                            <code>{query.countQuery}</code>
-                        </pre>
-                    </div>
-                </div>
-                <div className='text-sm'>
-                    <span className='text-gray-600'>Coverage query:</span>
-                    <div className='p-2 border border-gray-200 rounded bg-gray-50 overflow-x-auto'>
-                        <pre className='text-xs'>
-                            <code>{query.coverageQuery}</code>
-                        </pre>
-                    </div>
+            <div className='text-sm'>
+                <span className='text-gray-600'>Count query:</span>
+                <div className='p-2 border border-gray-200 rounded bg-gray-50'>
+                    <pre className='text-xs whitespace-pre-wrap'>
+                        <code>{query.countQuery}</code>
+                    </pre>
                 </div>
             </div>
         </div>

package/src/preact/queriesOverTime/queries-over-time.tsx

@@ -177,7 +177,7 @@ const QueriesOverTimeTabs: FunctionComponent<QueriesOverTimeTabsProps> = ({
                         position='right'
                         portalTarget={tooltipPortalTarget}
                     >
-                        <div className='text-center'>
+                        <div className='text-center whitespace-nowrap mr-2'>
                             <span>{value}</span>
                         </div>
                     </PortalTooltip>

package/src/preact/shared/tanstackTable/pagination-context.tsx

@@ -1,7 +1,8 @@
 import { createContext, type FunctionComponent } from 'preact';
-import { type Dispatch, type StateUpdater, useContext, useState } from 'preact/hooks';
+import { type Dispatch, type StateUpdater, useContext } from 'preact/hooks';
 
 import type { PageSizes } from './pagination';
+import { useControlledState } from '../../../utils/useControlledState';
 
 type PageSizeContext = {
     pageSize: number;
@@ -24,7 +25,9 @@ export type PageSizeContextProviderProps = {
 };
 
 export const PageSizeContextProvider: FunctionComponent<PageSizeContextProviderProps> = ({ children, pageSizes }) => {
-    const [pageSize, setPageSize] = useState(typeof pageSizes === 'number' ? pageSizes : (pageSizes.at(0) ?? 10));
+    const [pageSize, setPageSize] = useControlledState(
+        typeof pageSizes === 'number' ? pageSizes : (pageSizes.at(0) ?? 10),
+    );
 
     return <pageSizeContext.Provider value={{ pageSize, setPageSize }}>{children}</pageSizeContext.Provider>;
 };

package/src/preact/shared/tanstackTable/pagination.tsx

@@ -13,16 +13,19 @@ export type PageSizes = z.infer<typeof pageSizesSchema>;
 export function Pagination({
     table,
     pageSizes,
+    totalRows,
 }: PaginationProps & {
     pageSizes: PageSizes;
+    /** Override the total row count (for server-driven pagination). */
+    totalRows: number;
 }) {
     return (
         <div className='@container'>
             <div className='flex items-center gap-x-6 gap-y-2 flex-wrap @xl:justify-end justify-center'>
                 <PageSizeSelector table={table} pageSizes={pageSizes} />
-                <PageIndicator table={table} />
+                <PageIndicator table={table} totalRows={totalRows} />
                 <div className='@xl:block hidden'>
-                    <GotoPageSelector table={table} />
+                    <GotoPageSelector table={table} totalRows={totalRows} />
                 </div>
                 <SelectPageButtons table={table} />
             </div>
@@ -30,18 +33,17 @@ export function Pagination({
     );
 }
 
-function PageIndicator({ table }: PaginationProps) {
-    if (table.getRowModel().rows.length <= 1) {
+function PageIndicator({ table, totalRows }: PaginationProps & { totalRows: number }) {
+    if (table.getPaginationRowModel().rows.length <= 1 && totalRows <= 1) {
         return null;
     }
 
     const minRow = table.getState().pagination.pageIndex * table.getState().pagination.pageSize + 1;
-    const maxRow = minRow + table.getRowModel().rows.length - 1;
-    const numRows = table.getCoreRowModel().rows.length;
+    const maxRow = minRow + table.getPaginationRowModel().rows.length - 1;
 
     return (
         <span className='text-sm'>
-            {minRow} - {maxRow} of {numRows}
+            {minRow} - {maxRow} of {totalRows}
         </span>
     );
 }
@@ -88,8 +90,8 @@ function PageSizeSelector({
     );
 }
 
-function GotoPageSelector({ table }: PaginationProps) {
-    if (table.getRowModel().rows.length === 0) {
+function GotoPageSelector({ table, totalRows }: PaginationProps & { totalRows: number }) {
+    if (table.getRowModel().rows.length === 0 && totalRows === 0) {
         return null;
     }
 

package/src/preact/shared/tanstackTable/tanstackTable.tsx

@@ -4,8 +4,6 @@ import { useEffect, useState } from 'preact/hooks';
 
 import { usePageSizeContext } from './pagination-context';
 
-export * from '@tanstack/table-core';
-
 export type Renderable<TProps> = VNode<TProps> | ComponentType<TProps> | undefined | null | string | number | boolean;
 
 /*
@@ -45,12 +43,17 @@ export function usePreactTable<TData extends RowData>(options: TableOptions<TDat
         },
     }));
 
+    // When pagination is controlled externally (manualPagination: true with a state override),
+    // the caller manages pageSize themselves — skip the context sync to avoid conflicts.
+    const isControlled = options.manualPagination === true && options.state?.pagination !== undefined;
     const { pageSize } = usePageSizeContext();
     useEffect(
         () => {
-            tableRef.current.setPageSize(pageSize);
+            if (!isControlled) {
+                tableRef.current.setPageSize(pageSize);
+            }
         },
-        [pageSize], // eslint-disable-line react-hooks/exhaustive-deps -- only run this when the pageSize changes
+        [pageSize, isControlled], // eslint-disable-line react-hooks/exhaustive-deps -- only run this when the pageSize changes
     );
 
     return tableRef.current;

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

@@ -28,7 +28,7 @@ import { type MutationOverTimeDataMap } from '../../mutationsOverTime/MutationOv
 import {
     type MutationFilter,
     mutationOrAnnotationDoNotMatchFilter,
-} from '../../mutationsOverTime/getFilteredMutationsOverTimeData';
+} from '../../mutationsOverTime/getFilteredMutationCodes';
 import { MutationsOverTimeGridTooltip } from '../../mutationsOverTime/mutations-over-time-grid-tooltip';
 import { pageSizesSchema } from '../../shared/tanstackTable/pagination';
 import { PageSizeContextProvider } from '../../shared/tanstackTable/pagination-context';