@genspectrum/dashboard-components 0.15.0 → 0.16.0

package/custom-elements.json

@@ -1464,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",
@@ -1476,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",
@@ -1484,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": [
@@ -1498,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"
           }
         },
@@ -1575,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"
             },
@@ -1662,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"
             },
@@ -1750,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",
@@ -1759,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": [
@@ -1785,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"
+          }
         }
       ]
     },
@@ -1841,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"
             },
@@ -1898,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"
             },
@@ -1951,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",
@@ -1984,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": [
@@ -2026,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"
+          }
         }
       ]
     },
@@ -2082,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"
             },
@@ -2149,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"
             },
@@ -2211,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",
@@ -2244,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": [
@@ -2286,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"
+          }
         }
       ]
     },
@@ -2352,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"
             },
@@ -2418,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"
             },
@@ -2471,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",
@@ -2512,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": [
@@ -2562,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"
+          }
         }
       ]
     },
@@ -2618,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"
             },
@@ -2695,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"
             },
@@ -2774,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",
@@ -2782,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",
@@ -2807,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": [
@@ -2857,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"
+          }
         }
       ]
     },
@@ -2943,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"
             },
@@ -3057,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"
             },
@@ -3145,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": [
@@ -3164,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"
+          }
         }
       ]
     },
@@ -3230,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"
             },
@@ -3316,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"
             },
@@ -3419,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": [
@@ -3462,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"
+          }
         }
       ]
     },
@@ -3528,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"
             },
@@ -3634,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"
             },
@@ -3731,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": [
@@ -3796,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"
             }
@@ -3834,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"
             }
@@ -3957,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",
@@ -3966,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": [
@@ -3984,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"
+          }
         }
       ]
     },
@@ -4036,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"
             },
@@ -4084,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"
             },