@genspectrum/dashboard-components 1.13.0 → 1.14.1

package/custom-elements.json

@@ -2962,7 +2962,7 @@
               "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.",
@@ -3083,7 +3083,7 @@
             {
               "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.",
@@ -4136,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",
@@ -5005,6 +5388,14 @@
             "module": "./gs-mutations-over-time"
           }
         },
+        {
+          "kind": "js",
+          "name": "QueriesOverTimeComponent",
+          "declaration": {
+            "name": "QueriesOverTimeComponent",
+            "module": "./gs-queries-over-time"
+          }
+        },
         {
           "kind": "js",
           "name": "SequencesByLocationComponent",