@genspectrum/dashboard-components 1.8.1 → 1.9.0

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/query/queryMutationsOverTime.ts

@@ -295,17 +295,34 @@ async function queryMutationsOverTimeDataDirectEndpoint(
             responseMutations.map((mutation, i) => [
                 mutation.code,
                 new Map(
-                    allDates.map((date, j): [string, MutationOverTimeMutationValue] => [
-                        date.dateString,
-                        {
-                            type: 'value',
-                            // 'coverage' in the API resp. is the number of seqs. that have a non-ambiguous symbol at position
-                            // 'count' in the API resp. is the number of seqs with the mutation
-                            proportion: apiResult.data.data[i][j].count / apiResult.data.data[i][j].coverage,
-                            count: apiResult.data.data[i][j].count,
-                            totalCount: totalCounts[j],
-                        },
-                    ]),
+                    allDates.map((date, j): [string, MutationOverTimeMutationValue] => {
+                        if (totalCounts[j] === 0) {
+                            return [date.dateString, null];
+                        }
+                        // 'count' in the API resp. is the number of seqs with the mutation
+                        const count = apiResult.data.data[i][j].count;
+                        // 'coverage' in the API resp. is the number of seqs. that have a non-ambiguous symbol at position
+                        const coverage = apiResult.data.data[i][j].coverage;
+                        const totalCount = totalCounts[j];
+                        if (coverage === 0) {
+                            return [
+                                date.dateString,
+                                {
+                                    type: 'belowThreshold',
+                                    totalCount,
+                                },
+                            ];
+                        }
+                        return [
+                            date.dateString,
+                            {
+                                type: 'value',
+                                proportion: count / coverage,
+                                count,
+                                totalCount,
+                            },
+                        ];
+                    }),
                 ),
             ]),
         ),

package/src/query/queryMutationsOverTimeNewEndpoint.spec.ts

@@ -290,12 +290,12 @@ describe('queryMutationsOverTimeNewEndpoint', () => {
         expect(mutationOverTimeData.getAsArray()).to.deep.equal([
             [
                 { type: 'value', proportion: 0.4, count: 4, totalCount: 11 },
-                { type: 'value', proportion: 0, count: 0, totalCount: 0 },
+                null,
                 { type: 'value', proportion: 0, count: 0, totalCount: 13 },
             ],
             [
                 { type: 'value', proportion: 0.1, count: 1, totalCount: 11 },
-                { type: 'value', proportion: 0, count: 0, totalCount: 0 },
+                null,
                 { type: 'value', proportion: 0.3, count: 3, totalCount: 13 },
             ],
         ]);
@@ -1013,8 +1013,8 @@ describe('queryMutationsOverTimeNewEndpoint', () => {
 
         expect(mutationOverTimeData.getAsArray()).to.deep.equal([
             [
-                { type: 'value', proportion: NaN, count: 0, totalCount: 11 },
-                { type: 'value', proportion: NaN, count: 0, totalCount: 12 },
+                { type: 'belowThreshold', totalCount: 11 },
+                { type: 'belowThreshold', totalCount: 12 },
             ],
             [
                 { type: 'value', proportion: 0.2, count: 2, totalCount: 11 },
@@ -1135,8 +1135,8 @@ describe('queryMutationsOverTimeNewEndpoint', () => {
 
         expect(mutationOverTimeData.getAsArray()).to.deep.equal([
             [
-                { type: 'value', proportion: NaN, count: 0, totalCount: 11 },
-                { type: 'value', proportion: NaN, count: 0, totalCount: 12 },
+                { type: 'belowThreshold', totalCount: 11 },
+                { type: 'belowThreshold', totalCount: 12 },
             ],
             [
                 { type: 'value', proportion: 0.2, count: 2, totalCount: 11 },

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,