@genspectrum/dashboard-components 0.1.2 → 0.1.4

package/custom-elements.json

@@ -56,12 +56,44 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/web-components/app.ts",
+      "path": "src/web-components/app.stories.ts",
       "declarations": [
+        {
+          "kind": "variable",
+          "name": "meta",
+          "type": {
+            "text": "Meta"
+          },
+          "default": "{\n    title: 'Wrapper/App',\n    component: 'gs-app',\n    parameters: withComponentDocs({\n        fetchMock: {},\n        componentDocs: {\n            tag: 'gs-app',\n            opensShadowDom: false,\n            expectsChildren: true,\n            codeExample,\n        },\n    }),\n    decorators: [withActions],\n    tags: ['autodocs'],\n}"
+        },
+        {
+          "kind": "variable",
+          "name": "Default",
+          "type": {
+            "text": "StoryObj<{ lapis: string }>"
+          },
+          "default": "{\n    ...Template,\n    play: async ({ canvasElement }) => {\n        const canvas = within(canvasElement);\n\n        await waitFor(() => {\n            expect(canvas.getByText(LAPIS_URL)).toBeVisible();\n            expect(canvas.getByText('\"name\": \"ORF1a\",', { exact: false })).toBeVisible();\n        });\n    },\n}"
+        },
+        {
+          "kind": "variable",
+          "name": "DelayFetchingReferenceGenome",
+          "type": {
+            "text": "StoryObj<{ lapis: string }>"
+          },
+          "default": "{\n    ...Template,\n    parameters: {\n        fetchMock: {\n            mocks: [\n                {\n                    matcher: {\n                        name: 'referenceGenome',\n                        url: REFERENCE_GENOME_ENDPOINT,\n                    },\n                    response: {\n                        status: 200,\n                        body: referenceGenome,\n                    },\n                    options: {\n                        delay: 5000,\n                    },\n                },\n            ],\n        },\n    },\n}"
+        },
+        {
+          "kind": "variable",
+          "name": "FailsToFetchReferenceGenome",
+          "type": {
+            "text": "StoryObj<{ lapis: string }>"
+          },
+          "default": "{\n    ...Template,\n    args: {\n        lapis: 'definitely-not-a-valid-url',\n    },\n    play: async ({ canvasElement }) => {\n        const canvas = within(canvasElement);\n\n        await waitFor(() => {\n            expect(canvas.getByText('Error')).toBeVisible();\n        });\n    },\n}"
+        },
         {
           "kind": "class",
           "description": "",
-          "name": "App",
+          "name": "AppDisplay",
           "members": [
             {
               "kind": "field",
@@ -69,8 +101,7 @@
               "type": {
                 "text": "string"
               },
-              "default": "''",
-              "attribute": "lapis"
+              "default": "''"
             },
             {
               "kind": "field",
@@ -79,16 +110,77 @@
                 "text": "ReferenceGenome"
               },
               "default": "{\n        nucleotideSequences: [],\n        genes: [],\n    }"
-            },
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "gs-app-display",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "meta",
+            "module": "src/web-components/app.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Default",
+          "declaration": {
+            "name": "Default",
+            "module": "src/web-components/app.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "DelayFetchingReferenceGenome",
+          "declaration": {
+            "name": "DelayFetchingReferenceGenome",
+            "module": "src/web-components/app.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FailsToFetchReferenceGenome",
+          "declaration": {
+            "name": "FailsToFetchReferenceGenome",
+            "module": "src/web-components/app.stories.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "gs-app-display",
+          "declaration": {
+            "name": "AppDisplay",
+            "module": "src/web-components/app.stories.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/web-components/app.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "## Context\n\nThis component provides the main application context.\nAll other `gs-*` components must be (possibly nested) children of this component.\nIt makes use of the [Lit Context](https://lit.dev/docs/data/context/) to\n- provide the URL to the LAPIS instance to all its children\n- fetch the reference genomes from LAPIS and provide it to all its children\n\nThis will show an error message if the reference genome cannot be fetched\n(e.g., due to an invalid LAPIS URL).\n\n## Shadow DOM\n\nThis component does __not__ use a shadow DOM. Children of this component will be rendered directly in the light DOM.",
+          "name": "App",
+          "members": [
             {
               "kind": "field",
-              "name": "updateReferenceGenome",
-              "privacy": "private",
-              "default": "new Task(this, {\n        task: async () => {\n            this.referenceGenome = await fetchReferenceGenome(this.lapis);\n        },\n        args: () => [this.lapis],\n    })"
-            },
-            {
-              "kind": "method",
-              "name": "createRenderRoot"
+              "name": "lapis",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The URL of the LAPIS instance that all children of this component will use.",
+              "attribute": "lapis"
             }
           ],
           "attributes": [
@@ -98,6 +190,7 @@
                 "text": "string"
               },
               "default": "''",
+              "description": "The URL of the LAPIS instance that all children of this component will use.",
               "fieldName": "lapis"
             }
           ],
@@ -128,6 +221,161 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/web-components/display/aggregate-component.stories.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "meta",
+          "type": {
+            "text": "Meta<AggregateProps>"
+          },
+          "default": "{\n    title: 'Visualization/Aggregate',\n    component: 'gs-aggregate-component',\n    argTypes: {\n        fields: [{ control: 'object' }],\n        views: {\n            options: ['table'],\n            control: { type: 'check' },\n        },\n        size: [{ control: 'object' }],\n    },\n    parameters: withComponentDocs({\n        fetchMock: {\n            mocks: [\n                {\n                    matcher: {\n                        name: 'aggregatedData',\n                        url: AGGREGATED_ENDPOINT,\n                        body: {\n                            fields: ['division', 'host'],\n                            country: 'USA',\n                        },\n                    },\n                    response: {\n                        status: 200,\n                        body: aggregatedData,\n                    },\n                },\n            ],\n        },\n        componentDocs: {\n            tag: 'gs-aggregate-component',\n            opensShadowDom: true,\n            expectsChildren: false,\n            codeExample: `<gs-aggregate-component fields='[\"division\", \"host\"]' filter='{\"country\": \"USA\"}' views='[\"table\"]'></gs-aggregate-component>`,\n        },\n    }),\n    tags: ['autodocs'],\n}"
+        },
+        {
+          "kind": "variable",
+          "name": "Table",
+          "type": {
+            "text": "StoryObj<AggregateProps>"
+          },
+          "default": "{\n    render: (args) => html`\n        <gs-app lapis=\"${LAPIS_URL}\">\n            <gs-aggregate-component\n                .fields=${args.fields}\n                .filter=${args.filter}\n                .views=${args.views}\n                .size=${args.size}\n            ></gs-aggregate-component>\n        </gs-app>\n    `,\n    args: {\n        fields: ['division', 'host'],\n        views: ['table'],\n        filter: {\n            country: 'USA',\n        },\n        size: { width: '100%', height: '700px' },\n    },\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "meta",
+            "module": "src/web-components/display/aggregate-component.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Table",
+          "declaration": {
+            "name": "Table",
+            "module": "src/web-components/display/aggregate-component.stories.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/web-components/display/aggregate-component.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "## Context\n\nThis component displays aggregated data, which can provide an overview of the underlying data.\n\nIt expects a list of fields to aggregate by and a filter to apply to the data.",
+          "name": "AggregateComponent",
+          "members": [
+            {
+              "kind": "field",
+              "name": "fields",
+              "type": {
+                "text": "string[]"
+              },
+              "default": "[]",
+              "description": "The fields to aggregate by.",
+              "attribute": "fields"
+            },
+            {
+              "kind": "field",
+              "name": "views",
+              "type": {
+                "text": "View[]"
+              },
+              "default": "['table']",
+              "description": "The views are used to display the aggregated data.\nIn the table view, the data is presented in a table format where each field is a column,\nalong with the aggregated value and its proportion.\nThe proportion represents the ratio of the aggregated value to the total count of the data\n(considering the applied filter).",
+              "attribute": "views"
+            },
+            {
+              "kind": "field",
+              "name": "filter",
+              "type": {
+                "text": "LapisFilter"
+              },
+              "default": "{}",
+              "description": "The filter to apply to the data.",
+              "attribute": "filter"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "{ width?: string; height?: string } | undefined"
+              },
+              "default": "undefined",
+              "description": "The size of the component.\n\nIf not set, the component will take the full width of its container with height 700px.\n\nThe width and height should be a string with a unit in css style, e.g. '100%', '500px' or '50vh'.\nIf the unit is %, the size will be relative to the container of the component.",
+              "attribute": "size"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "fields",
+              "type": {
+                "text": "string[]"
+              },
+              "default": "[]",
+              "description": "The fields to aggregate by.",
+              "fieldName": "fields"
+            },
+            {
+              "name": "views",
+              "type": {
+                "text": "View[]"
+              },
+              "default": "['table']",
+              "description": "The views are used to display the aggregated data.\nIn the table view, the data is presented in a table format where each field is a column,\nalong with the aggregated value and its proportion.\nThe proportion represents the ratio of the aggregated value to the total count of the data\n(considering the applied filter).",
+              "fieldName": "views"
+            },
+            {
+              "name": "filter",
+              "type": {
+                "text": "LapisFilter"
+              },
+              "default": "{}",
+              "description": "The filter to apply to the data.",
+              "fieldName": "filter"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "{ width?: string; height?: string } | undefined"
+              },
+              "default": "undefined",
+              "description": "The size of the component.\n\nIf not set, the component will take the full width of its container with height 700px.\n\nThe width and height should be a string with a unit in css style, e.g. '100%', '500px' or '50vh'.\nIf the unit is %, the size will be relative to the container of the component.",
+              "fieldName": "size"
+            }
+          ],
+          "superclass": {
+            "name": "PreactLitAdapterWithGridJsStyles",
+            "module": "/src/web-components/PreactLitAdapterWithGridJsStyles"
+          },
+          "tagName": "gs-aggregate-component",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "AggregateComponent",
+          "declaration": {
+            "name": "AggregateComponent",
+            "module": "src/web-components/display/aggregate-component.tsx"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "gs-aggregate-component",
+          "declaration": {
+            "name": "AggregateComponent",
+            "module": "src/web-components/display/aggregate-component.tsx"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/web-components/display/index.ts",
@@ -164,6 +412,14 @@
             "name": "RelativeGrowthAdvantageComponent",
             "module": "./relative-growth-advantage-component"
           }
+        },
+        {
+          "kind": "js",
+          "name": "AggregateComponent",
+          "declaration": {
+            "name": "AggregateComponent",
+            "module": "./aggregate-component"
+          }
         }
       ]
     },
@@ -177,7 +433,7 @@
           "type": {
             "text": "Meta<MutationComparisonProps>"
           },
-          "default": "{\n    title: 'Visualization/Mutation comparison',\n    component: 'gs-mutation-comparison-component',\n    argTypes: {\n        variants: { control: 'object' },\n        sequenceType: {\n            options: ['nucleotide', 'amino acid'],\n            control: { type: 'radio' },\n        },\n        views: {\n            options: ['table', 'venn'],\n            control: { type: 'check' },\n        },\n    },\n}"
+          "default": "{\n    title: 'Visualization/Mutation comparison',\n    component: 'gs-mutation-comparison-component',\n    argTypes: {\n        variants: { control: 'object' },\n        sequenceType: {\n            options: ['nucleotide', 'amino acid'],\n            control: { type: 'radio' },\n        },\n        views: {\n            options: ['table', 'venn'],\n            control: { type: 'check' },\n        },\n        size: { control: 'object' },\n    },\n    parameters: withComponentDocs({\n        componentDocs: {\n            tag: 'gs-mutation-comparison-component',\n            opensShadowDom: true,\n            expectsChildren: false,\n            codeExample,\n        },\n    }),\n    tags: ['autodocs'],\n}"
         },
         {
           "kind": "variable",
@@ -185,7 +441,7 @@
           "type": {
             "text": "StoryObj<MutationComparisonProps>"
           },
-          "default": "{\n    ...Template,\n    args: {\n        variants: [\n            {\n                displayName: 'Some variant',\n                lapisFilter: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo },\n            },\n            {\n                displayName: 'Other variant',\n                lapisFilter: {\n                    country: 'Switzerland',\n                    pangoLineage: 'B.1.1.7',\n                    dateFrom,\n                    dateTo,\n                },\n            },\n        ],\n        sequenceType: 'nucleotide',\n        views: ['table', 'venn'],\n    },\n    parameters: {\n        fetchMock: {\n            mocks: [\n                {\n                    matcher: {\n                        name: 'nucleotideMutationsSomeVariant',\n                        url: NUCLEOTIDE_MUTATIONS_ENDPOINT,\n                        body: {\n                            country: 'Switzerland',\n                            pangoLineage: 'B.1.1.7',\n                            dateTo,\n                            minProportion: 0,\n                        },\n                    },\n                    response: {\n                        status: 200,\n                        body: nucleotideMutationsSomeVariant,\n                    },\n                },\n                {\n                    matcher: {\n                        name: 'nucleotideMutationsOtherVariant',\n                        url: NUCLEOTIDE_MUTATIONS_ENDPOINT,\n                        body: {\n                            country: 'Switzerland',\n                            pangoLineage: 'B.1.1.7',\n                            dateFrom,\n                            dateTo,\n                            minProportion: 0,\n                        },\n                    },\n                    response: {\n                        status: 200,\n                        body: nucleotideMutationsOtherVariant,\n                    },\n                },\n            ],\n        },\n    },\n    play: async ({ canvasElement, step }) => {\n        const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-comparison-component');\n\n        await step('Min and max proportions should be 50% and 100%', async () => {\n            const minInput = () => canvas.getAllByLabelText('%')[0];\n            const maxInput = () => canvas.getAllByLabelText('%')[1];\n\n            await waitFor(() => expect(minInput()).toHaveValue(50));\n            await waitFor(() => expect(maxInput()).toHaveValue(100));\n        });\n    },\n}"
+          "default": "{\n    ...Template,\n    args: {\n        variants: [\n            {\n                displayName: 'Some variant',\n                lapisFilter: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo },\n            },\n            {\n                displayName: 'Other variant',\n                lapisFilter: {\n                    country: 'Switzerland',\n                    pangoLineage: 'B.1.1.7',\n                    dateFrom,\n                    dateTo,\n                },\n            },\n        ],\n        sequenceType: 'nucleotide',\n        views: ['table', 'venn'],\n        size: { width: '100%', height: '700px' },\n    },\n    parameters: {\n        fetchMock: {\n            mocks: [\n                {\n                    matcher: {\n                        name: 'nucleotideMutationsSomeVariant',\n                        url: NUCLEOTIDE_MUTATIONS_ENDPOINT,\n                        body: {\n                            country: 'Switzerland',\n                            pangoLineage: 'B.1.1.7',\n                            dateTo,\n                            minProportion: 0,\n                        },\n                    },\n                    response: {\n                        status: 200,\n                        body: nucleotideMutationsSomeVariant,\n                    },\n                },\n                {\n                    matcher: {\n                        name: 'nucleotideMutationsOtherVariant',\n                        url: NUCLEOTIDE_MUTATIONS_ENDPOINT,\n                        body: {\n                            country: 'Switzerland',\n                            pangoLineage: 'B.1.1.7',\n                            dateFrom,\n                            dateTo,\n                            minProportion: 0,\n                        },\n                    },\n                    response: {\n                        status: 200,\n                        body: nucleotideMutationsOtherVariant,\n                    },\n                },\n            ],\n        },\n    },\n    play: async ({ canvasElement, step }) => {\n        const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-comparison-component');\n\n        await step('Min and max proportions should be 50% and 100%', async () => {\n            const minInput = () => canvas.getAllByLabelText('%')[0];\n            const maxInput = () => canvas.getAllByLabelText('%')[1];\n\n            await waitFor(() => expect(minInput()).toHaveValue(50));\n            await waitFor(() => expect(maxInput()).toHaveValue(100));\n        });\n    },\n}"
         },
         {
           "kind": "variable",
@@ -193,7 +449,7 @@
           "type": {
             "text": "StoryObj<MutationComparisonProps>"
           },
-          "default": "{\n    ...Default,\n    play: async ({ canvasElement, step }) => {\n        const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-comparison-component');\n\n        await step('Switch to Venn diagram view', async () => {\n            await waitFor(() => expect(canvas.getByLabelText('Venn', { selector: 'input' })).toBeInTheDocument());\n\n            await fireEvent.click(canvas.getByLabelText('Venn', { selector: 'input' }));\n\n            await waitFor(() =>\n                expect(\n                    canvas.getByText('You have no elements selected. Click in the venn diagram to select.'),\n                ).toBeVisible(),\n            );\n        });\n    },\n}"
+          "default": "{\n    ...Default,\n    play: async ({ canvasElement, step }) => {\n        const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-comparison-component');\n\n        await step('Switch to Venn diagram view', async () => {\n            await waitFor(() => expect(canvas.getByRole('button', { name: 'Venn' })).toBeInTheDocument());\n\n            await fireEvent.click(canvas.getByRole('button', { name: 'Venn' }));\n\n            await waitFor(() =>\n                expect(\n                    canvas.getByText('You have no elements selected. Click in the venn diagram to select.'),\n                ).toBeVisible(),\n            );\n        });\n    },\n}"
         }
       ],
       "exports": [
@@ -229,61 +485,86 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "This 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\".",
           "name": "MutationComparisonComponent",
           "members": [
             {
               "kind": "field",
               "name": "variants",
               "type": {
-                "text": "MutationComparisonVariant[]"
+                "text": "{\n        lapisFilter: Record<string, string | number | null | boolean>;\n        displayName: string;\n    }[]"
               },
               "default": "[]",
+              "description": "An 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"
             },
             {
               "kind": "field",
               "name": "sequenceType",
               "type": {
-                "text": "SequenceType"
+                "text": "'nucleotide' | 'amino acid'"
               },
               "default": "'nucleotide'",
+              "description": "The type of the sequence for which the mutations should be shown.",
               "attribute": "sequenceType"
             },
             {
               "kind": "field",
               "name": "views",
               "type": {
-                "text": "View[]"
+                "text": "('table' | 'venn')[]"
               },
               "default": "['table']",
+              "description": "A list of tabs with views that this component should provide.",
               "attribute": "views"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "{ width?: string; height?: string } | undefined"
+              },
+              "default": "undefined",
+              "description": "The size of the component.\n\nIf not set, the component will take the full width of its container with height 700px.\n\nThe width and height should be a string with a unit in css style, e.g. '100%', '500px' or '50vh'.\nIf the unit is %, the size will be relative to the container of the component.",
+              "attribute": "size"
             }
           ],
           "attributes": [
             {
               "name": "variants",
               "type": {
-                "text": "MutationComparisonVariant[]"
+                "text": "{\n        lapisFilter: Record<string, string | number | null | boolean>;\n        displayName: string;\n    }[]"
               },
               "default": "[]",
+              "description": "An 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"
             },
             {
               "name": "sequenceType",
               "type": {
-                "text": "SequenceType"
+                "text": "'nucleotide' | 'amino acid'"
               },
               "default": "'nucleotide'",
+              "description": "The type of the sequence for which the mutations should be shown.",
               "fieldName": "sequenceType"
             },
             {
               "name": "views",
               "type": {
-                "text": "View[]"
+                "text": "('table' | 'venn')[]"
               },
               "default": "['table']",
+              "description": "A list of tabs with views that this component should provide.",
               "fieldName": "views"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "{ width?: string; height?: string } | undefined"
+              },
+              "default": "undefined",
+              "description": "The size of the component.\n\nIf not set, the component will take the full width of its container with height 700px.\n\nThe width and height should be a string with a unit in css style, e.g. '100%', '500px' or '50vh'.\nIf the unit is %, the size will be relative to the container of the component.",
+              "fieldName": "size"
             }
           ],
           "superclass": {
@@ -323,7 +604,7 @@
           "type": {
             "text": "Meta<MutationsProps>"
           },
-          "default": "{\n    title: 'Visualization/Mutations',\n    component: 'gs-mutations',\n    argTypes: {\n        variant: { control: 'object' },\n        sequenceType: {\n            options: ['nucleotide', 'amino acid'],\n            control: { type: 'radio' },\n        },\n        views: {\n            options: ['table', 'grid', 'insertions'],\n            control: { type: 'check' },\n        },\n    },\n}"
+          "default": "{\n    title: 'Visualization/Mutations',\n    component: 'gs-mutations',\n    argTypes: {\n        variant: { control: 'object' },\n        sequenceType: {\n            options: ['nucleotide', 'amino acid'],\n            control: { type: 'radio' },\n        },\n        views: {\n            options: ['table', 'grid', 'insertions'],\n            control: { type: 'check' },\n        },\n        size: { control: 'object' },\n    },\n}"
         },
         {
           "kind": "variable",
@@ -331,7 +612,7 @@
           "type": {
             "text": "StoryObj<MutationsProps>"
           },
-          "default": "{\n    ...Template,\n    args: {\n        variant: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo: '2022-01-01' },\n        sequenceType: 'nucleotide',\n        views: ['grid', 'table', 'insertions'],\n    },\n    parameters: {\n        fetchMock: {\n            mocks: [\n                {\n                    matcher: {\n                        name: 'nucleotideMutations',\n                        url: NUCLEOTIDE_MUTATIONS_ENDPOINT,\n                        body: {\n                            country: 'Switzerland',\n                            pangoLineage: 'B.1.1.7',\n                            dateTo: '2022-01-01',\n                            minProportion: 0,\n                        },\n                    },\n                    response: {\n                        status: 200,\n                        body: nucleotideMutations,\n                    },\n                },\n                {\n                    matcher: {\n                        name: 'nucleotideInsertions',\n                        url: NUCLEOTIDE_INSERTIONS_ENDPOINT,\n                        body: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo: '2022-01-01' },\n                    },\n                    response: {\n                        status: 200,\n                        body: nucleotideInsertions,\n                    },\n                },\n            ],\n        },\n    },\n}"
+          "default": "{\n    ...Template,\n    args: {\n        variant: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo: '2022-01-01' },\n        sequenceType: 'nucleotide',\n        views: ['grid', 'table', 'insertions'],\n        size: { width: '100%', height: '700px' },\n    },\n    parameters: {\n        fetchMock: {\n            mocks: [\n                {\n                    matcher: {\n                        name: 'nucleotideMutations',\n                        url: NUCLEOTIDE_MUTATIONS_ENDPOINT,\n                        body: {\n                            country: 'Switzerland',\n                            pangoLineage: 'B.1.1.7',\n                            dateTo: '2022-01-01',\n                            minProportion: 0,\n                        },\n                    },\n                    response: {\n                        status: 200,\n                        body: nucleotideMutations,\n                    },\n                },\n                {\n                    matcher: {\n                        name: 'nucleotideInsertions',\n                        url: NUCLEOTIDE_INSERTIONS_ENDPOINT,\n                        body: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo: '2022-01-01' },\n                    },\n                    response: {\n                        status: 200,\n                        body: nucleotideInsertions,\n                    },\n                },\n            ],\n        },\n    },\n}"
         },
         {
           "kind": "variable",
@@ -339,7 +620,7 @@
           "type": {
             "text": "StoryObj<MutationsProps>"
           },
-          "default": "{\n    ...Default,\n    play: async ({ canvasElement }) => {\n        const canvas = await withinShadowRoot(canvasElement, 'gs-mutations-component');\n\n        await waitFor(() => expect(canvas.getByLabelText('Table', { selector: 'input' })).toBeInTheDocument());\n\n        await fireEvent.click(canvas.getByLabelText('Table', { selector: 'input' }));\n    },\n}"
+          "default": "{\n    ...Default,\n    play: async ({ canvasElement }) => {\n        const canvas = await withinShadowRoot(canvasElement, 'gs-mutations-component');\n\n        await waitFor(() => expect(canvas.getByRole('button', { name: 'Table' })).toBeInTheDocument());\n\n        await fireEvent.click(canvas.getByRole('button', { name: 'Table' }));\n    },\n}"
         },
         {
           "kind": "variable",
@@ -347,7 +628,7 @@
           "type": {
             "text": "StoryObj<MutationsProps>"
           },
-          "default": "{\n    ...Default,\n    play: async ({ canvasElement }) => {\n        const canvas = await withinShadowRoot(canvasElement, 'gs-mutations-component');\n\n        await waitFor(() => expect(canvas.getByLabelText('Insertions', { selector: 'input' })).toBeInTheDocument());\n\n        await fireEvent.click(canvas.getByLabelText('Insertions', { selector: 'input' }));\n    },\n}"
+          "default": "{\n    ...Default,\n    play: async ({ canvasElement }) => {\n        const canvas = await withinShadowRoot(canvasElement, 'gs-mutations-component');\n\n        await waitFor(() => expect(canvas.getByRole('button', { name: 'Insertions' })).toBeInTheDocument());\n\n        await fireEvent.click(canvas.getByRole('button', { name: 'Insertions' }));\n    },\n}"
         }
       ],
       "exports": [
@@ -420,6 +701,16 @@
               },
               "default": "['table', 'grid']",
               "attribute": "views"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "{ width?: string; height?: string } | undefined"
