@genspectrum/dashboard-components 0.1.1

package/src/preact/relativeGrowthAdvantage/__mockData__/numerator.json

@@ -0,0 +1,332 @@
+{
+    "errors": [],
+    "info": {
+        "apiVersion": 1,
+        "dataVersion": 1709685650,
+        "deprecationDate": null,
+        "deprecationInfo": null,
+        "acknowledgement": null
+    },
+    "data": [
+        {
+            "date": "2021-01-30",
+            "count": 72
+        },
+        {
+            "date": "2021-01-31",
+            "count": 53
+        },
+        {
+            "date": "2021-02-01",
+            "count": 153
+        },
+        {
+            "date": "2021-02-02",
+            "count": 82
+        },
+        {
+            "date": "2021-02-03",
+            "count": 80
+        },
+        {
+            "date": "2021-02-04",
+            "count": 75
+        },
+        {
+            "date": "2021-02-05",
+            "count": 119
+        },
+        {
+            "date": "2021-02-06",
+            "count": 66
+        },
+        {
+            "date": "2021-02-07",
+            "count": 51
+        },
+        {
+            "date": "2021-02-08",
+            "count": 73
+        },
+        {
+            "date": "2021-02-09",
+            "count": 66
+        },
+        {
+            "date": "2021-02-10",
+            "count": 55
+        },
+        {
+            "date": "2021-02-11",
+            "count": 75
+        },
+        {
+            "date": "2021-02-12",
+            "count": 69
+        },
+        {
+            "date": "2021-02-13",
+            "count": 75
+        },
+        {
+            "date": "2021-02-14",
+            "count": 47
+        },
+        {
+            "date": "2021-02-15",
+            "count": 67
+        },
+        {
+            "date": "2021-02-16",
+            "count": 66
+        },
+        {
+            "date": "2021-02-17",
+            "count": 82
+        },
+        {
+            "date": "2021-02-18",
+            "count": 29
+        },
+        {
+            "date": "2021-02-19",
+            "count": 64
+        },
+        {
+            "date": "2021-02-20",
+            "count": 46
+        },
+        {
+            "date": "2021-02-21",
+            "count": 79
+        },
+        {
+            "date": "2021-02-22",
+            "count": 108
+        },
+        {
+            "date": "2021-02-23",
+            "count": 109
+        },
+        {
+            "date": "2021-02-24",
+            "count": 80
+        },
+        {
+            "date": "2021-02-25",
+            "count": 60
+        },
+        {
+            "date": "2021-02-26",
+            "count": 34
+        },
+        {
+            "date": "2021-02-27",
+            "count": 51
+        },
+        {
+            "date": "2021-02-28",
+            "count": 44
+        },
+        {
+            "date": "2021-03-01",
+            "count": 112
+        },
+        {
+            "date": "2020-12-07",
+            "count": 2
+        },
+        {
+            "date": "2020-12-11",
+            "count": 1
+        },
+        {
+            "date": "2020-12-12",
+            "count": 2
+        },
+        {
+            "date": "2020-12-13",
+            "count": 1
+        },
+        {
+            "date": "2020-12-14",
+            "count": 1
+        },
+        {
+            "date": "2020-12-16",
+            "count": 5
+        },
+        {
+            "date": "2020-12-17",
+            "count": 1
+        },
+        {
+            "date": "2020-12-18",
+            "count": 1
+        },
+        {
+            "date": "2020-12-19",
+            "count": 1
+        },
+        {
+            "date": "2020-12-21",
+            "count": 6
+        },
+        {
+            "date": "2020-12-22",
+            "count": 3
+        },
+        {
+            "date": "2020-12-23",
+            "count": 1
+        },
+        {
+            "date": "2020-12-24",
+            "count": 5
+        },
+        {
+            "date": "2020-12-25",
+            "count": 2
+        },
+        {
+            "date": "2020-12-26",
+            "count": 10
+        },
+        {
+            "date": "2020-12-27",
+            "count": 3
+        },
+        {
+            "date": "2020-12-28",
+            "count": 9
+        },
+        {
+            "date": "2020-12-29",
+            "count": 9
+        },
+        {
+            "date": "2020-12-30",
+            "count": 15
+        },
+        {
+            "date": "2020-12-31",
+            "count": 9
+        },
+        {
+            "date": "2021-01-01",
+            "count": 39
+        },
+        {
+            "date": "2021-01-02",
+            "count": 8
+        },
+        {
+            "date": "2021-01-03",
+            "count": 14
+        },
+        {
+            "date": "2021-01-04",
+            "count": 21
+        },
+        {
+            "date": "2021-01-05",
+            "count": 22
+        },
+        {
+            "date": "2021-01-06",
+            "count": 13
+        },
+        {
+            "date": "2021-01-07",
+            "count": 15
+        },
+        {
+            "date": "2021-01-08",
+            "count": 22
+        },
+        {
+            "date": "2021-01-09",
+            "count": 38
+        },
+        {
+            "date": "2021-01-10",
+            "count": 50
+        },
+        {
+            "date": "2021-01-11",
+            "count": 34
+        },
+        {
+            "date": "2021-01-12",
+            "count": 18
+        },
+        {
+            "date": "2021-01-13",
+            "count": 16
+        },
+        {
+            "date": "2021-01-14",
+            "count": 15
+        },
+        {
+            "date": "2021-01-15",
+            "count": 30
+        },
+        {
+            "date": "2021-01-16",
+            "count": 17
+        },
+        {
+            "date": "2021-01-17",
+            "count": 18
+        },
+        {
+            "date": "2021-01-18",
+            "count": 36
+        },
+        {
+            "date": "2021-01-19",
+            "count": 44
+        },
+        {
+            "date": "2021-01-20",
+            "count": 42
+        },
+        {
+            "date": "2021-01-21",
+            "count": 30
+        },
+        {
+            "date": "2021-01-22",
+            "count": 28
+        },
+        {
+            "date": "2021-01-23",
+            "count": 31
+        },
+        {
+            "date": "2021-01-24",
+            "count": 39
+        },
+        {
+            "date": "2021-01-25",
+            "count": 59
+        },
+        {
+            "date": "2021-01-26",
+            "count": 72
+        },
+        {
+            "date": "2021-01-27",
+            "count": 85
+        },
+        {
+            "date": "2021-01-28",
+            "count": 58
+        },
+        {
+            "date": "2021-01-29",
+            "count": 93
+        }
+    ]
+}

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

