@genspectrum/dashboard-components 0.12.0 → 0.13.0

package/dist/util.d.ts

@@ -160,7 +160,17 @@ declare const lapisFilterSchema: default_2.ZodIntersection<default_2.ZodRecord<d
     aminoAcidInsertions?: string[] | undefined;
 }>>;
 
-declare type LapisLocationFilter = Record<string, string | null | undefined>;
+declare type LapisLineageFilter = Record<string, string | undefined>;
+
+declare type LapisLocationFilter = default_2.infer<typeof lapisLocationFilterSchema>;
+
+declare const lapisLocationFilterSchema: default_2.ZodRecord<default_2.ZodString, default_2.ZodUnion<[default_2.ZodString, default_2.ZodUndefined]>>;
+
+declare type LapisTextFilter = Record<string, string | undefined>;
+
+export declare class LineageFilterChangedEvent extends CustomEvent<LapisLineageFilter> {
+    constructor(detail: LapisLineageFilter);
+}
 
 export declare class LocationChangedEvent extends CustomEvent<LapisLocationFilter> {
     constructor(detail: LapisLocationFilter);
@@ -772,6 +782,10 @@ export declare type TemporalGranularity = default_2.infer<typeof temporalGranula
 
 declare const temporalGranularitySchema: default_2.ZodUnion<[default_2.ZodLiteral<"day">, default_2.ZodLiteral<"week">, default_2.ZodLiteral<"month">, default_2.ZodLiteral<"year">]>;
 
+export declare class TextInputChangedEvent extends CustomEvent<LapisTextFilter> {
+    constructor(detail: LapisTextFilter);
+}
+
 export declare const views: {
     readonly table: "table";
     readonly venn: "venn";
@@ -824,10 +838,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-location-changed': LocationChangedEvent;
+        'gs-mutation-comparison-component': MutationComparisonComponent;
     }
 }
 
@@ -835,7 +846,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -843,11 +854,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-selector': DateRangeSelectorComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
-        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
+        'gs-mutations-component': MutationsComponent;
     }
 }
 
@@ -855,7 +862,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-selector': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -863,10 +870,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-input': TextInputComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-text-input-changed': CustomEvent<Record<string, string>>;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -874,7 +878,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -882,10 +886,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -893,7 +894,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -901,10 +902,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-lineage-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -912,7 +910,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -920,7 +918,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-comparison-component': MutationComparisonComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -928,7 +926,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -936,7 +934,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-component': MutationsComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -944,7 +942,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -952,7 +950,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -960,7 +958,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -968,7 +966,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-statistics': StatisticsComponent;
     }
 }
 
@@ -976,7 +974,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -984,7 +982,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-date-range-selector': DateRangeSelectorComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
     }
 }
 
@@ -992,7 +994,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-selector': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1000,7 +1002,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-location-filter': LocationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-location-changed': LocationChangedEvent;
     }
 }
 
@@ -1008,7 +1013,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1016,7 +1021,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-text-input': TextInputComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-text-input-changed': TextInputChangedEvent;
     }
 }
 
@@ -1024,7 +1032,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1032,7 +1040,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-mutation-filter': MutationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
     }
 }
 
@@ -1040,7 +1051,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1048,7 +1059,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-statistics': StatisticsComponent;
+        'gs-lineage-filter': LineageFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-lineage-filter-changed': LineageFilterChangedEvent;
     }
 }
 
@@ -1056,7 +1070,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/dist/util.js

@@ -1,7 +1,9 @@
-import { D, L, d, v } from "./LocationChangedEvent-CORvQvXv.js";
+import { D, a, L, T, d, v } from "./LineageFilterChangedEvent-GedKNGFI.js";
 export {
   D as DateRangeOptionChangedEvent,
+  a as LineageFilterChangedEvent,
   L as LocationChangedEvent,
+  T as TextInputChangedEvent,
   d as dateRangeOptionPresets,
   v as views
 };

package/package.json

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

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

