@genspectrum/dashboard-components 0.16.3 → 0.16.4

package/dist/style.css

@@ -3292,6 +3292,11 @@ input.tab:checked + .tab-content,
 .cursor-pointer {
   cursor: pointer;
 }
+.select-text {
+  -webkit-user-select: text;
+     -moz-user-select: text;
+          user-select: text;
+}
 .list-inside {
   list-style-position: inside;
 }

package/dist/util.d.ts

@@ -202,6 +202,50 @@ declare const mapSourceSchema: default_2.ZodObject<{
     topologyObjectsKey: string;
 }>;
 
+export declare type MutationAnnotation = default_2.infer<typeof mutationAnnotationSchema>;
+
+export declare type MutationAnnotations = default_2.infer<typeof mutationAnnotationsSchema>;
+
+declare const mutationAnnotationSchema: default_2.ZodObject<{
+    name: default_2.ZodString;
+    description: default_2.ZodString;
+    symbol: default_2.ZodString;
+    nucleotideMutations: default_2.ZodArray<default_2.ZodString, "many">;
+    aminoAcidMutations: default_2.ZodArray<default_2.ZodString, "many">;
+}, "strip", default_2.ZodTypeAny, {
+    symbol: string;
+    name: string;
+    description: string;
+    nucleotideMutations: string[];
+    aminoAcidMutations: string[];
+}, {
+    symbol: string;
+    name: string;
+    description: string;
+    nucleotideMutations: string[];
+    aminoAcidMutations: string[];
+}>;
+
+declare const mutationAnnotationsSchema: default_2.ZodArray<default_2.ZodObject<{
+    name: default_2.ZodString;
+    description: default_2.ZodString;
+    symbol: default_2.ZodString;
+    nucleotideMutations: default_2.ZodArray<default_2.ZodString, "many">;
+    aminoAcidMutations: default_2.ZodArray<default_2.ZodString, "many">;
+}, "strip", default_2.ZodTypeAny, {
+    symbol: string;
+    name: string;
+    description: string;
+    nucleotideMutations: string[];
+    aminoAcidMutations: string[];
+}, {
+    symbol: string;
+    name: string;
+    description: string;
+    nucleotideMutations: string[];
+    aminoAcidMutations: string[];
+}>, "many">;
+
 export declare type MutationComparisonProps = default_2.infer<typeof mutationComparisonPropsSchema>;
 
 declare const mutationComparisonPropsSchema: default_2.ZodObject<{
@@ -247,6 +291,7 @@ declare const mutationComparisonPropsSchema: default_2.ZodObject<{
     pageSize: default_2.ZodUnion<[default_2.ZodBoolean, default_2.ZodNumber]>;
 }, "strip", default_2.ZodTypeAny, {
     width: string;
+    sequenceType: "nucleotide" | "amino acid";
     pageSize: number | boolean;
     lapisFilters: {
         lapisFilter: Record<string, string | number | boolean | string[] | null | undefined> & {
@@ -257,11 +302,11 @@ declare const mutationComparisonPropsSchema: default_2.ZodObject<{
         };
         displayName: string;
     }[];
-    sequenceType: "nucleotide" | "amino acid";
     views: ("table" | "venn")[];
     height?: string | undefined;
 }, {
     width: string;
+    sequenceType: "nucleotide" | "amino acid";
     pageSize: number | boolean;
     lapisFilters: {
         lapisFilter: Record<string, string | number | boolean | string[] | null | undefined> & {
@@ -272,7 +317,6 @@ declare const mutationComparisonPropsSchema: default_2.ZodObject<{
         };
         displayName: string;
     }[];
-    sequenceType: "nucleotide" | "amino acid";
     views: ("table" | "venn")[];
     height?: string | undefined;
 }>;
@@ -348,8 +392,8 @@ declare const mutationsPropsSchema: default_2.ZodObject<{
         aminoAcidInsertions?: string[] | undefined;
     };
     width: string;
-    pageSize: number | boolean;
     sequenceType: "nucleotide" | "amino acid";
+    pageSize: number | boolean;
     views: ("table" | "grid" | "insertions")[];
     height?: string | undefined;
     baselineLapisFilter?: (Record<string, string | number | boolean | string[] | null | undefined> & {
@@ -366,8 +410,8 @@ declare const mutationsPropsSchema: default_2.ZodObject<{
         aminoAcidInsertions?: string[] | undefined;
     };
     width: string;
-    pageSize: number | boolean;
     sequenceType: "nucleotide" | "amino acid";
+    pageSize: number | boolean;
     views: ("table" | "grid" | "insertions")[];
     height?: string | undefined;
     baselineLapisFilter?: (Record<string, string | number | boolean | string[] | null | undefined> & {
@@ -880,7 +924,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -888,7 +932,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -896,7 +940,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -904,7 +948,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -912,7 +956,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -920,7 +964,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -928,7 +972,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -936,7 +980,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -944,7 +988,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -952,7 +996,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -960,7 +1004,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-statistics': StatisticsComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -968,7 +1012,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -976,10 +1020,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-location-changed': LocationChangedEvent;
+        'gs-statistics': StatisticsComponent;
     }
 }
 
@@ -987,7 +1028,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -995,7 +1036,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-date-range-filter': DateRangeFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
     }
 }
 
@@ -1003,7 +1048,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1027,11 +1072,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-filter': DateRangeFilterComponent;
+        'gs-location-filter': LocationFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
-        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
+        'gs-location-changed': LocationChangedEvent;
     }
 }
 
@@ -1039,7 +1083,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1066,10 +1110,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
+        'gs-lineage-filter': LineageFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
+        'gs-lineage-filter-changed': LineageFilterChangedEvent;
     }
 }
 
