@genspectrum/dashboard-components 0.6.9 → 0.6.11

package/src/preact/mutationsOverTime/getFilteredMutationsOverTime.spec.ts

@@ -61,38 +61,82 @@ describe('getFilteredMutationOverTimeData', () => {
     });
 
     describe('filterProportion', () => {
-        it('should filter by proportion', () => {
-            const data = new Map2d<Substitution | Deletion, Temporal, MutationOverTimeMutationValue>();
+        const belowFilter = 0.1;
+        const atFilterMin = 0.2;
+        const inFilter = 0.5;
+        const atFilterMax = 0.9;
+        const aboveFilter = 0.99;
+        const proportionInterval = { min: atFilterMin, max: atFilterMax };
 
-            const belowFilter = { count: 1, proportion: 0.1 };
-            const aboveFilter = { count: 99, proportion: 0.99 };
-            const proportionInterval = { min: 0.2, max: 0.9 };
+        const someSubstitution = new Substitution('someSegment', 'A', 'T', 123);
+        const someOtherMutation = new Substitution('someOtherSegment', 'A', 'G', 9);
 
-            const someSubstitution = new Substitution('someSegment', 'A', 'T', 123);
-            data.set(someSubstitution, yearMonthDay('2021-01-01'), belowFilter);
-            data.set(someSubstitution, yearMonthDay('2021-02-02'), aboveFilter);
+        it('should remove mutations where overall proportion is below filter', () => {
+            const data = getMutationOverTimeData();
 
-            filterProportion(data, proportionInterval);
+            filterProportion(data, getOverallMutationData(belowFilter), proportionInterval);
 
-            expect(data.getAsArray({ count: 0, proportion: 0 }).length).to.equal(0);
+            expect(data.getAsArray({ count: 0, proportion: 0 })).to.toHaveLength(0);
         });
 
-        it('should not filter if one proportion is within the interval', () => {
-            const data = new Map2d<Substitution | Deletion, Temporal, MutationOverTimeMutationValue>();
+        it('should remove mutations where overall proportion is above filter', () => {
+            const data = getMutationOverTimeData();
+
+            filterProportion(data, getOverallMutationData(aboveFilter), proportionInterval);
+
+            expect(data.getAsArray({ count: 0, proportion: 0 })).to.toHaveLength(0);
+        });
 
-            const belowFilter = { count: 1, proportion: 0.1 };
-            const aboveFilter = { count: 99, proportion: 0.99 };
-            const inFilter = { count: 5, proportion: 0.5 };
-            const proportionInterval = { min: 0.2, max: 0.9 };
+        it('should remove mutations where overall proportion is missing', () => {
+            const data = getMutationOverTimeData();
 
-            const someSubstitution = new Substitution('someSegment', 'A', 'T', 123);
-            data.set(someSubstitution, yearMonthDay('2021-01-01'), belowFilter);
-            data.set(someSubstitution, yearMonthDay('2021-02-02'), aboveFilter);
-            data.set(someSubstitution, yearMonthDay('2021-03-03'), inFilter);
+            filterProportion(data, getOverallMutationData(aboveFilter, someOtherMutation), proportionInterval);
 
-            filterProportion(data, proportionInterval);
+            expect(data.getAsArray({ count: 0, proportion: 0 })).to.toHaveLength(0);
+        });
+
+        it('should not remove mutation where overall proportion is at lower border of filter', () => {
+            const data = getMutationOverTimeData();
+
+            filterProportion(data, getOverallMutationData(inFilter), proportionInterval);
 
-            expect(data.getRow(someSubstitution, { count: 0, proportion: 0 }).length).to.equal(3);
+            expect(data.getRow(someSubstitution, { count: 0, proportion: 0 })).to.toHaveLength(2);
         });
+
+        it('should not remove mutation where overall proportion is within filter', () => {
+            const data = getMutationOverTimeData();
+
+            filterProportion(data, getOverallMutationData(inFilter), proportionInterval);
+
+            expect(data.getRow(someSubstitution, { count: 0, proportion: 0 })).to.toHaveLength(2);
+        });
+
+        it('should not remove mutation where overall proportion is at upper border of filter', () => {
+            const data = getMutationOverTimeData();
+
+            filterProportion(data, getOverallMutationData(inFilter), proportionInterval);
+
+            expect(data.getRow(someSubstitution, { count: 0, proportion: 0 })).to.toHaveLength(2);
+        });
+
+        function getMutationOverTimeData() {
+            const data = new Map2d<Substitution | Deletion, Temporal, MutationOverTimeMutationValue>();
+            data.set(someSubstitution, yearMonthDay('2021-01-01'), { count: 1, proportion: 0.1 });
+            data.set(someSubstitution, yearMonthDay('2021-02-02'), { count: 99, proportion: 0.99 });
+            return data;
+        }
+
+        function getOverallMutationData(proportion: number = 0.1, mutation: Substitution = someSubstitution) {
+            return {
+                content: [
+                    {
+                        type: 'substitution' as const,
+                        count: -1,
+                        mutation,
+                        proportion,
+                    },
+                ],
+            };
+        }
     });
 });

package/src/preact/mutationsOverTime/getFilteredMutationsOverTimeData.ts

@@ -1,9 +1,12 @@
+import { type Dataset } from '../../operator/Dataset';
 import { type MutationOverTimeDataGroupedByMutation } from '../../query/queryMutationsOverTime';
+import { type DeletionEntry, type SubstitutionEntry } from '../../types';
 import type { DisplayedSegment } from '../components/SegmentSelector';
 import type { DisplayedMutationType } from '../components/mutation-type-selector';
 
 export function getFilteredMutationOverTimeData(
     data: MutationOverTimeDataGroupedByMutation,
+    overallMutationData: Dataset<SubstitutionEntry | DeletionEntry>,
     displayedSegments: DisplayedSegment[],
     displayedMutationTypes: DisplayedMutationType[],
     proportionInterval: { min: number; max: number },
@@ -11,7 +14,7 @@ export function getFilteredMutationOverTimeData(
     const filteredData = data.copy();
     filterDisplayedSegments(displayedSegments, filteredData);
     filterMutationTypes(displayedMutationTypes, filteredData);
-    filterProportion(filteredData, proportionInterval);
+    filterProportion(filteredData, overallMutationData, proportionInterval);
 
     return filteredData;
 }
@@ -48,18 +51,24 @@ export function filterMutationTypes(
 
 export function filterProportion(
     data: MutationOverTimeDataGroupedByMutation,
+    overallMutationData: Dataset<SubstitutionEntry | DeletionEntry>,
     proportionInterval: {
         min: number;
         max: number;
     },
 ) {
+    const overallProportionsByMutation = overallMutationData.content.reduce(
+        (acc, { mutation, proportion }) => ({
+            ...acc,
+            [mutation.toString()]: proportion,
+        }),
+        {} as Record<string, number>,
+    );
+
     data.getFirstAxisKeys().forEach((mutation) => {
-        const row = data.getRow(mutation, { count: 0, proportion: 0 });
-        if (
-            !row.some(
-                (value) => value.proportion >= proportionInterval.min && value.proportion <= proportionInterval.max,
-            )
-        ) {
+        const overallProportion = overallProportionsByMutation[mutation.toString()] || -1;
+
+        if (overallProportion < proportionInterval.min || overallProportion > proportionInterval.max) {
             data.deleteRow(mutation);
         }
     });

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

@@ -14,6 +14,7 @@ import nucleotideMutation_tooManyMutations from './__mockData__/nucleotideMutati
 import { MutationsOverTime, type MutationsOverTimeProps } from './mutations-over-time';
 import { AGGREGATED_ENDPOINT, LAPIS_URL, NUCLEOTIDE_MUTATIONS_ENDPOINT } from '../../constants';
 import referenceGenome from '../../lapisApi/__mockData__/referenceGenome.json';
+import nucleotideMutations_byMonthOverall from '../../preact/mutationsOverTime/__mockData__/nucleotideMutations_byMonthOverall.json';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
 
@@ -90,6 +91,22 @@ export const Default: StoryObj<MutationsOverTimeProps> = {
                         body: aggregated_date,
                     },
                 },
+                {
+                    matcher: {
+                        name: 'nucleotideMutations_overall',
+                        url: NUCLEOTIDE_MUTATIONS_ENDPOINT,
+                        body: {
+                            pangoLineage: 'JN.1*',
+                            dateFrom: '2024-01-15',
+                            dateTo: '2024-07-10',
+                            minProportion: 0.001,
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: nucleotideMutations_byMonthOverall,
+                    },
+                },
                 {
                     matcher: {
                         name: 'nucleotideMutations_01',

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

@@ -3,11 +3,19 @@ import { type Dispatch, type StateUpdater, useContext, useMemo, useState } from
 
 import { getFilteredMutationOverTimeData } from './getFilteredMutationsOverTimeData';
 import MutationsOverTimeGrid from './mutations-over-time-grid';
+import { type Dataset } from '../../operator/Dataset';
 import {
     type MutationOverTimeDataGroupedByMutation,
     queryMutationsOverTimeData,
+    queryOverallMutationData,
 } from '../../query/queryMutationsOverTime';
-import { type LapisFilter, type SequenceType, type TemporalGranularity } from '../../types';
+import {
+    type DeletionEntry,
+    type LapisFilter,
+    type SequenceType,
+    type SubstitutionEntry,
+    type TemporalGranularity,
+} from '../../types';
 import { compareTemporal } from '../../utils/temporal';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { type DisplayedSegment, SegmentSelector, useDisplayedSegments } from '../components/SegmentSelector';
@@ -16,6 +24,7 @@ import { ColorScaleSelectorDropdown } from '../components/color-scale-selector-d
 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 { LoadingDisplay } from '../components/loading-display';
 import { type DisplayedMutationType, MutationTypeSelector } from '../components/mutation-type-selector';
@@ -63,7 +72,11 @@ export const MutationsOverTimeInner: FunctionComponent<MutationsOverTimeInnerPro
 }) => {
     const lapis = useContext(LapisUrlContext);
     const { data, error, isLoading } = useQuery(async () => {
-        return queryMutationsOverTimeData(lapisFilter, sequenceType, lapis, lapisDateField, granularity);
+        const [mutationOverTimeData, overallMutationData] = await Promise.all([
+            queryMutationsOverTimeData(lapisFilter, sequenceType, lapis, lapisDateField, granularity),
+            queryOverallMutationData(lapisFilter, sequenceType, lapis),
+        ]);
+        return { mutationOverTimeData, overallMutationData };
     }, [lapisFilter, sequenceType, lapis, granularity, lapisDateField]);
 
     if (isLoading) {
@@ -78,19 +91,28 @@ export const MutationsOverTimeInner: FunctionComponent<MutationsOverTimeInnerPro
         return <NoDataDisplay />;
     }
 
-    return <MutationsOverTimeTabs mutationOverTimeData={data} sequenceType={sequenceType} views={views} />;
+    return (
+        <MutationsOverTimeTabs
+            overallMutationData={data.overallMutationData}
+            mutationOverTimeData={data.mutationOverTimeData}
+            sequenceType={sequenceType}
+            views={views}
+        />
+    );
 };
 
 type MutationOverTimeTabsProps = {
     mutationOverTimeData: MutationOverTimeDataGroupedByMutation;
     sequenceType: SequenceType;
     views: View[];
+    overallMutationData: Dataset<SubstitutionEntry | DeletionEntry>;
 };
 
 const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
     mutationOverTimeData,
     sequenceType,
     views,
+    overallMutationData,
 }) => {
     const [proportionInterval, setProportionInterval] = useState({ min: 0.05, max: 0.9 });
     const [colorScale, setColorScale] = useState<ColorScale>({ min: 0, max: 1, color: 'indigo' });
@@ -105,11 +127,12 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
         () =>
             getFilteredMutationOverTimeData(
                 mutationOverTimeData,
+                overallMutationData,
                 displayedSegments,
                 displayedMutationTypes,
                 proportionInterval,
             ),
-        [mutationOverTimeData, displayedSegments, displayedMutationTypes, proportionInterval],
+        [mutationOverTimeData, overallMutationData, displayedSegments, displayedMutationTypes, proportionInterval],
     );
 
     const getTab = (view: View) => {
@@ -188,6 +211,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                 filename='mutations_over_time.csv'
             />
             <Info>Info for mutations over time</Info>
+            <Fullscreen />
         </>
     );
 };

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

@@ -1,3 +1,4 @@
+import { type FunctionComponent } from 'preact';
 import { useContext, useState } from 'preact/hooks';
 
 import { getNumberOfSequencesOverTimeTableData } from './getNumberOfSequencesOverTimeTableData';
@@ -13,6 +14,7 @@ import { LapisUrlContext } from '../LapisUrlContext';
 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 { LoadingDisplay } from '../components/loading-display';
 import { NoDataDisplay } from '../components/no-data-display';
@@ -76,17 +78,32 @@ const NumberSequencesOverTimeInner = ({
         return <NoDataDisplay />;
     }
 
-    return <NumberSequencesOverTimeTabs views={views} data={data} granularity={granularity} pageSize={pageSize} />;
+    return (
+        <NumberSequencesOverTimeTabs
+            views={views}
+            data={data}
+            granularity={granularity}
+            smoothingWindow={smoothingWindow}
+            pageSize={pageSize}
+        />
+    );
 };
 
 interface NumberSequencesOverTimeTabsProps {
     views: NumberSequencesOverTimeView[];
     data: NumberOfSequencesDatasets;
     granularity: TemporalGranularity;
+    smoothingWindow: number;
     pageSize: boolean | number;
 }
 
-const NumberSequencesOverTimeTabs = ({ views, data, granularity, pageSize }: NumberSequencesOverTimeTabsProps) => {
+const NumberSequencesOverTimeTabs = ({
+    views,
+    data,
+    granularity,
+    smoothingWindow,
+    pageSize,
+}: NumberSequencesOverTimeTabsProps) => {
     const [yAxisScaleType, setYAxisScaleType] = useState<ScaleType>('linear');
 
     const getTab = (view: NumberSequencesOverTimeView) => {
@@ -119,6 +136,7 @@ const NumberSequencesOverTimeTabs = ({ views, data, granularity, pageSize }: Num
                     activeTab={activeTab}
                     data={data}
                     granularity={granularity}
+                    smoothingWindow={smoothingWindow}
                     yAxisScaleType={yAxisScaleType}
                     setYAxisScaleType={setYAxisScaleType}
                 />
@@ -133,9 +151,17 @@ interface ToolbarProps {
     granularity: TemporalGranularity;
     yAxisScaleType: ScaleType;
     setYAxisScaleType: (scaleType: ScaleType) => void;
+    smoothingWindow: number;
 }
 
-const Toolbar = ({ activeTab, data, granularity, yAxisScaleType, setYAxisScaleType }: ToolbarProps) => {
+const Toolbar = ({
+    activeTab,
+    data,
+    granularity,
+    yAxisScaleType,
+    setYAxisScaleType,
+    smoothingWindow,
+}: ToolbarProps) => {
     return (
         <>
             {activeTab !== 'Table' && (
@@ -150,16 +176,26 @@ const Toolbar = ({ activeTab, data, granularity, yAxisScaleType, setYAxisScaleTy
                 getData={() => getNumberOfSequencesOverTimeTableData(data, granularity)}
                 filename='number_of_sequences_over_time.csv'
             />
-            <NumberSequencesOverTimeInfo />
+            <NumberSequencesOverTimeInfo granularity={granularity} smoothingWindow={smoothingWindow} />
+            <Fullscreen />
         </>
     );
 };
 
-const NumberSequencesOverTimeInfo = () => (
+type NumberSequencesOverTimeInfoProps = {
+    granularity: TemporalGranularity;
+    smoothingWindow: number;
+};
+
+const NumberSequencesOverTimeInfo: FunctionComponent<NumberSequencesOverTimeInfoProps> = ({
+    granularity,
+    smoothingWindow,
+}) => (
     <Info>
         <InfoHeadline1>Number of sequences over time</InfoHeadline1>
         <InfoParagraph>
-            <a href='https://github.com/GenSpectrum/dashboard-components/issues/315'>TODO</a>
+            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>
 );

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

@@ -51,7 +51,8 @@ const Template = {
                 height={args.height}
                 lapisDateField={args.lapisDateField}
                 pageSize={args.pageSize}
-                yAxisMaxConfig={args.yAxisMaxConfig}
+                yAxisMaxLinear={args.yAxisMaxLinear}
+                yAxisMaxLogarithmic={args.yAxisMaxLogarithmic}
             />
         </LapisUrlContext.Provider>
     ),

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

@@ -13,25 +13,23 @@ import { ConfidenceIntervalSelector } from '../components/confidence-interval-se
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
-import Info, { InfoHeadline1, InfoParagraph } from '../components/info';
+import { Fullscreen } from '../components/fullscreen';
+import Info, { InfoComponentCode, InfoHeadline1, InfoHeadline2, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 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 { type ConfidenceIntervalMethod } from '../shared/charts/confideceInterval';
-import type { YAxisMaxConfig } from '../shared/charts/getYAxisMax';
+import { type AxisMax } from '../shared/charts/getYAxisMax';
 import { type ScaleType } from '../shared/charts/getYAxisScale';
 import { useQuery } from '../useQuery';
 
 export type View = 'bar' | 'line' | 'bubble' | 'table';
 
-export interface PrevalenceOverTimeProps extends PrevalenceOverTimeInnerProps {
+export interface PrevalenceOverTimeProps {
     width: string;
     height: string;
-}
-
-export interface PrevalenceOverTimeInnerProps {
     numeratorFilter: NamedLapisFilter | NamedLapisFilter[];
     denominatorFilter: LapisFilter;
     granularity: TemporalGranularity;
@@ -40,32 +38,25 @@ export interface PrevalenceOverTimeInnerProps {
     confidenceIntervalMethods: ConfidenceIntervalMethod[];
     lapisDateField: string;
     pageSize: boolean | number;
-    yAxisMaxConfig: YAxisMaxConfig;
+    yAxisMaxLinear?: AxisMax;
+    yAxisMaxLogarithmic?: AxisMax;
 }
 
-export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({ width, height, ...innerProps }) => {
+export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = (componentProps) => {
+    const { width, height } = componentProps;
     const size = { height, width };
 
     return (
         <ErrorBoundary size={size}>
             <ResizeContainer size={size}>
-                <PrevalenceOverTimeInner {...innerProps} />
+                <PrevalenceOverTimeInner {...componentProps} />
             </ResizeContainer>
         </ErrorBoundary>
     );
 };
 
-export const PrevalenceOverTimeInner: FunctionComponent<PrevalenceOverTimeInnerProps> = ({
-    numeratorFilter,
-    denominatorFilter,
-    granularity,
-    smoothingWindow,
-    views,
-    confidenceIntervalMethods,
-    lapisDateField,
-    pageSize,
-    yAxisMaxConfig,
-}) => {
+export const PrevalenceOverTimeInner: FunctionComponent<PrevalenceOverTimeProps> = (componentProps) => {
+    const { numeratorFilter, denominatorFilter, granularity, smoothingWindow, lapisDateField } = componentProps;
     const lapis = useContext(LapisUrlContext);
 
     const { data, error, isLoading } = useQuery(
@@ -93,39 +84,21 @@ export const PrevalenceOverTimeInner: FunctionComponent<PrevalenceOverTimeInnerP
         return <NoDataDisplay />;
     }
 
-    return (
-        <PrevalenceOverTimeTabs
-            views={views}
-            data={data}
-            granularity={granularity}
-            confidenceIntervalMethods={confidenceIntervalMethods}
-            pageSize={pageSize}
-            yAxisMaxConfig={yAxisMaxConfig}
-        />
-    );
+    return <PrevalenceOverTimeTabs data={data} {...componentProps} />;
 };
 
-type PrevalenceOverTimeTabsProps = {
-    views: View[];
+type PrevalenceOverTimeTabsProps = PrevalenceOverTimeProps & {
     data: PrevalenceOverTimeData;
-    granularity: TemporalGranularity;
-    confidenceIntervalMethods: ConfidenceIntervalMethod[];
-    pageSize: boolean | number;
-    yAxisMaxConfig: YAxisMaxConfig;
 };
 
-const PrevalenceOverTimeTabs: FunctionComponent<PrevalenceOverTimeTabsProps> = ({
-    views,
-    data,
-    granularity,
-    confidenceIntervalMethods,
-    pageSize,
-    yAxisMaxConfig,
-}) => {
+const PrevalenceOverTimeTabs: FunctionComponent<PrevalenceOverTimeTabsProps> = ({ data, ...componentProps }) => {
+    const { views, granularity, confidenceIntervalMethods, pageSize, yAxisMaxLinear, yAxisMaxLogarithmic } =
+        componentProps;
     const [yAxisScaleType, setYAxisScaleType] = useState<ScaleType>('linear');
     const [confidenceIntervalMethod, setConfidenceIntervalMethod] = useState<ConfidenceIntervalMethod>(
         confidenceIntervalMethods.length > 0 ? confidenceIntervalMethods[0] : 'none',
     );
+    const yAxisMaxConfig = { linear: yAxisMaxLinear, logarithmic: yAxisMaxLogarithmic };
 
     const getTab = (view: View) => {
         switch (view) {
@@ -180,20 +153,18 @@ const PrevalenceOverTimeTabs: FunctionComponent<PrevalenceOverTimeTabsProps> = (
             yAxisScaleType={yAxisScaleType}
             setYAxisScaleType={setYAxisScaleType}
             data={data}
-            granularity={granularity}
-            confidenceIntervalMethods={confidenceIntervalMethods}
             confidenceIntervalMethod={confidenceIntervalMethod}
             setConfidenceIntervalMethod={setConfidenceIntervalMethod}
+            {...componentProps}
         />
     );
 
     return <Tabs tabs={tabs} toolbar={toolbar} />;
 };
 
-type ToolbarProps = {
+type ToolbarProps = PrevalenceOverTimeProps & {
     activeTab: string;
     data: PrevalenceOverTimeData;
-    granularity: TemporalGranularity;
     yAxisScaleType: ScaleType;
     setYAxisScaleType: (scaleType: ScaleType) => void;
     confidenceIntervalMethods: ConfidenceIntervalMethod[];
@@ -205,12 +176,12 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
     activeTab,
     yAxisScaleType,
     setYAxisScaleType,
-    confidenceIntervalMethods,
     confidenceIntervalMethod,
     setConfidenceIntervalMethod,
     data,
-    granularity,
+    ...componentProps
 }) => {
+    const { confidenceIntervalMethods, granularity } = componentProps;
     return (
         <>
             {activeTab !== 'Table' && (
@@ -229,16 +200,38 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                 filename='prevalence_over_time.csv'
             />
 
-            <PrevalenceOverTimeInfo />
+            <PrevalenceOverTimeInfo {...componentProps} />
+            <Fullscreen />
         </>
     );
 };
 
-const PrevalenceOverTimeInfo: FunctionComponent = () => {
+const PrevalenceOverTimeInfo: FunctionComponent<PrevalenceOverTimeProps> = (componentProps) => {
+    const { granularity, smoothingWindow, views } = componentProps;
+    const lapis = useContext(LapisUrlContext);
     return (
         <Info>
             <InfoHeadline1>Prevalence over time</InfoHeadline1>
-            <InfoParagraph>Prevalence over time info.</InfoParagraph>
+            <InfoParagraph>
+                This presents the proportion of one or more variants per <b>{granularity}</b>
+                {smoothingWindow > 0 && `, smoothed using a ${smoothingWindow}-${granularity} sliding window`}. The
+                proportion is calculated as the number of sequences of the variant(s) divided by the number of sequences
+                that match the <code>denominatorFilter</code> (see below).
+            </InfoParagraph>
+            <InfoParagraph>
+                Sequences that have no assigned date will not be shown in the line and bubble chart. They will show up
+                in the bar and table view with date "unknown".
+            </InfoParagraph>
+            {views.includes('bubble') && (
+                <>
+                    <InfoHeadline2>Bubble chart</InfoHeadline2>
+                    <InfoParagraph>
+                        The size of the bubble scales with the total number of available sequences from the{' '}
+                        {granularity}.
+                    </InfoParagraph>
+                </>
+            )}
+            <InfoComponentCode componentName='prevalence-over-time' params={componentProps} lapisUrl={lapis} />
         </Info>
     );
 };

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

@@ -10,6 +10,7 @@ import { type LapisFilter } from '../../types';
 import { LapisUrlContext } from '../LapisUrlContext';
 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 { LoadingDisplay } from '../components/loading-display';
 import { NoDataDisplay } from '../components/no-data-display';
@@ -156,6 +157,7 @@ const RelativeGrowthAdvantageToolbar: FunctionComponent<RelativeGrowthAdvantageT
         <>
             <ScalingSelector yAxisScaleType={yAxisScaleType} setYAxisScaleType={setYAxisScaleType} />
             <RelativeGrowthAdvantageInfo generationTime={generationTime} />
+            <Fullscreen />
         </>
     );
 };

package/src/query/queryMutationsOverTime.ts

@@ -36,9 +36,18 @@ export type MutationOverTimeDataGroupedByMutation = Map2d<
 
 const MAX_NUMBER_OF_GRID_COLUMNS = 200;
 
+export async function queryOverallMutationData(
+    lapisFilter: LapisFilter,
+    sequenceType: SequenceType,
+    lapis: string,
+    signal?: AbortSignal,
+) {
+    return fetchAndPrepareSubstitutionsOrDeletions(lapisFilter, sequenceType).evaluate(lapis, signal);
+}
+
 export async function queryMutationsOverTimeData(
     lapisFilter: LapisFilter,
-    sequenceType: 'nucleotide' | 'amino acid',
+    sequenceType: SequenceType,
     lapis: string,
     lapisDateField: string,
     granularity: TemporalGranularity,