@jbrowse/core 2.4.2 → 2.6.0

package/BaseFeatureWidget/BaseFeatureDetail/index.js

@@ -0,0 +1,170 @@
+"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 });
+exports.Attributes = exports.FeatureDetails = exports.BaseAttributes = exports.BaseCoreDetails = exports.BaseCard = exports.useStyles = void 0;
+/* eslint-disable @typescript-eslint/no-explicit-any */
+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 mobx_react_1 = require("mobx-react");
+// icons
+const ExpandMore_1 = __importDefault(require("@mui/icons-material/ExpandMore"));
+// locals
+const util_1 = require("../../util");
+const ui_1 = require("../../ui");
+const SequenceFeatureDetails_1 = __importDefault(require("../SequenceFeatureDetails"));
+const SimpleField_1 = __importDefault(require("./SimpleField"));
+const Attributes_1 = __importDefault(require("./Attributes"));
+const util_2 = require("./util");
+// coreDetails are omitted in some circumstances
+const coreDetails = [
+    'name',
+    'start',
+    'end',
+    'strand',
+    'refName',
+    'description',
+    'type',
+];
+exports.useStyles = (0, mui_1.makeStyles)()(theme => {
+    var _a;
+    return ({
+        expansionPanelDetails: {
+            display: 'block',
+            padding: theme.spacing(1),
+        },
+        expandIcon: {
+            color: ((_a = theme.palette.tertiary) === null || _a === void 0 ? void 0 : _a.contrastText) || '#fff',
+        },
+    });
+});
+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, 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.AccordionDetails, { className: classes.expansionPanelDetails }, children)));
+}
+exports.BaseCard = BaseCard;
+function Position(props) {
+    const { feature } = props;
+    const strand = feature.strand;
+    const strandMap = {
+        '-1': '-',
+        '0': '',
+        '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}`);
+}
+function CoreDetails(props) {
+    const { feature } = props;
+    const obj = feature;
+    // eslint-disable-next-line no-underscore-dangle
+    const formattedFeat = { ...obj, ...obj.__jbrowsefmt };
+    const { start, end } = formattedFeat;
+    const displayedDetails = {
+        ...formattedFeat,
+        length: (0, util_2.toLocale)(end - start),
+    };
+    const coreRenderedDetails = {
+        description: 'Description',
+        name: 'Name',
+        length: 'Length',
+        type: 'Type',
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(SimpleField_1.default, { 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(SimpleField_1.default, { key: name, name: name, value: value })))));
+}
+const BaseCoreDetails = (props) => {
+    return (react_1.default.createElement(BaseCard, { ...props, title: "Primary data" },
+        react_1.default.createElement(CoreDetails, { ...props })));
+};
+exports.BaseCoreDetails = BaseCoreDetails;
+const BaseAttributes = (props) => {
+    const { feature } = props;
+    return (react_1.default.createElement(BaseCard, { ...props, title: "Attributes" },
+        react_1.default.createElement(Attributes_1.default, { ...props, attributes: feature })));
+};
+exports.BaseAttributes = BaseAttributes;
+function FeatureDetails(props) {
+    const { omit = [], model, feature, depth = 0 } = props;
+    const { mate, name = '', id = '', type = '', subfeatures, uniqueId } = feature;
+    const pm = (0, util_1.getEnv)(model).pluginManager;
+    const session = (0, util_1.getSession)(model);
+    const ExtraPanel = pm.evaluateExtensionPoint('Core-extraFeaturePanel', null, {
+        session,
+        feature,
+        model,
+    });
+    return (react_1.default.createElement(BaseCard, { title: (0, util_2.generateTitle)(name, id, type) },
+        react_1.default.createElement(material_1.Typography, null, "Core details"),
+        react_1.default.createElement(CoreDetails, { ...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(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 }),
+        react_1.default.createElement(react_error_boundary_1.ErrorBoundary, { FallbackComponent: e => react_1.default.createElement(ui_1.ErrorMessage, { error: e.error }) },
+            react_1.default.createElement(SequenceFeatureDetails_1.default, { ...props })),
+        ExtraPanel ? (react_1.default.createElement(react_1.default.Fragment, null,
+            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, idx) => (react_1.default.createElement(FeatureDetails, { key: JSON.stringify(sub), feature: { ...sub, uniqueId: `${uniqueId}_${idx}` }, model: model, depth: depth + 1 }))))) : null));
+}
+exports.FeatureDetails = FeatureDetails;
+exports.default = (0, mobx_react_1.observer)(function ({ model }) {
+    const { error, featureData } = model;
+    if (error) {
+        return react_1.default.createElement(ui_1.ErrorMessage, { error: error });
+    }
+    if (!featureData) {
+        return null;
+    }
+    // replacing undefined with null helps with allowing fields to be 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 snapshotting the
+    // featureData
+    const g = JSON.parse(JSON.stringify(featureData, (_, v) => (v === undefined ? null : v)));
+    return (0, util_2.isEmpty)(g) ? null : react_1.default.createElement(FeatureDetails, { model: model, feature: g });
+});
+var Attributes_2 = require("./Attributes");
+Object.defineProperty(exports, "Attributes", { enumerable: true, get: function () { return __importDefault(Attributes_2).default; } });

