@jbrowse/core 2.4.2 → 2.5.0

package/BaseFeatureWidget/SequenceFeatureDetails/GenomicSequence.d.ts

@@ -0,0 +1,5 @@
+export default function GenomicSequence({ sequence, upstream, downstream, }: {
+    sequence: string;
+    upstream?: string;
+    downstream?: string;
+}): JSX.Element;

package/BaseFeatureWidget/SequenceFeatureDetails/GenomicSequence.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const util_1 = require("./util");
+function GenomicSequence({ sequence, upstream, downstream, }) {
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        upstream ? (react_1.default.createElement("span", { style: { background: util_1.updownstreamColor } }, upstream)) : null,
+        react_1.default.createElement("span", { style: { background: util_1.genomeColor } }, sequence),
+        downstream ? (react_1.default.createElement("span", { style: { background: util_1.updownstreamColor } }, downstream)) : null));
+}
+exports.default = GenomicSequence;

package/BaseFeatureWidget/SequenceFeatureDetails/ProteinSequence.d.ts

@@ -0,0 +1,8 @@
+import { Feat } from '../util';
+export default function ProteinSequence({ cds, sequence, codonTable, }: {
+    cds: Feat[];
+    sequence: string;
+    codonTable: {
+        [key: string]: string;
+    };
+}): JSX.Element;

package/BaseFeatureWidget/SequenceFeatureDetails/ProteinSequence.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const util_1 = require("../util");
+const util_2 = require("./util");
+function ProteinSequence({ cds, sequence, codonTable, }) {
+    const str = (0, util_1.stitch)(cds, sequence);
+    let protein = '';
+    for (let i = 0; i < str.length; i += 3) {
+        // use & symbol for undefined codon, or partial slice
+        protein += codonTable[str.slice(i, i + 3)] || '&';
+    }
+    return react_1.default.createElement("span", { style: { background: util_2.proteinColor } }, protein);
+}
+exports.default = ProteinSequence;

package/BaseFeatureWidget/SequenceFeatureDetails/SequenceFeatureDetails.d.ts

@@ -0,0 +1,2 @@
+import { BaseProps } from './../types';
+export default function SequenceFeatureDetails({ model, feature: prefeature, }: BaseProps): JSX.Element;

package/BaseFeatureWidget/SequenceFeatureDetails/SequenceFeatureDetails.js

