@genspectrum/dashboard-components 1.12.0 → 1.14.0

package/README.md

@@ -172,13 +172,6 @@ Make sure that stories don't issue actual HTTP calls to LAPIS or other services.
 This is to make sure that we have stable tests in CI that don't depend on the availability of other services.
 We still use the real LAPIS URL so that a user can change the filters in a story and will still see data.
 
-In general, we use `storybook-addon-fetch-mock` for all outgoing requests. This strategy
-cannot be used for components that use web workers, like gs-mutations-over-time. Therefore, we created custom mock
-workers that return mocked data. The mock workers are enabled in the package.json using
-Node.js [subpath imports](https://nodejs.org/api/packages.html#subpath-imports), following the guide
-from [storybook](https://storybook.js.org/docs/writing-stories/mocking-data-and-modules/mocking-modules). This ensures
-that when importing the worker in the component, the mock worker is used inside Storybook instead of the real worker.
-
 ### How The Release Build Works
 
 The `"exports"` field in `package.json` defines which files a user of the package can import using the normal module systems.

package/custom-elements.json

@@ -2717,7 +2717,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' }, displayMutations: { control: 'object' }, initialMeanProportionInterval: { control: 'object' }, hideGaps: { control: 'boolean' }, useNewEndpoint: { control: 'boolean' }, pageSizes: { control: 'object' }, customColumns: { 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 }, hideGaps: false, useNewEndpoint: false, pageSizes: [10, 20, 30, 40, 50], }, 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' }, hideGaps: { control: 'boolean' }, pageSizes: { control: 'object' }, customColumns: { 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 }, hideGaps: false, pageSizes: [10, 20, 30, 40, 50], }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, fetchMock: { mocks: [ { matcher: { url: `${LAPIS_URL}/sample/nucleotideMutations`, body: { pangoLineage: 'JN.1*', dateFrom: '2024-01-01', dateTo: '2024-07-31', minProportion: 0.001, }, response: { status: 200, body: mockDefaultNucleotideMutations, }, }, }, { matcher: { url: `${LAPIS_URL}/component/nucleotideMutationsOverTime`, body: { filters: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-07-10', }, dateRanges: [ { dateFrom: '2024-01-01', dateTo: '2024-01-31' }, { dateFrom: '2024-02-01', dateTo: '2024-02-29' }, { dateFrom: '2024-03-01', dateTo: '2024-03-31' }, { dateFrom: '2024-04-01', dateTo: '2024-04-30' }, { dateFrom: '2024-05-01', dateTo: '2024-05-31' }, { dateFrom: '2024-06-01', dateTo: '2024-06-30' }, { dateFrom: '2024-07-01', dateTo: '2024-07-31' }, ], dateField: 'date', }, matchPartialBody: true, response: { status: 200, body: mockDefaultMutationsOverTime, }, }, }, ], }, }), tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
@@ -2733,7 +2733,7 @@
           "type": {
             "text": "StoryObj<Required<MutationsOverTimeProps>>"
           },
-          "default": "{ ...Template, args: { ...Template.args, displayMutations: ['A19722G', 'G21641T', 'T21653-'], }, }"
+          "default": "{ ...Template, args: { ...Template.args, displayMutations: ['A13121T', 'G24872T', 'T21653-'], }, parameters: { fetchMock: { mocks: [ { matcher: { url: `${LAPIS_URL}/sample/nucleotideMutations`, body: { pangoLineage: 'JN.1*', dateFrom: '2024-01-01', dateTo: '2024-07-31', minProportion: 0.001, }, response: { status: 200, body: mockDefaultNucleotideMutations, }, }, }, { matcher: { url: `${LAPIS_URL}/component/nucleotideMutationsOverTime`, body: { filters: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-07-10' }, dateRanges: [ { dateFrom: '2024-01-01', dateTo: '2024-01-31' }, { dateFrom: '2024-02-01', dateTo: '2024-02-29' }, { dateFrom: '2024-03-01', dateTo: '2024-03-31' }, { dateFrom: '2024-04-01', dateTo: '2024-04-30' }, { dateFrom: '2024-05-01', dateTo: '2024-05-31' }, { dateFrom: '2024-06-01', dateTo: '2024-06-30' }, { dateFrom: '2024-07-01', dateTo: '2024-07-31' }, ], includeMutations: ['A13121T', 'T21653-', 'G24872T'], dateField: 'date', }, response: { status: 200, body: mockWithDisplayMutationsMutationsOverTime, }, }, }, ], }, }, }"
         },
         {
           "kind": "variable",
@@ -2741,7 +2741,7 @@
           "type": {
             "text": "StoryObj<Required<MutationsOverTimeProps>>"
           },
-          "default": "{ ...Template, args: { ...Template.args, displayMutations: ['A19722G', 'G21641T', 'T21652-'], hideGaps: true, }, }"
+          "default": "{ ...Template, args: { ...Template.args, displayMutations: ['A13121T', 'G24872T', 'T21653-'], hideGaps: true, }, parameters: { fetchMock: { mocks: [ { matcher: { url: `${LAPIS_URL}/sample/nucleotideMutations`, body: { pangoLineage: 'JN.1*', dateFrom: '2024-01-01', dateTo: '2024-07-31', minProportion: 0.001, }, response: { status: 200, body: mockDefaultNucleotideMutations, }, }, }, { matcher: { url: `${LAPIS_URL}/component/nucleotideMutationsOverTime`, body: { filters: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-07-10' }, dateRanges: [ { dateFrom: '2024-01-01', dateTo: '2024-01-31' }, { dateFrom: '2024-02-01', dateTo: '2024-02-29' }, { dateFrom: '2024-03-01', dateTo: '2024-03-31' }, { dateFrom: '2024-04-01', dateTo: '2024-04-30' }, { dateFrom: '2024-05-01', dateTo: '2024-05-31' }, { dateFrom: '2024-06-01', dateTo: '2024-06-30' }, { dateFrom: '2024-07-01', dateTo: '2024-07-31' }, ], includeMutations: ['A13121T', 'T21653-', 'G24872T'], dateField: 'date', }, response: { status: 200, body: mockWithDisplayMutationsMutationsOverTime, }, }, }, ], }, }, }"
         },
         {
           "kind": "variable",
@@ -2749,7 +2749,7 @@
           "type": {
             "text": "StoryObj<Required<MutationsOverTimeProps>>"
           },
-          "default": "{ ...Template, args: { ...Template.args, lapisFilter: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-02-11' }, granularity: 'week', }, }"
+          "default": "{ ...Template, args: { ...Template.args, lapisFilter: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-02-11' }, granularity: 'week', }, parameters: { fetchMock: { mocks: [ { matcher: { url: `${LAPIS_URL}/sample/nucleotideMutations`, body: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-02-11', minProportion: 0.001, }, response: { status: 200, body: mockByWeekNucleotideMutations, }, }, }, { matcher: { url: `${LAPIS_URL}/component/nucleotideMutationsOverTime`, body: { filters: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-02-11', }, dateRanges: [ { dateFrom: '2024-01-15', dateTo: '2024-01-21' }, { dateFrom: '2024-01-22', dateTo: '2024-01-28' }, { dateFrom: '2024-01-29', dateTo: '2024-02-04' }, { dateFrom: '2024-02-05', dateTo: '2024-02-11' }, ], dateField: 'date', }, matchPartialBody: true, response: { status: 200, body: mockByWeekMutationsOverTime, }, }, }, ], }, }, }"
         },
         {
           "kind": "variable",
@@ -2757,7 +2757,7 @@
           "type": {
             "text": "StoryObj<Required<MutationsOverTimeProps>>"
           },
-          "default": "{ ...Template, args: { ...Template.args, lapisFilter: { pangoLineage: 'JN.1*', dateFrom: '2024-01-20', dateTo: '2024-01-26' }, granularity: 'day', sequenceType: 'amino acid', }, }"
+          "default": "{ ...Template, args: { ...Template.args, lapisFilter: { pangoLineage: 'JN.1*', dateFrom: '2024-01-20', dateTo: '2024-01-26' }, granularity: 'day', sequenceType: 'amino acid', }, parameters: { fetchMock: { mocks: [ { matcher: { url: `${LAPIS_URL}/sample/aminoAcidMutations`, body: { pangoLineage: 'JN.1*', dateFrom: '2024-01-20', dateTo: '2024-01-26', minProportion: 0.001, }, response: { status: 200, body: mockAminoAcidMutationsByDayAminoAcidMutations, }, }, }, { matcher: { url: `${LAPIS_URL}/component/aminoAcidMutationsOverTime`, body: { filters: { pangoLineage: 'JN.1*', dateFrom: '2024-01-20', dateTo: '2024-01-26', }, dateRanges: [ { dateFrom: '2024-01-20', dateTo: '2024-01-20' }, { dateFrom: '2024-01-21', dateTo: '2024-01-21' }, { dateFrom: '2024-01-22', dateTo: '2024-01-22' }, { dateFrom: '2024-01-23', dateTo: '2024-01-23' }, { dateFrom: '2024-01-24', dateTo: '2024-01-24' }, { dateFrom: '2024-01-25', dateTo: '2024-01-25' }, { dateFrom: '2024-01-26', dateTo: '2024-01-26' }, ], dateField: 'date', }, matchPartialBody: true, response: { status: 200, body: mockAminoAcidMutationsByDayAminoAcidMutationsOverTime, }, }, }, ], }, }, }"
         },
         {
           "kind": "variable",
@@ -2781,7 +2781,7 @@
           "type": {
             "text": "StoryObj<Required<MutationsOverTimeProps>>"
           },
-          "default": "{ ...Template, args: { ...Template.args, displayMutations: ['A19722G', 'G21641T', 'T21653-'], customColumns: [ { header: 'Jaccard Index', values: { A19722G: 0.75, G21641T: 0.92, 'T21653-': 0.58, }, }, ], }, }"
+          "default": "{ ...Template, args: { ...Template.args, displayMutations: ['A13121T', 'G24872T', 'T21653-'], customColumns: [ { header: 'Jaccard Index', values: { A13121T: 0.75, G24872T: 0.92, 'T21653-': 0.58, }, }, ], }, parameters: { fetchMock: { mocks: [ { matcher: { url: `${LAPIS_URL}/sample/nucleotideMutations`, body: { pangoLineage: 'JN.1*', dateFrom: '2024-01-01', dateTo: '2024-07-31', minProportion: 0.001, }, response: { status: 200, body: mockDefaultNucleotideMutations, }, }, }, { matcher: { url: `${LAPIS_URL}/component/nucleotideMutationsOverTime`, body: { filters: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-07-10' }, dateRanges: [ { dateFrom: '2024-01-01', dateTo: '2024-01-31' }, { dateFrom: '2024-02-01', dateTo: '2024-02-29' }, { dateFrom: '2024-03-01', dateTo: '2024-03-31' }, { dateFrom: '2024-04-01', dateTo: '2024-04-30' }, { dateFrom: '2024-05-01', dateTo: '2024-05-31' }, { dateFrom: '2024-06-01', dateTo: '2024-06-30' }, { dateFrom: '2024-07-01', dateTo: '2024-07-31' }, ], includeMutations: ['A13121T', 'T21653-', 'G24872T'], dateField: 'date', }, response: { status: 200, body: mockWithDisplayMutationsMutationsOverTime, }, }, }, ], }, }, }"
         }
       ],
       "exports": [
@@ -2962,22 +2962,12 @@
               "kind": "field",
               "name": "hideGaps",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
               "default": "false",
               "description": "If true, date ranges with no data will be hidden initially; if false, not.\nCan be switched with a button in the toolbar.",
               "attribute": "hideGaps"
             },
-            {
-              "kind": "field",
-              "name": "useNewEndpoint",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "description": "Whether to use the mutationsOverTime endpoint from LAPIS.\nIf true, use the endpoint, if false, compute component data as before.\nEventually, the new endpoint will become the default.",
-              "attribute": "useNewEndpoint"
-            },
             {
               "kind": "field",
               "name": "pageSizes",
@@ -3093,21 +3083,12 @@
             {
               "name": "hideGaps",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
               "default": "false",
               "description": "If true, date ranges with no data will be hidden initially; if false, not.\nCan be switched with a button in the toolbar.",
               "fieldName": "hideGaps"
             },
-            {
-              "name": "useNewEndpoint",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "description": "Whether to use the mutationsOverTime endpoint from LAPIS.\nIf true, use the endpoint, if false, compute component data as before.\nEventually, the new endpoint will become the default.",
-              "fieldName": "useNewEndpoint"
-            },
             {
               "name": "pageSizes",
               "type": {
@@ -4155,6 +4136,389 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/web-components/visualization/gs-queries-over-time.spec-d.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/web-components/visualization/gs-queries-over-time.stories.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "meta",
+          "type": {
+            "text": "Meta<Required<QueriesOverTimeProps>>"
+          },
+          "default": "{ title: 'Visualization/Queries over time', component: 'gs-queries-over-time', argTypes: { lapisFilter: { control: 'object' }, queries: { control: 'object' }, views: { options: ['grid'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, granularity: { options: ['day', 'week', 'month', 'year'], control: { type: 'radio' }, }, lapisDateField: { control: 'text' }, initialMeanProportionInterval: { control: 'object' }, hideGaps: { control: 'boolean' }, pageSizes: { control: 'object' }, customColumns: { control: 'object' }, }, args: { lapisFilter: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-04-30' }, queries: [ { displayLabel: 'S:F456L (single mutation)', countQuery: 'S:456L', coverageQuery: '!S:456N', }, { displayLabel: 'R346T + F456L (combination)', countQuery: 'S:346T & S:456L', coverageQuery: '!S:346N & !S:456N', }, { displayLabel: 'C22916T or T22917G (nucleotide OR)', countQuery: 'C22916T | T22917G', coverageQuery: '!22916N & !22917N', }, ], views: ['grid'], width: '100%', granularity: 'month', lapisDateField: 'date', initialMeanProportionInterval: { min: 0, max: 1 }, hideGaps: false, pageSizes: [10, 20, 30, 40, 50], }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, fetchMock: { mocks: [ { matcher: { url: `${LAPIS_URL}/component/queriesOverTime`, body: { filters: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-04-30', }, queries: [ { displayLabel: 'S:F456L (single mutation)', countQuery: 'S:456L', coverageQuery: '!S:456N', }, { displayLabel: 'R346T + F456L (combination)', countQuery: 'S:346T & S:456L', coverageQuery: '!S:346N & !S:456N', }, { displayLabel: 'C22916T or T22917G (nucleotide OR)', countQuery: 'C22916T | T22917G', coverageQuery: '!22916N & !22917N', }, ], dateRanges: [ { dateFrom: '2024-01-01', dateTo: '2024-01-31' }, { dateFrom: '2024-02-01', dateTo: '2024-02-29' }, { dateFrom: '2024-03-01', dateTo: '2024-03-31' }, { dateFrom: '2024-04-01', dateTo: '2024-04-30' }, ], dateField: 'date', }, matchPartialBody: true, response: { status: 200, body: mockDefaultQueriesOverTime, }, }, }, ], }, }), tags: ['autodocs'], }"
+        },
+        {
+          "kind": "variable",
+          "name": "Default",
+          "type": {
+            "text": "StoryObj<Required<QueriesOverTimeProps>>"
+          },
+          "default": "{ ...Template, }"
+        },
+        {
+          "kind": "variable",
+          "name": "WithFixedHeight",
+          "type": {
+            "text": "StoryObj<Required<QueriesOverTimeProps>>"
+          },
+          "default": "{ ...Template, args: { ...Template.args, height: '700px', }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "ByWeek",
+          "type": {
+            "text": "StoryObj<Required<QueriesOverTimeProps>>"
+          },
+          "default": "{ ...Template, args: { ...Template.args, lapisFilter: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-02-11' }, granularity: 'week', }, parameters: { fetchMock: { mocks: [ { matcher: { url: `${LAPIS_URL}/component/queriesOverTime`, body: { filters: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-02-11', }, dateRanges: [ { dateFrom: '2024-01-15', dateTo: '2024-01-21' }, { dateFrom: '2024-01-22', dateTo: '2024-01-28' }, { dateFrom: '2024-01-29', dateTo: '2024-02-04' }, { dateFrom: '2024-02-05', dateTo: '2024-02-11' }, ], }, matchPartialBody: true, response: { status: 200, body: mockDefaultQueriesOverTime, }, }, }, ], }, }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "WithCustomColumns",
+          "type": {
+            "text": "StoryObj<Required<QueriesOverTimeProps>>"
+          },
+          "default": "{ ...Template, args: { ...Template.args, customColumns: [ { header: 'Jaccard Index', values: { 'S:F456L (single mutation)': 0.75, 'R346T + F456L (combination)': 0.92, 'C22916T or T22917G (nucleotide OR)': 0.58, }, }, ], }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "HideGaps",
+          "type": {
+            "text": "StoryObj<Required<QueriesOverTimeProps>>"
+          },
+          "default": "{ ...Template, args: { ...Template.args, lapisFilter: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-07-10' }, queries: [ { displayLabel: 'S:F456L', countQuery: 'S:456L', coverageQuery: '!S:456N', }, { displayLabel: 'S:R346T', countQuery: 'S:346T', coverageQuery: '!S:346N', }, { displayLabel: 'S:Q493E', countQuery: 'S:493E', coverageQuery: '!S:493N', }, ], hideGaps: true, }, parameters: { fetchMock: { mocks: [ { matcher: { url: `${LAPIS_URL}/component/queriesOverTime`, body: { filters: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-07-10' }, dateRanges: [ { dateFrom: '2024-01-01', dateTo: '2024-01-31' }, { dateFrom: '2024-02-01', dateTo: '2024-02-29' }, { dateFrom: '2024-03-01', dateTo: '2024-03-31' }, { dateFrom: '2024-04-01', dateTo: '2024-04-30' }, { dateFrom: '2024-05-01', dateTo: '2024-05-31' }, { dateFrom: '2024-06-01', dateTo: '2024-06-30' }, { dateFrom: '2024-07-01', dateTo: '2024-07-31' }, ], }, matchPartialBody: true, response: { status: 200, body: mockWithGapsQueriesOverTime, }, }, }, ], }, }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "SmallWidth",
+          "type": {
+            "text": "StoryObj<Required<QueriesOverTimeProps>>"
+          },
+          "default": "{ ...Template, args: { ...Template.args, width: '300px', }, }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "meta",
+            "module": "src/web-components/visualization/gs-queries-over-time.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Default",
+          "declaration": {
+            "name": "Default",
+            "module": "src/web-components/visualization/gs-queries-over-time.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "WithFixedHeight",
+          "declaration": {
+            "name": "WithFixedHeight",
+            "module": "src/web-components/visualization/gs-queries-over-time.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ByWeek",
+          "declaration": {
+            "name": "ByWeek",
+            "module": "src/web-components/visualization/gs-queries-over-time.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "WithCustomColumns",
+          "declaration": {
+            "name": "WithCustomColumns",
+            "module": "src/web-components/visualization/gs-queries-over-time.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "HideGaps",
+          "declaration": {
+            "name": "HideGaps",
+            "module": "src/web-components/visualization/gs-queries-over-time.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SmallWidth",
+          "declaration": {
+            "name": "SmallWidth",
+            "module": "src/web-components/visualization/gs-queries-over-time.stories.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/web-components/visualization/gs-queries-over-time.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "## Context\n\nThis component displays arbitrary LAPIS queries over time for a dataset.\nEach query consists of a displayLabel (optional), countQuery (string for counting matches),\nand coverageQuery (string for determining the coverage/denominator).\nThe shown date range is determined by the available dates in the dataset.\n\n## Views\n\n### Grid View\n\nThe grid view shows the proportion for each query over date ranges.\nProportions are calculated as count/coverage for each time period.\n\nUsers can filter the displayed rows by mean proportion via a slider in the toolbar.\nThe mean proportion of each row is calculated over the whole data range that the component displays.",
+          "name": "QueriesOverTimeComponent",
+          "members": [
+            {
+              "kind": "field",
+              "name": "lapisFilter",
+              "type": {
+                "text": "Record<string, string | string[] | number | null | boolean | undefined> & {\n        nucleotideMutations?: string[];\n        aminoAcidMutations?: string[];\n        nucleotideInsertions?: string[];\n        aminoAcidInsertions?: string[];\n    }"
+              },
+              "default": "{}",
+              "description": "LAPIS filter to apply to all queries. This is used to determine the date range and total counts.",
+              "attribute": "lapisFilter"
+            },
+            {
+              "kind": "field",
+              "name": "queries",
+              "type": {
+                "text": "{\n        displayLabel: string;\n        countQuery: string;\n        coverageQuery: string;\n    }[]"
+              },
+              "default": "[]",
+              "description": "Required.\n\nArray of queries to display. Each query has:\n- displayLabel: string - The name to show in the grid row label\n- countQuery: string - Query string to count matches\n- coverageQuery: string - Query string to determine coverage/denominator\n\nBoth queries (count and coverage) are 'advanced queries' as they are defined in LAPIS.",
+              "attribute": "queries"
+            },
+            {
+              "kind": "field",
+              "name": "views",
+              "type": {
+                "text": "'grid'[]"
+              },
+              "default": "['grid']",
+              "description": "A list of tabs with views that this component should provide.",
+              "attribute": "views"
+            },
+            {
+              "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/concepts-size-of-components--docs for more information.",
+              "attribute": "width"
+            },
+            {
+              "kind": "field",
+              "name": "height",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "undefined",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
+              "attribute": "height"
+            },
+            {
+              "kind": "field",
+              "name": "granularity",
+              "type": {
+                "text": "'day' | 'week' | 'month' | 'year'"
+              },
+              "default": "'week'",
+              "description": "The granularity of the time axis.",
+              "attribute": "granularity"
+            },
+            {
+              "kind": "field",
+              "name": "lapisDateField",
+              "type": {
+                "text": "string"
+              },
+              "default": "'date'",
+              "description": "Required.\n\nThe LAPIS field that the data should be aggregated by.\nMust be a field of type `date` in LAPIS.",
+              "attribute": "lapisDateField"
+            },
+            {
+              "kind": "field",
+              "name": "initialMeanProportionInterval",
+              "type": {
+                "text": "{ min: number; max: number }"
+              },
+              "default": "{ min: 0, max: 1 }",
+              "description": "The initial proportion interval for the grid view.\nThe values must be between 0 and 1, inclusive.",
+              "attribute": "initialMeanProportionInterval"
+            },
+            {
+              "kind": "field",
+              "name": "hideGaps",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "description": "If true, date ranges with no data will be hidden initially; if false, not.\nCan be switched with a button in the toolbar.",
+              "attribute": "hideGaps"
+            },
+            {
+              "kind": "field",
+              "name": "pageSizes",
+              "type": {
+                "text": "number[] | number"
+              },
+              "default": "[10, 20, 30, 40, 50]",
+              "description": "The number of rows per page, which can be selected by the user.",
+              "attribute": "pageSizes"
+            },
+            {
+              "kind": "field",
+              "name": "customColumns",
+              "type": {
+                "text": "{ header: string; values: Record<string, string | number> }[] | undefined"
+              },
+              "default": "undefined",
+              "description": "Custom columns to add to the grid.\nEach column has a header and a map of query displayLabels to values.",
+              "attribute": "customColumns"
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent<undefined>"
+              },
+              "description": "Fired when the component has finished loading the required data from LAPIS.",
+              "name": "gs-component-finished-loading"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "lapisFilter",
+              "type": {
+                "text": "Record<string, string | string[] | number | null | boolean | undefined> & {\n        nucleotideMutations?: string[];\n        aminoAcidMutations?: string[];\n        nucleotideInsertions?: string[];\n        aminoAcidInsertions?: string[];\n    }"
+              },
+              "default": "{}",
+              "description": "LAPIS filter to apply to all queries. This is used to determine the date range and total counts.",
+              "fieldName": "lapisFilter"
+            },
+            {
+              "name": "queries",
+              "type": {
+                "text": "{\n        displayLabel: string;\n        countQuery: string;\n        coverageQuery: string;\n    }[]"
+              },
+              "default": "[]",
+              "description": "Required.\n\nArray of queries to display. Each query has:\n- displayLabel: string - The name to show in the grid row label\n- countQuery: string - Query string to count matches\n- coverageQuery: string - Query string to determine coverage/denominator\n\nBoth queries (count and coverage) are 'advanced queries' as they are defined in LAPIS.",
+              "fieldName": "queries"
+            },
+            {
+              "name": "views",
+              "type": {
+                "text": "'grid'[]"
+              },
+              "default": "['grid']",
+              "description": "A list of tabs with views that this component should provide.",
+              "fieldName": "views"
+            },
+            {
+              "name": "width",
+              "type": {
+                "text": "string"
+              },
+              "default": "'100%'",
+              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
+              "fieldName": "width"
+            },
+            {
+              "name": "height",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "undefined",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
+              "fieldName": "height"
+            },
+            {
+              "name": "granularity",
+              "type": {
+                "text": "'day' | 'week' | 'month' | 'year'"
+              },
+              "default": "'week'",
+              "description": "The granularity of the time axis.",
+              "fieldName": "granularity"
+            },
+            {
+              "name": "lapisDateField",
+              "type": {
+                "text": "string"
+              },
+              "default": "'date'",
+              "description": "Required.\n\nThe LAPIS field that the data should be aggregated by.\nMust be a field of type `date` in LAPIS.",
+              "fieldName": "lapisDateField"
+            },
+            {
+              "name": "initialMeanProportionInterval",
+              "type": {
+                "text": "{ min: number; max: number }"
+              },
+              "default": "{ min: 0, max: 1 }",
+              "description": "The initial proportion interval for the grid view.\nThe values must be between 0 and 1, inclusive.",
+              "fieldName": "initialMeanProportionInterval"
+            },
+            {
+              "name": "hideGaps",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "description": "If true, date ranges with no data will be hidden initially; if false, not.\nCan be switched with a button in the toolbar.",
+              "fieldName": "hideGaps"
+            },
+            {
+              "name": "pageSizes",
+              "type": {
+                "text": "number[] | number"
+              },
+              "default": "[10, 20, 30, 40, 50]",
+              "description": "The number of rows per page, which can be selected by the user.",
+              "fieldName": "pageSizes"
+            },
+            {
+              "name": "customColumns",
+              "type": {
+                "text": "{ header: string; values: Record<string, string | number> }[] | undefined"
+              },
+              "default": "undefined",
+              "description": "Custom columns to add to the grid.\nEach column has a header and a map of query displayLabels to values.",
+              "fieldName": "customColumns"
+            }
+          ],
+          "superclass": {
+            "name": "PreactLitAdapterWithGridJsStyles",
+            "module": "/src/web-components/PreactLitAdapterWithGridJsStyles"
+          },
+          "tagName": "gs-queries-over-time",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "QueriesOverTimeComponent",
+          "declaration": {
+            "name": "QueriesOverTimeComponent",
+            "module": "src/web-components/visualization/gs-queries-over-time.tsx"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "gs-queries-over-time",
+          "declaration": {
+            "name": "QueriesOverTimeComponent",
+            "module": "src/web-components/visualization/gs-queries-over-time.tsx"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/web-components/visualization/gs-relative-growth-advantage.stories.ts",
@@ -5024,6 +5388,14 @@
             "module": "./gs-mutations-over-time"
           }
         },
+        {
+          "kind": "js",
+          "name": "QueriesOverTimeComponent",
+          "declaration": {
+            "name": "QueriesOverTimeComponent",
+            "module": "./gs-queries-over-time"
+          }
+        },
         {
           "kind": "js",
           "name": "SequencesByLocationComponent",