@genspectrum/dashboard-components 0.5.3 → 0.5.5

package/src/preact/numberSequencesOverTime/__mockData__/twoVariantsXBB.json

@@ -0,0 +1,506 @@
+{
+    "data": [
+        {
+            "count": 1,
+            "date": "2022-03-09"
+        },
+        {
+            "count": 1,
+            "date": "2022-09-13"
+        },
+        {
+            "count": 2,
+            "date": "2022-09-22"
+        },
+        {
+            "count": 1,
+            "date": "2022-09-11"
+        },
+        {
+            "count": 21,
+            "date": "2022-11-04"
+        },
+        {
+            "count": 119,
+            "date": "2022-12-01"
+        },
+        {
+            "count": 23,
+            "date": "2022-10-31"
+        },
+        {
+            "count": 9,
+            "date": "2022-10-27"
+        },
+        {
+            "count": 1,
+            "date": "2022-01-23"
+        },
+        {
+            "count": 58,
+            "date": "2022-11-18"
+        },
+        {
+            "count": 20,
+            "date": "2022-10-25"
+        },
+        {
+            "count": 16,
+            "date": "2022-10-19"
+        },
+        {
+            "count": 1,
+            "date": "2022-09-15"
+        },
+        {
+            "count": 19,
+            "date": "2022-11-06"
+        },
+        {
+            "count": 1,
+            "date": "2022-06-28"
+        },
+        {
+            "count": 8,
+            "date": "2022-10-18"
+        },
+        {
+            "count": 202,
+            "date": "2022-12-05"
+        },
+        {
+            "count": 38,
+            "date": "2022-11-01"
+        },
+        {
+            "count": 12,
+            "date": "2022-10-23"
+        },
+        {
+            "count": 8,
+            "date": "2022-10-15"
+        },
+        {
+            "count": 76,
+            "date": "2022-11-26"
+        },
+        {
+            "count": 10,
+            "date": "2022-10-14"
+        },
+        {
+            "count": 8,
+            "date": "2022-10-22"
+        },
+        {
+            "count": 4,
+            "date": "2022-09-29"
+        },
+        {
+            "count": 1,
+            "date": "2022-06-26"
+        },
+        {
+            "count": 5,
+            "date": "2022-10-12"
+        },
+        {
+            "count": 1,
+            "date": "2022-08-12"
+        },
+        {
+            "count": 1,
+            "date": "2022-09-14"
+        },
+        {
+            "count": 9,
+            "date": "2022-10-17"
+        },
+        {
+            "count": 3,
+            "date": "2022-09-30"
+        },
+        {
+            "count": 1,
+            "date": "2022-09-23"
+        },
+        {
+            "count": 1,
+            "date": "2022-02-23"
+        },
+        {
+            "count": 2,
+            "date": "2022-02-17"
+        },
+        {
+            "count": 86,
+            "date": "2022-12-03"
+        },
+        {
+            "count": 1,
+            "date": "2022-02-13"
+        },
+        {
+            "count": 1,
+            "date": "2022-01-28"
+        },
+        {
+            "count": 1,
+            "date": "2022-08-24"
+        },
+        {
+            "count": 15,
+            "date": "2022-10-29"
+        },
+        {
+            "count": 1,
+            "date": "2022-01-25"
+        },
+        {
+            "count": 1,
+            "date": "2022-02-22"
+        },
+        {
+            "count": 2,
+            "date": "2022-09-21"
+        },
+        {
+            "count": 163,
+            "date": "2022-12-02"
+        },
+        {
+            "count": 6,
+            "date": "2022-10-11"
+        },
+        {
+            "count": 7,
+            "date": "2022-10-10"
+        },
+        {
+            "count": 2,
+            "date": "2022-09-20"
+        },
+        {
+            "count": 21,
+            "date": "2022-10-26"
+        },
+        {
+            "count": 7,
+            "date": "2022-10-21"
+        },
+        {
+            "count": 5,
+            "date": "2022-10-05"
+        },
+        {
+            "count": 14,
+            "date": "2022-10-30"
+        },
+        {
+            "count": 223,
+            "date": "2022-12-16"
+        },
+        {
+            "count": 33,
+            "date": "2022-11-10"
+        },
+        {
+            "count": 149,
+            "date": "2022-12-11"
+        },
+        {
+            "count": 135,
+            "date": "2022-12-10"
+        },
+        {
+            "count": 16,
+            "date": "2022-10-28"
+        },
+        {
+            "count": 201,
+            "date": "2022-12-20"
+        },
+        {
+            "count": 131,
+            "date": "2022-12-14"
+        },
+        {
+            "count": 1,
+            "date": "2022-08-23"
+        },
+        {
+            "count": 252,
+            "date": "2022-12-12"
+        },
+        {
+            "count": 340,
+            "date": "2022-12-27"
+        },
+        {
+            "count": 118,
+            "date": "2022-12-08"
+        },
+        {
+            "count": 268,
+            "date": "2022-12-31"
+        },
+        {
+            "count": 148,
+            "date": "2022-11-29"
+        },
+        {
+            "count": 244,
+            "date": "2022-12-23"
+        },
+        {
+            "count": 131,
+            "date": "2022-12-07"
+        },
+        {
+            "count": 316,
+            "date": "2022-12-19"
+        },
+        {
+            "count": 3,
+            "date": "2022-10-16"
+        },
+        {
+            "count": 2,
+            "date": "2022-10-06"
+        },
+        {
+            "count": 130,
+            "date": "2022-12-13"
+        },
+        {
+            "count": 119,
+            "date": "2022-11-30"
+        },
+        {
+            "count": 6,
+            "date": "2022-10-02"
+        },
+        {
+            "count": 51,
+            "date": "2022-11-03"
+        },
+        {
+            "count": 23,
+            "date": "2022-11-02"
+        },
+        {
+            "count": 331,
+            "date": "2022-12-30"
+        },
+        {
+            "count": 151,
+            "date": "2022-12-06"
+        },
+        {
+            "count": 185,
+            "date": "2022-12-22"
+        },
+        {
+            "count": 24,
+            "date": "2022-11-24"
+        },
+        {
+            "count": 153,
+            "date": "2022-12-18"
+        },
+        {
+            "count": 37,
+            "date": "2022-11-11"
+        },
+        {
+            "count": 1,
+            "date": "2022-02-21"
+        },
+        {
+            "count": 337,
+            "date": "2022-12-29"
+        },
+        {
+            "count": 6,
+            "date": "2022-10-13"
+        },
+        {
+            "count": 4,
+            "date": "2022-09-26"
+        },
+        {
+            "count": 36,
+            "date": "2022-11-08"
+        },
+        {
+            "count": 41,
+            "date": "2022-11-12"
+        },
+        {
+            "count": 164,
+            "date": "2022-12-15"
+        },
+        {
+            "count": 172,
+            "date": "2022-12-09"
+        },
+        {
+            "count": 76,
+            "date": "2022-12-25"
+        },
+        {
+            "count": 177,
+            "date": "2022-12-17"
+        },
+        {
+            "count": 19,
+            "date": "2022-10-24"
+        },
+        {
+            "count": 137,
+            "date": "2022-11-27"
+        },
+        {
+            "count": 124,
+            "date": "2022-12-24"
+        },
+        {
+            "count": 69,
+            "date": "2022-11-17"
+        },
+        {
+            "count": 201,
+            "date": "2022-12-21"
+        },
+        {
+            "count": 99,
+            "date": "2022-12-04"
+        },
+        {
+            "count": 64,
+            "date": "2022-11-21"
+        },
+        {
+            "count": 333,
+            "date": "2022-12-26"
+        },
+        {
+            "count": 1,
+            "date": "2022-09-02"
+        },
+        {
+            "count": 69,
+            "date": "2022-11-23"
+        },
+        {
+            "count": 76,
+            "date": "2022-11-25"
+        },
+        {
+            "count": 67,
+            "date": "2022-11-22"
+        },
+        {
+            "count": 177,
+            "date": "2022-11-28"
+        },
+        {
+            "count": 29,
+            "date": "2022-11-20"
+        },
+        {
+            "count": 47,
+            "date": "2022-11-19"
+        },
+        {
+            "count": 1,
+            "date": "2022-09-06"
+        },
+        {
+            "count": 47,
+            "date": "2022-11-16"
+        },
+        {
+            "count": 1,
+            "date": "2022-09-24"
+        },
+        {
+            "count": 57,
+            "date": "2022-11-15"
+        },
+        {
+            "count": 40,
+            "date": "2022-11-13"
+        },
+        {
+            "count": 38,
+            "date": "2022-11-09"
+        },
+        {
+            "count": 76,
+            "date": "2022-11-14"
+        },
+        {
+            "count": 372,
+            "date": "2022-12-28"
+        },
+        {
+            "count": 28,
+            "date": "2022-11-07"
+        },
+        {
+            "count": 5,
+            "date": "2022-10-04"
+        },
+        {
+            "count": 1,
+            "date": "2022-08-27"
+        },
+        {
+            "count": 6,
+            "date": "2022-10-07"
+        },
+        {
+            "count": 21,
+            "date": "2022-11-05"
+        },
+        {
+            "count": 7,
+            "date": "2022-10-03"
+        },
+        {
+            "count": 12,
+            "date": "2022-10-20"
+        },
+        {
+            "count": 1,
+            "date": "2022-06-25"
+        },
+        {
+            "count": 3,
+            "date": "2022-10-01"
+        },
+        {
+            "count": 5,
+            "date": "2022-10-09"
+        },
+        {
+            "count": 3,
+            "date": "2022-10-08"
+        },
+        {
+            "count": 6,
+            "date": "2022-09-28"
+        },
+        {
+            "count": 1,
+            "date": "2022-09-25"
+        }
+    ],
+    "info": {
+        "dataVersion": "1720033519",
+        "requestId": "3d5507b7-d837-4c6e-9bf3-00b5b21286fd",
+        "requestInfo": "sars_cov-2_nextstrain_open on lapis.cov-spectrum.org at 2024-07-12T07:51:08.584671532",
+        "reportTo": "Please report to https://github.com/GenSpectrum/LAPIS/issues in case you encounter any unexpected issues. Please include the request ID and the requestInfo in your report."
+    }
+}

