@jbrowse/core 4.2.1 → 5.0.0-beta.1

package/esm/BaseFeatureWidget/SequenceFeatureDetails/seqtypes/SequenceDisplay.d.ts

@@ -1,10 +1,13 @@
 import type { SequenceFeatureDetailsModel } from '../model.ts';
-declare const SequenceDisplay: ({ chunks, start, color, strand, coordStart, model, }: {
+declare const SequenceDisplay: ({ chunks, coordStart, labelWidth, remainder, color, strand, highlight, onHoverBase, model, }: {
     chunks: string[];
-    start: number;
-    coordStart?: number;
+    coordStart: number;
+    labelWidth: number;
+    remainder?: number;
     strand?: number;
     color?: string;
+    highlight?: (index: number) => string | undefined;
+    onHoverBase?: (base0: number) => void;
     model: SequenceFeatureDetailsModel;
-}) => import("react/jsx-runtime").JSX.Element[];
+}) => import("react").JSX.Element[];
 export default SequenceDisplay;

package/esm/BaseFeatureWidget/SequenceFeatureDetails/seqtypes/SequenceDisplay.js

@@ -1,22 +1,78 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from 'react';
 import { observer } from 'mobx-react';
-const SequenceDisplay = observer(function SequenceDisplay({ chunks, start, color, strand = 1, coordStart = start, model, }) {
+// Cumulative count of non-space characters before each chunk. Coordinate
+// spacing inserts spaces into chunks, so the visible character offset differs
+// from the underlying sequence index that `highlight` is keyed on.
+function chunkSequenceOffsets(chunks) {
+    const offsets = [];
+    let total = 0;
+    for (const chunk of chunks) {
+        offsets.push(total);
+        total += chunk.replaceAll(' ', '').length;
+    }
+    return offsets;
+}
+const SequenceDisplay = observer(function SequenceDisplay({ chunks, coordStart, labelWidth, remainder = 0, color, strand = 1, highlight, onHoverBase, model, }) {
     const { charactersPerRow, showCoordinates } = model;
-    return chunks.map((chunk, idx) => {
-        const f = coordStart - (start % charactersPerRow);
-        const prefix = (idx === 0 && start % charactersPerRow === 0) || idx > 0
-            ? `${`${f + idx * strand * charactersPerRow}`.padStart(4)}   `
+    // rows only become visible through the labels and line breaks that
+    // showCoordinates turns on; without it the container wraps the text itself,
+    // so collapsing to a single span renders identically out of far fewer nodes
+    // (a 100kb gene is ~1000 rows)
+    const rows = showCoordinates ? chunks : [chunks.join('')];
+    const sequenceOffsets = highlight || onHoverBase ? chunkSequenceOffsets(rows) : undefined;
+    return rows.map((chunk, idx) => {
+        // coordinate of the row's first column, which for a mid-row first chunk sits
+        // `remainder` characters back
+        const f = coordStart - remainder * strand;
+        const prefix = idx > 0 || remainder === 0
+            ? `${`${f + idx * strand * charactersPerRow}`.padStart(labelWidth)}   `
             : '';
-        const postfix = idx === chunks.length - 1 &&
-            (chunks.at(-1)?.replaceAll(' ', '').length || 0) +
-                (idx === 0 ? start % charactersPerRow : 0) !==
-                charactersPerRow
+        const isLastChunk = idx === rows.length - 1;
+        // a partial final row (not filled to charactersPerRow) gets no trailing
+        // newline; every full row does
+        const lastRowCharCount = chunk.replaceAll(' ', '').length + (idx === 0 ? remainder : 0);
+        const postfix = isLastChunk && lastRowCharCount !== charactersPerRow
             ? null
             : showCoordinates
                 ? ' \n'
                 : '';
-        return (_jsxs(Fragment, { children: [showCoordinates ? prefix : null, _jsx("span", { style: { background: color }, children: chunk }), postfix] }, `${chunk}-${idx}`));
+        return (_jsxs(Fragment, { children: [showCoordinates && prefix ? (_jsx("span", { "data-no-fasta": "coord", children: prefix })) : null, highlight && sequenceOffsets ? (_jsx(HighlightedChunk, { chunk: chunk, sequenceOffset: sequenceOffsets[idx], color: color, highlight: highlight })) : (_jsx("span", { style: { background: color }, onMouseMove: onHoverBase && sequenceOffsets
+                        ? event => {
+                            const k = sequenceOffsets[idx] +
+                                nonSpaceCharsBeforeCursor(event, chunk);
+                            onHoverBase(coordStart + strand * k - 1);
+                        }
+                        : undefined, children: chunk })), postfix] }, `${chunk}-${idx}`));
     });
 });
+// Non-space characters before the cursor within a monospace chunk span, i.e.
+// the sequence index (within the chunk) of the base under the cursor. Uses the
+// span's measured width since every glyph is equal-width; coordinate-spacing
+// spaces are skipped so the index lines up with the underlying sequence.
+function nonSpaceCharsBeforeCursor(event, chunk) {
+    const rect = event.currentTarget.getBoundingClientRect();
+    const frac = (event.clientX - rect.left) / rect.width;
+    const col = Math.min(chunk.length - 1, Math.max(0, Math.floor(frac * chunk.length)));
+    let count = 0;
+    for (let i = 0; i < col; i++) {
+        if (chunk[i] !== ' ') {
+            count++;
+        }
+    }
+    return count;
+}
+// Renders a chunk one character per span, applying `highlight` to each
+// non-space character. Spaces keep the base `color` so the row background stays
+// contiguous.
+function HighlightedChunk({ chunk, sequenceOffset, color, highlight, }) {
+    let seqIndex = sequenceOffset;
+    const spans = [];
+    for (let i = 0; i < chunk.length; i++) {
+        const ch = chunk[i];
+        const background = ch === ' ' ? color : (highlight(seqIndex++) ?? color);
+        spans.push(_jsx("span", { style: { background }, children: ch }, i));
+    }
+    return _jsx(_Fragment, { children: spans });
+}
 export default SequenceDisplay;

package/esm/BaseFeatureWidget/SequenceFeatureDetails/seqtypes/renderSequenceSegments.d.ts

@@ -0,0 +1,14 @@
+import type { SequenceFeatureDetailsModel } from '../model.ts';
+export interface SeqSegment {
+    key: string;
+    str: string;
+    color?: string;
+}
+export declare function flankSegment(key: string, str: string | undefined, color: string, transform?: (s: string) => string): SeqSegment[];
+export declare function renderSequenceSegments({ segments, model, mult, coordStart, onHoverBase, }: {
+    segments: SeqSegment[];
+    model: SequenceFeatureDetailsModel;
+    mult: number;
+    coordStart: number;
+    onHoverBase?: (base0: number) => void;
+}): import("react").ReactNode[];

package/esm/BaseFeatureWidget/SequenceFeatureDetails/seqtypes/renderSequenceSegments.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { coordLabelWidth, splitString } from '../util.js';
+import SequenceDisplay from './SequenceDisplay.js';
+// An up/downstream flank contributes a segment only when its sequence was
+// fetched; `transform` applies e.g. the cDNA lower-casing. Returns 0 or 1
+// segments so it can be spread into a segment list.
+export function flankSegment(key, str, color, transform = s => s) {
+    return str ? [{ key, str: transform(str), color }] : [];
+}
+// Lays a list of colored segments (upstream, exons/UTRs/introns, downstream)
+// into <SequenceDisplay> rows, threading the running row-fill remainder and
+// genomic coordinate across segments so rows and coordinate labels stay
+// continuous. Segments that produce no visible characters are skipped. strand
+// `mult` is +1 (forward) or -1 (reverse, where coordinates count down).
+export function renderSequenceSegments({ segments, model, mult, coordStart, onHoverBase, }) {
+    const { charactersPerRow, showCoordinates } = model;
+    // computed across every segment up front: the segments share rows, so each
+    // one has to pad its labels to the whole panel's width, not its own
+    const labelWidth = coordLabelWidth({
+        firstCoord: coordStart,
+        totalLength: segments.reduce((a, b) => a + b.str.length, 0),
+        charactersPerRow,
+        strand: mult,
+    });
+    let currCoord = coordStart;
+    let currRemainder = 0;
+    const nodes = [];
+    for (const { key, str, color } of segments) {
+        const { segments: chunks, remainder } = splitString({
+            str,
+            charactersPerRow,
+            currRemainder,
+            showCoordinates,
+        });
+        if (chunks.length) {
+            nodes.push(_jsx(SequenceDisplay, { model: model, color: color, strand: mult, coordStart: currCoord, labelWidth: labelWidth, remainder: currRemainder, chunks: chunks, onHoverBase: onHoverBase }, key));
+            currRemainder = remainder;
+            currCoord += str.length * mult;
+        }
+    }
+    return nodes;
+}

package/esm/BaseFeatureWidget/SequenceFeatureDetails/test_data/DLGAP3.d.ts

@@ -52,6 +52,7 @@ declare const _default: {
             name?: undefined;
             protein_id?: undefined;
         } | {
+            transcript_id?: undefined;
             source: string;
             type: string;
             start: number;
@@ -70,7 +71,6 @@ declare const _default: {
             tag: string;
             uniqueId: string;
             parentId: string;
-            transcript_id?: undefined;
         })[];
         uniqueId: string;
         parentId: string;

package/esm/BaseFeatureWidget/SequenceFeatureDetails/test_data/NCDN.d.ts

@@ -48,10 +48,11 @@ declare const _default: {
             uniqueId: string;
             parentId: string;
             id?: undefined;
-            name?: undefined;
             note?: undefined;
             protein_id?: undefined;
+            name?: undefined;
         } | {
+            transcript_id?: undefined;
             source: string;
             type: string;
             start: number;
@@ -71,11 +72,11 @@ declare const _default: {
             tag: string;
             uniqueId: string;
             parentId: string;
-            transcript_id?: undefined;
         })[];
         uniqueId: string;
         parentId: string;
     } | {
+        tag?: undefined;
         source: string;
         type: string;
         start: number;
@@ -92,6 +93,9 @@ declare const _default: {
         product: string;
         transcript_id: string;
         subfeatures: ({
+            id?: undefined;
+            note?: undefined;
+            protein_id?: undefined;
             source: string;
             type: string;
             start: number;
@@ -107,11 +111,9 @@ declare const _default: {
             transcript_id: string;
             uniqueId: string;
             parentId: string;
-            id?: undefined;
             name?: undefined;
-            note?: undefined;
-            protein_id?: undefined;
         } | {
+            transcript_id?: undefined;
             source: string;
             type: string;
             start: number;
@@ -130,11 +132,9 @@ declare const _default: {
             protein_id: string;
             uniqueId: string;
             parentId: string;
-            transcript_id?: undefined;
         })[];
         uniqueId: string;
         parentId: string;
-        tag?: undefined;
     })[];
     uniqueId: string;
 };

package/esm/BaseFeatureWidget/SequenceFeatureDetails/types.d.ts

@@ -1,8 +1,15 @@
-import type { SequenceFeatureDetailsModel } from './model.ts';
 import type { SimpleFeatureSerialized } from '../../util/index.ts';
 import type { SeqState } from '../util.tsx';
+import type { SequenceDisplayMode, SequenceFeatureDetailsModel, SequenceHoverTarget } from './model.ts';
+import type { RefObject } from 'react';
 export interface SequencePanelProps {
     sequence: SeqState;
     feature: SimpleFeatureSerialized;
     model: SequenceFeatureDetailsModel;
+    mode: SequenceDisplayMode;
+    revcomp?: boolean;
+    assemblyGeneticCodeId?: number;
+    assemblyName?: string;
+    hoverTarget?: SequenceHoverTarget;
+    ref?: RefObject<HTMLDivElement | null>;
 }

package/esm/BaseFeatureWidget/SequenceFeatureDetails/useSequenceData.d.ts

@@ -1,13 +1,13 @@
 import type { SimpleFeatureSerialized } from '../../util/index.ts';
-import type { ErrorState, SeqState } from '../util.tsx';
-export declare function useSequenceData({ feature, sequence, }: {
+import type { Feat, SeqState } from '../util.tsx';
+export declare function getSequenceData({ feature, sequence, revcomp, }: {
     feature: SimpleFeatureSerialized;
-    sequence?: SeqState | ErrorState;
+    sequence: SeqState;
+    revcomp: boolean;
 }): {
     seq: string;
-    upstream: string | undefined;
-    downstream: string | undefined;
-    cds: any[];
-    exons: any[];
-    utr: any[];
-} | undefined;
+    upstream?: string;
+    downstream?: string;
+    cds: Feat[];
+    exons: Feat[];
+};

package/esm/BaseFeatureWidget/SequenceFeatureDetails/useSequenceData.js

@@ -1,16 +1,21 @@
-import { revcom } from "../../util/index.js";
-import { calculateUTRs2, calculateUTRs, filterSuccessiveElementsWithSameStartAndEndCoord, revlist, } from "../util.js";
+import { revlist } from '../../util/revlist.js';
+import { revcom } from '../../util/seqUtils.js';
+import { filterSuccessiveElementsWithSameStartAndEndCoord } from '../util.js';
+import { displayStrand } from './util.js';
 function prepareSubfeatures(feature) {
     const { start, subfeatures } = feature;
     return (subfeatures
-        ?.sort((a, b) => a.start - b.start)
+        ?.toSorted((a, b) => a.start - b.start)
         .map(sub => ({
         ...sub,
         start: sub.start - start,
         end: sub.end - start,
-    })) || []);
+    })) ?? []);
 }
 function processFeatureData(children, feature) {
+    // Filter duplicate entries in cds and exon lists. Duplicate entries may be
+    // rare but were seen in Gencode v36 track NCList (produces broken protein
+    // translations if included)
     const featureType = feature.type?.toLowerCase();
     const isMatureProteinRegion = featureType === 'mature_protein_region_of_cds';
     const cds = isMatureProteinRegion
@@ -19,55 +24,34 @@ function processFeatureData(children, feature) {
             const type = sub.type?.toLowerCase();
             return type === 'cds' || type === 'mature_protein_region_of_cds';
         }));
