@jbrowse/core 5.0.0-beta.11 → 5.0.0-beta.14

package/esm/BaseFeatureWidget/SequenceFeatureDetails/SequenceFeatureDetails.js

@@ -5,25 +5,22 @@ 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 { getTranscripts, pickDefaultTranscriptIndex, resolveMode, } 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 SequenceFeatureDetailsPanel = observer(function SequenceFeatureDetailsPanel({ model, session, assemblyName, feature, hoverTarget, showOpenInDialog = true, canonicalTranscripts, }) {
     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.
+    // transcript children does. Default to the transcript the track draws first
+    // so CDS and Protein sequence types work without an extra click into
+    // Subfeatures, with a selector to switch when the gene has more than one.
     const transcripts = getTranscripts(feature);
-    const [transcriptIndex, setTranscriptIndex] = useState(() => pickDefaultTranscriptIndex(transcripts));
+    const [transcriptIndex, setTranscriptIndex] = useState(() => pickDefaultTranscriptIndex(transcripts, canonicalTranscripts));
     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 mode = resolveMode(model.recentModes, effectiveFeature);
     const [revcomp, setRevcomp] = useState(false);
     const [openInDialog, setOpenInDialog] = useState(false);
     // spread into whichever readout is mounted, rather than forwarded field by
@@ -40,11 +37,8 @@ const SequenceFeatureDetailsPanel = observer(function SequenceFeatureDetailsPane
     // 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
+    const transcriptSelector = transcripts.length > 1 ? (_jsx(TranscriptSelector, { transcripts: transcripts, transcriptIndex: transcriptIndex, setTranscriptIndex: setTranscriptIndex })) : null;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { children: [transcriptSelector, _jsx(SequenceTypeSelector, { model: model, feature: effectiveFeature, mode: mode }), _jsx(SequenceFeatureMenu, { ref: seqPanelRef, model: model, session: session, mode: mode, revcomp: revcomp, setRevcomp: setRevcomp, extraItems: showOpenInDialog
                             ? [
                                 {
                                     label: 'Open in dialog',
@@ -53,7 +47,7 @@ const SequenceFeatureDetailsPanel = observer(function SequenceFeatureDetailsPane
                                     },
                                 },
                             ]
-                            : [] })] }), 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: () => {
+                            : [] })] }), openInDialog ? (_jsx(Suspense, { fallback: _jsx(LoadingEllipses, {}), children: _jsx(SequenceDialog, { ...fetched, sequenceFeatureDetails: model, session: session, transcriptSelector: transcriptSelector, feature: effectiveFeature, mode: mode, 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 }) }))] }));
 });
@@ -61,13 +55,10 @@ const SequenceFeatureDetailsPanel = observer(function SequenceFeatureDetailsPane
 // 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) {
+// The panel's 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.
+const SequenceFeatureDetails = observer(function SequenceFeatureDetails(props) {
     return _jsx(SequenceFeatureDetailsPanel, { ...props }, props.feature.uniqueId);
-}
+});
 export default SequenceFeatureDetails;

package/esm/BaseFeatureWidget/SequenceFeatureDetails/SequenceFeaturePanel.js

@@ -38,6 +38,6 @@ const SequenceFeaturePanel = observer(function SequenceFeaturePanel({ model, fea
                         feature,
                         viewAssemblyNames: model.view?.assemblyNames,
                         assemblyManager: getSession(model).assemblyManager,
-                    }), feature: feature, hoverTarget: model }) })) : null] }));
+                    }), feature: feature, hoverTarget: model, canonicalTranscripts: model.canonicalTranscripts }) })) : null] }));
 });
 export default SequenceFeaturePanel;

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

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

package/esm/BaseFeatureWidget/SequenceFeatureDetails/SequenceLegend.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
 // 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, }) {
+const SequenceLegend = observer(function SequenceLegend({ items, }) {
     return (_jsx("div", { "data-no-fasta": true, style: {
             display: 'flex',
             flexWrap: 'wrap',
@@ -16,4 +17,5 @@ export default function SequenceLegend({ items, }) {
                         background: color,
                         border: '1px solid #999',
                     } }), label] }, label))) }));
-}
+});
+export default SequenceLegend;

