@genspectrum/dashboard-components 1.9.1 → 1.10.0

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-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
-    }
-}
-
-
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
-        }
-    }
-}
-
-
 declare global {
     interface HTMLElementTagNameMap {
         'gs-genome-data-viewer': GenomeDataViewerComponent;
@@ -989,7 +974,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations': MutationsComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -997,7 +982,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1005,7 +990,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-mutations': MutationsComponent;
     }
 }
 
@@ -1013,7 +998,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1117,10 +1102,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
+        'gs-date-range-filter': DateRangeFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.locationChanged]: LocationChangedEvent;
+        [gsEventNames.dateRangeFilterChanged]: CustomEvent<Record<string, string>>;
+        [gsEventNames.dateRangeOptionChanged]: DateRangeOptionChangedEvent;
     }
 }
 
@@ -1128,7 +1114,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1136,11 +1122,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-filter': DateRangeFilterComponent;
+        'gs-location-filter': LocationFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.dateRangeFilterChanged]: CustomEvent<Record<string, string>>;
-        [gsEventNames.dateRangeOptionChanged]: DateRangeOptionChangedEvent;
+        [gsEventNames.locationChanged]: LocationChangedEvent;
     }
 }
 
@@ -1148,7 +1133,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1198,6 +1183,7 @@ declare global {
     }
     interface HTMLElementEventMap {
         [gsEventNames.lineageFilterChanged]: LineageFilterChangedEvent;
+        [gsEventNames.lineageFilterMultiChanged]: LineageMultiFilterChangedEvent;
     }
 }
 
@@ -1231,6 +1217,22 @@ declare global {
 }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
