@genspectrum/dashboard-components 0.14.2 → 0.16.0

package/custom-elements.json

@@ -290,31 +290,47 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/web-components/input/gs-date-range-selector.stories.ts",
+      "path": "src/web-components/input/gs-date-range-filter.stories.ts",
       "declarations": [
         {
           "kind": "variable",
           "name": "meta",
           "type": {
-            "text": "Meta<Required<DateRangeSelectorProps>>"
+            "text": "Meta<Required<DateRangeFilterProps>>"
           },
-          "default": "{ title: 'Input/DateRangeSelector', component: 'gs-date-range-selector', parameters: withComponentDocs({ actions: { handles: ['gs-date-range-filter-changed', 'gs-date-range-option-changed', ...previewHandles], }, fetchMock: {}, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), argTypes: { value: { control: { type: 'object', }, }, lapisDateField: { control: { type: 'text' } }, dateRangeOptions: { control: { type: 'object', }, }, earliestDate: { control: { type: 'text', }, }, width: { control: { type: 'text', }, }, }, args: { dateRangeOptions: [ dateRangeOptionPresets.lastMonth, dateRangeOptionPresets.last3Months, dateRangeOptionPresets.allTimes, customDateRange, ], earliestDate: '1970-01-01', value: dateRangeOptionPresets.lastMonth.label, lapisDateField: 'aDateColumn', width: '100%', }, tags: ['autodocs'], }"
+          "default": "{ title: 'Input/DateRangeFilter', component: 'gs-date-range-filter', parameters: withComponentDocs({ actions: { handles: ['gs-date-range-filter-changed', 'gs-date-range-option-changed', ...previewHandles], }, fetchMock: {}, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), argTypes: { value: { control: { type: 'object', }, }, lapisDateField: { control: { type: 'text' } }, dateRangeOptions: { control: { type: 'object', }, }, earliestDate: { control: { type: 'text', }, }, width: { control: { type: 'text', }, }, }, args: { dateRangeOptions: [ dateRangeOptionPresets.lastMonth, dateRangeOptionPresets.last3Months, dateRangeOptionPresets.allTimes, { label: '2021', dateFrom: '2021-01-01', dateTo: '2021-12-31' }, customDateRange, ], earliestDate: '1970-01-01', value: dateRangeOptionPresets.lastMonth.label, lapisDateField: 'aDateColumn', width: '100%', }, tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
           "name": "Default",
           "type": {
-            "text": "StoryObj<Required<DateRangeSelectorProps>>"
+            "text": "StoryObj<Required<DateRangeFilterProps>>"
           },
-          "default": "{ render: (args) => html` <gs-app lapis=\"${LAPIS_URL}\"> <div class=\"max-w-screen-lg\"> <gs-date-range-selector .dateRangeOptions=${args.dateRangeOptions} .earliestDate=${args.earliestDate} .value=${args.value} .width=${args.width} .lapisDateField=${args.lapisDateField} ></gs-date-range-selector> </div> </gs-app>`, }"
+          "default": "{ render: (args) => html` <gs-app lapis=\"${LAPIS_URL}\"> <div class=\"max-w-screen-lg\"> <gs-date-range-filter .dateRangeOptions=${args.dateRangeOptions} .earliestDate=${args.earliestDate} .value=${args.value} .width=${args.width} .lapisDateField=${args.lapisDateField} ></gs-date-range-filter> </div> </gs-app>`, }"
+        },
+        {
+          "kind": "variable",
+          "name": "TestRenderAttributesInHtmlInsteadOfUsingPropertyExpression",
+          "type": {
+            "text": "StoryObj<Required<DateRangeFilterProps>>"
+          },
+          "default": "{ render: (args) => html` <gs-app lapis=\"${LAPIS_URL}\"> <div class=\"max-w-screen-lg\"> <gs-date-range-filter .dateRangeOptions=${args.dateRangeOptions} earliestDate=\"${args.earliestDate}\" value=\"${args.value}\" width=\"${args.width}\" lapisDateField=\"${args.lapisDateField}\" ></gs-date-range-filter> </div> </gs-app>`, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-date-range-filter'); await waitFor(async () => { await expect(selectField(canvas)).toHaveValue('Last month'); }); }, argTypes: { value: { control: { type: 'text', }, }, }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "TestSettingANumericValueIsTreatedAsString",
+          "type": {
+            "text": "StoryObj<Required<DateRangeFilterProps>>"
+          },
+          "default": "{ ...TestRenderAttributesInHtmlInsteadOfUsingPropertyExpression, args: { ...TestRenderAttributesInHtmlInsteadOfUsingPropertyExpression.args, value: '2021', }, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-date-range-filter'); await waitFor(async () => { await expect(selectField(canvas)).toHaveValue('2021'); }); }, }"
         },
         {
           "kind": "variable",
           "name": "FiresEvents",
           "type": {
-            "text": "StoryObj<Required<DateRangeSelectorProps>>"
+            "text": "StoryObj<Required<DateRangeFilterProps>>"
           },
-          "default": "{ ...Default, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-date-range-selector'); const filterChangedListenerMock = fn(); const optionChangedListenerMock = fn(); await step('Setup event listener mock', () => { canvasElement.addEventListener('gs-date-range-filter-changed', filterChangedListenerMock); canvasElement.addEventListener('gs-date-range-option-changed', optionChangedListenerMock); }); await step('Expect last 6 months to be selected', async () => { await expect(selectField(canvas)).toHaveValue('Last month'); await waitFor(async () => { await expect(dateToPicker(canvas)).toHaveValue(toYYYYMMDD(new Date())); }); }); await step('Expect event to be fired when selecting a different value', async () => { await userEvent.selectOptions(selectField(canvas), 'CustomDateRange'); await expect(dateToPicker(canvas)).toHaveValue(customDateRange.dateTo); await expect(filterChangedListenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { aDateColumnFrom: customDateRange.dateFrom, aDateColumnTo: customDateRange.dateTo, }, }), ); await expect(optionChangedListenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: customDateRange.label, }), ); }); }, }"
+          "default": "{ ...Default, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-date-range-filter'); const filterChangedListenerMock = fn(); const optionChangedListenerMock = fn(); await step('Setup event listener mock', () => { canvasElement.addEventListener('gs-date-range-filter-changed', filterChangedListenerMock); canvasElement.addEventListener('gs-date-range-option-changed', optionChangedListenerMock); }); await step('Expect last 6 months to be selected', async () => { await expect(selectField(canvas)).toHaveValue('Last month'); await waitFor(async () => { await expect(dateToPicker(canvas)).toHaveValue(toYYYYMMDD(new Date())); }); }); await step('Expect event to be fired when selecting a different value', async () => { await userEvent.selectOptions(selectField(canvas), 'CustomDateRange'); await expect(dateToPicker(canvas)).toHaveValue(customDateRange.dateTo); await expect(filterChangedListenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { aDateColumnFrom: customDateRange.dateFrom, aDateColumnTo: customDateRange.dateTo, }, }), ); await expect(optionChangedListenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: customDateRange.label, }), ); }); }, }"
         }
       ],
       "exports": [
@@ -323,7 +339,7 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/web-components/input/gs-date-range-selector.stories.ts"
+            "module": "src/web-components/input/gs-date-range-filter.stories.ts"
           }
         },
         {
@@ -331,7 +347,23 @@
           "name": "Default",
           "declaration": {
             "name": "Default",
-            "module": "src/web-components/input/gs-date-range-selector.stories.ts"
+            "module": "src/web-components/input/gs-date-range-filter.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "TestRenderAttributesInHtmlInsteadOfUsingPropertyExpression",
+          "declaration": {
+            "name": "TestRenderAttributesInHtmlInsteadOfUsingPropertyExpression",
+            "module": "src/web-components/input/gs-date-range-filter.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "TestSettingANumericValueIsTreatedAsString",
+          "declaration": {
+            "name": "TestSettingANumericValueIsTreatedAsString",
+            "module": "src/web-components/input/gs-date-range-filter.stories.ts"
           }
         },
         {
@@ -339,19 +371,19 @@
           "name": "FiresEvents",
           "declaration": {
             "name": "FiresEvents",
-            "module": "src/web-components/input/gs-date-range-selector.stories.ts"
+            "module": "src/web-components/input/gs-date-range-filter.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/web-components/input/gs-date-range-selector.tsx",
+      "path": "src/web-components/input/gs-date-range-filter.tsx",
       "declarations": [
         {
           "kind": "class",
           "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",
+          "name": "DateRangeFilterComponent",
           "members": [
             {
               "kind": "field",
@@ -471,25 +503,25 @@
             "name": "PreactLitAdapter",
             "module": "/src/web-components/PreactLitAdapter"
           },
-          "tagName": "gs-date-range-selector",
+          "tagName": "gs-date-range-filter",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "DateRangeSelectorComponent",
+          "name": "DateRangeFilterComponent",
           "declaration": {
-            "name": "DateRangeSelectorComponent",
-            "module": "src/web-components/input/gs-date-range-selector.tsx"
+            "name": "DateRangeFilterComponent",
+            "module": "src/web-components/input/gs-date-range-filter.tsx"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "gs-date-range-selector",
+          "name": "gs-date-range-filter",
           "declaration": {
-            "name": "DateRangeSelectorComponent",
-            "module": "src/web-components/input/gs-date-range-selector.tsx"
+            "name": "DateRangeFilterComponent",
+            "module": "src/web-components/input/gs-date-range-filter.tsx"
           }
         }
       ]
@@ -1116,31 +1148,31 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/web-components/input/gs-text-input.stories.ts",
+      "path": "src/web-components/input/gs-text-filter.stories.ts",
       "declarations": [
         {
           "kind": "variable",
           "name": "meta",
           "type": {
-            "text": "Meta<Required<TextInputProps>>"
+            "text": "Meta<Required<TextFilterProps>>"
           },
-          "default": "{ title: 'Input/Text input', component: 'gs-text-input', parameters: withComponentDocs({ actions: { handles: ['gs-text-input-changed', ...previewHandles], }, fetchMock: { mocks: [ { matcher: { name: 'hosts', url: AGGREGATED_ENDPOINT, body: { fields: ['host'], country: 'Germany', }, }, response: { status: 200, body: data, }, }, ], }, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), argTypes: { lapisField: { control: { type: 'text', }, }, placeholderText: { control: { type: 'text', }, }, value: { control: { type: 'text', }, }, width: { control: { type: 'text', }, }, lapisFilter: { control: { type: 'object', }, }, }, tags: ['autodocs'], }"
+          "default": "{ title: 'Input/Text filter', component: 'gs-text-filter', parameters: withComponentDocs({ actions: { handles: ['gs-text-filter-changed', ...previewHandles], }, fetchMock: { mocks: [ { matcher: { name: 'hosts', url: AGGREGATED_ENDPOINT, body: { fields: ['host'], country: 'Germany', }, }, response: { status: 200, body: data, }, }, ], }, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), argTypes: { lapisField: { control: { type: 'text', }, }, placeholderText: { control: { type: 'text', }, }, value: { control: { type: 'text', }, }, width: { control: { type: 'text', }, }, lapisFilter: { control: { type: 'object', }, }, }, tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
           "name": "Default",
           "type": {
-            "text": "StoryObj<Required<TextInputProps>>"
+            "text": "StoryObj<Required<TextFilterProps>>"
           },
-          "default": "{ render: (args) => { return html` <gs-app lapis=\"${LAPIS_URL}\"> <div class=\"max-w-screen-lg\"> <gs-text-input .lapisField=${args.lapisField} .lapisFilter=${args.lapisFilter} .placeholderText=${args.placeholderText} .value=${args.value} .width=${args.width} ></gs-text-input> </div> </gs-app>`; }, args: { lapisField: 'host', lapisFilter: { country: 'Germany' }, placeholderText: 'Enter host name', value: 'Homo sapiens', width: '100%', }, }"
+          "default": "{ render: (args) => { return html` <gs-app lapis=\"${LAPIS_URL}\"> <div class=\"max-w-screen-lg\"> <gs-text-filter .lapisField=${args.lapisField} .lapisFilter=${args.lapisFilter} .placeholderText=${args.placeholderText} .value=${args.value} .width=${args.width} ></gs-text-filter> </div> </gs-app>`; }, args: { lapisField: 'host', lapisFilter: { country: 'Germany' }, placeholderText: 'Enter host name', value: 'Homo sapiens', width: '100%', }, }"
         },
         {
           "kind": "variable",
           "name": "FiresEvents",
           "type": {
-            "text": "StoryObj<Required<TextInputProps>>"
+            "text": "StoryObj<Required<TextFilterProps>>"
           },
-          "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', () => { 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 step('Empty input', async () => { await userEvent.type(inputField(), '{backspace>9/}'); }); await step('Enter a valid host name', async () => { await userEvent.type(inputField(), 'Homo s'); const dropdownOption = await canvas.findByText('Homo sapiens'); await userEvent.click(dropdownOption); }); await step('Verify event is fired with correct detail', async () => { await waitFor(async () => { await expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { host: 'Homo sapiens', }, }), ); }); }); await step('Remove initial value', async () => { await fireEvent.click(canvas.getByRole('button', { name: 'clear selection' })); await expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { host: undefined, }, }), ); }); await step('Empty input', async () => { inputField().blur(); await expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({ host: undefined, }); }); }, args: { ...Default.args, value: '', }, }"
+          "default": "{ ...Default, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-text-filter'); const inputField = () => canvas.getByPlaceholderText('Enter host name'); const listenerMock = fn(); await step('Setup event listener mock', () => { canvasElement.addEventListener('gs-text-filter-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 step('Empty input', async () => { await userEvent.type(inputField(), '{backspace>9/}'); }); await step('Enter a valid host name', async () => { await userEvent.type(inputField(), 'Homo s'); const dropdownOption = await canvas.findByText('Homo sapiens'); await userEvent.click(dropdownOption); }); await step('Verify event is fired with correct detail', async () => { await waitFor(async () => { await expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { host: 'Homo sapiens', }, }), ); }); }); await step('Remove initial value', async () => { await fireEvent.click(canvas.getByRole('button', { name: 'clear selection' })); await expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { host: undefined, }, }), ); }); await step('Empty input', async () => { inputField().blur(); await expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({ host: undefined, }); }); }, args: { ...Default.args, value: '', }, }"
         }
       ],
       "exports": [
@@ -1149,7 +1181,7 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/web-components/input/gs-text-input.stories.ts"
+            "module": "src/web-components/input/gs-text-filter.stories.ts"
           }
         },
         {
@@ -1157,7 +1189,7 @@
           "name": "Default",
           "declaration": {
             "name": "Default",
-            "module": "src/web-components/input/gs-text-input.stories.ts"
+            "module": "src/web-components/input/gs-text-filter.stories.ts"
           }
         },
         {
@@ -1165,19 +1197,19 @@
           "name": "FiresEvents",
           "declaration": {
             "name": "FiresEvents",
-            "module": "src/web-components/input/gs-text-input.stories.ts"
+            "module": "src/web-components/input/gs-text-filter.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/web-components/input/gs-text-input.tsx",
+      "path": "src/web-components/input/gs-text-filter.tsx",
       "declarations": [
         {
           "kind": "class",
           "description": "\n## Context\n\nThis component provides a text input field to specify filters for arbitrary fields of this LAPIS instance.",
-          "name": "TextInputComponent",
+          "name": "TextFilterComponent",
           "members": [
             {
               "kind": "field",
@@ -1186,7 +1218,7 @@
                 "text": "string | undefined"
               },
               "default": "undefined",
-              "description": "The initial value to use for this text input.",
+              "description": "The initial value to use for this text filter.",
               "attribute": "value"
             },
             {
@@ -1196,7 +1228,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "Required.\n\nThe LAPIS field name to use for this text input.\nThe field must exist on this LAPIS instance.",
+              "description": "Required.\n\nThe LAPIS field name to use for this text filter.\nThe field must exist on this LAPIS instance.",
               "attribute": "lapisField"
             },
             {
@@ -1236,7 +1268,7 @@
                 "text": "CustomEvent<Record<string, string | undefined>>"
               },
               "description": "Fired when the input field is changed. The `details` of this event contain an object with the `lapisField` as key and the input value as value. Example: ``` { \"host\": \"Homo sapiens\" } ```",
-              "name": "gs-text-input-changed"
+              "name": "gs-text-filter-changed"
             }
           ],
           "attributes": [
@@ -1246,7 +1278,7 @@
                 "text": "string | undefined"
               },
               "default": "undefined",
-              "description": "The initial value to use for this text input.",
+              "description": "The initial value to use for this text filter.",
               "fieldName": "value"
             },
             {
@@ -1255,7 +1287,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "Required.\n\nThe LAPIS field name to use for this text input.\nThe field must exist on this LAPIS instance.",
+              "description": "Required.\n\nThe LAPIS field name to use for this text filter.\nThe field must exist on this LAPIS instance.",
               "fieldName": "lapisField"
             },
             {
@@ -1290,25 +1322,25 @@
             "name": "PreactLitAdapter",
             "module": "/src/web-components/PreactLitAdapter"
           },
-          "tagName": "gs-text-input",
+          "tagName": "gs-text-filter",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "TextInputComponent",
+          "name": "TextFilterComponent",
           "declaration": {
-            "name": "TextInputComponent",
-            "module": "src/web-components/input/gs-text-input.tsx"
+            "name": "TextFilterComponent",
+            "module": "src/web-components/input/gs-text-filter.tsx"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "gs-text-input",
+          "name": "gs-text-filter",
           "declaration": {
-            "name": "TextInputComponent",
-            "module": "src/web-components/input/gs-text-input.tsx"
+            "name": "TextFilterComponent",
+            "module": "src/web-components/input/gs-text-filter.tsx"
           }
         }
       ]
@@ -1320,10 +1352,10 @@
       "exports": [
         {
           "kind": "js",
-          "name": "DateRangeSelectorComponent",
+          "name": "DateRangeFilterComponent",
           "declaration": {
-            "name": "DateRangeSelectorComponent",
-            "module": "./gs-date-range-selector"
+            "name": "DateRangeFilterComponent",
+            "module": "./gs-date-range-filter"
           }
         },
         {
@@ -1336,10 +1368,10 @@
         },
         {
           "kind": "js",
-          "name": "TextInputComponent",
+          "name": "TextFilterComponent",
           "declaration": {
-            "name": "TextInputComponent",
-            "module": "./gs-text-input"
+            "name": "TextFilterComponent",
+            "module": "./gs-text-filter"
           }
         },
         {
@@ -1432,11 +1464,19 @@
         },
         {
           "kind": "variable",
-          "name": "Table",
+          "name": "Default",
           "type": {
             "text": "StoryObj<Required<AggregateProps>>"
           },
-          "default": "{ render: (args) => html` <gs-app lapis=\"${LAPIS_URL}\"> <gs-aggregate .fields=${args.fields} .lapisFilter=${args.lapisFilter} .views=${args.views} .width=${args.width} .height=${args.height} .initialSortField=${args.initialSortField} .initialSortDirection=${args.initialSortDirection} .pageSize=${args.pageSize} .maxNumberOfBars=${args.maxNumberOfBars} ></gs-aggregate> </gs-app> `, parameters: { fetchMock: { mocks: [ { matcher: { name: 'aggregatedData', url: AGGREGATED_ENDPOINT, body: { fields: ['division', 'host'], country: 'USA', }, }, response: { status: 200, body: aggregatedData, }, }, ], }, }, args: { fields: ['division', 'host'], views: ['table', 'bar'], lapisFilter: { country: 'USA', }, width: '100%', height: '700px', initialSortField: 'count', initialSortDirection: 'descending', pageSize: 10, maxNumberOfBars: 10, }, }"
+          "default": "{ render: (args) => html` <gs-app lapis=\"${LAPIS_URL}\"> <gs-aggregate .fields=${args.fields} .lapisFilter=${args.lapisFilter} .views=${args.views} .width=${args.width} .height=${args.height} .initialSortField=${args.initialSortField} .initialSortDirection=${args.initialSortDirection} .pageSize=${args.pageSize} .maxNumberOfBars=${args.maxNumberOfBars} ></gs-aggregate> </gs-app> `, parameters: { fetchMock: { mocks: [ { matcher: { name: 'aggregatedData', url: AGGREGATED_ENDPOINT, body: { fields: ['division', 'host'], country: 'USA', }, }, response: { status: 200, body: aggregatedData, }, }, ], }, }, args: { fields: ['division', 'host'], views: ['table', 'bar'], lapisFilter: { country: 'USA', }, width: '100%', initialSortField: 'count', initialSortDirection: 'descending', pageSize: 10, maxNumberOfBars: 10, }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "WithFixedHeight",
+          "type": {
+            "text": "StoryObj<Required<AggregateProps>>"
+          },
+          "default": "{ ...Default, args: { ...Default.args, height: '700px', }, }"
         },
         {
           "kind": "variable",
@@ -1444,7 +1484,7 @@
           "type": {
             "text": "StoryObj<Required<AggregateProps>>"
           },
-          "default": "{ ...Table, args: { ...Table.args, fields: ['division'], views: ['bar', 'table'], }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'aggregatedData', url: AGGREGATED_ENDPOINT, body: { fields: ['division'], country: 'USA', }, }, response: { status: 200, body: aggregatedDataWith1Field, }, }, ], }, }, }"
+          "default": "{ ...Default, args: { ...Default.args, fields: ['division'], views: ['bar', 'table'], }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'aggregatedData', url: AGGREGATED_ENDPOINT, body: { fields: ['division'], country: 'USA', }, }, response: { status: 200, body: aggregatedDataWith1Field, }, }, ], }, }, }"
         },
         {
           "kind": "variable",
@@ -1452,7 +1492,7 @@
           "type": {
             "text": "StoryObj<Required<AggregateProps>>"
           },
-          "default": "{ ...Table, args: { ...Table.args, fields: ['division', 'nextstrainClade'], lapisFilter: { country: 'Germany', dateTo: '2022-02-01', }, views: ['bar', 'table'], }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'aggregatedData', url: AGGREGATED_ENDPOINT, body: { fields: ['division', 'nextstrainClade'], country: 'Germany', dateTo: '2022-02-01', }, }, response: { status: 200, body: aggregatedDataWith2Fields, }, }, ], }, }, }"
+          "default": "{ ...Default, args: { ...Default.args, fields: ['division', 'nextstrainClade'], lapisFilter: { country: 'Germany', dateTo: '2022-02-01', }, views: ['bar', 'table'], }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'aggregatedData', url: AGGREGATED_ENDPOINT, body: { fields: ['division', 'nextstrainClade'], country: 'Germany', dateTo: '2022-02-01', }, }, response: { status: 200, body: aggregatedDataWith2Fields, }, }, ], }, }, }"
         }
       ],
       "exports": [
@@ -1466,9 +1506,17 @@
         },
         {
           "kind": "js",
-          "name": "Table",
+          "name": "Default",
+          "declaration": {
+            "name": "Default",
+            "module": "src/web-components/visualization/gs-aggregate.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "WithFixedHeight",
           "declaration": {
-            "name": "Table",
+            "name": "WithFixedHeight",
             "module": "src/web-components/visualization/gs-aggregate.stories.ts"
           }
         },
@@ -1543,9 +1591,9 @@
               "kind": "field",
               "name": "height",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'700px'",
+              "default": "undefined",
               "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "attribute": "height"
             },
@@ -1630,9 +1678,9 @@
             {
               "name": "height",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'700px'",
+              "default": "undefined",
               "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "fieldName": "height"
             },
@@ -1718,7 +1766,7 @@
           "type": {
             "text": "StoryObj<Required<MutationComparisonProps>>"
           },
-          "default": "{ ...Template, args: { lapisFilters: [ { displayName: 'Some dataset', lapisFilter: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo }, }, { displayName: 'Other dataset', lapisFilter: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateFrom, dateTo, }, }, ], sequenceType: 'nucleotide', views: ['table', 'venn'], width: '100%', height: '700px', pageSize: 10, }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'nucleotideMutationsSomeDataset', url: NUCLEOTIDE_MUTATIONS_ENDPOINT, body: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo, minProportion: 0, }, }, response: { status: 200, body: nucleotideMutationsSomeDataset, }, }, { matcher: { name: 'nucleotideMutationsOtherDataset', url: NUCLEOTIDE_MUTATIONS_ENDPOINT, body: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateFrom, dateTo, minProportion: 0, }, }, response: { status: 200, body: nucleotideMutationsOtherDataset, }, }, ], }, }, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-comparison'); await step('Min and max proportions should be 50% and 100%', async () => { const minInput = () => canvas.getAllByLabelText('%')[0]; const maxInput = () => canvas.getAllByLabelText('%')[1]; await waitFor(() => expect(minInput()).toHaveValue(50)); await waitFor(() => expect(maxInput()).toHaveValue(100)); }); }, }"
+          "default": "{ ...Template, args: { lapisFilters: [ { displayName: 'Some dataset', lapisFilter: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo }, }, { displayName: 'Other dataset', lapisFilter: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateFrom, dateTo, }, }, ], sequenceType: 'nucleotide', views: ['table', 'venn'], width: '100%', pageSize: 10, }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'nucleotideMutationsSomeDataset', url: NUCLEOTIDE_MUTATIONS_ENDPOINT, body: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo, minProportion: 0, }, }, response: { status: 200, body: nucleotideMutationsSomeDataset, }, }, { matcher: { name: 'nucleotideMutationsOtherDataset', url: NUCLEOTIDE_MUTATIONS_ENDPOINT, body: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateFrom, dateTo, minProportion: 0, }, }, response: { status: 200, body: nucleotideMutationsOtherDataset, }, }, ], }, }, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-comparison'); await step('Min and max proportions should be 50% and 100%', async () => { const minInput = () => canvas.getAllByLabelText('%')[0]; const maxInput = () => canvas.getAllByLabelText('%')[1]; await waitFor(() => expect(minInput()).toHaveValue(50)); await waitFor(() => expect(maxInput()).toHaveValue(100)); }); }, }"
         },
         {
           "kind": "variable",
@@ -1727,6 +1775,14 @@
             "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(), ); }); }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "WithFixedHeight",
+          "type": {
+            "text": "StoryObj<Required<MutationComparisonProps>>"
+          },
+          "default": "{ ...Default, args: { ...Default.args, height: '700px', }, }"
         }
       ],
       "exports": [
@@ -1753,6 +1809,14 @@
             "name": "VennDiagram",
             "module": "src/web-components/visualization/gs-mutation-comparison.stories.ts"
           }
+        },
+        {
+          "kind": "js",
+          "name": "WithFixedHeight",
+          "declaration": {
+            "name": "WithFixedHeight",
+            "module": "src/web-components/visualization/gs-mutation-comparison.stories.ts"
+          }
         }
       ]
     },
