@genspectrum/dashboard-components 0.4.3 → 0.4.5

package/src/preact/mutations/mutations.tsx

@@ -35,6 +35,7 @@ export interface MutationsInnerProps {
     variant: LapisFilter;
     sequenceType: SequenceType;
     views: View[];
+    pageSize: boolean | number;
 }
 
 export interface MutationsProps extends MutationsInnerProps {
@@ -50,6 +51,7 @@ export const Mutations: FunctionComponent<MutationsProps> = ({
     width,
     height,
     headline = 'Mutations',
+    pageSize,
 }) => {
     const size = { height, width };
 
@@ -57,14 +59,14 @@ export const Mutations: FunctionComponent<MutationsProps> = ({
         <ErrorBoundary size={size} headline={headline}>
             <ResizeContainer size={size}>
                 <Headline heading={headline}>
-                    <MutationsInner variant={variant} sequenceType={sequenceType} views={views} />
+                    <MutationsInner variant={variant} sequenceType={sequenceType} views={views} pageSize={pageSize} />
                 </Headline>
             </ResizeContainer>
         </ErrorBoundary>
     );
 };
 
-export const MutationsInner: FunctionComponent<MutationsInnerProps> = ({ variant, sequenceType, views }) => {
+export const MutationsInner: FunctionComponent<MutationsInnerProps> = ({ variant, sequenceType, views, pageSize }) => {
     const lapis = useContext(LapisUrlContext);
     const { data, error, isLoading } = useQuery(async () => {
         return queryMutationsData(variant, sequenceType, lapis);
@@ -82,16 +84,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 +110,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 +126,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} />,
                 };
         }
     };

package/src/preact/prevalenceOverTime/prevalence-over-time-table.tsx

@@ -7,9 +7,10 @@ import { formatProportion } from '../shared/table/formatProportion';
 interface PrevalenceOverTimeTableProps {
     data: PrevalenceOverTimeData;
     granularity: TemporalGranularity;
+    pageSize: boolean | number;
 }
 
-const PrevalenceOverTimeTable = ({ data, granularity }: PrevalenceOverTimeTableProps) => {
+const PrevalenceOverTimeTable = ({ data, granularity, pageSize }: PrevalenceOverTimeTableProps) => {
     const getSplitColumns = (data: PrevalenceOverTimeData) => {
         return data.map((dataset) => ({
             name: dataset.displayName,
@@ -40,7 +41,7 @@ const PrevalenceOverTimeTable = ({ data, granularity }: PrevalenceOverTimeTableP
         return Object.values(dataByHeader).map((row) => Object.values(row));
     };
 
-    return <Table data={getData(data, granularity)} columns={getColumns(data)} pagination={false} />;
+    return <Table data={getData(data, granularity)} columns={getColumns(data)} pageSize={pageSize} />;
 };
 
 export default PrevalenceOverTimeTable;

package/src/preact/prevalenceOverTime/prevalence-over-time.stories.tsx

@@ -32,6 +32,7 @@ export default {
         width: { control: 'text' },
         height: { control: 'text' },
         headline: { control: 'text' },
+        pageSize: { control: 'object' },
     },
 };
 
@@ -49,6 +50,7 @@ const Template = {
                 height={args.height}
                 headline={args.headline}
                 lapisDateField={args.lapisDateField}
+                pageSize={args.pageSize}
             />
         </LapisUrlContext.Provider>
     ),
@@ -70,6 +72,7 @@ export const TwoVariants = {
         height: '700px',
         headline: 'Prevalence over time',
         lapisDateField: 'date',
+        pageSize: 10,
     },
     parameters: {
         fetchMock: {
@@ -142,6 +145,7 @@ export const OneVariant = {
         height: '700px',
         headline: 'Prevalence over time',
         lapisDateField: 'date',
+        pageSize: 10,
     },
     parameters: {
         fetchMock: {

package/src/preact/prevalenceOverTime/prevalence-over-time.tsx

@@ -40,6 +40,7 @@ export interface PrevalenceOverTimeInnerProps {
     views: View[];
     confidenceIntervalMethods: ConfidenceIntervalMethod[];
     lapisDateField: string;
+    pageSize: boolean | number;
 }
 
 export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
@@ -53,6 +54,7 @@ export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
     height,
     headline = 'Prevalence over time',
     lapisDateField,
+    pageSize,
 }) => {
     const size = { height, width };
 
@@ -68,6 +70,7 @@ export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
                         views={views}
                         confidenceIntervalMethods={confidenceIntervalMethods}
                         lapisDateField={lapisDateField}
+                        pageSize={pageSize}
                     />
                 </Headline>
             </ResizeContainer>
@@ -83,6 +86,7 @@ export const PrevalenceOverTimeInner: FunctionComponent<PrevalenceOverTimeInnerP
     views,
     confidenceIntervalMethods,
     lapisDateField,
+    pageSize,
 }) => {
     const lapis = useContext(LapisUrlContext);
 
@@ -109,6 +113,7 @@ export const PrevalenceOverTimeInner: FunctionComponent<PrevalenceOverTimeInnerP
             data={data}
             granularity={granularity}
             confidenceIntervalMethods={confidenceIntervalMethods}
+            pageSize={pageSize}
         />
     );
 };
@@ -118,6 +123,7 @@ type PrevalenceOverTimeTabsProps = {
     data: PrevalenceOverTimeData;
     granularity: TemporalGranularity;
     confidenceIntervalMethods: ConfidenceIntervalMethod[];
+    pageSize: boolean | number;
 };
 
 const PrevalenceOverTimeTabs: FunctionComponent<PrevalenceOverTimeTabsProps> = ({
@@ -125,6 +131,7 @@ const PrevalenceOverTimeTabs: FunctionComponent<PrevalenceOverTimeTabsProps> = (
     data,
     granularity,
     confidenceIntervalMethods,
+    pageSize,
 }) => {
     const [yAxisScaleType, setYAxisScaleType] = useState<ScaleType>('linear');
     const [confidenceIntervalMethod, setConfidenceIntervalMethod] = useState<ConfidenceIntervalMethod>(
@@ -163,7 +170,7 @@ const PrevalenceOverTimeTabs: FunctionComponent<PrevalenceOverTimeTabsProps> = (
             case 'table':
                 return {
                     title: 'Table',
-                    content: <PrevalenceOverTimeTable data={data} granularity={granularity} />,
+                    content: <PrevalenceOverTimeTable data={data} granularity={granularity} pageSize={pageSize} />,
                 };
         }
     };

package/src/query/queryAggregateData.spec.ts

@@ -4,7 +4,7 @@ import { queryAggregateData } from './queryAggregateData';
 import { DUMMY_LAPIS_URL, lapisRequestMocks } from '../../vitest.setup';
 
 describe('queryAggregateData', () => {
-    test('should fetch aggregate data', async () => {
+    test('should fetch aggregate data and sort initially by count descending when no initialSort is provided', async () => {
         const fields = ['division', 'host'];
         const filter = { country: 'USA' };
 
@@ -23,10 +23,124 @@ describe('queryAggregateData', () => {
         const result = await queryAggregateData(filter, fields, DUMMY_LAPIS_URL);
 
         expect(result).to.deep.equal([
+            { proportion: 0.5, count: 16, region: 'region2', host: 'host2' },
+            { proportion: 0.25, count: 8, region: 'region2', host: 'host1' },
             { proportion: 0.125, count: 4, region: 'region1', host: 'host1' },
             { proportion: 0.125, count: 4, region: 'region1', host: 'host2' },
-            { proportion: 0.25, count: 8, region: 'region2', host: 'host1' },
-            { proportion: 0.5, count: 16, region: 'region2', host: 'host2' },
         ]);
     });
+
+    test('should sort by initialSort field ascending', async () => {
+        const fields = ['division', 'host'];
+        const filter = { country: 'USA' };
+        const initialSortField = 'host';
+        const initialSortDirection = 'ascending';
+
+        lapisRequestMocks.aggregated(
+            { fields, ...filter },
+            {
+                data: [
+                    { count: 4, region: 'region1', host: 'A_host' },
+                    { count: 4, region: 'region1', host: 'B_host' },
+                    { count: 8, region: 'region2', host: 'A_host1' },
+                    { count: 16, region: 'region2', host: 'C_host' },
+                ],
+            },
+        );
+
+        const result = await queryAggregateData(filter, fields, DUMMY_LAPIS_URL, {
+            field: initialSortField,
+            direction: initialSortDirection,
+        });
+
+        expect(result).to.deep.equal([
+            { proportion: 0.125, count: 4, region: 'region1', host: 'A_host' },
+            { proportion: 0.25, count: 8, region: 'region2', host: 'A_host1' },
+            { proportion: 0.125, count: 4, region: 'region1', host: 'B_host' },
+            { proportion: 0.5, count: 16, region: 'region2', host: 'C_host' },
+        ]);
+    });
+
+    test('should sort by initialSort field descending', async () => {
+        const fields = ['division', 'host'];
+        const filter = { country: 'USA' };
+        const initialSortField = 'host';
+        const initialSortDirection = 'descending';
+
+        lapisRequestMocks.aggregated(
+            { fields, ...filter },
+            {
+                data: [
+                    { count: 4, region: 'region1', host: 'A_host' },
+                    { count: 4, region: 'region1', host: 'B_host' },
+                    { count: 8, region: 'region2', host: 'A_host1' },
+                    { count: 16, region: 'region2', host: 'C_host' },
+                ],
+            },
+        );
+
+        const result = await queryAggregateData(filter, fields, DUMMY_LAPIS_URL, {
+            field: initialSortField,
+            direction: initialSortDirection,
+        });
+
+        expect(result).to.deep.equal([
+            { proportion: 0.5, count: 16, region: 'region2', host: 'C_host' },
+            { proportion: 0.125, count: 4, region: 'region1', host: 'B_host' },
+            { proportion: 0.25, count: 8, region: 'region2', host: 'A_host1' },
+            { proportion: 0.125, count: 4, region: 'region1', host: 'A_host' },
+        ]);
+    });
+
+    test('should sort by initialSort number field', async () => {
+        const fields = ['division', 'host'];
+        const filter = { country: 'USA' };
+        const initialSortField = 'proportion';
+        const initialSortDirection = 'descending';
+
+        lapisRequestMocks.aggregated(
+            { fields, ...filter },
+            {
+                data: [
+                    { count: 4, region: 'region1', host: 'A_host' },
+                    { count: 4, region: 'region1', host: 'B_host' },
+                    { count: 8, region: 'region2', host: 'A_host1' },
+                    { count: 16, region: 'region2', host: 'C_host' },
+                ],
+            },
+        );
+
+        const result = await queryAggregateData(filter, fields, DUMMY_LAPIS_URL, {
+            field: initialSortField,
+            direction: initialSortDirection,
+        });
+
+        expect(result).to.deep.equal([
+            { proportion: 0.125, count: 4, region: 'region1', host: 'A_host' },
+            { proportion: 0.125, count: 4, region: 'region1', host: 'B_host' },
+            { proportion: 0.25, count: 8, region: 'region2', host: 'A_host1' },
+            { proportion: 0.5, count: 16, region: 'region2', host: 'C_host' },
+        ]);
+    });
+
+    test('should throw if initialSortField is not in fields', async () => {
+        const fields = ['division', 'host'];
+        const filter = { country: 'USA' };
+        const initialSortField = 'not_in_fields';
+        const initialSortDirection = 'descending';
+
+        lapisRequestMocks.aggregated(
+            { fields, ...filter },
+            {
+                data: [{ count: 4, region: 'region1', host: 'A_host' }],
+            },
+        );
+
+        await expect(
+            queryAggregateData(filter, fields, DUMMY_LAPIS_URL, {
+                field: initialSortField,
+                direction: initialSortDirection,
+            }),
+        ).rejects.toThrowError('InitialSort field not in fields. Valid fields are: count, proportion, division, host');
+    });
 });

package/src/query/queryAggregateData.ts

@@ -1,4 +1,6 @@
 import { FetchAggregatedOperator } from '../operator/FetchAggregatedOperator';
+import { SortOperator } from '../operator/SortOperator';
+import { type InitialSort } from '../preact/aggregatedData/aggregate';
 import { type LapisFilter } from '../types';
 
 export type AggregateData = (Record<string, string | null | number | boolean> & {
@@ -6,9 +8,36 @@ export type AggregateData = (Record<string, string | null | number | boolean> &
     proportion: number;
 })[];
 
-export async function queryAggregateData(variant: LapisFilter, fields: string[], lapis: string, signal?: AbortSignal) {
+const compareAscending = (a: string | null | number, b: string | null | number) => {
+    if (typeof a === 'number' && typeof b === 'number') {
+        return a - b;
+    }
+
+    const strA = a != null ? String(a) : '';
+    const strB = b != null ? String(b) : '';
+
+    return strA.localeCompare(strB);
+};
+
+export async function queryAggregateData(
+    variant: LapisFilter,
+    fields: string[],
+    lapis: string,
+    initialSort: InitialSort = { field: 'count', direction: 'descending' },
+    signal?: AbortSignal,
+) {
+    const validSortFields = ['count', 'proportion', ...fields];
+    if (!validSortFields.includes(initialSort.field)) {
+        throw new Error(`InitialSort field not in fields. Valid fields are: ${validSortFields.join(', ')}`);
+    }
+
     const fetchData = new FetchAggregatedOperator<Record<string, string | null | number>>(variant, fields);
-    const data = (await fetchData.evaluate(lapis, signal)).content;
+    const sortData = new SortOperator(fetchData, (a, b) => {
+        return initialSort.direction === 'ascending'
+            ? compareAscending(a[initialSort.field], b[initialSort.field])
+            : compareAscending(b[initialSort.field], a[initialSort.field]);
+    });
+    const data = (await sortData.evaluate(lapis, signal)).content;
 
     const total = data.reduce((acc, row) => acc + row.count, 0);
 

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

@@ -17,6 +17,7 @@ const codeExample = String.raw`
     fields='["region", "country"]'
     initialValue='Europe / Switzerland'
     width="100%"
+    placeholderText="Enter a location"
 ></gs-location-filter>`;
 
 const meta: Meta = {
@@ -48,6 +49,11 @@ const meta: Meta = {
                 type: 'text',
             },
         },
+        placeholderText: {
+            control: {
+                type: 'text',
+            },
+        },
     },
     decorators: [withActions],
     tags: ['autodocs'],
@@ -63,6 +69,7 @@ const Template: StoryObj<LocationFilterProps> = {
                     .fields=${args.fields}
                     initialValue=${ifDefined(args.initialValue)}
                     .width=${args.width}
+                    placeholderText=${ifDefined(args.placeholderText)}
                 ></gs-location-filter>
             </div>
         </gs-app>`;
@@ -71,6 +78,7 @@ const Template: StoryObj<LocationFilterProps> = {
         fields: ['region', 'country', 'division', 'location'],
         initialValue: '',
         width: '100%',
+        placeholderText: 'Enter a location',
     },
 };
 
@@ -102,6 +110,9 @@ export const LocationFilter: StoryObj<LocationFilterProps> = {
         await waitFor(() => {
             return expect(canvas.getByRole('combobox')).toBeEnabled();
         });
+        await waitFor(() => {
+            return expect(canvas.getByPlaceholderText('Enter a location')).toBeInTheDocument();
+        });
     },
 };
 

package/src/web-components/input/gs-location-filter.tsx

@@ -59,8 +59,21 @@ export class LocationFilterComponent extends PreactLitAdapter {
     @property({ type: String })
     width: string = '100%';
 
+    /**
+     * The placeholder text to display in the input field, if it is empty.
+     */
+    @property()
+    placeholderText: string = '';
+
     override render() {
-        return <LocationFilter initialValue={this.initialValue} fields={this.fields} width={this.width} />;
+        return (
+            <LocationFilter
+                initialValue={this.initialValue}
+                fields={this.fields}
+                width={this.width}
+                placeholderText={this.placeholderText}
+            />
+        );
     }
 }
 

package/src/web-components/visualization/gs-aggregate.stories.ts

@@ -17,6 +17,9 @@ const codeExample = `
     headline="Aggregate"
     width='100%'
     height='700px'
+    initialSortField="count"
+    initialSortDirection="descending"
+    pageSize="10"
 ></gs-aggregate>`;
 
 const meta: Meta<Required<AggregateProps>> = {
@@ -31,6 +34,12 @@ const meta: Meta<Required<AggregateProps>> = {
         width: { control: 'text' },
         height: { control: 'text' },
         headline: { control: 'text' },
+        pageSize: { control: 'object' },
+        initialSortField: { control: 'text' },
+        initialSortDirection: {
+            options: ['ascending', 'descending'],
+            control: { type: 'radio' },
+        },
     },
     parameters: withComponentDocs({
         fetchMock: {
@@ -72,6 +81,9 @@ export const Table: StoryObj<Required<AggregateProps>> = {
                 .width=${args.width}
                 .height=${args.height}
                 .headline=${args.headline}
+                .initialSortField=${args.initialSortField}
+                .initialSortDirection=${args.initialSortDirection}
+                .pageSize=${args.pageSize}
             ></gs-aggregate>
         </gs-app>
     `,
@@ -84,5 +96,8 @@ export const Table: StoryObj<Required<AggregateProps>> = {
         width: '100%',
         height: '700px',
         headline: 'Aggregate',
+        initialSortField: 'count',
+        initialSortDirection: 'descending',
+        pageSize: 10,
     },
 };

package/src/web-components/visualization/gs-aggregate.tsx

@@ -67,6 +67,26 @@ export class AggregateComponent extends PreactLitAdapterWithGridJsStyles {
     @property({ type: String })
     headline: string = 'Aggregate';
 
+    /**
+     * The field by which the table is initially sorted.
+     * Must be one of the fields specified in the fields property, 'count', or 'proportion'.
+     */
+    @property({ type: String })
+    initialSortField: string = 'count';
+
+    /**
+     * The initial sort direction of the table.
+     */
+    @property({ type: String })
+    initialSortDirection: 'ascending' | 'descending' = 'descending';
+
+    /**
+     * The maximum number of rows to display in the table view.
+     * Set to `false` to disable pagination. Set to `true` to enable pagination with a default limit (10).
+     */
+    @property({ type: Object })
+    pageSize: boolean | number = false;
+
     override render() {
         return (
             <Aggregate
@@ -76,6 +96,9 @@ export class AggregateComponent extends PreactLitAdapterWithGridJsStyles {
                 width={this.width}
                 height={this.height}
                 headline={this.headline}
+                initialSortField={this.initialSortField}
+                initialSortDirection={this.initialSortDirection}
+                pageSize={this.pageSize}
             />
         );
     }

package/src/web-components/visualization/gs-mutation-comparison.stories.ts

@@ -19,6 +19,7 @@ const codeExample = String.raw`
     headline="Mutation comparison"
     width='100%'
     height='700px'
+    pageSize="10"
 ></gs-mutation-comparison>`;
 
 const meta: Meta<Required<MutationComparisonProps>> = {
@@ -37,6 +38,7 @@ const meta: Meta<Required<MutationComparisonProps>> = {
         width: { control: 'text' },
         height: { control: 'text' },
         headline: { control: 'text' },
+        pageSize: { control: 'object' },
     },
     parameters: withComponentDocs({
         componentDocs: {
@@ -60,6 +62,7 @@ const Template: StoryObj<Required<MutationComparisonProps>> = {
                 .width=${args.width}
                 .height=${args.height}
                 .headline=${args.headline}
+                .pageSize=${args.pageSize}
             ></gs-mutation-comparison>
         </gs-app>
     `,
@@ -91,6 +94,7 @@ export const Default: StoryObj<Required<MutationComparisonProps>> = {
         width: '100%',
         height: '700px',
         headline: 'Mutation comparison',
+        pageSize: 10,
     },
     parameters: {
         fetchMock: {

package/src/web-components/visualization/gs-mutation-comparison.tsx

@@ -82,6 +82,13 @@ export class MutationComparisonComponent extends PreactLitAdapterWithGridJsStyle
     @property({ type: String })
     headline: string = 'Mutation comparison';
 
+    /**
+     * The maximum number of rows to display in the table view.
+     * Set to `false` to disable pagination. Set to `true` to enable pagination with a default limit (10).
+     */
+    @property({ type: Object })
+    pageSize: boolean | number = false;
+
     override render() {
         return (
             <MutationComparison
@@ -91,6 +98,7 @@ export class MutationComparisonComponent extends PreactLitAdapterWithGridJsStyle
                 width={this.width}
                 height={this.height}
                 headline={this.headline}
+                pageSize={this.pageSize}
             />
         );
     }

package/src/web-components/visualization/gs-mutations.stories.ts

@@ -19,6 +19,7 @@ const codeExample = String.raw`
     headline="Mutations"
     width='100%'
     height='700px'
+    pageSize="10"
 ></gs-mutations>`;
 
 const meta: Meta<Required<MutationsProps>> = {
@@ -37,6 +38,7 @@ const meta: Meta<Required<MutationsProps>> = {
         width: { control: 'text' },
         height: { control: 'text' },
         headline: { control: 'text' },
+        pageSize: { control: 'object' },
     },
     args: {
         variant: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo: '2022-01-01' },
@@ -45,6 +47,7 @@ const meta: Meta<Required<MutationsProps>> = {
         width: '100%',
         height: '700px',
         headline: 'Mutations',
+        pageSize: 10,
     },
     parameters: withComponentDocs({
         componentDocs: {
@@ -68,6 +71,7 @@ const Template: StoryObj<Required<MutationsProps>> = {
                 .width=${args.width}
                 .height=${args.height}
                 .headline=${args.headline}
+                .pageSize=${args.pageSize}
             ></gs-mutations>
         </gs-app>
     `,

package/src/web-components/visualization/gs-mutations.tsx

@@ -77,6 +77,13 @@ export class MutationsComponent extends PreactLitAdapterWithGridJsStyles {
     @property({ type: String })
     headline: string = 'Mutations';
 
+    /**
+     * The maximum number of rows to display in the table view.
+     * Set to `false` to disable pagination. Set to `true` to enable pagination with a default limit (10).
+     */
+    @property({ type: Object })
+    pageSize: boolean | number = false;
+
     override render() {
         return (
             <Mutations
@@ -86,6 +93,7 @@ export class MutationsComponent extends PreactLitAdapterWithGridJsStyles {
                 width={this.width}
                 height={this.height}
                 headline={this.headline}
+                pageSize={this.pageSize}
             />
         );
     }

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

@@ -26,6 +26,7 @@ const codeExample = String.raw`
     width="100%"
     height="700px"
     lapisDateField="date"
+    pageSize="10"
 ></gs-prevalence-over-time>`;
 
 const meta: Meta<Required<PrevalenceOverTimeProps>> = {
@@ -50,6 +51,7 @@ const meta: Meta<Required<PrevalenceOverTimeProps>> = {
         width: { control: 'text' },
         height: { control: 'text' },
         headline: { control: 'text' },
+        pageSize: { control: 'object' },
     },
     parameters: withComponentDocs({
         componentDocs: {
@@ -77,6 +79,7 @@ const Template: StoryObj<Required<PrevalenceOverTimeProps>> = {
                 .height=${args.height}
                 .headline=${args.headline}
                 .lapisDateField=${args.lapisDateField}
+                .pageSize=${args.pageSize}
             ></gs-prevalence-over-time>
         </gs-app>
     `,
@@ -98,6 +101,7 @@ export const TwoVariants: StoryObj<Required<PrevalenceOverTimeProps>> = {
         height: '700px',
         headline: 'Prevalence over time',
         lapisDateField: 'date',
+        pageSize: 10,
     },
     parameters: {
         fetchMock: {
@@ -170,6 +174,7 @@ export const OneVariant: StoryObj<Required<PrevalenceOverTimeProps>> = {
         height: '700px',
         headline: 'Prevalence over time',
         lapisDateField: 'date',
+        pageSize: 10,
     },
     parameters: {
         fetchMock: {