@genspectrum/dashboard-components 0.16.4 → 0.17.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (58) hide show
  1. package/custom-elements.json +130 -74
  2. package/dist/{LineageFilterChangedEvent-COWV-Y0k.js → LineageFilterChangedEvent-DkvWdq_G.js} +2 -2
  3. package/dist/LineageFilterChangedEvent-DkvWdq_G.js.map +1 -0
  4. package/dist/components.d.ts +64 -48
  5. package/dist/components.js +858 -242
  6. package/dist/components.js.map +1 -1
  7. package/dist/style.css +391 -12
  8. package/dist/util.d.ts +23 -25
  9. package/dist/util.js +1 -1
  10. package/package.json +2 -1
  11. package/src/preact/components/clearable-select.stories.tsx +75 -0
  12. package/src/preact/components/clearable-select.tsx +76 -0
  13. package/src/preact/components/downshift-combobox.tsx +9 -7
  14. package/src/preact/dateRangeFilter/computeInitialValues.spec.ts +31 -33
  15. package/src/preact/dateRangeFilter/computeInitialValues.ts +2 -15
  16. package/src/preact/dateRangeFilter/date-picker.tsx +66 -0
  17. package/src/preact/dateRangeFilter/date-range-filter.stories.tsx +69 -31
  18. package/src/preact/dateRangeFilter/date-range-filter.tsx +136 -139
  19. package/src/preact/dateRangeFilter/dateRangeOption.ts +11 -11
  20. package/src/preact/mutationsOverTime/mutations-over-time-grid.tsx +133 -84
  21. package/src/preact/mutationsOverTime/mutations-over-time.stories.tsx +46 -16
  22. package/src/preact/mutationsOverTime/mutations-over-time.tsx +3 -0
  23. package/src/preact/shared/WithClassName/WithClassName.ts +1 -0
  24. package/src/preact/shared/icons/DeleteIcon.tsx +3 -0
  25. package/src/preact/shared/stories/expectOptionSelected.tsx +7 -0
  26. package/src/preact/shared/tanstackTable/pagination.tsx +132 -0
  27. package/src/preact/shared/tanstackTable/tanstackTable.tsx +43 -0
  28. package/src/preact/wastewater/mutationsOverTime/wastewater-mutations-over-time.stories.tsx +2 -1
  29. package/src/preact/wastewater/mutationsOverTime/wastewater-mutations-over-time.tsx +3 -5
  30. package/src/utilEntrypoint.ts +1 -1
  31. package/src/web-components/MutationAnnotations.mdx +33 -0
  32. package/src/web-components/ResizeContainer.mdx +1 -1
  33. package/src/web-components/errorHandling.mdx +1 -1
  34. package/src/web-components/gs-app.ts +2 -2
  35. package/src/web-components/input/gs-date-range-filter.stories.ts +38 -32
  36. package/src/web-components/input/gs-date-range-filter.tsx +8 -2
  37. package/src/web-components/input/gs-lineage-filter.tsx +1 -1
  38. package/src/web-components/input/gs-location-filter.tsx +1 -1
  39. package/src/web-components/input/gs-mutation-filter.tsx +1 -1
  40. package/src/web-components/input/gs-text-filter.tsx +1 -1
  41. package/src/web-components/visualization/gs-aggregate.tsx +2 -2
  42. package/src/web-components/visualization/gs-mutation-comparison.tsx +5 -2
  43. package/src/web-components/visualization/gs-mutations-over-time.spec-d.ts +39 -0
  44. package/src/web-components/visualization/gs-mutations-over-time.stories.ts +4 -0
  45. package/src/web-components/visualization/gs-mutations-over-time.tsx +13 -33
  46. package/src/web-components/visualization/gs-mutations.tsx +5 -2
  47. package/src/web-components/visualization/gs-number-sequences-over-time.tsx +2 -2
  48. package/src/web-components/visualization/gs-prevalence-over-time.tsx +2 -2
  49. package/src/web-components/visualization/gs-relative-growth-advantage.tsx +2 -2
  50. package/src/web-components/visualization/gs-sequences-by-location.tsx +2 -2
  51. package/src/web-components/visualization/gs-statistics.tsx +2 -2
  52. package/src/web-components/wastewaterVisualization/gs-wastewater-mutations-over-time.spec-d.ts +24 -0
  53. package/src/web-components/wastewaterVisualization/gs-wastewater-mutations-over-time.stories.ts +3 -3
  54. package/src/web-components/wastewaterVisualization/gs-wastewater-mutations-over-time.tsx +7 -38
  55. package/standalone-bundle/dashboard-components.js +18384 -16486
  56. package/standalone-bundle/dashboard-components.js.map +1 -1
  57. package/standalone-bundle/style.css +1 -1
  58. package/dist/LineageFilterChangedEvent-COWV-Y0k.js.map +0 -1
package/custom-elements.json CHANGED
@@ -2,6 +2,12 @@
2
2
  "schemaVersion": "1.0.0",
3
3
  "readme": "",
4
4
  "modules": [
5
+ {
6
+ "kind": "javascript-module",
7
+ "path": "src/web-components/MutationAnnotations.mdx",
8
+ "declarations": [],
9
+ "exports": []
10
+ },
5
11
  {
6
12
  "kind": "javascript-module",
7
13
  "path": "src/web-components/PreactLitAdapter.tsx",
@@ -231,7 +237,7 @@
231
237
  "text": "{\n name: string;\n description: string;\n symbol: string;\n nucleotideMutations: string[];\n aminoAcidMutations: string[];\n }[]"
232
238
  },
233
239
  "default": "[]",
234
- "description": "Supply lists of mutations that are especially relevant for the current organism.\nWhenever other components display mutations, matching mutations will be highlighted by appending the `symbol`.\nOn hover, a tooltip with the `name` and `description` will be shown.",
240
+ "description": "Supply lists of mutations that are especially relevant for the current organism.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-mutation-annotations--docs for more information.",
235
241
  "attribute": "mutationAnnotations"
236
242
  }
237
243
  ],
