@genspectrum/dashboard-components 1.7.0 → 1.8.1

package/dist/util.d.ts

@@ -989,7 +989,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -997,7 +997,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1005,7 +1005,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -1013,7 +1013,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1067,6 +1067,22 @@ declare global {
 }
 
 
+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;
@@ -1085,7 +1101,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-statistics': StatisticsComponent;
+        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
     }
 }
 
@@ -1093,7 +1109,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1215,22 +1231,6 @@ declare global {
 }
 
 
-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": "1.7.0",
+    "version": "1.8.1",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",

package/src/preact/MutationLinkTemplateContext.tsx

@@ -0,0 +1,56 @@
+import { createContext, type Provider } from 'preact';
+import { useContext, useMemo } from 'preact/hooks';
+
+import type { SequenceType } from '../types';
+import type { Deletion, Substitution } from '../utils/mutations';
+import { mutationLinkTemplateSchema } from '../web-components/mutation-link-template-context';
+import { ErrorDisplay } from './components/error-display';
+import { ResizeContainer } from './components/resize-container';
+
+type MutationLinkTemplate = {
+    nucleotideMutation?: string;
+    aminoAcidMutation?: string;
+};
+
+const MutationLinkTemplateContext = createContext<MutationLinkTemplate>({
+    nucleotideMutation: undefined,
+    aminoAcidMutation: undefined,
+});
+
+export const MutationLinkTemplateContextProvider: Provider<MutationLinkTemplate> = ({ value, children }) => {
+    const parseResult = useMemo(() => mutationLinkTemplateSchema.safeParse(value), [value]);
+
+    if (!parseResult.success) {
+        return (
+            <ResizeContainer size={{ width: '100%' }}>
+                <ErrorDisplay error={parseResult.error} layout='vertical' />
+            </ResizeContainer>
+        );
+    }
+
+    return (
+        <MutationLinkTemplateContext.Provider value={parseResult.data}>{children}</MutationLinkTemplateContext.Provider>
+    );
+};
+
+export function useMutationLinkProvider() {
+    const linkTemplate = useContext(MutationLinkTemplateContext);
+
+    return (mutation: Substitution | Deletion, sequenceType: SequenceType) => {
+        switch (sequenceType) {
+            case 'nucleotide': {
+                if (linkTemplate.nucleotideMutation !== undefined) {
+                    return linkTemplate.nucleotideMutation.replace('{{mutation}}', encodeURIComponent(mutation.code));
+                }
+                return undefined;
+            }
+
+            case 'amino acid': {
+                if (linkTemplate.aminoAcidMutation !== undefined) {
+                    return linkTemplate.aminoAcidMutation.replace('{{mutation}}', encodeURIComponent(mutation.code));
+                }
+                return undefined;
+            }
+        }
+    };
+}

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

@@ -2,15 +2,25 @@ 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 type { MutationAnnotations } from '../../web-components/mutation-annotations-context';
+import type { MutationLinkTemplate } from '../../web-components/mutation-link-template-context';
 import { MutationAnnotationsContextProvider } from '../MutationAnnotationsContext';
+import { MutationLinkTemplateContextProvider } from '../MutationLinkTemplateContext';
 