package/src/preact/numberSequencesOverTime/getNumberOfSequencesOverTimeTableData.spec.ts

@@ -0,0 +1,75 @@
+import { describe, expect, test } from 'vitest';
+
+import { getNumberOfSequencesOverTimeTableData } from './getNumberOfSequencesOverTimeTableData';
+import { yearMonth } from '../../utils/temporalTestHelpers';
+
+describe('getNumberOfSequencesOverTimeTableData', () => {
+    test('should return empty array if no data', () => {
+        const result = getNumberOfSequencesOverTimeTableData([], 'day');
+
+        expect(result).to.deep.equal([]);
+    });
+
+    test('should generate missing date ranges for non-overlapping datasets', () => {
+        const data = [
+            {
+                displayName: 'dataset1',
+                content: [{ count: 1, dateRange: yearMonth('2023-01') }],
+            },
+            {
+                displayName: 'dataset2',
+                content: [{ count: 3, dateRange: yearMonth('2023-04') }],
+            },
+        ];
+
+        const result = getNumberOfSequencesOverTimeTableData(data, 'month');
+
+        expect(result).to.deep.equal([
+            {
+                dataset1: 1,
+                dataset2: 0,
+                month: '2023-01',
+            },
+            {
+                dataset1: 0,
+                dataset2: 0,
+                month: '2023-02',
+            },
+            {
+                dataset1: 0,
+                dataset2: 0,
+                month: '2023-03',
+            },
+            {
+                dataset1: 0,
+                dataset2: 3,
+                month: '2023-04',
+            },
+        ]);
+    });
+
+    test('should maps null date ranges to "unknown"', () => {
+        const data = [
+            {
+                displayName: 'dataset1',
+                content: [
+                    { count: 5, dateRange: null },
+                    { count: 4, dateRange: yearMonth('2023-04') },
+                ],
+            },
+        ];
+
+        const result = getNumberOfSequencesOverTimeTableData(data, 'month');
+
+        expect(result).to.deep.equal([
+            {
+                dataset1: 5,
+                month: 'Unknown',
+            },
+            {
+                dataset1: 4,
+                month: '2023-04',
+            },
+        ]);
+    });
+});