package/BaseFeatureWidget/BaseFeatureDetail/util.d.ts

@@ -0,0 +1,5 @@
+export declare function isEmpty(obj: Record<string, unknown>): boolean;
+export declare function generateTitle(name: unknown, id: unknown, type: unknown): string;
+export declare function generateMaxWidth(array: unknown[][], prefix: string[]): number;
+export declare function toLocale(n: number): string;
+export declare function accessNested(arr: string[], obj?: Record<string, unknown>): string | undefined;

package/BaseFeatureWidget/BaseFeatureDetail/util.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.accessNested = exports.toLocale = exports.generateMaxWidth = exports.generateTitle = exports.isEmpty = void 0;
+const is_object_1 = __importDefault(require("is-object"));
+const util_1 = require("../../util");
+const util_2 = require("../util");
+function isEmpty(obj) {
+    return Object.keys(obj).length === 0;
+}
+exports.isEmpty = isEmpty;
+function generateTitle(name, id, type) {
+    return [(0, util_2.ellipses)(`${name}` || `${id}`), `${type}`]
+        .filter(f => !!f)
+        .join(' - ');
+}
+exports.generateTitle = generateTitle;
+function generateMaxWidth(array, prefix) {
+    return (Math.ceil((0, util_1.max)(array.map(key => (0, util_1.measureText)([...prefix, key[0]].join('.'), 12)))) + 10);
+}
+exports.generateMaxWidth = generateMaxWidth;
+function toLocale(n) {
+    return n.toLocaleString('en-US');
+}
+exports.toLocale = toLocale;
+// 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}}
+// @returns hello (with special addition to grab description also)
+function accessNested(arr, obj = {}) {
+    let obj2 = obj;
+    arr.forEach(elt => {
+        if ((0, is_object_1.default)(obj2)) {
+            obj2 = obj2[elt];
+        }
+    });
+    return typeof obj2 === 'string'
+        ? obj2
+        : (0, is_object_1.default)(obj2) && typeof (obj2 === null || obj2 === void 0 ? void 0 : obj2.Description) === 'string'
+            ? obj2.Description
+            : undefined;
+}
+exports.accessNested = accessNested;

package/BaseFeatureWidget/SequenceFeatureDetails/CDNASequence.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Feat } from '../util';
+export default function CDNASequence({ utr, cds, exons, sequence, upstream, downstream, includeIntrons, collapseIntron, intronBp, }: {
+    utr: Feat[];
+    cds: Feat[];
+    exons: Feat[];
+    sequence: string;
+    upstream?: string;
+    downstream?: string;
+    includeIntrons?: boolean;
+    collapseIntron?: boolean;
+    intronBp: number;
+}): React.JSX.Element;

package/BaseFeatureWidget/SequenceFeatureDetails/CDNASequence.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const util_1 = require("./util");
+function CDNASequence({ 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: util_1.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);
+            return (react_1.default.createElement(react_1.default.Fragment, { key: JSON.stringify(chunk) },
+                react_1.default.createElement("span", { style: {
+                        background: chunk.type === 'CDS' ? util_1.cdsColor : util_1.utrColor,
+                    } }, sequence.slice(chunk.start, chunk.end)),
+                includeIntrons && idx < chunks.length - 1 ? (react_1.default.createElement("span", { style: { background: util_1.intronColor } }, collapseIntron && intron.length > intronBp * 2
+                    ? `${intron.slice(0, intronBp)}...${intron.slice(-intronBp)}`
+                    : intron)) : null));
+        }),
+        downstream ? (react_1.default.createElement("span", { style: { background: util_1.updownstreamColor } }, downstream)) : null));
+}
+exports.default = CDNASequence;

