@genspectrum/dashboard-components 1.13.0 → 1.14.0

package/src/preact/queriesOverTime/queries-over-time-grid-tooltip.stories.tsx

@@ -0,0 +1,134 @@
+import { type Meta, type StoryObj } from '@storybook/preact';
+import { expect, within } from '@storybook/test';
+
+import { QueriesOverTimeGridTooltip, type QueriesOverTimeGridTooltipProps } from './queries-over-time-grid-tooltip';
+
+const meta: Meta<QueriesOverTimeGridTooltipProps> = {
+    title: 'Component/Queries over time grid tooltip',
+    component: QueriesOverTimeGridTooltip,
+    argTypes: {
+        query: { control: 'text' },
+        date: { control: 'object' },
+        value: { control: 'object' },
+    },
+    parameters: {
+        fetchMock: {},
+    },
+};
+
+export default meta;
+
+const Template: StoryObj<QueriesOverTimeGridTooltipProps> = {
+    render: (args: QueriesOverTimeGridTooltipProps) => <QueriesOverTimeGridTooltip {...args} />,
+    args: {
+        query: 'BA.1 Lineage',
+        date: {
+            type: 'Year',
+            year: 2025,
+            dateString: '2025',
+        },
+        value: null,
+    },
+};
+
+export const NoValue: StoryObj<QueriesOverTimeGridTooltipProps> = {
+    ...Template,
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await expect(canvas.getByText('2025', { exact: true })).toBeVisible();
+        await expect(canvas.getByText('2025-01-01 - 2025-12-31')).toBeVisible();
+        await expect(canvas.getByText('BA.1 Lineage')).toBeVisible();
+        await expect(canvas.getByText('No data')).toBeVisible();
+    },
+};
+
+export const WithValue: StoryObj<QueriesOverTimeGridTooltipProps> = {
+    ...Template,
+    args: {
+        ...Template.args,
+        value: {
+            type: 'value',
+            proportion: 0.5,
+            count: 100,
+            totalCount: 300,
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await expect(canvas.getByText('50.00%')).toBeVisible();
+        await expect(canvas.getByText('100')).toBeVisible();
+        await expect(canvas.getByText('match the query BA.1 Lineage.')).toBeVisible();
+        await expect(canvas.getByText('200')).toBeVisible();
+        await expect(canvas.getByText('total with coverage.')).toBeVisible();
+        await expect(canvas.getByText('300')).toBeVisible();
+        await expect(canvas.getByText('total in this date range.')).toBeVisible();
+    },
+};
+
+export const WithValueWithZero: StoryObj<QueriesOverTimeGridTooltipProps> = {
+    ...Template,
+    args: {
+        ...Template.args,
+        value: {
+            type: 'value',
+            proportion: 0,
+            count: 0,
+            totalCount: 300,
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await expect(canvas.getByText('0.00%')).toBeVisible();
+        await expect(canvas.getByText('0')).toBeVisible();
+        await expect(canvas.getByText('match the query BA.1 Lineage.')).toBeVisible();
+        await expect(canvas.queryByText('with coverage')).not.toBeInTheDocument();
+        await expect(canvas.getByText('300')).toBeVisible();
+        await expect(canvas.getByText('total in this date range.')).toBeVisible();
+    },
+};
+
+export const WithValueWithCoverage: StoryObj<QueriesOverTimeGridTooltipProps> = {
+    ...Template,
+    args: {
+        ...Template.args,
+        value: {
+            type: 'valueWithCoverage',
+            count: 100,
+            coverage: 200,
+            totalCount: 300,
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await expect(canvas.getByText('50.00%')).toBeVisible();
+        await expect(canvas.getByText('100')).toBeVisible();
+        await expect(canvas.getByText('match the query BA.1 Lineage out of')).toBeVisible();
+        await expect(canvas.getByText('200')).toBeVisible();
+        await expect(canvas.getByText('with coverage for this query.')).toBeVisible();
+        await expect(canvas.getByText('300')).toBeVisible();
+        await expect(canvas.getByText('total in this date range.')).toBeVisible();
+    },
+};
+
+export const WithValueBelowThreshold: StoryObj<QueriesOverTimeGridTooltipProps> = {
+    ...Template,
+    args: {
+        ...Template.args,
+        value: {
+            type: 'belowThreshold',
+            totalCount: 300,
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await expect(canvas.getByText('<0.10%')).toBeVisible();
+        await expect(canvas.getByText('None or less than 0.10% match the query.')).toBeVisible();
+        await expect(canvas.getByText('300')).toBeVisible();
+        await expect(canvas.getByText('total in this date range.')).toBeVisible();
+    },
+};

package/src/preact/queriesOverTime/queries-over-time-grid-tooltip.tsx

@@ -0,0 +1,123 @@
+import type { FunctionComponent } from 'preact';
+
+import { type ProportionValue } from '../../query/queryMutationsOverTime';
+import { type Temporal, type TemporalClass, toTemporalClass, YearMonthDayClass } from '../../utils/temporalClass';
+import { formatProportion } from '../shared/table/formatProportion';
+
+// Use the same threshold as mutations for consistency
+const QUERIES_OVER_TIME_MIN_PROPORTION = 0.001;
+
+export type QueriesOverTimeGridTooltipProps = {
+    query: string; // displayLabel
+    date: Temporal;
+    value: ProportionValue;
+};
+
+export const QueriesOverTimeGridTooltip: FunctionComponent<QueriesOverTimeGridTooltipProps> = ({
+    query,
+    date,
+    value,
+}: QueriesOverTimeGridTooltipProps) => {
+    const dateClass = toTemporalClass(date);
+
+    let proportionText = 'No data';
+
+    if (value !== null) {
+        switch (value.type) {
+            case 'belowThreshold': {
+                proportionText = `<${formatProportion(QUERIES_OVER_TIME_MIN_PROPORTION)}`;
+                break;
+            }
+            case 'value':
+            case 'wastewaterValue': {
+                proportionText = formatProportion(value.proportion);
+                break;
+            }
+            case 'valueWithCoverage': {
+                // value.coverage will always be non-zero if we're in this case
+                proportionText = formatProportion(value.count / value.coverage);
+                break;
+            }
+        }
+    }
+
+    return (
+        <div>
+            <div className='flex flex-row justify-between gap-4 items-baseline'>
+                <div className='flex flex-col text-left'>
+                    <span className='font-bold'>{query}</span>
+                    <span>{proportionText}</span>
+                </div>
+                <div className='flex flex-col text-right'>
+                    <span className='font-bold'>{dateClass.englishName()}</span>
+                    <span className='text-gray-600'>{timeIntervalDisplay(dateClass)}</span>
+                </div>
+            </div>
+            {value !== null && <TooltipValueCountsDescription value={value} queryLabel={query} />}
+        </div>
+    );
+};
+
+const TooltipValueCountsDescription: FunctionComponent<{
+    value: NonNullable<ProportionValue>;
+    queryLabel: string;
+}> = ({ value, queryLabel }) => {
+    if (value.type === 'wastewaterValue') {
+        return;
+    }
+    return (
+        <div className='mt-2'>
+            {(() => {
+                switch (value.type) {
+                    case 'belowThreshold':
+                        return (
+                            <p className='text-gray-600'>
+                                None or less than {formatProportion(QUERIES_OVER_TIME_MIN_PROPORTION)} match the query.
+                            </p>
+                        );
+
+                    case 'value':
+                        return (
+                            <>
+                                <p>
+                                    {value.count} <span className='text-gray-600'>match the query {queryLabel}.</span>
+                                </p>
+                                {value.proportion > 0 && (
+                                    <p>
+                                        {Math.round(value.count / value.proportion)}{' '}
+                                        <span className='text-gray-600'>total with coverage.</span>
+                                    </p>
+                                )}
+                            </>
+                        );
+
+                    case 'valueWithCoverage':
+                        return (
+                            <>
+                                <p>
+                                    {value.count}{' '}
+                                    <span className='text-gray-600'>match the query {queryLabel} out of</span>
+                                </p>
+                                <p>
+                                    {value.coverage}{' '}
+                                    <span className='text-gray-600'>with coverage for this query.</span>
+                                </p>
+                            </>
+                        );
+                }
+            })()}
+
+            <p>
+                {value.totalCount} <span className='text-gray-600'>total in this date range.</span>
+            </p>
+        </div>
+    );
+};
+
+const timeIntervalDisplay = (date: TemporalClass) => {
+    if (date instanceof YearMonthDayClass) {
+        return date.toString();
+    }
+
+    return `${date.firstDay.toString()} - ${date.lastDay.toString()}`;
+};