@genspectrum/dashboard-components 1.8.2 → 1.9.1

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';
@@ -28,6 +29,7 @@ export interface MutationsOverTimeGridProps {
     colorScale: ColorScale;
     sequenceType: SequenceType;
     pageSizes: PageSizes;
+    tooltipPortalTarget: HTMLElement | null;
 }
 
 type RowType = { mutation: Substitution | Deletion; values: (MutationOverTimeMutationValue | undefined)[] };
@@ -37,6 +39,7 @@ const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
     colorScale,
     sequenceType,
     pageSizes,
+    tooltipPortalTarget,
 }) => {
     const tableData = useMemo(() => {
         const allMutations = data.getFirstAxisKeys();
@@ -91,6 +94,7 @@ const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
                                     numberOfColumns,
                                 )}
                                 colorScale={colorScale}
+                                tooltipPortalTarget={tooltipPortalTarget}
                             />
                         </div>
                     );
@@ -99,7 +103,7 @@ const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
         });
 
         return [mutationHeader, ...dateHeaders];
-    }, [colorScale, data, sequenceType]);
+    }, [colorScale, data, sequenceType, tooltipPortalTarget]);
 
     const { pageSize } = usePageSizeContext();
     const table = usePreactTable({
@@ -165,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<{
@@ -177,14 +181,16 @@ const ProportionCell: FunctionComponent<{
     mutation: Substitution | Deletion;
     tooltipPosition: TooltipPosition;
     colorScale: ColorScale;
-}> = ({ value, mutation, date, tooltipPosition, colorScale }) => {
+    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={{
@@ -201,7 +207,7 @@ const ProportionCell: FunctionComponent<{
                         </span>
                     )}
                 </div>
-            </Tooltip>
+            </PortalTooltip>
         </div>
     );
 };

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

@@ -1,5 +1,5 @@
 import { type FunctionComponent } from 'preact';
-import { type Dispatch, type StateUpdater, useMemo, useState, useEffect } from 'preact/hooks';
+import { type Dispatch, type StateUpdater, useMemo, useState, useEffect, useLayoutEffect, useRef } from 'preact/hooks';
 import z from 'zod';
 
 // @ts-expect-error -- uses subpath imports and vite worker import
@@ -142,6 +142,12 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
     overallMutationData,
 }) => {
     const tabsRef = useDispatchFinishedLoadingEvent();
+    const tooltipPortalTargetRef = useRef<HTMLDivElement>(null);
+    const [tooltipPortalTarget, setTooltipPortalTarget] = useState<HTMLDivElement | null>(null);
+
+    useLayoutEffect(() => {
+        setTooltipPortalTarget(tooltipPortalTargetRef.current);
+    }, []);
 
     const [mutationFilterValue, setMutationFilterValue] = useState<MutationFilter>({
         textFilter: '',
@@ -198,6 +204,7 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
                             colorScale={colorScale}
                             sequenceType={originalComponentProps.sequenceType}
                             pageSizes={originalComponentProps.pageSizes}
+                            tooltipPortalTarget={tooltipPortalTarget}
                         />
                     ),
                 };
@@ -227,9 +234,11 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
     );
 
     return (
-        <PageSizeContextProvider pageSizes={originalComponentProps.pageSizes}>
-            <Tabs ref={tabsRef} tabs={tabs} toolbar={toolbar} />
-        </PageSizeContextProvider>
+        <div ref={tooltipPortalTargetRef}>
+            <PageSizeContextProvider pageSizes={originalComponentProps.pageSizes}>
+                <Tabs ref={tabsRef} tabs={tabs} toolbar={toolbar} />
+            </PageSizeContextProvider>
+        </div>
     );
 };
 

package/src/preact/textFilter/text-filter.tsx

@@ -100,7 +100,9 @@ const TextSelector = ({
                 return (
                     <p>
                         <span>{item.value}</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/wastewater/mutationsOverTime/wastewater-mutations-over-time.tsx

@@ -1,5 +1,5 @@
 import { type FunctionComponent } from 'preact';
-import { type Dispatch, type StateUpdater, useMemo, useState } from 'preact/hooks';
+import { type Dispatch, type StateUpdater, useMemo, useState, useRef } from 'preact/hooks';
 import z from 'zod';
 
 import { computeWastewaterMutationsOverTimeDataPerLocation } from './computeWastewaterMutationsOverTimeDataPerLocation';
@@ -150,6 +150,7 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
     originalComponentProps,
 }) => {
     const tabsRef = useDispatchFinishedLoadingEvent();
+    const tooltipPortalTargetRef = useRef<HTMLDivElement>(null);
 
     const [mutationFilterValue, setMutationFilterValue] = useState<MutationFilter>({
         textFilter: '',
@@ -176,6 +177,7 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
                         colorScale={colorScale}
                         pageSizes={originalComponentProps.pageSizes}
                         sequenceType={originalComponentProps.sequenceType}
+                        tooltipPortalTarget={tooltipPortalTargetRef.current}
                     />
                 ),
             })),
@@ -204,9 +206,11 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
     );
 
     return (
-        <PageSizeContextProvider pageSizes={originalComponentProps.pageSizes}>
-            <Tabs ref={tabsRef} tabs={tabs} toolbar={toolbar} />
-        </PageSizeContextProvider>
+        <div ref={tooltipPortalTargetRef}>
+            <PageSizeContextProvider pageSizes={originalComponentProps.pageSizes}>
+                <Tabs ref={tabsRef} tabs={tabs} toolbar={toolbar} />
+            </PageSizeContextProvider>
+        </div>
     );
 };
 

package/src/web-components/input/gs-lineage-filter.stories.ts

@@ -229,7 +229,7 @@ export const FiresEvent: StoryObj<Required<LineageFilterProps>> = {
 
         await step('Enter a valid lineage value', async () => {
             await userEvent.type(inputField(), 'B.1.1.7*');
-            await userEvent.click(canvas.getByRole('option', { name: 'B.1.1.7*(677146)' }));
+            await userEvent.click(canvas.getByRole('option', { name: 'B.1.1.7*(677,146)' }));
 
             await waitFor(() => {
                 return expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({

package/src/web-components/input/gs-text-filter.stories.ts

@@ -162,7 +162,7 @@ export const FiresEvents: StoryObj<Required<TextFilterProps>> = {
         await step('Remove initial value', async () => {
             await userEvent.click(canvas.getByRole('button', { name: 'clear selection' }));
 
-            await expect(listenerMock).toHaveBeenLastCalledWith(
+            await expect(listenerMock).toHaveBeenCalledWith(
                 expect.objectContaining({
                     detail: {
                         host: undefined,