@genspectrum/dashboard-components 1.18.0 → 1.18.1

package/dist/util.d.ts

@@ -1268,7 +1268,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-genome-data-viewer': GenomeDataViewerComponent;
+        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
     }
 }
 
@@ -1276,7 +1276,7 @@ declare global {
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'gs-genome-data-viewer': GenomeDataViewerComponent;
+            'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
         }
     }
 }
@@ -1284,7 +1284,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-comparison': MutationComparisonComponent;
+        'gs-date-range-filter': DateRangeFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.dateRangeFilterChanged]: CustomEvent<Record<string, string>>;
+        [gsEventNames.dateRangeOptionChanged]: DateRangeOptionChangedEvent;
     }
 }
 
@@ -1292,7 +1296,7 @@ declare global {
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison': MutationComparisonComponent;
+            'gs-date-range-filter': DateRangeFilterComponent;
         }
     }
 }
@@ -1300,7 +1304,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations': MutationsComponent;
+        'gs-text-filter': TextFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.textFilterChanged]: TextFilterChangedEvent;
     }
 }
 
@@ -1308,7 +1315,7 @@ declare global {
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'gs-mutations': MutationsComponent;
+            'gs-text-filter': TextFilterComponent;
         }
     }
 }
@@ -1316,7 +1323,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-location-filter': LocationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.locationChanged]: LocationChangedEvent;
     }
 }
 
@@ -1324,7 +1334,7 @@ declare global {
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+            'gs-location-filter': LocationFilterComponent;
         }
     }
 }
@@ -1332,7 +1342,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-mutation-filter': MutationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.mutationFilterChanged]: CustomEvent<MutationsFilter>;
     }
 }
 
@@ -1340,7 +1353,7 @@ declare global {
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+            'gs-mutation-filter': MutationFilterComponent;
         }
     }
 }
@@ -1348,7 +1361,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-lineage-filter': LineageFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.lineageFilterChanged]: LineageFilterChangedEvent;
+        [gsEventNames.lineageFilterMultiChanged]: LineageMultiFilterChangedEvent;
     }
 }
 
@@ -1356,7 +1373,7 @@ declare global {
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'gs-aggregate': AggregateComponent;
+            'gs-lineage-filter': LineageFilterComponent;
         }
     }
 }
@@ -1364,7 +1381,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-number-range-filter': NumberRangeFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.numberRangeFilterChanged]: NumberRangeFilterChangedEvent;
+        [gsEventNames.numberRangeValueChanged]: NumberRangeValueChangedEvent;
     }
 }
 
@@ -1372,7 +1393,7 @@ declare global {
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+            'gs-number-range-filter': NumberRangeFilterComponent;
         }
     }
 }
@@ -1380,7 +1401,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-genome-data-viewer': GenomeDataViewerComponent;
     }
 }
 
@@ -1388,7 +1409,7 @@ declare global {
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': MutationsOverTimeComponent;
+            'gs-genome-data-viewer': GenomeDataViewerComponent;
         }
     }
 }
@@ -1396,7 +1417,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-queries-over-time': QueriesOverTimeComponent;
+        'gs-mutations': MutationsComponent;
     }
 }
 
@@ -1404,7 +1425,7 @@ declare global {
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'gs-queries-over-time': QueriesOverTimeComponent;
+            'gs-mutations': MutationsComponent;
         }
     }
 }
@@ -1412,7 +1433,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-mutation-comparison': MutationComparisonComponent;
     }
 }
 
@@ -1420,7 +1441,7 @@ declare global {
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': SequencesByLocationComponent;
+            'gs-mutation-comparison': MutationComparisonComponent;
         }
     }
 }
@@ -1428,7 +1449,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-statistics': StatisticsComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -1436,7 +1457,7 @@ declare global {
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'gs-statistics': StatisticsComponent;
+            'gs-prevalence-over-time': PrevalenceOverTimeComponent;
         }
     }
 }
@@ -1444,10 +1465,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        [gsEventNames.locationChanged]: LocationChangedEvent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -1455,7 +1473,7 @@ declare global {
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'gs-location-filter': LocationFilterComponent;
+            'gs-aggregate': AggregateComponent;
         }
     }
 }
@@ -1463,10 +1481,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-filter': TextFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        [gsEventNames.textFilterChanged]: TextFilterChangedEvent;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -1474,7 +1489,7 @@ declare global {
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'gs-text-filter': TextFilterComponent;
+            'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
         }
     }
 }
@@ -1482,11 +1497,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-filter': DateRangeFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        [gsEventNames.dateRangeFilterChanged]: CustomEvent<Record<string, string>>;
-        [gsEventNames.dateRangeOptionChanged]: DateRangeOptionChangedEvent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1494,7 +1505,7 @@ declare global {
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'gs-date-range-filter': DateRangeFilterComponent;
+            'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
         }
     }
 }