@@ -251,7 +257,7 @@
251
257
  "text": "{\n name: string;\n description: string;\n symbol: string;\n nucleotideMutations: string[];\n aminoAcidMutations: string[];\n }[]"
252
258
  },
253
259
  "default": "[]",
254
- "description": "Supply lists of mutations that are especially relevant for the current organism.\nWhenever other components display mutations, matching mutations will be highlighted by appending the `symbol`.\nOn hover, a tooltip with the `name` and `description` will be shown.",
260
+ "description": "Supply lists of mutations that are especially relevant for the current organism.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-mutation-annotations--docs for more information.",
255
261
  "fieldName": "mutationAnnotations"
256
262
  }
257
263
  ],
@@ -331,7 +337,7 @@
331
337
  "type": {
332
338
  "text": "Meta<Required<DateRangeFilterProps>>"
333
339
  },
334
- "default": "{ title: 'Input/DateRangeFilter', component: 'gs-date-range-filter', parameters: withComponentDocs({ actions: { handles: ['gs-date-range-filter-changed', 'gs-date-range-option-changed', ...previewHandles], }, fetchMock: {}, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), argTypes: { value: { control: { type: 'object', }, }, lapisDateField: { control: { type: 'text' } }, dateRangeOptions: { control: { type: 'object', }, }, earliestDate: { control: { type: 'text', }, }, width: { control: { type: 'text', }, }, }, args: { dateRangeOptions: [ dateRangeOptionPresets.lastMonth, dateRangeOptionPresets.last3Months, dateRangeOptionPresets.allTimes, { label: '2021', dateFrom: '2021-01-01', dateTo: '2021-12-31' }, customDateRange, ], earliestDate: '1970-01-01', value: dateRangeOptionPresets.lastMonth.label, lapisDateField: 'aDateColumn', width: '100%', }, tags: ['autodocs'], }"
340
+ "default": "{ title: 'Input/DateRangeFilter', component: 'gs-date-range-filter', parameters: withComponentDocs({ actions: { handles: ['gs-date-range-filter-changed', 'gs-date-range-option-changed', ...previewHandles], }, fetchMock: {}, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), argTypes: { value: { control: { type: 'object' }, }, lapisDateField: { control: { type: 'text' } }, dateRangeOptions: { control: { type: 'object' }, }, earliestDate: { control: { type: 'text' }, }, width: { control: { type: 'text' }, }, placeholder: { control: { type: 'text' }, }, }, args: { dateRangeOptions: [ dateRangeOptionPresets.lastMonth, dateRangeOptionPresets.last3Months, dateRangeOptionPresets.allTimes, { label: '2021', dateFrom: '2021-01-01', dateTo: '2021-12-31' }, customDateRange, ], earliestDate: '1970-01-01', value: dateRangeOptionPresets.lastMonth.label, lapisDateField: 'aDateColumn', width: '100%', placeholder: 'Date range', }, tags: ['autodocs'], }"
335
341
  },
336
342
  {
337
343
  "kind": "variable",
@@ -339,7 +345,7 @@
339
345
  "type": {
340
346
  "text": "StoryObj<Required<DateRangeFilterProps>>"
341
347
  },
342
- "default": "{ render: (args) => html` <gs-app lapis=\"${LAPIS_URL}\"> <div class=\"max-w-screen-lg\"> <gs-date-range-filter .dateRangeOptions=${args.dateRangeOptions} .earliestDate=${args.earliestDate} .value=${args.value} .width=${args.width} .lapisDateField=${args.lapisDateField} ></gs-date-range-filter> </div> </gs-app>`, }"
348
+ "default": "{ render: (args) => html` <gs-app lapis=\"${LAPIS_URL}\"> <div class=\"max-w-screen-lg\"> <gs-date-range-filter .dateRangeOptions=${args.dateRangeOptions} .earliestDate=${args.earliestDate} .value=${args.value} .width=${args.width} .lapisDateField=${args.lapisDateField} .placeholder=${args.placeholder} ></gs-date-range-filter> </div> </gs-app>`, }"
343
349
  },
344
350
  {
345
351
  "kind": "variable",
@@ -347,7 +353,7 @@
347
353
  "type": {
348
354
  "text": "StoryObj<Required<DateRangeFilterProps>>"
349
355
  },
350
- "default": "{ render: (args) => html` <gs-app lapis=\"${LAPIS_URL}\"> <div class=\"max-w-screen-lg\"> <gs-date-range-filter .dateRangeOptions=${args.dateRangeOptions} earliestDate=\"${args.earliestDate}\" value=\"${args.value}\" width=\"${args.width}\" lapisDateField=\"${args.lapisDateField}\" ></gs-date-range-filter> </div> </gs-app>`, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-date-range-filter'); await waitFor(async () => { await expect(selectField(canvas)).toHaveValue('Last month'); }); }, argTypes: { value: { control: { type: 'text', }, }, }, }"
356
+ "default": "{ render: (args) => html` <gs-app lapis=\"${LAPIS_URL}\"> <div class=\"max-w-screen-lg\"> <gs-date-range-filter .dateRangeOptions=${args.dateRangeOptions} earliestDate=\"${args.earliestDate}\" value=\"${args.value}\" width=\"${args.width}\" lapisDateField=\"${args.lapisDateField}\" placeholder=\"${args.placeholder}\" ></gs-date-range-filter> </div> </gs-app>`, play: async ({ canvasElement }) => { await waitFor(async () => { const canvas = await withinShadowRoot(canvasElement, 'gs-date-range-filter'); const placeholderOption = canvas.getByRole('combobox').querySelector('option:checked'); await expect(placeholderOption).toHaveTextContent('Last month'); }); }, argTypes: { value: { control: { type: 'text', }, }, }, }"
351
357
  },
