@genspectrum/dashboard-components 0.4.5 → 0.5.0

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 (50) hide show
  1. package/README.md +2 -2
  2. package/custom-elements.json +178 -102
  3. package/dist/dashboard-components.js +318 -147
  4. package/dist/dashboard-components.js.map +1 -1
  5. package/dist/genspectrum-components.d.ts +91 -55
  6. package/dist/style.css +34 -7
  7. package/package.json +5 -5
  8. package/src/preact/mutationComparison/mutation-comparison-venn.tsx +1 -1
  9. package/src/preact/mutationComparison/mutation-comparison.stories.tsx +18 -18
  10. package/src/preact/mutationComparison/mutation-comparison.tsx +6 -6
  11. package/src/preact/mutationComparison/queryMutationData.ts +4 -4
  12. package/src/preact/mutations/mutations.stories.tsx +3 -3
  13. package/src/preact/mutations/mutations.tsx +16 -6
  14. package/src/preact/mutations/queryMutations.ts +3 -3
  15. package/src/preact/prevalenceOverTime/__mockData__/{denominatorOneVariant.json → denominatorFilterOneDataset.json} +1 -1
  16. package/src/preact/prevalenceOverTime/__mockData__/{numeratorOneVariant.json → numeratorFilterOneDataset.json} +1 -1
  17. package/src/preact/prevalenceOverTime/prevalence-over-time-bar-chart.tsx +42 -5
  18. package/src/preact/prevalenceOverTime/prevalence-over-time-bubble-chart.tsx +26 -7
  19. package/src/preact/prevalenceOverTime/prevalence-over-time-line-chart.tsx +62 -28
  20. package/src/preact/prevalenceOverTime/prevalence-over-time.stories.tsx +26 -16
  21. package/src/preact/prevalenceOverTime/prevalence-over-time.tsx +38 -11
  22. package/src/preact/relativeGrowthAdvantage/relative-growth-advantage-chart.tsx +39 -7
  23. package/src/preact/relativeGrowthAdvantage/relative-growth-advantage.stories.tsx +10 -4
  24. package/src/preact/relativeGrowthAdvantage/relative-growth-advantage.tsx +19 -10
  25. package/src/preact/shared/charts/confideceInterval.ts +7 -2
  26. package/src/preact/shared/charts/getYAxisMax.ts +24 -0
  27. package/src/preact/shared/charts/getYAxisScale.ts +1 -3
  28. package/src/query/queryAggregateData.ts +2 -2
  29. package/src/query/queryInsertions.ts +7 -2
  30. package/src/query/querySubstitutionsOrDeletions.ts +2 -2
  31. package/src/web-components/input/gs-date-range-selector.tsx +1 -1
  32. package/src/web-components/input/gs-location-filter.tsx +1 -1
  33. package/src/web-components/input/gs-mutation-filter.tsx +1 -1
  34. package/src/web-components/input/gs-text-input.tsx +1 -1
  35. package/src/web-components/visualization/gs-aggregate.tsx +2 -2
  36. package/src/web-components/visualization/gs-mutation-comparison.stories.ts +12 -12
  37. package/src/web-components/visualization/gs-mutation-comparison.tsx +18 -19
  38. package/src/web-components/visualization/gs-mutations.stories.ts +4 -4
  39. package/src/web-components/visualization/gs-mutations.tsx +10 -11
  40. package/src/web-components/visualization/gs-prevalence-over-time.stories.ts +46 -35
  41. package/src/web-components/visualization/gs-prevalence-over-time.tsx +54 -20
  42. package/src/web-components/visualization/gs-relative-growth-advantage.stories.ts +32 -18
  43. package/src/web-components/visualization/gs-relative-growth-advantage.tsx +51 -13
  44. /package/src/preact/mutationComparison/__mockData__/{nucleotideMutationsOtherVariant.json → nucleotideMutationsOtherDataset.json} +0 -0
  45. /package/src/preact/mutationComparison/__mockData__/{nucleotideMutationsSomeVariant.json → nucleotideMutationsSomeDataset.json} +0 -0
  46. /package/src/preact/prevalenceOverTime/__mockData__/{denominator.json → denominatorFilter.json} +0 -0
  47. /package/src/preact/prevalenceOverTime/__mockData__/{numeratorEG.json → numeratorFilterEG.json} +0 -0
  48. /package/src/preact/prevalenceOverTime/__mockData__/{numeratorJN1.json → numeratorFilterJN1.json} +0 -0
  49. /package/src/preact/relativeGrowthAdvantage/__mockData__/{denominator.json → denominatorFilter.json} +0 -0
  50. /package/src/preact/relativeGrowthAdvantage/__mockData__/{numerator.json → numeratorFilter.json} +0 -0
@@ -364,7 +364,7 @@
364
364
  "text": "string"
365
365
  },
366
366
  "default": "'100%'",
367
- "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
367
+ "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
368
368
  "attribute": "width"
369
369
  },
370
370
  {
@@ -439,7 +439,7 @@
439
439
  "text": "string"
440
440
  },
441
441
  "default": "'100%'",
442
- "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
442
+ "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
443
443
  "fieldName": "width"
444
444
  },
445
445
  {
@@ -603,7 +603,7 @@
603
603
  "text": "string"
604
604
  },
605
605
  "default": "'100%'",
606
- "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
606
+ "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
607
607
  "attribute": "width"
608
608
  },
609
609
  {
@@ -651,7 +651,7 @@
651
651
  "text": "string"
652
652
  },
653
653
  "default": "'100%'",
654
- "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
654
+ "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
655
655
  "fieldName": "width"
656
656
  },
657
657
  {
@@ -789,7 +789,7 @@
789
789
  "text": "string"
790
790
  },
791
791
  "default": "'100%'",
792
- "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
792
+ "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
793
793
  "attribute": "width"
794
794
  }
795
795
  ],
@@ -825,7 +825,7 @@
825
825
  "text": "string"
826
826
  },
827
827
  "default": "'100%'",
828
- "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
828
+ "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
829
829
  "fieldName": "width"
830
830
  }
831
831
  ],
@@ -958,7 +958,7 @@
958
958
  "text": "string"
959
959
  },
960
960
  "default": "'100%'",
961
- "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
961
+ "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
962
962
  "attribute": "width"
963
963
  }
964
964
  ],
@@ -1005,7 +1005,7 @@
1005
1005
  "text": "string"
1006
1006
  },
1007
1007
  "default": "'100%'",
1008
- "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
1008
+ "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
1009
  "fieldName": "width"
1010
1010
  }
1011
1011
  ],
@@ -1219,7 +1219,7 @@
1219
1219
  "text": "string"
1220
1220
  },
1221
1221
  "default": "'100%'",
1222
- "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
1222
+ "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
1223
1223
  "attribute": "width"
1224
1224
  },
1225
1225
  {
@@ -1229,7 +1229,7 @@
1229
1229
  "text": "string"
1230
1230
  },
