@jbrowse/core 4.3.0 → 5.0.0-beta.10

package/esm/BaseFeatureWidget/SequenceFeatureDetails/SequenceContents.js

@@ -1,41 +1,52 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { observer } from 'mobx-react';
-import CDNASequence from "./seqtypes/CDNASequence.js";
-import CDSSequence from "./seqtypes/CDSSequence.js";
-import GenomicSequence from "./seqtypes/GenomicSequence.js";
-import ProteinSequence from "./seqtypes/ProteinSequence.js";
-import { useSequenceData } from "./useSequenceData.js";
-import { defaultCodonTable, generateCodonTable } from "../../util/index.js";
-function RenderedSequenceComponent({ mode, feature, model, sequenceData, }) {
-    const { seq, upstream, downstream, cds, exons, utr } = sequenceData;
+import { getGeneticCode } from '../../util/geneticCodes.js';
+import SimpleFeature from '../../util/simpleFeature.js';
+import { transcriptGeneticCodeId, transcriptTranslExcept, } from '../../util/translateTranscript.js';
+import { modeHasUpDownstream, modeSupportsRevcomp, resolveShowCoordinates, } from './featureTypeUtil.js';
+import CDNASequence from './seqtypes/CDNASequence.js';
+import CDSSequence from './seqtypes/CDSSequence.js';
+import GenomicSequence from './seqtypes/GenomicSequence.js';
+import ProteinSequence from './seqtypes/ProteinSequence.js';
+import { getSequenceData } from './useSequenceData.js';
+// Dispatches to the renderer for the current sequence type. An observer because
+// it reads showCoordinatesSetting: that setting moving relative<->genomic
+// leaves the coarse showCoordinates boolean every other observer here reads
+// untouched, so as a plain component this kept rendering the old coordinates
+// while the menu radio said otherwise.
+const SequenceContents = observer(function SequenceContents({ mode, feature, sequence, model, assemblyGeneticCodeId, revcomp, onHoverBase, }) {
+    // revcomp is offered for the genomic types only, so a toggle left on in one
+    // of those can't flip a spliced readout when the user switches type
+    const rc = revcomp && modeSupportsRevcomp(mode);
+    const { seq, upstream, downstream, cds, exons } = getSequenceData({
+        feature,
+        sequence,
+        revcomp: rc,
+    });
+    const withUpDown = modeHasUpDownstream(mode);
+    const useGenomicCoords = resolveShowCoordinates(model.showCoordinatesSetting, mode) === 'genomic';
     switch (mode) {
         case 'genomic':
-            return _jsx(GenomicSequence, { feature: feature, model: model, sequence: seq });
         case 'genomic_sequence_updownstream':
-            return (_jsx(GenomicSequence, { model: model, feature: feature, sequence: seq, upstream: upstream, downstream: downstream }));
+            return (_jsx(GenomicSequence, { model: model, feature: feature, sequence: seq, upstream: withUpDown ? upstream : undefined, downstream: withUpDown ? downstream : undefined, useGenomicCoords: useGenomicCoords, revcomp: rc, onHoverBase: onHoverBase }));
         case 'cds':
             return _jsx(CDSSequence, { model: model, cds: cds, sequence: seq });
+        case 'protein': {
+            const transcript = new SimpleFeature(feature);
+            const translExcept = transcriptTranslExcept(transcript);
+            const code = getGeneticCode(transcriptGeneticCodeId(transcript, assemblyGeneticCodeId));
+            return (_jsx(ProteinSequence, { model: model, cds: cds, sequence: seq, codonTable: code.codonTable, starts: code.starts, translExcept: translExcept?.length ? translExcept : undefined }));
+        }
+        // cdna and the gene_* variants all render the spliced transcript; introns
+        // and up/downstream flanks are toggled by the mode name
         case 'cdna':
-            return (_jsx(CDNASequence, { model: model, exons: exons, feature: feature, cds: cds, utr: utr, sequence: seq }));
-        case 'protein':
-            return (_jsx(ProteinSequence, { model: model, cds: cds, codonTable: generateCodonTable(defaultCodonTable), sequence: seq }));
         case 'gene':
-            return (_jsx(CDNASequence, { model: model, exons: exons, feature: feature, cds: cds, utr: utr, sequence: seq, includeIntrons: true }));
         case 'gene_collapsed_intron':
-            return (_jsx(CDNASequence, { model: model, exons: exons, feature: feature, cds: cds, sequence: seq, utr: utr, includeIntrons: true, collapseIntron: true }));
         case 'gene_updownstream':
-            return (_jsx(CDNASequence, { model: model, exons: exons, feature: feature, cds: cds, sequence: seq, utr: utr, upstream: upstream, downstream: downstream, includeIntrons: true }));
         case 'gene_updownstream_collapsed_intron':
-            return (_jsx(CDNASequence, { model: model, exons: exons, feature: feature, cds: cds, sequence: seq, utr: utr, upstream: upstream, downstream: downstream, includeIntrons: true, collapseIntron: true }));
+            return (_jsx(CDNASequence, { model: model, exons: exons, feature: feature, cds: cds, sequence: seq, upstream: withUpDown ? upstream : undefined, downstream: withUpDown ? downstream : undefined, includeIntrons: mode.startsWith('gene'), collapseIntron: mode.includes('collapsed_intron'), useGenomicCoords: useGenomicCoords, revcomp: rc, onHoverBase: onHoverBase }));
         default:
             return _jsx("div", { children: "Unknown type" });
     }
-}
-const SequenceContents = observer(function SequenceContents({ mode, feature, sequence, model, }) {
-    const sequenceData = useSequenceData({
-        feature,
-        sequence,
-    });
-    return sequenceData ? (_jsx(RenderedSequenceComponent, { mode: mode, feature: feature, model: model, sequenceData: sequenceData })) : null;
 });
 export default SequenceContents;

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

@@ -1,7 +1,12 @@
-import type { SimpleFeatureSerialized } from '../../util/index.ts';
-import type { BaseFeatureWidgetModel } from '../stateModelFactory.ts';
-declare const SequenceFeatureDetails: ({ model, feature, }: {
-    model: BaseFeatureWidgetModel;
+import type { AbstractSessionModel, SimpleFeatureSerialized } from '../../util/index.ts';
+import type { SequenceFeatureDetailsModel, SequenceHoverTarget } from './model.ts';
+interface SequenceFeatureDetailsProps {
+    model: SequenceFeatureDetailsModel;
+    session: AbstractSessionModel;
+    assemblyName: string | undefined;
     feature: SimpleFeatureSerialized;
-}) => import("react/jsx-runtime").JSX.Element;
+    hoverTarget?: SequenceHoverTarget;
+    showOpenInDialog?: boolean;
+}
+declare function SequenceFeatureDetails(props: SequenceFeatureDetailsProps): import("react").JSX.Element;
 export default SequenceFeatureDetails;

package/esm/BaseFeatureWidget/SequenceFeatureDetails/SequenceFeatureDetails.js

@@ -1,50 +1,73 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Suspense, lazy, useEffect, useMemo, useRef, useState } from 'react';
-import { Button, Typography } from '@mui/material';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense, lazy, useRef, useState } from 'react';
 import { observer } from 'mobx-react';