@@ -1077,7 +1121,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1085,10 +1129,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
+        'gs-mutation-filter': MutationFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-lineage-filter-changed': LineageFilterChangedEvent;
+        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
     }
 }
 
@@ -1096,7 +1140,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.16.3",
+    "version": "0.16.4",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -87,6 +87,7 @@
         "chartjs-chart-error-bars": "^4.4.0",
         "chartjs-chart-venn": "^4.3.0",
         "dayjs": "^1.11.10",
+        "dompurify": "^3.2.4",
         "downshift": "^9.0.8",
         "flatpickr": "^4.6.13",
         "gridjs": "^6.2.0",

package/src/preact/components/annotated-mutation.stories.tsx

@@ -66,7 +66,7 @@ export const MutationWithAnnotationEntry: StoryObj<AnnotatedMutationProps & { an
         annotations: [
             {
                 name: 'Test annotation',
-                description: 'This is a test annotation',
+                description: 'This is a test annotation <a class="link" href="/">with a link.</a>',
                 symbol: '*',
                 nucleotideMutations: ['A23403G'],
                 aminoAcidMutations: [],
@@ -81,6 +81,7 @@ export const MutationWithAnnotationEntry: StoryObj<AnnotatedMutationProps & { an
 
         await userEvent.click(canvas.getByText('A23403G'));
         await waitFor(() => expect(getAnnotationName(canvas)).toBeVisible());
+        await expect(canvas.getByRole('link', { name: 'with a link.' })).toBeVisible();
     },
 };
 

package/src/preact/components/annotated-mutation.tsx

@@ -1,3 +1,4 @@
+import DOMPurify from 'dompurify';
 import { useRef } from 'gridjs';
 import { Fragment, type FunctionComponent, type RefObject } from 'preact';
 
@@ -56,14 +57,17 @@ const AnnotatedMutationWithoutContext: FunctionComponent<AnnotatedMutationWithou
             {mutationAnnotations.map((annotation) => (
                 <Fragment key={annotation.name}>
                     <InfoHeadline2>{annotation.name}</InfoHeadline2>
-                    <InfoParagraph>{annotation.description}</InfoParagraph>
+                    <InfoParagraph>
+                        {/* eslint-disable-next-line react/no-danger */}
+                        <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(annotation.description) }} />
+                    </InfoParagraph>
                 </Fragment>
             ))}
         </div>
     );
 
     return (
-        <ButtonWithModalDialog modalContent={modalContent} modalRef={modalRef}>
+        <ButtonWithModalDialog buttonClassName={'select-text'} modalContent={modalContent} modalRef={modalRef}>
             {mutation.code}
             <sup>
                 {mutationAnnotations

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

@@ -3,7 +3,10 @@ import { type FunctionComponent } from 'preact';
 import { getMutationComparisonTableData } from './getMutationComparisonTableData';
 import { type MutationData } from './queryMutationData';
 import { type Dataset } from '../../operator/Dataset';
+import type { SequenceType } from '../../types';
 import { type DeletionClass, type SubstitutionClass } from '../../utils/mutations';
+import { useMutationAnnotationsProvider } from '../MutationAnnotationsContext';
+import { GridJsAnnotatedMutation } from '../components/annotated-mutation';
 import { type ProportionInterval } from '../components/proportion-selector';
 import { Table } from '../components/table';
 import { sortSubstitutionsAndDeletions } from '../shared/sort/sortSubstitutionsAndDeletions';
@@ -13,20 +16,30 @@ export interface MutationsTableProps {
     data: Dataset<MutationData>;
     proportionInterval: ProportionInterval;
     pageSize: boolean | number;
+    sequenceType: SequenceType;
 }
 
 export const MutationComparisonTable: FunctionComponent<MutationsTableProps> = ({
     data,
     proportionInterval,
     pageSize,
+    sequenceType,
 }) => {
+    const annotationsProvider = useMutationAnnotationsProvider();
+
     const headers = [
         {
             name: 'Mutation',
             sort: {
                 compare: sortSubstitutionsAndDeletions,
             },
-            formatter: (cell: SubstitutionClass | DeletionClass) => cell.toString(),
+            formatter: (cell: SubstitutionClass | DeletionClass) => (
+                <GridJsAnnotatedMutation
+                    mutation={cell}
+                    sequenceType={sequenceType}
+                    annotationsProvider={annotationsProvider}
+                />
+            ),
         },
         {
             name: 'Prevalence',

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

@@ -1,10 +1,13 @@
 import { type ActiveElement, Chart, type ChartConfiguration, type ChartEvent, registerables } from 'chart.js';
 import { ArcSlice, extractSets, VennDiagramController } from 'chartjs-chart-venn';
-import { type FunctionComponent } from 'preact';
+import { Fragment, type FunctionComponent } from 'preact';
 import { useMemo, useState } from 'preact/hooks';
 
 import { type MutationData } from './queryMutationData';
 import { type Dataset } from '../../operator/Dataset';
+import { type SequenceType } from '../../types';
+import { DeletionClass, SubstitutionClass } from '../../utils/mutations';
+import { AnnotatedMutation } from '../components/annotated-mutation';
 import GsChart from '../components/chart';
 import { type ProportionInterval } from '../components/proportion-selector';
 
@@ -14,12 +17,14 @@ export interface MutationComparisonVennProps {
     data: Dataset<MutationData>;
     proportionInterval: ProportionInterval;
     maintainAspectRatio: boolean;
+    sequenceType: SequenceType;
 }
 
 export const MutationComparisonVenn: FunctionComponent<MutationComparisonVennProps> = ({
     data,
     proportionInterval,
     maintainAspectRatio,
+    sequenceType,
 }) => {
     const [selectedDatasetIndex, setSelectedDatasetIndex] = useState<null | number>(null);
 
@@ -105,22 +110,48 @@ export const MutationComparisonVenn: FunctionComponent<MutationComparisonVennPro
             <div className='flex-1'>
                 <GsChart configuration={config} />
             </div>
-            <p class='flex flex-wrap break-words m-2'>{getSelectedMutationsDescription(selectedDatasetIndex, sets)}</p>
+            <p class='flex flex-wrap break-words m-2'>
+                <SelectedMutationsDescription
+                    selectedDatasetIndex={selectedDatasetIndex}
+                    sets={sets}
+                    sequenceType={sequenceType}
+                />
+            </p>
         </div>
     );
 };
 
 const noElementSelectedMessage = 'You have no elements selected. Click in the venn diagram to select.';
 
-function getSelectedMutationsDescription(
-    selectedDatasetIndex: number | null,
-    sets: ReturnType<typeof extractSets<string>>,
-) {
+type SelectedMutationsDescriptionProps = {
+    selectedDatasetIndex: number | null;
+    sets: ReturnType<typeof extractSets<string>>;
+    sequenceType: SequenceType;
+};
+
+const SelectedMutationsDescription: FunctionComponent<SelectedMutationsDescriptionProps> = ({
+    selectedDatasetIndex,
+    sets,
+    sequenceType,
+}) => {
     if (selectedDatasetIndex === null) {
         return noElementSelectedMessage;
     }
 
     const values = sets.datasets[0].data[selectedDatasetIndex].values;
     const label = sets.datasets[0].data[selectedDatasetIndex].label;
-    return `${label}: ${values.join(', ')}` || '';
-}
+    return (
+        <span>
+            {`${label}: `}
+            {values
+                .map((value) => SubstitutionClass.parse(value) ?? DeletionClass.parse(value))
+                .filter((value) => value !== null)
+                .map((value, index) => (
+                    <Fragment key={value}>
+                        {index > 0 && ', '}
+                        <AnnotatedMutation mutation={value} sequenceType={sequenceType} />
+                    </Fragment>
+                ))}
+        </span>
+    );
+};

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

@@ -7,7 +7,9 @@ import { MutationComparison, type MutationComparisonProps } from './mutation-com
 import { LAPIS_URL, NUCLEOTIDE_MUTATIONS_ENDPOINT } from '../../constants';
 import referenceGenome from '../../lapisApi/__mockData__/referenceGenome.json';
 import { LapisUrlContextProvider } from '../LapisUrlContext';
+import { MutationAnnotationsContextProvider } from '../MutationAnnotationsContext';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
+import { expectMutationAnnotation } from '../shared/stories/expectMutationAnnotation';
 
 const dateToSomeDataset = '2022-01-01';
 
@@ -74,20 +76,39 @@ const meta: Meta<MutationComparisonProps> = {
 
 export default meta;
 
+const mutationAnnotations = [
+    {
+        name: 'I am a mutation annotation!',
+        description: 'This describes what is special about these mutations.',
+        symbol: '#',
+        nucleotideMutations: ['G199-', 'C3037T'],
+        aminoAcidMutations: ['N:G204R'],
+    },
+    {
+        name: 'I am another mutation annotation!',
+        description: 'This describes what is special about these other mutations.',
+        symbol: '+',
+        nucleotideMutations: ['C3037T', 'A23403G'],
+        aminoAcidMutations: ['ORF1a:I2230T'],
+    },
+];
+
 const Template: StoryObj<MutationComparisonProps> = {
     render: (args) => (
-        <LapisUrlContextProvider value={LAPIS_URL}>
-            <ReferenceGenomeContext.Provider value={referenceGenome}>
-                <MutationComparison
-                    lapisFilters={args.lapisFilters}
-                    sequenceType={args.sequenceType}
-                    views={args.views}
-                    width={args.width}
-                    height={args.height}
-                    pageSize={args.pageSize}
-                />
-            </ReferenceGenomeContext.Provider>
-        </LapisUrlContextProvider>
+        <MutationAnnotationsContextProvider value={mutationAnnotations}>
+            <LapisUrlContextProvider value={LAPIS_URL}>
+                <ReferenceGenomeContext.Provider value={referenceGenome}>
+                    <MutationComparison
+                        lapisFilters={args.lapisFilters}
+                        sequenceType={args.sequenceType}
+                        views={args.views}
+                        width={args.width}
+                        height={args.height}
+                        pageSize={args.pageSize}
+                    />
+                </ReferenceGenomeContext.Provider>
+            </LapisUrlContextProvider>
+        </MutationAnnotationsContextProvider>
     ),
 };
 
@@ -114,6 +135,9 @@ export const TwoVariants: StoryObj<MutationComparisonProps> = {
         width: '100%',
         pageSize: 10,
     },
+    play: async ({ canvasElement }) => {
+        await expectMutationAnnotation(canvasElement, 'C3037T');
+    },
 };
 
 export const FilterForOnlyDeletions: StoryObj<MutationComparisonProps> = {

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

@@ -104,6 +104,7 @@ const MutationComparisonTabs: FunctionComponent<MutationComparisonTabsProps> = (
                             data={{ content: filteredData }}
                             proportionInterval={proportionInterval}
                             pageSize={originalComponentProps.pageSize}
+                            sequenceType={originalComponentProps.sequenceType}
                         />
                     ),
                 };
@@ -115,6 +116,7 @@ const MutationComparisonTabs: FunctionComponent<MutationComparisonTabsProps> = (
                             data={{ content: filteredData }}
                             proportionInterval={proportionInterval}
                             maintainAspectRatio={maintainAspectRatio}
+                            sequenceType={originalComponentProps.sequenceType}
                         />
                     ),
                 };

package/src/preact/mutations/mutations.stories.tsx

@@ -1,5 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/preact';
-import { expect, userEvent, waitFor, within } from '@storybook/test';
+import { expect, waitFor, within } from '@storybook/test';
 
 import nucleotideInsertions from './__mockData__/nucleotideInsertions.json';
 import nucleotideMutations from './__mockData__/nucleotideMutations.json';
@@ -16,6 +16,7 @@ import overallVariantCount from '../../preact/mutations/__mockData__/overallVari
 import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { MutationAnnotationsContextProvider } from '../MutationAnnotationsContext';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
+import { expectMutationAnnotation } from '../shared/stories/expectMutationAnnotation';
 
 const meta: Meta<MutationsProps> = {
     title: 'Visualization/Mutations',
@@ -165,13 +166,6 @@ export const TableTab: StoryObj<MutationsProps> = {
         views: ['table'],
     },
     play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-
-        await waitFor(async () => {
-            const annotatedMutation = canvas.getByText('C241T');
-            await expect(annotatedMutation).toBeVisible();
-            await userEvent.click(annotatedMutation);
-        });
-        await waitFor(() => expect(canvas.getByText('Annotations for C241T')).toBeVisible());
+        await expectMutationAnnotation(canvasElement, 'C241T');
     },
 };

package/src/preact/mutationsOverTime/mutations-over-time.stories.tsx

@@ -8,6 +8,7 @@ import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { MutationAnnotationsContextProvider } from '../MutationAnnotationsContext';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
 import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectErrorMessage';
+import { expectMutationAnnotation } from '../shared/stories/expectMutationAnnotation';
 
 const meta: Meta<MutationsOverTimeProps> = {
     title: 'Visualization/Mutation over time',
@@ -75,14 +76,8 @@ export const Default: StoryObj<MutationsOverTimeProps> = {
         lapisDateField: 'date',
         initialMeanProportionInterval: { min: 0.05, max: 0.9 },
     },
-    play: async ({ canvas }) => {
-        await waitFor(async () => {
-            const annotatedMutation = canvas.getAllByText('C44T')[0];
-            await expect(annotatedMutation).toBeVisible();
-            await userEvent.click(annotatedMutation);
-        });
-
-        await waitFor(() => expect(canvas.getByText('Annotations for C44T')).toBeVisible());
+    play: async ({ canvasElement }) => {
+        await expectMutationAnnotation(canvasElement, 'C44T');
     },
 };
 

package/src/preact/shared/stories/expectMutationAnnotation.ts

@@ -0,0 +1,13 @@
+import { expect, userEvent, waitFor, within } from '@storybook/test';
+
+export async function expectMutationAnnotation(canvasElement: HTMLElement, mutation: string) {
+    const canvas = within(canvasElement);
+
+    await waitFor(async () => {
+        const annotatedMutation = canvas.getAllByText(mutation)[0];
+        await expect(annotatedMutation).toBeVisible();
+        await userEvent.click(annotatedMutation);
+    });
+
+    await waitFor(() => expect(canvas.getByText(`Annotations for ${mutation}`)).toBeVisible());
+}