@genspectrum/dashboard-components 0.5.3 → 0.5.5

package/custom-elements.json

@@ -726,6 +726,14 @@
             "text": "StoryObj<MutationFilterProps>"
           },
           "default": "{ ...Template, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-filter'); const inputField = () => canvas.getByPlaceholderText('Enter a mutation', { exact: false }); const listenerMock = fn(); await step('Setup event listener mock', async () => { canvasElement.addEventListener('gs-mutation-filter-on-blur', listenerMock); }); await step('wait until data is loaded', async () => { await waitFor(() => { return expect(inputField()).toBeEnabled(); }); }); await step('Move outside of input', async () => { await userEvent.type(inputField(), 'A123T'); await userEvent.tab(); await expect(listenerMock).toHaveBeenCalled(); }); }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "MultiSegmentedReferenceGenomes",
+          "type": {
+            "text": "StoryObj<MutationFilterProps>"
+          },
+          "default": "{ ...Template, args: { initialValue: ['seg1:123T', 'gene2:56', 'ins_seg2:78:AAA'], }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'referenceGenome', url: REFERENCE_GENOME_ENDPOINT, }, response: { status: 200, body: { nucleotideSequences: [ { name: 'seg1', sequence: 'dummy', }, { name: 'seg2', sequence: 'dummy', }, ], genes: [ { name: 'gene1', sequence: 'dummy', }, { name: 'gene2', sequence: 'dummy', }, ], }, }, options: { overwriteRoutes: false, }, }, ], }, }, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-filter'); await waitFor(() => { expect(canvas.getByText('seg1:123T')).toBeVisible(); expect(canvas.getByText('gene2:56')).toBeVisible(); return expect(canvas.getByText('ins_seg2:78:AAA')).toBeVisible(); }); }, }"
         }
       ],
       "exports": [
@@ -760,6 +768,14 @@
             "name": "FiresFilterOnBlurEvent",
             "module": "src/web-components/input/gs-mutation-filter.stories.ts"
           }
+        },
+        {
+          "kind": "js",
+          "name": "MultiSegmentedReferenceGenomes",
+          "declaration": {
+            "name": "MultiSegmentedReferenceGenomes",
+            "module": "src/web-components/input/gs-mutation-filter.stories.ts"
+          }
         }
       ]
     },
