@genspectrum/dashboard-components 0.2.0 → 0.3.1

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",
@@ -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"
             }
           ],
@@ -260,17 +266,17 @@
           "kind": "variable",
           "name": "meta",
           "type": {
-            "text": "Meta<DateRangeSelectorProps<'CustomDateRange'>>"
+            "text": "Meta<Required<DateRangeSelectorProps<'CustomDateRange'>>>"
           },
-          "default": "{ title: 'Input/DateRangeSelector', component: 'gs-date-range-selector', parameters: withComponentDocs({ actions: { handles: ['gs-date-range-changed'], }, fetchMock: {}, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), argTypes: { initialValue: { control: { type: 'select', }, options: [ PRESET_VALUE_CUSTOM, PRESET_VALUE_ALL_TIMES, PRESET_VALUE_LAST_2_WEEKS, PRESET_VALUE_LAST_MONTH, PRESET_VALUE_LAST_2_MONTHS, PRESET_VALUE_LAST_3_MONTHS, PRESET_VALUE_LAST_6_MONTHS, 'CustomDateRange', ], }, customSelectOptions: { control: { type: 'object', }, }, earliestDate: { control: { type: 'text', }, }, width: { control: { type: 'text', }, }, }, args: { customSelectOptions: [{ label: 'CustomDateRange', dateFrom: '2021-01-01', dateTo: '2021-12-31' }], earliestDate: '1970-01-01', initialValue: PRESET_VALUE_LAST_6_MONTHS, width: '100%', }, decorators: [withActions], tags: ['autodocs'], }"
+          "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": "DateRangeSelectorStory",
           "type": {
-            "text": "StoryObj<DateRangeSelectorProps<'CustomDateRange'>>"
+            "text": "StoryObj<Required<DateRangeSelectorProps<'CustomDateRange'>>>"
           },
