@genspectrum/dashboard-components 0.6.17 → 0.6.19

package/README.md

@@ -1,15 +1,4 @@
-# GenSpectrum components
-
-[![NPM Version](https://img.shields.io/npm/v/%40genspectrum%2Fdashboard-components)](https://www.npmjs.com/package/@genspectrum/dashboard-components)
-
-This NPM package provides a collection of web components to build interactive dashboards that visualize
-data of a specific instance of [LAPIS](https://github.com/GenSpectrum/LAPIS).
-
-### Documentation
-
-Documentation of the components is available in the deployed [Storybook](https://genspectrum.github.io/dashboard-components/).
-
-We also provide examples of how to use the components in the [examples](https://github.com/GenSpectrum/dashboard-components/tree/main/examples) folder.
+# GenSpectrum Components
 
 ### npm
 
@@ -138,3 +127,7 @@ We follow this testing concept:
         -   Screenshots of charts and tables that serve as visual regression.
         -   Snapshots of the CSV data that the visualization components offer as download.
     -   testing functionality of components that cannot be tested within Storybook due to technical limitations.
+
+#### Mocking
+
+All our tests use mock 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.

package/custom-elements.json

@@ -1793,7 +1793,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' }, }, args: { lapisFilter: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-07-10' }, sequenceType: 'nucleotide', views: ['grid'], width: '100%', height: '700px', granularity: 'month', lapisDateField: 'date', }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), 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' }, }, args: { lapisFilter: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-07-10' }, sequenceType: 'nucleotide', views: ['grid'], width: '100%', height: '700px', granularity: 'month', lapisDateField: 'date', }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, fetchMock: {}, }), tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
@@ -1801,7 +1801,7 @@
           "type": {
             "text": "StoryObj<Required<MutationsOverTimeProps>>"
           },
