@genspectrum/dashboard-components 0.4.4 → 0.5.0

package/dist/genspectrum-components.d.ts

@@ -44,13 +44,13 @@ export declare class AggregateComponent extends PreactLitAdapterWithGridJsStyles
     /**
      * The width of the component.
      *
-     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     width: string;
     /**
      * The height of the component.
      *
-     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     height: string;
     /**
@@ -66,6 +66,11 @@ export declare class AggregateComponent extends PreactLitAdapterWithGridJsStyles
      * The initial sort direction of the table.
      */
     initialSortDirection: 'ascending' | '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).
+     */
+    pageSize: boolean | number;
     render(): JSX_2.Element;
 }
 
@@ -167,7 +172,7 @@ export declare class DateRangeSelectorComponent extends PreactLitAdapter {
     /**
      * The width of the component.
      *
-     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     width: string;
     /**
@@ -225,17 +230,21 @@ export declare class LocationFilterComponent extends PreactLitAdapter {
     /**
      * The width of the component.
      *
-     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     width: string;
+    /**
+     * The placeholder text to display in the input field, if it is empty.
+     */
+    placeholderText: string;
     render(): JSX_2.Element;
 }
 
 /**
  * ## Context
  *
- * This component allows to compare mutations between different variants.
- * A variant is defined by its LAPIS filter.
+ * This component allows to compare mutations between two different datasets.
+ * The datasets are selected by LAPIS filters.
  *
  * It only shows substitutions and deletions, it does not show insertions.
  *
@@ -243,32 +252,31 @@ export declare class LocationFilterComponent extends PreactLitAdapter {
  *
  * ### Table View
  *
- * The table view shows mutations
- * and the proportions with which the mutation occurs in the respective variant.
- * It only shows mutations that are present in at least one of the variants
- * and where the proportion is within the selected proportion interval for at least one variant.
+ * The table view shows mutations and the proportions with which the mutation occurs in the respective data subsets.
+ * It only shows mutations that are present in at least one of the data subsets
+ * and where the proportion is within the selected proportion interval for at least one data subset.
  *
  * ### Venn View
  *
- * The Venn view shows the overlap of mutations between the variants in a Venn diagram.
- * A variant is considered to have a certain mutation,
- * if the proportion of the mutation in the variant is within the selected proportion interval.
- * Thus, changing the proportion interval may change a mutations from being "common" between variant
- * to being "for one variant only".
+ * The Venn view shows the overlap of mutations between the datasets in a Venn diagram.
+ * A dataset is considered to have a certain mutation, if the proportion of the mutation in the dataset is within the
+ * selected proportion interval.
+ * Thus, changing the proportion interval may change a mutations from being "common" between the datasets
+ * to being "for one dataset only".
  */
 export declare class MutationComparisonComponent extends PreactLitAdapterWithGridJsStyles {
     /**
      * Required.
      *
-     * An array of variants to compare.
+     * An array of LAPIS filters to select the data to compare.
      *
      * The `lapisFilter` will be sent as is to LAPIS to filter the mutation data.
      * It must be a valid LAPIS filter object.
      *
-     * The `displayName` will be used as the label for the variant in the views.
+     * The `displayName` will be used as the label for the filtered dataset in the views.
      * It should be human-readable.
      */
-    variants: {
+    lapisFilters: {
         lapisFilter: Record<string, string | number | null | boolean>;
         displayName: string;
     }[];
@@ -283,19 +291,24 @@ export declare class MutationComparisonComponent extends PreactLitAdapterWithGri
     /**
      * The width of the component.
      *
-     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     width: string;
     /**
      * The height of the component.
      *
-     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     height: string;
     /**
      * The headline of the component. Set to an empty string to hide the headline.
      */
     headline: string;
+    /**
+     * 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).
+     */
+    pageSize: boolean | number;
     render(): JSX_2.Element;
 }
 
@@ -368,7 +381,7 @@ export declare class MutationFilterComponent extends PreactLitAdapter {
     /**
      * The width of the component.
      *
-     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     width: string;
     render(): JSX_2.Element;
@@ -377,15 +390,15 @@ export declare class MutationFilterComponent extends PreactLitAdapter {
 /**
  * ## Context
  *
- * This component displays mutations (substitutions, deletions and insertions) for a given variant.
+ * This component displays mutations (substitutions, deletions and insertions) for a dataset selected by a LAPIS filter.
  *
  * ## Views
  *
  * ### Table View
  *
- * The table view shows all substitutions and deletions for the given variant.
+ * The table view shows all substitutions and deletions for the dataset.
  * It shows the type (substitution or deletion), the total count of the mutation
- * and the proportion of the mutation in the variant.
+ * and the proportion of the mutation in the dataset.
  * The proportion is relative to the total number of sequences matching
  * the specified sequence filters with non-ambiguous reads at that position.
  *
@@ -398,17 +411,16 @@ export declare class MutationFilterComponent extends PreactLitAdapter {
  *
  * ### Insertions View
  *
- * The insertions view shows the count of all insertions for the given variant.
+ * The insertions view shows the count of all insertions for the dataset.
  *
  */
 export declare class MutationsComponent extends PreactLitAdapterWithGridJsStyles {
     /**
      * Required.
      *
-     * The `variant` will be sent as is to LAPIS to filter the mutation data.
-     * It must be a valid LAPIS filter object.
+     * LAPIS filter to select the displayed data.
      */
-    variant: Record<string, string | number | null | boolean>;
+    lapisFilter: Record<string, string | number | null | boolean>;
     /**
      * The type of the sequence for which the mutations should be shown.
      */
@@ -420,19 +432,24 @@ export declare class MutationsComponent extends PreactLitAdapterWithGridJsStyles
     /**
      * The width of the component.
      *
-     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     width: string;
     /**
      * The height of the component.
      *
-     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     height: string;
     /**
      * The headline of the component. Set to an empty string to hide the headline.
      */
     headline: string;
+    /**
+     * 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).
+     */
+    pageSize: boolean | number;
     render(): JSX_2.Element;
 }
 
@@ -451,9 +468,9 @@ declare abstract class PreactLitAdapterWithGridJsStyles extends PreactLitAdapter
 /**
  * ## Context
  *
- * This component displays the prevalence over time of one or more variants.
- * The prevalence is calculated as the ratio of the number of cases of each variant given as `numerator`
- * to the number of cases of the variant given as `denominator`.
+ * This component displays the prevalence over time of one or more datasets, selected by LAPIS filters.
+ * The prevalence is calculated as the ratio of the number of cases of each dataset to the number of cases of a reference dataset.
+ * The reference dataset is also selected by a LAPIS filter.
  *
  * In the chart views,
  * - the user can select whether to display a confidence interval (not available in the bubble chart).
@@ -467,19 +484,19 @@ declare abstract class PreactLitAdapterWithGridJsStyles extends PreactLitAdapter
  * ### Bar View
  *
  * Displays the prevalence over time as a bar chart.
- * Shows a bar for each variant in the `numerator` on every time step.
+ * Shows a bar for each dataset of the `numeratorFilter` on every time step.
  *
  * ### Line View
  *
  * Displays the prevalence over time as a line chart.
  * Each data point is connected for better visibility.
- * Shows a line for each variant in the `numerator`.
+ * Shows a line for each dataset of the `numeratorFilter`.
  *
  * ### Bubble View
  *
  * Displays the prevalence over time as a bubble chart.
- * The size of the bubbles represents the number of cases of the `denominator` variant.
- * The height of the bubbles represents the prevalence of the `numerator` variants.
+ * The size of the bubbles represents the number of cases of the reference, defined by the `denominatorFilter`.
+ * The height of the bubbles represents the prevalence of the datasets selected by the `numeratorFilters`.
  *
  * ### Table View
  *
@@ -488,13 +505,16 @@ declare abstract class PreactLitAdapterWithGridJsStyles extends PreactLitAdapter
 export declare class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyles {
     /**
      *   Required.
+     * Either a LAPIS filter or an array of LAPIS filters to calculate the prevalence for.
+     *
+     * The `lapisFilter` will be sent as is to LAPIS to select the data.
+     * It must be a valid LAPIS filter object.
+     *
+     * The `displayName` will be used as the label the prevalence in the views.
+     * It should be human-readable.
      *
-     * Either a single variant or an array of variants to compare.
-     * This must be a valid LAPIS filter object with an additional `displayName` property
-     * which will be used as the label for the variant in the views,
-     * or an array of such objects.
      */
-    numerator: {
+    numeratorFilter: {
         lapisFilter: Record<string, string | number | null | boolean>;
         displayName: string;
     } | {
@@ -504,9 +524,10 @@ export declare class PrevalenceOverTimeComponent extends PreactLitAdapterWithGri
     /**
      * Required.
      *
-     * The variant that the variants in `numerator` are compared to.
+     * The LAPIS filter, to select the data of the reference.
+     * It must be a valid LAPIS filter object.
      */
-    denominator: Record<string, string | number | null | boolean>;
+    denominatorFilter: Record<string, string | number | null | boolean>;
     /**
      * The granularity of the time axis.
      */
@@ -538,13 +559,13 @@ export declare class PrevalenceOverTimeComponent extends PreactLitAdapterWithGri
     /**
      * The width of the component.
      *
-     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     width: string;
     /**
      * The height of the component.
      *
-     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     height: string;
     /**
@@ -555,6 +576,27 @@ export declare class PrevalenceOverTimeComponent extends PreactLitAdapterWithGri
      * Must be a field of type `date` in LAPIS.
      */
     lapisDateField: string;
+    /**
+     * 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).
+     */
+    pageSize: boolean | number;
+    /**
+     * The maximum value for the y-axis on all graphs in linear view.
+     * If set to a number, the maximum value is set to this number.
+     * If set to `maxInData`, the maximum value is set to the maximum value in the data.
+     * If set to `limitTo1`, the maximum value is set to `min(1, the maximum value in the data)`.
+     * If not set, the maximum value is set to the default value (1).
+     */
+    yAxisMaxLinear: 'maxInData' | 'limitTo1' | number;
+    /**
+     * The maximum value for the y-axis on all graphs in logarithmic view.
+     * If set to a number, the maximum value is set to this number.
+     * If set to `maxInData`, the maximum value is set to the maximum value in the data.
+     * If set to `limitTo1`, the maximum value is set to `min(1, the maximum value in the data)`.
+     * If not set, the maximum value is set to the default value (1).
+     */
+    yAxisMaxLogarithmic: 'maxInData' | 'limitTo1' | number;
     render(): JSX_2.Element;
 }
 
@@ -607,7 +649,7 @@ declare const referenceGenomeResponse: default_2.ZodObject<{
  * For this component, we assume a discrete time model, where new infections happen exactly every `generationTime` days.
  * This is what we call a "generation".
  *
- * This component estimates the relative growth advantage of a variant by performing a logistic regression.
+ * This component estimates the relative growth advantage of a variant (defined by its LAPIS filter) by performing a logistic regression.
  * Based on the inferred logistic growth rate, we derive the relative growth advantage (per generation).
  *
  * For details on the scientific method, see:
@@ -623,7 +665,7 @@ declare const referenceGenomeResponse: default_2.ZodObject<{
  * ### Line View
  *
  * The line view shows the relative growth advantage over time in a line chart.
- * The dots in the plot show the proportions of the focal variant (`numerator`) to the `denominator` variant
+ * The dots in the plot show the proportions of the focal variant (defined by the `numeratorFilter`) to the baseline variant (defined by the `denominatorFilter`)
  * for every day as observed in the data.
  * The line shows a logistic curve fitted to the data points, including a 95% confidence interval.
  */
@@ -631,15 +673,17 @@ export declare class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
     /**
      * Required.
      *
-     * The LAPIS filter for the focal variant.
+     * LAPIS filter to select the data of the focal variant.
+     * It must be a valid LAPIS filter object.
      */
-    numerator: Record<string, string | number | null | boolean>;
+    numeratorFilter: Record<string, string | number | null | boolean>;
     /**
      * Required.
      *
-     * The LAPIS filter for the variant that the focal variant (`numerator`) should be compared to.
+     * LAPIS filter to select the data of the baseline variant.
+     * It must be a valid LAPIS filter object.
      */
-    denominator: Record<string, string | number | null | boolean>;
+    denominatorFilter: Record<string, string | number | null | boolean>;
     /**
      * The generation time represents the number of days over which the variant's relative growth advantage is measured.
      * For example, if we set a generation time of 7 days, then we estimate the growth advantage per week.
@@ -656,13 +700,13 @@ export declare class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
     /**
      * The width of the component.
      *
-     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     width: string;
     /**
      * The height of the component.
      *
-     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     height: string;
     /**
@@ -673,6 +717,22 @@ export declare class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
      * Must be a field of type `date` in LAPIS.
      */
     lapisDateField: string;
+    /**
+     * The maximum value for the y-axis on all graphs in linear view.
+     * If set to a number, the maximum value is set to this number.
+     * If set to `maxInData`, the maximum value is set to the maximum value in the data.
+     * If set to `limitTo1`, the maximum value is set to `min(1, the maximum value in the data)`.
+     * If not set, the maximum value is set to the default value (1).
+     */
+    yAxisMaxLinear: 'maxInData' | 'limitTo1' | number;
+    /**
+     * The maximum value for the y-axis on all graphs in logarithmic view.
+     * If set to a number, the maximum value is set to this number.
+     * If set to `maxInData`, the maximum value is set to the maximum value in the data.
+     * If set to `limitTo1`, the maximum value is set to `min(1, the maximum value in the data)`.
+     * If not set, the maximum value is set to the default value (1).
+     */
+    yAxisMaxLogarithmic: 'maxInData' | 'limitTo1' | number;
     render(): JSX_2.Element;
 }
 
@@ -711,7 +771,7 @@ export declare class TextInputComponent extends PreactLitAdapter {
     /**
      * The width of the component.
      *
-     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     width: string;
     render(): JSX_2.Element;

package/dist/style.css

@@ -1468,8 +1468,8 @@ html {
           appearance: none;
   height: 3rem;
   min-height: 3rem;
-  padding-left: 1rem;
-  padding-right: 2.5rem;
+  padding-inline-start: 1rem;
+  padding-inline-end: 2.5rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
   line-height: 2;
@@ -1511,7 +1511,9 @@ html {
   display: grid;
   align-items: flex-end;
 }
-.tabs-lifted:has(.tab-content[class^="rounded-"]) .tab:first-child:not(:is(.tab-active, [aria-selected="true"])), .tabs-lifted:has(.tab-content[class*=" rounded-"]) .tab:first-child:not(:is(.tab-active, [aria-selected="true"])) {
+.tabs-lifted:has(.tab-content[class^="rounded-"])
+    .tab:first-child:not(:is(.tab-active, [aria-selected="true"])), .tabs-lifted:has(.tab-content[class*=" rounded-"])
+    .tab:first-child:not(:is(.tab-active, [aria-selected="true"])) {
   border-bottom-color: transparent;
 }
 .tab {
@@ -2349,7 +2351,7 @@ input.tab:checked + .tab-content,
 .tabs-boxed .tab {
   border-radius: var(--rounded-btn, 0.5rem);
 }
-:is([dir="rtl"] .table) {
+.table:where([dir="rtl"], [dir="rtl"] *) {
   text-align: right;
 }
 .table :where(th, td) {
@@ -2365,7 +2367,7 @@ input.tab:checked + .tab-content,
   --tw-bg-opacity: 1;
   background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
 }
-.table :where(thead tr, tbody tr:not(:last-child),tbody tr:first-child:last-child) {
+.table :where(thead tr, tbody tr:not(:last-child), tbody tr:first-child:last-child) {
   border-bottom-width: 1px;
   --tw-border-opacity: 1;
   border-bottom-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
@@ -2649,7 +2651,7 @@ input.tab:checked + .tab-content,
   content: "";
   margin-inline-start: -100%;
 }
-:is([dir="rtl"] .steps-horizontal .step):before {
+.steps-horizontal .step:where([dir="rtl"], [dir="rtl"] *):before {
   --tw-translate-x: 0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -2668,7 +2670,7 @@ input.tab:checked + .tab-content,
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   margin-inline-start: 50%;
 }
-:is([dir="rtl"] .steps-vertical .step):before {
+.steps-vertical .step:where([dir="rtl"], [dir="rtl"] *):before {
   --tw-translate-x: 50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -2702,6 +2704,7 @@ input.tab:checked + .tab-content,
 }
 .tooltip:before {
   max-width: 20rem;
+  white-space: normal;
   border-radius: 0.25rem;
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -2794,6 +2797,10 @@ input.tab:checked + .tab-content,
   margin-left: 0.25rem;
   margin-right: 0.25rem;
 }
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
 .my-1 {
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;
@@ -2805,6 +2812,15 @@ input.tab:checked + .tab-content,
 .mb-2 {
   margin-bottom: 0.5rem;
 }
+.ml-2 {
+  margin-left: 0.5rem;
+}
+.ml-2\.5 {
+  margin-left: 0.625rem;
+}
+.ml-3 {
+  margin-left: 0.75rem;
+}
 .mr-2 {
   margin-right: 0.5rem;
 }
@@ -2878,6 +2894,9 @@ input.tab:checked + .tab-content,
 .flex-wrap {
   flex-wrap: wrap;
 }
+.items-end {
+  align-items: flex-end;
+}
 .items-center {
   align-items: center;
 }
@@ -3007,6 +3026,10 @@ input.tab:checked + .tab-content,
 .text-justify {
   text-align: justify;
 }
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -3036,6 +3059,10 @@ input.tab:checked + .tab-content,
 .leading-5 {
   line-height: 1.25rem;
 }
+.text-\[\#606060\] {
+  --tw-text-opacity: 1;
+  color: rgb(96 96 96 / var(--tw-text-opacity));
+}
 .text-blue-600 {
   --tw-text-opacity: 1;
   color: rgb(37 99 235 / var(--tw-text-opacity));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.4.4",
+    "version": "0.5.0",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -82,13 +82,13 @@
         "@storybook/preact": "^8.0.9",
         "@storybook/preact-vite": "^8.0.9",
         "@storybook/test": "^8.0.0",
-        "@storybook/test-runner": "^0.18.0",
+        "@storybook/test-runner": "^0.19.0",
         "@storybook/types": "^8.0.9",
         "@storybook/web-components": "^8.0.9",
         "@storybook/web-components-vite": "^8.0.9",
         "@types/node": "^20.12.7",
-        "@typescript-eslint/eslint-plugin": "^7.7.0",
-        "@typescript-eslint/parser": "^7.7.0",
+        "@typescript-eslint/eslint-plugin": "^7.14.1",
+        "@typescript-eslint/parser": "^7.14.1",
         "autoprefixer": "^10.4.19",
         "daisyui": "^4.10.2",
         "depcheck": "^1.4.7",
@@ -106,7 +106,7 @@
         "storybook": "^8.0.9",
         "storybook-addon-fetch-mock": "^2.0.0",
         "tailwindcss": "^3.4.3",
-        "typescript": "~5.4.5",
+        "typescript": "~5.5.2",
         "vite": "^5.2.10",
         "vite-plugin-dts": "^3.8.3",
         "vitest": "^1.5.0"

package/src/preact/aggregatedData/aggregate-table.tsx

@@ -7,9 +7,10 @@ import { formatProportion } from '../shared/table/formatProportion';
 type AggregateTableProps = {
     fields: string[];
     data: AggregateData;
+    pageSize: boolean | number;
 };
 
-export const AggregateTable: FunctionComponent<AggregateTableProps> = ({ data, fields }) => {
+export const AggregateTable: FunctionComponent<AggregateTableProps> = ({ data, fields, pageSize }) => {
     const headers = [
         ...fields.map((field) => {
             return {
@@ -28,5 +29,5 @@ export const AggregateTable: FunctionComponent<AggregateTableProps> = ({ data, f
         },
     ];
 
-    return <Table data={data} columns={headers} pagination={true} />;
+    return <Table data={data} columns={headers} pageSize={pageSize} />;
 };

package/src/preact/aggregatedData/aggregate.stories.tsx

@@ -15,6 +15,7 @@ const meta: Meta<AggregateProps> = {
         headline: { control: 'text' },
         initialSortField: { control: 'text' },
         initialSortDirection: { control: 'radio', options: ['ascending', 'descending'] },
+        pageSize: { control: 'object' },
     },
     parameters: {
         fetchMock: {
@@ -57,5 +58,6 @@ export const Default: StoryObj<AggregateProps> = {
         headline: 'Aggregate',
         initialSortField: 'count',
         initialSortDirection: 'descending',
+        pageSize: 10,
     },
 };

package/src/preact/aggregatedData/aggregate.tsx

@@ -31,6 +31,7 @@ export interface AggregateInnerProps {
     views: View[];
     initialSortField: string;
     initialSortDirection: 'ascending' | 'descending';
+    pageSize: boolean | number;
 }
 
 export const Aggregate: FunctionComponent<AggregateProps> = ({
@@ -40,6 +41,7 @@ export const Aggregate: FunctionComponent<AggregateProps> = ({
     headline = 'Mutations',
     filter,
     fields,
+    pageSize,
     initialSortField,
     initialSortDirection,
 }) => {
@@ -55,6 +57,7 @@ export const Aggregate: FunctionComponent<AggregateProps> = ({
                         views={views}
                         initialSortField={initialSortField}
                         initialSortDirection={initialSortDirection}
+                        pageSize={pageSize}
                     />
                 </Headline>
             </ResizeContainer>
@@ -68,6 +71,7 @@ export const AggregateInner: FunctionComponent<AggregateInnerProps> = ({
     filter,
     initialSortField,
     initialSortDirection,
+    pageSize,
 }) => {
     const lapis = useContext(LapisUrlContext);
 
@@ -87,22 +91,23 @@ export const AggregateInner: FunctionComponent<AggregateInnerProps> = ({
         return <NoDataDisplay />;
     }
 
-    return <AggregatedDataTabs data={data} views={views} fields={fields} />;
+    return <AggregatedDataTabs data={data} views={views} fields={fields} pageSize={pageSize} />;
 };
 
 type AggregatedDataTabsProps = {
     data: AggregateData;
     fields: string[];
     views: View[];
+    pageSize: boolean | number;
 };
 
-const AggregatedDataTabs: FunctionComponent<AggregatedDataTabsProps> = ({ data, views, fields }) => {
+const AggregatedDataTabs: FunctionComponent<AggregatedDataTabsProps> = ({ data, views, fields, pageSize }) => {
     const getTab = (view: View) => {
         switch (view) {
             case 'table':
                 return {
                     title: 'Table',
-                    content: <AggregateTable data={data} fields={fields} />,
+                    content: <AggregateTable data={data} fields={fields} pageSize={pageSize} />,
                 };
         }
     };