-          "default": "{ render: (args) => html` <gs-app lapis=\"${LAPIS_URL}\"> <div class=\"max-w-screen-lg\"> <gs-date-range-selector .customSelectOptions=${args.customSelectOptions} .earliestDate=${args.earliestDate} .initialValue=${args.initialValue} .width=${args.width} ></gs-date-range-selector> </div> </gs-app>`, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-date-range-selector'); const dateTo = () => canvas.getByPlaceholderText('Date to'); await step('Expect last 6 months to be selected', async () => { await expect(canvas.getByRole('combobox')).toHaveValue('last6Months'); await waitFor(() => { expect(dateTo()).toHaveValue(toYYYYMMDD(new Date())); }); }); }, }"
+          "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": [
@@ -298,7 +304,7 @@
       "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.",
+          "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": [
             {
@@ -315,7 +321,7 @@
               "kind": "field",
               "name": "earliestDate",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
               "default": "'1900-01-01'",
               "description": "The `dateFrom` value to use in the `allTimes` preset in the format `YYYY-MM-DD`.",
@@ -325,7 +331,7 @@
               "kind": "field",
               "name": "initialValue",
               "type": {
-                "text": "'custom'\n        | 'allTimes'\n        | 'last2Weeks'\n        | 'lastMonth'\n        | 'last2Months'\n        | 'last3Months'\n        | 'last6Months'\n        | string\n        | undefined"
+                "text": "'custom'\n        | 'allTimes'\n        | 'last2Weeks'\n        | 'lastMonth'\n        | 'last2Months'\n        | 'last3Months'\n        | 'last6Months'\n        | string"
               },
               "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'`.",
@@ -335,19 +341,29 @@
               "kind": "field",
               "name": "width",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "default": "undefined",
-              "description": "The width of the component.\n\nIf not set, the component will take the full width of its container.\n\nThe width should be a string with a unit in css style, e.g. '100%', '500px' or '50vw'.\nIf the unit is %, the size will be relative to the container of the component.",
+              "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": "dateColumn",
+              "type": {
+                "text": "string"
+              },
+              "default": "'date'",
+              "description": "The name of the column in LAPIS that contains the date information.",
+              "attribute": "dateColumn"
             }
           ],
           "events": [
             {
               "type": {
-                "text": "CustomEvent<{ dateFrom: string; dateTo: string; }>"
+                "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`.",
+              "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"
             }
           ],
@@ -364,7 +380,7 @@
             {
               "name": "earliestDate",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
               "default": "'1900-01-01'",
               "description": "The `dateFrom` value to use in the `allTimes` preset in the format `YYYY-MM-DD`.",
@@ -373,7 +389,7 @@
             {
               "name": "initialValue",
               "type": {
-                "text": "'custom'\n        | 'allTimes'\n        | 'last2Weeks'\n        | 'lastMonth'\n        | 'last2Months'\n        | 'last3Months'\n        | 'last6Months'\n        | string\n        | undefined"
+                "text": "'custom'\n        | 'allTimes'\n        | 'last2Weeks'\n        | 'lastMonth'\n        | 'last2Months'\n        | 'last3Months'\n        | 'last6Months'\n        | string"
               },
               "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'`.",
@@ -382,11 +398,20 @@
             {
               "name": "width",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "default": "undefined",
-              "description": "The width of the component.\n\nIf not set, the component will take the full width of its container.\n\nThe width should be a string with a unit in css style, e.g. '100%', '500px' or '50vw'.\nIf the unit is %, the size will be relative to the container of the component.",
+              "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": "dateColumn",
+              "type": {
+                "text": "string"
+              },
+              "default": "'date'",
+              "description": "The name of the column in LAPIS that contains the date information.",
+              "fieldName": "dateColumn"
             }
           ],
           "superclass": {
@@ -450,7 +475,7 @@
           "type": {
             "text": "StoryObj<LocationFilterProps>"
           },
-          "default": "{ ...Template, parameters: { fetchMock: { mocks: [ { matcher: aggregatedEndpointMatcher, response: { status: 400, body: { error: 'no data' }, }, }, ], }, }, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-location-filter'); await waitFor(() => expect(canvas.getByText('Oops! Something went wrong.', { exact: false })).toBeInTheDocument(), ); }, }"
+          "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",
@@ -458,7 +483,7 @@
           "type": {
             "text": "StoryObj<LocationFilterProps>"
           },
-          "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": "{ ...Template, parameters: { fetchMock: { mocks: [ { matcher: aggregatedEndpointMatcher, response: { status: 200, body: data, }, }, ], }, }, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-location-filter'); 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 expect(listenerMock).not.toHaveBeenCalled(); await userEvent.type(inputField(), '{backspace>18/}'); }); await step('Select Asia', async () => { await userEvent.type(inputField(), 'Asia'); 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 expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { region: 'Asia', country: 'Bangladesh', division: 'Rajshahi', location: 'Chapainawabgonj', }, }), ); }); }, }"
         }
       ],
       "exports": [
@@ -530,17 +555,17 @@
                 "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']`).",
+              "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": "width",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "default": "undefined",
-              "description": "The width of the component.\n\nIf not set, the component will take the full width of its container.\n\nThe width should be a string with a unit in css style, e.g. '100%', '500px' or '50vw'.\nIf the unit is %, the size will be relative to the container of the component.",
+              "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"
             }
           ],
@@ -549,7 +574,7 @@
               "type": {
                 "text": "CustomEvent<Record<string, 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\" } ```",
+              "description": "Fired when a value from the datalist is selected or when a valid value is typed into the field. 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"
             }
           ],
@@ -569,16 +594,16 @@
                 "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']`).",
+              "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": "width",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "default": "undefined",
-              "description": "The width of the component.\n\nIf not set, the component will take the full width of its container.\n\nThe width should be a string with a unit in css style, e.g. '100%', '500px' or '50vw'.\nIf the unit is %, the size will be relative to the container of the component.",
+              "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"
             }
           ],
@@ -619,7 +644,7 @@
           "type": {
             "text": "Meta<MutationFilterProps>"
           },
