@genspectrum/dashboard-components 0.18.5 → 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
+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>;
 
@@ -50,6 +54,8 @@ function PageSizeSelector({
 }: PaginationProps & {
     pageSizes: PageSizes;
 }) {
+    const { pageSize, setPageSize } = usePageSizeContext();
+
     if (typeof pageSizes === 'number' || pageSizes.length <= 1) {
         return null;
     }
@@ -59,9 +65,16 @@ function PageSizeSelector({
             <div className={'text-nowrap text-sm'}>Rows per page:</div>
             <select
                 className={`select select-ghost select-sm ${heightForSmallerLines}`}
-                value={table.getState().pagination.pageSize}
+                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'
             >
@@ -90,7 +103,7 @@ 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 input-ghost input-sm ${heightForSmallerLines}`}
                 aria-label='Enter page number to go to'

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: {

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 = {

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"