+              },
+              "default": "undefined",
+              "description": "The size of the component.\n\nIf not set, the component will take the full width of its container with height 700px.\n\nThe width and height should be a string with a unit in css style, e.g. '100%', '500px' or '50vh'.\nIf the unit is %, the size will be relative to the container of the component.",
+              "attribute": "size"
             }
           ],
           "attributes": [
@@ -446,6 +737,15 @@
               },
               "default": "['table', 'grid']",
               "fieldName": "views"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "{ width?: string; height?: string } | undefined"
+              },
+              "default": "undefined",
+              "description": "The size of the component.\n\nIf not set, the component will take the full width of its container with height 700px.\n\nThe width and height should be a string with a unit in css style, e.g. '100%', '500px' or '50vh'.\nIf the unit is %, the size will be relative to the container of the component.",
+              "fieldName": "size"
             }
           ],
           "superclass": {
@@ -485,7 +785,7 @@
           "type": {
             "text": "Meta<PrevalenceOverTimeProps>"
           },
-          "default": "{\n    title: 'Visualization/Prevalence over time',\n    component: 'gs-prevalence-over-time',\n    argTypes: {\n        numerator: { control: 'object' },\n        denominator: { control: 'object' },\n        granularity: {\n            options: ['day', 'week', 'month', 'year'],\n            control: { type: 'radio' },\n        },\n        smoothingWindow: { control: 'number' },\n        views: {\n            options: ['bar', 'line', 'bubble', 'table'],\n            control: { type: 'check' },\n        },\n        confidenceIntervalMethods: {\n            options: ['wilson'],\n            control: { type: 'check' },\n        },\n    },\n}"
+          "default": "{\n    title: 'Visualization/Prevalence over time',\n    component: 'gs-prevalence-over-time',\n    argTypes: {\n        numerator: { control: 'object' },\n        denominator: { control: 'object' },\n        granularity: {\n            options: ['day', 'week', 'month', 'year'],\n            control: { type: 'radio' },\n        },\n        smoothingWindow: { control: 'number' },\n        views: {\n            options: ['bar', 'line', 'bubble', 'table'],\n            control: { type: 'check' },\n        },\n        confidenceIntervalMethods: {\n            options: ['wilson'],\n            control: { type: 'check' },\n        },\n        size: [{ control: 'object' }],\n    },\n}"
         },
         {
           "kind": "variable",
@@ -493,7 +793,7 @@
           "type": {
             "text": "StoryObj<PrevalenceOverTimeProps>"
           },
-          "default": "{\n    ...Template,\n    args: {\n        numerator: [\n            { displayName: 'EG', country: 'USA', pangoLineage: 'EG*', dateFrom: '2023-01-01' },\n            { displayName: 'JN.1', country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01' },\n        ],\n        denominator: { country: 'USA', dateFrom: '2023-01-01', displayName: 'All' },\n        granularity: 'month',\n        smoothingWindow: 0,\n        views: ['bar', 'line', 'bubble', 'table'],\n        confidenceIntervalMethods: ['wilson'],\n    },\n    parameters: {\n        fetchMock: {\n            mocks: [\n                {\n                    matcher: {\n                        name: 'numeratorEG',\n                        url: AGGREGATED_ENDPOINT,\n                        body: {\n                            country: 'USA',\n                            pangoLineage: 'EG*',\n                            dateFrom: '2023-01-01',\n                            fields: ['date'],\n                        },\n                    },\n                    response: {\n                        status: 200,\n                        body: numeratorEG,\n                    },\n                },\n                {\n                    matcher: {\n                        name: 'numeratorJN1',\n                        url: AGGREGATED_ENDPOINT,\n                        body: {\n                            country: 'USA',\n                            pangoLineage: 'JN.1*',\n                            dateFrom: '2023-01-01',\n                            fields: ['date'],\n                        },\n                    },\n                    response: {\n                        status: 200,\n                        body: numeratorJN1,\n                    },\n                },\n                {\n                    matcher: {\n                        name: 'denominator',\n                        url: AGGREGATED_ENDPOINT,\n                        body: {\n                            country: 'USA',\n                            dateFrom: '2023-01-01',\n                            fields: ['date'],\n                        },\n                    },\n                    response: {\n                        status: 200,\n                        body: denominator,\n                    },\n                },\n            ],\n        },\n    },\n}"
+          "default": "{\n    ...Template,\n    args: {\n        numerator: [\n            { displayName: 'EG', country: 'USA', pangoLineage: 'EG*', dateFrom: '2023-01-01' },\n            { displayName: 'JN.1', country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01' },\n        ],\n        denominator: { country: 'USA', dateFrom: '2023-01-01', displayName: 'All' },\n        granularity: 'month',\n        smoothingWindow: 0,\n        views: ['bar', 'line', 'bubble', 'table'],\n        confidenceIntervalMethods: ['wilson'],\n        size: { width: '100%', height: '700px' },\n    },\n    parameters: {\n        fetchMock: {\n            mocks: [\n                {\n                    matcher: {\n                        name: 'numeratorEG',\n                        url: AGGREGATED_ENDPOINT,\n                        body: {\n                            country: 'USA',\n                            pangoLineage: 'EG*',\n                            dateFrom: '2023-01-01',\n                            fields: ['date'],\n                        },\n                    },\n                    response: {\n                        status: 200,\n                        body: numeratorEG,\n                    },\n                },\n                {\n                    matcher: {\n                        name: 'numeratorJN1',\n                        url: AGGREGATED_ENDPOINT,\n                        body: {\n                            country: 'USA',\n                            pangoLineage: 'JN.1*',\n                            dateFrom: '2023-01-01',\n                            fields: ['date'],\n                        },\n                    },\n                    response: {\n                        status: 200,\n                        body: numeratorJN1,\n                    },\n                },\n                {\n                    matcher: {\n                        name: 'denominator',\n                        url: AGGREGATED_ENDPOINT,\n                        body: {\n                            country: 'USA',\n                            dateFrom: '2023-01-01',\n                            fields: ['date'],\n                        },\n                    },\n                    response: {\n                        status: 200,\n                        body: denominator,\n                    },\n                },\n            ],\n        },\n    },\n}"
         },
         {
           "kind": "variable",
@@ -501,7 +801,7 @@
           "type": {
             "text": "StoryObj<PrevalenceOverTimeProps>"
           },
-          "default": "{\n    ...Template,\n    args: {\n        numerator: { displayName: 'EG', country: 'USA', pangoLineage: 'BA.2.86*', dateFrom: '2023-10-01' },\n        denominator: { country: 'USA', dateFrom: '2023-10-01', displayName: 'All' },\n        granularity: 'day',\n        smoothingWindow: 7,\n        views: ['bar', 'line', 'bubble', 'table'],\n        confidenceIntervalMethods: ['wilson'],\n    },\n    parameters: {\n        fetchMock: {\n            mocks: [\n                {\n                    matcher: {\n                        name: 'numeratorOneVariant',\n                        url: AGGREGATED_ENDPOINT,\n                        body: {\n                            country: 'USA',\n                            pangoLineage: 'BA.2.86*',\n                            dateFrom: '2023-10-01',\n                            fields: ['date'],\n                        },\n                    },\n                    response: {\n                        status: 200,\n                        body: numeratorOneVariant,\n                    },\n                },\n                {\n                    matcher: {\n                        name: 'denominatorOneVariant',\n                        url: AGGREGATED_ENDPOINT,\n                        body: {\n                            country: 'USA',\n                            dateFrom: '2023-10-01',\n                            fields: ['date'],\n                        },\n                    },\n                    response: {\n                        status: 200,\n                        body: denominatorOneVariant,\n                    },\n                },\n            ],\n        },\n    },\n}"
+          "default": "{\n    ...Template,\n    args: {\n        numerator: { displayName: 'EG', country: 'USA', pangoLineage: 'BA.2.86*', dateFrom: '2023-10-01' },\n        denominator: { country: 'USA', dateFrom: '2023-10-01', displayName: 'All' },\n        granularity: 'day',\n        smoothingWindow: 7,\n        views: ['bar', 'line', 'bubble', 'table'],\n        confidenceIntervalMethods: ['wilson'],\n        size: { width: '100%', height: '700px' },\n    },\n    parameters: {\n        fetchMock: {\n            mocks: [\n                {\n                    matcher: {\n                        name: 'numeratorOneVariant',\n                        url: AGGREGATED_ENDPOINT,\n                        body: {\n                            country: 'USA',\n                            pangoLineage: 'BA.2.86*',\n                            dateFrom: '2023-10-01',\n                            fields: ['date'],\n                        },\n                    },\n                    response: {\n                        status: 200,\n                        body: numeratorOneVariant,\n                    },\n                },\n                {\n                    matcher: {\n                        name: 'denominatorOneVariant',\n                        url: AGGREGATED_ENDPOINT,\n                        body: {\n                            country: 'USA',\n                            dateFrom: '2023-10-01',\n                            fields: ['date'],\n                        },\n                    },\n                    response: {\n                        status: 200,\n                        body: denominatorOneVariant,\n                    },\n                },\n            ],\n        },\n    },\n}"
         },
         {
           "kind": "variable",
@@ -509,7 +809,7 @@
           "type": {
             "text": "StoryObj<PrevalenceOverTimeProps>"
           },
-          "default": "{\n    ...OneVariant,\n    play: async ({ canvasElement }) => {\n        const canvas = await withinShadowRoot(canvasElement, 'gs-prevalence-over-time');\n\n        await waitFor(() => expect(canvas.getByLabelText('Line', { selector: 'input' })).toBeInTheDocument());\n\n        await fireEvent.click(canvas.getByLabelText('Line', { selector: 'input' }));\n    },\n}"
+          "default": "{\n    ...OneVariant,\n    play: async ({ canvasElement }) => {\n        const canvas = await withinShadowRoot(canvasElement, 'gs-prevalence-over-time');\n\n        await waitFor(() => expect(canvas.getByRole('button', { name: 'Line' })).toBeInTheDocument());\n\n        await fireEvent.click(canvas.getByRole('button', { name: 'Line' }));\n    },\n}"
         },
         {
           "kind": "variable",
@@ -517,7 +817,7 @@
           "type": {
             "text": "StoryObj<PrevalenceOverTimeProps>"
           },
-          "default": "{\n    ...OneVariant,\n    play: async ({ canvasElement }) => {\n        const canvas = await withinShadowRoot(canvasElement, 'gs-prevalence-over-time');\n\n        await waitFor(() => expect(canvas.getByLabelText('Bubble', { selector: 'input' })).toBeInTheDocument());\n\n        await fireEvent.click(canvas.getByLabelText('Bubble', { selector: 'input' }));\n    },\n}"
+          "default": "{\n    ...OneVariant,\n    play: async ({ canvasElement }) => {\n        const canvas = await withinShadowRoot(canvasElement, 'gs-prevalence-over-time');\n\n        await waitFor(() => expect(canvas.getByRole('button', { name: 'Bubble' })).toBeInTheDocument());\n\n        await fireEvent.click(canvas.getByRole('button', { name: 'Bubble' }));\n    },\n}"
         },
         {
           "kind": "variable",
@@ -525,7 +825,7 @@
           "type": {
             "text": "StoryObj<PrevalenceOverTimeProps>"
           },
-          "default": "{\n    ...OneVariant,\n    play: async ({ canvasElement }) => {\n        const canvas = await withinShadowRoot(canvasElement, 'gs-prevalence-over-time');\n\n        await waitFor(() => expect(canvas.getByLabelText('Table', { selector: 'input' })).toBeInTheDocument());\n\n        await fireEvent.click(canvas.getByLabelText('Table', { selector: 'input' }));\n    },\n}"
+          "default": "{\n    ...OneVariant,\n    play: async ({ canvasElement }) => {\n        const canvas = await withinShadowRoot(canvasElement, 'gs-prevalence-over-time');\n\n        await waitFor(() => expect(canvas.getByRole('button', { name: 'Table' })).toBeInTheDocument());\n\n        await fireEvent.click(canvas.getByRole('button', { name: 'Table' }));\n    },\n}"
         }
       ],
       "exports": [
@@ -641,6 +941,16 @@
               },
               "default": "['wilson']",
               "attribute": "confidenceIntervalMethods"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "{ width?: string; height?: string } | undefined"
