@genspectrum/dashboard-components 0.5.4 → 0.5.6

package/src/query/queryNumberOfSequencesOverTime.spec.ts

@@ -0,0 +1,195 @@
+import { describe, expect, test } from 'vitest';
+
+import { queryNumberOfSequencesOverTime } from './queryNumberOfSequencesOverTime';
+import { DUMMY_LAPIS_URL, lapisRequestMocks } from '../../vitest.setup';
+import { yearMonth, yearMonthDay } from '../utils/temporalTestHelpers';
+
+const lapisDateField = 'dateField';
+const lapisFilter = { field1: 'value1', field2: 'value2' };
+
+describe('queryNumberOfSequencesOverTime', () => {
+    test('should fetch data for a single filter', async () => {
+        lapisRequestMocks.aggregated(
+            { ...lapisFilter, fields: [lapisDateField] },
+            {
+                data: [
+                    { count: 1, [lapisDateField]: '2023-01-01' },
+                    { count: 2, [lapisDateField]: '2023-01-02' },
+                ],
+            },
+        );
+
+        const result = await queryNumberOfSequencesOverTime(
+            DUMMY_LAPIS_URL,
+            { displayName: 'displayName', lapisFilter },
+            lapisDateField,
+            'day',
+            0,
+        );
+
+        expect(result).to.deep.equal([
+            {
+                displayName: 'displayName',
+                content: [
+                    { count: 1, dateRange: yearMonthDay('2023-01-01') },
+                    { count: 2, dateRange: yearMonthDay('2023-01-02') },
+                ],
+            },
+        ]);
+    });
+
+    test('should fill missing dates with count 0', async () => {
+        lapisRequestMocks.aggregated(
+            { ...lapisFilter, fields: [lapisDateField] },
+            {
+                data: [
+                    { count: 1, [lapisDateField]: '2023-01-01' },
+                    { count: 2, [lapisDateField]: '2023-01-04' },
+                ],
+            },
+        );
+
+        const result = await queryNumberOfSequencesOverTime(
+            DUMMY_LAPIS_URL,
+            { displayName: 'displayName', lapisFilter },
+            lapisDateField,
+            'day',
+            0,
+        );
+
+        expect(result).to.deep.equal([
+            {
+                displayName: 'displayName',
+                content: [
+                    { count: 1, dateRange: yearMonthDay('2023-01-01') },
+                    { count: 0, dateRange: yearMonthDay('2023-01-02') },
+                    { count: 0, dateRange: yearMonthDay('2023-01-03') },
+                    { count: 2, dateRange: yearMonthDay('2023-01-04') },
+                ],
+            },
+        ]);
+    });
+
+    test('should smooth the data', async () => {
+        lapisRequestMocks.aggregated(
+            { ...lapisFilter, fields: [lapisDateField] },
+            {
+                data: [
+                    { count: 3, [lapisDateField]: '2023-01-01' },
+                    { count: 0, [lapisDateField]: '2023-01-02' },
+                    { count: 3, [lapisDateField]: '2023-01-03' },
+                    { count: 0, [lapisDateField]: '2023-01-04' },
+                    { count: 6, [lapisDateField]: '2023-01-05' },
+                    { count: 0, [lapisDateField]: '2023-01-06' },
+                ],
+            },
+        );
+
+        const result = await queryNumberOfSequencesOverTime(
+            DUMMY_LAPIS_URL,
+            { displayName: 'displayName', lapisFilter },
+            lapisDateField,
+            'day',
+            3,
+        );
+
+        expect(result).to.deep.equal([
+            {
+                displayName: 'displayName',
+                content: [
+                    { count: 2, dateRange: yearMonthDay('2023-01-02') },
+                    { count: 1, dateRange: yearMonthDay('2023-01-03') },
+                    { count: 3, dateRange: yearMonthDay('2023-01-04') },
+                    { count: 2, dateRange: yearMonthDay('2023-01-05') },
+                ],
+            },
+        ]);
+    });
+
+    test('should aggregate by month', async () => {
+        lapisRequestMocks.aggregated(
+            { ...lapisFilter, fields: [lapisDateField] },
+            {
+                data: [
+                    { count: 1, [lapisDateField]: '2023-01-01' },
+                    { count: 2, [lapisDateField]: '2023-01-02' },
+                    { count: 3, [lapisDateField]: '2023-02-05' },
+                    { count: 4, [lapisDateField]: '2023-02-06' },
+                    { count: 5, [lapisDateField]: '2023-03-06' },
+                ],
+            },
+        );
+
+        const result = await queryNumberOfSequencesOverTime(
+            DUMMY_LAPIS_URL,
+            { displayName: 'displayName', lapisFilter },
+            lapisDateField,
+            'month',
+            0,
+        );
+
+        expect(result).to.deep.equal([
+            {
+                displayName: 'displayName',
+                content: [
+                    { count: 3, dateRange: yearMonth('2023-01') },
+                    { count: 7, dateRange: yearMonth('2023-02') },
+                    { count: 5, dateRange: yearMonth('2023-03') },
+                ],
+            },
+        ]);
+    });
+
+    test('should fetch data for multiple filters', async () => {
+        const lapisFilter1 = { field1: 'value1', field2: 'value2' };
+        const lapisFilter2 = { field3: 'value3', field4: 'value4' };
+        lapisRequestMocks.multipleAggregated([
+            {
+                body: { ...lapisFilter1, fields: [lapisDateField] },
+                response: {
+                    data: [
+                        { count: 1, [lapisDateField]: '2023-01-01' },
+                        { count: 2, [lapisDateField]: '2023-01-02' },
+                    ],
+                },
+            },
+            {
+                body: { ...lapisFilter2, fields: [lapisDateField] },
+                response: {
+                    data: [
+                        { count: 3, [lapisDateField]: '2023-01-02' },
+                        { count: 4, [lapisDateField]: '2023-01-03' },
+                    ],
+                },
+            },
+        ]);
+
+        const result = await queryNumberOfSequencesOverTime(
+            DUMMY_LAPIS_URL,
+            [
+                { displayName: 'displayName1', lapisFilter: lapisFilter1 },
+                { displayName: 'displayName2', lapisFilter: lapisFilter2 },
+            ],
+            lapisDateField,
+            'day',
+            0,
+        );
+
+        expect(result).to.deep.equal([
+            {
+                displayName: 'displayName1',
+                content: [
+                    { count: 1, dateRange: yearMonthDay('2023-01-01') },
+                    { count: 2, dateRange: yearMonthDay('2023-01-02') },
+                ],
+            },
+            {
+                displayName: 'displayName2',
+                content: [
+                    { count: 3, dateRange: yearMonthDay('2023-01-02') },
+                    { count: 4, dateRange: yearMonthDay('2023-01-03') },
+                ],
+            },
+        ]);
+    });
+});

package/src/query/queryNumberOfSequencesOverTime.ts

@@ -0,0 +1,33 @@
+import { queryAggregatedDataOverTime } from './queryAggregatedDataOverTime';
+import { type NamedLapisFilter, type TemporalGranularity } from '../types';
+import { sortNullToBeginningThenByDate } from '../utils/sort';
+import { makeArray } from '../utils/utils';
+
+export type NumberOfSequencesDatasets = Awaited<ReturnType<typeof queryNumberOfSequencesOverTime>>;
+export type NumberOfSequencesDataset = NumberOfSequencesDatasets[number];
+
+export async function queryNumberOfSequencesOverTime(
+    lapis: string,
+    lapisFilter: NamedLapisFilter | NamedLapisFilter[],
+    lapisDateField: string,
+    granularity: TemporalGranularity,
+    smoothingWindow: number,
+) {
+    const lapisFilters = makeArray(lapisFilter);
+
+    const queries = lapisFilters.map(async ({ displayName, lapisFilter }) => {
+        const { content } = await queryAggregatedDataOverTime(
+            lapisFilter,
+            granularity,
+            smoothingWindow,
+            lapisDateField,
+        ).evaluate(lapis);
+
+        return {
+            displayName,
+            content: content.sort(sortNullToBeginningThenByDate),
+        };
+    });
+
+    return Promise.all(queries);
+}

package/src/query/queryPrevalenceOverTime.ts

@@ -1,19 +1,8 @@
+import { queryAggregatedDataOverTime } from './queryAggregatedDataOverTime';
 import { DivisionOperator } from '../operator/DivisionOperator';
-import { FetchAggregatedOperator } from '../operator/FetchAggregatedOperator';
-import { FillMissingOperator } from '../operator/FillMissingOperator';
-import { GroupByAndSumOperator } from '../operator/GroupByAndSumOperator';
-import { MapOperator } from '../operator/MapOperator';
-import { RenameFieldOperator } from '../operator/RenameFieldOperator';
-import { SlidingOperator } from '../operator/SlidingOperator';
-import { SortOperator } from '../operator/SortOperator';
 import { type LapisFilter, type NamedLapisFilter, type TemporalGranularity } from '../types';
-import {
-    compareTemporal,
-    generateAllInRange,
-    getMinMaxTemporal,
-    type Temporal,
-    TemporalCache,
-} from '../utils/temporal';
+import { type Temporal } from '../utils/temporal';
+import { makeArray } from '../utils/utils';
 
 export type PrevalenceOverTimeData = PrevalenceOverTimeVariantData[];
 
@@ -40,10 +29,15 @@ export function queryPrevalenceOverTime(
 ): Promise<PrevalenceOverTimeData> {
     const numeratorFilters = makeArray(numeratorFilter);
 
-    const denominatorData = fetchAndPrepare(denominatorFilter, granularity, smoothingWindow, lapisDateField);
+    const denominatorData = queryAggregatedDataOverTime(
+        denominatorFilter,
+        granularity,
+        smoothingWindow,
+        lapisDateField,
+    );
     const subQueries = numeratorFilters.map(async (namedLapisFilter) => {
         const { displayName, lapisFilter } = namedLapisFilter;
-        const numeratorData = fetchAndPrepare(lapisFilter, granularity, smoothingWindow, lapisDateField);
+        const numeratorData = queryAggregatedDataOverTime(lapisFilter, granularity, smoothingWindow, lapisDateField);
         const divide = new DivisionOperator(
             numeratorData,
             denominatorData,
@@ -61,73 +55,3 @@ export function queryPrevalenceOverTime(
     });
     return Promise.all(subQueries);
 }
-
-function makeArray<T>(arrayOrSingleItem: T | T[]) {
-    if (Array.isArray(arrayOrSingleItem)) {
-        return arrayOrSingleItem;
-    }
-    return [arrayOrSingleItem];
-}
-
-function fetchAndPrepare<LapisDateField extends string>(
-    filter: LapisFilter,
-    granularity: TemporalGranularity,
-    smoothingWindow: number,
-    lapisDateField: LapisDateField,
-) {
-    const fetchData = new FetchAggregatedOperator<{ [key in LapisDateField]: string | null }>(filter, [lapisDateField]);
-    const dataWithFixedDateKey = new RenameFieldOperator(fetchData, lapisDateField, 'date');
-    const mapData = new MapOperator(dataWithFixedDateKey, (d) => mapDateToGranularityRange(d, granularity));
-    const groupByData = new GroupByAndSumOperator(mapData, 'dateRange', 'count');
-    const fillData = new FillMissingOperator(
-        groupByData,
-        'dateRange',
-        getMinMaxTemporal,
-        generateAllInRange,
-        (key) => ({ dateRange: key, count: 0 }),
-    );
-    const sortData = new SortOperator(fillData, dateRangeCompare);
-
-    return smoothingWindow >= 1 ? new SlidingOperator(sortData, smoothingWindow, averageSmoothing) : sortData;
-}
-
-function mapDateToGranularityRange(d: { date: string | null; count: number }, granularity: TemporalGranularity) {
-    let dateRange: Temporal | null = null;
-    if (d.date !== null) {
-        const date = TemporalCache.getInstance().getYearMonthDay(d.date);
-        switch (granularity) {
-            case 'day':
-                dateRange = date;
-                break;
-            case 'week':
-                dateRange = date.week;
-                break;
-            case 'month':
-                dateRange = date.month;
-                break;
-            case 'year':
-                dateRange = date.year;
-                break;
-        }
-    }
-    return {
-        dateRange,
-        count: d.count,
-    };
-}
-
-function dateRangeCompare(a: { dateRange: Temporal | null }, b: { dateRange: Temporal | null }) {
-    if (a.dateRange === null) {
-        return 1;
-    }
-    if (b.dateRange === null) {
-        return -1;
-    }
-    return compareTemporal(a.dateRange, b.dateRange);
-}
-
-function averageSmoothing(slidingWindow: { dateRange: Temporal | null; count: number }[]) {
-    const average = slidingWindow.reduce((acc, curr) => acc + curr.count, 0) / slidingWindow.length;
-    const centerIndex = Math.floor(slidingWindow.length / 2);
-    return { dateRange: slidingWindow[centerIndex].dateRange, count: average };
-}

package/src/utils/sort.ts

@@ -0,0 +1,9 @@
+import type { Temporal } from './temporal';
+
+export function sortNullToBeginningThenByDate(a: { dateRange: Temporal | null }, b: { dateRange: Temporal | null }) {
+    return a.dateRange === null
+        ? -1
+        : b.dateRange === null
+          ? 1
+          : a.dateRange.toString().localeCompare(b.dateRange.toString());
+}

package/src/utils/temporalTestHelpers.ts

@@ -0,0 +1,9 @@
+import { TemporalCache, YearMonth, YearMonthDay } from './temporal';
+
+export function yearMonthDay(date: string) {
+    return YearMonthDay.parse(date, TemporalCache.getInstance());
+}
+
+export function yearMonth(date: string) {
+    return YearMonth.parse(date, TemporalCache.getInstance());
+}

package/src/utils/utils.ts

@@ -36,3 +36,10 @@ function stringifyLapisFilterValue(value: LapisFilter[string]) {
             return value;
     }
 }
+
+export function makeArray<T>(arrayOrSingleItem: T | T[]) {
+    if (Array.isArray(arrayOrSingleItem)) {
+        return arrayOrSingleItem;
+    }
+    return [arrayOrSingleItem];
+}

package/src/web-components/visualization/gs-number-sequences-over-time.stories.ts

@@ -0,0 +1,243 @@
+import { expect, fireEvent, waitFor } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+import '../app';
+import './gs-number-sequences-over-time';
+import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
+import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
+import oneVariantEG from '../../preact/numberSequencesOverTime/__mockData__/oneVariantEG.json';
+import twoVariantsEG from '../../preact/numberSequencesOverTime/__mockData__/twoVariantsEG.json';
+import twoVariantsJN1 from '../../preact/numberSequencesOverTime/__mockData__/twoVariantsJN1.json';
+import twoVariantsXBB from '../../preact/numberSequencesOverTime/__mockData__/twoVariantsXBB.json';
+import type { NumberSequencesOverTimeProps } from '../../preact/numberSequencesOverTime/number-sequences-over-time';
+import { withinShadowRoot } from '../withinShadowRoot.story';
+
+const codeExample = String.raw`
+<gs-number-sequences-over-time
+    lapisFilter='[{ "displayName": "EG", "lapisFilter": { "country": "USA", "pangoLineage": "EG*" }}, { "displayName": "JN.1", "lapisFilter": { "country": "USA", "pangoLineage": "JN.1*" }}]'
+    lapisDateField="date"
+    views='["bar", "line", "table"]'
+    headline="Number of sequences over time"
+    width="100%"
+    height="700px"
+    granularity="month"
+    smoothingWindow="0"
+    pageSize="10"
+></gs-number-sequences-over-time>`;
+
+const meta: Meta<NumberSequencesOverTimeProps> = {
+    title: 'Visualization/Number sequences over time',
+    component: 'gs-number-sequences-over-time',
+    argTypes: {
+        granularity: {
+            options: ['day', 'week', 'month', 'year'],
+            control: { type: 'radio' },
+        },
+        views: {
+            options: ['bar', 'line', 'table'],
+            control: { type: 'check' },
+        },
+        pageSize: { control: 'object' },
+    },
+    parameters: withComponentDocs({
+        componentDocs: {
+            opensShadowDom: true,
+            expectsChildren: false,
+            codeExample,
+        },
+    }),
+    tags: ['autodocs'],
+};
+
+export default meta;
+
+const Template: StoryObj<NumberSequencesOverTimeProps> = {
+    render: (args) => html`
+        <gs-app lapis="${LAPIS_URL}">
+            <gs-number-sequences-over-time
+                .lapisFilter=${args.lapisFilter}
+                .lapisDateField=${args.lapisDateField}
+                .views=${args.views}
+                .width=${args.width}
+                .height=${args.height}
+                .headline=${args.headline}
+                .granularity=${args.granularity}
+                .smoothingWindow=${args.smoothingWindow}
+                .pageSize=${args.pageSize}
+            ></gs-number-sequences-over-time>
+        </gs-app>
+    `,
+    args: {
+        views: ['bar', 'line', 'table'],
+        lapisFilter: [
+            { displayName: 'EG', lapisFilter: { country: 'USA', pangoLineage: 'EG*', dateFrom: '2022-12-01' } },
+        ],
+        lapisDateField: 'date',
+        width: '100%',
+        height: '700px',
+        headline: 'Number of sequences over time',
+        smoothingWindow: 0,
+        granularity: 'month',
+        pageSize: 10,
+    },
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'aggregated',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            country: 'USA',
+                            pangoLineage: 'EG*',
+                            dateFrom: '2022-12-01',
+                            fields: ['date'],
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: oneVariantEG,
+                    },
+                },
+            ],
+        },
+    },
+};
+
+export const OneDatasetBarChart: StoryObj<NumberSequencesOverTimeProps> = {
+    ...Template,
+    play: async ({ canvasElement }) => {
+        const canvas = await withinShadowRoot(canvasElement, 'gs-number-sequences-over-time');
+
+        await waitFor(() => expect(canvas.getByRole('button', { name: 'Bar' })).toBeVisible());
+
+        await fireEvent.click(canvas.getByRole('button', { name: 'Bar' }));
+    },
+};
+
+export const OneDatasetLineChart: StoryObj<NumberSequencesOverTimeProps> = {
+    ...Template,
+    play: async ({ canvasElement }) => {
+        const canvas = await withinShadowRoot(canvasElement, 'gs-number-sequences-over-time');
+
+        await waitFor(() => expect(canvas.getByRole('button', { name: 'Line' })).toBeVisible());
+
+        await fireEvent.click(canvas.getByRole('button', { name: 'Line' }));
+    },
+};
+
+export const OneDatasetTable: StoryObj<NumberSequencesOverTimeProps> = {
+    ...Template,
+    play: async ({ canvasElement }) => {
+        const canvas = await withinShadowRoot(canvasElement, 'gs-number-sequences-over-time');
+
+        await waitFor(() => expect(canvas.getByRole('button', { name: 'Table' })).toBeVisible());
+
+        await fireEvent.click(canvas.getByRole('button', { name: 'Table' }));
+    },
+};
+
+export const TwoDatasets: StoryObj<NumberSequencesOverTimeProps> = {
+    ...Template,
+    args: {
+        ...Template.args,
+        lapisFilter: [
+            {
+                displayName: 'EG',
+                lapisFilter: { country: 'USA', pangoLineage: 'EG*', dateFrom: '2022-10-01' },
+            },
+            { displayName: 'JN.1', lapisFilter: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01' } },
+        ],
+    },
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'aggregatedEG',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            country: 'USA',
+                            pangoLineage: 'EG*',
+                            fields: ['date'],
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: twoVariantsEG,
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'aggregatedJN.1',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            country: 'USA',
+                            pangoLineage: 'JN.1*',
+                            dateFrom: '2023-01-01',
+                            fields: ['date'],
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: twoVariantsJN1,
+                    },
+                },
+            ],
+        },
+    },
+};
+
+export const TwoDatasetsWithNonOverlappingDates: StoryObj<NumberSequencesOverTimeProps> = {
+    ...Template,
+    args: {
+        ...Template.args,
+        lapisFilter: [
+            {
+                displayName: 'XBB',
+                lapisFilter: { country: 'USA', pangoLineage: 'XBB*', dateFrom: '2022-01-01', dateTo: '2022-12-31' },
+            },
+            { displayName: 'JN.1', lapisFilter: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01' } },
+        ],
+    },
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'aggregatedEG',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            country: 'USA',
+                            pangoLineage: 'XBB*',
+                            dateFrom: '2022-01-01',
+                            dateTo: '2022-12-31',
+                            fields: ['date'],
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: twoVariantsXBB,
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'aggregatedJN.1',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            country: 'USA',
+                            pangoLineage: 'JN.1*',
+                            dateFrom: '2023-01-01',
+                            fields: ['date'],
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: twoVariantsJN1,
+                    },
+                },
+            ],
+        },
+    },
+};