@genspectrum/dashboard-components 0.5.7 → 0.6.0

package/custom-elements.json

@@ -1159,7 +1159,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 +1167,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 +1248,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 +1325,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 +1390,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 +1398,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 +1495,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 +1552,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 +1599,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 +1720,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 +1777,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": {
@@ -1981,7 +1924,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 +1934,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 +1957,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 +2015,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 +2036,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 +2119,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 +2127,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 +2135,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 +2282,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 +2398,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 +2490,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 +2498,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 +2569,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 +2657,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": {

package/dist/dashboard-components.js

@@ -1357,30 +1357,10 @@ const ErrorDisplay = ({ error }) => {
 const ResizeContainer = ({ children, size: size2 }) => {
   return /* @__PURE__ */ u$1("div", { style: size2, children });
 };
-const Headline = ({ heading, children }) => {
-  if (!heading) {
-    return /* @__PURE__ */ u$1(Fragment, { children });
-  }
-  return /* @__PURE__ */ u$1(ResizingHeadline, { heading, children });
-};
-const ResizingHeadline = ({ heading, children }) => {
-  const ref = A(null);
-  const [h1Height, setH1Height] = h("2rem");
-  y(() => {
-    if (ref.current) {
-      const h1Height2 = ref.current.getBoundingClientRect().height;
-      setH1Height(`${h1Height2}px`);
-    }
-  }, []);
-  return /* @__PURE__ */ u$1("div", { className: "h-full w-full", children: [
-    /* @__PURE__ */ u$1("h1", { ref, children: heading }),
-    /* @__PURE__ */ u$1("div", { style: { height: `calc(100% - ${h1Height})` }, children })
-  ] });
-};
-const ErrorBoundary = ({ size: size2, headline, children }) => {
+const ErrorBoundary = ({ size: size2, children }) => {
   const [internalError] = b2();
   if (internalError) {
-    return /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(ErrorDisplay, { error: internalError }) }) });
+    return /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(ErrorDisplay, { error: internalError }) });
   }
   return /* @__PURE__ */ u$1(Fragment, { children });
 };
@@ -1688,14 +1668,9 @@ function useQuery(fetchDataCallback, dependencies = []) {
   }, [JSON.stringify(dependencies)]);
   return { data, error, isLoading };
 }
-const MutationComparison = ({
-  width,
-  height,
-  headline = "Mutation comparison",
-  ...innerProps
-}) => {
+const MutationComparison = ({ width, height, ...innerProps }) => {
   const size2 = { height, width };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(MutationComparisonInner, { ...innerProps }) }) }) });
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(MutationComparisonInner, { ...innerProps }) }) });
 };
 const MutationComparisonInner = ({
   lapisFilters,
@@ -4448,10 +4423,6 @@ input.tab:checked + .tab-content,
   --tw-border-opacity: 1;
   border-color: rgb(239 68 68 / var(--tw-border-opacity));
 }
-.bg-base-200 {
-  --tw-bg-opacity: 1;
-  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
-}
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -4663,7 +4634,6 @@ let MutationComparisonComponent = class extends PreactLitAdapterWithGridJsStyles
     this.views = ["table"];
     this.width = "100%";
     this.height = "700px";
-    this.headline = "Mutation comparison";
     this.pageSize = false;
   }
   render() {
@@ -4675,7 +4645,6 @@ let MutationComparisonComponent = class extends PreactLitAdapterWithGridJsStyles
         views: this.views,
         width: this.width,
         height: this.height,
-        headline: this.headline,
         pageSize: this.pageSize
       }
     );