package/src/preact/numberSequencesOverTime/getNumberOfSequencesOverTimeTableData.ts

@@ -0,0 +1,39 @@
+import type { NumberOfSequencesDatasets } from '../../query/queryNumberOfSequencesOverTime';
+import { generateAllInRange, getMinMaxTemporal, type Temporal } from '../../utils/temporal';
+
+type TableRow<DateRangeKey extends string> = { [K in DateRangeKey]: string } & { [key: string]: number };
+
+export const getNumberOfSequencesOverTimeTableData = <DateRangeKey extends string>(
+    data: NumberOfSequencesDatasets,
+    dateRangeKey: DateRangeKey,
+) => {
+    const datasetsWithCountByDate = data.map(({ displayName, content }) => ({
+        displayName,
+        content: new Map(content.map((datum) => [datum.dateRange?.toString(), datum])),
+    }));
+
+    const allDateRangesThatOccurInData = datasetsWithCountByDate
+        .map(({ content }) => [...content.values()].map((datum) => datum.dateRange))
+        .reduce((acc, keys) => new Set([...acc, ...keys]), new Set<Temporal | null>());
+
+    const minMax = getMinMaxTemporal(allDateRangesThatOccurInData);
+    if (minMax === null) {
+        return [];
+    }
+
+    const allDateRanges: (Temporal | null)[] = generateAllInRange(...minMax);
+
+    if (allDateRangesThatOccurInData.has(null)) {
+        allDateRanges.unshift(null);
+    }
+
+    return allDateRanges.map((dateRange) => {
+        return datasetsWithCountByDate.reduce(
+            (acc, dataset) => ({
+                ...acc,
+                [dataset.displayName]: dataset.content.get(dateRange?.toString())?.count ?? 0,
+            }),
+            { [dateRangeKey]: dateRange?.toString() ?? 'Unknown' } as TableRow<DateRangeKey>,
+        );
+    });
+};

