@genspectrum/dashboard-components 0.17.0 → 0.18.0

package/custom-elements.json

@@ -345,7 +345,7 @@
           "type": {
             "text": "StoryObj<Required<DateRangeFilterProps>>"
           },
-          "default": "{ render: (args) => html` <gs-app lapis=\"${LAPIS_URL}\"> <div class=\"max-w-screen-lg\"> <gs-date-range-filter .dateRangeOptions=${args.dateRangeOptions} .earliestDate=${args.earliestDate} .value=${args.value} .width=${args.width} .lapisDateField=${args.lapisDateField} .placeholder=${args.placeholder} ></gs-date-range-filter> </div> </gs-app>`, }"
+          "default": "{ render: (args) => html` <gs-app lapis=\"${LAPIS_URL}\"> <div class=\"max-w-(--breakpoint-lg)\"> <gs-date-range-filter .dateRangeOptions=${args.dateRangeOptions} .earliestDate=${args.earliestDate} .value=${args.value} .width=${args.width} .lapisDateField=${args.lapisDateField} .placeholder=${args.placeholder} ></gs-date-range-filter> </div> </gs-app>`, }"
         },
         {
           "kind": "variable",
@@ -353,7 +353,7 @@
           "type": {
             "text": "StoryObj<Required<DateRangeFilterProps>>"
           },
-          "default": "{ render: (args) => html` <gs-app lapis=\"${LAPIS_URL}\"> <div class=\"max-w-screen-lg\"> <gs-date-range-filter .dateRangeOptions=${args.dateRangeOptions} earliestDate=\"${args.earliestDate}\" value=\"${args.value}\" width=\"${args.width}\" lapisDateField=\"${args.lapisDateField}\" placeholder=\"${args.placeholder}\" ></gs-date-range-filter> </div> </gs-app>`, play: async ({ canvasElement }) => { await waitFor(async () => { const canvas = await withinShadowRoot(canvasElement, 'gs-date-range-filter'); const placeholderOption = canvas.getByRole('combobox').querySelector('option:checked'); await expect(placeholderOption).toHaveTextContent('Last month'); }); }, argTypes: { value: { control: { type: 'text', }, }, }, }"
+          "default": "{ render: (args) => html` <gs-app lapis=\"${LAPIS_URL}\"> <div class=\"max-w-(--breakpoint-lg)\"> <gs-date-range-filter .dateRangeOptions=${args.dateRangeOptions} earliestDate=\"${args.earliestDate}\" value=\"${args.value}\" width=\"${args.width}\" lapisDateField=\"${args.lapisDateField}\" placeholder=\"${args.placeholder}\" ></gs-date-range-filter> </div> </gs-app>`, play: async ({ canvasElement }) => { await waitFor(async () => { const canvas = await withinShadowRoot(canvasElement, 'gs-date-range-filter'); const placeholderOption = canvas.getByRole('combobox').querySelector('option:checked'); await expect(placeholderOption).toHaveTextContent('Last month'); }); }, argTypes: { value: { control: { type: 'text', }, }, }, }"
         },
         {
           "kind": "variable",
@@ -1222,7 +1222,7 @@
           "type": {
             "text": "StoryObj<Required<TextFilterProps>>"
           },
-          "default": "{ render: (args) => { return html` <gs-app lapis=\"${LAPIS_URL}\"> <div class=\"max-w-screen-lg\"> <gs-text-filter .lapisField=${args.lapisField} .lapisFilter=${args.lapisFilter} .placeholderText=${args.placeholderText} .value=${args.value} .width=${args.width} ></gs-text-filter> </div> </gs-app>`; }, args: { lapisField: 'host', lapisFilter: { country: 'Germany' }, placeholderText: 'Enter host name', value: 'Homo sapiens', width: '100%', }, }"
+          "default": "{ render: (args) => { return html` <gs-app lapis=\"${LAPIS_URL}\"> <div class=\"max-w-(--breakpoint-lg)\"> <gs-text-filter .lapisField=${args.lapisField} .lapisFilter=${args.lapisFilter} .placeholderText=${args.placeholderText} .value=${args.value} .width=${args.width} ></gs-text-filter> </div> </gs-app>`; }, args: { lapisField: 'host', lapisFilter: { country: 'Germany' }, placeholderText: 'Enter host name', value: 'Homo sapiens', width: '100%', }, }"
         },
         {
           "kind": "variable",
@@ -2063,6 +2063,12 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/web-components/visualization/gs-mutations-over-time.spec-d.ts",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/web-components/visualization/gs-mutations-over-time.stories.ts",
@@ -2073,7 +2079,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' }, }, args: { lapisFilter: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-07-10' }, sequenceType: 'nucleotide', views: ['grid'], width: '100%', granularity: 'month', lapisDateField: 'date', initialMeanProportionInterval: { min: 0.05, max: 0.9 }, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, fetchMock: {}, }), tags: ['autodocs'], }"
+          "default": "{ title: 'Visualization/Mutations over time', component: 'gs-mutations-over-time', argTypes: { lapisFilter: { control: 'object' }, sequenceType: { options: ['nucleotide', 'amino acid'], control: { type: 'radio' }, }, views: { options: ['grid'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, granularity: { options: ['day', 'week', 'month', 'year'], control: { type: 'radio' }, }, lapisDateField: { control: 'text' }, displayMutations: { control: 'object' }, initialMeanProportionInterval: { control: 'object' }, pageSizes: { control: 'object' }, }, args: { lapisFilter: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-07-10' }, sequenceType: 'nucleotide', views: ['grid'], width: '100%', granularity: 'month', lapisDateField: 'date', initialMeanProportionInterval: { min: 0.05, max: 0.9 }, pageSizes: [10, 20, 30, 40, 50], }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, fetchMock: {}, }), tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
@@ -2281,6 +2287,16 @@
               "default": "{ min: 0.05, max: 0.9 }",
               "description": "The initial proportion interval for the grid view.\nThe values must be between 0 and 1, inclusive.",
               "attribute": "initialMeanProportionInterval"
