generic-sequence-panel
Version:
read feature and sequence data and produce highlighted fasta
88 lines (87 loc) • 4.45 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 GenericSeqPanel_1 = __importDefault(require("./GenericSeqPanel"));
const fetchTranscripts_1 = __importDefault(require("../fetchTranscripts"));
const model_1 = require("@jbrowse/core/BaseFeatureWidget/SequenceFeatureDetails/model");
const Selector_1 = __importDefault(require("./Selector"));
const mobx_react_1 = require("mobx-react");
const mobx_state_tree_1 = require("mobx-state-tree");
const NCListFeature_1 = __importDefault(require("../NCListFeature"));
// blank parent Model to allow afterAttach autorun to execute
const Model = mobx_state_tree_1.types.model({
sequenceFeatureDetails: (0, model_1.SequenceFeatureDetailsF)(),
});
const GenericGeneSeqPanel = (0, mobx_react_1.observer)(function ({ nclistbaseurl, fastaurl, refseq, start, end, gene, urltemplate, }) {
var _a;
const [result, setResult] = (0, react_1.useState)();
const [error, setError] = (0, react_1.useState)();
const [{ sequenceFeatureDetails }] = (0, react_1.useState)(() => {
const model = Model.create({
sequenceFeatureDetails: {},
});
model.sequenceFeatureDetails.setUpDownBp(500);
return model;
});
(0, react_1.useEffect)(() => {
// eslint-disable-next-line @typescript-eslint/no-floating-promises
(() => __awaiter(this, void 0, void 0, function* () {
var _a;
try {
setError(undefined);
const res = yield (0, fetchTranscripts_1.default)({
nclistbaseurl,
refseq,
start,
end,
gene,
urltemplate,
});
const r = res.map(r => new NCListFeature_1.default(r));
setResult(r);
sequenceFeatureDetails.setFeature((_a = r[0]) === null || _a === void 0 ? void 0 : _a.toJSON());
}
catch (e) {
console.error(e);
setError(e);
}
}))();
}, [
sequenceFeatureDetails,
nclistbaseurl,
fastaurl,
refseq,
start,
end,
gene,
urltemplate,
]);
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)("div", { className: "GenericGeneSeqPanel", children: [(0, jsx_runtime_1.jsxs)("div", { children: ["Transcript:", (0, jsx_runtime_1.jsx)("select", { value: (_a = sequenceFeatureDetails.feature) === null || _a === void 0 ? void 0 : _a.uniqueId, onChange: e => {
var _a;
sequenceFeatureDetails.setFeature(
// @ts-expect-error
(_a = result.find(r => r.id() === e.target.value)) === null || _a === void 0 ? void 0 : _a.toJSON());
}, children: result.map(r => ((0, jsx_runtime_1.jsx)("option", { value: r.id(), children: r.get("name") }, r.id()))) }), "\u00A0", (0, jsx_runtime_1.jsx)(Selector_1.default, { model: sequenceFeatureDetails })] }), sequenceFeatureDetails.feature ? ((0, jsx_runtime_1.jsx)(GenericSeqPanel_1.default, { refseq: refseq, fastaurl: fastaurl, model: sequenceFeatureDetails })) : null] }));
}
});
exports.default = GenericGeneSeqPanel;