352
358
  {
353
359
  "kind": "variable",
@@ -363,7 +369,7 @@
363
369
  "type": {
364
370
  "text": "StoryObj<Required<DateRangeFilterProps>>"
365
371
  },
366
- "default": "{ ...Default, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-date-range-filter'); const filterChangedListenerMock = fn(); const optionChangedListenerMock = fn(); await step('Setup event listener mock', () => { canvasElement.addEventListener('gs-date-range-filter-changed', filterChangedListenerMock); canvasElement.addEventListener('gs-date-range-option-changed', optionChangedListenerMock); }); await step('Expect last 6 months to be selected', async () => { await expect(selectField(canvas)).toHaveValue('Last month'); await waitFor(async () => { await expect(dateToPicker(canvas)).toHaveValue(toYYYYMMDD(new Date())); }); }); await step('Expect event to be fired when selecting a different value', async () => { await userEvent.selectOptions(selectField(canvas), 'CustomDateRange'); await expect(dateToPicker(canvas)).toHaveValue(customDateRange.dateTo); await expect(filterChangedListenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { aDateColumnFrom: customDateRange.dateFrom, aDateColumnTo: customDateRange.dateTo, }, }), ); await expect(optionChangedListenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: customDateRange.label, }), ); }); }, }"
372
+ "default": "{ ...Default, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-date-range-filter'); const filterChangedListenerMock = fn(); const optionChangedListenerMock = fn(); await step('Setup event listener mock', () => { canvasElement.addEventListener('gs-date-range-filter-changed', filterChangedListenerMock); canvasElement.addEventListener('gs-date-range-option-changed', optionChangedListenerMock); }); await step('Expect last 6 months to be selected', async () => { await waitFor(async () => { const placeholderOption = canvas.getByRole('combobox').querySelector('option:checked'); await expect(placeholderOption).toHaveTextContent('Last month'); }); await waitFor(async () => { await expect(dateToPicker(canvas)).toHaveValue(toYYYYMMDD(new Date())); }); }); await step('Expect event to be fired when selecting a different value', async () => { await userEvent.selectOptions(selectField(canvas), 'CustomDateRange'); await userEvent.click(canvas.getByText('CustomDateRange')); await waitFor(async () => { await expect(dateToPicker(canvas)).toHaveValue(customDateRange.dateTo); await expect(filterChangedListenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { aDateColumnFrom: customDateRange.dateFrom, aDateColumnTo: customDateRange.dateTo, }, }), ); await expect(optionChangedListenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: customDateRange.label, }), ); }); }); }, }"
367
373
  }
368
374
  ],
369
375
  "exports": [
@@ -445,7 +451,7 @@
445
451
  "text": "string | { dateFrom?: string; dateTo?: string } | undefined"
446
452
  },
447
453
  "default": "undefined",
448
- "description": "The value to use for this date range selector.\n- If it is a string, then it must be a valid label from the `dateRangeOptions`.\n- If it is an object, then it accepts dates in the format `YYYY-MM-DD` for the keys `dateFrom` and `dateTo`.\n Keys that are not set will default to the `earliestDate` or the current date respectively.\n- If the attribute is not set, the component will default to the range `earliestDate` until today.\n\nThe `detail` of the `gs-date-range-option-changed` event can be used for this attribute,\nif you want to control this component in your JS application.",
454
+ "description": "The value to use for this date range selector.\n- If it is a string, then it must be a valid label from the `dateRangeOptions`.\n- If it is an object, then it accepts dates in the format `YYYY-MM-DD` for the keys `dateFrom` and `dateTo`.\n Keys that are not set will default to the `earliestDate` or the current date respectively.\n\nThe `detail` of the `gs-date-range-option-changed` event can be used for this attribute,\nif you want to control this component in your JS application.",
449
455
  "attribute": "value"
450
456
  },
451
457
  {
@@ -455,9 +461,19 @@
455
461
  "text": "string"
456
462
  },
457
463
  "default": "'100%'",
458
- "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
464
+ "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
459
465
  "attribute": "width"
460
466
  },
467
+ {
468
+ "kind": "field",
469
+ "name": "placeholder",
470
+ "type": {
471
+ "text": "string | undefined"
472
+ },
473
+ "default": "undefined",
474
+ "description": "The placeholder to display on the select dropdown.",
475
+ "attribute": "placeholder"
476
+ },
461
477
  {
462
478
  "kind": "field",
463
479
  "name": "lapisDateField",
@@ -510,7 +526,7 @@
510
526
  "text": "string | { dateFrom?: string; dateTo?: string } | undefined"
511
527
  },
512
528
  "default": "undefined",
513
- "description": "The value to use for this date range selector.\n- If it is a string, then it must be a valid label from the `dateRangeOptions`.\n- If it is an object, then it accepts dates in the format `YYYY-MM-DD` for the keys `dateFrom` and `dateTo`.\n Keys that are not set will default to the `earliestDate` or the current date respectively.\n- If the attribute is not set, the component will default to the range `earliestDate` until today.\n\nThe `detail` of the `gs-date-range-option-changed` event can be used for this attribute,\nif you want to control this component in your JS application.",
529
+ "description": "The value to use for this date range selector.\n- If it is a string, then it must be a valid label from the `dateRangeOptions`.\n- If it is an object, then it accepts dates in the format `YYYY-MM-DD` for the keys `dateFrom` and `dateTo`.\n Keys that are not set will default to the `earliestDate` or the current date respectively.\n\nThe `detail` of the `gs-date-range-option-changed` event can be used for this attribute,\nif you want to control this component in your JS application.",
514
530
  "fieldName": "value"
515
531
  },
516
532
  {
@@ -519,9 +535,18 @@
519
535
  "text": "string"
520
536
  },
521
537
  "default": "'100%'",
522
- "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
538
+ "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
523
539
  "fieldName": "width"
524
540
  },
541
+ {
542
+ "name": "placeholder",
543
+ "type": {
544
+ "text": "string | undefined"
545
+ },
546
+ "default": "undefined",
547
+ "description": "The placeholder to display on the select dropdown.",
548
+ "fieldName": "placeholder"
549
+ },
525
550
  {
526
551
  "name": "lapisDateField",
527
552
  "type": {
@@ -703,7 +728,7 @@
703
728
  "text": "string"
704
729
  },
705
730
  "default": "'100%'",
706
- "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
731
+ "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
707
732
  "attribute": "width"
708
733
  }
709
734
  ],