@@ -1809,9 +1873,9 @@
               "kind": "field",
               "name": "height",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'700px'",
+              "default": "undefined",
               "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "attribute": "height"
             },
@@ -1866,9 +1930,9 @@
             {
               "name": "height",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'700px'",
+              "default": "undefined",
               "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "fieldName": "height"
             },
@@ -1919,7 +1983,7 @@
           "type": {
             "text": "Meta<Required<MutationsOverTimeProps>>"
           },
-          "default": "{ title: 'Visualization/Mutations over time', component: 'gs-mutations-over-time', argTypes: { lapisFilter: { control: 'object' }, sequenceType: { options: ['nucleotide', 'amino acid'], control: { type: 'radio' }, }, views: { options: ['grid'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, granularity: { options: ['day', 'week', 'month', 'year'], control: { type: 'radio' }, }, lapisDateField: { control: 'text' }, }, args: { lapisFilter: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-07-10' }, sequenceType: 'nucleotide', views: ['grid'], width: '100%', height: '700px', granularity: 'month', lapisDateField: 'date', }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, fetchMock: {}, }), tags: ['autodocs'], }"
+          "default": "{ title: 'Visualization/Mutations over time', component: 'gs-mutations-over-time', argTypes: { lapisFilter: { control: 'object' }, sequenceType: { options: ['nucleotide', 'amino acid'], control: { type: 'radio' }, }, views: { options: ['grid'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, granularity: { options: ['day', 'week', 'month', 'year'], control: { type: 'radio' }, }, lapisDateField: { control: 'text' }, }, args: { lapisFilter: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-07-10' }, sequenceType: 'nucleotide', views: ['grid'], width: '100%', granularity: 'month', lapisDateField: 'date', }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, fetchMock: {}, }), tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
@@ -1952,6 +2016,14 @@
             "text": "StoryObj<Required<MutationsOverTimeProps>>"
           },
           "default": "{ ...ByMonth, args: { ...ByMonth.args, width: '300px', }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "WithFixedHeight",
