@genspectrum/dashboard-components 0.19.0 → 0.19.2

package/dist/util.d.ts

@@ -918,7 +918,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-mutations-component': MutationsComponent;
     }
 }
 
@@ -926,7 +926,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -934,7 +934,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-component': MutationsComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -942,7 +942,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1081,10 +1081,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-filter': TextFilterComponent;
+        'gs-date-range-filter': DateRangeFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-text-filter-changed': TextFilterChangedEvent;
+        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
     }
 }
 
@@ -1092,7 +1093,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1100,11 +1101,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-filter': DateRangeFilterComponent;
+        'gs-text-filter': TextFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
-        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
+        'gs-text-filter-changed': TextFilterChangedEvent;
     }
 }
 
@@ -1112,7 +1112,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/package.json

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

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

@@ -1,6 +1,6 @@
 import { useCombobox } from 'downshift/preact';
 import { type ComponentChild } from 'preact';
-import { useMemo, useRef, useState } from 'preact/hooks';
+import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
 
 import { DeleteIcon } from '../shared/icons/DeleteIcon';
 
@@ -15,7 +15,7 @@ export function DownshiftCombobox<Item>({
     inputClassName = '',
 }: {
     allItems: Item[];
-    value?: Item | null;
+    value: Item | null;
     filterItemsByInputValue: (item: Item, value: string) => boolean;
     createEvent: (item: Item | null) => CustomEvent;
     itemToString: (item: Item | undefined | null) => string;
@@ -23,12 +23,25 @@ export function DownshiftCombobox<Item>({
     formatItemInList: (item: Item) => ComponentChild;
     inputClassName?: string;
 }) {
-    const [itemsFilter, setItemsFilter] = useState(itemToString(value));
+    const [selectedItem, setSelectedItem] = useState<Item | null>(() => value);
+    const [itemsFilter, setItemsFilter] = useState(() => itemToString(selectedItem));
+
+    useEffect(() => {
+        setSelectedItem(value);
+        setItemsFilter(itemToString(value));
+    }, [itemToString, value]);
+
     const items = useMemo(
         () => allItems.filter((item) => filterItemsByInputValue(item, itemsFilter)),
         [allItems, filterItemsByInputValue, itemsFilter],
     );
     const divRef = useRef<HTMLDivElement>(null);
+    const [inputIsInvalid, setInputIsInvalid] = useState(false);
+
+    const selectItem = (item: Item | null) => {
+        setSelectedItem(item);
+        divRef.current?.dispatchEvent(createEvent(item));
+    };
 
     const shadowRoot = divRef.current?.shadowRoot ?? undefined;
 
@@ -49,39 +62,41 @@ export function DownshiftCombobox<Item>({
         getInputProps,
         highlightedIndex,
         getItemProps,
-        selectedItem,
         inputValue,
-        selectItem,
-        setInputValue,
         closeMenu,
     } = useCombobox({
         onInputValueChange({ inputValue }) {
-            setItemsFilter(inputValue);
+            setInputIsInvalid(false);
+            setItemsFilter(inputValue.trim());
         },
         onSelectedItemChange({ selectedItem }) {
-            if (selectedItem !== null) {
-                divRef.current?.dispatchEvent(createEvent(selectedItem));
-            }
+            selectItem(selectedItem);
         },
         items,
         itemToString(item) {
             return itemToString(item);
         },
-        selectedItem: value,
+        selectedItem,
         environment,
     });
 
     const onInputBlur = () => {
         if (inputValue === '') {
-            divRef.current?.dispatchEvent(createEvent(null));
             selectItem(null);
-        } else if (inputValue !== itemToString(selectedItem)) {
-            setInputValue(itemToString(selectedItem) || '');
+            return;
+        }
+
+        const trimmedInput = inputValue.trim();
+        const matchingItem = items.find((item) => itemToString(item) === trimmedInput);
+        if (matchingItem !== undefined) {
+            selectItem(matchingItem);
+            return;
         }
+
+        setInputIsInvalid(true);
     };
 
     const clearInput = () => {
-        divRef.current?.dispatchEvent(createEvent(null));
         selectItem(null);
     };
 
@@ -91,7 +106,7 @@ export function DownshiftCombobox<Item>({
         <div ref={divRef} className={'relative w-full'}>
             <div className='w-full flex flex-col gap-1'>
                 <div
-                    className={`flex gap-0.5 input min-w-32 w-full ${inputClassName}`}
+                    className={`flex gap-0.5 input min-w-32 w-full ${inputClassName} ${inputIsInvalid ? 'input-error' : ''}`}
                     onBlur={(event) => {
                         if (event.relatedTarget != buttonRef.current) {
                             closeMenu();

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

@@ -77,16 +77,16 @@ const LineageSelector = ({
             allItems={data}
             value={value}
             filterItemsByInputValue={filterByInputValue}
-            createEvent={(item: string | null) => new LineageFilterChangedEvent({ [lapisField]: item ?? undefined })}
-            itemToString={(item: string | undefined | null) => item ?? ''}
+            createEvent={(item) => new LineageFilterChangedEvent({ [lapisField]: item ?? undefined })}
+            itemToString={(item) => item ?? ''}
             placeholderText={placeholderText}
             formatItemInList={(item: string) => item}
         />
     );
 };
 
-function filterByInputValue(item: string, inputValue: string | undefined | null) {
-    if (inputValue === undefined || inputValue === null || inputValue === '') {
+function filterByInputValue(item: string, inputValue: string | null) {
+    if (inputValue === null || inputValue === '') {
         return true;
     }
     return item?.toLowerCase().includes(inputValue?.toLowerCase() || '');

package/src/preact/locationFilter/location-filter.tsx

@@ -87,12 +87,10 @@ const LocationSelector = ({
     return (
         <DownshiftCombobox
             allItems={allItems}
-            value={selectedItem}
+            value={selectedItem ?? null}
             filterItemsByInputValue={filterByInputValue}
-            createEvent={(item: SelectItem | null) =>
-                new LocationChangedEvent(item?.lapisFilter ?? emptyLocationFilter(fields))
-            }
-            itemToString={(item: SelectItem | undefined | null) => item?.label ?? ''}
+            createEvent={(item) => new LocationChangedEvent(item?.lapisFilter ?? emptyLocationFilter(fields))}
+            itemToString={(item) => item?.label ?? ''}
             placeholderText={placeholderText}
             formatItemInList={(item: SelectItem) => (
                 <>
@@ -107,8 +105,8 @@ const LocationSelector = ({
     );
 };
 
-function filterByInputValue(item: SelectItem, inputValue: string | undefined | null) {
-    if (inputValue === undefined || inputValue === null) {
+function filterByInputValue(item: SelectItem, inputValue: string | null) {
+    if (inputValue === null) {
         return true;
     }
     return (

package/src/preact/mutationsOverTime/getFilteredMutationsOverTimeData.ts

@@ -47,7 +47,7 @@ export function getFilteredMutationOverTimeData({
             return true;
         }
 
-        if (displayMutationsSet !== null && !displayMutationsSet.has(entry.mutation.code)) {
+        if (displayMutationsSet !== null && !displayMutationsSet.has(entry.mutation.code.toUpperCase())) {
             return true;
         }
 

package/src/preact/textFilter/text-filter.stories.tsx

@@ -1,5 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/preact';
-import { expect, fireEvent, fn, waitFor, within } from '@storybook/test';
+import { expect, fireEvent, fn, userEvent, waitFor, within } from '@storybook/test';
 
 import data from './__mockData__/aggregated_hosts.json';
 import { TextFilter, type TextFilterProps } from './text-filter';
@@ -104,13 +104,73 @@ export const RemoveInitialValue: StoryObj<TextFilterProps> = {
         await step('Remove initial value', async () => {
             await fireEvent.click(canvas.getByRole('button', { name: 'clear selection' }));
 
-            await expect(changedListenerMock).toHaveBeenCalledWith(
-                expect.objectContaining({
-                    detail: {
-                        host: undefined,
-                    },
-                }),
-            );
+            await waitFor(async () => {
+                await expect(changedListenerMock).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        detail: {
+                            host: undefined,
+                        },
+                    }),
+                );
+            });
+        });
+    },
+};
+
+export const KeepsPartialInputInInputField: StoryObj<TextFilterProps> = {
+    ...Default,
+    render: (args) => (
+        <>
+            <button data-testid='focusHelper'>Focus helper</button>
+            <LapisUrlContextProvider value={LAPIS_URL}>
+                <TextFilter {...args} />
+            </LapisUrlContextProvider>
+        </>
+    ),
+    args: {
+        ...Default.args,
+        value: '',
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+
+        const changedListenerMock = fn();
+        await step('Setup event listener mock', () => {
+            canvasElement.addEventListener('gs-text-filter-changed', changedListenerMock);
+        });
+        const inputField = () => canvas.getByPlaceholderText('Enter a host name', { exact: false });
+        async function typeAndBlur(input: string) {
+            await userEvent.click(inputField());
+            await userEvent.type(inputField(), input);
+            await userEvent.click(canvas.getByTestId('focusHelper'));
+        }
+
+        await waitFor(async () => {
+            await expect(inputField()).toHaveValue('');
+        });
+
+        await step('Type a value that it not valid yet and focus out', async () => {
+            await typeAndBlur('Homo sapi');
+            await waitFor(async () => {
+                await expect(inputField()).toHaveValue('Homo sapi');
+            });
+            await expect(changedListenerMock).not.toHaveBeenCalled();
+        });
+
+        await step('Complete the input value and expect an event', async () => {
+            await typeAndBlur('ens');
+            await waitFor(async () => {
+                await expect(inputField()).toHaveValue('Homo sapiens');
+            });
+            await waitFor(async () => {
+                await expect(changedListenerMock).toHaveBeenLastCalledWith(
+                    expect.objectContaining({
+                        detail: {
+                            host: 'Homo sapiens',
+                        },
+                    }),
+                );
+            });
         });
     },
 };

package/src/preact/textFilter/text-filter.tsx

@@ -85,12 +85,10 @@ const TextSelector = ({
     return (
         <DownshiftCombobox
             allItems={data}
-            value={initialSelectedItem}
+            value={initialSelectedItem ?? null}
             filterItemsByInputValue={filterByInputValue}
-            createEvent={(item: SelectItem | null) =>
-                new TextFilterChangedEvent({ [lapisField]: item?.value ?? undefined })
-            }
-            itemToString={(item: SelectItem | undefined | null) => item?.value ?? ''}
+            createEvent={(item) => new TextFilterChangedEvent({ [lapisField]: item?.value ?? undefined })}
+            itemToString={(item) => item?.value ?? ''}
             placeholderText={placeholderText}
             formatItemInList={(item: SelectItem) => {
                 return (
@@ -104,8 +102,8 @@ const TextSelector = ({
     );
 };
 
-function filterByInputValue(item: SelectItem, inputValue: string | undefined | null) {
-    if (inputValue === undefined || inputValue === null || inputValue === '') {
+function filterByInputValue(item: SelectItem, inputValue: string | null) {
+    if (inputValue === null || inputValue === '') {
         return true;
     }
     return item.value?.toLowerCase().includes(inputValue?.toLowerCase() || '');

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

@@ -1,4 +1,4 @@
-import { expect, fireEvent, fn, userEvent, waitFor } from '@storybook/test';
+import { expect, fn, userEvent, waitFor } from '@storybook/test';
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 
@@ -152,9 +152,9 @@ export const FiresEvents: StoryObj<Required<TextFilterProps>> = {
         });
 
         await step('Remove initial value', async () => {
-            await fireEvent.click(canvas.getByRole('button', { name: 'clear selection' }));
+            await userEvent.click(canvas.getByRole('button', { name: 'clear selection' }));
 
-            await expect(listenerMock).toHaveBeenCalledWith(
+            await expect(listenerMock).toHaveBeenLastCalledWith(
                 expect.objectContaining({
                     detail: {
                         host: undefined,
@@ -162,13 +162,6 @@ export const FiresEvents: StoryObj<Required<TextFilterProps>> = {
                 }),
             );
         });
-
-        await step('Empty input', async () => {
-            inputField().blur();
-            await expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({
-                host: undefined,
-            });
-        });
     },
     args: {
         ...Default.args,