@genspectrum/dashboard-components 1.7.0 → 1.8.0

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>;
         }
     }
 }
@@ -1101,11 +1101,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-filter': DateRangeFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        [gsEventNames.dateRangeFilterChanged]: CustomEvent<Record<string, string>>;
-        [gsEventNames.dateRangeOptionChanged]: DateRangeOptionChangedEvent;
+        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
     }
 }
 
@@ -1113,7 +1109,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>;
         }
     }
 }
@@ -1121,10 +1117,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
+        'gs-date-range-filter': DateRangeFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.locationChanged]: LocationChangedEvent;
+        [gsEventNames.dateRangeFilterChanged]: CustomEvent<Record<string, string>>;
+        [gsEventNames.dateRangeOptionChanged]: DateRangeOptionChangedEvent;
     }
 }
 
@@ -1132,7 +1129,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1159,10 +1156,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
+        'gs-location-filter': LocationFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.mutationFilterChanged]: CustomEvent<MutationsFilter>;
+        [gsEventNames.locationChanged]: LocationChangedEvent;
     }
 }
 
@@ -1170,7 +1167,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1178,10 +1175,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
+        'gs-mutation-filter': MutationFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.lineageFilterChanged]: LineageFilterChangedEvent;
+        [gsEventNames.mutationFilterChanged]: CustomEvent<MutationsFilter>;
     }
 }
 
@@ -1189,7 +1186,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1197,11 +1194,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-range-filter': NumberRangeFilterComponent;
+        'gs-lineage-filter': LineageFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.numberRangeFilterChanged]: NumberRangeFilterChangedEvent;
-        [gsEventNames.numberRangeValueChanged]: NumberRangeValueChangedEvent;
+        [gsEventNames.lineageFilterChanged]: LineageFilterChangedEvent;
     }
 }
 
@@ -1209,7 +1205,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1217,7 +1213,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
+        'gs-number-range-filter': NumberRangeFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.numberRangeFilterChanged]: NumberRangeFilterChangedEvent;
+        [gsEventNames.numberRangeValueChanged]: NumberRangeValueChangedEvent;
     }
 }
 
@@ -1225,7 +1225,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "1.7.0",
+    "version": "1.8.0",
     "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/web-components/gs-app.spec-d.ts

@@ -2,9 +2,16 @@ import { describe, expectTypeOf, test } from 'vitest';
 
 import { AppComponent } from './gs-app';
 import { type MutationAnnotations } from './mutation-annotations-context';
+import { type MutationLinkTemplate } from './mutation-link-template-context';
 
 describe('gs-app types', () => {
     test('mutationAnnotations type should match', () => {
         expectTypeOf(AppComponent.prototype).toHaveProperty('mutationAnnotations').toEqualTypeOf<MutationAnnotations>();
     });
+
+    test('mutationLinkTemplate type should match', () => {
+        expectTypeOf(AppComponent.prototype)
+            .toHaveProperty('mutationLinkTemplate')
+            .toEqualTypeOf<MutationLinkTemplate>();
+    });
 });

package/src/web-components/gs-app.stories.ts

@@ -11,6 +11,7 @@ import { referenceGenomeContext } from './reference-genome-context';
 import { withComponentDocs } from '../../.storybook/ComponentDocsBlock';
 import { LAPIS_URL, REFERENCE_GENOME_ENDPOINT } from '../constants';
 import { type MutationAnnotations, mutationAnnotationsContext } from './mutation-annotations-context';
+import { type MutationLinkTemplate, mutationLinkTemplateContext } from './mutation-link-template-context';
 import type { ReferenceGenome } from '../lapisApi/ReferenceGenome';
 import referenceGenome from '../lapisApi/__mockData__/referenceGenome.json';
 
@@ -35,11 +36,19 @@ const meta: Meta = {
 
 export default meta;
 
-type StoryProps = { lapis: string; mutationAnnotations: MutationAnnotations };
+type StoryProps = {
+    lapis: string;
+    mutationAnnotations: MutationAnnotations;
+    mutationLinkTemplate: MutationLinkTemplate;
+};
 
 const Template: StoryObj<StoryProps> = {
     render: (args) => {
-        return html` <gs-app lapis="${args.lapis}" .mutationAnnotations="${args.mutationAnnotations}">
+        return html` <gs-app
+            lapis="${args.lapis}"
+            .mutationAnnotations="${args.mutationAnnotations}"
+            .mutationLinkTemplate="${args.mutationLinkTemplate}"
+        >
             <gs-app-display></gs-app-display>
         </gs-app>`;
     },
@@ -56,6 +65,10 @@ const Template: StoryObj<StoryProps> = {
                 aminoAcidPositions: ['S:123'],
             },
         ],
+        mutationLinkTemplate: {
+            nucleotideMutation: 'http://foo.com/query?nucMut={{mutation}}',
+            aminoAcidMutation: 'http://foo.com/query?aaMut={{mutation}}',
+        },
     },
 };
 
@@ -128,6 +141,18 @@ export const FailsToFetchReferenceGenome: StoryObj<StoryProps> = {
     },
 };
 
+export const ProvidesMutationLinkTemplateToChildren: StoryObj<StoryProps> = {
+    ...Template,
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await waitFor(async () => {
+            await expect(canvas.getByText('http://foo.com/query?nucMut={{mutation}}', { exact: false })).toBeVisible();
+            await expect(canvas.getByText('http://foo.com/query?aaMut={{mutation}}', { exact: false })).toBeVisible();
+        });
+    },
+};
+
 @customElement('gs-app-display')
 // eslint-disable-next-line @typescript-eslint/no-unused-vars -- it is used in the story above
 class AppDisplay extends LitElement {
@@ -143,6 +168,9 @@ class AppDisplay extends LitElement {
     @consume({ context: mutationAnnotationsContext, subscribe: true })
     mutationAnnotations: MutationAnnotations = [];
 
+    @consume({ context: mutationLinkTemplateContext, subscribe: true })
+    mutationLinkTemplate: MutationLinkTemplate = {};
+
     override render() {
         return html`
             <h1 class="text-xl font-bold">Dummy component</h1>
@@ -156,6 +184,8 @@ class AppDisplay extends LitElement {
             <pre><code>${JSON.stringify(this.referenceGenome, null, 2)}</code></pre>
             <h2 class="text-lg font-bold">Mutation annotations</h2>
             <pre><code>${JSON.stringify(this.mutationAnnotations, null, 2)}</code></pre>
+            <h2 class="text-lg font-bold">Mutation link template</h2>
+            <pre><code>${JSON.stringify(this.mutationLinkTemplate, null, 2)}</code></pre>
         `;
     }