generic-sequence-panel
Version:
read feature and sequence data and produce highlighted fasta
86 lines (85 loc) • 7.36 kB
JavaScript
;
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const mobx_react_1 = require("mobx-react");
const SequencePanel_1 = __importDefault(require("@jbrowse/core/BaseFeatureWidget/SequenceFeatureDetails/SequencePanel"));
const assembleBundle_1 = require("../assembleBundle");
const util_1 = require("@jbrowse/core/util");
const copy_to_clipboard_1 = __importDefault(require("copy-to-clipboard"));
const Button_1 = __importDefault(require("react-bootstrap/Button"));
const OverlayTrigger_1 = __importDefault(require("react-bootstrap/OverlayTrigger"));
const Tooltip_1 = __importDefault(require("react-bootstrap/Tooltip"));
const GenericSeqPanel = (0, mobx_react_1.observer)(function ({ fastaurl, refseq, model, }) {
const [result, setResult] = (0, react_1.useState)();
const [error, setError] = (0, react_1.useState)();
const seqPanelRef = (0, react_1.useRef)(null);
const [copied, setCopied] = (0, react_1.useState)(false);
const [copiedHtml, setCopiedHtml] = (0, react_1.useState)(false);
const { feature, intronBp, upDownBp } = model;
const copyHighlightedTooltip = (props) => ( // eslint-disable-line @typescript-eslint/no-explicit-any
(0, jsx_runtime_1.jsx)(Tooltip_1.default, Object.assign({ id: "copyHightlightedTooltip" }, props, { children: (0, jsx_runtime_1.jsxs)("span", { style: { fontSize: "small" }, children: ["The \u2018Copy with highlights\u2019 function retains the colors from the sequence panel", (0, jsx_runtime_1.jsx)("br", {}), " but cannot be pasted into some programs like notepad that only expect plain text."] }) })));
(0, react_1.useEffect)(() => {
// eslint-disable-next-line @typescript-eslint/no-floating-promises
(() => __awaiter(this, void 0, void 0, function* () {
try {
setError(undefined);
if (feature) {
const res = yield (0, assembleBundle_1.assembleBundle)({
fastaurl,
transcript: new util_1.SimpleFeature(feature),
upDownBp,
refseq,
});
setResult(res);
}
}
catch (e) {
console.error(e);
setError(e);
}
}))();
}, [intronBp, fastaurl, refseq, upDownBp, feature]);
if (error) {
return (0, jsx_runtime_1.jsx)("div", { style: { color: "red" }, children: `${error}` });
}
else if (!result) {
return (0, jsx_runtime_1.jsx)("div", { children: "Loading..." });
}
else {
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("p", { children: [(0, jsx_runtime_1.jsx)(Button_1.default, { variant: "primary", className: "align-baseline", onClick: () => {
var _a;
const ref = seqPanelRef.current;
if (ref) {
(0, copy_to_clipboard_1.default)((_a = ref.textContent) !== null && _a !== void 0 ? _a : "", { format: "text/plain" });
setCopied(true);
setTimeout(() => {
setCopied(false);
}, 1000);
}
}, children: copied ? "Copied to clipboard!" : "Copy plain fasta" }), "\u00A0", (0, jsx_runtime_1.jsx)(OverlayTrigger_1.default, { placement: "right", delay: { show: 250, hide: 250 }, overlay: copyHighlightedTooltip, children: (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "primary", className: "align-baseline", id: "CopyHighlightedButton", 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);
}, children: copiedHtml ? "Copied to clipboard!" : "Copy highlighted fasta" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: "flex" }, children: [(0, jsx_runtime_1.jsx)("div", { className: "p-2", children: (0, jsx_runtime_1.jsx)(SequencePanel_1.default, { ref: seqPanelRef, model: model, sequence: result.sequence, feature: result.feature }) }), (0, jsx_runtime_1.jsxs)("div", { className: "p-2", children: [(0, jsx_runtime_1.jsx)("p", { children: "\u00A0Legend:" }), (0, jsx_runtime_1.jsxs)("ul", { children: [(0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("span", { style: { background: "rgb(250, 200, 200)" }, children: "Up/downstream" }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("span", { style: { background: "rgb(200, 240, 240)" }, children: "UTR" }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("span", { style: { background: "rgb(220, 220, 180)" }, children: "Coding" }) }), (0, jsx_runtime_1.jsx)("li", { children: "Intron" }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("span", { style: { background: "rgb(200, 255, 200)" }, children: "Genomic (i.e., unprocessed)" }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("span", { style: { background: "rgb(220, 160, 220)" }, children: "Amino acid" }) })] }), (0, jsx_runtime_1.jsxs)("p", { children: ["\u00A0", (0, jsx_runtime_1.jsx)("b", { children: "IMPORTANT NOTE" }), ": Transcript and protein sequences here are derived from GFF coordinate mapping to the reference assembly. It is possible that this sequence differs from the transcript or amino acid sequence reported in NCBI RefSeq when the transcript or protein has its own NCBI RefSeq entry that differs from the genome assembly."] }), (0, jsx_runtime_1.jsx)("p", { style: { fontSize: "small" }, children: "\u00A0Upper case bases for noncoding transcripts indicate mature transcript sequence (i.e., spliced exons when applicable) and for coding transcripts indicate mature transcript's coding region (i.e., CDS)." })] })] })] }));
}
});
exports.default = GenericSeqPanel;