@genspectrum/dashboard-components 1.10.0 → 1.10.2

package/dist/util.d.ts

@@ -942,7 +942,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-genome-data-viewer': GenomeDataViewerComponent;
+        'gs-mutation-comparison-component': MutationComparisonComponent;
     }
 }
 
@@ -950,7 +950,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-genome-data-viewer': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -958,7 +958,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-comparison-component': MutationComparisonComponent;
+        'gs-genome-data-viewer': GenomeDataViewerComponent;
     }
 }
 
@@ -966,7 +966,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-genome-data-viewer': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -974,7 +974,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-mutations': MutationsComponent;
     }
 }
 
@@ -982,7 +982,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -990,7 +990,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations': MutationsComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -998,7 +998,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1054,7 +1054,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -1062,7 +1062,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1070,7 +1070,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1078,7 +1078,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1100,6 +1100,22 @@ declare global {
 }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
+    }
+}
+
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
+
 declare global {
     interface HTMLElementTagNameMap {
         'gs-date-range-filter': DateRangeFilterComponent;
@@ -1217,22 +1233,6 @@ declare global {
 }
 
 
-declare global {
-    interface HTMLElementTagNameMap {
-        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
-    }
-}
-
-
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
-        }
-    }
-}
-
-
 declare module 'chart.js' {
     interface CartesianScaleTypeRegistry {
         logit: {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "1.10.0",
+    "version": "1.10.2",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",

package/src/preact/dateRangeFilter/date-range-filter.stories.tsx

@@ -171,7 +171,9 @@ export const SetsValueOnBlur: StoryObj<DateRangeFilterProps> = {
                         },
                     }),
                 );
+            });
 
+            await waitFor(async () => {
                 await expect(optionChangedListenerMock).toHaveBeenCalledWith(
                     expect.objectContaining({
                         detail: {

package/src/web-components/input/gs-lineage-filter.stories.ts

@@ -155,6 +155,54 @@ export const LineageFilter: StoryObj<Required<LineageFilterProps>> = {
     },
 };
 
+export const LineageFilterStringValue: StoryObj<Required<LineageFilterProps>> = {
+    render: (args) => {
+        return html` <gs-app lapis="${LAPIS_URL}">
+            <div class="max-w-(--breakpoint-lg)">
+                <gs-lineage-filter
+                    lapisField="pangoLineage"
+                    placeholderText="Enter a lineage"
+                    value="B.1.1.7"
+                    .multiSelect=${args.multiSelect}
+                ></gs-lineage-filter>
+            </div>
+        </gs-app>`;
+    },
+    args: {
+        multiSelect: false,
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = await withinShadowRoot(canvasElement, 'gs-lineage-filter');
+        await waitFor(() => {
+            return expect(canvas.getByPlaceholderText('Enter a lineage')).toBeVisible();
+        });
+    },
+};
+
+export const LineageFilterArrayValue: StoryObj<Required<LineageFilterProps>> = {
+    render: (args) => {
+        return html` <gs-app lapis="${LAPIS_URL}">
+            <div class="max-w-(--breakpoint-lg)">
+                <gs-lineage-filter
+                    lapisField="pangoLineage"
+                    placeholderText="Enter a lineage"
+                    value='["B.1.1.7", "B.1.1.10"]'
+                    .multiSelect=${args.multiSelect}
+                ></gs-lineage-filter>
+            </div>
+        </gs-app>`;
+    },
+    args: {
+        multiSelect: true,
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = await withinShadowRoot(canvasElement, 'gs-lineage-filter');
+        await waitFor(() => {
+            return expect(canvas.getByPlaceholderText('Enter a lineage')).toBeVisible();
+        });
+    },
+};
+
 export const DelayToShowLoadingState: StoryObj<Required<LineageFilterProps>> = {
     ...Template,
     parameters: {

package/src/web-components/input/gs-lineage-filter.tsx

@@ -49,7 +49,22 @@ export class LineageFilterComponent extends PreactLitAdapter {
      * Can be a string for single select mode or an array of strings (or comma-separated string) for multi-select mode.
      * Examples: "B.1.1.7" or ["B.1.1.7", "BA.5"] or "B.1.1.7,BA.5"
      */
-    @property({ type: Array })
+    @property({
+        converter: (value) => {
+            if (value === null) {
+                return value;
+            }
+            try {
+                const parsed = JSON.parse(value) as unknown;
+                if (Array.isArray(parsed) && parsed.every((v) => typeof v === 'string')) {
+                    return parsed;
+                }
+                return value;
+            } catch {
+                return value;
+            }
+        },
+    })
     value: string | string[] = '';
 
     /**

package/src/web-components/input/gs-text-filter.stories.ts

@@ -162,13 +162,15 @@ export const FiresEvents: StoryObj<Required<TextFilterProps>> = {
         await step('Remove initial value', async () => {
             await userEvent.click(canvas.getByRole('button', { name: 'clear selection' }));
 
-            await expect(listenerMock).toHaveBeenCalledWith(
-                expect.objectContaining({
-                    detail: {
-                        host: undefined,
-                    },
-                }),
-            );
+            await waitFor(async () => {
+                await expect(listenerMock).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        detail: {
+                            host: undefined,
+                        },
+                    }),
+                );
+            });
         });
     },
     args: {

package/standalone-bundle/dashboard-components.js

@@ -40215,7 +40215,18 @@ let so = class extends zn {
   }
 };
 is([
-  U({ type: Array })
+  U({
+    converter: (n) => {
+      if (n === null)
+        return n;
+      try {
+        const e = JSON.parse(n);
+        return Array.isArray(e) && e.every((t) => typeof t == "string") ? e : n;
+      } catch {
+        return n;
+      }
+    }
+  })
 ], so.prototype, "value", 2);
 is([
   U()