1231
1231
  "default": "'700px'",
1232
- "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
1232
+ "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
1233
1233
  "attribute": "height"
1234
1234
  },
1235
1235
  {
@@ -1307,7 +1307,7 @@
1307
1307
  "text": "string"
1308
1308
  },
1309
1309
  "default": "'100%'",
1310
- "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
1310
+ "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
1311
1311
  "fieldName": "width"
1312
1312
  },
1313
1313
  {
@@ -1316,7 +1316,7 @@
1316
1316
  "text": "string"
1317
1317
  },
1318
1318
  "default": "'700px'",
1319
- "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
1319
+ "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
1320
1320
  "fieldName": "height"
1321
1321
  },
1322
1322
  {
@@ -1393,7 +1393,7 @@
1393
1393
  "type": {
1394
1394
  "text": "Meta<Required<MutationComparisonProps>>"
1395
1395
  },
1396
- "default": "{ title: 'Visualization/Mutation comparison', component: 'gs-mutation-comparison', argTypes: { variants: { control: 'object' }, sequenceType: { options: ['nucleotide', 'amino acid'], control: { type: 'radio' }, }, views: { options: ['table', 'venn'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, headline: { control: 'text' }, pageSize: { control: 'object' }, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
1396
+ "default": "{ title: 'Visualization/Mutation comparison', component: 'gs-mutation-comparison', argTypes: { lapisFilters: { control: 'object' }, sequenceType: { options: ['nucleotide', 'amino acid'], control: { type: 'radio' }, }, views: { options: ['table', 'venn'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, headline: { control: 'text' }, pageSize: { control: 'object' }, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
1397
1397
  },
1398
1398
  {
1399
1399
  "kind": "variable",
@@ -1401,7 +1401,7 @@
1401
1401
  "type": {
1402
1402
  "text": "StoryObj<Required<MutationComparisonProps>>"
1403
1403
  },
1404
- "default": "{ ...Template, args: { variants: [ { displayName: 'Some variant', lapisFilter: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo }, }, { displayName: 'Other variant', lapisFilter: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateFrom, dateTo, }, }, ], sequenceType: 'nucleotide', views: ['table', 'venn'], width: '100%', height: '700px', headline: 'Mutation comparison', pageSize: 10, }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'nucleotideMutationsSomeVariant', url: NUCLEOTIDE_MUTATIONS_ENDPOINT, body: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo, minProportion: 0, }, }, response: { status: 200, body: nucleotideMutationsSomeVariant, }, }, { matcher: { name: 'nucleotideMutationsOtherVariant', url: NUCLEOTIDE_MUTATIONS_ENDPOINT, body: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateFrom, dateTo, minProportion: 0, }, }, response: { status: 200, body: nucleotideMutationsOtherVariant, }, }, ], }, }, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-comparison'); await step('Min and max proportions should be 50% and 100%', async () => { const minInput = () => canvas.getAllByLabelText('%')[0]; const maxInput = () => canvas.getAllByLabelText('%')[1]; await waitFor(() => expect(minInput()).toHaveValue(50)); await waitFor(() => expect(maxInput()).toHaveValue(100)); }); }, }"
1404
+ "default": "{ ...Template, args: { lapisFilters: [ { displayName: 'Some dataset', lapisFilter: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo }, }, { displayName: 'Other dataset', lapisFilter: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateFrom, dateTo, }, }, ], sequenceType: 'nucleotide', views: ['table', 'venn'], width: '100%', height: '700px', headline: 'Mutation comparison', pageSize: 10, }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'nucleotideMutationsSomeDataset', url: NUCLEOTIDE_MUTATIONS_ENDPOINT, body: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo, minProportion: 0, }, }, response: { status: 200, body: nucleotideMutationsSomeDataset, }, }, { matcher: { name: 'nucleotideMutationsOtherDataset', url: NUCLEOTIDE_MUTATIONS_ENDPOINT, body: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateFrom, dateTo, minProportion: 0, }, }, response: { status: 200, body: nucleotideMutationsOtherDataset, }, }, ], }, }, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-comparison'); await step('Min and max proportions should be 50% and 100%', async () => { const minInput = () => canvas.getAllByLabelText('%')[0]; const maxInput = () => canvas.getAllByLabelText('%')[1]; await waitFor(() => expect(minInput()).toHaveValue(50)); await waitFor(() => expect(maxInput()).toHaveValue(100)); }); }, }"
1405
1405
  },
