@genspectrum/dashboard-components 0.12.1 → 0.13.1

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/mutationsOverTime/MutationOverTimeData.ts

@@ -5,16 +5,20 @@ import {
 } from '../../query/queryMutationsOverTime';
 import { type Map2d, Map2dBase, type Map2DContents } from '../../utils/map2d';
 import type { Deletion, Substitution } from '../../utils/mutations';
-import type { Temporal } from '../../utils/temporalClass';
+import type { Temporal, TemporalClass } from '../../utils/temporalClass';
 
-export type MutationOverTimeDataMap = Map2d<Substitution | Deletion, Temporal, MutationOverTimeMutationValue>;
+export type MutationOverTimeDataMap<T extends Temporal | TemporalClass = Temporal> = Map2d<
+    Substitution | Deletion,
+    T,
+    MutationOverTimeMutationValue
+>;
 
-export class BaseMutationOverTimeDataMap extends Map2dBase<
+export class BaseMutationOverTimeDataMap<T extends Temporal | TemporalClass = Temporal> extends Map2dBase<
     Substitution | Deletion,
-    Temporal,
+    T,
     MutationOverTimeMutationValue
 > {
-    constructor(initialContent?: Map2DContents<Substitution | Deletion, Temporal, MutationOverTimeMutationValue>) {
+    constructor(initialContent?: Map2DContents<Substitution | Deletion, T, MutationOverTimeMutationValue>) {
         super(serializeSubstitutionOrDeletion, serializeTemporal, initialContent);
     }
 }

package/src/preact/mutationsOverTime/mutations-over-time-grid.tsx

@@ -111,9 +111,11 @@ const ProportionCell: FunctionComponent<{
             ) : (
                 <>
                     <p>Proportion: {formatProportion(value.proportion)}</p>
-                    <p>
-                        Count: {value.count} / {value.totalCount} total
-                    </p>
+                    {value.count !== null && value.totalCount !== null && (
+                        <p>
+                            Count: {value.count} / {value.totalCount} total
+                        </p>
+                    )}
                 </>
             )}
         </div>

package/src/preact/shared/sort/sortSubstitutionsAndDeletions.ts

@@ -1,9 +1,6 @@
-import { DeletionClass, type SubstitutionClass } from '../../../utils/mutations';
+import type { Deletion, Substitution } from '../../../utils/mutations';
 
