@genspectrum/dashboard-components 0.5.7 → 0.6.1

package/custom-elements.json

@@ -479,6 +479,186 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/web-components/input/gs-lineage-filter.stories.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "meta",
+          "type": {
+            "text": "Meta<Required<LineageFilterProps>>"
+          },
+          "default": "{ title: 'Input/Lineage filter', component: 'gs-lineage-filter', parameters: withComponentDocs({ actions: { handles: ['gs-lineage-filter-changed'], }, fetchMock: { mocks: [ { matcher: { name: 'pangoLineage', url: AGGREGATED_ENDPOINT, body: { fields: ['pangoLineage'], }, }, response: { status: 200, body: aggregatedData, }, }, ], }, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), decorators: [withActions], tags: ['autodocs'], }"
+        },
+        {
+          "kind": "variable",
+          "name": "Default",
+          "type": {
+            "text": "StoryObj<Required<LineageFilterProps>>"
+          },
+          "default": "{ render: (args) => { return html` <gs-app lapis=\"${LAPIS_URL}\"> <div class=\"max-w-screen-lg\"> <gs-lineage-filter .lapisField=${args.lapisField} .placeholderText=${args.placeholderText} .initialValue=${args.initialValue} .width=${args.width} ></gs-lineage-filter> </div> </gs-app>`; }, args: { lapisField: 'pangoLineage', placeholderText: 'Enter lineage', initialValue: 'B.1.1.7', width: '100%', }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "FiresEvent",
+          "type": {
+            "text": "StoryObj<Required<LineageFilterProps>>"
+          },
+          "default": "{ ...Default, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-lineage-filter'); const inputField = () => canvas.getByPlaceholderText('Enter lineage'); const listenerMock = fn(); await step('Setup event listener mock', async () => { canvasElement.addEventListener('gs-lineage-filter-changed', listenerMock); }); await step('wait until data is loaded', async () => { await waitFor(() => { return expect(inputField()).toBeEnabled(); }); }); await step('Enters an invalid lineage value', async () => { await userEvent.type(inputField(), 'notInList'); await expect(listenerMock).not.toHaveBeenCalled(); }); await step('Empty input', async () => { await userEvent.type(inputField(), '{backspace>9/}'); await expect(listenerMock.mock.calls.at(-1)[0].detail).toStrictEqual({ pangoLineage: undefined, }); }); await step('Enter a valid lineage value', async () => { await userEvent.type(inputField(), 'B.1.1.7'); await expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { pangoLineage: 'B.1.1.7', }, }), ); }); await step('Enter a valid lineage value', async () => { await userEvent.type(inputField(), '{backspace>9/}'); await userEvent.type(inputField(), 'B.1.1.7*'); await expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { pangoLineage: 'B.1.1.7*', }, }), ); }); }, args: { ...Default.args, initialValue: '', }, }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "meta",
+            "module": "src/web-components/input/gs-lineage-filter.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Default",
+          "declaration": {
+            "name": "Default",
+            "module": "src/web-components/input/gs-lineage-filter.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FiresEvent",
+          "declaration": {
+            "name": "FiresEvent",
+            "module": "src/web-components/input/gs-lineage-filter.stories.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/web-components/input/gs-lineage-filter.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "\n## Context\n\nThis component provides a text input field to filter by lineages.\nCurrently, it is designed to work well with Pango Lineages,\nbut it may also be used for other lineage types, if suitable.\n\nIt fetches all available values of the `lapisField` from the LAPIS instance\nand provides an autocomplete list with the available values of the lineage and sublineage queries\n(a `*` appended to the lineage value).",
+          "name": "LineageFilterComponent",
+          "members": [
+            {
+              "kind": "field",
+              "name": "initialValue",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The initial value to use for this lineage filter.",
+              "attribute": "initialValue"
+            },
+            {
+              "kind": "field",
+              "name": "lapisField",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Required.\n\nThe LAPIS field name to use for this lineage filter.\nThe field must exist on this LAPIS instance.",
+              "attribute": "lapisField"
+            },
+            {
+              "kind": "field",
+              "name": "placeholderText",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The placeholder text to display in the input field.",
+              "attribute": "placeholderText"
+            },
+            {
+              "kind": "field",
+              "name": "width",
+              "type": {
+                "text": "string"
+              },
+              "default": "'100%'",
+              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "attribute": "width"
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent<Record<string, string>>"
+              },
+              "description": "Fired when the input field is changed. The `details` of this event contain an object with the `lapisField` as key and the input value as value. Example: ``` { \"pangoLineage\": \"B.1.1.7\" } ```",
+              "name": "gs-lineage-filter-changed"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "initialValue",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The initial value to use for this lineage filter.",
+              "fieldName": "initialValue"
+            },
+            {
+              "name": "lapisField",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Required.\n\nThe LAPIS field name to use for this lineage filter.\nThe field must exist on this LAPIS instance.",
+              "fieldName": "lapisField"
+            },
+            {
+              "name": "placeholderText",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The placeholder text to display in the input field.",
+              "fieldName": "placeholderText"
+            },
+            {
+              "name": "width",
+              "type": {
+                "text": "string"
+              },
+              "default": "'100%'",
+              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "fieldName": "width"
+            }
+          ],
+          "superclass": {
+            "name": "PreactLitAdapter",
+            "module": "/src/web-components/PreactLitAdapter"
+          },
+          "tagName": "gs-lineage-filter",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LineageFilterComponent",
+          "declaration": {
+            "name": "LineageFilterComponent",
+            "module": "src/web-components/input/gs-lineage-filter.tsx"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "gs-lineage-filter",
+          "declaration": {
+            "name": "LineageFilterComponent",
+            "module": "src/web-components/input/gs-lineage-filter.tsx"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/web-components/input/gs-location-filter.stories.ts",
@@ -1159,7 +1339,7 @@
           "type": {
             "text": "Meta<Required<AggregateProps>>"
           },
-          "default": "{ title: 'Visualization/Aggregate', component: 'gs-aggregate', argTypes: { fields: [{ control: 'object' }], views: { options: ['table'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, headline: { control: 'text' }, pageSize: { control: 'object' }, initialSortField: { control: 'text' }, initialSortDirection: { options: ['ascending', 'descending'], control: { type: 'radio' }, }, }, parameters: withComponentDocs({ fetchMock: { mocks: [ { matcher: { name: 'aggregatedData', url: AGGREGATED_ENDPOINT, body: { fields: ['division', 'host'], country: 'USA', }, }, response: { status: 200, body: aggregatedData, }, }, ], }, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
+          "default": "{ title: 'Visualization/Aggregate', component: 'gs-aggregate', argTypes: { fields: [{ control: 'object' }], views: { options: ['table'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, pageSize: { control: 'object' }, initialSortField: { control: 'text' }, initialSortDirection: { options: ['ascending', 'descending'], control: { type: 'radio' }, }, }, parameters: withComponentDocs({ fetchMock: { mocks: [ { matcher: { name: 'aggregatedData', url: AGGREGATED_ENDPOINT, body: { fields: ['division', 'host'], country: 'USA', }, }, response: { status: 200, body: aggregatedData, }, }, ], }, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
@@ -1167,7 +1347,7 @@
           "type": {
             "text": "StoryObj<Required<AggregateProps>>"
           },
-          "default": "{ render: (args) => html` <gs-app lapis=\"${LAPIS_URL}\"> <gs-aggregate .fields=${args.fields} .filter=${args.filter} .views=${args.views} .width=${args.width} .height=${args.height} .headline=${args.headline} .initialSortField=${args.initialSortField} .initialSortDirection=${args.initialSortDirection} .pageSize=${args.pageSize} ></gs-aggregate> </gs-app> `, args: { fields: ['division', 'host'], views: ['table'], filter: { country: 'USA', }, width: '100%', height: '700px', headline: 'Aggregate', initialSortField: 'count', initialSortDirection: 'descending', pageSize: 10, }, }"
+          "default": "{ render: (args) => html` <gs-app lapis=\"${LAPIS_URL}\"> <gs-aggregate .fields=${args.fields} .filter=${args.filter} .views=${args.views} .width=${args.width} .height=${args.height} .initialSortField=${args.initialSortField} .initialSortDirection=${args.initialSortDirection} .pageSize=${args.pageSize} ></gs-aggregate> </gs-app> `, args: { fields: ['division', 'host'], views: ['table'], filter: { country: 'USA', }, width: '100%', height: '700px', initialSortField: 'count', initialSortDirection: 'descending', pageSize: 10, }, }"
         }
       ],
       "exports": [
@@ -1248,16 +1428,6 @@
               "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"
             },
-            {
-              "kind": "field",
-              "name": "headline",
-              "type": {
-                "text": "string"
-              },
-              "default": "'Aggregate'",
-              "description": "The headline of the component. Set to an empty string to hide the headline.",
-              "attribute": "headline"
-            },
             {
               "kind": "field",
               "name": "initialSortField",
@@ -1335,15 +1505,6 @@
               "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"
             },
-            {
-              "name": "headline",
-              "type": {
-                "text": "string"
-              },
-              "default": "'Aggregate'",
-              "description": "The headline of the component. Set to an empty string to hide the headline.",
-              "fieldName": "headline"
-            },
             {
               "name": "initialSortField",
               "type": {
@@ -1409,7 +1570,7 @@
           "type": {
             "text": "Meta<Required<MutationComparisonProps>>"
           },
-          "default": "{ title: 'Visualization/Mutation comparison', component: 'gs-mutation-comparison', argTypes: { lapisFilters: { control: 'object' }, sequenceType: { options: ['nucleotide', 'amino acid'], control: { type: 'radio' }, }, views: { options: ['table', 'venn'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, headline: { control: 'text' }, pageSize: { control: 'object' }, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
+          "default": "{ title: 'Visualization/Mutation comparison', component: 'gs-mutation-comparison', argTypes: { lapisFilters: { control: 'object' }, sequenceType: { options: ['nucleotide', 'amino acid'], control: { type: 'radio' }, }, views: { options: ['table', 'venn'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, pageSize: { control: 'object' }, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
@@ -1417,7 +1578,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', headline: 'Mutation comparison', 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%', 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)); }); }, }"
         },
         {
           "kind": "variable",
@@ -1514,16 +1675,6 @@
               "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"
             },
