@jbrowse/core 2.11.0 → 2.11.2

package/BaseFeatureWidget/BaseFeatureDetail/DataGridDetails.js

@@ -32,9 +32,7 @@ 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: {
@@ -49,7 +47,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,13 +74,12 @@ 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,
             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("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

package/BaseFeatureWidget/BaseFeatureDetail/index.js

@@ -84,7 +84,6 @@ function Position(props) {
         '1': '+',
     };
     const str = strandMap[strand] ? `(${strandMap[strand]})` : '';
-    // @ts-expect-error
     const loc = (0, util_1.assembleLocString)(feature);
     return react_1.default.createElement(react_1.default.Fragment, null, `${loc} ${str}`);
 }
@@ -140,7 +139,16 @@ function FeatureDetails(props) {
         mate ? (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(material_1.Divider, null),
             react_1.default.createElement(material_1.Typography, null, "Mate details"),
-            react_1.default.createElement(CoreDetails, { ...props, feature: { ...mate, uniqueId: uniqueId + '-mate' } }))) : null,
+            react_1.default.createElement(CoreDetails, { ...props, feature: {
+                    ...mate,
+                    // @ts-expect-error
+                    start: mate.start,
+                    // @ts-expect-error
+                    end: mate.end,
+                    // @ts-expect-error
+                    refName: mate.refName,
+                    uniqueId: uniqueId + '-mate',
+                } }))) : null,
         react_1.default.createElement(material_1.Divider, null),
         react_1.default.createElement(material_1.Typography, null, "Attributes"),
         react_1.default.createElement(Attributes_1.default, { attributes: feature, ...props, omit: omit, omitSingleLevel: coreDetails }),

package/BaseFeatureWidget/SequenceFeatureDetails/SequenceFeatureDetails.d.ts

@@ -1,3 +1,8 @@
 import React from 'react';
-import { BaseProps } from './../types';
-export default function SequenceFeatureDetails({ model, feature: prefeature, }: BaseProps): React.JSX.Element;
+import { SimpleFeatureSerialized } from '../../util';
+import { BaseFeatureWidgetModel } from '../stateModelFactory';
+declare const SequenceFeatureDetails: ({ model, feature, }: {
+    model: BaseFeatureWidgetModel;
+    feature: SimpleFeatureSerialized;
+}) => React.JSX.Element;
+export default SequenceFeatureDetails;

package/BaseFeatureWidget/SequenceFeatureDetails/SequenceFeatureDetails.js

@@ -29,115 +29,109 @@ 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 util_1 = require("../../util");
+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 hooks_1 = require("./hooks");
 // lazies