1406
1406
  {
1407
1407
  "kind": "variable",
@@ -1445,18 +1445,18 @@
1445
1445
  "declarations": [
1446
1446
  {
1447
1447
  "kind": "class",
1448
- "description": "## Context\n\nThis component allows to compare mutations between different variants.\nA variant is defined by its LAPIS filter.\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\nand the proportions with which the mutation occurs in the respective variant.\nIt only shows mutations that are present in at least one of the variants\nand where the proportion is within the selected proportion interval for at least one variant.\n\n### Venn View\n\nThe Venn view shows the overlap of mutations between the variants in a Venn diagram.\nA variant is considered to have a certain mutation,\nif the proportion of the mutation in the variant is within the selected proportion interval.\nThus, changing the proportion interval may change a mutations from being \"common\" between variant\nto being \"for one variant only\".",
1448
+ "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\".",
1449
1449
  "name": "MutationComparisonComponent",
1450
1450
  "members": [
1451
1451
  {
1452
1452
  "kind": "field",
1453
- "name": "variants",
1453
+ "name": "lapisFilters",
1454
1454
  "type": {
1455
1455
  "text": "{\n lapisFilter: Record<string, string | number | null | boolean>;\n displayName: string;\n }[]"
1456
1456
  },
1457
1457
  "default": "[]",
1458
- "description": "Required.\n\nAn array of variants to compare.\n\nThe `lapisFilter` will be sent as is to LAPIS to filter the mutation data.\nIt must be a valid LAPIS filter object.\n\nThe `displayName` will be used as the label for the variant in the views.\nIt should be human-readable.",
1459
- "attribute": "variants"
1458
+ "description": "Required.\n\nAn array of LAPIS filters to select the data to compare.\n\nThe `lapisFilter` will be sent as is to LAPIS to filter the mutation data.\nIt must be a valid LAPIS filter object.\n\nThe `displayName` will be used as the label for the filtered dataset in the views.\nIt should be human-readable.",
1459
+ "attribute": "lapisFilters"
1460
1460
  },
1461
1461
  {
1462
1462
  "kind": "field",
@@ -1485,7 +1485,7 @@
1485
1485
  "text": "string"
1486
1486
  },
1487
1487
  "default": "'100%'",
1488
- "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
1488
+ "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
1489
1489
  "attribute": "width"
1490
1490
  },
1491
1491
  {
@@ -1495,7 +1495,7 @@
1495
1495
  "text": "string"
1496
1496
  },
1497
1497
  "default": "'700px'",
1498
- "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
1498
+ "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
1499
1499
  "attribute": "height"
1500
1500
  },
1501
1501
  {
@@ -1521,13 +1521,13 @@
1521
1521
  ],
1522
1522
  "attributes": [
1523
1523
  {
1524
- "name": "variants",
1524
+ "name": "lapisFilters",
1525
1525
  "type": {
1526
1526
  "text": "{\n lapisFilter: Record<string, string | number | null | boolean>;\n displayName: string;\n }[]"
1527
1527
  },
1528
1528
  "default": "[]",
1529
- "description": "Required.\n\nAn array of variants to compare.\n\nThe `lapisFilter` will be sent as is to LAPIS to filter the mutation data.\nIt must be a valid LAPIS filter object.\n\nThe `displayName` will be used as the label for the variant in the views.\nIt should be human-readable.",
1530
- "fieldName": "variants"
1529
+ "description": "Required.\n\nAn array of LAPIS filters to select the data to compare.\n\nThe `lapisFilter` will be sent as is to LAPIS to filter the mutation data.\nIt must be a valid LAPIS filter object.\n\nThe `displayName` will be used as the label for the filtered dataset in the views.\nIt should be human-readable.",
1530
+ "fieldName": "lapisFilters"
1531
1531
  },
1532
1532
  {
1533
1533
  "name": "sequenceType",
@@ -1553,7 +1553,7 @@
1553
1553
  "text": "string"
1554
1554
  },
1555
1555
  "default": "'100%'",
1556
- "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
1556
+ "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
1557
1557
  "fieldName": "width"
1558
1558
  },
1559
1559
  {
@@ -1562,7 +1562,7 @@
1562
1562
  "text": "string"
1563
1563
  },
1564
1564
  "default": "'700px'",
1565
- "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
1565
+ "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
1566
1566
  "fieldName": "height"
1567
1567
  },
1568
1568
  {
@@ -1621,7 +1621,7 @@
1621
1621
  "type": {
1622
1622
  "text": "Meta<Required<MutationsProps>>"
1623
1623
  },
1624
- "default": "{ title: 'Visualization/Mutations', component: 'gs-mutations', argTypes: { variant: { control: 'object' }, sequenceType: { options: ['nucleotide', 'amino acid'], control: { type: 'radio' }, }, views: { options: ['table', 'grid', 'insertions'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, headline: { control: 'text' }, pageSize: { control: 'object' }, }, args: { variant: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo: '2022-01-01' }, sequenceType: 'nucleotide', views: ['grid', 'table', 'insertions'], width: '100%', height: '700px', headline: 'Mutations', pageSize: 10, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
1624
+ "default": "{ title: 'Visualization/Mutations', component: 'gs-mutations', argTypes: { lapisFilter: { control: 'object' }, sequenceType: { options: ['nucleotide', 'amino acid'], control: { type: 'radio' }, }, views: { options: ['table', 'grid', 'insertions'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, headline: { control: 'text' }, pageSize: { control: 'object' }, }, args: { lapisFilter: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo: '2022-01-01' }, sequenceType: 'nucleotide', views: ['grid', 'table', 'insertions'], width: '100%', height: '700px', headline: 'Mutations', pageSize: 10, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
1625
1625
  },
1626
1626
  {
1627
1627
  "kind": "variable",
@@ -1689,18 +1689,18 @@
1689
1689
  "declarations": [
1690
1690
  {
1691
1691
  "kind": "class",
1692
- "description": "## Context\n\nThis component displays mutations (substitutions, deletions and insertions) for a given variant.\n\n## Views\n\n### Table View\n\nThe table view shows all substitutions and deletions for the given variant.\nIt shows the type (substitution or deletion), the total count of the mutation\nand the proportion of the mutation in the variant.\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### 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 given variant.",
1692
+ "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### 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.",
1693
1693
  "name": "MutationsComponent",
1694
1694
  "members": [
1695
1695
  {
1696
1696
  "kind": "field",
1697
- "name": "variant",
1697
+ "name": "lapisFilter",
1698
1698
  "type": {
1699
1699
  "text": "Record<string, string | number | null | boolean>"
1700
1700
  },
1701
1701
  "default": "{}",
1702
- "description": "Required.\n\nThe `variant` will be sent as is to LAPIS to filter the mutation data.\nIt must be a valid LAPIS filter object.",
1703
- "attribute": "variant"
1702
+ "description": "Required.\n\nLAPIS filter to select the displayed data.",
1703
+ "attribute": "lapisFilter"
1704
1704
  },
1705
1705
  {
1706
1706
  "kind": "field",
@@ -1729,7 +1729,7 @@
1729
1729
  "text": "string"
1730
1730
  },
1731
1731
  "default": "'100%'",
1732
- "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
1732
+ "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
1733
1733
  "attribute": "width"
1734
1734
  },
1735
1735
  {
@@ -1739,7 +1739,7 @@
1739
1739
  "text": "string"
1740
1740
  },
1741
1741
  "default": "'700px'",
1742
- "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
1742
+ "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
1743
1743
  "attribute": "height"
1744
1744
  },
1745
1745
  {
@@ -1765,13 +1765,13 @@
1765
1765
  ],
1766
1766
  "attributes": [
1767
1767
  {
1768
- "name": "variant",
1768
+ "name": "lapisFilter",
1769
1769
  "type": {
1770
1770
  "text": "Record<string, string | number | null | boolean>"
1771
1771
  },
1772
1772
  "default": "{}",
1773
- "description": "Required.\n\nThe `variant` will be sent as is to LAPIS to filter the mutation data.\nIt must be a valid LAPIS filter object.",
1774
- "fieldName": "variant"
1773
+ "description": "Required.\n\nLAPIS filter to select the displayed data.",
1774
+ "fieldName": "lapisFilter"
1775
1775
  },
1776
1776
  {
1777
1777
  "name": "sequenceType",
@@ -1797,7 +1797,7 @@
1797
1797
  "text": "string"
1798
1798
  },
1799
1799
  "default": "'100%'",
1800
- "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
1800
+ "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
1801
1801
  "fieldName": "width"
1802
1802
  },
1803
1803
  {
@@ -1806,7 +1806,7 @@
1806
1806
  "text": "string"
1807
1807
  },
1808
1808
  "default": "'700px'",
1809
- "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
1809
+ "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
1810
1810
  "fieldName": "height"
1811
1811
  },
1812
1812
  {
@@ -1863,49 +1863,49 @@
1863
1863
  "kind": "variable",
1864
1864
  "name": "meta",
1865
1865
  "type": {
1866
- "text": "Meta<Required<PrevalenceOverTimeProps>>"
1866
+ "text": "Meta<Required<PrevalenceOverTimeComponentProps>>"
1867
1867
  },
1868
- "default": "{ title: 'Visualization/Prevalence over time', component: 'gs-prevalence-over-time', argTypes: { numerator: { control: 'object' }, denominator: { control: 'object' }, granularity: { options: ['day', 'week', 'month', 'year'], control: { type: 'radio' }, }, smoothingWindow: { control: 'number' }, views: { options: ['bar', 'line', 'bubble', 'table'], control: { type: 'check' }, }, confidenceIntervalMethods: { options: ['wilson'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, headline: { control: 'text' }, pageSize: { control: 'object' }, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
1868
+ "default": "{ title: 'Visualization/Prevalence over time', component: 'gs-prevalence-over-time', argTypes: { numeratorFilter: { control: 'object' }, denominatorFilter: { control: 'object' }, granularity: { options: ['day', 'week', 'month', 'year'], control: { type: 'radio' }, }, smoothingWindow: { control: 'number' }, views: { options: ['bar', 'line', 'bubble', 'table'], control: { type: 'check' }, }, confidenceIntervalMethods: { options: ['wilson'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, headline: { control: 'text' }, pageSize: { control: 'object' }, yAxisMaxLinear: { control: 'object' }, yAxisMaxLogarithmic: { control: 'object' }, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
1869
1869
  },
1870
1870
  {
1871
1871
  "kind": "variable",
1872
- "name": "TwoVariants",
1872
+ "name": "TwoDatasets",
1873
1873
  "type": {
1874
- "text": "StoryObj<Required<PrevalenceOverTimeProps>>"
1874
+ "text": "StoryObj<Required<PrevalenceOverTimeComponentProps>>"
1875
1875
  },
1876
- "default": "{ ...Template, args: { numerator: [ { displayName: 'EG', lapisFilter: { country: 'USA', pangoLineage: 'EG*', dateFrom: '2023-01-01' } }, { displayName: 'JN.1', lapisFilter: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01' } }, ], denominator: { country: 'USA', dateFrom: '2023-01-01' }, granularity: 'month', smoothingWindow: 0, views: ['bar', 'line', 'bubble', 'table'], confidenceIntervalMethods: ['wilson'], width: '100%', height: '700px', headline: 'Prevalence over time', lapisDateField: 'date', pageSize: 10, }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'numeratorEG', url: AGGREGATED_ENDPOINT, body: { country: 'USA', pangoLineage: 'EG*', dateFrom: '2023-01-01', fields: ['date'], }, }, response: { status: 200, body: numeratorEG, }, }, { matcher: { name: 'numeratorJN1', url: AGGREGATED_ENDPOINT, body: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01', fields: ['date'], }, }, response: { status: 200, body: numeratorJN1, }, }, { matcher: { name: 'denominator', url: AGGREGATED_ENDPOINT, body: { country: 'USA', dateFrom: '2023-01-01', fields: ['date'], }, }, response: { status: 200, body: denominator, }, }, ], }, }, }"
1876
+ "default": "{ ...Template, args: { numeratorFilter: [ { displayName: 'EG', lapisFilter: { country: 'USA', pangoLineage: 'EG*', dateFrom: '2023-01-01' } }, { displayName: 'JN.1', lapisFilter: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01' } }, ], denominatorFilter: { country: 'USA', dateFrom: '2023-01-01' }, granularity: 'month', smoothingWindow: 0, views: ['bar', 'line', 'bubble', 'table'], confidenceIntervalMethods: ['wilson'], width: '100%', height: '700px', headline: 'Prevalence over time', lapisDateField: 'date', pageSize: 10, yAxisMaxLinear: 1, yAxisMaxLogarithmic: 'limitTo1', }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'numeratorEG', url: AGGREGATED_ENDPOINT, body: { country: 'USA', pangoLineage: 'EG*', dateFrom: '2023-01-01', fields: ['date'], }, }, response: { status: 200, body: numeratorFilterEG, }, }, { matcher: { name: 'numeratorJN1', url: AGGREGATED_ENDPOINT, body: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01', fields: ['date'], }, }, response: { status: 200, body: numeratorFilterJN1, }, }, { matcher: { name: 'denominator', url: AGGREGATED_ENDPOINT, body: { country: 'USA', dateFrom: '2023-01-01', fields: ['date'], }, }, response: { status: 200, body: denominatorFilter, }, }, ], }, }, }"
1877
1877
  },
1878
1878
  {
1879
1879
  "kind": "variable",
1880
- "name": "OneVariant",
1880
+ "name": "OneDataset",
1881
1881
  "type": {
1882
- "text": "StoryObj<Required<PrevalenceOverTimeProps>>"
1882
+ "text": "StoryObj<Required<PrevalenceOverTimeComponentProps>>"
1883
1883
  },
1884
- "default": "{ ...Template, args: { numerator: { displayName: 'EG', lapisFilter: { country: 'USA', pangoLineage: 'BA.2.86*', dateFrom: '2023-10-01' }, }, denominator: { country: 'USA', dateFrom: '2023-10-01' }, granularity: 'day', smoothingWindow: 7, views: ['bar', 'line', 'bubble', 'table'], confidenceIntervalMethods: ['wilson'], width: '100%', height: '700px', headline: 'Prevalence over time', lapisDateField: 'date', pageSize: 10, }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'numeratorOneVariant', url: AGGREGATED_ENDPOINT, body: { country: 'USA', pangoLineage: 'BA.2.86*', dateFrom: '2023-10-01', fields: ['date'], }, }, response: { status: 200, body: numeratorOneVariant, }, }, { matcher: { name: 'denominatorOneVariant', url: AGGREGATED_ENDPOINT, body: { country: 'USA', dateFrom: '2023-10-01', fields: ['date'], }, }, response: { status: 200, body: denominatorOneVariant, }, }, ], }, }, }"
1884
+ "default": "{ ...Template, args: { numeratorFilter: { displayName: 'EG', lapisFilter: { country: 'USA', pangoLineage: 'BA.2.86*', dateFrom: '2023-10-01' }, }, denominatorFilter: { country: 'USA', dateFrom: '2023-10-01' }, granularity: 'week', smoothingWindow: 2, views: ['bar', 'line', 'bubble', 'table'], confidenceIntervalMethods: ['wilson'], width: '100%', height: '700px', headline: 'Prevalence over time', lapisDateField: 'date', pageSize: 10, yAxisMaxLinear: 1, yAxisMaxLogarithmic: 'limitTo1', }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'numeratorOneDataset', url: AGGREGATED_ENDPOINT, body: { country: 'USA', pangoLineage: 'BA.2.86*', dateFrom: '2023-10-01', fields: ['date'], }, }, response: { status: 200, body: numeratorFilterOneDataset, }, }, { matcher: { name: 'denominatorOneDataset', url: AGGREGATED_ENDPOINT, body: { country: 'USA', dateFrom: '2023-10-01', fields: ['date'], }, }, response: { status: 200, body: denominatorFilterOneDataset, }, }, ], }, }, }"
1885
1885
  },
1886
1886
  {
1887
1887
  "kind": "variable",
1888
- "name": "OneVariantOnLineTab",
1888
+ "name": "OneDatasetOnLineTab",
1889
1889
  "type": {
1890
- "text": "StoryObj<Required<PrevalenceOverTimeProps>>"
1890
+ "text": "StoryObj<Required<PrevalenceOverTimeComponentProps>>"
1891
1891
  },
1892
- "default": "{ ...OneVariant, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-prevalence-over-time'); await waitFor(() => expect(canvas.getByRole('button', { name: 'Line' })).toBeInTheDocument()); await fireEvent.click(canvas.getByRole('button', { name: 'Line' })); }, }"
1892
+ "default": "{ ...OneDataset, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-prevalence-over-time'); await waitFor(() => expect(canvas.getByRole('button', { name: 'Line' })).toBeInTheDocument()); await fireEvent.click(canvas.getByRole('button', { name: 'Line' })); }, }"
1893
1893
  },
1894
1894
  {
1895
1895
  "kind": "variable",
1896
- "name": "OneVariantOnBubbleTab",
1896
+ "name": "OneDatasetOnBubbleTab",
1897
1897
  "type": {
1898
- "text": "StoryObj<Required<PrevalenceOverTimeProps>>"
1898
+ "text": "StoryObj<Required<PrevalenceOverTimeComponentProps>>"
1899
1899
  },
1900
- "default": "{ ...OneVariant, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-prevalence-over-time'); await waitFor(() => expect(canvas.getByRole('button', { name: 'Bubble' })).toBeInTheDocument()); await fireEvent.click(canvas.getByRole('button', { name: 'Bubble' })); }, }"
1900
+ "default": "{ ...OneDataset, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-prevalence-over-time'); await waitFor(() => expect(canvas.getByRole('button', { name: 'Bubble' })).toBeInTheDocument()); await fireEvent.click(canvas.getByRole('button', { name: 'Bubble' })); }, }"
1901
1901
  },
1902
1902
  {
1903
1903
  "kind": "variable",
1904
- "name": "OneVariantOnTableTab",
1904
+ "name": "OneDatasetOnTableTab",
1905
1905
  "type": {
1906
- "text": "StoryObj<Required<PrevalenceOverTimeProps>>"
1906
+ "text": "StoryObj<Required<PrevalenceOverTimeComponentProps>>"
1907
1907
  },
1908
- "default": "{ ...OneVariant, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-prevalence-over-time'); await waitFor(() => expect(canvas.getByRole('button', { name: 'Table' })).toBeInTheDocument()); await fireEvent.click(canvas.getByRole('button', { name: 'Table' })); }, }"
1908
+ "default": "{ ...OneDataset, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-prevalence-over-time'); await waitFor(() => expect(canvas.getByRole('button', { name: 'Table' })).toBeInTheDocument()); await fireEvent.click(canvas.getByRole('button', { name: 'Table' })); }, }"
1909
1909
  }
1910
1910
  ],
1911
1911
  "exports": [
@@ -1919,41 +1919,41 @@
1919
1919
  },
1920
1920
  {
1921
1921
  "kind": "js",
1922
- "name": "TwoVariants",
1922
+ "name": "TwoDatasets",
1923
1923
  "declaration": {
1924
- "name": "TwoVariants",
1924
+ "name": "TwoDatasets",
1925
1925
  "module": "src/web-components/visualization/gs-prevalence-over-time.stories.ts"
1926
1926
  }
1927
1927
  },
1928
1928
  {
1929
1929
  "kind": "js",
1930
- "name": "OneVariant",
1930
+ "name": "OneDataset",
1931
1931
  "declaration": {
1932
- "name": "OneVariant",
1932
+ "name": "OneDataset",
1933
1933
  "module": "src/web-components/visualization/gs-prevalence-over-time.stories.ts"
1934
1934
  }
1935
1935
  },
1936
1936
  {
1937
1937
  "kind": "js",
1938
- "name": "OneVariantOnLineTab",
1938
+ "name": "OneDatasetOnLineTab",
1939
1939
  "declaration": {
1940
- "name": "OneVariantOnLineTab",
1940
+ "name": "OneDatasetOnLineTab",
1941
1941
  "module": "src/web-components/visualization/gs-prevalence-over-time.stories.ts"
1942
1942
  }
1943
1943
  },
1944
1944
  {
1945
1945
  "kind": "js",
1946
- "name": "OneVariantOnBubbleTab",
1946
+ "name": "OneDatasetOnBubbleTab",
1947
1947
  "declaration": {
1948
- "name": "OneVariantOnBubbleTab",
1948
+ "name": "OneDatasetOnBubbleTab",
1949
1949
  "module": "src/web-components/visualization/gs-prevalence-over-time.stories.ts"
1950
1950
  }
1951
1951
  },
1952
1952
  {
1953
1953
  "kind": "js",
1954
- "name": "OneVariantOnTableTab",
1954
+ "name": "OneDatasetOnTableTab",
1955
1955
  "declaration": {
1956
- "name": "OneVariantOnTableTab",
1956
+ "name": "OneDatasetOnTableTab",
1957
1957
  "module": "src/web-components/visualization/gs-prevalence-over-time.stories.ts"
1958
1958
  }
1959
1959
  }
@@ -1965,28 +1965,28 @@
1965
1965
  "declarations": [
1966
1966
  {
1967
1967
  "kind": "class",
1968
- "description": "## Context\n\nThis component displays the prevalence over time of one or more variants.\nThe prevalence is calculated as the ratio of the number of cases of each variant given as `numerator`\nto the number of cases of the variant given as `denominator`.\n\nIn the chart views,\n- the user can select whether to display a confidence interval (not available in the bubble chart).\n The confidence interval is calculated using [Wilson score interval](https://en.wikipedia.org/wiki/Binomial_proportion_confidence_interval),\n with a confidence level of 95%.\n- the x-axis shows time steps in the selected `granularity`.\n- the user can select the y-axis scale (linear, logistic, logit).\n\n## Views\n\n### Bar View\n\nDisplays the prevalence over time as a bar chart.\nShows a bar for each variant in the `numerator` on every time step.\n\n### Line View\n\nDisplays the prevalence over time as a line chart.\nEach data point is connected for better visibility.\nShows a line for each variant in the `numerator`.\n\n### Bubble View\n\nDisplays the prevalence over time as a bubble chart.\nThe size of the bubbles represents the number of cases of the `denominator` variant.\nThe height of the bubbles represents the prevalence of the `numerator` variants.\n\n### Table View\n\nDisplays the prevalence over time as a table with one row per time point.",
1968
+ "description": "## Context\n\nThis component displays the prevalence over time of one or more datasets, selected by LAPIS filters.\nThe prevalence is calculated as the ratio of the number of cases of each dataset to the number of cases of a reference dataset.\nThe reference dataset is also selected by a LAPIS filter.\n\nIn the chart views,\n- the user can select whether to display a confidence interval (not available in the bubble chart).\n The confidence interval is calculated using [Wilson score interval](https://en.wikipedia.org/wiki/Binomial_proportion_confidence_interval),\n with a confidence level of 95%.\n- the x-axis shows time steps in the selected `granularity`.\n- the user can select the y-axis scale (linear, logistic, logit).\n\n## Views\n\n### Bar View\n\nDisplays the prevalence over time as a bar chart.\nShows a bar for each dataset of the `numeratorFilter` on every time step.\n\n### Line View\n\nDisplays the prevalence over time as a line chart.\nEach data point is connected for better visibility.\nShows a line for each dataset of the `numeratorFilter`.\n\n### Bubble View\n\nDisplays the prevalence over time as a bubble chart.\nThe size of the bubbles represents the number of cases of the reference, defined by the `denominatorFilter`.\nThe height of the bubbles represents the prevalence of the datasets selected by the `numeratorFilters`.\n\n### Table View\n\nDisplays the prevalence over time as a table with one row per time point.",
1969
1969
  "name": "PrevalenceOverTimeComponent",
1970
1970
  "members": [
1971
1971
  {
1972
1972
  "kind": "field",
1973
- "name": "numerator",
1973
+ "name": "numeratorFilter",
1974
1974
  "type": {
1975
1975
  "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 }[]"
1976
1976
  },
1977
1977
  "default": "{ displayName: '', lapisFilter: {} }",
1978
- "description": "Required.\n\nEither a single variant or an array of variants to compare.\nThis must be a valid LAPIS filter object with an additional `displayName` property\nwhich will be used as the label for the variant in the views,\nor an array of such objects.",
1979
- "attribute": "numerator"
1978
+ "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.",
1979
+ "attribute": "numeratorFilter"
1980
1980
  },
1981
1981
  {
1982
1982
  "kind": "field",
1983
- "name": "denominator",
1983
+ "name": "denominatorFilter",
1984
1984
  "type": {
1985
1985
  "text": "Record<string, string | number | null | boolean>"
1986
1986
  },
1987
1987
  "default": "{}",
1988
- "description": "Required.\n\nThe variant that the variants in `numerator` are compared to.",
1989
- "attribute": "denominator"
1988
+ "description": "Required.\n\nThe LAPIS filter, to select the data of the reference.\nIt must be a valid LAPIS filter object.",
1989
+ "attribute": "denominatorFilter"
1990
1990
  },
1991
1991
  {
1992
1992
  "kind": "field",
@@ -2045,7 +2045,7 @@
2045
2045
  "text": "string"
2046
2046
  },
2047
2047
  "default": "'100%'",
2048
- "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
2048
+ "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
2049
2049
  "attribute": "width"
2050
2050
  },
2051
2051
  {
@@ -2055,7 +2055,7 @@
2055
2055
  "text": "string"
2056
2056
  },
2057
2057
  "default": "'700px'",
2058
- "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
2058
+ "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
2059
2059
  "attribute": "height"
2060
2060
  },
2061
2061
  {
@@ -2077,26 +2077,46 @@
2077
2077
  "default": "false",
2078
2078
  "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).",
2079
2079
  "attribute": "pageSize"
2080
+ },
2081
+ {
2082
+ "kind": "field",
2083
+ "name": "yAxisMaxLinear",
2084
+ "type": {
2085
+ "text": "'maxInData' | 'limitTo1' | number"
2086
+ },
2087
+ "default": "1",
2088
+ "description": "The maximum value for the y-axis on all graphs in linear view.\nIf set to a number, the maximum value is set to this number.\nIf set to `maxInData`, the maximum value is set to the maximum value in the data.\nIf set to `limitTo1`, the maximum value is set to `min(1, the maximum value in the data)`.\nIf not set, the maximum value is set to the default value (1).",
2089
+ "attribute": "yAxisMaxLinear"
2090
+ },
2091
+ {
2092
+ "kind": "field",
2093
+ "name": "yAxisMaxLogarithmic",
2094
+ "type": {
2095
+ "text": "'maxInData' | 'limitTo1' | number"
2096
+ },
2097
+ "default": "1",
2098
+ "description": "The maximum value for the y-axis on all graphs in logarithmic view.\nIf set to a number, the maximum value is set to this number.\nIf set to `maxInData`, the maximum value is set to the maximum value in the data.\nIf set to `limitTo1`, the maximum value is set to `min(1, the maximum value in the data)`.\nIf not set, the maximum value is set to the default value (1).",
2099
+ "attribute": "yAxisMaxLogarithmic"
2080
2100
  }
2081
2101
  ],
2082
2102
  "attributes": [
2083
2103
  {
2084
- "name": "numerator",
2104
+ "name": "numeratorFilter",
2085
2105
  "type": {
2086
2106
  "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 }[]"
2087
2107
  },
2088
2108
  "default": "{ displayName: '', lapisFilter: {} }",
2089
- "description": "Required.\n\nEither a single variant or an array of variants to compare.\nThis must be a valid LAPIS filter object with an additional `displayName` property\nwhich will be used as the label for the variant in the views,\nor an array of such objects.",
2090
- "fieldName": "numerator"
2109
+ "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.",
2110
+ "fieldName": "numeratorFilter"
2091
2111
  },
2092
2112
  {
2093
- "name": "denominator",
2113
+ "name": "denominatorFilter",
2094
2114
  "type": {
2095
2115
  "text": "Record<string, string | number | null | boolean>"
2096
2116
  },
2097
2117
  "default": "{}",
2098
- "description": "Required.\n\nThe variant that the variants in `numerator` are compared to.",
2099
- "fieldName": "denominator"
2118
+ "description": "Required.\n\nThe LAPIS filter, to select the data of the reference.\nIt must be a valid LAPIS filter object.",
2119
+ "fieldName": "denominatorFilter"
2100
2120
  },
2101
2121
  {
2102
2122
  "name": "granularity",
@@ -2149,7 +2169,7 @@
2149
2169
  "text": "string"
2150
2170
  },
2151
2171
  "default": "'100%'",
2152
- "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
2172
+ "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
2153
2173
  "fieldName": "width"
2154
2174
  },
2155
2175
  {
@@ -2158,7 +2178,7 @@
2158
2178
  "text": "string"
2159
2179
  },
2160
2180
  "default": "'700px'",
2161
- "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
2181
+ "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
2162
2182
  "fieldName": "height"
2163
2183
  },
