@genspectrum/dashboard-components 0.18.2 → 0.18.3

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>;
@@ -865,285 +877,6 @@ declare const yAxisMaxConfigSchema: default_2.ZodObject<{
 export { }
 
 
-declare global {
-    interface HTMLElementEventMap {
-        'gs-error': ErrorEvent;
-    }
-}
-
-
-declare global {
-    interface HTMLElementTagNameMap {
-        'gs-app': AppComponent;
-    }
-}
-
-
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'gs-app': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
-        }
-    }
-}
-
-
-declare global {
-    interface HTMLElementTagNameMap {
-        'gs-mutation-comparison-component': MutationComparisonComponent;
-    }
-}
-
-
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
-        }
-    }
-}
-
-
-declare global {
-    interface HTMLElementTagNameMap {
-        'gs-mutations-component': MutationsComponent;
-    }
-}
-
-
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
-        }
-    }
-}
-
-
-declare global {
-    interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
-    }
-}
-
-
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
-        }
-    }
-}
-
-
-declare global {
-    interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
-    }
-}
-
-
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
-        }
-    }
-}
-
-
-declare global {
-    interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
-    }
-}
-
-
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
-        }
-    }
-}
-
-
-declare global {
-    interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
-    }
-}
-
-
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
-        }
-    }
-}
-
-
-declare global {
-    interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
-    }
-}
-
-
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
-        }
-    }
-}
-
-
-declare global {
-    interface HTMLElementTagNameMap {
-        'gs-statistics': StatisticsComponent;
-    }
-}
-
-
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
-        }
-    }
-}
-
-
-declare global {
-    interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
-    }
-}
-
-
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
-        }
-    }
-}
-
-
-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;
-    }
-}
-
-
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
-        }
-    }
-}
-
-
-declare global {
-    interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-location-changed': LocationChangedEvent;
-    }
-}
-
-
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
-        }
-    }
-}
-
-
-declare global {
-    interface HTMLElementTagNameMap {
-        'gs-text-filter': TextFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-text-filter-changed': TextFilterChangedEvent;
-    }
-}
-
-
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'gs-text-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
-        }
-    }
-}
-
-
-declare global {
-    interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
-    }
-}
-
-
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
-        }
-    }
-}
-
-
-declare global {
-    interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-lineage-filter-changed': LineageFilterChangedEvent;
-    }
-}
-
-
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
-        }
-    }
-}
-
-
-declare global {
-    interface HTMLElementTagNameMap {
-        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
-    }
-}
-
-
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
-        }
-    }
-}
-
-
 declare module 'chart.js' {
     interface CartesianScaleTypeRegistry {
         logit: {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.18.2",
+    "version": "0.18.3",
     "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,7 +143,7 @@
         "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",
         "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'],
             },
         ],

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

@@ -45,7 +45,7 @@ const AnnotatedMutationWithoutContext: FunctionComponent<AnnotatedMutationWithou
     annotationsProvider,
     modalRef,
 }) => {
-    const mutationAnnotations = annotationsProvider(mutation.code, sequenceType);
+    const mutationAnnotations = annotationsProvider(mutation, sequenceType);
 
     if (mutationAnnotations === undefined || mutationAnnotations.length === 0) {
         return mutation.code;
@@ -67,7 +67,11 @@ const AnnotatedMutationWithoutContext: FunctionComponent<AnnotatedMutationWithou
     );
 
     return (
-        <ButtonWithModalDialog buttonClassName={'select-text'} modalContent={modalContent} modalRef={modalRef}>
+        <ButtonWithModalDialog
+            buttonClassName={'select-text cursor-pointer'}
+            modalContent={modalContent}
+            modalRef={modalRef}
+        >
             {mutation.code}
             <sup>
                 {mutationAnnotations