+              },
+              "default": "undefined",
+              "description": "The size of the component.\n\nIf not set, the component will take the full width of its container with height 700px.\n\nThe width and height should be a string with a unit in css style, e.g. '100%', '500px' or '50vh'.\nIf the unit is %, the size will be relative to the container of the component.",
+              "attribute": "size"
             }
           ],
           "attributes": [
@@ -691,6 +1001,15 @@
               },
               "default": "['wilson']",
               "fieldName": "confidenceIntervalMethods"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "{ width?: string; height?: string } | undefined"
+              },
+              "default": "undefined",
+              "description": "The size of the component.\n\nIf not set, the component will take the full width of its container with height 700px.\n\nThe width and height should be a string with a unit in css style, e.g. '100%', '500px' or '50vh'.\nIf the unit is %, the size will be relative to the container of the component.",
+              "fieldName": "size"
             }
           ],
           "superclass": {
@@ -730,7 +1049,7 @@
           "type": {
             "text": "Meta<RelativeGrowthAdvantageProps>"
           },
-          "default": "{\n    title: 'Visualization/Relative growth advantage',\n    component: 'gs-relative-growth-advantage',\n    argTypes: {\n        numerator: { control: 'object' },\n        denominator: { control: 'object' },\n        generationTime: { control: 'number' },\n        views: {\n            options: ['line'],\n            control: { type: 'check' },\n        },\n    },\n}"
+          "default": "{\n    title: 'Visualization/Relative growth advantage',\n    component: 'gs-relative-growth-advantage',\n    argTypes: {\n        numerator: { control: 'object' },\n        denominator: { control: 'object' },\n        generationTime: { control: 'number' },\n        views: {\n            options: ['line'],\n            control: { type: 'check' },\n        },\n        size: [{ control: 'object' }],\n    },\n}"
         },
         {
           "kind": "variable",
@@ -738,7 +1057,7 @@
           "type": {
             "text": "StoryObj<RelativeGrowthAdvantageProps>"
           },
-          "default": "{\n    ...Template,\n    args: {\n        numerator: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateFrom: '2020-12-01', dateTo: '2021-03-01' },\n        denominator: { country: 'Switzerland', dateFrom: '2020-12-01', dateTo: '2021-03-01' },\n        generationTime: 7,\n        views: ['line'],\n    },\n    parameters: {\n        fetchMock: {\n            mocks: [\n                {\n                    matcher: {\n                        name: 'numerator',\n                        url: AGGREGATED_ENDPOINT,\n                        body: {\n                            country: 'Switzerland',\n                            pangoLineage: 'B.1.1.7',\n                            dateFrom: '2020-12-01',\n                            dateTo: '2021-03-01',\n                            fields: ['date'],\n                        },\n                    },\n                    response: {\n                        status: 200,\n                        body: numerator,\n                    },\n                },\n                {\n                    matcher: {\n                        name: 'denominator',\n                        url: AGGREGATED_ENDPOINT,\n                        body: {\n                            country: 'Switzerland',\n                            dateFrom: '2020-12-01',\n                            dateTo: '2021-03-01',\n                            fields: ['date'],\n                        },\n                    },\n                    response: {\n                        status: 200,\n                        body: denominator,\n                    },\n                },\n            ],\n        },\n    },\n}"
+          "default": "{\n    ...Template,\n    args: {\n        numerator: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateFrom: '2020-12-01', dateTo: '2021-03-01' },\n        denominator: { country: 'Switzerland', dateFrom: '2020-12-01', dateTo: '2021-03-01' },\n        generationTime: 7,\n        views: ['line'],\n        size: { width: '100%', height: '700px' },\n    },\n    parameters: {\n        fetchMock: {\n            mocks: [\n                {\n                    matcher: {\n                        name: 'numerator',\n                        url: AGGREGATED_ENDPOINT,\n                        body: {\n                            country: 'Switzerland',\n                            pangoLineage: 'B.1.1.7',\n                            dateFrom: '2020-12-01',\n                            dateTo: '2021-03-01',\n                            fields: ['date'],\n                        },\n                    },\n                    response: {\n                        status: 200,\n                        body: numerator,\n                    },\n                },\n                {\n                    matcher: {\n                        name: 'denominator',\n                        url: AGGREGATED_ENDPOINT,\n                        body: {\n                            country: 'Switzerland',\n                            dateFrom: '2020-12-01',\n                            dateTo: '2021-03-01',\n                            fields: ['date'],\n                        },\n                    },\n                    response: {\n                        status: 200,\n                        body: denominator,\n                    },\n                },\n            ],\n        },\n    },\n}"
         }
       ],
       "exports": [
@@ -804,6 +1123,16 @@
               },
               "default": "['line']",
               "attribute": "views"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "{ width?: string; height?: string } | undefined"
