@genspectrum/dashboard-components 0.19.2 → 0.19.3

package/src/preact/genomeViewer/genome-data-viewer.stories.tsx

@@ -0,0 +1,113 @@
+import { type Meta, type StoryObj } from '@storybook/preact';
+
+import { GenomeDataViewer, type GenomeDataViewerProps } from './genome-data-viewer';
+import { playThatExpectsErrorMessage } from '../shared/stories/expectErrorMessage';
+
+const meta: Meta<GenomeDataViewerProps> = {
+    title: 'Visualization/GenomeDataViewer',
+    component: GenomeDataViewer,
+    argTypes: {
+        width: { control: { type: 'text' } },
+    },
+};
+
+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
+`;
+
+const SplicedGeneData = `
+##gff-version 3
+#!gff-spec-version 1.21
+#!processor NCBI annotwriter
+##sequence-region NC_026431.1 1 982
+##species https://www.ncbi.nlm.nih.gov/Taxonomy/Browser/wwwtax.cgi?id=641809
+NC_026431.1	RefSeq	region	1	982	.	+	.	ID=NC_026431.1:1..982;Dbxref=taxon:641809;Name=7;collection-date=09-Apr-2009;country=USA: California state;gbkey=Src;genome=genomic;mol_type=viral cRNA;nat-host=Homo sapiens%3B gender M%3B age 54;segment=7;serotype=H1N1;strain=A/California/07/2009
+NC_026431.1	RefSeq	CDS	1	26	.	+	0	Name=M2;gene=M2;gbkey=CDS;locus_tag=UJ99_s7gp1;protein_id=YP_009118622.1;product=matrix protein 2;ID=cds-YP_009118622.1;Dbxref=GenBank:YP_009118622.1,GeneID:23308108
+NC_026431.1	RefSeq	CDS	715	982	.	+	1	Name=M2;gene=M2;gbkey=CDS;locus_tag=UJ99_s7gp1;protein_id=YP_009118622.1;product=matrix protein 2;ID=cds-YP_009118622.1;Dbxref=GenBank:YP_009118622.1,GeneID:23308108
+NC_026431.1	RefSeq	CDS	1	759	.	+	0	Name=M1;gene=M1;gbkey=CDS;locus_tag=UJ99_s7gp2;protein_id=YP_009118623.1;product=matrix protein 1;ID=cds-YP_009118623.1;Dbxref=GenBank:YP_009118623.1,GeneID:23308107
+`;
+
+export default meta;
+
+const gff3Url = 'http://my.gff.data';
+
+export const Default: StoryObj<GenomeDataViewerProps> = {
+    render: (args) => <GenomeDataViewer {...args} />,
+    args: {
+        gff3Source: gff3Url,
+        width: '1100px',
+    },
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'gff3Data',
+                        url: gff3Url,
+                    },
+                    response: {
+                        status: 200,
+                        body: SimpleData,
+                        headers: {
+                            'Content-Type': 'text/plain',
+                        },
+                    },
+                },
+            ],
+        },
+    },
+};
+
+export const InvalidProps: StoryObj<GenomeDataViewerProps> = {
+    ...Default,
+    args: {
+        ...Default.args,
+        gff3Source: 'bla',
+    },
+    play: playThatExpectsErrorMessage('Error - Invalid gff3 source', `Invalid URL passed to parseGFF3: "bla"`),
+};
+
+export const SplicedGeneAndOverlap: StoryObj<GenomeDataViewerProps> = {
+    render: (args) => <GenomeDataViewer {...args} />,
+    args: {
+        gff3Source: gff3Url,
+        genomeLength: 982,
+        width: '1100px',
+    },
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'gff3Data',
+                        url: gff3Url,
+                    },
+                    response: {
+                        status: 200,
+                        body: SplicedGeneData,
+                        headers: {
+                            'Content-Type': 'text/plain',
+                        },
+                    },
+                },
+            ],
+        },
+    },
+};

package/src/preact/genomeViewer/genome-data-viewer.tsx

@@ -0,0 +1,69 @@
+import type { FunctionComponent } from 'preact';
+import { useEffect, useRef, useState } from 'preact/hooks';
+import z from 'zod';
+
+import { ErrorBoundary } from '../components/error-boundary';
+import { LoadingDisplay } from '../components/loading-display';
+import { ResizeContainer } from '../components/resize-container';
+import { useQuery } from '../useQuery';
+import CDSPlot from './CDSPlot';
+import { loadGff3 } from './loadGff3';
+
+const genomeDataViewerPropsSchema = z.object({
+    gff3Source: z.string().min(1, 'gff3Source cannot be empty'),
+    genomeLength: z.number().gt(0, 'genomeLength must be greater than 0').optional(),
+    width: z.string(),
+});
+
+interface ExtendedGenomeDataViewerProps extends GenomeDataViewerProps {
+    trueWidth: number;
+}
+
+export type GenomeDataViewerProps = z.infer<typeof genomeDataViewerPropsSchema>;
+
+export const GenomeDataViewer: FunctionComponent<GenomeDataViewerProps> = (componentProps) => {
+    const { width } = componentProps;
+    const size = { height: '100%', width };
+    const containerRef = useRef<HTMLDivElement>(null);
+    const [trueWidth, setTrueWidth] = useState(0);
+
+    useEffect(() => {
+        const updateSize = () => {
+            if (containerRef.current) {
+                setTrueWidth(containerRef.current.getBoundingClientRect().width);
+            }
+        };
+
+        updateSize();
+        window.addEventListener('resize', updateSize);
+        return () => window.removeEventListener('resize', updateSize);
+    }, []);
+
+    return (
+        <ErrorBoundary size={size} componentProps={componentProps} schema={genomeDataViewerPropsSchema}>
+            <ResizeContainer size={size} ref={containerRef}>
+                <GenomeDataViewerInner {...componentProps} trueWidth={trueWidth} />
+            </ResizeContainer>
+        </ErrorBoundary>
+    );
+};
+
+const GenomeDataViewerInner: FunctionComponent<ExtendedGenomeDataViewerProps> = (props) => {
+    const { gff3Source, genomeLength, trueWidth } = props;
+
+    const {
+        data,
+        error,
+        isLoading: isLoadingData,
+    } = useQuery(() => loadGff3(gff3Source, genomeLength), [gff3Source, genomeLength]);
+
+    if (isLoadingData) {
+        return <LoadingDisplay />;
+    }
+
+    if (error) {
+        throw error;
+    }
+
+    return <CDSPlot gffData={data.features} genomeLength={data.length} width={trueWidth} />;
+};

package/src/preact/genomeViewer/loadGff3.spec.ts

@@ -0,0 +1,61 @@
+import { describe, expect, test } from 'vitest';
+
+import { type CDSFeature, parseGFF3, loadGenomeLength } from './loadGff3';
+
+const SplicedGeneData = `
+##gff-version 3
+#!gff-spec-version 1.21
+#!processor NCBI annotwriter
+##sequence-region NC_026431.1 1 982
+##species https://www.ncbi.nlm.nih.gov/Taxonomy/Browser/wwwtax.cgi?id=641809
+NC_026431.1	RefSeq	region	1	982	.	+	.	ID=NC_026431.1:1..982;Dbxref=taxon:641809;Name=7;collection-date=09-Apr-2009;country=USA: California state;gbkey=Src;genome=genomic;mol_type=viral cRNA;nat-host=Homo sapiens%3B gender M%3B age 54;segment=7;serotype=H1N1;strain=A/California/07/2009
+NC_026431.1	RefSeq	CDS	1	26	.	+	0	Name=M2;gene=M2;gbkey=CDS;locus_tag=UJ99_s7gp1;protein_id=YP_009118622.1;product=matrix protein 2;ID=cds-YP_009118622.1;Dbxref=GenBank:YP_009118622.1,GeneID:23308108
+NC_026431.1	RefSeq	CDS	715	982	.	+	1	Name=M2;gene=M2;gbkey=CDS;locus_tag=UJ99_s7gp1;protein_id=YP_009118622.1;product=matrix protein 2;ID=cds-YP_009118622.1;Dbxref=GenBank:YP_009118622.1,GeneID:23308108
+NC_026431.1	RefSeq	CDS	1	759	.	+	0	Name=M1;gene=M1;gbkey=CDS;locus_tag=UJ99_s7gp2;protein_id=YP_009118623.1;product=matrix protein 1;ID=cds-YP_009118623.1;Dbxref=GenBank:YP_009118623.1,GeneID:23308107
+NC_026431.1	RefSeq	CDS	760	790	.	+	0	Name=fakeGene;gene=fakeGene;gbkey=CDS;locus_tag=UJ99_s7fake;protein_id=YP_009118624.1;product=None;ID=cds-YP_009118624.1;Dbxref=GenBank:YP_009118624.1,GeneID:23308109
+`;
+
+describe('parseGFF3', () => {
+    test('should parse GFF3 correctly', () => {
+        const result: CDSFeature[][] = parseGFF3(SplicedGeneData);
+
+        expect(result).to.deep.equal([
+            [
+                {
+                    color: 'sand',
+                    positions: [
+                        { start: 1, end: 26 },
+                        { start: 715, end: 982 },
+                    ],
+                    label: 'M2',
+                },
+            ],
+            [
+                { color: 'rose', positions: [{ start: 1, end: 759 }], label: 'M1' },
+                { color: 'wine', positions: [{ start: 760, end: 790 }], label: 'fakeGene' },
+            ],
+        ]);
+    });
+});
+
+describe('loadGenomeLength', () => {
+    test('should calculate genome length correctly', () => {
+        const length = loadGenomeLength(SplicedGeneData);
+
+        expect(length).to.equal(982);
+    });
+});
+
+const invalidInput = `
+##gff-version 3
+#!gff-spec-version 1.21
+#!processor NCBI annotwriter
+##sequence-region NC_026431.1 1`;
+
+describe('loadGenomeLength', () => {
+    test('should throw an error when passed invalid input', () => {
+        expect(() => loadGenomeLength(invalidInput)).toThrow(
+            'No length found in sequence-region: "##sequence-region NC_026431.1 1"',
+        );
+    });
+});