-export const sortSubstitutionsAndDeletions = (
-    a: SubstitutionClass | DeletionClass,
-    b: SubstitutionClass | DeletionClass,
-) => {
+export const sortSubstitutionsAndDeletions = (a: Substitution | Deletion, b: Substitution | Deletion) => {
     if (a.segment !== b.segment) {
         return compareSegments(a.segment, b.segment);
     }
@@ -12,8 +9,8 @@ export const sortSubstitutionsAndDeletions = (
         return comparePositions(a.position, b.position);
     }
 
-    const aIsDeletion = a instanceof DeletionClass;
-    const bIsDeletion = b instanceof DeletionClass;
+    const aIsDeletion = a.type === 'deletion';
+    const bIsDeletion = b.type === 'deletion';
 
     if (aIsDeletion !== bIsDeletion) {
         return aIsDeletion ? 1 : -1;

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);

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

@@ -1,29 +1,31 @@
-import { useCombobox } from 'downshift/preact';
 import { type FunctionComponent } from 'preact';
-import { useContext, useRef, useState } from 'preact/hooks';
+import { useContext } from 'preact/hooks';
 import z from 'zod';
 
-import { fetchAutocompleteList } from './fetchAutocompleteList';
+import { fetchStringAutocompleteList } from './fetchStringAutocompleteList';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { TextInputChangedEvent } from './TextInputChangedEvent';
+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 textInputInnerPropsSchema = z.object({
+const textSelectorPropsSchema = z.object({
     lapisField: z.string().min(1),
     placeholderText: z.string().optional(),
-    initialValue: z.string().optional(),
+    value: z.string().optional(),
 });
-
+const textInputInnerPropsSchema = textSelectorPropsSchema.extend({ lapisFilter: lapisFilterSchema });
 const textInputPropsSchema = textInputInnerPropsSchema.extend({
     width: z.string(),
 });
 
 export type TextInputInnerProps = z.infer<typeof textInputInnerPropsSchema>;
 export type TextInputProps = z.infer<typeof textInputPropsSchema>;
+type TextSelectorProps = z.infer<typeof textSelectorPropsSchema>;
 
 export const TextInput: FunctionComponent<TextInputProps> = (props) => {
     const { width, ...innerProps } = props;
@@ -38,10 +40,18 @@ export const TextInput: FunctionComponent<TextInputProps> = (props) => {
     );
 };
 
-const TextInputInner: FunctionComponent<TextInputInnerProps> = ({ initialValue, lapisField, placeholderText }) => {
+const TextInputInner: FunctionComponent<TextInputInnerProps> = ({
+    value,
+    lapisField,
+    placeholderText,
+    lapisFilter,
+}) => {
     const lapis = useContext(LapisUrlContext);
 
-    const { data, error, isLoading } = useQuery(() => fetchAutocompleteList(lapis, lapisField), [lapisField, lapis]);
+    const { data, error, isLoading } = useQuery(
+        () => fetchStringAutocompleteList({ lapis, field: lapisField, lapisFilter }),
+        [lapisField, lapis, lapisFilter],
+    );
 
     if (isLoading) {
         return <LoadingDisplay />;
@@ -55,146 +65,35 @@ const TextInputInner: FunctionComponent<TextInputInnerProps> = ({ initialValue,
         return <NoDataDisplay />;
     }
 
-    return (
-        <TextSelector
-            lapisField={lapisField}
-            initialValue={initialValue}
-            placeholderText={placeholderText}
-            data={data}
-        />
-    );
+    return <TextSelector lapisField={lapisField} value={value} placeholderText={placeholderText} data={data} />;
 };
 
 const TextSelector = ({
     lapisField,
-    initialValue,
+    value,
     placeholderText,
     data,
-}: TextInputInnerProps & {
+}: TextSelectorProps & {
     data: string[];
 }) => {
-    const [items, setItems] = useState(data.filter((item) => filterByInputValue(item, initialValue)));
-
-    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;
-
-    function filterByInputValue(item: string, inputValue: string | undefined | null) {
-        if (inputValue === undefined || inputValue === null || inputValue === '') {
-            return true;
-        }
-        return item?.toLowerCase().includes(inputValue?.toLowerCase() || '');
-    }
-
-    const {
-        isOpen,
-        getToggleButtonProps,
-        getMenuProps,
-        getInputProps,
-        highlightedIndex,
-        getItemProps,
-        selectedItem,
-        inputValue,
-        selectItem,
-        setInputValue,
-        closeMenu,
-    } = useCombobox({
-        onInputValueChange({ inputValue }) {
-            setItems(data.filter((item) => filterByInputValue(item, inputValue)));
-        },
-        onSelectedItemChange({ selectedItem }) {
-            if (selectedItem !== null) {
-                divRef.current?.dispatchEvent(new TextInputChangedEvent({ [lapisField]: selectedItem }));
-            }
-        },
-        items,
-        itemToString(item) {
-            return item ?? '';
-        },
-        initialSelectedItem: initialValue,
-        environment,
-    });
-
-    const onInputBlur = () => {
-        if (inputValue === '') {
-            divRef.current?.dispatchEvent(new TextInputChangedEvent({ [lapisField]: undefined }));
-            selectItem(null);
-        } else if (inputValue !== selectedItem) {
-            setInputValue(selectedItem ?? '');
-        }
-    };
-
-    const clearInput = () => {
-        divRef.current?.dispatchEvent(new TextInputChangedEvent({ [lapisField]: undefined }));
-        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>
-            <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} py-2 px-3 shadow-sm flex flex-col`}
-                            key={item}
-                            {...getItemProps({ item, index })}
-                        >
-                            <span>{item}</span>
-                        </li>
-                    ))}
-            </ul>
-        </div>
+        <DownshiftCombobox
+            allItems={data}
+            value={value}
+            filterItemsByInputValue={filterByInputValue}
+            createEvent={(item: string | null) => new TextInputChangedEvent({ [lapisField]: item ?? undefined })}
+            itemToString={(item: string | undefined | null) => item ?? ''}
+            placeholderText={placeholderText}
+            formatItemInList={(item: string) => {
+                return <span>{item}</span>;
+            }}
+        />
     );
 };
+
+function filterByInputValue(item: string, inputValue: string | undefined | null) {
+    if (inputValue === undefined || inputValue === null || inputValue === '') {
+        return true;
+    }
+    return item?.toLowerCase().includes(inputValue?.toLowerCase() || '');
+}