@genspectrum/dashboard-components 0.18.5 → 0.18.6

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 (33) hide show
  1. package/README.md +12 -0
  2. package/custom-elements.json +1 -1
  3. package/dist/components.d.ts +16 -16
  4. package/dist/components.js +765 -315
  5. package/dist/components.js.map +1 -1
  6. package/dist/style.css +2 -2
  7. package/dist/util.d.ts +16 -16
  8. package/package.json +2 -2
  9. package/src/preact/MutationAnnotationsContext.tsx +34 -27
  10. package/src/preact/components/dropdown.tsx +1 -1
  11. package/src/preact/components/info.tsx +1 -1
  12. package/src/preact/components/mutations-over-time-text-filter.stories.tsx +57 -0
  13. package/src/preact/components/mutations-over-time-text-filter.tsx +63 -0
  14. package/src/preact/components/segment-selector.tsx +1 -1
  15. package/src/preact/mutationFilter/mutation-filter.stories.tsx +169 -50
  16. package/src/preact/mutationFilter/mutation-filter.tsx +239 -234
  17. package/src/preact/mutationFilter/parseAndValidateMutation.ts +62 -10
  18. package/src/preact/mutationFilter/parseMutation.spec.ts +62 -47
  19. package/src/preact/mutationsOverTime/getFilteredMutationsOverTime.spec.ts +128 -0
  20. package/src/preact/mutationsOverTime/getFilteredMutationsOverTimeData.ts +39 -2
  21. package/src/preact/mutationsOverTime/mutations-over-time-grid.tsx +8 -11
  22. package/src/preact/mutationsOverTime/mutations-over-time.stories.tsx +27 -0
  23. package/src/preact/mutationsOverTime/mutations-over-time.tsx +26 -5
  24. package/src/preact/shared/tanstackTable/pagination-context.tsx +30 -0
  25. package/src/preact/shared/tanstackTable/pagination.tsx +19 -6
  26. package/src/preact/shared/tanstackTable/tanstackTable.tsx +17 -3
  27. package/src/preact/wastewater/mutationsOverTime/wastewater-mutations-over-time.stories.tsx +19 -1
  28. package/src/preact/wastewater/mutationsOverTime/wastewater-mutations-over-time.tsx +6 -1
  29. package/src/web-components/input/gs-mutation-filter.stories.ts +4 -4
  30. package/src/web-components/visualization/gs-prevalence-over-time.stories.ts +1 -1
  31. package/standalone-bundle/dashboard-components.js +12896 -13366
  32. package/standalone-bundle/dashboard-components.js.map +1 -1
  33. package/standalone-bundle/style.css +1 -1
package/README.md CHANGED
@@ -20,6 +20,18 @@ Usage with a bundler in HTML:
20
20
  </body>
21
21
  ```
22
22
 
23
+ **Note for vite (and potentially other bundlers) users**:
24
+ There is currently an issue with one of our peer dependencies: leaflet.
25
+ Vite will use the commonjs style of leaflet, which will create an error, when you run it in the browser.
26
+ `Uncaught SyntaxError: The requested module ... doesn't provide an export named: 'geoJson'`
27
+ To fix this add the following to your `vite.config.js`:
28
+
29
+ ```js
30
+ optimizeDeps: {
31
+ include: ['leaflet'];
32
+ }
33
+ ```
34
+
23
35
  We also provide a standalone version of the components that can be used without installing the dependencies:
24
36
 