+            },
+            {
+              "kind": "field",
+              "name": "pageSizes",
+              "type": {
+                "text": "number[] | number"
+              },
+              "default": "[10, 20, 30, 40, 50]",
+              "description": "The number of rows per page, which can be selected by the user.",
+              "attribute": "pageSizes"
             }
           ],
           "attributes": [
@@ -2364,6 +2380,15 @@
               "default": "{ min: 0.05, max: 0.9 }",
               "description": "The initial proportion interval for the grid view.\nThe values must be between 0 and 1, inclusive.",
               "fieldName": "initialMeanProportionInterval"
+            },
+            {
+              "name": "pageSizes",
+              "type": {
+                "text": "number[] | number"
+              },
+              "default": "[10, 20, 30, 40, 50]",
+              "description": "The number of rows per page, which can be selected by the user.",
+              "fieldName": "pageSizes"
             }
           ],
           "superclass": {
@@ -4219,6 +4244,12 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/web-components/wastewaterVisualization/gs-wastewater-mutations-over-time.spec-d.ts",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/web-components/wastewaterVisualization/gs-wastewater-mutations-over-time.stories.ts",
@@ -4229,7 +4260,7 @@
           "type": {
             "text": "Meta<WastewaterMutationsOverTimeProps & { infoText: string }>"
           },
-          "default": "{ title: 'Wastewater visualization/Wastewater mutations over time', component: 'gs-wastewater-mutations-over-time', argTypes: { lapisFilter: { control: 'object' }, sequenceType: { options: ['nucleotide', 'amino acid'], control: { type: 'radio' }, }, width: { control: 'text' }, height: { control: 'text' }, }, args: { lapisFilter: { versionStatus: 'LATEST_VERSION', isRevocation: false }, sequenceType: 'nucleotide', width: '100%', height: undefined, infoText: 'Some info text', maxNumberOfGridRows: 100, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, fetchMock: {}, }), tags: ['autodocs'], }"
+          "default": "{ title: 'Wastewater visualization/Wastewater mutations over time', component: 'gs-wastewater-mutations-over-time', argTypes: { lapisFilter: { control: 'object' }, sequenceType: { options: ['nucleotide', 'amino acid'], control: { type: 'radio' }, }, width: { control: 'text' }, height: { control: 'text' }, }, args: { lapisFilter: { versionStatus: 'LATEST_VERSION', isRevocation: false }, sequenceType: 'nucleotide', width: '100%', height: undefined, infoText: 'Some info text', pageSizes: [10, 20, 30, 40, 50], }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, fetchMock: {}, }), tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
@@ -4237,7 +4268,7 @@
           "type": {
             "text": "StoryObj<WastewaterMutationsOverTimeProps & { infoText: string }>"
           },
-          "default": "{ render: (args) => html` <gs-app lapis=\"${WISE_LAPIS_URL}\" .mutationAnnotations=${mutationAnnotations}> <gs-wastewater-mutations-over-time .lapisFilter=${args.lapisFilter} .sequenceType=${args.sequenceType} .width=${args.width} .height=${args.height} .maxNumberOfGridRows=${args.maxNumberOfGridRows} > <span slot=\"infoText\">${args.infoText}</span> </gs-wastewater-mutations-over-time> </gs-app> `, parameters: { fetchMock: { mocks: [ { matcher: { name: 'details', url: WISE_DETAILS_ENDPOINT, body: { fields: ['date', 'location', 'nucleotideMutationFrequency', 'aminoAcidMutationFrequency'], versionStatus: 'LATEST_VERSION', isRevocation: false, }, }, response: { status: 200, body: details, }, }, ], }, }, }"
+          "default": "{ render: (args) => html` <gs-app lapis=\"${WISE_LAPIS_URL}\" .mutationAnnotations=${mutationAnnotations}> <gs-wastewater-mutations-over-time .lapisFilter=${args.lapisFilter} .sequenceType=${args.sequenceType} .width=${args.width} .height=${args.height} .pageSizes=${args.pageSizes} > <span slot=\"infoText\">${args.infoText}</span> </gs-wastewater-mutations-over-time> </gs-app> `, parameters: { fetchMock: { mocks: [ { matcher: { name: 'details', url: WISE_DETAILS_ENDPOINT, body: { fields: ['date', 'location', 'nucleotideMutationFrequency', 'aminoAcidMutationFrequency'], versionStatus: 'LATEST_VERSION', isRevocation: false, }, }, response: { status: 200, body: details, }, }, ], }, }, }"
         },
         {
           "kind": "variable",
@@ -4332,13 +4363,13 @@
             },
             {
               "kind": "field",
-              "name": "maxNumberOfGridRows",
+              "name": "pageSizes",
               "type": {
-                "text": "number"
+                "text": "number[] | number"
               },
-              "default": "100",
-              "description": "The maximum number of grid rows to display.",
-              "attribute": "maxNumberOfGridRows"
+              "default": "[10, 20, 30, 40, 50]",
+              "description": "The number of rows per page, which can be selected by the user.",
+              "attribute": "pageSizes"
             }
           ],
           "attributes": [
@@ -4379,13 +4410,13 @@
               "fieldName": "height"
             },
             {
-              "name": "maxNumberOfGridRows",
+              "name": "pageSizes",
               "type": {
-                "text": "number"
+                "text": "number[] | number"
               },
-              "default": "100",
-              "description": "The maximum number of grid rows to display.",
-              "fieldName": "maxNumberOfGridRows"
+              "default": "[10, 20, 30, 40, 50]",
+              "description": "The number of rows per page, which can be selected by the user.",
+              "fieldName": "pageSizes"
             }
           ],
           "superclass": {

package/dist/components.d.ts

@@ -703,6 +703,10 @@ export declare class MutationsOverTimeComponent extends PreactLitAdapterWithGrid
         min: number;
         max: number;
     };
