@genspectrum/dashboard-components 1.12.0 → 1.13.0

package/README.md

@@ -172,13 +172,6 @@ Make sure that stories don't issue actual HTTP calls to LAPIS or other services.
 This is to make sure that we have stable tests in CI that don't depend on the availability of other services.
 We still use the real LAPIS URL so that a user can change the filters in a story and will still see data.
 
-In general, we use `storybook-addon-fetch-mock` for all outgoing requests. This strategy
-cannot be used for components that use web workers, like gs-mutations-over-time. Therefore, we created custom mock
-workers that return mocked data. The mock workers are enabled in the package.json using
-Node.js [subpath imports](https://nodejs.org/api/packages.html#subpath-imports), following the guide
-from [storybook](https://storybook.js.org/docs/writing-stories/mocking-data-and-modules/mocking-modules). This ensures
-that when importing the worker in the component, the mock worker is used inside Storybook instead of the real worker.
-
 ### How The Release Build Works
 
 The `"exports"` field in `package.json` defines which files a user of the package can import using the normal module systems.

package/custom-elements.json

@@ -2717,7 +2717,7 @@
           "type": {
             "text": "Meta<Required<MutationsOverTimeProps>>"
           },
-          "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' }, hideGaps: { control: 'boolean' }, useNewEndpoint: { control: 'boolean' }, pageSizes: { control: 'object' }, customColumns: { 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 }, hideGaps: false, useNewEndpoint: false, pageSizes: [10, 20, 30, 40, 50], }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, fetchMock: {}, }), tags: ['autodocs'], }"
+          "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' }, hideGaps: { control: 'boolean' }, pageSizes: { control: 'object' }, customColumns: { 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 }, hideGaps: false, pageSizes: [10, 20, 30, 40, 50], }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, fetchMock: { mocks: [ { matcher: { url: `${LAPIS_URL}/sample/nucleotideMutations`, body: { pangoLineage: 'JN.1*', dateFrom: '2024-01-01', dateTo: '2024-07-31', minProportion: 0.001, }, response: { status: 200, body: mockDefaultNucleotideMutations, }, }, }, { matcher: { url: `${LAPIS_URL}/component/nucleotideMutationsOverTime`, body: { filters: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-07-10', }, dateRanges: [ { dateFrom: '2024-01-01', dateTo: '2024-01-31' }, { dateFrom: '2024-02-01', dateTo: '2024-02-29' }, { dateFrom: '2024-03-01', dateTo: '2024-03-31' }, { dateFrom: '2024-04-01', dateTo: '2024-04-30' }, { dateFrom: '2024-05-01', dateTo: '2024-05-31' }, { dateFrom: '2024-06-01', dateTo: '2024-06-30' }, { dateFrom: '2024-07-01', dateTo: '2024-07-31' }, ], dateField: 'date', }, matchPartialBody: true, response: { status: 200, body: mockDefaultMutationsOverTime, }, }, }, ], }, }), tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
@@ -2733,7 +2733,7 @@
           "type": {
             "text": "StoryObj<Required<MutationsOverTimeProps>>"
           },
-          "default": "{ ...Template, args: { ...Template.args, displayMutations: ['A19722G', 'G21641T', 'T21653-'], }, }"
+          "default": "{ ...Template, args: { ...Template.args, displayMutations: ['A13121T', 'G24872T', 'T21653-'], }, parameters: { fetchMock: { mocks: [ { matcher: { url: `${LAPIS_URL}/sample/nucleotideMutations`, body: { pangoLineage: 'JN.1*', dateFrom: '2024-01-01', dateTo: '2024-07-31', minProportion: 0.001, }, response: { status: 200, body: mockDefaultNucleotideMutations, }, }, }, { matcher: { url: `${LAPIS_URL}/component/nucleotideMutationsOverTime`, body: { filters: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-07-10' }, dateRanges: [ { dateFrom: '2024-01-01', dateTo: '2024-01-31' }, { dateFrom: '2024-02-01', dateTo: '2024-02-29' }, { dateFrom: '2024-03-01', dateTo: '2024-03-31' }, { dateFrom: '2024-04-01', dateTo: '2024-04-30' }, { dateFrom: '2024-05-01', dateTo: '2024-05-31' }, { dateFrom: '2024-06-01', dateTo: '2024-06-30' }, { dateFrom: '2024-07-01', dateTo: '2024-07-31' }, ], includeMutations: ['A13121T', 'T21653-', 'G24872T'], dateField: 'date', }, response: { status: 200, body: mockWithDisplayMutationsMutationsOverTime, }, }, }, ], }, }, }"
         },
         {
           "kind": "variable",
@@ -2741,7 +2741,7 @@
           "type": {
             "text": "StoryObj<Required<MutationsOverTimeProps>>"
           },
-          "default": "{ ...Template, args: { ...Template.args, displayMutations: ['A19722G', 'G21641T', 'T21652-'], hideGaps: true, }, }"
+          "default": "{ ...Template, args: { ...Template.args, displayMutations: ['A13121T', 'G24872T', 'T21653-'], hideGaps: true, }, parameters: { fetchMock: { mocks: [ { matcher: { url: `${LAPIS_URL}/sample/nucleotideMutations`, body: { pangoLineage: 'JN.1*', dateFrom: '2024-01-01', dateTo: '2024-07-31', minProportion: 0.001, }, response: { status: 200, body: mockDefaultNucleotideMutations, }, }, }, { matcher: { url: `${LAPIS_URL}/component/nucleotideMutationsOverTime`, body: { filters: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-07-10' }, dateRanges: [ { dateFrom: '2024-01-01', dateTo: '2024-01-31' }, { dateFrom: '2024-02-01', dateTo: '2024-02-29' }, { dateFrom: '2024-03-01', dateTo: '2024-03-31' }, { dateFrom: '2024-04-01', dateTo: '2024-04-30' }, { dateFrom: '2024-05-01', dateTo: '2024-05-31' }, { dateFrom: '2024-06-01', dateTo: '2024-06-30' }, { dateFrom: '2024-07-01', dateTo: '2024-07-31' }, ], includeMutations: ['A13121T', 'T21653-', 'G24872T'], dateField: 'date', }, response: { status: 200, body: mockWithDisplayMutationsMutationsOverTime, }, }, }, ], }, }, }"
         },
         {
           "kind": "variable",
@@ -2749,7 +2749,7 @@
           "type": {
             "text": "StoryObj<Required<MutationsOverTimeProps>>"
           },
-          "default": "{ ...Template, args: { ...Template.args, lapisFilter: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-02-11' }, granularity: 'week', }, }"
+          "default": "{ ...Template, args: { ...Template.args, lapisFilter: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-02-11' }, granularity: 'week', }, parameters: { fetchMock: { mocks: [ { matcher: { url: `${LAPIS_URL}/sample/nucleotideMutations`, body: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-02-11', minProportion: 0.001, }, response: { status: 200, body: mockByWeekNucleotideMutations, }, }, }, { matcher: { url: `${LAPIS_URL}/component/nucleotideMutationsOverTime`, body: { filters: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-02-11', }, dateRanges: [ { dateFrom: '2024-01-15', dateTo: '2024-01-21' }, { dateFrom: '2024-01-22', dateTo: '2024-01-28' }, { dateFrom: '2024-01-29', dateTo: '2024-02-04' }, { dateFrom: '2024-02-05', dateTo: '2024-02-11' }, ], dateField: 'date', }, matchPartialBody: true, response: { status: 200, body: mockByWeekMutationsOverTime, }, }, }, ], }, }, }"
         },
         {
           "kind": "variable",
@@ -2757,7 +2757,7 @@
           "type": {
             "text": "StoryObj<Required<MutationsOverTimeProps>>"
           },
-          "default": "{ ...Template, args: { ...Template.args, lapisFilter: { pangoLineage: 'JN.1*', dateFrom: '2024-01-20', dateTo: '2024-01-26' }, granularity: 'day', sequenceType: 'amino acid', }, }"
+          "default": "{ ...Template, args: { ...Template.args, lapisFilter: { pangoLineage: 'JN.1*', dateFrom: '2024-01-20', dateTo: '2024-01-26' }, granularity: 'day', sequenceType: 'amino acid', }, parameters: { fetchMock: { mocks: [ { matcher: { url: `${LAPIS_URL}/sample/aminoAcidMutations`, body: { pangoLineage: 'JN.1*', dateFrom: '2024-01-20', dateTo: '2024-01-26', minProportion: 0.001, }, response: { status: 200, body: mockAminoAcidMutationsByDayAminoAcidMutations, }, }, }, { matcher: { url: `${LAPIS_URL}/component/aminoAcidMutationsOverTime`, body: { filters: { pangoLineage: 'JN.1*', dateFrom: '2024-01-20', dateTo: '2024-01-26', }, dateRanges: [ { dateFrom: '2024-01-20', dateTo: '2024-01-20' }, { dateFrom: '2024-01-21', dateTo: '2024-01-21' }, { dateFrom: '2024-01-22', dateTo: '2024-01-22' }, { dateFrom: '2024-01-23', dateTo: '2024-01-23' }, { dateFrom: '2024-01-24', dateTo: '2024-01-24' }, { dateFrom: '2024-01-25', dateTo: '2024-01-25' }, { dateFrom: '2024-01-26', dateTo: '2024-01-26' }, ], dateField: 'date', }, matchPartialBody: true, response: { status: 200, body: mockAminoAcidMutationsByDayAminoAcidMutationsOverTime, }, }, }, ], }, }, }"
         },
         {
           "kind": "variable",
@@ -2781,7 +2781,7 @@
           "type": {
             "text": "StoryObj<Required<MutationsOverTimeProps>>"
           },
-          "default": "{ ...Template, args: { ...Template.args, displayMutations: ['A19722G', 'G21641T', 'T21653-'], customColumns: [ { header: 'Jaccard Index', values: { A19722G: 0.75, G21641T: 0.92, 'T21653-': 0.58, }, }, ], }, }"
+          "default": "{ ...Template, args: { ...Template.args, displayMutations: ['A13121T', 'G24872T', 'T21653-'], customColumns: [ { header: 'Jaccard Index', values: { A13121T: 0.75, G24872T: 0.92, 'T21653-': 0.58, }, }, ], }, parameters: { fetchMock: { mocks: [ { matcher: { url: `${LAPIS_URL}/sample/nucleotideMutations`, body: { pangoLineage: 'JN.1*', dateFrom: '2024-01-01', dateTo: '2024-07-31', minProportion: 0.001, }, response: { status: 200, body: mockDefaultNucleotideMutations, }, }, }, { matcher: { url: `${LAPIS_URL}/component/nucleotideMutationsOverTime`, body: { filters: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-07-10' }, dateRanges: [ { dateFrom: '2024-01-01', dateTo: '2024-01-31' }, { dateFrom: '2024-02-01', dateTo: '2024-02-29' }, { dateFrom: '2024-03-01', dateTo: '2024-03-31' }, { dateFrom: '2024-04-01', dateTo: '2024-04-30' }, { dateFrom: '2024-05-01', dateTo: '2024-05-31' }, { dateFrom: '2024-06-01', dateTo: '2024-06-30' }, { dateFrom: '2024-07-01', dateTo: '2024-07-31' }, ], includeMutations: ['A13121T', 'T21653-', 'G24872T'], dateField: 'date', }, response: { status: 200, body: mockWithDisplayMutationsMutationsOverTime, }, }, }, ], }, }, }"
         }
       ],
       "exports": [
@@ -2968,16 +2968,6 @@
               "description": "If true, date ranges with no data will be hidden initially; if false, not.\nCan be switched with a button in the toolbar.",
               "attribute": "hideGaps"
             },