@@ -0,0 +1,145 @@
+import { useCombobox } from 'downshift/preact';
+import { type ComponentChild } from 'preact';
+import { useRef, useState } from 'preact/hooks';
+
+export function DownshiftCombobox<Item>({
+    allItems,
+    value,
+    filterItemsByInputValue,
+    createEvent,
+    itemToString,
+    placeholderText,
+    formatItemInList,
+}: {
+    allItems: Item[];
+    value?: Item;
+    filterItemsByInputValue: (item: Item, value: string) => boolean;
+    createEvent: (item: Item | null) => CustomEvent;
+    itemToString: (item: Item | undefined | null) => string;
+    placeholderText?: string;
+    formatItemInList: (item: Item) => ComponentChild;
+}) {
+    const initialSelectedItem = value ?? null;
+
+    const [items, setItems] = useState(
+        allItems.filter((item) => filterItemsByInputValue(item, itemToString(initialSelectedItem))),
+    );
+    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) => filterItemsByInputValue(item, inputValue)));
+        },
+        onSelectedItemChange({ selectedItem }) {
+            if (selectedItem !== null) {
+                divRef.current?.dispatchEvent(createEvent(selectedItem));
+            }
+        },
+        items,
+        itemToString(item) {
+            return itemToString(item);
+        },
+        initialSelectedItem,
+        environment,
+    });
+
+    const onInputBlur = () => {
+        if (inputValue === '') {
+            divRef.current?.dispatchEvent(createEvent(null));
+            selectItem(null);
+        } else if (inputValue !== itemToString(selectedItem)) {
+            setInputValue(itemToString(selectedItem) || '');
+        }
+    };
+
+    const clearInput = () => {
+        divRef.current?.dispatchEvent(createEvent(null));
+        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>
+            {isOpen && (
+                <ul
+                    className='absolute bg-white mt-1 shadow-md max-h-80 overflow-scroll z-10 w-full min-w-32'
+                    {...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-sm flex flex-col`}
+                                key={itemToString(item)}
+                                {...getItemProps({ item, index })}
+                            >
+                                {formatItemInList(item)}
+                            </li>
+                        ))
+                    ) : (
+                        <li className='py-2 px-3 shadow-sm flex flex-col'>No elements to select.</li>
+                    )}
+                </ul>
+            )}
+        </div>
+    );
+}

package/src/preact/lineageFilter/LineageFilterChangedEvent.ts

@@ -0,0 +1,11 @@
+type LapisLineageFilter = Record<string, string | undefined>;
+
+export class LineageFilterChangedEvent extends CustomEvent<LapisLineageFilter> {
+    constructor(detail: LapisLineageFilter) {
+        super('gs-lineage-filter-changed', {
+            detail,
+            bubbles: true,
+            composed: true,
+        });
+    }
+}

package/src/preact/lineageFilter/fetchLineageAutocompleteList.spec.ts

@@ -5,9 +5,23 @@ import { DUMMY_LAPIS_URL, lapisRequestMocks } from '../../../vitest.setup';
 
 describe('fetchLineageAutocompleteList', () => {
     test('should add sublineage values', async () => {
-        lapisRequestMocks.aggregated({ fields: ['lineageField'] }, { data: [{ lineageField: 'B.1.1.7', count: 1 }] });
+        lapisRequestMocks.aggregated(
+            { fields: ['lineageField'], country: 'Germany' },
+            {
+                data: [
+                    {
+                        lineageField: 'B.1.1.7',
+                        count: 1,
+                    },
+                ],
+            },
+        );
 
-        const result = await fetchLineageAutocompleteList(DUMMY_LAPIS_URL, 'lineageField');
+        const result = await fetchLineageAutocompleteList({
+            lapis: DUMMY_LAPIS_URL,
+            field: 'lineageField',
+            lapisFilter: { country: 'Germany' },
+        });
 
         expect(result).to.deep.equal(['B.1.1.7', 'B.1.1.7*']);
     });

package/src/preact/lineageFilter/fetchLineageAutocompleteList.ts

@@ -1,7 +1,18 @@
 import { FetchAggregatedOperator } from '../../operator/FetchAggregatedOperator';
+import type { LapisFilter } from '../../types';
 
-export async function fetchLineageAutocompleteList(lapis: string, field: string, signal?: AbortSignal) {
-    const fetchAggregatedOperator = new FetchAggregatedOperator<Record<string, string>>({}, [field]);
+export async function fetchLineageAutocompleteList({
+    lapis,
+    field,
+    signal,
+    lapisFilter,
+}: {
+    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;
 

package/src/preact/lineageFilter/lineage-filter.stories.tsx

@@ -1,4 +1,6 @@
-import { type Meta, type StoryObj } from '@storybook/preact';
+import { type Meta, type PreactRenderer, type StoryObj } from '@storybook/preact';
+import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
+import type { StepFunction } from '@storybook/types';
 
 import { LineageFilter, type LineageFilterProps } from './lineage-filter';
 import { previewHandles } from '../../../.storybook/preview';
@@ -22,6 +24,7 @@ const meta: Meta = {
                         url: AGGREGATED_ENDPOINT,
                         body: {
                             fields: ['pangoLineage'],
+                            country: 'Germany',
                         },
                     },
                     response: {
@@ -32,10 +35,41 @@ const meta: Meta = {
             ],
         },
     },
+    argTypes: {
+        lapisField: {
+            control: {
+                type: 'text',
+            },
+        },
+        placeholderText: {
+            control: {
+                type: 'text',
+            },
+        },
+        value: {
+            control: {
+                type: 'text',
+            },
+        },
+        width: {
+            control: {
+                type: 'text',
+            },
+        },
+        lapisFilter: {
+            control: {
+                type: 'object',
+            },
+        },
+    },
+
     args: {
         lapisField: 'pangoLineage',
-        placeholderText: 'Enter lineage',
-        initialValue: '',
+        lapisFilter: {
+            country: 'Germany',
+        },
+        placeholderText: 'Enter a lineage',
+        value: 'A.1',
         width: '100%',
     },
 };
@@ -45,14 +79,62 @@ export default meta;
 export const Default: StoryObj<LineageFilterProps> = {
     render: (args) => (
         <LapisUrlContext.Provider value={LAPIS_URL}>
-            <LineageFilter
-                lapisField={args.lapisField}
-                placeholderText={args.placeholderText}
-                initialValue={args.initialValue}
-                width={args.width}
-            />
+            <LineageFilter {...args} />
         </LapisUrlContext.Provider>
     ),
+    play: async ({ canvasElement, step }) => {
+        const { canvas, lineageChangedListenerMock } = await prepare(canvasElement, step);
+
+        step('change lineage filter value fires event', async () => {
+            const input = await inputField(canvas);
+            await userEvent.clear(input);
+            await userEvent.type(input, 'B.1');
+            await userEvent.click(canvas.getByRole('option', { name: 'B.1' }));
+
+            await waitFor(() => {
+                return expect(lineageChangedListenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({
+                    pangoLineage: 'B.1',
+                });
+            });
+        });
+    },
+};
+
+export const ClearSelection: StoryObj<LineageFilterProps> = {
+    ...Default,
+    play: async ({ canvasElement, step }) => {
+        const { canvas, lineageChangedListenerMock } = await prepare(canvasElement, step);
+
+        step('clear selection fires event with empty filter', async () => {
+            const clearSelectionButton = await canvas.findByLabelText('clear selection');
+            await userEvent.click(clearSelectionButton);
+
+            await waitFor(() => {
+                return expect(lineageChangedListenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({
+                    pangoLineage: undefined,
+                });
+            });
+        });
+    },
+};
+
+export const OnBlurInput: StoryObj<LineageFilterProps> = {
+    ...Default,
+    play: async ({ canvasElement, step }) => {
+        const { canvas, lineageChangedListenerMock } = await prepare(canvasElement, step);
+
+        step('after cleared selection by hand and then blur fires event with empty filter', async () => {
+            const input = await inputField(canvas);
+            await userEvent.clear(input);
+            await userEvent.click(canvas.getByLabelText('toggle menu'));
+
+            await waitFor(() => {
+                return expect(lineageChangedListenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({
+                    pangoLineage: undefined,
+                });
+            });
+        });
+    },
 };
 
 export const WithNoLapisField: StoryObj<LineageFilterProps> = {
@@ -67,3 +149,22 @@ export const WithNoLapisField: StoryObj<LineageFilterProps> = {
         });
     },
 };
+
+async function prepare(canvasElement: HTMLElement, step: StepFunction<PreactRenderer, unknown>) {
+    const canvas = within(canvasElement);
+
+    const lineageChangedListenerMock = fn();
+    step('Setup event listener mock', () => {
+        canvasElement.addEventListener('gs-lineage-filter-changed', lineageChangedListenerMock);
+    });
+
+    step('location filter is rendered with value', async () => {
+        await waitFor(async () => {
+            return expect(await inputField(canvas)).toHaveValue('A.1');
+        });
+    });
+
+    return { canvas, lineageChangedListenerMock };
+}
+
+const inputField = (canvas: ReturnType<typeof within>) => canvas.findByPlaceholderText('Enter a lineage');