@genspectrum/dashboard-components 0.4.5 → 0.5.0

package/src/web-components/visualization/gs-mutation-comparison.tsx

@@ -7,8 +7,8 @@ import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsS
 /**
  * ## Context
  *
- * This component allows to compare mutations between different variants.
- * A variant is defined by its LAPIS filter.
+ * This component allows to compare mutations between two different datasets.
+ * The datasets are selected by LAPIS filters.
  *
  * It only shows substitutions and deletions, it does not show insertions.
  *
@@ -16,34 +16,33 @@ import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsS
  *
  * ### Table View
  *
- * The table view shows mutations
- * and the proportions with which the mutation occurs in the respective variant.
- * It only shows mutations that are present in at least one of the variants
- * and where the proportion is within the selected proportion interval for at least one variant.
+ * The table view shows mutations and the proportions with which the mutation occurs in the respective data subsets.
+ * It only shows mutations that are present in at least one of the data subsets
+ * and where the proportion is within the selected proportion interval for at least one data subset.
  *
  * ### Venn View
  *
- * The Venn view shows the overlap of mutations between the variants in a Venn diagram.
- * A variant is considered to have a certain mutation,
- * if the proportion of the mutation in the variant is within the selected proportion interval.
- * Thus, changing the proportion interval may change a mutations from being "common" between variant
- * to being "for one variant only".
+ * The Venn view shows the overlap of mutations between the datasets in a Venn diagram.
+ * A dataset is considered to have a certain mutation, if the proportion of the mutation in the dataset is within the
+ * selected proportion interval.
+ * Thus, changing the proportion interval may change a mutations from being "common" between the datasets
+ * to being "for one dataset only".
  */
 @customElement('gs-mutation-comparison')
 export class MutationComparisonComponent extends PreactLitAdapterWithGridJsStyles {
     /**
      * Required.
      *
-     * An array of variants to compare.
+     * An array of LAPIS filters to select the data to compare.
      *
      * The `lapisFilter` will be sent as is to LAPIS to filter the mutation data.
      * It must be a valid LAPIS filter object.
      *
-     * The `displayName` will be used as the label for the variant in the views.
+     * The `displayName` will be used as the label for the filtered dataset in the views.
      * It should be human-readable.
      */
     @property({ type: Array })
-    variants: {
+    lapisFilters: {
         lapisFilter: Record<string, string | number | null | boolean>;
         displayName: string;
     }[] = [];
@@ -63,7 +62,7 @@ export class MutationComparisonComponent extends PreactLitAdapterWithGridJsStyle
     /**
      * The width of the component.
      *
-     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     @property({ type: String })
     width: string = '100%';
@@ -71,7 +70,7 @@ export class MutationComparisonComponent extends PreactLitAdapterWithGridJsStyle
     /**
      * The height of the component.
      *
-     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     @property({ type: String })
     height: string = '700px';
@@ -92,7 +91,7 @@ export class MutationComparisonComponent extends PreactLitAdapterWithGridJsStyle
     override render() {
         return (
             <MutationComparison
-                variants={this.variants}
+                lapisFilters={this.lapisFilters}
                 sequenceType={this.sequenceType}
                 views={this.views}
                 width={this.width}
@@ -111,8 +110,8 @@ declare global {
 }
 
 /* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
-type VariantsMatches = Expect<
-    Equals<typeof MutationComparisonComponent.prototype.variants, MutationComparisonProps['variants']>
+type LapisFiltersMatches = Expect<
+    Equals<typeof MutationComparisonComponent.prototype.lapisFilters, MutationComparisonProps['lapisFilters']>
 >;
 type SequenceTypeMatches = Expect<
     Equals<typeof MutationComparisonComponent.prototype.sequenceType, MutationComparisonProps['sequenceType']>

package/src/web-components/visualization/gs-mutations.stories.ts

@@ -13,7 +13,7 @@ import { withinShadowRoot } from '../withinShadowRoot.story';
 
 const codeExample = String.raw`
 <gs-mutations
-    variant='{ "country": "Switzerland", "pangoLineage": "B.1.1.7", "dateTo": "2022-01-01" }'
+    lapisFilter='{ "country": "Switzerland", "pangoLineage": "B.1.1.7", "dateTo": "2022-01-01" }'
     sequenceType="nucleotide"
     views='["grid", "table", "insertions"]'
     headline="Mutations"
@@ -26,7 +26,7 @@ const meta: Meta<Required<MutationsProps>> = {
     title: 'Visualization/Mutations',
     component: 'gs-mutations',
     argTypes: {
-        variant: { control: 'object' },
+        lapisFilter: { control: 'object' },
         sequenceType: {
             options: ['nucleotide', 'amino acid'],
             control: { type: 'radio' },
@@ -41,7 +41,7 @@ const meta: Meta<Required<MutationsProps>> = {
         pageSize: { control: 'object' },
     },
     args: {
-        variant: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo: '2022-01-01' },
+        lapisFilter: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo: '2022-01-01' },
         sequenceType: 'nucleotide',
         views: ['grid', 'table', 'insertions'],
         width: '100%',
@@ -65,7 +65,7 @@ const Template: StoryObj<Required<MutationsProps>> = {
     render: (args) => html`
         <gs-app lapis="${LAPIS_URL}">
             <gs-mutations
-                .variant=${args.variant}
+                .lapisFilter=${args.lapisFilter}
                 .sequenceType=${args.sequenceType}
                 .views=${args.views}
                 .width=${args.width}

package/src/web-components/visualization/gs-mutations.tsx

@@ -8,15 +8,15 @@ import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsS
 /**
  * ## Context
  *
- * This component displays mutations (substitutions, deletions and insertions) for a given variant.
+ * This component displays mutations (substitutions, deletions and insertions) for a dataset selected by a LAPIS filter.
  *
  * ## Views
  *
  * ### Table View
  *
- * The table view shows all substitutions and deletions for the given variant.
+ * The table view shows all substitutions and deletions for the dataset.
  * It shows the type (substitution or deletion), the total count of the mutation
- * and the proportion of the mutation in the variant.
+ * and the proportion of the mutation in the dataset.
  * The proportion is relative to the total number of sequences matching
  * the specified sequence filters with non-ambiguous reads at that position.
  *
@@ -29,7 +29,7 @@ import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsS
  *
  * ### Insertions View
  *
- * The insertions view shows the count of all insertions for the given variant.
+ * The insertions view shows the count of all insertions for the dataset.
  *
  */
 @customElement('gs-mutations')
@@ -37,11 +37,10 @@ export class MutationsComponent extends PreactLitAdapterWithGridJsStyles {
     /**
      * Required.
      *
-     * The `variant` will be sent as is to LAPIS to filter the mutation data.
-     * It must be a valid LAPIS filter object.
+     * LAPIS filter to select the displayed data.
      */
     @property({ type: Object })
-    variant: Record<string, string | number | null | boolean> = {};
+    lapisFilter: Record<string, string | number | null | boolean> = {};
 
     /**
      * The type of the sequence for which the mutations should be shown.
@@ -58,7 +57,7 @@ export class MutationsComponent extends PreactLitAdapterWithGridJsStyles {
     /**
      * The width of the component.
      *
-     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     @property({ type: String })
     width: string = '100%';
@@ -66,7 +65,7 @@ export class MutationsComponent extends PreactLitAdapterWithGridJsStyles {
     /**
      * The height of the component.
      *
-     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     @property({ type: String })
     height: string = '700px';
@@ -87,7 +86,7 @@ export class MutationsComponent extends PreactLitAdapterWithGridJsStyles {
     override render() {
         return (
             <Mutations
-                variant={this.variant}
+                lapisFilter={this.lapisFilter}
                 sequenceType={this.sequenceType}
                 views={this.views}
                 width={this.width}
@@ -106,7 +105,7 @@ declare global {
 }
 
 /* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
-type VariantsMatches = Expect<Equals<typeof MutationsComponent.prototype.variant, LapisFilter>>;
+type LapisFilterMatches = Expect<Equals<typeof MutationsComponent.prototype.lapisFilter, LapisFilter>>;
 type SequenceTypeMatches = Expect<Equals<typeof MutationsComponent.prototype.sequenceType, SequenceType>>;
 type ViewsMatches = Expect<Equals<typeof MutationsComponent.prototype.views, View[]>>;
 /* eslint-enable @typescript-eslint/no-unused-vars, no-unused-vars */

package/src/web-components/visualization/gs-prevalence-over-time.stories.ts

@@ -4,20 +4,21 @@ import { html } from 'lit';
 
 import '../app';
 import './gs-prevalence-over-time';
+// eslint-disable-next-line no-duplicate-imports
+import { type PrevalenceOverTimeComponentProps } from './gs-prevalence-over-time';
 import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
-import denominator from '../../preact/prevalenceOverTime/__mockData__/denominator.json';
-import denominatorOneVariant from '../../preact/prevalenceOverTime/__mockData__/denominatorOneVariant.json';
-import numeratorEG from '../../preact/prevalenceOverTime/__mockData__/numeratorEG.json';
-import numeratorJN1 from '../../preact/prevalenceOverTime/__mockData__/numeratorJN1.json';
-import numeratorOneVariant from '../../preact/prevalenceOverTime/__mockData__/numeratorOneVariant.json';
-import { type PrevalenceOverTimeProps } from '../../preact/prevalenceOverTime/prevalence-over-time';
+import denominatorFilter from '../../preact/prevalenceOverTime/__mockData__/denominatorFilter.json';
+import denominatorFilterOneDataset from '../../preact/prevalenceOverTime/__mockData__/denominatorFilterOneDataset.json';
+import numeratorFilterEG from '../../preact/prevalenceOverTime/__mockData__/numeratorFilterEG.json';
+import numeratorFilterJN1 from '../../preact/prevalenceOverTime/__mockData__/numeratorFilterJN1.json';
+import numeratorFilterOneDataset from '../../preact/prevalenceOverTime/__mockData__/numeratorFilterOneDataset.json';
 import { withinShadowRoot } from '../withinShadowRoot.story';
 
 const codeExample = String.raw`
 <gs-prevalence-over-time
-    numerator='[{ "displayName": "EG", "lapisFilter": { "country": "USA", "pangoLineage": "EG*" }}, { "displayName": "JN.1", "lapisFilter": { "country": "USA", "pangoLineage": "JN.1*" }}]'
-    denominator='{ "country": "USA"}'
+    numeratorFilter='[{ "displayName": "EG", "lapisFilter": { "country": "USA", "pangoLineage": "EG*" }}, { "displayName": "JN.1", "lapisFilter": { "country": "USA", "pangoLineage": "JN.1*" }}]'
+    denominatorFilter='{ "country": "USA"}'
     granularity="month"
     smoothingWindow="0"
     views='["bar", "line", "bubble", "table"]'
@@ -27,14 +28,16 @@ const codeExample = String.raw`
     height="700px"
     lapisDateField="date"
     pageSize="10"
+    yAxisMaxLinear="1"
+    yAxisMaxLogarithmic="limitTo1"    
 ></gs-prevalence-over-time>`;
 
-const meta: Meta<Required<PrevalenceOverTimeProps>> = {
+const meta: Meta<Required<PrevalenceOverTimeComponentProps>> = {
     title: 'Visualization/Prevalence over time',
     component: 'gs-prevalence-over-time',
     argTypes: {
-        numerator: { control: 'object' },
-        denominator: { control: 'object' },
+        numeratorFilter: { control: 'object' },
+        denominatorFilter: { control: 'object' },
         granularity: {
             options: ['day', 'week', 'month', 'year'],
             control: { type: 'radio' },
@@ -52,6 +55,8 @@ const meta: Meta<Required<PrevalenceOverTimeProps>> = {
         height: { control: 'text' },
         headline: { control: 'text' },
         pageSize: { control: 'object' },
+        yAxisMaxLinear: { control: 'object' },
+        yAxisMaxLogarithmic: { control: 'object' },
     },
     parameters: withComponentDocs({
         componentDocs: {
@@ -65,12 +70,12 @@ const meta: Meta<Required<PrevalenceOverTimeProps>> = {
 
 export default meta;
 
-const Template: StoryObj<Required<PrevalenceOverTimeProps>> = {
+const Template: StoryObj<Required<PrevalenceOverTimeComponentProps>> = {
     render: (args) => html`
         <gs-app lapis="${LAPIS_URL}">
             <gs-prevalence-over-time
-                .numerator=${args.numerator}
-                .denominator=${args.denominator}
+                .numeratorFilter=${args.numeratorFilter}
+                .denominatorFilter=${args.denominatorFilter}
                 .granularity=${args.granularity}
                 .smoothingWindow=${args.smoothingWindow}
                 .views=${args.views}
@@ -80,19 +85,21 @@ const Template: StoryObj<Required<PrevalenceOverTimeProps>> = {
                 .headline=${args.headline}
                 .lapisDateField=${args.lapisDateField}
                 .pageSize=${args.pageSize}
+                .yAxisMaxLinear=${args.yAxisMaxLinear}
+                .yAxisMaxLogarithmic=${args.yAxisMaxLogarithmic}
             ></gs-prevalence-over-time>
         </gs-app>
     `,
 };
 
-export const TwoVariants: StoryObj<Required<PrevalenceOverTimeProps>> = {
+export const TwoDatasets: StoryObj<Required<PrevalenceOverTimeComponentProps>> = {
     ...Template,
     args: {
-        numerator: [
+        numeratorFilter: [
             { displayName: 'EG', lapisFilter: { country: 'USA', pangoLineage: 'EG*', dateFrom: '2023-01-01' } },
             { displayName: 'JN.1', lapisFilter: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01' } },
         ],
-        denominator: { country: 'USA', dateFrom: '2023-01-01' },
+        denominatorFilter: { country: 'USA', dateFrom: '2023-01-01' },
         granularity: 'month',
         smoothingWindow: 0,
         views: ['bar', 'line', 'bubble', 'table'],
@@ -102,6 +109,8 @@ export const TwoVariants: StoryObj<Required<PrevalenceOverTimeProps>> = {
         headline: 'Prevalence over time',
         lapisDateField: 'date',
         pageSize: 10,
+        yAxisMaxLinear: 1,
+        yAxisMaxLogarithmic: 'limitTo1',
     },
     parameters: {
         fetchMock: {
@@ -119,7 +128,7 @@ export const TwoVariants: StoryObj<Required<PrevalenceOverTimeProps>> = {
                     },
                     response: {
                         status: 200,
-                        body: numeratorEG,
+                        body: numeratorFilterEG,
                     },
                 },
                 {
@@ -135,7 +144,7 @@ export const TwoVariants: StoryObj<Required<PrevalenceOverTimeProps>> = {
                     },
                     response: {
                         status: 200,
-                        body: numeratorJN1,
+                        body: numeratorFilterJN1,
                     },
                 },
                 {
@@ -150,7 +159,7 @@ export const TwoVariants: StoryObj<Required<PrevalenceOverTimeProps>> = {
                     },
                     response: {
                         status: 200,
-                        body: denominator,
+                        body: denominatorFilter,
                     },
                 },
             ],
@@ -158,16 +167,16 @@ export const TwoVariants: StoryObj<Required<PrevalenceOverTimeProps>> = {
     },
 };
 
-export const OneVariant: StoryObj<Required<PrevalenceOverTimeProps>> = {
+export const OneDataset: StoryObj<Required<PrevalenceOverTimeComponentProps>> = {
     ...Template,
     args: {
-        numerator: {
+        numeratorFilter: {
             displayName: 'EG',
             lapisFilter: { country: 'USA', pangoLineage: 'BA.2.86*', dateFrom: '2023-10-01' },
         },
-        denominator: { country: 'USA', dateFrom: '2023-10-01' },
-        granularity: 'day',
-        smoothingWindow: 7,
+        denominatorFilter: { country: 'USA', dateFrom: '2023-10-01' },
+        granularity: 'week',
+        smoothingWindow: 2,
         views: ['bar', 'line', 'bubble', 'table'],
         confidenceIntervalMethods: ['wilson'],
         width: '100%',
@@ -175,13 +184,15 @@ export const OneVariant: StoryObj<Required<PrevalenceOverTimeProps>> = {
         headline: 'Prevalence over time',
         lapisDateField: 'date',
         pageSize: 10,
+        yAxisMaxLinear: 1,
+        yAxisMaxLogarithmic: 'limitTo1',
     },
     parameters: {
         fetchMock: {
             mocks: [
                 {
                     matcher: {
-                        name: 'numeratorOneVariant',
+                        name: 'numeratorOneDataset',
                         url: AGGREGATED_ENDPOINT,
                         body: {
                             country: 'USA',
@@ -192,12 +203,12 @@ export const OneVariant: StoryObj<Required<PrevalenceOverTimeProps>> = {
                     },
                     response: {
                         status: 200,
-                        body: numeratorOneVariant,
+                        body: numeratorFilterOneDataset,
                     },
                 },
                 {
                     matcher: {
-                        name: 'denominatorOneVariant',
+                        name: 'denominatorOneDataset',
                         url: AGGREGATED_ENDPOINT,
                         body: {
                             country: 'USA',
@@ -207,7 +218,7 @@ export const OneVariant: StoryObj<Required<PrevalenceOverTimeProps>> = {
                     },
                     response: {
                         status: 200,
-                        body: denominatorOneVariant,
+                        body: denominatorFilterOneDataset,
                     },
                 },
             ],
@@ -215,8 +226,8 @@ export const OneVariant: StoryObj<Required<PrevalenceOverTimeProps>> = {
     },
 };
 
-export const OneVariantOnLineTab: StoryObj<Required<PrevalenceOverTimeProps>> = {
-    ...OneVariant,
+export const OneDatasetOnLineTab: StoryObj<Required<PrevalenceOverTimeComponentProps>> = {
+    ...OneDataset,
     play: async ({ canvasElement }) => {
         const canvas = await withinShadowRoot(canvasElement, 'gs-prevalence-over-time');
 
@@ -226,8 +237,8 @@ export const OneVariantOnLineTab: StoryObj<Required<PrevalenceOverTimeProps>> =
     },
 };
 
-export const OneVariantOnBubbleTab: StoryObj<Required<PrevalenceOverTimeProps>> = {
-    ...OneVariant,
+export const OneDatasetOnBubbleTab: StoryObj<Required<PrevalenceOverTimeComponentProps>> = {
+    ...OneDataset,
     play: async ({ canvasElement }) => {
         const canvas = await withinShadowRoot(canvasElement, 'gs-prevalence-over-time');
 
@@ -237,8 +248,8 @@ export const OneVariantOnBubbleTab: StoryObj<Required<PrevalenceOverTimeProps>>
     },
 };
 
-export const OneVariantOnTableTab: StoryObj<Required<PrevalenceOverTimeProps>> = {
-    ...OneVariant,
+export const OneDatasetOnTableTab: StoryObj<Required<PrevalenceOverTimeComponentProps>> = {
+    ...OneDataset,
     play: async ({ canvasElement }) => {
         const canvas = await withinShadowRoot(canvasElement, 'gs-prevalence-over-time');
 

package/src/web-components/visualization/gs-prevalence-over-time.tsx

@@ -1,15 +1,16 @@
 import { customElement, property } from 'lit/decorators.js';
 
 import { PrevalenceOverTime, type PrevalenceOverTimeProps } from '../../preact/prevalenceOverTime/prevalence-over-time';
+import { type AxisMax } from '../../preact/shared/charts/getYAxisMax';
 import { type Equals, type Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsStyles';
 
 /**
  * ## Context
  *
- * This component displays the prevalence over time of one or more variants.
- * The prevalence is calculated as the ratio of the number of cases of each variant given as `numerator`
- * to the number of cases of the variant given as `denominator`.
+ * This component displays the prevalence over time of one or more datasets, selected by LAPIS filters.
+ * The prevalence is calculated as the ratio of the number of cases of each dataset to the number of cases of a reference dataset.
+ * The reference dataset is also selected by a LAPIS filter.
  *
  * In the chart views,
  * - the user can select whether to display a confidence interval (not available in the bubble chart).
@@ -23,19 +24,19 @@ import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsS
  * ### Bar View
  *
  * Displays the prevalence over time as a bar chart.
- * Shows a bar for each variant in the `numerator` on every time step.
+ * Shows a bar for each dataset of the `numeratorFilter` on every time step.
  *
  * ### Line View
  *
  * Displays the prevalence over time as a line chart.
  * Each data point is connected for better visibility.
- * Shows a line for each variant in the `numerator`.
+ * Shows a line for each dataset of the `numeratorFilter`.
  *
  * ### Bubble View
  *
  * Displays the prevalence over time as a bubble chart.
- * The size of the bubbles represents the number of cases of the `denominator` variant.
- * The height of the bubbles represents the prevalence of the `numerator` variants.
+ * The size of the bubbles represents the number of cases of the reference, defined by the `denominatorFilter`.
+ * The height of the bubbles represents the prevalence of the datasets selected by the `numeratorFilters`.
  *
  * ### Table View
  *
@@ -47,14 +48,17 @@ export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyle
     // The multiline union type must not start with `|` because it looks weird in the Storybook docs
     /**
      *   Required.
+     * Either a LAPIS filter or an array of LAPIS filters to calculate the prevalence 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.
+     * It should be human-readable.
      *
-     * Either a single variant or an array of variants to compare.
-     * This must be a valid LAPIS filter object with an additional `displayName` property
-     * which will be used as the label for the variant in the views,
-     * or an array of such objects.
      */
     @property({ type: Object })
-    numerator:
+    numeratorFilter:
         {
             lapisFilter: Record<string, string | number | null | boolean>;
             displayName: string;
@@ -67,10 +71,11 @@ export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyle
     /**
      * Required.
      *
-     * The variant that the variants in `numerator` are compared to.
+     * The LAPIS filter, to select the data of the reference.
+     * It must be a valid LAPIS filter object.
      */
     @property({ type: Object })
-    denominator: Record<string, string | number | null | boolean> = {};
+    denominatorFilter: Record<string, string | number | null | boolean> = {};
 
     /**
      * The granularity of the time axis.
@@ -113,7 +118,7 @@ export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyle
     /**
      * The width of the component.
      *
-     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     @property({ type: String })
     width: string = '100%';
@@ -121,7 +126,7 @@ export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyle
     /**
      * The height of the component.
      *
-     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     @property({ type: String })
     height: string = '700px';
@@ -143,11 +148,31 @@ export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyle
     @property({ type: Object })
     pageSize: boolean | number = false;
 
+    /**
+     * The maximum value for the y-axis on all graphs in linear view.
+     * If set to a number, the maximum value is set to this number.
+     * If set to `maxInData`, the maximum value is set to the maximum value in the data.
+     * If set to `limitTo1`, the maximum value is set to `min(1, the maximum value in the data)`.
+     * If not set, the maximum value is set to the default value (1).
+     */
+    @property({ type: String })
+    yAxisMaxLinear: 'maxInData' | 'limitTo1' | number = 1;
+
+    /**
+     * The maximum value for the y-axis on all graphs in logarithmic view.
+     * If set to a number, the maximum value is set to this number.
+     * If set to `maxInData`, the maximum value is set to the maximum value in the data.
+     * If set to `limitTo1`, the maximum value is set to `min(1, the maximum value in the data)`.
+     * If not set, the maximum value is set to the default value (1).
+     */
+    @property({ type: String })
+    yAxisMaxLogarithmic: 'maxInData' | 'limitTo1' | number = 1;
+
     override render() {
         return (
             <PrevalenceOverTime
-                numerator={this.numerator}
-                denominator={this.denominator}
+                numeratorFilter={this.numeratorFilter}
+                denominatorFilter={this.denominatorFilter}
                 granularity={this.granularity}
                 smoothingWindow={this.smoothingWindow}
                 views={this.views}
@@ -157,11 +182,20 @@ export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyle
                 headline={this.headline}
                 lapisDateField={this.lapisDateField}
                 pageSize={this.pageSize}
+                yAxisMaxConfig={{
+                    linear: this.yAxisMaxLinear,
+                    logarithmic: this.yAxisMaxLogarithmic,
+                }}
             />
         );
     }
 }
 
+export interface PrevalenceOverTimeComponentProps extends Omit<PrevalenceOverTimeProps, 'yAxisMaxConfig'> {
+    yAxisMaxLinear?: AxisMax;
+    yAxisMaxLogarithmic?: AxisMax;
+}
+
 declare global {
     interface HTMLElementTagNameMap {
         'gs-prevalence-over-time': PrevalenceOverTimeComponent;
@@ -170,10 +204,10 @@ declare global {
 
 /* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
 type NumeratorMatches = Expect<
-    Equals<typeof PrevalenceOverTimeComponent.prototype.numerator, PrevalenceOverTimeProps['numerator']>
+    Equals<typeof PrevalenceOverTimeComponent.prototype.numeratorFilter, PrevalenceOverTimeProps['numeratorFilter']>
 >;
 type DenominatorMatches = Expect<
-    Equals<typeof PrevalenceOverTimeComponent.prototype.denominator, PrevalenceOverTimeProps['denominator']>
+    Equals<typeof PrevalenceOverTimeComponent.prototype.denominatorFilter, PrevalenceOverTimeProps['denominatorFilter']>
 >;
 type GranularityMatches = Expect<
     Equals<typeof PrevalenceOverTimeComponent.prototype.granularity, PrevalenceOverTimeProps['granularity']>