-import SequenceFeatureMenu from "./dialogs/SequenceFeatureMenu.js";
-import SequenceTypeSelector from "./dialogs/SequenceTypeSelector.js";
-import { createSequenceFeatureDetailsModel, destroySequenceFeatureDetailsModel, } from "./model.js";
-import { ErrorMessage, LoadingEllipses } from "../../ui/index.js";
-import { SimpleFeature, getSession } from "../../util/index.js";
-import { useFeatureSequence } from "../../util/useFeatureSequence.js";
-const SequencePanel = lazy(() => import("./SequencePanel.js"));
-const SequenceDialog = lazy(() => import("./dialogs/SequenceDialog.js"));
-const SequenceFeatureDetails = observer(function SequenceFeatureDetails({ model, feature, }) {
-    const [sequenceFeatureDetails] = useState(() => createSequenceFeatureDetailsModel());
-    useEffect(() => {
-        return () => {
-            destroySequenceFeatureDetailsModel(sequenceFeatureDetails);
-        };
-    }, [sequenceFeatureDetails]);
-    const { upDownBp } = sequenceFeatureDetails;
+import { LoadingEllipses } from '../../ui/index.js';
+import SequenceFeatureMenu from './dialogs/SequenceFeatureMenu.js';
+import SequenceTypeSelector from './dialogs/SequenceTypeSelector.js';
+import TranscriptSelector from './dialogs/TranscriptSelector.js';
+import { getDefaultMode, getTranscripts, pickDefaultTranscriptIndex, } from './featureTypeUtil.js';
+import { useSequenceFetch } from './useSequenceFetch.js';
+// lazies
+const SequenceBody = lazy(() => import('./SequenceBody.js'));
+const SequenceDialog = lazy(() => import('./dialogs/SequenceDialog.js'));
+const SequenceFeatureDetailsPanel = observer(function SequenceFeatureDetailsPanel({ model, session, assemblyName, feature, hoverTarget, showOpenInDialog = true, }) {
+    const { upDownBp } = model;
     const seqPanelRef = useRef(null);
+    // A container feature (e.g. a gene) has no CDS/exon of its own — one of its
+    // transcript children does. Default to the longest-coding transcript so CDS
+    // and Protein sequence types work without an extra click into Subfeatures,
+    // with a selector to switch transcripts when the gene has more than one.
+    const transcripts = getTranscripts(feature);
+    const [transcriptIndex, setTranscriptIndex] = useState(() => pickDefaultTranscriptIndex(transcripts));
+    const effectiveFeature = transcripts[transcriptIndex] ?? feature;
+    // mode and revcomp are per-panel state, not on the shared model, so each
+    // subfeature panel (e.g. coding vs noncoding transcripts of one gene) picks
+    // its own sequence type and strand
+    const [mode, setMode] = useState(() => getDefaultMode(effectiveFeature));
+    const [revcomp, setRevcomp] = useState(false);
     const [openInDialog, setOpenInDialog] = useState(false);
-    const [forceLoad, setForceLoad] = useState(false);
-    const session = getSession(model);
-    const assemblyName = model.view?.assemblyNames?.[0];
-    const simpleFeature = useMemo(() => new SimpleFeature(feature), [feature]);
-    const { sequence, error } = useFeatureSequence({
-        assemblyName,
+    // spread into whichever readout is mounted, rather than forwarded field by
+    // field: the inline body and the dialog want the same five, and listing
+    // them by hand is what dropped `status` from the dialog, whose loading
+    // indicator then had no progress to report
+    const fetched = useSequenceFetch({
         session,
-        feature: simpleFeature,
+        assemblyName,
+        feature: effectiveFeature,
         upDownBp,
-        forceLoad,
     });
-    useEffect(() => {
-        sequenceFeatureDetails.setFeature(feature);
-    }, [sequenceFeatureDetails, feature]);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { children: [_jsx(SequenceTypeSelector, { model: sequenceFeatureDetails }), _jsx(SequenceFeatureMenu, { ref: seqPanelRef, model: sequenceFeatureDetails, extraItems: [
-                            {
-                                label: 'Open in dialog',
-                                onClick: () => {
-                                    setOpenInDialog(true);
+    // handed to the dialog as well, which renders the same controls: the
+    // transcript lives in this component's state, so a dialog without the
+    // selector strands a multi-transcript gene on whichever one was picked
+    // before it opened (the inline copy is behind the modal and unclickable)
+    const transcriptSelector = transcripts.length > 1 ? (_jsx(TranscriptSelector, { transcripts: transcripts, transcriptIndex: transcriptIndex, setTranscriptIndex: index => {
+            setTranscriptIndex(index);
+            setMode(getDefaultMode(transcripts[index]));
+        } })) : null;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { children: [transcriptSelector, _jsx(SequenceTypeSelector, { model: model, feature: effectiveFeature, mode: mode, setMode: setMode }), _jsx(SequenceFeatureMenu, { ref: seqPanelRef, model: model, session: session, mode: mode, revcomp: revcomp, setRevcomp: setRevcomp, extraItems: showOpenInDialog
+                            ? [
+                                {
+                                    label: 'Open in dialog',
+                                    onClick: () => {
+                                        setOpenInDialog(true);
+                                    },
                                 },
-                            },
-                        ] })] }), openInDialog ? (_jsxs("div", { children: ["Open in dialog...", _jsx(Suspense, { fallback: _jsx(LoadingEllipses, {}), children: _jsx(SequenceDialog, { model: model, sequenceFeatureDetails: sequenceFeatureDetails, feature: feature, handleClose: () => {
-                                setOpenInDialog(false);
-                            } }) })] })) : (_jsxs("div", { children: [feature.type === 'gene' ? (_jsx(Typography, { children: "Note: inspect subfeature sequences for protein/CDS computations" })) : null, error ? (_jsx(ErrorMessage, { error: error })) : !sequence ? (_jsx(LoadingEllipses, {})) : 'error' in sequence ? (_jsxs(_Fragment, { children: [_jsx(Typography, { color: "error", children: sequence.error }), _jsx(Button, { variant: "contained", color: "inherit", onClick: () => {
-                                    setForceLoad(true);
-                                }, children: "Force load" })] })) : (_jsx(Suspense, { fallback: _jsx(LoadingEllipses, {}), children: _jsx(SequencePanel, { ref: seqPanelRef, feature: feature, sequence: sequence, model: sequenceFeatureDetails }) }))] }))] }));
+                            ]
+                            : [] })] }), openInDialog ? (_jsx(Suspense, { fallback: _jsx(LoadingEllipses, {}), children: _jsx(SequenceDialog, { ...fetched, sequenceFeatureDetails: model, session: session, transcriptSelector: transcriptSelector, feature: effectiveFeature, mode: mode, setMode: setMode, revcomp: revcomp, setRevcomp: setRevcomp, assemblyName: assemblyName, hoverTarget: hoverTarget, handleClose: () => {
+                        setOpenInDialog(false);
+                    } }) })) : (_jsx(Suspense, { fallback: _jsx(LoadingEllipses, {}), children: _jsx(SequenceBody, { ...fetched, feature: effectiveFeature, seqPanelRef: seqPanelRef, model: model, mode: mode, revcomp: revcomp, assemblyName: assemblyName, hoverTarget: hoverTarget }) }))] }));
 });