package/src/preact/numberSequencesOverTime/number-sequences-over-time-bar-chart.tsx

@@ -0,0 +1,58 @@
+import { Chart, type ChartConfiguration, type ChartDataset, registerables } from 'chart.js';
+import { useMemo } from 'preact/hooks';
+
+import { getNumberOfSequencesOverTimeTableData } from './getNumberOfSequencesOverTimeTableData';
+import { type NumberOfSequencesDatasets } from '../../query/queryNumberOfSequencesOverTime';
+import GsChart from '../components/chart';
+import { singleGraphColorRGBAById } from '../shared/charts/colors';
+
+interface NumberSequencesOverBarChartProps {
+    data: NumberOfSequencesDatasets;
+}
+
+Chart.register(...registerables);
+
+export const NumberSequencesOverTimeBarChart = ({ data }: NumberSequencesOverBarChartProps) => {
+    const config: ChartConfiguration = useMemo(
+        () => ({
+            type: 'bar',
+            data: {
+                datasets: getDatasets(data),
+            },
+            options: {
+                maintainAspectRatio: false,
+                animation: false,
+                plugins: {
+                    legend: {
+                        display: false,
+                    },
+                    tooltip: {
+                        mode: 'index',
+                        intersect: false,
+                    },
+                },
+            },
+        }),
+        [data],
+    );
+
+    return <GsChart configuration={config} />;
+};
+
+const getDatasets = (data: NumberOfSequencesDatasets) => {
+    const tableData = getNumberOfSequencesOverTimeTableData(data, 'date');
+
+    return data.map(
+        ({ displayName }, index) =>
+            ({
+                borderWidth: 1,
+                label: displayName,
+                backgroundColor: singleGraphColorRGBAById(index, 0.3),
+                borderColor: singleGraphColorRGBAById(index),
+                data: tableData.map((row) => ({
+                    x: row.date,
+                    y: row[displayName],
+                })),
+            }) as ChartDataset<'bar', { x: string; y: number }[]>,
+    );
+};

package/src/preact/numberSequencesOverTime/number-sequences-over-time-table.tsx

@@ -0,0 +1,32 @@
+import { useMemo } from 'preact/hooks';
+
+import { getNumberOfSequencesOverTimeTableData } from './getNumberOfSequencesOverTimeTableData';
+import { type NumberOfSequencesDatasets } from '../../query/queryNumberOfSequencesOverTime';
+import { type TemporalGranularity } from '../../types';
+import { Table } from '../components/table';
+
+interface NumberSequencesOverTimeTableProps {
+    data: NumberOfSequencesDatasets;
+    granularity: TemporalGranularity;
+    pageSize: boolean | number;
+}
+
+export const NumberSequencesOverTimeTable = ({ data, granularity, pageSize }: NumberSequencesOverTimeTableProps) => {
+    const columns = [
+        {
+            name: granularity,
+            sort: true,
+        },
+        ...data.map((dataset) => ({
+            name: dataset.displayName,
+            sort: true,
+        })),
+    ];
+
+    const flatTableData = useMemo(() => {
+        const tableData = getNumberOfSequencesOverTimeTableData(data, granularity);
+        return Object.values(tableData).map((row) => Object.values(row));
+    }, [data, granularity]);
+
+    return <Table data={flatTableData} columns={columns} pageSize={pageSize} />;
+};