@genspectrum/dashboard-components 0.4.5 → 0.5.1

package/src/preact/mutationComparison/mutation-comparison.stories.tsx

@@ -1,24 +1,24 @@
 import { type Meta, type StoryObj } from '@storybook/preact';
 import { expect, userEvent, waitFor, within } from '@storybook/test';
 
-import nucleotideMutationsOtherVariant from './__mockData__/nucleotideMutationsOtherVariant.json';
-import nucleotideMutationsSomeVariant from './__mockData__/nucleotideMutationsSomeVariant.json';
+import nucleotideMutationsOtherDataset from './__mockData__/nucleotideMutationsOtherDataset.json';
+import nucleotideMutationsSomeDataset from './__mockData__/nucleotideMutationsSomeDataset.json';
 import { MutationComparison, type MutationComparisonProps } from './mutation-comparison';
 import { LAPIS_URL, NUCLEOTIDE_MUTATIONS_ENDPOINT } from '../../constants';
 import referenceGenome from '../../lapisApi/__mockData__/referenceGenome.json';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
 
-const dateToSomeVariant = '2022-01-01';
+const dateToSomeDataset = '2022-01-01';
 
-const dateFromOtherVariant = '2021-01-01';
-const dateToOtherVariant = '2022-01-02';
+const dateFromOtherDataset = '2021-01-01';
+const dateToOtherDataset = '2022-01-02';
 
 const meta: Meta<MutationComparisonProps> = {
     title: 'Visualization/Mutation comparison',
     component: MutationComparison,
     argTypes: {
-        variants: [{ control: 'object' }],
+        lapisFilters: [{ control: 'object' }],
         sequenceType: {
             options: ['nucleotide', 'amino acid'],
             control: { type: 'radio' },
@@ -42,13 +42,13 @@ const meta: Meta<MutationComparisonProps> = {
                         body: {
                             country: 'Switzerland',
                             pangoLineage: 'B.1.1.7',
-                            dateTo: dateToSomeVariant,
+                            dateTo: dateToSomeDataset,
                             minProportion: 0,
                         },
                     },
                     response: {
                         status: 200,
-                        body: nucleotideMutationsSomeVariant,
+                        body: nucleotideMutationsSomeDataset,
                     },
                 },
                 {
@@ -58,14 +58,14 @@ const meta: Meta<MutationComparisonProps> = {
                         body: {
                             country: 'Switzerland',
                             pangoLineage: 'B.1.1.7',
-                            dateFrom: dateFromOtherVariant,
-                            dateTo: dateToOtherVariant,
+                            dateFrom: dateFromOtherDataset,
+                            dateTo: dateToOtherDataset,
                             minProportion: 0,
                         },
                     },
                     response: {
                         status: 200,
-                        body: nucleotideMutationsOtherVariant,
+                        body: nucleotideMutationsOtherDataset,
                     },
                 },
             ],
@@ -80,7 +80,7 @@ const Template: StoryObj<MutationComparisonProps> = {
         <LapisUrlContext.Provider value={LAPIS_URL}>
             <ReferenceGenomeContext.Provider value={referenceGenome}>
                 <MutationComparison
-                    variants={args.variants}
+                    lapisFilters={args.lapisFilters}
                     sequenceType={args.sequenceType}
                     views={args.views}
                     width={args.width}
@@ -96,18 +96,18 @@ const Template: StoryObj<MutationComparisonProps> = {
 export const TwoVariants: StoryObj<MutationComparisonProps> = {
     ...Template,
     args: {
-        variants: [
+        lapisFilters: [
             {
-                displayName: 'Some variant',
-                lapisFilter: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo: dateToSomeVariant },
+                displayName: 'Some dataset',
+                lapisFilter: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo: dateToSomeDataset },
             },
             {
-                displayName: 'Other variant',
+                displayName: 'Other dataset',
                 lapisFilter: {
                     country: 'Switzerland',
                     pangoLineage: 'B.1.1.7',
-                    dateFrom: dateFromOtherVariant,
-                    dateTo: dateToOtherVariant,
+                    dateFrom: dateFromOtherDataset,
+                    dateTo: dateToOtherDataset,
                 },
             },
         ],

package/src/preact/mutationComparison/mutation-comparison.tsx

@@ -31,14 +31,14 @@ export interface MutationComparisonProps extends MutationComparisonInnerProps {
 }
 
 export interface MutationComparisonInnerProps {
-    variants: NamedLapisFilter[];
+    lapisFilters: NamedLapisFilter[];
     sequenceType: SequenceType;
     views: View[];
     pageSize: boolean | number;
 }
 
 export const MutationComparison: FunctionComponent<MutationComparisonProps> = ({
-    variants,
+    lapisFilters,
     sequenceType,
     views,
     width,
@@ -53,7 +53,7 @@ export const MutationComparison: FunctionComponent<MutationComparisonProps> = ({
             <ResizeContainer size={size}>
                 <Headline heading={headline}>
                     <MutationComparisonInner
-                        variants={variants}
+                        lapisFilters={lapisFilters}
                         sequenceType={sequenceType}
                         views={views}
                         pageSize={pageSize}
@@ -65,7 +65,7 @@ export const MutationComparison: FunctionComponent<MutationComparisonProps> = ({
 };
 
 export const MutationComparisonInner: FunctionComponent<MutationComparisonInnerProps> = ({
-    variants,
+    lapisFilters,
     sequenceType,
     views,
     pageSize,
@@ -73,8 +73,8 @@ export const MutationComparisonInner: FunctionComponent<MutationComparisonInnerP
     const lapis = useContext(LapisUrlContext);
 
     const { data, error, isLoading } = useQuery(async () => {
-        return queryMutationData(variants, sequenceType, lapis);
-    }, [variants, sequenceType, lapis]);
+        return queryMutationData(lapisFilters, sequenceType, lapis);
+    }, [lapisFilters, sequenceType, lapis]);
 
     if (isLoading) {
         return <LoadingDisplay />;

package/src/preact/mutationComparison/queryMutationData.ts

@@ -9,15 +9,15 @@ export type MutationData = {
 };
 
 export async function queryMutationData(
-    variants: NamedLapisFilter[],
+    lapisFilters: NamedLapisFilter[],
     sequenceType: 'nucleotide' | 'amino acid',
     lapis: string,
 ) {
     const mutationData = await Promise.all(
-        variants.map(async (variant) => {
+        lapisFilters.map(async (filter) => {
             return {
-                displayName: variant.displayName,
-                data: (await querySubstitutionsOrDeletions(variant.lapisFilter, sequenceType, lapis)).content,
+                displayName: filter.displayName,
+                data: (await querySubstitutionsOrDeletions(filter.lapisFilter, sequenceType, lapis)).content,
             };
         }),
     );

package/src/preact/mutations/mutations.stories.tsx

@@ -13,7 +13,7 @@ const meta: Meta<MutationsProps> = {
     title: 'Visualization/Mutations',
     component: Mutations,
     argTypes: {
-        variant: { control: 'object' },
+        lapisFilter: { control: 'object' },
         sequenceType: {
             options: ['nucleotide', 'amino acid'],
             control: { type: 'radio' },
@@ -36,7 +36,7 @@ const Template = {
         <LapisUrlContext.Provider value={LAPIS_URL}>
             <ReferenceGenomeContext.Provider value={referenceGenome}>
                 <Mutations
-                    variant={args.variant}
+                    lapisFilter={args.lapisFilter}
                     sequenceType={args.sequenceType}
                     views={args.views}
                     width={args.width}
@@ -52,7 +52,7 @@ const Template = {
 export const Default: StoryObj<MutationsProps> = {
     ...Template,
     args: {
-        variant: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo: '2022-01-01' },
+        lapisFilter: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo: '2022-01-01' },
         sequenceType: 'nucleotide',
         views: ['grid', 'table', 'insertions'],
         width: '100%',

package/src/preact/mutations/mutations.tsx

@@ -32,7 +32,7 @@ import { useQuery } from '../useQuery';
 export type View = 'table' | 'grid' | 'insertions';
 
 export interface MutationsInnerProps {
-    variant: LapisFilter;
+    lapisFilter: LapisFilter;
     sequenceType: SequenceType;
     views: View[];
     pageSize: boolean | number;
@@ -45,7 +45,7 @@ export interface MutationsProps extends MutationsInnerProps {
 }
 
 export const Mutations: FunctionComponent<MutationsProps> = ({
-    variant,
+    lapisFilter,
     sequenceType,
     views,
     width,
@@ -59,18 +59,28 @@ export const Mutations: FunctionComponent<MutationsProps> = ({
         <ErrorBoundary size={size} headline={headline}>
             <ResizeContainer size={size}>
                 <Headline heading={headline}>
-                    <MutationsInner variant={variant} sequenceType={sequenceType} views={views} pageSize={pageSize} />
+                    <MutationsInner
+                        lapisFilter={lapisFilter}
+                        sequenceType={sequenceType}
+                        views={views}
+                        pageSize={pageSize}
+                    />
                 </Headline>
             </ResizeContainer>
         </ErrorBoundary>
     );
 };
 
-export const MutationsInner: FunctionComponent<MutationsInnerProps> = ({ variant, sequenceType, views, pageSize }) => {
+export const MutationsInner: FunctionComponent<MutationsInnerProps> = ({
+    lapisFilter,
+    sequenceType,
+    views,
+    pageSize,
+}) => {
     const lapis = useContext(LapisUrlContext);
     const { data, error, isLoading } = useQuery(async () => {
-        return queryMutationsData(variant, sequenceType, lapis);
-    }, [variant, sequenceType, lapis]);
+        return queryMutationsData(lapisFilter, sequenceType, lapis);
+    }, [lapisFilter, sequenceType, lapis]);
 
     if (isLoading) {
         return <LoadingDisplay />;

package/src/preact/mutations/queryMutations.ts

@@ -10,12 +10,12 @@ import { type DisplayedSegment } from '../components/SegmentSelector';
 import { type DisplayedMutationType } from '../components/mutation-type-selector';
 
 export async function queryMutationsData(
-    variant: LapisFilter,
+    lapisFilter: LapisFilter,
     sequenceType: 'nucleotide' | 'amino acid',
     lapis: string,
 ) {
-    const substitutionsOrDeletions = (await querySubstitutionsOrDeletions(variant, sequenceType, lapis)).content;
-    const insertions = (await queryInsertions(variant, sequenceType, lapis)).content;
+    const substitutionsOrDeletions = (await querySubstitutionsOrDeletions(lapisFilter, sequenceType, lapis)).content;
+    const insertions = (await queryInsertions(lapisFilter, sequenceType, lapis)).content;
 
     return {
         substitutionsOrDeletions,

package/src/preact/prevalenceOverTime/__mockData__/{denominatorOneVariant.json → denominatorFilterOneDataset.json}

@@ -25,7 +25,7 @@
             "count": 289
         },
         {
-            "date": "2023-11-24",
+            "date": null,
             "count": 516
         },
         {

package/src/preact/prevalenceOverTime/__mockData__/{numeratorOneVariant.json → numeratorFilterOneDataset.json}

@@ -25,7 +25,7 @@
             "count": 27
         },
         {
-            "date": "2023-11-24",
+            "date": null,
             "count": 62
         },
         {

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

@@ -1,17 +1,21 @@
 import { Chart, type ChartConfiguration, registerables, type TooltipItem } from 'chart.js';
 import { BarWithErrorBar, BarWithErrorBarsController } from 'chartjs-chart-error-bars';
 
+import { maxInData } from './prevalence-over-time';
 import { type PrevalenceOverTimeData, type PrevalenceOverTimeVariantData } from '../../query/queryPrevalenceOverTime';
+import type { Temporal } from '../../utils/temporal';
 import GsChart from '../components/chart';
 import { LogitScale } from '../shared/charts/LogitScale';
 import { singleGraphColorRGBAById } from '../shared/charts/colors';
 import { type ConfidenceIntervalMethod, wilson95PercentConfidenceInterval } from '../shared/charts/confideceInterval';
+import { getYAxisMax, type YAxisMaxConfig } from '../shared/charts/getYAxisMax';
 import { getYAxisScale, type ScaleType } from '../shared/charts/getYAxisScale';
 
 interface PrevalenceOverTimeBarChartProps {
     data: PrevalenceOverTimeData;
     yAxisScaleType: ScaleType;
     confidenceIntervalMethod: ConfidenceIntervalMethod;
+    yAxisMaxConfig: YAxisMaxConfig;
 }
 
 Chart.register(...registerables, LogitScale, BarWithErrorBarsController, BarWithErrorBar);
@@ -20,18 +24,32 @@ const PrevalenceOverTimeBarChart = ({
     data,
     yAxisScaleType,
     confidenceIntervalMethod,
+    yAxisMaxConfig,
 }: PrevalenceOverTimeBarChartProps) => {
+    const nullFirstData = data.map((variantData) => {
+        return {
+            content: variantData.content.sort(sortNullToBeginningThenByDate),
+            displayName: variantData.displayName,
+        };
+    });
+
+    const datasets = nullFirstData.map((graphData, index) => getDataset(graphData, index, confidenceIntervalMethod));
+
+    const maxY =
+        yAxisScaleType !== 'logit'
+            ? getYAxisMax(maxInData(nullFirstData), yAxisMaxConfig?.[yAxisScaleType])
+            : undefined;
+
     const config: ChartConfiguration = {
         type: BarWithErrorBarsController.id,
         data: {
-            labels: data[0]?.content.map((dateRange) => dateRange.dateRange?.toString() ?? 'Unknown') || [],
-            datasets: data.map((graphData, index) => datasets(graphData, index, confidenceIntervalMethod)),
+            datasets,
         },
         options: {
             maintainAspectRatio: false,
             animation: false,
             scales: {
-                y: getYAxisScale(yAxisScaleType),
+                y: { ...getYAxisScale(yAxisScaleType), max: maxY },
             },
             plugins: {
                 legend: {
@@ -45,7 +63,23 @@ const PrevalenceOverTimeBarChart = ({
     return <GsChart configuration={config} />;
 };
 
-const datasets = (
+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,
@@ -66,12 +100,15 @@ const datasets = (
                     y: dataPoint.prevalence,
                     yMin: wilson95PercentConfidenceInterval(dataPoint.count, dataPoint.total).lowerLimit,
                     yMax: wilson95PercentConfidenceInterval(dataPoint.count, dataPoint.total).upperLimit,
+                    x: dataPoint.dateRange?.toString() ?? 'Unknown',
                 })),
             };
         default:
             return {
                 ...generalConfig,
-                data: prevalenceOverTimeVariant.content.map((dataPoint) => dataPoint.prevalence),
+                data: prevalenceOverTimeVariant.content.map((dataPoint) => {
+                    return { y: dataPoint.prevalence, x: dataPoint.dateRange };
+                }),
             };
     }
 };

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

@@ -1,32 +1,51 @@
 import { Chart, type ChartConfiguration, registerables } from 'chart.js';
 
+import { maxInData } from './prevalence-over-time';
 import { type PrevalenceOverTimeData } from '../../query/queryPrevalenceOverTime';
 import { addUnit, minusTemporal } from '../../utils/temporal';
 import { getMinMaxNumber } from '../../utils/utils';
 import GsChart from '../components/chart';
 import { LogitScale } from '../shared/charts/LogitScale';
 import { singleGraphColorRGBAById } from '../shared/charts/colors';
+import { getYAxisMax, type YAxisMaxConfig } from '../shared/charts/getYAxisMax';
 import { getYAxisScale, type ScaleType } from '../shared/charts/getYAxisScale';
 
 interface PrevalenceOverTimeBubbleChartProps {
     data: PrevalenceOverTimeData;
     yAxisScaleType: ScaleType;
+    yAxisMaxConfig: YAxisMaxConfig;
 }
 
 Chart.register(...registerables, LogitScale);
 
-const PrevalenceOverTimeBubbleChart = ({ data, yAxisScaleType }: PrevalenceOverTimeBubbleChartProps) => {
-    const firstDate = data[0].content[0].dateRange!;
-    const total = data.map((graphData) => graphData.content.map((dataPoint) => dataPoint.total)).flat();
+const PrevalenceOverTimeBubbleChart = ({
+    data,
+    yAxisScaleType,
+    yAxisMaxConfig,
+}: PrevalenceOverTimeBubbleChartProps) => {
+    const nonNullDateRangeData = data.map((variantData) => {
+        return {
+            content: variantData.content.filter((dataPoint) => dataPoint.dateRange !== null),
+            displayName: variantData.displayName,
+        };
+    });
+
+    const firstDate = nonNullDateRangeData[0].content[0].dateRange!;
+    const total = nonNullDateRangeData.map((graphData) => graphData.content.map((dataPoint) => dataPoint.total)).flat();
     const [minTotal, maxTotal] = getMinMaxNumber(total)!;
     const scaleBubble = (value: number) => {
         return ((value - minTotal) / (maxTotal - minTotal)) * 4.5 + 0.5;
     };
 
+    const maxY =
+        yAxisScaleType !== 'logit'
+            ? getYAxisMax(maxInData(nonNullDateRangeData), yAxisMaxConfig?.[yAxisScaleType])
+            : undefined;
+
     const config: ChartConfiguration = {
         type: 'bubble',
         data: {
-            datasets: data.map((graphData, index) => ({
+            datasets: nonNullDateRangeData.map((graphData, index) => ({
                 label: graphData.displayName,
                 data: graphData.content
                     .filter((dataPoint) => dataPoint.dateRange !== null)
@@ -50,7 +69,7 @@ const PrevalenceOverTimeBubbleChart = ({ data, yAxisScaleType }: PrevalenceOverT
                         callback: (value) => addUnit(firstDate, value as number).toString(),
                     },
                 },
-                y: getYAxisScale(yAxisScaleType),
+                y: { ...getYAxisScale(yAxisScaleType), max: maxY },
             },
             plugins: {
                 legend: {
@@ -61,12 +80,12 @@ const PrevalenceOverTimeBubbleChart = ({ data, yAxisScaleType }: PrevalenceOverT
                     intersect: false,
                     callbacks: {
                         title: (context) => {
-                            const dataset = data[context[0].datasetIndex!];
+                            const dataset = nonNullDateRangeData[context[0].datasetIndex!];
                             const dataPoint = dataset.content[context[0].dataIndex!];
                             return dataPoint.dateRange?.toString();
                         },
                         label: (context) => {
-                            const dataset = data[context.datasetIndex!];
+                            const dataset = nonNullDateRangeData[context.datasetIndex!];
                             const dataPoint = dataset.content[context.dataIndex!];
 
                             const percentage = (dataPoint.prevalence * 100).toFixed(2);

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

@@ -1,6 +1,7 @@
 import { Chart, type ChartConfiguration, registerables } from 'chart.js';
 import { type TooltipItem } from 'chart.js/dist/types';
 
+import { maxInData } from './prevalence-over-time';
 import { type PrevalenceOverTimeData, type PrevalenceOverTimeVariantData } from '../../query/queryPrevalenceOverTime';
 import GsChart from '../components/chart';
 import { LogitScale } from '../shared/charts/LogitScale';
@@ -10,12 +11,14 @@ import {
     type ConfidenceIntervalMethod,
     wilson95PercentConfidenceInterval,
 } from '../shared/charts/confideceInterval';
+import { getYAxisMax, type YAxisMaxConfig } from '../shared/charts/getYAxisMax';
 import { getYAxisScale, type ScaleType } from '../shared/charts/getYAxisScale';
 
 interface PrevalenceOverTimeLineChartProps {
     data: PrevalenceOverTimeData;
     yAxisScaleType: ScaleType;
     confidenceIntervalMethod: ConfidenceIntervalMethod;
+    yAxisMaxConfig: YAxisMaxConfig;
 }
 
 Chart.register(...registerables, LogitScale);
@@ -24,21 +27,34 @@ const PrevalenceOverTimeLineChart = ({
     data,
     yAxisScaleType,
     confidenceIntervalMethod,
+    yAxisMaxConfig,
 }: PrevalenceOverTimeLineChartProps) => {
-    const datasets = data.map((graphData, index) => getDataset(graphData, index, confidenceIntervalMethod)).flat();
-    const labels = data[0]?.content.map((dateRange) => dateRange.dateRange?.toString() ?? 'Unknown') || [];
+    const nonNullDateRangeData = data.map((variantData) => {
+        return {
+            content: variantData.content.filter((dataPoint) => dataPoint.dateRange !== null),
+            displayName: variantData.displayName,
+        };
+    });
+
+    const datasets = nonNullDateRangeData
+        .map((graphData, index) => getDataset(graphData, index, confidenceIntervalMethod))
+        .flat();
+
+    const maxY =
+        yAxisScaleType !== 'logit'
+            ? getYAxisMax(maxInData(nonNullDateRangeData), yAxisMaxConfig?.[yAxisScaleType])
+            : undefined;
 
     const config: ChartConfiguration = {
         type: 'line',
         data: {
-            labels,
             datasets,
         },
         options: {
             animation: false,
             maintainAspectRatio: false,
             scales: {
-                y: getYAxisScale(yAxisScaleType),
+                y: { ...getYAxisScale(yAxisScaleType), max: maxY },
             },
             plugins: {
                 legend: {
@@ -71,9 +87,12 @@ const getDataset = (
 
 const getDatasetCIUpper = (prevalenceOverTimeVariant: PrevalenceOverTimeVariantData, dataIndex: number) => ({
     label: `${prevalenceOverTimeVariant.displayName} CI upper`,
-    data: prevalenceOverTimeVariant.content.map(
-        (dataPoint) => wilson95PercentConfidenceInterval(dataPoint.count, dataPoint.total).upperLimit,
-    ),
+    data: prevalenceOverTimeVariant.content.map((dataPoint): Datapoint => {
+        return {
+            y: wilson95PercentConfidenceInterval(dataPoint.count, dataPoint.total).upperLimit,
+            x: dataPoint.dateRange?.toString(),
+        };
+    }),
     borderWidth: 0,
     pointRadius: 0,
     fill: '+1',
@@ -82,9 +101,12 @@ const getDatasetCIUpper = (prevalenceOverTimeVariant: PrevalenceOverTimeVariantD
 
 const getDatasetCILower = (prevalenceOverTimeVariant: PrevalenceOverTimeVariantData, dataIndex: number) => ({
     label: `${prevalenceOverTimeVariant.displayName} CI lower`,
-    data: prevalenceOverTimeVariant.content.map(
-        (dataPoint) => wilson95PercentConfidenceInterval(dataPoint.count, dataPoint.total).lowerLimit,
-    ),
+    data: prevalenceOverTimeVariant.content.map((dataPoint): Datapoint => {
+        return {
+            y: wilson95PercentConfidenceInterval(dataPoint.count, dataPoint.total).lowerLimit,
+            x: dataPoint.dateRange?.toString(),
+        };
+    }),
     borderWidth: 0,
     pointRadius: 0,
     fill: '-1',
@@ -93,13 +115,29 @@ const getDatasetCILower = (prevalenceOverTimeVariant: PrevalenceOverTimeVariantD
 
 const getDatasetLine = (prevalenceOverTimeVariant: PrevalenceOverTimeVariantData, dataIndex: number) => ({
     label: prevalenceOverTimeVariant.displayName,
-    data: prevalenceOverTimeVariant.content.map((dataPoint) => dataPoint.prevalence),
+    data: prevalenceOverTimeVariant.content.map((dataPoint): Datapoint => {
+        const ciLimits = wilson95PercentConfidenceInterval(dataPoint.count, dataPoint.total);
+
+        return {
+            y: dataPoint.prevalence,
+            x: dataPoint.dateRange?.toString(),
+            yCiUpper: ciLimits.upperLimit,
+            yCiLower: ciLimits.lowerLimit,
+        };
+    }),
     borderWidth: 1,
     pointRadius: 0,
     borderColor: singleGraphColorRGBAById(dataIndex),
     backgroundColor: singleGraphColorRGBAById(dataIndex),
 });
 
+interface Datapoint {
+    y: number;
+    yCiLower?: number;
+    yCiUpper?: number;
+    x?: string;
+}
+
 const tooltip = (confidenceIntervalMethod?: ConfidenceIntervalMethod) => {
     const generalConfig = {
         mode: 'index' as const,
@@ -111,26 +149,18 @@ const tooltip = (confidenceIntervalMethod?: ConfidenceIntervalMethod) => {
             return {
                 ...generalConfig,
                 filter: ({ datasetIndex }: TooltipItem<'line'>) => {
-                    return datasetIndex % 3 === 1;
+                    return isNotCiIndex(datasetIndex);
                 },
                 callbacks: {
                     label: (context: TooltipItem<'line'>) => {
-                        if (context.datasetIndex % 3 === 1) {
-                            const value = context.dataset.data[context.dataIndex];
-                            const ciLower = context.dataset.data[context.dataIndex - 1];
-                            const ciUpper = context.dataset.data[context.dataIndex + 1];
-
-                            if (
-                                typeof value !== 'number' ||
-                                typeof ciLower !== 'number' ||
-                                typeof ciUpper !== 'number'
-                            ) {
-                                return '';
-                            }
-
-                            return confidenceIntervalDataLabel(value, ciLower, ciUpper, context.dataset.label);
-                        }
-                        return context.dataset.label;
+                        const dataPoint = context.dataset.data[context.dataIndex] as unknown as Datapoint;
+
+                        return confidenceIntervalDataLabel(
+                            dataPoint.y,
+                            dataPoint.yCiLower,
+                            dataPoint.yCiUpper,
+                            context.dataset.label,
+                        );
                     },
                 },
             };
@@ -139,4 +169,8 @@ const tooltip = (confidenceIntervalMethod?: ConfidenceIntervalMethod) => {
     }
 };
 
+function isNotCiIndex(datasetIndex: number) {
+    return datasetIndex % 3 === 1;
+}
+
 export default PrevalenceOverTimeLineChart;