-          "default": "{ title: 'Input/Mutation filter', component: 'gs-mutation-filter', parameters: withComponentDocs({ actions: { handles: ['gs-mutation-filter-changed', 'gs-mutation-filter-on-blur'], }, fetchMock: {}, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), argTypes: { initialValue: { control: { type: 'object', }, }, size: { control: { type: 'object', }, }, }, decorators: [withActions], tags: ['autodocs'], }"
+          "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",
@@ -687,28 +712,38 @@
       "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",
+          "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": "initialValue",
               "type": {
-                "text": "{\n              nucleotideMutations: string[];\n              aminoAcidMutations: string[];\n              nucleotideInsertions: string[];\n              aminoAcidInsertions: string[];\n          }\n        | string[]\n        | undefined"
+                "text": "{\n            nucleotideMutations: string[];\n            aminoAcidMutations: string[];\n            nucleotideInsertions: string[];\n            aminoAcidInsertions: string[];\n        }\n        | string[]\n        | undefined"
               },
               "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.",
+              "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": "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": "height",
+              "type": {
+                "text": "string"
+              },
+              "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": [
@@ -731,20 +766,29 @@
             {
               "name": "initialValue",
               "type": {
-                "text": "{\n              nucleotideMutations: string[];\n              aminoAcidMutations: string[];\n              nucleotideInsertions: string[];\n              aminoAcidInsertions: string[];\n          }\n        | string[]\n        | undefined"
+                "text": "{\n            nucleotideMutations: string[];\n            aminoAcidMutations: string[];\n            nucleotideInsertions: string[];\n            aminoAcidInsertions: string[];\n        }\n        | string[]\n        | undefined"
               },
               "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.",
+              "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": "height",
+              "type": {
+                "text": "string"
+              },
+              "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": {
@@ -782,7 +826,7 @@
           "kind": "variable",
           "name": "meta",
           "type": {
-            "text": "Meta<TextInputProps>"
+            "text": "Meta<Required<TextInputProps>>"
           },
           "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'], }"
         },
@@ -790,7 +834,7 @@
           "kind": "variable",
           "name": "Default",
           "type": {
-            "text": "StoryObj<TextInputProps>"
+            "text": "StoryObj<Required<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} .width=${args.width} ></gs-text-input> </div> </gs-app>`; }, args: { lapisField: 'host', placeholderText: 'Enter host name', initialValue: 'Homo sapiens', width: '100%', }, }"
         },
@@ -798,7 +842,7 @@
           "kind": "variable",
           "name": "FiresEvent",
           "type": {
-            "text": "StoryObj<TextInputProps>"
+            "text": "StoryObj<Required<TextInputProps>>"
           },
           "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: '', }, }"
         }
@@ -836,14 +880,14 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "\n## Context\n\nThis component provides a text input field to specify filters for arbitrary fields of this Lapis instance.",
+          "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": "initialValue",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
               "default": "''",
               "description": "The initial value to use for this text input.",
@@ -856,14 +900,14 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The Lapis field name to use for this text input.",
+              "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": "placeholderText",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
               "default": "''",
               "description": "The placeholder text to display in the input field.",
@@ -873,10 +917,10 @@
               "kind": "field",
               "name": "width",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "default": "undefined",
-              "description": "The width of the component.\n\nIf not set, the component will take the full width of its container.\n\nThe width should be a string with a unit in css style, e.g. '100%', '500px' or '50vw'.\nIf the unit is %, the size will be relative to the container of the component.",
+              "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"
             }
           ],
@@ -893,7 +937,7 @@
             {
               "name": "initialValue",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
               "default": "''",
               "description": "The initial value to use for this text input.",
@@ -905,13 +949,13 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The Lapis field name to use for this text input.",
+              "description": "Required.\n\nThe LAPIS field name to use for this text input.\nThe field must exist on this LAPIS instance.",
               "fieldName": "lapisField"
             },
             {
               "name": "placeholderText",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
               "default": "''",
               "description": "The placeholder text to display in the input field.",
@@ -920,10 +964,10 @@
             {
               "name": "width",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "default": "undefined",
-              "description": "The width of the component.\n\nIf not set, the component will take the full width of its container.\n\nThe width should be a string with a unit in css style, e.g. '100%', '500px' or '50vw'.\nIf the unit is %, the size will be relative to the container of the component.",
+              "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"
             }
           ],
