@jbrowse/core 2.11.2 → 2.12.1

package/BaseFeatureWidget/BaseFeatureDetail/ArrayValue.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ArrayValue;
 const react_1 = __importDefault(require("react"));
 const is_object_1 = __importDefault(require("is-object"));
 const mui_1 = require("tss-react/mui");
@@ -41,4 +42,3 @@ function ArrayValue({ name, value, description, prefix = [], }) {
                 react_1.default.createElement(BasicValue_1.default, { value: val }))))));
     }
 }
-exports.default = ArrayValue;

package/BaseFeatureWidget/BaseFeatureDetail/Attributes.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Attributes;
 const react_1 = __importDefault(require("react"));
 const is_object_1 = __importDefault(require("is-object"));
 // locals
@@ -49,4 +50,3 @@ function Attributes(props) {
         }
     })));
 }
-exports.default = Attributes;

package/BaseFeatureWidget/BaseFeatureDetail/BasicValue.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = BasicValue;
 const react_1 = __importDefault(require("react"));
 const mui_1 = require("tss-react/mui");
 const is_object_1 = __importDefault(require("is-object"));
@@ -23,4 +24,3 @@ function BasicValue({ value }) {
     const isLink = `${value}`.match(/^https?:\/\//);
     return (react_1.default.createElement("div", { className: classes.fieldValue }, react_1.default.isValidElement(value) ? (value) : isLink ? (react_1.default.createElement(material_1.Link, { href: `${value}` }, `${value}`)) : (react_1.default.createElement(ui_1.SanitizedHTML, { html: (0, is_object_1.default)(value) ? JSON.stringify(value) : String(value) }))));
 }
-exports.default = BasicValue;

package/BaseFeatureWidget/BaseFeatureDetail/DataGridDetails.js

@@ -26,6 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = DataGridDetails;
 const react_1 = __importStar(require("react"));
 const mui_1 = require("tss-react/mui");
 const x_data_grid_1 = require("@mui/x-data-grid");
@@ -36,8 +37,7 @@ const FieldName_1 = __importDefault(require("./FieldName"));
 const ui_1 = require("../../ui");
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     margin: {
-        margin: theme.spacing(1),
-        width: '100%',
+        marginBottom: theme.spacing(4),
     },
     cell: {
         whiteSpace: 'nowrap',
@@ -76,29 +76,24 @@ function DataGridDetails({ value, prefix, name, }) {
     }
     const widths = colNames.map(e => (0, util_1.measureGridWidth)(rows.map(r => r[e])));
     if (unionKeys.size < keys.length + 5) {
-        return (react_1.default.createElement(react_1.default.Fragment, null,
+        return (react_1.default.createElement("div", { className: classes.margin },
             react_1.default.createElement(FieldName_1.default, { prefix: prefix, name: name }),
             react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Checkbox, { checked: checked, onChange: event => setChecked(event.target.checked) }), label: react_1.default.createElement(material_1.Typography, { variant: "body2" }, "Show options") }),
-            react_1.default.createElement("div", { className: classes.margin },
-                react_1.default.createElement(x_data_grid_1.DataGrid, { disableRowSelectionOnClick: true, 
-                    // @ts-expect-error the rows gets confused by the renderCell of the
-                    // columns below
-                    rows: rows, rowCount: 25, rowHeight: 25, columnHeaderHeight: 35, hideFooter: rows.length < 25, slots: { toolbar: checked ? x_data_grid_1.GridToolbar : null }, slotProps: {
-                        toolbar: {
-                            printOptions: {
-                                disableToolbarButton: true,
-                            },
-                        },
-                    }, columns: colNames.map((val, index) => ({
-                        field: val,
-                        renderCell: params => {
-                            const value = params.value;
-                            return (react_1.default.createElement("div", { className: classes.cell },
-                                react_1.default.createElement(ui_1.SanitizedHTML, { html: (0, util_1.getStr)(value) })));
+            react_1.default.createElement(x_data_grid_1.DataGrid, { disableRowSelectionOnClick: true, rows: rows, rowCount: 25, rowHeight: 25, columnHeaderHeight: 35, hideFooter: rows.length < 25, slots: { toolbar: checked ? x_data_grid_1.GridToolbar : null }, slotProps: {
+                    toolbar: {
+                        printOptions: {
+                            disableToolbarButton: true,
                         },
-                        width: widths[index],
-                    })) }))));
+                    },
+                }, columns: colNames.map((val, index) => ({
+                    field: val,
+                    renderCell: params => {
+                        const value = params.value;
+                        return (react_1.default.createElement("div", { className: classes.cell },
+                            react_1.default.createElement(ui_1.SanitizedHTML, { html: (0, util_1.getStr)(value) })));
+                    },
+                    width: widths[index],
+                })) })));
     }
     return null;
 }
