@genspectrum/dashboard-components 0.1.5 → 0.3.0

package/custom-elements.json

@@ -54,6 +54,12 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/web-components/ResizeContainer.mdx",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/web-components/app.stories.ts",
@@ -64,7 +70,7 @@
           "type": {
             "text": "Meta"
           },
-          "default": "{ title: 'Wrapper/App', component: 'gs-app', parameters: withComponentDocs({ fetchMock: {}, componentDocs: { tag: 'gs-app', opensShadowDom: false, expectsChildren: true, codeExample, }, }), decorators: [withActions], tags: ['autodocs'], }"
+          "default": "{ title: 'Wrapper/App', component: 'gs-app', parameters: withComponentDocs({ fetchMock: {}, componentDocs: { opensShadowDom: false, expectsChildren: true, codeExample, }, }), decorators: [withActions], tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
@@ -88,7 +94,7 @@
           "type": {
             "text": "StoryObj<{ lapis: string }>"
           },
-          "default": "{ ...Template, args: { lapis: 'definitely-not-a-valid-url', }, play: async ({ canvasElement }) => { const canvas = within(canvasElement); await waitFor(() => { expect(canvas.getByText('Error')).toBeVisible(); }); }, }"
+          "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",
@@ -179,7 +185,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The URL of the LAPIS instance that all children of this component will use.",
+              "description": "Required.\n\nThe URL of the LAPIS instance that all children of this component will use.",
               "attribute": "lapis"
             }
           ],
@@ -190,7 +196,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The URL of the LAPIS instance that all children of this component will use.",
+              "description": "Required.\n\nThe URL of the LAPIS instance that all children of this component will use.",
               "fieldName": "lapis"
             }
           ],
@@ -223,23 +229,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<Required<DateRangeSelectorProps<'CustomDateRange'>>>"
           },
-          "default": "{ title: 'Visualization/Aggregate', component: 'gs-aggregate-component', 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: { tag: 'gs-aggregate-component', opensShadowDom: true, expectsChildren: false, codeExample: `<gs-aggregate-component fields='[\"division\", \"host\"]' filter='{\"country\": \"USA\"}' views='[\"table\"]'></gs-aggregate-component>`, }, }), tags: ['autodocs'], }"
+          "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', ], }, dateColumn: { control: { type: 'text' } }, 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, dateColumn: 'aDateColumn', width: '100%', }, decorators: [withActions], tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
-          "name": "Table",
+          "name": "DateRangeSelectorStory",
           "type": {
-            "text": "StoryObj<AggregateProps>"
+            "text": "StoryObj<Required<DateRangeSelectorProps<'CustomDateRange'>>>"
           },
-          "default": "{ render: (args) => html` <gs-app lapis=\"${LAPIS_URL}\"> <gs-aggregate-component .fields=${args.fields} .filter=${args.filter} .views=${args.views} .size=${args.size} .headline=${args.headline} ></gs-aggregate-component> </gs-app> `, args: { fields: ['division', 'host'], views: ['table'], filter: { country: 'USA', }, size: { width: '100%', height: '700px' }, headline: 'Aggregate', }, }"
+          "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} .dateColumn=${args.dateColumn} ></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())); }); }); // Due to the limitations of storybook testing which does not fire an event, // when selecting a value from the dropdown we can't test the fired event here. // An e2e test (using playwright) for that can be found in tests/dateRangeSelector.spec.ts }, }"
         }
       ],
       "exports": [
@@ -248,227 +285,205 @@
           "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 date range filters\nfor a given date column of this Lapis instance. 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"
               },
-              "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"
               },
-              "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"
               },
-              "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"
+              "default": "'100%'",
+              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "attribute": "width"
             },
             {
               "kind": "field",
-              "name": "headline",
+              "name": "dateColumn",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "default": "'Aggregate'",
-              "description": "The headline of the component. Set to an empty string to hide the headline.",
-              "attribute": "headline"
+              "default": "'date'",
+              "description": "The name of the column in LAPIS that contains the date information.",
+              "attribute": "dateColumn"
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent<{ `${dateColumn}From`: string; `${dateColumn}To`: 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`. Example: For `dateColumn = yourDate`, an event with `detail` containing ``` { yourDataFrom: \"2021-01-01\", yourDataTo: \"2021-12-31\" } ``` will be fired.",
+              "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"
               },
-              "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"
               },
-              "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"
               },
-              "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"
+              "default": "'100%'",
+              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "fieldName": "width"
             },
             {
-              "name": "headline",
+              "name": "dateColumn",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "default": "'Aggregate'",
-              "description": "The headline of the component. Set to an empty string to hide the headline.",
-              "fieldName": "headline"
+              "default": "'date'",
+              "description": "The name of the column in LAPIS that contains the date information.",
+              "fieldName": "dateColumn"
             }
           ],
           "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": "{ title: 'Visualization/Mutation comparison', component: 'gs-mutation-comparison-component', 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: { tag: 'gs-mutation-comparison-component', opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
