@genspectrum/dashboard-components 1.17.0 → 1.18.1

package/src/preact/MutationAnnotationsContext.spec.tsx

@@ -2,9 +2,17 @@ import { renderHook } from '@testing-library/preact';
 import { type FunctionalComponent } from 'preact';
 import { describe, expect, it } from 'vitest';
 
-import { MutationAnnotationsContextProvider, useMutationAnnotationsProvider } from './MutationAnnotationsContext';
+import {
+    MutationAnnotationsContextProvider,
+    type ResolvedMutationAnnotation,
+    useMutationAnnotationsProvider,
+} from './MutationAnnotationsContext';
 import { SubstitutionClass } from '../utils/mutations';
-import { type MutationAnnotations } from '../web-components/mutation-annotations-context';
+import { type MutationAnnotation, type MutationAnnotations } from '../web-components/mutation-annotations-context';
+
+function resolved(annotation: MutationAnnotation): ResolvedMutationAnnotation {
+    return { annotation, name: annotation.name, description: annotation.description };
+}
 
 describe('useMutationAnnotation', () => {
     function renderAnnotationsHook(mockAnnotations: MutationAnnotations) {
@@ -35,13 +43,13 @@ describe('useMutationAnnotation', () => {
         it('should return the correct annotation for a given mutation', () => {
             const result = renderAnnotationsHook(mockAnnotations)(SubstitutionClass.parse('A123')!, 'nucleotide');
 
-            expect(result).toEqual([mockAnnotations[0]]);
+            expect(result).toEqual([resolved(mockAnnotations[0])]);
         });
 
         it('should return the correct annotations if multiple contain a mutation', () => {
             const result = renderAnnotationsHook(mockAnnotations)(SubstitutionClass.parse('A456')!, 'nucleotide');
 
-            expect(result).toEqual([mockAnnotations[0], mockAnnotations[1]]);
+            expect(result).toEqual([resolved(mockAnnotations[0]), resolved(mockAnnotations[1])]);
         });
     });
 
@@ -58,7 +66,7 @@ describe('useMutationAnnotation', () => {
         it('should return the correct mutation annotation for a given mutations', () => {
             const result = renderAnnotationsHook(mockAnnotations)(SubstitutionClass.parse('B456')!, 'amino acid');
 
-            expect(result).toEqual([mockAnnotations[0]]);
+            expect(result).toEqual([resolved(mockAnnotations[0])]);
         });
     });
 
@@ -81,17 +89,17 @@ describe('useMutationAnnotation', () => {
 
         it('should return the correct mutation annotation covered by position only', () => {
             const result = renderAnnotationsHook(mockAnnotations)(SubstitutionClass.parse('A543T')!, 'nucleotide');
-            expect(result).toEqual([mockAnnotations[0]]);
+            expect(result).toEqual([resolved(mockAnnotations[0])]);
         });
 
         it('should return the correct mutation annotation covered both by position and mutation', () => {
             const result = renderAnnotationsHook(mockAnnotations)(SubstitutionClass.parse('A321T')!, 'nucleotide');
-            expect(result).toEqual([mockAnnotations[0]]);
+            expect(result).toEqual([resolved(mockAnnotations[0])]);
         });
 
         it('should return both annotations if one matches the mutations and the other the position', () => {
             const result = renderAnnotationsHook(mockAnnotations)(SubstitutionClass.parse('A432T')!, 'nucleotide');
-            expect(result).toEqual([mockAnnotations[1], mockAnnotations[0]]);
+            expect(result).toEqual([resolved(mockAnnotations[0]), resolved(mockAnnotations[1])]);
         });
     });
 
@@ -108,12 +116,12 @@ describe('useMutationAnnotation', () => {
 
         it('should return the correct mutation annotation covered both by position and mutation', () => {
             const result = renderAnnotationsHook(mockAnnotations)(SubstitutionClass.parse('Gene:B432G')!, 'amino acid');
-            expect(result).toEqual([mockAnnotations[0]]);
+            expect(result).toEqual([resolved(mockAnnotations[0])]);
         });
 
         it('should return the correct mutation annotation covered both by position only', () => {
             const result = renderAnnotationsHook(mockAnnotations)(SubstitutionClass.parse('Gene:B543G')!, 'amino acid');
-            expect(result).toEqual([mockAnnotations[0]]);
+            expect(result).toEqual([resolved(mockAnnotations[0])]);
         });
 
         it('should return no mutation annotation for an amino acid position of wrong gene', () => {
@@ -124,4 +132,68 @@ describe('useMutationAnnotation', () => {
             expect(result).toBeUndefined();
         });
     });
+
+    describe('per-mutation name and description overrides', () => {
+        it('should use overridden name and description when both are provided on a mutation entry', () => {
+            const mockAnnotations: MutationAnnotations = [
+                {
+                    name: 'Group name',
+                    description: 'Group description',
+                    symbol: 'X',
+                    nucleotideMutations: [
+                        { mutation: 'A123T', name: 'Override name', description: 'Override description' },
+                    ],
+                },
+            ];
+            const result = renderAnnotationsHook(mockAnnotations)(SubstitutionClass.parse('A123T')!, 'nucleotide');
+            expect(result).toEqual([
+                { annotation: mockAnnotations[0], name: 'Override name', description: 'Override description' },
+            ]);
+        });
+
+        it('should fall back to group name when only description is overridden', () => {
+            const mockAnnotations: MutationAnnotations = [
+                {
+                    name: 'Group name',
+                    description: 'Group description',
+                    symbol: 'X',
+                    nucleotideMutations: [{ mutation: 'A123T', description: 'Override description' }],
+                },
+            ];
+            const result = renderAnnotationsHook(mockAnnotations)(SubstitutionClass.parse('A123T')!, 'nucleotide');
+            expect(result).toEqual([
+                { annotation: mockAnnotations[0], name: 'Group name', description: 'Override description' },
+            ]);
+        });
+
+        it('should fall back to group description when only name is overridden', () => {
+            const mockAnnotations: MutationAnnotations = [
+                {
+                    name: 'Group name',
+                    description: 'Group description',
+                    symbol: 'X',
+                    nucleotideMutations: [{ mutation: 'A123T', name: 'Override name' }],
+                },
+            ];
+            const result = renderAnnotationsHook(mockAnnotations)(SubstitutionClass.parse('A123T')!, 'nucleotide');
+            expect(result).toEqual([
+                { annotation: mockAnnotations[0], name: 'Override name', description: 'Group description' },
+            ]);
+        });
+
+        it('should use position-level override for position entries', () => {
+            const mockAnnotations: MutationAnnotations = [
+                {
+                    name: 'Group name',
+                    description: 'Group description',
+                    symbol: 'X',
+                    nucleotidePositions: [{ position: '123', name: 'Position override name' }],
+                },
+            ];
+            const result = renderAnnotationsHook(mockAnnotations)(SubstitutionClass.parse('A123T')!, 'nucleotide');
+            expect(result).toEqual([
+                { annotation: mockAnnotations[0], name: 'Position override name', description: 'Group description' },
+            ]);
+        });
+    });
 });

package/src/preact/MutationAnnotationsContext.tsx

@@ -11,12 +11,18 @@ import { ErrorDisplay } from './components/error-display';
 import { ResizeContainer } from './components/resize-container';
 import { type Mutation } from '../utils/mutations';
 
-type MutationAnnotationPerSequenceType = {
-    mutation: Map<string, MutationAnnotations>;
-    position: Map<string, MutationAnnotations>;
+export type ResolvedMutationAnnotation = {
+    annotation: MutationAnnotation;
+    name: string;
+    description: string;
 };
 
-type MutationAnnotationsContextValue = Record<SequenceType, MutationAnnotationPerSequenceType> & {
+type AnnotationLookup = {
+    mutation: Map<string, ResolvedMutationAnnotation[]>;
+    position: Map<string, ResolvedMutationAnnotation[]>;
+};
+
+type MutationAnnotationsContextValue = Record<SequenceType, AnnotationLookup> & {
     rawAnnotations: MutationAnnotations;
 };
 
@@ -32,69 +38,113 @@ const MutationAnnotationsContext = createContext<MutationAnnotationsContextValue
     },
 });
 
+/**
+ * Validates and provides mutation annotations to all descendant components.
+ * Accepts the raw MutationAnnotations config, builds the internal lookup index, and stores it in context.
+ * Renders an error message if the provided annotations fail schema validation.
+ */
 export const MutationAnnotationsContextProvider: FunctionalComponent<
     Omit<ComponentProps<typeof MutationAnnotationsContext.Provider>, 'value'> & { value: MutationAnnotations }
 > = ({ value, children }) => {
-    const parseResult = useMemo(() => {
-        const parseResult = mutationAnnotationsSchema.safeParse(value);
-
-        if (!parseResult.success) {
-            return parseResult;
-        }
-
-        return { success: true as const, value: getMutationAnnotationsContext(value) };
-    }, [value]);
+    const parseResult = useMemo(() => mutationAnnotationsSchema.safeParse(value), [value]);
+    const contextValue = useMemo(
+        () =>
+            parseResult.success
+                ? { success: true as const, value: buildAnnotationIndex(parseResult.data) }
+                : { success: false as const, error: parseResult.error },
+        [parseResult],
+    );
 
-    if (!parseResult.success) {
+    if (!contextValue.success) {
         return (
             <ResizeContainer size={{ width: '100%' }}>
-                <ErrorDisplay error={parseResult.error} layout='vertical' />
+                <ErrorDisplay error={contextValue.error} layout='vertical' />
             </ResizeContainer>
         );
     }
 
     return (
-        <MutationAnnotationsContext.Provider value={parseResult.value}>{children}</MutationAnnotationsContext.Provider>
+        <MutationAnnotationsContext.Provider value={contextValue.value}>{children}</MutationAnnotationsContext.Provider>
     );
 };
 
-export function getMutationAnnotationsContext(value: MutationAnnotations) {
-    const nucleotideMap = new Map<string, MutationAnnotations>();
-    const nucleotidePositions = new Map<string, MutationAnnotations>();
-    const aminoAcidMap = new Map<string, MutationAnnotations>();
-    const aminoAcidPositions = new Map<string, MutationAnnotations>();
+/**
+ * Indexes a flat list of MutationAnnotations into fast lookup maps, resolving per-entry name/description overrides
+ * eagerly. Called once (memoized) when the annotations config is set on the provider.
+ *
+ * Returns two maps per sequence type — one keyed by exact mutation code, one by position string — each mapping to
+ * the list of ResolvedMutationAnnotations that apply to that key.
+ */
+export function buildAnnotationIndex(value: MutationAnnotations): MutationAnnotationsContextValue {
+    const nucleotideMutationMap = new Map<string, ResolvedMutationAnnotation[]>();
+    const nucleotidePositionMap = new Map<string, ResolvedMutationAnnotation[]>();
+    const aminoAcidMutationMap = new Map<string, ResolvedMutationAnnotation[]>();
+    const aminoAcidPositionMap = new Map<string, ResolvedMutationAnnotation[]>();
 
     value.forEach((annotation) => {
-        new Set(annotation.nucleotideMutations).forEach((code) => {
-            addAnnotationToMap(nucleotideMap, code, annotation);
+        annotation.nucleotideMutations?.forEach((entry) => {
+            addToMap(
+                nucleotideMutationMap,
+                typeof entry === 'string' ? entry : entry.mutation,
+                resolve(annotation, entry),
+            );
         });
-        new Set(annotation.aminoAcidMutations).forEach((code) => {
-            addAnnotationToMap(aminoAcidMap, code, annotation);
+        annotation.aminoAcidMutations?.forEach((entry) => {
+            addToMap(
+                aminoAcidMutationMap,
+                typeof entry === 'string' ? entry : entry.mutation,
+                resolve(annotation, entry),
+            );
         });
-        new Set(annotation.nucleotidePositions).forEach((position) => {
-            addAnnotationToMap(nucleotidePositions, position, annotation);
+        annotation.nucleotidePositions?.forEach((entry) => {
+            addToMap(
+                nucleotidePositionMap,
+                typeof entry === 'string' ? entry : entry.position,
+                resolve(annotation, entry),
+            );
         });
-        new Set(annotation.aminoAcidPositions).forEach((position) => {
-            addAnnotationToMap(aminoAcidPositions, position, annotation);
+        annotation.aminoAcidPositions?.forEach((entry) => {
+            addToMap(
+                aminoAcidPositionMap,
+                typeof entry === 'string' ? entry : entry.position,
+                resolve(annotation, entry),
+            );
         });
     });
 
     return {
         rawAnnotations: value,
-        nucleotide: { mutation: nucleotideMap, position: nucleotidePositions },
-        'amino acid': { mutation: aminoAcidMap, position: aminoAcidPositions },
+        nucleotide: { mutation: nucleotideMutationMap, position: nucleotidePositionMap },
+        'amino acid': { mutation: aminoAcidMutationMap, position: aminoAcidPositionMap },
+    };
+}
+
+function resolve(
+    annotation: MutationAnnotation,
+    entry: string | { name?: string; description?: string },
+): ResolvedMutationAnnotation {
+    const overrides = typeof entry === 'object' ? entry : undefined;
+    return {
+        annotation,
+        name: overrides?.name ?? annotation.name,
+        description: overrides?.description ?? annotation.description,
     };
 }
 
-function addAnnotationToMap(map: Map<string, MutationAnnotations>, code: string, annotation: MutationAnnotation) {
-    const oldAnnotations = map.get(code.toUpperCase()) ?? [];
-    map.set(code.toUpperCase(), [...oldAnnotations, annotation]);
+function addToMap(map: Map<string, ResolvedMutationAnnotation[]>, code: string, resolved: ResolvedMutationAnnotation) {
+    const existing = map.get(code.toUpperCase()) ?? [];
+    map.set(code.toUpperCase(), [...existing, resolved]);
 }
 
 export function useRawMutationAnnotations() {
     return useContext(MutationAnnotationsContext).rawAnnotations;
 }
 
+/**
+ * Returns a lookup function `(mutation, sequenceType) => ResolvedMutationAnnotation[] | undefined` that, given a
+ * specific mutation, returns all annotations that apply to it with name and description already resolved.
+ * Returns undefined if no annotations match.
+ */
 export function useMutationAnnotationsProvider() {
     const mutationAnnotations = useContext(MutationAnnotationsContext);
 
@@ -108,21 +158,19 @@ export function getMutationAnnotationsProvider(mutationAnnotations: MutationAnno
                 ? `${mutation.position}`
                 : `${mutation.segment.toUpperCase()}:${mutation.position}`;
 
-        const possiblePositionAnnotations = mutationAnnotations[sequenceType].position.get(position);
-        const possibleExactAnnotations = mutationAnnotations[sequenceType].mutation.get(mutation.code.toUpperCase());
+        const exactMatches = mutationAnnotations[sequenceType].mutation.get(mutation.code.toUpperCase());
+        const positionMatches = mutationAnnotations[sequenceType].position.get(position);
 
-        const annotations =
-            possiblePositionAnnotations && possibleExactAnnotations
-                ? [...possiblePositionAnnotations, ...possibleExactAnnotations]
-                : (possiblePositionAnnotations ?? possibleExactAnnotations);
+        const combined =
+            exactMatches && positionMatches ? [...exactMatches, ...positionMatches] : (exactMatches ?? positionMatches);
 
-        const uniqueNames = new Set<string>();
+        const seenNames = new Set<string>();
 
-        return annotations?.filter((annotation) => {
-            if (uniqueNames.has(annotation.name)) {
+        return combined?.filter((resolved) => {
+            if (seenNames.has(resolved.annotation.name)) {
                 return false;
             }
-            uniqueNames.add(annotation.name);
+            seenNames.add(resolved.annotation.name);
             return true;
         });
     };

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

@@ -128,6 +128,37 @@ export const MutationWithMultipleAnnotationEntries: StoryObj<StoryProps> = {
     },
 };
 
+export const MutationWithPerMutationInfoOverride: StoryObj<StoryProps> = {
+    ...MutationWithoutAnnotationEntry,
+    args: {
+        ...MutationWithoutAnnotationEntry.args,
+        annotations: [
+            {
+                name: 'Group annotation',
+                description: 'Group-level description',
+                symbol: 'c',
+                nucleotideMutations: [
+                    {
+                        mutation: 'A23403G',
+                        name: '3CLpro:T31C',
+                        description: 'Per-mutation description for 3CLpro:T31C',
+                    },
+                ],
+            },
+        ],
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await waitFor(() => expect(canvas.getByText('A23403G')).toBeVisible());
+        await expect(getAnnotationIndicator(canvas)).toBeVisible();
+
+        await userEvent.click(canvas.getByText('c'));
+        await waitFor(() => expect(canvas.queryByText('3CLpro:T31C')).toBeVisible());
+        await expect(canvas.queryByText('Per-mutation description for 3CLpro:T31C')).toBeVisible();
+    },
+};
+
 export const AminoAcidMutationWithAnnotationEntry: StoryObj<StoryProps> = {
     ...MutationWithoutAnnotationEntry,
     args: {

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

@@ -78,11 +78,11 @@ const AnnotatedMutationWithoutContext: FunctionComponent<AnnotatedMutationWithou
     const modalContent = (
         <div className='block'>
             <InfoHeadline1>Annotations for {mutation.code}</InfoHeadline1>
-            {mutationAnnotations.map((annotation) => (
-                <Fragment key={annotation.name}>
-                    <InfoHeadline2>{annotation.name}</InfoHeadline2>
+            {mutationAnnotations.map((resolved) => (
+                <Fragment key={resolved.annotation.name}>
+                    <InfoHeadline2>{resolved.name}</InfoHeadline2>
                     <InfoParagraph>
-                        <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(annotation.description) }} />
+                        <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(resolved.description) }} />
                     </InfoParagraph>
                 </Fragment>
             ))}
@@ -99,7 +99,7 @@ const AnnotatedMutationWithoutContext: FunctionComponent<AnnotatedMutationWithou
             >
                 <sup className='hover:underline focus-visible:underline decoration-red-600'>
                     {mutationAnnotations
-                        .map((annotation) => annotation.symbol)
+                        .map((resolved) => resolved.annotation.symbol)
                         .map((symbol, index) => (
                             <Fragment key={symbol}>
                                 <span className='text-red-600'>{symbol}</span>

package/src/preact/components/downshift-combobox.tsx

@@ -190,50 +190,59 @@ export function DownshiftMultiCombobox<Item>({
         environment,
     });
 
-    const { isOpen, getToggleButtonProps, getMenuProps, getInputProps, highlightedIndex, getItemProps, closeMenu } =
-        useCombobox({
-            items: availableItems,
-            itemToString(item) {
-                return itemToString(item);
-            },
-            inputValue: itemsFilter,
-            onStateChange({ inputValue: newInputValue, type, selectedItem: newSelectedItem }) {
-                switch (type) {
-                    case useCombobox.stateChangeTypes.InputKeyDownEnter:
-                    case useCombobox.stateChangeTypes.ItemClick:
-                        if (newSelectedItem) {
-                            dispatchEvent([...selectedItems, newSelectedItem]);
-                            setItemsFilter('');
-                        }
-                        break;
-                    case useCombobox.stateChangeTypes.InputChange:
-                        setItemsFilter(newInputValue?.trim() ?? '');
-                        break;
-                    default:
-                        break;
-                }
-            },
-            stateReducer(state, actionAndChanges) {
-                const { changes, type } = actionAndChanges;
-                switch (type) {
-                    case useCombobox.stateChangeTypes.InputKeyDownEnter:
-                    case useCombobox.stateChangeTypes.ItemClick:
-                        return {
-                            ...changes,
-                            isOpen: true,
-                            highlightedIndex: state.highlightedIndex,
-                            inputValue: '',
-                        };
-                    default:
-                        return changes;
-                }
-            },
-            environment,
-        });
+    const {
+        isOpen,
+        getToggleButtonProps,
+        getMenuProps,
+        getInputProps,
+        highlightedIndex,
+        getItemProps,
+        closeMenu,
+        selectItem,
+    } = useCombobox({
+        items: availableItems,
+        itemToString(item) {
+            return itemToString(item);
+        },
+        inputValue: itemsFilter,
+        onStateChange({ inputValue: newInputValue, type, selectedItem: newSelectedItem }) {
+            switch (type) {
+                case useCombobox.stateChangeTypes.InputKeyDownEnter:
+                case useCombobox.stateChangeTypes.ItemClick:
+                    if (newSelectedItem) {
+                        dispatchEvent([...selectedItems, newSelectedItem]);
+                        setItemsFilter('');
+                    }
+                    break;
+                case useCombobox.stateChangeTypes.InputChange:
+                    setItemsFilter(newInputValue?.trim() ?? '');
+                    break;
+                default:
+                    break;
+            }
+        },
+        stateReducer(state, actionAndChanges) {
+            const { changes, type } = actionAndChanges;
+            switch (type) {
+                case useCombobox.stateChangeTypes.InputKeyDownEnter:
+                case useCombobox.stateChangeTypes.ItemClick:
+                    return {
+                        ...changes,
+                        isOpen: true,
+                        highlightedIndex: state.highlightedIndex,
+                        inputValue: '',
+                    };
+                default:
+                    return changes;
+            }
+        },
+        environment,
+    });
 
     const clearAll = () => {
         dispatchEvent([]);
         setItemsFilter('');
+        selectItem(null);
     };
 
     const buttonRef = useRef(null);
@@ -259,7 +268,10 @@ export function DownshiftMultiCombobox<Item>({
                                 aria-label={`remove ${itemToString(selectedItem)}`}
                                 className='cursor-pointer hover:text-red-600'
                                 type='button'
-                                onClick={() => removeSelectedItem(selectedItem)}
+                                onClick={() => {
+                                    removeSelectedItem(selectedItem);
+                                    selectItem(null);
+                                }}
                                 tabIndex={-1}
                             >
                                 ×

package/src/preact/lineageFilter/lineage-filter.stories.tsx

@@ -422,6 +422,119 @@ export const MultiSelectClearAll: StoryObj<LineageFilterProps> = {
     },
 };
 
+export const MultiSelectReselectAfterClearAll: StoryObj<LineageFilterProps> = {
+    render: (args) => (
+        <LapisUrlContextProvider value={LAPIS_URL}>
+            <LineageFilter {...args} />
+        </LapisUrlContextProvider>
+    ),
+    args: {
+        ...Default.args,
+        multiSelect: true,
+        value: ['A.1', 'B.1'],
+        placeholderText: 'Select lineages',
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        const lineageChangedListenerMock = fn();
+
+        await step('Setup event listener mock', () => {
+            canvasElement.addEventListener(gsEventNames.lineageFilterMultiChanged, lineageChangedListenerMock);
+        });
+
+        await step('multi-select filter is rendered with initial values', async () => {
+            await waitFor(async () => {
+                await expect(canvas.getByText('A.1')).toBeVisible();
+                await expect(canvas.getByText('B.1')).toBeVisible();
+            });
+        });
+
+        await step('clear all selections', async () => {
+            const clearButton = canvas.getByLabelText('clear selection');
+            await userEvent.click(clearButton);
+
+            await waitFor(() => {
+                return expect(lineageChangedListenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({
+                    pangoLineage: undefined,
+                });
+            });
+        });
+
+        await step('reselect A.1 from the dropdown', async () => {
+            const input = await canvas.findByPlaceholderText('Select lineages');
+            await userEvent.type(input, 'A.1');
+            await userEvent.click(canvas.getByRole('option', { name: 'A.1(2,574)' }));
+
+            await waitFor(() => {
+                return expect(lineageChangedListenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({
+                    pangoLineage: ['A.1'],
+                });
+            });
+        });
+
+        await step('verify A.1 is shown', async () => {
+            await expect(canvas.getByText('A.1')).toBeVisible();
+        });
+    },
+};
+
+export const MultiSelectReselectAfterRemove: StoryObj<LineageFilterProps> = {
+    render: (args) => (
+        <LapisUrlContextProvider value={LAPIS_URL}>
+            <LineageFilter {...args} />
+        </LapisUrlContextProvider>
+    ),
+    args: {
+        ...Default.args,
+        multiSelect: true,
+        value: ['A.1', 'B.1'],
+        placeholderText: 'Select lineages',
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        const lineageChangedListenerMock = fn();
+
+        await step('Setup event listener mock', () => {
+            canvasElement.addEventListener(gsEventNames.lineageFilterMultiChanged, lineageChangedListenerMock);
+        });
+
+        await step('multi-select filter is rendered with initial values', async () => {
+            await waitFor(async () => {
+                await expect(canvas.getByText('A.1')).toBeVisible();
+                await expect(canvas.getByText('B.1')).toBeVisible();
+            });
+        });
+
+        await step('remove A.1', async () => {
+            const removeButton = canvas.getByLabelText('remove A.1');
+            await userEvent.click(removeButton);
+
+            await waitFor(() => {
+                return expect(lineageChangedListenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({
+                    pangoLineage: ['B.1'],
+                });
+            });
+        });
+
+        await step('reselect A.1 from the dropdown', async () => {
+            const input = await canvas.findByPlaceholderText('Select lineages');
+            await userEvent.type(input, 'A.1');
+            await userEvent.click(canvas.getByRole('option', { name: 'A.1(2,574)' }));
+
+            await waitFor(() => {
+                return expect(lineageChangedListenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({
+                    pangoLineage: ['B.1', 'A.1'],
+                });
+            });
+        });
+
+        await step('verify A.1 is shown again', async () => {
+            await expect(canvas.getByText('A.1')).toBeVisible();
+            await expect(canvas.getByText('B.1')).toBeVisible();
+        });
+    },
+};
+
 async function prepare(canvasElement: HTMLElement, step: StepFunction<PreactRenderer, unknown>) {
     const canvas = within(canvasElement);
 

package/src/preact/mutationsOverTime/getFilteredMutationCodes.spec.ts

@@ -4,7 +4,7 @@ import { getFilteredMutationCodes, type MutationFilter } from './getFilteredMuta
 import { type DeletionEntry, type SubstitutionEntry } from '../../types';
 import { type Deletion, type Substitution } from '../../utils/mutations';
 import { type MutationAnnotations } from '../../web-components/mutation-annotations-context';
-import { getMutationAnnotationsContext, getMutationAnnotationsProvider } from '../MutationAnnotationsContext';
+import { buildAnnotationIndex, getMutationAnnotationsProvider } from '../MutationAnnotationsContext';
 
 describe('getFilteredMutationCodes', () => {
     it('should filter by displayed segments', () => {
@@ -129,7 +129,7 @@ describe('getFilteredMutationCodes', () => {
 
     describe('should filter by annotation', () => {
         const expectFilteredValue = (filterValue: MutationFilter, annotations: MutationAnnotations) => {
-            const annotationProvider = getMutationAnnotationsProvider(getMutationAnnotationsContext(annotations));
+            const annotationProvider = getMutationAnnotationsProvider(buildAnnotationIndex(annotations));
 
             const result = getFilteredMutationCodes({
                 overallMutationData: [someSubstitutionEntry, anotherSubstitutionEntry, someDeletionEntry],