2164
2184
  {
@@ -2178,6 +2198,24 @@
2178
2198
  "default": "false",
2179
2199
  "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).",
2180
2200
  "fieldName": "pageSize"
2201
+ },
2202
+ {
2203
+ "name": "yAxisMaxLinear",
2204
+ "type": {
2205
+ "text": "'maxInData' | 'limitTo1' | number"
2206
+ },
2207
+ "default": "1",
2208
+ "description": "The maximum value for the y-axis on all graphs in linear view.\nIf set to a number, the maximum value is set to this number.\nIf set to `maxInData`, the maximum value is set to the maximum value in the data.\nIf set to `limitTo1`, the maximum value is set to `min(1, the maximum value in the data)`.\nIf not set, the maximum value is set to the default value (1).",
2209
+ "fieldName": "yAxisMaxLinear"
2210
+ },
2211
+ {
2212
+ "name": "yAxisMaxLogarithmic",
2213
+ "type": {
2214
+ "text": "'maxInData' | 'limitTo1' | number"
2215
+ },
2216
+ "default": "1",
2217
+ "description": "The maximum value for the y-axis on all graphs in logarithmic view.\nIf set to a number, the maximum value is set to this number.\nIf set to `maxInData`, the maximum value is set to the maximum value in the data.\nIf set to `limitTo1`, the maximum value is set to `min(1, the maximum value in the data)`.\nIf not set, the maximum value is set to the default value (1).",
2218
+ "fieldName": "yAxisMaxLogarithmic"
2181
2219
  }
