@genspectrum/dashboard-components 0.7.1 → 0.8.0

package/dist/genspectrum-components.d.ts

@@ -450,16 +450,6 @@ export declare class MutationComparisonComponent extends PreactLitAdapterWithGri
  * Fired when:
  * - The user has submitted a valid mutation or insertion
  * - The user has removed a mutation or insertion
- *
- * @fires {CustomEvent<{
- *      nucleotideMutations: string[],
- *      aminoAcidMutations: string[],
- *      nucleotideInsertions: string[],
- *      aminoAcidInsertions: string[]
- *  }>} gs-mutation-filter-on-blur
- * Fired when:
- * - the mutation filter has lost focus
- * Contains the selected mutations in the format
  */
 export declare class MutationFilterComponent extends PreactLitAdapter {
     /**
@@ -1039,10 +1029,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-selector': DateRangeSelectorComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-date-range-changed': CustomEvent<Record<string, string>>;
+        'gs-mutation-comparison-component': MutationComparisonComponent;
     }
 }
 
@@ -1050,7 +1037,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-selector': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1058,10 +1045,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-input': TextInputComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-text-input-changed': CustomEvent<Record<string, string>>;
+        'gs-mutations-component': MutationsComponent;
     }
 }
 
@@ -1069,7 +1053,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1077,10 +1061,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-location-changed': CustomEvent<Record<string, string>>;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -1088,7 +1069,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1096,11 +1077,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<SelectedMutationFilterStrings>;
-        'gs-mutation-filter-on-blur': CustomEvent<SelectedMutationFilterStrings>;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -1108,7 +1085,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1116,10 +1093,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-lineage-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-aggregate-component': AggregateComponent;
     }
 }
 
@@ -1127,7 +1101,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1135,7 +1109,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-comparison-component': MutationComparisonComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1143,7 +1117,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1151,7 +1125,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-component': MutationsComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1159,7 +1133,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1167,7 +1141,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-date-range-selector': DateRangeSelectorComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-date-range-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -1175,7 +1152,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-selector': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1183,7 +1160,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate-component': AggregateComponent;
+        'gs-location-filter': LocationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-location-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -1191,7 +1171,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1199,7 +1179,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-text-input': TextInputComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-text-input-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -1207,7 +1190,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1215,7 +1198,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-mutation-filter': MutationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-mutation-filter-changed': CustomEvent<SelectedMutationFilterStrings>;
     }
 }
 
@@ -1223,7 +1209,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1231,7 +1217,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-lineage-filter': LineageFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-lineage-filter-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -1239,7 +1228,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.7.1",
+    "version": "0.8.0",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -111,7 +111,7 @@
         "eslint-config-preact": "^1.3.0",
         "eslint-plugin-import": "^2.29.1",
         "eslint-plugin-jest": "^28.2.0",
-        "eslint-plugin-storybook": "^0.10.1",
+        "eslint-plugin-storybook": "^0.11.0",
         "http-server": "^14.1.1",
         "lit-analyzer": "^2.0.3",
         "msw": "^2.2.14",

package/src/operator/SlidingOperator.ts

@@ -14,6 +14,9 @@ export class SlidingOperator<Data, AggregationResult> implements Operator<Aggreg
     async evaluate(lapis: string, signal?: AbortSignal) {
         const childEvaluated = await this.child.evaluate(lapis, signal);
         const content = new Array<AggregationResult>();
+        if (childEvaluated.content.length === 0) {
+            return { content };
+        }
         const numberOfWindows = Math.max(childEvaluated.content.length - this.windowSize, 0) + 1;
         for (let i = 0; i < numberOfWindows; i++) {
             content.push(this.aggregate(childEvaluated.content.slice(i, i + this.windowSize)));

package/src/preact/components/error-display.tsx

@@ -25,6 +25,7 @@ export class UserFacingError extends Error {
 }
 
 export const ErrorDisplay: FunctionComponent<{ error: Error }> = ({ error }) => {
+    // eslint-disable-next-line no-console -- Currently we use the following statement for our error handling
     console.error(error);
 
     const containerRef = useRef<HTMLInputElement>(null);

package/src/preact/mutationFilter/mutation-filter.stories.tsx

@@ -14,7 +14,7 @@ const meta: Meta<MutationFilterProps> = {
     component: MutationFilter,
     parameters: {
         actions: {
-            handles: ['gs-mutation-filter-changed', 'gs-mutation-filter-on-blur', ...previewHandles],
+            handles: ['gs-mutation-filter-changed', ...previewHandles],
         },
         fetchMock: {},
     },
@@ -120,32 +120,6 @@ export const FiresFilterChangedEvents: StoryObj<MutationFilterProps> = {
     },
 };
 
-export const FiresFilterOnBlurEvent: StoryObj<MutationFilterProps> = {
-    ...Default,
-    play: async ({ canvasElement, step }) => {
-        const { canvas, onBlurListenerMock } = await prepare(canvasElement, step);
-
-        await step('Move outside of input', async () => {
-            await submitMutation(canvas, 'A234T');
-            await submitMutation(canvas, 'S:A123G');
-            await submitMutation(canvas, 'ins_123:AAA');
-            await submitMutation(canvas, 'ins_S:123:AAA');
-            await userEvent.tab();
-
-            await expect(onBlurListenerMock).toHaveBeenCalledWith(
-                expect.objectContaining({
-                    detail: {
-                        nucleotideMutations: ['A234T'],
-                        aminoAcidMutations: ['S:A123G'],
-                        nucleotideInsertions: ['ins_123:AAA'],
-                        aminoAcidInsertions: ['ins_S:123:AAA'],
-                    },
-                }),
-            );
-        });
-    },
-};
-
 export const WithInitialValue: StoryObj<MutationFilterProps> = {
     render: (args) => (
         <LapisUrlContext.Provider value={LAPIS_URL}>
@@ -164,13 +138,12 @@ export const WithInitialValue: StoryObj<MutationFilterProps> = {
         width: '100%',
     },
     play: async ({ canvasElement, step }) => {
-        const { canvas, onBlurListenerMock } = await prepare(canvasElement, step);
+        const { canvas, changedListenerMock } = await prepare(canvasElement, step);
 
-        await step('Move outside of input', async () => {
+        await step('Enter additional input', async () => {
             await submitMutation(canvas, 'G500T');
-            await userEvent.tab();
 
-            await expect(onBlurListenerMock).toHaveBeenCalledWith(
+            await expect(changedListenerMock).toHaveBeenCalledWith(
                 expect.objectContaining({
                     detail: {
                         nucleotideMutations: ['A234T', 'G500T'],
@@ -187,10 +160,8 @@ export const WithInitialValue: StoryObj<MutationFilterProps> = {
 async function prepare(canvasElement: HTMLElement, step: StepFunction<PreactRenderer, unknown>) {
     const canvas = within(canvasElement);
 
-    const onBlurListenerMock = fn();
     const changedListenerMock = fn();
     await step('Setup event listener mock', async () => {
-        canvasElement.addEventListener('gs-mutation-filter-on-blur', onBlurListenerMock);
         canvasElement.addEventListener('gs-mutation-filter-changed', changedListenerMock);
     });
 
@@ -200,7 +171,7 @@ async function prepare(canvasElement: HTMLElement, step: StepFunction<PreactRend
         });
     });
 
-    return { canvas, onBlurListenerMock, changedListenerMock };
+    return { canvas, changedListenerMock };
 }
 
 const submitMutation = async (canvas: ReturnType<typeof within>, mutation: string) => {

package/src/preact/mutationFilter/mutation-filter.tsx

@@ -87,18 +87,6 @@ export const MutationFilterInner: FunctionComponent<MutationFilterInnerProps> =
         );
     };
 
-    const handleOnBlur = () => {
-        const detail = mapToMutationFilterStrings(selectedFilters);
-
-        formRef.current?.dispatchEvent(
-            new CustomEvent<SelectedMutationFilterStrings>('gs-mutation-filter-on-blur', {
-                detail,
-                bubbles: true,
-                composed: true,
-            }),
-        );
-    };
-
     const handleInputChange = (event: Event) => {
         setInputValue((event.target as HTMLInputElement).value);
         setIsError(false);
@@ -124,7 +112,6 @@ export const MutationFilterInner: FunctionComponent<MutationFilterInnerProps> =
                         value={inputValue}
                         onInput={handleInputChange}
                         placeholder={getPlaceholder(referenceGenome)}
-                        onBlur={handleOnBlur}
                     />
                     <button type='submit' className='btn btn-xs m-1'>
                         +

package/src/preact/mutationsOverTime/mutations-over-time.tsx

@@ -63,15 +63,21 @@ export const MutationsOverTimeInner: FunctionComponent<MutationsOverTimeProps> =
     const lapis = useContext(LapisUrlContext);
     const { lapisFilter, sequenceType, granularity, lapisDateField } = componentProps;
 
-    const { data, error, isLoading } = useWebWorker<MutationOverTimeQuery, MutationOverTimeWorkerResponse>(
-        {
+    const messageToWorker = useMemo(() => {
+        return {
             lapisFilter,
             sequenceType,
             granularity,
             lapisDateField,
             lapis,
-        },
-        new MutationOverTimeWorker() as Worker,
+        };
+    }, [granularity, lapis, lapisDateField, lapisFilter, sequenceType]);
+
+    const worker = useMemo(() => new MutationOverTimeWorker(), []);
+
+    const { data, error, isLoading } = useWebWorker<MutationOverTimeQuery, MutationOverTimeWorkerResponse>(
+        messageToWorker,
+        worker,
     );
 
     if (isLoading) {

package/src/preact/prevalenceOverTime/__mockData__/numeratorFilterNoData.json

@@ -0,0 +1,11 @@
+{
+    "errors": [],
+    "info": {
+        "apiVersion": 1,
+        "dataVersion": 1709685650,
+        "deprecationDate": null,
+        "deprecationInfo": null,
+        "acknowledgement": null
+    },
+    "data": []
+}

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

@@ -9,6 +9,7 @@ import {
 } from '../../query/queryPrevalenceOverTime';
 import { sortNullToBeginningThenByDate } from '../../utils/sort';
 import GsChart from '../components/chart';
+import { NoDataDisplay } from '../components/no-data-display';
 import { LogitScale } from '../shared/charts/LogitScale';
 import { singleGraphColorRGBAById } from '../shared/charts/colors';
 import { type ConfidenceIntervalMethod, wilson95PercentConfidenceInterval } from '../shared/charts/confideceInterval';
@@ -30,12 +31,18 @@ const PrevalenceOverTimeBarChart = ({
     confidenceIntervalMethod,
     yAxisMaxConfig,
 }: PrevalenceOverTimeBarChartProps) => {
-    const nullFirstData = data.map((variantData) => {
-        return {
-            content: variantData.content.sort(sortNullToBeginningThenByDate),
-            displayName: variantData.displayName,
-        };
-    });
+    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 <NoDataDisplay />;
+    }
 
     const datasets = nullFirstData.map((graphData, index) => getDataset(graphData, index, confidenceIntervalMethod));
 

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

@@ -5,6 +5,7 @@ import { type PrevalenceOverTimeData } from '../../query/queryPrevalenceOverTime
 import { addUnit, minusTemporal } from '../../utils/temporalClass';
 import { getMinMaxNumber } from '../../utils/utils';
 import GsChart from '../components/chart';
+import { NoDataDisplay } from '../components/no-data-display';
 import { LogitScale } from '../shared/charts/LogitScale';
 import { singleGraphColorRGBAById } from '../shared/charts/colors';
 import { getYAxisMax, type YAxisMaxConfig } from '../shared/charts/getYAxisMax';
@@ -23,12 +24,18 @@ const PrevalenceOverTimeBubbleChart = ({
     yAxisScaleType,
     yAxisMaxConfig,
 }: PrevalenceOverTimeBubbleChartProps) => {
-    const nonNullDateRangeData = data.map((variantData) => {
-        return {
-            content: variantData.content.filter((dataPoint) => dataPoint.dateRange !== null),
-            displayName: variantData.displayName,
-        };
-    });
+    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 />;
+    }
 
     const firstDate = nonNullDateRangeData[0].content[0].dateRange!;
     const total = nonNullDateRangeData.map((graphData) => graphData.content.map((dataPoint) => dataPoint.total)).flat();

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

@@ -4,6 +4,7 @@ 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 { NoDataDisplay } from '../components/no-data-display';
 import { LogitScale } from '../shared/charts/LogitScale';
 import { singleGraphColorRGBAById } from '../shared/charts/colors';
 import {
@@ -29,12 +30,18 @@ const PrevalenceOverTimeLineChart = ({
     confidenceIntervalMethod,
     yAxisMaxConfig,
 }: PrevalenceOverTimeLineChartProps) => {
-    const nonNullDateRangeData = data.map((variantData) => {
-        return {
-            content: variantData.content.filter((dataPoint) => dataPoint.dateRange !== null),
-            displayName: variantData.displayName,
-        };
-    });
+    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 />;
+    }
 
     const datasets = nonNullDateRangeData
         .map((graphData, index) => getDataset(graphData, index, confidenceIntervalMethod))

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

@@ -1,11 +1,15 @@
+import type { StoryObj } from '@storybook/preact';
+import { expect, waitFor } from '@storybook/test';
+
+import { LapisUrlContext } from '../LapisUrlContext';
 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 numeratorFilterNoData from './__mockData__/numeratorFilterNoData.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';
 
 export default {
     title: 'Visualization/PrevalenceOverTime',
@@ -58,7 +62,7 @@ const Template = {
     ),
 };
 
-export const TwoVariants = {
+export const TwoVariants: StoryObj<PrevalenceOverTimeProps> = {
     ...Template,
     args: {
         numeratorFilter: [
@@ -74,10 +78,8 @@ export const TwoVariants = {
         height: '700px',
         lapisDateField: 'date',
         pageSize: 10,
-        yAxisMaxConfig: {
-            linear: 1,
-            logarithmic: 1,
-        },
+        yAxisMaxLinear: 1,
+        yAxisMaxLogarithmic: 1,
     },
     parameters: {
         fetchMock: {
@@ -134,7 +136,7 @@ export const TwoVariants = {
     },
 };
 
-export const OneVariant = {
+export const OneVariant: StoryObj<PrevalenceOverTimeProps> = {
     ...Template,
     args: {
         numeratorFilter: {
@@ -150,10 +152,8 @@ export const OneVariant = {
         height: '700px',
         lapisDateField: 'date',
         pageSize: 10,
-        yAxisMaxConfig: {
-            linear: 1,
-            logarithmic: 1,
-        },
+        yAxisMaxLinear: 1,
+        yAxisMaxLogarithmic: 1,
     },
     parameters: {
         fetchMock: {
@@ -193,3 +193,66 @@ export const OneVariant = {
         },
     },
 };
+
+export const ShowsNoDataBanner: StoryObj<PrevalenceOverTimeProps> = {
+    ...Template,
+    args: {
+        numeratorFilter: {
+            displayName: 'EG',
+            lapisFilter: { country: 'USA', pangoLineage: 'BA.2.86*', dateFrom: '2023-10-01' },
+        },
+        denominatorFilter: { country: 'USA', dateFrom: '2023-10-01' },
+        granularity: 'day',
+        smoothingWindow: 7,
+        views: ['bar', 'line', 'bubble', 'table'],
+        confidenceIntervalMethods: ['wilson'],
+        width: '100%',
+        height: '700px',
+        lapisDateField: 'date',
+        pageSize: 10,
+        yAxisMaxLinear: 1,
+        yAxisMaxLogarithmic: 1,
+    },
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'numeratorOneVariant',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            country: 'USA',
+                            pangoLineage: 'BA.2.86*',
+                            dateFrom: '2023-10-01',
+                            fields: ['date'],
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: numeratorFilterNoData,
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'denominatorOneVariant',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            country: 'USA',
+                            dateFrom: '2023-10-01',
+                            fields: ['date'],
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: numeratorFilterNoData,
+                    },
+                },
+            ],
+        },
+    },
+    play: async ({ canvas }) => {
+        await waitFor(() => expect(canvas.getByText('No data available.', { exact: false })).toBeVisible(), {
+            timeout: 10000,
+        });
+    },
+};

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

@@ -80,7 +80,7 @@ export const PrevalenceOverTimeInner: FunctionComponent<PrevalenceOverTimeProps>
         return <ErrorDisplay error={error} />;
     }
 
-    if (data === null) {
+    if (data === null || data.every((variant) => variant.content.length === 0)) {
         return <NoDataDisplay />;
     }