package/BaseFeatureWidget/SequenceFeatureDetails/CDSSequence.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Feat } from '../util';
+export default function CDSSequence({ cds, sequence, }: {
+    cds: Feat[];
+    sequence: string;
+}): React.JSX.Element;

package/BaseFeatureWidget/SequenceFeatureDetails/CDSSequence.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const util_1 = require("./util");
+const util_2 = require("../util");
+function CDSSequence({ cds, sequence, }) {
+    return react_1.default.createElement("span", { style: { background: util_1.cdsColor } }, (0, util_2.stitch)(cds, sequence));
+}
+exports.default = CDSSequence;

package/BaseFeatureWidget/SequenceFeatureDetails/GenomicSequence.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export default function GenomicSequence({ sequence, upstream, downstream, }: {
+    sequence: string;
+    upstream?: string;
+    downstream?: string;
+}): React.JSX.Element;

package/BaseFeatureWidget/SequenceFeatureDetails/GenomicSequence.js

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

package/BaseFeatureWidget/SequenceFeatureDetails/ProteinSequence.d.ts

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

package/BaseFeatureWidget/SequenceFeatureDetails/ProteinSequence.js

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

package/BaseFeatureWidget/SequenceFeatureDetails/SequenceFeatureDetails.d.ts

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

package/BaseFeatureWidget/SequenceFeatureDetails/SequenceFeatureDetails.js

@@ -0,0 +1,143 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const material_1 = require("@mui/material");
+const mui_1 = require("tss-react/mui");
+const copy_to_clipboard_1 = __importDefault(require("copy-to-clipboard"));
+// locals
+const util_1 = require("../../util");
+const ui_1 = require("../../ui");
+// icons
+const Settings_1 = __importDefault(require("@mui/icons-material/Settings"));
+const hooks_1 = require("./hooks");
+// lazies
+const SettingsDlg = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./SequenceFeatureSettingsDialog'))));
+const SequencePanel = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./SequencePanel'))));
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
+    button: {
+        margin: theme.spacing(1),
+    },
+    formControl: {
+        margin: 0,
+    },
+    container2: {
+        marginTop: theme.spacing(1),
+    },
+}));
+// set the key on this component to feature.id to clear state after new feature
+// is selected
+function SequenceFeatureDetails({ model, feature: prefeature, }) {
+    var _a, _b;
+    const { classes } = useStyles();
+    const feature = prefeature;
+    const 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 [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: () => {
+                    const ref = seqPanelRef.current;
+                    if (ref) {
+                        (0, copy_to_clipboard_1.default)(ref.textContent || '', { format: 'text/plain' });
+                        setCopied(true);
+                        setTimeout(() => setCopied(false), 1000);
+                    }
+                } }, copied ? 'Copied to clipboard!' : 'Copy plaintext')),
+        react_1.default.createElement(material_1.FormControl, { className: classes.formControl },
+            react_1.default.createElement(material_1.Tooltip, { title: "The 'Copy HTML' function retains the colors from the sequence panel but cannot be pasted into some programs like notepad that only expect plain text" },
+                react_1.default.createElement(material_1.Button, { className: classes.button, variant: "contained", onClick: () => {
+                        const ref = seqPanelRef.current;
+                        if (!ref) {
+                            return;
+                        }
+                        (0, copy_to_clipboard_1.default)(ref.innerHTML, { format: 'text/html' });
+                        setCopiedHtml(true);
+                        setTimeout(() => setCopiedHtml(false), 1000);
+                    } }, copiedHtml ? 'Copied to clipboard!' : 'Copy HTML'))),
+        react_1.default.createElement(Settings, { upDownBp: upDownBp, intronBp: intronBp, setIntronBp: setIntronBp, setUpDownBp: setUpDownBp }),
+        react_1.default.createElement("br", null),
+        feature.type === 'gene' ? (react_1.default.createElement(material_1.Typography, null, "Note: inspect subfeature sequences for protein/CDS computations")) : null,
+        error ? (react_1.default.createElement(material_1.Typography, { color: "error" }, `${error}`)) : !sequence ? (react_1.default.createElement(ui_1.LoadingEllipses, null)) : sequence ? ('error' in sequence ? (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(material_1.Typography, { color: "error" }, sequence.error),
+            react_1.default.createElement(material_1.Button, { variant: "contained", color: "inherit", onClick: () => setForce(true) }, "Force load"))) : (react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement(ui_1.LoadingEllipses, null) },
+            react_1.default.createElement(SequencePanel, { ref: seqPanelRef, feature: feature, mode: mode, sequence: sequence, intronBp: intronBp })))) : (react_1.default.createElement(material_1.Typography, null, "No sequence found"))));
+}
+exports.default = SequenceFeatureDetails;
+function Settings({ intronBp, upDownBp, setIntronBp, setUpDownBp, }) {
+    const { classes } = useStyles();
+    const [settingsDlgOpen, setSettingsDlgOpen] = (0, react_1.useState)(false);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(material_1.FormControl, { className: classes.formControl },
+            react_1.default.createElement(material_1.IconButton, { onClick: () => setSettingsDlgOpen(true) },
+                react_1.default.createElement(Settings_1.default, null))),
+        settingsDlgOpen ? (react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement("div", null) },
+            react_1.default.createElement(SettingsDlg, { handleClose: arg => {
+                    if (arg) {
+                        const { upDownBp, intronBp } = arg;
+                        setIntronBp(intronBp);
+                        setUpDownBp(upDownBp);
+                    }
+                    setSettingsDlgOpen(false);
+                }, upDownBp: upDownBp, intronBp: intronBp }))) : null));
+}

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 export default function SequenceFeatureSettingsDialog({ handleClose, intronBp: intronBpArg, upDownBp: upDownBpArg, }: {
     handleClose: (arg?: {
         intronBp: number;
@@ -6,4 +6,4 @@ export default function SequenceFeatureSettingsDialog({ handleClose, intronBp: i
     }) => void;
     intronBp: number;
     upDownBp: number;
-}): JSX.Element;
+}): React.JSX.Element;

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

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

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

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

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