+          "type": {
+            "text": "StoryObj<Required<MutationsOverTimeProps>>"
+          },
+          "default": "{ ...Template, args: { ...Template, height: '700px', }, }"
         }
       ],
       "exports": [
@@ -1994,6 +2066,14 @@
             "name": "HideProportionOnSmallScreen",
             "module": "src/web-components/visualization/gs-mutations-over-time.stories.ts"
           }
+        },
+        {
+          "kind": "js",
+          "name": "WithFixedHeight",
+          "declaration": {
+            "name": "WithFixedHeight",
+            "module": "src/web-components/visualization/gs-mutations-over-time.stories.ts"
+          }
         }
       ]
     },
@@ -2050,9 +2130,9 @@
               "kind": "field",
               "name": "height",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'700px'",
+              "default": "undefined",
               "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "attribute": "height"
             },
@@ -2117,9 +2197,9 @@
             {
               "name": "height",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'700px'",
+              "default": "undefined",
               "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "fieldName": "height"
             },
@@ -2179,7 +2259,7 @@
           "type": {
             "text": "Meta<Required<MutationsProps>>"
           },
-          "default": "{ title: 'Visualization/Mutations', component: 'gs-mutations', argTypes: { lapisFilter: { control: 'object' }, baselineLapisFilter: { control: 'object' }, sequenceType: { options: ['nucleotide', 'amino acid'], control: { type: 'radio' }, }, views: { options: ['table', 'grid', 'insertions'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, pageSize: { control: 'object' }, }, args: { lapisFilter: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo: '2022-01-01' }, baselineLapisFilter: { country: 'Switzerland', dateTo: '2022-01-01' }, sequenceType: 'nucleotide', views: ['grid', 'table', 'insertions'], width: '100%', height: '700px', pageSize: 10, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
+          "default": "{ title: 'Visualization/Mutations', component: 'gs-mutations', argTypes: { lapisFilter: { control: 'object' }, baselineLapisFilter: { control: 'object' }, sequenceType: { options: ['nucleotide', 'amino acid'], control: { type: 'radio' }, }, views: { options: ['table', 'grid', 'insertions'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, pageSize: { control: 'object' }, }, args: { lapisFilter: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo: '2022-01-01' }, baselineLapisFilter: { country: 'Switzerland', dateTo: '2022-01-01' }, sequenceType: 'nucleotide', views: ['grid', 'table', 'insertions'], width: '100%', pageSize: 10, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
@@ -2212,6 +2292,14 @@
             "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' })); }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "WithFixedHeight",