-const meta: Meta<AnnotatedMutationProps & { annotations: MutationAnnotations }> = {
+type ContextProps = {
+    annotations: MutationAnnotations;
+    linkTemplate: MutationLinkTemplate;
+};
+
+type StoryProps = AnnotatedMutationProps & ContextProps;
+
+const meta: Meta<StoryProps> = {
     title: 'Component/Annotated Mutation',
     component: AnnotatedMutation,
     parameters: { fetchMock: {} },
     argTypes: {
         annotations: { control: { type: 'object' } },
+        linkTemplate: { control: { type: 'object' } },
         mutation: { control: { type: 'object' } },
         sequenceType: {
             options: ['nucleotide', 'amino acid'],
@@ -21,14 +31,16 @@ const meta: Meta<AnnotatedMutationProps & { annotations: MutationAnnotations }>
 
 export default meta;
 
-export const MutationWithoutAnnotationEntry: StoryObj<AnnotatedMutationProps & { annotations: MutationAnnotations }> = {
+export const MutationWithoutAnnotationEntry: StoryObj<StoryProps> = {
     render: (args) => {
-        const { annotations, ...annotatedMutationsArgs } = args;
+        const { annotations, linkTemplate, ...annotatedMutationsArgs } = args;
 
         return (
-            <MutationAnnotationsContextProvider value={annotations}>
-                <AnnotatedMutation {...annotatedMutationsArgs} />
-            </MutationAnnotationsContextProvider>
+            <MutationLinkTemplateContextProvider value={linkTemplate}>
+                <MutationAnnotationsContextProvider value={annotations}>
+                    <AnnotatedMutation {...annotatedMutationsArgs} />
+                </MutationAnnotationsContextProvider>
+            </MutationLinkTemplateContextProvider>
         );
     },
     args: {
@@ -48,6 +60,7 @@ export const MutationWithoutAnnotationEntry: StoryObj<AnnotatedMutationProps & {
                 nucleotideMutations: ['123T'],
             },
         ],
+        linkTemplate: {},
     },
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
@@ -58,7 +71,7 @@ export const MutationWithoutAnnotationEntry: StoryObj<AnnotatedMutationProps & {
     },
 };
 
-export const MutationWithAnnotationEntry: StoryObj<AnnotatedMutationProps & { annotations: MutationAnnotations }> = {
+export const MutationWithAnnotationEntry: StoryObj<StoryProps> = {
     ...MutationWithoutAnnotationEntry,
     args: {
         ...MutationWithoutAnnotationEntry.args,
@@ -77,15 +90,13 @@ export const MutationWithAnnotationEntry: StoryObj<AnnotatedMutationProps & { an
         await waitFor(() => expect(canvas.getByText('A23403G')).toBeVisible());
         await expect(getAnnotationIndicator(canvas)).toBeVisible();
 
-        await userEvent.click(canvas.getByText('A23403G'));
+        await userEvent.click(canvas.getByText('*'));
         await waitFor(() => expect(getAnnotationName(canvas)).toBeVisible());
         await expect(canvas.getByRole('link', { name: 'with a link.' })).toBeVisible();
     },
 };
 
-export const MutationWithMultipleAnnotationEntries: StoryObj<
-    AnnotatedMutationProps & { annotations: MutationAnnotations }
-> = {
+export const MutationWithMultipleAnnotationEntries: StoryObj<StoryProps> = {
     ...MutationWithoutAnnotationEntry,
     args: {
         ...MutationWithoutAnnotationEntry.args,
@@ -111,17 +122,16 @@ export const MutationWithMultipleAnnotationEntries: StoryObj<
         await expect(getAnnotationIndicator(canvas)).toBeVisible();
         await expect(canvas.queryByText('+')).toBeVisible();
 
-        await userEvent.click(canvas.getByText('A23403G'));
+        await userEvent.click(canvas.getByText('*'));
         await waitFor(() => expect(getAnnotationName(canvas)).toBeVisible());
         await expect(canvas.queryByText('Another test annotation')).toBeVisible();
     },
 };
 
-export const AminoAcidMutationWithAnnotationEntry: StoryObj<
-    AnnotatedMutationProps & { annotations: MutationAnnotations }
-> = {
+export const AminoAcidMutationWithAnnotationEntry: StoryObj<StoryProps> = {
     ...MutationWithoutAnnotationEntry,
     args: {
+        ...MutationWithoutAnnotationEntry.args,
         mutation: {
             type: 'substitution',
             code: 'S:A501G',
@@ -145,7 +155,7 @@ export const AminoAcidMutationWithAnnotationEntry: StoryObj<
         await waitFor(() => expect(canvas.getByText('S:A501G')).toBeVisible());
         await expect(getAnnotationIndicator(canvas)).toBeVisible();
 
-        await userEvent.click(canvas.getByText('S:A501G'));
+        await userEvent.click(canvas.getByText('*'));
         await waitFor(() => expect(getAnnotationName(canvas)).toBeVisible());
     },
 };
@@ -157,3 +167,45 @@ function getAnnotationIndicator(canvas: ReturnType<typeof within>) {
 function getAnnotationName(canvas: ReturnType<typeof within>) {
     return canvas.queryByText('Test annotation');
 }
+
+export const NucleotideMutationWithLink: StoryObj<StoryProps> = {
+    ...MutationWithoutAnnotationEntry,
+    args: {
+        ...MutationWithoutAnnotationEntry.args,
+        linkTemplate: {
+            nucleotideMutation: 'http://foo.com/query?nucMut={{mutation}}',
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await waitFor(() => expect(canvas.getByText('A23403G')).toBeVisible());
+        const link = canvas.getByText('A23403G').closest('a');
+        void expect(link).toHaveAttribute('href', 'http://foo.com/query?nucMut=A23403G');
+    },
+};
+
+export const AminoAcidMutationWithLink: StoryObj<StoryProps> = {
+    ...MutationWithoutAnnotationEntry,
+    args: {
+        ...MutationWithoutAnnotationEntry.args,
+        mutation: {
+            type: 'substitution',
+            code: 'S:A501G',
+            position: 501,
+            valueAtReference: 'A',
+            substitutionValue: 'G',
+        },
+        sequenceType: 'amino acid',
+        linkTemplate: {
+            aminoAcidMutation: 'http://foo.com/query?aaMut={{mutation}}',
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await waitFor(() => expect(canvas.getByText('S:A501G')).toBeVisible());
+        const link = canvas.getByText('S:A501G').closest('a');
+        void expect(link).toHaveAttribute('href', 'http://foo.com/query?aaMut=S%3AA501G');
+    },
+};

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

@@ -7,6 +7,7 @@ import type { Deletion, Substitution } from '../../utils/mutations';
 import { useMutationAnnotationsProvider } from '../MutationAnnotationsContext';
 import { InfoHeadline1, InfoHeadline2, InfoParagraph } from './info';
 import { ButtonWithModalDialog, useModalRef } from './modal';
+import { useMutationLinkProvider } from '../MutationLinkTemplateContext';
 
 export type AnnotatedMutationProps = {
     mutation: Substitution | Deletion;
@@ -15,13 +16,22 @@ export type AnnotatedMutationProps = {
 
 export const AnnotatedMutation: FunctionComponent<AnnotatedMutationProps> = (props) => {
     const annotationsProvider = useMutationAnnotationsProvider();
+    const linkProvider = useMutationLinkProvider();
     const modalRef = useModalRef();
 
-    return <AnnotatedMutationWithoutContext {...props} annotationsProvider={annotationsProvider} modalRef={modalRef} />;
+    return (
+        <AnnotatedMutationWithoutContext
+            {...props}
+            annotationsProvider={annotationsProvider}
+            linkProvider={linkProvider}
+            modalRef={modalRef}
+        />
+    );
 };
 
 type GridJsAnnotatedMutationProps = AnnotatedMutationProps & {
     annotationsProvider: ReturnType<typeof useMutationAnnotationsProvider>;
+    linkProvider: ReturnType<typeof useMutationLinkProvider>;
 };
 
 /**
@@ -43,12 +53,26 @@ const AnnotatedMutationWithoutContext: FunctionComponent<AnnotatedMutationWithou
     mutation,
     sequenceType,
     annotationsProvider,
+    linkProvider,
     modalRef,
 }) => {
+    const link = linkProvider(mutation, sequenceType);
+    let innerLabel = <>{mutation.code}</>;
+    if (link !== undefined) {
+        innerLabel = (
+            <a
+                className='hover:text-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-300 underline'
+                href={link}
+            >
+                {mutation.code}
+            </a>
+        );
+    }
+
     const mutationAnnotations = annotationsProvider(mutation, sequenceType);
 
     if (mutationAnnotations === undefined || mutationAnnotations.length === 0) {
-        return mutation.code;
+        return innerLabel;
     }
 
     const modalContent = (
@@ -66,22 +90,24 @@ const AnnotatedMutationWithoutContext: FunctionComponent<AnnotatedMutationWithou
     );
 
     return (
-        <ButtonWithModalDialog
-            buttonClassName={'select-text cursor-pointer'}
-            modalContent={modalContent}
-            modalRef={modalRef}
-        >
-            {mutation.code}
-            <sup>
-                {mutationAnnotations
-                    .map((annotation) => annotation.symbol)
-                    .map((symbol, index) => (
-                        <Fragment key={symbol}>
-                            <span className='text-red-600'>{symbol}</span>
-                            {index !== mutationAnnotations.length - 1 && ','}
-                        </Fragment>
-                    ))}
-            </sup>
-        </ButtonWithModalDialog>
+        <>
+            {innerLabel}
+            <ButtonWithModalDialog
+                buttonClassName={'select-text cursor-pointer'}
+                modalContent={modalContent}
+                modalRef={modalRef}
+            >
+                <sup className='hover:underline focus-visible:underline decoration-red-600'>
+                    {mutationAnnotations
+                        .map((annotation) => annotation.symbol)
+                        .map((symbol, index) => (
+                            <Fragment key={symbol}>
+                                <span className='text-red-600'>{symbol}</span>
+                                {index !== mutationAnnotations.length - 1 && ','}
+                            </Fragment>
+                        ))}
+                </sup>
+            </ButtonWithModalDialog>
+        </>
     );
 };

package/src/preact/mutationComparison/mutation-comparison-table.tsx

@@ -6,6 +6,7 @@ import { type Dataset } from '../../operator/Dataset';
 import type { SequenceType } from '../../types';
 import { type DeletionClass, type SubstitutionClass } from '../../utils/mutations';
 import { useMutationAnnotationsProvider } from '../MutationAnnotationsContext';
+import { useMutationLinkProvider } from '../MutationLinkTemplateContext';
 import { GridJsAnnotatedMutation } from '../components/annotated-mutation';
 import { type ProportionInterval } from '../components/proportion-selector';
 import { Table } from '../components/table';
@@ -26,6 +27,7 @@ export const MutationComparisonTable: FunctionComponent<MutationsTableProps> = (
     sequenceType,
 }) => {
     const annotationsProvider = useMutationAnnotationsProvider();
+    const linkProvider = useMutationLinkProvider();
 
     const headers = [
         {
@@ -38,6 +40,7 @@ export const MutationComparisonTable: FunctionComponent<MutationsTableProps> = (
                     mutation={cell}
                     sequenceType={sequenceType}
                     annotationsProvider={annotationsProvider}
+                    linkProvider={linkProvider}
                 />
             ),
         },

package/src/preact/mutations/mutations-table.tsx

@@ -5,6 +5,7 @@ import { getMutationsTableData } from './getMutationsTableData';
 import { type SequenceType, type SubstitutionOrDeletionEntry } from '../../types';
 import { type DeletionClass, type SubstitutionClass } from '../../utils/mutations';
 import { useMutationAnnotationsProvider } from '../MutationAnnotationsContext';
+import { useMutationLinkProvider } from '../MutationLinkTemplateContext';
 import { GridJsAnnotatedMutation } from '../components/annotated-mutation';
 import type { ProportionInterval } from '../components/proportion-selector';
 import { Table } from '../components/table';
@@ -29,6 +30,7 @@ const MutationsTable: FunctionComponent<MutationsTableProps> = ({
     sequenceType,
 }) => {
     const annotationsProvider = useMutationAnnotationsProvider();
+    const linkProvider = useMutationLinkProvider();
 
     const headers = [
         {
@@ -43,6 +45,7 @@ const MutationsTable: FunctionComponent<MutationsTableProps> = ({
                     mutation={cell}
                     sequenceType={sequenceType}
                     annotationsProvider={annotationsProvider}
+                    linkProvider={linkProvider}
                 />
             ),
         },

package/src/preact/shared/stories/expectMutationAnnotation.ts

@@ -6,7 +6,9 @@ export async function expectMutationAnnotation(canvasElement: HTMLElement, mutat
     await waitFor(async () => {
         const annotatedMutation = canvas.getAllByText(mutation)[0];
         await expect(annotatedMutation).toBeVisible();
-        await userEvent.click(annotatedMutation);
+        const button = within(annotatedMutation).getByRole('button');
+        await expect(button).toBeVisible();
+        await userEvent.click(button);
     });
 
     await waitFor(() => expect(canvas.getByText(`Annotations for ${mutation}`)).toBeVisible());

package/src/preact/wastewater/mutationsOverTime/__mockData__/detailsAminAcidNonSegmented.json

@@ -0,0 +1,88 @@
+{
+    "data": [
+        {
+            "aminoAcidMutationFrequency": null,
+            "date": "2024-11-13",
+            "location": "Lugano",
+            "nucleotideMutationFrequency": "{\"A12183T\": null, \"C2554T\": null, \"C3422A\": 0.9598659873008728, \"A966C\": null, \"G6661A\": 0.5527499914169312, \"G7731A\": 0.9832900166511536, \"T4026G\": 0.9991809725761414, \"T5260C\": null, \"T5287C\": null}",
+            "reference": "RSV-B"
+        },
+        {
+            "aminoAcidMutationFrequency": null,
+            "date": "2024-11-17",
+            "location": "Genève",
+            "nucleotideMutationFrequency": "{\"A12183T\": 1.0, \"C2554T\": null, \"C3422A\": 0.0, \"A966C\": null, \"G6661A\": 0.8785049915313721, \"G7731A\": 0.9855599999427795, \"T4026G\": null, \"T5260C\": 1.0, \"T5287C\": 0.9932659864425659}",
+            "reference": "RSV-B"
+        },
+        {
+            "aminoAcidMutationFrequency": "{\"S4286C\": null, \"R346T\": 0.25, \"Q493E\": 0.60, \"G204P\": null}",
+            "date": "2024-11-17",
+            "location": "Lugano",
+            "nucleotideMutationFrequency": "{\"A12183T\": 0.998993992805481, \"C2554T\": null, \"C3422A\": null, \"A966C\": null, \"G6661A\": 0.8917459845542908, \"G7731A\": 0.9770470261573792, \"T4026G\": 0.0, \"T5260C\": null, \"T5287C\": null}",
+            "reference": "RSV-B"
+        },
+        {
+            "aminoAcidMutationFrequency": "{\"S4286C\": 0.42, \"R346T\": 0.22, \"Q493E\": 0.66, \"G204P\": null}",
+            "date": "2024-11-16",
+            "location": "Lugano",
+            "nucleotideMutationFrequency": "{\"A12183T\": null, \"C2554T\": null, \"C3422A\": null, \"A966C\": null, \"G6661A\": 0.9476320147514343, \"G7731A\": 0.9809200167655945, \"T4026G\": 0.9992259740829468, \"T5260C\": null, \"T5287C\": null}",
+            "reference": "RSV-B"
+        },
+        {
+            "aminoAcidMutationFrequency": null,
+            "date": "2024-11-18",
+            "location": "Genève",
+            "nucleotideMutationFrequency": "{\"A12183T\": null, \"C2554T\": 0.9978219866752625, \"C3422A\": null, \"A966C\": 1.0, \"G6661A\": null, \"G7731A\": null, \"T4026G\": null, \"T5260C\": null, \"T5287C\": null}",
+            "reference": "RSV-B"
+        },
+        {
+            "aminoAcidMutationFrequency": null,
+            "date": "2024-11-14",
+            "location": "Genève",
+            "nucleotideMutationFrequency": "{\"A12183T\": null, \"C2554T\": 0.9994590282440186, \"C3422A\": 0.05333299934864044, \"A966C\": 1.0, \"G6661A\": 0.9282640218734741, \"G7731A\": 0.9803630113601685, \"T4026G\": 0.0, \"T5260C\": 0.9970409870147705, \"T5287C\": 0.996694028377533}",
+            "reference": "RSV-B"
+        },
+        {
+            "aminoAcidMutationFrequency": null,
+            "date": "2024-11-13",
+            "location": "Laupen",
+            "nucleotideMutationFrequency": "{\"A12668G\": null, \"A3564G\": null, \"C10862T\": null, \"C12710T\": null, \"C3624T\": null, \"G11123A\": null, \"G3616A\": null, \"G7379A\": 0.9470750093460083, \"T11034A\": null, \"T3483C\": null}",
+            "reference": "RSV-A"
+        },
+        {
+            "aminoAcidMutationFrequency": null,
+            "date": "2024-11-13",
+            "location": "Zürich",
+            "nucleotideMutationFrequency": "{\"A12668G\": 0.9988809823989868, \"A3564G\": null, \"C10862T\": 1.0, \"C12710T\": 0.9991809725761414, \"C3624T\": null, \"G11123A\": 1.0, \"G3616A\": null, \"G7379A\": 0.9414680004119873, \"T11034A\": 0.9988250136375427, \"T3483C\": null}",
+            "reference": "RSV-A"
+        },
+        {
+            "aminoAcidMutationFrequency": null,
+            "date": "2024-11-16",
+            "location": "Zürich",
+            "nucleotideMutationFrequency": "{\"A12668G\": 0.999222993850708, \"A3564G\": 0.9998199939727783, \"C10862T\": 1.0, \"C12710T\": 0.9996299743652344, \"C3624T\": 0.9999099969863892, \"G11123A\": 1.0, \"G3616A\": 0.08799900114536285, \"G7379A\": null, \"T11034A\": 0.9970099925994873, \"T3483C\": 0.9993579983711243}",
+            "reference": "RSV-A"
+        },
+        {
+            "aminoAcidMutationFrequency": null,
+            "date": "2024-11-16",
+            "location": "Chur",
+            "nucleotideMutationFrequency": "{\"A12668G\": null, \"A3564G\": null, \"C10862T\": null, \"C12710T\": null, \"C3624T\": null, \"G11123A\": null, \"G3616A\": null, \"G7379A\": 0.6464089751243591, \"T11034A\": null, \"T3483C\": null}",
+            "reference": "RSV-A"
+        },
+        {
+            "aminoAcidMutationFrequency": null,
+            "date": "2024-11-18",
+            "location": "Basel",
+            "nucleotideMutationFrequency": "{\"A12668G\": null, \"A3564G\": 1.0, \"C10862T\": null, \"C12710T\": null, \"C3624T\": 1.0, \"G11123A\": null, \"G3616A\": 0.08222199976444244, \"G7379A\": null, \"T11034A\": null, \"T3483C\": 0.9998080134391785}",
+            "reference": "RSV-A"
+        }
+    ],
+    "info": {
+        "dataVersion": "1737327031",
+        "requestId": "5591b455-3d84-438c-8434-2e57ee2ad569",
+        "requestInfo": "RSV on api.wise-loculus.genspectrum.org at 2025-01-20T11:58:03.498206810",
+        "reportTo": "Please report to https://github.com/GenSpectrum/LAPIS/issues in case you encounter any unexpected issues. Please include the request ID and the requestInfo in your report.",
+        "lapisVersion": "0.3.10"
+    }
+}

package/src/preact/wastewater/mutationsOverTime/wastewater-mutations-over-time.stories.tsx

@@ -8,6 +8,7 @@ import referenceGenome from '../../../lapisApi/__mockData__/referenceGenome.json
 import { LapisUrlContextProvider } from '../../LapisUrlContext';
 import { ReferenceGenomeContext } from '../../ReferenceGenomeContext';
 import details from './__mockData__/details.json';
+import detailsNonSegmented from './__mockData__/detailsAminAcidNonSegmented.json';
 import type { MutationsOverTimeProps } from '../../mutationsOverTime/mutations-over-time';
 import { playThatExpectsFinishedLoadingEvent } from '../../shared/stories/expectFinishedLoadingEvent';
 
@@ -113,6 +114,39 @@ export const AminoAcids: StoryObj<WastewaterMutationsOverTimeProps> = {
     },
 };
 
+export const AminoAcidsNonSegmented: StoryObj<WastewaterMutationsOverTimeProps> = {
+    ...Default,
+    args: {
+        ...Default.args,
+        sequenceType: 'amino acid',
+    },
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'details',
+                        url: WISE_DETAILS_ENDPOINT,
+                        body: {
+                            fields: ['date', 'location', 'nucleotideMutationFrequency', 'aminoAcidMutationFrequency'],
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: detailsNonSegmented,
+                    },
+                },
+            ],
+        },
+    },
+    play: async ({ canvas }) => {
+        await expectMutationOnPage(canvas, 'G204P');
+        await expectMutationOnPage(canvas, 'R346T');
+        await expectMutationOnPage(canvas, 'Q493E');
+        await expectMutationOnPage(canvas, 'S4286C');
+    },
+};
+
 export const UsesMutationFilter: StoryObj<MutationsOverTimeProps> = {
     ...Default,
     play: async ({ canvas, step }) => {

package/src/query/queryWastewaterMutationsOverTime.ts

@@ -57,7 +57,7 @@ function transformMutations(input: unknown): { mutation: Substitution; proportio
     }
 
     return Object.entries(mutationFrequency.data).map(([key, value]) => {
-        const mutation = SubstitutionClass.parse(key);
+        const mutation = SubstitutionClass.parse(key, true);
         if (mutation === null) {
             throw new Error(`Failed to parse mutation: "${key}"`);
         }