@genspectrum/dashboard-components 0.12.1 → 0.13.0

package/dist/util.d.ts

@@ -160,7 +160,17 @@ declare const lapisFilterSchema: default_2.ZodIntersection<default_2.ZodRecord<d
     aminoAcidInsertions?: string[] | undefined;
 }>>;
 
-declare type LapisLocationFilter = Record<string, string | null | undefined>;
+declare type LapisLineageFilter = Record<string, string | undefined>;
+
+declare type LapisLocationFilter = default_2.infer<typeof lapisLocationFilterSchema>;
+
+declare const lapisLocationFilterSchema: default_2.ZodRecord<default_2.ZodString, default_2.ZodUnion<[default_2.ZodString, default_2.ZodUndefined]>>;
+
+declare type LapisTextFilter = Record<string, string | undefined>;
+
+export declare class LineageFilterChangedEvent extends CustomEvent<LapisLineageFilter> {
+    constructor(detail: LapisLineageFilter);
+}
 
 export declare class LocationChangedEvent extends CustomEvent<LapisLocationFilter> {
     constructor(detail: LapisLocationFilter);
@@ -772,6 +782,10 @@ export declare type TemporalGranularity = default_2.infer<typeof temporalGranula
 
 declare const temporalGranularitySchema: default_2.ZodUnion<[default_2.ZodLiteral<"day">, default_2.ZodLiteral<"week">, default_2.ZodLiteral<"month">, default_2.ZodLiteral<"year">]>;
 
+export declare class TextInputChangedEvent extends CustomEvent<LapisTextFilter> {
+    constructor(detail: LapisTextFilter);
+}
+
 export declare const views: {
     readonly table: "table";
     readonly venn: "venn";
@@ -888,7 +902,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -896,7 +910,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -904,7 +918,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -912,7 +926,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1007,10 +1021,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
+        'gs-text-input': TextInputComponent;
     }
     interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
+        'gs-text-input-changed': TextInputChangedEvent;
     }
 }
 
@@ -1018,7 +1032,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1026,10 +1040,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
+        'gs-mutation-filter': MutationFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-lineage-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
     }
 }
 
@@ -1037,7 +1051,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1045,10 +1059,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-input': TextInputComponent;
+        'gs-lineage-filter': LineageFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-text-input-changed': CustomEvent<Record<string, string>>;
+        'gs-lineage-filter-changed': LineageFilterChangedEvent;
     }
 }
 
@@ -1056,7 +1070,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/dist/util.js

@@ -1,7 +1,9 @@
-import { D, L, d, v } from "./LocationChangedEvent-CORvQvXv.js";
+import { D, a, L, T, d, v } from "./LineageFilterChangedEvent-GedKNGFI.js";
 export {
   D as DateRangeOptionChangedEvent,
+  a as LineageFilterChangedEvent,
   L as LocationChangedEvent,
+  T as TextInputChangedEvent,
   d as dateRangeOptionPresets,
   v as views
 };

package/package.json

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

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

