@jbrowse/core 2.11.1 → 2.12.0

package/BaseFeatureWidget/BaseFeatureDetail/DataGridDetails.js

@@ -32,14 +32,11 @@ const x_data_grid_1 = require("@mui/x-data-grid");
 const material_1 = require("@mui/material");
 // locals
 const util_1 = require("../../util");
-const ResizeBar_1 = __importDefault(require("../../ui/ResizeBar"));
 const FieldName_1 = __importDefault(require("./FieldName"));
-const useResizeBar_1 = require("../../ui/useResizeBar");
 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',
@@ -49,7 +46,6 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
 }));
 function DataGridDetails({ value, prefix, name, }) {
     const { classes } = useStyles();
-    const { ref, scrollLeft } = (0, useResizeBar_1.useResizeBar)();
     const [checked, setChecked] = (0, react_1.useState)(false);
     const keys = Object.keys(value[0]).sort();
     const unionKeys = new Set(keys);
@@ -77,31 +73,26 @@ function DataGridDetails({ value, prefix, name, }) {
     else {
         colNames = [...unionKeys];
     }
-    const [widths, setWidths] = (0, react_1.useState)(colNames.map(e => (0, util_1.measureGridWidth)(rows.map(r => r[e]))));
+    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, ref: ref },
-                react_1.default.createElement(ResizeBar_1.default, { widths: widths, setWidths: setWidths, scrollLeft: scrollLeft }),
-                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,
-                            },
+            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,
                         },
-                    }, 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],
-                    })) }))));
+                    },
+                }, 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;
 }

package/BaseFeatureWidget/BaseFeatureDetail/index.js

@@ -69,9 +69,7 @@ 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;

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/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;

package/BaseFeatureWidget/SequenceFeatureDetails/dialogs/SequenceFeatureMenu.js

@@ -0,0 +1,126 @@
+"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 mobx_react_1 = require("mobx-react");
+const copy_to_clipboard_1 = __importDefault(require("copy-to-clipboard"));
+const file_saver_1 = require("file-saver");
+// locals
+const CascadingMenuButton_1 = __importDefault(require("../../../ui/CascadingMenuButton"));
+// icons
+const MoreVert_1 = __importDefault(require("@mui/icons-material/MoreVert"));
+const Settings_1 = __importDefault(require("@mui/icons-material/Settings"));
+// lazies
+const SequenceFeatureSettingsDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./SettingsDialog'))));
+const SequenceFeatureMenu = (0, mobx_react_1.observer)(react_1.default.forwardRef(function SequenceFeatureMenu2({ model, extraItems = [] }, ref) {
+    if (typeof ref === 'function') {
+        throw new Error('needs a non function ref');
+    }
+    const [showSettings, setShowSettings] = (0, react_1.useState)(false);
+    const { showCoordinatesSetting, showGenomicCoordsOption } = model;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(CascadingMenuButton_1.default, { menuItems: [
+                {
+                    label: 'Copy plaintext',
+                    onClick: () => {
+                        const r = ref === null || ref === void 0 ? void 0 : ref.current;
+                        if (r) {
+                            (0, copy_to_clipboard_1.default)(r.textContent || '', { format: 'text/plain' });
+                        }
+                    },
+                },
+                {
+                    label: 'Copy HTML',
+                    onClick: () => {
+                        const r = ref === null || ref === void 0 ? void 0 : ref.current;
+                        if (r) {
+                            (0, copy_to_clipboard_1.default)(r.outerHTML, { format: 'text/html' });
+                        }
+                    },
+                },
+                {
+                    label: 'Download plaintext',
+                    onClick: () => {
+                        const r = ref === null || ref === void 0 ? void 0 : ref.current;
+                        if (r) {
+                            (0, file_saver_1.saveAs)(new Blob([r.textContent || ''], {
+                                type: 'text/plain;charset=utf-8',
+                            }), 'sequence.txt');
+                        }
+                    },
+                },
+                {
+                    label: 'Download HTML',
+                    onClick: () => {
+                        const r = ref === null || ref === void 0 ? void 0 : ref.current;
+                        if (r) {
+                            (0, file_saver_1.saveAs)(new Blob([r.outerHTML || ''], {
+                                type: 'text/html;charset=utf-8',
+                            }), 'sequence.html');
+                        }
+                    },
+                },
+                ...extraItems,
+                {
+                    label: 'Show coordinates?',
+                    type: 'subMenu',
+                    subMenu: [
+                        {
+                            label: 'No coordinates',
+                            type: 'radio',
+                            checked: showCoordinatesSetting === 'none',
+                            onClick: () => model.setShowCoordinates('none'),
+                        },
+                        {
+                            label: 'Coordinates relative to feature start',
+                            type: 'radio',
+                            checked: showCoordinatesSetting === 'relative',
+                            onClick: () => model.setShowCoordinates('relative'),
+                        },
+                        ...(showGenomicCoordsOption
+                            ? [
+                                {
+                                    label: 'Coordinates relative to genome (only available for continuous genome based sequence types)',
+                                    type: 'radio',
+                                    checked: showCoordinatesSetting === 'genomic',
+                                    onClick: () => model.setShowCoordinates('genomic'),
+                                },
+                            ]
+                            : []),
+                    ],
+                },
+                {
+                    label: 'Settings',
+                    icon: Settings_1.default,
+                    onClick: () => setShowSettings(true),
+                },
+            ] },
+            react_1.default.createElement(MoreVert_1.default, null)),
+        showSettings ? (react_1.default.createElement(SequenceFeatureSettingsDialog, { model: model, handleClose: () => setShowSettings(false) })) : null));
+}));
+exports.default = SequenceFeatureMenu;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { SequenceFeatureDetailsModel } from '../model';
+declare const SequenceTypeSelector: ({ model, }: {
+    model: SequenceFeatureDetailsModel;
+}) => React.JSX.Element;
+export default SequenceTypeSelector;