@@ -0,0 +1,138 @@
+import { Chart, type ChartConfiguration, registerables, type TooltipItem } from 'chart.js';
+
+import { type YearMonthDay } from '../../utils/temporal';
+import GsChart from '../components/chart';
+import { LogitScale } from '../shared/charts/LogitScale';
+import { singleGraphColorRGBByName } from '../shared/charts/colors';
+import { confidenceIntervalDataLabel } from '../shared/charts/confideceInterval';
+import { getYAxisScale, type ScaleType } from '../shared/charts/getYAxisScale';
+
+interface RelativeGrowthAdvantageChartData {
+    t: YearMonthDay[];
+    proportion: number[];
+    ciLower: number[];
+    ciUpper: number[];
+    observed: number[];
+    params: {
+        fd: {
+            value: number;
+            ciLower: number;
+            ciUpper: number;
+        };
+    };
+}
+
+interface RelativeGrowthAdvantageChartProps {
+    data: RelativeGrowthAdvantageChartData;
+    yAxisScaleType: ScaleType;
+}
+
+Chart.register(...registerables, LogitScale);
+
+const RelativeGrowthAdvantageChart = ({ data, yAxisScaleType }: RelativeGrowthAdvantageChartProps) => {
+    const config: ChartConfiguration = {
+        type: 'line',
+        data: {
+            labels: data.t,
+            datasets: datasets(data),
+        },
+        options: {
+            animation: false,
+            scales: {
+                y: getYAxisScale(yAxisScaleType),
+            },
+            plugins: {
+                legend: {
+                    display: false,
+                },
+                tooltip: tooltip(),
+            },
+        },
+    };
+
+    return (
+        <>
+            <GsChart configuration={config} />
+            <div>
+                Advantage: {(data.params.fd.value * 100).toFixed(2)}% ({(data.params.fd.ciLower * 100).toFixed(2)}% -{' '}
+                {(data.params.fd.ciUpper * 100).toFixed(2)}%)
+            </div>
+        </>
+    );
+};
+
+const datasets = (data: RelativeGrowthAdvantageChartData) => {
+    return [
+        {
+            type: 'line' as const,
+            label: 'Prevalence',
+            data: data.proportion,
+            borderWidth: 1,
+            pointRadius: 0,
+            borderColor: singleGraphColorRGBByName('indigo'),
+            backgroundColor: singleGraphColorRGBByName('indigo'),
+        },
+        {
+            type: 'line' as const,
+            label: 'CI Lower',
+            data: data.ciLower,
+            borderWidth: 1,
+            pointRadius: 0,
+            fill: '+1',
+            backgroundColor: singleGraphColorRGBByName('indigo', 0.3),
+        },
+        {
+            type: 'line' as const,
+            label: 'CI Upper',
+            data: data.ciUpper,
+            borderWidth: 1,
+            pointRadius: 0,
+            fill: '-1',
+            backgroundColor: singleGraphColorRGBByName('indigo', 0.3),
+        },
+        {
+            type: 'scatter' as const,
+            label: 'Observed',
+            data: data.observed,
+            pointBackgroundColor: singleGraphColorRGBByName('green'),
+            pointRadius: 2,
+        },
+    ];
+};
+
+const tooltip = () => {
+    return {
+        mode: 'index' as const,
+        intersect: false,
+        filter: ({ datasetIndex }: TooltipItem<'line'>) => {
+            return datasetIndex !== 1 && datasetIndex !== 2;
+        },
+        callbacks: {
+            label: (context: TooltipItem<'line'>) => {
+                switch (context.datasetIndex) {
+                    case 0: {
+                        const value = context.dataset.data[context.dataIndex];
+                        const ciLower = context.dataset.data[context.dataIndex + 1];
+                        const ciUpper = context.dataset.data[context.dataIndex + 2];
+                        if (typeof value !== 'number' || typeof ciLower !== 'number' || typeof ciUpper !== 'number') {
+                            return '';
+                        }
+                        return confidenceIntervalDataLabel(value, ciLower, ciUpper, context.dataset.label);
+                    }
+
+                    case 3: {
+                        const value = context.dataset.data[context.dataIndex];
+                        if (typeof value !== 'number') {
+                            return '';
+                        }
+                        return `Observed: ${value.toFixed(3)}`;
+                    }
+                    default:
+                        return '';
+                }
+            },
+        },
+    };
+};
+
+export default RelativeGrowthAdvantageChart;

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