+// Takes the sequence settings model, session and assembly directly rather than
+// a feature-detail widget, so anything holding a SequenceFeatureDetails model
+// (the widget, a track's right-click dialog) renders the same readout.
+//
+// The panel's sequence type, transcript and revcomp are initialized from the
+// feature, and the widget is reused (not remounted) when the user clicks a
+// different feature — so key the panel on the feature to reinitialize them.
+// Otherwise a mode picked on a coding transcript ('cds') survives onto a
+// feature that doesn't offer it, which renders the wrong sequence and puts an
+// out-of-range value in the sequence type selector.
+function SequenceFeatureDetails(props) {
+    return _jsx(SequenceFeatureDetailsPanel, { ...props }, props.feature.uniqueId);
+}
 export default SequenceFeatureDetails;

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

@@ -1,7 +1,7 @@
 import type { SimpleFeatureSerialized } from '../../util/index.ts';
-import type { BaseFeatureWidgetModel } from '../stateModelFactory.ts';
+import type { FeatureDetailsModel } from '../types.tsx';
 declare const SequenceFeaturePanel: ({ model, feature, }: {
-    model: BaseFeatureWidgetModel;
+    model: FeatureDetailsModel;
     feature: SimpleFeatureSerialized;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default SequenceFeaturePanel;

package/esm/BaseFeatureWidget/SequenceFeatureDetails/SequenceFeaturePanel.js

@@ -3,11 +3,13 @@ import { Suspense, lazy, useState } from 'react';
 import Help from '@mui/icons-material/Help';
 import { Button, FormControl, IconButton } from '@mui/material';
 import { observer } from 'mobx-react';
-import { LoadingEllipses } from "../../ui/index.js";
-import { getSession } from "../../util/index.js";
-import { makeStyles } from "../../util/tss-react/index.js";
-const SequenceFeatureDetails = lazy(() => import("./SequenceFeatureDetails.js"));
-const HelpDialog = lazy(() => import("./dialogs/HelpDialog.js"));
+import { LoadingEllipses } from '../../ui/index.js';
+import { getDialogHost, getSession } from '../../util/index.js';
+import { makeStyles } from '../../util/tss-react/index.js';
+import { panelAssemblyName } from './panelAssemblyName.js';
+// lazies
+const SequenceFeatureDetails = lazy(() => import('./SequenceFeatureDetails.js'));
+const HelpDialog = lazy(() => import('./dialogs/HelpDialog.js'));
 const useStyles = makeStyles()(theme => ({
     formControl: {
         margin: 0,
@@ -17,18 +19,25 @@ const useStyles = makeStyles()(theme => ({
         marginBottom: theme.spacing(4),
     },
 }));
+// display the stitched-together sequence of a gene's CDS, cDNA, or protein
+// sequence. this is a best effort and weird genomic phenomena could lead these
+// to not be 100% accurate
 const SequenceFeaturePanel = observer(function SequenceFeaturePanel({ model, feature, }) {
     const { classes } = useStyles();
     const [shown, setShown] = useState(false);
     return (_jsxs("div", { className: classes.container, children: [_jsx(FormControl, { className: classes.formControl, children: _jsx(Button, { variant: "contained", onClick: () => {
-                        setShown(!shown);
+                        setShown(val => !val);
                     }, children: shown ? 'Hide feature sequence' : 'Show feature sequence' }) }), _jsx(IconButton, { onClick: () => {
-                    getSession(model).queueDialog(handleClose => [
+                    getDialogHost(model).queueDialog(handleClose => [
                         HelpDialog,
                         {
                             handleClose,
                         },
                     ]);
-                }, children: _jsx(Help, {}) }), shown ? (_jsx(Suspense, { fallback: _jsx(LoadingEllipses, {}), children: _jsx(SequenceFeatureDetails, { model: model, feature: feature }, feature.uniqueId) })) : null] }));
+                }, children: _jsx(Help, {}) }), shown ? (_jsx(Suspense, { fallback: _jsx(LoadingEllipses, {}), children: _jsx(SequenceFeatureDetails, { model: model.sequenceFeatureDetails, session: getSession(model), assemblyName: panelAssemblyName({
+                        feature,
+                        viewAssemblyNames: model.view?.assemblyNames,
+                        assemblyManager: getSession(model).assemblyManager,
+                    }), feature: feature, hoverTarget: model }) })) : null] }));
 });
 export default SequenceFeaturePanel;

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

