@genspectrum/dashboard-components 0.15.0 → 0.16.1

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%', initialSortField: 'count', initialSortDirection: 'descending', pageSize: 10, maxNumberOfBars: 10, }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "WithFixedHeight",
           "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": "{ ...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' }, displayMutations: { control: 'object' }, initialMeanProportionInterval: { control: 'object' }, }, args: { lapisFilter: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-07-10' }, sequenceType: 'nucleotide', views: ['grid'], width: '100%', granularity: 'month', lapisDateField: 'date', initialMeanProportionInterval: { min: 0.05, max: 0.9 }, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, fetchMock: {}, }), tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
@@ -1961,6 +1993,14 @@
           },
           "default": "{ ...Template, }"
         },
+        {
+          "kind": "variable",
+          "name": "ByMonthWithFilterOnDisplayedMutations",
+          "type": {
+            "text": "StoryObj<Required<MutationsOverTimeProps>>"
+          },
+          "default": "{ ...Template, args: { ...Template.args, displayMutations: ['A19722G', 'G21641T', 'T21653-'], }, }"
+        },
         {
           "kind": "variable",
           "name": "ByWeek",
@@ -1984,6 +2024,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": [
@@ -2003,6 +2051,14 @@
             "module": "src/web-components/visualization/gs-mutations-over-time.stories.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "ByMonthWithFilterOnDisplayedMutations",
+          "declaration": {
+            "name": "ByMonthWithFilterOnDisplayedMutations",
+            "module": "src/web-components/visualization/gs-mutations-over-time.stories.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "ByWeek",
@@ -2026,6 +2082,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"
+          }
         }
       ]
     },
@@ -2035,7 +2099,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "## Context\n\nThis component displays mutations (substitutions and deletions) over time for a dataset selected by a LAPIS filter.\nThe shown date range is determined by the date field in the LAPIS filter.\nIf the date field is not set, the date range is determined by all available dates in the dataset.\n\n## Views\n\n### Grid View\n\nThe grid view shows the proportion for each mutation over date ranges.\n\nThe grid limits the number of rows and columns for browser performance reasons as\ntoo much data might make the browser unresponsive.\n\nThe number of columns is limited to 200.\nIf this number are exceeded, an error message will be shown.\nIt is your responsibility to make sure that this does not happen.\nDepending on the selected date range in the `lapisFilter`, you can adapt the granularity accordingly\n(e.g. use months instead of days).\n\nThe number of rows is limited to 100.\nIf there are more, the component will only show 100 mutations and notify the user.",
+          "description": "## Context\n\nThis component displays mutations (substitutions and deletions) over time for a dataset selected by a LAPIS filter.\nThe shown date range is determined by the date field in the LAPIS filter.\nIf the date field is not set, the date range is determined by all available dates in the dataset.\n\n## Views\n\n### Grid View\n\nThe grid view shows the proportion for each mutation over date ranges.\n\nThe grid limits the number of rows and columns for browser performance reasons as\ntoo much data might make the browser unresponsive.\n\nThe number of columns is limited to 200.\nIf this number are exceeded, an error message will be shown.\nIt is your responsibility to make sure that this does not happen.\nDepending on the selected date range in the `lapisFilter`, you can adapt the granularity accordingly\n(e.g. use months instead of days).\n\nThe number of rows is limited to 100.\nIf there are more, the component will only show 100 mutations and notify the user.\n\nUsers can filter the displayed rows by mean proportion via a slider in the toolbar.\nThe mean proportion of each row is calculated by LAPIS over the whole data range that the component displays.\nThe initial mean proportion can be set via `initialMeanProportionInterval`.",
           "name": "MutationsOverTimeComponent",
           "members": [
             {
@@ -2082,9 +2146,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"
             },
@@ -2107,6 +2171,26 @@
               "default": "'date'",
               "description": "Required.\n\nThe LAPIS field that the data should be aggregated by.\nThe values will be used for the columns of the grid.\nMust be a field of type `date` in LAPIS.",
               "attribute": "lapisDateField"
+            },
+            {
+              "kind": "field",
+              "name": "displayMutations",
+              "type": {
+                "text": "string[] | undefined"
+              },
+              "default": "undefined",
+              "description": "If provided, only the given mutations will be displayed.\nThe mutations must be provided in the exact format as they would be displayed by the component.",
+              "attribute": "displayMutations"
+            },
+            {
+              "kind": "field",
+              "name": "initialMeanProportionInterval",
+              "type": {
+                "text": "{ min: number; max: number }"
+              },
+              "default": "{ min: 0.05, max: 0.9 }",
+              "description": "The initial proportion interval for the grid view.\nThe values must be between 0 and 1, inclusive.",
+              "attribute": "initialMeanProportionInterval"
             }
           ],
           "attributes": [
@@ -2149,9 +2233,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"
             },
@@ -2172,6 +2256,24 @@
               "default": "'date'",
               "description": "Required.\n\nThe LAPIS field that the data should be aggregated by.\nThe values will be used for the columns of the grid.\nMust be a field of type `date` in LAPIS.",
               "fieldName": "lapisDateField"
+            },
+            {
+              "name": "displayMutations",
+              "type": {
+                "text": "string[] | undefined"
+              },
+              "default": "undefined",
+              "description": "If provided, only the given mutations will be displayed.\nThe mutations must be provided in the exact format as they would be displayed by the component.",
+              "fieldName": "displayMutations"
+            },
+            {
+              "name": "initialMeanProportionInterval",
+              "type": {
+                "text": "{ min: number; max: number }"
+              },
+              "default": "{ min: 0.05, max: 0.9 }",
+              "description": "The initial proportion interval for the grid view.\nThe values must be between 0 and 1, inclusive.",
+              "fieldName": "initialMeanProportionInterval"
             }
           ],
           "superclass": {
@@ -2211,7 +2313,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 +2346,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 +2396,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 +2470,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 +2536,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 +2589,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 +2630,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 +2688,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 +2752,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 +2829,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 +2908,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 +2916,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 +2941,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 +2999,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 +3093,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 +3207,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 +3295,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 +3322,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 +3396,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 +3482,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 +3585,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 +3636,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 +3710,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 +3816,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 +3913,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 +3978,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 +4016,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 +4139,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 +4148,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 +4174,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 +4234,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 +4282,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"
             },