+          "type": {
+            "text": "StoryObj<Required<MutationsProps>>"
+          },
+          "default": "{ ...Default, args: { ...Default.args, height: '700px', }, }"
         }
       ],
       "exports": [
@@ -2254,6 +2342,14 @@
             "name": "OnInsertionsTab",
             "module": "src/web-components/visualization/gs-mutations.stories.ts"
           }
+        },
+        {
+          "kind": "js",
+          "name": "WithFixedHeight",
+          "declaration": {
+            "name": "WithFixedHeight",
+            "module": "src/web-components/visualization/gs-mutations.stories.ts"
+          }
         }
       ]
     },
@@ -2320,9 +2416,9 @@
               "kind": "field",
               "name": "height",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'700px'",
+              "default": "undefined",
               "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "attribute": "height"
             },
@@ -2386,9 +2482,9 @@
             {
               "name": "height",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'700px'",
+              "default": "undefined",
               "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "fieldName": "height"
             },
@@ -2439,7 +2535,7 @@
           "type": {
             "text": "Meta<NumberSequencesOverTimeProps>"
           },
-          "default": "{ title: 'Visualization/Number sequences over time', component: 'gs-number-sequences-over-time', argTypes: { granularity: { options: ['day', 'week', 'month', 'year'], control: { type: 'radio' }, }, views: { options: ['bar', 'line', 'table'], control: { type: 'check' }, }, pageSize: { control: 'object' }, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
+          "default": "{ title: 'Visualization/Number sequences over time', component: 'gs-number-sequences-over-time', argTypes: { granularity: { options: ['day', 'week', 'month', 'year'], control: { type: 'radio' }, }, views: { options: ['bar', 'line', 'table'], control: { type: 'check' }, }, pageSize: { control: 'object' }, height: { control: 'text', }, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
@@ -2480,6 +2576,14 @@
             "text": "StoryObj<NumberSequencesOverTimeProps>"
           },
           "default": "{ ...Template, args: { ...Template.args, lapisFilters: [ { displayName: 'XBB', lapisFilter: { country: 'USA', pangoLineage: 'XBB*', dateFrom: '2022-01-01', dateTo: '2022-12-31' }, }, { displayName: 'JN.1', lapisFilter: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01' } }, ], }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'aggregatedEG', url: AGGREGATED_ENDPOINT, body: { country: 'USA', pangoLineage: 'XBB*', dateFrom: '2022-01-01', dateTo: '2022-12-31', fields: ['date'], }, }, response: { status: 200, body: twoVariantsXBB, }, }, { matcher: { name: 'aggregatedJN.1', url: AGGREGATED_ENDPOINT, body: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01', fields: ['date'], }, }, response: { status: 200, body: twoVariantsJN1, }, }, ], }, }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "WithFixedHeight",
