@jbrowse/core 2.3.4 → 2.4.1

package/BaseFeatureWidget/BaseFeatureDetail.d.ts

@@ -23,15 +23,21 @@ export declare const FieldName: ({ description, name, width, prefix, }: {
 export declare const BasicValue: ({ value }: {
     value: string | React.ReactNode;
 }) => JSX.Element;
-export declare const SimpleValue: ({ name, value, description, prefix, width, }: {
+export declare function SimpleValue({ name, value, description, prefix, width, }: {
     description?: React.ReactNode;
     name: string;
     value: any;
-    prefix?: string[] | undefined;
-    width?: number | undefined;
-}) => JSX.Element | null;
+    prefix?: string[];
+    width?: number;
+}): JSX.Element | null;
 export declare const BaseCoreDetails: (props: BaseProps) => JSX.Element;
-interface AttributeProps {
+export declare function UriLink({ value, }: {
+    value: {
+        uri: string;
+        baseUri?: string;
+    };
+}): JSX.Element;
+export declare function Attributes(props: {
     attributes: Record<string, any>;
     omit?: string[];
     omitSingleLevel?: string[];
@@ -39,14 +45,7 @@ interface AttributeProps {
     descriptions?: Record<string, React.ReactNode>;
     prefix?: string[];
     hideUris?: boolean;
-}
-export declare function UriLink({ value, }: {
-    value: {
-        uri: string;
-        baseUri?: string;
-    };
 }): JSX.Element;
-export declare function Attributes(props: AttributeProps): JSX.Element;
 export declare const BaseAttributes: (props: BaseProps) => JSX.Element;
 export interface BaseInputProps extends BaseCardProps {
     omit?: string[];
@@ -54,12 +53,12 @@ export interface BaseInputProps extends BaseCardProps {
     descriptions?: Record<string, React.ReactNode>;
     formatter?: (val: unknown, key: string) => React.ReactNode;
 }
-export declare const FeatureDetails: (props: {
+export declare function FeatureDetails(props: {
     model: IAnyStateTreeNode;
     feature: SimpleFeatureSerializedNoId;
-    depth?: number | undefined;
-    omit?: string[] | undefined;
-    formatter?: ((val: unknown, key: string) => React.ReactNode) | undefined;
-}) => JSX.Element;
-declare const BaseFeatureDetails: ({ model }: BaseInputProps) => JSX.Element | null;
-export default BaseFeatureDetails;
+    depth?: number;
+    omit?: string[];
+    formatter?: (val: unknown, key: string) => React.ReactNode;
+}): JSX.Element;
+declare const _default: ({ model }: BaseInputProps) => JSX.Element | null;
+export default _default;

package/BaseFeatureWidget/BaseFeatureDetail.js

@@ -32,10 +32,11 @@ const react_1 = __importStar(require("react"));
 const react_error_boundary_1 = require("react-error-boundary");
 const material_1 = require("@mui/material");
 const mui_1 = require("tss-react/mui");
-const ExpandMore_1 = __importDefault(require("@mui/icons-material/ExpandMore"));
 const x_data_grid_1 = require("@mui/x-data-grid");
 const mobx_react_1 = require("mobx-react");
 const is_object_1 = __importDefault(require("is-object"));
+// icons
+const ExpandMore_1 = __importDefault(require("@mui/icons-material/ExpandMore"));
 // locals
 const util_1 = require("../util");
 const ui_1 = require("../ui");
@@ -64,53 +65,56 @@ const coreDetails = [
     'description',
     'type',
 ];
-exports.useStyles = (0, mui_1.makeStyles)()(theme => ({
-    expansionPanelDetails: {
-        display: 'block',
-        padding: theme.spacing(1),
-    },
-    expandIcon: {
-        color: '#FFFFFF',
-    },
-    field: {
-        display: 'flex',
-        flexWrap: 'wrap',
-    },
-    fieldDescription: {
-        '&:hover': {
-            background: 'yellow',
+exports.useStyles = (0, mui_1.makeStyles)()(theme => {
+    var _a;
+    return ({
+        expansionPanelDetails: {
+            display: 'block',
+            padding: theme.spacing(1),
         },
-    },
-    fieldName: {
-        wordBreak: 'break-all',
-        minWidth: 90,
-        borderBottom: '1px solid #0003',
-        fontSize: 12,
-        background: theme.palette.grey[200],
-        marginRight: theme.spacing(1),
-        padding: theme.spacing(0.5),
-    },
-    fieldValue: {
-        wordBreak: 'break-word',
-        maxHeight: 300,
-        fontSize: 12,
-        padding: theme.spacing(0.5),
-        overflow: 'auto',
-    },
-    fieldSubvalue: {
-        wordBreak: 'break-word',
-        maxHeight: 300,
-        padding: theme.spacing(0.5),
-        background: theme.palette.grey[100],
-        border: `1px solid ${theme.palette.grey[300]}`,
-        boxSizing: 'border-box',
-        overflow: 'auto',
-    },
-}));
+        expandIcon: {
+            color: ((_a = theme.palette.tertiary) === null || _a === void 0 ? void 0 : _a.contrastText) || '#fff',
+        },
+        field: {
+            display: 'flex',
+            flexWrap: 'wrap',
+        },
+        fieldDescription: {
+            '&:hover': {
+                background: theme.palette.mode === 'dark' ? '#e65100' : 'yellow',
+            },
+        },
+        fieldName: {
+            wordBreak: 'break-all',
+            minWidth: 90,
+            borderBottom: '1px solid #0003',
+            fontSize: 12,
+            background: theme.palette.action.disabledBackground,
+            marginRight: theme.spacing(1),
+            padding: theme.spacing(0.5),
+        },
+        fieldValue: {
+            wordBreak: 'break-word',
+            maxHeight: 300,
+            fontSize: 12,
+            padding: theme.spacing(0.5),
+            overflow: 'auto',
+        },
+        fieldSubvalue: {
+            wordBreak: 'break-word',
+            maxHeight: 300,
+            padding: theme.spacing(0.5),
+            background: theme.palette.action.disabledBackground,
+            border: `1px solid ${theme.palette.action.disabledBackground}`,
+            boxSizing: 'border-box',
+            overflow: 'auto',
+        },
+    });
+});
 function BaseCard({ children, title, defaultExpanded = true, }) {
     const { classes } = (0, exports.useStyles)();
     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 } },
+    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" },
                 " ",
@@ -128,17 +132,17 @@ exports.FieldName = FieldName;
 const BasicValue = ({ value }) => {
     const { classes } = (0, exports.useStyles)();
     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(ui_1.SanitizedHTML, { html: `<a href="${value}">${value}</a>` })) : (react_1.default.createElement(ui_1.SanitizedHTML, { html: (0, is_object_1.default)(value) ? JSON.stringify(value) : String(value) }))));
+    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.BasicValue = BasicValue;
-const SimpleValue = ({ name, value, description, prefix, width, }) => {
+function SimpleValue({ name, value, description, prefix, width, }) {
     const { classes } = (0, exports.useStyles)();
     return value !== null && value !== undefined ? (react_1.default.createElement("div", { className: classes.field },
         react_1.default.createElement(exports.FieldName, { prefix: prefix, description: description, name: name, width: width }),
         react_1.default.createElement(exports.BasicValue, { value: value }))) : null;
-};
+}
 exports.SimpleValue = SimpleValue;
-const ArrayValue = ({ name, value, description, prefix = [], }) => {
+function ArrayValue({ name, value, description, prefix = [], }) {
     const { classes } = (0, exports.useStyles)();
     if (value.length === 1) {
         return (0, is_object_1.default)(value[0]) ? (react_1.default.createElement(Attributes, { attributes: value[0], prefix: [...prefix, name] })) : (react_1.default.createElement("div", { className: classes.field },
@@ -154,7 +158,7 @@ const ArrayValue = ({ name, value, description, prefix = [], }) => {
             value.map((val, i) => (react_1.default.createElement("div", { key: JSON.stringify(val) + '-' + i, className: classes.fieldSubvalue },
                 react_1.default.createElement(exports.BasicValue, { value: val }))))));
     }
-};
+}
 const toLocale = (n) => n.toLocaleString('en-US');
 function Position(props) {
     const { feature } = props;
@@ -165,7 +169,7 @@ function Position(props) {
         '1': '+',
     };
     const str = strandMap[strand] ? `(${strandMap[strand]})` : '';
-    // @ts-ignore
+    // @ts-expect-error
     const loc = (0, util_1.assembleLocString)(feature);
     return react_1.default.createElement(react_1.default.Fragment, null, `${loc} ${str}`);
 }
@@ -186,11 +190,11 @@ function CoreDetails(props) {
         type: 'Type',
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(exports.SimpleValue, { name: "Position", value: react_1.default.createElement(Position, { ...props, feature: formattedFeat }) }),
+        react_1.default.createElement(SimpleValue, { name: "Position", value: react_1.default.createElement(Position, { ...props, feature: formattedFeat }) }),
         Object.entries(coreRenderedDetails)
             .map(([key, name]) => [name, displayedDetails[key]])
             .filter(([, value]) => value != null)
-            .map(([name, value]) => (react_1.default.createElement(exports.SimpleValue, { key: name, name: name, value: value })))));
+            .map(([name, value]) => (react_1.default.createElement(SimpleValue, { key: name, name: name, value: value })))));
 }
 const BaseCoreDetails = (props) => {
     return (react_1.default.createElement(BaseCard, { ...props, title: "Primary data" },
@@ -202,10 +206,14 @@ function UriLink({ value, }) {
     return react_1.default.createElement(ui_1.SanitizedHTML, { html: `<a href="${href}">${href}</a>` });
 }
 exports.UriLink = UriLink;
-const DataGridDetails = ({ value, prefix, name, }) => {
+function DataGridDetails({ value, prefix, name, }) {
     const keys = Object.keys(value[0]).sort();
     const unionKeys = new Set(keys);
-    value.forEach((val) => Object.keys(val).forEach(k => unionKeys.add(k)));
+    for (const val of value) {
+        for (const k of Object.keys(val)) {
+            unionKeys.add(k);
+        }
+    }
     if (unionKeys.size < keys.length + 5) {
         // avoids key 'id' from being used in row data
         const rows = Object.entries(value).map(([k, val]) => {
@@ -249,7 +257,7 @@ const DataGridDetails = ({ value, prefix, name, }) => {
                 react_1.default.createElement(x_data_grid_1.DataGrid, { disableSelectionOnClick: true, rowHeight: rowHeight, rows: rows, hideFooterSelectedRowCount: true, columns: columns, hideFooter: hideFoot }))));
     }
     return null;
-};
+}
 // pick using a path from an object, similar to _.get from lodash with special logic
 // for Descriptions from e.g. VCF headers
 // @param arr  example ['a','b'], obj = {a:{b:'hello}}
@@ -290,12 +298,12 @@ function UriAttribute({ value, prefix, name, }) {
 }
 function Attributes(props) {
     const { attributes, omit = [], omitSingleLevel = [], descriptions, formatter = val => val, hideUris, prefix = [], } = props;
-    const omits = [...omit, ...globalOmit, ...omitSingleLevel];
+    const omits = new Set([...omit, ...globalOmit, ...omitSingleLevel]);
     const { __jbrowsefmt, ...rest } = attributes;
     const formattedAttributes = { ...rest, ...__jbrowsefmt };
-    const maxLabelWidth = generateMaxWidth(Object.entries(formattedAttributes).filter(([k, v]) => v !== undefined && !omits.includes(k)), prefix);
+    const maxLabelWidth = generateMaxWidth(Object.entries(formattedAttributes).filter(([k, v]) => v !== undefined && !omits.has(k)), prefix);
     return (react_1.default.createElement(react_1.default.Fragment, null, Object.entries(formattedAttributes)
-        .filter(([k, v]) => v !== undefined && !omits.includes(k))
+        .filter(([k, v]) => v !== undefined && !omits.has(k))
         .map(([key, value]) => {
         const description = accessNested([...prefix, key], descriptions);
         if (Array.isArray(value)) {
@@ -308,7 +316,7 @@ function Attributes(props) {
             return (0, util_1.isUriLocation)(value) ? (hideUris ? null : (react_1.default.createElement(UriAttribute, { key: key, name: key, prefix: prefix, value: value }))) : (react_1.default.createElement(Attributes, { ...rest, key: key, attributes: value, descriptions: descriptions, prefix: [...prefix, key] }));
         }
         else {
-            return (react_1.default.createElement(exports.SimpleValue, { key: key, name: key, value: formatter(value, key), description: description, prefix: prefix, width: Math.min(maxLabelWidth, MAX_FIELD_NAME_WIDTH) }));
+            return (react_1.default.createElement(SimpleValue, { key: key, name: key, value: formatter(value, key), description: description, prefix: prefix, width: Math.min(maxLabelWidth, MAX_FIELD_NAME_WIDTH) }));
         }
     })));
 }
@@ -327,9 +335,9 @@ function generateTitle(name, id, type) {
         .filter(f => !!f)
         .join(' - ');
 }
-const FeatureDetails = (props) => {
+function FeatureDetails(props) {
     const { omit = [], model, feature, depth = 0 } = props;
-    const { name = '', id = '', type = '', subfeatures } = feature;
+    const { mate, name = '', id = '', type = '', subfeatures } = feature;
     const pm = (0, util_1.getEnv)(model).pluginManager;
     const session = (0, util_1.getSession)(model);
     const ExtraPanel = pm.evaluateExtensionPoint('Core-extraFeaturePanel', null, {
@@ -340,10 +348,10 @@ const FeatureDetails = (props) => {
     return (react_1.default.createElement(BaseCard, { title: generateTitle(name, id, type) },
         react_1.default.createElement(material_1.Typography, null, "Core details"),
         react_1.default.createElement(CoreDetails, { ...props }),
-        feature.mate ? (react_1.default.createElement(react_1.default.Fragment, null,
+        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: feature.mate }))) : null,
+            react_1.default.createElement(CoreDetails, { ...props, feature: mate }))) : null,
         react_1.default.createElement(material_1.Divider, null),
         react_1.default.createElement(material_1.Typography, null, "Attributes"),
         react_1.default.createElement(Attributes, { attributes: feature, ...props, omit: omit, omitSingleLevel: coreDetails }),
@@ -353,10 +361,10 @@ const FeatureDetails = (props) => {
             react_1.default.createElement(material_1.Divider, null),
             react_1.default.createElement(BaseCard, { title: ExtraPanel.name },
                 react_1.default.createElement(ExtraPanel.Component, { ...props })))) : null,
-        (subfeatures === null || subfeatures === void 0 ? void 0 : subfeatures.length) ? (react_1.default.createElement(BaseCard, { title: "Subfeatures", defaultExpanded: depth < 1 }, subfeatures.map(sub => (react_1.default.createElement(exports.FeatureDetails, { key: JSON.stringify(sub), feature: sub, model: model, depth: depth + 1 }))))) : null));
-};
+        (subfeatures === null || subfeatures === void 0 ? void 0 : subfeatures.length) ? (react_1.default.createElement(BaseCard, { title: "Subfeatures", defaultExpanded: depth < 1 }, subfeatures.map(sub => (react_1.default.createElement(FeatureDetails, { key: JSON.stringify(sub), feature: sub, model: model, depth: depth + 1 }))))) : null));
+}
 exports.FeatureDetails = FeatureDetails;
-const BaseFeatureDetails = (0, mobx_react_1.observer)(({ model }) => {
+exports.default = (0, mobx_react_1.observer)(function ({ model }) {
     const { featureData } = model;
     if (!featureData) {
         return null;
@@ -365,7 +373,6 @@ const BaseFeatureDetails = (0, mobx_react_1.observer)(({ model }) => {
     // setting null is not allowed by jexl so we set it to undefined to hide. see
     // config guide. this replacement happens both here and when snapshotting the
     // featureData
-    const feature = JSON.parse(JSON.stringify(featureData, (_, v) => typeof v === 'undefined' ? null : v));
-    return isEmpty(feature) ? null : (react_1.default.createElement(exports.FeatureDetails, { model: model, feature: feature }));
+    const g = JSON.parse(JSON.stringify(featureData, (_, v) => (v === undefined ? null : v)));
+    return isEmpty(g) ? null : react_1.default.createElement(FeatureDetails, { model: model, feature: g });
 });
-exports.default = BaseFeatureDetails;

package/BaseFeatureWidget/SequenceBox.js

@@ -31,7 +31,9 @@ exports.GeneProtein = GeneProtein;
 function GenecDNA({ utr, cds, exons, sequence, upstream, downstream, includeIntrons, collapseIntron, intronBp, }) {
     const chunks = (cds.length ? [...cds, ...utr].sort((a, b) => a.start - b.start) : exons).filter(f => f.start !== f.end);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        upstream ? (react_1.default.createElement("span", { style: { background: updownstreamColor } }, upstream)) : null,
+        upstream ? (react_1.default.createElement("span", { style: {
+                background: updownstreamColor,
+            } }, upstream)) : null,
         chunks.map((chunk, idx) => {
             var _a;
             const intron = sequence.slice(chunk.end, (_a = chunks[idx + 1]) === null || _a === void 0 ? void 0 : _a.start);
@@ -48,10 +50,14 @@ function GenecDNA({ utr, cds, exons, sequence, upstream, downstream, includeIntr
 exports.GenecDNA = GenecDNA;
 function Genomic({ sequence, upstream, downstream, }) {
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        upstream ? (react_1.default.createElement("span", { style: { background: updownstreamColor } }, upstream)) : null,
+        upstream ? (react_1.default.createElement("span", { style: {
+                background: updownstreamColor,
+            } }, upstream)) : null,
         react_1.default.createElement("span", { style: {
                 background: genomeColor,
             } }, sequence),
-        downstream ? (react_1.default.createElement("span", { style: { background: updownstreamColor } }, downstream)) : null));
+        downstream ? (react_1.default.createElement("span", { style: {
+                background: updownstreamColor,
+            } }, downstream)) : null));
 }
 exports.Genomic = Genomic;

package/BaseFeatureWidget/SequenceFeatureDetails.js

@@ -31,15 +31,16 @@ const material_1 = require("@mui/material");
 const mui_1 = require("tss-react/mui");
 const copy_to_clipboard_1 = __importDefault(require("copy-to-clipboard"));
 // locals
-const SequenceFeatureSettingsDialog_1 = __importDefault(require("./SequenceFeatureSettingsDialog"));
-const SequenceHelpDialog_1 = __importDefault(require("./SequenceHelpDialog"));
-const SequencePanel_1 = __importDefault(require("./SequencePanel"));
 const util_1 = require("../util");
 const configuration_1 = require("../configuration");
 const ui_1 = require("../ui");
 // icons
 const Settings_1 = __importDefault(require("@mui/icons-material/Settings"));
 const Help_1 = __importDefault(require("@mui/icons-material/Help"));
+// lazies
+const SettingsDlg = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./SequenceFeatureSettingsDialog'))));
+const HelpDlg = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./SequenceHelpDialog'))));
+const SequencePanel = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./SequencePanel'))));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     button: {
         margin: theme.spacing(1),
@@ -64,27 +65,46 @@ function SequenceFeatureDetails({ model, feature }) {
     const parentFeature = feature;
     const hasCDS = !!((_a = parentFeature.subfeatures) === null || _a === void 0 ? void 0 : _a.find(sub => sub.type === 'CDS'));
     const isGene = feature.type === 'gene';
-    const seqPanelRef = (0, react_1.useRef)(null);
-    const [settingsDlgOpen, setSettingsDlgOpen] = (0, react_1.useState)(false);
     const [shown, setShown] = (0, react_1.useState)(false);
     const [helpShown, setHelpShown] = (0, react_1.useState)(false);
+    return (isGene && !hasCDS) || !model ? null : (react_1.default.createElement("div", { className: classes.container2 },
+        react_1.default.createElement(material_1.Button, { variant: "contained", onClick: () => setShown(!shown) }, shown ? 'Hide feature sequence' : 'Show feature sequence'),
+        react_1.default.createElement(material_1.FormControl, { className: classes.formControl },
+            react_1.default.createElement(material_1.IconButton, { onClick: () => setHelpShown(true) },
+                react_1.default.createElement(Help_1.default, null))),
+        react_1.default.createElement("br", null),
+        shown ? react_1.default.createElement(FeatureSequence, { model: model, feature: feature }) : null,
+        helpShown ? (react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement("div", null) },
+            react_1.default.createElement(HelpDlg, { handleClose: () => setHelpShown(false) }))) : null));
+}
+exports.default = SequenceFeatureDetails;
+function FeatureSequence({ model, feature }) {
+    var _a;
+    const { classes } = useStyles();
+    const parentFeature = feature;
+    const hasCDS = !!((_a = parentFeature.subfeatures) === null || _a === void 0 ? void 0 : _a.find(sub => sub.type === 'CDS'));
+    const seqPanelRef = (0, react_1.useRef)(null);
+    const [settingsDlgOpen, setSettingsDlgOpen] = (0, react_1.useState)(false);
+    const [intronBp, setIntronBp] = (0, util_1.useLocalStorage)('intronBp', 10);
+    const [upDownBp, setUpDownBp] = (0, util_1.useLocalStorage)('upDownBp', 500);
     const [sequence, setSequence] = (0, react_1.useState)();
     const [error, setError] = (0, react_1.useState)();
     const [copied, setCopied] = (0, react_1.useState)(false);
     const [copiedHtml, setCopiedHtml] = (0, react_1.useState)(false);
-    const [intronBp, setIntronBp] = (0, util_1.useLocalStorage)('intronBp', 10);
-    const [upDownBp, setUpDownBp] = (0, util_1.useLocalStorage)('upDownBp', 500);
     const [forceLoad, setForceLoad] = (0, react_1.useState)({
         id: feature.uniqueId,
         force: false,
     });
     (0, react_1.useEffect)(() => {
-        setForceLoad({ id: feature.uniqueId, force: false });
+        setForceLoad({
+            id: feature.uniqueId,
+            force: false,
+        });
     }, [feature]);
     (0, react_1.useEffect)(() => {
         var _a;
         let finished = false;
-        if (!model || !shown) {
+        if (!model) {
             return () => { };
         }
         const { assemblyManager, rpcManager } = (0, util_1.getSession)(model);
@@ -103,6 +123,7 @@ function SequenceFeatureDetails({ model, feature }) {
                         start,
                         end,
                         refName: assembly.getCanonicalRefName(refName),
+                        assemblyName,
                     },
                 ],
             });
@@ -137,7 +158,7 @@ function SequenceFeatureDetails({ model, feature }) {
         return () => {
             finished = true;
         };
-    }, [feature, shown, model, upDownBp, forceLoad]);
+    }, [feature, model, upDownBp, forceLoad]);
     const loading = !sequence;
     const session = (0, util_1.getSession)(model);
     const defaultSeqTypes = ['mRNA', 'transcript', 'gene'];
@@ -147,7 +168,10 @@ function SequenceFeatureDetails({ model, feature }) {
         ? sequenceTypes.includes('CDS') && !feature.parentId
         : sequenceTypes.includes(feature.type);
     const val = attemptGeneType ? (hasCDS ? 'cds' : 'cdna') : 'genomic';
-    // this useEffect is needed to reset the mode/setMode useState because the contents of the select box can completely change depending on whether we click on a gene feature or non-gene feature, so the current value in the select box must change accordingly
+    // this useEffect is needed to reset the mode/setMode useState because the
+    // contents of the select box can completely change depending on whether we
+    // click on a gene feature or non-gene feature, so the current value in the
+    // select box must change accordingly
     (0, react_1.useEffect)(() => {
         setMode(val);
     }, [attemptGeneType, val]);
@@ -171,49 +195,43 @@ function SequenceFeatureDetails({ model, feature }) {
             genomic: 'Genomic seq',
             genomic_sequence_updown: `Genomic seq w/ ${upDownBp}bp up+down stream`,
         };
-    return (isGene && !hasCDS) || !model ? null : (react_1.default.createElement("div", { className: classes.container2 },
-        react_1.default.createElement(material_1.Button, { variant: "contained", onClick: () => setShown(!shown) }, shown ? 'Hide feature sequence' : 'Show feature sequence'),
+    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.IconButton, { onClick: () => setHelpShown(true) },
-                react_1.default.createElement(Help_1.default, null))),
-        react_1.default.createElement("br", null),
-        shown ? (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(arg).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", color: "inherit", onClick: () => {
+            react_1.default.createElement(material_1.Select, { value: mode, onChange: event => setMode(event.target.value) }, Object.entries(arg).map(([key, val]) => (react_1.default.createElement(material_1.MenuItem, { key: key, value: key }, val))))),
+        react_1.default.createElement(material_1.FormControl, { className: classes.formControl },
+            react_1.default.createElement(material_1.Button, { className: classes.button, variant: "contained", onClick: () => {
+                    const ref = seqPanelRef.current;
+                    if (ref) {
+                        (0, copy_to_clipboard_1.default)(ref.textContent || '', { format: 'text/plain' });
+                        setCopied(true);
+                        setTimeout(() => setCopied(false), 1000);
+                    }
+                } }, copied ? 'Copied to clipboard!' : 'Copy plaintext')),
+        react_1.default.createElement(material_1.FormControl, { className: classes.formControl },
+            react_1.default.createElement(material_1.Tooltip, { title: "The 'Copy HTML' function retains the colors from the sequence panel but cannot be pasted into some programs like notepad that only expect plain text" },
+                react_1.default.createElement(material_1.Button, { className: classes.button, variant: "contained", onClick: () => {
                         const ref = seqPanelRef.current;
                         if (ref) {
-                            (0, copy_to_clipboard_1.default)(ref.textContent || '', { format: 'text/plain' });
-                            setCopied(true);
-                            setTimeout(() => setCopied(false), 1000);
+                            (0, copy_to_clipboard_1.default)(ref.innerHTML, { format: 'text/html' });
+                            setCopiedHtml(true);
+                            setTimeout(() => setCopiedHtml(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", color: "inherit", 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(material_1.FormControl, { className: classes.formControl },
-                react_1.default.createElement(material_1.IconButton, { onClick: () => setSettingsDlgOpen(true) },
-                    react_1.default.createElement(Settings_1.default, null))),
-            react_1.default.createElement("br", null),
-            react_1.default.createElement(react_1.default.Fragment, null, error ? (react_1.default.createElement(material_1.Typography, { color: "error" }, `${error}`)) : loading ? (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: () => setForceLoad({ ...forceLoad, force: true }) }, "Force load"))) : (react_1.default.createElement(SequencePanel_1.default, { ref: seqPanelRef, feature: parentFeature, mode: mode, sequence: sequence, intronBp: intronBp }))) : (react_1.default.createElement(material_1.Typography, null, "No sequence found"))))) : null,
-        settingsDlgOpen ? (react_1.default.createElement(SequenceFeatureSettingsDialog_1.default, { handleClose: arg => {
-                if (arg) {
-                    const { upDownBp, intronBp } = arg;
-                    setIntronBp(intronBp);
-                    setUpDownBp(upDownBp);
-                }
-                setSettingsDlgOpen(false);
-            }, upDownBp: upDownBp, intronBp: intronBp })) : null,
-        helpShown ? react_1.default.createElement(SequenceHelpDialog_1.default, { handleClose: () => setHelpShown(false) }) : null));
+                    } }, copiedHtml ? 'Copied to clipboard!' : 'Copy HTML'))),
+        react_1.default.createElement(material_1.FormControl, { className: classes.formControl },
+            react_1.default.createElement(material_1.IconButton, { onClick: () => setSettingsDlgOpen(true) },
+                react_1.default.createElement(Settings_1.default, null))),
+        react_1.default.createElement("br", null),
+        error ? (react_1.default.createElement(material_1.Typography, { color: "error" }, `${error}`)) : loading ? (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: () => setForceLoad({ ...forceLoad, force: true }) }, "Force load"))) : (react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement("div", null, "Loading") },
+            react_1.default.createElement(SequencePanel, { ref: seqPanelRef, feature: parentFeature, mode: mode, sequence: sequence, intronBp: intronBp })))) : (react_1.default.createElement(material_1.Typography, null, "No sequence found")),
+        settingsDlgOpen ? (react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement("div", null) },
+            react_1.default.createElement(SettingsDlg, { handleClose: arg => {
+                    if (arg) {
+                        const { upDownBp, intronBp } = arg;
+                        setIntronBp(intronBp);
+                        setUpDownBp(upDownBp);
+                    }
+                    setSettingsDlgOpen(false);
+                }, upDownBp: upDownBp, intronBp: intronBp }))) : null));
 }
