@genspectrum/dashboard-components 0.4.5 → 0.5.0

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

@@ -21,6 +21,7 @@ import { ResizeContainer } from '../components/resize-container';
 import { ScalingSelector } from '../components/scaling-selector';
 import Tabs from '../components/tabs';
 import { type ConfidenceIntervalMethod } from '../shared/charts/confideceInterval';
+import type { YAxisMaxConfig } from '../shared/charts/getYAxisMax';
 import { type ScaleType } from '../shared/charts/getYAxisScale';
 import { useQuery } from '../useQuery';
 
@@ -33,19 +34,20 @@ export interface PrevalenceOverTimeProps extends PrevalenceOverTimeInnerProps {
 }
 
 export interface PrevalenceOverTimeInnerProps {
-    numerator: NamedLapisFilter | NamedLapisFilter[];
-    denominator: LapisFilter;
+    numeratorFilter: NamedLapisFilter | NamedLapisFilter[];
+    denominatorFilter: LapisFilter;
     granularity: TemporalGranularity;
     smoothingWindow: number;
     views: View[];
     confidenceIntervalMethods: ConfidenceIntervalMethod[];
     lapisDateField: string;
     pageSize: boolean | number;
+    yAxisMaxConfig: YAxisMaxConfig;
 }
 
 export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
-    numerator,
-    denominator,
+    numeratorFilter,
+    denominatorFilter,
     granularity,
     smoothingWindow,
     views,
@@ -55,6 +57,7 @@ export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
     headline = 'Prevalence over time',
     lapisDateField,
     pageSize,
+    yAxisMaxConfig,
 }) => {
     const size = { height, width };
 
@@ -63,14 +66,15 @@ export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
             <ResizeContainer size={size}>
                 <Headline heading={headline}>
                     <PrevalenceOverTimeInner
-                        numerator={numerator}
-                        denominator={denominator}
+                        numeratorFilter={numeratorFilter}
+                        denominatorFilter={denominatorFilter}
                         granularity={granularity}
                         smoothingWindow={smoothingWindow}
                         views={views}
                         confidenceIntervalMethods={confidenceIntervalMethods}
                         lapisDateField={lapisDateField}
                         pageSize={pageSize}
+                        yAxisMaxConfig={yAxisMaxConfig}
                     />
                 </Headline>
             </ResizeContainer>
@@ -79,20 +83,29 @@ export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
 };
 
 export const PrevalenceOverTimeInner: FunctionComponent<PrevalenceOverTimeInnerProps> = ({
-    numerator,
-    denominator,
+    numeratorFilter,
+    denominatorFilter,
     granularity,
     smoothingWindow,
     views,
     confidenceIntervalMethods,
     lapisDateField,
     pageSize,
+    yAxisMaxConfig,
 }) => {
     const lapis = useContext(LapisUrlContext);
 
     const { data, error, isLoading } = useQuery(
-        () => queryPrevalenceOverTime(numerator, denominator, granularity, smoothingWindow, lapis, lapisDateField),
-        [lapis, numerator, denominator, granularity, smoothingWindow],
+        () =>
+            queryPrevalenceOverTime(
+                numeratorFilter,
+                denominatorFilter,
+                granularity,
+                smoothingWindow,
+                lapis,
+                lapisDateField,
+            ),
+        [lapis, numeratorFilter, denominatorFilter, granularity, smoothingWindow],
     );
 
     if (isLoading) {
@@ -114,6 +127,7 @@ export const PrevalenceOverTimeInner: FunctionComponent<PrevalenceOverTimeInnerP
             granularity={granularity}
             confidenceIntervalMethods={confidenceIntervalMethods}
             pageSize={pageSize}
+            yAxisMaxConfig={yAxisMaxConfig}
         />
     );
 };
@@ -124,6 +138,7 @@ type PrevalenceOverTimeTabsProps = {
     granularity: TemporalGranularity;
     confidenceIntervalMethods: ConfidenceIntervalMethod[];
     pageSize: boolean | number;
+    yAxisMaxConfig: YAxisMaxConfig;
 };
 
 const PrevalenceOverTimeTabs: FunctionComponent<PrevalenceOverTimeTabsProps> = ({
@@ -132,6 +147,7 @@ const PrevalenceOverTimeTabs: FunctionComponent<PrevalenceOverTimeTabsProps> = (
     granularity,
     confidenceIntervalMethods,
     pageSize,
+    yAxisMaxConfig,
 }) => {
     const [yAxisScaleType, setYAxisScaleType] = useState<ScaleType>('linear');
     const [confidenceIntervalMethod, setConfidenceIntervalMethod] = useState<ConfidenceIntervalMethod>(
@@ -148,6 +164,7 @@ const PrevalenceOverTimeTabs: FunctionComponent<PrevalenceOverTimeTabsProps> = (
                             data={data}
                             yAxisScaleType={yAxisScaleType}
                             confidenceIntervalMethod={confidenceIntervalMethod}
+                            yAxisMaxConfig={yAxisMaxConfig}
                         />
                     ),
                 };
@@ -159,13 +176,20 @@ const PrevalenceOverTimeTabs: FunctionComponent<PrevalenceOverTimeTabsProps> = (
                             data={data}
                             yAxisScaleType={yAxisScaleType}
                             confidenceIntervalMethod={confidenceIntervalMethod}
+                            yAxisMaxConfig={yAxisMaxConfig}
                         />
                     ),
                 };
             case 'bubble':
                 return {
                     title: 'Bubble',
-                    content: <PrevalenceOverTimeBubbleChart data={data} yAxisScaleType={yAxisScaleType} />,
+                    content: (
+                        <PrevalenceOverTimeBubbleChart
+                            data={data}
+                            yAxisScaleType={yAxisScaleType}
+                            yAxisMaxConfig={yAxisMaxConfig}
+                        />
+                    ),
                 };
             case 'table':
                 return {
@@ -245,3 +269,6 @@ const PrevalenceOverTimeInfo: FunctionComponent = () => {
         </Info>
     );
 };
+
+export const maxInData = (data: PrevalenceOverTimeData) =>
+    Math.max(...data.flatMap((variant) => variant.content.map((dataPoint) => dataPoint.prevalence)));

package/src/preact/relativeGrowthAdvantage/relative-growth-advantage-chart.tsx

@@ -5,7 +5,9 @@ import GsChart from '../components/chart';
 import { LogitScale } from '../shared/charts/LogitScale';
 import { singleGraphColorRGBByName } from '../shared/charts/colors';
 import { confidenceIntervalDataLabel } from '../shared/charts/confideceInterval';
+import { getYAxisMax, type YAxisMaxConfig } from '../shared/charts/getYAxisMax';
 import { getYAxisScale, type ScaleType } from '../shared/charts/getYAxisScale';
+import { formatProportion } from '../shared/table/formatProportion';
 
 interface RelativeGrowthAdvantageChartData {
     t: YearMonthDay[];
@@ -25,11 +27,17 @@ interface RelativeGrowthAdvantageChartData {
 interface RelativeGrowthAdvantageChartProps {
     data: RelativeGrowthAdvantageChartData;
     yAxisScaleType: ScaleType;
+    yAxisMaxConfig: YAxisMaxConfig;
 }
 
 Chart.register(...registerables, LogitScale);
 
-const RelativeGrowthAdvantageChart = ({ data, yAxisScaleType }: RelativeGrowthAdvantageChartProps) => {
+const RelativeGrowthAdvantageChart = ({ data, yAxisScaleType, yAxisMaxConfig }: RelativeGrowthAdvantageChartProps) => {
+    const maxY =
+        yAxisScaleType !== 'logit'
+            ? getYAxisMax(Math.max(...data.proportion), yAxisMaxConfig?.[yAxisScaleType])
+            : undefined;
+
     const config: ChartConfiguration = {
         type: 'line',
         data: {
@@ -39,8 +47,9 @@ const RelativeGrowthAdvantageChart = ({ data, yAxisScaleType }: RelativeGrowthAd
         options: {
             maintainAspectRatio: false,
             animation: false,
+
             scales: {
-                y: getYAxisScale(yAxisScaleType),
+                y: { ...getYAxisScale(yAxisScaleType), max: maxY },
             },
             plugins: {
                 legend: {
@@ -52,14 +61,37 @@ const RelativeGrowthAdvantageChart = ({ data, yAxisScaleType }: RelativeGrowthAd
     };
 
     return (
-        <div className='flex flex-col h-full'>
+        <div className='flex h-full flex-col'>
+            <RelativeGrowthAdvantageDisplay
+                relativeAdvantage={data.params.fd.value}
+                relativeAdvantageLowerBound={data.params.fd.ciLower}
+                relativeAdvantageUpperBound={data.params.fd.ciUpper}
+            />
             <div className='flex-1'>
                 <GsChart configuration={config} />
             </div>
-            <p>
-                Advantage: {(data.params.fd.value * 100).toFixed(2)}% ({(data.params.fd.ciLower * 100).toFixed(2)}% -{' '}
-                {(data.params.fd.ciUpper * 100).toFixed(2)}%)
-            </p>
+        </div>
+    );
+};
+
+const RelativeGrowthAdvantageDisplay = ({
+    relativeAdvantage,
+    relativeAdvantageLowerBound,
+    relativeAdvantageUpperBound,
+}: {
+    relativeAdvantage: number;
+    relativeAdvantageLowerBound: number;
+    relativeAdvantageUpperBound: number;
+}) => {
+    return (
+        <div class='mx-auto flex items-end flex-wrap'>
+            <span class='text-[#606060]'>Relative advantage:</span>
+            <div>
+                <span class='text-2xl ml-3'> {formatProportion(relativeAdvantage)} </span>
+                <span class='ml-2.5'>
+                    ({formatProportion(relativeAdvantageLowerBound)} - {formatProportion(relativeAdvantageUpperBound)})
+                </span>
+            </div>
         </div>
     );
 };

package/src/preact/relativeGrowthAdvantage/relative-growth-advantage.stories.tsx

@@ -1,5 +1,5 @@
-import denominator from './__mockData__/denominator.json';
-import numerator from './__mockData__/numerator.json';
+import denominator from './__mockData__/denominatorFilter.json';
+import numerator from './__mockData__/numeratorFilter.json';
 import { RelativeGrowthAdvantage, type RelativeGrowthAdvantageProps } from './relative-growth-advantage';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import { LapisUrlContext } from '../LapisUrlContext';
@@ -21,6 +21,7 @@ export default {
         width: { control: 'text' },
         height: { control: 'text' },
         headline: { control: 'text' },
+        yAxisMaxConfig: { control: 'object' },
     },
 };
 
@@ -28,14 +29,15 @@ export const Primary = {
     render: (args: RelativeGrowthAdvantageProps) => (
         <LapisUrlContext.Provider value={LAPIS_URL}>
             <RelativeGrowthAdvantage
-                numerator={args.numerator}
-                denominator={args.denominator}
+                numeratorFilter={args.numeratorFilter}
+                denominatorFilter={args.denominatorFilter}
                 generationTime={args.generationTime}
                 views={args.views}
                 width={args.width}
                 height={args.height}
                 headline={args.headline}
                 lapisDateField={args.lapisDateField}
+                yAxisMaxConfig={args.yAxisMaxConfig}
             />
         </LapisUrlContext.Provider>
     ),
@@ -48,6 +50,10 @@ export const Primary = {
         height: '700px',
         headline: 'Relative growth advantage',
         lapisDateField: 'date',
+        yAxisMaxConfig: {
+            linear: 1,
+            logarithmic: 1,
+        },
     },
     parameters: {
         fetchMock: {

package/src/preact/relativeGrowthAdvantage/relative-growth-advantage.tsx

@@ -17,6 +17,7 @@ import { NoDataDisplay } from '../components/no-data-display';
 import { ResizeContainer } from '../components/resize-container';
 import { ScalingSelector } from '../components/scaling-selector';
 import Tabs from '../components/tabs';
+import { type YAxisMaxConfig } from '../shared/charts/getYAxisMax';
 import { type ScaleType } from '../shared/charts/getYAxisScale';
 import { useQuery } from '../useQuery';
 
@@ -29,22 +30,24 @@ export interface RelativeGrowthAdvantageProps extends RelativeGrowthAdvantagePro
 }
 
 export interface RelativeGrowthAdvantagePropsInner {
-    numerator: LapisFilter;
-    denominator: LapisFilter;
+    numeratorFilter: LapisFilter;
+    denominatorFilter: LapisFilter;
     generationTime: number;
     views: View[];
     lapisDateField: string;
+    yAxisMaxConfig: YAxisMaxConfig;
 }
 
 export const RelativeGrowthAdvantage: FunctionComponent<RelativeGrowthAdvantageProps> = ({
     views,
     width,
     height,
-    numerator,
-    denominator,
+    numeratorFilter,
+    denominatorFilter,
     generationTime,
     headline = 'Relative growth advantage',
     lapisDateField,
+    yAxisMaxConfig,
 }) => {
     const size = { height, width };
 
@@ -54,10 +57,11 @@ export const RelativeGrowthAdvantage: FunctionComponent<RelativeGrowthAdvantageP
                 <Headline heading={headline}>
                     <RelativeGrowthAdvantageInner
                         views={views}
-                        numerator={numerator}
-                        denominator={denominator}
+                        numeratorFilter={numeratorFilter}
+                        denominatorFilter={denominatorFilter}
                         generationTime={generationTime}
                         lapisDateField={lapisDateField}
+                        yAxisMaxConfig={yAxisMaxConfig}
                     />
                 </Headline>
             </ResizeContainer>
@@ -66,18 +70,19 @@ export const RelativeGrowthAdvantage: FunctionComponent<RelativeGrowthAdvantageP
 };
 
 export const RelativeGrowthAdvantageInner: FunctionComponent<RelativeGrowthAdvantagePropsInner> = ({
-    numerator,
-    denominator,
+    numeratorFilter,
+    denominatorFilter,
     generationTime,
     views,
     lapisDateField,
+    yAxisMaxConfig,
 }) => {
     const lapis = useContext(LapisUrlContext);
     const [yAxisScaleType, setYAxisScaleType] = useState<ScaleType>('linear');
 
     const { data, error, isLoading } = useQuery(
-        () => queryRelativeGrowthAdvantage(numerator, denominator, generationTime, lapis, lapisDateField),
-        [lapis, numerator, denominator, generationTime, views],
+        () => queryRelativeGrowthAdvantage(numeratorFilter, denominatorFilter, generationTime, lapis, lapisDateField),
+        [lapis, numeratorFilter, denominatorFilter, generationTime, views],
     );
 
     if (isLoading) {
@@ -99,6 +104,7 @@ export const RelativeGrowthAdvantageInner: FunctionComponent<RelativeGrowthAdvan
             setYAxisScaleType={setYAxisScaleType}
             views={views}
             generationTime={generationTime}
+            yAxisMaxConfig={yAxisMaxConfig}
         />
     );
 };
@@ -109,6 +115,7 @@ type RelativeGrowthAdvantageTabsProps = {
     setYAxisScaleType: (scaleType: ScaleType) => void;
     views: View[];
     generationTime: number;
+    yAxisMaxConfig: YAxisMaxConfig;
 };
 
 const RelativeGrowthAdvantageTabs: FunctionComponent<RelativeGrowthAdvantageTabsProps> = ({
@@ -117,6 +124,7 @@ const RelativeGrowthAdvantageTabs: FunctionComponent<RelativeGrowthAdvantageTabs
     setYAxisScaleType,
     views,
     generationTime,
+    yAxisMaxConfig,
 }) => {
     const getTab = (view: View) => {
         switch (view) {
@@ -131,6 +139,7 @@ const RelativeGrowthAdvantageTabs: FunctionComponent<RelativeGrowthAdvantageTabs
                                 params: data.params,
                             }}
                             yAxisScaleType={yAxisScaleType}
+                            yAxisMaxConfig={yAxisMaxConfig}
                         />
                     ),
                 };

package/src/preact/shared/charts/confideceInterval.ts

@@ -20,10 +20,15 @@ export function wilson95PercentConfidenceInterval(observed: number, sample: numb
     };
 }
 
-export const confidenceIntervalDataLabel = (value: number, lowerLimit: number, upperLimit: number, prefix?: string) => {
+export const confidenceIntervalDataLabel = (
+    value: number,
+    lowerLimit?: number,
+    upperLimit?: number,
+    prefix?: string,
+) => {
     const label = prefix ? `${prefix}: ` : '';
 
-    return `${label}${value.toFixed(3)} (${lowerLimit.toFixed(3)} - ${upperLimit.toFixed(3)})`;
+    return `${label}${value.toFixed(3)} (${lowerLimit?.toFixed(3)} - ${upperLimit?.toFixed(3)})`;
 };
 
 export type ConfidenceIntervalMethod = 'wilson' | 'none';

package/src/preact/shared/charts/getYAxisMax.ts

@@ -0,0 +1,24 @@
+export interface YAxisMaxConfig {
+    linear?: AxisMax;
+    logarithmic?: AxisMax;
+}
+
+export type AxisMax = 'maxInData' | 'limitTo1' | number;
+
+export const getYAxisMax = (maxInData: number, axisMax?: AxisMax) => {
+    if (!axisMax) {
+        return 1;
+    }
+
+    switch (axisMax) {
+        case 'limitTo1': {
+            return maxInData > 1 ? 1 : maxInData;
+        }
+        case 'maxInData': {
+            return maxInData;
+        }
+        default: {
+            return axisMax;
+        }
+    }
+};

package/src/preact/shared/charts/getYAxisScale.ts

@@ -6,11 +6,9 @@ export function getYAxisScale(scaleType: ScaleType) {
             return { beginAtZero: true, type: 'linear' as const, min: 0, max: 1 };
         }
         case 'logarithmic': {
-            return { type: 'logarithmic' as const };
+            return { type: 'logarithmic' as const, max: 1 };
         }
         case 'logit':
             return { type: 'logit' as const };
-        default:
-            return { beginAtZero: true, type: 'linear' as const };
     }
 }

package/src/query/queryAggregateData.ts

@@ -20,7 +20,7 @@ const compareAscending = (a: string | null | number, b: string | null | number)
 };
 
 export async function queryAggregateData(
-    variant: LapisFilter,
+    lapisFilter: LapisFilter,
     fields: string[],
     lapis: string,
     initialSort: InitialSort = { field: 'count', direction: 'descending' },
@@ -31,7 +31,7 @@ export async function queryAggregateData(
         throw new Error(`InitialSort field not in fields. Valid fields are: ${validSortFields.join(', ')}`);
     }
 
-    const fetchData = new FetchAggregatedOperator<Record<string, string | null | number>>(variant, fields);
+    const fetchData = new FetchAggregatedOperator<Record<string, string | null | number>>(lapisFilter, fields);
     const sortData = new SortOperator(fetchData, (a, b) => {
         return initialSort.direction === 'ascending'
             ? compareAscending(a[initialSort.field], b[initialSort.field])

package/src/query/queryInsertions.ts

@@ -2,8 +2,13 @@ import { FetchInsertionsOperator } from '../operator/FetchInsertionsOperator';
 import { SortOperator } from '../operator/SortOperator';
 import { type LapisFilter, type SequenceType } from '../types';
 
-export function queryInsertions(variant: LapisFilter, sequenceType: SequenceType, lapis: string, signal?: AbortSignal) {
-    const fetchData = new FetchInsertionsOperator(variant, sequenceType);
+export function queryInsertions(
+    lapisFilter: LapisFilter,
+    sequenceType: SequenceType,
+    lapis: string,
+    signal?: AbortSignal,
+) {
+    const fetchData = new FetchInsertionsOperator(lapisFilter, sequenceType);
     const sortData = new SortOperator(fetchData, (a, b) => {
         if (a.mutation.segment !== b.mutation.segment) {
             return (a.mutation.segment ?? '').localeCompare(b.mutation.segment ?? '');

package/src/query/querySubstitutionsOrDeletions.ts

@@ -3,12 +3,12 @@ import { SortOperator } from '../operator/SortOperator';
 import { type LapisFilter, type SequenceType } from '../types';
 
 export function querySubstitutionsOrDeletions(
-    variant: LapisFilter,
+    lapisFilter: LapisFilter,
     sequenceType: SequenceType,
     lapis: string,
     signal?: AbortSignal,
 ) {
-    const fetchData = new FetchSubstitutionsOrDeletionsOperator(variant, sequenceType, 0);
+    const fetchData = new FetchSubstitutionsOrDeletionsOperator(lapisFilter, sequenceType, 0);
     const sortData = new SortOperator(fetchData, (a, b) => {
         if (a.mutation.segment !== b.mutation.segment) {
             return (a.mutation.segment ?? '').localeCompare(b.mutation.segment ?? '');

package/src/web-components/input/gs-date-range-selector.tsx

@@ -91,7 +91,7 @@ export 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.
      */
     @property({ type: String })
     width: string = '100%';

package/src/web-components/input/gs-location-filter.tsx

@@ -54,7 +54,7 @@ export 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.
      */
     @property({ type: String })
     width: string = '100%';

package/src/web-components/input/gs-mutation-filter.tsx

@@ -86,7 +86,7 @@ export 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.
      */
     @property({ type: String })
     width: string = '100%';

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,
                     },
                 },
             ],