@@ -993,6 +1037,18 @@
         }
       ]
     },
+    {
+      "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",
@@ -1047,17 +1103,17 @@
           "kind": "variable",
           "name": "meta",
           "type": {
-            "text": "Meta<AggregateProps>"
+            "text": "Meta<Required<AggregateProps>>"
           },
-          "default": "{ title: 'Visualization/Aggregate', component: 'gs-aggregate', argTypes: { fields: [{ control: 'object' }], views: { options: ['table'], control: { type: 'check' }, }, size: [{ control: 'object' }], headline: { control: 'text' }, }, parameters: withComponentDocs({ fetchMock: { mocks: [ { matcher: { name: 'aggregatedData', url: AGGREGATED_ENDPOINT, body: { fields: ['division', 'host'], country: 'USA', }, }, response: { status: 200, body: aggregatedData, }, }, ], }, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample: `<gs-aggregate fields='[\"division\", \"host\"]' filter='{\"country\": \"USA\"}' views='[\"table\"]'></gs-aggregate>`, }, }), tags: ['autodocs'], }"
+          "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": "Table",
           "type": {
-            "text": "StoryObj<AggregateProps>"
+            "text": "StoryObj<Required<AggregateProps>>"
           },
-          "default": "{ render: (args) => html` <gs-app lapis=\"${LAPIS_URL}\"> <gs-aggregate .fields=${args.fields} .filter=${args.filter} .views=${args.views} .size=${args.size} .headline=${args.headline} ></gs-aggregate> </gs-app> `, args: { fields: ['division', 'host'], views: ['table'], filter: { country: 'USA', }, size: { width: '100%', height: '700px' }, headline: 'Aggregate', }, }"
+          "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": [
@@ -1085,7 +1141,7 @@
       "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.",
+          "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": [
             {
@@ -1095,7 +1151,7 @@
                 "text": "string[]"
               },
               "default": "[]",
-              "description": "The fields to aggregate by.",
+              "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"
             },
             {
@@ -1105,7 +1161,7 @@
                 "text": "View[]"
               },
               "default": "['table']",
-              "description": "The views are used to display the aggregated data.\nIn the table view, the data is presented in a table format where each field is a column,\nalong with the aggregated value and its proportion.\nThe proportion represents the ratio of the aggregated value to the total count of the data\n(considering the applied filter).",
+              "description": "A list of tabs with views that this component should provide.",
               "attribute": "views"
             },
             {
@@ -1115,24 +1171,34 @@
                 "text": "LapisFilter"
               },
               "default": "{}",
-              "description": "The filter to apply to the data.",
+              "description": "The filter to apply to the data.\nIt must be a valid LAPIS filter object.",
               "attribute": "filter"
             },
             {
               "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": "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 | undefined"
+                "text": "string"
               },
               "default": "'Aggregate'",
               "description": "The headline of the component. Set to an empty string to hide the headline.",
@@ -1146,7 +1212,7 @@
                 "text": "string[]"
               },
               "default": "[]",
-              "description": "The fields to aggregate by.",
+              "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"
             },
             {
@@ -1155,7 +1221,7 @@
                 "text": "View[]"
               },
               "default": "['table']",
-              "description": "The views are used to display the aggregated data.\nIn the table view, the data is presented in a table format where each field is a column,\nalong with the aggregated value and its proportion.\nThe proportion represents the ratio of the aggregated value to the total count of the data\n(considering the applied filter).",
+              "description": "A list of tabs with views that this component should provide.",
               "fieldName": "views"
             },
             {
@@ -1164,22 +1230,31 @@
                 "text": "LapisFilter"
               },
               "default": "{}",
-              "description": "The filter to apply to the data.",
+              "description": "The filter to apply to the data.\nIt must be a valid LAPIS filter object.",
               "fieldName": "filter"
             },
             {
-              "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": "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 | undefined"
+                "text": "string"
               },
               "default": "'Aggregate'",
               "description": "The headline of the component. Set to an empty string to hide the headline.",
@@ -1221,23 +1296,23 @@
           "kind": "variable",
           "name": "meta",
           "type": {
-            "text": "Meta<MutationComparisonProps>"
+            "text": "Meta<Required<MutationComparisonProps>>"
           },
-          "default": "{ title: 'Visualization/Mutation comparison', component: 'gs-mutation-comparison', argTypes: { variants: { control: 'object' }, sequenceType: { options: ['nucleotide', 'amino acid'], control: { type: 'radio' }, }, views: { options: ['table', 'venn'], control: { type: 'check' }, }, size: { control: 'object' }, headline: { control: 'text' }, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), 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": "Default",
           "type": {
-            "text": "StoryObj<MutationComparisonProps>"
+            "text": "StoryObj<Required<MutationComparisonProps>>"
           },
-          "default": "{ ...Template, args: { variants: [ { displayName: 'Some variant', lapisFilter: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo }, }, { displayName: 'Other variant', lapisFilter: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateFrom, dateTo, }, }, ], sequenceType: 'nucleotide', views: ['table', 'venn'], size: { width: '100%', height: '700px' }, headline: 'Mutation comparison', }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'nucleotideMutationsSomeVariant', url: NUCLEOTIDE_MUTATIONS_ENDPOINT, body: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo, minProportion: 0, }, }, response: { status: 200, body: nucleotideMutationsSomeVariant, }, }, { matcher: { name: 'nucleotideMutationsOtherVariant', url: NUCLEOTIDE_MUTATIONS_ENDPOINT, body: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateFrom, dateTo, minProportion: 0, }, }, response: { status: 200, body: nucleotideMutationsOtherVariant, }, }, ], }, }, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-comparison'); await step('Min and max proportions should be 50% and 100%', async () => { const minInput = () => canvas.getAllByLabelText('%')[0]; const maxInput = () => canvas.getAllByLabelText('%')[1]; await waitFor(() => expect(minInput()).toHaveValue(50)); await waitFor(() => expect(maxInput()).toHaveValue(100)); }); }, }"
+          "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<MutationComparisonProps>"
+            "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(), ); }); }, }"
         }
@@ -1275,7 +1350,7 @@
       "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\".",
+          "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": [
             {
@@ -1285,7 +1360,7 @@
                 "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.",
+              "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"
             },
             {
@@ -1310,19 +1385,29 @@
             },
             {
               "kind": "field",
-              "name": "size",
+              "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": "{ 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": "'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 | undefined"
+                "text": "string"
               },
               "default": "'Mutation comparison'",
               "description": "The headline of the component. Set to an empty string to hide the headline.",
@@ -1336,7 +1421,7 @@
                 "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.",
+              "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"
             },
             {
@@ -1358,18 +1443,27 @@
               "fieldName": "views"
             },
             {
-              "name": "size",
+              "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": "{ 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": "'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 | undefined"
+                "text": "string"
               },
               "default": "'Mutation comparison'",
               "description": "The headline of the component. Set to an empty string to hide the headline.",
@@ -1411,15 +1505,15 @@
           "kind": "variable",
           "name": "meta",
           "type": {
-            "text": "Meta<MutationsProps>"
+            "text": "Meta<Required<MutationsProps>>"
           },
-          "default": "{ title: 'Visualization/Mutations', component: 'gs-mutations', argTypes: { variant: { control: 'object' }, sequenceType: { options: ['nucleotide', 'amino acid'], control: { type: 'radio' }, }, views: { options: ['table', 'grid', 'insertions'], control: { type: 'check' }, }, size: { control: 'object' }, headline: { control: 'text' }, }, args: { variant: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo: '2022-01-01' }, sequenceType: 'nucleotide', views: ['grid', 'table', 'insertions'], size: { width: '100%', height: '700px' }, headline: 'Mutations', }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
+          "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": "Default",
           "type": {
-            "text": "StoryObj<MutationsProps>"
+            "text": "StoryObj<Required<MutationsProps>>"
           },
           "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, }, }, ], }, }, }"
         },
@@ -1427,7 +1521,7 @@
           "kind": "variable",
           "name": "OnTableTab",
           "type": {
-            "text": "StoryObj<MutationsProps>"
+            "text": "StoryObj<Required<MutationsProps>>"
           },
           "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' })); }, }"
         },
@@ -1435,7 +1529,7 @@
           "kind": "variable",
           "name": "OnInsertionsTab",
           "type": {
-            "text": "StoryObj<MutationsProps>"
+            "text": "StoryObj<Required<MutationsProps>>"
           },
           "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' })); }, }"
         }
@@ -1481,7 +1575,7 @@
       "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.",
+          "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": [
             {
@@ -1491,7 +1585,7 @@
                 "text": "Record<string, string | number | null | boolean>"
               },
               "default": "{}",
-              "description": "The `variant` will be sent as is to LAPIS to filter the mutation data.\nIt must be a valid LAPIS filter object.",
+              "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"
             },
             {
@@ -1516,19 +1610,29 @@
             },
             {
               "kind": "field",
-              "name": "size",
+              "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": "{ 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": "'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 | undefined"
+                "text": "string"
               },
               "default": "'Mutations'",
               "description": "The headline of the component. Set to an empty string to hide the headline.",
@@ -1542,7 +1646,7 @@
                 "text": "Record<string, string | number | null | boolean>"
               },
               "default": "{}",
-              "description": "The `variant` will be sent as is to LAPIS to filter the mutation data.\nIt must be a valid LAPIS filter object.",
+              "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"
             },
             {
@@ -1564,18 +1668,27 @@
               "fieldName": "views"
             },
             {
-              "name": "size",
+              "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": "{ 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": "'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 | undefined"
+                "text": "string"
               },
               "default": "'Mutations'",
               "description": "The headline of the component. Set to an empty string to hide the headline.",
@@ -1617,31 +1730,31 @@
           "kind": "variable",
           "name": "meta",
           "type": {
-            "text": "Meta<PrevalenceOverTimeProps>"
+            "text": "Meta<Required<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: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), 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": "TwoVariants",
           "type": {
-            "text": "StoryObj<PrevalenceOverTimeProps>"
+            "text": "StoryObj<Required<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, }, }, ], }, }, }"
+          "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": "OneVariant",
           "type": {
-            "text": "StoryObj<PrevalenceOverTimeProps>"
+            "text": "StoryObj<Required<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, }, }, ], }, }, }"
+          "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": "OneVariantOnLineTab",
           "type": {
-            "text": "StoryObj<PrevalenceOverTimeProps>"
+            "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: 'Line' })).toBeInTheDocument()); await fireEvent.click(canvas.getByRole('button', { name: 'Line' })); }, }"
         },
@@ -1649,7 +1762,7 @@
           "kind": "variable",
           "name": "OneVariantOnBubbleTab",
           "type": {
-            "text": "StoryObj<PrevalenceOverTimeProps>"
+            "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' })); }, }"
         },
@@ -1657,7 +1770,7 @@
           "kind": "variable",
           "name": "OneVariantOnTableTab",
           "type": {
-            "text": "StoryObj<PrevalenceOverTimeProps>"
+            "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' })); }, }"
         }
@@ -1719,27 +1832,27 @@
       "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.",
+          "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": "numerator",
               "type": {
-                "text": "(Record<string, string | number | null | boolean> & { displayName: string })\n        | (Record<string, string | number | null | boolean> & {\n              displayName: string;\n          })[]"
+                "text": "{\n            lapisFilter: Record<string, string | number | null | boolean>;\n            displayName: string;\n        }\n        | {\n            lapisFilter: Record<string, string | number | null | boolean>;\n            displayName: string;\n        }[]"
               },
-              "default": "{ displayName: '' }",
-              "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.",
+              "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> & { displayName: string }"
+                "text": "Record<string, string | number | null | boolean>"
               },
-              "default": "{ displayName: '' }",
-              "description": "The variant that the variants in `numerator` are compared to.",
+              "default": "{}",
+              "description": "Required.\n\nThe variant that the variants in `numerator` are compared to.",
               "attribute": "denominator"
             },
             {
@@ -1786,7 +1899,7 @@
               "kind": "field",
               "name": "headline",
               "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.",
@@ -1794,32 +1907,42 @@
             },
             {
               "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": "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": "(Record<string, string | number | null | boolean> & { displayName: string })\n        | (Record<string, string | number | null | boolean> & {\n              displayName: string;\n          })[]"
+                "text": "{\n            lapisFilter: Record<string, string | number | null | boolean>;\n            displayName: string;\n        }\n        | {\n            lapisFilter: Record<string, string | number | null | boolean>;\n            displayName: string;\n        }[]"
               },
-              "default": "{ displayName: '' }",
-              "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.",
+              "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> & { displayName: string }"
+                "text": "Record<string, string | number | null | boolean>"
               },