-exports.default = DataGridDetails;

package/BaseFeatureWidget/BaseFeatureDetail/FieldName.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = FieldName;
 const react_1 = __importDefault(require("react"));
 const material_1 = require("@mui/material");
 const mui_1 = require("tss-react/mui");
@@ -28,4 +29,3 @@ function FieldName({ description, name, width, prefix = [], }) {
     return description ? (react_1.default.createElement(material_1.Tooltip, { title: description, placement: "left" },
         react_1.default.createElement("div", { className: cx(classes.fieldDescription, classes.fieldName) }, val))) : (react_1.default.createElement("div", { className: classes.fieldName, style: { width: width } }, val));
 }
-exports.default = FieldName;

package/BaseFeatureWidget/BaseFeatureDetail/SimpleField.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = SimpleField;
 const react_1 = __importDefault(require("react"));
 const mui_1 = require("tss-react/mui");
 const FieldName_1 = __importDefault(require("./FieldName"));
@@ -19,4 +20,3 @@ function SimpleField({ name, value, description, prefix, width, }) {
         react_1.default.createElement(FieldName_1.default, { prefix: prefix, description: description, name: name, width: width }),
         react_1.default.createElement(BasicValue_1.default, { value: value }))) : null;
 }
-exports.default = SimpleField;

package/BaseFeatureWidget/BaseFeatureDetail/UriField.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = UriField;
 const react_1 = __importDefault(require("react"));
 const FieldName_1 = __importDefault(require("./FieldName"));
 const mui_1 = require("tss-react/mui");
@@ -27,4 +28,3 @@ function UriField({ value, prefix, name, }) {
         react_1.default.createElement(FieldName_1.default, { prefix: prefix, name: name }),
         react_1.default.createElement(BasicValue_1.default, { value: href })));
 }
-exports.default = UriField;

package/BaseFeatureWidget/BaseFeatureDetail/index.js

@@ -26,7 +26,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Attributes = exports.FeatureDetails = exports.BaseAttributes = exports.BaseCoreDetails = exports.BaseCard = void 0;
+exports.Attributes = exports.BaseAttributes = exports.BaseCoreDetails = void 0;
+exports.BaseCard = BaseCard;
+exports.FeatureDetails = FeatureDetails;
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const react_1 = __importStar(require("react"));
 const react_error_boundary_1 = require("react-error-boundary");
@@ -69,12 +71,9 @@ function BaseCard({ children, title, defaultExpanded = true, }) {
     const [expanded, setExpanded] = (0, react_1.useState)(defaultExpanded);
     return (react_1.default.createElement(material_1.Accordion, { expanded: expanded, onChange: () => setExpanded(s => !s), TransitionProps: { unmountOnExit: true, timeout: 150 } },
         react_1.default.createElement(material_1.AccordionSummary, { expandIcon: react_1.default.createElement(ExpandMore_1.default, { className: classes.expandIcon }) },
-            react_1.default.createElement(material_1.Typography, { variant: "button" },
-                " ",
-                title)),
+            react_1.default.createElement(material_1.Typography, { variant: "button" }, title)),
         react_1.default.createElement(material_1.AccordionDetails, { className: classes.expansionPanelDetails }, children)));
 }
-exports.BaseCard = BaseCard;
 function Position(props) {
     const { feature } = props;
     const strand = feature.strand;
@@ -160,7 +159,6 @@ function FeatureDetails(props) {
                 react_1.default.createElement(ExtraPanel.Component, { ...props })))) : null,
         depth < maxDepth && (subfeatures === null || subfeatures === void 0 ? void 0 : subfeatures.length) ? (react_1.default.createElement(BaseCard, { title: "Subfeatures", defaultExpanded: depth < 1 }, subfeatures.map((sub, idx) => (react_1.default.createElement(FeatureDetails, { key: JSON.stringify(sub), feature: { ...sub, uniqueId: `${uniqueId}_${idx}` }, model: model, depth: depth + 1 }))))) : null));
 }