@@ -0,0 +1,145 @@
+import { useCombobox } from 'downshift/preact';
+import { type ComponentChild } from 'preact';
+import { useRef, useState } from 'preact/hooks';
+
+export function DownshiftCombobox<Item>({
+    allItems,
+    value,
+    filterItemsByInputValue,
+    createEvent,
+    itemToString,
+    placeholderText,
+    formatItemInList,
+}: {
+    allItems: Item[];
+    value?: Item;
+    filterItemsByInputValue: (item: Item, value: string) => boolean;
+    createEvent: (item: Item | null) => CustomEvent;
+    itemToString: (item: Item | undefined | null) => string;
+    placeholderText?: string;
+    formatItemInList: (item: Item) => ComponentChild;
+}) {
+    const initialSelectedItem = value ?? null;
+
+    const [items, setItems] = useState(
+        allItems.filter((item) => filterItemsByInputValue(item, itemToString(initialSelectedItem))),
+    );
+    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;
+
+    const {
+        isOpen,
+        getToggleButtonProps,
+        getMenuProps,
+        getInputProps,
+        highlightedIndex,
+        getItemProps,
+        selectedItem,
+        inputValue,
+        selectItem,
+        setInputValue,
+        closeMenu,
+    } = useCombobox({
+        onInputValueChange({ inputValue }) {
+            setItems(allItems.filter((item) => filterItemsByInputValue(item, inputValue)));
+        },
+        onSelectedItemChange({ selectedItem }) {
+            if (selectedItem !== null) {
+                divRef.current?.dispatchEvent(createEvent(selectedItem));
+            }
+        },
+        items,
+        itemToString(item) {
+            return itemToString(item);
+        },
+        initialSelectedItem,
+        environment,
+    });
+
+    const onInputBlur = () => {
+        if (inputValue === '') {
+            divRef.current?.dispatchEvent(createEvent(null));
+            selectItem(null);
+        } else if (inputValue !== itemToString(selectedItem)) {
+            setInputValue(itemToString(selectedItem) || '');
+        }
+    };
+
+    const clearInput = () => {
+        divRef.current?.dispatchEvent(createEvent(null));
+        selectItem(null);
+    };
+
+    const buttonRef = useRef(null);
+
+    return (
+        <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>
+            {isOpen && (
+                <ul
+                    className='absolute bg-white mt-1 shadow-md max-h-80 overflow-scroll z-10 w-full min-w-32'
+                    {...getMenuProps()}
+                >
+                    {items.length > 0 ? (
+                        items.map((item, index) => (
+                            <li
+                                className={`${highlightedIndex === index ? 'bg-blue-300' : ''} ${selectedItem !== null && itemToString(selectedItem) === itemToString(item) ? 'font-bold' : ''} py-2 px-3 shadow-sm flex flex-col`}
+                                key={itemToString(item)}
+                                {...getItemProps({ item, index })}
+                            >
+                                {formatItemInList(item)}
+                            </li>
+                        ))
+                    ) : (
+                        <li className='py-2 px-3 shadow-sm flex flex-col'>No elements to select.</li>
+                    )}
+                </ul>
+            )}
+        </div>
+    );
+}

package/src/preact/lineageFilter/LineageFilterChangedEvent.ts

@@ -0,0 +1,11 @@
+type LapisLineageFilter = Record<string, string | undefined>;
+
+export class LineageFilterChangedEvent extends CustomEvent<LapisLineageFilter> {
+    constructor(detail: LapisLineageFilter) {
+        super('gs-lineage-filter-changed', {
+            detail,
+            bubbles: true,
+            composed: true,
+        });
+    }
+}

package/src/preact/lineageFilter/fetchLineageAutocompleteList.spec.ts

