@genspectrum/dashboard-components 1.9.2 → 1.10.1

package/dist/util.d.ts

@@ -135,6 +135,7 @@ export declare const gsEventNames: {
     readonly dateRangeOptionChanged: "gs-date-range-option-changed";
     readonly mutationFilterChanged: "gs-mutation-filter-changed";
     readonly lineageFilterChanged: "gs-lineage-filter-changed";
+    readonly lineageFilterMultiChanged: "gs-lineage-filter-multi-changed";
     readonly locationChanged: "gs-location-changed";
     readonly textFilterChanged: "gs-text-filter-changed";
     readonly numberRangeFilterChanged: "gs-number-range-filter-changed";
@@ -939,22 +940,6 @@ declare global {
 }
 
 
-declare global {
-    interface HTMLElementTagNameMap {
-        'gs-genome-data-viewer': GenomeDataViewerComponent;
-    }
-}
-
-
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'gs-genome-data-viewer': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
-        }
-    }
-}
-
-
 declare global {
     interface HTMLElementTagNameMap {
         'gs-mutation-comparison-component': MutationComparisonComponent;
@@ -1053,7 +1038,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -1061,7 +1046,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1069,7 +1054,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1077,7 +1062,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1085,7 +1070,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-statistics': StatisticsComponent;
+        'gs-genome-data-viewer': GenomeDataViewerComponent;
     }
 }
 
@@ -1093,7 +1078,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-genome-data-viewer': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1101,7 +1086,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
+        'gs-statistics': StatisticsComponent;
     }
 }
 
@@ -1109,7 +1094,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1192,12 +1177,33 @@ declare global {
 }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-number-range-filter': NumberRangeFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.numberRangeFilterChanged]: NumberRangeFilterChangedEvent;
+        [gsEventNames.numberRangeValueChanged]: NumberRangeValueChangedEvent;
+    }
+}
+
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-number-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
+
 declare global {
     interface HTMLElementTagNameMap {
         'gs-lineage-filter': LineageFilterComponent;
     }
     interface HTMLElementEventMap {
         [gsEventNames.lineageFilterChanged]: LineageFilterChangedEvent;
+        [gsEventNames.lineageFilterMultiChanged]: LineageMultiFilterChangedEvent;
     }
 }
 
@@ -1213,11 +1219,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-range-filter': NumberRangeFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        [gsEventNames.numberRangeFilterChanged]: NumberRangeFilterChangedEvent;
-        [gsEventNames.numberRangeValueChanged]: NumberRangeValueChangedEvent;
+        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
     }
 }
 
@@ -1225,7 +1227,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/dist/util.js