+          "type": {
+            "text": "StoryObj<NumberSequencesOverTimeProps>"
+          },
+          "default": "{ ...Template, args: { ...Template.args, height: '700px', }, }"
         }
       ],
       "exports": [
@@ -2530,6 +2634,14 @@
             "name": "TwoDatasetsWithNonOverlappingDates",
             "module": "src/web-components/visualization/gs-number-sequences-over-time.stories.ts"
           }
+        },
+        {
+          "kind": "js",
+          "name": "WithFixedHeight",
+          "declaration": {
+            "name": "WithFixedHeight",
+            "module": "src/web-components/visualization/gs-number-sequences-over-time.stories.ts"
+          }
         }
       ]
     },
@@ -2586,9 +2698,9 @@
               "kind": "field",
               "name": "height",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'700px'",
+              "default": "undefined",
               "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "attribute": "height"
             },
@@ -2663,9 +2775,9 @@
             {
               "name": "height",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'700px'",
+              "default": "undefined",
               "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "fieldName": "height"
             },
@@ -2742,7 +2854,7 @@
           "type": {
             "text": "StoryObj<Required<PrevalenceOverTimeProps>>"
           },
-          "default": "{ ...Template, args: { numeratorFilters: [ { displayName: 'EG', lapisFilter: { country: 'USA', pangoLineage: 'EG*', dateFrom: '2023-01-01' } }, { displayName: 'JN.1', lapisFilter: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01' } }, ], denominatorFilter: { country: 'USA', dateFrom: '2023-01-01' }, granularity: 'month', smoothingWindow: 0, views: ['bar', 'line', 'bubble', 'table'], confidenceIntervalMethods: ['wilson'], width: '100%', height: '700px', lapisDateField: 'date', pageSize: 10, yAxisMaxLinear: 1, yAxisMaxLogarithmic: 'limitTo1', }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'numeratorEG', url: AGGREGATED_ENDPOINT, body: { country: 'USA', pangoLineage: 'EG*', dateFrom: '2023-01-01', fields: ['date'], }, }, response: { status: 200, body: numeratorFilterEG, }, }, { matcher: { name: 'numeratorJN1', url: AGGREGATED_ENDPOINT, body: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01', fields: ['date'], }, }, response: { status: 200, body: numeratorFilterJN1, }, }, { matcher: { name: 'denominator', url: AGGREGATED_ENDPOINT, body: { country: 'USA', dateFrom: '2023-01-01', fields: ['date'], }, }, response: { status: 200, body: denominatorFilter, }, }, ], }, }, }"
+          "default": "{ ...Template, args: { numeratorFilters: [ { displayName: 'EG', lapisFilter: { country: 'USA', pangoLineage: 'EG*', dateFrom: '2023-01-01' } }, { displayName: 'JN.1', lapisFilter: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01' } }, ], denominatorFilter: { country: 'USA', dateFrom: '2023-01-01' }, granularity: 'month', smoothingWindow: 0, views: ['bar', 'line', 'bubble', 'table'], confidenceIntervalMethods: ['wilson'], width: '100%', lapisDateField: 'date', pageSize: 10, yAxisMaxLinear: 1, yAxisMaxLogarithmic: 'limitTo1', }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'numeratorEG', url: AGGREGATED_ENDPOINT, body: { country: 'USA', pangoLineage: 'EG*', dateFrom: '2023-01-01', fields: ['date'], }, }, response: { status: 200, body: numeratorFilterEG, }, }, { matcher: { name: 'numeratorJN1', url: AGGREGATED_ENDPOINT, body: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01', fields: ['date'], }, }, response: { status: 200, body: numeratorFilterJN1, }, }, { matcher: { name: 'denominator', url: AGGREGATED_ENDPOINT, body: { country: 'USA', dateFrom: '2023-01-01', fields: ['date'], }, }, response: { status: 200, body: denominatorFilter, }, }, ], }, }, }"
         },
         {
           "kind": "variable",
@@ -2750,7 +2862,7 @@
           "type": {
             "text": "StoryObj<Required<PrevalenceOverTimeProps>>"
           },
-          "default": "{ ...Template, args: { numeratorFilters: [ { displayName: 'EG', lapisFilter: { country: 'USA', pangoLineage: 'BA.2.86*', dateFrom: '2023-10-01' }, }, ], denominatorFilter: { country: 'USA', dateFrom: '2023-10-01' }, granularity: 'week', smoothingWindow: 2, views: ['bar', 'line', 'bubble', 'table'], confidenceIntervalMethods: ['wilson'], width: '100%', height: '700px', lapisDateField: 'date', pageSize: 10, yAxisMaxLinear: 1, yAxisMaxLogarithmic: 'limitTo1', }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'numeratorOneDataset', url: AGGREGATED_ENDPOINT, body: { country: 'USA', pangoLineage: 'BA.2.86*', dateFrom: '2023-10-01', fields: ['date'], }, }, response: { status: 200, body: numeratorFilterOneDataset, }, }, { matcher: { name: 'denominatorOneDataset', url: AGGREGATED_ENDPOINT, body: { country: 'USA', dateFrom: '2023-10-01', fields: ['date'], }, }, response: { status: 200, body: denominatorFilterOneDataset, }, }, ], }, }, }"
+          "default": "{ ...Template, args: { numeratorFilters: [ { displayName: 'EG', lapisFilter: { country: 'USA', pangoLineage: 'BA.2.86*', dateFrom: '2023-10-01' }, }, ], denominatorFilter: { country: 'USA', dateFrom: '2023-10-01' }, granularity: 'week', smoothingWindow: 2, views: ['bar', 'line', 'bubble', 'table'], confidenceIntervalMethods: ['wilson'], width: '100%', lapisDateField: 'date', pageSize: 10, yAxisMaxLinear: 1, yAxisMaxLogarithmic: 'limitTo1', }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'numeratorOneDataset', url: AGGREGATED_ENDPOINT, body: { country: 'USA', pangoLineage: 'BA.2.86*', dateFrom: '2023-10-01', fields: ['date'], }, }, response: { status: 200, body: numeratorFilterOneDataset, }, }, { matcher: { name: 'denominatorOneDataset', url: AGGREGATED_ENDPOINT, body: { country: 'USA', dateFrom: '2023-10-01', fields: ['date'], }, }, response: { status: 200, body: denominatorFilterOneDataset, }, }, ], }, }, }"
         },
         {
           "kind": "variable",
@@ -2775,6 +2887,14 @@
             "text": "StoryObj<Required<PrevalenceOverTimeProps>>"
           },
           "default": "{ ...OneDataset, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-prevalence-over-time'); await waitFor(() => expect(canvas.getByRole('button', { name: 'Table' })).toBeInTheDocument()); await fireEvent.click(canvas.getByRole('button', { name: 'Table' })); }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "WithFixedHeight",
