@genspectrum/dashboard-components 0.18.2 → 0.18.4

package/dist/util.d.ts

@@ -208,40 +208,52 @@ 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">;
+    nucleotideMutations: default_2.ZodOptional<default_2.ZodArray<default_2.ZodString, "many">>;
+    nucleotidePositions: default_2.ZodOptional<default_2.ZodArray<default_2.ZodString, "many">>;
+    aminoAcidMutations: default_2.ZodOptional<default_2.ZodArray<default_2.ZodString, "many">>;
+    aminoAcidPositions: default_2.ZodOptional<default_2.ZodArray<default_2.ZodString, "many">>;
 }, "strip", default_2.ZodTypeAny, {
     symbol: string;
     name: string;
     description: string;
-    nucleotideMutations: string[];
-    aminoAcidMutations: string[];
+    nucleotideMutations?: string[] | undefined;
+    nucleotidePositions?: string[] | undefined;
+    aminoAcidMutations?: string[] | undefined;
+    aminoAcidPositions?: string[] | undefined;
 }, {
     symbol: string;
     name: string;
     description: string;
-    nucleotideMutations: string[];
-    aminoAcidMutations: string[];
+    nucleotideMutations?: string[] | undefined;
+    nucleotidePositions?: string[] | undefined;
+    aminoAcidMutations?: string[] | undefined;
+    aminoAcidPositions?: string[] | undefined;
 }>;
 
 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">;
+    nucleotideMutations: default_2.ZodOptional<default_2.ZodArray<default_2.ZodString, "many">>;
+    nucleotidePositions: default_2.ZodOptional<default_2.ZodArray<default_2.ZodString, "many">>;
+    aminoAcidMutations: default_2.ZodOptional<default_2.ZodArray<default_2.ZodString, "many">>;
+    aminoAcidPositions: default_2.ZodOptional<default_2.ZodArray<default_2.ZodString, "many">>;
 }, "strip", default_2.ZodTypeAny, {
     symbol: string;
     name: string;
     description: string;
-    nucleotideMutations: string[];
-    aminoAcidMutations: string[];
+    nucleotideMutations?: string[] | undefined;
+    nucleotidePositions?: string[] | undefined;
+    aminoAcidMutations?: string[] | undefined;
+    aminoAcidPositions?: string[] | undefined;
 }, {
     symbol: string;
     name: string;
     description: string;
-    nucleotideMutations: string[];
-    aminoAcidMutations: string[];
+    nucleotideMutations?: string[] | undefined;
+    nucleotidePositions?: string[] | undefined;
+    aminoAcidMutations?: string[] | undefined;
+    aminoAcidPositions?: string[] | undefined;
 }>, "many">;
 
 export declare type MutationComparisonProps = default_2.infer<typeof mutationComparisonPropsSchema>;
@@ -890,7 +902,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-comparison-component': MutationComparisonComponent;
+        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
     }
 }
 
@@ -898,7 +910,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -906,7 +918,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-component': MutationsComponent;
+        'gs-date-range-filter': DateRangeFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
     }
 }
 
@@ -914,7 +930,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -922,7 +938,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-location-filter': LocationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-location-changed': LocationChangedEvent;
     }
 }
 
@@ -930,7 +949,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -938,7 +957,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-text-filter': TextFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-text-filter-changed': TextFilterChangedEvent;
     }
 }
 
@@ -946,7 +968,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -954,7 +976,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-lineage-filter': LineageFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-lineage-filter-changed': LineageFilterChangedEvent;
     }
 }
 
@@ -962,7 +987,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -970,7 +995,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-mutation-filter': MutationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
     }
 }
 
@@ -978,7 +1006,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -986,7 +1014,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-mutation-comparison-component': MutationComparisonComponent;
     }
 }
 
@@ -994,7 +1022,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1002,7 +1030,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-statistics': StatisticsComponent;
+        'gs-mutations-component': MutationsComponent;
     }
 }
 
