@genspectrum/dashboard-components 1.10.0 → 1.10.1

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-mutations': MutationsComponent;
     }
 }
 
@@ -966,7 +966,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -990,7 +990,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations': MutationsComponent;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -998,7 +998,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1006,7 +1006,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -1014,7 +1014,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1022,7 +1022,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1030,7 +1030,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1038,7 +1038,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -1046,7 +1046,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-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-genome-data-viewer': GenomeDataViewerComponent;
     }
 }
 
@@ -1078,7 +1078,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-genome-data-viewer': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1179,11 +1179,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;
     }
 }
 
@@ -1191,7 +1191,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1199,11 +1199,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;
     }
 }
 
@@ -1211,7 +1211,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "1.10.0",
+    "version": "1.10.1",
     "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,7 @@ 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()
     value: string | string[] = '';
 
     /**
@@ -103,6 +103,33 @@ export class LineageFilterComponent extends PreactLitAdapter {
     @property({ type: Boolean })
     hideCounts: boolean | undefined = false;
 
+    override updated(changedProps: Map<string, unknown>) {
+        if (changedProps.has('value') || changedProps.has('multiSelect')) {
+            if (this.multiSelect) {
+                if (typeof this.value === 'string') {
+                    let parsed: unknown;
+                    try {
+                        parsed = JSON.parse(this.value);
+                    } catch {
+                        parsed = this.value.split(',').map((s) => s.trim());
+                    }
+
+                    // type guard
+                    if (Array.isArray(parsed) && parsed.every((v) => typeof v === 'string')) {
+                        this.value = parsed;
+                    } else {
+                        this.value = [];
+                    }
+                }
+            } else {
+                // single select: ensure value is a string
+                if (Array.isArray(this.value)) {
+                    this.value = this.value[0] ?? '';
+                }
+            }
+        }
+    }
+
     override render() {
         return (
             <LineageFilter

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

@@ -40199,6 +40199,21 @@ let so = class extends zn {
   constructor() {
     super(...arguments), this.value = "", this.lapisField = "", this.multiSelect = !1, this.lapisFilter = {}, this.placeholderText = void 0, this.width = "100%", this.hideCounts = !1;
   }
+  updated(n) {
+    if (n.has("value") || n.has("multiSelect"))
+      if (this.multiSelect) {
+        if (typeof this.value == "string") {
+          let e;
+          try {
+            e = JSON.parse(this.value);
+          } catch {
+            e = this.value.split(",").map((t) => t.trim());
+          }
+          Array.isArray(e) && e.every((t) => typeof t == "string") ? this.value = e : this.value = [];
+        }
+      } else
+        Array.isArray(this.value) && (this.value = this.value[0] ?? "");
+  }
   render() {
     return /* @__PURE__ */ v(
       vB,
@@ -40215,7 +40230,7 @@ let so = class extends zn {
   }
 };
 is([
-  U({ type: Array })
+  U()
 ], so.prototype, "value", 2);
 is([
   U()