2182
2220
  ],
2183
2221
  "superclass": {
@@ -2215,17 +2253,17 @@
2215
2253
  "kind": "variable",
2216
2254
  "name": "meta",
2217
2255
  "type": {
2218
- "text": "Meta<RelativeGrowthAdvantageProps>"
2256
+ "text": "Meta<RelativeGrowthAdvantageComponentProps>"
2219
2257
  },
2220
- "default": "{ title: 'Visualization/Relative growth advantage', component: 'gs-relative-growth-advantage', argTypes: { numerator: { control: 'object' }, denominator: { control: 'object' }, generationTime: { control: 'number' }, views: { options: ['line'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, headline: { control: 'text' }, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
2258
+ "default": "{ title: 'Visualization/Relative growth advantage', component: 'gs-relative-growth-advantage', argTypes: { numeratorFilter: { control: 'object' }, denominatorFilter: { control: 'object' }, generationTime: { control: 'number' }, views: { options: ['line'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, headline: { control: 'text' }, yAxisMaxLinear: { control: 'object' }, yAxisMaxLogarithmic: { control: 'object' }, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
2221
2259
  },
2222
2260
  {
2223
2261
  "kind": "variable",
2224
2262
  "name": "Default",
2225
2263
  "type": {
2226
- "text": "StoryObj<Required<RelativeGrowthAdvantageProps>>"
2264
+ "text": "StoryObj<Required<RelativeGrowthAdvantageComponentProps>>"
2227
2265
  },
2228
- "default": "{ ...Template, args: { numerator: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateFrom: '2020-12-01', dateTo: '2021-03-01' }, denominator: { country: 'Switzerland', dateFrom: '2020-12-01', dateTo: '2021-03-01' }, generationTime: 7, views: ['line'], width: '100%', height: '700px', headline: 'Relative growth advantage', lapisDateField: 'date', }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'numerator', url: AGGREGATED_ENDPOINT, body: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateFrom: '2020-12-01', dateTo: '2021-03-01', fields: ['date'], }, }, response: { status: 200, body: numerator, }, }, { matcher: { name: 'denominator', url: AGGREGATED_ENDPOINT, body: { country: 'Switzerland', dateFrom: '2020-12-01', dateTo: '2021-03-01', fields: ['date'], }, }, response: { status: 200, body: denominator, }, }, ], }, }, }"
2266
+ "default": "{ ...Template, args: { numeratorFilter: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateFrom: '2020-12-01', dateTo: '2021-03-01', }, denominatorFilter: { country: 'Switzerland', dateFrom: '2020-12-01', dateTo: '2021-03-01' }, generationTime: 7, views: ['line'], width: '100%', height: '700px', headline: 'Relative growth advantage', lapisDateField: 'date', yAxisMaxLinear: 1, yAxisMaxLogarithmic: 'limitTo1', }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'numeratorFilter', url: AGGREGATED_ENDPOINT, body: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateFrom: '2020-12-01', dateTo: '2021-03-01', fields: ['date'], }, }, response: { status: 200, body: numeratorFilter, }, }, { matcher: { name: 'denominatorFilter', url: AGGREGATED_ENDPOINT, body: { country: 'Switzerland', dateFrom: '2020-12-01', dateTo: '2021-03-01', fields: ['date'], }, }, response: { status: 200, body: denominatorFilter, }, }, ], }, }, }"
2229
2267
  }
2230
2268
  ],
2231
2269
  "exports": [
@@ -2253,28 +2291,28 @@
2253
2291
  "declarations": [
2254
2292
  {
2255
2293
  "kind": "class",
2256
- "description": "## Context\n\nFor this component, we assume a discrete time model, where new infections happen exactly every `generationTime` days.\nThis is what we call a \"generation\".\n\nThis component estimates the relative growth advantage of a variant by performing a logistic regression.\nBased on the inferred logistic growth rate, we derive the relative growth advantage (per generation).\n\nFor details on the scientific method, see:\nChen, Chaoran, et al. \"Quantification of the spread of SARS-CoV-2 variant B.1.1.7 in Switzerland.\" Epidemics (2021);\ndoi: [10.1016/j.epidem.2021.100480](https://doi.org/10.1016/j.epidem.2021.100480)\n\nThis component fetches aggregated data from LAPIS.\nThen the data is sent to `https://cov-spectrum.org/api/v2/computed/model/chen2021Fitness`\nwhich performs the logistic regression and calculates the relative growth advantage.\n\n## Views\n\n### Line View\n\nThe line view shows the relative growth advantage over time in a line chart.\nThe dots in the plot show the proportions of the focal variant (`numerator`) to the `denominator` variant\nfor every day as observed in the data.\nThe line shows a logistic curve fitted to the data points, including a 95% confidence interval.",
2294
+ "description": "## Context\n\nFor this component, we assume a discrete time model, where new infections happen exactly every `generationTime` days.\nThis is what we call a \"generation\".\n\nThis component estimates the relative growth advantage of a variant (defined by its LAPIS filter) by performing a logistic regression.\nBased on the inferred logistic growth rate, we derive the relative growth advantage (per generation).\n\nFor details on the scientific method, see:\nChen, Chaoran, et al. \"Quantification of the spread of SARS-CoV-2 variant B.1.1.7 in Switzerland.\" Epidemics (2021);\ndoi: [10.1016/j.epidem.2021.100480](https://doi.org/10.1016/j.epidem.2021.100480)\n\nThis component fetches aggregated data from LAPIS.\nThen the data is sent to `https://cov-spectrum.org/api/v2/computed/model/chen2021Fitness`\nwhich performs the logistic regression and calculates the relative growth advantage.\n\n## Views\n\n### Line View\n\nThe line view shows the relative growth advantage over time in a line chart.\nThe dots in the plot show the proportions of the focal variant (defined by the `numeratorFilter`) to the baseline variant (defined by the `denominatorFilter`)\nfor every day as observed in the data.\nThe line shows a logistic curve fitted to the data points, including a 95% confidence interval.",
2257
2295
  "name": "RelativeGrowthAdvantageComponent",
2258
2296
  "members": [
2259
2297
  {
2260
2298
  "kind": "field",
2261
- "name": "numerator",
2299
+ "name": "numeratorFilter",
2262
2300
  "type": {
2263
2301
  "text": "Record<string, string | number | null | boolean>"
2264
2302
  },
2265
2303
  "default": "{}",
2266
- "description": "Required.\n\nThe LAPIS filter for the focal variant.",
2267
- "attribute": "numerator"
2304
+ "description": "Required.\n\nLAPIS filter to select the data of the focal variant.\nIt must be a valid LAPIS filter object.",
2305
+ "attribute": "numeratorFilter"
2268
2306
  },
2269
2307
  {
2270
2308
  "kind": "field",
2271
- "name": "denominator",
2309
+ "name": "denominatorFilter",
2272
2310
  "type": {
2273
2311
  "text": "Record<string, string | number | null | boolean>"
2274
2312
  },
2275
2313
  "default": "{}",
2276
- "description": "Required.\n\nThe LAPIS filter for the variant that the focal variant (`numerator`) should be compared to.",
2277
- "attribute": "denominator"
2314
+ "description": "Required.\n\nLAPIS filter to select the data of the baseline variant.\nIt must be a valid LAPIS filter object.",
2315
+ "attribute": "denominatorFilter"
2278
2316
  },
2279
2317
  {
2280
2318
  "kind": "field",
@@ -2313,7 +2351,7 @@
2313
2351
  "text": "string"
2314
2352
  },
2315
2353
  "default": "'100%'",
2316
- "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
2354
+ "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
2317
2355
  "attribute": "width"
2318
2356
  },
2319
2357
  {
@@ -2323,7 +2361,7 @@
2323
2361
  "text": "string"
2324
2362
  },
2325
2363
  "default": "'700px'",
2326
- "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
2364
+ "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
2327
2365
  "attribute": "height"
2328
2366
  },
2329
2367
  {
@@ -2335,26 +2373,46 @@
2335
2373
  "default": "'date'",
2336
2374
  "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.",
2337
2375
  "attribute": "lapisDateField"
2376
+ },
2377
+ {
2378
+ "kind": "field",
2379
+ "name": "yAxisMaxLinear",
2380
+ "type": {
2381
+ "text": "'maxInData' | 'limitTo1' | number"
2382
+ },
2383
+ "default": "1",
2384
+ "description": "The maximum value for the y-axis on all graphs in linear view.\nIf set to a number, the maximum value is set to this number.\nIf set to `maxInData`, the maximum value is set to the maximum value in the data.\nIf set to `limitTo1`, the maximum value is set to `min(1, the maximum value in the data)`.\nIf not set, the maximum value is set to the default value (1).",
2385
+ "attribute": "yAxisMaxLinear"
2386
+ },
2387
+ {
2388
+ "kind": "field",
2389
+ "name": "yAxisMaxLogarithmic",
2390
+ "type": {
2391
+ "text": "'maxInData' | 'limitTo1' | number"
2392
+ },
2393
+ "default": "1",
2394
+ "description": "The maximum value for the y-axis on all graphs in logarithmic view.\nIf set to a number, the maximum value is set to this number.\nIf set to `maxInData`, the maximum value is set to the maximum value in the data.\nIf set to `limitTo1`, the maximum value is set to `min(1, the maximum value in the data)`.\nIf not set, the maximum value is set to the default value (1).",
2395
+ "attribute": "yAxisMaxLogarithmic"
2338
2396
  }
2339
2397
  ],
2340
2398
  "attributes": [
2341
2399
  {
2342
- "name": "numerator",
2400
+ "name": "numeratorFilter",
2343
2401
  "type": {
2344
2402
  "text": "Record<string, string | number | null | boolean>"
2345
2403
  },
2346
2404
  "default": "{}",
2347
- "description": "Required.\n\nThe LAPIS filter for the focal variant.",
2348
- "fieldName": "numerator"
2405
+ "description": "Required.\n\nLAPIS filter to select the data of the focal variant.\nIt must be a valid LAPIS filter object.",
2406
+ "fieldName": "numeratorFilter"
2349
2407
  },
2350
2408
  {
2351
- "name": "denominator",
2409
+ "name": "denominatorFilter",
2352
2410
  "type": {
2353
2411
  "text": "Record<string, string | number | null | boolean>"
2354
2412
  },
2355
2413
  "default": "{}",
2356
- "description": "Required.\n\nThe LAPIS filter for the variant that the focal variant (`numerator`) should be compared to.",
2357
- "fieldName": "denominator"
2414
+ "description": "Required.\n\nLAPIS filter to select the data of the baseline variant.\nIt must be a valid LAPIS filter object.",
2415
+ "fieldName": "denominatorFilter"
2358
2416
  },
2359
2417
  {
2360
2418
  "name": "generationTime",
@@ -2389,7 +2447,7 @@
2389
2447
  "text": "string"
2390
2448
  },
2391
2449
  "default": "'100%'",
2392
- "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
2450
+ "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
2393
2451
  "fieldName": "width"
2394
2452
  },
2395
2453
  {
@@ -2398,7 +2456,7 @@
2398
2456
  "text": "string"
2399
2457
  },
2400
2458
  "default": "'700px'",
2401
- "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
2459
+ "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
2402
2460
  "fieldName": "height"
2403
2461
  },
