@genspectrum/dashboard-components 0.4.4 → 0.5.0

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

@@ -48,7 +48,7 @@ export class AggregateComponent 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%';
@@ -56,7 +56,7 @@ export class AggregateComponent 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';
@@ -80,6 +80,13 @@ export class AggregateComponent extends PreactLitAdapterWithGridJsStyles {
     @property({ type: String })
     initialSortDirection: 'ascending' | 'descending' = 'descending';
 
+    /**
+     * 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).
+     */
+    @property({ type: Object })
+    pageSize: boolean | number = false;
+
     override render() {
         return (
             <Aggregate
@@ -91,6 +98,7 @@ export class AggregateComponent extends PreactLitAdapterWithGridJsStyles {
                 headline={this.headline}
                 initialSortField={this.initialSortField}
                 initialSortDirection={this.initialSortDirection}
+                pageSize={this.pageSize}
             />
         );
     }

package/src/web-components/visualization/gs-mutation-comparison.stories.ts

@@ -6,26 +6,27 @@ import './gs-mutation-comparison';
 import '../app';
 import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
 import { LAPIS_URL, NUCLEOTIDE_MUTATIONS_ENDPOINT } from '../../constants';
-import nucleotideMutationsOtherVariant from '../../preact/mutationComparison/__mockData__/nucleotideMutationsOtherVariant.json';
-import nucleotideMutationsSomeVariant from '../../preact/mutationComparison/__mockData__/nucleotideMutationsSomeVariant.json';
+import nucleotideMutationsOtherDataset from '../../preact/mutationComparison/__mockData__/nucleotideMutationsOtherDataset.json';
+import nucleotideMutationsSomeDataset from '../../preact/mutationComparison/__mockData__/nucleotideMutationsSomeDataset.json';
 import { type MutationComparisonProps } from '../../preact/mutationComparison/mutation-comparison';
 import { withinShadowRoot } from '../withinShadowRoot.story';
 
 const codeExample = String.raw`
 <gs-mutation-comparison
-    variants='[{ "displayName": "variant1", "lapisFilter": { "country": "Switzerland" }}, { "displayName": "variant2", "lapisFilter": { "country": "Germany" }}]'
+    lapisFilters='[{ "displayName": "Data in Switzerland", "lapisFilter": { "country": "Switzerland" }}, { "displayName": "Data in Germany", "lapisFilter": { "country": "Germany" }}]'
     sequenceType="nucleotide"
     views='["table", "venn"]'
     headline="Mutation comparison"
     width='100%'
     height='700px'
+    pageSize="10"
 ></gs-mutation-comparison>`;
 
 const meta: Meta<Required<MutationComparisonProps>> = {
     title: 'Visualization/Mutation comparison',
     component: 'gs-mutation-comparison',
     argTypes: {
-        variants: { control: 'object' },
+        lapisFilters: { control: 'object' },
         sequenceType: {
             options: ['nucleotide', 'amino acid'],
             control: { type: 'radio' },
@@ -37,6 +38,7 @@ const meta: Meta<Required<MutationComparisonProps>> = {
         width: { control: 'text' },
         height: { control: 'text' },
         headline: { control: 'text' },
+        pageSize: { control: 'object' },
     },
     parameters: withComponentDocs({
         componentDocs: {
@@ -54,12 +56,13 @@ const Template: StoryObj<Required<MutationComparisonProps>> = {
     render: (args) => html`
         <gs-app lapis="${LAPIS_URL}">
             <gs-mutation-comparison
-                .variants=${args.variants}
+                .lapisFilters=${args.lapisFilters}
                 .sequenceType=${args.sequenceType}
                 .views=${args.views}
                 .width=${args.width}
                 .height=${args.height}
                 .headline=${args.headline}
+                .pageSize=${args.pageSize}
             ></gs-mutation-comparison>
         </gs-app>
     `,
@@ -71,13 +74,13 @@ const dateFrom = '2021-01-01';
 export const Default: StoryObj<Required<MutationComparisonProps>> = {
     ...Template,
     args: {
-        variants: [
+        lapisFilters: [
             {
-                displayName: 'Some variant',
+                displayName: 'Some dataset',
                 lapisFilter: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo },
             },
             {
-                displayName: 'Other variant',
+                displayName: 'Other dataset',
                 lapisFilter: {
                     country: 'Switzerland',
                     pangoLineage: 'B.1.1.7',
@@ -91,13 +94,14 @@ export const Default: StoryObj<Required<MutationComparisonProps>> = {
         width: '100%',
         height: '700px',
         headline: 'Mutation comparison',
+        pageSize: 10,
     },
     parameters: {
         fetchMock: {
             mocks: [
                 {
                     matcher: {
-                        name: 'nucleotideMutationsSomeVariant',
+                        name: 'nucleotideMutationsSomeDataset',
                         url: NUCLEOTIDE_MUTATIONS_ENDPOINT,
                         body: {
                             country: 'Switzerland',
@@ -108,12 +112,12 @@ export const Default: StoryObj<Required<MutationComparisonProps>> = {
                     },
                     response: {
                         status: 200,
-                        body: nucleotideMutationsSomeVariant,
+                        body: nucleotideMutationsSomeDataset,
                     },
                 },
                 {
                     matcher: {
-                        name: 'nucleotideMutationsOtherVariant',
+                        name: 'nucleotideMutationsOtherDataset',
                         url: NUCLEOTIDE_MUTATIONS_ENDPOINT,
                         body: {
                             country: 'Switzerland',
@@ -125,7 +129,7 @@ export const Default: StoryObj<Required<MutationComparisonProps>> = {
                     },
                     response: {
                         status: 200,
-                        body: nucleotideMutationsOtherVariant,
+                        body: nucleotideMutationsOtherDataset,
                     },
                 },
             ],

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';
@@ -82,15 +81,23 @@ export class MutationComparisonComponent extends PreactLitAdapterWithGridJsStyle
     @property({ type: String })
     headline: string = 'Mutation comparison';
 
+    /**
+     * 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).
+     */
+    @property({ type: Object })
+    pageSize: boolean | number = false;
+
     override render() {
         return (
             <MutationComparison
-                variants={this.variants}
+                lapisFilters={this.lapisFilters}
                 sequenceType={this.sequenceType}
                 views={this.views}
                 width={this.width}
                 height={this.height}
                 headline={this.headline}
+                pageSize={this.pageSize}
             />
         );
     }
@@ -103,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,19 +13,20 @@ 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"
     width='100%'
     height='700px'
+    pageSize="10"
 ></gs-mutations>`;
 
 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' },
@@ -37,14 +38,16 @@ const meta: Meta<Required<MutationsProps>> = {
         width: { control: 'text' },
         height: { control: 'text' },
         headline: { control: 'text' },
+        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%',
         height: '700px',
         headline: 'Mutations',
+        pageSize: 10,
     },
     parameters: withComponentDocs({
         componentDocs: {
@@ -62,12 +65,13 @@ 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}
                 .height=${args.height}
                 .headline=${args.headline}
+                .pageSize=${args.pageSize}
             ></gs-mutations>
         </gs-app>
     `,

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';
@@ -77,15 +76,23 @@ export class MutationsComponent extends PreactLitAdapterWithGridJsStyles {
     @property({ type: String })
     headline: string = 'Mutations';
 
+    /**
+     * 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).
+     */
+    @property({ type: Object })
+    pageSize: boolean | number = false;
+
     override render() {
         return (
             <Mutations
-                variant={this.variant}
+                lapisFilter={this.lapisFilter}
                 sequenceType={this.sequenceType}
                 views={this.views}
                 width={this.width}
                 height={this.height}
                 headline={this.headline}
+                pageSize={this.pageSize}
             />
         );
     }
@@ -98,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"]'
@@ -26,14 +27,17 @@ const codeExample = String.raw`
     width="100%"
     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' },
@@ -50,6 +54,9 @@ const meta: Meta<Required<PrevalenceOverTimeProps>> = {
         width: { control: 'text' },
         height: { control: 'text' },
         headline: { control: 'text' },
+        pageSize: { control: 'object' },
+        yAxisMaxLinear: { control: 'object' },
+        yAxisMaxLogarithmic: { control: 'object' },
     },
     parameters: withComponentDocs({
         componentDocs: {
@@ -63,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}
@@ -77,19 +84,22 @@ const Template: StoryObj<Required<PrevalenceOverTimeProps>> = {
                 .height=${args.height}
                 .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'],
@@ -98,6 +108,9 @@ export const TwoVariants: StoryObj<Required<PrevalenceOverTimeProps>> = {
         height: '700px',
         headline: 'Prevalence over time',
         lapisDateField: 'date',
+        pageSize: 10,
+        yAxisMaxLinear: 1,
+        yAxisMaxLogarithmic: 'limitTo1',
     },
     parameters: {
         fetchMock: {
@@ -115,7 +128,7 @@ export const TwoVariants: StoryObj<Required<PrevalenceOverTimeProps>> = {
                     },
                     response: {
                         status: 200,
-                        body: numeratorEG,
+                        body: numeratorFilterEG,
                     },
                 },
                 {
@@ -131,7 +144,7 @@ export const TwoVariants: StoryObj<Required<PrevalenceOverTimeProps>> = {
                     },
                     response: {
                         status: 200,
-                        body: numeratorJN1,
+                        body: numeratorFilterJN1,
                     },
                 },
                 {
@@ -146,7 +159,7 @@ export const TwoVariants: StoryObj<Required<PrevalenceOverTimeProps>> = {
                     },
                     response: {
                         status: 200,
-                        body: denominator,
+                        body: denominatorFilter,
                     },
                 },
             ],
@@ -154,29 +167,32 @@ 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%',
         height: '700px',
         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',
@@ -187,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',
@@ -202,7 +218,7 @@ export const OneVariant: StoryObj<Required<PrevalenceOverTimeProps>> = {
                     },
                     response: {
                         status: 200,
-                        body: denominatorOneVariant,
+                        body: denominatorFilterOneDataset,
                     },
                 },
             ],
@@ -210,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');
 
@@ -221,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');
 
@@ -232,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');