@@ -16,19 +16,16 @@ function HelpDialog({ handleClose, }) {
             react_1.default.createElement("ul", null,
                 react_1.default.createElement("li", null, "CDS - shows the stitched together CDS sequences"),
                 react_1.default.createElement("li", null, "Protein - the translated coding sequence, with the \"standard\" genetic code"),
-                react_1.default.createElement("li", null, "cDNA - shows the UTRs and stitched together CDS sequences"),
-                react_1.default.createElement("li", null, "Gene w/ introns - the sequence underlying the entire gene including including introns, with UTR and CDS highlighted"),
-                react_1.default.createElement("li", null, "Gene w/ Nbp introns - same \"Gene w/ introns\", but limiting to a subset of the intron sequence displayed"),
-                react_1.default.createElement("li", null, "Gene +/- Nbp up+down stream - same as \"Gene w/ introns\" but with up and downstream sequence displayed"),
-                react_1.default.createElement("li", null, "Gene +/- Nbp up+down stream, Nbp introns - same as \"Gene w/ introns\", but with limited intron sequence displayed and up and downstream sequence")),
+                react_1.default.createElement("li", null, "cDNA - shows the 'copy DNA' of transcript, formed from exon sequences"),
+                react_1.default.createElement("li", null, "Genomic w/ introns +/- Nbp up+down stream - the sequence underlying the entire gene including including introns, with UTR and CDS highlighted")),
             react_1.default.createElement(material_1.Typography, { paragraph: true }, "For other feature types, the options are:"),
             react_1.default.createElement("ul", null,
-                react_1.default.createElement("li", null, "Feature sequence - the reference genome sequence underlying the feature"),
-                react_1.default.createElement("li", null, "Feature sequence +/- Nbp up+down stream - the reference genome sequence underlying the feature, with the up and downstream sequence")),
+                react_1.default.createElement("li", null, "Genomic +/- Nbp up+down stream - the reference genome sequence underlying the feature, with the up and downstream sequence")),
             react_1.default.createElement(material_1.Typography, null,
-                "Note: you can use the \"gear icon\" ",
+                "Note 1: you can use the \"gear icon\" ",
                 react_1.default.createElement(Settings_1.default, null),
-                " to edit the number of bp displayed up/downstream and in the intron region")),
+                " to edit the number of bp displayed up/downstream and in the intron region"),
+            react_1.default.createElement(material_1.Typography, null, "Note 2: The 'Copy HTML' function retains the colors from the sequence panel but cannot be pasted into some programs like notepad that only expect plain text.")),
         react_1.default.createElement(material_1.DialogActions, null,
             react_1.default.createElement(material_1.Button, { onClick: () => handleClose(), autoFocus: true, variant: "contained" }, "Close"))));
 }

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

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

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

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

package/BaseFeatureWidget/SequenceFeatureDetails/hooks.d.ts

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