@genspectrum/dashboard-components 0.4.4 → 0.5.0

package/custom-elements.json

@@ -364,7 +364,7 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "attribute": "width"
             },
             {
@@ -439,7 +439,7 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "fieldName": "width"
             },
             {
@@ -489,7 +489,7 @@
           "type": {
             "text": "Meta"
           },
-          "default": "{ title: 'Input/Location filter', component: 'gs-location-filter', parameters: withComponentDocs({ actions: { handles: ['gs-location-changed'], }, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), argTypes: { fields: { control: { type: 'object', }, }, initialValue: { control: { type: 'text', }, }, width: { control: { type: 'text', }, }, }, decorators: [withActions], tags: ['autodocs'], }"
+          "default": "{ title: 'Input/Location filter', component: 'gs-location-filter', parameters: withComponentDocs({ actions: { handles: ['gs-location-changed'], }, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), argTypes: { fields: { control: { type: 'object', }, }, initialValue: { control: { type: 'text', }, }, width: { control: { type: 'text', }, }, placeholderText: { control: { type: 'text', }, }, }, decorators: [withActions], tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
@@ -497,7 +497,7 @@
           "type": {
             "text": "StoryObj<LocationFilterProps>"
           },
-          "default": "{ ...Template, parameters: { fetchMock: { mocks: [ { matcher: aggregatedEndpointMatcher, response: { status: 200, body: data, }, }, ], }, }, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-location-filter'); await waitFor(() => { return expect(canvas.getByRole('combobox')).toBeEnabled(); }); }, }"
+          "default": "{ ...Template, parameters: { fetchMock: { mocks: [ { matcher: aggregatedEndpointMatcher, response: { status: 200, body: data, }, }, ], }, }, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-location-filter'); await waitFor(() => { return expect(canvas.getByRole('combobox')).toBeEnabled(); }); await waitFor(() => { return expect(canvas.getByPlaceholderText('Enter a location')).toBeInTheDocument(); }); }, }"
         },
         {
           "kind": "variable",
@@ -603,8 +603,18 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "attribute": "width"
+            },
+            {
+              "kind": "field",
+              "name": "placeholderText",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The placeholder text to display in the input field, if it is empty.",
+              "attribute": "placeholderText"
             }
           ],
           "events": [
@@ -641,8 +651,17 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "fieldName": "width"
+            },
+            {
+              "name": "placeholderText",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The placeholder text to display in the input field, if it is empty.",
+              "fieldName": "placeholderText"
             }
           ],
           "superclass": {
@@ -770,7 +789,7 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "attribute": "width"
             }
           ],
@@ -806,7 +825,7 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "fieldName": "width"
             }
           ],
@@ -939,7 +958,7 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "attribute": "width"
             }
           ],
@@ -986,7 +1005,7 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "fieldName": "width"
             }
           ],
@@ -1124,7 +1143,7 @@
           "type": {
             "text": "Meta<Required<AggregateProps>>"
           },
-          "default": "{ title: 'Visualization/Aggregate', component: 'gs-aggregate', argTypes: { fields: [{ control: 'object' }], views: { options: ['table'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, headline: { control: 'text' }, initialSortField: { control: 'text' }, initialSortDirection: { options: ['ascending', 'descending'], control: { type: 'radio' }, }, }, parameters: withComponentDocs({ fetchMock: { mocks: [ { matcher: { name: 'aggregatedData', url: AGGREGATED_ENDPOINT, body: { fields: ['division', 'host'], country: 'USA', }, }, response: { status: 200, body: aggregatedData, }, }, ], }, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
+          "default": "{ title: 'Visualization/Aggregate', component: 'gs-aggregate', argTypes: { fields: [{ control: 'object' }], views: { options: ['table'], control: { type: 'check' }, }, 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: { mocks: [ { matcher: { name: 'aggregatedData', url: AGGREGATED_ENDPOINT, body: { fields: ['division', 'host'], country: 'USA', }, }, response: { status: 200, body: aggregatedData, }, }, ], }, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
@@ -1132,7 +1151,7 @@
           "type": {
             "text": "StoryObj<Required<AggregateProps>>"
           },
-          "default": "{ render: (args) => html` <gs-app lapis=\"${LAPIS_URL}\"> <gs-aggregate .fields=${args.fields} .filter=${args.filter} .views=${args.views} .width=${args.width} .height=${args.height} .headline=${args.headline} .initialSortField=${args.initialSortField} .initialSortDirection=${args.initialSortDirection} ></gs-aggregate> </gs-app> `, args: { fields: ['division', 'host'], views: ['table'], filter: { country: 'USA', }, width: '100%', height: '700px', headline: 'Aggregate', initialSortField: 'count', initialSortDirection: 'descending', }, }"
+          "default": "{ render: (args) => html` <gs-app lapis=\"${LAPIS_URL}\"> <gs-aggregate .fields=${args.fields} .filter=${args.filter} .views=${args.views} .width=${args.width} .height=${args.height} .headline=${args.headline} .initialSortField=${args.initialSortField} .initialSortDirection=${args.initialSortDirection} .pageSize=${args.pageSize} ></gs-aggregate> </gs-app> `, args: { fields: ['division', 'host'], views: ['table'], filter: { country: 'USA', }, width: '100%', height: '700px', headline: 'Aggregate', initialSortField: 'count', initialSortDirection: 'descending', pageSize: 10, }, }"
         }
       ],
       "exports": [
@@ -1200,7 +1219,7 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "attribute": "width"
             },
             {
@@ -1210,7 +1229,7 @@
                 "text": "string"
               },
               "default": "'700px'",
-              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "attribute": "height"
             },
             {
@@ -1242,6 +1261,16 @@
               "default": "'descending'",
               "description": "The initial sort direction of the table.",
               "attribute": "initialSortDirection"
+            },
+            {
+              "kind": "field",
+              "name": "pageSize",
+              "type": {
+                "text": "boolean | number"
+              },
+              "default": "false",
+              "description": "The maximum number of rows to display in the table view.\nSet to `false` to disable pagination. Set to `true` to enable pagination with a default limit (10).",
+              "attribute": "pageSize"
             }
           ],
           "attributes": [
@@ -1278,7 +1307,7 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "fieldName": "width"
             },
             {
@@ -1287,7 +1316,7 @@
                 "text": "string"
               },
               "default": "'700px'",
