@genspectrum/dashboard-components 0.12.0 → 0.12.1

package/dist/util.d.ts

@@ -824,10 +824,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-location-changed': LocationChangedEvent;
+        'gs-mutation-comparison-component': MutationComparisonComponent;
     }
 }
 
@@ -835,7 +832,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -843,11 +840,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-selector': DateRangeSelectorComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
-        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
+        'gs-mutations-component': MutationsComponent;
     }
 }
 
@@ -855,7 +848,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-selector': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -863,10 +856,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-input': TextInputComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-text-input-changed': CustomEvent<Record<string, string>>;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -874,7 +864,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -882,10 +872,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -893,7 +880,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -901,10 +888,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-lineage-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -912,7 +896,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -920,7 +904,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-comparison-component': MutationComparisonComponent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -928,7 +912,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -936,7 +920,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-component': MutationsComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -944,7 +928,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -952,7 +936,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -960,7 +944,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -968,7 +952,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-statistics': StatisticsComponent;
     }
 }
 
@@ -976,7 +960,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -984,7 +968,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-date-range-selector': DateRangeSelectorComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
     }
 }
 
@@ -992,7 +980,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-selector': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1000,7 +988,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-location-filter': LocationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-location-changed': LocationChangedEvent;
     }
 }
 
@@ -1008,7 +999,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1016,7 +1007,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-mutation-filter': MutationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
     }
 }
 
@@ -1024,7 +1018,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1032,7 +1026,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-lineage-filter': LineageFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-lineage-filter-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -1040,7 +1037,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1048,7 +1045,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-statistics': StatisticsComponent;
+        'gs-text-input': TextInputComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-text-input-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -1056,7 +1056,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/package.json

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

package/src/preact/map/sequences-by-location-map.tsx

@@ -1,5 +1,5 @@
 import type { Feature, Geometry, GeometryObject } from 'geojson';
-import Leaflet, { type Layer, type LayerGroup } from 'leaflet';
+import { geoJson, type Layer, type LayerGroup, map } from 'leaflet';
 import type { FunctionComponent } from 'preact';
 import { useEffect, useRef } from 'preact/hooks';
 
@@ -42,7 +42,7 @@ export const SequencesByLocationMap: FunctionComponent<SequencesByLocationMapPro
             return;
         }
 
-        const leafletMap = Leaflet.map(ref.current, {
+        const leafletMap = map(ref.current, {
             scrollWheelZoom: enableMapNavigation,
             zoomControl: enableMapNavigation,
             keyboard: enableMapNavigation,
@@ -52,7 +52,7 @@ export const SequencesByLocationMap: FunctionComponent<SequencesByLocationMapPro
             center: [offsetY, offsetX],
         });
 
-        Leaflet.geoJson(locations, {
+        geoJson(locations, {
             style: (feature: Feature<GeometryObject, EnhancedGeoJsonFeatureProperties> | undefined) => ({
                 fillColor: getColor(feature?.properties.data?.proportion),
                 fillOpacity: 1,

package/src/preact/textInput/TextInputChangedEvent.ts

@@ -0,0 +1,11 @@
+type LapisTextFilter = Record<string, string | null | undefined>;
+
+export class TextInputChangedEvent extends CustomEvent<LapisTextFilter> {
+    constructor(detail: LapisTextFilter) {
+        super('gs-text-input-changed', {
+            detail,
+            bubbles: true,
+            composed: true,
+        });
+    }
+}

package/src/preact/textInput/fetchAutocompleteList.ts

@@ -5,5 +5,5 @@ export async function fetchAutocompleteList(lapis: string, field: string, signal
 
     const data = (await fetchAggregatedOperator.evaluate(lapis, signal)).content;
 
-    return data.map((item) => item[field]);
+    return data.map((item) => item[field]).sort();
 }

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

@@ -1,5 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/preact';
-import { expect, waitFor, within } from '@storybook/test';
+import { expect, fireEvent, fn, waitFor, within } from '@storybook/test';
 
 import data from './__mockData__/aggregated_hosts.json';
 import { TextInput, type TextInputProps } from './text-input';
@@ -79,19 +79,36 @@ export const Default: StoryObj<TextInputProps> = {
     },
 };
 
-export const WithInitialValue: StoryObj<TextInputProps> = {
+export const RemoveInitialValue: StoryObj<TextInputProps> = {
     ...Default,
     args: {
         ...Default.args,
         initialValue: 'Homo sapiens',
     },
-    play: async ({ canvasElement }) => {
+    play: async ({ canvasElement, step }) => {
         const canvas = within(canvasElement);
 
+        const changedListenerMock = fn();
+        await step('Setup event listener mock', async () => {
+            canvasElement.addEventListener('gs-text-input-changed', changedListenerMock);
+        });
+
         await waitFor(() => {
             const input = canvas.getByPlaceholderText('Enter a host name', { exact: false });
             expect(input).toHaveValue('Homo sapiens');
         });
+
+        await step('Remove initial value', async () => {
+            await fireEvent.click(canvas.getByRole('button', { name: 'clear selection' }));
+
+            await expect(changedListenerMock).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    detail: {
+                        host: undefined,
+                    },
+                }),
+            );
+        });
     },
 };
 

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/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,