@genspectrum/dashboard-components 0.15.0 → 0.16.1

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

@@ -10,11 +10,16 @@ import { getYAxisScale, type ScaleType } from '../shared/charts/getYAxisScale';
 interface NumberSequencesOverBarChartProps {
     data: NumberOfSequencesDatasets;
     yAxisScaleType: ScaleType;
+    maintainAspectRatio: boolean;
 }
 
 Chart.register(...registerables);
 
-export const NumberSequencesOverTimeBarChart = ({ data, yAxisScaleType }: NumberSequencesOverBarChartProps) => {
+export const NumberSequencesOverTimeBarChart = ({
+    data,
+    yAxisScaleType,
+    maintainAspectRatio,
+}: NumberSequencesOverBarChartProps) => {
     const config: ChartConfiguration = useMemo(
         () => ({
             type: 'bar',
@@ -22,7 +27,7 @@ export const NumberSequencesOverTimeBarChart = ({ data, yAxisScaleType }: Number
                 datasets: getDatasets(data),
             },
             options: {
-                maintainAspectRatio: false,
+                maintainAspectRatio,
                 animation: false,
                 scales: {
                     y: {
@@ -40,7 +45,7 @@ export const NumberSequencesOverTimeBarChart = ({ data, yAxisScaleType }: Number
                 },
             },
         }),
-        [data, yAxisScaleType],
+        [data, maintainAspectRatio, yAxisScaleType],
     );
 
     return <GsChart configuration={config} />;

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

@@ -10,11 +10,16 @@ import { getYAxisScale, type ScaleType } from '../shared/charts/getYAxisScale';
 interface NumberSequencesOverBarChartProps {
     data: NumberOfSequencesDatasets;
     yAxisScaleType: ScaleType;
+    maintainAspectRatio: boolean;
 }
 
 Chart.register(...registerables);
 
-export const NumberSequencesOverTimeLineChart = ({ data, yAxisScaleType }: NumberSequencesOverBarChartProps) => {
+export const NumberSequencesOverTimeLineChart = ({
+    data,
+    yAxisScaleType,
+    maintainAspectRatio,
+}: NumberSequencesOverBarChartProps) => {
     const config: ChartConfiguration = useMemo(
         () => ({
             type: 'line',
@@ -22,7 +27,7 @@ export const NumberSequencesOverTimeLineChart = ({ data, yAxisScaleType }: Numbe
                 datasets: getDatasets(data),
             },
             options: {
-                maintainAspectRatio: false,
+                maintainAspectRatio,
                 animation: false,
                 scales: {
                     y: {
@@ -40,7 +45,7 @@ export const NumberSequencesOverTimeLineChart = ({ data, yAxisScaleType }: Numbe
                 },
             },
         }),
-        [data, yAxisScaleType],
+        [data, maintainAspectRatio, yAxisScaleType],
     );
 
     return <GsChart configuration={config} />;

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

@@ -24,6 +24,9 @@ export default {
             control: { type: 'check' },
         },
         pageSize: { control: 'object' },
+        height: {
+            control: 'text',
+        },
     },
 };
 
@@ -40,7 +43,6 @@ const Template: StoryObj<NumberSequencesOverTimeProps> = {
         ],
         lapisDateField: 'date',
         width: '100%',
-        height: '700px',
         smoothingWindow: 0,
         granularity: 'month',
         pageSize: 10,

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

@@ -21,6 +21,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 type { ScaleType } from '../shared/charts/getYAxisScale';
 import { useQuery } from '../useQuery';
 
@@ -33,7 +34,7 @@ export type NumberSequencesOverTimeView = z.infer<typeof numberSequencesOverTime
 
 const numberSequencesOverTimePropsSchema = z.object({
     width: z.string(),
-    height: z.string(),
+    height: z.string().optional(),
     lapisFilters: z.array(namedLapisFilterSchema).min(1),
     lapisDateField: z.string().min(1),
     views: z.array(numberSequencesOverTimeViewSchema),
@@ -89,17 +90,31 @@ interface NumberSequencesOverTimeTabsProps {
 const NumberSequencesOverTimeTabs = ({ data, originalComponentProps }: NumberSequencesOverTimeTabsProps) => {
     const [yAxisScaleType, setYAxisScaleType] = useState<ScaleType>('linear');
 
+    const maintainAspectRatio = getMaintainAspectRatio(originalComponentProps.height);
+
     const getTab = (view: NumberSequencesOverTimeView) => {
         switch (view) {
             case 'bar':
                 return {
                     title: 'Bar',
-                    content: <NumberSequencesOverTimeBarChart data={data} yAxisScaleType={yAxisScaleType} />,
+                    content: (
+                        <NumberSequencesOverTimeBarChart
+                            data={data}
+                            yAxisScaleType={yAxisScaleType}
+                            maintainAspectRatio={maintainAspectRatio}
+                        />
+                    ),
                 };
             case 'line':
                 return {
                     title: 'Line',
-                    content: <NumberSequencesOverTimeLineChart data={data} yAxisScaleType={yAxisScaleType} />,
+                    content: (
+                        <NumberSequencesOverTimeLineChart
+                            data={data}
+                            yAxisScaleType={yAxisScaleType}
+                            maintainAspectRatio={maintainAspectRatio}
+                        />
+                    ),
                 };
             case 'table':
                 return {

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

@@ -1,5 +1,6 @@
 import { Chart, type ChartConfiguration, type ChartDataset, registerables, type TooltipItem } from 'chart.js';
 import { BarWithErrorBar, BarWithErrorBarsController } from 'chartjs-chart-error-bars';
+import { useMemo } from 'preact/hooks';
 
 import { maxInData } from './prevalence-over-time';
 import {
@@ -21,55 +22,67 @@ interface PrevalenceOverTimeBarChartProps {
     yAxisScaleType: ScaleType;
     confidenceIntervalMethod: ConfidenceIntervalMethod;
     yAxisMaxConfig: YAxisMaxConfig;
+    maintainAspectRatio: boolean;
 }
 
 Chart.register(...registerables, LogitScale, BarWithErrorBarsController, BarWithErrorBar);
 
+const NO_DATA = 'noData';
+
 const PrevalenceOverTimeBarChart = ({
     data,
     yAxisScaleType,
     confidenceIntervalMethod,
     yAxisMaxConfig,
+    maintainAspectRatio,
 }: PrevalenceOverTimeBarChartProps) => {
-    const nullFirstData = data
-        .filter((prevalenceOverTimeData) => prevalenceOverTimeData.content.length > 0)
-        .map((variantData) => {
-            return {
-                content: variantData.content.sort(sortNullToBeginningThenByDate),
-                displayName: variantData.displayName,
-            };
-        });
+    const config = useMemo<ChartConfiguration | typeof NO_DATA>(() => {
+        const nullFirstData = data
+            .filter((prevalenceOverTimeData) => prevalenceOverTimeData.content.length > 0)
+            .map((variantData) => {
+                return {
+                    content: variantData.content.sort(sortNullToBeginningThenByDate),
+                    displayName: variantData.displayName,
+                };
+            });
+
+        if (nullFirstData.length === 0) {
+            return NO_DATA;
+        }
+
+        const datasets = nullFirstData.map((graphData, index) =>
+            getDataset(graphData, index, confidenceIntervalMethod),
+        );
+
+        const maxY =
+            yAxisScaleType !== 'logit'
+                ? getYAxisMax(maxInData(nullFirstData), yAxisMaxConfig?.[yAxisScaleType])
+                : undefined;
 
-    if (nullFirstData.length === 0) {
-        return <NoDataDisplay />;
-    }
-
-    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: {
-            datasets,
-        },
-        options: {
-            maintainAspectRatio: false,
-            animation: false,
-            scales: {
-                y: { ...getYAxisScale(yAxisScaleType), max: maxY },
+        return {
+            type: BarWithErrorBarsController.id,
+            data: {
+                datasets,
             },
-            plugins: {
-                legend: {
-                    display: false,
+            options: {
+                maintainAspectRatio,
+                animation: false,
+                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-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}
                         />
                     ),
                 };