@@ -1855,6 +1871,304 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/web-components/visualization/gs-number-sequences-over-time.stories.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "meta",
+          "type": {
+            "text": "Meta<NumberSequencesOverTimeProps>"
+          },
+          "default": "{ title: 'Visualization/Number sequences over time', component: 'gs-number-sequences-over-time', argTypes: { granularity: { options: ['day', 'week', 'month', 'year'], control: { type: 'radio' }, }, views: { options: ['bar', 'line', 'table'], control: { type: 'check' }, }, pageSize: { control: 'object' }, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
+        },
+        {
+          "kind": "variable",
+          "name": "OneDatasetBarChart",
+          "type": {
+            "text": "StoryObj<NumberSequencesOverTimeProps>"
+          },
+          "default": "{ ...Template, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-number-sequences-over-time'); await waitFor(() => expect(canvas.getByRole('button', { name: 'Bar' })).toBeVisible()); await fireEvent.click(canvas.getByRole('button', { name: 'Bar' })); }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "OneDatasetTable",
+          "type": {
+            "text": "StoryObj<NumberSequencesOverTimeProps>"
+          },
+          "default": "{ ...Template, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-number-sequences-over-time'); await waitFor(() => expect(canvas.getByRole('button', { name: 'Table' })).toBeVisible()); await fireEvent.click(canvas.getByRole('button', { name: 'Table' })); }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "TwoDatasets",
+          "type": {
+            "text": "StoryObj<NumberSequencesOverTimeProps>"
+          },
+          "default": "{ ...Template, args: { ...Template.args, lapisFilter: [ { displayName: 'EG', lapisFilter: { country: 'USA', pangoLineage: 'EG*', dateFrom: '2022-10-01' }, }, { displayName: 'JN.1', lapisFilter: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01' } }, ], }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'aggregatedEG', url: AGGREGATED_ENDPOINT, body: { country: 'USA', pangoLineage: 'EG*', fields: ['date'], }, }, response: { status: 200, body: twoVariantsEG, }, }, { matcher: { name: 'aggregatedJN.1', url: AGGREGATED_ENDPOINT, body: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01', fields: ['date'], }, }, response: { status: 200, body: twoVariantsJN1, }, }, ], }, }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "TwoDatasetsWithNonOverlappingDates",
+          "type": {
+            "text": "StoryObj<NumberSequencesOverTimeProps>"
+          },
+          "default": "{ ...Template, args: { ...Template.args, lapisFilter: [ { displayName: 'XBB', lapisFilter: { country: 'USA', pangoLineage: 'XBB*', dateFrom: '2022-01-01', dateTo: '2022-12-31' }, }, { displayName: 'JN.1', lapisFilter: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01' } }, ], }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'aggregatedEG', url: AGGREGATED_ENDPOINT, body: { country: 'USA', pangoLineage: 'XBB*', dateFrom: '2022-01-01', dateTo: '2022-12-31', fields: ['date'], }, }, response: { status: 200, body: twoVariantsXBB, }, }, { matcher: { name: 'aggregatedJN.1', url: AGGREGATED_ENDPOINT, body: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01', fields: ['date'], }, }, response: { status: 200, body: twoVariantsJN1, }, }, ], }, }, }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "meta",
+            "module": "src/web-components/visualization/gs-number-sequences-over-time.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "OneDatasetBarChart",
+          "declaration": {
+            "name": "OneDatasetBarChart",
+            "module": "src/web-components/visualization/gs-number-sequences-over-time.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "OneDatasetTable",
+          "declaration": {
+            "name": "OneDatasetTable",
+            "module": "src/web-components/visualization/gs-number-sequences-over-time.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "TwoDatasets",
+          "declaration": {
+            "name": "TwoDatasets",
+            "module": "src/web-components/visualization/gs-number-sequences-over-time.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "TwoDatasetsWithNonOverlappingDates",
+          "declaration": {
+            "name": "TwoDatasetsWithNonOverlappingDates",
+            "module": "src/web-components/visualization/gs-number-sequences-over-time.stories.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/web-components/visualization/gs-number-sequences-over-time.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "TODO(#330) write docs",
+          "name": "NumberSequencesOverTimeComponent",
+          "members": [
+            {
+              "kind": "field",
+              "name": "lapisFilter",
+              "type": {
+                "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.",
+              "attribute": "lapisFilter"
+            },
+            {
+              "kind": "field",
+              "name": "lapisDateField",
+              "type": {
+                "text": "string"
+              },
+              "default": "'date'",
+              "description": "Required.\n\nThe LAPIS field that the data should be aggregated by.\nThe values will be used on the x-axis of the diagram.\nMust be a field of type `date` in LAPIS.",
+              "attribute": "lapisDateField"
+            },
+            {
+              "kind": "field",
+              "name": "views",
+              "type": {
+                "text": "('bar' | 'line' | 'table')[]"
+              },
+              "default": "['bar', 'line', 'table']",
+              "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",
+              "type": {
+                "text": "string"
+              },
+              "default": "'100%'",
+              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "attribute": "width"
+            },
+            {
+              "kind": "field",
+              "name": "height",
+              "type": {
+                "text": "string"
+              },
+              "default": "'700px'",
+              "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": "granularity",
+              "type": {
+                "text": "'day' | 'week' | 'month' | 'year'"
+              },
+              "default": "'day'",
+              "description": "The granularity of the time axis.",
+              "attribute": "granularity"
+            },
+            {
+              "kind": "field",
+              "name": "smoothingWindow",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The number of time steps to use for smoothing the data.\n`0` means no smoothing.\nMust be a non-negative integer.\n\nFor a given time, the shown value is the mean of the neighbouring measured values.\nThe `smoothingWindow` value provides the number of neighbouring values to take into account.\nThe resulting time is computed via `Math.floor(smoothingWindow / 2)`.",
+              "attribute": "smoothingWindow"
+            },
+            {
+              "kind": "field",
+              "name": "pageSize",
+              "type": {
+                "text": "boolean | number"
+              },
+              "default": "false",
+              "description": "The maximum number of rows to display in the table view.\nSet to `false` to disable pagination. Set to `true` to enable pagination with a default limit (10).",
+              "attribute": "pageSize"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "lapisFilter",
+              "type": {
+                "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.",
+              "fieldName": "lapisFilter"
+            },
+            {
+              "name": "lapisDateField",
+              "type": {
+                "text": "string"
+              },
+              "default": "'date'",
+              "description": "Required.\n\nThe LAPIS field that the data should be aggregated by.\nThe values will be used on the x-axis of the diagram.\nMust be a field of type `date` in LAPIS.",
+              "fieldName": "lapisDateField"
+            },
+            {
+              "name": "views",
+              "type": {
+                "text": "('bar' | 'line' | 'table')[]"
+              },
+              "default": "['bar', 'line', 'table']",
+              "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": {
+                "text": "string"
+              },
+              "default": "'100%'",
+              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "fieldName": "width"
+            },
+            {
+              "name": "height",
+              "type": {
+                "text": "string"
+              },
+              "default": "'700px'",
+              "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": "granularity",
+              "type": {
+                "text": "'day' | 'week' | 'month' | 'year'"
+              },
+              "default": "'day'",
+              "description": "The granularity of the time axis.",
+              "fieldName": "granularity"
+            },
+            {
+              "name": "smoothingWindow",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The number of time steps to use for smoothing the data.\n`0` means no smoothing.\nMust be a non-negative integer.\n\nFor a given time, the shown value is the mean of the neighbouring measured values.\nThe `smoothingWindow` value provides the number of neighbouring values to take into account.\nThe resulting time is computed via `Math.floor(smoothingWindow / 2)`.",
+              "fieldName": "smoothingWindow"
+            },
+            {
+              "name": "pageSize",
+              "type": {
+                "text": "boolean | number"
+              },
+              "default": "false",
+              "description": "The maximum number of rows to display in the table view.\nSet to `false` to disable pagination. Set to `true` to enable pagination with a default limit (10).",
+              "fieldName": "pageSize"
+            }
+          ],
+          "superclass": {
+            "name": "PreactLitAdapterWithGridJsStyles",
+            "module": "/src/web-components/PreactLitAdapterWithGridJsStyles"
+          },
+          "tagName": "gs-number-sequences-over-time",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "NumberSequencesOverTimeComponent",
+          "declaration": {
+            "name": "NumberSequencesOverTimeComponent",
+            "module": "src/web-components/visualization/gs-number-sequences-over-time.tsx"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "gs-number-sequences-over-time",
+          "declaration": {
+            "name": "NumberSequencesOverTimeComponent",
+            "module": "src/web-components/visualization/gs-number-sequences-over-time.tsx"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/web-components/visualization/gs-prevalence-over-time.stories.ts",
@@ -2558,6 +2872,14 @@
             "name": "AggregateComponent",
             "module": "./gs-aggregate"
           }
+        },
+        {
+          "kind": "js",
+          "name": "NumberSequencesOverTimeComponent",
+          "declaration": {
+            "name": "NumberSequencesOverTimeComponent",
+            "module": "./gs-number-sequences-over-time"
+          }
         }
       ]
     },