@genspectrum/dashboard-components 0.14.2 → 0.16.0

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

@@ -1,4 +1,5 @@
 import { Chart, type ChartConfiguration, registerables } from 'chart.js';
+import { useMemo } from 'preact/hooks';
 
 import { maxInData } from './prevalence-over-time';
 import { type PrevalenceOverTimeData } from '../../query/queryPrevalenceOverTime';
@@ -15,97 +16,109 @@ interface PrevalenceOverTimeBubbleChartProps {
     data: PrevalenceOverTimeData;
     yAxisScaleType: ScaleType;
     yAxisMaxConfig: YAxisMaxConfig;
+    maintainAspectRatio: boolean;
 }
 
 Chart.register(...registerables, LogitScale);
 
+const NO_DATA = 'noData';
+
 const PrevalenceOverTimeBubbleChart = ({
     data,
     yAxisScaleType,
     yAxisMaxConfig,
+    maintainAspectRatio,
 }: PrevalenceOverTimeBubbleChartProps) => {
-    const nonNullDateRangeData = data
-        .filter((prevalenceOverTimeData) => prevalenceOverTimeData.content.length > 0)
-        .map((variantData) => {
-            return {
-                content: variantData.content.filter((dataPoint) => dataPoint.dateRange !== null),
-                displayName: variantData.displayName,
-            };
-        });
+    const config = useMemo<ChartConfiguration | typeof NO_DATA>(() => {
+        const nonNullDateRangeData = data
+            .filter((prevalenceOverTimeData) => prevalenceOverTimeData.content.length > 0)
+            .map((variantData) => {
+                return {
+                    content: variantData.content.filter((dataPoint) => dataPoint.dateRange !== null),
+                    displayName: variantData.displayName,
+                };
+            });
 
-    if (nonNullDateRangeData.length === 0) {
-        return <NoDataDisplay />;
-    }
+        if (nonNullDateRangeData.length === 0) {
+            return NO_DATA;
+        }
 
-    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 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 maxY =
+            yAxisScaleType !== 'logit'
+                ? getYAxisMax(maxInData(nonNullDateRangeData), yAxisMaxConfig?.[yAxisScaleType])
+                : undefined;
 
-    const config: ChartConfiguration = {
-        type: 'bubble',
-        data: {
-            datasets: nonNullDateRangeData.map((graphData, index) => ({
-                label: graphData.displayName,
-                data: graphData.content
-                    .filter((dataPoint) => dataPoint.dateRange !== null)
-                    .map((dataPoint) => ({
-                        x: minusTemporal(dataPoint.dateRange!, firstDate),
-                        y: dataPoint.prevalence,
-                        r: scaleBubble(dataPoint.total),
-                    })),
-                borderWidth: 1,
-                pointRadius: 0,
-                backgroundColor: singleGraphColorRGBAById(index, 0.3),
-                borderColor: singleGraphColorRGBAById(index),
-            })),
-        },
-        options: {
-            animation: false,
-            maintainAspectRatio: false,
-            scales: {
-                x: {
-                    ticks: {
-                        callback: (value) => addUnit(firstDate, value as number).toString(),
-                    },
-                },
-                y: { ...getYAxisScale(yAxisScaleType), max: maxY },
+        return {
+            type: 'bubble',
+            data: {
+                datasets: nonNullDateRangeData.map((graphData, index) => ({
+                    label: graphData.displayName,
+                    data: graphData.content
+                        .filter((dataPoint) => dataPoint.dateRange !== null)
+                        .map((dataPoint) => ({
+                            x: minusTemporal(dataPoint.dateRange!, firstDate),
+                            y: dataPoint.prevalence,
+                            r: scaleBubble(dataPoint.total),
+                        })),
+                    borderWidth: 1,
+                    pointRadius: 0,
+                    backgroundColor: singleGraphColorRGBAById(index, 0.3),
+                    borderColor: singleGraphColorRGBAById(index),
+                })),
             },
-            plugins: {
-                legend: {
-                    display: false,
-                },
-                tooltip: {
-                    mode: 'index',
-                    intersect: false,
-                    callbacks: {
-                        title: (context) => {
-                            const dataset = nonNullDateRangeData[context[0].datasetIndex];
-                            const dataPoint = dataset.content[context[0].dataIndex];
-                            return dataPoint.dateRange?.toString();
+            options: {
+                animation: false,
+                maintainAspectRatio,
+                scales: {
+                    x: {
+                        ticks: {
+                            callback: (value) => addUnit(firstDate, value as number).toString(),
                         },
-                        label: (context) => {
-                            const dataset = nonNullDateRangeData[context.datasetIndex];
-                            const dataPoint = dataset.content[context.dataIndex];
+                    },
+                    y: { ...getYAxisScale(yAxisScaleType), max: maxY },
+                },
+                plugins: {
+                    legend: {
+                        display: false,
+                    },
+                    tooltip: {
+                        mode: 'index',
+                        intersect: false,
+                        callbacks: {
+                            title: (context) => {
+                                const dataset = nonNullDateRangeData[context[0].datasetIndex];
+                                const dataPoint = dataset.content[context[0].dataIndex];
+                                return dataPoint.dateRange?.toString();
+                            },
+                            label: (context) => {
+                                const dataset = nonNullDateRangeData[context.datasetIndex];
+                                const dataPoint = dataset.content[context.dataIndex];
 
-                            const percentage = (dataPoint.prevalence * 100).toFixed(2);
-                            const count = dataPoint.count.toFixed(0);
-                            const total = dataPoint.total.toFixed(0);
+                                const percentage = (dataPoint.prevalence * 100).toFixed(2);
+                                const count = dataPoint.count.toFixed(0);
+                                const total = dataPoint.total.toFixed(0);
 
-                            return `${dataset.displayName}: ${percentage}%, ${count}/${total} samples`;
+                                return `${dataset.displayName}: ${percentage}%, ${count}/${total} samples`;
+                            },
                         },
                     },
                 },
             },
-        },
-    };
+        } satisfies ChartConfiguration;
+    }, [data, maintainAspectRatio, yAxisMaxConfig, yAxisScaleType]);
+
+    if (config === NO_DATA) {
+        return <NoDataDisplay />;
+    }
 
     return <GsChart configuration={config} />;
 };

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

@@ -1,5 +1,6 @@
 import { Chart, type ChartConfiguration, registerables } from 'chart.js';
 import { type TooltipItem } from 'chart.js/dist/types';
+import { useMemo } from 'preact/hooks';
 
 import { maxInData } from './prevalence-over-time';
 import { type PrevalenceOverTimeData, type PrevalenceOverTimeVariantData } from '../../query/queryPrevalenceOverTime';
@@ -20,57 +21,67 @@ interface PrevalenceOverTimeLineChartProps {
     yAxisScaleType: ScaleType;
     confidenceIntervalMethod: ConfidenceIntervalMethod;
     yAxisMaxConfig: YAxisMaxConfig;
+    maintainAspectRatio: boolean;
 }
 
 Chart.register(...registerables, LogitScale);
 
+const NO_DATA = 'noData';
+
 const PrevalenceOverTimeLineChart = ({
     data,
     yAxisScaleType,
     confidenceIntervalMethod,
     yAxisMaxConfig,
+    maintainAspectRatio,
 }: PrevalenceOverTimeLineChartProps) => {
-    const nonNullDateRangeData = data
-        .filter((prevalenceOverTimeData) => prevalenceOverTimeData.content.length > 0)
-        .map((variantData) => {
-            return {
-                content: variantData.content.filter((dataPoint) => dataPoint.dateRange !== null),
-                displayName: variantData.displayName,
-            };
-        });
+    const config = useMemo<ChartConfiguration | typeof NO_DATA>(() => {
+        const nonNullDateRangeData = data
+            .filter((prevalenceOverTimeData) => prevalenceOverTimeData.content.length > 0)
+            .map((variantData) => {
+                return {
+                    content: variantData.content.filter((dataPoint) => dataPoint.dateRange !== null),
+                    displayName: variantData.displayName,
+                };
+            });
+
+        if (nonNullDateRangeData.length === 0) {
+            return NO_DATA;
+        }
+
+        const datasets = nonNullDateRangeData
+            .map((graphData, index) => getDataset(graphData, index, confidenceIntervalMethod))
+            .flat();
+
+        const maxY =
+            yAxisScaleType !== 'logit'
+                ? getYAxisMax(maxInData(nonNullDateRangeData), yAxisMaxConfig?.[yAxisScaleType])
+                : undefined;
 
-    if (nonNullDateRangeData.length === 0) {
-        return <NoDataDisplay />;
-    }
-
-    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: {
-            datasets,
-        },
-        options: {
-            animation: false,
-            maintainAspectRatio: false,
-            scales: {
-                y: { ...getYAxisScale(yAxisScaleType), max: maxY },
+        return {
+            type: 'line',
+            data: {
+                datasets,
             },
-            plugins: {
-                legend: {
-                    display: false,
+            options: {
+                animation: false,
+                maintainAspectRatio,
+                scales: {
+                    y: { ...getYAxisScale(yAxisScaleType), max: maxY },
+                },
+                plugins: {
+                    legend: {
+                        display: false,
+                    },
+                    tooltip: tooltip(confidenceIntervalMethod),
                 },
-                tooltip: tooltip(confidenceIntervalMethod),
             },
-        },
-    };
+        };
+    }, [data, yAxisScaleType, confidenceIntervalMethod, yAxisMaxConfig, maintainAspectRatio]);
+
+    if (config === NO_DATA) {
+        return <NoDataDisplay />;
+    }
 
     return <GsChart configuration={config} />;
 };

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

@@ -61,7 +61,6 @@ export const TwoVariants: StoryObj<PrevalenceOverTimeProps> = {
         views: ['bar', 'line', 'bubble', 'table'],
         confidenceIntervalMethods: ['none', 'wilson'],
         width: '100%',
-        height: '700px',
         lapisDateField: 'date',
         pageSize: 10,
         yAxisMaxLinear: 1,
@@ -137,7 +136,6 @@ export const OneVariant: StoryObj<PrevalenceOverTimeProps> = {
         views: ['bar', 'line', 'bubble', 'table'],
         confidenceIntervalMethods: ['none', 'wilson'],
         width: '100%',
-        height: '700px',
         lapisDateField: 'date',
         pageSize: 10,
         yAxisMaxLinear: 1,
@@ -197,7 +195,6 @@ export const ShowsNoDataBanner: StoryObj<PrevalenceOverTimeProps> = {
         views: ['bar', 'line', 'bubble', 'table'],
         confidenceIntervalMethods: ['none', 'wilson'],
         width: '100%',
-        height: '700px',
         lapisDateField: 'date',
         pageSize: 10,
         yAxisMaxLinear: 1,

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

@@ -21,6 +21,7 @@ import { ResizeContainer } from '../components/resize-container';
 import { ScalingSelector } from '../components/scaling-selector';
 import Tabs from '../components/tabs';
 import { type ConfidenceIntervalMethod, confidenceIntervalMethodSchema } from '../shared/charts/confideceInterval';
+import { getMaintainAspectRatio } from '../shared/charts/getMaintainAspectRatio';
 import { axisMaxSchema } from '../shared/charts/getYAxisMax';
 import { type ScaleType } from '../shared/charts/getYAxisScale';
 import { useQuery } from '../useQuery';
@@ -35,7 +36,7 @@ export type PrevalenceOverTimeView = z.infer<typeof prevalenceOverTimeViewSchema
 
 const prevalenceOverTimePropsSchema = z.object({
     width: z.string(),
-    height: z.string(),
+    height: z.string().optional(),
     numeratorFilters: z.array(namedLapisFilterSchema).min(1),
     denominatorFilter: lapisFilterSchema,
     granularity: temporalGranularitySchema,
@@ -117,6 +118,7 @@ const PrevalenceOverTimeTabs: FunctionComponent<PrevalenceOverTimeTabsProps> = (
     }, [confidenceIntervalMethods]);
 
     const yAxisMaxConfig = { linear: yAxisMaxLinear, logarithmic: yAxisMaxLogarithmic };
+    const maintainAspectRatio = getMaintainAspectRatio(componentProps.height);
 
     const getTab = (view: PrevalenceOverTimeView) => {
         switch (view) {
@@ -129,6 +131,7 @@ const PrevalenceOverTimeTabs: FunctionComponent<PrevalenceOverTimeTabsProps> = (
                             yAxisScaleType={yAxisScaleType}
                             confidenceIntervalMethod={confidenceIntervalMethod}
                             yAxisMaxConfig={yAxisMaxConfig}
+                            maintainAspectRatio={maintainAspectRatio}
                         />
                     ),
                 };
@@ -141,6 +144,7 @@ const PrevalenceOverTimeTabs: FunctionComponent<PrevalenceOverTimeTabsProps> = (
                             yAxisScaleType={yAxisScaleType}
                             confidenceIntervalMethod={confidenceIntervalMethod}
                             yAxisMaxConfig={yAxisMaxConfig}
+                            maintainAspectRatio={maintainAspectRatio}
                         />
                     ),
                 };
@@ -152,6 +156,7 @@ const PrevalenceOverTimeTabs: FunctionComponent<PrevalenceOverTimeTabsProps> = (
                             data={data}
                             yAxisScaleType={yAxisScaleType}
                             yAxisMaxConfig={yAxisMaxConfig}
+                            maintainAspectRatio={maintainAspectRatio}
                         />
                     ),
                 };

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

@@ -1,4 +1,5 @@
 import { Chart, type ChartConfiguration, registerables, type TooltipItem } from 'chart.js';
+import { useMemo } from 'preact/hooks';
 
 import { type YearMonthDayClass } from '../../utils/temporalClass';
 import GsChart from '../components/chart';
@@ -28,37 +29,44 @@ interface RelativeGrowthAdvantageChartProps {
     data: RelativeGrowthAdvantageChartData;
     yAxisScaleType: ScaleType;
     yAxisMaxConfig: YAxisMaxConfig;
+    maintainAspectRatio: boolean;
 }
 
 Chart.register(...registerables, LogitScale);
 
-const RelativeGrowthAdvantageChart = ({ data, yAxisScaleType, yAxisMaxConfig }: RelativeGrowthAdvantageChartProps) => {
-    const maxY =
-        yAxisScaleType !== 'logit'
-            ? getYAxisMax(Math.max(...data.proportion), yAxisMaxConfig?.[yAxisScaleType])
-            : undefined;
+const RelativeGrowthAdvantageChart = ({
+    data,
+    yAxisScaleType,
+    yAxisMaxConfig,
+    maintainAspectRatio,
+}: RelativeGrowthAdvantageChartProps) => {
+    const config = useMemo<ChartConfiguration>(() => {
+        const maxY =
+            yAxisScaleType !== 'logit'
+                ? getYAxisMax(Math.max(...data.proportion), yAxisMaxConfig?.[yAxisScaleType])
+                : undefined;
 
-    const config: ChartConfiguration = {
-        type: 'line',
-        data: {
-            labels: data.t,
-            datasets: datasets(data),
-        },
-        options: {
-            maintainAspectRatio: false,
-            animation: false,
-
-            scales: {
-                y: { ...getYAxisScale(yAxisScaleType), max: maxY },
+        return {
+            type: 'line',
+            data: {
+                labels: data.t,
+                datasets: datasets(data),
             },
-            plugins: {
-                legend: {
-                    display: false,
+            options: {
+                maintainAspectRatio,
+                animation: false,
+                scales: {
+                    y: { ...getYAxisScale(yAxisScaleType), max: maxY },
+                },
+                plugins: {
+                    legend: {
+                        display: false,
+                    },
+                    tooltip: tooltip(),
                 },
-                tooltip: tooltip(),
             },
-        },
-    };
+        };
+    }, [data, yAxisScaleType, yAxisMaxConfig, maintainAspectRatio]);
 
     return (
         <div className='flex h-full flex-col'>

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

@@ -45,7 +45,6 @@ export const Primary: StoryObj<RelativeGrowthAdvantageProps> = {
         generationTime: 7,
         views: ['line'],
         width: '100%',
-        height: '700px',
         lapisDateField: 'date',
         yAxisMaxLinear: 1,
         yAxisMaxLogarithmic: 1,

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

@@ -18,6 +18,7 @@ import { NoDataDisplay } from '../components/no-data-display';
 import { ResizeContainer } from '../components/resize-container';
 import { ScalingSelector } from '../components/scaling-selector';
 import Tabs from '../components/tabs';
+import { getMaintainAspectRatio } from '../shared/charts/getMaintainAspectRatio';
 import { axisMaxSchema } from '../shared/charts/getYAxisMax';
 import { type ScaleType } from '../shared/charts/getYAxisScale';
 import { useQuery } from '../useQuery';
@@ -27,7 +28,7 @@ export type RelativeGrowthAdvantageView = z.infer<typeof relativeGrowthAdvantage
 
 export const relativeGrowthAdvantagePropsSchema = z.object({
     width: z.string(),
-    height: z.string(),
+    height: z.string().optional(),
     numeratorFilter: lapisFilterSchema,
     denominatorFilter: lapisFilterSchema,
     generationTime: z.number(),
@@ -102,6 +103,8 @@ const RelativeGrowthAdvantageTabs: FunctionComponent<RelativeGrowthAdvantageTabs
     setYAxisScaleType,
     originalComponentProps,
 }) => {
+    const maintainAspectRatio = getMaintainAspectRatio(originalComponentProps.height);
+
     const getTab = (view: RelativeGrowthAdvantageView) => {
         switch (view) {
             case 'line':
@@ -119,6 +122,7 @@ const RelativeGrowthAdvantageTabs: FunctionComponent<RelativeGrowthAdvantageTabs
                                 linear: originalComponentProps.yAxisMaxLinear,
                                 logarithmic: originalComponentProps.yAxisMaxLogarithmic,
                             }}
+                            maintainAspectRatio={maintainAspectRatio}
                         />
                     ),
                 };