@genspectrum/dashboard-components 0.16.2 → 0.16.4

package/dist/style.css

@@ -1073,6 +1073,12 @@ html {
     --tw-bg-opacity: 1;
     background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
   }
+
+  .table-zebra tr.hover:hover,
+  .table-zebra tr.hover:nth-child(even):hover {
+    --tw-bg-opacity: 1;
+    background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
+  }
 }
 .btn {
   display: inline-flex;
@@ -3187,6 +3193,9 @@ input.tab:checked + .tab-content,
 .mt-4 {
   margin-top: 1rem;
 }
+.block {
+  display: block;
+}
 .inline {
   display: inline;
 }
@@ -3283,6 +3292,11 @@ input.tab:checked + .tab-content,
 .cursor-pointer {
   cursor: pointer;
 }
+.select-text {
+  -webkit-user-select: text;
+     -moz-user-select: text;
+          user-select: text;
+}
 .list-inside {
   list-style-position: inside;
 }
@@ -3492,6 +3506,9 @@ input.tab:checked + .tab-content,
 .font-medium {
   font-weight: 500;
 }
+.font-normal {
+  font-weight: 400;
+}
 .font-semibold {
   font-weight: 600;
 }
@@ -3522,6 +3539,10 @@ input.tab:checked + .tab-content,
   --tw-text-opacity: 1;
   color: rgb(115 115 115 / var(--tw-text-opacity, 1));
 }
+.text-red-600 {
+  --tw-text-opacity: 1;
+  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
+}
 .text-red-700 {
   --tw-text-opacity: 1;
   color: rgb(185 28 28 / var(--tw-text-opacity, 1));

package/dist/util.d.ts

@@ -202,6 +202,50 @@ declare const mapSourceSchema: default_2.ZodObject<{
     topologyObjectsKey: string;
 }>;
 
+export declare type MutationAnnotation = default_2.infer<typeof mutationAnnotationSchema>;
+
+export declare type MutationAnnotations = default_2.infer<typeof mutationAnnotationsSchema>;
+
+declare const mutationAnnotationSchema: default_2.ZodObject<{
+    name: default_2.ZodString;
+    description: default_2.ZodString;
+    symbol: default_2.ZodString;
+    nucleotideMutations: default_2.ZodArray<default_2.ZodString, "many">;
+    aminoAcidMutations: default_2.ZodArray<default_2.ZodString, "many">;
+}, "strip", default_2.ZodTypeAny, {
+    symbol: string;
+    name: string;
+    description: string;
+    nucleotideMutations: string[];
+    aminoAcidMutations: string[];
+}, {
+    symbol: string;
+    name: string;
+    description: string;
+    nucleotideMutations: string[];
+    aminoAcidMutations: string[];
+}>;
+
+declare const mutationAnnotationsSchema: default_2.ZodArray<default_2.ZodObject<{
+    name: default_2.ZodString;
+    description: default_2.ZodString;
+    symbol: default_2.ZodString;
+    nucleotideMutations: default_2.ZodArray<default_2.ZodString, "many">;
+    aminoAcidMutations: default_2.ZodArray<default_2.ZodString, "many">;
+}, "strip", default_2.ZodTypeAny, {
+    symbol: string;
+    name: string;
+    description: string;
+    nucleotideMutations: string[];
+    aminoAcidMutations: string[];
+}, {
+    symbol: string;
+    name: string;
+    description: string;
+    nucleotideMutations: string[];
+    aminoAcidMutations: string[];
+}>, "many">;
+
 export declare type MutationComparisonProps = default_2.infer<typeof mutationComparisonPropsSchema>;
 
 declare const mutationComparisonPropsSchema: default_2.ZodObject<{
@@ -247,6 +291,7 @@ declare const mutationComparisonPropsSchema: default_2.ZodObject<{
     pageSize: default_2.ZodUnion<[default_2.ZodBoolean, default_2.ZodNumber]>;
 }, "strip", default_2.ZodTypeAny, {
     width: string;
+    sequenceType: "nucleotide" | "amino acid";
     pageSize: number | boolean;
     lapisFilters: {
         lapisFilter: Record<string, string | number | boolean | string[] | null | undefined> & {
@@ -257,11 +302,11 @@ declare const mutationComparisonPropsSchema: default_2.ZodObject<{
         };
         displayName: string;
     }[];
-    sequenceType: "nucleotide" | "amino acid";
     views: ("table" | "venn")[];
     height?: string | undefined;
 }, {
     width: string;
+    sequenceType: "nucleotide" | "amino acid";
     pageSize: number | boolean;
     lapisFilters: {
         lapisFilter: Record<string, string | number | boolean | string[] | null | undefined> & {
@@ -272,7 +317,6 @@ declare const mutationComparisonPropsSchema: default_2.ZodObject<{
         };
         displayName: string;
     }[];
-    sequenceType: "nucleotide" | "amino acid";
     views: ("table" | "venn")[];
     height?: string | undefined;
 }>;
@@ -348,8 +392,8 @@ declare const mutationsPropsSchema: default_2.ZodObject<{
         aminoAcidInsertions?: string[] | undefined;
     };
     width: string;
-    pageSize: number | boolean;
     sequenceType: "nucleotide" | "amino acid";
+    pageSize: number | boolean;
     views: ("table" | "grid" | "insertions")[];
     height?: string | undefined;
     baselineLapisFilter?: (Record<string, string | number | boolean | string[] | null | undefined> & {
@@ -366,8 +410,8 @@ declare const mutationsPropsSchema: default_2.ZodObject<{
         aminoAcidInsertions?: string[] | undefined;
     };
     width: string;
-    pageSize: number | boolean;
     sequenceType: "nucleotide" | "amino acid";
+    pageSize: number | boolean;
     views: ("table" | "grid" | "insertions")[];
     height?: string | undefined;
     baselineLapisFilter?: (Record<string, string | number | boolean | string[] | null | undefined> & {
@@ -912,7 +956,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -920,7 +964,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -928,7 +972,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -936,7 +980,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -992,10 +1036,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
+        'gs-date-range-filter': DateRangeFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-location-changed': LocationChangedEvent;
+        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
     }
 }
 
@@ -1003,7 +1048,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1011,11 +1056,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-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
     }
 }
 
@@ -1023,7 +1064,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1031,10 +1072,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-filter': TextFilterComponent;
+        'gs-location-filter': LocationFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-text-filter-changed': TextFilterChangedEvent;
+        'gs-location-changed': LocationChangedEvent;
     }
 }
 
@@ -1042,7 +1083,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1050,10 +1091,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
+        'gs-text-filter': TextFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
+        'gs-text-filter-changed': TextFilterChangedEvent;
     }
 }
 
