@genspectrum/dashboard-components 0.16.1 → 0.16.3

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-mutations-over-time.stories.ts

@@ -64,9 +64,26 @@ 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.',
+        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,26 @@ 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.',
+        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}

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

@@ -1,12 +1,15 @@
+import { consume } from '@lit/context';
 import { customElement, property } from 'lit/decorators.js';
 import { type DetailedHTMLProps, type HTMLAttributes } from 'react';
 
+import { MutationAnnotationsContextProvider } from '../../preact/MutationAnnotationsContext';
 import {
     WastewaterMutationsOverTime,
     type WastewaterMutationsOverTimeProps,
 } from '../../preact/wastewater/mutationsOverTime/wastewater-mutations-over-time';
 import { type Equals, type Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsStyles';
+import { type MutationAnnotations, mutationAnnotationsContext } from '../mutation-annotations-context';
 
 /**
  * ## Context
@@ -71,15 +74,23 @@ export class WastewaterMutationsOverTimeComponent extends PreactLitAdapterWithGr
     @property({ type: Number })
     maxNumberOfGridRows: number = 100;
 
+    /**
+     * @internal
+     */
+    @consume({ context: mutationAnnotationsContext, subscribe: true })
+    mutationAnnotations: MutationAnnotations = [];
+
     override render() {
         return (
-            <WastewaterMutationsOverTime
-                lapisFilter={this.lapisFilter}
-                sequenceType={this.sequenceType}
-                width={this.width}
-                height={this.height}
-                maxNumberOfGridRows={this.maxNumberOfGridRows}
-            />
+            <MutationAnnotationsContextProvider value={this.mutationAnnotations}>
+                <WastewaterMutationsOverTime
+                    lapisFilter={this.lapisFilter}
+                    sequenceType={this.sequenceType}
+                    width={this.width}
+                    height={this.height}
+                    maxNumberOfGridRows={this.maxNumberOfGridRows}
+                />
+            </MutationAnnotationsContextProvider>
         );
     }
 }