@genspectrum/dashboard-components 0.12.1 → 0.13.1

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

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