@@ -0,0 +1,146 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const material_1 = require("@mui/material");
+const mui_1 = require("tss-react/mui");
+const copy_to_clipboard_1 = __importDefault(require("copy-to-clipboard"));
+// locals
+const util_1 = require("../../util");
+const ui_1 = require("../../ui");
+// icons
+const Settings_1 = __importDefault(require("@mui/icons-material/Settings"));
+const hooks_1 = require("./hooks");
+// lazies
+const SettingsDlg = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./SequenceFeatureSettingsDialog'))));
+const SequencePanel = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./SequencePanel'))));
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
+    button: {
+        margin: theme.spacing(1),
+    },
+    formControl: {
+        margin: 0,
+    },
+    container2: {
+        marginTop: theme.spacing(1),
+    },
+}));
+// set the key on this component to feature.id to clear state after new feature
+// is selected
+function SequenceFeatureDetails({ model, feature: prefeature, }) {
+    var _a, _b;
+    const { classes } = useStyles();
+    const feature = prefeature;
+    const hasCDS = (_a = feature.subfeatures) === null || _a === void 0 ? void 0 : _a.some(sub => sub.type === 'CDS');
+    const hasExon = (_b = feature.subfeatures) === null || _b === void 0 ? void 0 : _b.some(sub => sub.type === 'exon');
+    const seqPanelRef = (0, react_1.useRef)(null);
+    const [intronBp, setIntronBp] = (0, util_1.useLocalStorage)('intronBp', 10);
+    const [upDownBp, setUpDownBp] = (0, util_1.useLocalStorage)('upDownBp', 500);
+    const [copied, setCopied] = (0, react_1.useState)(false);
+    const [copiedHtml, setCopiedHtml] = (0, react_1.useState)(false);
+    const [force, setForce] = (0, react_1.useState)(false);
+    const { sequence, error } = (0, hooks_1.useFeatureSequence)(model, prefeature, upDownBp, force);
+    const [mode, setMode] = (0, react_1.useState)(hasCDS ? 'cds' : hasExon ? 'cdna' : 'genomic');
+    const rest = {
+        ...(hasCDS ? { cds: 'CDS' } : {}),
+        ...(hasCDS ? { protein: 'Protein' } : {}),
+        ...(hasExon ? { cdna: 'cDNA' } : {}),
+        ...(hasExon
+            ? {
+                gene: `Genomic w/ full introns`,
+            }
+            : {}),
+        ...(hasExon
+            ? {
+                gene_updownstream: `Genomic w/ full introns +/- ${upDownBp}bp up+down stream`,
+            }
+            : {}),
+        ...(hasExon
+            ? { gene_collapsed_intron: `Genomic w/ ${intronBp}bp intron` }
+            : {}),
+        ...(hasExon
+            ? {
+                gene_updownstream_collapsed_intron: `Genomic w/ ${intronBp}bp intron +/- ${upDownBp}bp up+down stream `,
+            }
+            : {}),
+        ...(!hasExon ? { genomic: 'Genomic' } : {}),
+        ...(!hasExon
+            ? {
+                genomic_sequence_updownstream: `Genomic +/- ${upDownBp}bp up+down stream`,
+            }
+            : {}),
+    };
+    return (react_1.default.createElement("div", { className: classes.container2 },
+        react_1.default.createElement(material_1.FormControl, { className: classes.formControl },
+            react_1.default.createElement(material_1.Select, { value: mode, onChange: event => setMode(event.target.value) }, Object.entries(rest).map(([key, val]) => (react_1.default.createElement(material_1.MenuItem, { key: key, value: key }, val))))),
+        react_1.default.createElement(material_1.FormControl, { className: classes.formControl },
+            react_1.default.createElement(material_1.Button, { className: classes.button, variant: "contained", onClick: () => {
+                    const ref = seqPanelRef.current;
+                    if (ref) {
+                        (0, copy_to_clipboard_1.default)(ref.textContent || '', { format: 'text/plain' });
+                        setCopied(true);
+                        setTimeout(() => setCopied(false), 1000);
+                    }
+                } }, copied ? 'Copied to clipboard!' : 'Copy plaintext')),
+        react_1.default.createElement(material_1.FormControl, { className: classes.formControl },
+            react_1.default.createElement(material_1.Tooltip, { title: "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" },
+                react_1.default.createElement(material_1.Button, { className: classes.button, variant: "contained", onClick: () => {
+                        const ref = seqPanelRef.current;
+                        if (!ref) {
+                            return;
+                        }
+                        (0, copy_to_clipboard_1.default)(ref.innerHTML, { format: 'text/html' });
+                        setCopiedHtml(true);
+                        setTimeout(() => setCopiedHtml(false), 1000);
+                    } }, copiedHtml ? 'Copied to clipboard!' : 'Copy HTML'))),
+        react_1.default.createElement(Settings, { upDownBp: upDownBp, intronBp: intronBp, setIntronBp: setIntronBp, setUpDownBp: setUpDownBp }),
+        react_1.default.createElement("br", null),
+        feature.type === 'gene' ? (react_1.default.createElement(material_1.Typography, null, "Note: inspect subfeature sequences for protein/CDS computations")) : null,
+        error ? (react_1.default.createElement(material_1.Typography, { color: "error" }, `${error}`)) : !sequence ? (react_1.default.createElement(ui_1.LoadingEllipses, null)) : sequence ? ('error' in sequence ? (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(material_1.Typography, { color: "error" }, sequence.error),
+            react_1.default.createElement(material_1.Button, { variant: "contained", color: "inherit", onClick: () => setForce(true) }, "Force load"))) : (react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement(ui_1.LoadingEllipses, null) },
+            react_1.default.createElement(SequencePanel, { ref: seqPanelRef, feature: feature, mode: mode, sequence: sequence, intronBp: intronBp })))) : (react_1.default.createElement(material_1.Typography, null, "No sequence found"))));
+}
+exports.default = SequenceFeatureDetails;
+function Settings({ intronBp, upDownBp, setIntronBp, setUpDownBp, }) {
+    const { classes } = useStyles();
+    const [settingsDlgOpen, setSettingsDlgOpen] = (0, react_1.useState)(false);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(material_1.FormControl, { className: classes.formControl },
+            react_1.default.createElement(material_1.IconButton, { onClick: () => setSettingsDlgOpen(true) },
+                react_1.default.createElement(Settings_1.default, null))),
+        settingsDlgOpen ? (react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement("div", null) },
+            react_1.default.createElement(SettingsDlg, { handleClose: arg => {
+                    if (arg) {
+                        const { upDownBp, intronBp } = arg;
+                        setIntronBp(intronBp);
+                        setUpDownBp(upDownBp);
+                    }
+                    setSettingsDlgOpen(false);
+                }, upDownBp: upDownBp, intronBp: intronBp }))) : null));
+}

