@genspectrum/dashboard-components 1.8.1 → 1.9.0

package/dist/util.d.ts

@@ -1005,7 +1005,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -1013,7 +1013,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1021,7 +1021,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1029,7 +1029,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1037,7 +1037,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -1045,7 +1045,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1053,7 +1053,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -1061,7 +1061,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 +1069,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-statistics': StatisticsComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1077,7 +1077,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1085,7 +1085,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-statistics': StatisticsComponent;
     }
 }
 
@@ -1093,7 +1093,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1101,7 +1101,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
+        'gs-date-range-filter': DateRangeFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.dateRangeFilterChanged]: CustomEvent<Record<string, string>>;
+        [gsEventNames.dateRangeOptionChanged]: DateRangeOptionChangedEvent;
     }
 }
 
@@ -1109,7 +1113,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1117,11 +1121,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-filter': DateRangeFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        [gsEventNames.dateRangeFilterChanged]: CustomEvent<Record<string, string>>;
-        [gsEventNames.dateRangeOptionChanged]: DateRangeOptionChangedEvent;
+        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
     }
 }
 
@@ -1129,7 +1129,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "1.8.1",
+    "version": "1.9.0",
     "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/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/__mockData__/withGaps.ts

@@ -80,15 +80,6 @@ export const withGaps: MutationOverTimeMockData = {
                                 totalCount: 8236,
                             },
                         ],
