@genspectrum/dashboard-components 0.5.6 → 0.6.0

package/dist/genspectrum-components.d.ts

@@ -53,10 +53,6 @@ export declare class AggregateComponent extends PreactLitAdapterWithGridJsStyles
      * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     height: string;
-    /**
-     * The headline of the component. Set to an empty string to hide the headline.
-     */
-    headline: string;
     /**
      * The field by which the table is initially sorted.
      * Must be one of the fields specified in the fields property, 'count', or 'proportion'.
@@ -300,10 +296,6 @@ export declare class MutationComparisonComponent extends PreactLitAdapterWithGri
      * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     height: string;
-    /**
-     * The headline of the component. Set to an empty string to hide the headline.
-     */
-    headline: string;
     /**
      * The maximum number of rows to display in the table view.
      * Set to `false` to disable pagination. Set to `true` to enable pagination with a default limit (10).
@@ -441,10 +433,6 @@ export declare class MutationsComponent extends PreactLitAdapterWithGridJsStyles
      * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     height: string;
-    /**
-     * The headline of the component. Set to an empty string to hide the headline.
-     */
-    headline: string;
     /**
      * The maximum number of rows to display in the table view.
      * Set to `false` to disable pagination. Set to `true` to enable pagination with a default limit (10).
@@ -454,17 +442,27 @@ export declare class MutationsComponent extends PreactLitAdapterWithGridJsStyles
 }
 
 /**
- * TODO(#330) write docs
+ * ## Context
+ *
+ * This component displays the number of sequences over time of one or more datasets,
+ * selected by LAPIS filters.
+ *
+ * In the chart views, the user can select the y-axis scale (linear, logistic).
+ * The x-axis shows all available time intervals available in the datasets in the selected `granularity`.
+ * Thus, the `lapisFilter` implicitly also defines the range that is shown on the x-axis.
+ * If you want to restrict the x-axis to a smaller date range,
+ * then you need to set appropriate filter values in the `lapisFilter`.
  */
 export declare class NumberSequencesOverTimeComponent extends PreactLitAdapterWithGridJsStyles {
     /**
-     *   Required.
-     * Either a LAPIS filter or an array of LAPIS filters to calculate the prevalence for.
+     * Required.
+     *
+     * Either a LAPIS filter or an array of LAPIS filters to fetch the number of sequences for.
      *
      * The `lapisFilter` will be sent as is to LAPIS to select the data.
      * It must be a valid LAPIS filter object.
      *
-     * The `displayName` will be used as the label the prevalence in the views.
+     * The `displayName` will be used to label the component views.
      * It should be human-readable.
      *
      */ lapisFilter: {
@@ -486,10 +484,6 @@ export declare class NumberSequencesOverTimeComponent extends PreactLitAdapterWi
      * A list of tabs with views that this component should provide.
      */
     views: ('bar' | 'line' | 'table')[];
-    /**
-     * The headline of the component. Set to an empty string to hide the headline.
-     */
-    headline: string;
     /**
      * The width of the component.
      *
@@ -623,10 +617,6 @@ export declare class PrevalenceOverTimeComponent extends PreactLitAdapterWithGri
      * Pass an empty array to disable the confidence interval selector.
      */
     confidenceIntervalMethods: ('wilson' | 'none')[];
-    /**
-     * The headline of the component. Set to an empty string to hide the headline.
-     */
-    headline: string;
     /**
      * The width of the component.
      *
@@ -764,10 +754,6 @@ export declare class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
      * A list of tabs with views that this component should provide.
      */
     views: 'line'[];
-    /**
-     * The headline of the component. Set to an empty string to hide the headline.
-     */
-    headline: string;
     /**
      * The width of the component.
      *

package/dist/style.css

@@ -2995,10 +2995,6 @@ input.tab:checked + .tab-content,
   --tw-border-opacity: 1;
   border-color: rgb(239 68 68 / var(--tw-border-opacity));
 }
-.bg-base-200 {
-  --tw-bg-opacity: 1;
-  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
-}
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));

package/package.json

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

package/src/preact/aggregatedData/aggregate.stories.tsx

@@ -12,7 +12,6 @@ const meta: Meta<AggregateProps> = {
         fields: [{ control: 'object' }],
         width: { control: 'text' },
         height: { control: 'text' },
-        headline: { control: 'text' },
         initialSortField: { control: 'text' },
         initialSortDirection: { control: 'radio', options: ['ascending', 'descending'] },
         pageSize: { control: 'object' },
@@ -55,7 +54,6 @@ export const Default: StoryObj<AggregateProps> = {
         },
         width: '100%',
         height: '700px',
-        headline: 'Aggregate',
         initialSortField: 'count',
         initialSortDirection: 'descending',
         pageSize: 10,

package/src/preact/aggregatedData/aggregate.tsx

@@ -8,7 +8,6 @@ import { LapisUrlContext } from '../LapisUrlContext';
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
-import Headline from '../components/headline';
 import Info from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { NoDataDisplay } from '../components/no-data-display';
@@ -22,7 +21,6 @@ export type InitialSort = { field: string; direction: 'ascending' | 'descending'
 export type AggregateProps = {
     width: string;
     height: string;
-    headline?: string;
 } & AggregateInnerProps;
 
 export interface AggregateInnerProps {
@@ -34,20 +32,13 @@ export interface AggregateInnerProps {
     pageSize: boolean | number;
 }
 
-export const Aggregate: FunctionComponent<AggregateProps> = ({
-    width,
-    height,
-    headline = 'Mutations',
-    ...innerProps
-}) => {
+export const Aggregate: FunctionComponent<AggregateProps> = ({ width, height, ...innerProps }) => {
     const size = { height, width };
 
     return (
-        <ErrorBoundary size={size} headline={headline}>
+        <ErrorBoundary size={size}>
             <ResizeContainer size={size}>
-                <Headline heading={headline}>
-                    <AggregateInner {...innerProps} />
-                </Headline>
+                <AggregateInner {...innerProps} />
             </ResizeContainer>
         </ErrorBoundary>
     );

package/src/preact/components/error-boundary.stories.tsx

@@ -10,11 +10,9 @@ const meta: Meta = {
     argTypes: {
         size: { control: 'object' },
         defaultSize: { control: 'object' },
-        headline: { control: 'text' },
     },
     args: {
         size: { height: '600px', width: '100%' },
-        headline: 'Some headline',
     },
 };
 
@@ -22,7 +20,7 @@ export default meta;
 
 export const ErrorBoundaryWithoutErrorStory: StoryObj = {
     render: (args) => (
-        <ErrorBoundary size={args.size} headline={args.headline}>
+        <ErrorBoundary size={args.size}>
             <div>Some content</div>
         </ErrorBoundary>
     ),
@@ -30,13 +28,12 @@ export const ErrorBoundaryWithoutErrorStory: StoryObj = {
         const canvas = within(canvasElement);
         const content = canvas.getByText('Some content', { exact: false });
         await waitFor(() => expect(content).toBeInTheDocument());
-        await waitFor(() => expect(canvas.queryByText('Some headline')).not.toBeInTheDocument());
     },
 };
 
 export const ErrorBoundaryWithErrorStory: StoryObj = {
     render: (args) => (
-        <ErrorBoundary size={args.size} headline={args.headline}>
+        <ErrorBoundary size={args.size}>
             <ContentThatThrowsError />
         </ErrorBoundary>
     ),
@@ -44,7 +41,6 @@ export const ErrorBoundaryWithErrorStory: StoryObj = {
         const canvas = within(canvasElement);
         const content = canvas.queryByText('Some content.', { exact: false });
         await waitFor(() => expect(content).not.toBeInTheDocument());
-        await waitFor(() => expect(canvas.getByText('Some headline')).toBeInTheDocument());
         await waitFor(() => expect(canvas.getByText('Error')).toBeInTheDocument());
     },
 };

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

@@ -3,17 +3,14 @@ import { useErrorBoundary } from 'preact/hooks';
 
 import { ErrorDisplay } from './error-display';
 import { ResizeContainer, type Size } from './resize-container';
-import Headline from '../components/headline';
 
-export const ErrorBoundary: FunctionComponent<{ size: Size; headline?: string }> = ({ size, headline, children }) => {
+export const ErrorBoundary: FunctionComponent<{ size: Size }> = ({ size, children }) => {
     const [internalError] = useErrorBoundary();
 
     if (internalError) {
         return (
             <ResizeContainer size={size}>
-                <Headline heading={headline}>
-                    <ErrorDisplay error={internalError} />
-                </Headline>
+                <ErrorDisplay error={internalError} />
             </ResizeContainer>
         );
     }

package/src/preact/components/scaling-selector.tsx

@@ -7,18 +7,24 @@ export type ScalingSelectorProps = {
     yAxisScaleType: ScaleType;
     setYAxisScaleType: (scaleType: ScaleType) => void;
     className?: string;
+    enabledTypes?: ScaleType[];
 };
 
+const scaleTypeItem: { label: string; value: ScaleType }[] = [
+    { label: 'Linear', value: 'linear' },
+    { label: 'Logarithmic', value: 'logarithmic' },
+    { label: 'Logit', value: 'logit' },
+];
+
 export const ScalingSelector: FunctionComponent<ScalingSelectorProps> = ({
     yAxisScaleType,
     setYAxisScaleType,
     className,
+    enabledTypes,
 }) => {
     const items = [
         { label: 'y axis scaling type', value: 'none', disabled: true },
-        { label: 'Linear', value: 'linear' },
-        { label: 'Logarithmic', value: 'logarithmic' },
-        { label: 'Logit', value: 'logit' },
+        ...scaleTypeItem.filter((item) => enabledTypes === undefined || enabledTypes.includes(item.value)),
     ];
 
     return (

package/src/preact/mutationComparison/mutation-comparison.stories.tsx

@@ -29,7 +29,6 @@ const meta: Meta<MutationComparisonProps> = {
         },
         width: { control: 'text' },
         height: { control: 'text' },
-        headline: { control: 'text' },
         pageSize: { control: 'object' },
     },
     parameters: {
@@ -85,7 +84,6 @@ const Template: StoryObj<MutationComparisonProps> = {
                     views={args.views}
                     width={args.width}
                     height={args.height}
-                    headline={args.headline}
                     pageSize={args.pageSize}
                 />
             </ReferenceGenomeContext.Provider>
@@ -115,7 +113,6 @@ export const TwoVariants: StoryObj<MutationComparisonProps> = {
         views: ['table', 'venn'],
         width: '100%',
         height: '700px',
-        headline: 'Mutation comparison',
         pageSize: 10,
     },
 };

package/src/preact/mutationComparison/mutation-comparison.tsx

@@ -11,7 +11,6 @@ import { type DisplayedSegment, SegmentSelector, useDisplayedSegments } from '..
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
-import Headline from '../components/headline';
 import Info from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { type DisplayedMutationType, MutationTypeSelector } from '../components/mutation-type-selector';
@@ -27,7 +26,6 @@ export type View = 'table' | 'venn';
 export interface MutationComparisonProps extends MutationComparisonInnerProps {
     width: string;
     height: string;
-    headline?: string;
 }
 
 export interface MutationComparisonInnerProps {
@@ -37,20 +35,13 @@ export interface MutationComparisonInnerProps {
     pageSize: boolean | number;
 }
 
-export const MutationComparison: FunctionComponent<MutationComparisonProps> = ({
-    width,
-    height,
-    headline = 'Mutation comparison',
-    ...innerProps
-}) => {
+export const MutationComparison: FunctionComponent<MutationComparisonProps> = ({ width, height, ...innerProps }) => {
     const size = { height, width };
 
     return (
-        <ErrorBoundary size={size} headline={headline}>
+        <ErrorBoundary size={size}>
             <ResizeContainer size={size}>
-                <Headline heading={headline}>
-                    <MutationComparisonInner {...innerProps} />
-                </Headline>
+                <MutationComparisonInner {...innerProps} />
             </ResizeContainer>
         </ErrorBoundary>
     );

package/src/preact/mutations/mutations.stories.tsx

@@ -24,7 +24,6 @@ const meta: Meta<MutationsProps> = {
         },
         width: { control: 'text' },
         height: { control: 'text' },
-        headline: { control: 'text' },
         pageSize: { control: 'object' },
     },
 };
@@ -41,7 +40,6 @@ const Template = {
                     views={args.views}
                     width={args.width}
                     height={args.height}
-                    headline={args.headline}
                     pageSize={args.pageSize}
                 />
             </ReferenceGenomeContext.Provider>
@@ -57,7 +55,6 @@ export const Default: StoryObj<MutationsProps> = {
         views: ['grid', 'table', 'insertions'],
         width: '100%',
         height: '700px',
-        headline: 'Mutations',
         pageSize: 10,
     },
     parameters: {

package/src/preact/mutations/mutations.tsx

@@ -18,7 +18,6 @@ import { type DisplayedSegment, SegmentSelector, useDisplayedSegments } from '..
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
-import Headline from '../components/headline';
 import Info from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { type DisplayedMutationType, MutationTypeSelector } from '../components/mutation-type-selector';
@@ -41,23 +40,15 @@ export interface MutationsInnerProps {
 export interface MutationsProps extends MutationsInnerProps {
     width: string;
     height: string;
-    headline?: string;
 }
 
-export const Mutations: FunctionComponent<MutationsProps> = ({
-    width,
-    height,
-    headline = 'Mutations',
-    ...innerProps
-}) => {
+export const Mutations: FunctionComponent<MutationsProps> = ({ width, height, ...innerProps }) => {
     const size = { height, width };
 
     return (
-        <ErrorBoundary size={size} headline={headline}>
+        <ErrorBoundary size={size}>
             <ResizeContainer size={size}>
-                <Headline heading={headline}>
-                    <MutationsInner {...innerProps} />
-                </Headline>
+                <MutationsInner {...innerProps} />
             </ResizeContainer>
         </ErrorBoundary>
     );
@@ -198,7 +189,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                     <CsvDownloadButton
                         className='mx-1 btn btn-xs'
                         getData={() => getMutationsTableData(filteredData.tableData, proportionInterval)}
-                        filename='substitutionsAndDeletions.csv'
+                        filename='substitutions_and_deletions.csv'
                     />
                 </>
             )}

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

@@ -5,14 +5,16 @@ import { getNumberOfSequencesOverTimeTableData } from './getNumberOfSequencesOve
 import { type NumberOfSequencesDatasets } from '../../query/queryNumberOfSequencesOverTime';
 import GsChart from '../components/chart';
 import { singleGraphColorRGBAById } from '../shared/charts/colors';
+import { getYAxisScale, type ScaleType } from '../shared/charts/getYAxisScale';
 
 interface NumberSequencesOverBarChartProps {
     data: NumberOfSequencesDatasets;
+    yAxisScaleType: ScaleType;
 }
 
 Chart.register(...registerables);
 
-export const NumberSequencesOverTimeBarChart = ({ data }: NumberSequencesOverBarChartProps) => {
+export const NumberSequencesOverTimeBarChart = ({ data, yAxisScaleType }: NumberSequencesOverBarChartProps) => {
     const config: ChartConfiguration = useMemo(
         () => ({
             type: 'bar',
@@ -22,6 +24,11 @@ export const NumberSequencesOverTimeBarChart = ({ data }: NumberSequencesOverBar
             options: {
                 maintainAspectRatio: false,
                 animation: false,
+                scales: {
+                    y: {
+                        type: getYAxisScale(yAxisScaleType).type,
+                    },
+                },
                 plugins: {
                     legend: {
                         display: false,
@@ -33,7 +40,7 @@ export const NumberSequencesOverTimeBarChart = ({ data }: NumberSequencesOverBar
                 },
             },
         }),
-        [data],
+        [data, yAxisScaleType],
     );
 
     return <GsChart configuration={config} />;

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

@@ -5,14 +5,16 @@ import { getNumberOfSequencesOverTimeTableData } from './getNumberOfSequencesOve
 import { type NumberOfSequencesDatasets } from '../../query/queryNumberOfSequencesOverTime';
 import GsChart from '../components/chart';
 import { singleGraphColorRGBAById } from '../shared/charts/colors';
+import { getYAxisScale, type ScaleType } from '../shared/charts/getYAxisScale';
 
 interface NumberSequencesOverBarChartProps {
     data: NumberOfSequencesDatasets;
+    yAxisScaleType: ScaleType;
 }
 
 Chart.register(...registerables);
 
-export const NumberSequencesOverTimeLineChart = ({ data }: NumberSequencesOverBarChartProps) => {
+export const NumberSequencesOverTimeLineChart = ({ data, yAxisScaleType }: NumberSequencesOverBarChartProps) => {
     const config: ChartConfiguration = useMemo(
         () => ({
             type: 'line',
@@ -22,6 +24,11 @@ export const NumberSequencesOverTimeLineChart = ({ data }: NumberSequencesOverBa
             options: {
                 maintainAspectRatio: false,
                 animation: false,
+                scales: {
+                    y: {
+                        type: getYAxisScale(yAxisScaleType).type,
+                    },
+                },
                 plugins: {
                     legend: {
                         display: false,
@@ -33,7 +40,7 @@ export const NumberSequencesOverTimeLineChart = ({ data }: NumberSequencesOverBa
                 },
             },
         }),
-        [data],
+        [data, yAxisScaleType],
     );
 
     return <GsChart configuration={config} />;

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

@@ -35,7 +35,6 @@ const Template: StoryObj<NumberSequencesOverTimeProps> = {
                 views={args.views}
                 width={args.width}
                 height={args.height}
-                headline={args.headline}
                 granularity={args.granularity}
                 smoothingWindow={args.smoothingWindow}
                 pageSize={args.pageSize}
@@ -50,7 +49,6 @@ const Template: StoryObj<NumberSequencesOverTimeProps> = {
         lapisDateField: 'date',
         width: '100%',
         height: '700px',
-        headline: 'Number of sequences over time',
         smoothingWindow: 0,
         granularity: 'month',
         pageSize: 10,

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

@@ -1,5 +1,6 @@
-import { useContext } from 'preact/hooks';
+import { useContext, useState } from 'preact/hooks';
 
+import { getNumberOfSequencesOverTimeTableData } from './getNumberOfSequencesOverTimeTableData';
 import { NumberSequencesOverTimeBarChart } from './number-sequences-over-time-bar-chart';
 import { NumberSequencesOverTimeLineChart } from './number-sequences-over-time-line-chart';
 import { NumberSequencesOverTimeTable } from './number-sequences-over-time-table';
@@ -9,13 +10,16 @@ import {
 } from '../../query/queryNumberOfSequencesOverTime';
 import type { NamedLapisFilter, TemporalGranularity } from '../../types';
 import { LapisUrlContext } from '../LapisUrlContext';
+import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
-import Headline from '../components/headline';
+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';
+import { ScalingSelector } from '../components/scaling-selector';
 import Tabs from '../components/tabs';
+import type { ScaleType } from '../shared/charts/getYAxisScale';
 import { useQuery } from '../useQuery';
 
 type NumberSequencesOverTimeView = 'bar' | 'line' | 'table';
@@ -23,7 +27,6 @@ type NumberSequencesOverTimeView = 'bar' | 'line' | 'table';
 export interface NumberSequencesOverTimeProps extends NumberSequencesOverTimeInnerProps {
     width: string;
     height: string;
-    headline: string;
 }
 
 interface NumberSequencesOverTimeInnerProps {
@@ -35,15 +38,13 @@ interface NumberSequencesOverTimeInnerProps {
     pageSize: boolean | number;
 }
 
-export const NumberSequencesOverTime = ({ width, height, headline, ...innerProps }: NumberSequencesOverTimeProps) => {
+export const NumberSequencesOverTime = ({ width, height, ...innerProps }: NumberSequencesOverTimeProps) => {
     const size = { height, width };
 
     return (
-        <ErrorBoundary size={size} headline={headline}>
+        <ErrorBoundary size={size}>
             <ResizeContainer size={size}>
-                <Headline heading={headline}>
-                    <NumberSequencesOverTimeInner {...innerProps} />
-                </Headline>
+                <NumberSequencesOverTimeInner {...innerProps} />
             </ResizeContainer>
         </ErrorBoundary>
     );
@@ -86,12 +87,20 @@ interface NumberSequencesOverTimeTabsProps {
 }
 
 const NumberSequencesOverTimeTabs = ({ views, data, granularity, pageSize }: NumberSequencesOverTimeTabsProps) => {
+    const [yAxisScaleType, setYAxisScaleType] = useState<ScaleType>('linear');
+
     const getTab = (view: NumberSequencesOverTimeView) => {
         switch (view) {
             case 'bar':
-                return { title: 'Bar', content: <NumberSequencesOverTimeBarChart data={data} /> };
+                return {
+                    title: 'Bar',
+                    content: <NumberSequencesOverTimeBarChart data={data} yAxisScaleType={yAxisScaleType} />,
+                };
             case 'line':
-                return { title: 'Line', content: <NumberSequencesOverTimeLineChart data={data} /> };
+                return {
+                    title: 'Line',
+                    content: <NumberSequencesOverTimeLineChart data={data} yAxisScaleType={yAxisScaleType} />,
+                };
             case 'table':
                 return {
                     title: 'Table',
@@ -102,5 +111,55 @@ const NumberSequencesOverTimeTabs = ({ views, data, granularity, pageSize }: Num
         }
     };
 
-    return <Tabs tabs={views.map((view) => getTab(view))} />;
+    return (
+        <Tabs
+            tabs={views.map((view) => getTab(view))}
+            toolbar={(activeTab) => (
+                <Toolbar
+                    activeTab={activeTab}
+                    data={data}
+                    granularity={granularity}
+                    yAxisScaleType={yAxisScaleType}
+                    setYAxisScaleType={setYAxisScaleType}
+                />
+            )}
+        />
+    );
+};
+
+interface ToolbarProps {
+    activeTab: string;
+    data: NumberOfSequencesDatasets;
+    granularity: TemporalGranularity;
+    yAxisScaleType: ScaleType;
+    setYAxisScaleType: (scaleType: ScaleType) => void;
+}
+
+const Toolbar = ({ activeTab, data, granularity, yAxisScaleType, setYAxisScaleType }: ToolbarProps) => {
+    return (
+        <>
+            {activeTab !== 'Table' && (
+                <ScalingSelector
+                    yAxisScaleType={yAxisScaleType}
+                    setYAxisScaleType={setYAxisScaleType}
+                    enabledTypes={['linear', 'logarithmic']}
+                />
+            )}
+            <CsvDownloadButton
+                className='mx-1 btn btn-xs'
+                getData={() => getNumberOfSequencesOverTimeTableData(data, granularity)}
+                filename='number_of_sequences_over_time.csv'
+            />
+            <NumberSequencesOverTimeInfo />
+        </>
+    );
 };
+
+const NumberSequencesOverTimeInfo = () => (
+    <Info height='100px'>
+        <InfoHeadline1>Number of sequences over time</InfoHeadline1>
+        <InfoParagraph>
+            <a href='https://github.com/GenSpectrum/dashboard-components/issues/315'>TODO</a>
+        </InfoParagraph>
+    </Info>
+);

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

@@ -31,7 +31,6 @@ export default {
         },
         width: { control: 'text' },
         height: { control: 'text' },
-        headline: { control: 'text' },
         pageSize: { control: 'object' },
         yAxisMaxConfig: { control: 'object' },
     },
@@ -49,7 +48,6 @@ const Template = {
                 confidenceIntervalMethods={args.confidenceIntervalMethods}
                 width={args.width}
                 height={args.height}
-                headline={args.headline}
                 lapisDateField={args.lapisDateField}
                 pageSize={args.pageSize}
                 yAxisMaxConfig={args.yAxisMaxConfig}
@@ -72,7 +70,6 @@ export const TwoVariants = {
         confidenceIntervalMethods: ['wilson'],
         width: '100%',
         height: '700px',
-        headline: 'Prevalence over time',
         lapisDateField: 'date',
         pageSize: 10,
         yAxisMaxConfig: {
@@ -149,7 +146,6 @@ export const OneVariant = {
         confidenceIntervalMethods: ['wilson'],
         width: '100%',
         height: '700px',
-        headline: 'Prevalence over time',
         lapisDateField: 'date',
         pageSize: 10,
         yAxisMaxConfig: {