+              },
+              "default": "undefined",
+              "description": "The size of the component.\n\nIf not set, the component will take the full width of its container with height 700px.\n\nThe width and height should be a string with a unit in css style, e.g. '100%', '500px' or '50vh'.\nIf the unit is %, the size will be relative to the container of the component.",
+              "attribute": "size"
             }
           ],
           "attributes": [
@@ -838,6 +1167,15 @@
               },
               "default": "['line']",
               "fieldName": "views"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "{ width?: string; height?: string } | undefined"
+              },
+              "default": "undefined",
+              "description": "The size of the component.\n\nIf not set, the component will take the full width of its container with height 700px.\n\nThe width and height should be a string with a unit in css style, e.g. '100%', '500px' or '50vh'.\nIf the unit is %, the size will be relative to the container of the component.",
+              "fieldName": "size"
             }
           ],
           "superclass": {
@@ -906,17 +1244,17 @@
           "kind": "variable",
           "name": "meta",
           "type": {
-            "text": "Meta<DateRangeSelectorProps>"
+            "text": "Meta<DateRangeSelectorProps<'CustomDateRange'>>"
           },
-          "default": "{\n    title: 'Input/DateRangeSelector',\n    component: 'gs-date-range-selector',\n    parameters: {\n        actions: {\n            handles: ['gs-date-range-changed'],\n        },\n        fetchMock: {},\n    },\n    decorators: [withActions],\n}"
+          "default": "{\n    title: 'Input/DateRangeSelector',\n    component: 'gs-date-range-selector',\n    parameters: {\n        actions: {\n            handles: ['gs-date-range-changed'],\n        },\n        fetchMock: {},\n    },\n    argTypes: {\n        initialValue: {\n            control: {\n                type: 'select',\n            },\n            options: [\n                PRESET_VALUE_CUSTOM,\n                PRESET_VALUE_ALL_TIMES,\n                PRESET_VALUE_LAST_2_WEEKS,\n                PRESET_VALUE_LAST_MONTH,\n                PRESET_VALUE_LAST_2_MONTHS,\n                PRESET_VALUE_LAST_3_MONTHS,\n                PRESET_VALUE_LAST_6_MONTHS,\n                'CustomDateRange',\n            ],\n        },\n    },\n    args: {\n        customSelectOptions: [{ label: 'CustomDateRange', dateFrom: '2021-01-01', dateTo: '2021-12-31' }],\n        earliestDate: '1970-01-01',\n        initialValue: PRESET_VALUE_LAST_6_MONTHS,\n    },\n    decorators: [withActions],\n}"
         },
         {
           "kind": "variable",
           "name": "DateRangeSelectorStory",
           "type": {
-            "text": "StoryObj<DateRangeSelectorProps>"
+            "text": "StoryObj<DateRangeSelectorProps<'CustomDateRange'>>"
           },
-          "default": "{\n    render: (args) =>\n        html` <gs-app lapis=\"${LAPIS_URL}\">\n            <div class=\"max-w-screen-lg\">\n                <gs-date-range-selector\n                    .customSelectOptions=${args.customSelectOptions}\n                    .earliestDate=${args.earliestDate}\n                ></gs-date-range-selector>\n            </div>\n        </gs-app>`,\n\n    play: async ({ canvasElement, step }) => {\n        const canvas = await withinShadowRoot(canvasElement, 'gs-date-range-selector');\n        const dateTo = () => canvas.getByPlaceholderText('Date to');\n\n        await step('Expect last 6 months to be selected', async () => {\n            await expect(canvas.getByRole('combobox')).toHaveValue('last6Months');\n            await waitFor(() => {\n                expect(dateTo()).toHaveValue(toYYYYMMDD(new Date()));\n            });\n        });\n    },\n    args: {\n        customSelectOptions: [{ label: 'CustomDateRange', dateFrom: '2021-01-01', dateTo: '2021-12-31' }],\n        earliestDate: '1970-01-01',\n    },\n}"
+          "default": "{\n    render: (args) =>\n        html` <gs-app lapis=\"${LAPIS_URL}\">\n            <div class=\"max-w-screen-lg\">\n                <gs-date-range-selector\n                    .customSelectOptions=${args.customSelectOptions}\n                    .earliestDate=${args.earliestDate}\n                    .initialValue=${args.initialValue}\n                ></gs-date-range-selector>\n            </div>\n        </gs-app>`,\n    play: async ({ canvasElement, step }) => {\n        const canvas = await withinShadowRoot(canvasElement, 'gs-date-range-selector');\n        const dateTo = () => canvas.getByPlaceholderText('Date to');\n\n        await step('Expect last 6 months to be selected', async () => {\n            await expect(canvas.getByRole('combobox')).toHaveValue('last6Months');\n            await waitFor(() => {\n                expect(dateTo()).toHaveValue(toYYYYMMDD(new Date()));\n            });\n        });\n    },\n}"
         }
       ],
       "exports": [
@@ -951,7 +1289,7 @@
               "kind": "field",
               "name": "customSelectOptions",
               "type": {
-                "text": "CustomSelectOption[]"
+                "text": "CustomSelectOption<CustomLabel>[]"
               },
               "default": "[]",
               "attribute": "customSelectOptions"
@@ -964,6 +1302,15 @@
               },
               "default": "'1900-01-01'",
               "attribute": "earliestDate"
