@genspectrum/dashboard-components 0.5.4 → 0.5.6

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

@@ -0,0 +1,59 @@
+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 NumberSequencesOverTimeLineChart = ({ data }: NumberSequencesOverBarChartProps) => {
+    const config: ChartConfiguration = useMemo(
+        () => ({
+            type: 'line',
+            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,
+                pointRadius: 0,
+                label: displayName,
+                backgroundColor: singleGraphColorRGBAById(index, 0.3),
+                borderColor: singleGraphColorRGBAById(index),
+                data: tableData.map((row) => ({
+                    x: row.date,
+                    y: row[displayName],
+                })),
+            }) as ChartDataset<'line', { 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} />;
+};

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,106 @@
+import { useContext } from 'preact/hooks';
+
+import { NumberSequencesOverTimeBarChart } from './number-sequences-over-time-bar-chart';
+import { NumberSequencesOverTimeLineChart } from './number-sequences-over-time-line-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: <NumberSequencesOverTimeLineChart data={data} /> };
+            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 };
+}