-exports.FeatureDetails = FeatureDetails;
 const BaseFeatureDetail = (0, mobx_react_1.observer)(function ({ model }) {
     const { error, featureData } = model;
     if (error) {

package/BaseFeatureWidget/BaseFeatureDetail/util.js

@@ -3,24 +3,24 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.accessNested = exports.generateMaxWidth = exports.generateTitle = exports.isEmpty = void 0;
+exports.isEmpty = isEmpty;
+exports.generateTitle = generateTitle;
+exports.generateMaxWidth = generateMaxWidth;
+exports.accessNested = accessNested;
 const is_object_1 = __importDefault(require("is-object"));
 const util_1 = require("../../util");
 const util_2 = require("../util");
 function isEmpty(obj) {
     return Object.keys(obj).length === 0;
 }
-exports.isEmpty = isEmpty;
 function generateTitle(name, id, type) {
     return [(0, util_2.ellipses)(`${name}` || `${id}`), `${type}`]
         .filter(f => !!f)
         .join(' - ');
 }
-exports.generateTitle = generateTitle;
 function generateMaxWidth(array, prefix) {
     return (Math.ceil((0, util_1.max)(array.map(key => (0, util_1.measureText)([...prefix, key[0]].join('.'), 12)))) + 10);
 }
-exports.generateMaxWidth = generateMaxWidth;
 // pick using a path from an object, similar to _.get from lodash with special
 // logic for Descriptions from e.g. VCF headers
 //
@@ -39,4 +39,3 @@ function accessNested(arr, obj = {}) {
             ? obj2.Description
             : undefined;
 }
-exports.accessNested = accessNested;

package/BaseFeatureWidget/SequenceFeatureDetails/SequenceFeatureDetails.js

@@ -28,110 +28,49 @@ var __importDefault = (this && this.__importDefault) || function (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 mobx_react_1 = require("mobx-react");
-const copy_to_clipboard_1 = __importDefault(require("copy-to-clipboard"));
 // locals
 const hooks_1 = require("./hooks");
 const ui_1 = require("../../ui");
-const util_1 = require("../../util");
 // icons
-const Settings_1 = __importDefault(require("@mui/icons-material/Settings"));
+const SequenceFeatureMenu_1 = __importDefault(require("./dialogs/SequenceFeatureMenu"));
+const SequenceTypeSelector_1 = __importDefault(require("./dialogs/SequenceTypeSelector"));
 // lazies
 const SequencePanel = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./SequencePanel'))));
-const SettingsDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./dialogs/SettingsDialog'))));
-const useStyles = (0, mui_1.makeStyles)()({
-    formControl: {
-        margin: 0,
-        marginLeft: 4,
-    },
-});
+const SequenceDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./dialogs/SequenceDialog'))));
 // set the key on this component to feature.id to clear state after new feature
 // is selected
 const SequenceFeatureDetails = (0, mobx_react_1.observer)(function ({ model, feature, }) {
-    var _a, _b;
     const { sequenceFeatureDetails } = model;
-    const { intronBp, upDownBp } = sequenceFeatureDetails;
-    const { classes } = useStyles();
+    const { upDownBp } = sequenceFeatureDetails;
     const seqPanelRef = (0, react_1.useRef)(null);
+    const [openInDialog, setOpenInDialog] = (0, react_1.useState)(false);
     const [force, setForce] = (0, react_1.useState)(false);
-    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 hasExonOrCDS = hasExon || hasCDS;
     const { sequence, error } = (0, hooks_1.useFeatureSequence)(model, feature, upDownBp, force);
-    const [mode, setMode] = (0, react_1.useState)(hasCDS ? 'cds' : hasExon ? 'cdna' : 'genomic');
+    (0, react_1.useEffect)(() => {
+        sequenceFeatureDetails.setFeature(feature);
+    }, [sequenceFeatureDetails, feature]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", null,
-            react_1.default.createElement(material_1.FormControl, { className: classes.formControl },
-                react_1.default.createElement(material_1.Select, { size: "small", value: mode, onChange: event => setMode(event.target.value) }, Object.entries({
-                    ...(hasCDS
-                        ? {
-                            cds: 'CDS',
-                        }
-                        : {}),
-                    ...(hasCDS
-                        ? {
-                            protein: 'Protein',
-                        }
-                        : {}),
-                    ...(hasExonOrCDS
-                        ? {
-                            cdna: 'cDNA',
-                        }
-                        : {}),
-                    ...(hasExonOrCDS
-                        ? {
-                            gene: `Genomic w/ full introns`,
-                        }
-                        : {}),
-                    ...(hasExonOrCDS
-                        ? {
-                            gene_updownstream: `Genomic w/ full introns +/- ${upDownBp}bp up+down stream`,
-                        }
-                        : {}),
-                    ...(hasExonOrCDS
-                        ? {
-                            gene_collapsed_intron: `Genomic w/ ${intronBp}bp intron`,
-                        }
-                        : {}),
-                    ...(hasExonOrCDS
-                        ? {
-                            gene_updownstream_collapsed_intron: `Genomic w/ ${intronBp}bp intron +/- ${upDownBp}bp up+down stream `,
-                        }
-                        : {}),
-                    ...(!hasExonOrCDS
-                        ? {
-                            genomic: 'Genomic',
-                        }
-                        : {}),
-                    ...(!hasExonOrCDS
-                        ? {
-                            genomic_sequence_updownstream: `Genomic +/- ${upDownBp}bp up+down stream`,
-                        }
-                        : {}),
-                }).map(([key, val]) => (react_1.default.createElement(material_1.MenuItem, { key: key, value: key }, val))))),
-            react_1.default.createElement(material_1.Button, { className: classes.formControl, variant: "contained", onClick: () => {
-                    const ref = seqPanelRef.current;
-                    if (ref) {
-                        (0, copy_to_clipboard_1.default)(ref.textContent || '', { format: 'text/plain' });
-                    }
-                } }, "Copy plaintext"),
-            react_1.default.createElement(material_1.Button, { className: classes.formControl, variant: "contained", onClick: () => {
-                    const ref = seqPanelRef.current;
-                    if (ref) {
-                        (0, copy_to_clipboard_1.default)(ref.innerHTML, { format: 'text/html' });
-                    }
-                } }, "Copy HTML"),
-            react_1.default.createElement(material_1.IconButton, { className: classes.formControl, onClick: () => (0, util_1.getSession)(model).queueDialog(handleClose => [
-                    SettingsDialog,
-                    { model: sequenceFeatureDetails, handleClose },
-                ]) },
-                react_1.default.createElement(Settings_1.default, null))),
-        react_1.default.createElement("div", null,
+            react_1.default.createElement(SequenceTypeSelector_1.default, { model: sequenceFeatureDetails }),
+            react_1.default.createElement(SequenceFeatureMenu_1.default, { ref: seqPanelRef, model: sequenceFeatureDetails, extraItems: [
+                    {
+                        label: 'Open in dialog',
+                        onClick: () => {
+                            // this is given a setTimeout because it allows the menu to
+                            // close before dialog opens
+                            setTimeout(() => setOpenInDialog(true), 1);
+                        },
+                    },
+                ] })),
+        openInDialog ? (react_1.default.createElement("div", null,
+            "Open in dialog...",
+            react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement(ui_1.LoadingEllipses, null) },
+                react_1.default.createElement(SequenceDialog, { model: model, feature: feature, handleClose: () => setOpenInDialog(false) })))) : (react_1.default.createElement("div", 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(ui_1.ErrorMessage, { 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, model: sequenceFeatureDetails })))) : (react_1.default.createElement(material_1.Typography, null, "No sequence found")))));
+                react_1.default.createElement(SequencePanel, { ref: seqPanelRef, feature: feature, sequence: sequence, model: sequenceFeatureDetails })))) : (react_1.default.createElement(material_1.Typography, null, "No sequence found"))))));
 });
 exports.default = SequenceFeatureDetails;

