@genspectrum/dashboard-components 0.17.0 → 0.17.1

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

@@ -1,5 +1,6 @@
-import { Fragment, type FunctionComponent } from 'preact';
-import { useRef } from 'preact/hooks';
+import { type PaginationState } from '@tanstack/table-core';
+import { type FunctionComponent } from 'preact';
+import { useMemo, useState } from 'preact/hooks';
 
 import { type MutationOverTimeDataMap } from './MutationOverTimeData';
 import { type MutationOverTimeMutationValue } from '../../query/queryMutationsOverTime';
@@ -10,108 +11,154 @@ import { AnnotatedMutation } from '../components/annotated-mutation';
 import { type ColorScale, getColorWithingScale, getTextColorForScale } from '../components/color-scale-selector';
 import Tooltip, { type TooltipPosition } from '../components/tooltip';
 import { formatProportion } from '../shared/table/formatProportion';
+import { type PageSizes, Pagination } from '../shared/tanstackTable/pagination';
+import {
+    createColumnHelper,
+    flexRender,
+    getCoreRowModel,
+    getPaginationRowModel,
+    usePreactTable,
+} from '../shared/tanstackTable/tanstackTable';
 
 export interface MutationsOverTimeGridProps {
     data: MutationOverTimeDataMap;
     colorScale: ColorScale;
-    maxNumberOfGridRows?: number;
     sequenceType: SequenceType;
+    pageSizes: PageSizes;
 }
 
-const MAX_NUMBER_OF_GRID_ROWS = 100;
-const MUTATION_CELL_WIDTH_REM = 8;
+type RowType = { mutation: Substitution | Deletion; values: (MutationOverTimeMutationValue | undefined)[] };
 
 const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
     data,
     colorScale,
-    maxNumberOfGridRows,
     sequenceType,