@@ -759,7 +784,7 @@
759
784
  "text": "string"
760
785
  },
761
786
  "default": "'100%'",
762
- "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
787
+ "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
763
788
  "fieldName": "width"
764
789
  }
765
790
  ],
@@ -924,7 +949,7 @@
924
949
  "text": "string"
925
950
  },
926
951
  "default": "'100%'",
927
- "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
952
+ "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
928
953
  "attribute": "width"
929
954
  },
930
955
  {
@@ -981,7 +1006,7 @@
981
1006
  "text": "string"
982
1007
  },
983
1008
  "default": "'100%'",
984
- "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
1009
+ "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
985
1010
  "fieldName": "width"
986
1011
  },
987
1012
  {
@@ -1119,7 +1144,7 @@
1119
1144
  "text": "string"
1120
1145
  },
1121
1146
  "default": "'100%'",
1122
- "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
1147
+ "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
1123
1148
  "attribute": "width"
1124
1149
  }
1125
1150
  ],
@@ -1148,7 +1173,7 @@
1148
1173
  "text": "string"
1149
1174
  },
1150
1175
  "default": "'100%'",
1151
- "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
1176
+ "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
1152
1177
  "fieldName": "width"
1153
1178
  }
1154
1179
  ],
@@ -1291,7 +1316,7 @@
1291
1316
  "text": "string"
1292
1317
  },
1293
1318
  "default": "'100%'",
1294
- "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
1319
+ "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
1295
1320
  "attribute": "width"
1296
1321
  }
1297
1322
  ],
@@ -1347,7 +1372,7 @@
1347
1372
  "text": "string"
1348
1373
  },
1349
1374
  "default": "'100%'",
1350
- "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
1375
+ "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
1351
1376
  "fieldName": "width"
1352
1377
  }
1353
1378
  ],
@@ -1649,7 +1674,7 @@
1649
1674
  "text": "string"
1650
1675
  },
1651
1676
  "default": "'100%'",
1652
- "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
1677
+ "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
1653
1678
  "attribute": "width"
1654
1679
  },
1655
1680
  {
@@ -1659,7 +1684,7 @@
1659
1684
  "text": "string | undefined"
1660
1685
  },
1661
1686
  "default": "undefined",
1662
- "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
1687
+ "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
1663
1688
  "attribute": "height"
1664
1689
  },
1665
1690
  {
@@ -1737,7 +1762,7 @@
1737
1762
  "text": "string"
1738
1763
  },
1739
1764
  "default": "'100%'",
1740
- "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
1765
+ "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
1741
1766
  "fieldName": "width"
1742
1767
  },
1743
1768
  {
@@ -1746,7 +1771,7 @@
1746
1771
  "text": "string | undefined"
1747
1772
  },
1748
1773
  "default": "undefined",
1749
- "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
1774
+ "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
1750
1775
  "fieldName": "height"
1751
1776
  },
1752
1777
  {
@@ -1891,7 +1916,7 @@
1891
1916
  "declarations": [
1892
1917
  {
1893
1918
  "kind": "class",
1894
- "description": "## Context\n\nThis component allows to compare mutations between two different datasets.\nThe datasets are selected by LAPIS filters.\n\nIt only shows substitutions and deletions, it does not show insertions.\n\n## Views\n\n### Table View\n\nThe table view shows mutations and the proportions with which the mutation occurs in the respective data subsets.\nIt only shows mutations that are present in at least one of the data subsets\nand where the proportion is within the selected proportion interval for at least one data subset.\n\n### Venn View\n\nThe Venn view shows the overlap of mutations between the datasets in a Venn diagram.\nA dataset is considered to have a certain mutation, if the proportion of the mutation in the dataset is within the\nselected proportion interval.\nThus, changing the proportion interval may change a mutations from being \"common\" between the datasets\nto being \"for one dataset only\".",
1919
+ "description": "## Context\n\nThis component allows to compare mutations between two different datasets.\nThe datasets are selected by LAPIS filters.\n\nIt only shows substitutions and deletions, it does not show insertions.\n\nThis component supports mutations annotations.\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-mutation-annotations--docs for more information.\n\n## Views\n\n### Table View\n\nThe table view shows mutations and the proportions with which the mutation occurs in the respective data subsets.\nIt only shows mutations that are present in at least one of the data subsets\nand where the proportion is within the selected proportion interval for at least one data subset.\n\n### Venn View\n\nThe Venn view shows the overlap of mutations between the datasets in a Venn diagram.\nA dataset is considered to have a certain mutation, if the proportion of the mutation in the dataset is within the\nselected proportion interval.\nThus, changing the proportion interval may change a mutations from being \"common\" between the datasets\nto being \"for one dataset only\".",
1895
1920
  "name": "MutationComparisonComponent",
1896
1921
  "members": [
1897
1922
  {
@@ -1931,7 +1956,7 @@
1931
1956
  "text": "string"
1932
1957
  },
1933
1958
  "default": "'100%'",
1934
- "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
1959
+ "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
1935
1960
  "attribute": "width"
1936
1961
  },
1937
1962
  {
@@ -1941,7 +1966,7 @@
1941
1966
  "text": "string | undefined"
1942
1967
  },
1943
1968
  "default": "undefined",
1944
- "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
1969
+ "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
1945
1970
  "attribute": "height"
1946
1971
  },
1947
1972
  {
@@ -1989,7 +2014,7 @@
1989
2014
  "text": "string"
1990
2015
  },
1991
2016
  "default": "'100%'",
1992
- "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
2017
+ "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
1993
2018
  "fieldName": "width"
1994
2019
  },
1995
2020
  {
@@ -1998,7 +2023,7 @@
1998
2023
  "text": "string | undefined"
1999
2024
  },
2000
2025
  "default": "undefined",
2001
- "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
2026
+ "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
2002
2027
  "fieldName": "height"
2003
2028
  },
2004
2029
  {
@@ -2038,6 +2063,12 @@
2038
2063
  }
2039
2064
  ]
2040
2065
  },
