@genspectrum/dashboard-components 1.13.0 → 1.14.1

package/src/preact/queriesOverTime/__mockData__/withGaps.json

@@ -0,0 +1,52 @@
+{
+    "data": {
+        "queries": ["S:F456L", "S:R346T", "S:Q493E"],
+        "dateRanges": [
+            { "dateFrom": "2024-01-01", "dateTo": "2024-01-31" },
+            { "dateFrom": "2024-02-01", "dateTo": "2024-02-29" },
+            { "dateFrom": "2024-03-01", "dateTo": "2024-03-31" },
+            { "dateFrom": "2024-04-01", "dateTo": "2024-04-30" },
+            { "dateFrom": "2024-05-01", "dateTo": "2024-05-31" },
+            { "dateFrom": "2024-06-01", "dateTo": "2024-06-30" },
+            { "dateFrom": "2024-07-01", "dateTo": "2024-07-31" }
+        ],
+        "data": [
+            [
+                { "count": 100, "coverage": 1000 },
+                { "count": 150, "coverage": 1050 },
+                { "count": 200, "coverage": 1100 },
+                { "count": 0, "coverage": 0 },
+                { "count": 250, "coverage": 1200 },
+                { "count": 300, "coverage": 1250 },
+                { "count": 350, "coverage": 1300 }
+            ],
+            [
+                { "count": 200, "coverage": 1000 },
+                { "count": 250, "coverage": 1050 },
+                { "count": 300, "coverage": 1100 },
+                { "count": 0, "coverage": 0 },
+                { "count": 350, "coverage": 1200 },
+                { "count": 400, "coverage": 1250 },
+                { "count": 450, "coverage": 1300 }
+            ],
+            [
+                { "count": 50, "coverage": 1000 },
+                { "count": 75, "coverage": 1050 },
+                { "count": 100, "coverage": 1100 },
+                { "count": 0, "coverage": 0 },
+                { "count": 125, "coverage": 1200 },
+                { "count": 150, "coverage": 1250 },
+                { "count": 175, "coverage": 1300 }
+            ]
+        ],
+        "totalCountsByDateRange": [1000, 1050, 1100, 0, 1200, 1250, 1300]
+    },
+    "info": {
+        "dataVersion": "test",
+        "requestId": "test-request-gaps",
+        "requestInfo": "Mock data with gaps for testing hide gaps functionality",
+        "reportTo": "https://github.com/GenSpectrum/LAPIS/issues",
+        "lapisVersion": "test",
+        "siloVersion": "test"
+    }
+}

package/src/preact/queriesOverTime/getFilteredQueriesOverTimeData.ts

@@ -0,0 +1,85 @@
+import { type ProportionValue } from '../../query/queryMutationsOverTime';
+import { serializeQuery, serializeTemporal } from '../../query/queryQueriesOverTime';
+import { Map2dBase, Map2dView, type Map2DContents } from '../../utils/map2d';
+import { type Temporal } from '../../utils/temporalClass';
+
+export type QueryFilter = {
+    textFilter: string;
+};
+
+export type GetFilteredQueryOverTimeDataArgs = {
+    data: Map2DContents<string, Temporal, ProportionValue>;
+    proportionInterval: { min: number; max: number };
+    hideGaps: boolean;
+    queryFilterValue: QueryFilter;
+};
+
+/**
+ * Create a Map2d wrapper for query over time data.
+ * Uses displayLabel strings as the first axis (queries) and Temporal objects as the second axis (dates).
+ */
+export class QueryOverTimeDataMap extends Map2dBase<string, Temporal, ProportionValue> {
+    constructor(initialContent: Map2DContents<string, Temporal, ProportionValue>) {
+        super(serializeQuery, serializeTemporal, initialContent);
+    }
+}
+
+export function getFilteredQueryOverTimeData({
+    data,
+    proportionInterval,
+    hideGaps,
+    queryFilterValue,
+}: GetFilteredQueryOverTimeDataArgs) {
+    const dataMap = new QueryOverTimeDataMap(data);
+    const filteredData = new Map2dView(dataMap);
+
+    const queries = filteredData.getFirstAxisKeys();
+    const dates = filteredData.getSecondAxisKeys();
+
+    const queriesToFilterOut = queries.filter((query) => {
+        // Calculate overall proportion for this query
+        let totalCount = 0;
+        let totalCoverage = 0;
+
+        dates.forEach((date) => {
+            const value = filteredData.get(query, date);
+            if (value?.type === 'valueWithCoverage') {
+                totalCount += value.count;
+                totalCoverage += value.coverage;
+            }
+        });
+
+        const overallProportion = totalCoverage > 0 ? totalCount / totalCoverage : 0;
+
+        // Filter by proportion interval
+        if (overallProportion < proportionInterval.min || overallProportion > proportionInterval.max) {
+            return true;
+        }
+
+        // Filter by text (case-insensitive search in displayLabel)
+        if (
+            queryFilterValue.textFilter !== '' &&
+            !query.toLowerCase().includes(queryFilterValue.textFilter.toLowerCase())
+        ) {
+            return true;
+        }
+
+        return false;
+    });
+
+    // Remove filtered queries from the data view
+    queriesToFilterOut.forEach((query) => {
+        filteredData.deleteRow(query);
+    });
+
+    // Hide gaps (columns with no data)
+    if (hideGaps) {
+        const dateRangesToFilterOut = filteredData.getSecondAxisKeys().filter((dateRange) => {
+            const vals = filteredData.getColumn(dateRange);
+            return !vals.some((v) => (v?.type === 'value' || v?.type === 'valueWithCoverage') && v.totalCount > 0);
+        });
+        dateRangesToFilterOut.forEach((dateRange) => filteredData.deleteColumn(dateRange));
+    }
+
+    return filteredData;
+}

package/src/preact/queriesOverTime/queries-over-time-filter.tsx

@@ -0,0 +1,25 @@
+import { type FunctionComponent } from 'preact';
+import { type Dispatch, type StateUpdater } from 'preact/hooks';
+
+import { type QueryFilter } from './getFilteredQueriesOverTimeData';
+
+type QueriesOverTimeFilterProps = {
+    value: QueryFilter;
+    setFilterValue: Dispatch<StateUpdater<QueryFilter>>;
+};
+
+export const QueriesOverTimeFilter: FunctionComponent<QueriesOverTimeFilterProps> = ({ value, setFilterValue }) => {
+    return (
+        <input
+            type='text'
+            placeholder='Filter queries...'
+            className='input input-xs input-bordered w-40'
+            value={value.textFilter}
+            onInput={(e) =>
+                setFilterValue({
+                    textFilter: (e.target as HTMLInputElement).value,
+                })
+            }
+        />
+    );
+};

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()}`;
+};