@genspectrum/dashboard-components 0.7.0 → 0.7.2

package/src/preact/mutations/mutations.tsx

@@ -18,7 +18,7 @@ import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
 import { Fullscreen } from '../components/fullscreen';
-import Info, { InfoHeadline1, InfoHeadline2, InfoLink, InfoParagraph } from '../components/info';
+import Info, { InfoComponentCode, InfoHeadline1, InfoHeadline2, InfoLink, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { type DisplayedMutationType, MutationTypeSelector } from '../components/mutation-type-selector';
 import { NoDataDisplay } from '../components/no-data-display';
@@ -31,37 +31,32 @@ import { useQuery } from '../useQuery';
 
 export type View = 'table' | 'grid' | 'insertions';
 
-export interface MutationsInnerProps {
+export interface MutationsProps {
+    width: string;
+    height: string;
     lapisFilter: LapisFilter;
     sequenceType: SequenceType;
     views: View[];
     pageSize: boolean | number;
 }
 
-export interface MutationsProps extends MutationsInnerProps {
-    width: string;
-    height: string;
-}
-
-export const Mutations: FunctionComponent<MutationsProps> = ({ width, height, ...innerProps }) => {
+export const Mutations: FunctionComponent<MutationsProps> = (componentProps) => {
+    const { width, height } = componentProps;
     const size = { height, width };
 
     return (
         <ErrorBoundary size={size}>
             <ResizeContainer size={size}>
-                <MutationsInner {...innerProps} />
+                <MutationsInner {...componentProps} />
             </ResizeContainer>
         </ErrorBoundary>
     );
 };
 
-export const MutationsInner: FunctionComponent<MutationsInnerProps> = ({
-    lapisFilter,
-    sequenceType,
-    views,
-    pageSize,
-}) => {
+export const MutationsInner: FunctionComponent<MutationsProps> = (componentProps) => {
     const lapis = useContext(LapisUrlContext);
+    const { lapisFilter, sequenceType } = componentProps;
+
     const { data, error, isLoading } = useQuery(async () => {
         return queryMutationsData(lapisFilter, sequenceType, lapis);
     }, [lapisFilter, sequenceType, lapis]);
@@ -78,20 +73,18 @@ export const MutationsInner: FunctionComponent<MutationsInnerProps> = ({
         return <NoDataDisplay />;
     }
 
-    return <MutationsTabs mutationsData={data} sequenceType={sequenceType} views={views} pageSize={pageSize} />;
+    return <MutationsTabs mutationsData={data} originalComponentProps={componentProps} />;
 };
 
 type MutationTabsProps = {
     mutationsData: { insertions: InsertionEntry[]; substitutionsOrDeletions: SubstitutionOrDeletionEntry[] };
-    sequenceType: SequenceType;
-    views: View[];
-    pageSize: boolean | number;
+    originalComponentProps: MutationsProps;
 };
 
-const MutationsTabs: FunctionComponent<MutationTabsProps> = ({ mutationsData, sequenceType, views, pageSize }) => {
+const MutationsTabs: FunctionComponent<MutationTabsProps> = ({ mutationsData, originalComponentProps }) => {
     const [proportionInterval, setProportionInterval] = useState({ min: 0.05, max: 1 });
 
-    const [displayedSegments, setDisplayedSegments] = useDisplayedSegments(sequenceType);
+    const [displayedSegments, setDisplayedSegments] = useDisplayedSegments(originalComponentProps.sequenceType);
     const [displayedMutationTypes, setDisplayedMutationTypes] = useState<DisplayedMutationType[]>([
         { label: 'Substitutions', checked: true, type: 'substitution' },
         { label: 'Deletions', checked: true, type: 'deletion' },
@@ -108,7 +101,7 @@ const MutationsTabs: FunctionComponent<MutationTabsProps> = ({ mutationsData, se
                         <MutationsTable
                             data={filteredData.tableData}
                             proportionInterval={proportionInterval}
-                            pageSize={pageSize}
+                            pageSize={originalComponentProps.pageSize}
                         />
                     ),
                 };
@@ -118,21 +111,23 @@ const MutationsTabs: FunctionComponent<MutationTabsProps> = ({ mutationsData, se
                     content: (
                         <MutationsGrid
                             data={filteredData.gridData}
-                            sequenceType={sequenceType}
+                            sequenceType={originalComponentProps.sequenceType}
                             proportionInterval={proportionInterval}
-                            pageSize={pageSize}
+                            pageSize={originalComponentProps.pageSize}
                         />
                     ),
                 };
             case 'insertions':
                 return {
                     title: 'Insertions',
-                    content: <InsertionsTable data={filteredData.insertions} pageSize={pageSize} />,
+                    content: (
+                        <InsertionsTable data={filteredData.insertions} pageSize={originalComponentProps.pageSize} />
+                    ),
                 };
         }
     };
 
-    const tabs = views.map((view) => getTab(view));
+    const tabs = originalComponentProps.views.map((view) => getTab(view));
 
     const toolbar = (activeTab: string) => (
         <Toolbar
@@ -144,6 +139,7 @@ const MutationsTabs: FunctionComponent<MutationTabsProps> = ({ mutationsData, se
             filteredData={filteredData}
             proportionInterval={proportionInterval}
             setProportionInterval={setProportionInterval}
+            originalComponentProps={originalComponentProps}
         />
     );
 
@@ -159,6 +155,7 @@ type ToolbarProps = {
     filteredData: { tableData: SubstitutionOrDeletionEntry[]; insertions: InsertionEntry[] };
     proportionInterval: ProportionInterval;
     setProportionInterval: Dispatch<StateUpdater<ProportionInterval>>;
+    originalComponentProps: MutationsProps;
 };
 
 const Toolbar: FunctionComponent<ToolbarProps> = ({
@@ -170,6 +167,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
     filteredData,
     proportionInterval,
     setProportionInterval,
+    originalComponentProps,
 }) => {
     return (
         <>
@@ -208,38 +206,47 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                     filename='insertions.csv'
                 />
             )}
-            <MutationsInfo />
+            <MutationsInfo originalComponentProps={originalComponentProps} />
             <Fullscreen />
         </>
     );
 };
 
-const MutationsInfo = () => (
-    <Info>
-        <InfoHeadline1>Mutations</InfoHeadline1>
-        <InfoParagraph>
-            This shows mutations of a variant. There are three types of mutations:{' '}
-            <InfoLink href='https://www.genome.gov/genetics-glossary/Substitution'>substitutions</InfoLink>,{' '}
-            <InfoLink href='https://www.genome.gov/genetics-glossary/Deletion'>deletions</InfoLink> and{' '}
-            <InfoLink href='https://www.genome.gov/genetics-glossary/Insertion'>insertions</InfoLink>.
-        </InfoParagraph>
-        <InfoHeadline2>Proportion calculation</InfoHeadline2>
-        <InfoParagraph>
-            The proportion of a mutation is calculated by dividing the number of sequences with the mutation by the
-            total number of sequences with a non-ambiguous symbol at the position.
-        </InfoParagraph>
-        <InfoParagraph>
-            <b>Example:</b> Assume we look at nucleotide mutations at position 5 where the reference has a T and assume
-            there are 10 sequences in total:
-            <ul className='list-disc list-inside ml-2'>
-                <li>3 sequences have a C,</li>
-                <li>2 sequences have a T,</li>
-                <li>1 sequence has a G,</li>
-                <li>3 sequences have an N,</li>
-                <li>1 sequence has a Y (which means T or C),</li>
-            </ul>
-            then the proportion of the T5C mutation is 50%. The 4 sequences that have an N or Y are excluded from the
-            calculation.
-        </InfoParagraph>
-    </Info>
-);
+type MutationsInfoProps = {
+    originalComponentProps: MutationsProps;
+};
+
+const MutationsInfo: FunctionComponent<MutationsInfoProps> = ({ originalComponentProps }) => {
+    const lapis = useContext(LapisUrlContext);
+
+    return (
+        <Info>
+            <InfoHeadline1>Mutations</InfoHeadline1>
+            <InfoParagraph>
+                This shows mutations of a variant. There are three types of mutations:{' '}
+                <InfoLink href='https://www.genome.gov/genetics-glossary/Substitution'>substitutions</InfoLink>,{' '}
+                <InfoLink href='https://www.genome.gov/genetics-glossary/Deletion'>deletions</InfoLink> and{' '}
+                <InfoLink href='https://www.genome.gov/genetics-glossary/Insertion'>insertions</InfoLink>.
+            </InfoParagraph>
+            <InfoHeadline2>Proportion calculation</InfoHeadline2>
+            <InfoParagraph>
+                The proportion of a mutation is calculated by dividing the number of sequences with the mutation by the
+                total number of sequences with a non-ambiguous symbol at the position.
+            </InfoParagraph>
+            <InfoParagraph>
+                <b>Example:</b> Assume we look at nucleotide mutations at position 5 where the reference has a T and
+                assume there are 10 sequences in total:
+                <ul className='list-disc list-inside ml-2'>
+                    <li>3 sequences have a C,</li>
+                    <li>2 sequences have a T,</li>
+                    <li>1 sequence has a G,</li>
+                    <li>3 sequences have an N,</li>
+                    <li>1 sequence has a Y (which means T or C),</li>
+                </ul>
+                then the proportion of the T5C mutation is 50%. The 4 sequences that have an N or Y are excluded from
+                the calculation.
+            </InfoParagraph>
+            <InfoComponentCode componentName='mutations' params={originalComponentProps} lapisUrl={lapis} />
+        </Info>
+    );
+};

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

@@ -23,7 +23,7 @@ import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
 import { Fullscreen } from '../components/fullscreen';
-import Info from '../components/info';
+import Info, { InfoComponentCode, InfoHeadline1, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { type DisplayedMutationType, MutationTypeSelector } from '../components/mutation-type-selector';
 import { NoDataDisplay } from '../components/no-data-display';
@@ -36,7 +36,9 @@ import { useWebWorker } from '../webWorkers/useWebWorker';
 
 export type View = 'grid';
 
-export interface MutationsOverTimeInnerProps {
+export interface MutationsOverTimeProps {
+    width: string;
+    height: string;
     lapisFilter: LapisFilter;
     sequenceType: SequenceType;
     views: View[];
@@ -44,31 +46,22 @@ export interface MutationsOverTimeInnerProps {
     lapisDateField: string;
 }
 
-export interface MutationsOverTimeProps extends MutationsOverTimeInnerProps {
-    width: string;
-    height: string;
-}
-
-export const MutationsOverTime: FunctionComponent<MutationsOverTimeProps> = ({ width, height, ...innerProps }) => {
+export const MutationsOverTime: FunctionComponent<MutationsOverTimeProps> = (componentProps) => {
+    const { width, height } = componentProps;
     const size = { height, width };
 
     return (
         <ErrorBoundary size={size}>
             <ResizeContainer size={size}>
-                <MutationsOverTimeInner {...innerProps} />
+                <MutationsOverTimeInner {...componentProps} />
             </ResizeContainer>
         </ErrorBoundary>
     );
 };
 
-export const MutationsOverTimeInner: FunctionComponent<MutationsOverTimeInnerProps> = ({
-    lapisFilter,
-    sequenceType,
-    views,
-    granularity,
-    lapisDateField,
-}) => {
+export const MutationsOverTimeInner: FunctionComponent<MutationsOverTimeProps> = (componentProps) => {
     const lapis = useContext(LapisUrlContext);
+    const { lapisFilter, sequenceType, granularity, lapisDateField } = componentProps;
 
     const { data, error, isLoading } = useWebWorker<MutationOverTimeQuery, MutationOverTimeWorkerResponse>(
         {
@@ -99,29 +92,26 @@ export const MutationsOverTimeInner: FunctionComponent<MutationsOverTimeInnerPro
         <MutationsOverTimeTabs
             overallMutationData={overallMutationData}
             mutationOverTimeData={mutationOverTimeData}
-            sequenceType={sequenceType}
-            views={views}
+            originalComponentProps={componentProps}
         />
     );
 };
 
 type MutationOverTimeTabsProps = {
     mutationOverTimeData: BaseMutationOverTimeDataMap;
-    sequenceType: SequenceType;
-    views: View[];
+    originalComponentProps: MutationsOverTimeProps;
     overallMutationData: SubstitutionOrDeletionEntry<Substitution, Deletion>[];
 };
 
 const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
     mutationOverTimeData,
-    sequenceType,
-    views,
+    originalComponentProps,
     overallMutationData,
 }) => {
     const [proportionInterval, setProportionInterval] = useState({ min: 0.05, max: 0.9 });
     const [colorScale, setColorScale] = useState<ColorScale>({ min: 0, max: 1, color: 'indigo' });
 
-    const [displayedSegments, setDisplayedSegments] = useDisplayedSegments(sequenceType);
+    const [displayedSegments, setDisplayedSegments] = useDisplayedSegments(originalComponentProps.sequenceType);
     const [displayedMutationTypes, setDisplayedMutationTypes] = useState<DisplayedMutationType[]>([
         { label: 'Substitutions', checked: true, type: 'substitution' },
         { label: 'Deletions', checked: true, type: 'deletion' },
@@ -153,7 +143,7 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
         }
     };
 
-    const tabs = views.map((view) => getTab(view));
+    const tabs = originalComponentProps.views.map((view) => getTab(view));
 
     const toolbar = (activeTab: string) => (
         <Toolbar
@@ -167,6 +157,7 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
             filteredData={filteredData}
             colorScale={colorScale}
             setColorScale={setColorScale}
+            originalComponentProps={originalComponentProps}
         />
     );
 
@@ -184,6 +175,7 @@ type ToolbarProps = {
     filteredData: MutationOverTimeDataMap;
     colorScale: ColorScale;
     setColorScale: Dispatch<StateUpdater<ColorScale>>;
+    originalComponentProps: MutationsOverTimeProps;
 };
 
 const Toolbar: FunctionComponent<ToolbarProps> = ({
@@ -197,6 +189,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
     filteredData,
     colorScale,
     setColorScale,
+    originalComponentProps,
 }) => {
     return (
         <>
@@ -219,12 +212,27 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                 getData={() => getDownloadData(filteredData)}
                 filename='mutations_over_time.csv'
             />
-            <Info>Info for mutations over time</Info>
+            <MutationsOverTimeInfo originalComponentProps={originalComponentProps} />
             <Fullscreen />
         </>
     );
 };
 
+type MutationsOverTimeInfoProps = {
+    originalComponentProps: MutationsOverTimeProps;
+};
+
+const MutationsOverTimeInfo: FunctionComponent<MutationsOverTimeInfoProps> = ({ originalComponentProps }) => {
+    const lapis = useContext(LapisUrlContext);
+    return (
+        <Info>
+            <InfoHeadline1>Info for mutations over time</InfoHeadline1>
+            <InfoParagraph>TODO: https://github.com/GenSpectrum/dashboard-components/issues/441</InfoParagraph>
+            <InfoComponentCode componentName='mutations-over-time' params={originalComponentProps} lapisUrl={lapis} />
+        </Info>
+    );
+};
+
 function getDownloadData(filteredData: MutationOverTimeDataMap) {
     const dates = filteredData.getSecondAxisKeys().map((date) => toTemporalClass(date));
 

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

@@ -15,7 +15,7 @@ import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
 import { Fullscreen } from '../components/fullscreen';
-import Info, { InfoHeadline1, InfoParagraph } from '../components/info';
+import Info, { InfoComponentCode, InfoHeadline1, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { NoDataDisplay } from '../components/no-data-display';
 import { ResizeContainer } from '../components/resize-container';
@@ -26,12 +26,9 @@ import { useQuery } from '../useQuery';
 
 type NumberSequencesOverTimeView = 'bar' | 'line' | 'table';
 
-export interface NumberSequencesOverTimeProps extends NumberSequencesOverTimeInnerProps {
+export interface NumberSequencesOverTimeProps {
     width: string;
     height: string;
-}
-
-interface NumberSequencesOverTimeInnerProps {
     lapisFilter: NamedLapisFilter | NamedLapisFilter[];
     lapisDateField: string;
     views: NumberSequencesOverTimeView[];
@@ -40,26 +37,21 @@ interface NumberSequencesOverTimeInnerProps {
     pageSize: boolean | number;
 }
 
-export const NumberSequencesOverTime = ({ width, height, ...innerProps }: NumberSequencesOverTimeProps) => {
+export const NumberSequencesOverTime = (componentProps: NumberSequencesOverTimeProps) => {
+    const { width, height } = componentProps;
     const size = { height, width };
 
     return (
         <ErrorBoundary size={size}>
             <ResizeContainer size={size}>
-                <NumberSequencesOverTimeInner {...innerProps} />
+                <NumberSequencesOverTimeInner {...componentProps} />
             </ResizeContainer>
         </ErrorBoundary>
     );
 };
 
-const NumberSequencesOverTimeInner = ({
-    lapisFilter,
-    granularity,
-    smoothingWindow,
-    lapisDateField,
-    views,
-    pageSize,
-}: NumberSequencesOverTimeInnerProps) => {
+const NumberSequencesOverTimeInner = (componentProps: NumberSequencesOverTimeProps) => {
+    const { lapisFilter, lapisDateField, granularity, smoothingWindow } = componentProps;
     const lapis = useContext(LapisUrlContext);
 
     const { data, error, isLoading } = useQuery(
@@ -79,32 +71,15 @@ const NumberSequencesOverTimeInner = ({
         return <NoDataDisplay />;
     }
 
-    return (
-        <NumberSequencesOverTimeTabs
-            views={views}
-            data={data}
-            granularity={granularity}
-            smoothingWindow={smoothingWindow}
-            pageSize={pageSize}
-        />
-    );
+    return <NumberSequencesOverTimeTabs data={data} originalComponentProps={componentProps} />;
 };
 
 interface NumberSequencesOverTimeTabsProps {
-    views: NumberSequencesOverTimeView[];
     data: NumberOfSequencesDatasets;
-    granularity: TemporalGranularity;
-    smoothingWindow: number;
-    pageSize: boolean | number;
+    originalComponentProps: NumberSequencesOverTimeProps;
 }
 
-const NumberSequencesOverTimeTabs = ({
-    views,
-    data,
-    granularity,
-    smoothingWindow,
-    pageSize,
-}: NumberSequencesOverTimeTabsProps) => {
+const NumberSequencesOverTimeTabs = ({ data, originalComponentProps }: NumberSequencesOverTimeTabsProps) => {
     const [yAxisScaleType, setYAxisScaleType] = useState<ScaleType>('linear');
 
     const getTab = (view: NumberSequencesOverTimeView) => {
@@ -122,7 +97,13 @@ const NumberSequencesOverTimeTabs = ({
             case 'table':
                 return {
                     title: 'Table',
-                    content: <NumberSequencesOverTimeTable data={data} granularity={granularity} pageSize={pageSize} />,
+                    content: (
+                        <NumberSequencesOverTimeTable
+                            data={data}
+                            granularity={originalComponentProps.granularity}
+                            pageSize={originalComponentProps.pageSize}
+                        />
+                    ),
                 };
             default:
                 throw new Error(`Unknown view: ${view}`);
@@ -131,15 +112,14 @@ const NumberSequencesOverTimeTabs = ({
 
     return (
         <Tabs
-            tabs={views.map((view) => getTab(view))}
+            tabs={originalComponentProps.views.map((view) => getTab(view))}
             toolbar={(activeTab) => (
                 <Toolbar
                     activeTab={activeTab}
                     data={data}
-                    granularity={granularity}
-                    smoothingWindow={smoothingWindow}
                     yAxisScaleType={yAxisScaleType}
                     setYAxisScaleType={setYAxisScaleType}
+                    originalComponentProps={originalComponentProps}
                 />
             )}
         />
@@ -149,20 +129,12 @@ const NumberSequencesOverTimeTabs = ({
 interface ToolbarProps {
     activeTab: string;
     data: NumberOfSequencesDatasets;
-    granularity: TemporalGranularity;
     yAxisScaleType: ScaleType;
     setYAxisScaleType: (scaleType: ScaleType) => void;
-    smoothingWindow: number;
+    originalComponentProps: NumberSequencesOverTimeProps;
 }
 
-const Toolbar = ({
-    activeTab,
-    data,
-    granularity,
-    yAxisScaleType,
-    setYAxisScaleType,
-    smoothingWindow,
-}: ToolbarProps) => {
+const Toolbar = ({ activeTab, data, yAxisScaleType, setYAxisScaleType, originalComponentProps }: ToolbarProps) => {
     return (
         <>
             {activeTab !== 'Table' && (
@@ -174,29 +146,39 @@ const Toolbar = ({
             )}
             <CsvDownloadButton
                 className='mx-1 btn btn-xs'
-                getData={() => getNumberOfSequencesOverTimeTableData(data, granularity)}
+                getData={() => getNumberOfSequencesOverTimeTableData(data, originalComponentProps.granularity)}
                 filename='number_of_sequences_over_time.csv'
             />
-            <NumberSequencesOverTimeInfo granularity={granularity} smoothingWindow={smoothingWindow} />
+            <NumberSequencesOverTimeInfo originalComponentProps={originalComponentProps} />
             <Fullscreen />
         </>
     );
 };
 
 type NumberSequencesOverTimeInfoProps = {
-    granularity: TemporalGranularity;
-    smoothingWindow: number;
+    originalComponentProps: NumberSequencesOverTimeProps;
 };
 
 const NumberSequencesOverTimeInfo: FunctionComponent<NumberSequencesOverTimeInfoProps> = ({
-    granularity,
-    smoothingWindow,
-}) => (
-    <Info>
-        <InfoHeadline1>Number of sequences over time</InfoHeadline1>
-        <InfoParagraph>
-            This presents the number of available sequences of a variant per <b>{granularity}</b>
-            {smoothingWindow > 0 && `, smoothed using a ${smoothingWindow}-${granularity} sliding window`}.
-        </InfoParagraph>
-    </Info>
-);
+    originalComponentProps,
+}) => {
+    const lapis = useContext(LapisUrlContext);
+
+    return (
+        <Info>
+            <InfoHeadline1>Number of sequences over time</InfoHeadline1>
+            <InfoParagraph>
+                This presents the number of available sequences of a variant per{' '}
+                <b>{originalComponentProps.granularity}</b>
+                {originalComponentProps.smoothingWindow > 0 &&
+                    `, smoothed using a ${originalComponentProps.smoothingWindow}-${originalComponentProps.granularity} sliding window`}
+                .
+            </InfoParagraph>
+            <InfoComponentCode
+                componentName='number-sequences-over-time'
+                params={originalComponentProps}
+                lapisUrl={lapis}
+            />
+        </Info>
+    );
+};

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();