@genspectrum/dashboard-components 0.6.10 → 0.6.11

package/dist/style.css

@@ -376,7 +376,7 @@ input[type="range"] {
     background-color: #C6C6C6;
     pointer-events: none;
 }/*
-! tailwindcss v3.4.6 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.7 | MIT License | https://tailwindcss.com
 *//*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@@ -1362,6 +1362,10 @@ html {
     border-radius: inherit;
   }
 }
+.link {
+  cursor: pointer;
+  text-decoration-line: underline;
+}
 .menu li.disabled {
   cursor: not-allowed;
   -webkit-user-select: none;
@@ -1858,6 +1862,14 @@ input.tab:checked + .tab-content,
 .join > :where(*:not(:first-child)):is(.btn) {
   margin-inline-start: calc(var(--border-btn) * -1);
 }
+.link:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+.link:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
 .loading {
   pointer-events: none;
   display: inline-block;
@@ -2884,6 +2896,9 @@ input.tab:checked + .tab-content,
 .ml-1 {
   margin-left: 0.25rem;
 }
+.ml-2 {
+  margin-left: 0.5rem;
+}
 .ml-2\.5 {
   margin-left: 0.625rem;
 }
@@ -2977,6 +2992,12 @@ input.tab:checked + .tab-content,
 .resize {
   resize: both;
 }
+.list-inside {
+  list-style-position: inside;
+}
+.list-disc {
+  list-style-type: disc;
+}
 .flex-row {
   flex-direction: row;
 }
@@ -3007,6 +3028,9 @@ input.tab:checked + .tab-content,
 .overflow-auto {
   overflow: auto;
 }
+.overflow-x-auto {
+  overflow-x: auto;
+}
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -3016,6 +3040,9 @@ input.tab:checked + .tab-content,
 .rounded-full {
   border-radius: 9999px;
 }
+.rounded-lg {
+  border-radius: 0.5rem;
+}
 .rounded-md {
   border-radius: 0.375rem;
 }
@@ -3271,6 +3298,12 @@ input.tab:checked + .tab-content,
 }
 .peer:hover ~ .peer-hover\:visible {
   visibility: visible;
+}
+@media (min-width: 640px) {
+
+  .sm\:max-w-5xl {
+    max-width: 64rem;
+  }
 }.flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;-webkit-animation:none;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-touch-action:manipulation;touch-action:manipulation;background:#fff;-webkit-box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08);box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08)}.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{-webkit-animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1);animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){-webkit-box-shadow:none !important;box-shadow:none !important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){-webkit-box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;border:solid transparent;content:'';height:0;width:0;left:22px}.flatpickr-calendar.rightMost:before,.flatpickr-calendar.arrowRight:before,.flatpickr-calendar.rightMost:after,.flatpickr-calendar.arrowRight:after{left:auto;right:22px}.flatpickr-calendar.arrowCenter:before,.flatpickr-calendar.arrowCenter:after{left:50%;right:50%}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-months .flatpickr-month{background:transparent;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9);height:34px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;cursor:pointer;position:absolute;top:0;height:34px;padding:10px;z-index:3;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9)}.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{/*
       /*rtl:begin:ignore*/left:0/*
       /*rtl:end:ignore*/}/*

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.6.10",
+    "version": "0.6.11",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",

package/src/preact/aggregatedData/aggregate.tsx

@@ -9,7 +9,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, { InfoHeadline1, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { NoDataDisplay } from '../components/no-data-display';
 import { ResizeContainer } from '../components/resize-container';
@@ -94,18 +94,26 @@ const AggregatedDataTabs: FunctionComponent<AggregatedDataTabsProps> = ({ data,
 
     const tabs = views.map((view) => getTab(view));
 
-    return <Tabs tabs={tabs} toolbar={<Toolbar data={data} />} />;
+    return <Tabs tabs={tabs} toolbar={<Toolbar data={data} fields={fields} />} />;
 };
 
 type ToolbarProps = {
     data: AggregateData;
+    fields: string[];
 };
 
-const Toolbar: FunctionComponent<ToolbarProps> = ({ data }) => {
+const Toolbar: FunctionComponent<ToolbarProps> = ({ data, fields }) => {
     return (
         <div class='flex flex-row'>
             <CsvDownloadButton className='mx-1 btn btn-xs' getData={() => data} filename='aggregate.csv' />
-            <Info>Info for aggregate</Info>
+            <Info>
+                <InfoHeadline1>Aggregated data</InfoHeadline1>
+                <InfoParagraph>
+                    This table shows the number and proportion of sequences stratified by the following fields:{' '}
+                    {fields.join(', ')}. The proportion is calculated with respect to the total count within the
+                    filtered dataset.
+                </InfoParagraph>
+            </Info>
             <Fullscreen />
         </div>
     );

package/src/preact/components/info.tsx

@@ -16,7 +16,7 @@ const Info: FunctionComponent<InfoProps> = ({ children }) => {
                 ?
             </button>
             <dialog ref={dialogRef} className={'modal modal-bottom sm:modal-middle'}>
-                <div className='modal-box'>
+                <div className='modal-box sm:max-w-5xl'>
                     <form method='dialog'>
                         <button className='btn btn-sm btn-circle btn-ghost absolute right-2 top-2'>✕</button>
                     </form>
@@ -55,4 +55,91 @@ export const InfoLink: FunctionComponent<{ href: string }> = ({ children, href }
     );
 };
 
+export type InfoComponentCodeProps = {
+    componentName: string;
+    params: object;
+    lapisUrl: string;
+};
+
+export const InfoComponentCode: FunctionComponent<InfoComponentCodeProps> = ({ componentName, params, lapisUrl }) => {
+    const componentCode = componentParametersToCode(componentName, params, lapisUrl);
+    const codePenData = {
+        title: 'GenSpectrum dashboard component',
+        html: generateFullExampleCode(componentCode, componentName),
+        layout: 'left',
+        editors: '100',
+    };
+    return (
+        <>
+            <InfoHeadline2>Use this component yourself</InfoHeadline2>
+            <InfoParagraph>
+                This component was created using the following parameters:
+                <div className='p-4 border border-gray-200 rounded-lg overflow-x-auto'>
+                    <pre>
+                        <code>{componentCode}</code>
+                    </pre>
+                </div>
+            </InfoParagraph>
+            <InfoParagraph>
+                You can add this component to your own website using the{' '}
+                <InfoLink href='https://github.com/GenSpectrum/dashboard-components'>
+                    GenSpectrum dashboard components library
+                </InfoLink>{' '}
+                and the code from above.
+            </InfoParagraph>
+            <InfoParagraph>
+                <form action='https://codepen.io/pen/define' method='POST' target='_blank'>
+                    <input
+                        type='hidden'
+                        name='data'
+                        value={JSON.stringify(codePenData).replace(/"/g, '&quot;').replace(/'/g, '&apos;')}
+                    />
+
+                    <button className='text-blue-600 hover:text-blue-800' type='submit'>
+                        Click here to try it out on CodePen.
+                    </button>
+                </form>
+            </InfoParagraph>
+        </>
+    );
+};
+
 export default Info;
+
+function componentParametersToCode(componentName: string, params: object, lapisUrl: string) {
+    const stringifyIfNeeded = (value: unknown) => {
+        return typeof value === 'object' ? JSON.stringify(value) : value;
+    };
+
+    const attributes = indentLines(
+        Object.entries(params)
+            .map(([key, value]) => `${key}='${stringifyIfNeeded(value)}'`)
+            .join('\n'),
+        4,
+    );
+    return `<gs-app lapis="${lapisUrl}">\n  <gs-${componentName}\n${attributes}\n  />\n</gs-app>`;
+}
+
+function generateFullExampleCode(componentCode: string, componentName: string) {
+    const storyBookPath = `/docs/visualization-${componentName}--docs`;
+    return `<html>
+<head>
+  <script type="module" src="https://unpkg.com/@genspectrum/dashboard-components@latest/dist/dashboard-components.js"></script>
+  <link rel="stylesheet" href="https://unpkg.com/@genspectrum/dashboard-components@latest/dist/style.css" />
+</head>
+
+<body>
+  <!-- Component documentation: https://genspectrum.github.io/dashboard-components/?path=${storyBookPath} -->
+${indentLines(componentCode, 2)}
+</body>
+</html>
+`;
+}
+
+function indentLines(text: string, numberSpaces: number) {
+    const spaces = ' '.repeat(numberSpaces);
+    return text
+        .split('\n')
+        .map((line) => spaces + line)
+        .join('\n');
+}

package/src/preact/mutations/mutations.tsx

@@ -19,7 +19,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, { 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';
@@ -208,8 +208,38 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                     filename='insertions.csv'
                 />
             )}
-            <Info>Info for mutations</Info>
+            <MutationsInfo />
             <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>
+);

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';
@@ -77,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) => {
@@ -120,6 +136,7 @@ const NumberSequencesOverTimeTabs = ({ views, data, granularity, pageSize }: Num
                     activeTab={activeTab}
                     data={data}
                     granularity={granularity}
+                    smoothingWindow={smoothingWindow}
                     yAxisScaleType={yAxisScaleType}
                     setYAxisScaleType={setYAxisScaleType}
                 />
@@ -134,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' && (
@@ -151,17 +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

@@ -14,25 +14,22 @@ 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, 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;
@@ -41,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(
@@ -94,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) {
@@ -181,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[];
@@ -206,12 +176,12 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
     activeTab,
     yAxisScaleType,
     setYAxisScaleType,
-    confidenceIntervalMethods,
     confidenceIntervalMethod,
     setConfidenceIntervalMethod,
     data,
-    granularity,
+    ...componentProps
 }) => {
+    const { confidenceIntervalMethods, granularity } = componentProps;
     return (
         <>
             {activeTab !== 'Table' && (
@@ -230,17 +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/web-components/visualization/gs-prevalence-over-time.tsx

@@ -175,10 +175,8 @@ export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyle
                 height={this.height}
                 lapisDateField={this.lapisDateField}
                 pageSize={this.pageSize}
-                yAxisMaxConfig={{
-                    linear: this.yAxisMaxLinear,
-                    logarithmic: this.yAxisMaxLogarithmic,
-                }}
+                yAxisMaxLinear={this.yAxisMaxLinear}
+                yAxisMaxLogarithmic={this.yAxisMaxLogarithmic}
             />
         );
     }