-const SettingsDialog = (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),
-    },
+const SettingsDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./dialogs/SettingsDialog'))));
+const useStyles = (0, mui_1.makeStyles)()({
     formControl: {
         margin: 0,
+        marginLeft: 4,
     },
-    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, }) {
+const SequenceFeatureDetails = (0, mobx_react_1.observer)(function ({ model, feature, }) {
     var _a, _b;
+    const { sequenceFeatureDetails } = model;
+    const { intronBp, upDownBp } = sequenceFeatureDetails;
     const { classes } = useStyles();
-    const feature = prefeature;
     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 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, prefeature, upDownBp, force);
+    const { sequence, error } = (0, hooks_1.useFeatureSequence)(model, feature, upDownBp, force);
     const [mode, setMode] = (0, react_1.useState)(hasCDS ? 'cds' : hasExon ? 'cdna' : 'genomic');
-    const rest = {
-        ...(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`,
-            }
-            : {}),
-    };
-    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: () => {
+    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' });
-                        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;
-                        }
+                } }, "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' });
-                        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 [settingsDialogOpen, setSettingsDialogOpen] = (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: () => setSettingsDialogOpen(true) },
-                react_1.default.createElement(Settings_1.default, null))),
-        settingsDialogOpen ? (react_1.default.createElement(react_1.Suspense, { fallback: null },
-            react_1.default.createElement(SettingsDialog, { handleClose: arg => {
-                    if (arg) {
-                        const { upDownBp, intronBp } = arg;
-                        setIntronBp(intronBp);
-                        setUpDownBp(upDownBp);
                     }
-                    setSettingsDialogOpen(false);
-                }, upDownBp: upDownBp, intronBp: intronBp }))) : null));
-}
+                } }, "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,
+            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")))));
+});
+exports.default = SequenceFeatureDetails;

package/BaseFeatureWidget/SequenceFeatureDetails/SequenceFeaturePanel.d.ts

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

package/BaseFeatureWidget/SequenceFeatureDetails/SequenceFeaturePanel.js

@@ -0,0 +1,67 @@
+"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 mobx_react_1 = require("mobx-react");
+const mui_1 = require("tss-react/mui");
+// locals
+const ui_1 = require("../../ui");
+const util_1 = require("../../util");
+// icons
+const Help_1 = __importDefault(require("@mui/icons-material/Help"));
+// lazies
+const SequenceFeatureDetails = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./SequenceFeatureDetails'))));
+const HelpDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./dialogs/HelpDialog'))));
+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
+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 },
+        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 => [
+                HelpDialog,
+                { handleClose },
+            ]) },
+            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));
+});
+exports.default = SequenceFeaturePanel;

package/BaseFeatureWidget/SequenceFeatureDetails/SequencePanel.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
-import { ParentFeat, SeqState } from '../util';
+import { SimpleFeatureSerialized } from '../../util';
+import { SeqState } from '../util';
+import { SequenceFeatureDetailsModel } from './model';
 interface SeqPanelProps {
     sequence: SeqState;
-    feature: ParentFeat;
+    feature: SimpleFeatureSerialized;
     mode: string;
-    intronBp?: number;
+    model: SequenceFeatureDetailsModel;
 }
 declare const SeqPanel: React.ForwardRefExoticComponent<SeqPanelProps & React.RefAttributes<HTMLDivElement>>;
 export default SeqPanel;

package/BaseFeatureWidget/SequenceFeatureDetails/SequencePanel.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 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 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 { feature, mode, intronBp = 10 } = props;
+    const { model, feature, mode } = props;
     let { sequence: { seq, upstream = '', downstream = '' }, } = props;
     const { subfeatures = [] } = feature;
     const children = subfeatures
@@ -31,7 +31,7 @@ const SeqPanel = react_1.default.forwardRef(function SeqPanel2(props, ref) {
     //
     // http://localhost:3000/?config=test_data%2Fconfig.json&session=share-FUl7G1isvF&password=HXh5Y
     let cds = (0, util_2.dedupe)(children.filter(sub => sub.type === 'CDS'));
-    let utr = (0, util_2.dedupe)(children.filter(sub => sub.type.match(/utr/i)));
+    let utr = (0, util_2.dedupe)(children.filter(sub => { var _a; return (_a = sub.type) === null || _a === void 0 ? void 0 : _a.match(/utr/i); }));
     let exons = (0, util_2.dedupe)(children.filter(sub => sub.type === 'exon'));
     if (!utr.length && cds.length && exons.length) {
         utr = (0, util_2.calculateUTRs)(cds, exons);
@@ -72,6 +72,6 @@ const SeqPanel = react_1.default.forwardRef(function SeqPanel2(props, ref) {
                 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, { 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")))));
+            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;

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

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

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

@@ -27,6 +27,7 @@ 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");
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     formElt: {
         margin: theme.spacing(3),
@@ -36,21 +37,30 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         width: '80em',
     },
 }));
-function SequenceFeatureSettingsDialog({ handleClose, intronBp: intronBpArg, upDownBp: upDownBpArg, }) {
+const SequenceFeatureSettingsDialog = (0, mobx_react_1.observer)(function ({ handleClose, model, }) {
     const { classes } = useStyles();
-    const [intronBp, setIntronBp] = (0, react_1.useState)(`${intronBpArg}`);
-    const [upDownBp, setUpDownBp] = (0, react_1.useState)(`${upDownBpArg}`);
+    const [intronBp, setIntronBp] = (0, react_1.useState)(`${model.intronBp}`);
+    const [upDownBp, setUpDownBp] = (0, react_1.useState)(`${model.upDownBp}`);
     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" },
         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) })),
+            react_1.default.createElement("div", null,
+                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("div", null,
+                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) })),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(material_1.FormControl, null,
+                    react_1.default.createElement(material_1.FormLabel, null, "Sequence capitalization"),
+                    react_1.default.createElement(material_1.RadioGroup, { value: model.upperCaseCDS ? 'cds' : 'unchanged', onChange: e => model.setUpperCaseCDS(e.target.value === 'cds') },
+                        react_1.default.createElement(material_1.FormControlLabel, { value: "cds", control: react_1.default.createElement(material_1.Radio, null), label: "Capitalize CDS and lower case everything else" }),
+                        react_1.default.createElement(material_1.FormControlLabel, { value: "unchanged", control: react_1.default.createElement(material_1.Radio, null), label: "Capitalization from reference genome sequence" }))))),
         react_1.default.createElement(material_1.DialogActions, null,
-            react_1.default.createElement(material_1.Button, { onClick: () => handleClose({
-                    upDownBp: +upDownBp,
-                    intronBp: +intronBp,
-                }), disabled: !intronBpValid || !upDownBpValid, color: "primary", variant: "contained" }, "Submit"),
+            react_1.default.createElement(material_1.Button, { onClick: () => {
+                    model.setIntronBp(+intronBp);
+                    model.setUpDownBp(+upDownBp);
+                    handleClose();
+                }, disabled: !intronBpValid || !upDownBpValid, color: "primary", variant: "contained" }, "Submit"),
             react_1.default.createElement(material_1.Button, { onClick: () => handleClose(), color: "secondary", autoFocus: true, variant: "contained" }, "Cancel"))));
-}
+});
 exports.default = SequenceFeatureSettingsDialog;

package/BaseFeatureWidget/SequenceFeatureDetails/hooks.js

@@ -10,9 +10,8 @@ function useFeatureSequence(model, feature, upDownBp, forceLoad) {
     const [error, setError] = (0, react_1.useState)();
     (0, react_1.useEffect)(() => {
         var _a;
-        let finished = false;
         if (!model) {
-            return () => { };
+            return;
         }
         const { assemblyManager, rpcManager } = (0, util_1.getSession)(model);
         const [assemblyName] = ((_a = model.view) === null || _a === void 0 ? void 0 : _a.assemblyNames) || [];
@@ -54,9 +53,7 @@ function useFeatureSequence(model, feature, upDownBp, forceLoad) {
                     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 });
-                    }
+                    setSequence({ seq, upstream: up, downstream: down });
                 }
             }
             catch (e) {
@@ -64,9 +61,6 @@ function useFeatureSequence(model, feature, upDownBp, forceLoad) {
                 setError(e);
             }
         })();
-        return () => {
-            finished = true;
-        };
     }, [feature, model, upDownBp, forceLoad]);
     return { sequence, error };
 }

package/BaseFeatureWidget/SequenceFeatureDetails/index.d.ts

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

package/BaseFeatureWidget/SequenceFeatureDetails/index.js

@@ -1,72 +1,8 @@
 "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 mobx_react_1 = require("mobx-react");
-const ui_1 = require("../../ui");
-const util_1 = require("../../util");
-// icons
-const Help_1 = __importDefault(require("@mui/icons-material/Help"));
-// lazies
-const HelpDialog = (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),
-    },
-}));
-const SequenceFeatureDetailsHelpButton = (0, mobx_react_1.observer)(function ({ model, }) {
-    const { classes } = useStyles();
-    const session = (0, util_1.getSession)(model);
-    return (react_1.default.createElement(material_1.FormControl, { className: classes.formControl },
-        react_1.default.createElement(material_1.IconButton, { onClick: () => session.queueDialog(handleClose => [HelpDialog, { handleClose }]) },
-            react_1.default.createElement(Help_1.default, null))));
-});
-// 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);
-    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(SequenceFeatureDetailsHelpButton, { model: model }),
-        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));
-}
-exports.default = SequenceFeaturePanel;
+exports.default = void 0;
+var SequenceFeaturePanel_1 = require("./SequenceFeaturePanel");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(SequenceFeaturePanel_1).default; } });

package/BaseFeatureWidget/SequenceFeatureDetails/model.d.ts

@@ -0,0 +1,14 @@
+import { Instance } from 'mobx-state-tree';
+export declare function SequenceFeatureDetailsF(): import("mobx-state-tree").IModelType<{}, {
+    intronBp: number;
+    upDownBp: number;
+    upperCaseCDS: boolean;
+} & {
+    setUpDownBp(f: number): void;
+    setIntronBp(f: number): void;
+    setUpperCaseCDS(f: boolean): void;
+} & {
+    afterAttach(): void;
+}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
+export type SequenceFeatureDetailsStateModel = ReturnType<typeof SequenceFeatureDetailsF>;
+export type SequenceFeatureDetailsModel = Instance<SequenceFeatureDetailsStateModel>;