+          "type": {
+            "text": "StoryObj<Required<PrevalenceOverTimeProps>>"
+          },
+          "default": "{ ...TwoDatasets, args: { ...TwoDatasets.args, height: '700px', }, }"
         }
       ],
       "exports": [
@@ -2825,6 +2945,14 @@
             "name": "OneDatasetOnTableTab",
             "module": "src/web-components/visualization/gs-prevalence-over-time.stories.ts"
           }
+        },
+        {
+          "kind": "js",
+          "name": "WithFixedHeight",
+          "declaration": {
+            "name": "WithFixedHeight",
+            "module": "src/web-components/visualization/gs-prevalence-over-time.stories.ts"
+          }
         }
       ]
     },
@@ -2911,9 +3039,9 @@
               "kind": "field",
               "name": "height",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'700px'",
+              "default": "undefined",
               "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "attribute": "height"
             },
@@ -3025,9 +3153,9 @@
             {
               "name": "height",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'700px'",
+              "default": "undefined",
               "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "fieldName": "height"
             },
@@ -3113,7 +3241,15 @@
           "type": {
             "text": "StoryObj<Required<RelativeGrowthAdvantageProps>>"
           },
-          "default": "{ ...Template, args: { numeratorFilter: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateFrom: '2020-12-01', dateTo: '2021-03-01', }, denominatorFilter: { country: 'Switzerland', dateFrom: '2020-12-01', dateTo: '2021-03-01' }, generationTime: 7, views: ['line'], width: '100%', height: '700px', lapisDateField: 'date', yAxisMaxLinear: 1, yAxisMaxLogarithmic: 'limitTo1', }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'numeratorFilter', url: AGGREGATED_ENDPOINT, body: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateFrom: '2020-12-01', dateTo: '2021-03-01', fields: ['date'], }, }, response: { status: 200, body: numeratorFilter, }, }, { matcher: { name: 'denominatorFilter', url: AGGREGATED_ENDPOINT, body: { country: 'Switzerland', dateFrom: '2020-12-01', dateTo: '2021-03-01', fields: ['date'], }, }, response: { status: 200, body: denominatorFilter, }, }, ], }, }, }"
+          "default": "{ ...Template, args: { numeratorFilter: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateFrom: '2020-12-01', dateTo: '2021-03-01', }, denominatorFilter: { country: 'Switzerland', dateFrom: '2020-12-01', dateTo: '2021-03-01' }, generationTime: 7, views: ['line'], width: '100%', lapisDateField: 'date', yAxisMaxLinear: 1, yAxisMaxLogarithmic: 'limitTo1', }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'numeratorFilter', url: AGGREGATED_ENDPOINT, body: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateFrom: '2020-12-01', dateTo: '2021-03-01', fields: ['date'], }, }, response: { status: 200, body: numeratorFilter, }, }, { matcher: { name: 'denominatorFilter', url: AGGREGATED_ENDPOINT, body: { country: 'Switzerland', dateFrom: '2020-12-01', dateTo: '2021-03-01', fields: ['date'], }, }, response: { status: 200, body: denominatorFilter, }, }, ], }, }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "WithFixedHeight",
+          "type": {
+            "text": "StoryObj<Required<RelativeGrowthAdvantageProps>>"
+          },
+          "default": "{ ...Default, args: { ...Default.args, height: '700px', }, }"
         }
       ],
       "exports": [
@@ -3132,6 +3268,14 @@
             "name": "Default",
             "module": "src/web-components/visualization/gs-relative-growth-advantage.stories.ts"
           }
