@genspectrum/dashboard-components 0.18.4 → 0.18.6

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

@@ -0,0 +1,30 @@
+import { createContext, type FunctionComponent } from 'preact';
+import { type Dispatch, type StateUpdater, useContext, useState } from 'preact/hooks';
+
+import type { PageSizes } from './pagination';
+
+type PageSizeContext = {
+    pageSize: number;
+    setPageSize: Dispatch<StateUpdater<number>>;
+};
+
+const pageSizeContext = createContext<PageSizeContext>({
+    pageSize: -1,
+    setPageSize: () => {
+        throw new Error('pageSizeContext not initialized');
+    },
+});
+
+export function usePageSizeContext() {
+    return useContext(pageSizeContext);
+}
+
+export type PageSizeContextProviderProps = {
+    pageSizes: PageSizes;
+};
+
+export const PageSizeContextProvider: FunctionComponent<PageSizeContextProviderProps> = ({ children, pageSizes }) => {
+    const [pageSize, setPageSize] = useState(typeof pageSizes === 'number' ? pageSizes : (pageSizes.at(0) ?? 10));
+
+    return <pageSizeContext.Provider value={{ pageSize, setPageSize }}>{children}</pageSizeContext.Provider>;
+};

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

@@ -1,8 +1,12 @@
 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> };
+import { usePageSizeContext } from './pagination-context';
+
+type PaginationProps = {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    table: Table<any>;
+};
 export const pageSizesSchema = z.union([z.array(z.number()), z.number()]);
 export type PageSizes = z.infer<typeof pageSizesSchema>;
 
@@ -13,11 +17,15 @@ export function Pagination({
     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 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} />
+                <div className='@xl:block hidden'>
+                    <GotoPageSelector table={table} />
+                </div>
+                <SelectPageButtons table={table} />
+            </div>
         </div>
     );
 }
@@ -27,34 +35,46 @@ function PageIndicator({ table }: PaginationProps) {
         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;
+
     return (
-        <span className='flex items-center gap-1'>
-            <div>Page</div>
-            <strong>
-                {table.getState().pagination.pageIndex + 1} of {table.getPageCount().toLocaleString()}
-            </strong>
+        <span className='text-sm'>
+            {minRow} - {maxRow} of {numRows}
         </span>
     );
 }
 
