@genspectrum/dashboard-components 0.12.1 → 0.13.0

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/textInput/TextInputChangedEvent.ts

@@ -1,4 +1,4 @@
-type LapisTextFilter = Record<string, string | null | undefined>;
+type LapisTextFilter = Record<string, string | undefined>;
 
 export class TextInputChangedEvent extends CustomEvent<LapisTextFilter> {
     constructor(detail: LapisTextFilter) {

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();
+}

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

@@ -23,6 +23,7 @@ const meta: Meta<TextInputProps> = {
                         url: AGGREGATED_ENDPOINT,
                         body: {
                             fields: ['host'],
+                            country: 'Germany',
                         },
                     },
                     response: {
@@ -36,16 +37,15 @@ const meta: Meta<TextInputProps> = {
     argTypes: {
         lapisField: {
             control: {
-                type: 'select',
+                type: 'text',
             },
-            options: ['host'],
         },
         placeholderText: {
             control: {
                 type: 'text',
             },
         },
-        initialValue: {
+        value: {
             control: {
                 type: 'text',
             },
@@ -55,6 +55,11 @@ const meta: Meta<TextInputProps> = {
                 type: 'text',
             },
         },
+        lapisFilter: {
+            control: {
+                type: 'object',
+            },
+        },
     },
 };
 
@@ -63,19 +68,17 @@ export default meta;
 export const Default: StoryObj<TextInputProps> = {
     render: (args) => (
         <LapisUrlContext.Provider value={LAPIS_URL}>
-            <TextInput
-                lapisField={args.lapisField}
-                placeholderText={args.placeholderText}
-                initialValue={args.initialValue}
-                width={args.width}
-            />
+            <TextInput {...args} />
         </LapisUrlContext.Provider>
     ),
     args: {
         lapisField: 'host',
         placeholderText: 'Enter a host name',
-        initialValue: '',
+        value: '',
         width: '100%',
+        lapisFilter: {
+            country: 'Germany',
+        },
     },
 };
 
@@ -83,7 +86,7 @@ export const RemoveInitialValue: StoryObj<TextInputProps> = {
     ...Default,
     args: {
         ...Default.args,
-        initialValue: 'Homo sapiens',
+        value: 'Homo sapiens',
     },
     play: async ({ canvasElement, step }) => {
         const canvas = within(canvasElement);