2066
+ {
2067
+ "kind": "javascript-module",
2068
+ "path": "src/web-components/visualization/gs-mutations-over-time.spec-d.ts",
2069
+ "declarations": [],
2070
+ "exports": []
2071
+ },
2041
2072
  {
2042
2073
  "kind": "javascript-module",
2043
2074
  "path": "src/web-components/visualization/gs-mutations-over-time.stories.ts",
@@ -2048,7 +2079,7 @@
2048
2079
  "type": {
2049
2080
  "text": "Meta<Required<MutationsOverTimeProps>>"
2050
2081
  },
2051
- "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' }, }, 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 }, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, fetchMock: {}, }), tags: ['autodocs'], }"
2082
+ "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' }, pageSizes: { 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 }, pageSizes: [10, 20, 30, 40, 50], }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, fetchMock: {}, }), tags: ['autodocs'], }"
2052
2083
  },
2053
2084
  {
2054
2085
  "kind": "variable",
@@ -2164,7 +2195,7 @@
2164
2195
  "declarations": [
2165
2196
  {
2166
2197
  "kind": "class",
2167
- "description": "## Context\n\nThis component displays mutations (substitutions and deletions) over time for a dataset selected by a LAPIS filter.\nThe shown date range is determined by the date field in the LAPIS filter.\nIf the date field is not set, the date range is determined by all available dates in the dataset.\n\n## Views\n\n### Grid View\n\nThe grid view shows the proportion for each mutation over date ranges.\n\nThe grid limits the number of rows and columns for browser performance reasons as\ntoo much data might make the browser unresponsive.\n\nThe number of columns is limited to 200.\nIf this number are exceeded, an error message will be shown.\nIt is your responsibility to make sure that this does not happen.\nDepending on the selected date range in the `lapisFilter`, you can adapt the granularity accordingly\n(e.g. use months instead of days).\n\nThe number of rows is limited to 100.\nIf there are more, the component will only show 100 mutations and notify the user.\n\nUsers can filter the displayed rows by mean proportion via a slider in the toolbar.\nThe mean proportion of each row is calculated by LAPIS over the whole data range that the component displays.\nThe initial mean proportion can be set via `initialMeanProportionInterval`.",
2198
+ "description": "## Context\n\nThis component displays mutations (substitutions and deletions) over time for a dataset selected by a LAPIS filter.\nThe shown date range is determined by the date field in the LAPIS filter.\nIf the date field is not set, the date range is determined by all available dates in the dataset.\n\nThis component supports mutations annotations.\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-mutation-annotations--docs for more information.\n\n## Views\n\n### Grid View\n\nThe grid view shows the proportion for each mutation over date ranges.\n\nThe grid limits the number of rows and columns for browser performance reasons as\ntoo much data might make the browser unresponsive.\n\nThe number of columns is limited to 200.\nIf this number are exceeded, an error message will be shown.\nIt is your responsibility to make sure that this does not happen.\nDepending on the selected date range in the `lapisFilter`, you can adapt the granularity accordingly\n(e.g. use months instead of days).\n\nThe number of rows is limited to 100.\nIf there are more, the component will only show 100 mutations and notify the user.\n\nUsers can filter the displayed rows by mean proportion via a slider in the toolbar.\nThe mean proportion of each row is calculated by LAPIS over the whole data range that the component displays.\nThe initial mean proportion can be set via `initialMeanProportionInterval`.",
2168
2199
  "name": "MutationsOverTimeComponent",
2169
2200
  "members": [
2170
2201
  {
@@ -2204,7 +2235,7 @@
2204
2235
  "text": "string"
2205
2236
  },
2206
2237
  "default": "'100%'",
2207
- "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
2238
+ "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
2208
2239
  "attribute": "width"
2209
2240
  },
2210
2241
  {
@@ -2214,7 +2245,7 @@
2214
2245
  "text": "string | undefined"
2215
2246
  },
2216
2247
  "default": "undefined",
2217
- "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
2248
+ "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
2218
2249
  "attribute": "height"
2219
2250
  },
2220
2251
  {
@@ -2256,6 +2287,16 @@
2256
2287
  "default": "{ min: 0.05, max: 0.9 }",
2257
2288
  "description": "The initial proportion interval for the grid view.\nThe values must be between 0 and 1, inclusive.",
2258
2289
  "attribute": "initialMeanProportionInterval"
2290
+ },
2291
+ {
2292
+ "kind": "field",
2293
+ "name": "pageSizes",
2294
+ "type": {
2295
+ "text": "number[] | number"
2296
+ },
2297
+ "default": "[10, 20, 30, 40, 50]",
2298
+ "description": "The number of rows per page, which can be selected by the user.",
2299
+ "attribute": "pageSizes"
2259
2300
  }
2260
2301
  ],
2261
2302
  "attributes": [
@@ -2292,7 +2333,7 @@
2292
2333
  "text": "string"
2293
2334
  },
2294
2335
  "default": "'100%'",
2295
- "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
2336
+ "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
2296
2337
  "fieldName": "width"
2297
2338
  },
2298
2339
  {
@@ -2301,7 +2342,7 @@
2301
2342
  "text": "string | undefined"
2302
2343
  },
2303
2344
  "default": "undefined",
2304
- "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
2345
+ "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
2305
2346
  "fieldName": "height"
2306
2347
  },
2307
2348
  {
@@ -2339,6 +2380,15 @@
2339
2380
  "default": "{ min: 0.05, max: 0.9 }",
2340
2381
  "description": "The initial proportion interval for the grid view.\nThe values must be between 0 and 1, inclusive.",
2341
2382
  "fieldName": "initialMeanProportionInterval"
2383
+ },
2384
+ {
2385
+ "name": "pageSizes",
2386
+ "type": {
2387
+ "text": "number[] | number"
2388
+ },
2389
+ "default": "[10, 20, 30, 40, 50]",
2390
+ "description": "The number of rows per page, which can be selected by the user.",
2391
+ "fieldName": "pageSizes"
2342
2392
  }
2343
2393
  ],