-            {
-              "kind": "field",
-              "name": "useNewEndpoint",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "description": "Whether to use the mutationsOverTime endpoint from LAPIS.\nIf true, use the endpoint, if false, compute component data as before.\nEventually, the new endpoint will become the default.",
-              "attribute": "useNewEndpoint"
-            },
             {
               "kind": "field",
               "name": "pageSizes",
@@ -3099,15 +3089,6 @@
               "description": "If true, date ranges with no data will be hidden initially; if false, not.\nCan be switched with a button in the toolbar.",
               "fieldName": "hideGaps"
             },
-            {
-              "name": "useNewEndpoint",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "description": "Whether to use the mutationsOverTime endpoint from LAPIS.\nIf true, use the endpoint, if false, compute component data as before.\nEventually, the new endpoint will become the default.",
-              "fieldName": "useNewEndpoint"
-            },
             {
               "name": "pageSizes",
               "type": {

package/dist/components.d.ts

@@ -829,12 +829,6 @@ export declare class MutationsOverTimeComponent extends PreactLitAdapterWithGrid
      * Can be switched with a button in the toolbar.
      */
     hideGaps: boolean;
-    /**
-     * Whether to use the mutationsOverTime endpoint from LAPIS.
-     * If true, use the endpoint, if false, compute component data as before.
-     * Eventually, the new endpoint will become the default.
-     */
-    useNewEndpoint?: boolean;
     /**
      * The number of rows per page, which can be selected by the user.
      */
@@ -1712,7 +1706,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-comparison': MutationComparisonComponent;
+        'gs-mutations': MutationsComponent;
     }
 }
 