package/src/preact/genomeViewer/loadGff3.ts

@@ -0,0 +1,174 @@
+import { UserFacingError } from '../components/error-display';
+import { ColorsRGB, type GraphColor } from '../shared/charts/colors';
+
+export type CDSFeature = {
+    positions: Position[];
+    label: string;
+    color: GraphColor;
+};
+
+type Position = {
+    start: number;
+    end: number;
+};
+
+type CDSMap = {
+    [id: string]: { positions: Position[]; label: string };
+};
+
+export async function loadGff3(gff3Source: string, genomeLength: number | undefined) {
+    try {
+        new URL(gff3Source);
+    } catch (_error) {
+        throw new UserFacingError('Invalid gff3 source', `Invalid URL passed to parseGFF3: "${gff3Source}"`);
+    }
+
+    const response = await fetch(gff3Source);
+    const content = await response.text();
+    if (!genomeLength) {
+        genomeLength = loadGenomeLength(content);
+    }
+    return { features: parseGFF3(content), length: genomeLength };
+}
+
+export function parseGFF3(content: string): CDSFeature[][] {
+    /**
+     * Reads in CDS from GFF3 according to nextclade rules:
+     * https://docs.nextstrain.org/projects/nextclade/en/stable/user/input-files/03-genome-annotation.html
+     * Read in both gene and CDS features
+     * If a CDS feature has a gene feature as a parent, remove the gene feature
+     * Split the CDS features into non-overlapping features
+     */
+    const lines = content.split('\n');
+
+    const map: CDSMap = {};
+
+    const geneFeatures = getCDSMap(lines, 'gene', map);
+    const cdsFeatures = getCDSMap(lines, 'CDS', geneFeatures);
+
+    return getNonOverlappingCDSFeatures(getSortedCDSFeatures(cdsFeatures));
+}
+
+function getAttributes(attributes: string): Map<string, string> {
+    const attrPairs = attributes.split(';');
+    const attrMap = new Map<string, string>();
+    for (const pair of attrPairs) {
+        const pairTrimmed = pair.trim();
+        const [key, value] = pairTrimmed.split('=');
+        attrMap.set(key, value);
+    }
+    return attrMap;
+}
+
+function getCDSMap(lines: string[], genome_type: string, geneMap: CDSMap): CDSMap {
+    for (const line of lines) {
+        if (line.startsWith('#') || line.trim() === '') {
+            continue;
+        }
+
+        const fields = line.split('\t');
+        if (fields.length < 9) {
+            throw new UserFacingError('Invalid gff3 source', `Gff3 line has less than 9 fields: "${line}"`);
+        }
+
+        const [, , type, startStr, endStr, , , , attributes] = fields;
+
+        if (type.toLowerCase() !== genome_type.toLowerCase()) {
+            continue;
+        }
+
+        const start = parseInt(startStr, 10);
+        const end = parseInt(endStr, 10);
+
+        if (isNaN(start) || isNaN(end)) {
+            throw new UserFacingError('Invalid gff3 source', `Invalid start or end position: "${line}"`);
+        }
+
+        const attrPairs = getAttributes(attributes);
+        const label = attrPairs.get('Name') || attrPairs.get('gene') || attrPairs.get('gene_name');
+        if (!label) {
+            throw new UserFacingError(
+                'Invalid gff3 source',
+                `No label found for feature: "${line}", must contain label in Name, gene, or gene_name attribute`,
+            );
+        }
+        const id = attrPairs.get('ID') || label;
+        if (attrPairs.get('Parent')) {
+            const parent = attrPairs.get('Parent');
+            if (parent && parent in geneMap) {
+                delete geneMap[parent];
+            }
+        }
+        if (id in geneMap) {
+            geneMap[id].positions.push({ start, end });
+        } else {
+            geneMap[id] = { positions: [{ start, end }], label };
+        }
+    }
+    return geneMap;
+}
+
+function getSortedCDSFeatures(cdsMap: CDSMap): CDSFeature[] {
+    const mapValues = Object.values(cdsMap);
+
+    mapValues.forEach((feature) => {
+        feature.positions.sort((a, b) => a.start - b.start);
+    });
+
+    mapValues.sort((a, b) => {
+        return a.positions[0].start - b.positions[0].start;
+    });
+
+    const GraphColorList = Object.keys(ColorsRGB) as GraphColor[];
+    const colorIndex = mapValues[0].label[0].toUpperCase().charCodeAt(0);
+
+    const cdsFeatures: CDSFeature[] = mapValues.map((value, index) => ({
+        positions: value.positions,
+        label: value.label,
+        color: GraphColorList[(colorIndex + index) % GraphColorList.length],
+    }));
+
+    return cdsFeatures;
+}
+
+function getNonOverlappingCDSFeatures(cdsFeatures: CDSFeature[]): CDSFeature[][] {
+    const nonOverlappingCDSFeatures: CDSFeature[][] = [];
+    for (const cdsFeature of cdsFeatures) {
+        let added = false;
+        for (const cdsList of nonOverlappingCDSFeatures) {
+            const lastCds = cdsList[cdsList.length - 1];
+            if (cdsFeature.positions[0].start > lastCds.positions[lastCds.positions.length - 1].end) {
+                cdsList.push(cdsFeature);
+                added = true;
+                break;
+            }
+        }
+        if (!added) {
+            nonOverlappingCDSFeatures.push([cdsFeature]);
+        }
+    }
+    return nonOverlappingCDSFeatures;
+}
+
+export function loadGenomeLength(content: string) {
+    const lines = content.split('\n');
+    for (const line of lines) {
+        if (!line.startsWith('#')) {
+            continue;
+        }
+        const fields = line.split(' ');
+        if (fields[0] === '##sequence-region') {
+            if (fields.length < 3) {
+                throw new UserFacingError('Invalid gff3 source', `No length found in sequence-region: "${line}"`);
+            }
+            const start = fields.at(-2);
+            const end = fields.at(-1);
+            const length = parseInt(end!, 10) - parseInt(start!, 10) + 1;
+            if (isNaN(length)) {
+                throw new UserFacingError('Invalid gff3 source', `No length found in sequence-region: "${line}"`);
+            }
+            return length;
+        }
+    }
+    throw new UserFacingError('Invalid gff3 source', `No length found in sequence-region`);
+}