@@ -1061,7 +1102,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1088,7 +1129,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
+        'gs-mutation-filter': MutationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
     }
 }
 
@@ -1096,7 +1140,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.16.2",
+    "version": "0.16.4",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -51,7 +51,7 @@
     "scripts": {
         "build": "vite --config vite.release.config.ts build && npm run generate-manifest && vite --config vite.release-standalone.config.ts build",
         "build-and-pack": "npm run build && npm pack | xargs -I {} cp {} genspectrum-dashboard-components.tgz",
-        "test": "vitest",
+        "test": "vitest --typecheck",
         "lint": "npm run lint:lit-analyzer && npm run lint:eslint",
         "lint:eslint": "eslint 'src/**/*.{ts,tsx}'",
         "lint:lit-analyzer": "lit-analyzer",
@@ -87,6 +87,7 @@
         "chartjs-chart-error-bars": "^4.4.0",
         "chartjs-chart-venn": "^4.3.0",
         "dayjs": "^1.11.10",
+        "dompurify": "^3.2.4",
         "downshift": "^9.0.8",
         "flatpickr": "^4.6.13",
         "gridjs": "^6.2.0",
@@ -115,6 +116,7 @@
         "@storybook/web-components": "^8.0.9",
         "@storybook/web-components-vite": "^8.0.9",
         "@tailwindcss/container-queries": "^0.1.1",
+        "@testing-library/preact": "^3.2.4",
         "@types/geojson": "^7946.0.15",
         "@types/leaflet": "^1.9.15",
         "@types/node": "^22.0.0",
@@ -130,6 +132,7 @@
         "eslint-plugin-import": "^2.29.1",
         "eslint-plugin-jest": "^28.2.0",
         "eslint-plugin-storybook": "^0.11.0",
+        "happy-dom": "^17.1.1",
         "http-server": "^14.1.1",
         "lit-analyzer": "^2.0.3",
         "msw": "^2.2.14",

package/src/preact/MutationAnnotationsContext.spec.tsx

@@ -0,0 +1,58 @@
+import { renderHook } from '@testing-library/preact';
+import { type FunctionalComponent } from 'preact';
+import { describe, expect, it } from 'vitest';
+
+import { MutationAnnotationsContextProvider, useMutationAnnotationsProvider } from './MutationAnnotationsContext';
+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() {
+        const { result } = renderHook(() => useMutationAnnotationsProvider(), { wrapper });
+        return result.current;
+    }
+
+    it('should return the correct annotation for a given nucleotide mutation', () => {
+        const result = renderAnnotationsHook()('A123', 'nucleotide');
+
+        expect(result).toEqual([mockAnnotations[0]]);
+    });
+
+    it('should return the correct annotations if multiple contain a mutation', () => {
+        const result = renderAnnotationsHook()('A456', 'nucleotide');
+
+        expect(result).toEqual([mockAnnotations[0], mockAnnotations[1]]);
+    });
+
+    it('should return undefined for a non-existent mutation code', () => {
+        const result = renderAnnotationsHook()('NON_EXISTENT', 'nucleotide');
+
+        expect(result).toBeUndefined();
+    });
+
+    it('should return the correct mutation annotation for amino acid mutations', () => {
+        const result = renderAnnotationsHook()('B456', 'amino acid');
+
+        expect(result).toEqual([mockAnnotations[1]]);
+    });
+});