+          "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": "{ ...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-component'); await step('Min and max proportions should be 50% and 100%', async () => { const minInput = () => canvas.getAllByLabelText('%')[0]; const maxInput = () => canvas.getAllByLabelText('%')[1]; await waitFor(() => expect(minInput()).toHaveValue(50)); await waitFor(() => expect(maxInput()).toHaveValue(100)); }); }, }"
+          "default": "{ ...Template, parameters: { fetchMock: { mocks: [ { matcher: aggregatedEndpointMatcher, response: { status: 400, body: { error: { status: 400, detail: 'Dummy error message from mock LAPIS', type: 'about:blank' }, }, }, }, ], }, }, 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": "{ ...Default, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-comparison-component'); 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(), ); }); }, }"
+          "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": [
@@ -477,196 +492,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",
-              "type": {
-                "text": "{\n        lapisFilter: Record<string, string | number | null | boolean>;\n        displayName: string;\n    }[]"
-              },
-              "default": "[]",
-              "description": "An array of variants to compare.\n\nThe `lapisFilter` will be sent as is to LAPIS to filter the mutation data.\nIt must be a valid LAPIS filter object.\n\nThe `displayName` will be used as the label for the variant in the views.\nIt should be human-readable.",
-              "attribute": "variants"
-            },
-            {
-              "kind": "field",
-              "name": "sequenceType",
+              "name": "initialValue",
               "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 initial value to use for this location filter.\nMust be of the form `valueForField1 / valueForField2 / ... / valueForFieldN`.",
+              "attribute": "initialValue"
             },
             {
               "kind": "field",
-              "name": "views",
+              "name": "fields",
               "type": {
-                "text": "('table' | 'venn')[]"
+                "text": "string[]"
               },
-              "default": "['table']",
-              "description": "A list of tabs with views that this component should provide.",
-              "attribute": "views"
+              "default": "[]",
+              "description": "Required.\n\nThe 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": "size",
+              "name": "width",
               "type": {
-                "text": "{ width?: string; height?: string } | undefined"
+                "text": "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"
-            },
+              "default": "'100%'",
+              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "attribute": "width"
+            }
+          ],
+          "events": [
             {
-              "kind": "field",
-              "name": "headline",
               "type": {
-                "text": "string | undefined"
+                "text": "CustomEvent<Record<string, string>>"
               },
-              "default": "'Mutation comparison'",
-              "description": "The headline of the component. Set to an empty string to hide the headline.",
-              "attribute": "headline"
+              "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"
-            },
-            {
-              "name": "sequenceType",
-              "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')[]"
-              },
-              "default": "['table']",
-              "description": "A list of tabs with views that this component should provide.",
-              "fieldName": "views"
+              "default": "''",
+              "description": "The initial value to use for this location filter.\nMust be of the form `valueForField1 / valueForField2 / ... / valueForFieldN`.",
+              "fieldName": "initialValue"
             },
             {
-              "name": "size",
+              "name": "fields",
               "type": {
-                "text": "{ width?: string; height?: string } | undefined"
+                "text": "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.",
-              "fieldName": "size"
+              "default": "[]",
+              "description": "Required.\n\nThe 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": "headline",
+              "name": "width",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "default": "'Mutation comparison'",
-              "description": "The headline of the component. Set to an empty string to hide the headline.",
-              "fieldName": "headline"
+              "default": "'100%'",
+              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "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": "{ title: 'Visualization/Mutations', component: 'gs-mutations-component', 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: { tag: 'gs-mutations-component', opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
+          "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', }, }, width: { control: 'text' }, height: { control: 'text' }, }, decorators: [withActions], tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
           "name": "Default",
           "type": {
-            "text": "StoryObj<MutationsProps>"
+            "text": "StoryObj<MutationFilterProps>"
           },
-          "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, }, }, ], }, }, }"
+          "default": "{ ...Template, args: { initialValue: ['A123T'], }, }"
         },
         {
           "kind": "variable",
-          "name": "OnTableTab",
+          "name": "FiresFilterChangedEvent",
           "type": {
-            "text": "StoryObj<MutationsProps>"
+            "text": "StoryObj<MutationFilterProps>"
           },
-          "default": "{ ...Default, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-mutations-component'); await waitFor(() => expect(canvas.getByRole('button', { name: 'Table' })).toBeInTheDocument()); await fireEvent.click(canvas.getByRole('button', { name: 'Table' })); }, }"
+          "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": "{ ...Default, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-mutations-component'); await waitFor(() => expect(canvas.getByRole('button', { name: 'Insertions' })).toBeInTheDocument()); await fireEvent.click(canvas.getByRole('button', { name: 'Insertions' })); }, }"
+          "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": [
@@ -675,7 +677,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"
           }
         },
         {
@@ -683,212 +685,166 @@
           "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": "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",
+          "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\n## Input Validation\n\nValidation of the input is performed according to the following rules:\n\n### Mutations\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\nExamples: `S:614G`, `614G`, `614-`, `614G`\n\n### Insertions\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\nExamples: `ins_S:614:G`, `ins_614:G`",
+          "name": "MutationFilterComponent",
           "members": [
             {
               "kind": "field",
-              "name": "variant",
+              "name": "initialValue",
               "type": {
-                "text": "Record<string, string | number | null | boolean>"
+                "text": "{\n            nucleotideMutations: string[];\n            aminoAcidMutations: string[];\n            nucleotideInsertions: string[];\n            aminoAcidInsertions: string[];\n        }\n        | string[]\n        | undefined"
               },
-              "default": "{ displayName: '' }",
-              "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"
+              "default": "undefined",
+              "description": "The initial value to use for this mutation filter.\nAll values provided must be valid mutations or insertions.\nInvalid values will be ignored.",
+              "attribute": "initialValue"
             },
             {
               "kind": "field",
-              "name": "sequenceType",
+              "name": "width",
               "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": "'100%'",
+              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "attribute": "width"
             },
             {
               "kind": "field",
-              "name": "views",
+              "name": "height",
               "type": {
-                "text": "('table' | 'grid' | 'insertions')[]"
+                "text": "string"
               },
-              "default": "['table', 'grid']",
-              "description": "A list of tabs with views that this component should provide.",
-              "attribute": "views"
-            },
+              "default": "'6.5rem'",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "attribute": "height"
+            }
+          ],
+          "events": [
             {
-              "kind": "field",
-              "name": "size",
               "type": {
-                "text": "{ width?: string; height?: string } | undefined"
+                "text": "CustomEvent<{nucleotideMutations: string[],aminoAcidMutations: string[],nucleotideInsertions: string[],aminoAcidInsertions: 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 user has submitted a valid mutation or insertion - The user has removed a mutation or insertion",
+              "name": "gs-mutation-filter-changed"
             },
             {
-              "kind": "field",
-              "name": "headline",
               "type": {
-                "text": "string | undefined"
+                "text": "CustomEvent<{nucleotideMutations: string[],aminoAcidMutations: string[],nucleotideInsertions: string[],aminoAcidInsertions: string[]}>"
               },
-              "default": "'Mutations'",
-              "description": "The headline of the component. Set to an empty string to hide the headline.",
-              "attribute": "headline"
+              "description": "Fired when: - the mutation filter has lost focus Contains the selected mutations in the format",
+              "name": "gs-mutation-filter-on-blur"
             }
           ],
           "attributes": [
             {
-              "name": "variant",
-              "type": {
-                "text": "Record<string, string | number | null | boolean>"
-              },
-              "default": "{ displayName: '' }",
-              "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": "sequenceType",
-              "type": {
-                "text": "'nucleotide' | 'amino acid'"
-              },
-              "default": "'nucleotide'",
-              "description": "The type of the sequence for which the mutations should be shown.",
-              "fieldName": "sequenceType"
-            },
-            {
-              "name": "views",
+              "name": "initialValue",
               "type": {
-                "text": "('table' | 'grid' | 'insertions')[]"
+                "text": "{\n            nucleotideMutations: string[];\n            aminoAcidMutations: string[];\n            nucleotideInsertions: string[];\n            aminoAcidInsertions: string[];\n        }\n        | string[]\n        | undefined"
               },
-              "default": "['table', 'grid']",
-              "description": "A list of tabs with views that this component should provide.",
-              "fieldName": "views"
+              "default": "undefined",
+              "description": "The initial value to use for this mutation filter.\nAll values provided must be valid mutations or insertions.\nInvalid values will be ignored.",
+              "fieldName": "initialValue"
             },
             {
-              "name": "size",
+              "name": "width",
               "type": {
-                "text": "{ width?: string; height?: string } | undefined"
+                "text": "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.",
-              "fieldName": "size"
+              "default": "'100%'",
+              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "fieldName": "width"
             },
             {
-              "name": "headline",
+              "name": "height",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "default": "'Mutations'",
-              "description": "The headline of the component. Set to an empty string to hide the headline.",
-              "fieldName": "headline"
+              "default": "'6.5rem'",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "fieldName": "height"
             }
           ],
           "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": "{ 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: { tag: 'gs-prevalence-over-time', opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
-        },
-        {
-          "kind": "variable",
-          "name": "TwoVariants",
-          "type": {
-            "text": "StoryObj<PrevalenceOverTimeProps>"
-          },
-          "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": "OneVariant",
-          "type": {
-            "text": "StoryObj<PrevalenceOverTimeProps>"
-          },
-          "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": "OneVariantOnLineTab",
-          "type": {
-            "text": "StoryObj<PrevalenceOverTimeProps>"
+            "text": "Meta<Required<TextInputProps>>"
           },
-          "default": "{ ...OneVariant, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-prevalence-over-time'); await waitFor(() => expect(canvas.getByRole('button', { name: 'Line' })).toBeInTheDocument()); await fireEvent.click(canvas.getByRole('button', { name: 'Line' })); }, }"
+          "default": "{ 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<Required<TextInputProps>>"
           },
-          "default": "{ ...OneVariant, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-prevalence-over-time'); await waitFor(() => expect(canvas.getByRole('button', { name: 'Bubble' })).toBeInTheDocument()); await fireEvent.click(canvas.getByRole('button', { name: 'Bubble' })); }, }"
+          "default": "{ 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<Required<TextInputProps>>"
           },
-          "default": "{ ...OneVariant, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-prevalence-over-time'); await waitFor(() => expect(canvas.getByRole('button', { name: 'Table' })).toBeInTheDocument()); await fireEvent.click(canvas.getByRole('button', { name: 'Table' })); }, }"
+          "default": "{ ...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": [
@@ -897,261 +853,267 @@
           "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"
+            "module": "src/web-components/input/gs-text-input.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "OneVariantOnLineTab",
-          "declaration": {
-            "name": "OneVariantOnLineTab",
-            "module": "src/web-components/display/prevalence-over-time-component.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": "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",
+          "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",
+              "name": "initialValue",
               "type": {
-                "text": "| (Record<string, string | number | null | boolean> & { displayName: string })\n        | (Record<string, string | number | null | boolean> & {\n              displayName: string;\n          })[]"
+                "text": "string"
               },
-              "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"
+              "default": "''",
+              "description": "The initial value to use for this text input.",
+              "attribute": "initialValue"
             },
             {
               "kind": "field",
-              "name": "denominator",
+              "name": "lapisField",
               "type": {
-                "text": "Record<string, string | number | null | boolean> & { displayName: string }"
+                "text": "string"
               },
-              "default": "{ displayName: '' }",
-              "description": "The variant that the variants in `numerator` are compared to.",
-              "attribute": "denominator"
+              "default": "''",
+              "description": "Required.\n\nThe LAPIS field name to use for this text input.\nThe field must exist on this LAPIS instance.",
+              "attribute": "lapisField"
             },
             {
               "kind": "field",
-              "name": "granularity",
+              "name": "placeholderText",
               "type": {
-                "text": "'day' | 'week' | 'month' | 'year'"
+                "text": "string"
               },
-              "default": "'day'",
-              "description": "The granularity of the time axis.",
-              "attribute": "granularity"
+              "default": "''",
+              "description": "The placeholder text to display in the input field.",
+              "attribute": "placeholderText"
             },
             {
               "kind": "field",
-              "name": "smoothingWindow",
+              "name": "width",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "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"
-            },
+              "default": "'100%'",
+              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "attribute": "width"
+            }
+          ],
+          "events": [
             {
-              "kind": "field",
-              "name": "views",
               "type": {
-                "text": "('bar' | 'line' | 'bubble' | 'table')[]"
+                "text": "CustomEvent<Record<string, string>>"
               },
-              "default": "['bar', 'line', 'bubble', 'table']",
-              "description": "A list of tabs with views that this component should provide.",
-              "attribute": "views"
-            },
+              "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": [
             {
-              "kind": "field",
-              "name": "confidenceIntervalMethods",
+              "name": "initialValue",
               "type": {
-                "text": "('wilson' | 'none')[]"
+                "text": "string"
               },
-              "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": "{ width?: string; height?: string } | undefined"
-              },
-              "default": "undefined",
-              "description": "The size of the component.\n\nIf not set, the component will take the full width of its container with height 700px.\n\nThe width and height should be a string with a unit in css style, e.g. '100%', '500px' or '50vh'.\nIf the unit is %, the size will be relative to the container of the component.",
-              "attribute": "size"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "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.",
-              "fieldName": "numerator"
-            },
-            {
-              "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.",
-              "fieldName": "denominator"
-            },
-            {
-              "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"
+              "default": "''",
+              "description": "The initial value to use for this text input.",
+              "fieldName": "initialValue"
             },
             {
-              "name": "confidenceIntervalMethods",
+              "name": "lapisField",
               "type": {
-                "text": "('wilson' | 'none')[]"
+                "text": "string"
               },
-              "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"
+              "default": "''",
+              "description": "Required.\n\nThe LAPIS field name to use for this text input.\nThe field must exist on this LAPIS instance.",
+              "fieldName": "lapisField"
             },
             {
-              "name": "headline",
+              "name": "placeholderText",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "default": "'Prevalence over time'",
-              "description": "The headline of the component. Set to an empty string to hide the headline.",
-              "fieldName": "headline"
+              "default": "''",
+              "description": "The placeholder text to display in the input field.",
+              "fieldName": "placeholderText"
             },
             {
-              "name": "size",
+              "name": "width",
               "type": {
-                "text": "{ width?: string; height?: string } | undefined"
+                "text": "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.",
-              "fieldName": "size"
+              "default": "'100%'",
+              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "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/input/introduction.mdx",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/web-components/introduction.mdx",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "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/display/relative-growth-advantage-component.stories.ts",
+      "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<Required<AggregateProps>>"
           },
-          "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: { tag: 'gs-relative-growth-advantage', opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
+          "default": "{ title: 'Visualization/Aggregate', component: 'gs-aggregate', argTypes: { fields: [{ control: 'object' }], views: { options: ['table'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, headline: { control: 'text' }, }, parameters: withComponentDocs({ fetchMock: { mocks: [ { matcher: { name: 'aggregatedData', url: AGGREGATED_ENDPOINT, body: { fields: ['division', 'host'], country: 'USA', }, }, response: { status: 200, body: aggregatedData, }, }, ], }, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
-          "name": "Default",
+          "name": "Table",
           "type": {
-            "text": "StoryObj<RelativeGrowthAdvantageProps>"
+            "text": "StoryObj<Required<AggregateProps>>"
           },
-          "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, }, }, ], }, }, }"
+          "default": "{ render: (args) => html` <gs-app lapis=\"${LAPIS_URL}\"> <gs-aggregate .fields=${args.fields} .filter=${args.filter} .views=${args.views} .width=${args.width} .height=${args.height} .headline=${args.headline} ></gs-aggregate> </gs-app> `, args: { fields: ['division', 'host'], views: ['table'], filter: { country: 'USA', }, width: '100%', height: '700px', headline: 'Aggregate', }, }"
         }
       ],
       "exports": [
@@ -1160,222 +1122,199 @@
           "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": "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",
+          "description": "## Context\n\nThis component displays aggregated data in a table, 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.\n\n## Views\n\n### Table View\n\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).",
+          "name": "AggregateComponent",
           "members": [
             {
               "kind": "field",
-              "name": "numerator",
+              "name": "fields",
               "type": {
-                "text": "Record<string, string | number | null | boolean>"
+                "text": "string[]"
               },
-              "default": "{}",
-              "description": "The LAPIS filter for the focal variant.",
-              "attribute": "numerator"
+              "default": "[]",
+              "description": "The fields to aggregate by.\nEvery field will be a table column.\nEvery field must exist in the backing LAPIS instance.\n\nIf left empty, the component will only show the absolute count of the provided `filter` and proportion `100%`.",
+              "attribute": "fields"
             },
             {
               "kind": "field",
-              "name": "denominator",
+              "name": "views",
               "type": {
-                "text": "Record<string, string | number | null | boolean>"
+                "text": "View[]"
               },
-              "default": "{}",
-              "description": "The LAPIS filter for the variant that the focal variant (`numerator`) should be compared to.",
-              "attribute": "denominator"
+              "default": "['table']",
+              "description": "A list of tabs with views that this component should provide.",
+              "attribute": "views"
             },
             {
               "kind": "field",
-              "name": "generationTime",
+              "name": "filter",
               "type": {
-                "text": "number"
+                "text": "LapisFilter"
               },
-              "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"
+              "default": "{}",
+              "description": "The filter to apply to the data.\nIt must be a valid LAPIS filter object.",
+              "attribute": "filter"
             },
             {
               "kind": "field",
-              "name": "views",
+              "name": "width",
               "type": {
-                "text": "'line'[]"
+                "text": "string"
               },
-              "default": "['line']",
-              "description": "A list of tabs with views that this component should provide.",
-              "attribute": "views"
+              "default": "'100%'",
+              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "attribute": "width"
             },
             {
               "kind": "field",
-              "name": "headline",
+              "name": "height",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "default": "'Relative growth advantage'",
-              "description": "The headline of the component. Set to an empty string to hide the headline.",
-              "attribute": "headline"
+              "default": "'700px'",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "attribute": "height"
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "headline",
               "type": {
-                "text": "{ width?: string; height?: string } | undefined"
+                "text": "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"
+              "default": "'Aggregate'",
+              "description": "The headline of the component. Set to an empty string to hide the headline.",
+              "attribute": "headline"
             }
           ],
           "attributes": [
             {
-              "name": "numerator",
+              "name": "fields",
               "type": {
-                "text": "Record<string, string | number | null | boolean>"
+                "text": "string[]"
               },
-              "default": "{}",
-              "description": "The LAPIS filter for the focal variant.",
-              "fieldName": "numerator"
+              "default": "[]",
+              "description": "The fields to aggregate by.\nEvery field will be a table column.\nEvery field must exist in the backing LAPIS instance.\n\nIf left empty, the component will only show the absolute count of the provided `filter` and proportion `100%`.",
+              "fieldName": "fields"
             },
             {
-              "name": "denominator",
+              "name": "views",
               "type": {
-                "text": "Record<string, string | number | null | boolean>"
+                "text": "View[]"
               },
-              "default": "{}",
-              "description": "The LAPIS filter for the variant that the focal variant (`numerator`) should be compared to.",
-              "fieldName": "denominator"
+              "default": "['table']",
+              "description": "A list of tabs with views that this component should provide.",
+              "fieldName": "views"
             },
             {
-              "name": "generationTime",
+              "name": "filter",
               "type": {
-                "text": "number"
+                "text": "LapisFilter"
               },
-              "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"
-            },
+              "default": "{}",
+              "description": "The filter to apply to the data.\nIt must be a valid LAPIS filter object.",
+              "fieldName": "filter"
+            },
             {
-              "name": "views",
+              "name": "width",
               "type": {
-                "text": "'line'[]"
+                "text": "string"
               },
-              "default": "['line']",
-              "description": "A list of tabs with views that this component should provide.",
-              "fieldName": "views"
+              "default": "'100%'",
+              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "fieldName": "width"
             },
             {
-              "name": "headline",
+              "name": "height",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "default": "'Relative growth advantage'",
-              "description": "The headline of the component. Set to an empty string to hide the headline.",
-              "fieldName": "headline"
+              "default": "'700px'",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "fieldName": "height"
             },
             {
-              "name": "size",
+              "name": "headline",
               "type": {
-                "text": "{ width?: string; height?: string } | undefined"
+                "text": "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.",
-              "fieldName": "size"
+              "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",
-          "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": "*",
+          "name": "gs-aggregate",
           "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<Required<MutationComparisonProps>>"
           },
-          "default": "{ title: 'Input/DateRangeSelector', component: 'gs-date-range-selector', parameters: withComponentDocs({ actions: { handles: ['gs-date-range-changed'], }, fetchMock: {}, componentDocs: { tag: 'gs-date-range-selector', 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', ], }, }, args: { customSelectOptions: [{ label: 'CustomDateRange', dateFrom: '2021-01-01', dateTo: '2021-12-31' }], earliestDate: '1970-01-01', initialValue: PRESET_VALUE_LAST_6_MONTHS, }, decorators: [withActions], tags: ['autodocs'], }"
+          "default": "{ title: 'Visualization/Mutation comparison', component: 'gs-mutation-comparison', argTypes: { variants: { control: 'object' }, sequenceType: { options: ['nucleotide', 'amino acid'], control: { type: 'radio' }, }, views: { options: ['table', 'venn'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, headline: { control: 'text' }, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
-          "name": "DateRangeSelectorStory",
+          "name": "Default",
           "type": {
-            "text": "StoryObj<DateRangeSelectorProps<'CustomDateRange'>>"
+            "text": "StoryObj<Required<MutationComparisonProps>>"
           },
-          "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} ></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())); }); }); }, }"
+          "default": "{ ...Template, args: { variants: [ { displayName: 'Some variant', lapisFilter: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo }, }, { displayName: 'Other variant', lapisFilter: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateFrom, dateTo, }, }, ], sequenceType: 'nucleotide', views: ['table', 'venn'], width: '100%', height: '700px', headline: 'Mutation comparison', }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'nucleotideMutationsSomeVariant', url: NUCLEOTIDE_MUTATIONS_ENDPOINT, body: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo, minProportion: 0, }, }, response: { status: 200, body: nucleotideMutationsSomeVariant, }, }, { matcher: { name: 'nucleotideMutationsOtherVariant', url: NUCLEOTIDE_MUTATIONS_ENDPOINT, body: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateFrom, dateTo, minProportion: 0, }, }, response: { status: 200, body: nucleotideMutationsOtherVariant, }, }, ], }, }, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-comparison'); await step('Min and max proportions should be 50% and 100%', async () => { const minInput = () => canvas.getAllByLabelText('%')[0]; const maxInput = () => canvas.getAllByLabelText('%')[1]; await waitFor(() => expect(minInput()).toHaveValue(50)); await waitFor(() => expect(maxInput()).toHaveValue(100)); }); }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "VennDiagram",
+          "type": {
+            "text": "StoryObj<Required<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": [
@@ -1384,206 +1323,215 @@
           "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": "## 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",
+          "description": "## Context\n\nThis component allows to compare mutations between different variants.\nA variant is defined by its LAPIS filter.\n\nIt only shows substitutions and deletions, it does not show insertions.\n\n## Views\n\n### Table View\n\nThe table view shows mutations\nand the proportions with which the mutation occurs in the respective variant.\nIt only shows mutations that are present in at least one of the variants\nand where the proportion is within the selected proportion interval for at least one variant.\n\n### Venn View\n\nThe Venn view shows the overlap of mutations between the variants in a Venn diagram.\nA variant is considered to have a certain mutation,\nif the proportion of the mutation in the variant is within the selected proportion interval.\nThus, changing the proportion interval may change a mutations from being \"common\" between variant\nto being \"for one variant only\".",
+          "name": "MutationComparisonComponent",
           "members": [
             {
               "kind": "field",
-              "name": "customSelectOptions",
+              "name": "variants",
               "type": {
-                "text": "{ label: string; dateFrom: string; dateTo: string }[]"
+                "text": "{\n        lapisFilter: Record<string, string | number | null | boolean>;\n        displayName: string;\n    }[]"
               },
               "default": "[]",
-              "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"
+              "description": "Required.\n\nAn array of variants to compare.\n\nThe `lapisFilter` will be sent as is to LAPIS to filter the mutation data.\nIt must be a valid LAPIS filter object.\n\nThe `displayName` will be used as the label for the variant in the views.\nIt should be human-readable.",
+              "attribute": "variants"
             },
             {
               "kind": "field",
-              "name": "earliestDate",
+              "name": "sequenceType",
               "type": {
-                "text": "string | undefined"
+                "text": "'nucleotide' | 'amino acid'"
               },
-              "default": "'1900-01-01'",
-              "description": "The `dateFrom` value to use in the `allTimes` preset in the format `YYYY-MM-DD`.",
-              "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": "'custom'\n        | 'allTimes'\n        | 'last2Weeks'\n        | 'lastMonth'\n        | 'last2Months'\n        | 'last3Months'\n        | 'last6Months'\n        | string\n        | undefined"
+                "text": "('table' | 'venn')[]"
               },
-              "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"
-            }
-          ],
-          "events": [
+              "default": "['table']",
+              "description": "A list of tabs with views that this component should provide.",
+              "attribute": "views"
+            },
             {
+              "kind": "field",
+              "name": "width",
               "type": {
-                "text": "CustomEvent<{ dateFrom: string; dateTo: string; }>"
+                "text": "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"
+              "default": "'100%'",
+              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "attribute": "width"
+            },
+            {
+              "kind": "field",
+              "name": "height",
+              "type": {
+                "text": "string"
+              },
+              "default": "'700px'",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "attribute": "height"
+            },
+            {
+              "kind": "field",
+              "name": "headline",
+              "type": {
+                "text": "string"
+              },
+              "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": "{ label: string; dateFrom: string; dateTo: string }[]"
+                "text": "{\n        lapisFilter: Record<string, string | number | null | boolean>;\n        displayName: string;\n    }[]"
               },
               "default": "[]",
-              "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"
+              "description": "Required.\n\nAn array of variants to compare.\n\nThe `lapisFilter` will be sent as is to LAPIS to filter the mutation data.\nIt must be a valid LAPIS filter object.\n\nThe `displayName` will be used as the label for the variant in the views.\nIt should be human-readable.",
+              "fieldName": "variants"
             },
             {
-              "name": "earliestDate",
+              "name": "sequenceType",
               "type": {
-                "text": "string | undefined"
+                "text": "'nucleotide' | 'amino acid'"
               },
-              "default": "'1900-01-01'",
-              "description": "The `dateFrom` value to use in the `allTimes` preset in the format `YYYY-MM-DD`.",
-              "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": "'custom'\n        | 'allTimes'\n        | 'last2Weeks'\n        | 'lastMonth'\n        | 'last2Months'\n        | 'last3Months'\n        | 'last6Months'\n        | string\n        | undefined"
+                "text": "('table' | 'venn')[]"
               },
-              "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"
+              "default": "['table']",
+              "description": "A list of tabs with views that this component should provide.",
+              "fieldName": "views"
+            },
+            {
+              "name": "width",
+              "type": {
+                "text": "string"
+              },
+              "default": "'100%'",
+              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "fieldName": "width"
+            },
+            {
+              "name": "height",
+              "type": {
+                "text": "string"
+              },
+              "default": "'700px'",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "fieldName": "height"
+            },
+            {
+              "name": "headline",
+              "type": {
+                "text": "string"
+              },
+              "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",
+          "name": "MutationComparisonComponent",
           "declaration": {
-            "name": "DateRangeSelectorComponent",
-            "module": "src/web-components/input/date-range-selector-component.tsx"
+            "name": "MutationComparisonComponent",
+            "module": "src/web-components/visualization/gs-mutation-comparison.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"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "TextInputComponent",
-          "declaration": {
-            "name": "TextInputComponent",
-            "module": "./text-input-component"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "MutationFilterComponent",
+          "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": "{ title: 'Input/Location filter', component: 'gs-location-filter', parameters: withComponentDocs({ actions: { handles: ['gs-location-changed'], }, componentDocs: { tag: 'gs-location-filter', opensShadowDom: true, expectsChildren: false, codeExample: `<gs-location-filter fields=\"['continent', 'country']\" value='Europe / Switzerland'></gs-location-filter>`, }, }), decorators: [withActions], tags: ['autodocs'], }"
-        },
-        {
-          "kind": "variable",
-          "name": "LocationFilter",
-          "type": {
-            "text": "StoryObj<LocationFilterProps>"
+            "text": "Meta<Required<MutationsProps>>"
           },
-          "default": "{ ...Template, parameters: { fetchMock: { mocks: [ { matcher: aggregatedEndpointMatcher, response: { status: 200, body: data, }, }, ], }, }, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-location-filter'); await waitFor(() => { return expect(canvas.getByRole('combobox')).toBeEnabled(); }); }, }"
+          "default": "{ title: 'Visualization/Mutations', component: 'gs-mutations', argTypes: { variant: { control: 'object' }, sequenceType: { options: ['nucleotide', 'amino acid'], control: { type: 'radio' }, }, views: { options: ['table', 'grid', 'insertions'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, headline: { control: 'text' }, }, args: { variant: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo: '2022-01-01' }, sequenceType: 'nucleotide', views: ['grid', 'table', 'insertions'], width: '100%', height: '700px', headline: 'Mutations', }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
-          "name": "DelayToShowLoadingState",
+          "name": "Default",
           "type": {
-            "text": "StoryObj<LocationFilterProps>"
+            "text": "StoryObj<Required<MutationsProps>>"
           },
-          "default": "{ ...Template, parameters: { fetchMock: { mocks: [ { matcher: aggregatedEndpointMatcher, response: { status: 200, body: data, }, options: { delay: 5000, }, }, ], }, }, }"
+          "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<Required<MutationsProps>>"
           },
-          "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('Bad Request: {\"error\":\"no data\"} ', { exact: false })).toBeInTheDocument(), ); }, }"
+          "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<Required<MutationsProps>>"
           },
-          "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', }, }), ); }); }, }"
+          "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": [
@@ -1592,164 +1540,239 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/web-components/input/location-filter-component.stories.ts"
+            "module": "src/web-components/visualization/gs-mutations.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "LocationFilter",
+          "name": "Default",
           "declaration": {
-            "name": "LocationFilter",
-            "module": "src/web-components/input/location-filter-component.stories.ts"
+            "name": "Default",
+            "module": "src/web-components/visualization/gs-mutations.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "DelayToShowLoadingState",
+          "name": "OnTableTab",
           "declaration": {
-            "name": "DelayToShowLoadingState",
-            "module": "src/web-components/input/location-filter-component.stories.ts"
+            "name": "OnTableTab",
+            "module": "src/web-components/visualization/gs-mutations.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "FetchingLocationsFails",
+          "name": "OnInsertionsTab",
           "declaration": {
-            "name": "FetchingLocationsFails",
-            "module": "src/web-components/input/location-filter-component.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "FiresEvent",
-          "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": "## Context\n\nThis component displays mutations (substitutions, deletions and insertions) for a given variant.\n\n## Views\n\n### Table View\n\nThe table view shows all substitutions and deletions for the given variant.\nIt shows the type (substitution or deletion), the total count of the mutation\nand the proportion of the mutation in the variant.\nThe proportion is relative to the total number of sequences matching\nthe specified sequence filters with non-ambiguous reads at that position.\n\nThe proportion interval filter can be used to filter the displayed mutations on client side.\n\n### Grid View\n\nThe grid view shows the proportion of each sequence symbol (nucleotide or amino acid) for each position that has a mutation.\nOnly positions with at least one mutation in the selected proportion interval are shown.\n\n### Insertions View\n\nThe insertions view shows the count of all insertions for the given variant.",
+          "name": "MutationsComponent",
           "members": [
             {
               "kind": "field",
-              "name": "initialValue",
+              "name": "variant",
+              "type": {
+                "text": "Record<string, string | number | null | boolean>"
+              },
+              "default": "{}",
+              "description": "Required.\n\nThe `variant` will be sent as is to LAPIS to filter the mutation data.\nIt must be a valid LAPIS filter object.",
+              "attribute": "variant"
+            },
+            {
+              "kind": "field",
+              "name": "sequenceType",
+              "type": {
+                "text": "'nucleotide' | 'amino acid'"
+              },
+              "default": "'nucleotide'",
+              "description": "The type of the sequence for which the mutations should be shown.",
+              "attribute": "sequenceType"
+            },
+            {
+              "kind": "field",
+              "name": "views",
+              "type": {
+                "text": "('table' | 'grid' | 'insertions')[]"
+              },
+              "default": "['table', 'grid']",
+              "description": "A list of tabs with views that this component should provide.",
+              "attribute": "views"
+            },
+            {
+              "kind": "field",
+              "name": "width",
               "type": {
                 "text": "string"
               },
-              "default": "''",
-              "description": "The initial value to use for this location filter.\nMust be of the form `valueForField1 / valueForField2 / ... / valueForFieldN`.",
-              "attribute": "initialValue"
+              "default": "'100%'",
+              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "attribute": "width"
             },
             {
               "kind": "field",
-              "name": "fields",
+              "name": "height",
               "type": {
-                "text": "string[]"
+                "text": "string"
               },
-              "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": "'700px'",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "attribute": "height"
+            },
             {
+              "kind": "field",
+              "name": "headline",
               "type": {
-                "text": "CustomEvent<Record<string, string>>"
+                "text": "string"
               },
-              "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": "'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": "Record<string, string | number | null | boolean>"
+              },
+              "default": "{}",
+              "description": "Required.\n\nThe `variant` will be sent as is to LAPIS to filter the mutation data.\nIt must be a valid LAPIS filter object.",
+              "fieldName": "variant"
+            },
+            {
+              "name": "sequenceType",
+              "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' | 'grid' | 'insertions')[]"
+              },
+              "default": "['table', 'grid']",
+              "description": "A list of tabs with views that this component should provide.",
+              "fieldName": "views"
+            },
+            {
+              "name": "width",
               "type": {
                 "text": "string"
               },
-              "default": "''",
-              "description": "The initial value to use for this location filter.\nMust be of the form `valueForField1 / valueForField2 / ... / valueForFieldN`.",
-              "fieldName": "initialValue"
+              "default": "'100%'",
+              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "fieldName": "width"
             },
             {
-              "name": "fields",
+              "name": "height",
               "type": {
-                "text": "string[]"
+                "text": "string"
               },
-              "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": "'700px'",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "fieldName": "height"
+            },
+            {
+              "name": "headline",
+              "type": {
+                "text": "string"
+              },
+              "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<MutationFilterProps>"
+            "text": "Meta<Required<PrevalenceOverTimeProps>>"
           },
-          "default": "{ title: 'Input/Mutation filter', component: 'gs-mutation-filter', parameters: withComponentDocs({ actions: { handles: ['gs-mutation-filter-changed', 'gs-mutation-filter-on-blur'], }, fetchMock: {}, componentDocs: { tag: 'gs-mutation-filter', opensShadowDom: true, expectsChildren: false, codeExample, }, }), decorators: [withActions], tags: ['autodocs'], }"
+          "default": "{ title: 'Visualization/Prevalence over time', component: 'gs-prevalence-over-time', argTypes: { numerator: { control: 'object' }, denominator: { control: 'object' }, granularity: { options: ['day', 'week', 'month', 'year'], control: { type: 'radio' }, }, smoothingWindow: { control: 'number' }, views: { options: ['bar', 'line', 'bubble', 'table'], control: { type: 'check' }, }, confidenceIntervalMethods: { options: ['wilson'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, headline: { control: 'text' }, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
-          "name": "Default",
+          "name": "TwoVariants",
           "type": {
-            "text": "StoryObj<MutationFilterProps>"
+            "text": "StoryObj<Required<PrevalenceOverTimeProps>>"
           },
-          "default": "{ ...Template, args: { initialValue: ['A123T'], }, }"
+          "default": "{ ...Template, args: { numerator: [ { displayName: 'EG', lapisFilter: { country: 'USA', pangoLineage: 'EG*', dateFrom: '2023-01-01' } }, { displayName: 'JN.1', lapisFilter: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01' } }, ], denominator: { country: 'USA', dateFrom: '2023-01-01' }, granularity: 'month', smoothingWindow: 0, views: ['bar', 'line', 'bubble', 'table'], confidenceIntervalMethods: ['wilson'], width: '100%', height: '700px', headline: 'Prevalence over time', }, 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<Required<PrevalenceOverTimeProps>>"
           },
-          "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: [], }, }), ), ); }); }, }"
+          "default": "{ ...Template, args: { numerator: { displayName: 'EG', lapisFilter: { country: 'USA', pangoLineage: 'BA.2.86*', dateFrom: '2023-10-01' }, }, denominator: { country: 'USA', dateFrom: '2023-10-01' }, granularity: 'day', smoothingWindow: 7, views: ['bar', 'line', 'bubble', 'table'], confidenceIntervalMethods: ['wilson'], width: '100%', height: '700px', headline: 'Prevalence over time', }, 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<Required<PrevalenceOverTimeProps>>"
           },
-          "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(); }); }, }"
+          "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<Required<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<Required<PrevalenceOverTimeProps>>"
+          },
+          "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": [
@@ -1758,136 +1781,280 @@
           "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": "## 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",
+          "description": "## Context\n\nThis component displays the prevalence over time of one or more variants.\nThe prevalence is calculated as the ratio of the number of cases of each variant given as `numerator`\nto the number of cases of the variant given as `denominator`.\n\nIn the chart views,\n- the user can select whether to display a confidence interval (not available in the bubble chart).\n  The confidence interval is calculated using [Wilson score interval](https://en.wikipedia.org/wiki/Binomial_proportion_confidence_interval),\n  with a confidence level of 95%.\n- the x-axis shows time steps in the selected `granularity`.\n- the user can select the y-axis scale (linear, logistic, logit).\n\n## Views\n\n### Bar View\n\nDisplays the prevalence over time as a bar chart.\nShows a bar for each variant in the `numerator` on every time step.\n\n### Line View\n\nDisplays the prevalence over time as a line chart.\nEach data point is connected for better visibility.\nShows a line for each variant in the `numerator`.\n\n### Bubble View\n\nDisplays the prevalence over time as a bubble chart.\nThe size of the bubbles represents the number of cases of the `denominator` variant.\nThe height of the bubbles represents the prevalence of the `numerator` variants.\n\n### Table View\n\nDisplays the prevalence over time as a table with one row per time point.",
+          "name": "PrevalenceOverTimeComponent",
           "members": [
             {
-              "kind": "field",
-              "name": "initialValue",
+              "kind": "field",
+              "name": "numerator",
+              "type": {
+                "text": "{\n            lapisFilter: Record<string, string | number | null | boolean>;\n            displayName: string;\n        }\n        | {\n            lapisFilter: Record<string, string | number | null | boolean>;\n            displayName: string;\n        }[]"
+              },
+              "default": "{ displayName: '', lapisFilter: {} }",
+              "description": "Required.\n\nEither a single variant or an array of variants to compare.\nThis must be a valid LAPIS filter object with an additional `displayName` property\nwhich will be used as the label for the variant in the views,\nor an array of such objects.",
+              "attribute": "numerator"
+            },
+            {
+              "kind": "field",
+              "name": "denominator",
+              "type": {
+                "text": "Record<string, string | number | null | boolean>"
+              },
+              "default": "{}",
+              "description": "Required.\n\nThe 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"
+              },
+              "default": "'Prevalence over time'",
+              "description": "The headline of the component. Set to an empty string to hide the headline.",
+              "attribute": "headline"
+            },
+            {
+              "kind": "field",
+              "name": "width",
+              "type": {
+                "text": "string"
+              },
+              "default": "'100%'",
+              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "attribute": "width"
+            },
+            {
+              "kind": "field",
+              "name": "height",
+              "type": {
+                "text": "string"
+              },
+              "default": "'700px'",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "attribute": "height"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "numerator",
+              "type": {
+                "text": "{\n            lapisFilter: Record<string, string | number | null | boolean>;\n            displayName: string;\n        }\n        | {\n            lapisFilter: Record<string, string | number | null | boolean>;\n            displayName: string;\n        }[]"
+              },
+              "default": "{ displayName: '', lapisFilter: {} }",
+              "description": "Required.\n\nEither a single variant or an array of variants to compare.\nThis must be a valid LAPIS filter object with an additional `displayName` property\nwhich will be used as the label for the variant in the views,\nor an array of such objects.",
+              "fieldName": "numerator"
+            },
+            {
+              "name": "denominator",
+              "type": {
+                "text": "Record<string, string | number | null | boolean>"
+              },
+              "default": "{}",
+              "description": "Required.\n\nThe variant that the variants in `numerator` are compared to.",
+              "fieldName": "denominator"
+            },
+            {
+              "name": "granularity",
+              "type": {
+                "text": "'day' | 'week' | 'month' | 'year'"
+              },
+              "default": "'day'",
+              "description": "The granularity of the time axis.",
+              "fieldName": "granularity"
+            },
+            {
+              "name": "smoothingWindow",
               "type": {
-                "text": "SelectedMutationFilterStrings | string[] | undefined"
+                "text": "number"
               },
-              "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"
-            }
-          ],
-          "events": [
+              "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": "CustomEvent<{nucleotideMutations: string[],aminoAcidMutations: string[],nucleotideInsertions: string[],aminoAcidInsertions: string[]}>"
+                "text": "('bar' | 'line' | 'bubble' | 'table')[]"
               },
-              "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"
+              "default": "['bar', 'line', 'bubble', 'table']",
+              "description": "A list of tabs with views that this component should provide.",
+              "fieldName": "views"
             },
             {
+              "name": "confidenceIntervalMethods",
               "type": {
-                "text": "CustomEvent<{nucleotideMutations: string[],aminoAcidMutations: string[],nucleotideInsertions: string[],aminoAcidInsertions: string[]}>"
+                "text": "('wilson' | 'none')[]"
               },
-              "description": "Fired when: - the mutation filter has lost focus Contains the selected mutations in the format",
-              "name": "gs-mutation-filter-on-blur"
-            }
-          ],
-          "attributes": [
+              "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": "initialValue",
+              "name": "headline",
               "type": {
-                "text": "SelectedMutationFilterStrings | string[] | undefined"
+                "text": "string"
               },
-              "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"
+              "default": "'Prevalence over time'",
+              "description": "The headline of the component. Set to an empty string to hide the headline.",
+              "fieldName": "headline"
+            },
+            {
+              "name": "width",
+              "type": {
+                "text": "string"
+              },
+              "default": "'100%'",
+              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "fieldName": "width"
+            },
+            {
+              "name": "height",
+              "type": {
+                "text": "string"
+              },
+              "default": "'700px'",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "fieldName": "height"
             }
           ],
           "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<TextInputProps>"
+            "text": "Meta<RelativeGrowthAdvantageProps>"
           },