package/BaseFeatureWidget/SequenceFeatureDetails/SequenceFeaturePanel.js

@@ -53,7 +53,7 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
 const SequenceFeaturePanel = (0, mobx_react_1.observer)(function ({ model, feature, }) {
     const { classes } = useStyles();
     const [shown, setShown] = (0, react_1.useState)(false);
-    return !model ? null : (react_1.default.createElement("div", { className: classes.container },
+    return model ? (react_1.default.createElement("div", { className: classes.container },
         react_1.default.createElement(material_1.FormControl, { className: classes.formControl },
             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.IconButton, { onClick: () => (0, util_1.getSession)(model).queueDialog(handleClose => [
@@ -62,6 +62,6 @@ const SequenceFeaturePanel = (0, mobx_react_1.observer)(function ({ model, featu
             ]) },
             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, { key: feature.uniqueId, model: model, feature: feature }))) : null));
+            react_1.default.createElement(SequenceFeatureDetails, { key: feature.uniqueId, model: model, feature: feature }))) : null)) : null;
 });
 exports.default = SequenceFeaturePanel;

package/BaseFeatureWidget/SequenceFeatureDetails/SequencePanel.d.ts

@@ -2,11 +2,10 @@ import React from 'react';
 import { SimpleFeatureSerialized } from '../../util';
 import { SeqState } from '../util';
 import { SequenceFeatureDetailsModel } from './model';