-                        [
-                            '2024-04',
-                            {
-                                type: 'value',
-                                count: 0,
-                                proportion: NaN,
-                                totalCount: 0,
-                            },
-                        ],
                         [
                             '2024-05',
                             {
@@ -98,15 +89,6 @@ export const withGaps: MutationOverTimeMockData = {
                                 totalCount: 8799,
                             },
                         ],
-                        [
-                            '2024-06',
-                            {
-                                type: 'value',
-                                count: 0,
-                                proportion: NaN,
-                                totalCount: 0,
-                            },
-                        ],
                         [
                             '2024-07',
                             {
@@ -148,15 +130,6 @@ export const withGaps: MutationOverTimeMockData = {
                                 totalCount: 8236,
                             },
                         ],
-                        [
-                            '2024-04',
-                            {
-                                type: 'value',
-                                count: 0,
-                                proportion: NaN,
-                                totalCount: 0,
-                            },
-                        ],
                         [
                             '2024-05',
                             {
@@ -166,15 +139,6 @@ export const withGaps: MutationOverTimeMockData = {
                                 totalCount: 8799,
                             },
                         ],
-                        [
-                            '2024-06',
-                            {
-                                type: 'value',
-                                count: 0,
-                                proportion: NaN,
-                                totalCount: 0,
-                            },
-                        ],
                         [
                             '2024-07',
                             {
@@ -212,15 +176,6 @@ export const withGaps: MutationOverTimeMockData = {
                                 totalCount: 8236,
                             },
                         ],
-                        [
-                            '2024-04',
-                            {
-                                type: 'value',
-                                count: 0,
-                                proportion: NaN,
-                                totalCount: 0,
-                            },
-                        ],
                         [
                             '2024-05',
                             {
@@ -230,15 +185,6 @@ export const withGaps: MutationOverTimeMockData = {
                                 totalCount: 8799,
                             },
                         ],
-                        [
-                            '2024-06',
-                            {
-                                type: 'value',
-                                count: 0,
-                                proportion: NaN,
-                                totalCount: 0,
-                            },
-                        ],
                         [
                             '2024-07',
                             {

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>

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

@@ -9,7 +9,8 @@ import { type Deletion, type Substitution } from '../../utils/mutations';
 import { type Temporal } from '../../utils/temporalClass';
 import { AnnotatedMutation } from '../components/annotated-mutation';
 import { type ColorScale, getColorWithinScale, getTextColorForScale } from '../components/color-scale-selector';
-import Tooltip, { type TooltipPosition } from '../components/tooltip';
+import PortalTooltip from '../components/portal-tooltip';
+import { type TooltipPosition } from '../components/tooltip';
 import { formatProportion } from '../shared/table/formatProportion';
 import { type PageSizes, Pagination } from '../shared/tanstackTable/pagination';
 import { usePageSizeContext } from '../shared/tanstackTable/pagination-context';
@@ -21,11 +22,14 @@ import {
     usePreactTable,
 } from '../shared/tanstackTable/tanstackTable';
 
+const NON_BREAKING_SPACE = '\u00A0';
+
 export interface MutationsOverTimeGridProps {
     data: MutationOverTimeDataMap;
     colorScale: ColorScale;
     sequenceType: SequenceType;
     pageSizes: PageSizes;
+    tooltipPortalTarget: HTMLElement | null;
 }
 
 type RowType = { mutation: Substitution | Deletion; values: (MutationOverTimeMutationValue | undefined)[] };
@@ -35,6 +39,7 @@ const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
     colorScale,
     sequenceType,
     pageSizes,
+    tooltipPortalTarget,
 }) => {
     const tableData = useMemo(() => {
         const allMutations = data.getFirstAxisKeys();
@@ -89,6 +94,7 @@ const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
                                     numberOfColumns,
                                 )}
                                 colorScale={colorScale}
+                                tooltipPortalTarget={tooltipPortalTarget}
                             />
                         </div>
                     );
@@ -97,7 +103,7 @@ const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
         });
 
         return [mutationHeader, ...dateHeaders];
-    }, [colorScale, data, sequenceType]);
+    }, [colorScale, data, sequenceType, tooltipPortalTarget]);
 
     const { pageSize } = usePageSizeContext();
     const table = usePreactTable({
@@ -163,10 +169,10 @@ function styleGridHeader(columnIndex: number, numDateColumns: number) {
     return { className: 'invisible @[6rem]:visible' };
 }
 
-function getTooltipPosition(rowIndex: number, rows: number, columnIndex: number, columns: number) {
+function getTooltipPosition(rowIndex: number, rows: number, columnIndex: number, columns: number): TooltipPosition {
     const tooltipX = rowIndex < rows / 2 || rowIndex < 6 ? 'bottom' : 'top';
     const tooltipY = columnIndex < columns / 2 ? 'start' : 'end';
-    return `${tooltipX}-${tooltipY}` as const;
+    return `${tooltipX}-${tooltipY}`;
 }
 
 const ProportionCell: FunctionComponent<{
@@ -175,14 +181,16 @@ const ProportionCell: FunctionComponent<{
     mutation: Substitution | Deletion;
     tooltipPosition: TooltipPosition;
     colorScale: ColorScale;
-}> = ({ value, mutation, date, tooltipPosition, colorScale }) => {
-    const proportion = value?.type === 'belowThreshold' ? 0 : value?.proportion;
+    tooltipPortalTarget: HTMLElement | null;
+}> = ({ value, mutation, date, tooltipPosition, colorScale, tooltipPortalTarget }) => {
+    const proportion = value?.type === 'belowThreshold' ? undefined : value?.proportion;
 
     return (
         <div className={'py-1 w-full h-full'}>
-            <Tooltip
+            <PortalTooltip
                 content={<MutationsOverTimeGridTooltip mutation={mutation} date={date} value={value} />}
                 position={tooltipPosition}
+                portalTarget={tooltipPortalTarget}
             >
                 <div
                     style={{
@@ -194,10 +202,12 @@ const ProportionCell: FunctionComponent<{
                     {value === null ? (
                         <span className='invisible'>No data</span>
                     ) : (
-                        <span className='invisible @[2rem]:visible'>{formatProportion(proportion ?? 0, 0)}</span>
+                        <span className='invisible @[2rem]:visible'>
+                            {proportion !== undefined ? formatProportion(proportion, 0) : NON_BREAKING_SPACE}
+                        </span>
                     )}
                 </div>
-            </Tooltip>
+            </PortalTooltip>
         </div>
     );
 };