-          "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: { tag: 'gs-text-input', opensShadowDom: true, expectsChildren: false, codeExample, }, }), decorators: [withActions], tags: ['autodocs'], }"
+          "default": "{ title: 'Visualization/Relative growth advantage', component: 'gs-relative-growth-advantage', argTypes: { numerator: { control: 'object' }, denominator: { control: 'object' }, generationTime: { control: 'number' }, views: { options: ['line'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, headline: { control: 'text' }, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
           "name": "Default",
           "type": {
-            "text": "StoryObj<TextInputProps>"
-          },
-          "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} ></gs-text-input> </div> </gs-app>`; }, args: { lapisField: 'host', placeholderText: 'Enter host name', initialValue: 'Homo sapiens', }, }"
-        },
-        {
-          "kind": "variable",
-          "name": "FiresEvent",
-          "type": {
-            "text": "StoryObj<TextInputProps>"
+            "text": "StoryObj<Required<RelativeGrowthAdvantageProps>>"
           },
-          "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: '', }, }"
+          "default": "{ ...Template, args: { numerator: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateFrom: '2020-12-01', dateTo: '2021-03-01' }, denominator: { country: 'Switzerland', dateFrom: '2020-12-01', dateTo: '2021-03-01' }, generationTime: 7, views: ['line'], width: '100%', height: '700px', headline: 'Relative growth advantage', }, 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": [
@@ -1896,7 +2063,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"
           }
         },
         {
@@ -1904,160 +2071,226 @@
           "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": "\n## Context\n\nThis component provides a text input field to specify filters for arbitrary fields of this Lapis instance.",
-          "name": "TextInputComponent",
+          "description": "## Context\n\nFor this component, we assume a discrete time model, where new infections happen exactly every `generationTime` days.\nThis is what we call a \"generation\".\n\nThis component estimates the relative growth advantage of a variant by performing a logistic regression.\nBased on the inferred logistic growth rate, we derive the relative growth advantage (per generation).\n\nFor details on the scientific method, see:\nChen, Chaoran, et al. \"Quantification of the spread of SARS-CoV-2 variant B.1.1.7 in Switzerland.\" Epidemics (2021);\ndoi: [10.1016/j.epidem.2021.100480](https://doi.org/10.1016/j.epidem.2021.100480)\n\nThis component fetches aggregated data from LAPIS.\nThen the data is sent to `https://cov-spectrum.org/api/v2/computed/model/chen2021Fitness`\nwhich performs the logistic regression and calculates the relative growth advantage.\n\n## Views\n\n### Line View\n\nThe line view shows the relative growth advantage over time in a line chart.\nThe dots in the plot show the proportions of the focal variant (`numerator`) to the `denominator` variant\nfor every day as observed in the data.\nThe line shows a logistic curve fitted to the data points, including a 95% confidence interval.",
+          "name": "RelativeGrowthAdvantageComponent",
           "members": [
             {
               "kind": "field",
-              "name": "initialValue",
+              "name": "numerator",
               "type": {
-                "text": "string | undefined"
+                "text": "Record<string, string | number | null | boolean>"
               },
-              "default": "''",
-              "description": "The initial value to use for this text input.",
-              "attribute": "initialValue"
+              "default": "{}",
+              "description": "Required.\n\nThe LAPIS filter for the focal variant.",
+              "attribute": "numerator"
             },
             {
               "kind": "field",
-              "name": "lapisField",
+              "name": "denominator",
+              "type": {
+                "text": "Record<string, string | number | null | boolean>"
+              },
+              "default": "{}",
+              "description": "Required.\n\nThe LAPIS filter for the variant that the focal variant (`numerator`) should be compared to.",
+              "attribute": "denominator"
+            },
+            {
+              "kind": "field",
+              "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"
               },
-              "default": "''",
-              "description": "The Lapis field name to use for this text input.",
-              "attribute": "lapisField"
+              "default": "'Relative growth advantage'",
+              "description": "The headline of the component. Set to an empty string to hide the headline.",
+              "attribute": "headline"
             },
             {
               "kind": "field",
-              "name": "placeholderText",
+              "name": "width",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "default": "''",
-              "description": "The placeholder text to display in the input field.",
-              "attribute": "placeholderText"
-            }
-          ],
-          "events": [
+              "default": "'100%'",
+              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "attribute": "width"
+            },
             {
+              "kind": "field",
+              "name": "height",
               "type": {
-                "text": "CustomEvent<Record<string, string>>"
+                "text": "string"
               },
-              "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"
+              "default": "'700px'",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "attribute": "height"
             }
           ],
           "attributes": [
             {
-              "name": "initialValue",
+              "name": "numerator",
               "type": {
-                "text": "string | undefined"
+                "text": "Record<string, string | number | null | boolean>"
               },
-              "default": "''",
-              "description": "The initial value to use for this text input.",
-              "fieldName": "initialValue"
+              "default": "{}",
+              "description": "Required.\n\nThe LAPIS filter for the focal variant.",
+              "fieldName": "numerator"
             },
             {
-              "name": "lapisField",
+              "name": "denominator",
+              "type": {
+                "text": "Record<string, string | number | null | boolean>"
+              },
+              "default": "{}",
+              "description": "Required.\n\nThe LAPIS filter for the variant that the focal variant (`numerator`) should be compared to.",
+              "fieldName": "denominator"
+            },
+            {
+              "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"
               },
-              "default": "''",
-              "description": "The Lapis field name to use for this text input.",
-              "fieldName": "lapisField"
+              "default": "'Relative growth advantage'",
+              "description": "The headline of the component. Set to an empty string to hide the headline.",
+              "fieldName": "headline"
             },
             {
-              "name": "placeholderText",
+              "name": "width",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "default": "''",
-              "description": "The placeholder text to display in the input field.",
-              "fieldName": "placeholderText"
+              "default": "'100%'",
+              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "fieldName": "width"
+            },
+            {
+              "name": "height",
+              "type": {
+                "text": "string"
+              },
+              "default": "'700px'",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
+              "fieldName": "height"
             }
           ],
           "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"
           }
         }
       ]