-interface SeqPanelProps {
+interface SequencePanelProps {
     sequence: SeqState;
     feature: SimpleFeatureSerialized;
-    mode: string;
     model: SequenceFeatureDetailsModel;
 }
-declare const SeqPanel: React.ForwardRefExoticComponent<SeqPanelProps & React.RefAttributes<HTMLDivElement>>;
-export default SeqPanel;
+declare const SequencePanel: React.ForwardRefExoticComponent<SequencePanelProps & React.RefAttributes<HTMLDivElement>>;
+export default SequencePanel;

package/BaseFeatureWidget/SequenceFeatureDetails/SequencePanel.js

@@ -4,14 +4,48 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
+const mobx_react_1 = require("mobx-react");
+// locals
 const util_1 = require("../../util");
 const util_2 = require("../util");
+// panel types
 const CDNASequence_1 = __importDefault(require("./seqtypes/CDNASequence"));
 const ProteinSequence_1 = __importDefault(require("./seqtypes/ProteinSequence"));
 const GenomicSequence_1 = __importDefault(require("./seqtypes/GenomicSequence"));
 const CDSSequence_1 = __importDefault(require("./seqtypes/CDSSequence"));
-const SeqPanel = react_1.default.forwardRef(function SeqPanel2(props, ref) {
-    const { model, feature, mode } = props;
+function getStrand(strand) {
+    if (strand === -1) {
+        return '(-)';
+    }
+    else if (strand === 1) {
+        return '(+)';
+    }
+    else {
+        return '';
+    }
+}
+function WordWrap({ children }) {
+    return (react_1.default.createElement("pre", { style: {
+            /* raw styles instead of className so that html copy works */
+            fontFamily: 'monospace',
+            color: 'black',
+            fontSize: 11,
+        } }, children));
+}
+function NoWordWrap({ children }) {
+    return (react_1.default.createElement("div", { style: {
+            /* raw styles instead of className so that html copy works */
+            fontFamily: 'monospace',
+            color: 'black',
+            fontSize: 11,
+            maxWidth: 600,
+            whiteSpace: 'wrap',
+            wordBreak: 'break-all',
+        } }, children));
+}
+const SequencePanel = (0, mobx_react_1.observer)(react_1.default.forwardRef(function S(props, ref) {
+    const { model, feature } = props;
+    const { showCoordinates, mode } = model;
     let { sequence: { seq, upstream = '', downstream = '' }, } = props;
     const { subfeatures = [] } = feature;
     const children = subfeatures
@@ -21,10 +55,10 @@ const SeqPanel = react_1.default.forwardRef(function SeqPanel2(props, ref) {
         start: sub.start - feature.start,
         end: sub.end - feature.start,
     }));
-    // we filter duplicate entries in cds and exon lists duplicate entries may be
-    // rare but was seen in Gencode v36 track NCList, likely a bug on GFF3 or
-    // probably worth ignoring here (produces broken protein translations if
-    // included)
+    // we filter duplicate entries in cds and exon lists duplicate entries
+    // may be rare but was seen in Gencode v36 track NCList, likely a bug
+    // on GFF3 or probably worth ignoring here (produces broken protein
+    // translations if included)
     //
     // position 1:224,800,006..225,203,064 gene ENSG00000185842.15 first
     // transcript ENST00000445597.6
@@ -57,21 +91,18 @@ const SeqPanel = react_1.default.forwardRef(function SeqPanel2(props, ref) {
         utr = (0, util_2.revlist)(utr, seq.length);
     }
     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 instead of className so that html copy works */
-                fontFamily: 'monospace',
-                wordWrap: 'break-word',
-                overflow: 'auto',
-                color: 'black',
-                fontSize: 12,
-                maxWidth: 600,
-                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(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, { model: model, exons: exons, cds: cds, utr: utr, sequence: seq })) : mode === 'protein' ? (react_1.default.createElement(ProteinSequence_1.default, { cds: cds, codonTable: codonTable, sequence: seq })) : mode === 'gene' ? (react_1.default.createElement(CDNASequence_1.default, { model: model, exons: exons, cds: cds, utr: utr, sequence: seq, includeIntrons: true })) : mode === 'gene_collapsed_intron' ? (react_1.default.createElement(CDNASequence_1.default, { model: model, exons: exons, cds: cds, sequence: seq, utr: utr, includeIntrons: true, collapseIntron: true })) : mode === 'gene_updownstream' ? (react_1.default.createElement(CDNASequence_1.default, { model: model, exons: exons, cds: cds, sequence: seq, utr: utr, upstream: upstream, downstream: downstream, includeIntrons: true })) : mode === 'gene_updownstream_collapsed_intron' ? (react_1.default.createElement(CDNASequence_1.default, { model: model, exons: exons, cds: cds, sequence: seq, utr: utr, upstream: upstream, downstream: downstream, includeIntrons: true, collapseIntron: true })) : (react_1.default.createElement("div", null, "Unknown type")))));
-});
-exports.default = SeqPanel;
+    const Container = showCoordinates ? WordWrap : NoWordWrap;
+    return (react_1.default.createElement("div", { "data-testid": "sequence_panel", ref: ref, style: { maxHeight: 300, overflow: 'auto' } },
+        react_1.default.createElement(Container, null,
+            react_1.default.createElement("div", { style: { background: 'white' } }, `>${[
+                (feature.name || feature.id) + '-' + mode,
+                `${feature.refName}:${(0, util_1.toLocale)(feature.start + 1)}-${(0, util_1.toLocale)(feature.end)}${getStrand(feature.strand)}`,
+                mode.endsWith('updownstream')
+                    ? `+/- ${(0, util_1.toLocale)(model.upDownBp)} up/downstream bp`
+                    : '',
+            ]
+                .filter(f => !!f)
+                .join(' ')}\n`),
+            mode === 'genomic' ? (react_1.default.createElement(GenomicSequence_1.default, { feature: feature, model: model, sequence: seq })) : mode === 'genomic_sequence_updownstream' ? (react_1.default.createElement(GenomicSequence_1.default, { model: model, feature: feature, sequence: seq, upstream: upstream, downstream: downstream })) : mode === 'cds' ? (react_1.default.createElement(CDSSequence_1.default, { model: model, cds: cds, sequence: seq })) : mode === 'cdna' ? (react_1.default.createElement(CDNASequence_1.default, { model: model, exons: exons, feature: feature, cds: cds, utr: utr, sequence: seq })) : mode === 'protein' ? (react_1.default.createElement(ProteinSequence_1.default, { model: model, cds: cds, codonTable: codonTable, sequence: seq })) : mode === 'gene' ? (react_1.default.createElement(CDNASequence_1.default, { model: model, exons: exons, feature: feature, cds: cds, utr: utr, sequence: seq, includeIntrons: true })) : mode === 'gene_collapsed_intron' ? (react_1.default.createElement(CDNASequence_1.default, { model: model, exons: exons, feature: feature, cds: cds, sequence: seq, utr: utr, includeIntrons: true, collapseIntron: true })) : mode === 'gene_updownstream' ? (react_1.default.createElement(CDNASequence_1.default, { model: model, exons: exons, feature: feature, cds: cds, sequence: seq, utr: utr, upstream: upstream, downstream: downstream, includeIntrons: true })) : mode === 'gene_updownstream_collapsed_intron' ? (react_1.default.createElement(CDNASequence_1.default, { model: model, exons: exons, feature: feature, cds: cds, sequence: seq, utr: utr, upstream: upstream, downstream: downstream, includeIntrons: true, collapseIntron: true })) : (react_1.default.createElement("div", null, "Unknown type")))));
+}));
+exports.default = SequencePanel;

