@genspectrum/dashboard-components 0.1.4 → 0.2.0

package/custom-elements.json

@@ -64,7 +64,7 @@
           "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}"
+          "default": "{ title: 'Wrapper/App', component: 'gs-app', parameters: withComponentDocs({ fetchMock: {}, componentDocs: { opensShadowDom: false, expectsChildren: true, codeExample, }, }), decorators: [withActions], tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
@@ -72,7 +72,7 @@
           "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}"
+          "default": "{ ...Template, play: async ({ canvasElement }) => { const canvas = within(canvasElement); await waitFor(() => { expect(canvas.getByText(LAPIS_URL)).toBeVisible(); expect(canvas.getByText('\"name\": \"ORF1a\",', { exact: false })).toBeVisible(); }); }, }"
         },
         {
           "kind": "variable",
@@ -80,7 +80,7 @@
           "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}"
+          "default": "{ ...Template, parameters: { fetchMock: { mocks: [ { matcher: { name: 'referenceGenome', url: REFERENCE_GENOME_ENDPOINT, }, response: { status: 200, body: referenceGenome, }, options: { delay: 5000, }, }, ], }, }, }"
         },
         {
           "kind": "variable",
@@ -88,7 +88,7 @@
           "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}"
+          "default": "{ ...Template, args: { lapis: 'definitely-not-a-valid-url', }, play: async ({ canvasElement }) => { const canvas = within(canvasElement); await waitFor(() => { expect(canvas.getByText('Error', { exact: false })).toBeVisible(); }); }, }"
         },
         {
           "kind": "class",
@@ -109,7 +109,7 @@
               "type": {
                 "text": "ReferenceGenome"
               },
-              "default": "{\n        nucleotideSequences: [],\n        genes: [],\n    }"
+              "default": "{ nucleotideSequences: [], genes: [], }"
             }
           ],
           "superclass": {
@@ -223,23 +223,54 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/web-components/display/aggregate-component.stories.ts",
+      "path": "src/web-components/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "App",
+          "declaration": {
+            "name": "App",
+            "module": "./app.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./visualization"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./input"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/web-components/input/gs-date-range-selector.stories.ts",
       "declarations": [
         {
           "kind": "variable",
           "name": "meta",
           "type": {
-            "text": "Meta<AggregateProps>"
+            "text": "Meta<DateRangeSelectorProps<'CustomDateRange'>>"
           },
-          "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}"
+          "default": "{ title: 'Input/DateRangeSelector', component: 'gs-date-range-selector', parameters: withComponentDocs({ actions: { handles: ['gs-date-range-changed'], }, fetchMock: {}, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), argTypes: { initialValue: { control: { type: 'select', }, options: [ PRESET_VALUE_CUSTOM, PRESET_VALUE_ALL_TIMES, PRESET_VALUE_LAST_2_WEEKS, PRESET_VALUE_LAST_MONTH, PRESET_VALUE_LAST_2_MONTHS, PRESET_VALUE_LAST_3_MONTHS, PRESET_VALUE_LAST_6_MONTHS, 'CustomDateRange', ], }, customSelectOptions: { control: { type: 'object', }, }, earliestDate: { control: { type: 'text', }, }, width: { control: { type: 'text', }, }, }, args: { customSelectOptions: [{ label: 'CustomDateRange', dateFrom: '2021-01-01', dateTo: '2021-12-31' }], earliestDate: '1970-01-01', initialValue: PRESET_VALUE_LAST_6_MONTHS, width: '100%', }, decorators: [withActions], tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
-          "name": "Table",
+          "name": "DateRangeSelectorStory",
           "type": {
-            "text": "StoryObj<AggregateProps>"
+            "text": "StoryObj<DateRangeSelectorProps<'CustomDateRange'>>"
           },
-          "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}"
+          "default": "{ render: (args) => html` <gs-app lapis=\"${LAPIS_URL}\"> <div class=\"max-w-screen-lg\"> <gs-date-range-selector .customSelectOptions=${args.customSelectOptions} .earliestDate=${args.earliestDate} .initialValue=${args.initialValue} .width=${args.width} ></gs-date-range-selector> </div> </gs-app>`, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-date-range-selector'); const dateTo = () => canvas.getByPlaceholderText('Date to'); await step('Expect last 6 months to be selected', async () => { await expect(canvas.getByRole('combobox')).toHaveValue('last6Months'); await waitFor(() => { expect(dateTo()).toHaveValue(toYYYYMMDD(new Date())); }); }); }, }"
         }
       ],
       "exports": [
@@ -248,208 +279,186 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/web-components/display/aggregate-component.stories.ts"
+            "module": "src/web-components/input/gs-date-range-selector.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "Table",
+          "name": "DateRangeSelectorStory",
           "declaration": {
-            "name": "Table",
-            "module": "src/web-components/display/aggregate-component.stories.ts"
+            "name": "DateRangeSelectorStory",
+            "module": "src/web-components/input/gs-date-range-selector.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/web-components/display/aggregate-component.tsx",
+      "path": "src/web-components/input/gs-date-range-selector.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",
+          "description": "## Context\nThis component is a group of input fields designed to specify a date range. It consists of 3 fields:\n\n- a select field to choose a predefined date range,\n- an input field with an attached date picker for the start date,\n- an input field with an attached date picker for the end date.\n\nSetting a value in the select field will overwrite the previous values of the start and end date.\nSetting a value in either of the date pickers will set the select field to \"custom\",\nwhich represents an arbitrary date range.",
+          "name": "DateRangeSelectorComponent",
           "members": [
             {
               "kind": "field",
-              "name": "fields",
+              "name": "customSelectOptions",
               "type": {
-                "text": "string[]"
+                "text": "{ label: string; dateFrom: string; dateTo: string }[]"
               },
               "default": "[]",
-              "description": "The fields to aggregate by.",
-              "attribute": "fields"
+              "description": "An array of custom options that the select field should provide,\nin addition to the predefined options.\nThe `label` will be shown to the user, and it will be available as `initialValue`.\nThe dates must be in the format `YYYY-MM-DD`.",
+              "attribute": "customSelectOptions"
             },
             {
               "kind": "field",
-              "name": "views",
+              "name": "earliestDate",
               "type": {
-                "text": "View[]"
+                "text": "string | undefined"
               },
-              "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"
+              "default": "'1900-01-01'",
+              "description": "The `dateFrom` value to use in the `allTimes` preset in the format `YYYY-MM-DD`.",
+              "attribute": "earliestDate"
             },
             {
               "kind": "field",
-              "name": "filter",
+              "name": "initialValue",
               "type": {
-                "text": "LapisFilter"
+                "text": "'custom'\n        | 'allTimes'\n        | 'last2Weeks'\n        | 'lastMonth'\n        | 'last2Months'\n        | 'last3Months'\n        | 'last6Months'\n        | string\n        | undefined"
               },
-              "default": "{}",
-              "description": "The filter to apply to the data.",
-              "attribute": "filter"
+              "default": "'last6Months'",
+              "description": "The initial value to use for this date range selector.\nMust be a valid label from the preset labels or a `label` given in the `customSelectOptions`.\n\nIf the value is invalid, the component will default to `'last6Months'`.",
+              "attribute": "initialValue"
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "width",
               "type": {
-                "text": "{ width?: string; height?: string } | undefined"
+                "text": "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"
+              "description": "The width of the component.\n\nIf not set, the component will take the full width of its container.\n\nThe width should be a string with a unit in css style, e.g. '100%', '500px' or '50vw'.\nIf the unit is %, the size will be relative to the container of the component.",
+              "attribute": "width"
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent<{ dateFrom: string; dateTo: string; }>"
+              },
+              "description": "Fired when: - The select field is changed, - A date is selected in either of the date pickers, - A date was typed into either of the date input fields, and the input field loses focus (\"on blur\"). Contains the dates in the format `YYYY-MM-DD`.",
+              "name": "gs-date-range-changed"
             }
           ],
           "attributes": [
             {
-              "name": "fields",
+              "name": "customSelectOptions",
               "type": {
-                "text": "string[]"
+                "text": "{ label: string; dateFrom: string; dateTo: string }[]"
               },
               "default": "[]",
-              "description": "The fields to aggregate by.",
-              "fieldName": "fields"
+              "description": "An array of custom options that the select field should provide,\nin addition to the predefined options.\nThe `label` will be shown to the user, and it will be available as `initialValue`.\nThe dates must be in the format `YYYY-MM-DD`.",
+              "fieldName": "customSelectOptions"
             },
             {
-              "name": "views",
+              "name": "earliestDate",
               "type": {
-                "text": "View[]"
+                "text": "string | undefined"
               },
-              "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"
+              "default": "'1900-01-01'",
+              "description": "The `dateFrom` value to use in the `allTimes` preset in the format `YYYY-MM-DD`.",
+              "fieldName": "earliestDate"
             },
             {
-              "name": "filter",
+              "name": "initialValue",
               "type": {
-                "text": "LapisFilter"
+                "text": "'custom'\n        | 'allTimes'\n        | 'last2Weeks'\n        | 'lastMonth'\n        | 'last2Months'\n        | 'last3Months'\n        | 'last6Months'\n        | string\n        | undefined"
               },
-              "default": "{}",
-              "description": "The filter to apply to the data.",
-              "fieldName": "filter"
+              "default": "'last6Months'",
+              "description": "The initial value to use for this date range selector.\nMust be a valid label from the preset labels or a `label` given in the `customSelectOptions`.\n\nIf the value is invalid, the component will default to `'last6Months'`.",
+              "fieldName": "initialValue"
             },
             {
-              "name": "size",
+              "name": "width",
               "type": {
-                "text": "{ width?: string; height?: string } | undefined"
+                "text": "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"
+              "description": "The width of the component.\n\nIf not set, the component will take the full width of its container.\n\nThe width should be a string with a unit in css style, e.g. '100%', '500px' or '50vw'.\nIf the unit is %, the size will be relative to the container of the component.",
+              "fieldName": "width"
             }
           ],
           "superclass": {
-            "name": "PreactLitAdapterWithGridJsStyles",
-            "module": "/src/web-components/PreactLitAdapterWithGridJsStyles"
+            "name": "PreactLitAdapter",
+            "module": "/src/web-components/PreactLitAdapter"
           },
-          "tagName": "gs-aggregate-component",
+          "tagName": "gs-date-range-selector",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "AggregateComponent",
+          "name": "DateRangeSelectorComponent",
           "declaration": {
-            "name": "AggregateComponent",
-            "module": "src/web-components/display/aggregate-component.tsx"
+            "name": "DateRangeSelectorComponent",
+            "module": "src/web-components/input/gs-date-range-selector.tsx"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "gs-aggregate-component",
+          "name": "gs-date-range-selector",
           "declaration": {
-            "name": "AggregateComponent",
-            "module": "src/web-components/display/aggregate-component.tsx"
+            "name": "DateRangeSelectorComponent",
+            "module": "src/web-components/input/gs-date-range-selector.tsx"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/web-components/display/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "MutationComparisonComponent",
-          "declaration": {
-            "name": "MutationComparisonComponent",
-            "module": "./mutation-comparison-component"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "MutationsComponent",
-          "declaration": {
-            "name": "MutationsComponent",
-            "module": "./mutations-component"
-          }
-        },
+      "path": "src/web-components/input/gs-location-filter.stories.ts",
+      "declarations": [
         {
-          "kind": "js",
-          "name": "PrevalenceOverTimeComponent",
-          "declaration": {
-            "name": "PrevalenceOverTimeComponent",
-            "module": "./prevalence-over-time-component"
-          }
+          "kind": "variable",
+          "name": "meta",
+          "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'], }"
         },
         {
-          "kind": "js",
-          "name": "RelativeGrowthAdvantageComponent",
-          "declaration": {
-            "name": "RelativeGrowthAdvantageComponent",
-            "module": "./relative-growth-advantage-component"
-          }
+          "kind": "variable",
+          "name": "LocationFilter",
+          "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(); }); }, }"
         },
-        {
-          "kind": "js",
-          "name": "AggregateComponent",
-          "declaration": {
-            "name": "AggregateComponent",
-            "module": "./aggregate-component"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/web-components/display/mutation-comparison-component.stories.ts",
-      "declarations": [
         {
           "kind": "variable",
-          "name": "meta",
+          "name": "DelayToShowLoadingState",
           "type": {
-            "text": "Meta<MutationComparisonProps>"
+            "text": "StoryObj<LocationFilterProps>"
           },
-          "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}"
+          "default": "{ ...Template, parameters: { fetchMock: { mocks: [ { matcher: aggregatedEndpointMatcher, response: { status: 200, body: data, }, options: { delay: 5000, }, }, ], }, }, }"
         },
         {
           "kind": "variable",
-          "name": "Default",
+          "name": "FetchingLocationsFails",
           "type": {
-            "text": "StoryObj<MutationComparisonProps>"
+            "text": "StoryObj<LocationFilterProps>"
           },
-          "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}"
+          "default": "{ ...Template, parameters: { fetchMock: { mocks: [ { matcher: aggregatedEndpointMatcher, response: { status: 400, body: { error: 'no data' }, }, }, ], }, }, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-location-filter'); await waitFor(() => expect(canvas.getByText('Oops! Something went wrong.', { exact: false })).toBeInTheDocument(), ); }, }"
         },
         {
           "kind": "variable",
-          "name": "VennDiagram",
+          "name": "FiresEvent",
           "type": {
-            "text": "StoryObj<MutationComparisonProps>"
+            "text": "StoryObj<LocationFilterProps>"
           },
-          "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}"
+          "default": "{ ...Template, parameters: { fetchMock: { mocks: [ { matcher: aggregatedEndpointMatcher, response: { status: 200, body: data, }, }, ], }, }, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-location-filter'); const submitButton = () => canvas.getByRole('button', { name: 'Submit' }); const inputField = () => canvas.getByRole('combobox'); const listenerMock = fn(); await step('Setup event listener mock', async () => { canvasElement.addEventListener('gs-location-changed', listenerMock); }); await step('wait until data is loaded', async () => { await waitFor(() => { return expect(inputField()).toBeEnabled(); }); }); await step('Input invalid location', async () => { await userEvent.type(inputField(), 'Not / A / Location'); await userEvent.click(submitButton()); await expect(listenerMock).not.toHaveBeenCalled(); await userEvent.type(inputField(), '{backspace>18/}'); }); await step('Select Asia', async () => { await userEvent.type(inputField(), 'Asia'); await userEvent.click(submitButton()); await expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { region: 'Asia', }, }), ); }); await step('Select Asia / Bangladesh / Rajshahi / Chapainawabgonj', async () => { await userEvent.type(inputField(), ' / Bangladesh / Rajshahi / Chapainawabgonj'); await userEvent.click(submitButton()); await expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { region: 'Asia', country: 'Bangladesh', division: 'Rajshahi', location: 'Chapainawabgonj', }, }), ); }); }, }"
         }
       ],
       "exports": [
@@ -458,177 +467,183 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/web-components/display/mutation-comparison-component.stories.ts"
+            "module": "src/web-components/input/gs-location-filter.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "Default",
+          "name": "LocationFilter",
           "declaration": {
-            "name": "Default",
-            "module": "src/web-components/display/mutation-comparison-component.stories.ts"
+            "name": "LocationFilter",
+            "module": "src/web-components/input/gs-location-filter.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "VennDiagram",
+          "name": "DelayToShowLoadingState",
           "declaration": {
-            "name": "VennDiagram",
-            "module": "src/web-components/display/mutation-comparison-component.stories.ts"
+            "name": "DelayToShowLoadingState",
+            "module": "src/web-components/input/gs-location-filter.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FetchingLocationsFails",
+          "declaration": {
+            "name": "FetchingLocationsFails",
+            "module": "src/web-components/input/gs-location-filter.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FiresEvent",
+          "declaration": {
+            "name": "FiresEvent",
+            "module": "src/web-components/input/gs-location-filter.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/web-components/display/mutation-comparison-component.tsx",
+      "path": "src/web-components/input/gs-location-filter.tsx",
       "declarations": [
         {
           "kind": "class",
-          "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",
+          "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": "variants",
+              "name": "initialValue",
               "type": {
-                "text": "{\n        lapisFilter: Record<string, string | number | null | boolean>;\n        displayName: string;\n    }[]"
+                "text": "string"
               },
-              "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"
+              "default": "''",
+              "description": "The initial value to use for this location filter.\nMust be of the form `valueForField1 / valueForField2 / ... / valueForFieldN`.",
+              "attribute": "initialValue"
             },
             {
               "kind": "field",
-              "name": "sequenceType",
+              "name": "fields",
               "type": {
-                "text": "'nucleotide' | 'amino acid'"
+                "text": "string[]"
               },
-              "default": "'nucleotide'",
-              "description": "The type of the sequence for which the mutations should be shown.",
-              "attribute": "sequenceType"
+              "default": "[]",
+              "description": "The fields to display in the location filter, in hierarchical order.\nThe top-level field should be the first entry in the array.\nThis component assumes that the values for each field form a strict hierarchy\n(e.g., `fields = ['continent', 'country', 'city']`).",
+              "attribute": "fields"
             },
             {
               "kind": "field",
-              "name": "views",
+              "name": "width",
               "type": {
-                "text": "('table' | 'venn')[]"
+                "text": "string | undefined"
               },
-              "default": "['table']",
-              "description": "A list of tabs with views that this component should provide.",
-              "attribute": "views"
-            },
+              "default": "undefined",
+              "description": "The width of the component.\n\nIf not set, the component will take the full width of its container.\n\nThe width should be a string with a unit in css style, e.g. '100%', '500px' or '50vw'.\nIf the unit is %, the size will be relative to the container of the component.",
+              "attribute": "width"
+            }
+          ],
+          "events": [
             {
-              "kind": "field",
-              "name": "size",
               "type": {
-                "text": "{ width?: string; height?: string } | undefined"
+                "text": "CustomEvent<Record<string, string>>"
               },
-              "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"
+              "description": "Fired when the field is submitted with a valid location value. The `details` of this event contain an object with all `fields` as keys and the corresponding values as values, if they are not `undefined`. Example: ``` { continent: \"Asia\", country: \"China\", city: \"Beijing\" } ```",
+              "name": "gs-location-changed"
             }
           ],
           "attributes": [
             {
-              "name": "variants",
+              "name": "initialValue",
               "type": {
-                "text": "{\n        lapisFilter: Record<string, string | number | null | boolean>;\n        displayName: string;\n    }[]"
+                "text": "string"
               },
-              "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"
+              "default": "''",
+              "description": "The initial value to use for this location filter.\nMust be of the form `valueForField1 / valueForField2 / ... / valueForFieldN`.",
+              "fieldName": "initialValue"
             },
             {
-              "name": "sequenceType",
+              "name": "fields",
               "type": {
-                "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": "('table' | 'venn')[]"
+                "text": "string[]"
               },
-              "default": "['table']",
-              "description": "A list of tabs with views that this component should provide.",
-              "fieldName": "views"
+              "default": "[]",
+              "description": "The fields to display in the location filter, in hierarchical order.\nThe top-level field should be the first entry in the array.\nThis component assumes that the values for each field form a strict hierarchy\n(e.g., `fields = ['continent', 'country', 'city']`).",
+              "fieldName": "fields"
             },
             {
-              "name": "size",
+              "name": "width",
               "type": {
-                "text": "{ width?: string; height?: string } | undefined"
+                "text": "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"
+              "description": "The width of the component.\n\nIf not set, the component will take the full width of its container.\n\nThe width should be a string with a unit in css style, e.g. '100%', '500px' or '50vw'.\nIf the unit is %, the size will be relative to the container of the component.",
+              "fieldName": "width"
             }
           ],
           "superclass": {
-            "name": "PreactLitAdapterWithGridJsStyles",
-            "module": "/src/web-components/PreactLitAdapterWithGridJsStyles"
+            "name": "PreactLitAdapter",
+            "module": "/src/web-components/PreactLitAdapter"
           },
-          "tagName": "gs-mutation-comparison-component",
+          "tagName": "gs-location-filter",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "MutationComparisonComponent",
+          "name": "LocationFilterComponent",
           "declaration": {
-            "name": "MutationComparisonComponent",
-            "module": "src/web-components/display/mutation-comparison-component.tsx"
+            "name": "LocationFilterComponent",
+            "module": "src/web-components/input/gs-location-filter.tsx"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "gs-mutation-comparison-component",
+          "name": "gs-location-filter",
           "declaration": {
-            "name": "MutationComparisonComponent",
-            "module": "src/web-components/display/mutation-comparison-component.tsx"
+            "name": "LocationFilterComponent",
+            "module": "src/web-components/input/gs-location-filter.tsx"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/web-components/display/mutations-component.stories.ts",
+      "path": "src/web-components/input/gs-mutation-filter.stories.ts",
       "declarations": [
         {
           "kind": "variable",
           "name": "meta",
           "type": {
-            "text": "Meta<MutationsProps>"
+            "text": "Meta<MutationFilterProps>"
           },
-          "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}"
+          "default": "{ title: 'Input/Mutation filter', component: 'gs-mutation-filter', parameters: withComponentDocs({ actions: { handles: ['gs-mutation-filter-changed', 'gs-mutation-filter-on-blur'], }, fetchMock: {}, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), argTypes: { initialValue: { control: { type: 'object', }, }, size: { control: { type: 'object', }, }, }, decorators: [withActions], tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
           "name": "Default",
           "type": {
-            "text": "StoryObj<MutationsProps>"
+            "text": "StoryObj<MutationFilterProps>"
           },
-          "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}"
+          "default": "{ ...Template, args: { initialValue: ['A123T'], }, }"
         },
         {
           "kind": "variable",
-          "name": "OnTableTab",
+          "name": "FiresFilterChangedEvent",
           "type": {
-            "text": "StoryObj<MutationsProps>"
+            "text": "StoryObj<MutationFilterProps>"
           },
-          "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}"
+          "default": "{ ...Template, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-filter'); const inputField = () => canvas.getByPlaceholderText('Enter a mutation', { exact: false }); const submitButton = () => canvas.getByRole('button', { name: '+' }); const listenerMock = fn(); await step('Setup event listener mock', async () => { canvasElement.addEventListener('gs-mutation-filter-changed', listenerMock); }); await step('wait until data is loaded', async () => { await waitFor(() => { return expect(inputField()).toBeEnabled(); }); }); await step('Enter a valid mutation', async () => { await userEvent.type(inputField(), 'A123T'); await waitFor(() => submitButton().click()); await waitFor(() => expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { nucleotideMutations: ['A123T'], aminoAcidMutations: [], nucleotideInsertions: [], aminoAcidInsertions: [], }, }), ), ); }); }, }"
         },
         {
           "kind": "variable",
-          "name": "OnInsertionsTab",
+          "name": "FiresFilterOnBlurEvent",
           "type": {
-            "text": "StoryObj<MutationsProps>"
+            "text": "StoryObj<MutationFilterProps>"
           },
-          "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}"
+          "default": "{ ...Template, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-filter'); const inputField = () => canvas.getByPlaceholderText('Enter a mutation', { exact: false }); const listenerMock = fn(); await step('Setup event listener mock', async () => { canvasElement.addEventListener('gs-mutation-filter-on-blur', listenerMock); }); await step('wait until data is loaded', async () => { await waitFor(() => { return expect(inputField()).toBeEnabled(); }); }); await step('Move outside of input', async () => { await userEvent.type(inputField(), 'A123T'); await userEvent.tab(); await expect(listenerMock).toHaveBeenCalled(); }); }, }"
         }
       ],
       "exports": [
@@ -637,7 +652,7 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/web-components/display/mutations-component.stories.ts"
+            "module": "src/web-components/input/gs-mutation-filter.stories.ts"
           }
         },
         {
@@ -645,62 +660,45 @@
           "name": "Default",
           "declaration": {
             "name": "Default",
-            "module": "src/web-components/display/mutations-component.stories.ts"
+            "module": "src/web-components/input/gs-mutation-filter.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "OnTableTab",
+          "name": "FiresFilterChangedEvent",
           "declaration": {
-            "name": "OnTableTab",
-            "module": "src/web-components/display/mutations-component.stories.ts"
+            "name": "FiresFilterChangedEvent",
+            "module": "src/web-components/input/gs-mutation-filter.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "OnInsertionsTab",
+          "name": "FiresFilterOnBlurEvent",
           "declaration": {
-            "name": "OnInsertionsTab",
-            "module": "src/web-components/display/mutations-component.stories.ts"
+            "name": "FiresFilterOnBlurEvent",
+            "module": "src/web-components/input/gs-mutation-filter.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/web-components/display/mutations-component.tsx",
+      "path": "src/web-components/input/gs-mutation-filter.tsx",
       "declarations": [
         {
           "kind": "class",
-          "description": "",
-          "name": "MutationsComponent",
+          "description": "## Context\nThis component provides an input field to specify filters for nucleotide and amino acid mutations and insertions.\n\nInput values have to be provided one at a time and submitted by pressing the Enter key or by clicking the '+' button.\nAfter submission, the component validates the input and fires an event with the selected mutations.\nAll previously selected mutations are displayed at the input field and added to the event.\nUsers can remove a mutation by clicking the 'x' button next to the mutation.\n\nValidation of the input is performed according to the following rules:\n\nMutations have to conform to the following format: `<gene/segment>:<symbol at reference><position><Substituted symbol/Deletion>`\n    - Gene/segment: The gene or segment where the mutation occurs. Must be contained in the reference genome\n      (Optional for elements with only one gene/segment)\n    - Symbol at reference: The symbol at the reference position. (Optional)\n    - Position: The position of the mutation. (Required)\n    - Substituted symbol/Deletion: The substituted symbol or '-' for a deletion. (Required)\n    Example: S:614G, 614G, 614- or 614G\n\nInsertions have to conform to the following format: `ins_<gene/segment>:<position>:<Inserted symbols>`\n    - Gene/segment: The gene or segment where the insertion occurs. Must be contained in the reference genome\n      (Optional for elements with only one gene/segment)\n    - Position: The position of the insertion. (Required)\n    - Inserted symbols: The symbols that are inserted. (Required)\n    Example: ins_S:614:G, ins_614:G",
+          "name": "MutationFilterComponent",
           "members": [
             {
               "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "LapisFilter"
-              },
-              "default": "{ displayName: '' }",
-              "attribute": "variant"
-            },
-            {
-              "kind": "field",
-              "name": "sequenceType",
-              "type": {
-                "text": "SequenceType"
-              },
-              "default": "'nucleotide'",
-              "attribute": "sequenceType"
-            },
-            {
-              "kind": "field",
-              "name": "views",
+              "name": "initialValue",
               "type": {
-                "text": "View[]"
+                "text": "{\n              nucleotideMutations: string[];\n              aminoAcidMutations: string[];\n              nucleotideInsertions: string[];\n              aminoAcidInsertions: string[];\n          }\n        | string[]\n        | undefined"
               },
-              "default": "['table', 'grid']",
-              "attribute": "views"
+              "default": "undefined",
+              "description": "The initial value to use for this mutation filter.\nMust be either\n- an array of strings of valid mutations.\n- an object with the keys `nucleotideMutations`, `aminoAcidMutations`, `nucleotideInsertions` and `aminoAcidInsertions` and corresponding string arrays.",
+              "attribute": "initialValue"
             },
             {
               "kind": "field",
@@ -713,30 +711,31 @@
               "attribute": "size"
             }
           ],
-          "attributes": [
+          "events": [
             {
-              "name": "variant",
               "type": {
-                "text": "LapisFilter"
+                "text": "CustomEvent<{nucleotideMutations: string[],aminoAcidMutations: string[],nucleotideInsertions: string[],aminoAcidInsertions: string[]}>"
               },
-              "default": "{ displayName: '' }",
-              "fieldName": "variant"
+              "description": "Fired when: - The user has submitted a valid mutation or insertion - The user has removed a mutation or insertion",
+              "name": "gs-mutation-filter-changed"
             },
             {
-              "name": "sequenceType",
               "type": {
-                "text": "SequenceType"
+                "text": "CustomEvent<{nucleotideMutations: string[],aminoAcidMutations: string[],nucleotideInsertions: string[],aminoAcidInsertions: string[]}>"
               },
-              "default": "'nucleotide'",
-              "fieldName": "sequenceType"
-            },
+              "description": "Fired when: - the mutation filter has lost focus Contains the selected mutations in the format",
+              "name": "gs-mutation-filter-on-blur"
+            }
+          ],
+          "attributes": [
             {
-              "name": "views",
+              "name": "initialValue",
               "type": {
-                "text": "View[]"
+                "text": "{\n              nucleotideMutations: string[];\n              aminoAcidMutations: string[];\n              nucleotideInsertions: string[];\n              aminoAcidInsertions: string[];\n          }\n        | string[]\n        | undefined"
               },
-              "default": "['table', 'grid']",
-              "fieldName": "views"
+              "default": "undefined",
+              "description": "The initial value to use for this mutation filter.\nMust be either\n- an array of strings of valid mutations.\n- an object with the keys `nucleotideMutations`, `aminoAcidMutations`, `nucleotideInsertions` and `aminoAcidInsertions` and corresponding string arrays.",
+              "fieldName": "initialValue"
             },
             {
               "name": "size",
@@ -749,83 +748,59 @@
             }
           ],
           "superclass": {
-            "name": "PreactLitAdapterWithGridJsStyles",
-            "module": "/src/web-components/PreactLitAdapterWithGridJsStyles"
+            "name": "PreactLitAdapter",
+            "module": "/src/web-components/PreactLitAdapter"
           },
-          "tagName": "gs-mutations-component",
+          "tagName": "gs-mutation-filter",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "MutationsComponent",
+          "name": "MutationFilterComponent",
           "declaration": {
-            "name": "MutationsComponent",
-            "module": "src/web-components/display/mutations-component.tsx"
+            "name": "MutationFilterComponent",
+            "module": "src/web-components/input/gs-mutation-filter.tsx"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "gs-mutations-component",
+          "name": "gs-mutation-filter",
           "declaration": {
-            "name": "MutationsComponent",
-            "module": "src/web-components/display/mutations-component.tsx"
+            "name": "MutationFilterComponent",
+            "module": "src/web-components/input/gs-mutation-filter.tsx"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/web-components/display/prevalence-over-time-component.stories.ts",
+      "path": "src/web-components/input/gs-text-input.stories.ts",
       "declarations": [
         {
           "kind": "variable",
           "name": "meta",
           "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        size: [{ control: 'object' }],\n    },\n}"
-        },
-        {
-          "kind": "variable",
-          "name": "TwoVariants",
-          "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        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",
-          "name": "OneVariant",
-          "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        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",
-          "name": "OneVariantOnLineTab",
-          "type": {
-            "text": "StoryObj<PrevalenceOverTimeProps>"
+            "text": "Meta<TextInputProps>"
           },
-          "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}"
+          "default": "{ title: 'Input/Text input', component: 'gs-text-input', parameters: withComponentDocs({ actions: { handles: ['gs-text-input-changed'], }, fetchMock: { mocks: [ { matcher: { name: 'hosts', url: AGGREGATED_ENDPOINT, body: { fields: ['host'], }, }, response: { status: 200, body: data, }, }, ], }, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), argTypes: { lapisField: { control: { type: 'text', }, }, placeholderText: { control: { type: 'text', }, }, initialValue: { control: { type: 'text', }, }, width: { control: { type: 'text', }, }, }, decorators: [withActions], tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
-          "name": "OneVariantOnBubbleTab",
+          "name": "Default",
           "type": {
-            "text": "StoryObj<PrevalenceOverTimeProps>"
+            "text": "StoryObj<TextInputProps>"
           },
-          "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}"
+          "default": "{ render: (args) => { return html` <gs-app lapis=\"${LAPIS_URL}\"> <div class=\"max-w-screen-lg\"> <gs-text-input .lapisField=${args.lapisField} .placeholderText=${args.placeholderText} .initialValue=${args.initialValue} .width=${args.width} ></gs-text-input> </div> </gs-app>`; }, args: { lapisField: 'host', placeholderText: 'Enter host name', initialValue: 'Homo sapiens', width: '100%', }, }"
         },
         {
           "kind": "variable",
-          "name": "OneVariantOnTableTab",
+          "name": "FiresEvent",
           "type": {
-            "text": "StoryObj<PrevalenceOverTimeProps>"
+            "text": "StoryObj<TextInputProps>"
           },
-          "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}"
+          "default": "{ ...Default, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-text-input'); const inputField = () => canvas.getByPlaceholderText('Enter host name'); const listenerMock = fn(); await step('Setup event listener mock', async () => { canvasElement.addEventListener('gs-text-input-changed', listenerMock); }); await step('wait until data is loaded', async () => { await waitFor(() => { return expect(inputField()).toBeEnabled(); }); }); await step('Enters an invalid host name', async () => { await userEvent.type(inputField(), 'notInList'); await expect(listenerMock).not.toHaveBeenCalled(); await userEvent.type(inputField(), '{backspace>9/}'); }); await step('Enter a valid host name', async () => { await userEvent.type(inputField(), 'Homo'); await expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { host: 'Homo', }, }), ); }); }, args: { ...Default.args, initialValue: '', }, }"
         }
       ],
       "exports": [
@@ -834,230 +809,255 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/web-components/display/prevalence-over-time-component.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "TwoVariants",
-          "declaration": {
-            "name": "TwoVariants",
-            "module": "src/web-components/display/prevalence-over-time-component.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "OneVariant",
-          "declaration": {
-            "name": "OneVariant",
-            "module": "src/web-components/display/prevalence-over-time-component.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "OneVariantOnLineTab",
-          "declaration": {
-            "name": "OneVariantOnLineTab",
-            "module": "src/web-components/display/prevalence-over-time-component.stories.ts"
+            "module": "src/web-components/input/gs-text-input.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "OneVariantOnBubbleTab",
+          "name": "Default",
           "declaration": {
-            "name": "OneVariantOnBubbleTab",
-            "module": "src/web-components/display/prevalence-over-time-component.stories.ts"
+            "name": "Default",
+            "module": "src/web-components/input/gs-text-input.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "OneVariantOnTableTab",
+          "name": "FiresEvent",
           "declaration": {
-            "name": "OneVariantOnTableTab",
-            "module": "src/web-components/display/prevalence-over-time-component.stories.ts"
+            "name": "FiresEvent",
+            "module": "src/web-components/input/gs-text-input.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/web-components/display/prevalence-over-time-component.tsx",
+      "path": "src/web-components/input/gs-text-input.tsx",
       "declarations": [
         {
           "kind": "class",
-          "description": "",
-          "name": "PrevalenceOverTimeComponent",
+          "description": "\n## Context\n\nThis component provides a text input field to specify filters for arbitrary fields of this Lapis instance.",
+          "name": "TextInputComponent",
           "members": [
             {
               "kind": "field",
-              "name": "numerator",
-              "type": {
-                "text": "NamedLapisFilter | NamedLapisFilter[]"
-              },
-              "default": "{ displayName: '' }",
-              "attribute": "numerator"
-            },
-            {
-              "kind": "field",
-              "name": "denominator",
-              "type": {
-                "text": "NamedLapisFilter"
-              },
-              "default": "{ displayName: '' }",
-              "attribute": "denominator"
-            },
-            {
-              "kind": "field",
-              "name": "granularity",
+              "name": "initialValue",
               "type": {
-                "text": "TemporalGranularity"
+                "text": "string | undefined"
               },
-              "default": "'day'",
-              "attribute": "granularity"
+              "default": "''",
+              "description": "The initial value to use for this text input.",
+              "attribute": "initialValue"
             },
             {
               "kind": "field",
-              "name": "smoothingWindow",
+              "name": "lapisField",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "0",
-              "attribute": "smoothingWindow"
+              "default": "''",
+              "description": "The Lapis field name to use for this text input.",
+              "attribute": "lapisField"
             },
             {
               "kind": "field",
-              "name": "views",
+              "name": "placeholderText",
               "type": {
-                "text": "View[]"
+                "text": "string | undefined"
               },
-              "default": "['bar', 'line', 'bubble', 'table']",
-              "attribute": "views"
+              "default": "''",
+              "description": "The placeholder text to display in the input field.",
+              "attribute": "placeholderText"
             },
             {
               "kind": "field",
-              "name": "confidenceIntervalMethods",
+              "name": "width",
               "type": {
-                "text": "ConfidenceIntervalMethod[]"
+                "text": "string | undefined"
               },
-              "default": "['wilson']",
-              "attribute": "confidenceIntervalMethods"
-            },
+              "default": "undefined",
+              "description": "The width of the component.\n\nIf not set, the component will take the full width of its container.\n\nThe width should be a string with a unit in css style, e.g. '100%', '500px' or '50vw'.\nIf the unit is %, the size will be relative to the container of the component.",
+              "attribute": "width"
+            }
+          ],
+          "events": [
             {
-              "kind": "field",
-              "name": "size",
               "type": {
-                "text": "{ width?: string; height?: string } | undefined"
+                "text": "CustomEvent<Record<string, string>>"
               },
-              "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"
+              "description": "Fired when the input field is changed. The `details` of this event contain an object with the `lapisField` as key and the input value as value. Example: ``` { \"host\": \"Homo sapiens\" } ```",
+              "name": "gs-text-input-changed"
             }
           ],
           "attributes": [
             {
-              "name": "numerator",
+              "name": "initialValue",
               "type": {
-                "text": "NamedLapisFilter | NamedLapisFilter[]"
+                "text": "string | undefined"
               },
-              "default": "{ displayName: '' }",
-              "fieldName": "numerator"
+              "default": "''",
+              "description": "The initial value to use for this text input.",
+              "fieldName": "initialValue"
             },
             {
-              "name": "denominator",
+              "name": "lapisField",
               "type": {
-                "text": "NamedLapisFilter"
+                "text": "string"
               },
-              "default": "{ displayName: '' }",
-              "fieldName": "denominator"
+              "default": "''",
+              "description": "The Lapis field name to use for this text input.",
+              "fieldName": "lapisField"
             },
             {
-              "name": "granularity",
+              "name": "placeholderText",
               "type": {
-                "text": "TemporalGranularity"
+                "text": "string | undefined"
               },
-              "default": "'day'",
-              "fieldName": "granularity"
+              "default": "''",
+              "description": "The placeholder text to display in the input field.",
+              "fieldName": "placeholderText"
             },
             {
-              "name": "smoothingWindow",
+              "name": "width",
               "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "fieldName": "smoothingWindow"
-            },
-            {
-              "name": "views",
-              "type": {
-                "text": "View[]"
-              },
-              "default": "['bar', 'line', 'bubble', 'table']",
-              "fieldName": "views"
-            },
-            {
-              "name": "confidenceIntervalMethods",
-              "type": {
-                "text": "ConfidenceIntervalMethod[]"
-              },
-              "default": "['wilson']",
-              "fieldName": "confidenceIntervalMethods"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "{ width?: string; height?: string } | undefined"
+                "text": "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"
+              "description": "The width of the component.\n\nIf not set, the component will take the full width of its container.\n\nThe width should be a string with a unit in css style, e.g. '100%', '500px' or '50vw'.\nIf the unit is %, the size will be relative to the container of the component.",
+              "fieldName": "width"
             }
           ],
           "superclass": {
-            "name": "PreactLitAdapterWithGridJsStyles",
-            "module": "/src/web-components/PreactLitAdapterWithGridJsStyles"
+            "name": "PreactLitAdapter",
+            "module": "/src/web-components/PreactLitAdapter"
           },
-          "tagName": "gs-prevalence-over-time",
+          "tagName": "gs-text-input",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "PrevalenceOverTimeComponent",
+          "name": "TextInputComponent",
           "declaration": {
-            "name": "PrevalenceOverTimeComponent",
-            "module": "src/web-components/display/prevalence-over-time-component.tsx"
+            "name": "TextInputComponent",
+            "module": "src/web-components/input/gs-text-input.tsx"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "gs-prevalence-over-time",
+          "name": "gs-text-input",
           "declaration": {
-            "name": "PrevalenceOverTimeComponent",
-            "module": "src/web-components/display/prevalence-over-time-component.tsx"
+            "name": "TextInputComponent",
+            "module": "src/web-components/input/gs-text-input.tsx"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/web-components/input/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DateRangeSelectorComponent",
+          "declaration": {
+            "name": "DateRangeSelectorComponent",
+            "module": "./gs-date-range-selector"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "LocationFilterComponent",
+          "declaration": {
+            "name": "LocationFilterComponent",
+            "module": "./gs-location-filter"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "TextInputComponent",
+          "declaration": {
+            "name": "TextInputComponent",
+            "module": "./gs-text-input"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "MutationFilterComponent",
+          "declaration": {
+            "name": "MutationFilterComponent",
+            "module": "./gs-mutation-filter"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/web-components/display/relative-growth-advantage-component.stories.ts",
+      "path": "src/web-components/lapis-context.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "lapisContext"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "lapisContext",
+          "declaration": {
+            "name": "lapisContext",
+            "module": "src/web-components/lapis-context.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/web-components/reference-genome-context.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "referenceGenomeContext"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "referenceGenomeContext",
+          "declaration": {
+            "name": "referenceGenomeContext",
+            "module": "src/web-components/reference-genome-context.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/web-components/visualization/data_visualization_statistical_analysis.mdx",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/web-components/visualization/gs-aggregate.stories.ts",
       "declarations": [
         {
           "kind": "variable",
           "name": "meta",
           "type": {
-            "text": "Meta<RelativeGrowthAdvantageProps>"
+            "text": "Meta<AggregateProps>"
           },
-          "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}"
+          "default": "{ title: 'Visualization/Aggregate', component: 'gs-aggregate', argTypes: { fields: [{ control: 'object' }], views: { options: ['table'], control: { type: 'check' }, }, size: [{ control: 'object' }], headline: { control: 'text' }, }, 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: `<gs-aggregate fields='[\"division\", \"host\"]' filter='{\"country\": \"USA\"}' views='[\"table\"]'></gs-aggregate>`, }, }), tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
-          "name": "Default",
+          "name": "Table",
           "type": {
-            "text": "StoryObj<RelativeGrowthAdvantageProps>"
+            "text": "StoryObj<AggregateProps>"
           },
-          "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}"
+          "default": "{ render: (args) => html` <gs-app lapis=\"${LAPIS_URL}\"> <gs-aggregate .fields=${args.fields} .filter=${args.filter} .views=${args.views} .size=${args.size} .headline=${args.headline} ></gs-aggregate> </gs-app> `, args: { fields: ['division', 'host'], views: ['table'], filter: { country: 'USA', }, size: { width: '100%', height: '700px' }, headline: 'Aggregate', }, }"
         }
       ],
       "exports": [
@@ -1066,63 +1066,57 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/web-components/display/relative-growth-advantage-component.stories.ts"
+            "module": "src/web-components/visualization/gs-aggregate.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "Default",
+          "name": "Table",
           "declaration": {
-            "name": "Default",
-            "module": "src/web-components/display/relative-growth-advantage-component.stories.ts"
+            "name": "Table",
+            "module": "src/web-components/visualization/gs-aggregate.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/web-components/display/relative-growth-advantage-component.tsx",
+      "path": "src/web-components/visualization/gs-aggregate.tsx",
       "declarations": [
         {
           "kind": "class",
-          "description": "",
-          "name": "RelativeGrowthAdvantageComponent",
+          "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": "numerator",
-              "type": {
-                "text": "LapisFilter"
-              },
-              "default": "{}",
-              "attribute": "numerator"
-            },
-            {
-              "kind": "field",
-              "name": "denominator",
+              "name": "fields",
               "type": {
-                "text": "LapisFilter"
+                "text": "string[]"
               },
-              "default": "{}",
-              "attribute": "denominator"
+              "default": "[]",
+              "description": "The fields to aggregate by.",
+              "attribute": "fields"
             },
             {
               "kind": "field",
-              "name": "generationTime",
+              "name": "views",
               "type": {
-                "text": "number"
+                "text": "View[]"
               },
-              "default": "7",
-              "attribute": "generationTime"
+              "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": "views",
+              "name": "filter",
               "type": {
-                "text": "View[]"
+                "text": "LapisFilter"
               },
-              "default": "['line']",
-              "attribute": "views"
+              "default": "{}",
+              "description": "The filter to apply to the data.",
+              "attribute": "filter"
             },
             {
               "kind": "field",
@@ -1133,41 +1127,46 @@
               "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": "numerator",
-              "type": {
-                "text": "LapisFilter"
-              },
-              "default": "{}",
-              "fieldName": "numerator"
             },
             {
-              "name": "denominator",
+              "kind": "field",
+              "name": "headline",
               "type": {
-                "text": "LapisFilter"
+                "text": "string | undefined"
               },
-              "default": "{}",
-              "fieldName": "denominator"
-            },
+              "default": "'Aggregate'",
+              "description": "The headline of the component. Set to an empty string to hide the headline.",
+              "attribute": "headline"
+            }
+          ],
+          "attributes": [
             {
-              "name": "generationTime",
+              "name": "fields",
               "type": {
-                "text": "number"
+                "text": "string[]"
               },
-              "default": "7",
-              "fieldName": "generationTime"
+              "default": "[]",
+              "description": "The fields to aggregate by.",
+              "fieldName": "fields"
             },
             {
               "name": "views",
               "type": {
                 "text": "View[]"
               },
-              "default": "['line']",
+              "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": {
@@ -1176,85 +1175,71 @@
               "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"
+            },
+            {
+              "name": "headline",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "'Aggregate'",
+              "description": "The headline of the component. Set to an empty string to hide the headline.",
+              "fieldName": "headline"
             }
           ],
           "superclass": {
-            "name": "PreactLitAdapter",
-            "module": "/src/web-components/PreactLitAdapter"
+            "name": "PreactLitAdapterWithGridJsStyles",
+            "module": "/src/web-components/PreactLitAdapterWithGridJsStyles"
           },
-          "tagName": "gs-relative-growth-advantage",
+          "tagName": "gs-aggregate",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "RelativeGrowthAdvantageComponent",
+          "name": "AggregateComponent",
           "declaration": {
-            "name": "RelativeGrowthAdvantageComponent",
-            "module": "src/web-components/display/relative-growth-advantage-component.tsx"
+            "name": "AggregateComponent",
+            "module": "src/web-components/visualization/gs-aggregate.tsx"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "gs-relative-growth-advantage",
+          "name": "gs-aggregate",
           "declaration": {
-            "name": "RelativeGrowthAdvantageComponent",
-            "module": "src/web-components/display/relative-growth-advantage-component.tsx"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/web-components/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "App",
-          "declaration": {
-            "name": "App",
-            "module": "./app.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./display"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./input"
+            "name": "AggregateComponent",
+            "module": "src/web-components/visualization/gs-aggregate.tsx"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/web-components/input/date-range-selector-component.stories.ts",
+      "path": "src/web-components/visualization/gs-mutation-comparison.stories.ts",
       "declarations": [
         {
           "kind": "variable",
           "name": "meta",
           "type": {
-            "text": "Meta<DateRangeSelectorProps<'CustomDateRange'>>"
+            "text": "Meta<MutationComparisonProps>"
           },
-          "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}"
+          "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' }, }, size: { control: 'object' }, headline: { control: 'text' }, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
-          "name": "DateRangeSelectorStory",
+          "name": "Default",
           "type": {
-            "text": "StoryObj<DateRangeSelectorProps<'CustomDateRange'>>"
+            "text": "StoryObj<MutationComparisonProps>"
           },
-          "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}"
+          "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'], size: { 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)); }); }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "VennDiagram",
+          "type": {
+            "text": "StoryObj<MutationComparisonProps>"
+          },
+          "default": "{ ...Default, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-comparison'); await step('Switch to Venn diagram view', async () => { await waitFor(() => expect(canvas.getByRole('button', { name: 'Venn' })).toBeInTheDocument()); await fireEvent.click(canvas.getByRole('button', { name: 'Venn' })); await waitFor(() => expect( canvas.getByText('You have no elements selected. Click in the venn diagram to select.'), ).toBeVisible(), ); }); }, }"
         }
       ],
       "exports": [
@@ -1263,200 +1248,196 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/web-components/input/date-range-selector-component.stories.ts"
+            "module": "src/web-components/visualization/gs-mutation-comparison.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "DateRangeSelectorStory",
+          "name": "Default",
           "declaration": {
-            "name": "DateRangeSelectorStory",
-            "module": "src/web-components/input/date-range-selector-component.stories.ts"
+            "name": "Default",
+            "module": "src/web-components/visualization/gs-mutation-comparison.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "VennDiagram",
+          "declaration": {
+            "name": "VennDiagram",
+            "module": "src/web-components/visualization/gs-mutation-comparison.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/web-components/input/date-range-selector-component.tsx",
+      "path": "src/web-components/visualization/gs-mutation-comparison.tsx",
       "declarations": [
         {
           "kind": "class",
-          "description": "",
-          "name": "DateRangeSelectorComponent",
+          "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": "customSelectOptions",
+              "name": "variants",
               "type": {
-                "text": "CustomSelectOption<CustomLabel>[]"
+                "text": "{\n        lapisFilter: Record<string, string | number | null | boolean>;\n        displayName: string;\n    }[]"
               },
               "default": "[]",
-              "attribute": "customSelectOptions"
+              "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": "earliestDate",
+              "name": "sequenceType",
               "type": {
-                "text": "string | undefined"
+                "text": "'nucleotide' | 'amino acid'"
               },
-              "default": "'1900-01-01'",
-              "attribute": "earliestDate"
+              "default": "'nucleotide'",
+              "description": "The type of the sequence for which the mutations should be shown.",
+              "attribute": "sequenceType"
             },
             {
               "kind": "field",
-              "name": "initialValue",
+              "name": "views",
               "type": {
-                "text": "PresetOptionValues | CustomLabel | string | undefined"
+                "text": "('table' | 'venn')[]"
               },
-              "default": "''",
-              "attribute": "initialValue"
-            }
-          ],
-          "events": [
+              "default": "['table']",
+              "description": "A list of tabs with views that this component should provide.",
+              "attribute": "views"
+            },
             {
+              "kind": "field",
+              "name": "size",
               "type": {
-                "text": "CustomEvent<{ dateFrom: string; dateTo: string; }>"
+                "text": "{ width?: string; height?: string } | undefined"
               },
-              "description": "When the date range has changed",
-              "name": "gs-date-range-changed"
+              "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"
+            },
+            {
+              "kind": "field",
+              "name": "headline",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "'Mutation comparison'",
+              "description": "The headline of the component. Set to an empty string to hide the headline.",
+              "attribute": "headline"
             }
           ],
           "attributes": [
             {
-              "name": "customSelectOptions",
+              "name": "variants",
               "type": {
-                "text": "CustomSelectOption<CustomLabel>[]"
+                "text": "{\n        lapisFilter: Record<string, string | number | null | boolean>;\n        displayName: string;\n    }[]"
               },
               "default": "[]",
-              "fieldName": "customSelectOptions"
+              "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": "earliestDate",
+              "name": "sequenceType",
               "type": {
-                "text": "string | undefined"
+                "text": "'nucleotide' | 'amino acid'"
               },
-              "default": "'1900-01-01'",
-              "fieldName": "earliestDate"
+              "default": "'nucleotide'",
+              "description": "The type of the sequence for which the mutations should be shown.",
+              "fieldName": "sequenceType"
             },
             {
-              "name": "initialValue",
+              "name": "views",
               "type": {
-                "text": "PresetOptionValues | CustomLabel | string | undefined"
+                "text": "('table' | 'venn')[]"
               },
-              "default": "''",
-              "fieldName": "initialValue"
+              "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"
+            },
+            {
+              "name": "headline",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "'Mutation comparison'",
+              "description": "The headline of the component. Set to an empty string to hide the headline.",
+              "fieldName": "headline"
             }
           ],
           "superclass": {
-            "name": "PreactLitAdapter",
-            "module": "/src/web-components/PreactLitAdapter"
+            "name": "PreactLitAdapterWithGridJsStyles",
+            "module": "/src/web-components/PreactLitAdapterWithGridJsStyles"
           },
-          "tagName": "gs-date-range-selector",
+          "tagName": "gs-mutation-comparison",
           "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "DateRangeSelectorComponent",
-          "declaration": {
-            "name": "DateRangeSelectorComponent",
-            "module": "src/web-components/input/date-range-selector-component.tsx"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "gs-date-range-selector",
-          "declaration": {
-            "name": "DateRangeSelectorComponent",
-            "module": "src/web-components/input/date-range-selector-component.tsx"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/web-components/input/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "DateRangeSelectorComponent",
-          "declaration": {
-            "name": "DateRangeSelectorComponent",
-            "module": "./date-range-selector-component"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "LocationFilterComponent",
-          "declaration": {
-            "name": "LocationFilterComponent",
-            "module": "./location-filter-component"
-          }
-        },
+        }
+      ],
+      "exports": [
         {
           "kind": "js",
-          "name": "TextInputComponent",
+          "name": "MutationComparisonComponent",
           "declaration": {
-            "name": "TextInputComponent",
-            "module": "./text-input-component"
+            "name": "MutationComparisonComponent",
+            "module": "src/web-components/visualization/gs-mutation-comparison.tsx"
           }
         },
         {
-          "kind": "js",
-          "name": "MutationFilterComponent",
+          "kind": "custom-element-definition",
+          "name": "gs-mutation-comparison",
           "declaration": {
-            "name": "MutationFilterComponent",
-            "module": "./mutation-filter-component"
+            "name": "MutationComparisonComponent",
+            "module": "src/web-components/visualization/gs-mutation-comparison.tsx"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/web-components/input/location-filter-component.stories.ts",
+      "path": "src/web-components/visualization/gs-mutations.stories.ts",
       "declarations": [
         {
           "kind": "variable",
           "name": "meta",
           "type": {
-            "text": "Meta"
-          },
-          "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",
-          "name": "LocationFilter",
-          "type": {
-            "text": "StoryObj<LocationFilterProps>"
+            "text": "Meta<MutationsProps>"
           },
-          "default": "{\n    ...Template,\n    parameters: {\n        fetchMock: {\n            mocks: [\n                {\n                    matcher: aggregatedEndpointMatcher,\n                    response: {\n                        status: 200,\n                        body: data,\n                    },\n                },\n            ],\n        },\n    },\n    play: async ({ canvasElement }) => {\n        const canvas = await withinShadowRoot(canvasElement, 'gs-location-filter');\n        await waitFor(() => {\n            return expect(canvas.getByRole('combobox')).toBeEnabled();\n        });\n    },\n}"
+          "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' }, }, size: { control: 'object' }, headline: { control: 'text' }, }, args: { variant: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo: '2022-01-01' }, sequenceType: 'nucleotide', views: ['grid', 'table', 'insertions'], size: { width: '100%', height: '700px' }, headline: 'Mutations', }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
-          "name": "DelayToShowLoadingState",
+          "name": "Default",
           "type": {
-            "text": "StoryObj<LocationFilterProps>"
+            "text": "StoryObj<MutationsProps>"
           },
-          "default": "{\n    ...Template,\n    parameters: {\n        fetchMock: {\n            mocks: [\n                {\n                    matcher: aggregatedEndpointMatcher,\n                    response: {\n                        status: 200,\n                        body: data,\n                    },\n                    options: {\n                        delay: 5000,\n                    },\n                },\n            ],\n        },\n    },\n}"
+          "default": "{ ...Template, parameters: { fetchMock: { mocks: [ { matcher: { name: 'nucleotideMutations', url: NUCLEOTIDE_MUTATIONS_ENDPOINT, body: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo: '2022-01-01', minProportion: 0, }, }, response: { status: 200, body: nucleotideMutations, }, }, { matcher: { name: 'nucleotideInsertions', url: NUCLEOTIDE_INSERTIONS_ENDPOINT, body: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo: '2022-01-01' }, }, response: { status: 200, body: nucleotideInsertions, }, }, ], }, }, }"
         },
         {
           "kind": "variable",
-          "name": "FetchingLocationsFails",
+          "name": "OnTableTab",
           "type": {
-            "text": "StoryObj<LocationFilterProps>"
+            "text": "StoryObj<MutationsProps>"
           },
-          "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}"
+          "default": "{ ...Default, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-mutations'); await waitFor(() => expect(canvas.getByRole('button', { name: 'Table' })).toBeInTheDocument()); await fireEvent.click(canvas.getByRole('button', { name: 'Table' })); }, }"
         },
         {
           "kind": "variable",
-          "name": "FiresEvent",
+          "name": "OnInsertionsTab",
           "type": {
-            "text": "StoryObj<LocationFilterProps>"
+            "text": "StoryObj<MutationsProps>"
           },
-          "default": "{\n    ...Template,\n    parameters: {\n        fetchMock: {\n            mocks: [\n                {\n                    matcher: aggregatedEndpointMatcher,\n                    response: {\n                        status: 200,\n                        body: data,\n                    },\n                },\n            ],\n        },\n    },\n    play: async ({ canvasElement, step }) => {\n        const canvas = await withinShadowRoot(canvasElement, 'gs-location-filter');\n\n        const submitButton = () => canvas.getByRole('button', { name: 'Submit' });\n        const inputField = () => canvas.getByRole('combobox');\n\n        const listenerMock = fn();\n        await step('Setup event listener mock', async () => {\n            canvasElement.addEventListener('gs-location-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('Input invalid location', async () => {\n            await userEvent.type(inputField(), 'Not / A / Location');\n            await userEvent.click(submitButton());\n            await expect(listenerMock).not.toHaveBeenCalled();\n            await userEvent.type(inputField(), '{backspace>18/}');\n        });\n\n        await step('Select Asia', async () => {\n            await userEvent.type(inputField(), 'Asia');\n            await userEvent.click(submitButton());\n            await expect(listenerMock).toHaveBeenCalledWith(\n                expect.objectContaining({\n                    detail: {\n                        region: 'Asia',\n                    },\n                }),\n            );\n        });\n\n        await step('Select Asia / Bangladesh / Rajshahi / Chapainawabgonj', async () => {\n            await userEvent.type(inputField(), ' / Bangladesh / Rajshahi / Chapainawabgonj');\n            await userEvent.click(submitButton());\n            await expect(listenerMock).toHaveBeenCalledWith(\n                expect.objectContaining({\n                    detail: {\n                        region: 'Asia',\n                        country: 'Bangladesh',\n                        division: 'Rajshahi',\n                        location: 'Chapainawabgonj',\n                    },\n                }),\n            );\n        });\n    },\n}"
+          "default": "{ ...Default, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-mutations'); await waitFor(() => expect(canvas.getByRole('button', { name: 'Insertions' })).toBeInTheDocument()); await fireEvent.click(canvas.getByRole('button', { name: 'Insertions' })); }, }"
         }
       ],
       "exports": [
@@ -1465,164 +1446,220 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/web-components/input/location-filter-component.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "LocationFilter",
-          "declaration": {
-            "name": "LocationFilter",
-            "module": "src/web-components/input/location-filter-component.stories.ts"
+            "module": "src/web-components/visualization/gs-mutations.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "DelayToShowLoadingState",
+          "name": "Default",
           "declaration": {
-            "name": "DelayToShowLoadingState",
-            "module": "src/web-components/input/location-filter-component.stories.ts"
+            "name": "Default",
+            "module": "src/web-components/visualization/gs-mutations.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "FetchingLocationsFails",
+          "name": "OnTableTab",
           "declaration": {
-            "name": "FetchingLocationsFails",
-            "module": "src/web-components/input/location-filter-component.stories.ts"
+            "name": "OnTableTab",
+            "module": "src/web-components/visualization/gs-mutations.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "FiresEvent",
+          "name": "OnInsertionsTab",
           "declaration": {
-            "name": "FiresEvent",
-            "module": "src/web-components/input/location-filter-component.stories.ts"
+            "name": "OnInsertionsTab",
+            "module": "src/web-components/visualization/gs-mutations.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/web-components/input/location-filter-component.tsx",
+      "path": "src/web-components/visualization/gs-mutations.tsx",
       "declarations": [
         {
           "kind": "class",
-          "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",
+          "description": "This 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.",
+          "name": "MutationsComponent",
           "members": [
             {
               "kind": "field",
-              "name": "initialValue",
+              "name": "variant",
               "type": {
-                "text": "string"
+                "text": "Record<string, string | number | null | boolean>"
               },
-              "default": "''",
-              "description": "The initial value to use for this location filter.\nMust be of the form `valueForField1 / valueForField2 / ... / valueForFieldN`.",
-              "attribute": "initialValue"
+              "default": "{}",
+              "description": "The `variant` will be sent as is to LAPIS to filter the mutation data.\nIt must be a valid LAPIS filter object.",
+              "attribute": "variant"
             },
             {
               "kind": "field",
-              "name": "fields",
+              "name": "sequenceType",
               "type": {
-                "text": "string[]"
+                "text": "'nucleotide' | 'amino acid'"
               },
-              "default": "[]",
-              "description": "The fields to display in the location filter, in hierarchical order.\nThe top-level field should be the first entry in the array.\nThis component assumes that the values for each field form a strict hierarchy\n(e.g., `fields = ['continent', 'country', 'city']`).",
-              "attribute": "fields"
-            }
-          ],
-          "events": [
+              "default": "'nucleotide'",
+              "description": "The type of the sequence for which the mutations should be shown.",
+              "attribute": "sequenceType"
+            },
             {
+              "kind": "field",
+              "name": "views",
               "type": {
-                "text": "CustomEvent<Record<string, string>>"
+                "text": "('table' | 'grid' | 'insertions')[]"
               },
-              "description": "Fired when the field is submitted with a valid location value. The `details` of this event contain an object with all `fields` as keys and the corresponding values as values, if they are not `undefined`. Example: ``` { continent: \"Asia\", country: \"China\", city: \"Beijing\" } ```",
-              "name": "gs-location-changed"
+              "default": "['table', 'grid']",
+              "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"
+            },
+            {
+              "kind": "field",
+              "name": "headline",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "'Mutations'",
+              "description": "The headline of the component. Set to an empty string to hide the headline.",
+              "attribute": "headline"
             }
           ],
           "attributes": [
             {
-              "name": "initialValue",
+              "name": "variant",
               "type": {
-                "text": "string"
+                "text": "Record<string, string | number | null | boolean>"
               },
-              "default": "''",
-              "description": "The initial value to use for this location filter.\nMust be of the form `valueForField1 / valueForField2 / ... / valueForFieldN`.",
-              "fieldName": "initialValue"
+              "default": "{}",
+              "description": "The `variant` will be sent as is to LAPIS to filter the mutation data.\nIt must be a valid LAPIS filter object.",
+              "fieldName": "variant"
             },
             {
-              "name": "fields",
+              "name": "sequenceType",
               "type": {
-                "text": "string[]"
+                "text": "'nucleotide' | 'amino acid'"
               },
-              "default": "[]",
-              "description": "The fields to display in the location filter, in hierarchical order.\nThe top-level field should be the first entry in the array.\nThis component assumes that the values for each field form a strict hierarchy\n(e.g., `fields = ['continent', 'country', 'city']`).",
-              "fieldName": "fields"
+              "default": "'nucleotide'",
+              "description": "The type of the sequence for which the mutations should be shown.",
+              "fieldName": "sequenceType"
+            },
+            {
+              "name": "views",
+              "type": {
+                "text": "('table' | 'grid' | 'insertions')[]"
+              },
+              "default": "['table', 'grid']",
+              "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"
+            },
+            {
+              "name": "headline",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "'Mutations'",
+              "description": "The headline of the component. Set to an empty string to hide the headline.",
+              "fieldName": "headline"
             }
           ],
           "superclass": {
-            "name": "PreactLitAdapter",
-            "module": "/src/web-components/PreactLitAdapter"
+            "name": "PreactLitAdapterWithGridJsStyles",
+            "module": "/src/web-components/PreactLitAdapterWithGridJsStyles"
           },
-          "tagName": "gs-location-filter",
+          "tagName": "gs-mutations",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "LocationFilterComponent",
+          "name": "MutationsComponent",
           "declaration": {
-            "name": "LocationFilterComponent",
-            "module": "src/web-components/input/location-filter-component.tsx"
+            "name": "MutationsComponent",
+            "module": "src/web-components/visualization/gs-mutations.tsx"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "gs-location-filter",
+          "name": "gs-mutations",
           "declaration": {
-            "name": "LocationFilterComponent",
-            "module": "src/web-components/input/location-filter-component.tsx"
+            "name": "MutationsComponent",
+            "module": "src/web-components/visualization/gs-mutations.tsx"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/web-components/input/mutation-filter-component.stories.ts",
+      "path": "src/web-components/visualization/gs-prevalence-over-time.stories.ts",
       "declarations": [
         {
           "kind": "variable",
           "name": "meta",
           "type": {
-            "text": "Meta"
+            "text": "Meta<PrevalenceOverTimeProps>"
           },
-          "default": "{\n    title: 'Input/Mutation filter',\n    component: 'gs-mutation-filter',\n    parameters: {\n        actions: {\n            handles: ['gs-mutation-filter-changed', 'gs-mutation-filter-on-blur'],\n        },\n        fetchMock: {},\n    },\n    decorators: [withActions],\n}"
+          "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' }, }, size: [{ control: 'object' }], headline: { control: 'text' }, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
-          "name": "Default",
+          "name": "TwoVariants",
           "type": {
-            "text": "StoryObj<MutationFilterProps>"
+            "text": "StoryObj<PrevalenceOverTimeProps>"
           },
-          "default": "{\n    ...Template,\n    args: {\n        initialValue: ['A123T'],\n    },\n}"
+          "default": "{ ...Template, args: { numerator: [ { displayName: 'EG', country: 'USA', pangoLineage: 'EG*', dateFrom: '2023-01-01' }, { displayName: 'JN.1', country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01' }, ], denominator: { country: 'USA', dateFrom: '2023-01-01', displayName: 'All' }, granularity: 'month', smoothingWindow: 0, views: ['bar', 'line', 'bubble', 'table'], confidenceIntervalMethods: ['wilson'], size: { width: '100%', height: '700px' }, headline: 'Prevalence over time', }, 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, }, }, ], }, }, }"
         },
         {
           "kind": "variable",
-          "name": "FiresFilterChangedEvent",
+          "name": "OneVariant",
           "type": {
-            "text": "StoryObj<MutationFilterProps>"
+            "text": "StoryObj<PrevalenceOverTimeProps>"
           },
-          "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}"
+          "default": "{ ...Template, args: { numerator: { displayName: 'EG', country: 'USA', pangoLineage: 'BA.2.86*', dateFrom: '2023-10-01' }, denominator: { country: 'USA', dateFrom: '2023-10-01', displayName: 'All' }, granularity: 'day', smoothingWindow: 7, views: ['bar', 'line', 'bubble', 'table'], confidenceIntervalMethods: ['wilson'], size: { width: '100%', height: '700px' }, headline: 'Prevalence over time', }, 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, }, }, ], }, }, }"
         },
         {
           "kind": "variable",
-          "name": "FiresFilterOnBlurEvent",
+          "name": "OneVariantOnLineTab",
           "type": {
-            "text": "StoryObj<MutationFilterProps>"
+            "text": "StoryObj<PrevalenceOverTimeProps>"
+          },
+          "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' })); }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "OneVariantOnBubbleTab",
+          "type": {
+            "text": "StoryObj<PrevalenceOverTimeProps>"
+          },
+          "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' })); }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "OneVariantOnTableTab",
+          "type": {
+            "text": "StoryObj<PrevalenceOverTimeProps>"
           },
-          "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}"
+          "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' })); }, }"
         }
       ],
       "exports": [
@@ -1631,134 +1668,261 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/web-components/input/mutation-filter-component.stories.ts"
+            "module": "src/web-components/visualization/gs-prevalence-over-time.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "Default",
+          "name": "TwoVariants",
           "declaration": {
-            "name": "Default",
-            "module": "src/web-components/input/mutation-filter-component.stories.ts"
+            "name": "TwoVariants",
+            "module": "src/web-components/visualization/gs-prevalence-over-time.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "FiresFilterChangedEvent",
+          "name": "OneVariant",
           "declaration": {
-            "name": "FiresFilterChangedEvent",
-            "module": "src/web-components/input/mutation-filter-component.stories.ts"
+            "name": "OneVariant",
+            "module": "src/web-components/visualization/gs-prevalence-over-time.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "FiresFilterOnBlurEvent",
+          "name": "OneVariantOnLineTab",
           "declaration": {
-            "name": "FiresFilterOnBlurEvent",
-            "module": "src/web-components/input/mutation-filter-component.stories.ts"
+            "name": "OneVariantOnLineTab",
+            "module": "src/web-components/visualization/gs-prevalence-over-time.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "OneVariantOnBubbleTab",
+          "declaration": {
+            "name": "OneVariantOnBubbleTab",
+            "module": "src/web-components/visualization/gs-prevalence-over-time.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "OneVariantOnTableTab",
+          "declaration": {
+            "name": "OneVariantOnTableTab",
+            "module": "src/web-components/visualization/gs-prevalence-over-time.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/web-components/input/mutation-filter-component.tsx",
+      "path": "src/web-components/visualization/gs-prevalence-over-time.tsx",
       "declarations": [
         {
           "kind": "class",
-          "description": "",
-          "name": "MutationFilterComponent",
+          "description": "This 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.",
+          "name": "PrevalenceOverTimeComponent",
           "members": [
             {
               "kind": "field",
-              "name": "initialValue",
+              "name": "numerator",
+              "type": {
+                "text": "(Record<string, string | number | null | boolean> & { displayName: string })\n        | (Record<string, string | number | null | boolean> & {\n              displayName: string;\n          })[]"
+              },
+              "default": "{ displayName: '' }",
+              "description": "Either 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"
+            },
+            {
+              "kind": "field",
+              "name": "denominator",
+              "type": {
+                "text": "Record<string, string | number | null | boolean> & { displayName: string }"
+              },
+              "default": "{ displayName: '' }",
+              "description": "The variant that the variants in `numerator` are compared to.",
+              "attribute": "denominator"
+            },
+            {
+              "kind": "field",
+              "name": "granularity",
+              "type": {
+                "text": "'day' | 'week' | 'month' | 'year'"
+              },
+              "default": "'day'",
+              "description": "The granularity of the time axis.",
+              "attribute": "granularity"
+            },
+            {
+              "kind": "field",
+              "name": "smoothingWindow",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The number of time steps to use for smoothing the data.\n`0` means no smoothing.\nMust be a non-negative integer.\n\nFor a given time, the shown value is the mean of the neighbouring measured values.\nThe `smoothingWindow` value provides the number of neighbouring values to take into account.\nThe resulting time is computed via `Math.floor(smoothingWindow / 2)`.",
+              "attribute": "smoothingWindow"
+            },
+            {
+              "kind": "field",
+              "name": "views",
+              "type": {
+                "text": "('bar' | 'line' | 'bubble' | 'table')[]"
+              },
+              "default": "['bar', 'line', 'bubble', 'table']",
+              "description": "A list of tabs with views that this component should provide.",
+              "attribute": "views"
+            },
+            {
+              "kind": "field",
+              "name": "confidenceIntervalMethods",
+              "type": {
+                "text": "('wilson' | 'none')[]"
+              },
+              "default": "['wilson']",
+              "description": "A list of methods to calculate the confidence interval.\nThe option `none` is always available and disables confidence intervals.\nPass an empty array to disable the confidence interval selector.",
+              "attribute": "confidenceIntervalMethods"
+            },
+            {
+              "kind": "field",
+              "name": "headline",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "'Prevalence over time'",
+              "description": "The headline of the component. Set to an empty string to hide the headline.",
+              "attribute": "headline"
+            },
+            {
+              "kind": "field",
+              "name": "size",
               "type": {
-                "text": "SelectedMutationFilterStrings | string[] | undefined"
+                "text": "{ width?: string; height?: string } | undefined"
               },
               "default": "undefined",
-              "attribute": "initialValue"
+              "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"
             }
           ],
-          "events": [
+          "attributes": [
             {
+              "name": "numerator",
               "type": {
-                "text": "CustomEvent<SelectedMutationFilterStrings>"
+                "text": "(Record<string, string | number | null | boolean> & { displayName: string })\n        | (Record<string, string | number | null | boolean> & {\n              displayName: string;\n          })[]"
               },
-              "description": "When the mutation filter values have changed",
-              "name": "gs-mutation-filter-changed"
+              "default": "{ displayName: '' }",
+              "description": "Either 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"
             },
             {
+              "name": "denominator",
               "type": {
-                "text": "CustomEvent<SelectedMutationFilterStrings>"
+                "text": "Record<string, string | number | null | boolean> & { displayName: string }"
               },
-              "description": "When the mutation filter has lost focus",
-              "name": "gs-mutation-filter-on-blur"
-            }
-          ],
-          "attributes": [
+              "default": "{ displayName: '' }",
+              "description": "The variant that the variants in `numerator` are compared to.",
+              "fieldName": "denominator"
+            },
             {
-              "name": "initialValue",
+              "name": "granularity",
+              "type": {
+                "text": "'day' | 'week' | 'month' | 'year'"
+              },
+              "default": "'day'",
+              "description": "The granularity of the time axis.",
+              "fieldName": "granularity"
+            },
+            {
+              "name": "smoothingWindow",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The number of time steps to use for smoothing the data.\n`0` means no smoothing.\nMust be a non-negative integer.\n\nFor a given time, the shown value is the mean of the neighbouring measured values.\nThe `smoothingWindow` value provides the number of neighbouring values to take into account.\nThe resulting time is computed via `Math.floor(smoothingWindow / 2)`.",
+              "fieldName": "smoothingWindow"
+            },
+            {
+              "name": "views",
+              "type": {
+                "text": "('bar' | 'line' | 'bubble' | 'table')[]"
+              },
+              "default": "['bar', 'line', 'bubble', 'table']",
+              "description": "A list of tabs with views that this component should provide.",
+              "fieldName": "views"
+            },
+            {
+              "name": "confidenceIntervalMethods",
+              "type": {
+                "text": "('wilson' | 'none')[]"
+              },
+              "default": "['wilson']",
+              "description": "A list of methods to calculate the confidence interval.\nThe option `none` is always available and disables confidence intervals.\nPass an empty array to disable the confidence interval selector.",
+              "fieldName": "confidenceIntervalMethods"
+            },
+            {
+              "name": "headline",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "'Prevalence over time'",
+              "description": "The headline of the component. Set to an empty string to hide the headline.",
+              "fieldName": "headline"
+            },
+            {
+              "name": "size",
               "type": {
-                "text": "SelectedMutationFilterStrings | string[] | undefined"
+                "text": "{ width?: string; height?: string } | undefined"
               },
               "default": "undefined",
-              "fieldName": "initialValue"
+              "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": "PreactLitAdapter",
-            "module": "/src/web-components/PreactLitAdapter"
+            "name": "PreactLitAdapterWithGridJsStyles",
+            "module": "/src/web-components/PreactLitAdapterWithGridJsStyles"
           },
-          "tagName": "gs-mutation-filter",
+          "tagName": "gs-prevalence-over-time",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "MutationFilterComponent",
+          "name": "PrevalenceOverTimeComponent",
           "declaration": {
-            "name": "MutationFilterComponent",
-            "module": "src/web-components/input/mutation-filter-component.tsx"
+            "name": "PrevalenceOverTimeComponent",
+            "module": "src/web-components/visualization/gs-prevalence-over-time.tsx"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "gs-mutation-filter",
+          "name": "gs-prevalence-over-time",
           "declaration": {
-            "name": "MutationFilterComponent",
-            "module": "src/web-components/input/mutation-filter-component.tsx"
+            "name": "PrevalenceOverTimeComponent",
+            "module": "src/web-components/visualization/gs-prevalence-over-time.tsx"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/web-components/input/text-input-component.stories.ts",
+      "path": "src/web-components/visualization/gs-relative-growth-advantage.stories.ts",
       "declarations": [
         {
           "kind": "variable",
           "name": "meta",
           "type": {
-            "text": "Meta"
+            "text": "Meta<RelativeGrowthAdvantageProps>"
           },
-          "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}"
+          "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' }, }, size: [{ control: 'object' }], headline: { control: 'text' }, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
           "name": "Default",
           "type": {
-            "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\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<TextInputProps>"
+            "text": "StoryObj<RelativeGrowthAdvantageProps>"
           },
-          "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}"
+          "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'], size: { width: '100%', height: '700px' }, headline: 'Relative growth advantage', }, 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, }, }, ], }, }, }"
         }
       ],
       "exports": [
@@ -1767,7 +1931,7 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/web-components/input/text-input-component.stories.ts"
+            "module": "src/web-components/visualization/gs-relative-growth-advantage.stories.ts"
           }
         },
         {
@@ -1775,154 +1939,207 @@
           "name": "Default",
           "declaration": {
             "name": "Default",
-            "module": "src/web-components/input/text-input-component.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "FiresEvent",
-          "declaration": {
-            "name": "FiresEvent",
-            "module": "src/web-components/input/text-input-component.stories.ts"
+            "module": "src/web-components/visualization/gs-relative-growth-advantage.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/web-components/input/text-input-component.tsx",
+      "path": "src/web-components/visualization/gs-relative-growth-advantage.tsx",
       "declarations": [
         {
           "kind": "class",
-          "description": "",
-          "name": "TextInputComponent",
+          "description": "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.",
+          "name": "RelativeGrowthAdvantageComponent",
           "members": [
             {
               "kind": "field",
-              "name": "initialValue",
+              "name": "numerator",
               "type": {
-                "text": "string | undefined"
+                "text": "Record<string, string | number | null | boolean>"
               },
-              "default": "''",
-              "attribute": "initialValue"
+              "default": "{}",
+              "description": "The LAPIS filter for the focal variant.",
+              "attribute": "numerator"
             },
             {
               "kind": "field",
-              "name": "lapisField",
+              "name": "denominator",
               "type": {
-                "text": "string"
+                "text": "Record<string, string | number | null | boolean>"
               },
-              "default": "''",
-              "attribute": "lapisField"
+              "default": "{}",
+              "description": "The LAPIS filter for the variant that the focal variant (`numerator`) should be compared to.",
+              "attribute": "denominator"
             },
             {
               "kind": "field",
-              "name": "placeholderText",
+              "name": "generationTime",
+              "type": {
+                "text": "number"
+              },
+              "default": "7",
+              "description": "The generation time represents the number of days over which the variant's relative growth advantage is measured.\nFor example, if we set a generation time of 7 days, then we estimate the growth advantage per week.",
+              "attribute": "generationTime"
+            },
+            {
+              "kind": "field",
+              "name": "views",
+              "type": {
+                "text": "'line'[]"
+              },
+              "default": "['line']",
+              "description": "A list of tabs with views that this component should provide.",
+              "attribute": "views"
+            },
+            {
+              "kind": "field",
+              "name": "headline",
               "type": {
                 "text": "string | undefined"
               },
-              "default": "''",
-              "attribute": "placeholderText"
-            }
-          ],
-          "events": [
+              "default": "'Relative growth advantage'",
+              "description": "The headline of the component. Set to an empty string to hide the headline.",
+              "attribute": "headline"
+            },
             {
+              "kind": "field",
+              "name": "size",
               "type": {
-                "text": "CustomEvent<Record<string, string>>"
+                "text": "{ width?: string; height?: string } | undefined"
               },
-              "description": "When the text input has changed",
-              "name": "gs-text-input-changed"
+              "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": "initialValue",
+              "name": "numerator",
               "type": {
-                "text": "string | undefined"
+                "text": "Record<string, string | number | null | boolean>"
               },
-              "default": "''",
-              "fieldName": "initialValue"
+              "default": "{}",
+              "description": "The LAPIS filter for the focal variant.",
+              "fieldName": "numerator"
             },
             {
-              "name": "lapisField",
+              "name": "denominator",
               "type": {
-                "text": "string"
+                "text": "Record<string, string | number | null | boolean>"
               },
-              "default": "''",
-              "fieldName": "lapisField"
+              "default": "{}",
+              "description": "The LAPIS filter for the variant that the focal variant (`numerator`) should be compared to.",
+              "fieldName": "denominator"
             },
             {
-              "name": "placeholderText",
+              "name": "generationTime",
+              "type": {
+                "text": "number"
+              },
+              "default": "7",
+              "description": "The generation time represents the number of days over which the variant's relative growth advantage is measured.\nFor example, if we set a generation time of 7 days, then we estimate the growth advantage per week.",
+              "fieldName": "generationTime"
+            },
+            {
+              "name": "views",
+              "type": {
+                "text": "'line'[]"
+              },
+              "default": "['line']",
+              "description": "A list of tabs with views that this component should provide.",
+              "fieldName": "views"
+            },
+            {
+              "name": "headline",
               "type": {
                 "text": "string | undefined"
               },
-              "default": "''",
-              "fieldName": "placeholderText"
+              "default": "'Relative growth advantage'",
+              "description": "The headline of the component. Set to an empty string to hide the headline.",
+              "fieldName": "headline"
+            },
+            {
+              "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": "PreactLitAdapter",
             "module": "/src/web-components/PreactLitAdapter"
           },
-          "tagName": "gs-text-input",
+          "tagName": "gs-relative-growth-advantage",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "TextInputComponent",
+          "name": "RelativeGrowthAdvantageComponent",
           "declaration": {
-            "name": "TextInputComponent",
-            "module": "src/web-components/input/text-input-component.tsx"
+            "name": "RelativeGrowthAdvantageComponent",
+            "module": "src/web-components/visualization/gs-relative-growth-advantage.tsx"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "gs-text-input",
+          "name": "gs-relative-growth-advantage",
           "declaration": {
-            "name": "TextInputComponent",
-            "module": "src/web-components/input/text-input-component.tsx"
+            "name": "RelativeGrowthAdvantageComponent",
+            "module": "src/web-components/visualization/gs-relative-growth-advantage.tsx"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/web-components/lapis-context.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "lapisContext"
-        }
-      ],
+      "path": "src/web-components/visualization/index.ts",
+      "declarations": [],
       "exports": [
         {
           "kind": "js",
-          "name": "lapisContext",
+          "name": "MutationComparisonComponent",
           "declaration": {
-            "name": "lapisContext",
-            "module": "src/web-components/lapis-context.ts"
+            "name": "MutationComparisonComponent",
+            "module": "./gs-mutation-comparison"
           }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/web-components/reference-genome-context.ts",
-      "declarations": [
+        },
         {
-          "kind": "variable",
-          "name": "referenceGenomeContext"
-        }
-      ],
-      "exports": [
+          "kind": "js",
+          "name": "MutationsComponent",
+          "declaration": {
+            "name": "MutationsComponent",
+            "module": "./gs-mutations"
+          }
+        },
         {
           "kind": "js",
-          "name": "referenceGenomeContext",
+          "name": "PrevalenceOverTimeComponent",
           "declaration": {
-            "name": "referenceGenomeContext",
-            "module": "src/web-components/reference-genome-context.ts"
+            "name": "PrevalenceOverTimeComponent",
+            "module": "./gs-prevalence-over-time"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "RelativeGrowthAdvantageComponent",
+          "declaration": {
+            "name": "RelativeGrowthAdvantageComponent",
+            "module": "./gs-relative-growth-advantage"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "AggregateComponent",
+          "declaration": {
+            "name": "AggregateComponent",
+            "module": "./gs-aggregate"
           }
         }
       ]