+    pageSizes,
 }) => {
-    const currentMaxNumberOfGridRows = maxNumberOfGridRows ?? MAX_NUMBER_OF_GRID_ROWS;
-    const allMutations = data.getFirstAxisKeys();
-    const shownMutations = allMutations.slice(0, currentMaxNumberOfGridRows);
-
-    const dates = data.getSecondAxisKeys();
-
-    const gridRef = useRef<HTMLDivElement>(null);
+    const tableData = useMemo(() => {
+        const allMutations = data.getFirstAxisKeys();
+        return data.getAsArray().map((row, index) => {
+            return { mutation: allMutations[index], values: [...row] };
+        });
+    }, [data]);
+
+    const [pagination, setPagination] = useState<PaginationState>({
+        pageIndex: 0,
+        pageSize: typeof pageSizes === 'number' ? pageSizes : (pageSizes.at(0) ?? 10),
+    });
+
+    const columns = useMemo(() => {
+        const columnHelper = createColumnHelper<RowType>();
+        const dates = data.getSecondAxisKeys();
+
+        const mutationHeader = columnHelper.accessor((row) => row.mutation, {
+            id: 'mutation',
+            header: () => <span>Mutation</span>,
+            cell: ({ getValue }) => {
+                const value = getValue();
+                return (
+                    <div className={'text-center'}>
+                        <AnnotatedMutation mutation={value} sequenceType={sequenceType} />
+                    </div>
+                );
+            },
+        });
+
+        const dateHeaders = dates.map((date, index) => {
+            return columnHelper.accessor((row) => row.values[index], {
+                id: `date-${index}`,
+                header: () => (
+                    <div className='@container min-w-[0.05rem]'>
+                        <p {...styleGridHeader(index, dates.length)}>{date.dateString}</p>
+                    </div>
+                ),
+                cell: ({ getValue, row, column, table }) => {
+                    const value = getValue();
+                    const rowIndex = row.index;
+                    const columnIndex = column.getIndex();
+                    const numberOfRows = table.getRowModel().rows.length;
+                    const numberOfColumns = table.getAllColumns().length;
+
+                    return (
+                        <div className={'text-center'}>
+                            <ProportionCell
+                                value={value ?? null}
+                                date={date}
+                                mutation={row.original.mutation}
+                                tooltipPosition={getTooltipPosition(
+                                    rowIndex -
+                                        table.getState().pagination.pageIndex * table.getState().pagination.pageSize,
+                                    numberOfRows,
+                                    columnIndex,
+                                    numberOfColumns,
+                                )}
+                                colorScale={colorScale}
+                            />
+                        </div>
+                    );
+                },
+            });
+        });
+
+        return [mutationHeader, ...dateHeaders];
+    }, [colorScale, data, sequenceType]);
+
+    const table = usePreactTable({
+        data: tableData,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        debugTable: true,
+        onPaginationChange: setPagination,
+        state: {
+            pagination,
+        },
+    });
 
     return (
-        <>
-            {allMutations.length > currentMaxNumberOfGridRows && (
-                <div className='pl-2'>
-                    Showing {currentMaxNumberOfGridRows} of {allMutations.length} mutations. You can narrow the filter
-                    to reduce the number of mutations.
-                </div>
-            )}
-            {allMutations.length === 0 ? (
-                <div className={'flex justify-center'}>No data available for your filters.</div>
-            ) : (
-                <div
-                    ref={gridRef}
-                    style={{
-                        display: 'grid',
-                        gridTemplateRows: `repeat(${shownMutations.length}, 24px)`,
-                        gridTemplateColumns: `${MUTATION_CELL_WIDTH_REM}rem repeat(${dates.length}, minmax(0.05rem, 1fr))`,
-                    }}
-                    className='text-center'
-                >
-                    {dates.map((date, columnIndex) => (
-                        <div
-                            className='@container font-semibold'
-                            style={{ gridRowStart: 1, gridColumnStart: columnIndex + 2 }}
-                            key={date.dateString}
-                        >
-                            <p {...styleGridHeader(columnIndex, dates)}>{date.dateString}</p>
-                        </div>
+        <div className='w-full'>
+            <table className={'w-full'}>
+                <thead>
+                    {table.getHeaderGroups().map((headerGroup) => (
+                        <tr key={headerGroup.id}>
+                            {headerGroup.headers.map((header) => (
+                                <th key={header.id} colSpan={header.colSpan} style={{ width: `${header.getSize()}px` }}>
+                                    {header.isPlaceholder
+                                        ? null
+                                        : flexRender(header.column.columnDef.header, header.getContext())}
+                                </th>
+                            ))}
+                        </tr>
                     ))}
-                    {shownMutations.map((mutation, rowIndex) => {
-                        return (
-                            <Fragment key={`fragment-${mutation.code}`}>
-                                <div
-                                    key={`mutation-${mutation.code}`}
-                                    style={{ gridRowStart: rowIndex + 2, gridColumnStart: 1 }}
-                                    className='flex items-center justify-center'
-                                >
-                                    <AnnotatedMutation mutation={mutation} sequenceType={sequenceType} />
-                                </div>
-                                {dates.map((date, columnIndex) => {
-                                    const value = data.get(mutation, date) ?? null;
-                                    const tooltipPosition = getTooltipPosition(
-                                        rowIndex,
-                                        shownMutations.length,
-                                        columnIndex,
-                                        dates.length,
-                                    );
-                                    return (
-                                        <div
-                                            style={{ gridRowStart: rowIndex + 2, gridColumnStart: columnIndex + 2 }}
-                                            key={`${mutation.code}-${date.dateString}`}
-                                        >
-                                            <ProportionCell
-                                                value={value}
-                                                date={date}
-                                                mutation={mutation}
-                                                tooltipPosition={tooltipPosition}
-                                                colorScale={colorScale}
-                                            />
-                                        </div>
-                                    );
-                                })}
-                            </Fragment>
-                        );
-                    })}
-                </div>
-            )}
-        </>
+                </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>
+                            ))}
+                        </tr>
+                    ))}
+                    {table.getRowModel().rows.length === 0 && (
+                        <td colSpan={table.getFlatHeaders().length}>
+                            <div className={'text-center'}>No data available for your filters.</div>
+                        </td>
+                    )}
+                </tbody>
+            </table>
+            <div className={'mt-2'}>
+                <Pagination table={table} pageSizes={pageSizes} />
+            </div>
+        </div>
     );
 };
 