package/src/preact/MutationAnnotationsContext.tsx

@@ -0,0 +1,72 @@
+import { type ComponentProps, createContext, type FunctionalComponent } from 'preact';
+import { useContext, useMemo } from 'preact/hooks';
+
+import { type SequenceType } from '../types';
+import {
+    type MutationAnnotation,
+    type MutationAnnotations,
+    mutationAnnotationsSchema,
+} from '../web-components/mutation-annotations-context';
+import { ErrorDisplay } from './components/error-display';
+import { ResizeContainer } from './components/resize-container';
+
+const MutationAnnotationsContext = createContext<Record<SequenceType, Map<string, MutationAnnotations>>>({
+    nucleotide: new Map(),
+    'amino acid': new Map(),
+});
+
+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;
+        }
+
+        const nucleotideMap = new Map<string, MutationAnnotations>();
+        const aminoAcidMap = new Map<string, MutationAnnotations>();
+
+        value.forEach((annotation) => {
+            new Set(annotation.nucleotideMutations).forEach((code) => {
+                addAnnotationToMap(nucleotideMap, code, annotation);
+            });
+            new Set(annotation.aminoAcidMutations).forEach((code) => {
+                addAnnotationToMap(aminoAcidMap, code, annotation);
+            });
+        });
+
+        return {
+            success: true as const,
+            value: {
+                nucleotide: nucleotideMap,
+                'amino acid': aminoAcidMap,
+            },
+        };
+    }, [value]);
+
+    if (!parseResult.success) {
+        return (
+            <ResizeContainer size={{ width: '100%' }}>
+                <ErrorDisplay error={parseResult.error} layout='vertical' />
+            </ResizeContainer>
+        );
+    }
+
+    return (
+        <MutationAnnotationsContext.Provider value={parseResult.value}>{children}</MutationAnnotationsContext.Provider>
+    );
+};
+
+function addAnnotationToMap(map: Map<string, MutationAnnotations>, code: string, annotation: MutationAnnotation) {
+    const oldAnnotations = map.get(code.toUpperCase()) ?? [];
+    map.set(code.toUpperCase(), [...oldAnnotations, annotation]);
+}
+
+export function useMutationAnnotationsProvider() {
+    const mutationAnnotations = useContext(MutationAnnotationsContext);
+
+    return (mutationCode: string, sequenceType: SequenceType) =>
+        mutationAnnotations[sequenceType].get(mutationCode.toUpperCase());
+}

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