@@ -1010,7 +1038,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1018,7 +1046,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -1026,7 +1054,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1034,11 +1062,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-filter': DateRangeFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
-        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -1046,7 +1070,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1054,10 +1078,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-location-changed': LocationChangedEvent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -1065,7 +1086,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1073,10 +1094,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-filter': TextFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-text-filter-changed': TextFilterChangedEvent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1084,7 +1102,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1092,10 +1110,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1103,7 +1118,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1111,10 +1126,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-lineage-filter-changed': LineageFilterChangedEvent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -1122,7 +1134,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1130,7 +1142,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
+        'gs-statistics': StatisticsComponent;
     }
 }
 
@@ -1138,7 +1150,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.18.2",
+    "version": "0.18.4",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -112,7 +112,7 @@
         "@storybook/preact": "^8.0.9",
         "@storybook/preact-vite": "^8.0.9",
         "@storybook/test": "^8.0.0",
-        "@storybook/test-runner": "^0.21.0",
+        "@storybook/test-runner": "^0.22.0",
         "@storybook/types": "^8.0.9",
         "@storybook/web-components": "^8.0.9",
         "@storybook/web-components-vite": "^8.0.9",
@@ -143,9 +143,9 @@
         "storybook": "^8.0.9",
         "storybook-addon-fetch-mock": "^2.0.0",
         "tailwindcss": "^4.0.9",
-        "typescript": "~5.7.2",
+        "typescript": "^5.8.2",
         "vite": "^6.0.3",
-        "vite-plugin-dts": "^4.0.3",
+        "vite-plugin-dts": "4.5.0",
         "vitest": "^3.0.2"
     }
 }

package/src/preact/MutationAnnotationsContext.spec.tsx

@@ -3,56 +3,125 @@ import { type FunctionalComponent } from 'preact';
 import { describe, expect, it } from 'vitest';
 
 import { MutationAnnotationsContextProvider, useMutationAnnotationsProvider } from './MutationAnnotationsContext';
+import { SubstitutionClass } from '../utils/mutations';
 import { type MutationAnnotations } from '../web-components/mutation-annotations-context';
 
 describe('useMutationAnnotation', () => {
-    const mockAnnotations: MutationAnnotations = [
-        {
-            name: 'Annotation 1',
-            description: 'Description 1',
-            symbol: 'A1',
-            nucleotideMutations: ['A123', 'A456'],
-            aminoAcidMutations: ['B123'],
-        },
-        {
-            name: 'Annotation 2',
-            description: 'Description 2',
-            symbol: 'A2',
-            nucleotideMutations: ['A456', 'A789'],
-            aminoAcidMutations: ['B456', 'B789'],
-        },
-    ];
-
-    const wrapper: FunctionalComponent = ({ children }) => (
-        <MutationAnnotationsContextProvider value={mockAnnotations}>{children}</MutationAnnotationsContextProvider>
-    );
-
-    function renderAnnotationsHook() {
+    function renderAnnotationsHook(mockAnnotations: MutationAnnotations) {
+        const wrapper: FunctionalComponent = ({ children }) => (
+            <MutationAnnotationsContextProvider value={mockAnnotations}>{children}</MutationAnnotationsContextProvider>
+        );
+
         const { result } = renderHook(() => useMutationAnnotationsProvider(), { wrapper });
         return result.current;
     }
 
-    it('should return the correct annotation for a given nucleotide mutation', () => {
-        const result = renderAnnotationsHook()('A123', 'nucleotide');
+    describe('annotations for nucleotide mutations', () => {
+        const mockAnnotations: MutationAnnotations = [
+            {
+                name: 'Annotation 1',
+                description: 'Description 1',
+                symbol: 'A1',
+                nucleotideMutations: ['A123', 'A456'],
+            },
+            {
+                name: 'Annotation 2',
+                description: 'Description 2',
+                symbol: 'A2',
+                nucleotideMutations: ['A456', 'A789'],
+            },
+        ];
+
+        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([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]]);
+        });
     });
 
-    it('should return the correct annotations if multiple contain a mutation', () => {
-        const result = renderAnnotationsHook()('A456', 'nucleotide');
+    describe('annotations for amino acid mutations', () => {
+        const mockAnnotations: MutationAnnotations = [
+            {
+                name: 'Annotation 1',
+                description: 'Description 1',
+                symbol: 'A1',
+                aminoAcidMutations: ['B456', 'B789'],
+            },
+        ];
+
+        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], mockAnnotations[1]]);
+            expect(result).toEqual([mockAnnotations[0]]);
+        });
     });
 