+    }
+}
+
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
+
 declare module 'chart.js' {
     interface CartesianScaleTypeRegistry {
         logit: {

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.1",
+    "version": "1.10.0",
     "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/components/mutations-over-time-mutations-filter.stories.tsx

@@ -7,6 +7,7 @@ import {
     MutationsOverTimeMutationsFilter,
     type MutationsOverTimeMutationsFilterProps,
 } from './mutations-over-time-mutations-filter';
+import { type MutationAnnotations } from '../../web-components/mutation-annotations-context';
 import { MutationAnnotationsContextProvider } from '../MutationAnnotationsContext';
 import { type MutationFilter } from '../mutationsOverTime/getFilteredMutationsOverTimeData';
 
@@ -18,30 +19,38 @@ const meta: Meta = {
 
 export default meta;
 
+const manyMutationAnnotations = Array.from({ length: 300 }, (_, i) => ({
+    name: `Annotation ${i + 1}`,
+    description: `This is test annotation number ${i + 1} for testing many annotations.`,
+    symbol: String.fromCharCode(33 + (i % 94)), // Cycle through printable ASCII characters
+    nucleotideMutations: ['A23G'],
+    aminoAcidMutations: [],
+})) satisfies MutationAnnotations;
+
 const WrapperWithState = ({
     setFilterValue,
     value,
+    annotations = [
+        {
+            name: 'Test Annotation 1',
+            description: 'Test Annotation 1',
+            symbol: '#',
+        },
+        {
+            name: 'Test Annotation 2',
+            description: 'Test Annotation 2',
+            symbol: '+',
+        },
+    ],
 }: {
     setFilterValue: Dispatch<StateUpdater<MutationFilter>>;
     value: MutationFilter;
+    annotations?: MutationAnnotations;
 }) => {
     const [state, setState] = useState(value);
 
     return (
-        <MutationAnnotationsContextProvider
-            value={[
-                {
-                    name: 'Test Annotation 1',
-                    description: 'Test Annotation 1',
-                    symbol: '#',
-                },
-                {
-                    name: 'Test Annotation 2',
-                    description: 'Test Annotation 2',
-                    symbol: '+',
-                },
-            ]}
-        >
+        <MutationAnnotationsContextProvider value={annotations}>
             <MutationsOverTimeMutationsFilter
                 setFilterValue={(value) => {
                     setFilterValue(value);
@@ -107,3 +116,53 @@ export const FilterByAnnotation: StoryObj<MutationsOverTimeMutationsFilterProps>
         });
     },
 };
+
+export const WithManyMutationAnnotations: StoryObj<MutationsOverTimeMutationsFilterProps> = {
+    render: (args) => {
+        return (
+            <WrapperWithState
+                setFilterValue={args.setFilterValue}
+                value={args.value}
+                annotations={manyMutationAnnotations}
+            />
+        );
+    },
+    args: {
+        setFilterValue: fn(),
+        value: { textFilter: '', annotationNameFilter: new Set() },
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+
+        await step('Open filter dropdown', async () => {
+            const filterButton = canvas.getByRole('button', { name: 'Filter mutations' });
+            await userEvent.click(filterButton);
+        });
+
+        await step('Verify scroll container is scrollable', () => {
+            const scrollContainer = canvas
+                .getByText('Filter by annotations')
+                .parentElement!.querySelector('.overflow-scroll')!;
+            void expect(scrollContainer).toBeInTheDocument();
+
+            // Verify the container has scrollable content
+            void expect(scrollContainer.scrollHeight).toBeGreaterThan(scrollContainer.clientHeight);
+        });
+
+        await step('Scroll to bottom and verify we can scroll', async () => {
+            const scrollContainer = canvas
+                .getByText('Filter by annotations')
+                .parentElement!.querySelector('.overflow-scroll')!;
+
+            const initialScrollTop = scrollContainer.scrollTop;
+
+            // Scroll to the bottom
+            scrollContainer.scrollTop = scrollContainer.scrollHeight;
+
+            await waitFor(async () => {
+                // Verify that scrollTop actually changed
+                await expect(scrollContainer.scrollTop).toBeGreaterThan(initialScrollTop);
+            });
+        });
+    },
+};

package/src/preact/components/mutations-over-time-mutations-filter.tsx

@@ -105,34 +105,36 @@ const AnnotationCheckboxes: FunctionComponent<MutationsOverTimeMutationsFilterPr
             <div className='divider mt-0.5 mb-0' />
             <div className='text-sm'>
                 <div className='font-bold mb-1'>Filter by annotations</div>
-                {mutationAnnotations.map((annotation, index) => (
-                    <li className='flex flex-row items-center' key={annotation.name}>
-                        <label>
-                            <input
-                                className={'mr-2'}
-                                type='checkbox'
-                                id={`item-${index}`}
-                                checked={value.annotationNameFilter.has(annotation.name)}
-                                onChange={() => {
-                                    setFilterValue((previousFilter) => {
-                                        const newAnnotationFilter = previousFilter.annotationNameFilter.has(
-                                            annotation.name,
-                                        )
-                                            ? [...previousFilter.annotationNameFilter].filter(
-                                                  (name) => name !== annotation.name,
-                                              )
-                                            : [...previousFilter.annotationNameFilter, annotation.name];
-                                        return {
-                                            ...previousFilter,
-                                            annotationNameFilter: new Set(newAnnotationFilter),
-                                        };
-                                    });
-                                }}
-                            />
-                            {annotation.name} (<span className='text-red-600'>{annotation.symbol}</span>)
-                        </label>
-                    </li>
-                ))}
+                <div className='max-h-72 overflow-scroll'>
+                    {mutationAnnotations.map((annotation, index) => (
+                        <li className='flex flex-row items-center' key={annotation.name}>
+                            <label>
+                                <input
+                                    className={'mr-2'}
+                                    type='checkbox'
+                                    id={`item-${index}`}
+                                    checked={value.annotationNameFilter.has(annotation.name)}
+                                    onChange={() => {
+                                        setFilterValue((previousFilter) => {
+                                            const newAnnotationFilter = previousFilter.annotationNameFilter.has(
+                                                annotation.name,
+                                            )
+                                                ? [...previousFilter.annotationNameFilter].filter(
+                                                      (name) => name !== annotation.name,
+                                                  )
+                                                : [...previousFilter.annotationNameFilter, annotation.name];
+                                            return {
+                                                ...previousFilter,
+                                                annotationNameFilter: new Set(newAnnotationFilter),
+                                            };
+                                        });
+                                    }}
+                                />
+                                {annotation.name} (<span className='text-red-600'>{annotation.symbol}</span>)
+                            </label>
+                        </li>
+                    ))}
+                </div>
             </div>
         </>
     );