@@ -5,9 +5,23 @@ import { DUMMY_LAPIS_URL, lapisRequestMocks } from '../../../vitest.setup';
 
 describe('fetchLineageAutocompleteList', () => {
     test('should add sublineage values', async () => {
-        lapisRequestMocks.aggregated({ fields: ['lineageField'] }, { data: [{ lineageField: 'B.1.1.7', count: 1 }] });
+        lapisRequestMocks.aggregated(
+            { fields: ['lineageField'], country: 'Germany' },
+            {
+                data: [
+                    {
+                        lineageField: 'B.1.1.7',
+                        count: 1,
+                    },
+                ],
+            },
+        );
 
-        const result = await fetchLineageAutocompleteList(DUMMY_LAPIS_URL, 'lineageField');
+        const result = await fetchLineageAutocompleteList({
+            lapis: DUMMY_LAPIS_URL,
+            field: 'lineageField',
+            lapisFilter: { country: 'Germany' },
+        });
 
         expect(result).to.deep.equal(['B.1.1.7', 'B.1.1.7*']);
     });

package/src/preact/lineageFilter/fetchLineageAutocompleteList.ts

@@ -1,7 +1,18 @@
 import { FetchAggregatedOperator } from '../../operator/FetchAggregatedOperator';
+import type { LapisFilter } from '../../types';
 
-export async function fetchLineageAutocompleteList(lapis: string, field: string, signal?: AbortSignal) {
-    const fetchAggregatedOperator = new FetchAggregatedOperator<Record<string, string>>({}, [field]);
+export async function fetchLineageAutocompleteList({
+    lapis,
+    field,
+    signal,
+    lapisFilter,
+}: {
+    lapis: string;
+    field: string;
+    lapisFilter?: LapisFilter;
+    signal?: AbortSignal;
+}) {
+    const fetchAggregatedOperator = new FetchAggregatedOperator<Record<string, string>>(lapisFilter ?? {}, [field]);
 
     const data = (await fetchAggregatedOperator.evaluate(lapis, signal)).content;
 

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

@@ -1,4 +1,6 @@
-import { type Meta, type StoryObj } from '@storybook/preact';
+import { type Meta, type PreactRenderer, type StoryObj } from '@storybook/preact';
+import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
+import type { StepFunction } from '@storybook/types';
 
 import { LineageFilter, type LineageFilterProps } from './lineage-filter';
 import { previewHandles } from '../../../.storybook/preview';
@@ -22,6 +24,7 @@ const meta: Meta = {
                         url: AGGREGATED_ENDPOINT,
                         body: {
                             fields: ['pangoLineage'],
+                            country: 'Germany',
                         },
                     },
                     response: {
@@ -32,10 +35,41 @@ const meta: Meta = {
             ],
         },
     },
+    argTypes: {
+        lapisField: {
+            control: {
+                type: 'text',
+            },
+        },
+        placeholderText: {
+            control: {
+                type: 'text',
+            },
+        },
+        value: {
+            control: {
+                type: 'text',
+            },
+        },
+        width: {
+            control: {
+                type: 'text',
+            },
+        },
+        lapisFilter: {
+            control: {
+                type: 'object',
+            },
+        },
+    },
+
     args: {
         lapisField: 'pangoLineage',
-        placeholderText: 'Enter lineage',
-        initialValue: '',
+        lapisFilter: {
+            country: 'Germany',
+        },
+        placeholderText: 'Enter a lineage',
+        value: 'A.1',
         width: '100%',
     },
 };
@@ -45,14 +79,62 @@ export default meta;
 export const Default: StoryObj<LineageFilterProps> = {
     render: (args) => (
         <LapisUrlContext.Provider value={LAPIS_URL}>
-            <LineageFilter
-                lapisField={args.lapisField}
-                placeholderText={args.placeholderText}
-                initialValue={args.initialValue}
-                width={args.width}
-            />
+            <LineageFilter {...args} />
         </LapisUrlContext.Provider>
     ),
+    play: async ({ canvasElement, step }) => {
+        const { canvas, lineageChangedListenerMock } = await prepare(canvasElement, step);
+
+        step('change lineage filter value fires event', async () => {
+            const input = await inputField(canvas);
+            await userEvent.clear(input);
+            await userEvent.type(input, 'B.1');
+            await userEvent.click(canvas.getByRole('option', { name: 'B.1' }));
+
+            await waitFor(() => {
+                return expect(lineageChangedListenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({
+                    pangoLineage: 'B.1',
+                });
+            });
+        });
+    },
+};
+
+export const ClearSelection: StoryObj<LineageFilterProps> = {
+    ...Default,
+    play: async ({ canvasElement, step }) => {
+        const { canvas, lineageChangedListenerMock } = await prepare(canvasElement, step);
+
+        step('clear selection fires event with empty filter', async () => {
+            const clearSelectionButton = await canvas.findByLabelText('clear selection');
+            await userEvent.click(clearSelectionButton);
+
+            await waitFor(() => {
+                return expect(lineageChangedListenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({
+                    pangoLineage: undefined,
+                });
+            });
+        });
+    },
+};
+
+export const OnBlurInput: StoryObj<LineageFilterProps> = {
+    ...Default,
+    play: async ({ canvasElement, step }) => {
+        const { canvas, lineageChangedListenerMock } = await prepare(canvasElement, step);
+
+        step('after cleared selection by hand and then blur fires event with empty filter', async () => {
+            const input = await inputField(canvas);
+            await userEvent.clear(input);
+            await userEvent.click(canvas.getByLabelText('toggle menu'));
+
+            await waitFor(() => {
+                return expect(lineageChangedListenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({
+                    pangoLineage: undefined,
+                });
+            });
+        });
+    },
 };
 
 export const WithNoLapisField: StoryObj<LineageFilterProps> = {
@@ -67,3 +149,22 @@ export const WithNoLapisField: StoryObj<LineageFilterProps> = {
         });
     },
 };
+
+async function prepare(canvasElement: HTMLElement, step: StepFunction<PreactRenderer, unknown>) {
+    const canvas = within(canvasElement);
+
+    const lineageChangedListenerMock = fn();
+    step('Setup event listener mock', () => {
+        canvasElement.addEventListener('gs-lineage-filter-changed', lineageChangedListenerMock);
+    });
+
+    step('location filter is rendered with value', async () => {
+        await waitFor(async () => {
+            return expect(await inputField(canvas)).toHaveValue('A.1');
+        });
+    });
+
+    return { canvas, lineageChangedListenerMock };
+}
+
+const inputField = (canvas: ReturnType<typeof within>) => canvas.findByPlaceholderText('Enter a lineage');

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

@@ -1,27 +1,32 @@
 import { type FunctionComponent } from 'preact';
-import { useContext, useRef } from 'preact/hooks';
+import { useContext } from 'preact/hooks';
 import z from 'zod';
 
 import { fetchLineageAutocompleteList } from './fetchLineageAutocompleteList';
 import { LapisUrlContext } from '../LapisUrlContext';
+import { LineageFilterChangedEvent } from './LineageFilterChangedEvent';
+import { lapisFilterSchema } from '../../types';
+import { DownshiftCombobox } from '../components/downshift-combobox';
 import { ErrorBoundary } from '../components/error-boundary';
 import { LoadingDisplay } from '../components/loading-display';
-import { NoDataDisplay } from '../components/no-data-display';
 import { ResizeContainer } from '../components/resize-container';
 import { useQuery } from '../useQuery';
 
-const lineageFilterInnerPropsSchema = z.object({
+const lineageSelectorPropsSchema = z.object({
     lapisField: z.string().min(1),
     placeholderText: z.string().optional(),
-    initialValue: z.string(),
+    value: z.string(),
+});
+const lineageFilterInnerPropsSchema = lineageSelectorPropsSchema.extend({
+    lapisFilter: lapisFilterSchema,
 });
-
 const lineageFilterPropsSchema = lineageFilterInnerPropsSchema.extend({
     width: z.string(),
 });
 
 export type LineageFilterInnerProps = z.infer<typeof lineageFilterInnerPropsSchema>;
 export type LineageFilterProps = z.infer<typeof lineageFilterPropsSchema>;
+type LineageSelectorProps = z.infer<typeof lineageSelectorPropsSchema>;
 
 export const LineageFilter: FunctionComponent<LineageFilterProps> = (props) => {
     const { width, ...innerProps } = props;
@@ -39,15 +44,14 @@ export const LineageFilter: FunctionComponent<LineageFilterProps> = (props) => {
 const LineageFilterInner: FunctionComponent<LineageFilterInnerProps> = ({
     lapisField,
     placeholderText,
-    initialValue,
+    value,
+    lapisFilter,
 }) => {
     const lapis = useContext(LapisUrlContext);
 
-    const inputRef = useRef<HTMLInputElement>(null);
-
     const { data, error, isLoading } = useQuery(
-        () => fetchLineageAutocompleteList(lapis, lapisField),
-        [lapisField, lapis],
+        () => fetchLineageAutocompleteList({ lapis, field: lapisField, lapisFilter }),
+        [lapisField, lapis, lapisFilter],
     );
 
     if (isLoading) {
@@ -58,47 +62,33 @@ const LineageFilterInner: FunctionComponent<LineageFilterInnerProps> = ({
         throw error;
     }
 
-    if (data === null) {
-        return <NoDataDisplay />;
-    }
-
-    const onInput = () => {
-        const value = inputRef.current?.value === '' ? undefined : inputRef.current?.value;
-
-        if (isValidValue(value)) {
-            inputRef.current?.dispatchEvent(
-                new CustomEvent('gs-lineage-filter-changed', {
-                    detail: { [lapisField]: value },
-                    bubbles: true,
-                    composed: true,
-                }),
-            );
-        }
-    };
-
-    const isValidValue = (value: string | undefined) => {
-        if (value === undefined) {
-            return true;
-        }
-        return data.includes(value);
-    };
+    return <LineageSelector lapisField={lapisField} value={value} placeholderText={placeholderText} data={data} />;
+};
 
+const LineageSelector = ({
+    lapisField,
+    value,
+    placeholderText,
+    data,
+}: LineageSelectorProps & {
+    data: string[];
+}) => {
     return (
-        <>
-            <input
-                type='text'
-                class='input input-bordered w-full'
-                placeholder={placeholderText !== undefined ? placeholderText : lapisField}
-                onInput={onInput}
-                ref={inputRef}
-                list={lapisField}
-                value={initialValue}
-            />
-            <datalist id={lapisField}>
-                {data.map((item) => (
-                    <option value={item} key={item} />
-                ))}
-            </datalist>
-        </>
+        <DownshiftCombobox
+            allItems={data}
+            value={value}
+            filterItemsByInputValue={filterByInputValue}
+            createEvent={(item: string | null) => new LineageFilterChangedEvent({ [lapisField]: item ?? undefined })}
+            itemToString={(item: string | undefined | null) => item ?? ''}
+            placeholderText={placeholderText}
+            formatItemInList={(item: string) => item}
+        />
     );
 };
+
+function filterByInputValue(item: string, inputValue: string | undefined | null) {
+    if (inputValue === undefined || inputValue === null || inputValue === '') {
+        return true;
+    }
+    return item?.toLowerCase().includes(inputValue?.toLowerCase() || '');
+}

package/src/preact/locationFilter/LocationChangedEvent.ts

@@ -1,4 +1,4 @@
-export type LapisLocationFilter = Record<string, string | null | undefined>;
+import { type LapisLocationFilter } from '../../types';
 
 export class LocationChangedEvent extends CustomEvent<LapisLocationFilter> {
     constructor(detail: LapisLocationFilter) {

package/src/preact/locationFilter/fetchAutocompletionList.spec.ts

@@ -8,7 +8,7 @@ describe('fetchAutocompletionList', () => {
         const fields = ['region', 'country', 'division'];
 
         lapisRequestMocks.aggregated(
-            { fields },
+            { fields, country: 'Germany' },
             {
                 data: [
                     { count: 0, region: 'region1', country: 'country1_1', division: 'division1_1_1' },
@@ -20,7 +20,11 @@ describe('fetchAutocompletionList', () => {
             },
         );
 
-        const result = await fetchAutocompletionList(fields, DUMMY_LAPIS_URL);
+        const result = await fetchAutocompletionList({
+            fields,
+            lapis: DUMMY_LAPIS_URL,
+            lapisFilter: { country: 'Germany' },
+        });
 
         expect(result).to.deep.equal([
             { region: 'region1', country: undefined, division: undefined },