package/BaseFeatureWidget/{SequenceFeatureSettingsDialog.d.ts → SequenceFeatureDetails/SequenceFeatureSettingsDialog.d.ts}

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export default function SequenceFeatureSettingsDialog({ handleClose, intronBp: intronBpArg, upDownBp: upDownBpArg, }: {
     handleClose: (arg?: {
         intronBp: number;

package/BaseFeatureWidget/{SequenceFeatureSettingsDialog.js → SequenceFeatureDetails/SequenceFeatureSettingsDialog.js}

@@ -42,7 +42,7 @@ function SequenceFeatureSettingsDialog({ handleClose, intronBp: intronBpArg, upD
     const [upDownBp, setUpDownBp] = (0, react_1.useState)(`${upDownBpArg}`);
     const intronBpValid = !Number.isNaN(+intronBp);
     const upDownBpValid = !Number.isNaN(+upDownBp);
-    return (react_1.default.createElement(ui_1.Dialog, { maxWidth: "xl", open: true, onClose: () => handleClose(), title: 'Feature sequence settings' },
+    return (react_1.default.createElement(ui_1.Dialog, { maxWidth: "xl", open: true, onClose: () => handleClose(), title: "Feature sequence settings" },
         react_1.default.createElement(material_1.DialogContent, { className: classes.dialogContent },
             react_1.default.createElement(material_1.TextField, { label: "Number of intronic bases around splice site to display", className: classes.formElt, value: intronBp, helperText: !intronBpValid ? 'Not a number' : '', error: !intronBpValid, onChange: event => setIntronBp(event.target.value) }),
             react_1.default.createElement(material_1.TextField, { label: "Number of bases up/down stream of feature to display", className: classes.formElt, value: upDownBp, helperText: !upDownBpValid ? 'Not a number' : '', error: !upDownBpValid, onChange: event => setUpDownBp(event.target.value) })),

package/BaseFeatureWidget/{SequenceHelpDialog.d.ts → SequenceFeatureDetails/SequenceHelpDialog.d.ts}

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export default function HelpDialog({ handleClose, }: {
     handleClose: () => void;
 }): JSX.Element;

package/BaseFeatureWidget/{SequenceHelpDialog.js → SequenceFeatureDetails/SequenceHelpDialog.js}

@@ -16,19 +16,16 @@ function HelpDialog({ handleClose, }) {
             react_1.default.createElement("ul", null,
                 react_1.default.createElement("li", null, "CDS - shows the stitched together CDS sequences"),
                 react_1.default.createElement("li", null, "Protein - the translated coding sequence, with the \"standard\" genetic code"),
-                react_1.default.createElement("li", null, "cDNA - shows the UTRs and stitched together CDS sequences"),
-                react_1.default.createElement("li", null, "Gene w/ introns - the sequence underlying the entire gene including including introns, with UTR and CDS highlighted"),
-                react_1.default.createElement("li", null, "Gene w/ Nbp introns - same \"Gene w/ introns\", but limiting to a subset of the intron sequence displayed"),
-                react_1.default.createElement("li", null, "Gene +/- Nbp up+down stream - same as \"Gene w/ introns\" but with up and downstream sequence displayed"),
-                react_1.default.createElement("li", null, "Gene +/- Nbp up+down stream, Nbp introns - same as \"Gene w/ introns\", but with limited intron sequence displayed and up and downstream sequence")),
+                react_1.default.createElement("li", null, "cDNA - shows the 'DNA' version of transcript, formed from exons, including non-coding genes"),
+                react_1.default.createElement("li", null, "Genomic w/ introns +/- Nbp up+down stream - the sequence underlying the entire gene including including introns, with UTR and CDS highlighted")),
             react_1.default.createElement(material_1.Typography, { paragraph: true }, "For other feature types, the options are:"),
             react_1.default.createElement("ul", null,
-                react_1.default.createElement("li", null, "Feature sequence - the reference genome sequence underlying the feature"),
-                react_1.default.createElement("li", null, "Feature sequence +/- Nbp up+down stream - the reference genome sequence underlying the feature, with the up and downstream sequence")),
+                react_1.default.createElement("li", null, "Genomic +/- Nbp up+down stream - the reference genome sequence underlying the feature, with the up and downstream sequence")),
             react_1.default.createElement(material_1.Typography, null,
-                "Note: you can use the \"gear icon\" ",
+                "Note 1: you can use the \"gear icon\" ",
                 react_1.default.createElement(Settings_1.default, null),
-                " to edit the number of bp displayed up/downstream and in the intron region")),
+                " to edit the number of bp displayed up/downstream and in the intron region"),
+            react_1.default.createElement(material_1.Typography, null, "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.")),
         react_1.default.createElement(material_1.DialogActions, null,
             react_1.default.createElement(material_1.Button, { onClick: () => handleClose(), autoFocus: true, variant: "contained" }, "Close"))));
 }

package/BaseFeatureWidget/{SequencePanel.d.ts → SequenceFeatureDetails/SequencePanel.d.ts}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ParentFeat, SeqState } from './util';
+import { ParentFeat, SeqState } from '../util';
 interface SeqPanelProps {
     sequence: SeqState;
     feature: ParentFeat;

package/BaseFeatureWidget/{SequencePanel.js → SequenceFeatureDetails/SequencePanel.js}

@@ -4,9 +4,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const util_1 = require("../util");
-const util_2 = require("./util");
-const SequenceBox_1 = require("./SequenceBox");
+const util_1 = require("../../util");
+const util_2 = require("../util");
+const CDNASequence_1 = __importDefault(require("./CDNASequence"));
+const ProteinSequence_1 = __importDefault(require("./ProteinSequence"));
+const GenomicSequence_1 = __importDefault(require("./GenomicSequence"));
+const CDSSequence_1 = __importDefault(require("./CDSSequence"));
 const SeqPanel = react_1.default.forwardRef(function (props, ref) {
     const { feature, mode, intronBp = 10 } = props;
     let { sequence: { seq, upstream = '', downstream = '' }, } = props;
@@ -55,21 +58,20 @@ const SeqPanel = react_1.default.forwardRef(function (props, ref) {
     }
     const codonTable = (0, util_1.generateCodonTable)(util_1.defaultCodonTable);
     return (react_1.default.createElement("div", { ref: ref, "data-testid": "sequence_panel" },
-        react_1.default.createElement("div", { style: 
-            /* raw styles so that html copy works */
-            {
+        react_1.default.createElement("div", { style: {
+                /* raw styles instead of className so that html copy works */
                 fontFamily: 'monospace',
                 wordWrap: 'break-word',
                 overflow: 'auto',
                 color: 'black',
                 fontSize: 12,
                 maxWidth: 600,
-                maxHeight: 500,
+                maxHeight: 300,
             } },
             react_1.default.createElement("span", { style: { background: 'white' } }, `>${feature.name ||
                 feature.id ||
                 `${feature.refName}:${feature.start + 1}-${feature.end}`}-${mode}\n`),
             react_1.default.createElement("br", null),
-            mode === 'genomic' ? (react_1.default.createElement(SequenceBox_1.Genomic, { sequence: seq })) : mode === 'genomic_sequence_updown' ? (react_1.default.createElement(SequenceBox_1.Genomic, { sequence: seq, upstream: upstream, downstream: downstream })) : mode === 'cds' ? (react_1.default.createElement(SequenceBox_1.GeneCDS, { cds: cds, sequence: seq })) : mode === 'cdna' ? (react_1.default.createElement(SequenceBox_1.GenecDNA, { exons: exons, cds: cds, utr: utr, sequence: seq, intronBp: intronBp })) : mode === 'protein' ? (react_1.default.createElement(SequenceBox_1.GeneProtein, { cds: cds, codonTable: codonTable, sequence: seq })) : mode === 'gene' ? (react_1.default.createElement(SequenceBox_1.GenecDNA, { exons: exons, cds: cds, utr: utr, sequence: seq, includeIntrons: true, intronBp: intronBp })) : mode === 'gene_collapsed_intron' ? (react_1.default.createElement(SequenceBox_1.GenecDNA, { exons: exons, cds: cds, sequence: seq, utr: utr, includeIntrons: true, collapseIntron: true, intronBp: intronBp })) : mode === 'gene_updownstream' ? (react_1.default.createElement(SequenceBox_1.GenecDNA, { exons: exons, cds: cds, sequence: seq, utr: utr, upstream: upstream, downstream: downstream, includeIntrons: true, intronBp: intronBp })) : mode === 'gene_updownstream_collapsed_intron' ? (react_1.default.createElement(SequenceBox_1.GenecDNA, { exons: exons, cds: cds, sequence: seq, utr: utr, upstream: upstream, downstream: downstream, includeIntrons: true, collapseIntron: true, intronBp: intronBp })) : (react_1.default.createElement("div", null, "Unknown type")))));
+            mode === 'genomic' ? (react_1.default.createElement(GenomicSequence_1.default, { sequence: seq })) : mode === 'genomic_sequence_updownstream' ? (react_1.default.createElement(GenomicSequence_1.default, { sequence: seq, upstream: upstream, downstream: downstream })) : mode === 'cds' ? (react_1.default.createElement(CDSSequence_1.default, { cds: cds, sequence: seq })) : mode === 'cdna' ? (react_1.default.createElement(CDNASequence_1.default, { exons: exons, cds: cds, utr: utr, sequence: seq, intronBp: intronBp })) : mode === 'protein' ? (react_1.default.createElement(ProteinSequence_1.default, { cds: cds, codonTable: codonTable, sequence: seq })) : mode === 'gene' ? (react_1.default.createElement(CDNASequence_1.default, { exons: exons, cds: cds, utr: utr, sequence: seq, includeIntrons: true, intronBp: intronBp })) : mode === 'gene_collapsed_intron' ? (react_1.default.createElement(CDNASequence_1.default, { exons: exons, cds: cds, sequence: seq, utr: utr, includeIntrons: true, collapseIntron: true, intronBp: intronBp })) : mode === 'gene_updownstream' ? (react_1.default.createElement(CDNASequence_1.default, { exons: exons, cds: cds, sequence: seq, utr: utr, upstream: upstream, downstream: downstream, includeIntrons: true, intronBp: intronBp })) : mode === 'gene_updownstream_collapsed_intron' ? (react_1.default.createElement(CDNASequence_1.default, { exons: exons, cds: cds, sequence: seq, utr: utr, upstream: upstream, downstream: downstream, includeIntrons: true, collapseIntron: true, intronBp: intronBp })) : (react_1.default.createElement("div", null, "Unknown type")))));
 });
 exports.default = SeqPanel;

package/BaseFeatureWidget/SequenceFeatureDetails/hooks.d.ts

@@ -0,0 +1,10 @@
+import { SeqState, ErrorState } from '../util';
+import { SimpleFeatureSerialized } from '../../util';
+export declare function useFeatureSequence(model: {
+    view: {
+        assemblyNames: string[];
+    };
+} | undefined, feature: SimpleFeatureSerialized, upDownBp: number, forceLoad: boolean): {
+    sequence: SeqState | ErrorState | undefined;
+    error: unknown;
+};

package/BaseFeatureWidget/SequenceFeatureDetails/hooks.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFeatureSequence = void 0;
+const react_1 = require("react");
+const util_1 = require("../../util");
+const configuration_1 = require("../../configuration");
+const BPLIMIT = 500000;
+function useFeatureSequence(model, feature, upDownBp, forceLoad) {
+    const [sequence, setSequence] = (0, react_1.useState)();
+    const [error, setError] = (0, react_1.useState)();
+    (0, react_1.useEffect)(() => {
+        var _a;
+        let finished = false;
+        if (!model) {
+            return () => { };
+        }
+        const { assemblyManager, rpcManager } = (0, util_1.getSession)(model);
+        const [assemblyName] = ((_a = model.view) === null || _a === void 0 ? void 0 : _a.assemblyNames) || [];
+        async function fetchSeq(start, end, refName) {
+            const assembly = await assemblyManager.waitForAssembly(assemblyName);
+            if (!assembly) {
+                throw new Error('assembly not found');
+            }
+            const sessionId = 'getSequence';
+            const feats = await rpcManager.call(sessionId, 'CoreGetFeatures', {
+                adapterConfig: (0, configuration_1.getConf)(assembly, ['sequence', 'adapter']),
+                sessionId,
+                regions: [
+                    {
+                        start,
+                        end,
+                        refName: assembly.getCanonicalRefName(refName),
+                        assemblyName,
+                    },
+                ],
+            });
+            const [feat] = feats;
+            return (feat === null || feat === void 0 ? void 0 : feat.get('seq')) || '';
+        }
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        ;
+        (async () => {
+            try {
+                setError(undefined);
+                const { start, end, refName } = feature;
+                if (!forceLoad && end - start > BPLIMIT) {
+                    setSequence({
+                        error: `Genomic sequence larger than ${BPLIMIT}bp, use "force load" button to display`,
+                    });
+                }
+                else {
+                    const b = start - upDownBp;
+                    const e = end + upDownBp;
+                    const seq = await fetchSeq(start, end, refName);
+                    const up = await fetchSeq(Math.max(0, b), start, refName);
+                    const down = await fetchSeq(end, e, refName);
+                    if (!finished) {
+                        setSequence({ seq, upstream: up, downstream: down });
+                    }
+                }
+            }
+            catch (e) {
+                console.error(e);
+                setError(e);
+            }
+        })();
+        return () => {
+            finished = true;
+        };
+    }, [feature, model, upDownBp, forceLoad]);
+    return { sequence, error };
+}
+exports.useFeatureSequence = useFeatureSequence;

package/BaseFeatureWidget/SequenceFeatureDetails/index.d.ts

@@ -0,0 +1,2 @@
+import { BaseProps } from './../types';
+export default function SequenceFeaturePanel({ model, feature }: BaseProps): JSX.Element | null;

package/BaseFeatureWidget/SequenceFeatureDetails/index.js

@@ -0,0 +1,68 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const material_1 = require("@mui/material");
+const mui_1 = require("tss-react/mui");
+const ui_1 = require("../../ui");
+// icons
+const Help_1 = __importDefault(require("@mui/icons-material/Help"));
+// lazies
+const HelpDlg = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./SequenceHelpDialog'))));
+const SequenceFeatureDetails = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./SequenceFeatureDetails'))));
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
+    formControl: {
+        margin: 0,
+    },
+    container: {
+        marginTop: theme.spacing(4),
+        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
+function SequenceFeaturePanel({ model, feature }) {
+    const { classes } = useStyles();
+    const [shown, setShown] = (0, react_1.useState)(false);
+    const [helpShown, setHelpShown] = (0, react_1.useState)(false);
+    return !model ? null : (react_1.default.createElement("div", { className: classes.container },
+        react_1.default.createElement(material_1.Button, { variant: "contained", onClick: () => setShown(!shown) }, shown ? 'Hide feature sequence' : 'Show feature sequence'),
+        react_1.default.createElement(material_1.FormControl, { className: classes.formControl },
+            react_1.default.createElement(material_1.IconButton, { onClick: () => setHelpShown(true) },
+                react_1.default.createElement(Help_1.default, null))),
+        shown ? (react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement(ui_1.LoadingEllipses, null) },
+            react_1.default.createElement(SequenceFeatureDetails
+            /* eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion */
+            , { 
+                /* eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion */
+                key: feature.uniqueId, model: model, feature: feature }))) : null,
+        helpShown ? (react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement("div", null) },
+            react_1.default.createElement(HelpDlg, { handleClose: () => setHelpShown(false) }))) : null));
+}
+exports.default = SequenceFeaturePanel;

package/BaseFeatureWidget/SequenceFeatureDetails/util.d.ts

@@ -0,0 +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)";