package/src/preact/lineageFilter/LineageFilterChangedEvent.ts

@@ -1,8 +1,10 @@
+import { gsEventNames } from '../../utils/gsEventNames';
+
 type LapisLineageFilter = Record<string, string | undefined>;
 
 export class LineageFilterChangedEvent extends CustomEvent<LapisLineageFilter> {
     constructor(detail: LapisLineageFilter) {
-        super('gs-lineage-filter-changed', {
+        super(gsEventNames.lineageFilterChanged, {
             detail,
             bubbles: true,
             composed: true,

package/src/preact/lineageFilter/lineage-filter.stories.tsx

@@ -6,6 +6,7 @@ import { LineageFilter, type LineageFilterProps } from './lineage-filter';
 import { previewHandles } from '../../../.storybook/preview';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import aggregatedData from '../../preact/lineageFilter/__mockData__/aggregated.json';
+import { gsEventNames } from '../../utils/gsEventNames';
 import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectErrorMessage';
 
@@ -14,7 +15,7 @@ const meta: Meta = {
     component: LineageFilter,
     parameters: {
         actions: {
-            handles: ['gs-lineage-filter-changed', ...previewHandles],
+            handles: [gsEventNames.lineageFilterChanged, ...previewHandles],
         },
         fetchMock: {
             mocks: [
@@ -155,7 +156,7 @@ async function prepare(canvasElement: HTMLElement, step: StepFunction<PreactRend
 
     const lineageChangedListenerMock = fn();
     await step('Setup event listener mock', () => {
-        canvasElement.addEventListener('gs-lineage-filter-changed', lineageChangedListenerMock);
+        canvasElement.addEventListener(gsEventNames.lineageFilterChanged, lineageChangedListenerMock);
     });
 
     await step('location filter is rendered with value', async () => {

package/src/preact/locationFilter/LocationChangedEvent.ts

@@ -1,8 +1,9 @@
 import { type LapisLocationFilter } from '../../types';
+import { gsEventNames } from '../../utils/gsEventNames';
 
 export class LocationChangedEvent extends CustomEvent<LapisLocationFilter> {
     constructor(detail: LapisLocationFilter) {
-        super('gs-location-changed', {
+        super(gsEventNames.locationChanged, {
             detail,
             bubbles: true,
             composed: true,

package/src/preact/locationFilter/location-filter.stories.tsx

@@ -6,6 +6,7 @@ import data from './__mockData__/aggregated.json';
 import { LocationFilter, type LocationFilterProps } from './location-filter';
 import { previewHandles } from '../../../.storybook/preview';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
+import { gsEventNames } from '../../utils/gsEventNames';
 import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectErrorMessage';
 
@@ -32,7 +33,7 @@ const meta: Meta<LocationFilterProps> = {
             ],
         },
         actions: {
-            handles: ['gs-location-changed', ...previewHandles],
+            handles: [gsEventNames.locationChanged, ...previewHandles],
         },
     },
     args: {
@@ -152,7 +153,7 @@ async function prepare(canvasElement: HTMLElement, step: StepFunction<PreactRend
 
     const locationChangedListenerMock = fn();
     await step('Setup event listener mock', () => {
-        canvasElement.addEventListener('gs-location-changed', locationChangedListenerMock);
+        canvasElement.addEventListener(gsEventNames.locationChanged, locationChangedListenerMock);
     });
 
     await step('location filter is rendered with value', async () => {

package/src/preact/mutationFilter/mutation-filter.stories.tsx

@@ -6,6 +6,7 @@ import { MutationFilter, type MutationFilterProps } from './mutation-filter';
 import { previewHandles } from '../../../.storybook/preview';
 import { LAPIS_URL } from '../../constants';
 import referenceGenome from '../../lapisApi/__mockData__/referenceGenome.json';
+import { gsEventNames } from '../../utils/gsEventNames';
 import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
 import { playThatExpectsErrorMessage } from '../shared/stories/expectErrorMessage';
@@ -15,7 +16,7 @@ const meta: Meta<MutationFilterProps> = {
     component: MutationFilter,
     parameters: {
         actions: {
-            handles: ['gs-mutation-filter-changed', ...previewHandles],
+            handles: [gsEventNames.mutationFilterChanged, ...previewHandles],
         },
         fetchMock: {},
     },
@@ -357,7 +358,7 @@ async function prepare(canvasElement: HTMLElement, step: StepFunction<PreactRend
 
     const changedListenerMock = fn();
     await step('Setup event listener mock', () => {
-        canvasElement.addEventListener('gs-mutation-filter-changed', changedListenerMock);
+        canvasElement.addEventListener(gsEventNames.mutationFilterChanged, changedListenerMock);
     });
 
     await step('wait until data is loaded', async () => {

package/src/preact/mutationFilter/mutation-filter.tsx

@@ -8,6 +8,7 @@ import { MutationFilterInfo } from './mutation-filter-info';
 import { parseAndValidateMutation } from './parseAndValidateMutation';
 import { type ReferenceGenome } from '../../lapisApi/ReferenceGenome';
 import { type MutationsFilter, mutationsFilterSchema } from '../../types';
+import { gsEventNames } from '../../utils/gsEventNames';
 import { type DeletionClass, type InsertionClass, type SubstitutionClass } from '../../utils/mutations';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
 import { ErrorBoundary } from '../components/error-boundary';
@@ -86,7 +87,7 @@ function MutationFilterInner({ initialValue }: MutationFilterInnerProps) {
         const detail = mapToMutationFilterStrings(selectedFilters);
 
         filterRef.current?.dispatchEvent(
-            new CustomEvent<MutationsFilter>('gs-mutation-filter-changed', {
+            new CustomEvent<MutationsFilter>(gsEventNames.mutationFilterChanged, {
                 detail,
                 bubbles: true,
                 composed: true,

package/src/preact/shared/charts/colors.ts

@@ -1,6 +1,6 @@
 // colorblind friendly colors taken from https://personal.sron.nl/~pault/
 
-const ColorsRGB = {
+export const ColorsRGB = {
     indigo: [51, 34, 136],
     green: [17, 119, 51],
     cyan: [136, 204, 238],

package/src/preact/textFilter/TextFilterChangedEvent.ts

@@ -1,8 +1,10 @@
+import { gsEventNames } from '../../utils/gsEventNames';
+
 type LapisTextFilter = Record<string, string | undefined>;
 
 export class TextFilterChangedEvent extends CustomEvent<LapisTextFilter> {
     constructor(detail: LapisTextFilter) {
-        super('gs-text-filter-changed', {
+        super(gsEventNames.textFilterChanged, {
             detail,
             bubbles: true,
             composed: true,

package/src/preact/textFilter/text-filter.stories.tsx

@@ -5,6 +5,7 @@ import data from './__mockData__/aggregated_hosts.json';
 import { TextFilter, type TextFilterProps } from './text-filter';
 import { previewHandles } from '../../../.storybook/preview';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
+import { gsEventNames } from '../../utils/gsEventNames';
 import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectErrorMessage';
 
@@ -13,7 +14,7 @@ const meta: Meta<TextFilterProps> = {
     component: TextFilter,
     parameters: {
         actions: {
-            handles: ['gs-text-filter-changed', ...previewHandles],
+            handles: [gsEventNames.textFilterChanged, ...previewHandles],
         },
         fetchMock: {
             mocks: [
@@ -93,7 +94,7 @@ export const RemoveInitialValue: StoryObj<TextFilterProps> = {
 
         const changedListenerMock = fn();
         await step('Setup event listener mock', () => {
-            canvasElement.addEventListener('gs-text-filter-changed', changedListenerMock);
+            canvasElement.addEventListener(gsEventNames.textFilterChanged, changedListenerMock);
         });
 
         await waitFor(async () => {
@@ -136,7 +137,7 @@ export const KeepsPartialInputInInputField: StoryObj<TextFilterProps> = {
 
         const changedListenerMock = fn();
         await step('Setup event listener mock', () => {
-            canvasElement.addEventListener('gs-text-filter-changed', changedListenerMock);
+            canvasElement.addEventListener(gsEventNames.textFilterChanged, changedListenerMock);
         });
         const inputField = () => canvas.getByPlaceholderText('Enter a host name', { exact: false });
         async function typeAndBlur(input: string) {

package/src/utilEntrypoint.ts

@@ -38,3 +38,5 @@ export { LineageFilterChangedEvent } from './preact/lineageFilter/LineageFilterC
 export { TextFilterChangedEvent } from './preact/textFilter/TextFilterChangedEvent';
 
 export type { MutationAnnotations, MutationAnnotation } from './web-components/mutation-annotations-context';
+
+export { gsEventNames } from './utils/gsEventNames';

package/src/utils/gsEventNames.ts

@@ -0,0 +1,9 @@
+export const gsEventNames = {
+    error: 'gs-error',
+    dateRangeFilterChanged: 'gs-date-range-filter-changed',
+    dateRangeOptionChanged: 'gs-date-range-option-changed',
+    mutationFilterChanged: 'gs-mutation-filter-changed',
+    lineageFilterChanged: 'gs-lineage-filter-changed',
+    locationChanged: 'gs-location-changed',
+    textFilterChanged: 'gs-text-filter-changed',
+} as const;

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

@@ -10,6 +10,7 @@ import './gs-date-range-filter';
 import '../gs-app';
 import { toYYYYMMDD } from '../../preact/dateRangeFilter/dateConversion';
 import { dateRangeOptionPresets } from '../../preact/dateRangeFilter/dateRangeOption';
+import { gsEventNames } from '../../utils/gsEventNames';
 import { withinShadowRoot } from '../withinShadowRoot.story';
 
 const codeExample = String.raw`
@@ -29,7 +30,7 @@ const meta: Meta<Required<DateRangeFilterProps>> = {
     component: 'gs-date-range-filter',
     parameters: withComponentDocs({
         actions: {
-            handles: ['gs-date-range-filter-changed', 'gs-date-range-option-changed', ...previewHandles],
+            handles: [gsEventNames.dateRangeFilterChanged, gsEventNames.dateRangeOptionChanged, ...previewHandles],
         },
         fetchMock: {},
         componentDocs: {
@@ -144,8 +145,8 @@ export const FiresEvents: StoryObj<Required<DateRangeFilterProps>> = {
         const filterChangedListenerMock = fn();
         const optionChangedListenerMock = fn();
         await step('Setup event listener mock', () => {
-            canvasElement.addEventListener('gs-date-range-filter-changed', filterChangedListenerMock);
-            canvasElement.addEventListener('gs-date-range-option-changed', optionChangedListenerMock);
+            canvasElement.addEventListener(gsEventNames.dateRangeFilterChanged, filterChangedListenerMock);
+            canvasElement.addEventListener(gsEventNames.dateRangeOptionChanged, optionChangedListenerMock);
         });
 
         await step('Expect last 6 months to be selected', async () => {

package/src/web-components/input/gs-date-range-filter.tsx

@@ -5,6 +5,7 @@ import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { DateRangeFilter, type DateRangeFilterProps } from '../../preact/dateRangeFilter/date-range-filter';
 import { type DateRangeOptionChangedEvent } from '../../preact/dateRangeFilter/dateRangeOption';
+import { type gsEventNames } from '../../utils/gsEventNames';
 import { type Equals, type Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapter } from '../PreactLitAdapter';
 
@@ -143,8 +144,8 @@ declare global {
     }
 
     interface HTMLElementEventMap {
-        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
-        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
+        [gsEventNames.dateRangeFilterChanged]: CustomEvent<Record<string, string>>;
+        [gsEventNames.dateRangeOptionChanged]: DateRangeOptionChangedEvent;
     }
 }