@@ -0,0 +1,6 @@
+export default function SequenceLegend({ items, }: {
+    items: {
+        color: string;
+        label: string;
+    }[];
+}): import("react").JSX.Element;

package/esm/BaseFeatureWidget/SequenceFeatureDetails/SequenceLegend.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// A small inline legend tying a swatch color to its meaning. Rendered alongside
+// the sequence so e.g. transl_except highlights are self-explanatory. Styles are
+// inline (not classes) so the legend survives copy-paste to an external document.
+export default function SequenceLegend({ items, }) {
+    return (_jsx("div", { "data-no-fasta": true, style: {
+            display: 'flex',
+            flexWrap: 'wrap',
+            gap: 8,
+            fontSize: 11,
+            fontStyle: 'italic',
+        }, children: items.map(({ color, label }) => (_jsxs("span", { style: { display: 'inline-flex', alignItems: 'center', gap: 4 }, children: [_jsx("span", { style: {
+                        display: 'inline-block',
+                        width: 10,
+                        height: 10,
+                        background: color,
+                        border: '1px solid #999',
+                    } }), label] }, label))) }));
+}

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

@@ -1,8 +1,9 @@
-import type { SequenceFeatureDetailsModel } from './model.ts';
 import type { SimpleFeatureSerialized } from '../../util/index.ts';
