@genspectrum/dashboard-components 0.19.2 → 0.19.4

package/src/preact/genomeViewer/CDSPlot.tsx

@@ -0,0 +1,219 @@
+import { Fragment, type FunctionComponent } from 'preact';
+import { useMemo, useState } from 'preact/hooks';
+
+import { type CDSFeature } from './loadGff3';
+import { MinMaxRangeSlider } from '../components/min-max-range-slider';
+import Tooltip from '../components/tooltip';
+import { singleGraphColorRGBByName } from '../shared/charts/colors';
+
+const MAX_TICK_NUMBER = 20;
+const MIN_TICK_NUMBER = 2;
+
+function getMaxTickNumber(fullWidth: number): number {
+    const baseValue = 1000;
+
+    const normalizedRatio = fullWidth / baseValue;
+
+    const ticks = Math.round(MAX_TICK_NUMBER * normalizedRatio);
+    return Math.max(MIN_TICK_NUMBER, Math.min(MAX_TICK_NUMBER, ticks));
+}
+
+function getTicks(zoomStart: number, zoomEnd: number, fullWidth: number) {
+    const maxTickNumber = getMaxTickNumber(fullWidth);
+    const length = zoomEnd - zoomStart;
+    const minTickSize = length / maxTickNumber;
+    let maxTickSize = 10 ** Math.round(Math.log(minTickSize) / Math.log(10));
+    const numTicks = Math.round(length / maxTickSize);
+    if (numTicks > maxTickNumber) {
+        if (numTicks > 2 * maxTickNumber) {
+            maxTickSize = maxTickSize * 5;
+        } else {
+            maxTickSize = maxTickSize * 2;
+        }
+    }
+    const ticks = [];
+
+    const offset = Math.ceil(zoomStart / maxTickSize);
+    ticks.push({ start: zoomStart, end: zoomStart + maxTickSize - (zoomStart % maxTickSize) });
+    for (let i = 0; i <= numTicks; i++) {
+        const start = i * maxTickSize + offset * maxTickSize;
+        if (start >= zoomEnd) {
+            break;
+        }
+        const end = (i + 1) * maxTickSize + offset * maxTickSize;
+        if (end > zoomEnd) {
+            ticks.push({ start, end: zoomEnd });
+            break;
+        }
+        ticks.push({ start, end });
+    }
+    return ticks;
+}
+
+interface XAxisProps {
+    zoomStart: number;
+    zoomEnd: number;
+    fullWidth: number;
+}
+
+const XAxis: FunctionComponent<XAxisProps> = (componentProps) => {
+    const { zoomStart, zoomEnd, fullWidth } = componentProps;
+
+    const ticks = useMemo(() => getTicks(zoomStart, zoomEnd, fullWidth), [zoomStart, zoomEnd, fullWidth]);
+    const visibleRegionLength = zoomEnd - zoomStart;
+    const averageWidth = visibleRegionLength / ticks.length;
+    return (
+        <div className={'h-6 relative'}>
+            {ticks.map((tick, idx) => {
+                const width = tick.end - tick.start;
+                const widthPercent = (width / visibleRegionLength) * 100;
+                const leftPercent = ((tick.start - zoomStart) / visibleRegionLength) * 100;
+                return (
+                    <div
+                        key={idx}
+                        class='absolute text-xs text-black px-1 hover:opacity-80 border-l border-r border-gray-400 border-t'
+                        style={{
+                            left: `calc(${leftPercent}% - 1px)`,
+                            width: `calc(${widthPercent}% - 1px)`,
+                        }}
+                    >
+                        {width >= averageWidth ? tick.start : ''}
+                    </div>
+                );
+            })}
+        </div>
+    );
+};
+
+function getTooltipPosition(cds_start: number, cds_end: number, genomeLength: number) {
+    const tooltipY = cds_start + (cds_end - cds_start) / 2 < genomeLength / 2 ? 'start' : 'end';
+    return `bottom-${tooltipY}` as const;
+}
+
+interface TooltipContentProps {
+    cds: CDSFeature;
+}
+
+const TooltipContent: FunctionComponent<TooltipContentProps> = (componentProps) => {
+    const { cds } = componentProps;
+    const cdsLength = cds.positions.reduce((acc, pos) => acc + pos.end - pos.start, 0);
+    const cdsCoordinates = cds.positions.map((pos) => `${pos.start}-${pos.end}`).join(', ');
+    return (
+        <>
+            <p>
+                <span className='font-bold'>{cds.label}</span>
+            </p>
+            <table>
+                <tbody>
+                    <tr>
+                        <th className='font-medium px-2 text-right'>CDS Length</th>
+                        <td>{cdsLength}</td>
+                    </tr>
+                    <tr>
+                        <th className='font-medium px-2 text-right'>CDS Coordinates</th>
+                        <td>{cdsCoordinates}</td>
+                    </tr>
+                </tbody>
+            </table>
+        </>
+    );
+};
+
+interface CDSBarsProps {
+    gffData: CDSFeature[][];
+    zoomStart: number;
+    zoomEnd: number;
+}
+
+const CDSBars: FunctionComponent<CDSBarsProps> = (componentProps) => {
+    const { gffData, zoomStart, zoomEnd } = componentProps;
+    const visibleRegionLength = zoomEnd - zoomStart;
+    return (
+        <>
+            {gffData.map((data, listId) => (
+                <div className={'w-full h-6 relative'} key={listId}>
+                    {data.map((cds, idx) => (
+                        <Fragment key={idx}>
+                            {cds.positions.map((position, posIdx) => {
+                                const start = Math.max(position.start, zoomStart);
+                                const end = Math.min(position.end, zoomEnd);
+
+                                if (start >= end) {
+                                    return null;
+                                }
+
+                                const widthPercent = ((end - start) / visibleRegionLength) * 100;
+                                const leftPercent = ((start - zoomStart) / visibleRegionLength) * 100;
+                                const tooltipPosition = getTooltipPosition(start, end, visibleRegionLength);
+                                return (
+                                    <Tooltip
+                                        content={<TooltipContent cds={cds} />}
+                                        position={tooltipPosition}
+                                        key={`${idx}-${posIdx}`}
+                                        tooltipStyle={{ left: `${leftPercent}%` }}
+                                    >
+                                        <div
+                                            className='absolute text-xs text-white rounded px-1 py-0.5 cursor-pointer hover:opacity-80 shadow-md'
+                                            style={{
+                                                left: `${leftPercent}%`,
+                                                width: `${widthPercent}%`,
+                                                backgroundColor: singleGraphColorRGBByName(cds.color),
+                                                whiteSpace: 'nowrap',
+                                                overflow: 'hidden',
+                                                textOverflow: 'ellipsis',
+                                            }}
+                                        >
+                                            {cds.label}
+                                        </div>
+                                    </Tooltip>
+                                );
+                            })}
+                        </Fragment>
+                    ))}
+                </div>
+            ))}
+        </>
+    );
+};
+
+interface CDSProps {
+    gffData: CDSFeature[][];
+    genomeLength: number;
+    width: number;
+}
+
+const CDSPlot: FunctionComponent<CDSProps> = (componentProps) => {
+    const { gffData, genomeLength, width } = componentProps;
+
+    const [zoomStart, setZoomStart] = useState(0);
+    const [zoomEnd, setZoomEnd] = useState(genomeLength);
+
+    const updateZoomStart = (newStart: number) => {
+        setZoomStart(newStart);
+    };
+
+    const updateZoomEnd = (newEnd: number) => {
+        setZoomEnd(newEnd);
+    };
+
+    return (
+        <div class='p-4'>
+            <CDSBars gffData={gffData} zoomStart={zoomStart} zoomEnd={zoomEnd} />
+            <XAxis zoomStart={zoomStart} zoomEnd={zoomEnd} fullWidth={width} />
+            <div class='relative w-full h-5'>
+                <MinMaxRangeSlider
+                    min={zoomStart}
+                    max={zoomEnd}
+                    setMin={updateZoomStart}
+                    setMax={updateZoomEnd}
+                    rangeMin={0}
+                    rangeMax={genomeLength}
+                    step={1}
+                />
+            </div>
+            <XAxis zoomStart={0} zoomEnd={genomeLength} fullWidth={width} />
+        </div>
+    );
+};
+
+export default CDSPlot;

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,180 @@
+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 removeQuotes(input: string) {
+    return input.replace(/^['"](.*)['"]$/, '$1');
+}
+
+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 (removeQuotes(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 labelAttribute = attrPairs.get('Name') || attrPairs.get('gene') || attrPairs.get('gene_name');
+        if (!labelAttribute) {
+            throw new UserFacingError(
+                'Invalid gff3 source',
+                `No label found for feature: "${line}", must contain label in Name, gene, or gene_name attribute`,
+            );
+        }
+        const label = removeQuotes(labelAttribute);
+        const id = removeQuotes(attrPairs.get('ID') || labelAttribute);
+        const parentAttribute = attrPairs.get('Parent');
+        if (parentAttribute) {
+            const parent = removeQuotes(parentAttribute);
+            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 () => {