-    it('should return undefined for a non-existent mutation code', () => {
-        const result = renderAnnotationsHook()('NON_EXISTENT', 'nucleotide');
+    describe('annotations for nucleotide positions', () => {
+        const mockAnnotations: MutationAnnotations = [
+            {
+                name: 'Annotation 1',
+                description: 'Description 1',
+                symbol: 'A1',
+                nucleotideMutations: ['A321T', 'A432T'],
+                nucleotidePositions: ['321', '543'],
+            },
+            {
+                name: 'Annotation 2',
+                description: 'Description 2',
+                symbol: 'A2',
+                nucleotidePositions: ['432'],
+            },
+        ];
 
-        expect(result).toBeUndefined();
+        it('should return the correct mutation annotation covered by position only', () => {
+            const result = renderAnnotationsHook(mockAnnotations)(SubstitutionClass.parse('A543T')!, 'nucleotide');
+            expect(result).toEqual([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]]);
+        });
+
+        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]]);
+        });
     });
 
-    it('should return the correct mutation annotation for amino acid mutations', () => {
-        const result = renderAnnotationsHook()('B456', 'amino acid');
+    describe('annotations for amino acid positions', () => {
+        const mockAnnotations: MutationAnnotations = [
+            {
+                name: 'Annotation 1',
+                description: 'Description 1',
+                symbol: 'A1',
+                aminoAcidMutations: ['Gene:B321C', 'Gene:B432G'],
+                aminoAcidPositions: ['Gene:432', 'Gene:543'],
+            },
+        ];
+
+        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]]);
+        });
+
+        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([mockAnnotations[1]]);
+        it('should return no mutation annotation for an amino acid position of wrong gene', () => {
+            const result = renderAnnotationsHook(mockAnnotations)(
+                SubstitutionClass.parse('NotTheGene:B543G')!,
+                'amino acid',
+            );
+            expect(result).toBeUndefined();
+        });
     });
 });

package/src/preact/MutationAnnotationsContext.tsx

@@ -9,10 +9,22 @@ import {
 } from '../web-components/mutation-annotations-context';
 import { ErrorDisplay } from './components/error-display';
 import { ResizeContainer } from './components/resize-container';
+import { type Mutation } from '../utils/mutations';
 