@@ -1502,10 +1513,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        [gsEventNames.mutationFilterChanged]: CustomEvent<MutationsFilter>;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1513,7 +1521,7 @@ declare global {
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': MutationFilterComponent;
+            'gs-mutations-over-time': MutationsOverTimeComponent;
         }
     }
 }
@@ -1521,11 +1529,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-range-filter': NumberRangeFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        [gsEventNames.numberRangeFilterChanged]: NumberRangeFilterChangedEvent;
-        [gsEventNames.numberRangeValueChanged]: NumberRangeValueChangedEvent;
+        'gs-queries-over-time': QueriesOverTimeComponent;
     }
 }
 
@@ -1533,7 +1537,7 @@ declare global {
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'gs-number-range-filter': NumberRangeFilterComponent;
+            'gs-queries-over-time': QueriesOverTimeComponent;
         }
     }
 }
@@ -1541,11 +1545,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        [gsEventNames.lineageFilterChanged]: LineageFilterChangedEvent;
-        [gsEventNames.lineageFilterMultiChanged]: LineageMultiFilterChangedEvent;
+        'gs-statistics': StatisticsComponent;
     }
 }
 
@@ -1553,7 +1553,7 @@ declare global {
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': LineageFilterComponent;
+            'gs-statistics': StatisticsComponent;
         }
     }
 }
@@ -1561,7 +1561,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -1569,7 +1569,7 @@ declare global {
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
-            'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
+            'gs-sequences-by-location': SequencesByLocationComponent;
         }
     }
 }

package/package.json

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

package/src/preact/components/downshift-combobox.tsx

@@ -190,50 +190,59 @@ export function DownshiftMultiCombobox<Item>({
         environment,
     });
 
-    const { isOpen, getToggleButtonProps, getMenuProps, getInputProps, highlightedIndex, getItemProps, closeMenu } =
-        useCombobox({
-            items: availableItems,
-            itemToString(item) {
-                return itemToString(item);
-            },
-            inputValue: itemsFilter,
-            onStateChange({ inputValue: newInputValue, type, selectedItem: newSelectedItem }) {
-                switch (type) {
-                    case useCombobox.stateChangeTypes.InputKeyDownEnter:
-                    case useCombobox.stateChangeTypes.ItemClick:
-                        if (newSelectedItem) {
-                            dispatchEvent([...selectedItems, newSelectedItem]);
-                            setItemsFilter('');
-                        }
-                        break;
-                    case useCombobox.stateChangeTypes.InputChange:
-                        setItemsFilter(newInputValue?.trim() ?? '');
-                        break;
-                    default:
-                        break;
-                }
-            },
-            stateReducer(state, actionAndChanges) {
-                const { changes, type } = actionAndChanges;
-                switch (type) {
-                    case useCombobox.stateChangeTypes.InputKeyDownEnter:
-                    case useCombobox.stateChangeTypes.ItemClick:
-                        return {
-                            ...changes,
-                            isOpen: true,
-                            highlightedIndex: state.highlightedIndex,
-                            inputValue: '',
-                        };
-                    default:
-                        return changes;
-                }
-            },
-            environment,
-        });
+    const {
+        isOpen,
+        getToggleButtonProps,
+        getMenuProps,
+        getInputProps,
+        highlightedIndex,
+        getItemProps,
+        closeMenu,
+        selectItem,
+    } = useCombobox({
+        items: availableItems,
+        itemToString(item) {
+            return itemToString(item);
+        },
+        inputValue: itemsFilter,
+        onStateChange({ inputValue: newInputValue, type, selectedItem: newSelectedItem }) {
+            switch (type) {
+                case useCombobox.stateChangeTypes.InputKeyDownEnter:
+                case useCombobox.stateChangeTypes.ItemClick:
+                    if (newSelectedItem) {
+                        dispatchEvent([...selectedItems, newSelectedItem]);
+                        setItemsFilter('');
+                    }
+                    break;
+                case useCombobox.stateChangeTypes.InputChange:
+                    setItemsFilter(newInputValue?.trim() ?? '');
+                    break;
+                default:
+                    break;
+            }
+        },
+        stateReducer(state, actionAndChanges) {
+            const { changes, type } = actionAndChanges;
+            switch (type) {
+                case useCombobox.stateChangeTypes.InputKeyDownEnter:
+                case useCombobox.stateChangeTypes.ItemClick:
+                    return {
+                        ...changes,
+                        isOpen: true,
+                        highlightedIndex: state.highlightedIndex,
+                        inputValue: '',
+                    };
+                default:
+                    return changes;
+            }
+        },
+        environment,
+    });
 
     const clearAll = () => {
         dispatchEvent([]);
         setItemsFilter('');
+        selectItem(null);
     };
 
     const buttonRef = useRef(null);