-exports.default = SequenceFeatureDetails;

package/BaseFeatureWidget/SequencePanel.d.ts

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

package/BaseFeatureWidget/SequencePanel.js

@@ -7,7 +7,7 @@ const react_1 = __importDefault(require("react"));
 const util_1 = require("../util");
 const util_2 = require("./util");
 const SequenceBox_1 = require("./SequenceBox");
-const SequencePanel = react_1.default.forwardRef((props, ref) => {
+const SeqPanel = react_1.default.forwardRef(function (props, ref) {
     const { feature, mode, intronBp = 10 } = props;
     let { sequence: { seq, upstream = '', downstream = '' }, } = props;
     const { subfeatures = [] } = feature;
@@ -55,18 +55,21 @@ const SequencePanel = react_1.default.forwardRef((props, ref) => {
     }
     const codonTable = (0, util_1.generateCodonTable)(util_1.defaultCodonTable);
     return (react_1.default.createElement("div", { ref: ref, "data-testid": "sequence_panel" },
-        react_1.default.createElement("div", { style: {
+        react_1.default.createElement("div", { style: 
+            /* raw styles so that html copy works */
+            {
                 fontFamily: 'monospace',
                 wordWrap: 'break-word',
                 overflow: 'auto',
+                color: 'black',
                 fontSize: 12,
                 maxWidth: 600,
                 maxHeight: 500,
             } },
-            `>${feature.name ||
+            react_1.default.createElement("span", { style: { background: 'white' } }, `>${feature.name ||
                 feature.id ||
-                feature.refName + ':' + (feature.start + 1) + '-' + feature.end}-${mode}\n`,
+                `${feature.refName}:${feature.start + 1}-${feature.end}`}-${mode}\n`),
             react_1.default.createElement("br", null),
             mode === 'genomic' ? (react_1.default.createElement(SequenceBox_1.Genomic, { sequence: seq })) : mode === 'genomic_sequence_updown' ? (react_1.default.createElement(SequenceBox_1.Genomic, { sequence: seq, upstream: upstream, downstream: downstream })) : mode === 'cds' ? (react_1.default.createElement(SequenceBox_1.GeneCDS, { cds: cds, sequence: seq })) : mode === 'cdna' ? (react_1.default.createElement(SequenceBox_1.GenecDNA, { exons: exons, cds: cds, utr: utr, sequence: seq, intronBp: intronBp })) : mode === 'protein' ? (react_1.default.createElement(SequenceBox_1.GeneProtein, { cds: cds, codonTable: codonTable, sequence: seq })) : mode === 'gene' ? (react_1.default.createElement(SequenceBox_1.GenecDNA, { exons: exons, cds: cds, utr: utr, sequence: seq, includeIntrons: true, intronBp: intronBp })) : mode === 'gene_collapsed_intron' ? (react_1.default.createElement(SequenceBox_1.GenecDNA, { exons: exons, cds: cds, sequence: seq, utr: utr, includeIntrons: true, collapseIntron: true, intronBp: intronBp })) : mode === 'gene_updownstream' ? (react_1.default.createElement(SequenceBox_1.GenecDNA, { exons: exons, cds: cds, sequence: seq, utr: utr, upstream: upstream, downstream: downstream, includeIntrons: true, intronBp: intronBp })) : mode === 'gene_updownstream_collapsed_intron' ? (react_1.default.createElement(SequenceBox_1.GenecDNA, { exons: exons, cds: cds, sequence: seq, utr: utr, upstream: upstream, downstream: downstream, includeIntrons: true, collapseIntron: true, intronBp: intronBp })) : (react_1.default.createElement("div", null, "Unknown type")))));
 });
-exports.default = SequencePanel;
+exports.default = SeqPanel;

package/BaseFeatureWidget/index.js

@@ -82,7 +82,7 @@ function stateModelFactory(pluginManager) {
         },
     }))
         .preProcessSnapshot(snap => {
-        // @ts-ignore
+        // @ts-expect-error
         const { featureData, finalizedFeatureData, ...rest } = snap;
         return {
             unformattedFeatureData: featureData,
@@ -100,7 +100,7 @@ function stateModelFactory(pluginManager) {
             // hidden, setting null is not allowed by jexl so we set it to
             // undefined to hide. see config guide. this replacement happens both
             // here and when displaying the featureData in base feature widget
-            finalizedFeatureData: JSON.parse(JSON.stringify(featureData, (_, v) => typeof v === 'undefined' ? null : v)),
+            finalizedFeatureData: JSON.parse(JSON.stringify(featureData, (_, v) => (v === undefined ? null : v))),
             ...rest,
         };
     });