package/BaseFeatureWidget/SequenceFeatureDetails/dialogs/HelpDialog.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = HelpDialog;
 const react_1 = __importDefault(require("react"));
 const material_1 = require("@mui/material");
 const ui_1 = require("@jbrowse/core/ui");
@@ -29,4 +30,3 @@ function HelpDialog({ handleClose, }) {
         react_1.default.createElement(material_1.DialogActions, null,
             react_1.default.createElement(material_1.Button, { onClick: () => handleClose(), autoFocus: true, variant: "contained" }, "Close"))));
 }
-exports.default = HelpDialog;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { SimpleFeatureSerialized } from '../../../util';
+import { BaseFeatureWidgetModel } from '../../stateModelFactory';
+declare const SequenceDialog: ({ handleClose, model, feature, }: {
+    handleClose: () => void;
+    feature: SimpleFeatureSerialized;
+    model: BaseFeatureWidgetModel;
+}) => React.JSX.Element;
+export default SequenceDialog;

package/BaseFeatureWidget/SequenceFeatureDetails/dialogs/SequenceDialog.js

@@ -0,0 +1,69 @@
+"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 ui_1 = require("@jbrowse/core/ui");
+const mui_1 = require("tss-react/mui");
+const mobx_react_1 = require("mobx-react");
+// locals
+const hooks_1 = require("../hooks");
+const SequencePanel_1 = __importDefault(require("../SequencePanel"));
+const SequenceFeatureMenu_1 = __importDefault(require("./SequenceFeatureMenu"));
+const SequenceTypeSelector_1 = __importDefault(require("./SequenceTypeSelector"));
+const useStyles = (0, mui_1.makeStyles)()({
+    dialogContent: {
+        width: '80em',
+    },
+    formControl: {
+        margin: 0,
+        marginLeft: 4,
+    },
+});
+const SequenceDialog = (0, mobx_react_1.observer)(function ({ handleClose, model, feature, }) {
+    const { sequenceFeatureDetails } = model;
+    const { upDownBp } = sequenceFeatureDetails;
+    const { classes } = useStyles();
+    const seqPanelRef = (0, react_1.useRef)(null);
+    const [force, setForce] = (0, react_1.useState)(false);
+    const { sequence, error } = (0, hooks_1.useFeatureSequence)(model, feature, upDownBp, force);
+    return (react_1.default.createElement(ui_1.Dialog, { maxWidth: "xl", open: true, onClose: () => handleClose(), title: "Sequence view" },
+        react_1.default.createElement(material_1.DialogContent, { className: classes.dialogContent },
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(SequenceTypeSelector_1.default, { model: sequenceFeatureDetails }),
+                react_1.default.createElement(SequenceFeatureMenu_1.default, { ref: seqPanelRef, model: sequenceFeatureDetails })),
+            react_1.default.createElement("div", 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(ui_1.ErrorMessage, { 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_1.default, { ref: seqPanelRef, feature: feature, sequence: sequence, model: sequenceFeatureDetails })))) : (react_1.default.createElement(material_1.Typography, null, "No sequence found")))),
+        react_1.default.createElement(material_1.DialogActions, null,
+            react_1.default.createElement(material_1.Button, { onClick: () => handleClose(), variant: "contained" }, "Close"))));
+});
+exports.default = SequenceDialog;

package/BaseFeatureWidget/SequenceFeatureDetails/dialogs/SequenceFeatureMenu.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { SequenceFeatureDetailsModel } from '../model';
+import { MenuItem } from '../../../ui';
+interface Props {
+    model: SequenceFeatureDetailsModel;
+    extraItems?: MenuItem[];
+}
+declare const SequenceFeatureMenu: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export default SequenceFeatureMenu;