+    /**
+     * The number of rows per page, which can be selected by the user.
+     */
+    pageSizes: number[] | number;
     /* Excluded from this release type: mutationAnnotations */
     render(): JSX_2.Element;
 }
@@ -1375,9 +1379,9 @@ export declare class WastewaterMutationsOverTimeComponent extends PreactLitAdapt
      */
     height: string | undefined;
     /**
-     * The maximum number of grid rows to display.
+     * The number of rows per page, which can be selected by the user.
      */
-    maxNumberOfGridRows: number;
+    pageSizes: number[] | number;
     /* Excluded from this release type: mutationAnnotations */
     render(): JSX_2.Element;
 }
@@ -1426,7 +1430,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-component': MutationsComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -1434,7 +1438,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1442,7 +1446,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-mutations-component': MutationsComponent;
     }
 }
 
@@ -1450,7 +1454,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1554,11 +1558,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-filter': DateRangeFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
-        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
+        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
     }
 }
 
@@ -1566,7 +1566,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1574,7 +1574,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
+        'gs-location-filter': LocationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-location-changed': LocationChangedEvent;
     }
 }
 
@@ -1582,7 +1585,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1590,10 +1593,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
+        'gs-date-range-filter': DateRangeFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-location-changed': LocationChangedEvent;
+        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
     }
 }
 
@@ -1601,7 +1605,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }