@genspectrum/dashboard-components 0.5.4 → 0.5.5

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

@@ -0,0 +1,133 @@
+import { type StoryObj } from '@storybook/preact';
+
+import { NumberSequencesOverTime, type NumberSequencesOverTimeProps } from './number-sequences-over-time';
+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 { LapisUrlContext } from '../LapisUrlContext';
+
+export default {
+    title: 'Visualization/NumberSequencesOverTime',
+    component: NumberSequencesOverTime,
+    parameters: {
+        fetchMock: {},
+    },
+    argTypes: {
+        granularity: {
+            options: ['day', 'week', 'month', 'year'],
+            control: { type: 'radio' },
+        },
+        views: {
+            options: ['bar', 'line', 'table'],
+            control: { type: 'check' },
+        },
+        pageSize: { control: 'object' },
+    },
+};
+
+const Template: StoryObj<NumberSequencesOverTimeProps> = {
+    render: (args) => (
+        <LapisUrlContext.Provider value={LAPIS_URL}>
+            <NumberSequencesOverTime
+                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}
+            />
+        </LapisUrlContext.Provider>
+    ),
+    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 Table = {
+    ...Template,
+};
+
+export const TwoVariants = {
+    ...Template,
+    args: {
+        ...Template.args,
+        lapisFilter: [
+            { displayName: 'EG', lapisFilter: { country: 'USA', pangoLineage: 'EG*', dateTo: '2023-06-30' } },
+            { 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*',
+                            dateTo: '2023-06-30',
+                            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,
+                    },
+                },
+            ],
+        },
+    },
+};

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