@@ -0,0 +1,71 @@
+import denominator from './__mockData__/denominator.json';
+import numerator from './__mockData__/numerator.json';
+import { RelativeGrowthAdvantage, type RelativeGrowthAdvantageProps } from './relative-growth-advantage';
+import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
+import { LapisUrlContext } from '../LapisUrlContext';
+
+export default {
+    title: 'Visualization/RelativeGrowthAdvantage',
+    component: RelativeGrowthAdvantage,
+    parameters: {
+        fetchMock: {},
+    },
+};
+
+export const Primary = {
+    render: (args: RelativeGrowthAdvantageProps) => (
+        <LapisUrlContext.Provider value={LAPIS_URL}>
+            <RelativeGrowthAdvantage
+                numerator={args.numerator}
+                denominator={args.denominator}
+                generationTime={args.generationTime}
+                views={args.views}
+            />
+        </LapisUrlContext.Provider>
+    ),
+    args: {
+        numerator: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateFrom: '2020-12-01', dateTo: '2021-03-01' },
+        denominator: { country: 'Switzerland', dateFrom: '2020-12-01', dateTo: '2021-03-01' },
+        generationTime: 7,
+        views: ['line'],
+    },
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'numerator',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            country: 'Switzerland',
+                            pangoLineage: 'B.1.1.7',
+                            dateFrom: '2020-12-01',
+                            dateTo: '2021-03-01',
+                            fields: ['date'],
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: numerator,
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'denominator',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            country: 'Switzerland',
+                            dateFrom: '2020-12-01',
+                            dateTo: '2021-03-01',
+                            fields: ['date'],
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: denominator,
+                    },
+                },
+            ],
+        },
+    },
+};

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