@@ -4696,9 +4665,6 @@ __decorateClass$9([
 __decorateClass$9([
   n2({ type: String })
 ], MutationComparisonComponent.prototype, "height", 2);
-__decorateClass$9([
-  n2({ type: String })
-], MutationComparisonComponent.prototype, "headline", 2);
 __decorateClass$9([
   n2({ type: Object })
 ], MutationComparisonComponent.prototype, "pageSize", 2);
@@ -4968,14 +4934,9 @@ function filterMutationsData(data, displayedSegments, displayedMutationTypes) {
     gridData: filteredSubstitutionsOrDeletions
   };
 }
-const Mutations = ({
-  width,
-  height,
-  headline = "Mutations",
-  ...innerProps
-}) => {
+const Mutations = ({ width, height, ...innerProps }) => {
   const size2 = { height, width };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(MutationsInner, { ...innerProps }) }) }) });
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(MutationsInner, { ...innerProps }) }) });
 };
 const MutationsInner = ({
   lapisFilter,
@@ -5127,7 +5088,6 @@ let MutationsComponent = class extends PreactLitAdapterWithGridJsStyles {
     this.views = ["table", "grid"];
     this.width = "100%";
     this.height = "700px";
-    this.headline = "Mutations";
     this.pageSize = false;
   }
   render() {
@@ -5139,7 +5099,6 @@ let MutationsComponent = class extends PreactLitAdapterWithGridJsStyles {
         views: this.views,
         width: this.width,
         height: this.height,
-        headline: this.headline,
         pageSize: this.pageSize
       }
     );
@@ -5160,9 +5119,6 @@ __decorateClass$8([
 __decorateClass$8([
   n2({ type: String })
 ], MutationsComponent.prototype, "height", 2);
-__decorateClass$8([
-  n2({ type: String })
-], MutationsComponent.prototype, "headline", 2);
 __decorateClass$8([
   n2({ type: Object })
 ], MutationsComponent.prototype, "pageSize", 2);
@@ -6761,14 +6717,9 @@ const ScalingSelector = ({
     }
   );
 };
-const PrevalenceOverTime = ({
-  width,
-  height,
-  headline = "Prevalence over time",
-  ...innerProps
-}) => {
+const PrevalenceOverTime = ({ width, height, ...innerProps }) => {
   const size2 = { height, width };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(PrevalenceOverTimeInner, { ...innerProps }) }) }) });
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(PrevalenceOverTimeInner, { ...innerProps }) }) });
 };
 const PrevalenceOverTimeInner = ({
   numeratorFilter,
@@ -6946,7 +6897,6 @@ let PrevalenceOverTimeComponent = class extends PreactLitAdapterWithGridJsStyles
     this.smoothingWindow = 0;
     this.views = ["bar", "line", "bubble", "table"];
     this.confidenceIntervalMethods = ["wilson"];
-    this.headline = "Prevalence over time";
     this.width = "100%";
     this.height = "700px";
     this.lapisDateField = "date";
@@ -6966,7 +6916,6 @@ let PrevalenceOverTimeComponent = class extends PreactLitAdapterWithGridJsStyles
         confidenceIntervalMethods: this.confidenceIntervalMethods,
         width: this.width,
         height: this.height,
-        headline: this.headline,
         lapisDateField: this.lapisDateField,
         pageSize: this.pageSize,
         yAxisMaxConfig: {
@@ -6995,9 +6944,6 @@ __decorateClass$7([
 __decorateClass$7([
   n2({ type: Array })
 ], PrevalenceOverTimeComponent.prototype, "confidenceIntervalMethods", 2);
-__decorateClass$7([
-  n2({ type: String })
-], PrevalenceOverTimeComponent.prototype, "headline", 2);
 __decorateClass$7([
   n2({ type: String })
 ], PrevalenceOverTimeComponent.prototype, "width", 2);
@@ -7231,11 +7177,10 @@ function toYearMonthDay(d2) {
 const RelativeGrowthAdvantage = ({
   width,
   height,
-  headline = "Relative growth advantage",
   ...innerProps
 }) => {
   const size2 = { height, width };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(RelativeGrowthAdvantageInner, { ...innerProps }) }) }) });
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(RelativeGrowthAdvantageInner, { ...innerProps }) }) });
 };
 const RelativeGrowthAdvantageInner = ({
   numeratorFilter,
@@ -7359,7 +7304,6 @@ let RelativeGrowthAdvantageComponent = class extends PreactLitAdapter {
     this.denominatorFilter = {};
     this.generationTime = 7;
     this.views = ["line"];
-    this.headline = "Relative growth advantage";
     this.width = "100%";
     this.height = "700px";
     this.lapisDateField = "date";
@@ -7376,7 +7320,6 @@ let RelativeGrowthAdvantageComponent = class extends PreactLitAdapter {
         views: this.views,
         width: this.width,
         height: this.height,
-        headline: this.headline,
         lapisDateField: this.lapisDateField,
         yAxisMaxConfig: {
           linear: this.yAxisMaxLinear,
@@ -7398,9 +7341,6 @@ __decorateClass$6([
 __decorateClass$6([
   n2({ type: Array })
 ], RelativeGrowthAdvantageComponent.prototype, "views", 2);
-__decorateClass$6([
-  n2({ type: String })
-], RelativeGrowthAdvantageComponent.prototype, "headline", 2);
 __decorateClass$6([
   n2({ type: String })
 ], RelativeGrowthAdvantageComponent.prototype, "width", 2);
@@ -7467,14 +7407,9 @@ const AggregateTable = ({ data, fields, pageSize }) => {
   ];
   return /* @__PURE__ */ u$1(Table, { data, columns: headers, pageSize });
 };
-const Aggregate = ({
-  width,
-  height,
-  headline = "Mutations",
-  ...innerProps
-}) => {
+const Aggregate = ({ width, height, ...innerProps }) => {
   const size2 = { height, width };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(AggregateInner, { ...innerProps }) }) }) });
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(AggregateInner, { ...innerProps }) }) });
 };
 const AggregateInner = ({
   fields,
@@ -7536,7 +7471,6 @@ let AggregateComponent = class extends PreactLitAdapterWithGridJsStyles {
     this.filter = {};
     this.width = "100%";
     this.height = "700px";
-    this.headline = "Aggregate";
     this.initialSortField = "count";
     this.initialSortDirection = "descending";
     this.pageSize = false;
@@ -7550,7 +7484,6 @@ let AggregateComponent = class extends PreactLitAdapterWithGridJsStyles {
         filter: this.filter,
         width: this.width,
         height: this.height,
-        headline: this.headline,
         initialSortField: this.initialSortField,
         initialSortDirection: this.initialSortDirection,
         pageSize: this.pageSize
@@ -7573,9 +7506,6 @@ __decorateClass$5([
 __decorateClass$5([
   n2({ type: String })
 ], AggregateComponent.prototype, "height", 2);
-__decorateClass$5([
-  n2({ type: String })
-], AggregateComponent.prototype, "headline", 2);
 __decorateClass$5([
   n2({ type: String })
 ], AggregateComponent.prototype, "initialSortField", 2);
@@ -7744,9 +7674,9 @@ async function queryNumberOfSequencesOverTime(lapis, lapisFilter, lapisDateField
   });
   return Promise.all(queries);
 }
-const NumberSequencesOverTime = ({ width, height, headline, ...innerProps }) => {
+const NumberSequencesOverTime = ({ width, height, ...innerProps }) => {
   const size2 = { height, width };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(NumberSequencesOverTimeInner, { ...innerProps }) }) }) });
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(NumberSequencesOverTimeInner, { ...innerProps }) }) });
 };
 const NumberSequencesOverTimeInner = ({
   lapisFilter,
@@ -7852,7 +7782,6 @@ let NumberSequencesOverTimeComponent = class extends PreactLitAdapterWithGridJsS
     this.lapisFilter = { displayName: "", lapisFilter: {} };
     this.lapisDateField = "date";
     this.views = ["bar", "line", "table"];
-    this.headline = "Number of sequences of time";
     this.width = "100%";
     this.height = "700px";
     this.granularity = "day";
@@ -7866,7 +7795,6 @@ let NumberSequencesOverTimeComponent = class extends PreactLitAdapterWithGridJsS
         lapisFilter: this.lapisFilter,
         lapisDateField: this.lapisDateField,
         views: this.views,
-        headline: this.headline,
         width: this.width,
         height: this.height,
         granularity: this.granularity,
@@ -7885,9 +7813,6 @@ __decorateClass$4([
 __decorateClass$4([
   n2({ type: Array })
 ], NumberSequencesOverTimeComponent.prototype, "views", 2);
-__decorateClass$4([
-  n2({ type: String })
-], NumberSequencesOverTimeComponent.prototype, "headline", 2);
 __decorateClass$4([
   n2({ type: String })
 ], NumberSequencesOverTimeComponent.prototype, "width", 2);