@jbrowse/core 4.2.1 → 5.0.0-beta.1

package/esm/BaseFeatureWidget/SequenceFeatureDetails/model.js

@@ -1,89 +1,92 @@
-import { addDisposer, destroy, types } from '@jbrowse/mobx-state-tree';
-import { autorun } from 'mobx';
-import { localStorageGetBoolean, localStorageGetItem, localStorageGetNumber, localStorageSetItem, } from "../../util/index.js";
-function localStorageSetNumber(key, value) {
-    localStorageSetItem(key, JSON.stringify(value));
-}
-function localStorageSetBoolean(key, value) {
-    localStorageSetItem(key, JSON.stringify(value));
+import { types } from '@jbrowse/mobx-state-tree';
+import { localStorageGetBoolean, localStorageGetItem, localStorageGetNumber, localStorageSetBoolean, localStorageSetItem, localStorageSetNumber, } from '../../util/index.js';
+function parseShowCoordinatesMode(val) {
+    return val === 'relative' || val === 'genomic' ? val : 'none';
 }
 const p = 'sequenceFeatureDetails';
+// A row has to hold at least one base: `splitString` advances the string by
+// this, so a width of zero never finishes it.
+function clampCharactersPerRow(n) {
+    return Math.max(1, Math.floor(n));
+}
+// User preferences for the sequence readout, seeded from and written straight
+// back to localStorage. Nothing here is snapshotted or reads the tree, so an
+// instance is cheap and needs no lifecycle: a holder that only sometimes shows
+// a panel (e.g. a track's right-click dialog) creates one when it opens rather
+// than carrying it around.
 export function SequenceFeatureDetailsF() {
     return types
         .model('SequenceFeatureDetails')
         .volatile(() => ({
-        showCoordinatesSetting: localStorageGetItem(`${p}-showCoordinatesSetting`) || 'none',
+        /**
+         * #volatile
+         */
+        showCoordinatesSetting: parseShowCoordinatesMode(localStorageGetItem(`${p}-showCoordinatesSetting`)),
+        /**
+         * #volatile
+         */
         intronBp: localStorageGetNumber(`${p}-intronBp`, 10),
+        /**
+         * #volatile
+         */
         upDownBp: localStorageGetNumber(`${p}-upDownBp`, 100),
+        /**
+         * #volatile
+         */
         upperCaseCDS: localStorageGetBoolean(`${p}-upperCaseCDS`, true),
-        charactersPerRow: 100,
-        feature: undefined,
-        mode: '',
+        /**
+         * #volatile
+         * how wide a row of the readout is. Rows exist only while coordinates are
+         * shown — without them the panel wraps to its container — so this is what
+         * the labels step by, and the line width of the FASTA exported from that
+         * state.
+         */
+        charactersPerRow: clampCharactersPerRow(localStorageGetNumber(`${p}-charactersPerRow`, 100)),
     }))
         .actions(self => ({
-        setFeature(f) {
-            self.feature = f;
-        },
+        /**
+         * #action
+         */
         setUpDownBp(f) {
             self.upDownBp = f;
+            localStorageSetNumber(`${p}-upDownBp`, f);
         },
+        /**
+         * #action
+         */
         setIntronBp(f) {
             self.intronBp = f;
+            localStorageSetNumber(`${p}-intronBp`, f);
         },
+        /**
+         * #action
+         */
         setUpperCaseCDS(f) {
             self.upperCaseCDS = f;
+            localStorageSetBoolean(`${p}-upperCaseCDS`, f);
+        },
+        /**
+         * #action
+         */
+        setCharactersPerRow(f) {
+            const clamped = clampCharactersPerRow(f);
+            self.charactersPerRow = clamped;
+            localStorageSetNumber(`${p}-charactersPerRow`, clamped);
         },
+        /**
+         * #action
+         */
         setShowCoordinates(f) {
             self.showCoordinatesSetting = f;
-        },
-        setMode(mode) {
-            self.mode = mode;
+            localStorageSetItem(`${p}-showCoordinatesSetting`, f);
         },
     }))
         .views(self => ({
+        /**
+         * #getter
+         */
         get showCoordinates() {
             return self.showCoordinatesSetting !== 'none';
         },
-        get showGenomicCoordsOption() {
-            return (self.mode === 'gene' ||
-                self.mode === 'gene_updownstream' ||
-                self.mode === 'genomic' ||
-                self.mode === 'genomic_sequence_updownstream');
-        },
-        get hasCDS() {
-            const featureType = self.feature?.type?.toLowerCase();
-            if (featureType === 'mature_protein_region_of_cds') {
-                return true;
-            }
-            return self.feature?.subfeatures?.some(sub => {
-                const type = sub.type?.toLowerCase();
-                return type === 'cds' || type === 'mature_protein_region_of_cds';
-            });
-        },
-        get hasExon() {
-            return self.feature?.subfeatures?.some(sub => sub.type === 'exon');
-        },
-        get hasExonOrCDS() {
-            return this.hasExon || this.hasCDS;
-        },
-    }))
-        .actions(self => ({
-        afterCreate() {
-            addDisposer(self, autorun(function sequenceFeatureLocalStorageAutorun() {
-                localStorageSetNumber(`${p}-upDownBp`, self.upDownBp);
-                localStorageSetNumber(`${p}-intronBp`, self.intronBp);
-                localStorageSetBoolean(`${p}-upperCaseCDS`, self.upperCaseCDS);
-                localStorageSetItem(`${p}-showCoordinatesSetting`, self.showCoordinatesSetting);
-            }, { name: 'SequenceFeatureLocalStorage' }));
-            addDisposer(self, autorun(function sequenceFeatureModeAutorun() {
-                self.setMode(self.hasCDS ? 'cds' : self.hasExon ? 'cdna' : 'genomic');
-            }, { name: 'SequenceFeatureMode' }));
-        },
     }));
 }
-export function createSequenceFeatureDetailsModel() {
-    return SequenceFeatureDetailsF().create({});
-}
-export function destroySequenceFeatureDetailsModel(model) {
-    destroy(model);
-}

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

@@ -0,0 +1,21 @@
+import type { SimpleFeatureSerialized } from '../../util/index.ts';
+import type { SessionAssemblies } from '../../util/tracks.ts';
+/**
+ * Which assembly the sequence panel fetches this feature's bases from.
+ *
+ * The containing view's first assembly is only a proxy for the feature's own.
+ * A clicked synteny ribbon opens its details against the LinearSyntenyView,
+ * whose `assemblyNames` holds every row's, so the first is whichever genome
+ * sits on top — not the one the clicked side is on. The two sides normally
+ * share refNames (`chr1` in both), so picking wrong does not error: it renders
+ * another genome's sequence under the feature's coordinates, which is worse.
+ *
+ * A feature naming its own assembly therefore wins, but only if the session can
+ * open it. An unknown name would trade a wrong readout for a failed fetch, and
+ * a view assembly that at least exists beats that.
+ */
+export declare function panelAssemblyName({ feature, viewAssemblyNames, assemblyManager, }: {
+    feature: SimpleFeatureSerialized;
+    viewAssemblyNames: string[] | undefined;
+    assemblyManager: SessionAssemblies;
+}): string | undefined;

package/esm/BaseFeatureWidget/SequenceFeatureDetails/panelAssemblyName.js

@@ -0,0 +1,24 @@
+/**
+ * Which assembly the sequence panel fetches this feature's bases from.
+ *
+ * The containing view's first assembly is only a proxy for the feature's own.
+ * A clicked synteny ribbon opens its details against the LinearSyntenyView,
+ * whose `assemblyNames` holds every row's, so the first is whichever genome
+ * sits on top — not the one the clicked side is on. The two sides normally
+ * share refNames (`chr1` in both), so picking wrong does not error: it renders
+ * another genome's sequence under the feature's coordinates, which is worse.
+ *
+ * A feature naming its own assembly therefore wins, but only if the session can
+ * open it. An unknown name would trade a wrong readout for a failed fetch, and
+ * a view assembly that at least exists beats that.
+ */
+export function panelAssemblyName({ feature, viewAssemblyNames, assemblyManager, }) {
+    const fallback = viewAssemblyNames?.[0];
+    // SimpleFeatureSerialized is open-ended, so this arrives as `unknown`
+    const own = feature.assemblyName;
+    if (typeof own !== 'string' || !own) {
+        return fallback;
+    }
+    const canonical = assemblyManager.getCanonicalAssemblyName(own) ?? own;
+    return assemblyManager.has(canonical) ? canonical : fallback;
+}

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

@@ -1,8 +1,7 @@
 import type { SimpleFeatureSerialized } from '../../../util/index.ts';
 import type { Feat } from '../../util.tsx';
 import type { SequenceFeatureDetailsModel } from '../model.ts';
-declare const CDNASequence: ({ utr, cds, exons, sequence, upstream, downstream, feature, includeIntrons, collapseIntron, model, }: {
-    utr: Feat[];
+declare const CDNASequence: ({ cds, exons, sequence, upstream, downstream, feature, includeIntrons, collapseIntron, useGenomicCoords, revcomp, onHoverBase, model, }: {
     cds: Feat[];
     exons: Feat[];
     sequence: string;
@@ -11,6 +10,9 @@ declare const CDNASequence: ({ utr, cds, exons, sequence, upstream, downstream,
     feature: SimpleFeatureSerialized;
     includeIntrons?: boolean;
     collapseIntron?: boolean;
+    useGenomicCoords: boolean;
+    revcomp: boolean;
+    onHoverBase?: (base0: number) => void;
     model: SequenceFeatureDetailsModel;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default CDNASequence;

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

@@ -1,83 +1,101 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { observer } from 'mobx-react';
-import { cdsColor, updownstreamColor, utrColor } from "../consts.js";
-import { splitString } from "../util.js";
-import SequenceDisplay from "./SequenceDisplay.js";
-const CDNASequence = observer(function CDNASequence({ utr, cds, exons, sequence, upstream, downstream, feature, includeIntrons, collapseIntron, model, }) {
-    const { upperCaseCDS, intronBp, charactersPerRow, showCoordinates, showCoordinatesSetting, } = model;
+import SequenceLegend from '../SequenceLegend.js';
+import { cdsColor, updownstreamColor, utrColor } from '../consts.js';
+import { computeCoordProps, getIntronDisplayStr, splitRegionByCds, transcriptRegions, } from '../util.js';
+import { flankSegment, renderSequenceSegments, } from './renderSequenceSegments.js';
+const CDNASequence = observer(function CDNASequence({ cds, exons, sequence, upstream, downstream, feature, includeIntrons, collapseIntron, useGenomicCoords, revcomp, onHoverBase, model, }) {
+    const { upperCaseCDS, intronBp } = model;
     const hasCds = cds.length > 0;
-    const chunks = (cds.length ? [...cds, ...utr].sort((a, b) => a.start - b.start) : exons).filter(f => f.start !== f.end);
-    const toLower = (s) => (upperCaseCDS ? s.toLowerCase() : s);
-    const toUpper = (s) => (upperCaseCDS ? s.toUpperCase() : s);
-    const strand = feature.strand === -1 ? -1 : 1;
-    const fullGenomicCoordinates = showCoordinatesSetting === 'genomic' && includeIntrons && !collapseIntron;
-    const mult = fullGenomicCoordinates ? strand : 1;
-    let coordStart = fullGenomicCoordinates
-        ? strand > 0
-            ? feature.start + 1 - (upstream?.length || 0)
-            : feature.end + (upstream?.length || 0)
-        : 0;
-    let currStart = 0;
-    let currRemainder = 0;
-    let upstreamChunk = null;
-    if (upstream) {
-        const { segments, remainder } = splitString({
-            str: toLower(upstream),
-            charactersPerRow,
-            showCoordinates,
-        });
-        upstreamChunk = (_jsx(SequenceDisplay, { model: model, color: updownstreamColor, strand: mult, start: currStart, coordStart: coordStart, chunks: segments }));
-        currRemainder = remainder;
-        currStart = currStart + upstream.length * mult;
-        coordStart = coordStart + upstream.length * mult;
-    }
-    const middleChunks = [];
-    for (let idx = 0; idx < chunks.length; idx++) {
-        const chunk = chunks[idx];
-        const intron = sequence.slice(chunk.end, chunks[idx + 1]?.start);
-        const s = sequence.slice(chunk.start, chunk.end);
-        const { segments, remainder } = splitString({
-            str: hasCds
-                ? chunk.type === 'CDS'
-                    ? toUpper(s)
-                    : toLower(s)
-                : toUpper(s),
-            charactersPerRow,
-            currRemainder,
-            showCoordinates,
-        });
-        middleChunks.push(_jsx(SequenceDisplay, { model: model, color: chunk.type === 'CDS' ? cdsColor : utrColor, strand: mult, start: currStart, coordStart: coordStart, chunks: segments }, `${JSON.stringify(chunk)}-mid`));
-        currRemainder = remainder;
-        currStart = currStart + s.length * mult;
-        coordStart = coordStart + s.length * mult;
-        if (intron && includeIntrons && idx < chunks.length - 1) {
-            const str = toLower(collapseIntron && intron.length > intronBp * 2
-                ? `${intron.slice(0, intronBp)}...${intron.slice(-intronBp)}`
-                : intron);
-            const { segments, remainder } = splitString({
-                str,
-                charactersPerRow,
-                currRemainder,
-                showCoordinates,
+    // upperCaseCDS capitalizes the coding sequence and lowercases everything
+    // else; otherwise every stretch keeps the reference genome's own casing
+    const caseCoding = (s) => (upperCaseCDS ? s.toUpperCase() : s);
+    const caseNoncoding = (s) => (upperCaseCDS ? s.toLowerCase() : s);
+    const { mult, coordStart } = computeCoordProps({
+        feature,
+        useGenomicCoords,
+        upstream,
+        revcomp,
+    });
+    // the transcript is its exons; the CDS only decides how each stretch is
+    // colored and cased. Deriving that split here, rather than stitching a
+    // separately-supplied UTR list, keeps the rendered sequence complete however
+    // the annotation expresses its UTRs -- or whether it expresses them at all.
+    const regions = transcriptRegions({
+        cds,
+        exons,
+        featureLength: sequence.length,
+    }).filter(f => f.start !== f.end);
+    const middle = [];
+    for (let idx = 0; idx < regions.length; idx++) {
+        const region = regions[idx];
+        for (const { start, end, isCds } of splitRegionByCds(region, cds)) {
+            const s = sequence.slice(start, end);
+            middle.push({
+                key: `${start}-${end}-${isCds ? 'cds' : 'utr'}`,
+                // uppercase CDS (and every region of a noncoding transcript); lower UTR
+                str: isCds || !hasCds ? caseCoding(s) : caseNoncoding(s),
+                color: isCds ? cdsColor : utrColor,
             });
-            if (segments.length) {
-                middleChunks.push(_jsx(SequenceDisplay, { model: model, strand: mult, coordStart: coordStart, start: currStart, chunks: segments }, `${JSON.stringify(chunk)}-intron`));
-                currRemainder = remainder;
-                currStart = currStart + str.length * mult;
-                coordStart = coordStart + str.length * mult;
+        }
+        const next = regions[idx + 1];
+        if (includeIntrons && next) {
+            const intron = sequence.slice(region.end, next.start);
+            if (intron) {
+                middle.push({
+                    key: `${region.start}-${region.end}-intron`,
+                    str: caseNoncoding(getIntronDisplayStr(intron, intronBp, collapseIntron ?? false)),
+                });
             }
         }
     }
-    let downstreamChunk = null;
-    if (downstream) {
-        const { segments } = splitString({
-            str: toLower(downstream),
-            charactersPerRow,
-            currRemainder,
-            showCoordinates,
-        });
-        downstreamChunk = (_jsx(SequenceDisplay, { start: currStart, model: model, strand: mult, chunks: segments, coordStart: coordStart, color: updownstreamColor }));
-    }
-    return (_jsxs(_Fragment, { children: [upstreamChunk, middleChunks, downstreamChunk] }));
+    // The stretches of the feature its own exons do not reach. Real annotations
+    // produce them: CAT/liftoff emits a transcript spanning the source alignment
+    // with exons only where the CDS is supported, so KCNT2 in
+    // `hprc_cfhr_HG00099.1.genes.gff3.gz` runs 10,207 bp past its first exon and
+    // 28 of that corpus's 438 transcripts do the same.
+    //
+    // Uncolored, like the inter-exon gaps they are — the annotation does not call
+    // them exonic, so stretching the first and last exon over them (which is what
+    // the no-exon CDS fallback in `transcriptRegions` does, deliberately) would
+    // fabricate exonic sequence out of what is intron. In the spliced modes they
+    // are correctly absent; only the intron-showing modes claim to run the length
+    // of the feature, and they are the ones that label genomic coordinates from
+    // `feature.start` — so dropping these silently shortened the panel AND slid
+    // every label after them.
+    const outside = (key, str) => includeIntrons && str
+        ? [
+            {
+                key,
+                str: caseNoncoding(getIntronDisplayStr(str, intronBp, collapseIntron ?? false)),
+            },
+        ]
+        : [];
+    const first = regions[0];
+    const last = regions.at(-1);
+    const segments = [
+        ...flankSegment('upstream', upstream, updownstreamColor, caseNoncoding),
+        ...outside('before-first-exon', first ? sequence.slice(0, first.start) : ''),
+        ...middle,
+        ...outside('after-last-exon', last ? sequence.slice(last.end) : ''),
+        ...flankSegment('downstream', downstream, updownstreamColor, caseNoncoding),
+    ];
+    // keyed off the colors actually emitted, so the legend can never advertise a
+    // swatch that is not on screen (e.g. a transcript with no UTR). Introns are
+    // deliberately absent: they are the uncolored stretches, so there is no
+    // swatch to explain. A lone swatch explains nothing, hence the >1.
+    const usedColors = new Set(segments.map(seg => seg.color));
+    const legendItems = [
+        { color: cdsColor, label: 'CDS' },
+        { color: utrColor, label: hasCds ? 'UTR' : 'exon' },
+        { color: updownstreamColor, label: 'up/downstream' },
+    ].filter(item => usedColors.has(item.color));
+    return (_jsxs(_Fragment, { children: [legendItems.length > 1 ? _jsx(SequenceLegend, { items: legendItems }) : null, renderSequenceSegments({
+                model,
+                mult,
+                coordStart,
+                onHoverBase: useGenomicCoords ? onHoverBase : undefined,
+                segments,
+            })] }));
 });
 export default CDNASequence;

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

@@ -4,5 +4,5 @@ declare const CDSSequence: ({ cds, sequence, model, }: {
     cds: Feat[];
     sequence: string;
     model: SequenceFeatureDetailsModel;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default CDSSequence;

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

@@ -1,16 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { observer } from 'mobx-react';
-import { stitch } from "../../util.js";
-import { cdsColor } from "../consts.js";
-import { splitString } from "../util.js";
-import SequenceDisplay from "./SequenceDisplay.js";
+import { stitch } from '../../../util/seqUtils.js';
+import { cdsColor } from '../consts.js';
+import PlainSequence from './PlainSequence.js';
 const CDSSequence = observer(function CDSSequence({ cds, sequence, model, }) {
-    const { charactersPerRow, showCoordinates } = model;
-    const { segments } = splitString({
-        str: stitch(cds, sequence),
-        charactersPerRow,
-        showCoordinates,
-    });
-    return (_jsx(SequenceDisplay, { model: model, color: cdsColor, chunks: segments, start: 0 }));
+    return (_jsx(PlainSequence, { model: model, color: cdsColor, str: stitch(cds, sequence) }));
 });
 export default CDSSequence;

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

@@ -1,10 +1,13 @@
 import type { SimpleFeatureSerialized } from '../../../util/index.ts';
 import type { SequenceFeatureDetailsModel } from '../model.ts';
-declare const GenomicSequence: ({ sequence, upstream, feature, downstream, model, }: {
+declare const GenomicSequence: ({ sequence, upstream, feature, downstream, useGenomicCoords, revcomp, onHoverBase, model, }: {
     sequence: string;
     feature: SimpleFeatureSerialized;
     upstream?: string;
     downstream?: string;
+    useGenomicCoords: boolean;
+    revcomp: boolean;
+    onHoverBase?: (base0: number) => void;
     model: SequenceFeatureDetailsModel;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default GenomicSequence;

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

@@ -1,52 +1,25 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { observer } from 'mobx-react';
-import { genomeColor, updownstreamColor } from "../consts.js";
-import { splitString } from "../util.js";
-import SequenceDisplay from "./SequenceDisplay.js";
-const GenomicSequence = observer(function GenomicSequence({ sequence, upstream, feature, downstream, model, }) {
-    const { charactersPerRow, showCoordinatesSetting, showCoordinates } = model;
-    let currStart = 0;
-    let upstreamChunk = null;
-    let currRemainder = 0;
-    const strand = feature.strand === -1 ? -1 : 1;
-    const fullGenomicCoordinates = showCoordinatesSetting === 'genomic';
-    const mult = fullGenomicCoordinates ? strand : 1;
-    let coordStart = fullGenomicCoordinates
-        ? strand > 0
-            ? feature.start + 1 - (upstream?.length || 0)
-            : feature.end + (upstream?.length || 0)
-        : 0;
-    if (upstream) {
-        const { segments, remainder } = splitString({
-            str: upstream,
-            charactersPerRow,
-            showCoordinates,
-        });
-        upstreamChunk = (_jsx(SequenceDisplay, { model: model, color: updownstreamColor, start: currStart, coordStart: coordStart, chunks: segments }));
-        currRemainder = remainder;
-        currStart = currStart + upstream.length * mult;
-        coordStart = coordStart + upstream.length * mult;
-    }
-    const { segments, remainder } = splitString({
-        str: sequence,
-        charactersPerRow,
-        showCoordinates,
-        currRemainder,
+import { genomeColor, updownstreamColor } from '../consts.js';
+import { computeCoordProps } from '../util.js';
+import { flankSegment, renderSequenceSegments, } from './renderSequenceSegments.js';
+const GenomicSequence = observer(function GenomicSequence({ sequence, upstream, feature, downstream, useGenomicCoords, revcomp, onHoverBase, model, }) {
+    const { mult, coordStart } = computeCoordProps({
+        feature,
+        useGenomicCoords,
+        upstream,
+        revcomp,
     });
-    const middleChunk = (_jsx(SequenceDisplay, { model: model, color: genomeColor, start: currStart, coordStart: coordStart, chunks: segments }));
-    currRemainder = remainder;
-    currStart += sequence.length * mult;
-    coordStart = coordStart + sequence.length * mult;
-    let downstreamChunk = null;
-    if (downstream) {
-        const { segments } = splitString({
-            str: downstream,
-            charactersPerRow,
-            currRemainder,
-            showCoordinates,
-        });
-        downstreamChunk = (_jsx(SequenceDisplay, { start: currStart, model: model, chunks: segments, coordStart: coordStart, color: updownstreamColor }));
-    }
-    return (_jsxs(_Fragment, { children: [upstreamChunk, middleChunk, downstreamChunk] }));
+    return (_jsx(_Fragment, { children: renderSequenceSegments({
+            model,
+            mult,
+            coordStart,
+            onHoverBase: useGenomicCoords ? onHoverBase : undefined,
+            segments: [
+                ...flankSegment('upstream', upstream, updownstreamColor),
+                { key: 'genome', str: sequence, color: genomeColor },
+                ...flankSegment('downstream', downstream, updownstreamColor),
+            ],
+        }) }));
 });
 export default GenomicSequence;

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

@@ -0,0 +1,8 @@
+import type { SequenceFeatureDetailsModel } from '../model.ts';
+declare const PlainSequence: ({ str, color, highlight, model, }: {
+    str: string;
+    color: string;
+    highlight?: (index: number) => string | undefined;
+    model: SequenceFeatureDetailsModel;
+}) => import("react").JSX.Element;
+export default PlainSequence;

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
+import { coordLabelWidth, splitString } from '../util.js';
+import SequenceDisplay from './SequenceDisplay.js';
+// One uninterrupted string in its own coordinate space -- the stitched CDS, the
+// translated peptide -- so rows count from 0 and there is nothing to thread
+// across segments the way renderSequenceSegments does for the genome-based
+// types. The counterpart to that helper, and the reason neither of those
+// seqtypes has to know how a row is laid out.
+const PlainSequence = observer(function PlainSequence({ str, color, highlight, model, }) {
+    const { charactersPerRow, showCoordinates } = model;
+    const { segments } = splitString({ str, charactersPerRow, showCoordinates });
+    return (_jsx(SequenceDisplay, { model: model, color: color, chunks: segments, coordStart: 0, labelWidth: coordLabelWidth({
+            firstCoord: 0,
+            totalLength: str.length,
+            charactersPerRow,
+            strand: 1,
+        }), highlight: highlight }));
+});
+export default PlainSequence;

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

@@ -1,9 +1,12 @@
+import type { TranslExcept } from '../../../util/geneticCodes.ts';
 import type { Feat } from '../../util.tsx';
 import type { SequenceFeatureDetailsModel } from '../model.ts';
-declare const ProteinSequence: ({ cds, sequence, codonTable, model, }: {
+declare const ProteinSequence: ({ cds, sequence, model, codonTable, starts, translExcept, }: {
     cds: Feat[];
     sequence: string;
-    codonTable: Record<string, string>;
     model: SequenceFeatureDetailsModel;
-}) => import("react/jsx-runtime").JSX.Element;
+    codonTable: Record<string, string>;
+    starts?: string[];
+    translExcept?: TranslExcept[];
+}) => import("react").JSX.Element;
 export default ProteinSequence;

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

@@ -1,21 +1,41 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { observer } from 'mobx-react';
-import { convertCodingSequenceToPeptides } from "../../../util/convertCodingSequenceToPeptides.js";
-import { proteinColor } from "../consts.js";
-import { splitString } from "../util.js";
-import SequenceDisplay from "./SequenceDisplay.js";
-const ProteinSequence = observer(function ProteinSequence({ cds, sequence, codonTable, model, }) {
-    const { charactersPerRow, showCoordinates } = model;
+import { convertCodingSequenceToPeptides, translExceptProteinPositions, } from '../../../util/convertCodingSequenceToPeptides.js';
+import { pluralize } from '../../../util/index.js';
+import SequenceLegend from '../SequenceLegend.js';
+import { proteinColor, translExceptColor } from '../consts.js';
+import PlainSequence from './PlainSequence.js';
+// transl_except amino-acid overrides we annotate, in display order.
+const TRANSL_EXCEPT_LABELS = [
+    { aa: '*', name: 'polyA-completed stop' },
+    { aa: 'U', name: 'selenocysteine' },
+    { aa: 'O', name: 'pyrrolysine' },
+];
+// Produce a human-readable note for any transl_except amino acids that were
+// applied.
+function translExceptNote(translExcept) {
+    const parts = TRANSL_EXCEPT_LABELS.flatMap(({ aa, name }) => {
+        const n = translExcept.filter(e => e.aa === aa).length;
+        return n > 0
+            ? [`${n} ${pluralize(n, name)} (${aa}) from transl_except`]
+            : [];
+    });
+    return parts.length > 0 ? parts.join('; ') : undefined;
+}
+const ProteinSequence = observer(function ProteinSequence({ cds, sequence, model, codonTable, starts, translExcept, }) {
     const str = convertCodingSequenceToPeptides({
         cds,
         sequence,
         codonTable,
+        starts,
+        translExcept,
     });
-    const { segments } = splitString({
-        str,
-        charactersPerRow,
-        showCoordinates,
-    });
-    return (_jsx(SequenceDisplay, { model: model, color: proteinColor, chunks: segments, start: 0 }));
+    const note = translExcept ? translExceptNote(translExcept) : undefined;
+    const highlightPositions = translExcept?.length
+        ? translExceptProteinPositions({ cds, translExcept })
+        : undefined;
+    return (_jsxs(_Fragment, { children: [note ? (_jsx(SequenceLegend, { items: [{ color: translExceptColor, label: note }] })) : null, _jsx(PlainSequence, { model: model, color: proteinColor, str: str, highlight: highlightPositions?.size
+                    ? index => highlightPositions.has(index) ? translExceptColor : undefined
+                    : undefined })] }));
 });
 export default ProteinSequence;