@genspectrum/dashboard-components 0.11.7 → 0.12.1

package/src/preact/locationFilter/location-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 data from './__mockData__/aggregated.json';
 import { LocationFilter, type LocationFilterProps } from './location-filter';
@@ -35,7 +37,7 @@ const meta: Meta<LocationFilterProps> = {
     args: {
         width: '100%',
         fields: ['region', 'country', 'division', 'location'],
-        initialValue: 'Europe',
+        value: { region: 'Europe', country: undefined, division: undefined, location: undefined },
         placeholderText: 'Enter a location',
     },
     argTypes: {
@@ -44,9 +46,9 @@ const meta: Meta<LocationFilterProps> = {
                 type: 'object',
             },
         },
-        initialValue: {
+        value: {
             control: {
-                type: 'text',
+                type: 'object',
             },
         },
         width: {
@@ -67,16 +69,98 @@ export default meta;
 export const Primary: StoryObj<LocationFilterProps> = {
     render: (args) => (
         <LapisUrlContext.Provider value={LAPIS_URL}>
-            <LocationFilter
-                fields={args.fields}
-                initialValue={args.initialValue}
-                width={args.width}
-                placeholderText={args.placeholderText}
-            />
+            <LocationFilter {...args} />
         </LapisUrlContext.Provider>
     ),
+    play: async ({ canvasElement, step }) => {
+        const { canvas, locationChangedListenerMock } = await prepare(canvasElement, step);
+
+        step('change location filter value fires event', async () => {
+            const input = await inputField(canvas);
+            await userEvent.clear(input);
+            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,
+                    },
+                }),
+            );
+        });
+    },
+};
+
+export const ClearSelection: StoryObj<LocationFilterProps> = {
+    ...Primary,
+    play: async ({ canvasElement, step }) => {
+        const { canvas, locationChangedListenerMock } = 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 expect(locationChangedListenerMock).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    detail: {
+                        country: undefined,
+                        region: undefined,
+                        division: undefined,
+                        location: undefined,
+                    },
+                }),
+            );
+        });
+    },
+};
+
+export const OnBlurInput: StoryObj<LocationFilterProps> = {
+    ...Primary,
+    play: async ({ canvasElement, step }) => {
+        const { canvas, locationChangedListenerMock } = 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 expect(locationChangedListenerMock).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    detail: {
+                        country: undefined,
+                        region: undefined,
+                        division: undefined,
+                        location: undefined,
+                    },
+                }),
+            );
+        });
+    },
 };
 
+const inputField = (canvas: ReturnType<typeof within>) => canvas.findByPlaceholderText('Enter a location');
+
+async function prepare(canvasElement: HTMLElement, step: StepFunction<PreactRenderer, unknown>) {
+    const canvas = within(canvasElement);
+
+    const locationChangedListenerMock = fn();
+    step('Setup event listener mock', () => {
+        canvasElement.addEventListener('gs-location-changed', locationChangedListenerMock);
+    });
+
+    step('location filter is rendered with value', async () => {
+        await waitFor(async () => {
+            return expect(await inputField(canvas)).toHaveValue('Europe');
+        });
+    });
+
+    return { canvas, locationChangedListenerMock };
+}
+
 export const WithNoFields: StoryObj<LocationFilterProps> = {
     ...Primary,
     args: {

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

@@ -1,17 +1,18 @@
+import { useCombobox } from 'downshift/preact';
 import { type FunctionComponent } from 'preact';
-import { useContext, useRef, useState } from 'preact/hooks';
-import { type JSXInternal } from 'preact/src/jsx';
+import { useContext, useMemo, useRef, useState } from 'preact/hooks';
 import z from 'zod';
 
 import { fetchAutocompletionList } from './fetchAutocompletionList';
 import { LapisUrlContext } from '../LapisUrlContext';
+import { type LapisLocationFilter, LocationChangedEvent } from './LocationChangedEvent';
 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({
-    initialValue: z.string().optional(),
+    value: z.record(z.string().nullable().optional()).optional(),
     placeholderText: z.string().optional(),
     fields: z.array(z.string()).min(1),
 });
@@ -36,14 +37,9 @@ export const LocationFilter: FunctionComponent<LocationFilterProps> = (props) =>
     );
 };
 