-            {
-              "kind": "field",
-              "name": "headline",
-              "type": {
-                "text": "string"
-              },
-              "default": "'Mutation comparison'",
-              "description": "The headline of the component. Set to an empty string to hide the headline.",
-              "attribute": "headline"
-            },
             {
               "kind": "field",
               "name": "pageSize",
@@ -1581,15 +1732,6 @@
               "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"
             },
-            {
-              "name": "headline",
-              "type": {
-                "text": "string"
-              },
-              "default": "'Mutation comparison'",
-              "description": "The headline of the component. Set to an empty string to hide the headline.",
-              "fieldName": "headline"
-            },
             {
               "name": "pageSize",
               "type": {
@@ -1637,7 +1779,7 @@
           "type": {
             "text": "Meta<Required<MutationsProps>>"
           },
-          "default": "{ title: 'Visualization/Mutations', component: 'gs-mutations', argTypes: { lapisFilter: { control: 'object' }, sequenceType: { options: ['nucleotide', 'amino acid'], control: { type: 'radio' }, }, views: { options: ['table', 'grid', 'insertions'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, headline: { control: 'text' }, pageSize: { control: 'object' }, }, args: { lapisFilter: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo: '2022-01-01' }, sequenceType: 'nucleotide', views: ['grid', 'table', 'insertions'], width: '100%', height: '700px', headline: 'Mutations', pageSize: 10, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
+          "default": "{ title: 'Visualization/Mutations', component: 'gs-mutations', argTypes: { lapisFilter: { 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' }, sequenceType: 'nucleotide', views: ['grid', 'table', 'insertions'], width: '100%', height: '700px', pageSize: 10, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
@@ -1758,16 +1900,6 @@
               "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"
             },
-            {
-              "kind": "field",
-              "name": "headline",
-              "type": {
-                "text": "string"
-              },
-              "default": "'Mutations'",
-              "description": "The headline of the component. Set to an empty string to hide the headline.",
-              "attribute": "headline"
-            },
             {
               "kind": "field",
               "name": "pageSize",
@@ -1825,15 +1957,6 @@
               "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"
             },
-            {
-              "name": "headline",
-              "type": {
-                "text": "string"
-              },
-              "default": "'Mutations'",
-              "description": "The headline of the component. Set to an empty string to hide the headline.",
-              "fieldName": "headline"
-            },
             {
               "name": "pageSize",
               "type": {
@@ -1913,7 +2036,7 @@
           "type": {
             "text": "StoryObj<NumberSequencesOverTimeProps>"
           },
-          "default": "{ ...Template, args: { ...Template.args, lapisFilter: [ { displayName: 'EG', lapisFilter: { country: 'USA', pangoLineage: 'EG*', dateFrom: '2022-10-01' }, }, { 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: 'EG*', fields: ['date'], }, }, response: { status: 200, body: twoVariantsEG, }, }, { matcher: { name: 'aggregatedJN.1', url: AGGREGATED_ENDPOINT, body: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01', fields: ['date'], }, }, response: { status: 200, body: twoVariantsJN1, }, }, ], }, }, }"
+          "default": "{ ...Template, args: { ...Template.args, lapisFilter: [ { displayName: 'EG', lapisFilter: { country: 'USA', pangoLineage: 'EG*', dateFrom: '2022-10-01' }, }, { 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: 'EG*', dateFrom: '2022-10-01', fields: ['date'], }, }, response: { status: 200, body: twoVariantsEG, }, }, { 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",
@@ -1981,7 +2104,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "TODO(#330) write docs",
+          "description": "## Context\n\nThis component displays the number of sequences over time of one or more datasets,\nselected by LAPIS filters.\n\nIn the chart views, the user can select the y-axis scale (linear, logistic).\nThe x-axis shows all available time intervals available in the datasets in the selected `granularity`.\nThus, the `lapisFilter` implicitly also defines the range that is shown on the x-axis.\nIf you want to restrict the x-axis to a smaller date range,\nthen you need to set appropriate filter values in the `lapisFilter`.",
           "name": "NumberSequencesOverTimeComponent",
           "members": [
             {
@@ -1991,7 +2114,7 @@
                 "text": "{\n            lapisFilter: Record<string, string | number | null | boolean>;\n            displayName: string;\n        }\n        | {\n            lapisFilter: Record<string, string | number | null | boolean>;\n            displayName: string;\n        }[]"
               },
               "default": "{ displayName: '', lapisFilter: {} }",
-              "description": "Required.\nEither a LAPIS filter or an array of LAPIS filters to calculate the prevalence for.\n\nThe `lapisFilter` will be sent as is to LAPIS to select the data.\nIt must be a valid LAPIS filter object.\n\nThe `displayName` will be used as the label the prevalence in the views.\nIt should be human-readable.",
+              "description": "Required.\n\nEither a LAPIS filter or an array of LAPIS filters to fetch the number of sequences for.\n\nThe `lapisFilter` will be sent as is to LAPIS to select the data.\nIt must be a valid LAPIS filter object.\n\nThe `displayName` will be used to label the component views.\nIt should be human-readable.",
               "attribute": "lapisFilter"
             },
             {
@@ -2014,16 +2137,6 @@
               "description": "A list of tabs with views that this component should provide.",
               "attribute": "views"
             },
-            {
-              "kind": "field",
-              "name": "headline",
-              "type": {
-                "text": "string"
-              },
-              "default": "'Number of sequences of time'",
-              "description": "The headline of the component. Set to an empty string to hide the headline.",
-              "attribute": "headline"
-            },
             {
               "kind": "field",
               "name": "width",
@@ -2082,7 +2195,7 @@
                 "text": "{\n            lapisFilter: Record<string, string | number | null | boolean>;\n            displayName: string;\n        }\n        | {\n            lapisFilter: Record<string, string | number | null | boolean>;\n            displayName: string;\n        }[]"
               },
               "default": "{ displayName: '', lapisFilter: {} }",
-              "description": "Required.\nEither a LAPIS filter or an array of LAPIS filters to calculate the prevalence for.\n\nThe `lapisFilter` will be sent as is to LAPIS to select the data.\nIt must be a valid LAPIS filter object.\n\nThe `displayName` will be used as the label the prevalence in the views.\nIt should be human-readable.",
+              "description": "Required.\n\nEither a LAPIS filter or an array of LAPIS filters to fetch the number of sequences for.\n\nThe `lapisFilter` will be sent as is to LAPIS to select the data.\nIt must be a valid LAPIS filter object.\n\nThe `displayName` will be used to label the component views.\nIt should be human-readable.",
               "fieldName": "lapisFilter"
             },
             {
@@ -2103,15 +2216,6 @@
               "description": "A list of tabs with views that this component should provide.",
               "fieldName": "views"
             },
-            {
-              "name": "headline",
-              "type": {
-                "text": "string"
-              },
-              "default": "'Number of sequences of time'",
-              "description": "The headline of the component. Set to an empty string to hide the headline.",
-              "fieldName": "headline"
-            },
             {
               "name": "width",
               "type": {
@@ -2195,7 +2299,7 @@
           "type": {
             "text": "Meta<Required<PrevalenceOverTimeComponentProps>>"
           },
-          "default": "{ title: 'Visualization/Prevalence over time', component: 'gs-prevalence-over-time', argTypes: { numeratorFilter: { control: 'object' }, denominatorFilter: { control: 'object' }, granularity: { options: ['day', 'week', 'month', 'year'], control: { type: 'radio' }, }, smoothingWindow: { control: 'number' }, views: { options: ['bar', 'line', 'bubble', 'table'], control: { type: 'check' }, }, confidenceIntervalMethods: { options: ['wilson'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, headline: { control: 'text' }, pageSize: { control: 'object' }, yAxisMaxLinear: { control: 'object' }, yAxisMaxLogarithmic: { control: 'object' }, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
+          "default": "{ title: 'Visualization/Prevalence over time', component: 'gs-prevalence-over-time', argTypes: { numeratorFilter: { control: 'object' }, denominatorFilter: { control: 'object' }, granularity: { options: ['day', 'week', 'month', 'year'], control: { type: 'radio' }, }, smoothingWindow: { control: 'number' }, views: { options: ['bar', 'line', 'bubble', 'table'], control: { type: 'check' }, }, confidenceIntervalMethods: { options: ['wilson'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, pageSize: { control: 'object' }, yAxisMaxLinear: { control: 'object' }, yAxisMaxLogarithmic: { control: 'object' }, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
@@ -2203,7 +2307,7 @@
           "type": {
             "text": "StoryObj<Required<PrevalenceOverTimeComponentProps>>"
           },
-          "default": "{ ...Template, args: { numeratorFilter: [ { 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', headline: 'Prevalence over time', 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: { numeratorFilter: [ { 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, }, }, ], }, }, }"
         },
         {
           "kind": "variable",
@@ -2211,7 +2315,7 @@
           "type": {
             "text": "StoryObj<Required<PrevalenceOverTimeComponentProps>>"
           },
-          "default": "{ ...Template, args: { numeratorFilter: { 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', headline: 'Prevalence over time', 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: { numeratorFilter: { 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, }, }, ], }, }, }"
         },
         {
           "kind": "variable",
@@ -2358,16 +2462,6 @@
               "description": "A list of methods to calculate the confidence interval.\nThe option `none` is always available and disables confidence intervals.\nPass an empty array to disable the confidence interval selector.",
               "attribute": "confidenceIntervalMethods"
             },
-            {
-              "kind": "field",
-              "name": "headline",
-              "type": {
-                "text": "string"
-              },
-              "default": "'Prevalence over time'",
-              "description": "The headline of the component. Set to an empty string to hide the headline.",
-              "attribute": "headline"
-            },
             {
               "kind": "field",
               "name": "width",
@@ -2484,15 +2578,6 @@
               "description": "A list of methods to calculate the confidence interval.\nThe option `none` is always available and disables confidence intervals.\nPass an empty array to disable the confidence interval selector.",
               "fieldName": "confidenceIntervalMethods"
             },
-            {
-              "name": "headline",
-              "type": {
-                "text": "string"
-              },
-              "default": "'Prevalence over time'",
-              "description": "The headline of the component. Set to an empty string to hide the headline.",
-              "fieldName": "headline"
-            },
             {
               "name": "width",
               "type": {
@@ -2585,7 +2670,7 @@
           "type": {
             "text": "Meta<RelativeGrowthAdvantageComponentProps>"
           },
-          "default": "{ title: 'Visualization/Relative growth advantage', component: 'gs-relative-growth-advantage', argTypes: { numeratorFilter: { control: 'object' }, denominatorFilter: { control: 'object' }, generationTime: { control: 'number' }, views: { options: ['line'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, headline: { control: 'text' }, yAxisMaxLinear: { control: 'object' }, yAxisMaxLogarithmic: { control: 'object' }, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
+          "default": "{ title: 'Visualization/Relative growth advantage', component: 'gs-relative-growth-advantage', argTypes: { numeratorFilter: { control: 'object' }, denominatorFilter: { control: 'object' }, generationTime: { control: 'number' }, views: { options: ['line'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, yAxisMaxLinear: { control: 'object' }, yAxisMaxLogarithmic: { control: 'object' }, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
@@ -2593,7 +2678,7 @@
           "type": {
             "text": "StoryObj<Required<RelativeGrowthAdvantageComponentProps>>"
           },
-          "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', headline: 'Relative growth advantage', 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%', 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, }, }, ], }, }, }"
         }
       ],
       "exports": [
@@ -2664,16 +2749,6 @@
               "description": "A list of tabs with views that this component should provide.",
               "attribute": "views"
             },
-            {
-              "kind": "field",
-              "name": "headline",
-              "type": {
-                "text": "string"
-              },
-              "default": "'Relative growth advantage'",
-              "description": "The headline of the component. Set to an empty string to hide the headline.",
-              "attribute": "headline"
-            },
             {
               "kind": "field",
               "name": "width",
@@ -2762,15 +2837,6 @@
               "description": "A list of tabs with views that this component should provide.",
               "fieldName": "views"
             },
-            {
-              "name": "headline",
-              "type": {
-                "text": "string"
-              },
-              "default": "'Relative growth advantage'",
-              "description": "The headline of the component. Set to an empty string to hide the headline.",
-              "fieldName": "headline"
-            },
             {
               "name": "width",
               "type": {