25
37
  ```html
@@ -1080,7 +1080,7 @@
1080
1080
  "type": {
1081
1081
  "text": "StoryObj<MutationFilterProps>"
1082
1082
  },
1083
- "default": "{ ...Template, args: { ...Template.args, initialValue: ['seg1:123T', 'gene2:56', 'ins_seg2:78:AAA'], }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'referenceGenome', url: REFERENCE_GENOME_ENDPOINT, }, response: { status: 200, body: { nucleotideSequences: [ { name: 'seg1', sequence: 'dummy', }, { name: 'seg2', sequence: 'dummy', }, ], genes: [ { name: 'gene1', sequence: 'dummy', }, { name: 'gene2', sequence: 'dummy', }, ], }, }, options: { overwriteRoutes: false, }, }, ], }, }, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-filter'); const inputField = () => canvas.getByPlaceholderText('Enter a mutation', { exact: false }); await waitFor(async () => { const placeholderText = inputField().getAttribute('placeholder'); await expect(placeholderText).toEqual( 'Enter a mutation (e.g. seg1:23T, ins_seg1:10462:A, gene1:57Q, ins_gene1:31:N)', ); }); await waitFor(async () => { await expect(canvas.getByText('seg1:123T')).toBeVisible(); await expect(canvas.getByText('gene2:56')).toBeVisible(); await expect(canvas.getByText('ins_seg2:78:AAA')).toBeVisible(); }); }, }"
1083
+ "default": "{ ...Template, args: { ...Template.args, initialValue: ['seg1:3T', 'gene2:4', 'ins_seg2:4:AAA'], }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'referenceGenome', url: REFERENCE_GENOME_ENDPOINT, }, response: { status: 200, body: { nucleotideSequences: [ { name: 'seg1', sequence: 'dummy', }, { name: 'seg2', sequence: 'dummy', }, ], genes: [ { name: 'gene1', sequence: 'dummy', }, { name: 'gene2', sequence: 'dummy', }, ], }, }, options: { overwriteRoutes: false, }, }, ], }, }, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-filter'); const inputField = () => canvas.getByPlaceholderText('Enter a mutation', { exact: false }); await waitFor(async () => { const placeholderText = inputField().getAttribute('placeholder'); await expect(placeholderText).toEqual( 'Enter a mutation (e.g. seg1:23T, ins_seg1:10462:A, gene1:57Q, ins_gene1:31:N)', ); }); await waitFor(async () => { await expect(canvas.getByText('seg1:3T')).toBeVisible(); await expect(canvas.getByText('gene2:4')).toBeVisible(); await expect(canvas.getByText('ins_seg2:4:AAA')).toBeVisible(); }); }, }"
1084
1084
  }
1085
1085
  ],
1086
1086
  "exports": [
@@ -1424,7 +1424,7 @@ declare global {
1424
1424
 
1425
1425
  declare global {
1426
1426
  interface HTMLElementTagNameMap {
1427
- 'gs-mutation-comparison-component': MutationComparisonComponent;
1427
+ 'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
1428
1428
  }
1429
1429
  }
1430
1430
 
@@ -1432,7 +1432,7 @@ declare global {
1432
1432
  declare global {
1433
1433
  namespace JSX {
1434
1434
  interface IntrinsicElements {
1435
- 'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
1435
+ 'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
1436
1436
  }
1437
1437
  }
1438
1438
  }
@@ -1440,7 +1440,7 @@ declare global {
1440
1440
 
1441
1441
  declare global {
1442
1442
  interface HTMLElementTagNameMap {
1443
- 'gs-mutations-component': MutationsComponent;
1443
+ 'gs-mutation-comparison-component': MutationComparisonComponent;
1444
1444
  }
1445
1445
  }
1446
1446
 
@@ -1448,7 +1448,7 @@ declare global {
1448
1448
  declare global {
1449
1449
  namespace JSX {
1450
1450
  interface IntrinsicElements {
1451
- 'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
1451
+ 'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
1452
1452
  }
1453
1453
  }
1454
1454
  }
@@ -1456,7 +1456,7 @@ declare global {
1456
1456
 
1457
1457
  declare global {
1458
1458
  interface HTMLElementTagNameMap {
1459
- 'gs-prevalence-over-time': PrevalenceOverTimeComponent;
1459
+ 'gs-mutations-component': MutationsComponent;
1460
1460
  }
1461
1461
  }
1462
1462
 
@@ -1464,7 +1464,7 @@ declare global {
1464
1464
  declare global {
1465
1465
  namespace JSX {
1466
1466
  interface IntrinsicElements {
1467
- 'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
1467
+ 'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
1468
1468
  }
1469
1469
  }
1470
1470
  }
@@ -1488,7 +1488,7 @@ declare global {
1488
1488
 
1489
1489
  declare global {
1490
1490
  interface HTMLElementTagNameMap {
1491
- 'gs-aggregate': AggregateComponent;
1491
+ 'gs-prevalence-over-time': PrevalenceOverTimeComponent;
1492
1492
  }
1493
1493
  }
1494
1494
 
@@ -1496,7 +1496,7 @@ declare global {
1496
1496
  declare global {
1497
1497
  namespace JSX {
1498
1498
  interface IntrinsicElements {
1499
- 'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
1499
+ 'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
1500
1500
  }
1501
1501
  }
1502
1502
  }
@@ -1520,7 +1520,7 @@ declare global {
1520
1520
 
1521
1521
  declare global {
1522
1522
  interface HTMLElementTagNameMap {
1523
- 'gs-mutations-over-time': MutationsOverTimeComponent;
1523
+ 'gs-aggregate': AggregateComponent;
1524
1524
  }
1525
1525
  }
1526
1526
 
@@ -1528,7 +1528,7 @@ declare global {
1528
1528
  declare global {
1529
1529
  namespace JSX {
1530
1530
  interface IntrinsicElements {
1531
- 'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
1531
+ 'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
1532
1532
  }
1533
1533
  }
1534
1534
  }
@@ -1536,7 +1536,7 @@ declare global {
1536
1536
 
1537
1537
  declare global {
1538
1538
  interface HTMLElementTagNameMap {
1539
- 'gs-sequences-by-location': SequencesByLocationComponent;
1539
+ 'gs-mutations-over-time': MutationsOverTimeComponent;
1540
1540
  }
1541
1541
  }
1542
1542
 
@@ -1544,7 +1544,7 @@ declare global {
1544
1544
  declare global {
1545
1545
  namespace JSX {
1546
1546
  interface IntrinsicElements {
1547
- 'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
1547
+ 'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
1548
1548
  }
1549
1549
  }
1550
1550
  }
@@ -1552,7 +1552,7 @@ declare global {
1552
1552
 
1553
1553
  declare global {
1554
1554
  interface HTMLElementTagNameMap {
1555
- 'gs-statistics': StatisticsComponent;
1555
+ 'gs-sequences-by-location': SequencesByLocationComponent;
1556
1556
  }
1557
1557
  }
1558
1558
 
@@ -1560,7 +1560,7 @@ declare global {
1560
1560
  declare global {
1561
1561
  namespace JSX {
1562
1562
  interface IntrinsicElements {
1563
- 'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
1563
+ 'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
1564
1564
  }
1565
1565
  }
1566
1566
  }
@@ -1568,7 +1568,7 @@ declare global {
1568
1568
 
1569
1569
  declare global {
1570
1570
  interface HTMLElementTagNameMap {
1571
- 'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
1571
+ 'gs-statistics': StatisticsComponent;
1572
1572
  }
1573
1573
  }
1574
1574
 
@@ -1576,7 +1576,7 @@ declare global {
1576
1576
  declare global {
1577
1577
  namespace JSX {
1578
1578
  interface IntrinsicElements {
1579
- 'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
1579
+ 'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
1580
1580
  }
1581
1581
  }
1582
1582
  }