@genspectrum/dashboard-components 0.16.3 → 0.17.0

package/src/preact/dateRangeFilter/date-range-filter.tsx

@@ -1,28 +1,26 @@
-import flatpickr from 'flatpickr';
-import 'flatpickr/dist/flatpickr.min.css';
-import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';
 import z from 'zod';
 
 import { computeInitialValues } from './computeInitialValues';
+import { DatePicker } from './date-picker';
 import { toYYYYMMDD } from './dateConversion';
 import {
+    type DateRangeOption,
     DateRangeOptionChangedEvent,
     dateRangeOptionSchema,
-    type DateRangeSelectOption,
     dateRangeValueSchema,
 } from './dateRangeOption';
-import { getDatesForSelectorValue, getSelectableOptions } from './selectableOptions';
+import { ClearableSelect } from '../components/clearable-select';
 import { ErrorBoundary } from '../components/error-boundary';
-import { Select } from '../components/select';
-import type { ScaleType } from '../shared/charts/getYAxisScale';
 
 const customOption = 'Custom';
 
 const dateRangeFilterInnerPropsSchema = z.object({
     dateRangeOptions: z.array(dateRangeOptionSchema),
     earliestDate: z.string().date(),
-    value: dateRangeValueSchema.optional(),
+    value: dateRangeValueSchema,
     lapisDateField: z.string().min(1),
+    placeholder: z.string().optional(),
 });
 
 const dateRangeFilterPropsSchema = dateRangeFilterInnerPropsSchema.extend({
@@ -32,6 +30,12 @@ const dateRangeFilterPropsSchema = dateRangeFilterInnerPropsSchema.extend({
 export type DateRangeFilterProps = z.infer<typeof dateRangeFilterPropsSchema>;
 export type DateRangeFilterInnerProps = z.infer<typeof dateRangeFilterInnerPropsSchema>;
 
+type DateRangeFilterState = {
+    label: string;
+    dateFrom?: Date;
+    dateTo?: Date;
+} | null;
+
 export const DateRangeFilter = (props: DateRangeFilterProps) => {
     const { width, ...innerProps } = props;
     const size = { width, height: '3rem' };
@@ -50,135 +54,116 @@ export const DateRangeFilterInner = ({
     earliestDate = '1900-01-01',
     value,
     lapisDateField,
+    placeholder,
 }: DateRangeFilterInnerProps) => {
     const initialValues = useMemo(
         () => computeInitialValues(value, earliestDate, dateRangeOptions),
         [value, earliestDate, dateRangeOptions],
     );
 
-    const fromDatePickerRef = useRef<HTMLInputElement>(null);
-    const toDatePickerRef = useRef<HTMLInputElement>(null);
     const divRef = useRef<HTMLDivElement>(null);
-    const [dateFromPicker, setDateFromPicker] = useState<flatpickr.Instance | null>(null);
-    const [dateToPicker, setDateToPicker] = useState<flatpickr.Instance | null>(null);
 
-    const [selectedDateRange, setSelectedDateRange] = useState<string | undefined>(
-        initialValues.initialSelectedDateRange,
+    const getInitialState = useCallback(() => {
+        if (!initialValues) {
+            return null;
+        }
+        return initialValues.initialSelectedDateRange
+            ? {
+                  label: initialValues.initialSelectedDateRange,
+                  dateFrom: initialValues.initialSelectedDateFrom,
+                  dateTo: initialValues.initialSelectedDateTo,
+              }
+            : {
+                  label: customOption,
+                  dateFrom: initialValues.initialSelectedDateFrom,
+                  dateTo: initialValues.initialSelectedDateTo,
+              };
+    }, [initialValues]);
+
+    const customComboboxValue = { label: customOption };
+    const [options, setOptions] = useState(
+        getInitialState()?.label === customOption ? [...dateRangeOptions, customComboboxValue] : [...dateRangeOptions],
     );
+    const [state, setState] = useState<DateRangeFilterState>(getInitialState());
 
-    const [selectedDates, setSelectedDates] = useState<{ dateFrom: Date; dateTo: Date }>({
-        dateFrom: initialValues.initialSelectedDateFrom,
-        dateTo: initialValues.initialSelectedDateTo,
-    });
+    function updateState(newState: DateRangeFilterState) {
+        setState(newState);
+        fireFilterChangedEvent({ dateFrom: newState?.dateFrom, dateTo: newState?.dateTo, lapisDateField });
+        fireOptionChangedEvent(newState);
+    }
 
     useEffect(() => {
-        setSelectedDateRange(initialValues.initialSelectedDateRange);
-        setSelectedDates({
-            dateFrom: initialValues.initialSelectedDateFrom,
-            dateTo: initialValues.initialSelectedDateTo,
-        });
-
-        const commonConfig = {
-            allowInput: true,
-            dateFormat: 'Y-m-d',
-        };
-
-        if (fromDatePickerRef.current) {
-            setDateFromPicker(
-                flatpickr(fromDatePickerRef.current, {
-                    ...commonConfig,
-                    defaultDate: initialValues.initialSelectedDateFrom,
-                }),
-            );
+        setState(getInitialState());
+    }, [getInitialState]);
+
+    const onSelectChange = (option: DateRangeOption | null) => {
+        updateState(
+            option !== null
+                ? {
+                      label: option?.label,
+                      dateFrom: getFromDate(option, earliestDate),
+                      dateTo: getToDate(option),
+                  }
+                : null,
+        );
+        if (option?.label !== customOption) {
+            setOptions([...dateRangeOptions]);
         }
+    };
 
-        if (toDatePickerRef.current) {
-            setDateToPicker(
-                flatpickr(toDatePickerRef.current, {
-                    ...commonConfig,
-                    defaultDate: initialValues.initialSelectedDateTo,
-                }),
-            );
+    function getFromDate(option: DateRangeOption | null, earliestDate: string) {
+        if (!option || option.label === customOption) {
+            return undefined;
         }
+        return new Date(option?.dateFrom ?? earliestDate);
+    }
 
-        return () => {
-            setDateFromPicker((prev) => {
-                prev?.destroy();
-                return null;
-            });
-            setDateToPicker((prev) => {
-                prev?.destroy();
-                return null;
-            });
-        };
-    }, [fromDatePickerRef, toDatePickerRef, initialValues]);
-
-    const onSelectChange = (value: string) => {
-        setSelectedDateRange(value);
-
-        const dateRange = getDatesForSelectorValue(value, dateRangeOptions, earliestDate);
-
-        dateToPicker?.set('minDate', dateRange.dateFrom);
-        dateFromPicker?.set('maxDate', dateRange.dateTo);
-
-        dateFromPicker?.setDate(dateRange.dateFrom);
-        dateToPicker?.setDate(dateRange.dateTo);
-
-        setSelectedDates({
-            dateFrom: dateRange.dateFrom,
-            dateTo: dateRange.dateTo,
-        });
+    function getToDate(option: DateRangeOption | null) {
+        if (!option || option.label === customOption) {
+            return undefined;
+        }
+        if (!option.dateTo) {
+            return new Date();
+        }
 
-        fireFilterChangedEvent();
-        fireOptionChangedEvent(value);
-    };
+        return new Date(option.dateTo);
+    }
 
-    const onChangeDateFrom = () => {
-        if (selectedDates.dateFrom.toDateString() === dateFromPicker?.selectedDates[0].toDateString()) {
+    const onChangeDateFrom = (date: Date | undefined) => {
+        if (date?.toDateString() === state?.dateFrom?.toDateString()) {
             return;
         }
 
-        const dateTo = dateToPicker?.selectedDates[0];
-        const dateFrom = dateFromPicker?.selectedDates[0];
-
-        selectedDates.dateFrom = dateFrom || new Date();
-        dateToPicker?.set('minDate', dateFrom);
-        setSelectedDateRange(customOption);
-
-        fireFilterChangedEvent();
-        fireOptionChangedEvent({
-            dateFrom: dateFrom !== undefined ? toYYYYMMDD(dateFrom) : earliestDate,
-            dateTo: toYYYYMMDD(dateTo || new Date()),
+        updateState({
+            label: customOption,
+            dateFrom: date,
+            dateTo: state?.dateTo,
         });
+        setOptions([...dateRangeOptions, customComboboxValue]);
     };
 
-    const onChangeDateTo = () => {
-        if (selectedDates.dateTo.toDateString() === dateToPicker?.selectedDates[0].toDateString()) {
+    const onChangeDateTo = (date: Date | undefined) => {
+        if (date?.toDateString() === state?.dateTo?.toDateString()) {
             return;
         }
 
-        const dateTo = dateToPicker?.selectedDates[0];
-        const dateFrom = dateFromPicker?.selectedDates[0];
-
-        selectedDates.dateTo = dateTo || new Date();
-        dateFromPicker?.set('maxDate', dateTo);
-        setSelectedDateRange(customOption);
-
-        fireFilterChangedEvent();
-        fireOptionChangedEvent({
-            dateFrom: dateFrom !== undefined ? toYYYYMMDD(dateFrom) : earliestDate,
-            dateTo: toYYYYMMDD(dateTo || new Date()),
+        updateState({
+            label: customOption,
+            dateFrom: state?.dateFrom,
+            dateTo: date,
         });
+        setOptions([...dateRangeOptions, customComboboxValue]);
     };
 
-    const fireOptionChangedEvent = (option: DateRangeSelectOption) => {
-        divRef.current?.dispatchEvent(new DateRangeOptionChangedEvent(option));
-    };
-
-    const fireFilterChangedEvent = () => {
-        const dateFrom = dateFromPicker?.selectedDates[0];
-        const dateTo = dateToPicker?.selectedDates[0];
-
+    const fireFilterChangedEvent = ({
+        dateFrom,
+        dateTo,
+        lapisDateField,
+    }: {
+        dateFrom: Date | undefined;
+        dateTo: Date | undefined;
+        lapisDateField: string;
+    }) => {
         const detail = {
             ...(dateFrom !== undefined && { [`${lapisDateField}From`]: toYYYYMMDD(dateFrom) }),
             ...(dateTo !== undefined && { [`${lapisDateField}To`]: toYYYYMMDD(dateTo) }),
@@ -193,39 +178,51 @@ export const DateRangeFilterInner = ({
         );
     };
 
+    const fireOptionChangedEvent = (state: DateRangeFilterState) => {
+        const eventDetail =
+            state?.label === customOption
+                ? {
+                      dateFrom: state.dateFrom !== undefined ? toYYYYMMDD(state.dateFrom) : undefined,
+                      dateTo: state.dateTo !== undefined ? toYYYYMMDD(state.dateTo) : undefined,
+                  }
+                : state?.label;
+
+        divRef.current?.dispatchEvent(new DateRangeOptionChangedEvent(eventDetail));
+    };
+
     return (
-        <div class='flex flex-wrap' ref={divRef}>
-            <Select
-                items={[
-                    ...getSelectableOptions(dateRangeOptions),
-                    { label: customOption, value: customOption, disabled: true },
-                ]}
-                selected={selectedDateRange ?? customOption}
-                selectStyle='select-bordered rounded-none flex-grow min-w-[7.5rem]'
-                onChange={(event: Event) => {
-                    event.preventDefault();
-                    const select = event.target as HTMLSelectElement;
-                    const value = select.value as ScaleType;
-                    onSelectChange(value);
-                }}
-            />
-            <div className={'flex flex-wrap flex-grow'}>
-                <input
-                    class='input input-bordered rounded-none flex-grow w-[7.5rem]'
-                    type='text'
-                    placeholder='Date from'
-                    ref={fromDatePickerRef}
-                    onChange={onChangeDateFrom}
-                    onBlur={onChangeDateFrom}
-                />
-                <input
-                    class='input input-bordered rounded-none flex-grow w-[7.5rem]'
-                    type='text'
-                    placeholder='Date to'
-                    ref={toDatePickerRef}
-                    onChange={onChangeDateTo}
-                    onBlur={onChangeDateTo}
-                />
+        <div className={'@container'} ref={divRef}>
+            <div className='flex min-w-[7.5rem] flex-col @md:flex-row'>
+                <div className='flex-grow'>
+                    <ClearableSelect
+                        items={options.map((item) => item.label)}
+                        placeholderText={placeholder}
+                        onChange={(value) => {
+                            const dateRangeOption = options.find((item) => item.label === value);
+                            onSelectChange(dateRangeOption ?? null);
+                        }}
+                        value={state?.label ?? null}
+                        selectClassName={'rounded-t-md rounded-b-none @md:rounded-l-md @md:rounded-r-none'}
+                    />
+                </div>
+                <div className={'flex flex-grow flex-col @4xs:flex-row'}>
+                    <DatePicker
+                        className={'flex-grow min-w-[7.5rem] @4xs:rounded-bl-md @md:rounded-l-none rounded-none'}
+                        value={state?.dateFrom}
+                        onChange={onChangeDateFrom}
+                        maxDate={state?.dateTo}
+                        placeholderText={'Date from'}
+                    />
+                    <DatePicker
+                        className={
+                            'flex-grow min-w-[7.5rem] rounded-b-md rounded-t-none @4xs:rounded-tr-none @4xs:rounded-l-none @md:rounded-r-md '
+                        }
+                        value={state?.dateTo}
+                        onChange={onChangeDateTo}
+                        minDate={state?.dateFrom}
+                        placeholderText={'Date to'}
+                    />
+                </div>
             </div>
         </div>
     );

package/src/preact/dateRangeFilter/dateRangeOption.ts

@@ -22,20 +22,20 @@ export const dateRangeOptionSchema = z.object({
 
 export type DateRangeOption = z.infer<typeof dateRangeOptionSchema>;
 
-export const dateRangeValueSchema = z.union([
-    z.string(),
-    z.object({
-        dateFrom: z.string().date().optional(),
-        dateTo: z.string().date().optional(),
-    }),
-]);
+export const dateRangeValueSchema = z
+    .union([
+        z.string(),
+        z.object({
+            dateFrom: z.string().date().optional(),
+            dateTo: z.string().date().optional(),
+        }),
+    ])
+    .optional();
 
 export type DateRangeValue = z.infer<typeof dateRangeValueSchema>;
 
-export type DateRangeSelectOption = Required<DateRangeValue>;
-
-export class DateRangeOptionChangedEvent extends CustomEvent<DateRangeSelectOption> {
-    constructor(detail: DateRangeSelectOption) {
+export class DateRangeOptionChangedEvent extends CustomEvent<DateRangeValue> {
+    constructor(detail: DateRangeValue) {
         super('gs-date-range-option-changed', {
             detail,
             bubbles: true,

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/WithClassName/WithClassName.ts

@@ -0,0 +1 @@
+export type WithClassName<T = object> = T & { className?: string };

package/src/preact/shared/icons/DeleteIcon.tsx

@@ -0,0 +1,3 @@
+export function DeleteIcon() {
+    return <>×</>;
+}