@genspectrum/dashboard-components 0.4.4 → 0.5.0

package/src/preact/components/table.stories.tsx

@@ -1,4 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/preact';
+import { expect, userEvent, waitFor, within } from '@storybook/test';
 
 import { Table } from './table';
 
@@ -6,13 +7,51 @@ const meta: Meta = {
     title: 'Component/Table',
     component: Table,
     parameters: { fetchMock: {} },
+    argTypes: {
+        data: { control: 'object' },
+        columns: { control: 'object' },
+        pageSize: { control: 'object' },
+    },
 };
 
 export default meta;
 
 export const TableStory: StoryObj = {
     render: (args) => {
-        return <Table data={args.data} columns={args.columns} pagination={false} />;
+        return <Table data={args.data} columns={args.columns} pageSize={args.pageSize} />;
+    },
+    args: {
+        data: [
+            ['John Do', 'john@example.com', '123-456-7890'],
+            ['Jane Doe', 'jane@example.com', '098-765-4321'],
+        ],
+        columns: [{ name: 'Name' }, { name: 'Email', sort: true }, { name: 'Phone Number' }],
+        pageSize: 1,
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+
+        const firstRow = () => canvas.queryByText('John Do', { exact: true });
+        const secondRow = () => canvas.queryByText('Jane Doe', { exact: true });
+
+        await step('Expect first row to be visible and not second row', async () => {
+            await waitFor(() => expect(firstRow()).toBeVisible());
+            await expect(secondRow()).toBeNull();
+        });
+
+        await step('Expect second row to be visible and not first row after clicking next', async () => {
+            const nextButton = canvas.getByRole('button', { name: 'Next' });
+            await userEvent.click(nextButton);
+
+            await waitFor(() => expect(secondRow()).toBeVisible());
+            await expect(firstRow()).toBeNull();
+        });
+    },
+};
+
+export const TableStoryNoPagination: StoryObj = {
+    render: (args) => {
+        return <Table data={args.data} columns={args.columns} pageSize={args.pageSize} />;
     },
     args: {
         data: [
@@ -20,5 +59,16 @@ export const TableStory: StoryObj = {
             ['Jane Doe', 'jane@example.com', '098-765-4321'],
         ],
         columns: [{ name: 'Name' }, { name: 'Email', sort: true }, { name: 'Phone Number' }],
+        pageSize: false,
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        const firstRow = () => canvas.queryByText('John Do', { exact: true });
+        const secondRow = () => canvas.queryByText('Jane Doe', { exact: true });
+
+        await waitFor(() => expect(firstRow()).toBeVisible());
+        await expect(secondRow()).toBeVisible();
+        await waitFor(() => expect(canvas.queryByText('Next')).toBeNull());
     },
 };

package/src/preact/components/table.tsx

@@ -1,6 +1,5 @@
 import { Grid } from 'gridjs';
 import { type OneDArray, type TColumn, type TData } from 'gridjs/dist/src/types';
-import { type PaginationConfig } from 'gridjs/dist/src/view/plugin/pagination';
 import { type ComponentChild } from 'preact';
 import { useEffect, useRef } from 'preact/hooks';
 
@@ -26,10 +25,12 @@ export const tableStyle = {
 interface TableProps {
     data: TData;
     columns: OneDArray<TColumn | string | ComponentChild>;
-    pagination: PaginationConfig | boolean;
+    pageSize: number | boolean;
 }
 
-export const Table = ({ data, columns, pagination }: TableProps) => {
+export const Table = ({ data, columns, pageSize }: TableProps) => {
+    const pagination = typeof pageSize === 'number' ? { limit: pageSize } : pageSize;
+
     const wrapper = useRef(null);
 
     useEffect(() => {

package/src/preact/locationFilter/location-filter.stories.tsx

@@ -35,6 +35,7 @@ const meta: Meta<LocationFilterProps> = {
         width: '100%',
         fields: ['region', 'country', 'division', 'location'],
         initialValue: 'Europe',
+        placeholderText: 'Enter a location',
     },
     argTypes: {
         fields: {
@@ -52,6 +53,11 @@ const meta: Meta<LocationFilterProps> = {
                 type: 'text',
             },
         },
+        placeholderText: {
+            control: {
+                type: 'text',
+            },
+        },
     },
     decorators: [withActions],
 };
@@ -61,7 +67,12 @@ export default meta;
 export const Primary: StoryObj<LocationFilterProps> = {
     render: (args) => (
         <LapisUrlContext.Provider value={LAPIS_URL}>
-            <LocationFilter fields={args.fields} initialValue={args.initialValue} width={args.width} />
+            <LocationFilter
+                fields={args.fields}
+                initialValue={args.initialValue}
+                width={args.width}
+                placeholderText={args.placeholderText}
+            />
         </LapisUrlContext.Provider>
     ),
 };

package/src/preact/locationFilter/location-filter.tsx

@@ -12,6 +12,7 @@ import { useQuery } from '../useQuery';
 
 export interface LocationFilterInnerProps {
     initialValue?: string;
+    placeholderText?: string;
     fields: string[];
 }
 
@@ -19,19 +20,24 @@ export interface LocationFilterProps extends LocationFilterInnerProps {
     width: string;
 }
 
-export const LocationFilter: FunctionComponent<LocationFilterProps> = ({ width, initialValue, fields }) => {
+export const LocationFilter: FunctionComponent<LocationFilterProps> = ({
+    width,
+    initialValue,
+    fields,
+    placeholderText,
+}) => {
     const size = { width, height: '3rem' };
 
     return (
         <ErrorBoundary size={size}>
             <ResizeContainer size={size}>
-                <LocationFilterInner initialValue={initialValue} fields={fields} />
+                <LocationFilterInner initialValue={initialValue} fields={fields} placeholderText={placeholderText} />
             </ResizeContainer>
         </ErrorBoundary>
     );
 };
 
-export const LocationFilterInner = ({ initialValue, fields }: LocationFilterInnerProps) => {
+export const LocationFilterInner = ({ initialValue, fields, placeholderText }: LocationFilterInnerProps) => {
     const lapis = useContext(LapisUrlContext);
 
     const [value, setValue] = useState(initialValue ?? '');
@@ -77,6 +83,7 @@ export const LocationFilterInner = ({ initialValue, fields }: LocationFilterInne
                 value={value}
                 onInput={onInput}
                 list='countries'
+                placeholder={placeholderText}
             />
             <datalist id='countries'>
                 {data?.map((v) => {

package/src/preact/mutationComparison/mutation-comparison-table.tsx

@@ -12,9 +12,14 @@ import { formatProportion } from '../shared/table/formatProportion';
 export interface MutationsTableProps {
     data: Dataset<MutationData>;
     proportionInterval: ProportionInterval;
+    pageSize: boolean | number;
 }
 
-export const MutationComparisonTable: FunctionComponent<MutationsTableProps> = ({ data, proportionInterval }) => {
+export const MutationComparisonTable: FunctionComponent<MutationsTableProps> = ({
+    data,
+    proportionInterval,
+    pageSize,
+}) => {
     const headers = [
         {
             name: 'Mutation',
@@ -37,5 +42,5 @@ export const MutationComparisonTable: FunctionComponent<MutationsTableProps> = (
 
     const tableData = getMutationComparisonTableData(data, proportionInterval).map((row) => Object.values(row));
 
-    return <Table data={tableData} columns={headers} pagination={true} />;
+    return <Table data={tableData} columns={headers} pageSize={pageSize} />;
 };

package/src/preact/mutationComparison/mutation-comparison-venn.tsx

@@ -111,7 +111,7 @@ export const MutationComparisonVenn: FunctionComponent<MutationComparisonVennPro
     );
 
     if (data.content.length > 5) {
-        return <div>Too many variants to display. Maximum are five. </div>;
+        return <div>Too many datasets to display. Maximum are five. </div>;
     }
 
     return (

package/src/preact/mutationComparison/mutation-comparison.stories.tsx

@@ -1,24 +1,24 @@
 import { type Meta, type StoryObj } from '@storybook/preact';
 import { expect, userEvent, waitFor, within } from '@storybook/test';
 
-import nucleotideMutationsOtherVariant from './__mockData__/nucleotideMutationsOtherVariant.json';
-import nucleotideMutationsSomeVariant from './__mockData__/nucleotideMutationsSomeVariant.json';
+import nucleotideMutationsOtherDataset from './__mockData__/nucleotideMutationsOtherDataset.json';
+import nucleotideMutationsSomeDataset from './__mockData__/nucleotideMutationsSomeDataset.json';
 import { MutationComparison, type MutationComparisonProps } from './mutation-comparison';
 import { LAPIS_URL, NUCLEOTIDE_MUTATIONS_ENDPOINT } from '../../constants';
 import referenceGenome from '../../lapisApi/__mockData__/referenceGenome.json';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
 
-const dateToSomeVariant = '2022-01-01';
+const dateToSomeDataset = '2022-01-01';
 
-const dateFromOtherVariant = '2021-01-01';
-const dateToOtherVariant = '2022-01-02';
+const dateFromOtherDataset = '2021-01-01';
+const dateToOtherDataset = '2022-01-02';
 
 const meta: Meta<MutationComparisonProps> = {
     title: 'Visualization/Mutation comparison',
     component: MutationComparison,
     argTypes: {
-        variants: [{ control: 'object' }],
+        lapisFilters: [{ control: 'object' }],
         sequenceType: {
             options: ['nucleotide', 'amino acid'],
             control: { type: 'radio' },
@@ -30,6 +30,7 @@ const meta: Meta<MutationComparisonProps> = {
         width: { control: 'text' },
         height: { control: 'text' },
         headline: { control: 'text' },
+        pageSize: { control: 'object' },
     },
     parameters: {
         fetchMock: {
@@ -41,13 +42,13 @@ const meta: Meta<MutationComparisonProps> = {
                         body: {
                             country: 'Switzerland',
                             pangoLineage: 'B.1.1.7',
-                            dateTo: dateToSomeVariant,
+                            dateTo: dateToSomeDataset,
                             minProportion: 0,
                         },
                     },
                     response: {
                         status: 200,
-                        body: nucleotideMutationsSomeVariant,
+                        body: nucleotideMutationsSomeDataset,
                     },
                 },
                 {
@@ -57,14 +58,14 @@ const meta: Meta<MutationComparisonProps> = {
                         body: {
                             country: 'Switzerland',
                             pangoLineage: 'B.1.1.7',
-                            dateFrom: dateFromOtherVariant,
-                            dateTo: dateToOtherVariant,
+                            dateFrom: dateFromOtherDataset,
+                            dateTo: dateToOtherDataset,
                             minProportion: 0,
                         },
                     },
                     response: {
                         status: 200,
-                        body: nucleotideMutationsOtherVariant,
+                        body: nucleotideMutationsOtherDataset,
                     },
                 },
             ],
@@ -79,12 +80,13 @@ const Template: StoryObj<MutationComparisonProps> = {
         <LapisUrlContext.Provider value={LAPIS_URL}>
             <ReferenceGenomeContext.Provider value={referenceGenome}>
                 <MutationComparison
-                    variants={args.variants}
+                    lapisFilters={args.lapisFilters}
                     sequenceType={args.sequenceType}
                     views={args.views}
                     width={args.width}
                     height={args.height}
                     headline={args.headline}
+                    pageSize={args.pageSize}
                 />
             </ReferenceGenomeContext.Provider>
         </LapisUrlContext.Provider>
@@ -94,18 +96,18 @@ const Template: StoryObj<MutationComparisonProps> = {
 export const TwoVariants: StoryObj<MutationComparisonProps> = {
     ...Template,
     args: {
-        variants: [
+        lapisFilters: [
             {
-                displayName: 'Some variant',
-                lapisFilter: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo: dateToSomeVariant },
+                displayName: 'Some dataset',
+                lapisFilter: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo: dateToSomeDataset },
             },
             {
-                displayName: 'Other variant',
+                displayName: 'Other dataset',
                 lapisFilter: {
                     country: 'Switzerland',
                     pangoLineage: 'B.1.1.7',
-                    dateFrom: dateFromOtherVariant,
-                    dateTo: dateToOtherVariant,
+                    dateFrom: dateFromOtherDataset,
+                    dateTo: dateToOtherDataset,
                 },
             },
         ],
@@ -114,6 +116,7 @@ export const TwoVariants: StoryObj<MutationComparisonProps> = {
         width: '100%',
         height: '700px',
         headline: 'Mutation comparison',
+        pageSize: 10,
     },
 };
 

package/src/preact/mutationComparison/mutation-comparison.tsx

@@ -31,18 +31,20 @@ export interface MutationComparisonProps extends MutationComparisonInnerProps {
 }
 
 export interface MutationComparisonInnerProps {
-    variants: NamedLapisFilter[];
+    lapisFilters: NamedLapisFilter[];
     sequenceType: SequenceType;
     views: View[];
+    pageSize: boolean | number;
 }
 
 export const MutationComparison: FunctionComponent<MutationComparisonProps> = ({
-    variants,
+    lapisFilters,
     sequenceType,
     views,
     width,
     height,
     headline = 'Mutation comparison',
+    pageSize,
 }) => {
     const size = { height, width };
 
@@ -50,7 +52,12 @@ export const MutationComparison: FunctionComponent<MutationComparisonProps> = ({
         <ErrorBoundary size={size} headline={headline}>
             <ResizeContainer size={size}>
                 <Headline heading={headline}>
-                    <MutationComparisonInner variants={variants} sequenceType={sequenceType} views={views} />
+                    <MutationComparisonInner
+                        lapisFilters={lapisFilters}
+                        sequenceType={sequenceType}
+                        views={views}
+                        pageSize={pageSize}
+                    />
                 </Headline>
             </ResizeContainer>
         </ErrorBoundary>
@@ -58,15 +65,16 @@ export const MutationComparison: FunctionComponent<MutationComparisonProps> = ({
 };
 
 export const MutationComparisonInner: FunctionComponent<MutationComparisonInnerProps> = ({
-    variants,
+    lapisFilters,
     sequenceType,
     views,
+    pageSize,
 }) => {
     const lapis = useContext(LapisUrlContext);
 
     const { data, error, isLoading } = useQuery(async () => {
-        return queryMutationData(variants, sequenceType, lapis);
-    }, [variants, sequenceType, lapis]);
+        return queryMutationData(lapisFilters, sequenceType, lapis);
+    }, [lapisFilters, sequenceType, lapis]);
 
     if (isLoading) {
         return <LoadingDisplay />;
@@ -80,16 +88,29 @@ export const MutationComparisonInner: FunctionComponent<MutationComparisonInnerP
         return <NoDataDisplay />;
     }
 
-    return <MutationComparisonTabs data={data.mutationData} sequenceType={sequenceType} views={views} />;
+    return (
+        <MutationComparisonTabs
+            data={data.mutationData}
+            sequenceType={sequenceType}
+            views={views}
+            pageSize={pageSize}
+        />
+    );
 };
 
 type MutationComparisonTabsProps = {
     data: MutationData[];
     views: View[];
     sequenceType: SequenceType;
+    pageSize: boolean | number;
 };
 
-const MutationComparisonTabs: FunctionComponent<MutationComparisonTabsProps> = ({ data, views, sequenceType }) => {
+const MutationComparisonTabs: FunctionComponent<MutationComparisonTabsProps> = ({
+    data,
+    views,
+    sequenceType,
+    pageSize,
+}) => {
     const [proportionInterval, setProportionInterval] = useState({ min: 0.5, max: 1 });
     const [displayedMutationTypes, setDisplayedMutationTypes] = useState<DisplayedMutationType[]>([
         { label: 'Substitutions', checked: true, type: 'substitution' },
@@ -111,6 +132,7 @@ const MutationComparisonTabs: FunctionComponent<MutationComparisonTabsProps> = (
                         <MutationComparisonTable
                             data={{ content: filteredData }}
                             proportionInterval={proportionInterval}
+                            pageSize={pageSize}
                         />
                     ),
                 };

package/src/preact/mutationComparison/queryMutationData.ts

@@ -9,15 +9,15 @@ export type MutationData = {
 };
 
 export async function queryMutationData(
-    variants: NamedLapisFilter[],
+    lapisFilters: NamedLapisFilter[],
     sequenceType: 'nucleotide' | 'amino acid',
     lapis: string,
 ) {
     const mutationData = await Promise.all(
-        variants.map(async (variant) => {
+        lapisFilters.map(async (filter) => {
             return {
-                displayName: variant.displayName,
-                data: (await querySubstitutionsOrDeletions(variant.lapisFilter, sequenceType, lapis)).content,
+                displayName: filter.displayName,
+                data: (await querySubstitutionsOrDeletions(filter.lapisFilter, sequenceType, lapis)).content,
             };
         }),
     );

package/src/preact/mutations/mutations-grid.tsx

@@ -13,6 +13,7 @@ interface MutationsGridProps {
     data: SubstitutionOrDeletionEntry[];
     sequenceType: SequenceType;
     proportionInterval: ProportionInterval;
+    pageSize: boolean | number;
 }
 
 export type BaseCell = {
@@ -20,7 +21,12 @@ export type BaseCell = {
     isReference: boolean;
 };
 
-export const MutationsGrid: FunctionComponent<MutationsGridProps> = ({ data, sequenceType, proportionInterval }) => {
+export const MutationsGrid: FunctionComponent<MutationsGridProps> = ({
+    data,
+    sequenceType,
+    proportionInterval,
+    pageSize,
+}) => {
     const getHeaders = () => {
         return [
             {
@@ -80,5 +86,5 @@ export const MutationsGrid: FunctionComponent<MutationsGridProps> = ({ data, seq
 
     const tableData = getMutationsGridData(data, sequenceType, proportionInterval).map((row) => Object.values(row));
 
-    return <Table data={tableData} columns={getHeaders()} pagination={true} />;
+    return <Table data={tableData} columns={getHeaders()} pageSize={pageSize} />;
 };

package/src/preact/mutations/mutations-insertions-table.tsx

@@ -8,9 +8,10 @@ import { sortInsertions } from '../shared/sort/sortInsertions';
 
 export interface InsertionsTableProps {
     data: InsertionEntry[];
+    pageSize: boolean | number;
 }
 
-export const InsertionsTable: FunctionComponent<InsertionsTableProps> = ({ data }) => {
+export const InsertionsTable: FunctionComponent<InsertionsTableProps> = ({ data, pageSize }) => {
     const getHeaders = () => {
         return [
             {
@@ -31,5 +32,5 @@ export const InsertionsTable: FunctionComponent<InsertionsTableProps> = ({ data
 
     const tableData = getInsertionsTableData(data).map((row) => Object.values(row));
 
-    return <Table data={tableData} columns={getHeaders()} pagination={true} />;
+    return <Table data={tableData} columns={getHeaders()} pageSize={pageSize} />;
 };

package/src/preact/mutations/mutations-table.tsx

@@ -11,9 +11,10 @@ import { formatProportion } from '../shared/table/formatProportion';
 export interface MutationsTableProps {
     data: SubstitutionOrDeletionEntry[];
     proportionInterval: ProportionInterval;
+    pageSize: boolean | number;
 }
 
-const MutationsTable: FunctionComponent<MutationsTableProps> = ({ data, proportionInterval }) => {
+const MutationsTable: FunctionComponent<MutationsTableProps> = ({ data, proportionInterval, pageSize }) => {
     const getHeaders = () => {
         return [
             {
@@ -43,7 +44,7 @@ const MutationsTable: FunctionComponent<MutationsTableProps> = ({ data, proporti
 
     const tableData = getMutationsTableData(data, proportionInterval).map((row) => Object.values(row));
 
-    return <Table data={tableData} columns={getHeaders()} pagination={true} />;
+    return <Table data={tableData} columns={getHeaders()} pageSize={pageSize} />;
 };
 
 export default MutationsTable;

package/src/preact/mutations/mutations.stories.tsx

@@ -13,7 +13,7 @@ const meta: Meta<MutationsProps> = {
     title: 'Visualization/Mutations',
     component: Mutations,
     argTypes: {
-        variant: { control: 'object' },
+        lapisFilter: { control: 'object' },
         sequenceType: {
             options: ['nucleotide', 'amino acid'],
             control: { type: 'radio' },
@@ -25,6 +25,7 @@ const meta: Meta<MutationsProps> = {
         width: { control: 'text' },
         height: { control: 'text' },
         headline: { control: 'text' },
+        pageSize: { control: 'object' },
     },
 };
 
@@ -35,12 +36,13 @@ const Template = {
         <LapisUrlContext.Provider value={LAPIS_URL}>
             <ReferenceGenomeContext.Provider value={referenceGenome}>
                 <Mutations
-                    variant={args.variant}
+                    lapisFilter={args.lapisFilter}
                     sequenceType={args.sequenceType}
                     views={args.views}
                     width={args.width}
                     height={args.height}
                     headline={args.headline}
+                    pageSize={args.pageSize}
                 />
             </ReferenceGenomeContext.Provider>
         </LapisUrlContext.Provider>
@@ -50,12 +52,13 @@ const Template = {
 export const Default: StoryObj<MutationsProps> = {
     ...Template,
     args: {
-        variant: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo: '2022-01-01' },
+        lapisFilter: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo: '2022-01-01' },
         sequenceType: 'nucleotide',
         views: ['grid', 'table', 'insertions'],
         width: '100%',
         height: '700px',
         headline: 'Mutations',
+        pageSize: 10,
     },
     parameters: {
         fetchMock: {

package/src/preact/mutations/mutations.tsx

@@ -32,9 +32,10 @@ import { useQuery } from '../useQuery';
 export type View = 'table' | 'grid' | 'insertions';
 
 export interface MutationsInnerProps {
-    variant: LapisFilter;
+    lapisFilter: LapisFilter;
     sequenceType: SequenceType;
     views: View[];
+    pageSize: boolean | number;
 }
 
 export interface MutationsProps extends MutationsInnerProps {
@@ -44,12 +45,13 @@ export interface MutationsProps extends MutationsInnerProps {
 }
 
 export const Mutations: FunctionComponent<MutationsProps> = ({
-    variant,
+    lapisFilter,
     sequenceType,
     views,
     width,
     height,
     headline = 'Mutations',
+    pageSize,
 }) => {
     const size = { height, width };
 
@@ -57,18 +59,28 @@ export const Mutations: FunctionComponent<MutationsProps> = ({
         <ErrorBoundary size={size} headline={headline}>
             <ResizeContainer size={size}>
                 <Headline heading={headline}>
-                    <MutationsInner variant={variant} sequenceType={sequenceType} views={views} />
+                    <MutationsInner
+                        lapisFilter={lapisFilter}
+                        sequenceType={sequenceType}
+                        views={views}
+                        pageSize={pageSize}
+                    />
                 </Headline>
             </ResizeContainer>
         </ErrorBoundary>
     );
 };
 
-export const MutationsInner: FunctionComponent<MutationsInnerProps> = ({ variant, sequenceType, views }) => {
+export const MutationsInner: FunctionComponent<MutationsInnerProps> = ({
+    lapisFilter,
+    sequenceType,
+    views,
+    pageSize,
+}) => {
     const lapis = useContext(LapisUrlContext);
     const { data, error, isLoading } = useQuery(async () => {
-        return queryMutationsData(variant, sequenceType, lapis);
-    }, [variant, sequenceType, lapis]);
+        return queryMutationsData(lapisFilter, sequenceType, lapis);
+    }, [lapisFilter, sequenceType, lapis]);
 
     if (isLoading) {
         return <LoadingDisplay />;
@@ -82,16 +94,17 @@ export const MutationsInner: FunctionComponent<MutationsInnerProps> = ({ variant
         return <NoDataDisplay />;
     }
 
-    return <MutationsTabs mutationsData={data} sequenceType={sequenceType} views={views} />;
+    return <MutationsTabs mutationsData={data} sequenceType={sequenceType} views={views} pageSize={pageSize} />;
 };
 
 type MutationTabsProps = {
     mutationsData: { insertions: InsertionEntry[]; substitutionsOrDeletions: SubstitutionOrDeletionEntry[] };
     sequenceType: SequenceType;
     views: View[];
+    pageSize: boolean | number;
 };
 
-const MutationsTabs: FunctionComponent<MutationTabsProps> = ({ mutationsData, sequenceType, views }) => {
+const MutationsTabs: FunctionComponent<MutationTabsProps> = ({ mutationsData, sequenceType, views, pageSize }) => {
     const [proportionInterval, setProportionInterval] = useState({ min: 0.05, max: 1 });
 
     const [displayedSegments, setDisplayedSegments] = useDisplayedSegments(sequenceType);
@@ -107,7 +120,13 @@ const MutationsTabs: FunctionComponent<MutationTabsProps> = ({ mutationsData, se
             case 'table':
                 return {
                     title: 'Table',
-                    content: <MutationsTable data={filteredData.tableData} proportionInterval={proportionInterval} />,
+                    content: (
+                        <MutationsTable
+                            data={filteredData.tableData}
+                            proportionInterval={proportionInterval}
+                            pageSize={pageSize}
+                        />
+                    ),
                 };
             case 'grid':
                 return {
@@ -117,13 +136,14 @@ const MutationsTabs: FunctionComponent<MutationTabsProps> = ({ mutationsData, se
                             data={filteredData.gridData}
                             sequenceType={sequenceType}
                             proportionInterval={proportionInterval}
+                            pageSize={pageSize}
                         />
                     ),
                 };
             case 'insertions':
                 return {
                     title: 'Insertions',
-                    content: <InsertionsTable data={filteredData.insertions} />,
+                    content: <InsertionsTable data={filteredData.insertions} pageSize={pageSize} />,
                 };
         }
     };