@genspectrum/dashboard-components 0.16.2 → 0.16.4

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

@@ -5,8 +5,10 @@ import { MutationsOverTime, type MutationsOverTimeProps } from './mutations-over
 import { LAPIS_URL } from '../../constants';
 import referenceGenome from '../../lapisApi/__mockData__/referenceGenome.json';
 import { LapisUrlContextProvider } from '../LapisUrlContext';
+import { MutationAnnotationsContextProvider } from '../MutationAnnotationsContext';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
 import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectErrorMessage';
+import { expectMutationAnnotation } from '../shared/stories/expectMutationAnnotation';
 
 const meta: Meta<MutationsOverTimeProps> = {
     title: 'Visualization/Mutation over time',
@@ -38,13 +40,32 @@ const meta: Meta<MutationsOverTimeProps> = {
 
 export default meta;
 
+const mutationAnnotations = [
+    {
+        name: 'I am a mutation annotation!',
+        description: 'This describes what is special about these mutations.',
+        symbol: '#',
+        nucleotideMutations: ['C44T', 'C774T', 'G24872T', 'T23011-'],
+        aminoAcidMutations: ['S:501Y', 'S:S31-', 'ORF1a:S4286C'],
+    },
+    {
+        name: 'I am another mutation annotation!',
+        description: 'This describes what is special about these other mutations.',
+        symbol: '+',
+        nucleotideMutations: ['C44T', 'A13121T'],
+        aminoAcidMutations: ['S:501Y', 'S:S31-', 'ORF1a:S4286C'],
+    },
+];
+
 export const Default: StoryObj<MutationsOverTimeProps> = {
     render: (args: MutationsOverTimeProps) => (
-        <LapisUrlContextProvider value={LAPIS_URL}>
-            <ReferenceGenomeContext.Provider value={referenceGenome}>
-                <MutationsOverTime {...args} />
-            </ReferenceGenomeContext.Provider>
-        </LapisUrlContextProvider>
+        <MutationAnnotationsContextProvider value={mutationAnnotations}>
+            <LapisUrlContextProvider value={LAPIS_URL}>
+                <ReferenceGenomeContext.Provider value={referenceGenome}>
+                    <MutationsOverTime {...args} />
+                </ReferenceGenomeContext.Provider>
+            </LapisUrlContextProvider>
+        </MutationAnnotationsContextProvider>
     ),
     args: {
         lapisFilter: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-07-10' },
@@ -55,6 +76,9 @@ export const Default: StoryObj<MutationsOverTimeProps> = {
         lapisDateField: 'date',
         initialMeanProportionInterval: { min: 0.05, max: 0.9 },
     },
+    play: async ({ canvasElement }) => {
+        await expectMutationAnnotation(canvasElement, 'C44T');
+    },
 };
 
 // This test uses mock data: showMessagWhenTooManyMutations.ts (through mutationOverTimeWorker.mock.ts)

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

@@ -161,7 +161,13 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
             case 'grid':
                 return {
                     title: 'Grid',
-                    content: <MutationsOverTimeGrid data={filteredData} colorScale={colorScale} />,
+                    content: (
+                        <MutationsOverTimeGrid
+                            data={filteredData}
+                            colorScale={colorScale}
+                            sequenceType={originalComponentProps.sequenceType}
+                        />
+                    ),
                 };
         }
     };
@@ -257,6 +263,12 @@ const MutationsOverTimeInfo: FunctionComponent<MutationsOverTimeInfoProps> = ({
                 organism has multiple segments/genes), and applying a filter based on the proportion of the mutation's
                 occurrence over the entire time range.
             </InfoParagraph>
+            <InfoParagraph>
+                The grid cells have a tooltip that will show more detailed information. It shows the count of samples
+                that have the mutation and the count of samples with coverage (i.e. a non-ambiguous read) in this
+                timeframe. Ambiguous reads are excluded when calculating the proportion. It also shows the total count
+                of samples in this timeframe.
+            </InfoParagraph>
             <InfoComponentCode componentName='mutations-over-time' params={originalComponentProps} lapisUrl={lapis} />
         </Info>
     );

package/src/preact/sequencesByLocation/sequences-by-location-map.tsx

@@ -5,7 +5,7 @@ import { useEffect, useRef } from 'preact/hooks';
 
 import type { EnhancedGeoJsonFeatureProperties } from '../../query/computeMapLocationData';
 import { InfoHeadline1, InfoParagraph } from '../components/info';
-import { Modal, useModalRef } from '../components/modal';
+import { Modal } from '../components/modal';
 import { AspectRatio } from '../shared/aspectRatio/AspectRatio';
 import { formatProportion } from '../shared/table/formatProportion';
 
@@ -102,39 +102,37 @@ const DataMatchInformation: FunctionComponent<DataMatchInformationProps> = ({
     nullCount,
     hasTableView,
 }) => {
-    const modalRef = useModalRef();
-
     const proportion = formatProportion(countOfMatchedLocationData / totalCount);
 
     return (
-        <>
-            <button
-                onClick={() => modalRef.current?.showModal()}
-                className='text-sm absolute bottom-0 px-1 z-[1001] bg-white rounded border cursor-pointer tooltip'
-                data-tip='Click for detailed information'
-            >
+        <Modal
+            buttonClassName='text-sm absolute bottom-0 px-1 z-[1001] bg-white rounded border'
+            modalContent={
+                <>
+                    <InfoHeadline1>Sequences By Location - Map View</InfoHeadline1>
+                    <InfoParagraph>
+                        The current filter has matched {totalCount.toLocaleString('en-us')} sequences. From these
+                        sequences, we were able to match {countOfMatchedLocationData.toLocaleString('en-us')} (
+                        {proportion}) on locations on the map.
+                    </InfoParagraph>
+                    <InfoParagraph>
+                        {unmatchedLocations.length > 0 && (
+                            <>
+                                The following locations from the data could not be matched on the map:{' '}
+                                {unmatchedLocations.map((it) => `"${it}"`).join(', ')}.{' '}
+                            </>
+                        )}
+                        {nullCount > 0 &&
+                            `${nullCount.toLocaleString('en-us')} matching sequences have no location information. `}
+                        {hasTableView && 'You can check the table view for more detailed information.'}
+                    </InfoParagraph>
+                </>
+            }
+        >
+            <p className='tooltip' data-tip='Click for detailed information'>
                 This map shows {proportion} of the data.
-            </button>
-            <Modal modalRef={modalRef}>
-                <InfoHeadline1>Sequences By Location - Map View</InfoHeadline1>
-                <InfoParagraph>
-                    The current filter has matched {totalCount.toLocaleString('en-us')} sequences. From these sequences,
-                    we were able to match {countOfMatchedLocationData.toLocaleString('en-us')} ({proportion}) on
-                    locations on the map.
-                </InfoParagraph>
-                <InfoParagraph>
-                    {unmatchedLocations.length > 0 && (
-                        <>
-                            The following locations from the data could not be matched on the map:{' '}
-                            {unmatchedLocations.map((it) => `"${it}"`).join(', ')}.{' '}
-                        </>
-                    )}
-                    {nullCount > 0 &&
-                        `${nullCount.toLocaleString('en-us')} matching sequences have no location information. `}
-                    {hasTableView && 'You can check the table view for more detailed information.'}
-                </InfoParagraph>
-            </Modal>
-        </>
+            </p>
+        </Modal>
     );
 };
 

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

@@ -0,0 +1,13 @@
+import { expect, userEvent, waitFor, within } from '@storybook/test';
+
+export async function expectMutationAnnotation(canvasElement: HTMLElement, mutation: string) {
+    const canvas = within(canvasElement);
+
+    await waitFor(async () => {
+        const annotatedMutation = canvas.getAllByText(mutation)[0];
+        await expect(annotatedMutation).toBeVisible();
+        await userEvent.click(annotatedMutation);
+    });
+
+    await waitFor(() => expect(canvas.getByText(`Annotations for ${mutation}`)).toBeVisible());
+}

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

@@ -102,7 +102,12 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
     const tabs = mutationOverTimeDataPerLocation.map(({ location, data }) => ({
         title: location,
         content: (
-            <MutationsOverTimeGrid data={data} colorScale={colorScale} maxNumberOfGridRows={maxNumberOfGridRows} />
+            <MutationsOverTimeGrid
+                data={data}
+                colorScale={colorScale}
+                maxNumberOfGridRows={maxNumberOfGridRows}
+                sequenceType={originalComponentProps.sequenceType}
+            />
         ),
     }));
 

package/src/utilEntrypoint.ts

@@ -36,3 +36,5 @@ export type { AxisMax, YAxisMaxConfig } from './preact/shared/charts/getYAxisMax
 export { LocationChangedEvent } from './preact/locationFilter/LocationChangedEvent';
 export { LineageFilterChangedEvent } from './preact/lineageFilter/LineageFilterChangedEvent';
 export { TextFilterChangedEvent } from './preact/textFilter/TextFilterChangedEvent';
+
+export type { MutationAnnotations, MutationAnnotation } from './web-components/mutation-annotations-context';

package/src/web-components/gs-app.spec-d.ts

@@ -0,0 +1,10 @@
+import { describe, expectTypeOf, test } from 'vitest';
+
+import { AppComponent } from './gs-app';
+import { type MutationAnnotations } from './mutation-annotations-context';
+
+describe('gs-app types', () => {
+    test('mutationAnnotations type should match', ({}) => {
+        expectTypeOf(AppComponent.prototype).toHaveProperty('mutationAnnotations').toEqualTypeOf<MutationAnnotations>();
+    });
+});

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

@@ -10,6 +10,7 @@ import { lapisContext } from './lapis-context';
 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 { ReferenceGenome } from '../lapisApi/ReferenceGenome';
 import referenceGenome from '../lapisApi/__mockData__/referenceGenome.json';
 
@@ -34,18 +35,29 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: StoryObj<{ lapis: string }> = {
+type StoryProps = { lapis: string; mutationAnnotations: MutationAnnotations };
+
+const Template: StoryObj<StoryProps> = {
     render: (args) => {
-        return html` <gs-app lapis="${args.lapis}">
+        return html` <gs-app lapis="${args.lapis}" .mutationAnnotations="${args.mutationAnnotations}">
             <gs-app-display></gs-app-display>
         </gs-app>`;
     },
     args: {
         lapis: LAPIS_URL,
+        mutationAnnotations: [
+            {
+                name: 'I am an annotation!',
+                description: 'This describes what is special about these mutations.',
+                symbol: '*',
+                nucleotideMutations: ['C44T', 'C774T', 'G24872T', 'T23011-'],
+                aminoAcidMutations: ['S:501Y', 'S:S31-', 'ORF1a:S4286C'],
+            },
+        ],
     },
 };
 
-export const Default: StoryObj<{ lapis: string }> = {
+export const Default: StoryObj<StoryProps> = {
     ...Template,
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
@@ -53,11 +65,12 @@ export const Default: StoryObj<{ lapis: string }> = {
         await waitFor(async () => {
             await expect(canvas.getByText(LAPIS_URL)).toBeVisible();
             await expect(canvas.getByText('"name": "ORF1a",', { exact: false })).toBeVisible();
+            await expect(canvas.getByText('I am an annotation!', { exact: false })).toBeVisible();
         });
     },
 };
 
-export const WithNoLapisUrl: StoryObj<{ lapis: string }> = {
+export const WithNoLapisUrl: StoryObj<StoryProps> = {
     ...Default,
     args: {
         ...Default.args,
@@ -72,7 +85,7 @@ export const WithNoLapisUrl: StoryObj<{ lapis: string }> = {
     },
 };
 
-export const DelayFetchingReferenceGenome: StoryObj<{ lapis: string }> = {
+export const DelayFetchingReferenceGenome: StoryObj<StoryProps> = {
     ...Template,
     parameters: {
         fetchMock: {
@@ -95,7 +108,7 @@ export const DelayFetchingReferenceGenome: StoryObj<{ lapis: string }> = {
     },
 };
 
-export const FailsToFetchReferenceGenome: StoryObj<{ lapis: string }> = {
+export const FailsToFetchReferenceGenome: StoryObj<StoryProps> = {
     ...Template,
     args: {
         lapis: 'https://url.to.lapis-definitely-not-a-valid-url',
@@ -121,6 +134,9 @@ class AppDisplay extends LitElement {
         genes: [],
     };
 
+    @consume({ context: mutationAnnotationsContext, subscribe: true })
+    mutationAnnotations: MutationAnnotations = [];
+
     override render() {
         return html`
             <h1 class="text-xl font-bold">Dummy component</h1>
@@ -132,6 +148,8 @@ class AppDisplay extends LitElement {
             <p>${this.lapis}</p>
             <h2 class="text-lg font-bold">Reference genomes</h2>
             <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>
         `;
     }
 

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

@@ -6,6 +6,7 @@ import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 import z from 'zod';
 
 import { lapisContext } from './lapis-context';
+import { mutationAnnotationsContext } from './mutation-annotations-context';
 import { referenceGenomeContext } from './reference-genome-context';
 import { type ReferenceGenome } from '../lapisApi/ReferenceGenome';
 import { fetchReferenceGenome } from '../lapisApi/lapisApi';
@@ -21,6 +22,7 @@ const lapisUrlSchema = z.string().url();
  * It makes use of the [Lit Context](https://lit.dev/docs/data/context/) to
  * - provide the URL to the LAPIS instance to all its children
  * - fetch the reference genomes from LAPIS and provide it to all its children
+ * - distribute the mutation annotations config to its children
  *
  * This will show an error message if the reference genome cannot be fetched
  * (e.g., due to an invalid LAPIS URL).
@@ -40,6 +42,21 @@ export class AppComponent extends LitElement {
     @property()
     lapis: string = '';
 
+    /**
+     * Supply lists of mutations that are especially relevant for the current organism.
+     * Whenever other components display mutations, matching mutations will be highlighted by appending the `symbol`.
+     * On hover, a tooltip with the `name` and `description` will be shown.
+     */
+    @provide({ context: mutationAnnotationsContext })
+    @property({ type: Array })
+    mutationAnnotations: {
+        name: string;
+        description: string;
+        symbol: string;
+        nucleotideMutations: string[];
+        aminoAcidMutations: string[];
+    }[] = [];
+
     /**
      * @internal
      */

package/src/web-components/mutation-annotations-context.ts

@@ -0,0 +1,16 @@
+import { createContext } from '@lit/context';
+import z from 'zod';
+
+const mutationAnnotationSchema = z.object({
+    name: z.string(),
+    description: z.string(),
+    symbol: z.string(),
+    nucleotideMutations: z.array(z.string()),
+    aminoAcidMutations: z.array(z.string()),
+});
+export type MutationAnnotation = z.infer<typeof mutationAnnotationSchema>;
+
+export const mutationAnnotationsSchema = z.array(mutationAnnotationSchema);
+export type MutationAnnotations = z.infer<typeof mutationAnnotationsSchema>;
+
+export const mutationAnnotationsContext = createContext<MutationAnnotations>(Symbol('mutation-annotations-context'));

package/src/web-components/visualization/gs-mutation-comparison.stories.ts

@@ -50,9 +50,26 @@ const meta: Meta<Required<MutationComparisonProps>> = {
 
 export default meta;
 
+const mutationAnnotations = [
+    {
+        name: 'I am a mutation annotation!',
+        description: 'This describes what is special about these mutations.',
+        symbol: '#',
+        nucleotideMutations: ['G199-', 'C3037T'],
+        aminoAcidMutations: ['N:G204R'],
+    },
+    {
+        name: 'I am another mutation annotation!',
+        description: 'This describes what is special about these other mutations.',
+        symbol: '+',
+        nucleotideMutations: ['C3037T', 'A23403G'],
+        aminoAcidMutations: ['ORF1a:I2230T'],
+    },
+];
+
 const Template: StoryObj<Required<MutationComparisonProps>> = {
     render: (args) => html`
-        <gs-app lapis="${LAPIS_URL}">
+        <gs-app lapis="${LAPIS_URL}" .mutationAnnotations=${mutationAnnotations}>
             <gs-mutation-comparison
                 .lapisFilters=${args.lapisFilters}
                 .sequenceType=${args.sequenceType}

package/src/web-components/visualization/gs-mutation-comparison.tsx

@@ -1,9 +1,12 @@
+import { consume } from '@lit/context';
 import { customElement, property } from 'lit/decorators.js';
 import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
+import { MutationAnnotationsContextProvider } from '../../preact/MutationAnnotationsContext';
 import { MutationComparison, type MutationComparisonProps } from '../../preact/mutationComparison/mutation-comparison';
 import { type Equals, type Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsStyles';
+import { type MutationAnnotations, mutationAnnotationsContext } from '../mutation-annotations-context';
 
 /**
  * ## Context
@@ -88,16 +91,24 @@ export class MutationComparisonComponent extends PreactLitAdapterWithGridJsStyle
     @property({ type: Object })
     pageSize: boolean | number = false;
 
+    /**
+     * @internal
+     */
+    @consume({ context: mutationAnnotationsContext, subscribe: true })
+    mutationAnnotations: MutationAnnotations = [];
+
     override render() {
         return (
-            <MutationComparison
-                lapisFilters={this.lapisFilters}
-                sequenceType={this.sequenceType}
-                views={this.views}
-                width={this.width}
-                height={this.height}
-                pageSize={this.pageSize}
-            />
+            <MutationAnnotationsContextProvider value={this.mutationAnnotations}>
+                <MutationComparison
+                    lapisFilters={this.lapisFilters}
+                    sequenceType={this.sequenceType}
+                    views={this.views}
+                    width={this.width}
+                    height={this.height}
+                    pageSize={this.pageSize}
+                />
+            </MutationAnnotationsContextProvider>
         );
     }
 }

package/src/web-components/visualization/gs-mutations-over-time.stories.ts

@@ -64,9 +64,27 @@ const meta: Meta<Required<MutationsOverTimeProps>> = {
 
 export default meta;
 
+const mutationAnnotations = [
+    {
+        name: 'I am a mutation annotation!',
+        description:
+            'This describes what is special about these mutations. <a class="link" href="/">And it has a link.</a>',
+        symbol: '#',
+        nucleotideMutations: ['C44T', 'C774T', 'G24872T', 'T23011-'],
+        aminoAcidMutations: ['S:501Y', 'S:S31-', 'ORF1a:S4286C'],
+    },
+    {
+        name: 'I am another mutation annotation!',
+        description: 'This describes what is special about these other mutations.',
+        symbol: '+',
+        nucleotideMutations: ['C44T', 'A13121T'],
+        aminoAcidMutations: ['S:501Y', 'S:S31-', 'ORF1a:S4286C'],
+    },
+];
+
 const Template: StoryObj<Required<MutationsOverTimeProps>> = {
     render: (args) => html`
-        <gs-app lapis="${LAPIS_URL}">
+        <gs-app lapis="${LAPIS_URL}" .mutationAnnotations=${mutationAnnotations}>
             <gs-mutations-over-time
                 .lapisFilter=${args.lapisFilter}
                 .sequenceType=${args.sequenceType}

package/src/web-components/visualization/gs-mutations-over-time.tsx

@@ -1,9 +1,12 @@
+import { consume } from '@lit/context';
 import { customElement, property } from 'lit/decorators.js';
 import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
+import { MutationAnnotationsContextProvider } from '../../preact/MutationAnnotationsContext';
 import { MutationsOverTime, type MutationsOverTimeProps } from '../../preact/mutationsOverTime/mutations-over-time';
 import type { Equals, Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsStyles';
+import { type MutationAnnotations, mutationAnnotationsContext } from '../mutation-annotations-context';
 
 /**
  * ## Context
@@ -105,19 +108,27 @@ export class MutationsOverTimeComponent extends PreactLitAdapterWithGridJsStyles
     @property({ type: Object })
     initialMeanProportionInterval: { min: number; max: number } = { min: 0.05, max: 0.9 };
 
+    /**
+     * @internal
+     */
+    @consume({ context: mutationAnnotationsContext, subscribe: true })
+    mutationAnnotations: MutationAnnotations = [];
+
     override render() {
         return (
-            <MutationsOverTime
-                lapisFilter={this.lapisFilter}
-                sequenceType={this.sequenceType}
-                views={this.views}
-                width={this.width}
-                height={this.height}
-                granularity={this.granularity}
-                lapisDateField={this.lapisDateField}
-                displayMutations={this.displayMutations}
-                initialMeanProportionInterval={this.initialMeanProportionInterval}
-            />
+            <MutationAnnotationsContextProvider value={this.mutationAnnotations}>
+                <MutationsOverTime
+                    lapisFilter={this.lapisFilter}
+                    sequenceType={this.sequenceType}
+                    views={this.views}
+                    width={this.width}
+                    height={this.height}
+                    granularity={this.granularity}
+                    lapisDateField={this.lapisDateField}
+                    displayMutations={this.displayMutations}
+                    initialMeanProportionInterval={this.initialMeanProportionInterval}
+                />
+            </MutationAnnotationsContextProvider>
         );
     }
 }

package/src/web-components/visualization/gs-mutations.stories.ts

@@ -68,9 +68,27 @@ const meta: Meta<Required<MutationsProps>> = {
 
 export default meta;
 
+const mutationAnnotations = [
+    {
+        name: 'I am a mutation annotation!',
+        description:
+            'This describes what is special about these mutations. <a class="link" href="/">And it has a link.</a>',
+        symbol: '#',
+        nucleotideMutations: ['C241T', 'C3037T'],
+        aminoAcidMutations: ['S:501Y', 'S:S31-', 'ORF1a:S4286C'],
+    },
+    {
+        name: 'I am another mutation annotation!',
+        description: 'This describes what is special about these other mutations.',
+        symbol: '+',
+        nucleotideMutations: ['C3037T', 'C11750T'],
+        aminoAcidMutations: ['S:501Y', 'S:S31-', 'ORF1a:S4286C'],
+    },
+];
+
 const Template: StoryObj<Required<MutationsProps>> = {
     render: (args) => html`
-        <gs-app lapis="${LAPIS_URL}">
+        <gs-app lapis="${LAPIS_URL}" .mutationAnnotations=${mutationAnnotations}>
             <gs-mutations
                 .lapisFilter=${args.lapisFilter}
                 .baselineLapisFilter=${args.baselineLapisFilter}

package/src/web-components/visualization/gs-mutations.tsx

@@ -1,9 +1,12 @@
+import { consume } from '@lit/context';
 import { customElement, property } from 'lit/decorators.js';
 import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
+import { MutationAnnotationsContextProvider } from '../../preact/MutationAnnotationsContext';
 import { Mutations, type MutationsProps } from '../../preact/mutations/mutations';
 import type { Equals, Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsStyles';
+import { type MutationAnnotations, mutationAnnotationsContext } from '../mutation-annotations-context';
 
 /**
  * ## Context
@@ -120,17 +123,25 @@ export class MutationsComponent extends PreactLitAdapterWithGridJsStyles {
     @property({ type: Object })
     pageSize: boolean | number = false;
 
+    /**
+     * @internal
+     */
+    @consume({ context: mutationAnnotationsContext, subscribe: true })
+    mutationAnnotations: MutationAnnotations = [];
+
     override render() {
         return (
-            <Mutations
-                lapisFilter={this.lapisFilter}
-                sequenceType={this.sequenceType}
-                views={this.views}
-                width={this.width}
-                height={this.height}
-                pageSize={this.pageSize}
-                baselineLapisFilter={this.baselineLapisFilter}
-            />
+            <MutationAnnotationsContextProvider value={this.mutationAnnotations}>
+                <Mutations
+                    lapisFilter={this.lapisFilter}
+                    sequenceType={this.sequenceType}
+                    views={this.views}
+                    width={this.width}
+                    height={this.height}
+                    pageSize={this.pageSize}
+                    baselineLapisFilter={this.baselineLapisFilter}
+                />
+            </MutationAnnotationsContextProvider>
         );
     }
 }

package/src/web-components/wastewaterVisualization/gs-wastewater-mutations-over-time.stories.ts

@@ -52,9 +52,19 @@ const meta: Meta<WastewaterMutationsOverTimeProps & { infoText: string }> = {
 
 export default meta;
 
+const mutationAnnotations = [
+    {
+        name: 'I am an annotation!',
+        description: 'This describes what is special about these mutations.',
+        symbol: '*',
+        nucleotideMutations: ['C3422A', 'G6661A', 'G7731A'],
+        aminoAcidMutations: ['S:501Y', 'S:S31-', 'ORF1a:S4286C'],
+    },
+];
+
 export const WastewaterMutationsOverTime: StoryObj<WastewaterMutationsOverTimeProps & { infoText: string }> = {
     render: (args) => html`
-        <gs-app lapis="${WISE_LAPIS_URL}">
+        <gs-app lapis="${WISE_LAPIS_URL}" .mutationAnnotations=${mutationAnnotations}>
             <gs-wastewater-mutations-over-time
                 .lapisFilter=${args.lapisFilter}
                 .sequenceType=${args.sequenceType}