2344
2394
  "superclass": {
@@ -2478,7 +2528,7 @@
2478
2528
  "declarations": [
2479
2529
  {
2480
2530
  "kind": "class",
2481
- "description": "## Context\n\nThis component displays mutations (substitutions, deletions and insertions) for a dataset selected by a LAPIS filter.\n\n## Views\n\n### Table View\n\nThe table view shows all substitutions and deletions for the dataset.\nIt shows the type (substitution or deletion), the total count of the mutation\nand the proportion of the mutation in the dataset.\nThe proportion is relative to the total number of sequences matching\nthe specified sequence filters with non-ambiguous reads at that position.\n\nThe proportion interval filter can be used to filter the displayed mutations on client side.\n\n#### Jaccard Similarity\n\nIf the `baselineLapisFilter` attribute is set,\nthe [Jaccard similarity](https://en.wikipedia.org/wiki/Jaccard_index) is computed for each mutation.\nIt is computed as `variantWithMutationCount / (variantCount + mutationCount - variantWithMutationCount)`,\n- `variantCount` is the number of sequences of the variant (i.e. the number of sequences that match the `lapisFilter`),\n- `mutationCount` is the number of sequences with the mutation\n (i.e. the number of sequences matching the `baselineLapisFilter` that have the mutation),\n- `variantWithMutationCount` is the number of sequences that belong to the variant and have the mutation\n (i.e. the `count` value that is shown in the table).\n\nTypically, this is useful when you query mutations of a certain \"variant\"\n(i.e. a certain lineage or a certain set of mutations).\nThen the `baselineLapisFilter` should be the `lapisFilter` but without the lineage or mutations.\n\nFor example:\nYou are interested in a certain lineage in a certain country: `lapisFilter={country: 'Switzerland', linage: 'XY.1.2.3'}`.\nThen the \"baseline\" should be the same filter but without the lineage: `baselineLapisFilter={country: 'Switzerland'}`.\n\nComputing the Jaccard similarity is not always meaningful, because you might not have a \"variant\"\n(e.g. when you only query for a certain country).\nIn this case you can simply omit the `baselineLapisFilter`.\n\n### Grid View\n\nThe grid view shows the proportion of each sequence symbol (nucleotide or amino acid) for each position that has a mutation.\nOnly positions with at least one mutation in the selected proportion interval are shown.\n\n### Insertions View\n\nThe insertions view shows the count of all insertions for the dataset.",
2531
+ "description": "## Context\n\nThis component displays mutations (substitutions, deletions and insertions) for a dataset selected by a LAPIS filter.\n\nThis component supports mutations annotations.\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-mutation-annotations--docs for more information.\n\n## Views\n\n### Table View\n\nThe table view shows all substitutions and deletions for the dataset.\nIt shows the type (substitution or deletion), the total count of the mutation\nand the proportion of the mutation in the dataset.\nThe proportion is relative to the total number of sequences matching\nthe specified sequence filters with non-ambiguous reads at that position.\n\nThe proportion interval filter can be used to filter the displayed mutations on client side.\n\n#### Jaccard Similarity\n\nIf the `baselineLapisFilter` attribute is set,\nthe [Jaccard similarity](https://en.wikipedia.org/wiki/Jaccard_index) is computed for each mutation.\nIt is computed as `variantWithMutationCount / (variantCount + mutationCount - variantWithMutationCount)`,\n- `variantCount` is the number of sequences of the variant (i.e. the number of sequences that match the `lapisFilter`),\n- `mutationCount` is the number of sequences with the mutation\n (i.e. the number of sequences matching the `baselineLapisFilter` that have the mutation),\n- `variantWithMutationCount` is the number of sequences that belong to the variant and have the mutation\n (i.e. the `count` value that is shown in the table).\n\nTypically, this is useful when you query mutations of a certain \"variant\"\n(i.e. a certain lineage or a certain set of mutations).\nThen the `baselineLapisFilter` should be the `lapisFilter` but without the lineage or mutations.\n\nFor example:\nYou are interested in a certain lineage in a certain country: `lapisFilter={country: 'Switzerland', linage: 'XY.1.2.3'}`.\nThen the \"baseline\" should be the same filter but without the lineage: `baselineLapisFilter={country: 'Switzerland'}`.\n\nComputing the Jaccard similarity is not always meaningful, because you might not have a \"variant\"\n(e.g. when you only query for a certain country).\nIn this case you can simply omit the `baselineLapisFilter`.\n\n### Grid View\n\nThe grid view shows the proportion of each sequence symbol (nucleotide or amino acid) for each position that has a mutation.\nOnly positions with at least one mutation in the selected proportion interval are shown.\n\n### Insertions View\n\nThe insertions view shows the count of all insertions for the dataset.",
2482
2532
  "name": "MutationsComponent",
2483
2533
  "members": [
2484
2534
  {
@@ -2528,7 +2578,7 @@
2528
2578
  "text": "string"
2529
2579
  },
2530
2580
  "default": "'100%'",
2531
- "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
2581
+ "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
2532
2582
  "attribute": "width"
2533
2583
  },
2534
2584
  {
@@ -2538,7 +2588,7 @@
2538
2588
  "text": "string | undefined"
2539
2589
  },
2540
2590
  "default": "undefined",
2541
- "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
2591
+ "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
2542
2592
  "attribute": "height"
2543
2593
  },
2544
2594
  {
@@ -2595,7 +2645,7 @@
2595
2645
  "text": "string"
2596
2646
  },
2597
2647
  "default": "'100%'",
2598
- "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
2648
+ "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
2599
2649
  "fieldName": "width"
2600
2650
  },
2601
2651
  {
@@ -2604,7 +2654,7 @@
2604
2654
  "text": "string | undefined"
2605
2655
  },
2606
2656
  "default": "undefined",
2607
- "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
2657
+ "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
2608
2658
  "fieldName": "height"
2609
2659
  },
2610
2660
  {
@@ -2810,7 +2860,7 @@
2810
2860
  "text": "string"
2811
2861
  },
2812
2862
  "default": "'100%'",
2813
- "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
2863
+ "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
2814
2864
  "attribute": "width"
2815
2865
  },
2816
2866
  {
@@ -2820,7 +2870,7 @@
2820
2870
  "text": "string | undefined"
2821
2871
  },
