@genspectrum/dashboard-components 0.4.5 → 0.5.0

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;

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';
@@ -33,6 +33,7 @@ export default {
         height: { control: 'text' },
         headline: { control: 'text' },
         pageSize: { control: 'object' },
+        yAxisMaxConfig: { control: 'object' },
     },
 };
 
@@ -40,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}
@@ -51,6 +52,7 @@ const Template = {
                 headline={args.headline}
                 lapisDateField={args.lapisDateField}
                 pageSize={args.pageSize}
+                yAxisMaxConfig={args.yAxisMaxConfig}
             />
         </LapisUrlContext.Provider>
     ),
@@ -59,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'],
@@ -73,6 +75,10 @@ export const TwoVariants = {
         headline: 'Prevalence over time',
         lapisDateField: 'date',
         pageSize: 10,
+        yAxisMaxConfig: {
+            linear: 1,
+            logarithmic: 1,
+        },
     },
     parameters: {
         fetchMock: {
@@ -90,7 +96,7 @@ export const TwoVariants = {
                     },
                     response: {
                         status: 200,
-                        body: numeratorEG,
+                        body: numeratorFilterEG,
                     },
                 },
                 {
@@ -106,7 +112,7 @@ export const TwoVariants = {
                     },
                     response: {
                         status: 200,
-                        body: numeratorJN1,
+                        body: numeratorFilterJN1,
                     },
                 },
                 {
@@ -121,7 +127,7 @@ export const TwoVariants = {
                     },
                     response: {
                         status: 200,
-                        body: denominator,
+                        body: denominatorFilter,
                     },
                 },
             ],
@@ -132,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'],
@@ -146,6 +152,10 @@ export const OneVariant = {
         headline: 'Prevalence over time',
         lapisDateField: 'date',
         pageSize: 10,
+        yAxisMaxConfig: {
+            linear: 1,
+            logarithmic: 1,
+        },
     },
     parameters: {
         fetchMock: {
@@ -163,7 +173,7 @@ export const OneVariant = {
                     },
                     response: {
                         status: 200,
-                        body: numeratorOneVariant,
+                        body: numeratorOneDataset,
                     },
                 },
                 {
@@ -178,7 +188,7 @@ export const OneVariant = {
                     },
                     response: {
                         status: 200,
-                        body: denominatorOneVariant,
+                        body: denominatorOneDataset,
                     },
                 },
             ],