-              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "fieldName": "height"
             },
             {
@@ -1316,6 +1345,15 @@
               "default": "'descending'",
               "description": "The initial sort direction of the table.",
               "fieldName": "initialSortDirection"
+            },
+            {
+              "name": "pageSize",
+              "type": {
+                "text": "boolean | number"
+              },
+              "default": "false",
+              "description": "The maximum number of rows to display in the table view.\nSet to `false` to disable pagination. Set to `true` to enable pagination with a default limit (10).",
+              "fieldName": "pageSize"
             }
           ],
           "superclass": {
@@ -1355,7 +1393,7 @@
           "type": {
             "text": "Meta<Required<MutationComparisonProps>>"
           },
-          "default": "{ title: 'Visualization/Mutation comparison', component: 'gs-mutation-comparison', argTypes: { variants: { control: 'object' }, sequenceType: { options: ['nucleotide', 'amino acid'], control: { type: 'radio' }, }, views: { options: ['table', 'venn'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, headline: { control: 'text' }, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
+          "default": "{ title: 'Visualization/Mutation comparison', component: 'gs-mutation-comparison', argTypes: { lapisFilters: { control: 'object' }, sequenceType: { options: ['nucleotide', 'amino acid'], control: { type: 'radio' }, }, views: { options: ['table', 'venn'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, headline: { control: 'text' }, pageSize: { control: 'object' }, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
@@ -1363,7 +1401,7 @@
           "type": {
             "text": "StoryObj<Required<MutationComparisonProps>>"
           },
-          "default": "{ ...Template, args: { variants: [ { displayName: 'Some variant', lapisFilter: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo }, }, { displayName: 'Other variant', lapisFilter: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateFrom, dateTo, }, }, ], sequenceType: 'nucleotide', views: ['table', 'venn'], width: '100%', height: '700px', headline: 'Mutation comparison', }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'nucleotideMutationsSomeVariant', url: NUCLEOTIDE_MUTATIONS_ENDPOINT, body: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo, minProportion: 0, }, }, response: { status: 200, body: nucleotideMutationsSomeVariant, }, }, { matcher: { name: 'nucleotideMutationsOtherVariant', url: NUCLEOTIDE_MUTATIONS_ENDPOINT, body: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateFrom, dateTo, minProportion: 0, }, }, response: { status: 200, body: nucleotideMutationsOtherVariant, }, }, ], }, }, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-comparison'); await step('Min and max proportions should be 50% and 100%', async () => { const minInput = () => canvas.getAllByLabelText('%')[0]; const maxInput = () => canvas.getAllByLabelText('%')[1]; await waitFor(() => expect(minInput()).toHaveValue(50)); await waitFor(() => expect(maxInput()).toHaveValue(100)); }); }, }"
+          "default": "{ ...Template, args: { lapisFilters: [ { displayName: 'Some dataset', lapisFilter: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo }, }, { displayName: 'Other dataset', lapisFilter: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateFrom, dateTo, }, }, ], sequenceType: 'nucleotide', views: ['table', 'venn'], width: '100%', height: '700px', headline: 'Mutation comparison', pageSize: 10, }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'nucleotideMutationsSomeDataset', url: NUCLEOTIDE_MUTATIONS_ENDPOINT, body: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo, minProportion: 0, }, }, response: { status: 200, body: nucleotideMutationsSomeDataset, }, }, { matcher: { name: 'nucleotideMutationsOtherDataset', url: NUCLEOTIDE_MUTATIONS_ENDPOINT, body: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateFrom, dateTo, minProportion: 0, }, }, response: { status: 200, body: nucleotideMutationsOtherDataset, }, }, ], }, }, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-comparison'); await step('Min and max proportions should be 50% and 100%', async () => { const minInput = () => canvas.getAllByLabelText('%')[0]; const maxInput = () => canvas.getAllByLabelText('%')[1]; await waitFor(() => expect(minInput()).toHaveValue(50)); await waitFor(() => expect(maxInput()).toHaveValue(100)); }); }, }"
         },
         {
           "kind": "variable",
@@ -1407,18 +1445,18 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "## Context\n\nThis component allows to compare mutations between different variants.\nA variant is defined by its LAPIS filter.\n\nIt only shows substitutions and deletions, it does not show insertions.\n\n## Views\n\n### Table View\n\nThe table view shows mutations\nand the proportions with which the mutation occurs in the respective variant.\nIt only shows mutations that are present in at least one of the variants\nand where the proportion is within the selected proportion interval for at least one variant.\n\n### Venn View\n\nThe Venn view shows the overlap of mutations between the variants in a Venn diagram.\nA variant is considered to have a certain mutation,\nif the proportion of the mutation in the variant is within the selected proportion interval.\nThus, changing the proportion interval may change a mutations from being \"common\" between variant\nto being \"for one variant only\".",
+          "description": "## Context\n\nThis component allows to compare mutations between two different datasets.\nThe datasets are selected by LAPIS filters.\n\nIt only shows substitutions and deletions, it does not show insertions.\n\n## Views\n\n### Table View\n\nThe table view shows mutations and the proportions with which the mutation occurs in the respective data subsets.\nIt only shows mutations that are present in at least one of the data subsets\nand where the proportion is within the selected proportion interval for at least one data subset.\n\n### Venn View\n\nThe Venn view shows the overlap of mutations between the datasets in a Venn diagram.\nA dataset is considered to have a certain mutation, if the proportion of the mutation in the dataset is within the\nselected proportion interval.\nThus, changing the proportion interval may change a mutations from being \"common\" between the datasets\nto being \"for one dataset only\".",
           "name": "MutationComparisonComponent",
           "members": [
             {
               "kind": "field",
-              "name": "variants",
+              "name": "lapisFilters",
               "type": {
                 "text": "{\n        lapisFilter: Record<string, string | number | null | boolean>;\n        displayName: string;\n    }[]"
               },
               "default": "[]",
-              "description": "Required.\n\nAn array of variants to compare.\n\nThe `lapisFilter` will be sent as is to LAPIS to filter the mutation data.\nIt must be a valid LAPIS filter object.\n\nThe `displayName` will be used as the label for the variant in the views.\nIt should be human-readable.",
-              "attribute": "variants"
+              "description": "Required.\n\nAn array of LAPIS filters to select the data to compare.\n\nThe `lapisFilter` will be sent as is to LAPIS to filter the mutation data.\nIt must be a valid LAPIS filter object.\n\nThe `displayName` will be used as the label for the filtered dataset in the views.\nIt should be human-readable.",
+              "attribute": "lapisFilters"
             },
             {
               "kind": "field",
@@ -1447,7 +1485,7 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "attribute": "width"
             },
             {
@@ -1457,7 +1495,7 @@
                 "text": "string"
               },
               "default": "'700px'",
-              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "attribute": "height"
             },
             {
@@ -1469,17 +1507,27 @@
               "default": "'Mutation comparison'",
               "description": "The headline of the component. Set to an empty string to hide the headline.",
               "attribute": "headline"
+            },
+            {
+              "kind": "field",
+              "name": "pageSize",
+              "type": {
+                "text": "boolean | number"
+              },
+              "default": "false",
+              "description": "The maximum number of rows to display in the table view.\nSet to `false` to disable pagination. Set to `true` to enable pagination with a default limit (10).",
+              "attribute": "pageSize"
             }
           ],
           "attributes": [
             {
-              "name": "variants",
+              "name": "lapisFilters",
               "type": {
                 "text": "{\n        lapisFilter: Record<string, string | number | null | boolean>;\n        displayName: string;\n    }[]"
               },
               "default": "[]",
-              "description": "Required.\n\nAn array of variants to compare.\n\nThe `lapisFilter` will be sent as is to LAPIS to filter the mutation data.\nIt must be a valid LAPIS filter object.\n\nThe `displayName` will be used as the label for the variant in the views.\nIt should be human-readable.",
-              "fieldName": "variants"
+              "description": "Required.\n\nAn array of LAPIS filters to select the data to compare.\n\nThe `lapisFilter` will be sent as is to LAPIS to filter the mutation data.\nIt must be a valid LAPIS filter object.\n\nThe `displayName` will be used as the label for the filtered dataset in the views.\nIt should be human-readable.",
+              "fieldName": "lapisFilters"
             },
             {
               "name": "sequenceType",
@@ -1505,7 +1553,7 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "fieldName": "width"
             },
             {
@@ -1514,7 +1562,7 @@
                 "text": "string"
               },
               "default": "'700px'",
-              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "fieldName": "height"
             },
             {
@@ -1525,6 +1573,15 @@
               "default": "'Mutation comparison'",
               "description": "The headline of the component. Set to an empty string to hide the headline.",
               "fieldName": "headline"
+            },
+            {
+              "name": "pageSize",
+              "type": {
+                "text": "boolean | number"
+              },
+              "default": "false",
+              "description": "The maximum number of rows to display in the table view.\nSet to `false` to disable pagination. Set to `true` to enable pagination with a default limit (10).",
+              "fieldName": "pageSize"
             }
           ],
           "superclass": {
@@ -1564,7 +1621,7 @@
           "type": {
             "text": "Meta<Required<MutationsProps>>"
           },
-          "default": "{ title: 'Visualization/Mutations', component: 'gs-mutations', argTypes: { variant: { control: 'object' }, sequenceType: { options: ['nucleotide', 'amino acid'], control: { type: 'radio' }, }, views: { options: ['table', 'grid', 'insertions'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, headline: { control: 'text' }, }, args: { variant: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo: '2022-01-01' }, sequenceType: 'nucleotide', views: ['grid', 'table', 'insertions'], width: '100%', height: '700px', headline: 'Mutations', }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
+          "default": "{ title: 'Visualization/Mutations', component: 'gs-mutations', argTypes: { lapisFilter: { control: 'object' }, sequenceType: { options: ['nucleotide', 'amino acid'], control: { type: 'radio' }, }, views: { options: ['table', 'grid', 'insertions'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, headline: { control: 'text' }, pageSize: { control: 'object' }, }, args: { 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: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
@@ -1632,18 +1689,18 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "## Context\n\nThis component displays mutations (substitutions, deletions and insertions) for a given variant.\n\n## Views\n\n### Table View\n\nThe table view shows all substitutions and deletions for the given variant.\nIt shows the type (substitution or deletion), the total count of the mutation\nand the proportion of the mutation in the variant.\nThe proportion is relative to the total number of sequences matching\nthe specified sequence filters with non-ambiguous reads at that position.\n\nThe proportion interval filter can be used to filter the displayed mutations on client side.\n\n### Grid View\n\nThe grid view shows the proportion of each sequence symbol (nucleotide or amino acid) for each position that has a mutation.\nOnly positions with at least one mutation in the selected proportion interval are shown.\n\n### Insertions View\n\nThe insertions view shows the count of all insertions for the given variant.",
+          "description": "## Context\n\nThis component displays mutations (substitutions, deletions and insertions) for a dataset selected by a LAPIS filter.\n\n## Views\n\n### Table View\n\nThe table view shows all substitutions and deletions for the dataset.\nIt shows the type (substitution or deletion), the total count of the mutation\nand the proportion of the mutation in the dataset.\nThe proportion is relative to the total number of sequences matching\nthe specified sequence filters with non-ambiguous reads at that position.\n\nThe proportion interval filter can be used to filter the displayed mutations on client side.\n\n### Grid View\n\nThe grid view shows the proportion of each sequence symbol (nucleotide or amino acid) for each position that has a mutation.\nOnly positions with at least one mutation in the selected proportion interval are shown.\n\n### Insertions View\n\nThe insertions view shows the count of all insertions for the dataset.",
           "name": "MutationsComponent",
           "members": [
             {
               "kind": "field",
-              "name": "variant",
+              "name": "lapisFilter",
               "type": {
                 "text": "Record<string, string | number | null | boolean>"
               },
               "default": "{}",
-              "description": "Required.\n\nThe `variant` will be sent as is to LAPIS to filter the mutation data.\nIt must be a valid LAPIS filter object.",
-              "attribute": "variant"
+              "description": "Required.\n\nLAPIS filter to select the displayed data.",
+              "attribute": "lapisFilter"
             },
             {
               "kind": "field",
@@ -1672,7 +1729,7 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "attribute": "width"
             },
             {
@@ -1682,7 +1739,7 @@
                 "text": "string"
               },
               "default": "'700px'",
-              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "attribute": "height"
             },
             {
@@ -1694,17 +1751,27 @@
               "default": "'Mutations'",
               "description": "The headline of the component. Set to an empty string to hide the headline.",
               "attribute": "headline"
+            },
+            {
+              "kind": "field",
+              "name": "pageSize",
+              "type": {
+                "text": "boolean | number"
+              },
+              "default": "false",
+              "description": "The maximum number of rows to display in the table view.\nSet to `false` to disable pagination. Set to `true` to enable pagination with a default limit (10).",
+              "attribute": "pageSize"
             }
           ],
           "attributes": [
             {
-              "name": "variant",
+              "name": "lapisFilter",
               "type": {
                 "text": "Record<string, string | number | null | boolean>"
               },
               "default": "{}",
-              "description": "Required.\n\nThe `variant` will be sent as is to LAPIS to filter the mutation data.\nIt must be a valid LAPIS filter object.",
-              "fieldName": "variant"
+              "description": "Required.\n\nLAPIS filter to select the displayed data.",
+              "fieldName": "lapisFilter"
             },
             {
               "name": "sequenceType",
@@ -1730,7 +1797,7 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "fieldName": "width"
             },
             {
@@ -1739,7 +1806,7 @@
                 "text": "string"
               },
               "default": "'700px'",
-              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "fieldName": "height"
             },
             {
@@ -1750,6 +1817,15 @@
               "default": "'Mutations'",
               "description": "The headline of the component. Set to an empty string to hide the headline.",
               "fieldName": "headline"
+            },
+            {
+              "name": "pageSize",
+              "type": {
+                "text": "boolean | number"
+              },
+              "default": "false",
+              "description": "The maximum number of rows to display in the table view.\nSet to `false` to disable pagination. Set to `true` to enable pagination with a default limit (10).",
+              "fieldName": "pageSize"
             }
           ],
           "superclass": {
@@ -1787,49 +1863,49 @@
           "kind": "variable",
           "name": "meta",
           "type": {
-            "text": "Meta<Required<PrevalenceOverTimeProps>>"
+            "text": "Meta<Required<PrevalenceOverTimeComponentProps>>"
           },
-          "default": "{ title: 'Visualization/Prevalence over time', component: 'gs-prevalence-over-time', argTypes: { numerator: { control: 'object' }, denominator: { control: 'object' }, granularity: { options: ['day', 'week', 'month', 'year'], control: { type: 'radio' }, }, smoothingWindow: { control: 'number' }, views: { options: ['bar', 'line', 'bubble', 'table'], control: { type: 'check' }, }, confidenceIntervalMethods: { options: ['wilson'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, headline: { control: 'text' }, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
+          "default": "{ title: 'Visualization/Prevalence over time', component: 'gs-prevalence-over-time', argTypes: { numeratorFilter: { control: 'object' }, denominatorFilter: { control: 'object' }, granularity: { options: ['day', 'week', 'month', 'year'], control: { type: 'radio' }, }, smoothingWindow: { control: 'number' }, views: { options: ['bar', 'line', 'bubble', 'table'], control: { type: 'check' }, }, confidenceIntervalMethods: { options: ['wilson'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, headline: { control: 'text' }, pageSize: { control: 'object' }, yAxisMaxLinear: { control: 'object' }, yAxisMaxLogarithmic: { control: 'object' }, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
-          "name": "TwoVariants",
+          "name": "TwoDatasets",
           "type": {
-            "text": "StoryObj<Required<PrevalenceOverTimeProps>>"
+            "text": "StoryObj<Required<PrevalenceOverTimeComponentProps>>"
           },
-          "default": "{ ...Template, args: { numerator: [ { displayName: 'EG', lapisFilter: { country: 'USA', pangoLineage: 'EG*', dateFrom: '2023-01-01' } }, { displayName: 'JN.1', lapisFilter: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01' } }, ], denominator: { country: 'USA', dateFrom: '2023-01-01' }, granularity: 'month', smoothingWindow: 0, views: ['bar', 'line', 'bubble', 'table'], confidenceIntervalMethods: ['wilson'], width: '100%', height: '700px', headline: 'Prevalence over time', lapisDateField: 'date', }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'numeratorEG', url: AGGREGATED_ENDPOINT, body: { country: 'USA', pangoLineage: 'EG*', dateFrom: '2023-01-01', fields: ['date'], }, }, response: { status: 200, body: numeratorEG, }, }, { matcher: { name: 'numeratorJN1', url: AGGREGATED_ENDPOINT, body: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01', fields: ['date'], }, }, response: { status: 200, body: numeratorJN1, }, }, { matcher: { name: 'denominator', url: AGGREGATED_ENDPOINT, body: { country: 'USA', dateFrom: '2023-01-01', fields: ['date'], }, }, response: { status: 200, body: denominator, }, }, ], }, }, }"
+          "default": "{ ...Template, args: { numeratorFilter: [ { displayName: 'EG', lapisFilter: { country: 'USA', pangoLineage: 'EG*', dateFrom: '2023-01-01' } }, { displayName: 'JN.1', lapisFilter: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01' } }, ], denominatorFilter: { country: 'USA', dateFrom: '2023-01-01' }, granularity: 'month', smoothingWindow: 0, views: ['bar', 'line', 'bubble', 'table'], confidenceIntervalMethods: ['wilson'], width: '100%', height: '700px', headline: 'Prevalence over time', lapisDateField: 'date', pageSize: 10, yAxisMaxLinear: 1, yAxisMaxLogarithmic: 'limitTo1', }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'numeratorEG', url: AGGREGATED_ENDPOINT, body: { country: 'USA', pangoLineage: 'EG*', dateFrom: '2023-01-01', fields: ['date'], }, }, response: { status: 200, body: numeratorFilterEG, }, }, { matcher: { name: 'numeratorJN1', url: AGGREGATED_ENDPOINT, body: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01', fields: ['date'], }, }, response: { status: 200, body: numeratorFilterJN1, }, }, { matcher: { name: 'denominator', url: AGGREGATED_ENDPOINT, body: { country: 'USA', dateFrom: '2023-01-01', fields: ['date'], }, }, response: { status: 200, body: denominatorFilter, }, }, ], }, }, }"
         },
         {
           "kind": "variable",
-          "name": "OneVariant",
+          "name": "OneDataset",
           "type": {
-            "text": "StoryObj<Required<PrevalenceOverTimeProps>>"
+            "text": "StoryObj<Required<PrevalenceOverTimeComponentProps>>"
           },
-          "default": "{ ...Template, args: { numerator: { displayName: 'EG', lapisFilter: { country: 'USA', pangoLineage: 'BA.2.86*', dateFrom: '2023-10-01' }, }, denominator: { country: 'USA', dateFrom: '2023-10-01' }, granularity: 'day', smoothingWindow: 7, views: ['bar', 'line', 'bubble', 'table'], confidenceIntervalMethods: ['wilson'], width: '100%', height: '700px', headline: 'Prevalence over time', lapisDateField: 'date', }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'numeratorOneVariant', url: AGGREGATED_ENDPOINT, body: { country: 'USA', pangoLineage: 'BA.2.86*', dateFrom: '2023-10-01', fields: ['date'], }, }, response: { status: 200, body: numeratorOneVariant, }, }, { matcher: { name: 'denominatorOneVariant', url: AGGREGATED_ENDPOINT, body: { country: 'USA', dateFrom: '2023-10-01', fields: ['date'], }, }, response: { status: 200, body: denominatorOneVariant, }, }, ], }, }, }"
+          "default": "{ ...Template, args: { numeratorFilter: { displayName: 'EG', lapisFilter: { country: 'USA', pangoLineage: 'BA.2.86*', dateFrom: '2023-10-01' }, }, denominatorFilter: { country: 'USA', dateFrom: '2023-10-01' }, granularity: 'week', smoothingWindow: 2, views: ['bar', 'line', 'bubble', 'table'], confidenceIntervalMethods: ['wilson'], width: '100%', height: '700px', headline: 'Prevalence over time', lapisDateField: 'date', pageSize: 10, yAxisMaxLinear: 1, yAxisMaxLogarithmic: 'limitTo1', }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'numeratorOneDataset', url: AGGREGATED_ENDPOINT, body: { country: 'USA', pangoLineage: 'BA.2.86*', dateFrom: '2023-10-01', fields: ['date'], }, }, response: { status: 200, body: numeratorFilterOneDataset, }, }, { matcher: { name: 'denominatorOneDataset', url: AGGREGATED_ENDPOINT, body: { country: 'USA', dateFrom: '2023-10-01', fields: ['date'], }, }, response: { status: 200, body: denominatorFilterOneDataset, }, }, ], }, }, }"
         },
         {
           "kind": "variable",
-          "name": "OneVariantOnLineTab",
+          "name": "OneDatasetOnLineTab",
           "type": {
-            "text": "StoryObj<Required<PrevalenceOverTimeProps>>"
+            "text": "StoryObj<Required<PrevalenceOverTimeComponentProps>>"
           },
-          "default": "{ ...OneVariant, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-prevalence-over-time'); await waitFor(() => expect(canvas.getByRole('button', { name: 'Line' })).toBeInTheDocument()); await fireEvent.click(canvas.getByRole('button', { name: 'Line' })); }, }"
+          "default": "{ ...OneDataset, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-prevalence-over-time'); await waitFor(() => expect(canvas.getByRole('button', { name: 'Line' })).toBeInTheDocument()); await fireEvent.click(canvas.getByRole('button', { name: 'Line' })); }, }"
         },
         {
           "kind": "variable",
-          "name": "OneVariantOnBubbleTab",
+          "name": "OneDatasetOnBubbleTab",
           "type": {
-            "text": "StoryObj<Required<PrevalenceOverTimeProps>>"
+            "text": "StoryObj<Required<PrevalenceOverTimeComponentProps>>"
           },
-          "default": "{ ...OneVariant, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-prevalence-over-time'); await waitFor(() => expect(canvas.getByRole('button', { name: 'Bubble' })).toBeInTheDocument()); await fireEvent.click(canvas.getByRole('button', { name: 'Bubble' })); }, }"
+          "default": "{ ...OneDataset, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-prevalence-over-time'); await waitFor(() => expect(canvas.getByRole('button', { name: 'Bubble' })).toBeInTheDocument()); await fireEvent.click(canvas.getByRole('button', { name: 'Bubble' })); }, }"
         },
         {
           "kind": "variable",
-          "name": "OneVariantOnTableTab",
+          "name": "OneDatasetOnTableTab",
           "type": {
-            "text": "StoryObj<Required<PrevalenceOverTimeProps>>"
+            "text": "StoryObj<Required<PrevalenceOverTimeComponentProps>>"
           },
-          "default": "{ ...OneVariant, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-prevalence-over-time'); await waitFor(() => expect(canvas.getByRole('button', { name: 'Table' })).toBeInTheDocument()); await fireEvent.click(canvas.getByRole('button', { name: 'Table' })); }, }"
+          "default": "{ ...OneDataset, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-prevalence-over-time'); await waitFor(() => expect(canvas.getByRole('button', { name: 'Table' })).toBeInTheDocument()); await fireEvent.click(canvas.getByRole('button', { name: 'Table' })); }, }"
         }
       ],
       "exports": [
@@ -1843,41 +1919,41 @@
         },
         {
           "kind": "js",
-          "name": "TwoVariants",
+          "name": "TwoDatasets",
           "declaration": {
-            "name": "TwoVariants",
+            "name": "TwoDatasets",
             "module": "src/web-components/visualization/gs-prevalence-over-time.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "OneVariant",
+          "name": "OneDataset",
           "declaration": {
-            "name": "OneVariant",
+            "name": "OneDataset",
             "module": "src/web-components/visualization/gs-prevalence-over-time.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "OneVariantOnLineTab",
+          "name": "OneDatasetOnLineTab",
           "declaration": {
-            "name": "OneVariantOnLineTab",
+            "name": "OneDatasetOnLineTab",
             "module": "src/web-components/visualization/gs-prevalence-over-time.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "OneVariantOnBubbleTab",
+          "name": "OneDatasetOnBubbleTab",
           "declaration": {
-            "name": "OneVariantOnBubbleTab",
+            "name": "OneDatasetOnBubbleTab",
             "module": "src/web-components/visualization/gs-prevalence-over-time.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "OneVariantOnTableTab",
+          "name": "OneDatasetOnTableTab",
           "declaration": {
-            "name": "OneVariantOnTableTab",
+            "name": "OneDatasetOnTableTab",
             "module": "src/web-components/visualization/gs-prevalence-over-time.stories.ts"
           }
         }
@@ -1889,28 +1965,28 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "## Context\n\nThis component displays the prevalence over time of one or more variants.\nThe prevalence is calculated as the ratio of the number of cases of each variant given as `numerator`\nto the number of cases of the variant given as `denominator`.\n\nIn the chart views,\n- the user can select whether to display a confidence interval (not available in the bubble chart).\n  The confidence interval is calculated using [Wilson score interval](https://en.wikipedia.org/wiki/Binomial_proportion_confidence_interval),\n  with a confidence level of 95%.\n- the x-axis shows time steps in the selected `granularity`.\n- the user can select the y-axis scale (linear, logistic, logit).\n\n## Views\n\n### Bar View\n\nDisplays the prevalence over time as a bar chart.\nShows a bar for each variant in the `numerator` on every time step.\n\n### Line View\n\nDisplays the prevalence over time as a line chart.\nEach data point is connected for better visibility.\nShows a line for each variant in the `numerator`.\n\n### Bubble View\n\nDisplays the prevalence over time as a bubble chart.\nThe size of the bubbles represents the number of cases of the `denominator` variant.\nThe height of the bubbles represents the prevalence of the `numerator` variants.\n\n### Table View\n\nDisplays the prevalence over time as a table with one row per time point.",
+          "description": "## Context\n\nThis component displays the prevalence over time of one or more datasets, selected by LAPIS filters.\nThe prevalence is calculated as the ratio of the number of cases of each dataset to the number of cases of a reference dataset.\nThe reference dataset is also selected by a LAPIS filter.\n\nIn the chart views,\n- the user can select whether to display a confidence interval (not available in the bubble chart).\n  The confidence interval is calculated using [Wilson score interval](https://en.wikipedia.org/wiki/Binomial_proportion_confidence_interval),\n  with a confidence level of 95%.\n- the x-axis shows time steps in the selected `granularity`.\n- the user can select the y-axis scale (linear, logistic, logit).\n\n## Views\n\n### Bar View\n\nDisplays the prevalence over time as a bar chart.\nShows a bar for each dataset of the `numeratorFilter` on every time step.\n\n### Line View\n\nDisplays the prevalence over time as a line chart.\nEach data point is connected for better visibility.\nShows a line for each dataset of the `numeratorFilter`.\n\n### Bubble View\n\nDisplays the prevalence over time as a bubble chart.\nThe size of the bubbles represents the number of cases of the reference, defined by the `denominatorFilter`.\nThe height of the bubbles represents the prevalence of the datasets selected by the `numeratorFilters`.\n\n### Table View\n\nDisplays the prevalence over time as a table with one row per time point.",
           "name": "PrevalenceOverTimeComponent",
           "members": [
             {
               "kind": "field",
-              "name": "numerator",
+              "name": "numeratorFilter",
               "type": {
-                "text": "{\n            lapisFilter: Record<string, string | number | null | boolean>;\n            displayName: string;\n        }\n        | {\n            lapisFilter: Record<string, string | number | null | boolean>;\n            displayName: string;\n        }[]"
+                "text": "{\n            lapisFilter: Record<string, string | number | null | boolean>;\n            displayName: string;\n        }\n        | {\n        lapisFilter: Record<string, string | number | null | boolean>;\n        displayName: string;\n    }[]"
               },
               "default": "{ displayName: '', lapisFilter: {} }",
-              "description": "Required.\n\nEither a single variant or an array of variants to compare.\nThis must be a valid LAPIS filter object with an additional `displayName` property\nwhich will be used as the label for the variant in the views,\nor an array of such objects.",
-              "attribute": "numerator"
+              "description": "Required.\nEither a LAPIS filter or an array of LAPIS filters to calculate the prevalence for.\n\nThe `lapisFilter` will be sent as is to LAPIS to select the data.\nIt must be a valid LAPIS filter object.\n\nThe `displayName` will be used as the label the prevalence in the views.\nIt should be human-readable.",
+              "attribute": "numeratorFilter"
             },
             {
               "kind": "field",
-              "name": "denominator",
+              "name": "denominatorFilter",
               "type": {
                 "text": "Record<string, string | number | null | boolean>"
               },
               "default": "{}",
-              "description": "Required.\n\nThe variant that the variants in `numerator` are compared to.",
-              "attribute": "denominator"
+              "description": "Required.\n\nThe LAPIS filter, to select the data of the reference.\nIt must be a valid LAPIS filter object.",
+              "attribute": "denominatorFilter"
             },
             {
               "kind": "field",
@@ -1969,7 +2045,7 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "attribute": "width"
             },
             {
@@ -1979,7 +2055,7 @@
                 "text": "string"
               },
               "default": "'700px'",
-              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "attribute": "height"
             },
             {
@@ -1991,26 +2067,56 @@
               "default": "'date'",
               "description": "Required.\n\nThe LAPIS field that the data should be aggregated by.\nThe values will be used on the x-axis of the diagram.\nMust be a field of type `date` in LAPIS.",
               "attribute": "lapisDateField"
+            },
+            {
+              "kind": "field",
+              "name": "pageSize",
+              "type": {
+                "text": "boolean | number"
+              },
+              "default": "false",
+              "description": "The maximum number of rows to display in the table view.\nSet to `false` to disable pagination. Set to `true` to enable pagination with a default limit (10).",
+              "attribute": "pageSize"
+            },
+            {
+              "kind": "field",
+              "name": "yAxisMaxLinear",
+              "type": {
+                "text": "'maxInData' | 'limitTo1' | number"
+              },
+              "default": "1",
+              "description": "The maximum value for the y-axis on all graphs in linear view.\nIf set to a number, the maximum value is set to this number.\nIf set to `maxInData`, the maximum value is set to the maximum value in the data.\nIf set to `limitTo1`, the maximum value is set to `min(1, the maximum value in the data)`.\nIf not set, the maximum value is set to the default value (1).",
+              "attribute": "yAxisMaxLinear"
+            },
+            {
+              "kind": "field",
+              "name": "yAxisMaxLogarithmic",
+              "type": {
+                "text": "'maxInData' | 'limitTo1' | number"
+              },
+              "default": "1",
+              "description": "The maximum value for the y-axis on all graphs in logarithmic view.\nIf set to a number, the maximum value is set to this number.\nIf set to `maxInData`, the maximum value is set to the maximum value in the data.\nIf set to `limitTo1`, the maximum value is set to `min(1, the maximum value in the data)`.\nIf not set, the maximum value is set to the default value (1).",
+              "attribute": "yAxisMaxLogarithmic"
             }
           ],
           "attributes": [
             {
-              "name": "numerator",
+              "name": "numeratorFilter",
               "type": {
-                "text": "{\n            lapisFilter: Record<string, string | number | null | boolean>;\n            displayName: string;\n        }\n        | {\n            lapisFilter: Record<string, string | number | null | boolean>;\n            displayName: string;\n        }[]"
+                "text": "{\n            lapisFilter: Record<string, string | number | null | boolean>;\n            displayName: string;\n        }\n        | {\n        lapisFilter: Record<string, string | number | null | boolean>;\n        displayName: string;\n    }[]"
               },
               "default": "{ displayName: '', lapisFilter: {} }",
-              "description": "Required.\n\nEither a single variant or an array of variants to compare.\nThis must be a valid LAPIS filter object with an additional `displayName` property\nwhich will be used as the label for the variant in the views,\nor an array of such objects.",
-              "fieldName": "numerator"
+              "description": "Required.\nEither a LAPIS filter or an array of LAPIS filters to calculate the prevalence for.\n\nThe `lapisFilter` will be sent as is to LAPIS to select the data.\nIt must be a valid LAPIS filter object.\n\nThe `displayName` will be used as the label the prevalence in the views.\nIt should be human-readable.",
+              "fieldName": "numeratorFilter"
             },
             {
-              "name": "denominator",
+              "name": "denominatorFilter",
               "type": {
                 "text": "Record<string, string | number | null | boolean>"
               },
               "default": "{}",
-              "description": "Required.\n\nThe variant that the variants in `numerator` are compared to.",
-              "fieldName": "denominator"
+              "description": "Required.\n\nThe LAPIS filter, to select the data of the reference.\nIt must be a valid LAPIS filter object.",
+              "fieldName": "denominatorFilter"
             },
             {
               "name": "granularity",
@@ -2063,7 +2169,7 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "fieldName": "width"
             },
             {
@@ -2072,7 +2178,7 @@
                 "text": "string"
               },
               "default": "'700px'",
-              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "fieldName": "height"
             },
             {
@@ -2083,6 +2189,33 @@
               "default": "'date'",
               "description": "Required.\n\nThe LAPIS field that the data should be aggregated by.\nThe values will be used on the x-axis of the diagram.\nMust be a field of type `date` in LAPIS.",
               "fieldName": "lapisDateField"
+            },
+            {
+              "name": "pageSize",
+              "type": {
+                "text": "boolean | number"
+              },
+              "default": "false",
+              "description": "The maximum number of rows to display in the table view.\nSet to `false` to disable pagination. Set to `true` to enable pagination with a default limit (10).",
+              "fieldName": "pageSize"
+            },
+            {
+              "name": "yAxisMaxLinear",
+              "type": {
+                "text": "'maxInData' | 'limitTo1' | number"
+              },
+              "default": "1",
+              "description": "The maximum value for the y-axis on all graphs in linear view.\nIf set to a number, the maximum value is set to this number.\nIf set to `maxInData`, the maximum value is set to the maximum value in the data.\nIf set to `limitTo1`, the maximum value is set to `min(1, the maximum value in the data)`.\nIf not set, the maximum value is set to the default value (1).",
+              "fieldName": "yAxisMaxLinear"
+            },
+            {
+              "name": "yAxisMaxLogarithmic",
+              "type": {
+                "text": "'maxInData' | 'limitTo1' | number"
+              },
+              "default": "1",
+              "description": "The maximum value for the y-axis on all graphs in logarithmic view.\nIf set to a number, the maximum value is set to this number.\nIf set to `maxInData`, the maximum value is set to the maximum value in the data.\nIf set to `limitTo1`, the maximum value is set to `min(1, the maximum value in the data)`.\nIf not set, the maximum value is set to the default value (1).",
+              "fieldName": "yAxisMaxLogarithmic"
             }
           ],
           "superclass": {
@@ -2120,17 +2253,17 @@
           "kind": "variable",
           "name": "meta",
           "type": {
-            "text": "Meta<RelativeGrowthAdvantageProps>"
+            "text": "Meta<RelativeGrowthAdvantageComponentProps>"
           },
-          "default": "{ title: 'Visualization/Relative growth advantage', component: 'gs-relative-growth-advantage', argTypes: { numerator: { control: 'object' }, denominator: { control: 'object' }, generationTime: { control: 'number' }, views: { options: ['line'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, headline: { control: 'text' }, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
+          "default": "{ title: 'Visualization/Relative growth advantage', component: 'gs-relative-growth-advantage', argTypes: { numeratorFilter: { control: 'object' }, denominatorFilter: { control: 'object' }, generationTime: { control: 'number' }, views: { options: ['line'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, headline: { control: 'text' }, yAxisMaxLinear: { control: 'object' }, yAxisMaxLogarithmic: { control: 'object' }, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
           "name": "Default",
           "type": {
-            "text": "StoryObj<Required<RelativeGrowthAdvantageProps>>"
+            "text": "StoryObj<Required<RelativeGrowthAdvantageComponentProps>>"
           },
-          "default": "{ ...Template, args: { numerator: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateFrom: '2020-12-01', dateTo: '2021-03-01' }, denominator: { country: 'Switzerland', dateFrom: '2020-12-01', dateTo: '2021-03-01' }, generationTime: 7, views: ['line'], width: '100%', height: '700px', headline: 'Relative growth advantage', lapisDateField: 'date', }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'numerator', url: AGGREGATED_ENDPOINT, body: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateFrom: '2020-12-01', dateTo: '2021-03-01', fields: ['date'], }, }, response: { status: 200, body: numerator, }, }, { matcher: { name: 'denominator', url: AGGREGATED_ENDPOINT, body: { country: 'Switzerland', dateFrom: '2020-12-01', dateTo: '2021-03-01', fields: ['date'], }, }, response: { status: 200, body: denominator, }, }, ], }, }, }"
+          "default": "{ ...Template, args: { numeratorFilter: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateFrom: '2020-12-01', dateTo: '2021-03-01', }, denominatorFilter: { country: 'Switzerland', dateFrom: '2020-12-01', dateTo: '2021-03-01' }, generationTime: 7, views: ['line'], width: '100%', height: '700px', headline: 'Relative growth advantage', lapisDateField: 'date', yAxisMaxLinear: 1, yAxisMaxLogarithmic: 'limitTo1', }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'numeratorFilter', url: AGGREGATED_ENDPOINT, body: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateFrom: '2020-12-01', dateTo: '2021-03-01', fields: ['date'], }, }, response: { status: 200, body: numeratorFilter, }, }, { matcher: { name: 'denominatorFilter', url: AGGREGATED_ENDPOINT, body: { country: 'Switzerland', dateFrom: '2020-12-01', dateTo: '2021-03-01', fields: ['date'], }, }, response: { status: 200, body: denominatorFilter, }, }, ], }, }, }"
         }
       ],
       "exports": [
@@ -2158,28 +2291,28 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "## Context\n\nFor this component, we assume a discrete time model, where new infections happen exactly every `generationTime` days.\nThis is what we call a \"generation\".\n\nThis component estimates the relative growth advantage of a variant by performing a logistic regression.\nBased on the inferred logistic growth rate, we derive the relative growth advantage (per generation).\n\nFor details on the scientific method, see:\nChen, Chaoran, et al. \"Quantification of the spread of SARS-CoV-2 variant B.1.1.7 in Switzerland.\" Epidemics (2021);\ndoi: [10.1016/j.epidem.2021.100480](https://doi.org/10.1016/j.epidem.2021.100480)\n\nThis component fetches aggregated data from LAPIS.\nThen the data is sent to `https://cov-spectrum.org/api/v2/computed/model/chen2021Fitness`\nwhich performs the logistic regression and calculates the relative growth advantage.\n\n## Views\n\n### Line View\n\nThe line view shows the relative growth advantage over time in a line chart.\nThe dots in the plot show the proportions of the focal variant (`numerator`) to the `denominator` variant\nfor every day as observed in the data.\nThe line shows a logistic curve fitted to the data points, including a 95% confidence interval.",
+          "description": "## Context\n\nFor this component, we assume a discrete time model, where new infections happen exactly every `generationTime` days.\nThis is what we call a \"generation\".\n\nThis component estimates the relative growth advantage of a variant (defined by its LAPIS filter) by performing a logistic regression.\nBased on the inferred logistic growth rate, we derive the relative growth advantage (per generation).\n\nFor details on the scientific method, see:\nChen, Chaoran, et al. \"Quantification of the spread of SARS-CoV-2 variant B.1.1.7 in Switzerland.\" Epidemics (2021);\ndoi: [10.1016/j.epidem.2021.100480](https://doi.org/10.1016/j.epidem.2021.100480)\n\nThis component fetches aggregated data from LAPIS.\nThen the data is sent to `https://cov-spectrum.org/api/v2/computed/model/chen2021Fitness`\nwhich performs the logistic regression and calculates the relative growth advantage.\n\n## Views\n\n### Line View\n\nThe line view shows the relative growth advantage over time in a line chart.\nThe dots in the plot show the proportions of the focal variant (defined by the `numeratorFilter`) to the baseline variant (defined by the `denominatorFilter`)\nfor every day as observed in the data.\nThe line shows a logistic curve fitted to the data points, including a 95% confidence interval.",
           "name": "RelativeGrowthAdvantageComponent",
           "members": [
             {
               "kind": "field",
-              "name": "numerator",
+              "name": "numeratorFilter",
               "type": {
                 "text": "Record<string, string | number | null | boolean>"
               },
               "default": "{}",
-              "description": "Required.\n\nThe LAPIS filter for the focal variant.",
-              "attribute": "numerator"
+              "description": "Required.\n\nLAPIS filter to select the data of the focal variant.\nIt must be a valid LAPIS filter object.",
+              "attribute": "numeratorFilter"
             },
             {
               "kind": "field",
-              "name": "denominator",
+              "name": "denominatorFilter",
               "type": {
                 "text": "Record<string, string | number | null | boolean>"
               },
               "default": "{}",
-              "description": "Required.\n\nThe LAPIS filter for the variant that the focal variant (`numerator`) should be compared to.",
-              "attribute": "denominator"
+              "description": "Required.\n\nLAPIS filter to select the data of the baseline variant.\nIt must be a valid LAPIS filter object.",
+              "attribute": "denominatorFilter"
             },
             {
               "kind": "field",
@@ -2218,7 +2351,7 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "attribute": "width"
             },
             {
@@ -2228,7 +2361,7 @@
                 "text": "string"
               },
               "default": "'700px'",
-              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "attribute": "height"
             },
             {
@@ -2240,26 +2373,46 @@
               "default": "'date'",
               "description": "Required.\n\nThe LAPIS field that the data should be aggregated by.\nThe values will be used on the x-axis of the diagram.\nMust be a field of type `date` in LAPIS.",
               "attribute": "lapisDateField"
+            },
+            {
+              "kind": "field",
+              "name": "yAxisMaxLinear",
+              "type": {
+                "text": "'maxInData' | 'limitTo1' | number"
+              },
+              "default": "1",
+              "description": "The maximum value for the y-axis on all graphs in linear view.\nIf set to a number, the maximum value is set to this number.\nIf set to `maxInData`, the maximum value is set to the maximum value in the data.\nIf set to `limitTo1`, the maximum value is set to `min(1, the maximum value in the data)`.\nIf not set, the maximum value is set to the default value (1).",
+              "attribute": "yAxisMaxLinear"
+            },
+            {
+              "kind": "field",
+              "name": "yAxisMaxLogarithmic",
+              "type": {
+                "text": "'maxInData' | 'limitTo1' | number"
+              },
+              "default": "1",
+              "description": "The maximum value for the y-axis on all graphs in logarithmic view.\nIf set to a number, the maximum value is set to this number.\nIf set to `maxInData`, the maximum value is set to the maximum value in the data.\nIf set to `limitTo1`, the maximum value is set to `min(1, the maximum value in the data)`.\nIf not set, the maximum value is set to the default value (1).",
+              "attribute": "yAxisMaxLogarithmic"
             }
           ],
           "attributes": [
             {
-              "name": "numerator",
+              "name": "numeratorFilter",
               "type": {
                 "text": "Record<string, string | number | null | boolean>"
               },
               "default": "{}",
-              "description": "Required.\n\nThe LAPIS filter for the focal variant.",
-              "fieldName": "numerator"
+              "description": "Required.\n\nLAPIS filter to select the data of the focal variant.\nIt must be a valid LAPIS filter object.",
+              "fieldName": "numeratorFilter"
             },
             {
-              "name": "denominator",
+              "name": "denominatorFilter",
               "type": {
                 "text": "Record<string, string | number | null | boolean>"
               },
               "default": "{}",
-              "description": "Required.\n\nThe LAPIS filter for the variant that the focal variant (`numerator`) should be compared to.",
-              "fieldName": "denominator"
+              "description": "Required.\n\nLAPIS filter to select the data of the baseline variant.\nIt must be a valid LAPIS filter object.",
+              "fieldName": "denominatorFilter"
             },
             {
               "name": "generationTime",
@@ -2294,7 +2447,7 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "fieldName": "width"
             },
             {
@@ -2303,7 +2456,7 @@
                 "text": "string"
               },
               "default": "'700px'",
-              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "fieldName": "height"
             },
             {
@@ -2314,6 +2467,24 @@
               "default": "'date'",
               "description": "Required.\n\nThe LAPIS field that the data should be aggregated by.\nThe values will be used on the x-axis of the diagram.\nMust be a field of type `date` in LAPIS.",
               "fieldName": "lapisDateField"
+            },
+            {
+              "name": "yAxisMaxLinear",
+              "type": {
+                "text": "'maxInData' | 'limitTo1' | number"
+              },
+              "default": "1",
+              "description": "The maximum value for the y-axis on all graphs in linear view.\nIf set to a number, the maximum value is set to this number.\nIf set to `maxInData`, the maximum value is set to the maximum value in the data.\nIf set to `limitTo1`, the maximum value is set to `min(1, the maximum value in the data)`.\nIf not set, the maximum value is set to the default value (1).",
+              "fieldName": "yAxisMaxLinear"
+            },
+            {
+              "name": "yAxisMaxLogarithmic",
+              "type": {
+                "text": "'maxInData' | 'limitTo1' | number"
+              },
+              "default": "1",
+              "description": "The maximum value for the y-axis on all graphs in logarithmic view.\nIf set to a number, the maximum value is set to this number.\nIf set to `maxInData`, the maximum value is set to the maximum value in the data.\nIf set to `limitTo1`, the maximum value is set to `min(1, the maximum value in the data)`.\nIf not set, the maximum value is set to the default value (1).",
+              "fieldName": "yAxisMaxLogarithmic"
             }
           ],
           "superclass": {