-function styleGridHeader(columnIndex: number, dates: Temporal[]) {
+function styleGridHeader(columnIndex: number, numDateColumns: number) {
     if (columnIndex === 0) {
         return { className: 'overflow-visible text-nowrap' };
     }
 
-    if (columnIndex === dates.length - 1) {
+    if (columnIndex === numDateColumns - 1) {
         return { className: 'overflow-visible text-nowrap', style: { direction: 'rtl' } };
     }
 
@@ -168,9 +215,11 @@ const ProportionCell: FunctionComponent<{
                     }}
                     className={`w-full h-full hover:font-bold text-xs group @container`}
                 >
-                    <span className='invisible @[2rem]:visible'>
-                        {value === null ? '' : formatProportion(value.proportion, 0)}
-                    </span>
+                    {value === null ? (
+                        <span className={'invisible'}>No data</span>
+                    ) : (
+                        <span className='invisible @[2rem]:visible'>{formatProportion(value.proportion, 0)}</span>
+                    )}
                 </div>
             </Tooltip>
         </div>

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

@@ -1,5 +1,6 @@
 import { type Meta, type StoryObj } from '@storybook/preact';
 import { expect, userEvent, waitFor } from '@storybook/test';
+import { type Canvas } from '@storybook/types';
 
 import { MutationsOverTime, type MutationsOverTimeProps } from './mutations-over-time';
 import { LAPIS_URL } from '../../constants';
@@ -32,6 +33,7 @@ const meta: Meta<MutationsOverTimeProps> = {
         lapisDateField: { control: 'text' },
         displayMutations: { control: 'object' },
         initialMeanProportionInterval: { control: 'object' },
+        pageSizes: { control: 'object' },
     },
     parameters: {
         fetchMock: {},
@@ -75,42 +77,67 @@ export const Default: StoryObj<MutationsOverTimeProps> = {
         granularity: 'month',
         lapisDateField: 'date',
         initialMeanProportionInterval: { min: 0.05, max: 0.9 },
+        pageSizes: [10, 20, 30, 40, 50],
     },
     play: async ({ canvasElement }) => {
         await expectMutationAnnotation(canvasElement, 'C44T');
     },
 };
 
-// This test uses mock data: showMessagWhenTooManyMutations.ts (through mutationOverTimeWorker.mock.ts)
-export const ShowsMessageWhenTooManyMutations: StoryObj<MutationsOverTimeProps> = {
+export const ShowsNoDataWhenNoMutationsAreInFilter: StoryObj<MutationsOverTimeProps> = {
     ...Default,
     args: {
         ...Default.args,
-        lapisFilter: { dateFrom: '2023-01-01', dateTo: '2023-12-31' },
+        lapisFilter: { dateFrom: '1800-01-01', dateTo: '1800-01-02' },
+        height: '700px',
         granularity: 'year',
     },
     play: async ({ canvas }) => {
-        await waitFor(() => expect(canvas.getByText('Showing 100 of 137 mutations.', { exact: false })).toBeVisible(), {
+        await waitFor(() => expect(canvas.getByText('No data available.', { exact: false })).toBeVisible(), {
             timeout: 10000,
         });
     },
 };
 
-export const ShowsNoDataWhenNoMutationsAreInFilter: StoryObj<MutationsOverTimeProps> = {
+export const UsesPagination: StoryObj<MutationsOverTimeProps> = {
     ...Default,
-    args: {
-        ...Default.args,
-        lapisFilter: { dateFrom: '1800-01-01', dateTo: '1800-01-02' },
-        height: '700px',
-        granularity: 'year',
-    },
-    play: async ({ canvas }) => {
-        await waitFor(() => expect(canvas.getByText('No data available.', { exact: false })).toBeVisible(), {
-            timeout: 10000,
+    play: async ({ canvas, step }) => {
+        const mutationOnFirstPage = 'C44T';
+        const mutationOnSecondPage = 'T21653-';
+        await expectMutationOnPage(canvas, mutationOnFirstPage);
+
+        await step('Navigate to next page', async () => {
+            canvas.getByRole('button', { name: 'Next page' }).click();
+
+            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 expectMutationOnPage(canvas, mutationOnFirstPage);
+        });
+
+        await step('Change number of rows per page', async () => {
+            const pageSizeSelector = canvas.getByLabelText('Select number of rows per page');
+            await userEvent.selectOptions(pageSizeSelector, '20');
+
+            await expectMutationOnPage(canvas, mutationOnFirstPage);
+            await expectMutationOnPage(canvas, mutationOnSecondPage);
         });
     },
 };
 
+async function expectMutationOnPage(canvas: Canvas, mutation: string) {
+    await waitFor(async () => {
+        const mutationOnFirstPage = canvas.getAllByText(mutation)[0];
+        await expect(mutationOnFirstPage).toBeVisible();
+    });
+}
+
 export const ShowsNoDataMessageWhenThereAreNoDatesInFilter: StoryObj<MutationsOverTimeProps> = {
     ...Default,
     args: {
@@ -162,8 +189,11 @@ export const ShowsNoDataForStrictInitialProportionInterval: StoryObj<MutationsOv
         initialMeanProportionInterval: { min: 0.4, max: 0.41 },
     },
     play: async ({ canvas }) => {
-        await waitFor(() =>
-            expect(canvas.getByText('No data available for your filters.', { exact: false })).toBeVisible(),
+        await waitFor(
+            () => expect(canvas.getByText('No data available for your filters.', { exact: false })).toBeVisible(),
+            {
+                timeout: 10000,
+            },
         );
     },
 };

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

@@ -33,6 +33,7 @@ import { ProportionSelectorDropdown } from '../components/proportion-selector-dr
 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 { useWebWorker } from '../webWorkers/useWebWorker';
 
 const mutationsOverTimeViewSchema = z.literal(views.grid);
@@ -51,6 +52,7 @@ const mutationOverTimeSchema = z.object({
     }),
     width: z.string(),
     height: z.string().optional(),
+    pageSizes: pageSizesSchema,
 });
 export type MutationsOverTimeProps = z.infer<typeof mutationOverTimeSchema>;
 
@@ -166,6 +168,7 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
                             data={filteredData}
                             colorScale={colorScale}
                             sequenceType={originalComponentProps.sequenceType}
+                            pageSizes={originalComponentProps.pageSizes}
                         />
                     ),
                 };

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

@@ -0,0 +1,132 @@
+import type { Table } from '@tanstack/table-core';
+import z from 'zod';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type PaginationProps = { table: Table<any> };
+export const pageSizesSchema = z.union([z.array(z.number()), z.number()]);
+export type PageSizes = z.infer<typeof pageSizesSchema>;
+
+export function Pagination({
+    table,
+    pageSizes,
+}: PaginationProps & {
+    pageSizes: PageSizes;
+}) {
+    return (
+        <div className='flex items-center gap-4 justify-end flex-wrap'>
+            <PageSizeSelector table={table} pageSizes={pageSizes} />
+            <PageIndicator table={table} />
+            <GotoPageSelector table={table} />
+            <SelectPageButtons table={table} />
+        </div>
+    );
+}
+
+function PageIndicator({ table }: PaginationProps) {
+    if (table.getRowModel().rows.length <= 1) {
+        return null;
+    }
+
+    return (
+        <span className='flex items-center gap-1'>
+            <div>Page</div>
+            <strong>
+                {table.getState().pagination.pageIndex + 1} of {table.getPageCount().toLocaleString()}
+            </strong>
+        </span>
+    );
+}
+
+function PageSizeSelector({
+    table,
+    pageSizes,
+}: PaginationProps & {
+    pageSizes: PageSizes;
+}) {
+    if (typeof pageSizes === 'number' || pageSizes.length <= 1) {
+        return null;
+    }
+
+    return (
+        <label className='flex items-center gap-2'>
+            <div className={'text-nowrap'}>Rows per page:</div>
+            <select
+                className={'select'}
+                value={table.getState().pagination.pageSize}
+                onChange={(e) => {
+                    table.setPageSize(Number(e.currentTarget?.value));
+                }}
+                aria-label='Select number of rows per page'
+            >
+                {pageSizes.map((pageSize) => (
+                    <option key={pageSize} value={pageSize}>
+                        {pageSize}
+                    </option>
+                ))}
+            </select>
+        </label>
+    );
+}
+
+function GotoPageSelector({ table }: PaginationProps) {
+    if (table.getRowModel().rows.length === 0) {
+        return null;
+    }
+
+    return (
+        <label className='flex items-center'>
+            Go to page:
+            <input
+                type='number'
+                min='1'
+                max={table.getPageCount()}
+                defaultValue={table.getState().pagination.pageIndex + 1}
+                onChange={(e) => {
+                    const page = e.currentTarget.value ? Number(e.currentTarget.value) - 1 : 0;
+                    table.setPageIndex(page);
+                }}
+                className='input'
+                aria-label='Enter page number to go to'
+            />
+        </label>
+    );
+}
+
+function SelectPageButtons({ table }: PaginationProps) {
+    return (
+        <div className={'join'} role='group' aria-label='Pagination controls'>
+            <button
+                className='btn btn-outline join-item btn-sm'
+                onClick={() => table.firstPage()}
+                disabled={!table.getCanPreviousPage()}
+                aria-label='First page'
+            >
+                <div className='iconify mdi--chevron-left-first' />
+            </button>
+            <button
+                className='btn btn-outline join-item btn-sm'
+                onClick={() => table.previousPage()}
+                disabled={!table.getCanPreviousPage()}
+                aria-label='Previous page'
+            >
+                <div className='iconify mdi--chevron-left' />
+            </button>
+            <button
+                className='btn btn-outline join-item btn-sm'
+                onClick={() => table.nextPage()}
+                disabled={!table.getCanNextPage()}
+                aria-label='Next page'
+            >
+                <div className='iconify mdi--chevron-right' />
+            </button>
+            <button
+                className='btn btn-outline join-item btn-sm'
+                onClick={() => table.lastPage()}
+                disabled={!table.getCanNextPage()}
+                aria-label='Last page'
+            >
+                <div className='iconify mdi--chevron-right-last' />
+            </button>
+        </div>
+    );
+}

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

@@ -0,0 +1,43 @@
+import { createTable, type RowData, type TableOptions, type TableOptionsResolved } from '@tanstack/table-core';
+import { type ComponentType, h, type VNode } from 'preact';
+import { useState } from 'preact/hooks';
+
+export * from '@tanstack/table-core';
+
+// Adapted from https://github.com/TanStack/table/blob/55ea94863b6b6e6d17bd51ecda61c6a6a1262c88/packages/preact-table/src/FlexRender.tsx
+
+export type Renderable<TProps> = VNode<TProps> | ComponentType<TProps> | undefined | null | string | number | boolean;
+
+export function flexRender<TProps extends object>(Comp: Renderable<TProps>, props: TProps) {
+    return !Comp ? null : typeof Comp === 'function' ? <Comp {...props} /> : Comp;
+}
+
+export function usePreactTable<TData extends RowData>(options: TableOptions<TData>) {
+    const resolvedOptions: TableOptionsResolved<TData> = {
+        state: {},
+        onStateChange: () => {},
+        renderFallbackValue: null,
+        ...options,
+    };
+
+    const [tableRef] = useState(() => ({
+        current: createTable<TData>(resolvedOptions),
+    }));
+
+    const [state, setState] = useState(() => tableRef.current.initialState);
+
+    tableRef.current.setOptions((prev) => ({
+        ...prev,
+        ...options,
+        state: {
+            ...state,
+            ...options.state,
+        },
+        onStateChange: (updater) => {
+            setState(updater);
+            options.onStateChange?.(updater);
+        },
+    }));
+
+    return tableRef.current;
+}

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

@@ -18,6 +18,7 @@ const meta: Meta<WastewaterMutationsOverTimeProps> = {
             options: ['nucleotide', 'amino acid'],
             control: { type: 'radio' },
         },
+        pageSizes: { control: 'object' },
     },
     parameters: {
         fetchMock: {},
@@ -42,7 +43,7 @@ export const Default: StoryObj<WastewaterMutationsOverTimeProps> = {
         width: '100%',
         lapisFilter: {},
         sequenceType: 'nucleotide',
-        maxNumberOfGridRows: 100,
+        pageSizes: [10, 20, 30, 40, 50],
     },
     parameters: {
         fetchMock: {

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

@@ -16,6 +16,7 @@ import { ResizeContainer } from '../../components/resize-container';
 import Tabs from '../../components/tabs';
 import { type MutationOverTimeDataMap } from '../../mutationsOverTime/MutationOverTimeData';
 import MutationsOverTimeGrid from '../../mutationsOverTime/mutations-over-time-grid';
+import { pageSizesSchema } from '../../shared/tanstackTable/pagination';
 import { useQuery } from '../../useQuery';
 
 const wastewaterMutationOverTimeSchema = z.object({
@@ -23,7 +24,7 @@ const wastewaterMutationOverTimeSchema = z.object({
     sequenceType: sequenceTypeSchema,
     width: z.string(),
     height: z.string().optional(),
-    maxNumberOfGridRows: z.number(),
+    pageSizes: pageSizesSchema,
 });
 
 export type WastewaterMutationsOverTimeProps = z.infer<typeof wastewaterMutationOverTimeSchema>;
@@ -76,7 +77,6 @@ export const WastewaterMutationsOverTimeInner: FunctionComponent<WastewaterMutat
         <MutationsOverTimeTabs
             mutationOverTimeDataPerLocation={mutationOverTimeDataPerLocation}
             originalComponentProps={componentProps}
-            maxNumberOfGridRows={componentProps.maxNumberOfGridRows}
         />
     );
 };
@@ -89,13 +89,11 @@ type MutationOverTimeDataPerLocation = {
 type MutationOverTimeTabsProps = {
     mutationOverTimeDataPerLocation: MutationOverTimeDataPerLocation;
     originalComponentProps: WastewaterMutationsOverTimeProps;
-    maxNumberOfGridRows?: number;
 };
 
 const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
     mutationOverTimeDataPerLocation,
     originalComponentProps,
-    maxNumberOfGridRows,
 }) => {
     const [colorScale, setColorScale] = useState<ColorScale>({ min: 0, max: 1, color: 'indigo' });
 
@@ -105,7 +103,7 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
             <MutationsOverTimeGrid
                 data={data}
                 colorScale={colorScale}
-                maxNumberOfGridRows={maxNumberOfGridRows}
+                pageSizes={originalComponentProps.pageSizes}
                 sequenceType={originalComponentProps.sequenceType}
             />
         ),