@@ -0,0 +1,105 @@
+import { useContext } from 'preact/hooks';
+
+import { NumberSequencesOverTimeBarChart } from './number-sequences-over-time-bar-chart';
+import { NumberSequencesOverTimeTable } from './number-sequences-over-time-table';
+import {
+    type NumberOfSequencesDatasets,
+    queryNumberOfSequencesOverTime,
+} from '../../query/queryNumberOfSequencesOverTime';
+import type { NamedLapisFilter, TemporalGranularity } from '../../types';
+import { LapisUrlContext } from '../LapisUrlContext';
+import { ErrorBoundary } from '../components/error-boundary';
+import { ErrorDisplay } from '../components/error-display';
+import Headline from '../components/headline';
+import { LoadingDisplay } from '../components/loading-display';
+import { NoDataDisplay } from '../components/no-data-display';
+import { ResizeContainer } from '../components/resize-container';
+import Tabs from '../components/tabs';
+import { useQuery } from '../useQuery';
+
+type NumberSequencesOverTimeView = 'bar' | 'line' | 'table';
+
+export interface NumberSequencesOverTimeProps extends NumberSequencesOverTimeInnerProps {
+    width: string;
+    height: string;
+    headline: string;
+}
+
+interface NumberSequencesOverTimeInnerProps {
+    lapisFilter: NamedLapisFilter | NamedLapisFilter[];
+    lapisDateField: string;
+    views: NumberSequencesOverTimeView[];
+    granularity: TemporalGranularity;
+    smoothingWindow: number;
+    pageSize: boolean | number;
+}
+
+export const NumberSequencesOverTime = ({ width, height, headline, ...innerProps }: NumberSequencesOverTimeProps) => {
+    const size = { height, width };
+
+    return (
+        <ErrorBoundary size={size} headline={headline}>
+            <ResizeContainer size={size}>
+                <Headline heading={headline}>
+                    <NumberSequencesOverTimeInner {...innerProps} />
+                </Headline>
+            </ResizeContainer>
+        </ErrorBoundary>
+    );
+};
+
+const NumberSequencesOverTimeInner = ({
+    lapisFilter,
+    granularity,
+    smoothingWindow,
+    lapisDateField,
+    views,
+    pageSize,
+}: NumberSequencesOverTimeInnerProps) => {
+    const lapis = useContext(LapisUrlContext);
+
+    const { data, error, isLoading } = useQuery(() =>
+        queryNumberOfSequencesOverTime(lapis, lapisFilter, lapisDateField, granularity, smoothingWindow),
+    );
+
+    if (isLoading) {
+        return <LoadingDisplay />;
+    }
+
+    if (error !== null) {
+        return <ErrorDisplay error={error} />;
+    }
+
+    if (data === null) {
+        return <NoDataDisplay />;
+    }
+
+    return <NumberSequencesOverTimeTabs views={views} data={data} granularity={granularity} pageSize={pageSize} />;
+};
+
+interface NumberSequencesOverTimeTabsProps {
+    views: NumberSequencesOverTimeView[];
+    data: NumberOfSequencesDatasets;
+    granularity: TemporalGranularity;
+    pageSize: boolean | number;
+}
+
+const NumberSequencesOverTimeTabs = ({ views, data, granularity, pageSize }: NumberSequencesOverTimeTabsProps) => {
+    const getTab = (view: NumberSequencesOverTimeView) => {
+        switch (view) {
+            case 'bar':
+                return { title: 'Bar', content: <NumberSequencesOverTimeBarChart data={data} /> };
+            case 'line':
+                return { title: 'Line', content: <div>not implemented, TODO #317</div> };
+            case 'table':
+                return {
+                    title: 'Table',
+                    content: <NumberSequencesOverTimeTable data={data} granularity={granularity} pageSize={pageSize} />,
+                };
+            default:
+                throw new Error(`Unknown view: ${view}`);
+        }
+    };
+
+    return <Tabs tabs={views.map((view) => getTab(view))} />;
+};

package/src/preact/prevalenceOverTime/prevalence-over-time-bar-chart.tsx

@@ -1,4 +1,4 @@
-import { Chart, type ChartConfiguration, registerables, type TooltipItem } from 'chart.js';
+import { Chart, type ChartConfiguration, type ChartDataset, registerables, type TooltipItem } from 'chart.js';
 import { BarWithErrorBar, BarWithErrorBarsController } from 'chartjs-chart-error-bars';
 
 import { maxInData } from './prevalence-over-time';
@@ -7,7 +7,7 @@ import {
     type PrevalenceOverTimeVariantData,
     type PrevalenceOverTimeVariantDataPoint,
 } from '../../query/queryPrevalenceOverTime';
-import type { Temporal } from '../../utils/temporal';
+import { sortNullToBeginningThenByDate } from '../../utils/sort';
 import GsChart from '../components/chart';
 import { LogitScale } from '../shared/charts/LogitScale';
 import { singleGraphColorRGBAById } from '../shared/charts/colors';
@@ -67,30 +67,21 @@ const PrevalenceOverTimeBarChart = ({
     return <GsChart configuration={config} />;
 };
 
-function sortNullToBeginningThenByDate(
-    a: { count: number; prevalence: number; total: number; dateRange: Temporal | null },
-    b: {
-        count: number;
-        prevalence: number;
-        total: number;
-        dateRange: Temporal | null;
-    },
-) {
-    return a.dateRange === null
-        ? -1
-        : b.dateRange === null
-          ? 1
-          : a.dateRange.toString().localeCompare(b.dateRange.toString());
-}
-
 const getDataset = (
     prevalenceOverTimeVariant: PrevalenceOverTimeVariantData,
     index: number,
     confidenceIntervalMethod: ConfidenceIntervalMethod,
-) => {
+): ChartDataset<
+    typeof BarWithErrorBarsController.id,
+    {
+        x: string;
+        yMin: number | undefined;
+        yMax: number | undefined;
+        y: number;
+    }[]
+> => {
     return {
         borderWidth: 1,
-        pointRadius: 0,
         label: prevalenceOverTimeVariant.displayName,
         backgroundColor: singleGraphColorRGBAById(index, 0.3),
         borderColor: singleGraphColorRGBAById(index),

package/src/preact/prevalenceOverTime/prevalence-over-time.tsx

@@ -46,18 +46,10 @@ export interface PrevalenceOverTimeInnerProps {
 }
 
 export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
-    numeratorFilter,
-    denominatorFilter,
-    granularity,
-    smoothingWindow,
-    views,
-    confidenceIntervalMethods,
     width,
     height,
     headline = 'Prevalence over time',
-    lapisDateField,
-    pageSize,
-    yAxisMaxConfig,
+    ...innerProps
 }) => {
     const size = { height, width };
 
@@ -65,17 +57,7 @@ export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
         <ErrorBoundary size={size} headline={headline}>
             <ResizeContainer size={size}>
                 <Headline heading={headline}>
-                    <PrevalenceOverTimeInner
-                        numeratorFilter={numeratorFilter}
-                        denominatorFilter={denominatorFilter}
-                        granularity={granularity}
-                        smoothingWindow={smoothingWindow}
-                        views={views}
-                        confidenceIntervalMethods={confidenceIntervalMethods}
-                        lapisDateField={lapisDateField}
-                        pageSize={pageSize}
-                        yAxisMaxConfig={yAxisMaxConfig}
-                    />
+                    <PrevalenceOverTimeInner {...innerProps} />
                 </Headline>
             </ResizeContainer>
         </ErrorBoundary>

package/src/preact/relativeGrowthAdvantage/relative-growth-advantage.tsx

@@ -39,15 +39,10 @@ export interface RelativeGrowthAdvantagePropsInner {
 }
 
 export const RelativeGrowthAdvantage: FunctionComponent<RelativeGrowthAdvantageProps> = ({
-    views,
     width,
     height,
-    numeratorFilter,
-    denominatorFilter,
-    generationTime,
     headline = 'Relative growth advantage',
-    lapisDateField,
-    yAxisMaxConfig,
+    ...innerProps
 }) => {
     const size = { height, width };
 
@@ -55,14 +50,7 @@ export const RelativeGrowthAdvantage: FunctionComponent<RelativeGrowthAdvantageP
         <ErrorBoundary size={size} headline={headline}>
             <ResizeContainer size={size}>
                 <Headline heading={headline}>
-                    <RelativeGrowthAdvantageInner
-                        views={views}
-                        numeratorFilter={numeratorFilter}
-                        denominatorFilter={denominatorFilter}
-                        generationTime={generationTime}
-                        lapisDateField={lapisDateField}
-                        yAxisMaxConfig={yAxisMaxConfig}
-                    />
+                    <RelativeGrowthAdvantageInner {...innerProps} />
                 </Headline>
             </ResizeContainer>
         </ErrorBoundary>

package/src/preact/textInput/text-input.tsx

@@ -20,13 +20,13 @@ export interface TextInputProps extends TextInputInnerProps {
     width: string;
 }
 
-export const TextInput: FunctionComponent<TextInputProps> = ({ width, lapisField, placeholderText, initialValue }) => {
+export const TextInput: FunctionComponent<TextInputProps> = ({ width, ...innerProps }) => {
     const size = { width, height: '3rem' };
 
     return (
         <ErrorBoundary size={size}>
             <ResizeContainer size={size}>
-                <TextInputInner lapisField={lapisField} placeholderText={placeholderText} initialValue={initialValue} />
+                <TextInputInner {...innerProps} />
             </ResizeContainer>
         </ErrorBoundary>
     );

package/src/query/queryAggregatedDataOverTime.ts

@@ -0,0 +1,78 @@
+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, TemporalGranularity } from '../types';
+import {
+    compareTemporal,
+    generateAllInRange,
+    getMinMaxTemporal,
+    type Temporal,
+    TemporalCache,
+} from '../utils/temporal';
+
+export function queryAggregatedDataOverTime<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/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);
+}