@genspectrum/dashboard-components 0.19.2 → 0.19.3

package/src/web-components/input/gs-lineage-filter.stories.ts

@@ -9,6 +9,7 @@ import '../gs-app';
 import './gs-lineage-filter';
 import aggregatedData from '../../preact/lineageFilter/__mockData__/aggregated.json';
 import { type LineageFilterProps } from '../../preact/lineageFilter/lineage-filter';
+import { gsEventNames } from '../../utils/gsEventNames';
 import { withinShadowRoot } from '../withinShadowRoot.story';
 
 const codeExample = String.raw`
@@ -25,7 +26,7 @@ const meta: Meta<Required<LineageFilterProps>> = {
     component: 'gs-lineage-filter',
     parameters: withComponentDocs({
         actions: {
-            handles: ['gs-lineage-filter-changed', ...previewHandles],
+            handles: [gsEventNames.lineageFilterChanged, ...previewHandles],
         },
         fetchMock: {
             mocks: [
@@ -182,7 +183,7 @@ export const FiresEvent: StoryObj<Required<LineageFilterProps>> = {
         const inputField = () => canvas.getByPlaceholderText('Enter a lineage');
         const listenerMock = fn();
         await step('Setup event listener mock', () => {
-            canvasElement.addEventListener('gs-lineage-filter-changed', listenerMock);
+            canvasElement.addEventListener(gsEventNames.lineageFilterChanged, listenerMock);
         });
 
         await step('wait until data is loaded', async () => {

package/src/web-components/input/gs-lineage-filter.tsx

@@ -3,6 +3,7 @@ import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { type LineageFilterChangedEvent } from '../../preact/lineageFilter/LineageFilterChangedEvent';
 import { LineageFilter, type LineageFilterProps } from '../../preact/lineageFilter/lineage-filter';
+import { type gsEventNames } from '../../utils/gsEventNames';
 import type { Equals, Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapter } from '../PreactLitAdapter';
 
@@ -91,7 +92,7 @@ declare global {
     }
 
     interface HTMLElementEventMap {
-        'gs-lineage-filter-changed': LineageFilterChangedEvent;
+        [gsEventNames.lineageFilterChanged]: LineageFilterChangedEvent;
     }
 }
 

package/src/web-components/input/gs-location-filter.stories.ts

@@ -10,6 +10,7 @@ import '../gs-app';
 import './gs-location-filter';
 import data from '../../preact/locationFilter/__mockData__/aggregated.json';
 import { type LocationFilterProps } from '../../preact/locationFilter/location-filter';
+import { gsEventNames } from '../../utils/gsEventNames';
 import { withinShadowRoot } from '../withinShadowRoot.story';
 
 const codeExample = String.raw`