2822
2872
  "default": "undefined",
2823
- "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
2873
+ "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
2824
2874
  "attribute": "height"
2825
2875
  },
2826
2876
  {
@@ -2888,7 +2938,7 @@
2888
2938
  "text": "string"
2889
2939
  },
2890
2940
  "default": "'100%'",
2891
- "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
2941
+ "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
2892
2942
  "fieldName": "width"
2893
2943
  },
2894
2944
  {
@@ -2897,7 +2947,7 @@
2897
2947
  "text": "string | undefined"
2898
2948
  },
2899
2949
  "default": "undefined",
2900
- "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
2950
+ "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
2901
2951
  "fieldName": "height"
2902
2952
  },
2903
2953
  {
@@ -3151,7 +3201,7 @@
3151
3201
  "text": "string"
3152
3202
  },
3153
3203
  "default": "'100%'",
3154
- "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
3204
+ "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
3155
3205
  "attribute": "width"
3156
3206
  },
3157
3207
  {
@@ -3161,7 +3211,7 @@
3161
3211
  "text": "string | undefined"
3162
3212
  },
3163
3213
  "default": "undefined",
3164
- "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
3214
+ "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
3165
3215
  "attribute": "height"
3166
3216
  },
3167
3217
  {
@@ -3266,7 +3316,7 @@
3266
3316
  "text": "string"
3267
3317
  },
3268
3318
  "default": "'100%'",
3269
- "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
3319
+ "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
3270
3320
  "fieldName": "width"
3271
3321
  },
3272
3322
  {
@@ -3275,7 +3325,7 @@
3275
3325
  "text": "string | undefined"
3276
3326
  },
3277
3327
  "default": "undefined",
3278
- "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
3328
+ "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
3279
3329
  "fieldName": "height"
3280
3330
  },
3281
3331
  {
@@ -3454,7 +3504,7 @@
3454
3504
  "text": "string"
3455
3505
  },
3456
3506
  "default": "'100%'",
3457
- "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
3507
+ "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
3458
3508
  "attribute": "width"
3459
3509
  },
3460
3510
  {
@@ -3464,7 +3514,7 @@
3464
3514
  "text": "string | undefined"
3465
3515
  },
3466
3516
  "default": "undefined",
3467
- "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
3517
+ "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
3468
3518
  "attribute": "height"
3469
3519
  },
3470
3520
  {
@@ -3541,7 +3591,7 @@
3541
3591
  "text": "string"
3542
3592
  },
3543
3593
  "default": "'100%'",
3544
- "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
3594
+ "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
3545
3595
  "fieldName": "width"
3546
3596
  },
3547
3597
  {
@@ -3550,7 +3600,7 @@
3550
3600
  "text": "string | undefined"
3551
3601
  },
3552
3602
  "default": "undefined",
3553
- "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
3603
+ "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
3554
3604
  "fieldName": "height"
3555
3605
  },
3556
3606
  {
@@ -3768,7 +3818,7 @@
3768
3818
  "text": "string"
3769
3819
  },
3770
3820
  "default": "'100%'",
3771
- "description": "The width of the component.\nNot that the map in the map view is not responsive\n(i.e. does not adjust its size when the component is resized).\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
3821
+ "description": "The width of the component.\nNot that the map in the map view is not responsive\n(i.e. does not adjust its size when the component is resized).\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
3772
3822
  "attribute": "width"
3773
3823
  },
3774
3824
  {
@@ -3778,7 +3828,7 @@
3778
3828
  "text": "string | undefined"
3779
3829
  },
3780
3830
  "default": "undefined",
3781
- "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
3831
+ "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
3782
3832
  "attribute": "height"
3783
3833
  },
3784
3834
  {
@@ -3875,7 +3925,7 @@
3875
3925
  "text": "string"
3876
3926
  },
3877
3927
  "default": "'100%'",
3878
- "description": "The width of the component.\nNot that the map in the map view is not responsive\n(i.e. does not adjust its size when the component is resized).\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
3928
+ "description": "The width of the component.\nNot that the map in the map view is not responsive\n(i.e. does not adjust its size when the component is resized).\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
3879
3929
  "fieldName": "width"
3880
3930
  },
3881
3931
  {
@@ -3884,7 +3934,7 @@
3884
3934
  "text": "string | undefined"
3885
3935
  },
3886
3936
  "default": "undefined",
3887
- "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
3937
+ "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
3888
3938
  "fieldName": "height"
3889
3939
  },
3890
3940
  {
@@ -4036,7 +4086,7 @@
4036
4086
  "text": "string"
4037
4087
  },
4038
4088
  "default": "'100%'",
4039
- "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
4089
+ "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
4040
4090
  "attribute": "width"
4041
4091
  },
4042
4092
  {
@@ -4046,7 +4096,7 @@
4046
4096
  "text": "string | undefined"
4047
4097
  },
4048
4098
  "default": "undefined",
4049
- "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
4099
+ "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
4050
4100
  "attribute": "height"
4051
4101
  }
4052
4102
  ],
@@ -4075,7 +4125,7 @@
4075
4125
  "text": "string"
4076
4126
  },
4077
4127
  "default": "'100%'",
4078
- "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
4128
+ "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
4079
4129
  "fieldName": "width"
4080
4130
  },
4081
4131
  {
@@ -4084,7 +4134,7 @@
4084
4134
  "text": "string | undefined"
4085
4135
  },
4086
4136
  "default": "undefined",
4087
- "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
4137
+ "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
4088
4138
  "fieldName": "height"
4089
4139
  }
4090
4140
  ],
@@ -4194,6 +4244,12 @@
4194
4244
  }
4195
4245
  ]
4196
4246
  },