package/esm/BaseFeatureWidget/SequenceFeatureDetails/SequencePanel.js

@@ -12,17 +12,17 @@ const baseSeqStyle = {
     background: 'white',
     fontSize: 11,
 };
-function WordWrap({ children }) {
+const WordWrap = observer(function WordWrap({ children, }) {
     return _jsx("pre", { style: baseSeqStyle, children: children });
-}
-function NoWordWrap({ children }) {
+});
+const NoWordWrap = observer(function NoWordWrap({ children, }) {
     return (_jsx("div", { style: {
             ...baseSeqStyle,
             maxWidth: 600,
             whiteSpace: 'normal',
             wordBreak: 'break-all',
         }, children: children }));
-}
+});
 const SequencePanel = observer(function SequencePanel({ sequence, model, feature, mode, revcomp = false, assemblyGeneticCodeId, assemblyName, hoverTarget, ref, }) {
     const { showCoordinates } = model;
     const Container = showCoordinates ? WordWrap : NoWordWrap;

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

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

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

@@ -17,13 +17,13 @@ const useStyles = makeStyles()({
 // 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 FeatureSequenceDialog = observer(function FeatureSequenceDialog({ feature, error, session, assemblyName, hoverTarget, canonicalTranscripts, 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" })) }) }));
+        }, 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, canonicalTranscripts: canonicalTranscripts })) : (_jsx(LoadingEllipses, { message: "Loading feature" })) }) }));
 });
 export default FeatureSequenceDialog;

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

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

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

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import SettingsIcon from '@mui/icons-material/Settings';
 import { Typography } from '@mui/material';
+import { observer } from 'mobx-react';
 import { InfoDialog } from '../../../ui/index.js';