@@ -259,7 +268,10 @@ export function DownshiftMultiCombobox<Item>({
                                 aria-label={`remove ${itemToString(selectedItem)}`}
                                 className='cursor-pointer hover:text-red-600'
                                 type='button'
-                                onClick={() => removeSelectedItem(selectedItem)}
+                                onClick={() => {
+                                    removeSelectedItem(selectedItem);
+                                    selectItem(null);
+                                }}
                                 tabIndex={-1}
                             >
                                 ×

package/src/preact/lineageFilter/lineage-filter.stories.tsx

@@ -422,6 +422,119 @@ export const MultiSelectClearAll: StoryObj<LineageFilterProps> = {
     },
 };
 
+export const MultiSelectReselectAfterClearAll: StoryObj<LineageFilterProps> = {
+    render: (args) => (
+        <LapisUrlContextProvider value={LAPIS_URL}>
+            <LineageFilter {...args} />
+        </LapisUrlContextProvider>
+    ),
+    args: {
+        ...Default.args,
+        multiSelect: true,
+        value: ['A.1', 'B.1'],
+        placeholderText: 'Select lineages',
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        const lineageChangedListenerMock = fn();
+
+        await step('Setup event listener mock', () => {
+            canvasElement.addEventListener(gsEventNames.lineageFilterMultiChanged, lineageChangedListenerMock);
+        });
+
+        await step('multi-select filter is rendered with initial values', async () => {
+            await waitFor(async () => {
+                await expect(canvas.getByText('A.1')).toBeVisible();
+                await expect(canvas.getByText('B.1')).toBeVisible();
+            });
+        });
+
+        await step('clear all selections', async () => {
+            const clearButton = canvas.getByLabelText('clear selection');
+            await userEvent.click(clearButton);
+
+            await waitFor(() => {
+                return expect(lineageChangedListenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({
+                    pangoLineage: undefined,
+                });
+            });
+        });
+
+        await step('reselect A.1 from the dropdown', async () => {
+            const input = await canvas.findByPlaceholderText('Select lineages');
+            await userEvent.type(input, 'A.1');
+            await userEvent.click(canvas.getByRole('option', { name: 'A.1(2,574)' }));
+
+            await waitFor(() => {
+                return expect(lineageChangedListenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({
+                    pangoLineage: ['A.1'],
+                });
+            });
+        });
+
+        await step('verify A.1 is shown', async () => {
+            await expect(canvas.getByText('A.1')).toBeVisible();
+        });
+    },
+};
+
+export const MultiSelectReselectAfterRemove: StoryObj<LineageFilterProps> = {
+    render: (args) => (
+        <LapisUrlContextProvider value={LAPIS_URL}>
+            <LineageFilter {...args} />
+        </LapisUrlContextProvider>
+    ),
+    args: {
+        ...Default.args,
+        multiSelect: true,
+        value: ['A.1', 'B.1'],
+        placeholderText: 'Select lineages',
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        const lineageChangedListenerMock = fn();
+
+        await step('Setup event listener mock', () => {
+            canvasElement.addEventListener(gsEventNames.lineageFilterMultiChanged, lineageChangedListenerMock);
+        });
+
+        await step('multi-select filter is rendered with initial values', async () => {
+            await waitFor(async () => {
+                await expect(canvas.getByText('A.1')).toBeVisible();
+                await expect(canvas.getByText('B.1')).toBeVisible();
+            });
+        });
+
+        await step('remove A.1', async () => {
+            const removeButton = canvas.getByLabelText('remove A.1');
+            await userEvent.click(removeButton);
+
+            await waitFor(() => {
+                return expect(lineageChangedListenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({
+                    pangoLineage: ['B.1'],
+                });
+            });
+        });
+
+        await step('reselect A.1 from the dropdown', async () => {
+            const input = await canvas.findByPlaceholderText('Select lineages');
+            await userEvent.type(input, 'A.1');
+            await userEvent.click(canvas.getByRole('option', { name: 'A.1(2,574)' }));
+
+            await waitFor(() => {
+                return expect(lineageChangedListenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({
+                    pangoLineage: ['B.1', 'A.1'],
+                });
+            });
+        });
+
+        await step('verify A.1 is shown again', async () => {
+            await expect(canvas.getByText('A.1')).toBeVisible();
+            await expect(canvas.getByText('B.1')).toBeVisible();
+        });
+    },
+};
+
 async function prepare(canvasElement: HTMLElement, step: StepFunction<PreactRenderer, unknown>) {
     const canvas = within(canvasElement);