@@ -1,4 +1,4 @@
-import { D, a, L, N, b, T, d, g, m, v } from "./NumberRangeFilterChangedEvent-BnPI-Asz.js";
+import { D, a, L, N, b, T, d, g, m, v } from "./NumberRangeFilterChangedEvent-Cdtcp9YL.js";
 export {
   D as DateRangeOptionChangedEvent,
   a as LineageFilterChangedEvent,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "1.9.2",
+    "version": "1.10.1",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",

package/src/preact/components/downshift-combobox.tsx

@@ -1,4 +1,4 @@
-import { useCombobox } from 'downshift/preact';
+import { useCombobox, useMultipleSelection } from 'downshift/preact';
 import { type ComponentChild } from 'preact';
 import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
 
@@ -43,17 +43,7 @@ export function DownshiftCombobox<Item>({
         divRef.current?.dispatchEvent(createEvent(item));
     };
 
-    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 environment = useShadowEnvironment(divRef);
 
     const {
         isOpen,
@@ -120,44 +110,284 @@ export function DownshiftCombobox<Item>({
                         {...getInputProps()}
                         onBlur={onInputBlur}
                     />
-                    <button
-                        aria-label='clear selection'
-                        className={`px-2 ${inputValue === '' && 'hidden'}`}
-                        type='button'
-                        onClick={clearInput}
-                        tabIndex={-1}
-                    >
-                        <DeleteIcon />
-                    </button>
-                    <button
-                        aria-label='toggle menu'
-                        className='px-2'
-                        type='button'
-                        {...getToggleButtonProps()}
-                        ref={buttonRef}
-                    >
-                        {isOpen ? <>↑</> : <>↓</>}
-                    </button>
+                    <ClearButton onClick={clearInput} isHidden={inputValue === ''} />
+                    <ToggleButton isOpen={isOpen} buttonRef={buttonRef} getToggleButtonProps={getToggleButtonProps} />
                 </div>
             </div>
-            <ul
-                className={`absolute bg-white mt-1 shadow-md max-h-80 overflow-scroll z-10 w-full min-w-32 ${isOpen ? '' : 'hidden'}`}
-                {...getMenuProps()}
-            >
-                {items.length > 0 ? (
-                    items.map((item, index) => (
-                        <li
-                            className={`${highlightedIndex === index ? 'bg-blue-300' : ''} ${selectedItem !== null && itemToString(selectedItem) === itemToString(item) ? 'font-bold' : ''} py-2 px-3 shadow-xs`}
-                            key={itemToString(item)}
-                            {...getItemProps({ item, index })}
+            <DropdownMenu
+                isOpen={isOpen}
+                getMenuProps={getMenuProps}
+                items={items}
+                highlightedIndex={highlightedIndex}
+                getItemProps={getItemProps}
+                formatItemInList={formatItemInList}
+                itemToString={itemToString}
+                selectedItem={selectedItem}
+                emptyMessage='No elements to select.'
+            />
+        </div>
+    );
+}
+
+export function DownshiftMultiCombobox<Item>({
+    allItems,
+    value,
+    filterItemsByInputValue,
+    createEvent,
+    itemToString,
+    placeholderText,
+    formatItemInList,
+    formatSelectedItem,
+    inputClassName = '',
+}: {
+    allItems: Item[];
+    value: Item[];
+    filterItemsByInputValue: (item: Item, value: string) => boolean;
+    createEvent: (items: Item[]) => CustomEvent;
+    itemToString: (item: Item | undefined | null) => string;
+    placeholderText?: string;
+    formatItemInList: (item: Item) => ComponentChild;
+    formatSelectedItem?: (item: Item) => ComponentChild;
+    inputClassName?: string;
+}) {
+    const [selectedItems, setSelectedItems] = useState<Item[]>(() => value);
+    const [itemsFilter, setItemsFilter] = useState('');
+
+    useEffect(() => {
+        setSelectedItems(value);
+    }, [value]);
+
+    const availableItems = useMemo(() => {
+        return allItems.filter((item) => {
+            const notAlreadySelected = !selectedItems.find(
+                (selectedItem) => itemToString(selectedItem) === itemToString(item),
+            );
+            const matchesFilter = filterItemsByInputValue(item, itemsFilter);
+            return notAlreadySelected && matchesFilter;
+        });
+    }, [allItems, selectedItems, filterItemsByInputValue, itemsFilter, itemToString]);
+
+    const divRef = useRef<HTMLDivElement>(null);
+
+    const dispatchEvent = (items: Item[]) => {
+        setSelectedItems(items);
+        divRef.current?.dispatchEvent(createEvent(items));
+    };
+
+    const environment = useShadowEnvironment(divRef);
+
+    const { getDropdownProps, removeSelectedItem } = useMultipleSelection({
+        selectedItems,
+        onStateChange({ selectedItems: newSelectedItems, type }) {
+            switch (type) {
+                case useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem:
+                    dispatchEvent(newSelectedItems ?? []);
+                    break;
+                default:
+                    break;
+            }
+        },
+        environment,
+    });
+
+    const { isOpen, getToggleButtonProps, getMenuProps, getInputProps, highlightedIndex, getItemProps, closeMenu } =
+        useCombobox({
+            items: availableItems,
+            itemToString(item) {
+                return itemToString(item);
+            },
+            inputValue: itemsFilter,
+            onStateChange({ inputValue: newInputValue, type, selectedItem: newSelectedItem }) {
+                switch (type) {
+                    case useCombobox.stateChangeTypes.InputKeyDownEnter:
+                    case useCombobox.stateChangeTypes.ItemClick:
+                        if (newSelectedItem) {
+                            dispatchEvent([...selectedItems, newSelectedItem]);
+                            setItemsFilter('');
+                        }
+                        break;
+                    case useCombobox.stateChangeTypes.InputChange:
+                        setItemsFilter(newInputValue?.trim() ?? '');
+                        break;
+                    default:
+                        break;
+                }
+            },
+            stateReducer(state, actionAndChanges) {
+                const { changes, type } = actionAndChanges;
+                switch (type) {
+                    case useCombobox.stateChangeTypes.InputKeyDownEnter:
+                    case useCombobox.stateChangeTypes.ItemClick:
+                        return {
+                            ...changes,
+                            isOpen: true,
+                            highlightedIndex: state.highlightedIndex,
+                            inputValue: '',
+                        };
+                    default:
+                        return changes;
+                }
+            },
+            environment,
+        });
+
+    const clearAll = () => {
+        dispatchEvent([]);
+        setItemsFilter('');
+    };
+
+    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-1 flex-wrap p-1.5 input min-w-24 h-fit w-full ${inputClassName}`}
+                    onBlur={(event) => {
+                        if (event.relatedTarget != buttonRef.current) {
+                            closeMenu();
+                        }
+                    }}
+                >
+                    {selectedItems.map((selectedItem, index) => (
+                        <span
+                            key={`${itemToString(selectedItem)}-${index}`}
+                            className='inline-flex items-center gap-1 px-2 py-0.5 bg-blue-100 text-black rounded'
                         >
-                            {formatItemInList(item)}
-                        </li>
-                    ))
-                ) : (
-                    <li className='py-2 px-3 shadow-xs'>No elements to select.</li>
-                )}
-            </ul>
+                            {formatSelectedItem ? formatSelectedItem(selectedItem) : itemToString(selectedItem)}
+                            <button
+                                aria-label={`remove ${itemToString(selectedItem)}`}
+                                className='cursor-pointer hover:text-red-600'
+                                type='button'
+                                onClick={() => removeSelectedItem(selectedItem)}
+                                tabIndex={-1}
+                            >
+                                ×
+                            </button>
+                        </span>
+                    ))}
+                    <div className='flex gap-0.5 grow min-w-32'>
+                        <input
+                            placeholder={placeholderText}
+                            className='w-full px-1 py-0.5 focus:outline-none min-w-24'
+                            {...getInputProps(getDropdownProps({ preventKeyAction: isOpen }))}
+                        />
+                        <ClearButton onClick={clearAll} isHidden={selectedItems.length === 0} />
+                        <ToggleButton
+                            isOpen={isOpen}
+                            buttonRef={buttonRef}
+                            getToggleButtonProps={getToggleButtonProps}
+                        />
+                    </div>
+                </div>
+            </div>
+            <DropdownMenu
+                isOpen={isOpen}
+                getMenuProps={getMenuProps}
+                items={availableItems}
+                highlightedIndex={highlightedIndex}
+                getItemProps={getItemProps}
+                formatItemInList={formatItemInList}
+                itemToString={itemToString}
+                selectedItem={selectedItems}
+                emptyMessage={selectedItems.length > 0 ? 'No more elements to select.' : 'No elements to select.'}
+            />
         </div>
     );
 }
+
+function useShadowEnvironment(divRef: React.RefObject<HTMLDivElement>) {
+    const shadowRoot = divRef.current?.shadowRoot ?? undefined;
+
+    return shadowRoot !== undefined
+        ? {
+              addEventListener: window.addEventListener.bind(window),
+              removeEventListener: window.removeEventListener.bind(window),
+              document: shadowRoot.ownerDocument,
+              Node: window.Node,
+          }
+        : undefined;
+}
+
+function ToggleButton({
+    isOpen,
+    buttonRef,
+    getToggleButtonProps,
+    onClick,
+}: {
+    isOpen: boolean;
+    buttonRef?: React.Ref<HTMLButtonElement>;
+    getToggleButtonProps?: () => Record<string, unknown>;
+    onClick?: () => void;
+}) {
+    const props = getToggleButtonProps ? getToggleButtonProps() : { onClick };
+    return (
+        <button aria-label='toggle menu' className='px-2' type='button' {...props} ref={buttonRef}>
+            {isOpen ? <>↑</> : <>↓</>}
+        </button>
+    );
+}
+
+function ClearButton({ onClick, isHidden }: { onClick: () => void; isHidden: boolean }) {
+    return (
+        <button
+            aria-label='clear selection'
+            className={`px-2 ${isHidden ? 'hidden' : ''}`}
+            type='button'
+            onClick={onClick}
+            tabIndex={-1}
+        >
+            <DeleteIcon />
+        </button>
+    );
+}
+
+function DropdownMenu<Item>({
+    isOpen,
+    getMenuProps,
+    items,
+    highlightedIndex,
+    getItemProps,
+    formatItemInList,
+    itemToString,
+    selectedItem,
+    emptyMessage,
+}: {
+    isOpen: boolean;
+    getMenuProps: () => Record<string, unknown>;
+    items: Item[];
+    highlightedIndex: number;
+    getItemProps: (options: { item: Item; index: number }) => Record<string, unknown>;
+    formatItemInList: (item: Item) => ComponentChild;
+    itemToString: (item: Item) => string;
+    selectedItem?: Item | Item[] | null;
+    emptyMessage: string;
+}) {
+    const isItemSelected = (item: Item) => {
+        if (Array.isArray(selectedItem)) {
+            return selectedItem.some((selected) => itemToString(selected) === itemToString(item));
+        }
+        return selectedItem !== null && selectedItem !== undefined && itemToString(selectedItem) === itemToString(item);
+    };
+
+    return (
+        <ul
+            className={`absolute bg-white mt-1 shadow-md max-h-80 overflow-scroll z-10 w-full min-w-32 ${isOpen ? '' : 'hidden'}`}
+            {...getMenuProps()}
+        >
+            {items.length > 0 ? (
+                items.map((item, index) => (
+                    <li
+                        className={`${highlightedIndex === index ? 'bg-blue-300' : ''} ${isItemSelected(item) ? 'font-bold' : ''} py-2 px-3 shadow-xs cursor-pointer`}
+                        key={itemToString(item)}
+                        {...getItemProps({ item, index })}
+                    >
+                        {formatItemInList(item)}
+                    </li>
+                ))
+            ) : (
+                <li className='py-2 px-3 shadow-xs'>{emptyMessage}</li>
+            )}
+        </ul>
+    );
+}

package/src/preact/dateRangeFilter/date-range-filter.stories.tsx

@@ -171,7 +171,9 @@ export const SetsValueOnBlur: StoryObj<DateRangeFilterProps> = {
                         },
                     }),
                 );
+            });
 
+            await waitFor(async () => {
                 await expect(optionChangedListenerMock).toHaveBeenCalledWith(
                     expect.objectContaining({
                         detail: {

package/src/preact/lineageFilter/LineageFilterChangedEvent.ts

@@ -1,6 +1,7 @@
 import { gsEventNames } from '../../utils/gsEventNames';
 
 type LapisLineageFilter = Record<string, string | undefined>;
+type LapisLineageMultiFilter = Record<string, string[] | undefined>;
 
 export class LineageFilterChangedEvent extends CustomEvent<LapisLineageFilter> {
     constructor(detail: LapisLineageFilter) {
@@ -11,3 +12,13 @@ export class LineageFilterChangedEvent extends CustomEvent<LapisLineageFilter> {
         });
     }
 }
+
+export class LineageMultiFilterChangedEvent extends CustomEvent<LapisLineageMultiFilter> {
+    constructor(detail: LapisLineageMultiFilter) {
+        super(gsEventNames.lineageFilterMultiChanged, {
+            detail,
+            bubbles: true,
+            composed: true,
+        });
+    }
+}

package/src/preact/lineageFilter/fetchLineageAutocompleteList.ts

@@ -2,6 +2,8 @@ import { fetchLineageDefinition } from '../../lapisApi/lapisApi';
 import { FetchAggregatedOperator } from '../../operator/FetchAggregatedOperator';
 import type { LapisFilter } from '../../types';
 
+export type LineageItem = { lineage: string; count: number };
+
 /**
  * Generates the autocomplete list for lineage search. It includes lineages with wild cards
  * (i.e. "BA.3.2.1" and "BA.3.2.1*") as well as all prefixes of lineages with an asterisk ("BA.3.2*").
@@ -56,8 +58,6 @@ export async function fetchLineageAutocompleteList({
     });
 }
 
-export type LineageItem = { lineage: string; count: number };
-
 async function getCountsByLineage({
     lapisUrl,
     lapisField,