@genspectrum/dashboard-components 0.4.5 → 0.5.0

package/dist/genspectrum-components.d.ts

@@ -44,13 +44,13 @@ export declare 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.
      */
     width: string;
     /**
      * 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.
      */
     height: string;
     /**
@@ -172,7 +172,7 @@ export declare class DateRangeSelectorComponent 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.
      */
     width: string;
     /**
@@ -230,7 +230,7 @@ export declare class LocationFilterComponent 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.
      */
     width: string;
     /**
@@ -243,8 +243,8 @@ export declare class LocationFilterComponent extends PreactLitAdapter {
 /**
  * ## 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.
  *
@@ -252,32 +252,31 @@ export declare class LocationFilterComponent extends PreactLitAdapter {
  *
  * ### 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".
  */
 export declare 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.
      */
-    variants: {
+    lapisFilters: {
         lapisFilter: Record<string, string | number | null | boolean>;
         displayName: string;
     }[];
@@ -292,13 +291,13 @@ export declare class MutationComparisonComponent extends PreactLitAdapterWithGri
     /**
      * 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.
      */
     width: string;
     /**
      * 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.
      */
     height: string;
     /**
@@ -382,7 +381,7 @@ export declare class MutationFilterComponent 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.
      */
     width: string;
     render(): JSX_2.Element;
@@ -391,15 +390,15 @@ export declare class MutationFilterComponent extends PreactLitAdapter {
 /**
  * ## 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.
  *
@@ -412,17 +411,16 @@ export declare class MutationFilterComponent extends PreactLitAdapter {
  *
  * ### 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.
  *
  */
 export declare 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.
      */
-    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.
      */
@@ -434,13 +432,13 @@ export declare 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.
      */
     width: string;
     /**
      * 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.
      */
     height: string;
     /**
@@ -470,9 +468,9 @@ declare abstract class PreactLitAdapterWithGridJsStyles extends PreactLitAdapter
 /**
  * ## 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).
@@ -486,19 +484,19 @@ declare abstract class PreactLitAdapterWithGridJsStyles extends PreactLitAdapter
  * ### 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
  *
@@ -507,13 +505,16 @@ declare abstract class PreactLitAdapterWithGridJsStyles extends PreactLitAdapter
 export declare class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyles {
     /**
      *   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.
      */
-    numerator: {
+    numeratorFilter: {
         lapisFilter: Record<string, string | number | null | boolean>;
         displayName: string;
     } | {
@@ -523,9 +524,10 @@ export declare class PrevalenceOverTimeComponent extends PreactLitAdapterWithGri
     /**
      * 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.
      */
-    denominator: Record<string, string | number | null | boolean>;
+    denominatorFilter: Record<string, string | number | null | boolean>;
     /**
      * The granularity of the time axis.
      */
@@ -557,13 +559,13 @@ export declare class PrevalenceOverTimeComponent extends PreactLitAdapterWithGri
     /**
      * 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.
      */
     width: string;
     /**
      * 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.
      */
     height: string;
     /**
@@ -579,6 +581,22 @@ export declare class PrevalenceOverTimeComponent extends PreactLitAdapterWithGri
      * Set to `false` to disable pagination. Set to `true` to enable pagination with a default limit (10).
      */
     pageSize: boolean | number;
+    /**
+     * 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).
+     */
+    yAxisMaxLinear: 'maxInData' | 'limitTo1' | number;
+    /**
+     * 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).
+     */
+    yAxisMaxLogarithmic: 'maxInData' | 'limitTo1' | number;
     render(): JSX_2.Element;
 }
 
@@ -631,7 +649,7 @@ declare const referenceGenomeResponse: default_2.ZodObject<{
  * For this component, we assume a discrete time model, where new infections happen exactly every `generationTime` days.
  * This is what we call a "generation".
  *
- * This component estimates the relative growth advantage of a variant by performing a logistic regression.
+ * This component estimates the relative growth advantage of a variant (defined by its LAPIS filter) by performing a logistic regression.
  * Based on the inferred logistic growth rate, we derive the relative growth advantage (per generation).
  *
  * For details on the scientific method, see:
@@ -647,7 +665,7 @@ declare const referenceGenomeResponse: default_2.ZodObject<{
  * ### Line View
  *
  * The line view shows the relative growth advantage over time in a line chart.
- * The dots in the plot show the proportions of the focal variant (`numerator`) to the `denominator` variant
+ * The dots in the plot show the proportions of the focal variant (defined by the `numeratorFilter`) to the baseline variant (defined by the `denominatorFilter`)
  * for every day as observed in the data.
  * The line shows a logistic curve fitted to the data points, including a 95% confidence interval.
  */
@@ -655,15 +673,17 @@ export declare class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
     /**
      * Required.
      *
-     * The LAPIS filter for the focal variant.
+     * LAPIS filter to select the data of the focal variant.
+     * It must be a valid LAPIS filter object.
      */
-    numerator: Record<string, string | number | null | boolean>;
+    numeratorFilter: Record<string, string | number | null | boolean>;
     /**
      * Required.
      *
-     * The LAPIS filter for the variant that the focal variant (`numerator`) should be compared to.
+     * LAPIS filter to select the data of the baseline variant.
+     * It must be a valid LAPIS filter object.
      */
-    denominator: Record<string, string | number | null | boolean>;
+    denominatorFilter: Record<string, string | number | null | boolean>;
     /**
      * The generation time represents the number of days over which the variant's relative growth advantage is measured.
      * For example, if we set a generation time of 7 days, then we estimate the growth advantage per week.
@@ -680,13 +700,13 @@ export declare class RelativeGrowthAdvantageComponent 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.
      */
     width: string;
     /**
      * 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.
      */
     height: string;
     /**
@@ -697,6 +717,22 @@ export declare class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
      * Must be a field of type `date` in LAPIS.
      */
     lapisDateField: string;
+    /**
+     * 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).
+     */
+    yAxisMaxLinear: 'maxInData' | 'limitTo1' | number;
+    /**
+     * 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).
+     */
+    yAxisMaxLogarithmic: 'maxInData' | 'limitTo1' | number;
     render(): JSX_2.Element;
 }
 
@@ -735,7 +771,7 @@ export declare 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.
      */
     width: string;
     render(): JSX_2.Element;

package/dist/style.css

@@ -1468,8 +1468,8 @@ html {
           appearance: none;
   height: 3rem;
   min-height: 3rem;
-  padding-left: 1rem;
-  padding-right: 2.5rem;
+  padding-inline-start: 1rem;
+  padding-inline-end: 2.5rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
   line-height: 2;
@@ -1511,7 +1511,9 @@ html {
   display: grid;
   align-items: flex-end;
 }
-.tabs-lifted:has(.tab-content[class^="rounded-"]) .tab:first-child:not(:is(.tab-active, [aria-selected="true"])), .tabs-lifted:has(.tab-content[class*=" rounded-"]) .tab:first-child:not(:is(.tab-active, [aria-selected="true"])) {
+.tabs-lifted:has(.tab-content[class^="rounded-"])
+    .tab:first-child:not(:is(.tab-active, [aria-selected="true"])), .tabs-lifted:has(.tab-content[class*=" rounded-"])
+    .tab:first-child:not(:is(.tab-active, [aria-selected="true"])) {
   border-bottom-color: transparent;
 }
 .tab {
@@ -2349,7 +2351,7 @@ input.tab:checked + .tab-content,
 .tabs-boxed .tab {
   border-radius: var(--rounded-btn, 0.5rem);
 }
-:is([dir="rtl"] .table) {
+.table:where([dir="rtl"], [dir="rtl"] *) {
   text-align: right;
 }
 .table :where(th, td) {
@@ -2365,7 +2367,7 @@ input.tab:checked + .tab-content,
   --tw-bg-opacity: 1;
   background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
 }
-.table :where(thead tr, tbody tr:not(:last-child),tbody tr:first-child:last-child) {
+.table :where(thead tr, tbody tr:not(:last-child), tbody tr:first-child:last-child) {
   border-bottom-width: 1px;
   --tw-border-opacity: 1;
   border-bottom-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
@@ -2649,7 +2651,7 @@ input.tab:checked + .tab-content,
   content: "";
   margin-inline-start: -100%;
 }
-:is([dir="rtl"] .steps-horizontal .step):before {
+.steps-horizontal .step:where([dir="rtl"], [dir="rtl"] *):before {
   --tw-translate-x: 0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -2668,7 +2670,7 @@ input.tab:checked + .tab-content,
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   margin-inline-start: 50%;
 }
-:is([dir="rtl"] .steps-vertical .step):before {
+.steps-vertical .step:where([dir="rtl"], [dir="rtl"] *):before {
   --tw-translate-x: 50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -2702,6 +2704,7 @@ input.tab:checked + .tab-content,
 }
 .tooltip:before {
   max-width: 20rem;
+  white-space: normal;
   border-radius: 0.25rem;
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -2794,6 +2797,10 @@ input.tab:checked + .tab-content,
   margin-left: 0.25rem;
   margin-right: 0.25rem;
 }
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
 .my-1 {
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;
@@ -2805,6 +2812,15 @@ input.tab:checked + .tab-content,
 .mb-2 {
   margin-bottom: 0.5rem;
 }
+.ml-2 {
+  margin-left: 0.5rem;
+}
+.ml-2\.5 {
+  margin-left: 0.625rem;
+}
+.ml-3 {
+  margin-left: 0.75rem;
+}
 .mr-2 {
   margin-right: 0.5rem;
 }
@@ -2878,6 +2894,9 @@ input.tab:checked + .tab-content,
 .flex-wrap {
   flex-wrap: wrap;
 }
+.items-end {
+  align-items: flex-end;
+}
 .items-center {
   align-items: center;
 }
@@ -3007,6 +3026,10 @@ input.tab:checked + .tab-content,
 .text-justify {
   text-align: justify;
 }
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -3036,6 +3059,10 @@ input.tab:checked + .tab-content,
 .leading-5 {
   line-height: 1.25rem;
 }
+.text-\[\#606060\] {
+  --tw-text-opacity: 1;
+  color: rgb(96 96 96 / var(--tw-text-opacity));
+}
 .text-blue-600 {
   --tw-text-opacity: 1;
   color: rgb(37 99 235 / var(--tw-text-opacity));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.4.5",
+    "version": "0.5.0",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -82,13 +82,13 @@
         "@storybook/preact": "^8.0.9",
         "@storybook/preact-vite": "^8.0.9",
         "@storybook/test": "^8.0.0",
-        "@storybook/test-runner": "^0.18.0",
+        "@storybook/test-runner": "^0.19.0",
         "@storybook/types": "^8.0.9",
         "@storybook/web-components": "^8.0.9",
         "@storybook/web-components-vite": "^8.0.9",
         "@types/node": "^20.12.7",
-        "@typescript-eslint/eslint-plugin": "^7.7.0",
-        "@typescript-eslint/parser": "^7.7.0",
+        "@typescript-eslint/eslint-plugin": "^7.14.1",
+        "@typescript-eslint/parser": "^7.14.1",
         "autoprefixer": "^10.4.19",
         "daisyui": "^4.10.2",
         "depcheck": "^1.4.7",
@@ -106,7 +106,7 @@
         "storybook": "^8.0.9",
         "storybook-addon-fetch-mock": "^2.0.0",
         "tailwindcss": "^3.4.3",
-        "typescript": "~5.4.5",
+        "typescript": "~5.5.2",
         "vite": "^5.2.10",
         "vite-plugin-dts": "^3.8.3",
         "vitest": "^1.5.0"

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

@@ -111,7 +111,7 @@ export const MutationComparisonVenn: FunctionComponent<MutationComparisonVennPro
     );
 
     if (data.content.length > 5) {
-        return <div>Too many variants to display. Maximum are five. </div>;
+        return <div>Too many datasets to display. Maximum are five. </div>;
     }
 
     return (

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

@@ -1,24 +1,24 @@
 import { type Meta, type StoryObj } from '@storybook/preact';
 import { expect, userEvent, waitFor, within } from '@storybook/test';
 
-import nucleotideMutationsOtherVariant from './__mockData__/nucleotideMutationsOtherVariant.json';
-import nucleotideMutationsSomeVariant from './__mockData__/nucleotideMutationsSomeVariant.json';
+import nucleotideMutationsOtherDataset from './__mockData__/nucleotideMutationsOtherDataset.json';
+import nucleotideMutationsSomeDataset from './__mockData__/nucleotideMutationsSomeDataset.json';
 import { MutationComparison, type MutationComparisonProps } from './mutation-comparison';
 import { LAPIS_URL, NUCLEOTIDE_MUTATIONS_ENDPOINT } from '../../constants';
 import referenceGenome from '../../lapisApi/__mockData__/referenceGenome.json';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
 
-const dateToSomeVariant = '2022-01-01';
+const dateToSomeDataset = '2022-01-01';
 
-const dateFromOtherVariant = '2021-01-01';
-const dateToOtherVariant = '2022-01-02';
+const dateFromOtherDataset = '2021-01-01';
+const dateToOtherDataset = '2022-01-02';
 
 const meta: Meta<MutationComparisonProps> = {
     title: 'Visualization/Mutation comparison',
     component: MutationComparison,
     argTypes: {
-        variants: [{ control: 'object' }],
+        lapisFilters: [{ control: 'object' }],
         sequenceType: {
             options: ['nucleotide', 'amino acid'],
             control: { type: 'radio' },
@@ -42,13 +42,13 @@ const meta: Meta<MutationComparisonProps> = {
                         body: {
                             country: 'Switzerland',
                             pangoLineage: 'B.1.1.7',
-                            dateTo: dateToSomeVariant,
+                            dateTo: dateToSomeDataset,
                             minProportion: 0,
                         },
                     },
                     response: {
                         status: 200,
-                        body: nucleotideMutationsSomeVariant,
+                        body: nucleotideMutationsSomeDataset,
                     },
                 },
                 {
@@ -58,14 +58,14 @@ const meta: Meta<MutationComparisonProps> = {
                         body: {
                             country: 'Switzerland',
                             pangoLineage: 'B.1.1.7',
-                            dateFrom: dateFromOtherVariant,
-                            dateTo: dateToOtherVariant,
+                            dateFrom: dateFromOtherDataset,
+                            dateTo: dateToOtherDataset,
                             minProportion: 0,
                         },
                     },
                     response: {
                         status: 200,
-                        body: nucleotideMutationsOtherVariant,
+                        body: nucleotideMutationsOtherDataset,
                     },
                 },
             ],
@@ -80,7 +80,7 @@ const Template: StoryObj<MutationComparisonProps> = {
         <LapisUrlContext.Provider value={LAPIS_URL}>
             <ReferenceGenomeContext.Provider value={referenceGenome}>
                 <MutationComparison
-                    variants={args.variants}
+                    lapisFilters={args.lapisFilters}
                     sequenceType={args.sequenceType}
                     views={args.views}
                     width={args.width}
@@ -96,18 +96,18 @@ const Template: StoryObj<MutationComparisonProps> = {
 export const TwoVariants: StoryObj<MutationComparisonProps> = {
     ...Template,
     args: {
-        variants: [
+        lapisFilters: [
             {
-                displayName: 'Some variant',
-                lapisFilter: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo: dateToSomeVariant },
+                displayName: 'Some dataset',
+                lapisFilter: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo: dateToSomeDataset },
             },
             {
-                displayName: 'Other variant',
+                displayName: 'Other dataset',
                 lapisFilter: {
                     country: 'Switzerland',
                     pangoLineage: 'B.1.1.7',
-                    dateFrom: dateFromOtherVariant,
-                    dateTo: dateToOtherVariant,
+                    dateFrom: dateFromOtherDataset,
+                    dateTo: dateToOtherDataset,
                 },
             },
         ],