package/BaseFeatureWidget/SequenceFeatureDetails/util.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.genomeColor = exports.updownstreamColor = exports.cdsColor = exports.proteinColor = exports.utrColor = exports.intronColor = void 0;
+// 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
+exports.intronColor = undefined;
+exports.utrColor = 'rgb(200,240,240)';
+exports.proteinColor = 'rgb(220,160,220)';
+exports.cdsColor = 'rgb(220,220,180)';
+exports.updownstreamColor = 'rgba(250,200,200)';
+exports.genomeColor = 'rgb(200,280,200)';

package/BaseFeatureWidget/index.d.ts

@@ -1,5 +1,5 @@
 import PluginManager from '../PluginManager';
-declare const configSchema: import("../configuration").AnyConfigurationSchemaType;
+declare const configSchema: import("../configuration/configurationSchema").ConfigurationSchemaType<{}, import("../configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
 export default function stateModelFactory(pluginManager: PluginManager): import("mobx-state-tree").IModelType<{
     id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
     type: import("mobx-state-tree").ISimpleType<"BaseFeatureWidget">;
@@ -11,10 +11,13 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
     trackId: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
     trackType: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
 }, {
+    error: unknown;
+} & {
     setFeatureData(featureData: Record<string, unknown>): void;
     clearFeatureData(): void;
     setFormattedData(feat: Record<string, unknown>): void;
     setExtra(type?: string, trackId?: string): void;
+    setError(e: unknown): void;
 } & {
     afterCreate(): void;
 }, import("mobx-state-tree").ModelCreationType<import("mobx-state-tree/dist/internal").ExtractCFromProps<{

package/BaseFeatureWidget/index.js

@@ -36,6 +36,9 @@ function stateModelFactory(pluginManager) {
         trackId: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.string),
         trackType: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.string),
     })