+            },
+            {
+              "kind": "field",
+              "name": "initialValue",
+              "type": {
+                "text": "PresetOptionValues | CustomLabel | string | undefined"
+              },
+              "default": "''",
+              "attribute": "initialValue"
             }
           ],
           "events": [
@@ -979,7 +1326,7 @@
             {
               "name": "customSelectOptions",
               "type": {
-                "text": "CustomSelectOption[]"
+                "text": "CustomSelectOption<CustomLabel>[]"
               },
               "default": "[]",
               "fieldName": "customSelectOptions"
@@ -991,6 +1338,14 @@
               },
               "default": "'1900-01-01'",
               "fieldName": "earliestDate"
+            },
+            {
+              "name": "initialValue",
+              "type": {
+                "text": "PresetOptionValues | CustomLabel | string | undefined"
+              },
+              "default": "''",
+              "fieldName": "initialValue"
             }
           ],
           "superclass": {
@@ -1069,7 +1424,7 @@
           "type": {
             "text": "Meta"
           },
-          "default": "{\n    title: 'Input/Location filter',\n    component: 'gs-location-filter',\n    parameters: {\n        actions: {\n            handles: ['gs-location-changed'],\n        },\n    },\n    decorators: [withActions],\n}"
+          "default": "{\n    title: 'Input/Location filter',\n    component: 'gs-location-filter',\n    parameters: withComponentDocs({\n        actions: {\n            handles: ['gs-location-changed'],\n        },\n        componentDocs: {\n            tag: 'gs-location-filter',\n            opensShadowDom: true,\n            expectsChildren: false,\n            codeExample: `<gs-location-filter fields=\"['continent', 'country']\" value='Europe / Switzerland'></gs-location-filter>`,\n        },\n    }),\n    decorators: [withActions],\n    tags: ['autodocs'],\n}"
         },
         {
           "kind": "variable",
@@ -1093,7 +1448,7 @@
           "type": {
             "text": "StoryObj<LocationFilterProps>"
           },
-          "default": "{\n    ...Template,\n    parameters: {\n        fetchMock: {\n            mocks: [\n                {\n                    matcher: aggregatedEndpointMatcher,\n                    response: {\n                        status: 500,\n                        body: { error: 'no data' },\n                    },\n                },\n            ],\n        },\n    },\n    play: async ({ canvasElement }) => {\n        const canvas = await withinShadowRoot(canvasElement, 'gs-location-filter');\n\n        await waitFor(() =>\n            expect(\n                canvas.getByText('Internal Server Error: {\"error\":\"no data\"} ', { exact: false }),\n            ).toBeInTheDocument(),\n        );\n    },\n}"
+          "default": "{\n    ...Template,\n    parameters: {\n        fetchMock: {\n            mocks: [\n                {\n                    matcher: aggregatedEndpointMatcher,\n                    response: {\n                        status: 400,\n                        body: { error: 'no data' },\n                    },\n                },\n            ],\n        },\n    },\n    play: async ({ canvasElement }) => {\n        const canvas = await withinShadowRoot(canvasElement, 'gs-location-filter');\n\n        await waitFor(() =>\n            expect(canvas.getByText('Bad Request: {\"error\":\"no data\"} ', { exact: false })).toBeInTheDocument(),\n        );\n    },\n}"
         },
         {
           "kind": "variable",
@@ -1153,18 +1508,18 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "## Tag\n\n`gs-location-filter`\n\n## Context\n\nThis component provides an input field to specify filters for locations.\n\nIt expects a list of fields that form a strict hierarchical order, such as continent, country, and city.\nThe component retrieves a list of all possible values for these fields from the Lapis instance.\nThis list is then utilized to display autocomplete suggestions and to validate the input.\n\nGiven `fields` are `['field1', 'field2', ..., 'fieldN']`,\nthen valid values for the location filter must be in the form `valueForField1 / valueForField2 / ... / valueForFieldK`,\nwhere `1 <= K <= N`.\nValues for the fields `i > K` are considered `undefined`.",
+          "description": "## Context\n\nThis component provides an input field to specify filters for locations.\n\nIt expects a list of fields that form a strict hierarchical order, such as continent, country, and city.\nThe component retrieves a list of all possible values for these fields from the Lapis instance.\nThis list is then utilized to display autocomplete suggestions and to validate the input.\n\nGiven `fields` are `['field1', 'field2', ..., 'fieldN']`,\nthen valid values for the location filter must be in the form `valueForField1 / valueForField2 / ... / valueForFieldK`,\nwhere `1 <= K <= N`.\nValues for the fields `i > K` are considered `undefined`.",
           "name": "LocationFilterComponent",
           "members": [
             {
               "kind": "field",
-              "name": "value",
+              "name": "initialValue",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "The initial value to use for this location filter.\nMust be of the form `valueForField1 / valueForField2 / ... / valueForFieldN`.",
-              "attribute": "value"
+              "attribute": "initialValue"
             },
             {
               "kind": "field",
@@ -1188,13 +1543,13 @@
           ],
           "attributes": [
             {
-              "name": "value",
+              "name": "initialValue",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "The initial value to use for this location filter.\nMust be of the form `valueForField1 / valueForField2 / ... / valueForFieldN`.",
-              "fieldName": "value"
+              "fieldName": "initialValue"
             },
             {
               "name": "fields",
@@ -1233,12 +1588,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/web-components/input/location-filter.mdx",
-      "declarations": [],
-      "exports": []
-    },
     {
       "kind": "javascript-module",
       "path": "src/web-components/input/mutation-filter-component.stories.ts",
@@ -1255,25 +1604,25 @@
           "kind": "variable",
           "name": "Default",
           "type": {
-            "text": "StoryObj<{ lapisField: string; placeholderText: string }>"
+            "text": "StoryObj<MutationFilterProps>"
           },
-          "default": "{\n    render: () => {\n        return html` <gs-app lapis=\"${LAPIS_URL}\">\n            <div class=\"max-w-screen-lg\">\n                <gs-mutation-filter></gs-mutation-filter>\n            </div>\n        </gs-app>`;\n    },\n}"
+          "default": "{\n    ...Template,\n    args: {\n        initialValue: ['A123T'],\n    },\n}"
         },
         {
           "kind": "variable",
           "name": "FiresFilterChangedEvent",
           "type": {
-            "text": "StoryObj<{ lapisField: string; placeholderText: string }>"
+            "text": "StoryObj<MutationFilterProps>"
           },
-          "default": "{\n    ...Default,\n    play: async ({ canvasElement, step }) => {\n        const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-filter');\n\n        const inputField = () => canvas.getByPlaceholderText('Enter a mutation');\n        const submitButton = () => canvas.getByRole('button', { name: '+' });\n        const listenerMock = fn();\n        await step('Setup event listener mock', async () => {\n            canvasElement.addEventListener('gs-mutation-filter-changed', listenerMock);\n        });\n\n        await step('wait until data is loaded', async () => {\n            await waitFor(() => {\n                return expect(inputField()).toBeEnabled();\n            });\n        });\n\n        await step('Enter a valid mutation', async () => {\n            await userEvent.type(inputField(), 'A123T');\n            await waitFor(() => submitButton().click());\n\n            await waitFor(() =>\n                expect(listenerMock).toHaveBeenCalledWith(\n                    expect.objectContaining({\n                        detail: {\n                            nucleotideMutations: ['A123T'],\n                            aminoAcidMutations: [],\n                            nucleotideInsertions: [],\n                            aminoAcidInsertions: [],\n                        },\n                    }),\n                ),\n            );\n        });\n    },\n}"
+          "default": "{\n    ...Template,\n    play: async ({ canvasElement, step }) => {\n        const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-filter');\n\n        const inputField = () => canvas.getByPlaceholderText('Enter a mutation', { exact: false });\n        const submitButton = () => canvas.getByRole('button', { name: '+' });\n        const listenerMock = fn();\n        await step('Setup event listener mock', async () => {\n            canvasElement.addEventListener('gs-mutation-filter-changed', listenerMock);\n        });\n\n        await step('wait until data is loaded', async () => {\n            await waitFor(() => {\n                return expect(inputField()).toBeEnabled();\n            });\n        });\n\n        await step('Enter a valid mutation', async () => {\n            await userEvent.type(inputField(), 'A123T');\n            await waitFor(() => submitButton().click());\n\n            await waitFor(() =>\n                expect(listenerMock).toHaveBeenCalledWith(\n                    expect.objectContaining({\n                        detail: {\n                            nucleotideMutations: ['A123T'],\n                            aminoAcidMutations: [],\n                            nucleotideInsertions: [],\n                            aminoAcidInsertions: [],\n                        },\n                    }),\n                ),\n            );\n        });\n    },\n}"
         },
         {
           "kind": "variable",
           "name": "FiresFilterOnBlurEvent",
           "type": {
-            "text": "StoryObj<{ lapisField: string; placeholderText: string }>"
+            "text": "StoryObj<MutationFilterProps>"
           },
-          "default": "{\n    ...Default,\n    play: async ({ canvasElement, step }) => {\n        const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-filter');\n\n        const inputField = () => canvas.getByPlaceholderText('Enter a mutation');\n        const listenerMock = fn();\n        await step('Setup event listener mock', async () => {\n            canvasElement.addEventListener('gs-mutation-filter-on-blur', listenerMock);\n        });\n\n        await step('wait until data is loaded', async () => {\n            await waitFor(() => {\n                return expect(inputField()).toBeEnabled();\n            });\n        });\n\n        await step('Move outside of input', async () => {\n            await userEvent.type(inputField(), 'A123T');\n            await userEvent.tab();\n\n            await expect(listenerMock).toHaveBeenCalled();\n        });\n    },\n}"
+          "default": "{\n    ...Template,\n    play: async ({ canvasElement, step }) => {\n        const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-filter');\n\n        const inputField = () => canvas.getByPlaceholderText('Enter a mutation', { exact: false });\n        const listenerMock = fn();\n        await step('Setup event listener mock', async () => {\n            canvasElement.addEventListener('gs-mutation-filter-on-blur', listenerMock);\n        });\n\n        await step('wait until data is loaded', async () => {\n            await waitFor(() => {\n                return expect(inputField()).toBeEnabled();\n            });\n        });\n\n        await step('Move outside of input', async () => {\n            await userEvent.type(inputField(), 'A123T');\n            await userEvent.tab();\n\n            await expect(listenerMock).toHaveBeenCalled();\n        });\n    },\n}"
         }
       ],
       "exports": [
@@ -1319,7 +1668,17 @@
           "kind": "class",
           "description": "",
           "name": "MutationFilterComponent",
-          "members": [],
+          "members": [
+            {
+              "kind": "field",
+              "name": "initialValue",
+              "type": {
+                "text": "SelectedMutationFilterStrings | string[] | undefined"
+              },
+              "default": "undefined",
+              "attribute": "initialValue"
+            }
+          ],
           "events": [
             {
               "type": {
@@ -1336,6 +1695,16 @@
               "name": "gs-mutation-filter-on-blur"
             }
           ],
+          "attributes": [
+            {
+              "name": "initialValue",
+              "type": {
+                "text": "SelectedMutationFilterStrings | string[] | undefined"
+              },
+              "default": "undefined",
+              "fieldName": "initialValue"
+            }
+          ],
           "superclass": {
             "name": "PreactLitAdapter",
             "module": "/src/web-components/PreactLitAdapter"
@@ -1373,23 +1742,23 @@
           "type": {
             "text": "Meta"
           },
-          "default": "{\n    title: 'Input/Text input',\n    component: 'gs-text-input',\n    parameters: {\n        actions: {\n            handles: ['gs-text-input-changed'],\n        },\n        fetchMock: {\n            mocks: [\n                {\n                    matcher: {\n                        name: 'hosts',\n                        url: AGGREGATED_ENDPOINT,\n                        body: {\n                            fields: ['host'],\n                        },\n                    },\n                    response: {\n                        status: 200,\n                        body: data,\n                    },\n                },\n            ],\n        },\n    },\n    decorators: [withActions],\n    tags: ['autodocs'],\n}"
+          "default": "{\n    title: 'Input/Text input',\n    component: 'gs-text-input',\n    parameters: {\n        actions: {\n            handles: ['gs-text-input-changed'],\n        },\n        fetchMock: {\n            mocks: [\n                {\n                    matcher: {\n                        name: 'hosts',\n                        url: AGGREGATED_ENDPOINT,\n                        body: {\n                            fields: ['host'],\n                        },\n                    },\n                    response: {\n                        status: 200,\n                        body: data,\n                    },\n                },\n            ],\n        },\n    },\n    decorators: [withActions],\n}"
         },
         {
           "kind": "variable",
           "name": "Default",
           "type": {
-            "text": "StoryObj<{ lapisField: string; placeholderText: string }>"
+            "text": "StoryObj<TextInputProps>"
           },
-          "default": "{\n    render: (args) => {\n        return html` <gs-app lapis=\"${LAPIS_URL}\">\n            <div class=\"max-w-screen-lg\">\n                <gs-text-input .lapisField=${args.lapisField} .placeholderText=${args.placeholderText}></gs-text-input>\n            </div>\n        </gs-app>`;\n    },\n    args: {\n        lapisField: 'host',\n        placeholderText: 'Enter host name',\n    },\n}"
+          "default": "{\n    render: (args) => {\n        return html` <gs-app lapis=\"${LAPIS_URL}\">\n            <div class=\"max-w-screen-lg\">\n                <gs-text-input\n                    .lapisField=${args.lapisField}\n                    .placeholderText=${args.placeholderText}\n                    .initialValue=${args.initialValue}\n                ></gs-text-input>\n            </div>\n        </gs-app>`;\n    },\n    args: {\n        lapisField: 'host',\n        placeholderText: 'Enter host name',\n        initialValue: 'Homo sapiens',\n    },\n}"
         },
         {
           "kind": "variable",
           "name": "FiresEvent",
           "type": {
-            "text": "StoryObj<{ lapisField: string; placeholderText: string }>"
+            "text": "StoryObj<TextInputProps>"
           },
-          "default": "{\n    ...Default,\n    play: async ({ canvasElement, step }) => {\n        const canvas = await withinShadowRoot(canvasElement, 'gs-text-input');\n\n        const inputField = () => canvas.getByPlaceholderText('Enter host name');\n        const listenerMock = fn();\n        await step('Setup event listener mock', async () => {\n            canvasElement.addEventListener('gs-text-input-changed', listenerMock);\n        });\n\n        await step('wait until data is loaded', async () => {\n            await waitFor(() => {\n                return expect(inputField()).toBeEnabled();\n            });\n        });\n\n        await step('Enters an invalid host name', async () => {\n            await userEvent.type(inputField(), 'notInList');\n            await expect(listenerMock).not.toHaveBeenCalled();\n            await userEvent.type(inputField(), '{backspace>9/}');\n        });\n\n        await step('Enter a valid host name', async () => {\n            await userEvent.type(inputField(), 'Homo');\n\n            await expect(listenerMock).toHaveBeenCalledWith(\n                expect.objectContaining({\n                    detail: {\n                        host: 'Homo',\n                    },\n                }),\n            );\n        });\n    },\n}"
+          "default": "{\n    ...Default,\n    play: async ({ canvasElement, step }) => {\n        const canvas = await withinShadowRoot(canvasElement, 'gs-text-input');\n\n        const inputField = () => canvas.getByPlaceholderText('Enter host name');\n        const listenerMock = fn();\n        await step('Setup event listener mock', async () => {\n            canvasElement.addEventListener('gs-text-input-changed', listenerMock);\n        });\n\n        await step('wait until data is loaded', async () => {\n            await waitFor(() => {\n                return expect(inputField()).toBeEnabled();\n            });\n        });\n\n        await step('Enters an invalid host name', async () => {\n            await userEvent.type(inputField(), 'notInList');\n            await expect(listenerMock).not.toHaveBeenCalled();\n            await userEvent.type(inputField(), '{backspace>9/}');\n        });\n\n        await step('Enter a valid host name', async () => {\n            await userEvent.type(inputField(), 'Homo');\n\n            await expect(listenerMock).toHaveBeenCalledWith(\n                expect.objectContaining({\n                    detail: {\n                        host: 'Homo',\n                    },\n                }),\n            );\n        });\n    },\n    args: {\n        ...Default.args,\n        initialValue: '',\n    },\n}"
         }
       ],
       "exports": [
@@ -1428,6 +1797,15 @@
           "description": "",
           "name": "TextInputComponent",
           "members": [
+            {
+              "kind": "field",
+              "name": "initialValue",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "''",
+              "attribute": "initialValue"
+            },
             {
               "kind": "field",
               "name": "lapisField",
@@ -1441,7 +1819,7 @@
               "kind": "field",
               "name": "placeholderText",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
               "default": "''",
               "attribute": "placeholderText"
@@ -1457,6 +1835,14 @@
             }
           ],
           "attributes": [
+            {
+              "name": "initialValue",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "''",
+              "fieldName": "initialValue"
+            },
             {
               "name": "lapisField",
               "type": {
@@ -1468,7 +1854,7 @@
             {
               "name": "placeholderText",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
               "default": "''",
               "fieldName": "placeholderText"