@@ -26,7 +27,7 @@ const meta: Meta = {
     component: 'gs-location-filter',
     parameters: withComponentDocs({
         actions: {
-            handles: ['gs-location-changed', ...previewHandles],
+            handles: [gsEventNames.locationChanged, ...previewHandles],
         },
         componentDocs: {
             opensShadowDom: true,
@@ -189,7 +190,7 @@ export const FiresEvent: StoryObj<LocationFilterProps> = {
 
         const listenerMock = fn();
         await step('Setup event listener mock', () => {
-            canvasElement.addEventListener('gs-location-changed', listenerMock);
+            canvasElement.addEventListener(gsEventNames.locationChanged, listenerMock);
         });
 
         await step('wait until data is loaded', async () => {

package/src/web-components/input/gs-location-filter.tsx

@@ -3,6 +3,7 @@ import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { type LocationChangedEvent } from '../../preact/locationFilter/LocationChangedEvent';
 import { LocationFilter, type LocationFilterProps } from '../../preact/locationFilter/location-filter';
+import { type gsEventNames } from '../../utils/gsEventNames';
 import type { Equals, Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapter } from '../PreactLitAdapter';
 
@@ -95,7 +96,7 @@ declare global {
     }
 
     interface HTMLElementEventMap {
-        'gs-location-changed': LocationChangedEvent;
+        [gsEventNames.locationChanged]: LocationChangedEvent;
     }
 }
 

package/src/web-components/input/gs-mutation-filter.stories.ts

@@ -7,6 +7,7 @@ import { previewHandles } from '../../../.storybook/preview';
 import { LAPIS_URL, REFERENCE_GENOME_ENDPOINT } from '../../constants';
 import '../gs-app';
 import { type MutationFilterProps } from '../../preact/mutationFilter/mutation-filter';
+import { gsEventNames } from '../../utils/gsEventNames';
 import { withinShadowRoot } from '../withinShadowRoot.story';
 import './gs-mutation-filter';
 
@@ -21,7 +22,7 @@ const meta: Meta<MutationFilterProps> = {
     component: 'gs-mutation-filter',
     parameters: withComponentDocs({
         actions: {
-            handles: ['gs-mutation-filter-changed', ...previewHandles],
+            handles: [gsEventNames.mutationFilterChanged, ...previewHandles],
         },
         fetchMock: {},
         componentDocs: {
@@ -73,7 +74,7 @@ export const FiresFilterChangedEvent: StoryObj<MutationFilterProps> = {
         const inputField = () => canvas.getByPlaceholderText('Enter a mutation', { exact: false });
         const listenerMock = fn();
         await step('Setup event listener mock', () => {
-            canvasElement.addEventListener('gs-mutation-filter-changed', listenerMock);
+            canvasElement.addEventListener(gsEventNames.mutationFilterChanged, listenerMock);
         });
 
         await step('wait until data is loaded', async () => {

package/src/web-components/input/gs-mutation-filter.tsx

@@ -4,6 +4,7 @@ import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 import { ReferenceGenomesAwaiter } from '../../preact/components/ReferenceGenomesAwaiter';
 import { MutationFilter, type MutationFilterProps } from '../../preact/mutationFilter/mutation-filter';
 import type { MutationsFilter } from '../../types';
+import { type gsEventNames } from '../../utils/gsEventNames';
 import type { Equals, Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapter } from '../PreactLitAdapter';
 
@@ -95,7 +96,7 @@ declare global {
     }
 
     interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
+        [gsEventNames.mutationFilterChanged]: CustomEvent<MutationsFilter>;
     }
 }
 

package/src/web-components/input/gs-text-filter.stories.ts

@@ -9,6 +9,7 @@ import '../gs-app';
 import './gs-text-filter';
 import data from '../../preact/textFilter/__mockData__/aggregated_hosts.json';
 import type { TextFilterProps } from '../../preact/textFilter/text-filter';
+import { gsEventNames } from '../../utils/gsEventNames';
 import { withinShadowRoot } from '../withinShadowRoot.story';
 
 const codeExample = String.raw`
@@ -25,7 +26,7 @@ const meta: Meta<Required<TextFilterProps>> = {
     component: 'gs-text-filter',
     parameters: withComponentDocs({
         actions: {
-            handles: ['gs-text-filter-changed', ...previewHandles],
+            handles: [gsEventNames.textFilterChanged, ...previewHandles],
         },
         fetchMock: {
             mocks: [
@@ -114,7 +115,7 @@ export const FiresEvents: StoryObj<Required<TextFilterProps>> = {
         const inputField = () => canvas.getByPlaceholderText('Enter host name');
         const listenerMock = fn();
         await step('Setup event listener mock', () => {
-            canvasElement.addEventListener('gs-text-filter-changed', listenerMock);
+            canvasElement.addEventListener(gsEventNames.textFilterChanged, listenerMock);
         });
 
         await step('wait until data is loaded', async () => {

package/src/web-components/input/gs-text-filter.tsx

@@ -3,6 +3,7 @@ import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { type TextFilterChangedEvent } from '../../preact/textFilter/TextFilterChangedEvent';
 import { TextFilter, type TextFilterProps } from '../../preact/textFilter/text-filter';
+import { type gsEventNames } from '../../utils/gsEventNames';
 import type { Equals, Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapter } from '../PreactLitAdapter';
 
@@ -85,7 +86,7 @@ declare global {
     }
 
     interface HTMLElementEventMap {
-        'gs-text-filter-changed': TextFilterChangedEvent;
+        [gsEventNames.textFilterChanged]: TextFilterChangedEvent;
     }
 }
 

package/src/web-components/visualization/gs-genome-data-viewer.spec-d.ts

@@ -0,0 +1,18 @@
+import { describe, expectTypeOf, test } from 'vitest';
+
+import { GenomeDataViewerComponent } from './gs-genome-data-viewer';
+import type { GenomeDataViewerProps } from '../../preact/genomeViewer/genome-data-viewer';
+
+describe('gs-app types', () => {
+    test('mutationAnnotations type should match', ({}) => {
+        expectTypeOf(GenomeDataViewerComponent.prototype)
+            .toHaveProperty('gff3Source')
+            .toEqualTypeOf<GenomeDataViewerProps['gff3Source']>();
+        expectTypeOf(GenomeDataViewerComponent.prototype)
+            .toHaveProperty('genomeLength')
+            .toEqualTypeOf<GenomeDataViewerProps['genomeLength']>();
+        expectTypeOf(GenomeDataViewerComponent.prototype)
+            .toHaveProperty('width')
+            .toEqualTypeOf<GenomeDataViewerProps['width']>();
+    });
+});

package/src/web-components/visualization/gs-genome-data-viewer.stories.ts

@@ -0,0 +1,108 @@
+import { expect, waitFor } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+import './gs-genome-data-viewer';
+import '../gs-app';
+import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
+import { LAPIS_URL } from '../../constants';
+import type { GenomeDataViewerProps } from '../../preact/genomeViewer/genome-data-viewer';
+import { withinShadowRoot } from '../withinShadowRoot.story';
+
+const codeExample = String.raw`
+<gs-genome-data-viewer
+    gff3Source='https://raw.githubusercontent.com/nextstrain/nextclade_data/8f2e791d3a59013ee88e1d1d7e83b486d39c4ecb/data/nextstrain/wnv/all-lineages/genome_annotation.gff3'
+    genomeLength='11029'
+    width='100%'
+></gs-genome-data-viewer>`;
+
+const meta: Meta<Required<GenomeDataViewerProps>> = {
+    title: 'Visualization/Genome Data Viewer',
+    component: 'gs-genome-data-viewer',
+    argTypes: {
+        gff3Source: { control: 'text' },
+        genomeLength: { control: 'number' },
+        width: { control: 'text' },
+    },
+    parameters: withComponentDocs({
+        componentDocs: {
+            opensShadowDom: true,
+            expectsChildren: false,
+            codeExample,
+        },
+    }),
+    tags: ['autodocs'],
+};
+
+export default meta;
+
+const Template: StoryObj<Required<GenomeDataViewerProps>> = {
+    render: (args) => html`
+        <gs-app lapis="${LAPIS_URL}">
+            <gs-genome-data-viewer
+                .genomeLength=${args.genomeLength}
+                .gff3Source=${args.gff3Source}
+                .width=${args.width}
+            ></gs-genome-data-viewer>
+        </gs-app>
+    `,
+};
+
+const SimpleData = `
+##gff-version 3
+#!gff-spec-version 1.21
+#!processor NCBI annotwriter
+##sequence-region NC_009942.1 1 11029
+##species https://www.ncbi.nlm.nih.gov/Taxonomy/Browser/wwwtax.cgi?id=11082
+NC_009942.1	RefSeq	region	1	11029	.	+	.	ID=NC_009942.1:1..11029;Dbxref=taxon:11082;country=USA;gb-acronym=WNV;gbkey=Src;genome=genomic;isolate=385-99;mol_type=genomic RNA;note=lineage 1%3B Vero cell passage 2 after isolation;strain=NY99
+NC_009942.1	RefSeq	gene	97	10395	.	+	.	gene=POLY;ID=gene-WNVNY99_gp1;gbkey=Prot;product=anchored capsid protein ancC;protein_id=YP_005097850.1
+NC_009942.1	RefSeq	CDS	97	465	.	+	.	gene=capsid;Parent=gene-WNVNY99_gp1;gbkey=Prot;product=anchored capsid protein ancC;protein_id=YP_005097850.1
+NC_009942.1	RefSeq	CDS	466	966	.	+	.	gene=prM;Parent=gene-WNVNY99_gp1;gbkey=Prot;product=protein pr;protein_id=YP_009164953.1
+NC_009942.1	RefSeq	CDS	967	2469	.	+	.	gene=env;Parent=gene-WNVNY99_gp1;gbkey=Prot;product=envelope protein E;protein_id=YP_001527880.1
+NC_009942.1	RefSeq	CDS	2470	3525	.	+	.	gene=NS1;Parent=gene-WNVNY99_gp1;gbkey=Prot;product=nonstructural protein NS1;protein_id=YP_001527881.1
+NC_009942.1	RefSeq	CDS	3526	4218	.	+	.	gene=NS2A;Parent=gene-WNVNY99_gp1;gbkey=Prot;product=nonstructural protein NS2A;protein_id=YP_001527882.1
+NC_009942.1	RefSeq	CDS	4219	4611	.	+	.	gene=NS2B;Parent=gene-WNVNY99_gp1;gbkey=Prot;product=nonstructural protein NS2B;protein_id=YP_001527883.1
+NC_009942.1	RefSeq	CDS	4612	6468	.	+	.	gene=NS3;Parent=gene-WNVNY99_gp1;gbkey=Prot;product=nonstructural protein NS3;protein_id=YP_001527884.1
+NC_009942.1	RefSeq	CDS	6469	6846	.	+	.	gene=NS4A;Parent=gene-WNVNY99_gp1;gbkey=Prot;product=nonstructural protein NS4A;protein_id=YP_001527885.1
+NC_009942.1	RefSeq	CDS	6847	6915	.	+	.	gene=2K;Parent=gene-WNVNY99_gp1;gbkey=Prot;product=protein 2K;protein_id=YP_001527885.1
+NC_009942.1	RefSeq	CDS	6916	7680	.	+	.	gene=NS4B;Parent=gene-WNVNY99_gp1;gbkey=Prot;product=nonstructural protein NS4B;protein_id=YP_001527886.1
+NC_009942.1	RefSeq	CDS	7681	10395	.	+	.	gene=NS5;Parent=gene-WNVNY99_gp1;gbkey=Prot;product=RNA-dependent RNA polymerase NS5;protein_id=YP_001527887.1
+`;
+export const Default: StoryObj<Required<GenomeDataViewerProps>> = {
+    ...Template,
+    args: {
+        genomeLength: 11029,
+        gff3Source: 'https://gff3Url',
+        width: '100%',
+    },
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'gff3Data',
+                        url: 'https://gff3Url',
+                    },
+                    response: {
+                        status: 200,
+                        body: SimpleData,
+                        headers: {
+                            'Content-Type': 'text/plain',
+                        },
+                    },
+                },
+            ],
+        },
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = await withinShadowRoot(canvasElement, 'gs-genome-data-viewer');
+
+        await step('CDS visible', async () => {
+            const ns1NameMatches = await canvas.findAllByText('NS1');
+            await waitFor(async () => expect(ns1NameMatches[0]).toBeVisible());
+            const xAxisTick = await canvas.findAllByText('1000');
+            await waitFor(async () => expect(xAxisTick[0]).toBeVisible());
+            await waitFor(async () => expect(xAxisTick.length).toBe(2));
+        });
+    },
+};

package/src/web-components/visualization/gs-genome-data-viewer.tsx

@@ -0,0 +1,59 @@
+import { customElement, property } from 'lit/decorators.js';
+import type { DetailedHTMLProps, HTMLAttributes } from 'react';
+
+import { GenomeDataViewer } from '../../preact/genomeViewer/genome-data-viewer';
+import { PreactLitAdapter } from '../PreactLitAdapter';
+
+/**
+ * ## Context
+ *
+ * This component shows the Coding Sequence (CDS) of a genome using a gff3 file as input.
+ * The CDS shows which parts of the genome are translated into proteins.
+ *
+ */
+@customElement('gs-genome-data-viewer')
+export class GenomeDataViewerComponent extends PreactLitAdapter {
+    /**
+     * Required
+     *
+     * The source of the gff3 file. Any spec-compliant gff3 should be accepted, however we use the same format as Nextclade.
+     * See https://docs.nextstrain.org/projects/nextclade/en/stable/user/input-files/03-genome-annotation.html for more information.
+     * We only use the CDS and gene features from the gff3 file, if you have other features in the gff3 file they will be ignored.
+     * Also note that if a CDS has a gene feature as a parent, the gene feature will be ignored.
+     */
+    @property({ type: String })
+    gff3Source: string = '';
+
+    /**
+     * The length of the genome, if this is not given it will be computed from the `sequence-region` line of the start of the gff3 file.
+     */
+    @property({ type: Number })
+    genomeLength: number | undefined = 0;
+
+    /**
+     * The width of the component.
+     *
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.
+     */
+    @property({ type: String })
+    width: string = '100%';
+
+    override render() {
+        return <GenomeDataViewer gff3Source={this.gff3Source} genomeLength={this.genomeLength} width={this.width} />;
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-genome-data-viewer': GenomeDataViewerComponent;
+    }
+}
+
+declare global {
+    // eslint-disable-next-line @typescript-eslint/no-namespace
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-genome-data-viewer': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}

package/src/web-components/visualization/index.ts

@@ -1,3 +1,4 @@
+export { GenomeDataViewerComponent } from './gs-genome-data-viewer';
 export { MutationComparisonComponent } from './gs-mutation-comparison';
 export { MutationsComponent } from './gs-mutations';
 export { PrevalenceOverTimeComponent } from './gs-prevalence-over-time';