+        .volatile(() => ({
+        error: undefined,
+    }))
         .actions(self => ({
         setFeatureData(featureData) {
             self.unformattedFeatureData = featureData;
@@ -50,30 +53,39 @@ function stateModelFactory(pluginManager) {
             self.trackId = trackId;
             self.trackType = type;
         },
+        setError(e) {
+            self.error = e;
+        },
     }))
         .actions(self => ({
         afterCreate() {
             (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(() => {
                 var _a, _b;
-                self.setExtra((_a = self.track) === null || _a === void 0 ? void 0 : _a.type, (_b = self.track) === null || _b === void 0 ? void 0 : _b.configuration.trackId);
-                const { unformattedFeatureData, track } = self;
-                const session = (0, util_1.getSession)(self);
-                if (unformattedFeatureData) {
-                    const feature = (0, clone_1.default)(unformattedFeatureData);
-                    const combine = (arg2, feature) => ({
-                        ...(0, configuration_1.getConf)(session, ['formatDetails', arg2], { feature }),
-                        ...(0, configuration_1.getConf)(track, ['formatDetails', arg2], { feature }),
-                    });
-                    if (track) {
-                        // eslint-disable-next-line no-underscore-dangle
-                        feature.__jbrowsefmt = combine('feature', feature);
-                        const depth = (0, configuration_1.getConf)(track, ['formatDetails', 'depth']);
-                        formatSubfeatures(feature, depth, sub => {
-                            // eslint-disable-next-line no-underscore-dangle
-                            sub.__jbrowsefmt = combine('subfeatures', sub);
+                try {
+                    self.setExtra((_a = self.track) === null || _a === void 0 ? void 0 : _a.type, (_b = self.track) === null || _b === void 0 ? void 0 : _b.configuration.trackId);
+                    const { unformattedFeatureData, track } = self;
+                    const session = (0, util_1.getSession)(self);
+                    if (unformattedFeatureData) {
+                        const feature = (0, clone_1.default)(unformattedFeatureData);
+                        const combine = (arg2, feature) => ({
+                            ...(0, configuration_1.getConf)(session, ['formatDetails', arg2], { feature }),
+                            ...(0, configuration_1.getConf)(track, ['formatDetails', arg2], { feature }),
                         });
+                        if (track) {
+                            // eslint-disable-next-line no-underscore-dangle
+                            feature.__jbrowsefmt = combine('feature', feature);
+                            const depth = (0, configuration_1.getConf)(track, ['formatDetails', 'depth']);
+                            formatSubfeatures(feature, depth, sub => {
+                                // eslint-disable-next-line no-underscore-dangle
+                                sub.__jbrowsefmt = combine('subfeatures', sub);
+                            });
+                        }
+                        self.setFormattedData(feature);
                     }
-                    self.setFormattedData(feature);
+                }
+                catch (e) {
+                    console.error(e);
+                    self.setError(e);
                 }
             }));
         },

package/BaseFeatureWidget/types.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import { IAnyStateTreeNode } from 'mobx-state-tree';
-import { SimpleFeatureSerializedNoId } from '../util/simpleFeature';
+import { SimpleFeatureSerialized } from '../util/simpleFeature';
 import { AbstractViewModel } from '../util';
 export interface BaseProps extends BaseCardProps {
-    feature: SimpleFeatureSerializedNoId;
+    feature: SimpleFeatureSerialized;
     formatter?: (val: unknown, key: string) => React.ReactNode;
     descriptions?: Record<string, React.ReactNode>;
     model?: IAnyStateTreeNode & {

package/Plugin.d.ts

@@ -1,5 +1,5 @@
 import PluginManager from './PluginManager';
-import { AnyConfigurationSchemaType } from './configuration/configurationSchema';
+import { AnyConfigurationSchemaType } from './configuration';
 /**
  * base class for a JBrowse plugin
  */

package/PluginLoader.js

@@ -25,6 +25,20 @@ function isCJSPluginDefinition(def) {
     return def.cjsUrl !== undefined;
 }
 exports.isCJSPluginDefinition = isCJSPluginDefinition;
+function pluginDescriptionString(pluginDefinition) {
+    var _a;
+    if (isUMDPluginDefinition(pluginDefinition)) {
+        return `UMD plugin ${pluginDefinition.name}`;
+    }
+    if (isESMPluginDefinition(pluginDefinition)) {
+        return `ESM plugin ${pluginDefinition.esmUrl ||
+            ((_a = pluginDefinition.esmLoc) === null || _a === void 0 ? void 0 : _a.uri)}`;
+    }
+    if (isCJSPluginDefinition(pluginDefinition)) {
+        return `CJS plugin ${pluginDefinition.cjsUrl}`;
+    }
+    return 'unknown plugin';
+}
 function isInWebWorker() {
     return Boolean('WorkerGlobalScope' in globalThis);
 }
@@ -115,6 +129,9 @@ class PluginLoader {
         else {
             throw new Error(`Could not determine plugin type: ${JSON.stringify(def)}`);
         }
+        if (!plugin.default) {
+            throw new Error(`${pluginDescriptionString(def)} does not have a default export, cannot load`);
+        }
         return plugin.default;
     }
     installGlobalReExports(target) {