@genspectrum/dashboard-components 0.4.4 → 0.5.0

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;

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

@@ -7,9 +7,10 @@ import { formatProportion } from '../shared/table/formatProportion';
 interface PrevalenceOverTimeTableProps {
     data: PrevalenceOverTimeData;
     granularity: TemporalGranularity;
+    pageSize: boolean | number;
 }
 
-const PrevalenceOverTimeTable = ({ data, granularity }: PrevalenceOverTimeTableProps) => {
+const PrevalenceOverTimeTable = ({ data, granularity, pageSize }: PrevalenceOverTimeTableProps) => {
     const getSplitColumns = (data: PrevalenceOverTimeData) => {
         return data.map((dataset) => ({
             name: dataset.displayName,
@@ -40,7 +41,7 @@ const PrevalenceOverTimeTable = ({ data, granularity }: PrevalenceOverTimeTableP
         return Object.values(dataByHeader).map((row) => Object.values(row));
     };
 
-    return <Table data={getData(data, granularity)} columns={getColumns(data)} pagination={false} />;
+    return <Table data={getData(data, granularity)} columns={getColumns(data)} pageSize={pageSize} />;
 };
 
 export default PrevalenceOverTimeTable;

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

@@ -1,8 +1,8 @@
-import denominator from './__mockData__/denominator.json';
-import denominatorOneVariant from './__mockData__/denominatorOneVariant.json';
-import numeratorEG from './__mockData__/numeratorEG.json';
-import numeratorJN1 from './__mockData__/numeratorJN1.json';
-import numeratorOneVariant from './__mockData__/numeratorOneVariant.json';
+import denominatorFilter from './__mockData__/denominatorFilter.json';
+import denominatorOneDataset from './__mockData__/denominatorFilterOneDataset.json';
+import numeratorFilterEG from './__mockData__/numeratorFilterEG.json';
+import numeratorFilterJN1 from './__mockData__/numeratorFilterJN1.json';
+import numeratorOneDataset from './__mockData__/numeratorFilterOneDataset.json';
 import { PrevalenceOverTime, type PrevalenceOverTimeProps } from './prevalence-over-time';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import { LapisUrlContext } from '../LapisUrlContext';
@@ -32,6 +32,8 @@ export default {
         width: { control: 'text' },
         height: { control: 'text' },
         headline: { control: 'text' },
+        pageSize: { control: 'object' },
+        yAxisMaxConfig: { control: 'object' },
     },
 };
 
@@ -39,8 +41,8 @@ const Template = {
     render: (args: PrevalenceOverTimeProps) => (
         <LapisUrlContext.Provider value={LAPIS_URL}>
             <PrevalenceOverTime
-                numerator={args.numerator}
-                denominator={args.denominator}
+                numeratorFilter={args.numeratorFilter}
+                denominatorFilter={args.denominatorFilter}
                 granularity={args.granularity}
                 smoothingWindow={args.smoothingWindow}
                 views={args.views}
@@ -49,6 +51,8 @@ const Template = {
                 height={args.height}
                 headline={args.headline}
                 lapisDateField={args.lapisDateField}
+                pageSize={args.pageSize}
+                yAxisMaxConfig={args.yAxisMaxConfig}
             />
         </LapisUrlContext.Provider>
     ),
@@ -57,11 +61,11 @@ const Template = {
 export const TwoVariants = {
     ...Template,
     args: {
-        numerator: [
+        numeratorFilter: [
             { displayName: 'EG', lapisFilter: { country: 'USA', pangoLineage: 'EG*', dateFrom: '2023-01-01' } },
             { displayName: 'JN.1', lapisFilter: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01' } },
         ],
-        denominator: { country: 'USA', dateFrom: '2023-01-01' },
+        denominatorFilter: { country: 'USA', dateFrom: '2023-01-01' },
         granularity: 'month',
         smoothingWindow: 0,
         views: ['bar', 'line', 'bubble', 'table'],
@@ -70,6 +74,11 @@ export const TwoVariants = {
         height: '700px',
         headline: 'Prevalence over time',
         lapisDateField: 'date',
+        pageSize: 10,
+        yAxisMaxConfig: {
+            linear: 1,
+            logarithmic: 1,
+        },
     },
     parameters: {
         fetchMock: {
@@ -87,7 +96,7 @@ export const TwoVariants = {
                     },
                     response: {
                         status: 200,
-                        body: numeratorEG,
+                        body: numeratorFilterEG,
                     },
                 },
                 {
@@ -103,7 +112,7 @@ export const TwoVariants = {
                     },
                     response: {
                         status: 200,
-                        body: numeratorJN1,
+                        body: numeratorFilterJN1,
                     },
                 },
                 {
@@ -118,7 +127,7 @@ export const TwoVariants = {
                     },
                     response: {
                         status: 200,
-                        body: denominator,
+                        body: denominatorFilter,
                     },
                 },
             ],
@@ -129,11 +138,11 @@ export const TwoVariants = {
 export const OneVariant = {
     ...Template,
     args: {
-        numerator: {
+        numeratorFilter: {
             displayName: 'EG',
             lapisFilter: { country: 'USA', pangoLineage: 'BA.2.86*', dateFrom: '2023-10-01' },
         },
-        denominator: { country: 'USA', dateFrom: '2023-10-01' },
+        denominatorFilter: { country: 'USA', dateFrom: '2023-10-01' },
         granularity: 'day',
         smoothingWindow: 7,
         views: ['bar', 'line', 'bubble', 'table'],
@@ -142,6 +151,11 @@ export const OneVariant = {
         height: '700px',
         headline: 'Prevalence over time',
         lapisDateField: 'date',
+        pageSize: 10,
+        yAxisMaxConfig: {
+            linear: 1,
+            logarithmic: 1,
+        },
     },
     parameters: {
         fetchMock: {
@@ -159,7 +173,7 @@ export const OneVariant = {
                     },
                     response: {
                         status: 200,
-                        body: numeratorOneVariant,
+                        body: numeratorOneDataset,
                     },
                 },
                 {
@@ -174,7 +188,7 @@ export const OneVariant = {
                     },
                     response: {
                         status: 200,
-                        body: denominatorOneVariant,
+                        body: denominatorOneDataset,
                     },
                 },
             ],