@genspectrum/dashboard-components 0.16.3 → 0.16.4

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/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

@@ -67,7 +67,8 @@ export default meta;
 const mutationAnnotations = [
     {
         name: 'I am a mutation annotation!',
-        description: 'This describes what is special about these mutations.',
+        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'],

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

@@ -71,7 +71,8 @@ export default meta;
 const mutationAnnotations = [
     {
         name: 'I am a mutation annotation!',
-        description: 'This describes what is special about these mutations.',
+        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'],