@genspectrum/dashboard-components 0.12.0 → 0.13.0

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

package/src/preact/locationFilter/fetchAutocompletionList.ts

@@ -1,16 +1,26 @@
 import { FetchAggregatedOperator } from '../../operator/FetchAggregatedOperator';
+import type { LapisFilter } from '../../types';
 
-export async function fetchAutocompletionList(
-    fields: string[],
-    lapis: string,
-    signal?: AbortSignal,
-): Promise<Record<string, string | undefined>[]> {
+export async function fetchAutocompletionList({
+    fields,
+    lapis,
+    signal,
+    lapisFilter,
+}: {
+    fields: string[];
+    lapis: string;
+    lapisFilter?: LapisFilter;
+    signal?: AbortSignal;
+}): Promise<Record<string, string | undefined>[]> {
     const toAncestorInHierarchyOverwriteValues = Array(fields.length - 1)
         .fill(0)
         .map((_, i) => i + 1)
         .map((i) => fields.slice(i).reduce((acc, field) => ({ ...acc, [field]: null }), {}));
 
-    const fetchAggregatedOperator = new FetchAggregatedOperator<Record<string, string | null>>({}, fields);
+    const fetchAggregatedOperator = new FetchAggregatedOperator<Record<string, string | null>>(
+        lapisFilter ?? {},
+        fields,
+    );
 
     const data = (await fetchAggregatedOperator.evaluate(lapis, signal)).content;
 

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

@@ -21,6 +21,7 @@ const meta: Meta<LocationFilterProps> = {
                         url: AGGREGATED_ENDPOINT,
                         body: {
                             fields: ['region', 'country', 'division', 'location'],
+                            age: 18,
                         },
                     },
                     response: {
@@ -39,6 +40,9 @@ const meta: Meta<LocationFilterProps> = {
         fields: ['region', 'country', 'division', 'location'],
         value: { region: 'Europe', country: undefined, division: undefined, location: undefined },
         placeholderText: 'Enter a location',
+        lapisFilter: {
+            age: 18,
+        },
     },
     argTypes: {
         fields: {
@@ -61,6 +65,11 @@ const meta: Meta<LocationFilterProps> = {
                 type: 'text',
             },
         },
+        lapisFilter: {
+            control: {
+                type: 'object',
+            },
+        },
     },
 };
 
@@ -81,16 +90,14 @@ export const Primary: StoryObj<LocationFilterProps> = {
             await userEvent.type(input, 'Germany');
             await userEvent.click(canvas.getByRole('option', { name: 'Germany Europe / Germany' }));
 
-            await expect(locationChangedListenerMock).toHaveBeenCalledWith(
-                expect.objectContaining({
-                    detail: {
-                        country: 'Germany',
-                        region: 'Europe',
-                        division: undefined,
-                        location: undefined,
-                    },
-                }),
-            );
+            await waitFor(() => {
+                return expect(locationChangedListenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({
+                    country: 'Germany',
+                    region: 'Europe',
+                    division: undefined,
+                    location: undefined,
+                });
+            });
         });
     },
 };
@@ -104,16 +111,14 @@ export const ClearSelection: StoryObj<LocationFilterProps> = {
             const clearSelectionButton = await canvas.findByLabelText('clear selection');
             await userEvent.click(clearSelectionButton);
 
-            await expect(locationChangedListenerMock).toHaveBeenCalledWith(
-                expect.objectContaining({
-                    detail: {
-                        country: undefined,
-                        region: undefined,
-                        division: undefined,
-                        location: undefined,
-                    },
-                }),
-            );
+            await waitFor(() => {
+                return expect(locationChangedListenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({
+                    country: undefined,
+                    region: undefined,
+                    division: undefined,
+                    location: undefined,
+                });
+            });
         });
     },
 };
@@ -128,16 +133,14 @@ export const OnBlurInput: StoryObj<LocationFilterProps> = {
             await userEvent.clear(input);
             await userEvent.click(canvas.getByLabelText('toggle menu'));
 
-            await expect(locationChangedListenerMock).toHaveBeenCalledWith(
-                expect.objectContaining({
-                    detail: {
-                        country: undefined,
-                        region: undefined,
-                        division: undefined,
-                        location: undefined,
-                    },
-                }),
-            );
+            await waitFor(() => {
+                return expect(locationChangedListenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({
+                    country: undefined,
+                    region: undefined,
+                    division: undefined,
+                    location: undefined,
+                });
+            });
         });
     },
 };

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