-export const LocationFilterInner = ({ initialValue, fields, placeholderText }: LocationFilterInnerProps) => {
+export const LocationFilterInner = ({ value, fields, placeholderText }: LocationFilterInnerProps) => {
     const lapis = useContext(LapisUrlContext);
 
-    const [value, setValue] = useState(initialValue ?? '');
-    const [unknownLocation, setUnknownLocation] = useState(false);
-
-    const divRef = useRef<HTMLDivElement>(null);
-
     const { data, error, isLoading } = useQuery(() => fetchAutocompletionList(fields, lapis), [fields, lapis]);
 
     if (isLoading) {
@@ -53,70 +49,195 @@ export const LocationFilterInner = ({ initialValue, fields, placeholderText }: L
         throw error;
     }
 
-    const onInput = (event: JSXInternal.TargetedInputEvent<HTMLInputElement>) => {
-        const inputValue = event.currentTarget.value;
-        setValue(inputValue);
-        if (inputValue.trim() === value.trim() && inputValue !== '') {
-            return;
-        }
-        const eventDetail = parseLocation(inputValue, fields);
-        if (hasAllUndefined(eventDetail) || hasMatchingEntry(data, eventDetail)) {
-            divRef.current?.dispatchEvent(
-                new CustomEvent('gs-location-changed', {
-                    detail: eventDetail,
-                    bubbles: true,
-                    composed: true,
-                }),
-            );
-            setUnknownLocation(false);
-        } else {
-            setUnknownLocation(true);
+    return <LocationSelector fields={fields} value={value} placeholderText={placeholderText} locationData={data} />;
+};
+
+type SelectItem = {
+    lapisFilter: LapisLocationFilter;
+    label: string;
+    description: string;
+};
+
+const LocationSelector = ({
+    fields,
+    value,
+    placeholderText,
+    locationData,
+}: LocationFilterInnerProps & {
+    locationData: LapisLocationFilter[];
+}) => {
+    const allItems = useMemo(
+        () =>
+            locationData
+                .map((locationFilter) => {
+                    return toSelectOption(locationFilter, fields);
+                })
+                .filter((item): item is SelectItem => item !== undefined),
+        [locationData, fields],
+    );
+
+    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);
+
     return (
-        <div class='flex w-full' ref={divRef}>
-            <input
-                type='text'
-                class={`input input-bordered grow ${unknownLocation ? 'border-2 border-error' : ''}`}
-                value={value}
-                onInput={onInput}
-                list='countries'
-                placeholder={placeholderText}
-            />
-            <datalist id='countries'>
-                {data?.map((v) => {
-                    const value = fields
-                        .map((field) => v[field])
-                        .filter((value) => value !== null)
-                        .join(' / ');
-                    return <option key={value} value={value} />;
-                })}
-            </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 && 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>
     );
 };
 
-const parseLocation = (location: string, fields: string[]) => {
-    if (location === '') {
-        return fields.reduce((acc, field) => ({ ...acc, [field]: undefined }), {});
+function filterByInputValue(item: SelectItem, inputValue: string | undefined | null) {
+    if (inputValue === undefined || inputValue === null) {
+        return true;
     }
-    const fieldValues = location.split('/').map((part) => part.trim());
+    return (
+        item?.label.toLowerCase().includes(inputValue.toLowerCase()) ||
+        item?.description.toLowerCase().includes(inputValue.toLowerCase())
+    );
+}
 
-    return fields.reduce((acc, field, i) => ({ ...acc, [field]: fieldValues[i] }), {});
-};
+function toSelectOption(locationFilter: LapisLocationFilter, fields: string[]) {
+    const concatenatedLocation = concatenateLocation(locationFilter, fields);
 
-const hasAllUndefined = (obj: Record<string, string | undefined>) =>
-    Object.values(obj).every((value) => value === undefined);
+    const lastNonUndefinedField = [...fields]
+        .reverse()
+        .find((field) => locationFilter[field] !== undefined && locationFilter[field] !== null);
 
-const hasMatchingEntry = (data: Record<string, string>[] | null, eventDetail: Record<string, string>) => {
-    if (data === null) {
-        return false;
+    if (lastNonUndefinedField === undefined) {
+        return undefined;
     }
 
-    const matchingEntries = Object.entries(eventDetail)
-        .filter(([, value]) => value !== undefined)
-        .reduce((filteredData, [key, value]) => filteredData.filter((it) => it[key] === value), data);
-
-    return matchingEntries.length > 0;
-};
+    return {
+        lapisFilter: locationFilter,
+        label: locationFilter[lastNonUndefinedField],
+        description: concatenatedLocation,
+    };
+}
+
+function concatenateLocation(locationFilter: LapisLocationFilter, fields: string[]) {
+    return fields
+        .map((field) => locationFilter[field])
+        .filter((value) => value !== null && value !== undefined)
+        .join(' / ');
+}
+
+function emptyLocationFilter(fields: string[]) {
+    return fields.reduce((acc, field) => {
+        acc[field] = undefined;
+        return acc;
+    }, {} as LapisLocationFilter);
+}

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/mutationFilter/mutation-filter-info.tsx

@@ -1,6 +1,8 @@
 import { useContext } from 'preact/hooks';
+import { type FC } from 'react';
 
 import { isSingleSegmented } from '../../lapisApi/ReferenceGenome';
+import { type SequenceType } from '../../types';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
 import Info, { InfoHeadline1, InfoHeadline2, InfoParagraph } from '../components/info';
 
@@ -13,7 +15,38 @@ export const MutationFilterInfo = () => {
             <InfoHeadline1> Mutation Filter</InfoHeadline1>
             <InfoParagraph>This component allows you to filter for mutations at specific positions.</InfoParagraph>
 
-            <InfoHeadline2> Nucleotide Mutations and Insertions</InfoHeadline2>
+            <InfoHeadline2>Quickstart</InfoHeadline2>
+            <InfoParagraph>
+                <ul className='list-disc list-inside'>
+                    <li>
+                        Filter for nucleotide mutations:{' '}
+                        <ExampleMutation mutationType='substitution' sequenceType='nucleotide' />
+                    </li>
+                    <li>
+                        Filter for amino acid mutations:{' '}
+                        <ExampleMutation mutationType='insertion' sequenceType='nucleotide' />
+                    </li>
+                    <li>
+                        Filter for nucleotide insertions:{' '}
+                        <ExampleMutation mutationType='substitution' sequenceType='amino acid' />
+                    </li>
+                    <li>
+                        Filter for amino acid insertions:{' '}
+                        <ExampleMutation mutationType='insertion' sequenceType='amino acid' />
+                    </li>
+                </ul>
+            </InfoParagraph>
+            {!isSingleSegmented(referenceGenome) && (
+                <InfoParagraph>
+                    This organism has the following segments:{' '}
+                    {referenceGenome.nucleotideSequences.map((gene) => gene.name).join(', ')}.
+                </InfoParagraph>
+            )}
+            <InfoParagraph>
+                This organism has the following genes: {referenceGenome.genes.map((gene) => gene.name).join(', ')}.
+            </InfoParagraph>
+
+            <InfoHeadline2>Nucleotide Mutations and Insertions</InfoHeadline2>
             {isSingleSegmented(referenceGenome) ? (
                 <SingleSegmentedNucleotideMutationsInfo />
             ) : (
@@ -25,16 +58,13 @@ export const MutationFilterInfo = () => {
                 An amino acid mutation has the format <b>&lt;gene&gt;:&lt;position&gt;&lt;base&gt;</b> or
                 <b>&lt;gene&gt;:&lt;base_ref&gt;&lt;position&gt;&lt;base&gt;</b>. A <b>&lt;base&gt;</b> can be one of
                 the 20 amino acid codes. It can also be <b>-</b> for deletion and <b>X</b> for unknown. Example:{' '}
-                <b>E:57Q</b>.
+                <ExampleMutation mutationType='substitution' sequenceType='amino acid' />.
             </InfoParagraph>
             <InfoParagraph>
                 Insertions can be searched for in the same manner, they just need to have <b>ins_</b> appended to the
                 start of the mutation. Example: <b>ins_{firstGene}:31:N</b> would filter for sequences with an insertion
                 of N between positions 31 and 32 in the gene {firstGene}.
             </InfoParagraph>
-            <InfoParagraph>
-                This organism has the following genes: {referenceGenome.genes.map((gene) => gene.name).join(', ')}.
-            </InfoParagraph>
 
             <InfoHeadline2>Insertion Wildcards</InfoHeadline2>
             <InfoParagraph>
@@ -106,12 +136,45 @@ const MultiSegmentedNucleotideMutationsInfo = () => {
             </InfoParagraph>
             <InfoParagraph>
                 Insertions can be searched for in the same manner, they just need to have <b>ins_</b> appended to the
-                start of the mutation. Example: <b>ins_{firstSegment}:10462:A</b>.
+                start of the mutation. Example: <ExampleMutation mutationType='insertion' sequenceType='nucleotide' />.
             </InfoParagraph>
-            <InfoParagraph>
-                This organism has the following segments:{' '}
-                {referenceGenome.nucleotideSequences.map((gene) => gene.name).join(', ')}.
-            </InfoParagraph>{' '}
         </>
     );
 };
+
+type ExampleMutationProps = {
+    sequenceType: SequenceType;
+    mutationType: 'substitution' | 'insertion';
+};
+
+const ExampleMutation: FC<ExampleMutationProps> = ({ sequenceType, mutationType }) => {
+    const referenceGenome = useContext(ReferenceGenomeContext);
+
+    const firstSegment = referenceGenome.nucleotideSequences[0].name;
+    const firstGene = referenceGenome.genes[0].name;
+
+    if (sequenceType === 'amino acid') {
+        switch (mutationType) {
+            case 'substitution':
+                return <b>{firstGene}:57Q</b>;
+            case 'insertion':
+                return <b>ins_{firstGene}:31:N</b>;
+        }
+    }
+
+    if (isSingleSegmented(referenceGenome)) {
+        switch (mutationType) {
+            case 'substitution':
+                return <b>23T</b>;
+            case 'insertion':
+                return <b>ins_1046:A</b>;
+        }
+    }
+
+    switch (mutationType) {
+        case 'substitution':
+            return <b>{firstSegment}:23T</b>;
+        case 'insertion':
+            return <b>ins_{firstSegment}:10462:A</b>;
+    }
+};

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