@@ -1720,7 +1714,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1728,7 +1722,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations': MutationsComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -1736,7 +1730,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1744,7 +1738,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-mutation-comparison': MutationComparisonComponent;
     }
 }
 
@@ -1752,7 +1746,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-comparison': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1760,7 +1754,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -1768,7 +1762,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1776,7 +1770,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1784,7 +1778,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1792,7 +1786,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -1800,7 +1794,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1808,7 +1802,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-statistics': StatisticsComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1816,7 +1810,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1840,7 +1834,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-statistics': StatisticsComponent;
     }
 }
 
@@ -1848,7 +1842,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1876,10 +1870,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-filter': TextFilterComponent;
+        'gs-location-filter': LocationFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.textFilterChanged]: TextFilterChangedEvent;
+        [gsEventNames.locationChanged]: LocationChangedEvent;
     }
 }
 
@@ -1887,7 +1881,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1895,10 +1889,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
+        'gs-text-filter': TextFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.locationChanged]: LocationChangedEvent;
+        [gsEventNames.textFilterChanged]: TextFilterChangedEvent;
     }
 }
 
@@ -1906,7 +1900,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1933,11 +1927,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-range-filter': NumberRangeFilterComponent;
+        'gs-lineage-filter': LineageFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.numberRangeFilterChanged]: NumberRangeFilterChangedEvent;
-        [gsEventNames.numberRangeValueChanged]: NumberRangeValueChangedEvent;
+        [gsEventNames.lineageFilterChanged]: LineageFilterChangedEvent;
+        [gsEventNames.lineageFilterMultiChanged]: LineageMultiFilterChangedEvent;
     }
 }
 
@@ -1945,7 +1939,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1953,11 +1947,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
+        'gs-number-range-filter': NumberRangeFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.lineageFilterChanged]: LineageFilterChangedEvent;
-        [gsEventNames.lineageFilterMultiChanged]: LineageMultiFilterChangedEvent;
+        [gsEventNames.numberRangeFilterChanged]: NumberRangeFilterChangedEvent;
+        [gsEventNames.numberRangeValueChanged]: NumberRangeValueChangedEvent;
     }
 }
 
@@ -1965,7 +1959,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }