@genspectrum/dashboard-components 0.4.5 → 0.5.1

package/src/web-components/input/gs-text-input.tsx

@@ -45,7 +45,7 @@ export class TextInputComponent extends PreactLitAdapter {
     /**
      * 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%';

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';

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

@@ -6,14 +6,14 @@ 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"
@@ -26,7 +26,7 @@ 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' },
@@ -56,7 +56,7 @@ 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}
@@ -74,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',
@@ -101,7 +101,7 @@ export const Default: StoryObj<Required<MutationComparisonProps>> = {
             mocks: [
                 {
                     matcher: {
-                        name: 'nucleotideMutationsSomeVariant',
+                        name: 'nucleotideMutationsSomeDataset',
                         url: NUCLEOTIDE_MUTATIONS_ENDPOINT,
                         body: {
                             country: 'Switzerland',
@@ -112,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',
@@ -129,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';
@@ -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');