-declare const SequenceName: ({ mode, model, feature, }: {
+import type { SequenceDisplayMode, SequenceFeatureDetailsModel } from './model.ts';
+declare const SequenceName: ({ mode, model, revcomp, feature, }: {
     model: SequenceFeatureDetailsModel;
-    mode: string;
+    mode: SequenceDisplayMode;
+    revcomp: boolean;
     feature: SimpleFeatureSerialized;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default SequenceName;

package/esm/BaseFeatureWidget/SequenceFeatureDetails/SequenceName.js

@@ -1,26 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { observer } from 'mobx-react';
-import { toLocale } from "../../util/index.js";
-function getStrand(strand) {
-    if (strand === -1) {
-        return '(-)';
-    }
-    else if (strand === 1) {
-        return '(+)';
-    }
-    else {
-        return '';
-    }
-}
-const SequenceName = observer(function SequenceName({ mode, model, feature, }) {
-    return (_jsx("div", { style: { background: 'white' }, children: `>${[
-            [feature.name || feature.id, mode].filter(f => !!f).join('-'),
-            `${feature.refName}:${toLocale(feature.start + 1)}-${toLocale(feature.end)}${getStrand(feature.strand)}`,
-            mode.endsWith('updownstream')
+import { coarseStripHTML, toLocale } from '../../util/index.js';
+import { getStrandStr } from '../util.js';
+import { modeHasUpDownstream, modeSupportsRevcomp } from './featureTypeUtil.js';
+const SequenceName = observer(function SequenceName({ mode, model, revcomp, feature, }) {
+    return (_jsx("div", { children: `>${[
+            [
+                coarseStripHTML(`${feature.name || feature.id || ''}`),
+                mode,
+                revcomp && modeSupportsRevcomp(mode) ? 'revcomp' : '',
+            ]
+                .filter(Boolean)
+                .join('-'),
+            `${feature.refName}:${toLocale(feature.start + 1)}-${toLocale(feature.end)}${getStrandStr(feature.strand)}`,
+            modeHasUpDownstream(mode)
                 ? `+/- ${toLocale(model.upDownBp)} up/downstream bp`
                 : '',
         ]
-            .filter(f => !!f)
+            .filter(Boolean)
             .join(' ')}\n` }));
 });
 export default SequenceName;

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

@@ -1,3 +1,3 @@
 import type { SequencePanelProps } from './types.ts';
-declare const SequencePanel: import("react").ForwardRefExoticComponent<SequencePanelProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const SequencePanel: ({ sequence, model, feature, mode, revcomp, assemblyGeneticCodeId, assemblyName, hoverTarget, ref, }: SequencePanelProps) => import("react").JSX.Element;
 export default SequencePanel;

package/esm/BaseFeatureWidget/SequenceFeatureDetails/SequencePanel.js

@@ -1,29 +1,45 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import { useEffect } from 'react';
 import { observer } from 'mobx-react';
-import SequenceContents from "./SequenceContents.js";
-import SequenceName from "./SequenceName.js";
+import SequenceContents from './SequenceContents.js';
+import SequenceName from './SequenceName.js';
+// raw inline styles (not classes) so an html copy carries styling into external
+// documents like Word; the explicit black-on-white also keeps the readout
+// legible under a dark theme (coordinate labels and introns are uncolored)
+const baseSeqStyle = {
+    fontFamily: 'monospace',
+    color: 'black',
+    background: 'white',
+    fontSize: 11,
+};
 function WordWrap({ children }) {
-    return (_jsx("pre", { style: {
-            fontFamily: 'monospace',
-            color: 'black',
-            fontSize: 11,
-        }, children: children }));
+    return _jsx("pre", { style: baseSeqStyle, children: children });
 }
 function NoWordWrap({ children }) {
     return (_jsx("div", { style: {
-            fontFamily: 'monospace',
-            color: 'black',
-            fontSize: 11,
+            ...baseSeqStyle,
             maxWidth: 600,
-            whiteSpace: 'wrap',
+            whiteSpace: 'normal',
             wordBreak: 'break-all',
         }, children: children }));
 }
-const SequencePanel = observer(forwardRef(function S(props, ref) {
-    const { sequence, model, feature } = props;
-    const { showCoordinates, mode } = model;
+const SequencePanel = observer(function SequencePanel({ sequence, model, feature, mode, revcomp = false, assemblyGeneticCodeId, assemblyName, hoverTarget, ref, }) {
+    const { showCoordinates } = model;
     const Container = showCoordinates ? WordWrap : NoWordWrap;
-    return (_jsx("div", { "data-testid": "sequence_panel", ref: ref, style: { maxHeight: 300, overflow: 'auto' }, children: _jsxs(Container, { children: [_jsx(SequenceName, { model: model, mode: mode, feature: feature }), _jsx(SequenceContents, { model: model, mode: mode, feature: feature, sequence: sequence })] }) }));
-}));
+    // clear the LGV crosshair if the panel unmounts mid-hover (e.g. the sequence
+    // is hidden) so it doesn't linger
+    useEffect(() => () => {
+        hoverTarget?.setSequenceHoverPosition(undefined);
+    }, [hoverTarget]);
+    return (_jsx("div", { "data-testid": "sequence_panel", ref: ref, style: { maxHeight: 300, overflow: 'auto' }, onMouseLeave: () => {
+            hoverTarget?.setSequenceHoverPosition(undefined);
+        }, children: _jsxs(Container, { children: [_jsx(SequenceName, { model: model, mode: mode, revcomp: revcomp, feature: feature }), _jsx(SequenceContents, { model: model, mode: mode, feature: feature, sequence: sequence, revcomp: revcomp, assemblyGeneticCodeId: assemblyGeneticCodeId, onHoverBase: base0 => {
+                        hoverTarget?.setSequenceHoverPosition({
+                            refName: feature.refName,
+                            start: base0,
+                            end: base0 + 1,
+                            assemblyName,
+                        });
+                    } })] }) }));
+});
 export default SequencePanel;

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

@@ -1,6 +1,6 @@
-export declare const intronColor: undefined;
 export declare const utrColor = "rgb(200,240,240)";
 export declare const proteinColor = "rgb(220,160,220)";
 export declare const cdsColor = "rgb(220,220,180)";
-export declare const updownstreamColor = "rgba(250,200,200)";
-export declare const genomeColor = "rgb(200,280,200)";
+export declare const updownstreamColor = "rgb(250,200,200)";
+export declare const genomeColor = "rgb(200,240,200)";
+export declare const translExceptColor = "rgb(255,200,80)";

package/esm/BaseFeatureWidget/SequenceFeatureDetails/consts.js

@@ -1,6 +1,10 @@
-export const intronColor = undefined;
+// note that these are currently put into the style section instead of being
+// defined in classes to aid copy and paste to an external document e.g. word
 export const utrColor = 'rgb(200,240,240)';
 export const proteinColor = 'rgb(220,160,220)';
 export const cdsColor = 'rgb(220,220,180)';
-export const updownstreamColor = 'rgba(250,200,200)';
-export const genomeColor = 'rgb(200,280,200)';
+export const updownstreamColor = 'rgb(250,200,200)';
+export const genomeColor = 'rgb(200,240,200)';
+// Amber highlight for residues whose translation was overridden by transl_except
+// (polyA-completed stops, selenocysteine, pyrrolysine).
+export const translExceptColor = 'rgb(255,200,80)';

package/esm/BaseFeatureWidget/SequenceFeatureDetails/dialogs/FeatureSequenceDialog.d.ts

@@ -0,0 +1,11 @@
+import type { AbstractSessionModel, SimpleFeatureSerialized } from '../../../util/index.ts';
+import type { SequenceHoverTarget } from '../model.ts';
+declare const FeatureSequenceDialog: ({ feature, error, session, assemblyName, hoverTarget, handleClose, }: {
+    feature: SimpleFeatureSerialized | undefined;
+    error?: unknown;
+    session: AbstractSessionModel;
+    assemblyName: string | undefined;
+    hoverTarget?: SequenceHoverTarget;
+    handleClose: () => void;
+}) => import("react").JSX.Element;
+export default FeatureSequenceDialog;

package/esm/BaseFeatureWidget/SequenceFeatureDetails/dialogs/FeatureSequenceDialog.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { observer } from 'mobx-react';
+import { ErrorBanner, InfoDialog, LoadingEllipses } from '../../../ui/index.js';
+import { makeStyles } from '../../../util/tss-react/index.js';
+import SequenceFeatureDetails from '../SequenceFeatureDetails.js';
+import { SequenceFeatureDetailsF } from '../model.js';
+const useStyles = makeStyles()({
+    content: {
+        width: '80em',
+    },
+});
+// The feature sequence panel as a standalone dialog, for callers that have a
+// feature but no feature-detail widget open (e.g. a track's right-click menu).
+// `feature` is optional so a caller still fetching the full feature -- the
+// rendered track ships only slim arrays -- can mount the dialog immediately.
+// The settings model lives for as long as the dialog does: it holds no
+// snapshot and reads no tree, so nothing has to carry one around on the chance
+// a sequence panel is opened.
+const FeatureSequenceDialog = observer(function FeatureSequenceDialog({ feature, error, session, assemblyName, hoverTarget, handleClose, }) {
+    const { classes } = useStyles();
+    const [model] = useState(() => SequenceFeatureDetailsF().create());
+    return (_jsx(InfoDialog, { maxWidth: "xl", open: true, title: feature
+            ? `Feature sequence - ${feature.name || feature.id || feature.type}`
+            : 'Feature sequence', onClose: () => {
+            handleClose();
+        }, children: _jsx("div", { className: classes.content, children: error ? (_jsx(ErrorBanner, { error: error })) : feature ? (_jsx(SequenceFeatureDetails, { model: model, session: session, assemblyName: assemblyName, feature: feature, hoverTarget: hoverTarget, showOpenInDialog: false })) : (_jsx(LoadingEllipses, { message: "Loading feature" })) }) }));
+});
+export default FeatureSequenceDialog;

package/esm/BaseFeatureWidget/SequenceFeatureDetails/dialogs/HelpDialog.d.ts

@@ -1,3 +1,3 @@
 export default function HelpDialog({ handleClose, }: {
     handleClose: () => void;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/esm/BaseFeatureWidget/SequenceFeatureDetails/dialogs/HelpDialog.js

@@ -1,11 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Dialog } from '@jbrowse/core/ui';
 import SettingsIcon from '@mui/icons-material/Settings';
-import { Button, DialogActions, DialogContent, Typography } from '@mui/material';
+import { Typography } from '@mui/material';
+import { InfoDialog } from '../../../ui/index.js';
 export default function HelpDialog({ handleClose, }) {
-    return (_jsxs(Dialog, { maxWidth: "xl", open: true, onClose: () => {
+    return (_jsxs(InfoDialog, { maxWidth: "xl", open: true, onClose: () => {
             handleClose();
-        }, title: "Feature sequence panel help", children: [_jsxs(DialogContent, { children: [_jsx(Typography, { children: "The \"Feature sequence\" panel shows the underlying genomic sequence for a given feature, fetched from the reference genome." }), _jsx(Typography, { children: "For gene features, this panel does special calculations to e.g. stitch together the coding sequence, the options are:" }), _jsxs("ul", { children: [_jsx("li", { children: "CDS - shows the stitched together CDS sequences" }), _jsx("li", { children: "Protein - the translated coding sequence, with the \"standard\" genetic code" }), _jsx("li", { children: "cDNA - shows the 'copy DNA' of transcript, formed from exon sequences" }), _jsx("li", { children: "Genomic w/ introns +/- Nbp up+down stream - the sequence underlying the entire gene including including introns, with UTR and CDS highlighted" })] }), _jsx(Typography, { children: "For other feature types, the options are:" }), _jsx("ul", { children: _jsx("li", { children: "Genomic +/- Nbp up+down stream - the reference genome sequence underlying the feature, with the up and downstream sequence" }) }), _jsxs(Typography, { children: ["Note 1: you can use the \"gear icon\" ", _jsx(SettingsIcon, {}), " to edit the number of bp displayed up/downstream and in the intron region"] }), _jsx(Typography, { children: "Note 2: The 'Copy HTML' function retains the colors from the sequence panel but cannot be pasted into some programs like notepad that only expect plain text." })] }), _jsx(DialogActions, { children: _jsx(Button, { onClick: () => {
-                        handleClose();
-                    }, autoFocus: true, variant: "contained", children: "Close" }) })] }));
+        }, title: "Feature sequence panel help", children: [_jsx(Typography, { children: "The \"Feature sequence\" panel shows the underlying genomic sequence for a given feature, fetched from the reference genome." }), _jsx(Typography, { children: "For gene features, this panel does special calculations to e.g. stitch together the coding sequence, the options are:" }), _jsxs("ul", { children: [_jsx("li", { children: "CDS - shows the stitched together CDS sequences" }), _jsx("li", { children: "Protein - the translated coding sequence, with the \"standard\" genetic code" }), _jsx("li", { children: "cDNA - shows the 'copy DNA' of transcript, formed from exon sequences" }), _jsx("li", { children: "Genomic w/ introns +/- Nbp up+down stream - the sequence underlying the entire gene including introns, with UTR and CDS highlighted" })] }), _jsx(Typography, { children: "For other feature types, the options are:" }), _jsx("ul", { children: _jsx("li", { children: "Genomic +/- Nbp up+down stream - the reference genome sequence underlying the feature, with the up and downstream sequence" }) }), _jsxs(Typography, { children: ["Note 1: you can use the \"gear icon\" ", _jsx(SettingsIcon, {}), " to edit the number of bp displayed up/downstream and in the intron region"] }), _jsx(Typography, { children: "Note 2: The 'Copy HTML' function retains the colors from the sequence panel but cannot be pasted into some programs like notepad that only expect plain text." })] }));
 }

package/esm/BaseFeatureWidget/SequenceFeatureDetails/dialogs/SequenceDialog.d.ts

@@ -1,10 +1,22 @@
-import { type SimpleFeatureSerialized } from '../../../util/index.ts';
-import type { BaseFeatureWidgetModel } from '../../stateModelFactory.ts';
-import type { SequenceFeatureDetailsModel } from '../model.ts';
-declare const SequenceDialog: ({ handleClose, model, sequenceFeatureDetails, feature, }: {
+import type { AbstractSessionModel, RpcStatus, SimpleFeatureSerialized } from '../../../util/index.ts';
+import type { ErrorState, SeqState } from '../../util.tsx';
+import type { SequenceDisplayMode, SequenceFeatureDetailsModel, SequenceHoverTarget } from '../model.ts';
+declare const SequenceDialog: ({ handleClose, sequenceFeatureDetails, session, transcriptSelector, feature, mode, setMode, revcomp, setRevcomp, sequence, error, status, assemblyGeneticCodeId, assemblyName, hoverTarget, onForceLoad, }: {
     handleClose: () => void;
     feature: SimpleFeatureSerialized;
-    model: BaseFeatureWidgetModel;
     sequenceFeatureDetails: SequenceFeatureDetailsModel;
-}) => import("react/jsx-runtime").JSX.Element;
+    session: Pick<AbstractSessionModel, 'notify' | 'notifyError'>;
+    transcriptSelector?: React.ReactNode;
+    mode: SequenceDisplayMode;
+    setMode: (mode: SequenceDisplayMode) => void;
+    revcomp: boolean;
+    setRevcomp: (arg: boolean) => void;
+    sequence: SeqState | ErrorState | undefined;
+    error: unknown;
+    status?: RpcStatus;
+    assemblyGeneticCodeId?: number;
+    assemblyName?: string;
+    hoverTarget?: SequenceHoverTarget;
+    onForceLoad: () => void;
+}) => import("react").JSX.Element;
 export default SequenceDialog;