@genspectrum/dashboard-components 1.8.2 → 1.9.1

package/dist/util.d.ts

@@ -939,6 +939,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 global {
     interface HTMLElementTagNameMap {
         'gs-genome-data-viewer': GenomeDataViewerComponent;
@@ -1037,7 +1053,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1045,7 +1061,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1053,7 +1069,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1061,7 +1077,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1101,7 +1117,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
+        'gs-location-filter': LocationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.locationChanged]: LocationChangedEvent;
     }
 }
 
@@ -1109,7 +1128,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1135,25 +1154,6 @@ declare global {
 }
 
 
-declare global {
-    interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        [gsEventNames.locationChanged]: LocationChangedEvent;
-    }
-}
-
-
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
-        }
-    }
-}
-
-
 declare global {
     interface HTMLElementTagNameMap {
         'gs-text-filter': TextFilterComponent;

package/package.json

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

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

@@ -64,6 +64,7 @@ export function DownshiftCombobox<Item>({
         getItemProps,
         inputValue,
         closeMenu,
+        reset,
     } = useCombobox({
         onInputValueChange({ inputValue }) {
             setInputIsInvalid(false);
@@ -97,7 +98,7 @@ export function DownshiftCombobox<Item>({
     };
 
     const clearInput = () => {
-        selectItem(null);
+        reset();
     };
 
     const buttonRef = useRef(null);

package/src/preact/components/portal-tooltip.tsx

@@ -0,0 +1,129 @@
+import { type FunctionComponent } from 'preact';
+import { type CSSProperties, createPortal } from 'preact/compat';
+import { useState, useRef, useLayoutEffect } from 'preact/hooks';
+import { type JSXInternal } from 'preact/src/jsx';
+
+import { type TooltipPosition, TOOLTIP_BASE_STYLES } from './tooltip';
+
+export type PortalTooltipProps = {
+    content: string | JSXInternal.Element;
+    position?: TooltipPosition;
+    tooltipStyle?: CSSProperties;
+    portalTarget: HTMLElement | null;
+};
+
+/**
+ * A portal-based tooltip component that renders content in a specified DOM element.
+ *
+ * Unlike the regular `Tooltip` component, this uses Preact portals to render the tooltip
+ * at a specific location in the DOM with fixed positioning. This is useful when:
+ * - The tooltip needs to escape overflow constraints from parent containers
+ * - You need precise control over the tooltip's rendering location
+ * - Parent containers have `overflow: hidden` or other clipping styles
+ *
+ * **Important:** The `portalTarget` element should still be within the same shadow DOM as the
+ * component to ensure proper styling and encapsulation. Typically, this is a container element
+ * at the root of your component. Do not use `document.body`.
+ *
+ * @example
+ * ```tsx
+ * const portalTarget = document.getElementById('tooltip-root');
+ *
+ * <PortalTooltip
+ *   content="This is a portal tooltip"
+ *   position="top"
+ *   portalTarget={portalTarget}
+ * >
+ *   <button>Hover me</button>
+ * </PortalTooltip>
+ * ```
+ */
+const PortalTooltip: FunctionComponent<PortalTooltipProps> = ({
+    children,
+    content,
+    position = 'bottom',
+    tooltipStyle,
+    portalTarget,
+}) => {
+    const [isHovered, setIsHovered] = useState(false);
+    const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });
+    const triggerRef = useRef<HTMLDivElement>(null);
+    const tooltipRef = useRef<HTMLDivElement>(null);
+
+    useLayoutEffect(() => {
+        if (isHovered && triggerRef.current !== null && tooltipRef.current !== null) {
+            const triggerRect = triggerRef.current.getBoundingClientRect();
+            const tooltipRect = tooltipRef.current.getBoundingClientRect();
+            const newPosition = calculateTooltipPosition(triggerRect, tooltipRect, position);
+            setTooltipPosition(newPosition);
+        }
+    }, [isHovered, position]);
+
+    const tooltipContent = (
+        <div
+            ref={tooltipRef}
+            className={`fixed ${TOOLTIP_BASE_STYLES} ${isHovered ? 'visible' : 'invisible'}`}
+            style={Object.assign({}, tooltipStyle, { top: tooltipPosition.top, left: tooltipPosition.left })}
+        >
+            {content}
+        </div>
+    );
+
+    return (
+        <>
+            <div ref={triggerRef} onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
+                {children}
+            </div>
+            {portalTarget !== null && createPortal(tooltipContent, portalTarget)}
+        </>
+    );
+};
+
+export default PortalTooltip;
+
+function calculateTooltipPosition(
+    triggerRect: DOMRect,
+    tooltipRect: DOMRect,
+    position: TooltipPosition,
+): { top: number; left: number } {
+    const gap = 4;
+    let top;
+    let left;
+
+    switch (position) {
+        case 'top':
+            top = triggerRect.top - tooltipRect.height - gap;
+            left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+            break;
+        case 'top-start':
+            top = triggerRect.top - tooltipRect.height - gap;
+            left = triggerRect.left;
+            break;
+        case 'top-end':
+            top = triggerRect.top - tooltipRect.height - gap;
+            left = triggerRect.right - tooltipRect.width;
+            break;
+        case 'bottom':
+            top = triggerRect.bottom + gap;
+            left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+            break;
+        case 'bottom-start':
+            top = triggerRect.bottom + gap;
+            left = triggerRect.left;
+            break;
+        case 'bottom-end':
+            top = triggerRect.bottom + gap;
+            left = triggerRect.right - tooltipRect.width;
+            break;
+        case 'left':
+            top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
+            left = triggerRect.left - tooltipRect.width - gap;
+            break;
+        case 'right':
+            top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
+            left = triggerRect.right + gap;
+            break;
+    }
+
+    return { top, left };
+}

package/src/preact/components/tooltip.tsx

@@ -18,6 +18,38 @@ export type TooltipProps = {
     tooltipStyle?: CSSProperties;
 };
 
+export const TOOLTIP_BASE_STYLES = 'z-10 w-max bg-white p-4 border border-gray-200 rounded-md';
+
+/**
+ * A simple CSS-based tooltip component that displays content on hover.
+ *
+ * **Note:** If you need the tooltip to escape overflow constraints or render at a specific
+ * location in the DOM (e.g., to avoid clipping by parent containers with `overflow: hidden`),
+ * use `PortalTooltip` instead.
+ *
+ * @example
+ * ```tsx
+ * <Tooltip content="This is a tooltip" position="top">
+ *   <button>Hover me</button>
+ * </Tooltip>
+ * ```
+ */
+const Tooltip: FunctionComponent<TooltipProps> = ({ children, content, position = 'bottom', tooltipStyle }) => {
+    return (
+        <div className={`relative group`}>
+            <div>{children}</div>
+            <div
+                className={`absolute ${TOOLTIP_BASE_STYLES} invisible group-hover:visible ${getPositionCss(position)}`}
+                style={tooltipStyle}
+            >
+                {content}
+            </div>
+        </div>
+    );
+};
+
+export default Tooltip;
+
 function getPositionCss(position?: TooltipPosition) {
     switch (position) {
         case 'top':
@@ -40,19 +72,3 @@ function getPositionCss(position?: TooltipPosition) {
             return '';
     }
 }
-
-const Tooltip: FunctionComponent<TooltipProps> = ({ children, content, position = 'bottom', tooltipStyle }) => {
-    return (
-        <div className={`relative group`}>
-            <div>{children}</div>
-            <div
-                className={`absolute z-10 w-max bg-white p-4 border border-gray-200 rounded-md invisible group-hover:visible ${getPositionCss(position)}`}
-                style={tooltipStyle}
-            >
-                {content}
-            </div>
-        </div>
-    );
-};
-
-export default Tooltip;

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

@@ -321,4 +321,76 @@ describe('fetchLineageAutocompleteList', () => {
             },
         ]);
     });
+
+    test('should include prefix aliases that are missing from lineage tree', async () => {
+        lapisRequestMocks.aggregated(
+            { fields: [lineageField], ...lapisFilter },
+            {
+                data: [
+                    {
+                        [lineageField]: 'BA.3.2.1',
+                        count: 1,
+                    },
+                    {
+                        [lineageField]: 'BA.3.2.2',
+                        count: 2,
+                    },
+                ],
+            },
+        );
+
+        lapisRequestMocks.lineageDefinition(
+            {
+                'B.1.1.529.3.2': {
+                    aliases: ['BA.3.2'],
+                },
+                'BA.3.2.1': {
+                    parents: ['B.1.1.529.3.2'],
+                    aliases: ['B.1.1.529.3.2.1'],
+                },
+                'BA.3.2.2': {
+                    parents: ['B.1.1.529.3.2'],
+                    aliases: ['B.1.1.529.3.2.2'],
+                },
+            },
+            lineageField,
+        );
+
+        const result = await fetchLineageAutocompleteList({
+            lapisUrl: DUMMY_LAPIS_URL,
+            lapisField: lineageField,
+            lapisFilter,
+        });
+
+        expect(result).to.deep.equal([
+            {
+                lineage: 'B.1.1.529.3.2',
+                count: 0,
+            },
+            {
+                lineage: 'B.1.1.529.3.2*',
+                count: 3,
+            },
+            {
+                lineage: 'BA.3.2*',
+                count: 3, // Same as B.1.1.529.3.2* (includes .3.2 and .3.2.1)
+            },
+            {
+                lineage: 'BA.3.2.1',
+                count: 1,
+            },
+            {
+                lineage: 'BA.3.2.1*',
+                count: 1,
+            },
+            {
+                lineage: 'BA.3.2.2',
+                count: 2,
+            },
+            {
+                lineage: 'BA.3.2.2*',
+                count: 2,
+            },
+        ]);
+    });
 });

package/src/preact/lineageFilter/fetchLineageAutocompleteList.ts

@@ -2,6 +2,10 @@ import { fetchLineageDefinition } from '../../lapisApi/lapisApi';
 import { FetchAggregatedOperator } from '../../operator/FetchAggregatedOperator';
 import type { LapisFilter } from '../../types';
 
+/**
+ * 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*").
+ */
 export async function fetchLineageAutocompleteList({
     lapisUrl,
     lapisField,
@@ -13,31 +17,43 @@ export async function fetchLineageAutocompleteList({
     lapisFilter?: LapisFilter;
     signal?: AbortSignal;
 }): Promise<LineageItem[]> {
-    const [countsByLineage, lineageTree] = await Promise.all([
+    const [countsByLineage, { lineageTree, aliasMapping }] = await Promise.all([
         getCountsByLineage({
             lapisUrl,
             lapisField,
             lapisFilter,
             signal,
         }),
-        getLineageTree({ lapisUrl, lapisField, signal }),
+        getLineageTreeAndAliases({ lapisUrl, lapisField, signal }),
     ]);
 
-    return Array.from(lineageTree.keys())
-        .sort((a, b) => a.localeCompare(b))
-        .map((lineage) => {
-            return [
-                {
-                    lineage,
-                    count: countsByLineage.get(lineage) ?? 0,
-                },
-                {
-                    lineage: `${lineage}*`,
-                    count: getCountsIncludingSublineages(lineage, lineageTree, countsByLineage),
-                },
-            ];
-        })
-        .flat();
+    const prefixToLineage = findMissingPrefixMappings(lineageTree, aliasMapping);
+
+    // Combine actual lineages with their wildcard versions
+    const actualLineageItems = Array.from(lineageTree.keys()).flatMap((lineage) => [
+        {
+            lineage,
+            count: countsByLineage.get(lineage) ?? 0,
+        },
+        {
+            lineage: `${lineage}*`,
+            count: getCountsIncludingSublineages(lineage, lineageTree, countsByLineage),
+        },
+    ]);
+
+    // Add prefix alias items with wildcard and their counts
+    const prefixAliasItems = Array.from(prefixToLineage.entries()).map(([prefix, actualLineage]) => ({
+        lineage: `${prefix}*`,
+        count: getCountsIncludingSublineages(actualLineage, lineageTree, countsByLineage),
+    }));
+
+    // Combine and sort all items (asterisk before period for same prefix)
+    return [...actualLineageItems, ...prefixAliasItems].sort((a, b) => {
+        // Replace * with a character that sorts before . in ASCII
+        const aKey = a.lineage.replace(/\*/g, ' ');
+        const bKey = b.lineage.replace(/\*/g, ' ');
+        return aKey.localeCompare(bKey);
+    });
 }
 
 export type LineageItem = { lineage: string; count: number };
@@ -61,7 +77,7 @@ async function getCountsByLineage({
     return new Map<string, number>(countsByLineageArray.map((value) => [value[lapisField], value.count]));
 }
 
-async function getLineageTree({
+async function getLineageTreeAndAliases({
     lapisUrl,
     lapisField,
     signal,
@@ -73,12 +89,17 @@ async function getLineageTree({
     const lineageDefinitions = await fetchLineageDefinition({ lapisUrl, lapisField, signal });
 
     const lineageTree = new Map<string, { children: string[] }>();
+    const aliasMapping = new Map<string, string[]>();
 
     Object.entries(lineageDefinitions).forEach(([lineage, definition]) => {
         if (!lineageTree.has(lineage)) {
             lineageTree.set(lineage, { children: [] });
         }
 
+        if (definition.aliases && definition.aliases.length > 0) {
+            aliasMapping.set(lineage, definition.aliases);
+        }
+
         definition.parents?.forEach((parent) => {
             const parentChildren = lineageTree.get(parent)?.children;
 
@@ -88,7 +109,7 @@ async function getLineageTree({
         });
     });
 
-    return lineageTree;
+    return { lineageTree, aliasMapping };
 }
 
 function getCountsIncludingSublineages(
@@ -115,3 +136,44 @@ function getAllDescendants(lineage: string, lineageTree: Map<string, { children:
 
     return new Set([...children, ...childrenOfChildren.flatMap((child) => Array.from(child))]);
 }
+
+/**
+ * This function finds prefixes (i.e. "BA.3.2" for "BA.3.2.1") that are not in the lineageTree,
+ * but do appear as an alias. It returns a reverse mapping for those prefixes, back to a lineage
+ * that can be found in the lineageTree (i.e. "BA.3.2" -> "B.1.1.529.3.2").
+ */
+function findMissingPrefixMappings(
+    lineageTree: Map<string, { children: string[] }>,
+    aliasMapping: Map<string, string[]>,
+): Map<string, string> {
+    const lineages = Array.from(lineageTree.keys());
+    const lineagesSet = new Set(lineages);
+
+    // Generate all prefixes for each lineage (e.g., "A.B.1" -> ["A", "A.B", "A.B.1"])
+    const allPrefixes = lineages.flatMap((lineage) => {
+        const parts = lineage.split('.');
+        return parts.map((_, i) => parts.slice(0, i + 1).join('.'));
+    });
+
+    // Find prefixes that are NOT in the actual lineages list
+    const missingPrefixes = new Set(allPrefixes.filter((prefix) => !lineagesSet.has(prefix)));
+
+    // Create reverse alias mapping: alias -> original lineage
+    const reverseAliasMapping = new Map<string, string>();
+    aliasMapping.forEach((aliases, lineage) => {
+        aliases.forEach((alias) => {
+            reverseAliasMapping.set(alias, lineage);
+        });
+    });
+
+    // Map missing prefixes to their actual lineage names via reverse alias lookup
+    const prefixToLineage = new Map<string, string>();
+    missingPrefixes.forEach((prefix) => {
+        const actualLineage = reverseAliasMapping.get(prefix);
+        if (actualLineage) {
+            prefixToLineage.set(prefix, actualLineage);
+        }
+    });
+
+    return prefixToLineage;
+}

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

@@ -108,7 +108,7 @@ export const Default: StoryObj<LineageFilterProps> = {
             const input = await inputField(canvas);
             await userEvent.clear(input);
             await userEvent.type(input, 'B.1');
-            await userEvent.click(canvas.getByRole('option', { name: 'B.1(53802)' }));
+            await userEvent.click(canvas.getByRole('option', { name: 'B.1(53,802)' }));
 
             await waitFor(() => {
                 return expect(lineageChangedListenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({
@@ -187,6 +187,62 @@ export const WithHideCountsTrue: StoryObj<LineageFilterProps> = {
     },
 };
 
+export const EnterAndClearMultipleTimes: StoryObj<LineageFilterProps> = {
+    ...Default,
+    play: async ({ canvasElement, step }) => {
+        const { canvas, lineageChangedListenerMock } = await prepare(canvasElement, step);
+        const input = await inputField(canvas);
+        const inputContainer = canvas.getByRole('combobox').parentElement;
+        const clearSelectionButton = await canvas.findByLabelText('clear selection');
+
+        await step('clear field initially', async () => {
+            await userEvent.clear(input);
+        });
+
+        await step('enter F in the input field', async () => {
+            await userEvent.type(input, 'F');
+        });
+
+        await step('clear selection using clear button', async () => {
+            await userEvent.click(clearSelectionButton);
+
+            await waitFor(() => {
+                return expect(lineageChangedListenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({
+                    pangoLineage: undefined,
+                });
+            });
+        });
+
+        await step('verify input field is empty after clearing', async () => {
+            await expect(input).toHaveValue('');
+        });
+
+        await step('verify no red border after clearing', async () => {
+            await expect(inputContainer).not.toHaveClass('input-error');
+        });
+
+        // do it again
+
+        await step('enter F in the input field again', async () => {
+            await userEvent.type(input, 'F');
+        });
+
+        await step('clear selection using clear button again', async () => {
+            await userEvent.click(clearSelectionButton);
+
+            await waitFor(() => {
+                return expect(lineageChangedListenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({
+                    pangoLineage: undefined,
+                });
+            });
+        });
+
+        await step('verify input field is empty after clearing again', async () => {
+            await expect(input).toHaveValue('');
+        });
+    },
+};
+
 async function prepare(canvasElement: HTMLElement, step: StepFunction<PreactRenderer, unknown>) {
     const canvas = within(canvasElement);
 

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

@@ -99,7 +99,7 @@ const LineageSelector = ({
             formatItemInList={(item: LineageItem) => (
                 <p>
                     <span>{item.lineage}</span>
-                    {!hideCounts && <span className='ml-2 text-gray-500'>({item.count})</span>}
+                    {!hideCounts && <span className='ml-2 text-gray-500'>({item.count.toLocaleString('en-US')})</span>}
                 </p>
             )}
         />

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

@@ -112,7 +112,9 @@ const LocationSelector = ({
                 <>
                     <p>
                         <span>{item.label}</span>
-                        {!hideCounts && <span className='ml-2 text-gray-500'>({item.count})</span>}
+                        {!hideCounts && (
+                            <span className='ml-2 text-gray-500'>({item.count.toLocaleString('en-US')})</span>
+                        )}
                     </p>
                     <span className='text-sm text-gray-500'>{item.description}</span>
                 </>

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

@@ -22,7 +22,7 @@ export const MutationsOverTimeGridTooltip: FunctionComponent<MutationsOverTimeGr
     const dateClass = toTemporalClass(date);
 
     return (
-        <div>
+        <div className='text-center'>
             <p>
                 <span className='font-bold'>{dateClass.englishName()}</span>
             </p>