generic-sequence-panel
Version:
read feature and sequence data and produce highlighted fasta
72 lines (71 loc) • 5.54 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState, useEffect, useRef } from "react";
import { observer } from "mobx-react";
import SequencePanel from "@jbrowse/core/BaseFeatureWidget/SequenceFeatureDetails/SequencePanel";
import { assembleBundle } from "../assembleBundle";
import { SimpleFeature } from "@jbrowse/core/util";
import copy from "copy-to-clipboard";
import Button from 'react-bootstrap/Button';
import OverlayTrigger from "react-bootstrap/OverlayTrigger";
import Tooltip from "react-bootstrap/Tooltip";
const GenericSeqPanel = observer(function ({ fastaurl, refseq, model, }) {
const [result, setResult] = useState();
const [error, setError] = useState();
const seqPanelRef = useRef(null);
const [copied, setCopied] = useState(false);
const [copiedHtml, setCopiedHtml] = useState(false);
const { feature, intronBp, upDownBp } = model;
const copyHighlightedTooltip = (props) => ( // eslint-disable-line @typescript-eslint/no-explicit-any
_jsx(Tooltip, { id: "copyHightlightedTooltip", ...props, children: _jsxs("span", { style: { fontSize: "small" }, children: ["The \u2018Copy with highlights\u2019 function retains the colors from the sequence panel", _jsx("br", {}), " but cannot be pasted into some programs like notepad that only expect plain text."] }) }));
useEffect(() => {
// eslint-disable-next-line @typescript-eslint/no-floating-promises
(async () => {
try {
setError(undefined);
if (feature) {
const res = await assembleBundle({
fastaurl,
transcript: new SimpleFeature(feature),
upDownBp,
refseq,
});
setResult(res);
}
}
catch (e) {
console.error(e);
setError(e);
}
})();
}, [intronBp, fastaurl, refseq, upDownBp, feature]);
if (error) {
return _jsx("div", { style: { color: "red" }, children: `${error}` });
}
else if (!result) {
return _jsx("div", { children: "Loading..." });
}
else {
return (_jsxs(_Fragment, { children: [_jsxs("p", { children: [_jsx(Button, { variant: "primary", className: "align-baseline", onClick: () => {
var _a;
const ref = seqPanelRef.current;
if (ref) {
copy((_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", _jsx(OverlayTrigger, { placement: "right", delay: { show: 250, hide: 250 }, overlay: copyHighlightedTooltip, children: _jsx(Button, { variant: "primary", className: "align-baseline", id: "CopyHighlightedButton", onClick: () => {
const ref = seqPanelRef.current;
if (!ref) {
return;
}
copy(ref.innerHTML, { format: "text/html" });
setCopiedHtml(true);
setTimeout(() => {
setCopiedHtml(false);
}, 1000);
}, children: copiedHtml ? "Copied to clipboard!" : "Copy highlighted fasta" }) })] }), _jsxs("div", { style: { display: "flex" }, children: [_jsx("div", { className: "p-2", children: _jsx(SequencePanel, { ref: seqPanelRef, model: model, sequence: result.sequence, feature: result.feature }) }), _jsxs("div", { className: "p-2", children: [_jsx("p", { children: "\u00A0Legend:" }), _jsxs("ul", { children: [_jsx("li", { children: _jsx("span", { style: { background: "rgb(250, 200, 200)" }, children: "Up/downstream" }) }), _jsx("li", { children: _jsx("span", { style: { background: "rgb(200, 240, 240)" }, children: "UTR" }) }), _jsx("li", { children: _jsx("span", { style: { background: "rgb(220, 220, 180)" }, children: "Coding" }) }), _jsx("li", { children: "Intron" }), _jsx("li", { children: _jsx("span", { style: { background: "rgb(200, 255, 200)" }, children: "Genomic (i.e., unprocessed)" }) }), _jsx("li", { children: _jsx("span", { style: { background: "rgb(220, 160, 220)" }, children: "Amino acid" }) })] }), _jsxs("p", { children: ["\u00A0", _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."] }), _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)." })] })] })] }));
}
});
export default GenericSeqPanel;