@@ -1,35 +1,37 @@
-import { useCombobox } from 'downshift/preact';
 import { type FunctionComponent } from 'preact';
-import { useContext, useMemo, useRef, useState } from 'preact/hooks';
+import { useContext, useMemo } from 'preact/hooks';
 import z from 'zod';
 
 import { fetchAutocompletionList } from './fetchAutocompletionList';
 import { LapisUrlContext } from '../LapisUrlContext';
-import { type LapisLocationFilter, LocationChangedEvent } from './LocationChangedEvent';
+import { LocationChangedEvent } from './LocationChangedEvent';
+import { lapisFilterSchema, type LapisLocationFilter, lapisLocationFilterSchema } from '../../types';
+import { DownshiftCombobox } from '../components/downshift-combobox';
 import { ErrorBoundary } from '../components/error-boundary';
 import { LoadingDisplay } from '../components/loading-display';
 import { ResizeContainer } from '../components/resize-container';
 import { useQuery } from '../useQuery';
 
-const lineageFilterInnerPropsSchema = z.object({
-    value: z.record(z.string().nullable().optional()).optional(),
+const locationSelectorPropsSchema = z.object({
+    value: lapisLocationFilterSchema.optional(),
     placeholderText: z.string().optional(),
     fields: z.array(z.string()).min(1),
 });
-
-const lineageFilterPropsSchema = lineageFilterInnerPropsSchema.extend({
+const locationFilterInnerPropsSchema = locationSelectorPropsSchema.extend({ lapisFilter: lapisFilterSchema });
+const locationFilterPropsSchema = locationFilterInnerPropsSchema.extend({
     width: z.string(),
 });
 
-export type LocationFilterInnerProps = z.infer<typeof lineageFilterInnerPropsSchema>;
-export type LocationFilterProps = z.infer<typeof lineageFilterPropsSchema>;
+export type LocationFilterInnerProps = z.infer<typeof locationFilterInnerPropsSchema>;
+export type LocationFilterProps = z.infer<typeof locationFilterPropsSchema>;
+type LocationSelectorProps = z.infer<typeof locationSelectorPropsSchema>;
 
 export const LocationFilter: FunctionComponent<LocationFilterProps> = (props) => {
     const { width, ...innerProps } = props;
     const size = { width, height: '3rem' };
 
     return (
-        <ErrorBoundary size={size} layout='horizontal' componentProps={props} schema={lineageFilterPropsSchema}>
+        <ErrorBoundary size={size} layout='horizontal' componentProps={props} schema={locationFilterPropsSchema}>
             <ResizeContainer size={size}>
                 <LocationFilterInner {...innerProps} />
             </ResizeContainer>
@@ -37,10 +39,13 @@ export const LocationFilter: FunctionComponent<LocationFilterProps> = (props) =>
     );
 };
 
-export const LocationFilterInner = ({ value, fields, placeholderText }: LocationFilterInnerProps) => {
+export const LocationFilterInner = ({ value, fields, placeholderText, lapisFilter }: LocationFilterInnerProps) => {
     const lapis = useContext(LapisUrlContext);
 
-    const { data, error, isLoading } = useQuery(() => fetchAutocompletionList(fields, lapis), [fields, lapis]);
+    const { data, error, isLoading } = useQuery(
+        () => fetchAutocompletionList({ fields, lapis, lapisFilter }),
+        [fields, lapis, lapisFilter],
+    );
 
     if (isLoading) {
         return <LoadingDisplay />;
@@ -54,7 +59,7 @@ export const LocationFilterInner = ({ value, fields, placeholderText }: Location
 
 type SelectItem = {
     lapisFilter: LapisLocationFilter;
-    label: string;
+    label: string | null | undefined;
     description: string;
 };
 
@@ -63,140 +68,38 @@ const LocationSelector = ({
     value,
     placeholderText,
     locationData,
-}: LocationFilterInnerProps & {
+}: LocationSelectorProps & {
     locationData: LapisLocationFilter[];
 }) => {
-    const allItems = useMemo(
-        () =>
-            locationData
-                .map((locationFilter) => {
-                    return toSelectOption(locationFilter, fields);
-                })
-                .filter((item): item is SelectItem => item !== undefined),
-        [locationData, fields],
-    );
+    const allItems = useMemo(() => {
+        return locationData
+            .map((location) => toSelectItem(location, fields))
+            .filter((item): item is SelectItem => item !== undefined);
+    }, [fields, locationData]);
 
-    const initialSelectedItem = useMemo(
-        () => (value !== undefined ? toSelectOption(value, fields) : null),
-        [value, fields],
-    );
-
-    const [items, setItems] = useState(allItems.filter((item) => filterByInputValue(item, initialSelectedItem?.label)));
-    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) => filterByInputValue(item, inputValue)));
-        },
-        onSelectedItemChange({ selectedItem }) {
-            if (selectedItem !== null) {
-                divRef.current?.dispatchEvent(new LocationChangedEvent(selectedItem.lapisFilter));
-            }
-        },
-        items,
-        itemToString(item) {
-            return item?.label ?? '';
-        },
-        initialSelectedItem,
-        environment,
-    });
-
-    const onInputBlur = () => {
-        if (inputValue === '') {
-            divRef.current?.dispatchEvent(new LocationChangedEvent(emptyLocationFilter(fields)));
-            selectItem(null);
-        } else if (inputValue !== selectedItem?.label) {
-            setInputValue(selectedItem?.label || '');
-        }
-    };
-
-    const clearInput = () => {
-        divRef.current?.dispatchEvent(new LocationChangedEvent(emptyLocationFilter(fields)));
-        selectItem(null);
-    };
-
-    const buttonRef = useRef(null);
+    const selectedItem = useMemo(() => {
+        return value !== undefined ? toSelectItem(value, fields) : undefined;
+    }, [fields, value]);
 
     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>
-            <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 && selectedItem.description === item.description && 'font-bold'} py-2 px-3 shadow-sm flex flex-col`}
-                            key={item.description}
-                            {...getItemProps({ item, index })}
-                        >
-                            <span>{item.label}</span>
-                            <span className='text-sm text-gray-500'>{item.description}</span>
-                        </li>
-                    ))}
-            </ul>
-        </div>
+        <DownshiftCombobox
+            allItems={allItems}
+            value={selectedItem}
+            filterItemsByInputValue={filterByInputValue}
+            createEvent={(item: SelectItem | null) =>
+                new LocationChangedEvent(item?.lapisFilter ?? emptyLocationFilter(fields))
+            }
+            itemToString={(item: SelectItem | undefined | null) => item?.label ?? ''}
+            placeholderText={placeholderText}
+            formatItemInList={(item: SelectItem) => {
+                return (
+                    <>
+                        <span>{item.label}</span>
+                        <span className='text-sm text-gray-500'>{item.description}</span>
+                    </>
+                );
+            }}
+        />
     );
 };
 
@@ -205,12 +108,12 @@ function filterByInputValue(item: SelectItem, inputValue: string | undefined | n
         return true;
     }
     return (
-        item?.label.toLowerCase().includes(inputValue.toLowerCase()) ||
+        item?.label?.toLowerCase().includes(inputValue.toLowerCase()) ||
         item?.description.toLowerCase().includes(inputValue.toLowerCase())
     );
 }
 
-function toSelectOption(locationFilter: LapisLocationFilter, fields: string[]) {
+function toSelectItem(locationFilter: LapisLocationFilter, fields: string[]): SelectItem | undefined {
     const concatenatedLocation = concatenateLocation(locationFilter, fields);
 
     const lastNonUndefinedField = [...fields]

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 | undefined>;
+
+export class TextInputChangedEvent extends CustomEvent<LapisTextFilter> {
+    constructor(detail: LapisTextFilter) {
+        super('gs-text-input-changed', {
+            detail,
+            bubbles: true,
+            composed: true,
+        });
+    }
+}

package/src/preact/textInput/fetchStringAutocompleteList.ts

@@ -0,0 +1,20 @@
+import { FetchAggregatedOperator } from '../../operator/FetchAggregatedOperator';
+import { type LapisFilter } from '../../types';
+
+export async function fetchStringAutocompleteList({
+    lapis,
+    field,
+    lapisFilter,
+    signal,
+}: {
+    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;
+
+    return data.map((item) => item[field]).sort();
+}