-    const exons = filterSuccessiveElementsWithSameStartAndEndCoord(children.filter(sub => sub.type === 'exon'));
-    let utr = filterSuccessiveElementsWithSameStartAndEndCoord(children.filter(sub => sub.type?.match(/utr/i)));
-    if (!utr.length && cds.length && exons.length) {
-        utr = calculateUTRs(cds, exons);
-    }
-    else if (!utr.length && cds.length && !exons.length) {
-        utr = calculateUTRs2(cds, {
-            start: 0,
-            end: feature.end - feature.start,
-            type: 'gene',
-        });
-    }
-    return {
-        cds,
-        exons,
-        utr,
-    };
+    const exons = filterSuccessiveElementsWithSameStartAndEndCoord(children.filter(sub => sub.type?.toLowerCase() === 'exon'));
+    // annotated UTRs are deliberately not read: a UTR is just the exonic sequence
+    // outside the CDS, so the renderer derives the split from cds+exons. Trusting
+    // the annotation meant a transcript that named only one of its UTRs lost the
+    // other side from the cDNA entirely.
+    return { cds, exons };
 }
-function handleReverseStrand(sequence, cds, exons, utr) {
+function handleReverseStrand(sequence, cds, exons) {
     const { seq, upstream = '', downstream = '' } = sequence;
     return {
         sequence: {
             seq: revcom(seq),
-            upstream: downstream ? revcom(downstream) : '',
-            downstream: upstream ? revcom(upstream) : '',
+            upstream: revcom(downstream),
+            downstream: revcom(upstream),
         },
         cds: revlist(cds, seq.length),
         exons: revlist(exons, seq.length),
-        utr: revlist(utr, seq.length),
     };
 }
-export function useSequenceData({ feature, sequence, }) {
+export function getSequenceData({ feature, sequence, revcomp, }) {
     const children = prepareSubfeatures(feature);
-    const { cds, exons, utr } = processFeatureData(children, feature);
-    if (!sequence || 'error' in sequence) {
-        return undefined;
-    }
-    else {
-        const { sequence: adjustedSequence, cds: adjustedCds, exons: adjustedExons, utr: adjustedUtr, } = feature.strand === -1
-            ? handleReverseStrand(sequence, cds, exons, utr)
-            : { sequence, cds, exons, utr };
-        const { seq, upstream, downstream } = adjustedSequence;
-        return {
-            seq,
-            upstream,
-            downstream,
-            cds: adjustedCds,
-            exons: adjustedExons,
-            utr: adjustedUtr,
-        };
-    }
+    const { cds, exons } = processFeatureData(children, feature);
+    const { sequence: adjusted, cds: adjustedCds, exons: adjustedExons, } = displayStrand(feature, revcomp) === -1
+        ? handleReverseStrand(sequence, cds, exons)
+        : { sequence, cds, exons };
+    return {
+        ...adjusted,
+        cds: adjustedCds,
+        exons: adjustedExons,
+    };
 }

package/esm/BaseFeatureWidget/SequenceFeatureDetails/useSequenceFetch.d.ts

@@ -0,0 +1,23 @@
+import type { AbstractSessionModel, SimpleFeatureSerialized } from '../../util/index.ts';
+export declare function useSequenceFetch({ session, assemblyName, feature, upDownBp, }: {
+    session: AbstractSessionModel;
+    assemblyName: string | undefined;
+    feature: SimpleFeatureSerialized;
+    upDownBp: number;
+}): {
+    sequence: {
+        error: string;
+        seq?: undefined;
+        upstream?: undefined;
+        downstream?: undefined;
+    } | {
+        error?: undefined;
+        seq: string;
+        upstream: string;
+        downstream: string;
+    } | undefined;
+    error: unknown;
+    status: import("../../util/progress.ts").RpcStatus | undefined;
+    assemblyGeneticCodeId: number | undefined;
+    onForceLoad: () => void;
+};

package/esm/BaseFeatureWidget/SequenceFeatureDetails/useSequenceFetch.js

@@ -0,0 +1,31 @@
+import { useState } from 'react';
+import { useFeatureSequence } from '../../util/useFeatureSequence.js';
+// shared between the inline panel and the "open in dialog" view: fetches the
+// feature sequence and exposes a force-load trigger for over-limit regions
+export function useSequenceFetch({ session, assemblyName, feature, upDownBp, }) {
+    const [forceLoad, setForceLoad] = useState(false);
+    const { sequence, error, status } = useFeatureSequence({
+        assemblyName,
+        session,
+        start: feature.start,
+        end: feature.end,
+        refName: feature.refName,
+        upDownBp,
+        forceLoad,
+    });
+    // assembly-configured translation table for the feature's contig (e.g. a
+    // mitochondrial contig = 2); the protein panel uses it as the fallback when
+    // the feature itself carries no transl_table attribute
+    const assembly = assemblyName
+        ? session.assemblyManager.get(assemblyName)
+        : undefined;
+    return {
+        sequence,
+        error,
+        status,
+        assemblyGeneticCodeId: assembly?.getGeneticCodeId(feature.refName),
+        onForceLoad: () => {
+            setForceLoad(true);
+        },
+    };
+}

package/esm/BaseFeatureWidget/SequenceFeatureDetails/util.d.ts

@@ -1,3 +1,10 @@
+import type { SimpleFeatureSerialized } from '../../util/index.ts';
+import type { Feat } from '../util.tsx';
+/**
+ * Splits a string into chunks for display with optional coordinate spacing.
+ * The first chunk may be short to complete a row partially filled by a prior
+ * call (tracked via `currRemainder`).
+ */
 export declare function splitString({ str, charactersPerRow, showCoordinates, currRemainder, spacingInterval, }: {
     str: string;
     charactersPerRow: number;
@@ -5,6 +12,88 @@ export declare function splitString({ str, charactersPerRow, showCoordinates, cu
     currRemainder?: number;
     spacingInterval?: number;
 }): {
-    segments: any[];
+    segments: string[];
     remainder: number;
 };
+/**
+ * Width to pad every coordinate label in a panel to, so all rows start their
+ * sequence at the same column. Row labels step by charactersPerRow from
+ * firstCoord, so the longest is at one end of the panel or the other. Floors at
+ * 4 to keep the historical look of short (feature-relative) labels.
+ */
+export declare function coordLabelWidth({ firstCoord, totalLength, charactersPerRow, strand, }: {
+    firstCoord: number;
+    totalLength: number;
+    charactersPerRow: number;
+    strand: number;
+}): number;
+/**
+ * The strand the panel reads. A minus-strand feature is already rendered
+ * reverse-complemented, so the revcomp toggle flips whichever strand the
+ * feature would otherwise be read on rather than forcing the minus strand.
+ */
+export declare function displayStrand(feature: SimpleFeatureSerialized, revcomp: boolean): -1 | 1;
+/**
+ * Computes the coordinate multiplier and genomic coordinate start for a sequence
+ * display. Both GenomicSequence and CDNASequence use this to initialize their
+ * coordinate-tracking state.
+ */
+export declare function computeCoordProps({ feature, useGenomicCoords, upstream, revcomp, }: {
+    feature: SimpleFeatureSerialized;
+    useGenomicCoords: boolean;
+    upstream: string | undefined;
+    revcomp: boolean;
+}): {
+    mult: number;
+    coordStart: number;
+};
+/**
+ * The exonic blocks making up a transcript, feature-relative. Without exon
+ * subfeatures the CDS blocks stand in for them, the first and last stretched to
+ * the feature bounds so the untranslated flanks are still rendered.
+ *
+ * The exon path returns them verbatim, and that asymmetry is deliberate: exons
+ * that do not reach the feature's bounds are the annotation saying the flanks
+ * are not exonic, which is what CAT/liftoff means when it spans a transcript
+ * over the source alignment and emits exons only where the CDS is supported.
+ * Stretching those to the bounds the way the CDS branch does would fabricate
+ * exonic sequence out of intron. `CDNASequence` renders the untiled stretch
+ * uncolored instead, which is what keeps its genomic labels honest.
+ */
+export declare function transcriptRegions({ cds, exons, featureLength, }: {
+    cds: Feat[];
+    exons: Feat[];
+    featureLength: number;
+}): Feat[];
+/**
+ * Splits an exonic region into its coding and untranslated stretches. `cds` must
+ * be sorted by start. A region no CDS overlaps comes back wholly untranslated,
+ * so a CDS annotated outside the exons degrades to an uncolored transcript
+ * rather than dropping sequence or throwing.
+ */
+export declare function splitRegionByCds(region: Feat, cds: Feat[]): {
+    start: number;
+    end: number;
+    isCds: boolean;
+}[];
+/**
+ * Returns the display string for an intron. Collapses long introns to
+ * "NNN...NNN" when collapseIntron is true and the intron exceeds 2*intronBp.
+ */
+export declare function getIntronDisplayStr(intron: string, intronBp: number, collapseIntron: boolean): string;
+/**
+ * The sequence panel as FASTA, for the copy and download rows.
+ *
+ * Not the panel's text. The panel draws a position label down its left edge and
+ * a space every ten bases, both of which are there to be read by a person, and
+ * a `>`-headed file carrying either parses nowhere — the header promises a tool
+ * it can be parsed and then hands it `1201   ACGTACGTAC ACGT…`. So: drop every
+ * `[data-no-fasta]` node (the legend, and those labels), then strip the spacing
+ * out of each sequence line. A line opening with `>` is a header and survives
+ * whole, since a FASTA description is words.
+ *
+ * What the panel renders is still `el.textContent`, and that is what the HTML
+ * rows copy — coordinates, colors and all. Selecting the panel by hand gets it
+ * too, so nothing here is the only way to a positioned readout.
+ */
+export declare function getSequenceFasta(el: HTMLElement): string;