+        },
+        {
+          "kind": "js",
+          "name": "WithFixedHeight",
+          "declaration": {
+            "name": "WithFixedHeight",
+            "module": "src/web-components/visualization/gs-relative-growth-advantage.stories.ts"
+          }
         }
       ]
     },
@@ -3198,9 +3342,9 @@
               "kind": "field",
               "name": "height",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'700px'",
+              "default": "undefined",
               "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "attribute": "height"
             },
@@ -3284,9 +3428,9 @@
             {
               "name": "height",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'700px'",
+              "default": "undefined",
               "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "fieldName": "height"
             },
@@ -3387,7 +3531,15 @@
           "type": {
             "text": "StoryObj<SequencesByLocationProps>"
           },
-          "default": "{ render: (args) => html` <gs-app lapis=\"${LAPIS_URL}\"> <gs-sequences-by-location .lapisFilter=${args.lapisFilter} .lapisLocationField=${args.lapisLocationField} .width=${args.width} .height=${args.height} .views=${args.views} .pageSize=${args.pageSize} ></gs-sequences-by-location> </gs-app> `, args: { lapisFilter: { dateFrom: '2022-01-01', dateTo: '2022-04-01', country: 'Germany' }, lapisLocationField: 'division', width: '100%', height: '700px', views: ['table'], pageSize: 10, }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'aggregatedData', url: AGGREGATED_ENDPOINT, body: { fields: ['division'], dateFrom: '2022-01-01', dateTo: '2022-04-01', country: 'Germany', }, }, response: { status: 200, body: aggregatedGermany, }, }, ], }, }, }"
+          "default": "{ render: (args) => html` <gs-app lapis=\"${LAPIS_URL}\"> <gs-sequences-by-location .lapisFilter=${args.lapisFilter} .lapisLocationField=${args.lapisLocationField} .width=${args.width} .height=${args.height} .views=${args.views} .pageSize=${args.pageSize} ></gs-sequences-by-location> </gs-app> `, args: { lapisFilter: { dateFrom: '2022-01-01', dateTo: '2022-04-01', country: 'Germany' }, lapisLocationField: 'division', width: '100%', views: ['table'], pageSize: 10, }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'aggregatedData', url: AGGREGATED_ENDPOINT, body: { fields: ['division'], dateFrom: '2022-01-01', dateTo: '2022-04-01', country: 'Germany', }, }, response: { status: 200, body: aggregatedGermany, }, }, ], }, }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "WithFixedHeight",
+          "type": {
+            "text": "StoryObj<SequencesByLocationProps>"
+          },
+          "default": "{ ...WorldMap, args: { ...WorldMap.args, height: '700px', }, }"
         }
       ],
       "exports": [
@@ -3430,6 +3582,14 @@
             "name": "GermanyTableOnly",
             "module": "src/web-components/visualization/gs-sequences-by-location.stories.ts"
           }
