@genspectrum/dashboard-components 0.16.2 → 0.16.3

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>
         );
     }
 }