4247
+ {
4248
+ "kind": "javascript-module",
4249
+ "path": "src/web-components/wastewaterVisualization/gs-wastewater-mutations-over-time.spec-d.ts",
4250
+ "declarations": [],
4251
+ "exports": []
4252
+ },
4197
4253
  {
4198
4254
  "kind": "javascript-module",
4199
4255
  "path": "src/web-components/wastewaterVisualization/gs-wastewater-mutations-over-time.stories.ts",
@@ -4204,7 +4260,7 @@
4204
4260
  "type": {
4205
4261
  "text": "Meta<WastewaterMutationsOverTimeProps & { infoText: string }>"
4206
4262
  },
4207
- "default": "{ title: 'Wastewater visualization/Wastewater mutations over time', component: 'gs-wastewater-mutations-over-time', argTypes: { lapisFilter: { control: 'object' }, sequenceType: { options: ['nucleotide', 'amino acid'], control: { type: 'radio' }, }, width: { control: 'text' }, height: { control: 'text' }, }, args: { lapisFilter: { versionStatus: 'LATEST_VERSION', isRevocation: false }, sequenceType: 'nucleotide', width: '100%', height: undefined, infoText: 'Some info text', maxNumberOfGridRows: 100, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, fetchMock: {}, }), tags: ['autodocs'], }"
4263
+ "default": "{ title: 'Wastewater visualization/Wastewater mutations over time', component: 'gs-wastewater-mutations-over-time', argTypes: { lapisFilter: { control: 'object' }, sequenceType: { options: ['nucleotide', 'amino acid'], control: { type: 'radio' }, }, width: { control: 'text' }, height: { control: 'text' }, }, args: { lapisFilter: { versionStatus: 'LATEST_VERSION', isRevocation: false }, sequenceType: 'nucleotide', width: '100%', height: undefined, infoText: 'Some info text', pageSizes: [10, 20, 30, 40, 50], }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, fetchMock: {}, }), tags: ['autodocs'], }"
4208
4264
  },
4209
4265
  {
4210
4266
  "kind": "variable",
@@ -4212,7 +4268,7 @@
4212
4268
  "type": {
4213
4269
  "text": "StoryObj<WastewaterMutationsOverTimeProps & { infoText: string }>"
4214
4270
  },
4215
- "default": "{ render: (args) => html` <gs-app lapis=\"${WISE_LAPIS_URL}\" .mutationAnnotations=${mutationAnnotations}> <gs-wastewater-mutations-over-time .lapisFilter=${args.lapisFilter} .sequenceType=${args.sequenceType} .width=${args.width} .height=${args.height} .maxNumberOfGridRows=${args.maxNumberOfGridRows} > <span slot=\"infoText\">${args.infoText}</span> </gs-wastewater-mutations-over-time> </gs-app> `, parameters: { fetchMock: { mocks: [ { matcher: { name: 'details', url: WISE_DETAILS_ENDPOINT, body: { fields: ['date', 'location', 'nucleotideMutationFrequency', 'aminoAcidMutationFrequency'], versionStatus: 'LATEST_VERSION', isRevocation: false, }, }, response: { status: 200, body: details, }, }, ], }, }, }"
4271
+ "default": "{ render: (args) => html` <gs-app lapis=\"${WISE_LAPIS_URL}\" .mutationAnnotations=${mutationAnnotations}> <gs-wastewater-mutations-over-time .lapisFilter=${args.lapisFilter} .sequenceType=${args.sequenceType} .width=${args.width} .height=${args.height} .pageSizes=${args.pageSizes} > <span slot=\"infoText\">${args.infoText}</span> </gs-wastewater-mutations-over-time> </gs-app> `, parameters: { fetchMock: { mocks: [ { matcher: { name: 'details', url: WISE_DETAILS_ENDPOINT, body: { fields: ['date', 'location', 'nucleotideMutationFrequency', 'aminoAcidMutationFrequency'], versionStatus: 'LATEST_VERSION', isRevocation: false, }, }, response: { status: 200, body: details, }, }, ], }, }, }"
4216
4272
  },
4217
4273
  {
4218
4274
  "kind": "variable",
@@ -4292,7 +4348,7 @@
4292
4348
  "text": "string"
4293
4349
  },
4294
4350
  "default": "'100%'",
4295
- "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
4351
+ "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
4296
4352
  "attribute": "width"
4297
4353
  },
4298
4354
  {
@@ -4302,18 +4358,18 @@
4302
4358
  "text": "string | undefined"
4303
4359
  },
4304
4360
  "default": "undefined",
4305
- "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
4361
+ "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
4306
4362
  "attribute": "height"
4307
4363
  },
4308
4364
  {
4309
4365
  "kind": "field",
4310
- "name": "maxNumberOfGridRows",
4366
+ "name": "pageSizes",
4311
4367
  "type": {
4312
- "text": "number"
4368
+ "text": "number[] | number"
4313
4369
  },
4314
- "default": "100",
4315
- "description": "The maximum number of grid rows to display.",
4316
- "attribute": "maxNumberOfGridRows"
4370
+ "default": "[10, 20, 30, 40, 50]",
4371
+ "description": "The number of rows per page, which can be selected by the user.",
4372
+ "attribute": "pageSizes"
4317
4373
  }
4318
4374
  ],
4319
4375
  "attributes": [
@@ -4341,7 +4397,7 @@
4341
4397
  "text": "string"
4342
4398
  },
4343
4399
  "default": "'100%'",
4344
- "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
4400
+ "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
4345
4401
  "fieldName": "width"
4346
4402
  },
4347
4403
  {
@@ -4350,17 +4406,17 @@
4350
4406
  "text": "string | undefined"
4351
4407
  },
4352
4408
  "default": "undefined",
4353
- "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
4409
+ "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
4354
4410
  "fieldName": "height"
4355
4411
  },
4356
4412
  {
4357
- "name": "maxNumberOfGridRows",
4413
+ "name": "pageSizes",
4358
4414
  "type": {
4359
- "text": "number"
4415
+ "text": "number[] | number"
4360
4416
  },
4361
- "default": "100",
4362
- "description": "The maximum number of grid rows to display.",
4363
- "fieldName": "maxNumberOfGridRows"
4417
+ "default": "[10, 20, 30, 40, 50]",
4418
+ "description": "The number of rows per page, which can be selected by the user.",
4419
+ "fieldName": "pageSizes"
4364
4420
  }
4365
4421
  ],
4366
4422
  "superclass": {