-          "default": "{ ...Template, parameters: { fetchMock: { mocks: [ { matcher: { name: 'aggregated_dates', url: AGGREGATED_ENDPOINT, body: { dateFrom: '2024-01-15', dateTo: '2024-07-10', fields: ['date'], pangoLineage: 'JN.1*', }, }, response: { status: 200, body: aggregated_date, }, }, { matcher: { name: 'aggregated_01', url: AGGREGATED_ENDPOINT, body: { dateFrom: '2024-01-01', dateTo: '2024-01-31', fields: [], pangoLineage: 'JN.1*', }, }, response: { status: 200, body: aggregated_01, }, }, { matcher: { name: 'aggregated_02', url: AGGREGATED_ENDPOINT, body: { dateFrom: '2024-02-01', dateTo: '2024-02-29', fields: [], pangoLineage: 'JN.1*', }, }, response: { status: 200, body: aggregated_02, }, }, { matcher: { name: 'aggregated_03', url: AGGREGATED_ENDPOINT, body: { dateFrom: '2024-03-01', dateTo: '2024-03-31', fields: [], pangoLineage: 'JN.1*', }, }, response: { status: 200, body: aggregated_03, }, }, { matcher: { name: 'aggregated_04', url: AGGREGATED_ENDPOINT, body: { dateFrom: '2024-04-01', dateTo: '2024-04-30', fields: [], pangoLineage: 'JN.1*', }, }, response: { status: 200, body: aggregated_04, }, }, { matcher: { name: 'aggregated_05', url: AGGREGATED_ENDPOINT, body: { dateFrom: '2024-05-01', dateTo: '2024-05-31', fields: [], pangoLineage: 'JN.1*', }, }, response: { status: 200, body: aggregated_05, }, }, { matcher: { name: 'aggregated_06', url: AGGREGATED_ENDPOINT, body: { dateFrom: '2024-06-01', dateTo: '2024-06-30', fields: [], pangoLineage: 'JN.1*', }, }, response: { status: 200, body: aggregated_06, }, }, { matcher: { name: 'aggregated_07', url: AGGREGATED_ENDPOINT, body: { dateFrom: '2024-07-01', dateTo: '2024-07-31', fields: [], pangoLineage: 'JN.1*', }, }, response: { status: 200, body: aggregated_07, }, }, { matcher: { name: 'nucleotideMutations_overall', url: NUCLEOTIDE_MUTATIONS_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-07-10', minProportion: 0.001, }, }, response: { status: 200, body: nucleotideMutations_byMonthOverall, }, }, { matcher: { name: 'nucleotideMutations_01', url: NUCLEOTIDE_MUTATIONS_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-01-01', dateTo: '2024-01-31', minProportion: 0.001, }, }, response: { status: 200, body: nucleotideMutation_01, }, }, { matcher: { name: 'nucleotideMutations_02', url: NUCLEOTIDE_MUTATIONS_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-02-01', dateTo: '2024-02-29', minProportion: 0.001, }, }, response: { status: 200, body: nucleotideMutation_02, }, }, { matcher: { name: 'nucleotideMutations_03', url: NUCLEOTIDE_MUTATIONS_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-03-01', dateTo: '2024-03-31', minProportion: 0.001, }, response: { status: 200, body: nucleotideMutation_03, }, }, }, { matcher: { name: 'nucleotideMutations_04', url: NUCLEOTIDE_MUTATIONS_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-04-01', dateTo: '2024-04-30', minProportion: 0.001, }, response: { status: 200, body: nucleotideMutation_04, }, }, }, { matcher: { name: 'nucleotideMutations_05', url: NUCLEOTIDE_MUTATIONS_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-05-01', dateTo: '2024-05-31', minProportion: 0.001, }, response: { status: 200, body: nucleotideMutation_05, }, }, }, { matcher: { name: 'nucleotideMutations_06', url: NUCLEOTIDE_MUTATIONS_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-06-01', dateTo: '2024-06-30', minProportion: 0.001, }, response: { status: 200, body: nucleotideMutation_06, }, }, }, { matcher: { name: 'nucleotideMutations_07', url: NUCLEOTIDE_MUTATIONS_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-07-01', dateTo: '2024-07-31', minProportion: 0.001, }, response: { status: 200, body: nucleotideMutation_07, }, }, }, ], }, }, }"
+          "default": "{ ...Template, }"
         },
         {
           "kind": "variable",
@@ -1809,7 +1809,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', }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'aggregated_dates', url: AGGREGATED_ENDPOINT, body: { dateFrom: '2024-01-15', dateTo: '2024-02-11', fields: ['date'], pangoLineage: 'JN.1*', }, }, response: { status: 200, body: aggregated_byWeek, }, }, { matcher: { name: 'aggregated_week3', url: AGGREGATED_ENDPOINT, body: { dateFrom: '2024-01-15', dateTo: '2024-01-21', fields: [], pangoLineage: 'JN.1*', }, }, response: { status: 200, body: aggregated_week3, }, }, { matcher: { name: 'aggregated_week4', url: AGGREGATED_ENDPOINT, body: { dateFrom: '2024-01-22', dateTo: '2024-01-28', fields: [], pangoLineage: 'JN.1*', }, }, response: { status: 200, body: aggregated_week4, }, }, { matcher: { name: 'aggregated_week5', url: AGGREGATED_ENDPOINT, body: { dateFrom: '2024-01-29', dateTo: '2024-02-04', fields: [], pangoLineage: 'JN.1*', }, }, response: { status: 200, body: aggregated_week5, }, }, { matcher: { name: 'aggregated_week6', url: AGGREGATED_ENDPOINT, body: { dateFrom: '2024-02-05', dateTo: '2024-02-11', fields: [], pangoLineage: 'JN.1*', }, }, response: { status: 200, body: aggregated_week6, }, }, { matcher: { name: 'nucleotideMutation_overall', url: NUCLEOTIDE_MUTATIONS_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-02-11', minProportion: 0.001, }, }, response: { status: 200, body: nucleotideMutations_byWeekOverall, }, }, { matcher: { name: 'nucleotideMutation_week3', url: NUCLEOTIDE_MUTATIONS_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-01-21', minProportion: 0.001, }, }, response: { status: 200, body: nucleotideMutation_week3, }, }, { matcher: { name: 'nucleotideMutation_week4', url: NUCLEOTIDE_MUTATIONS_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-01-22', dateTo: '2024-01-28', minProportion: 0.001, }, }, response: { status: 200, body: nucleotideMutation_week4, }, }, { matcher: { name: 'nucleotideMutation_week5', url: NUCLEOTIDE_MUTATIONS_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-01-29', dateTo: '2024-02-04', minProportion: 0.001, }, }, response: { status: 200, body: nucleotideMutation_week5, }, }, { matcher: { name: 'nucleotideMutation_week6', url: NUCLEOTIDE_MUTATIONS_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-02-05', dateTo: '2024-02-11', minProportion: 0.001, }, }, response: { status: 200, body: nucleotideMutation_week6, }, }, ], }, }, }"
+          "default": "{ ...Template, args: { ...Template.args, lapisFilter: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-02-11' }, granularity: 'week', }, }"
         },
         {
           "kind": "variable",
@@ -1817,7 +1817,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', }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'aggregated_byDay', url: AGGREGATED_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-01-20', dateTo: '2024-01-26', fields: ['date'] }, }, response: { status: 200, body: aggregated_byDay, }, }, { matcher: { name: 'aggregated_20_01_2024', url: AGGREGATED_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-01-20', dateTo: '2024-01-20', fields: [] }, }, response: { status: 200, body: aggregated_20_01_2024, }, }, { matcher: { name: 'aggregated_21_01_2024', url: AGGREGATED_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-01-21', dateTo: '2024-01-21', fields: [] }, }, response: { status: 200, body: aggregated_21_01_2024, }, }, { matcher: { name: 'aggregated_22_01_2024', url: AGGREGATED_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-01-22', dateTo: '2024-01-22', fields: [] }, }, response: { status: 200, body: aggregated_22_01_2024, }, }, { matcher: { name: 'aggregated_23_01_2024', url: AGGREGATED_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-01-23', dateTo: '2024-01-23', fields: [] }, }, response: { status: 200, body: aggregated_23_01_2024, }, }, { matcher: { name: 'aggregated_24_01_2024', url: AGGREGATED_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-01-24', dateTo: '2024-01-24', fields: [] }, }, response: { status: 200, body: aggregated_24_01_2024, }, }, { matcher: { name: 'aggregated_25_01_2024', url: AGGREGATED_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-01-25', dateTo: '2024-01-25', fields: [] }, }, response: { status: 200, body: aggregated_25_01_2024, }, }, { matcher: { name: 'aggregated_26_01_2024', url: AGGREGATED_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-01-26', dateTo: '2024-01-26', fields: [] }, }, response: { status: 200, body: aggregated_26_01_2024, }, }, { matcher: { name: 'aminoAcidMutations_overall', url: AMINO_ACID_MUTATIONS_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-01-20', dateTo: '2024-01-26', minProportion: 0.001, }, }, response: { status: 200, body: aminoAcidMutations_byDayOverall, }, }, { matcher: { name: 'aminoAcidMutations_20_01_2024', url: AMINO_ACID_MUTATIONS_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-01-20', dateTo: '2024-01-20', minProportion: 0.001, }, }, response: { status: 200, body: aminoAcidMutations_20_01_2024, }, }, { matcher: { name: 'aminoAcidMutations_21_01_2024', url: AMINO_ACID_MUTATIONS_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-01-21', dateTo: '2024-01-21', minProportion: 0.001, }, }, response: { status: 200, body: aminoAcidMutations_21_01_2024, }, }, { matcher: { name: 'aminoAcidMutations_22_01_2024', url: AMINO_ACID_MUTATIONS_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-01-22', dateTo: '2024-01-22', minProportion: 0.001, }, }, response: { status: 200, body: aminoAcidMutations_22_01_2024, }, }, { matcher: { name: 'aminoAcidMutations_23_01_2024', url: AMINO_ACID_MUTATIONS_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-01-23', dateTo: '2024-01-23', minProportion: 0.001, }, }, response: { status: 200, body: aminoAcidMutations_23_01_2024, }, }, { matcher: { name: 'aminoAcidMutations_24_01_2024', url: AMINO_ACID_MUTATIONS_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-01-24', dateTo: '2024-01-24', minProportion: 0.001, }, }, response: { status: 200, body: aminoAcidMutations_24_01_2024, }, }, { matcher: { name: 'aminoAcidMutations_25_01_2024', url: AMINO_ACID_MUTATIONS_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-01-25', dateTo: '2024-01-25', minProportion: 0.001, }, }, response: { status: 200, body: aminoAcidMutations_25_01_2024, }, }, { matcher: { name: 'aminoAcidMutations_26_01_2024', url: AMINO_ACID_MUTATIONS_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-01-26', dateTo: '2024-01-26', minProportion: 0.001, }, }, response: { status: 200, body: aminoAcidMutations_26_01_2024, }, }, ], }, }, }"
+          "default": "{ ...Template, args: { ...Template.args, lapisFilter: { pangoLineage: 'JN.1*', dateFrom: '2024-01-20', dateTo: '2024-01-26' }, granularity: 'day', sequenceType: 'amino acid', }, }"
         },
         {
           "kind": "variable",