+        },
+        {
+          "kind": "js",
+          "name": "WithFixedHeight",
+          "declaration": {
+            "name": "WithFixedHeight",
+            "module": "src/web-components/visualization/gs-sequences-by-location.stories.ts"
+          }
         }
       ]
     },
@@ -3496,9 +3656,9 @@
               "kind": "field",
               "name": "height",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'700px'",
+              "default": "undefined",
               "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "attribute": "height"
             },
@@ -3602,9 +3762,9 @@
             {
               "name": "height",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'700px'",
+              "default": "undefined",
               "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "fieldName": "height"
             },
@@ -3699,7 +3859,7 @@
           "type": {
             "text": "StoryObj<Required<StatisticsProps>>"
           },
-          "default": "{ render: (args) => html` <gs-app lapis=\"${LAPIS_URL}\"> <gs-statistics .numeratorFilter=${args.numeratorFilter} .denominatorFilter=${args.denominatorFilter} .width=${args.width} .height=${args.height} ></gs-statistics> </gs-app> `, args: { denominatorFilter: { country: 'USA', }, numeratorFilter: { country: 'USA', division: 'Alabama', }, width: '100%', height: '700px', }, }"
+          "default": "{ render: (args) => html` <gs-app lapis=\"${LAPIS_URL}\"> <gs-statistics .numeratorFilter=${args.numeratorFilter} .denominatorFilter=${args.denominatorFilter} .width=${args.width} .height=${args.height} ></gs-statistics> </gs-app> `, args: { denominatorFilter: { country: 'USA', }, numeratorFilter: { country: 'USA', division: 'Alabama', }, width: '100%', }, }"
         }
       ],
       "exports": [
@@ -3764,9 +3924,9 @@
               "kind": "field",
               "name": "height",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'100%'",
+              "default": "undefined",
               "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "attribute": "height"
             }
@@ -3802,9 +3962,9 @@
             {
               "name": "height",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'100%'",
+              "default": "undefined",
               "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "fieldName": "height"
             }
@@ -3925,7 +4085,7 @@
           "type": {
             "text": "Meta<WastewaterMutationsOverTimeProps & { infoText: string }>"
           },
-          "default": "{ title: 'Wastewater visualization/Wastewater mutations over time', component: 'gs-wastewater-mutations-over-time', argTypes: { lapisFilter: { control: 'object' }, sequenceType: { options: ['nucleotide', 'amino acid'], control: { type: 'radio' }, }, width: { control: 'text' }, height: { control: 'text' }, }, args: { lapisFilter: { versionStatus: 'LATEST_VERSION', isRevocation: false }, sequenceType: 'nucleotide', width: '100%', height: '700px', infoText: 'Some info text', maxNumberOfGridRows: 100, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, fetchMock: {}, }), tags: ['autodocs'], }"
+          "default": "{ title: 'Wastewater visualization/Wastewater mutations over time', component: 'gs-wastewater-mutations-over-time', argTypes: { lapisFilter: { control: 'object' }, sequenceType: { options: ['nucleotide', 'amino acid'], control: { type: 'radio' }, }, width: { control: 'text' }, height: { control: 'text' }, }, args: { lapisFilter: { versionStatus: 'LATEST_VERSION', isRevocation: false }, sequenceType: 'nucleotide', width: '100%', height: undefined, infoText: 'Some info text', maxNumberOfGridRows: 100, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, fetchMock: {}, }), tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
@@ -3934,6 +4094,14 @@
             "text": "StoryObj<WastewaterMutationsOverTimeProps & { infoText: string }>"
           },
           "default": "{ render: (args) => html` <gs-app lapis=\"${WISE_LAPIS_URL}\"> <gs-wastewater-mutations-over-time .lapisFilter=${args.lapisFilter} .sequenceType=${args.sequenceType} .width=${args.width} .height=${args.height} .maxNumberOfGridRows=${args.maxNumberOfGridRows} > <span slot=\"infoText\">${args.infoText}</span> </gs-wastewater-mutations-over-time> </gs-app> `, parameters: { fetchMock: { mocks: [ { matcher: { name: 'details', url: WISE_DETAILS_ENDPOINT, body: { fields: ['date', 'location', 'nucleotideMutationFrequency', 'aminoAcidMutationFrequency'], versionStatus: 'LATEST_VERSION', isRevocation: false, }, }, response: { status: 200, body: details, }, }, ], }, }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "WithFixedHeight",
+          "type": {
+            "text": "StoryObj<WastewaterMutationsOverTimeProps & { infoText: string }>"
+          },
+          "default": "{ ...WastewaterMutationsOverTime, args: { ...WastewaterMutationsOverTime.args, height: '700px', }, }"
         }
       ],
       "exports": [
@@ -3952,6 +4120,14 @@
             "name": "WastewaterMutationsOverTime",
             "module": "src/web-components/wastewaterVisualization/gs-wastewater-mutations-over-time.stories.ts"
           }
+        },
+        {
+          "kind": "js",
+          "name": "WithFixedHeight",
+          "declaration": {
+            "name": "WithFixedHeight",
+            "module": "src/web-components/wastewaterVisualization/gs-wastewater-mutations-over-time.stories.ts"
+          }
         }
       ]
     },
@@ -4004,9 +4180,9 @@
               "kind": "field",
               "name": "height",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'700px'",
+              "default": "undefined",
               "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "attribute": "height"
             },
@@ -4052,9 +4228,9 @@
             {
               "name": "height",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'700px'",
+              "default": "undefined",
               "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "fieldName": "height"
             },