-export default function HelpDialog({ handleClose, }) {
+const HelpDialog = observer(function HelpDialog({ handleClose, }) {
     return (_jsxs(InfoDialog, { maxWidth: "xl", open: true, onClose: () => {
             handleClose();
         }, 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." })] }));
-}
+});
+export default HelpDialog;

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

@@ -1,14 +1,13 @@
 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, }: {
+declare const SequenceDialog: ({ handleClose, sequenceFeatureDetails, session, transcriptSelector, feature, mode, revcomp, setRevcomp, sequence, error, status, assemblyGeneticCodeId, assemblyName, hoverTarget, onForceLoad, }: {
     handleClose: () => void;
     feature: SimpleFeatureSerialized;
     sequenceFeatureDetails: SequenceFeatureDetailsModel;
     session: Pick<AbstractSessionModel, 'notify' | 'notifyError'>;
     transcriptSelector?: React.ReactNode;
     mode: SequenceDisplayMode;
-    setMode: (mode: SequenceDisplayMode) => void;
     revcomp: boolean;
     setRevcomp: (arg: boolean) => void;
     sequence: SeqState | ErrorState | undefined;

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

@@ -11,11 +11,11 @@ const useStyles = makeStyles()({
         width: '80em',
     },
 });
-const SequenceDialog = observer(function SequenceDialog({ handleClose, sequenceFeatureDetails, session, transcriptSelector, feature, mode, setMode, revcomp, setRevcomp, sequence, error, status, assemblyGeneticCodeId, assemblyName, hoverTarget, onForceLoad, }) {
+const SequenceDialog = observer(function SequenceDialog({ handleClose, sequenceFeatureDetails, session, transcriptSelector, feature, mode, revcomp, setRevcomp, sequence, error, status, assemblyGeneticCodeId, assemblyName, hoverTarget, onForceLoad, }) {
     const { classes } = useStyles();
     const seqPanelRef = useRef(null);
     return (_jsx(InfoDialog, { maxWidth: "xl", open: true, title: "Sequence view", onClose: () => {
             handleClose();
-        }, children: _jsxs("div", { className: classes.content, children: [_jsxs("div", { children: [transcriptSelector, _jsx(SequenceTypeSelector, { model: sequenceFeatureDetails, feature: feature, mode: mode, setMode: setMode }), _jsx(SequenceFeatureMenu, { ref: seqPanelRef, model: sequenceFeatureDetails, session: session, mode: mode, revcomp: revcomp, setRevcomp: setRevcomp })] }), _jsx(SequenceBody, { error: error, sequence: sequence, status: status, feature: feature, seqPanelRef: seqPanelRef, model: sequenceFeatureDetails, mode: mode, revcomp: revcomp, assemblyGeneticCodeId: assemblyGeneticCodeId, assemblyName: assemblyName, hoverTarget: hoverTarget, onForceLoad: onForceLoad })] }) }));
+        }, children: _jsxs("div", { className: classes.content, children: [_jsxs("div", { children: [transcriptSelector, _jsx(SequenceTypeSelector, { model: sequenceFeatureDetails, feature: feature, mode: mode }), _jsx(SequenceFeatureMenu, { ref: seqPanelRef, model: sequenceFeatureDetails, session: session, mode: mode, revcomp: revcomp, setRevcomp: setRevcomp })] }), _jsx(SequenceBody, { error: error, sequence: sequence, status: status, feature: feature, seqPanelRef: seqPanelRef, model: sequenceFeatureDetails, mode: mode, revcomp: revcomp, assemblyGeneticCodeId: assemblyGeneticCodeId, assemblyName: assemblyName, hoverTarget: hoverTarget, onForceLoad: onForceLoad })] }) }));
 });
 export default SequenceDialog;

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

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

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

@@ -2,50 +2,29 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { FormControl, MenuItem, Select } from '@mui/material';
 import { observer } from 'mobx-react';
 import { makeStyles } from '../../../util/tss-react/index.js';
-import { featureHasCDS, featureHasExonOrCDS } from '../featureTypeUtil.js';
+import { getAvailableModes } from '../featureTypeUtil.js';
 const useStyles = makeStyles()({
     formControl: {
         margin: 0,
         marginLeft: 4,
     },
 });
-const SequenceTypeSelector = observer(function SequenceTypeSelector({ model, feature, mode, setMode, }) {
+const SequenceTypeSelector = observer(function SequenceTypeSelector({ model, feature, mode, }) {
     const { classes } = useStyles();
     const { intronBp, upDownBp } = model;
-    const hasCDS = featureHasCDS(feature);
-    const hasExonOrCDS = featureHasExonOrCDS(feature);
-    // each group is annotated, so a mode name that isn't a SequenceDisplayMode is
-    // a compile error rather than a Select whose value silently matches no option
-    const codingOptions = [
-        ['cds', 'CDS'],
-        ['protein', 'Protein'],
-    ];
-    const splicedOptions = [
-        ['cdna', 'cDNA'],
-        ['gene', 'Genomic w/ full introns'],
-        [
-            'gene_updownstream',
-            `Genomic w/ full introns +/- ${upDownBp}bp up+down stream`,
-        ],
-        ['gene_collapsed_intron', `Genomic w/ ${intronBp}bp intron`],
-        [
-            'gene_updownstream_collapsed_intron',
-            `Genomic w/ ${intronBp}bp intron +/- ${upDownBp}bp up+down stream`,
-        ],
-    ];
-    const plainGenomicOptions = [
-        ['genomic', 'Genomic'],
-        [
-            'genomic_sequence_updownstream',
-            `Genomic +/- ${upDownBp}bp up+down stream`,
-        ],
-    ];
-    const options = [
-        ...(hasCDS ? codingOptions : []),
-        ...(hasExonOrCDS ? splicedOptions : plainGenomicOptions),
-    ];
+    const labels = {
+        cds: 'CDS',
+        protein: 'Protein',
+        cdna: 'cDNA',
+        gene: 'Genomic w/ full introns',
+        gene_updownstream: `Genomic w/ full introns +/- ${upDownBp}bp up+down stream`,
+        gene_collapsed_intron: `Genomic w/ ${intronBp}bp intron`,
+        gene_updownstream_collapsed_intron: `Genomic w/ ${intronBp}bp intron +/- ${upDownBp}bp up+down stream`,
+        genomic: 'Genomic',
+        genomic_sequence_updownstream: `Genomic +/- ${upDownBp}bp up+down stream`,
+    };
     return (_jsx(FormControl, { className: classes.formControl, children: _jsx(Select, { size: "small", value: mode, onChange: event => {
-                setMode(event.target.value);
-            }, "aria-label": "Sequence type", children: options.map(([key, val]) => (_jsx(MenuItem, { value: key, "data-testid": `sequence_type_${key}`, children: val }, key))) }) }));
+                model.setMode(event.target.value);
+            }, "aria-label": "Sequence type", children: getAvailableModes(feature).map(key => (_jsx(MenuItem, { value: key, "data-testid": `sequence_type_${key}`, children: labels[key] }, key))) }) }));
 });
 export default SequenceTypeSelector;

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