-              "default": "{ displayName: '' }",
-              "description": "The variant that the variants in `numerator` are compared to.",
+              "default": "{}",
+              "description": "Required.\n\nThe variant that the variants in `numerator` are compared to.",
               "fieldName": "denominator"
             },
             {
@@ -1861,20 +1984,29 @@
             {
               "name": "headline",
               "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"
             },
             {
-              "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": "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": {
@@ -1914,15 +2046,15 @@
           "type": {
             "text": "Meta<RelativeGrowthAdvantageProps>"
           },
-          "default": "{ title: 'Visualization/Relative growth advantage', component: 'gs-relative-growth-advantage', argTypes: { numerator: { control: 'object' }, denominator: { control: 'object' }, generationTime: { control: 'number' }, views: { options: ['line'], control: { type: 'check' }, }, size: [{ control: 'object' }], headline: { control: 'text' }, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
+          "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<RelativeGrowthAdvantageProps>"
+            "text": "StoryObj<Required<RelativeGrowthAdvantageProps>>"
           },
-          "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": "{ ...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": [
@@ -1950,7 +2082,7 @@
       "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.",
+          "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": [
             {
@@ -1960,7 +2092,7 @@
                 "text": "Record<string, string | number | null | boolean>"
               },
               "default": "{}",
-              "description": "The LAPIS filter for the focal variant.",
+              "description": "Required.\n\nThe LAPIS filter for the focal variant.",
               "attribute": "numerator"
             },
             {
@@ -1970,7 +2102,7 @@
                 "text": "Record<string, string | number | null | boolean>"
               },
               "default": "{}",
-              "description": "The LAPIS filter for the variant that the focal variant (`numerator`) should be compared to.",
+              "description": "Required.\n\nThe LAPIS filter for the variant that the focal variant (`numerator`) should be compared to.",
               "attribute": "denominator"
             },
             {
@@ -1997,7 +2129,7 @@
               "kind": "field",
               "name": "headline",
               "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.",
@@ -2005,13 +2137,23 @@
             },
             {
               "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": "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": [
@@ -2021,7 +2163,7 @@
                 "text": "Record<string, string | number | null | boolean>"
               },
               "default": "{}",
-              "description": "The LAPIS filter for the focal variant.",
+              "description": "Required.\n\nThe LAPIS filter for the focal variant.",
               "fieldName": "numerator"
             },
             {
@@ -2030,7 +2172,7 @@
                 "text": "Record<string, string | number | null | boolean>"
               },
               "default": "{}",
-              "description": "The LAPIS filter for the variant that the focal variant (`numerator`) should be compared to.",
+              "description": "Required.\n\nThe LAPIS filter for the variant that the focal variant (`numerator`) should be compared to.",
               "fieldName": "denominator"
             },
             {
@@ -2054,20 +2196,29 @@
             {
               "name": "headline",
               "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"
             },
             {
-              "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": "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": {