@genspectrum/dashboard-components 0.11.7 → 0.12.1

package/src/preact/textInput/text-input.tsx

@@ -1,9 +1,11 @@
+import { useCombobox } from 'downshift/preact';
 import { type FunctionComponent } from 'preact';
-import { useContext, useRef } from 'preact/hooks';
+import { useContext, useRef, useState } from 'preact/hooks';
 import z from 'zod';
 
 import { fetchAutocompleteList } from './fetchAutocompleteList';
 import { LapisUrlContext } from '../LapisUrlContext';
+import { TextInputChangedEvent } from './TextInputChangedEvent';
 import { ErrorBoundary } from '../components/error-boundary';
 import { LoadingDisplay } from '../components/loading-display';
 import { NoDataDisplay } from '../components/no-data-display';
@@ -36,11 +38,9 @@ export const TextInput: FunctionComponent<TextInputProps> = (props) => {
     );
 };
 
-const TextInputInner: FunctionComponent<TextInputInnerProps> = ({ lapisField, placeholderText, initialValue }) => {
+const TextInputInner: FunctionComponent<TextInputInnerProps> = ({ initialValue, lapisField, placeholderText }) => {
     const lapis = useContext(LapisUrlContext);
 
-    const inputRef = useRef<HTMLInputElement>(null);
-
     const { data, error, isLoading } = useQuery(() => fetchAutocompleteList(lapis, lapisField), [lapisField, lapis]);
 
     if (isLoading) {
@@ -55,43 +55,146 @@ const TextInputInner: FunctionComponent<TextInputInnerProps> = ({ lapisField, pl
         return <NoDataDisplay />;
     }
 
-    const onInput = () => {
-        const value = inputRef.current?.value === '' ? undefined : inputRef.current?.value;
-
-        if (isValidValue(value)) {
-            inputRef.current?.dispatchEvent(
-                new CustomEvent('gs-text-input-changed', {
-                    detail: { [lapisField]: value },
-                    bubbles: true,
-                    composed: true,
-                }),
-            );
-        }
-    };
+    return (
+        <TextSelector
+            lapisField={lapisField}
+            initialValue={initialValue}
+            placeholderText={placeholderText}
+            data={data}
+        />
+    );
+};
 
-    const isValidValue = (value: string | undefined) => {
-        if (value === undefined) {
+const TextSelector = ({
+    lapisField,
+    initialValue,
+    placeholderText,
+    data,
+}: TextInputInnerProps & {
+    data: string[];
+}) => {
+    const [items, setItems] = useState(data.filter((item) => filterByInputValue(item, initialValue)));
+
+    const divRef = useRef<HTMLDivElement>(null);
+
+    const shadowRoot = divRef.current?.shadowRoot ?? undefined;
+
+    const environment =
+        shadowRoot !== undefined
+            ? {
+                  addEventListener: window.addEventListener.bind(window),
+                  removeEventListener: window.removeEventListener.bind(window),
+                  document: shadowRoot.ownerDocument,
+                  Node: window.Node,
+              }
+            : undefined;
+
+    function filterByInputValue(item: string, inputValue: string | undefined | null) {
+        if (inputValue === undefined || inputValue === null || inputValue === '') {
             return true;
         }
-        return data.includes(value);
+        return item?.toLowerCase().includes(inputValue?.toLowerCase() || '');
+    }
+
+    const {
+        isOpen,
+        getToggleButtonProps,
+        getMenuProps,
+        getInputProps,
+        highlightedIndex,
+        getItemProps,
+        selectedItem,
+        inputValue,
+        selectItem,
+        setInputValue,
+        closeMenu,
+    } = useCombobox({
+        onInputValueChange({ inputValue }) {
+            setItems(data.filter((item) => filterByInputValue(item, inputValue)));
+        },
+        onSelectedItemChange({ selectedItem }) {
+            if (selectedItem !== null) {
+                divRef.current?.dispatchEvent(new TextInputChangedEvent({ [lapisField]: selectedItem }));
+            }
+        },
+        items,
+        itemToString(item) {
+            return item ?? '';
+        },
+        initialSelectedItem: initialValue,
+        environment,
+    });
+
+    const onInputBlur = () => {
+        if (inputValue === '') {
+            divRef.current?.dispatchEvent(new TextInputChangedEvent({ [lapisField]: undefined }));
+            selectItem(null);
+        } else if (inputValue !== selectedItem) {
+            setInputValue(selectedItem ?? '');
+        }
     };
 
+    const clearInput = () => {
+        divRef.current?.dispatchEvent(new TextInputChangedEvent({ [lapisField]: undefined }));
+        selectItem(null);
+    };
+
+    const buttonRef = useRef(null);
+
     return (
-        <>
-            <input
-                type='text'
-                class='input input-bordered w-full'
-                placeholder={placeholderText ?? lapisField}
-                onInput={onInput}
-                ref={inputRef}
-                list={lapisField}
-                value={initialValue}
-            />
-            <datalist id={lapisField}>
-                {data.map((item) => (
-                    <option value={item} key={item} />
-                ))}
-            </datalist>
-        </>
+        <div ref={divRef} className={'relative w-full'}>
+            <div className='w-full flex flex-col gap-1'>
+                <div
+                    className='flex gap-0.5 input input-bordered min-w-32'
+                    onBlur={(event) => {
+                        if (event.relatedTarget != buttonRef.current) {
+                            closeMenu();
+                        }
+                    }}
+                >
+                    <input
+                        placeholder={placeholderText}
+                        className='w-full p-1.5'
+                        {...getInputProps()}
+                        onBlur={onInputBlur}
+                    />
+                    <button
+                        aria-label='clear selection'
+                        className={`px-2 ${inputValue === '' && 'hidden'}`}
+                        type='button'
+                        onClick={clearInput}
+                        tabIndex={-1}
+                    >
+                        ×
+                    </button>
+                    <button
+                        aria-label='toggle menu'
+                        className='px-2'
+                        type='button'
+                        {...getToggleButtonProps()}
+                        ref={buttonRef}
+                    >
+                        {isOpen ? <>↑</> : <>↓</>}
+                    </button>
+                </div>
+            </div>
+            <ul
+                className={`absolute bg-white mt-1 shadow-md max-h-80 overflow-scroll z-10 w-full min-w-32  ${
+                    !(isOpen && items.length > 0) && 'hidden'
+                }`}
+                {...getMenuProps()}
+            >
+                {isOpen &&
+                    items.map((item, index) => (
+                        <li
+                            className={`${highlightedIndex === index && 'bg-blue-300'} ${selectedItem !== null} py-2 px-3 shadow-sm flex flex-col`}
+                            key={item}
+                            {...getItemProps({ item, index })}
+                        >
+                            <span>{item}</span>
+                        </li>
+                    ))}
+            </ul>
+        </div>
     );
 };

package/src/utilEntrypoint.ts

@@ -32,3 +32,5 @@ export type { MapSource } from './preact/map/loadMapSource';
 export type { ConfidenceIntervalMethod } from './preact/shared/charts/confideceInterval';
 
 export type { AxisMax, YAxisMaxConfig } from './preact/shared/charts/getYAxisMax';
+
+export { LocationChangedEvent } from './preact/locationFilter/LocationChangedEvent';

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

@@ -15,7 +15,7 @@ import { withinShadowRoot } from '../withinShadowRoot.story';
 const codeExample = String.raw`
 <gs-location-filter
     fields='["region", "country"]'
-    initialValue='Europe / Switzerland'
+    value='{ "region": "Europe", "country": null}'
     width="100%"
     placeholderText="Enter a location"
 ></gs-location-filter>`;
@@ -39,9 +39,9 @@ const meta: Meta = {
                 type: 'object',
             },
         },
-        initialValue: {
+        value: {
             control: {
-                type: 'text',
+                type: 'object',
             },
         },
         width: {
@@ -66,7 +66,7 @@ const Template: StoryObj<LocationFilterProps> = {
             <div class="max-w-screen-lg">
                 <gs-location-filter
                     .fields=${args.fields}
-                    initialValue=${ifDefined(args.initialValue)}
+                    .value=${args.value}
                     .width=${args.width}
                     placeholderText=${ifDefined(args.placeholderText)}
                 ></gs-location-filter>
@@ -75,7 +75,7 @@ const Template: StoryObj<LocationFilterProps> = {
     },
     args: {
         fields: ['region', 'country', 'division', 'location'],
-        initialValue: '',
+        value: undefined,
         width: '100%',
         placeholderText: 'Enter a location',
     },
@@ -107,10 +107,7 @@ export const LocationFilter: StoryObj<LocationFilterProps> = {
     play: async ({ canvasElement }) => {
         const canvas = await withinShadowRoot(canvasElement, 'gs-location-filter');
         await waitFor(() => {
-            return expect(canvas.getByRole('combobox')).toBeEnabled();
-        });
-        await waitFor(() => {
-            return expect(canvas.getByPlaceholderText('Enter a location')).toBeInTheDocument();
+            return expect(canvas.getByPlaceholderText('Enter a location')).toBeVisible();
         });
     },
 };
@@ -199,36 +196,44 @@ export const FiresEvent: StoryObj<LocationFilterProps> = {
 
         await step('Empty input', async () => {
             await userEvent.type(inputField(), '{backspace>18/}');
-            await expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({
-                region: undefined,
-                country: undefined,
-                division: undefined,
-                location: undefined,
+            await userEvent.click(canvas.getByLabelText('toggle menu'));
+
+            await waitFor(() => {
+                return expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({
+                    region: undefined,
+                    country: undefined,
+                    division: undefined,
+                    location: undefined,
+                });
             });
         });
 
         await step('Select Asia', async () => {
             await userEvent.type(inputField(), 'Asia');
-            await expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({
-                region: 'Asia',
-                country: undefined,
-                division: undefined,
-                location: undefined,
+            await userEvent.click(canvas.getByRole('option', { name: 'Asia Asia' }));
+
+            await waitFor(() => {
+                return expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({
+                    region: 'Asia',
+                    country: undefined,
+                    division: undefined,
+                    location: undefined,
+                });
             });
         });
 
         await step('Select Asia / Bangladesh / Rajshahi / Chapainawabgonj', async () => {
             await userEvent.type(inputField(), ' / Bangladesh / Rajshahi / Chapainawabgonj');
-            await expect(listenerMock).toHaveBeenCalledWith(
-                expect.objectContaining({
-                    detail: {
-                        region: 'Asia',
-                        country: 'Bangladesh',
-                        division: 'Rajshahi',
-                        location: 'Chapainawabgonj',
-                    },
-                }),
-            );
+            await userEvent.click(canvas.getByText('Asia / Bangladesh / Rajshahi / Chapainawabgonj'));
+
+            await waitFor(() => {
+                return expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({
+                    region: 'Asia',
+                    country: 'Bangladesh',
+                    division: 'Rajshahi',
+                    location: 'Chapainawabgonj',
+                });
+            });
         });
     },
 };

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

@@ -1,6 +1,7 @@
 import { customElement, property } from 'lit/decorators.js';
 import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
+import { type LocationChangedEvent } from '../../preact/locationFilter/LocationChangedEvent';
 import { LocationFilter, type LocationFilterProps } from '../../preact/locationFilter/location-filter';
 import type { Equals, Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapter } from '../PreactLitAdapter';
@@ -14,11 +15,6 @@ import { PreactLitAdapter } from '../PreactLitAdapter';
  * The component retrieves a list of all possible values for these fields from the Lapis instance.
  * This list is then utilized to display autocomplete suggestions and to validate the input.
  *
- * Given `fields` are `['field1', 'field2', ..., 'fieldN']`,
- * then valid values for the location filter must be in the form `valueForField1 / valueForField2 / ... / valueForFieldK`,
- * where `1 <= K <= N`.
- * Values for the fields `i > K` are considered `undefined`.
- *
  * @fires {CustomEvent<Record<string, string>>} gs-location-changed
  * Fired when a value from the datalist is selected or when a valid value is typed into the field.
  * The `details` of this event contain an object with all `fields` as keys
@@ -37,10 +33,9 @@ import { PreactLitAdapter } from '../PreactLitAdapter';
 export class LocationFilterComponent extends PreactLitAdapter {
     /**
      * The initial value to use for this location filter.
-     * Must be of the form `valueForField1 / valueForField2 / ... / valueForFieldN`.
      */
-    @property()
-    initialValue: string | undefined = undefined;
+    @property({ type: Object })
+    value: Record<string, string | null | undefined> | undefined = undefined;
 
     /**
      * Required.
@@ -70,7 +65,7 @@ export class LocationFilterComponent extends PreactLitAdapter {
     override render() {
         return (
             <LocationFilter
-                initialValue={this.initialValue}
+                value={this.value}
                 fields={this.fields}
                 width={this.width}
                 placeholderText={this.placeholderText}
@@ -85,7 +80,7 @@ declare global {
     }
 
     interface HTMLElementEventMap {
-        'gs-location-changed': CustomEvent<Record<string, string>>;
+        'gs-location-changed': LocationChangedEvent;
     }
 }
 
@@ -99,9 +94,7 @@ declare global {
 }
 
 /* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
-type InitialValueMatches = Expect<
-    Equals<typeof LocationFilterComponent.prototype.initialValue, LocationFilterProps['initialValue']>
->;
+type InitialValueMatches = Expect<Equals<typeof LocationFilterComponent.prototype.value, LocationFilterProps['value']>>;
 type FieldsMatches = Expect<Equals<typeof LocationFilterComponent.prototype.fields, LocationFilterProps['fields']>>;
 type PlaceholderTextMatches = Expect<
     Equals<typeof LocationFilterComponent.prototype.placeholderText, LocationFilterProps['placeholderText']>

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

@@ -1,4 +1,4 @@
-import { expect, fn, userEvent, waitFor } from '@storybook/test';
+import { expect, fireEvent, fn, userEvent, waitFor } from '@storybook/test';
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 
@@ -97,7 +97,7 @@ export const Default: StoryObj<Required<TextInputProps>> = {
     },
 };
 
-export const FiresEvent: StoryObj<Required<TextInputProps>> = {
+export const FiresEvents: StoryObj<Required<TextInputProps>> = {
     ...Default,
     play: async ({ canvasElement, step }) => {
         const canvas = await withinShadowRoot(canvasElement, 'gs-text-input');
@@ -121,22 +121,45 @@ export const FiresEvent: StoryObj<Required<TextInputProps>> = {
 
         await step('Empty input', async () => {
             await userEvent.type(inputField(), '{backspace>9/}');
-            await expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({
-                host: undefined,
-            });
         });
 
         await step('Enter a valid host name', async () => {
-            await userEvent.type(inputField(), 'Homo');
+            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(() => {
+                expect(listenerMock).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        detail: {
+                            host: 'Homo sapiens',
+                        },
+                    }),
+                );
+            });
+        });
+
+        await step('Remove initial value', async () => {
+            await fireEvent.click(canvas.getByRole('button', { name: 'clear selection' }));
 
             await expect(listenerMock).toHaveBeenCalledWith(
                 expect.objectContaining({
                     detail: {
-                        host: 'Homo',
+                        host: undefined,
                     },
                 }),
             );
         });
+
+        await step('Empty input', async () => {
+            inputField().blur();
+            await expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({
+                host: undefined,
+            });
+        });
     },
     args: {
         ...Default.args,