@@ -0,0 +1,164 @@
+import { type Meta, type StoryObj } from '@storybook/preact';
+import { expect, userEvent, waitFor, within } from '@storybook/test';
+
+import { AnnotatedMutation, type AnnotatedMutationProps } from './annotated-mutation';
+import { type MutationAnnotations } from '../../web-components/mutation-annotations-context';
+import { MutationAnnotationsContextProvider } from '../MutationAnnotationsContext';
+
+const meta: Meta<AnnotatedMutationProps & { annotations: MutationAnnotations }> = {
+    title: 'Component/Annotated Mutation',
+    component: AnnotatedMutation,
+    parameters: { fetchMock: {} },
+    argTypes: {
+        annotations: { control: { type: 'object' } },
+        mutation: { control: { type: 'object' } },
+        sequenceType: {
+            options: ['nucleotide', 'amino acid'],
+            control: { type: 'radio' },
+        },
+    },
+};
+
+export default meta;
+
+export const MutationWithoutAnnotationEntry: StoryObj<AnnotatedMutationProps & { annotations: MutationAnnotations }> = {
+    render: (args) => {
+        const { annotations, ...annotatedMutationsArgs } = args;
+
+        return (
+            <MutationAnnotationsContextProvider value={annotations}>
+                <AnnotatedMutation {...annotatedMutationsArgs} />
+            </MutationAnnotationsContextProvider>
+        );
+    },
+    args: {
+        mutation: {
+            type: 'substitution',
+            code: 'A23403G',
+            position: 23403,
+            valueAtReference: 'A',
+            substitutionValue: 'G',
+        },
+        sequenceType: 'nucleotide',
+        annotations: [
+            {
+                name: 'Test annotation',
+                description: 'This is a test annotation',
+                symbol: '*',
+                nucleotideMutations: ['123T'],
+                aminoAcidMutations: [],
+            },
+        ],
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await waitFor(() => expect(canvas.getByText('A23403G')).toBeVisible());
+        await expect(getAnnotationIndicator(canvas)).not.toBeInTheDocument();
+        await expect(getAnnotationName(canvas)).not.toBeInTheDocument();
+    },
+};
+
+export const MutationWithAnnotationEntry: StoryObj<AnnotatedMutationProps & { annotations: MutationAnnotations }> = {
+    ...MutationWithoutAnnotationEntry,
+    args: {
+        ...MutationWithoutAnnotationEntry.args,
+        annotations: [
+            {
+                name: 'Test annotation',
+                description: 'This is a test annotation <a class="link" href="/">with a link.</a>',
+                symbol: '*',
+                nucleotideMutations: ['A23403G'],
+                aminoAcidMutations: [],
+            },
+        ],
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await waitFor(() => expect(canvas.getByText('A23403G')).toBeVisible());
+        await expect(getAnnotationIndicator(canvas)).toBeVisible();
+
+        await userEvent.click(canvas.getByText('A23403G'));
+        await waitFor(() => expect(getAnnotationName(canvas)).toBeVisible());
+        await expect(canvas.getByRole('link', { name: 'with a link.' })).toBeVisible();
+    },
+};
+
+export const MutationWithMultipleAnnotationEntries: StoryObj<
+    AnnotatedMutationProps & { annotations: MutationAnnotations }
+> = {
+    ...MutationWithoutAnnotationEntry,
+    args: {
+        ...MutationWithoutAnnotationEntry.args,
+        annotations: [
+            {
+                name: 'Test annotation',
+                description: 'This is a test annotation',
+                symbol: '*',
+                nucleotideMutations: ['A23403G'],
+                aminoAcidMutations: [],
+            },
+            {
+                name: 'Another test annotation',
+                description: 'This is a test annotation',
+                symbol: '+',
+                nucleotideMutations: ['A23403G'],
+                aminoAcidMutations: [],
+            },
+        ],
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await waitFor(() => expect(canvas.getByText('A23403G')).toBeVisible());
+        await expect(getAnnotationIndicator(canvas)).toBeVisible();
+        await expect(canvas.queryByText('+')).toBeVisible();
+
+        await userEvent.click(canvas.getByText('A23403G'));
+        await waitFor(() => expect(getAnnotationName(canvas)).toBeVisible());
+        await expect(canvas.queryByText('Another test annotation')).toBeVisible();
+    },
+};
+
+export const AminoAcidMutationWithAnnotationEntry: StoryObj<
+    AnnotatedMutationProps & { annotations: MutationAnnotations }
+> = {
+    ...MutationWithoutAnnotationEntry,
+    args: {
+        mutation: {
+            type: 'substitution',
+            code: 'S:A501G',
+            position: 501,
+            valueAtReference: 'A',
+            substitutionValue: 'G',
+        },
+        sequenceType: 'amino acid',
+        annotations: [
+            {
+                name: 'Test annotation',
+                description: 'This is a test annotation',
+                symbol: '*',
+                nucleotideMutations: [],
+                aminoAcidMutations: ['S:A501G'],
+            },
+        ],
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await waitFor(() => expect(canvas.getByText('S:A501G')).toBeVisible());
+        await expect(getAnnotationIndicator(canvas)).toBeVisible();
+
+        await userEvent.click(canvas.getByText('S:A501G'));
+        await waitFor(() => expect(getAnnotationName(canvas)).toBeVisible());
+    },
+};
+
+function getAnnotationIndicator(canvas: ReturnType<typeof within>) {
+    return canvas.queryByText('*');
+}
+
+function getAnnotationName(canvas: ReturnType<typeof within>) {
+    return canvas.queryByText('Test annotation');
+}