@@ -0,0 +1,136 @@
+import { type FunctionComponent } from 'preact';
+import { useContext, useState } from 'preact/hooks';
+
+import RelativeGrowthAdvantageChart from './relative-growth-advantage-chart';
+import {
+    queryRelativeGrowthAdvantage,
+    type RelativeGrowthAdvantageData,
+} from '../../query/queryRelativeGrowthAdvantage';
+import { type LapisFilter } from '../../types';
+import { LapisUrlContext } from '../LapisUrlContext';
+import { ErrorDisplay } from '../components/error-display';
+import Headline from '../components/headline';
+import Info from '../components/info';
+import { LoadingDisplay } from '../components/loading-display';
+import { NoDataDisplay } from '../components/no-data-display';
+import { ScalingSelector } from '../components/scaling-selector';
+import Tabs from '../components/tabs';
+import { type ScaleType } from '../shared/charts/getYAxisScale';
+import { useQuery } from '../useQuery';
+
+export type View = 'line';
+
+export interface RelativeGrowthAdvantageProps {
+    numerator: LapisFilter;
+    denominator: LapisFilter;
+    generationTime: number;
+    views: View[];
+}
+
+export const RelativeGrowthAdvantage: FunctionComponent<RelativeGrowthAdvantageProps> = ({
+    numerator,
+    denominator,
+    generationTime,
+    views,
+}) => {
+    const lapis = useContext(LapisUrlContext);
+    const [yAxisScaleType, setYAxisScaleType] = useState<ScaleType>('linear');
+
+    const { data, error, isLoading } = useQuery(
+        () => queryRelativeGrowthAdvantage(numerator, denominator, generationTime, lapis),
+        [lapis, numerator, denominator, generationTime, views],
+    );
+
+    const headline = 'Relative growth advantage';
+    if (isLoading) {
+        return (
+            <Headline heading={headline}>
+                <LoadingDisplay />
+            </Headline>
+        );
+    }
+
+    if (error !== null) {
+        return (
+            <Headline heading={headline}>
+                <ErrorDisplay error={error} />
+            </Headline>
+        );
+    }
+
+    if (data === null) {
+        return (
+            <Headline heading={headline}>
+                <NoDataDisplay />
+            </Headline>
+        );
+    }
+
+    return (
+        <Headline heading={headline}>
+            <RelativeGrowthAdvantageTabs
+                data={data}
+                yAxisScaleType={yAxisScaleType}
+                setYAxisScaleType={setYAxisScaleType}
+                views={views}
+            />
+        </Headline>
+    );
+};
+
+type RelativeGrowthAdvantageTabsProps = {
+    data: NonNullable<RelativeGrowthAdvantageData>;
+    yAxisScaleType: ScaleType;
+    setYAxisScaleType: (scaleType: ScaleType) => void;
+    views: View[];
+};
+
+const RelativeGrowthAdvantageTabs: FunctionComponent<RelativeGrowthAdvantageTabsProps> = ({
+    data,
+    yAxisScaleType,
+    setYAxisScaleType,
+    views,
+}) => {
+    const getTab = (view: View) => {
+        switch (view) {
+            case 'line':
+                return {
+                    title: 'Line',
+                    content: (
+                        <RelativeGrowthAdvantageChart
+                            data={{
+                                ...data.estimatedProportions,
+                                observed: data.observedProportions,
+                                params: data.params,
+                            }}
+                            yAxisScaleType={yAxisScaleType}
+                        />
+                    ),
+                };
+        }
+    };
+
+    const tabs = views.map((view) => getTab(view));
+    const toolbar = () => (
+        <RelativeGrowthAdvantageToolbar yAxisScaleType={yAxisScaleType} setYAxisScaleType={setYAxisScaleType} />
+    );
+
+    return <Tabs tabs={tabs} toolbar={toolbar} />;
+};
+
+type RelativeGrowthAdvantageToolbarProps = {
+    yAxisScaleType: ScaleType;
+    setYAxisScaleType: (scaleType: ScaleType) => void;
+};
+
+const RelativeGrowthAdvantageToolbar: FunctionComponent<RelativeGrowthAdvantageToolbarProps> = ({
+    yAxisScaleType,
+    setYAxisScaleType,
+}) => {
+    return (
+        <div class='flex'>
+            <ScalingSelector yAxisScaleType={yAxisScaleType} setYAxisScaleType={setYAxisScaleType} />
+            <Info className='ml-1' content='Line chart' />
+        </div>
+    );
+};