+const heightForSmallerLines = 'h-[calc(var(--size)*0.7)]';
+
 function PageSizeSelector({
     table,
     pageSizes,
 }: PaginationProps & {
     pageSizes: PageSizes;
 }) {
+    const { pageSize, setPageSize } = usePageSizeContext();
+
     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>
+        <label className='flex items-center'>
+            <div className={'text-nowrap text-sm'}>Rows per page:</div>
             <select
-                className={'select'}
-                value={table.getState().pagination.pageSize}
+                className={`select select-ghost select-sm ${heightForSmallerLines}`}
+                value={pageSize}
                 onChange={(e) => {
-                    table.setPageSize(Number(e.currentTarget?.value));
+                    const pageSize = Number(e.currentTarget?.value);
+                    if (Number.isNaN(pageSize)) {
+                        throw new Error(
+                            `Invalid page size selected: The value ${e.currentTarget?.value} could not be parsed as a number.`,
+                        );
+                    }
+                    setPageSize(pageSize);
+                    table.setPageSize(pageSize);
                 }}
                 aria-label='Select number of rows per page'
             >
@@ -74,8 +94,8 @@ function GotoPageSelector({ table }: PaginationProps) {
     }
 
     return (
-        <label className='flex items-center'>
-            Go to page:
+        <label className='items-center flex'>
+            <span className='text-nowrap text-sm'>Go to page:</span>
             <input
                 type='number'
                 min='1'
@@ -83,9 +103,9 @@ function GotoPageSelector({ table }: PaginationProps) {
                 defaultValue={table.getState().pagination.pageIndex + 1}
                 onChange={(e) => {
                     const page = e.currentTarget.value ? Number(e.currentTarget.value) - 1 : 0;
-                    table.setPageIndex(page);
+                    table.setPageIndex(Math.min(page, table.getPageCount() - 1));
                 }}
-                className='input'
+                className={`input input-ghost input-sm ${heightForSmallerLines}`}
                 aria-label='Enter page number to go to'
             />
         </label>

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

@@ -1,17 +1,23 @@
 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';
+import { useEffect, useState } from 'preact/hooks';
 
-export * from '@tanstack/table-core';
+import { usePageSizeContext } from './pagination-context';
 
-// Adapted from https://github.com/TanStack/table/blob/55ea94863b6b6e6d17bd51ecda61c6a6a1262c88/packages/preact-table/src/FlexRender.tsx
+export * from '@tanstack/table-core';
 
 export type Renderable<TProps> = VNode<TProps> | ComponentType<TProps> | undefined | null | string | number | boolean;
 
+/*
+ * Adapted from https://github.com/TanStack/table/blob/55ea94863b6b6e6d17bd51ecda61c6a6a1262c88/packages/preact-table/src/FlexRender.tsx
+ */
 export function flexRender<TProps extends object>(Comp: Renderable<TProps>, props: TProps) {
     return !Comp ? null : typeof Comp === 'function' ? <Comp {...props} /> : Comp;
 }
 
+/*
+ * Taken from https://github.com/TanStack/table/blob/f7bf6f1adfa4f8b28b9968b29745f2452d4be9d8/packages/react-table/src/index.tsx
+ */
 export function usePreactTable<TData extends RowData>(options: TableOptions<TData>) {
     const resolvedOptions: TableOptionsResolved<TData> = {
         state: {},
@@ -39,5 +45,13 @@ export function usePreactTable<TData extends RowData>(options: TableOptions<TDat
         },
     }));
 
+    const { pageSize } = usePageSizeContext();
+    useEffect(
+        () => {
+            tableRef.current.setPageSize(pageSize);
+        },
+        [pageSize], // 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.stories.tsx

@@ -1,5 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/preact';
-import { expect } from '@storybook/test';
+import { expect, userEvent } from '@storybook/test';
 
 import { WastewaterMutationsOverTime, type WastewaterMutationsOverTimeProps } from './wastewater-mutations-over-time';
 import { WISE_DETAILS_ENDPOINT, WISE_LAPIS_URL } from '../../../constants';
@@ -67,6 +67,24 @@ export const Default: StoryObj<WastewaterMutationsOverTimeProps> = {
     },
 };
 
+export const ChangingRowsPerPageChangesItForEveryTag: StoryObj<WastewaterMutationsOverTimeProps> = {
+    ...Default,
+    play: async ({ canvas, step }) => {
+        await step('Wait for component to render', async () => {
+            await canvas.findByText('Lugano');
+        });
+
+        const getRowsPerPageSelectors = async () => await canvas.findAllByLabelText('Rows per page', { exact: false });
+
+        await step('change rows per page', async () => {
+            await expect((await getRowsPerPageSelectors())[0]).toHaveValue('10');
+            await expect((await getRowsPerPageSelectors())[1]).toHaveValue('10');
+            await userEvent.selectOptions((await getRowsPerPageSelectors())[0], '20');
+            await expect((await getRowsPerPageSelectors())[1]).toHaveValue('20');
+        });
+    },
+};
+
 export const AminoAcids: StoryObj<WastewaterMutationsOverTimeProps> = {
     ...Default,
     args: {
@@ -75,11 +93,11 @@ export const AminoAcids: StoryObj<WastewaterMutationsOverTimeProps> = {
     },
     play: async ({ canvas, step }) => {
         await step('Wait for component to render', async () => {
-            await canvas.findByText('All segments');
+            await canvas.findByText('All genes');
         });
 
-        await step("Click 'All segments' button", async () => {
-            canvas.getByRole('button', { name: 'All segments' }).click();
+        await step("Click 'All genes' button", async () => {
+            canvas.getByRole('button', { name: 'All genes' }).click();
             await expect(canvas.getByText('Select none')).toBeInTheDocument();
             canvas.getByRole('button', { name: 'Select none' }).click();
             await canvas.findAllByText('No data available for your filters.');

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

@@ -19,6 +19,7 @@ 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 { PageSizeContextProvider } from '../../shared/tanstackTable/pagination-context';
 import { useQuery } from '../../useQuery';
 
 const wastewaterMutationOverTimeSchema = z.object({
@@ -161,7 +162,11 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
         />
     );
 
-    return <Tabs tabs={tabs} toolbar={toolbar} />;
+    return (
+        <PageSizeContextProvider pageSizes={originalComponentProps.pageSizes}>
+            <Tabs tabs={tabs} toolbar={toolbar} />
+        </PageSizeContextProvider>
+    );
 };
 
 type ToolbarProps = {
@@ -183,7 +188,11 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
     return (
         <>
             <ColorScaleSelectorDropdown colorScale={colorScale} setColorScale={setColorScale} />
-            <SegmentSelector displayedSegments={displayedSegments} setDisplayedSegments={setDisplayedSegments} />
+            <SegmentSelector
+                displayedSegments={displayedSegments}
+                setDisplayedSegments={setDisplayedSegments}
+                sequenceType={originalComponentProps.sequenceType}
+            />
             <WastewaterMutationsOverTimeInfo originalComponentProps={originalComponentProps} />
             <Fullscreen />
         </>

package/src/web-components/input/gs-mutation-filter.stories.ts

@@ -107,7 +107,7 @@ export const MultiSegmentedReferenceGenomes: StoryObj<MutationFilterProps> = {
     ...Template,
     args: {
         ...Template.args,
-        initialValue: ['seg1:123T', 'gene2:56', 'ins_seg2:78:AAA'],
+        initialValue: ['seg1:3T', 'gene2:4', 'ins_seg2:4:AAA'],
     },
     parameters: {
         fetchMock: {
@@ -163,9 +163,9 @@ export const MultiSegmentedReferenceGenomes: StoryObj<MutationFilterProps> = {
         });
 
         await waitFor(async () => {
-            await expect(canvas.getByText('seg1:123T')).toBeVisible();
-            await expect(canvas.getByText('gene2:56')).toBeVisible();
-            await expect(canvas.getByText('ins_seg2:78:AAA')).toBeVisible();
+            await expect(canvas.getByText('seg1:3T')).toBeVisible();
+            await expect(canvas.getByText('gene2:4')).toBeVisible();
+            await expect(canvas.getByText('ins_seg2:4:AAA')).toBeVisible();
         });
     },
 };

package/src/web-components/visualization/gs-prevalence-over-time.stories.ts

@@ -16,7 +16,7 @@ import { withinShadowRoot } from '../withinShadowRoot.story';
 
 const codeExample = String.raw`
 <gs-prevalence-over-time
-    numeratorFilter='[{ "displayName": "EG", "lapisFilter": { "country": "USA", "pangoLineage": "EG*" }}, { "displayName": "JN.1", "lapisFilter": { "country": "USA", "pangoLineage": "JN.1*" }}]'
+    numeratorFilters='[{ "displayName": "EG", "lapisFilter": { "country": "USA", "pangoLineage": "EG*" }}, { "displayName": "JN.1", "lapisFilter": { "country": "USA", "pangoLineage": "JN.1*" }}]'
     denominatorFilter='{ "country": "USA"}'
     granularity="month"
     smoothingWindow="0"