2404
2462
  {
@@ -2409,6 +2467,24 @@
2409
2467
  "default": "'date'",
2410
2468
  "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.",
2411
2469
  "fieldName": "lapisDateField"
2470
+ },
2471
+ {
2472
+ "name": "yAxisMaxLinear",
2473
+ "type": {
2474
+ "text": "'maxInData' | 'limitTo1' | number"
2475
+ },
2476
+ "default": "1",
2477
+ "description": "The maximum value for the y-axis on all graphs in linear view.\nIf set to a number, the maximum value is set to this number.\nIf set to `maxInData`, the maximum value is set to the maximum value in the data.\nIf set to `limitTo1`, the maximum value is set to `min(1, the maximum value in the data)`.\nIf not set, the maximum value is set to the default value (1).",
2478
+ "fieldName": "yAxisMaxLinear"
2479
+ },
2480
+ {
2481
+ "name": "yAxisMaxLogarithmic",
2482
+ "type": {
2483
+ "text": "'maxInData' | 'limitTo1' | number"
2484
+ },
2485
+ "default": "1",
2486
+ "description": "The maximum value for the y-axis on all graphs in logarithmic view.\nIf set to a number, the maximum value is set to this number.\nIf set to `maxInData`, the maximum value is set to the maximum value in the data.\nIf set to `limitTo1`, the maximum value is set to `min(1, the maximum value in the data)`.\nIf not set, the maximum value is set to the default value (1).",
2487
+ "fieldName": "yAxisMaxLogarithmic"
2412
2488
  }
2413
2489
  ],
2414
2490
  "superclass": {