@@ -1,6 +1,7 @@
 import type { SimpleFeatureSerialized } from '../../../util/index.ts';
-export default function TranscriptSelector({ transcripts, transcriptIndex, setTranscriptIndex, }: {
+declare const TranscriptSelector: ({ transcripts, transcriptIndex, setTranscriptIndex, }: {
     transcripts: SimpleFeatureSerialized[];
     transcriptIndex: number;
     setTranscriptIndex: (index: number) => void;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default TranscriptSelector;

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { FormControl, MenuItem, Select } from '@mui/material';
+import { observer } from 'mobx-react';
 import { coarseStripHTML } from '../../../util/index.js';
 import { makeStyles } from '../../../util/tss-react/index.js';
 const useStyles = makeStyles()({
@@ -11,10 +12,11 @@ const useStyles = makeStyles()({
 // Only rendered when a container feature (a gene) has more than one
 // transcript child — picks which transcript's exon/CDS structure the
 // sequence-type selector and body compute from.
-export default function TranscriptSelector({ transcripts, transcriptIndex, setTranscriptIndex, }) {
+const TranscriptSelector = observer(function TranscriptSelector({ transcripts, transcriptIndex, setTranscriptIndex, }) {
     const { classes } = useStyles();
     return (_jsx(FormControl, { className: classes.formControl, children: _jsx(Select, { size: "small", value: transcriptIndex, onChange: event => {
                 setTranscriptIndex(Number(event.target.value));
             }, "aria-label": "Transcript", children: transcripts.map((transcript, idx) => (_jsx(MenuItem, { value: idx, "data-testid": `transcript_${idx}`, children: coarseStripHTML(`${transcript.name || transcript.id || ''}`) ||
                     `Transcript ${idx + 1}` }, transcript.uniqueId))) }) }));
-}
+});
+export default TranscriptSelector;

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

@@ -1,11 +1,13 @@
 import type { SimpleFeatureSerialized, SimpleFeatureSerializedNoId } from '../../util/index.ts';
+import type { CanonicalTranscripts } from '../../util/isoformRank.ts';
 import type { SequenceDisplayMode, ShowCoordinatesMode } from './model.ts';
 export declare function featureHasCDS(feature: SimpleFeatureSerializedNoId): boolean;
 export declare function featureHasExon(feature: SimpleFeatureSerializedNoId): boolean;
 export declare function featureHasExonOrCDS(feature: SimpleFeatureSerializedNoId): boolean;
 export declare function getTranscripts(feature: SimpleFeatureSerialized): SimpleFeatureSerialized[];
-export declare function pickDefaultTranscriptIndex(transcripts: SimpleFeatureSerialized[]): number;
-export declare function getDefaultMode(feature: SimpleFeatureSerializedNoId): SequenceDisplayMode;
+export declare function pickDefaultTranscriptIndex(transcripts: SimpleFeatureSerialized[], canonical?: CanonicalTranscripts): number;
+export declare function getAvailableModes(feature: SimpleFeatureSerializedNoId): SequenceDisplayMode[];
+export declare function resolveMode(recentModes: readonly SequenceDisplayMode[], feature: SimpleFeatureSerializedNoId): "cdna" | "cds" | "gene" | "gene_collapsed_intron" | "gene_updownstream" | "gene_updownstream_collapsed_intron" | "genomic" | "genomic_sequence_updownstream" | "protein";
 export declare function modeHasUpDownstream(mode: SequenceDisplayMode): boolean;
 export declare function modeSupportsRevcomp(mode: SequenceDisplayMode): boolean;
 export declare function showGenomicCoordsOption(mode: SequenceDisplayMode): boolean;

package/esm/BaseFeatureWidget/SequenceFeatureDetails/featureTypeUtil.js

@@ -1,3 +1,4 @@
+import { DEFAULT_CANONICAL_TRANSCRIPTS, isoformScorer, rankIsoforms, serializedIsoformReader, } from '../../util/isoformRank.js';
 // these predicates only ever read type/subfeatures, so they accept a bare
 // subfeature (no guaranteed uniqueId) as readily as a full feature
 export function featureHasCDS(feature) {
@@ -30,27 +31,35 @@ export function getTranscripts(feature) {
         uniqueId: `${feature.uniqueId}_${idx}`,
     })) ?? []);
 }
-// index of the transcript the gene glyph itself would collapse to in
-// 'longestCoding' mode (RenderFeatureDataRPC/glyphs/subfeatures.ts): prefer a
-// coding transcript, then the longest span — so the sequence panel's default
-// matches what the track already drew. A feature that is itself a transcript
-// (clicked directly, not via its container gene) has no nested transcripts to
-// autopick from.
-export function pickDefaultTranscriptIndex(transcripts) {
-    if (transcripts.length === 0) {
-        return 0;
-    }
-    const coding = transcripts.filter(t => featureHasCDS(t));
-    const candidates = coding.length > 0 ? coding : transcripts;
-    const longest = candidates.reduce((a, b) => b.end - b.start > a.end - a.start ? b : a);
-    return transcripts.indexOf(longest);
+// The isoform the canvas gene glyph draws first, so the panel opens on the
+// transcript the track showed. A feature that is itself a transcript has no
+// nested transcripts to pick from.
+export function pickDefaultTranscriptIndex(transcripts, canonical = DEFAULT_CANONICAL_TRANSCRIPTS) {
+    const [best] = rankIsoforms(transcripts, isoformScorer(serializedIsoformReader, canonical));
+    return best ? transcripts.indexOf(best) : 0;
+}
+// the sequence types the selector offers, the first being the default
+export function getAvailableModes(feature) {
+    const coding = featureHasCDS(feature)
+        ? ['cds', 'protein']
+        : [];
+    const rest = featureHasExonOrCDS(feature)
+        ? [
+            'cdna',
+            'gene',
+            'gene_updownstream',
+            'gene_collapsed_intron',
+            'gene_updownstream_collapsed_intron',
+        ]
+        : ['genomic', 'genomic_sequence_updownstream'];
+    return [...coding, ...rest];
 }
-export function getDefaultMode(feature) {
-    return featureHasCDS(feature)
-        ? 'cds'
-        : featureHasExon(feature)
-            ? 'cdna'
-            : 'genomic';
+// The most recent pick this feature offers, so clicking from one gene to the
+// next keeps e.g. the protein readout, and picking Genomic on a plain feature
+// in between does not cost a gene its Protein.
+export function resolveMode(recentModes, feature) {
+    const modes = getAvailableModes(feature);
+    return recentModes.find(m => modes.includes(m)) ?? modes[0];
 }
 // whether the mode renders up/downstream flanks. shared by the sequence body
 // (which fetches+renders the flanks) and the FASTA header (which annotates

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

@@ -9,7 +9,8 @@ export interface SequenceHoverPosition {
 export interface SequenceHoverTarget {
     setSequenceHoverPosition: (pos: SequenceHoverPosition | undefined) => void;
 }
-export type SequenceDisplayMode = 'gene' | 'gene_collapsed_intron' | 'gene_updownstream' | 'gene_updownstream_collapsed_intron' | 'cdna' | 'cds' | 'genomic' | 'genomic_sequence_updownstream' | 'protein';
+declare const sequenceDisplayModes: readonly ['gene', 'gene_collapsed_intron', 'gene_updownstream', 'gene_updownstream_collapsed_intron', 'cdna', 'cds', 'genomic', 'genomic_sequence_updownstream', 'protein'];
+export type SequenceDisplayMode = (typeof sequenceDisplayModes)[number];
 /**
  * #stateModel SequenceFeatureDetails
  * #category Widget
@@ -47,6 +48,12 @@ export declare function SequenceFeatureDetailsF(): import("@jbrowse/mobx-state-t
      * state.
      */
     charactersPerRow: number;
+    /**
+     * #volatile
+     * the sequence types picked in any panel, most recent first;
+     * `resolveMode` shows the first one a feature offers
+     */
+    recentModes: ("cdna" | "cds" | "gene" | "gene_collapsed_intron" | "gene_updownstream" | "gene_updownstream_collapsed_intron" | "genomic" | "genomic_sequence_updownstream" | "protein")[];
 } & {
     /**
      * #action
@@ -68,6 +75,10 @@ export declare function SequenceFeatureDetailsF(): import("@jbrowse/mobx-state-t
      * #action
      */
     setShowCoordinates(f: ShowCoordinatesMode): void;
+    /**
+     * #action
+     */
+    setMode(f: SequenceDisplayMode): void;
 } & {
     /**
      * #getter
@@ -76,3 +87,4 @@ export declare function SequenceFeatureDetailsF(): import("@jbrowse/mobx-state-t
 }, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree")._NotCustomized>;
 export type SequenceFeatureDetailsStateModel = ReturnType<typeof SequenceFeatureDetailsF>;
 export type SequenceFeatureDetailsModel = Instance<SequenceFeatureDetailsStateModel>;
+export {};

package/esm/BaseFeatureWidget/SequenceFeatureDetails/model.js

@@ -1,8 +1,22 @@
 import { types } from '@jbrowse/mobx-state-tree';
-import { localStorageGetBoolean, localStorageGetItem, localStorageGetNumber, localStorageSetBoolean, localStorageSetItem, localStorageSetNumber, } from '../../util/index.js';
+import { localStorageGetBoolean, localStorageGetItem, localStorageGetNumber, localStorageGetStringArray, localStorageSetBoolean, localStorageSetItem, localStorageSetJSON, localStorageSetNumber, } from '../../util/index.js';
 function parseShowCoordinatesMode(val) {
     return val === 'relative' || val === 'genomic' ? val : 'none';
 }
+const sequenceDisplayModes = [
+    'gene',
+    'gene_collapsed_intron',
+    'gene_updownstream',
+    'gene_updownstream_collapsed_intron',
+    'cdna',
+    'cds',
+    'genomic',
+    'genomic_sequence_updownstream',
+    'protein',
+];
+function isSequenceDisplayMode(val) {
+    return sequenceDisplayModes.includes(val);
+}
 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.
@@ -49,6 +63,12 @@ export function SequenceFeatureDetailsF() {
          * state.
          */
         charactersPerRow: clampCharactersPerRow(localStorageGetNumber(`${p}-charactersPerRow`, 100)),
+        /**
+         * #volatile
+         * the sequence types picked in any panel, most recent first;
+         * `resolveMode` shows the first one a feature offers
+         */
+        recentModes: localStorageGetStringArray(`${p}-recentModes`).filter(isSequenceDisplayMode),
     }))
         .actions(self => ({
         /**
@@ -87,6 +107,13 @@ export function SequenceFeatureDetailsF() {
             self.showCoordinatesSetting = f;
             localStorageSetItem(`${p}-showCoordinatesSetting`, f);
         },
+        /**
+         * #action
+         */
+        setMode(f) {
+            self.recentModes = [f, ...self.recentModes.filter(m => m !== f)];
+            localStorageSetJSON(`${p}-recentModes`, self.recentModes);
+        },
     }))
         .views(self => ({
         /**

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

@@ -51,9 +51,9 @@ const CDNASequence = observer(function CDNASequence({ cds, exons, sequence, upst
     }
     // 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.
+    // with exons only where the CDS is supported, so KCNT2 in HG00099.1's HPRC CAT
+    // annotation runs 10,207 bp past its first exon, and 28 of the 438 transcripts
+    // around CFH 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

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

@@ -65,7 +65,7 @@ function nonSpaceCharsBeforeCursor(event, chunk) {
 // 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, }) {
+const HighlightedChunk = observer(function HighlightedChunk({ chunk, sequenceOffset, color, highlight, }) {
     let seqIndex = sequenceOffset;
     const spans = [];
     for (let i = 0; i < chunk.length; i++) {
@@ -74,5 +74,5 @@ function HighlightedChunk({ chunk, sequenceOffset, color, highlight, }) {
         spans.push(_jsx("span", { style: { background }, children: ch }, i));
     }
     return _jsx(_Fragment, { children: spans });
-}
+});
 export default SequenceDisplay;

package/esm/BaseFeatureWidget/stateModelFactory.d.ts

@@ -1,6 +1,7 @@
 import type PluginManager from '../PluginManager.ts';
 import type { AnyConfigurationModel } from '../configuration/index.ts';
 import type { ParentFeatureSummary, SimpleFeatureSerialized } from '../util/index.ts';
+import type { CanonicalTranscripts } from '../util/isoformRank.ts';
 import type { SequenceHoverPosition } from './SequenceFeatureDetails/model.ts';
 import type { FormatDetailsTiers } from './formatDetails.ts';
 import type { Descriptors, MaybeSerializedFeat } from './types.tsx';
@@ -52,12 +53,14 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
         upDownBp: number;
         upperCaseCDS: boolean;
         charactersPerRow: number;
+        recentModes: ("cdna" | "cds" | "gene" | "gene_collapsed_intron" | "gene_updownstream" | "gene_updownstream_collapsed_intron" | "genomic" | "genomic_sequence_updownstream" | "protein")[];
     } & {
         setUpDownBp(f: number): void;
         setIntronBp(f: number): void;
         setUpperCaseCDS(f: boolean): void;
         setCharactersPerRow(f: number): void;
         setShowCoordinates(f: import("./index.ts").ShowCoordinatesMode): void;
+        setMode(f: import("./SequenceFeatureDetails/model.ts").SequenceDisplayMode): void;
     } & {
         readonly showCoordinates: boolean;
     }, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree")._NotCustomized>, [undefined]>;
@@ -88,6 +91,12 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
         feature?: SimpleFeatureSerialized;
         error?: Error;
     };
+    /**
+     * #getter
+     * the isoform tags the open track's display ranks by, so the sequence
+     * panel opens on the transcript the track draws first
+     */
+    readonly canonicalTranscripts: CanonicalTranscripts;
     /**
      * #getter
      * levels of subfeature card the panel renders; unset means no limit

package/esm/BaseFeatureWidget/stateModelFactory.js

@@ -1,6 +1,7 @@
 import { getEnv, isStateTreeNode, types } from '@jbrowse/mobx-state-tree';
 import { hydrateTrackConfig } from '../configuration/index.js';
 import { getSession } from '../util/index.js';
+import { DEFAULT_CANONICAL_TRANSCRIPTS, isCanonicalTranscriptsHost, } from '../util/isoformRank.js';
 import { ElementId } from '../util/types/mst.js';
 import { SequenceFeatureDetailsF } from './SequenceFeatureDetails/model.js';
 import { applyFormatDetails, formatDetailsNumber } from './formatDetails.js';
@@ -116,6 +117,16 @@ export function stateModelFactory(pluginManager) {
                 return { error };
             }
         },
+        /**
+         * #getter
+         * the isoform tags the open track's display ranks by, so the sequence
+         * panel opens on the transcript the track draws first
+         */
+        get canonicalTranscripts() {
+            const track = self.track;
+            return (track?.displays.find(isCanonicalTranscriptsHost)
+                ?.canonicalTranscripts ?? DEFAULT_CANONICAL_TRANSCRIPTS);
+        },
         /**
          * #getter
          * levels of subfeature card the panel renders; unset means no limit

package/esm/BaseFeatureWidget/types.d.ts

@@ -1,4 +1,5 @@
 import type { MenuItem } from '../ui/MenuTypes.ts';
+import type { CanonicalTranscripts } from '../util/isoformRank.ts';
 import type { SimpleFeatureSerialized } from '../util/simpleFeature.ts';
 import type { SequenceFeatureDetailsModel, SequenceHoverTarget } from './SequenceFeatureDetails/model.ts';
 import type { IStateTreeNode } from '@jbrowse/mobx-state-tree';
@@ -9,6 +10,7 @@ export interface FeatureDetailsModel extends IStateTreeNode, SequenceHoverTarget
     view: {
         assemblyNames: string[];
     } | undefined;
+    canonicalTranscripts?: CanonicalTranscripts;
 }
 export interface Descriptors {
     [key: string]: React.ReactNode | Descriptors;