@genspectrum/dashboard-components 1.10.0 → 1.10.1

package/custom-elements.json

@@ -622,6 +622,22 @@
           },
           "default": "{ ...Template, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-lineage-filter'); await waitFor(() => { return expect(canvas.getByPlaceholderText('Enter a lineage')).toBeVisible(); }); }, }"
         },
+        {
+          "kind": "variable",
+          "name": "LineageFilterStringValue",
+          "type": {
+            "text": "StoryObj<Required<LineageFilterProps>>"
+          },
+          "default": "{ 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(); }); }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "LineageFilterArrayValue",
+          "type": {
+            "text": "StoryObj<Required<LineageFilterProps>>"
+          },
+          "default": "{ 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(); }); }, }"
+        },
         {
           "kind": "variable",
           "name": "DelayToShowLoadingState",
@@ -672,6 +688,22 @@
             "module": "src/web-components/input/gs-lineage-filter.stories.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "LineageFilterStringValue",
+          "declaration": {
+            "name": "LineageFilterStringValue",
+            "module": "src/web-components/input/gs-lineage-filter.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "LineageFilterArrayValue",
+          "declaration": {
+            "name": "LineageFilterArrayValue",
+            "module": "src/web-components/input/gs-lineage-filter.stories.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "DelayToShowLoadingState",
@@ -1578,7 +1610,7 @@
           "type": {
             "text": "StoryObj<Required<TextFilterProps>>"
           },
-          "default": "{ ...Default, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-text-filter'); const inputField = () => canvas.getByPlaceholderText('Enter host name'); const listenerMock = fn(); await step('Setup event listener mock', () => { canvasElement.addEventListener(gsEventNames.textFilterChanged, listenerMock); }); await step('wait until data is loaded', async () => { await waitFor(() => { return expect(inputField()).toBeEnabled(); }); }); await step('Enters an invalid host name', async () => { await userEvent.type(inputField(), 'notInList'); await expect(listenerMock).not.toHaveBeenCalled(); }); await step('Empty input', async () => { await userEvent.type(inputField(), '{backspace>9/}'); }); await step('Enter a valid host name', async () => { await userEvent.type(inputField(), 'Homo s'); const dropdownOption = await canvas.findByText('Homo sapiens'); await userEvent.click(dropdownOption); }); await step('Verify event is fired with correct detail', async () => { await waitFor(async () => { await expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { host: 'Homo sapiens', }, }), ); }); }); await step('Remove initial value', async () => { await userEvent.click(canvas.getByRole('button', { name: 'clear selection' })); await expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { host: undefined, }, }), ); }); }, args: { ...Default.args, value: '', }, }"
+          "default": "{ ...Default, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-text-filter'); const inputField = () => canvas.getByPlaceholderText('Enter host name'); const listenerMock = fn(); await step('Setup event listener mock', () => { canvasElement.addEventListener(gsEventNames.textFilterChanged, listenerMock); }); await step('wait until data is loaded', async () => { await waitFor(() => { return expect(inputField()).toBeEnabled(); }); }); await step('Enters an invalid host name', async () => { await userEvent.type(inputField(), 'notInList'); await expect(listenerMock).not.toHaveBeenCalled(); }); await step('Empty input', async () => { await userEvent.type(inputField(), '{backspace>9/}'); }); await step('Enter a valid host name', async () => { await userEvent.type(inputField(), 'Homo s'); const dropdownOption = await canvas.findByText('Homo sapiens'); await userEvent.click(dropdownOption); }); await step('Verify event is fired with correct detail', async () => { await waitFor(async () => { await expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { host: 'Homo sapiens', }, }), ); }); }); await step('Remove initial value', async () => { await userEvent.click(canvas.getByRole('button', { name: 'clear selection' })); await waitFor(async () => { await expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { host: undefined, }, }), ); }); }); }, args: { ...Default.args, value: '', }, }"
         }
       ],
       "exports": [

package/dist/components.d.ts

@@ -353,6 +353,7 @@ export declare class LineageFilterComponent extends PreactLitAdapter {
      * Defaults to false.
      */
     hideCounts: boolean | undefined;
+    updated(changedProps: Map<string, unknown>): void;
     render(): JSX_2.Element;
 }
 
@@ -1672,7 +1673,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-genome-data-viewer': GenomeDataViewerComponent;
+        'gs-mutation-comparison-component': MutationComparisonComponent;
     }
 }
 
@@ -1680,7 +1681,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>;
         }
     }
 }
@@ -1688,7 +1689,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-comparison-component': MutationComparisonComponent;
+        'gs-mutations': MutationsComponent;
     }
 }
 
@@ -1696,7 +1697,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1720,7 +1721,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations': MutationsComponent;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -1728,7 +1729,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1736,7 +1737,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -1744,7 +1745,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1752,7 +1753,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1760,7 +1761,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1768,7 +1769,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -1776,7 +1777,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>;
         }
     }
 }
@@ -1800,7 +1801,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-genome-data-viewer': GenomeDataViewerComponent;
     }
 }
 
@@ -1808,7 +1809,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>;
         }
     }
 }
@@ -1909,11 +1910,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;
     }
 }
 
@@ -1921,7 +1922,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1929,11 +1930,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;
     }
 }
 
@@ -1941,7 +1942,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/dist/components.js

@@ -15839,6 +15839,29 @@ let LineageFilterComponent = class extends PreactLitAdapter {
     this.width = "100%";
     this.hideCounts = false;
   }
+  updated(changedProps) {
+    if (changedProps.has("value") || changedProps.has("multiSelect")) {
+      if (this.multiSelect) {
+        if (typeof this.value === "string") {
+          let parsed;
+          try {
+            parsed = JSON.parse(this.value);
+          } catch {
+            parsed = this.value.split(",").map((s2) => s2.trim());
+          }
+          if (Array.isArray(parsed) && parsed.every((v2) => typeof v2 === "string")) {
+            this.value = parsed;
+          } else {
+            this.value = [];
+          }
+        }
+      } else {
+        if (Array.isArray(this.value)) {
+          this.value = this.value[0] ?? "";
+        }
+      }
+    }
+  }
   render() {
     return /* @__PURE__ */ u$1(
       LineageFilter,
@@ -15855,7 +15878,7 @@ let LineageFilterComponent = class extends PreactLitAdapter {
   }
 };
 __decorateClass$1([
-  n$1({ type: Array })
+  n$1()
 ], LineageFilterComponent.prototype, "value", 2);
 __decorateClass$1([
   n$1()