-const MutationAnnotationsContext = createContext<Record<SequenceType, Map<string, MutationAnnotations>>>({
-    nucleotide: new Map(),
-    'amino acid': new Map(),
+type MutationAnnotationPerSequenceType = {
+    mutation: Map<string, MutationAnnotations>;
+    position: Map<string, MutationAnnotations>;
+};
+
+const MutationAnnotationsContext = createContext<Record<SequenceType, MutationAnnotationPerSequenceType>>({
+    nucleotide: {
+        mutation: new Map(),
+        position: new Map(),
+    },
+    'amino acid': {
+        mutation: new Map(),
+        position: new Map(),
+    },
 });
 
 export const MutationAnnotationsContextProvider: FunctionalComponent<
@@ -26,7 +38,9 @@ export const MutationAnnotationsContextProvider: FunctionalComponent<
         }
 
         const nucleotideMap = new Map<string, MutationAnnotations>();
+        const nucleotidePositions = new Map<string, MutationAnnotations>();
         const aminoAcidMap = new Map<string, MutationAnnotations>();
+        const aminoAcidPositions = new Map<string, MutationAnnotations>();
 
         value.forEach((annotation) => {
             new Set(annotation.nucleotideMutations).forEach((code) => {
@@ -35,13 +49,19 @@ export const MutationAnnotationsContextProvider: FunctionalComponent<
             new Set(annotation.aminoAcidMutations).forEach((code) => {
                 addAnnotationToMap(aminoAcidMap, code, annotation);
             });
+            new Set(annotation.nucleotidePositions).forEach((position) => {
+                addAnnotationToMap(nucleotidePositions, position, annotation);
+            });
+            new Set(annotation.aminoAcidPositions).forEach((position) => {
+                addAnnotationToMap(aminoAcidPositions, position, annotation);
+            });
         });
 
         return {
             success: true as const,
             value: {
-                nucleotide: nucleotideMap,
-                'amino acid': aminoAcidMap,
+                nucleotide: { mutation: nucleotideMap, position: nucleotidePositions },
+                'amino acid': { mutation: aminoAcidMap, position: aminoAcidPositions },
             },
         };
     }, [value]);
@@ -67,6 +87,28 @@ function addAnnotationToMap(map: Map<string, MutationAnnotations>, code: string,
 export function useMutationAnnotationsProvider() {
     const mutationAnnotations = useContext(MutationAnnotationsContext);
 
-    return (mutationCode: string, sequenceType: SequenceType) =>
-        mutationAnnotations[sequenceType].get(mutationCode.toUpperCase());
+    return (mutation: Mutation, sequenceType: SequenceType) => {
+        const position =
+            mutation.segment === undefined
+                ? `${mutation.position}`
+                : `${mutation.segment.toUpperCase()}:${mutation.position}`;
+
+        const possiblePositionAnnotations = mutationAnnotations[sequenceType].position.get(position);
+        const possibleExactAnnotations = mutationAnnotations[sequenceType].mutation.get(mutation.code.toUpperCase());
+
+        const annotations =
+            possiblePositionAnnotations && possibleExactAnnotations
+                ? [...possiblePositionAnnotations, ...possibleExactAnnotations]
+                : (possiblePositionAnnotations ?? possibleExactAnnotations);
+
+        const uniqueNames = new Set<string>();
+
+        return annotations?.filter((item) => {
+            if (uniqueNames.has(item.name)) {
+                return false;
+            }
+            uniqueNames.add(item.name);
+            return true;
+        });
+    };
 }

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

@@ -46,7 +46,6 @@ export const MutationWithoutAnnotationEntry: StoryObj<AnnotatedMutationProps & {
                 description: 'This is a test annotation',
                 symbol: '*',
                 nucleotideMutations: ['123T'],
-                aminoAcidMutations: [],
             },
         ],
     },
@@ -69,7 +68,6 @@ export const MutationWithAnnotationEntry: StoryObj<AnnotatedMutationProps & { an
                 description: 'This is a test annotation <a class="link" href="/">with a link.</a>',
                 symbol: '*',
                 nucleotideMutations: ['A23403G'],
-                aminoAcidMutations: [],
             },
         ],
     },
@@ -97,14 +95,12 @@ export const MutationWithMultipleAnnotationEntries: StoryObj<
                 description: 'This is a test annotation',
                 symbol: '*',
                 nucleotideMutations: ['A23403G'],
-                aminoAcidMutations: [],
             },
             {
                 name: 'Another test annotation',
                 description: 'This is a test annotation',
                 symbol: '+',
                 nucleotideMutations: ['A23403G'],
-                aminoAcidMutations: [],
             },
         ],
     },
@@ -139,7 +135,6 @@ export const AminoAcidMutationWithAnnotationEntry: StoryObj<
                 name: 'Test annotation',
                 description: 'This is a test annotation',
                 symbol: '*',
-                nucleotideMutations: [],
                 aminoAcidMutations: ['S:A501G'],
             },
         ],