@jbrowse/core 1.7.11 → 2.1.0

package/BaseFeatureWidget/SequenceFeatureDetails.js

@@ -1,489 +1,229 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+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.SequencePanel = void 0;
-exports.default = SequenceFeatureDetails;
-
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _core = require("@material-ui/core");
-
-var _reactIntersectionObserver = require("react-intersection-observer");
-
-var _copyToClipboard = _interopRequireDefault(require("copy-to-clipboard"));
-
-var _util = require("../util");
-
-var _configuration = require("../configuration");
-
-var _util2 = require("./util");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-var useStyles = (0, _core.makeStyles)(function (theme) {
-  return {
+const react_1 = __importStar(require("react"));
+const material_1 = require("@mui/material");
+const mui_1 = require("tss-react/mui");
+const react_intersection_observer_1 = require("react-intersection-observer");
+const copy_to_clipboard_1 = __importDefault(require("copy-to-clipboard"));
+const util_1 = require("../util");
+const configuration_1 = require("../configuration");
+const util_2 = require("./util");
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
     button: {
-      margin: theme.spacing(1)
-    }
-  };
-}); // note that these are currently put into the style section instead of being
+        margin: theme.spacing(1),
+    },
+}));
+// note that these are currently put into the style section instead of being
 // defined in classes to aid copy and paste to an external document e.g. word
-
-var proteinColor = 'rgb(220,160,220)';
-var intronColor = undefined;
-var cdsColor = 'rgb(220,220,180)';
-var updownstreamColor = 'rgba(250,200,200)';
-var utrColor = 'rgb(200,240,240)';
-
-function GeneCDS(_ref) {
-  var cds = _ref.cds,
-      sequence = _ref.sequence;
-  return /*#__PURE__*/_react.default.createElement("span", {
-    style: {
-      background: cdsColor
-    }
-  }, (0, _util2.stitch)(cds, sequence));
+const proteinColor = 'rgb(220,160,220)';
+const intronColor = undefined;
+const cdsColor = 'rgb(220,220,180)';
+const updownstreamColor = 'rgba(250,200,200)';
+const utrColor = 'rgb(200,240,240)';
+function GeneCDS({ cds, sequence }) {
+    return react_1.default.createElement("span", { style: { background: cdsColor } }, (0, util_2.stitch)(cds, sequence));
 }
-
-function GeneProtein(_ref2) {
-  var cds = _ref2.cds,
-      sequence = _ref2.sequence,
-      codonTable = _ref2.codonTable;
-  var str = (0, _util2.stitch)(cds, sequence);
-  var protein = '';
-
-  for (var i = 0; i < str.length; i += 3) {
-    // use & symbol for undefined codon, or partial slice
-    protein += codonTable[str.slice(i, i + 3)] || '&';
-  }
-
-  return /*#__PURE__*/_react.default.createElement("span", {
-    style: {
-      background: proteinColor
+function GeneProtein({ cds, sequence, codonTable, }) {
+    const str = (0, util_2.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)] || '&';
     }
-  }, protein);
+    return react_1.default.createElement("span", { style: { background: proteinColor } }, protein);
+}
+function GenecDNA({ utr, cds, exons, sequence, upstream, downstream, includeIntrons, collapseIntron, }) {
+    const chunks = cds.length
+        ? [...cds, ...utr].sort((a, b) => a.start - b.start)
+        : exons;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        upstream ? (react_1.default.createElement("span", { style: { background: updownstreamColor } }, upstream)) : null,
+        chunks
+            .filter(f => f.start !== f.end)
+            .map((chunk, index) => {
+            var _a;
+            const intron = sequence.slice(chunk.end, (_a = chunks[index + 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' ? cdsColor : utrColor,
+                    } }, sequence.slice(chunk.start, chunk.end)),
+                includeIntrons && index < chunks.length - 1 ? (react_1.default.createElement("span", { style: { background: intronColor } }, collapseIntron && intron.length > 20
+                    ? `${intron.slice(0, 10)}...${intron.slice(-10)}`
+                    : intron)) : null));
+        }),
+        downstream ? (react_1.default.createElement("span", { style: { background: updownstreamColor } }, downstream)) : null));
 }
-
-function GenecDNA(_ref3) {
-  var utr = _ref3.utr,
-      cds = _ref3.cds,
-      exons = _ref3.exons,
-      sequence = _ref3.sequence,
-      upstream = _ref3.upstream,
-      downstream = _ref3.downstream,
-      includeIntrons = _ref3.includeIntrons,
-      collapseIntron = _ref3.collapseIntron;
-  var chunks = cds.length ? [].concat((0, _toConsumableArray2.default)(cds), (0, _toConsumableArray2.default)(utr)).sort(function (a, b) {
-    return a.start - b.start;
-  }) : exons;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, upstream ? /*#__PURE__*/_react.default.createElement("span", {
-    style: {
-      background: updownstreamColor
+exports.SequencePanel = react_1.default.forwardRef(({ feature, mode, sequence: { seq: sequence, upstream = '', downstream = '' }, }, ref) => {
+    const { subfeatures } = feature;
+    const codonTable = (0, util_1.generateCodonTable)(util_1.defaultCodonTable);
+    if (!subfeatures) {
+        return null;
     }
-  }, upstream) : null, chunks.filter(function (f) {
-    return f.start !== f.end;
-  }).map(function (chunk, index) {
-    var _chunks;
-
-    var intron = sequence.slice(chunk.end, (_chunks = chunks[index + 1]) === null || _chunks === void 0 ? void 0 : _chunks.start);
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
-      key: JSON.stringify(chunk)
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      style: {
-        background: chunk.type === 'CDS' ? cdsColor : utrColor
-      }
-    }, sequence.slice(chunk.start, chunk.end)), includeIntrons && index < chunks.length - 1 ? /*#__PURE__*/_react.default.createElement("span", {
-      style: {
-        background: intronColor
-      }
-    }, collapseIntron && intron.length > 20 ? "".concat(intron.slice(0, 10), "...").concat(intron.slice(-10)) : intron) : null);
-  }), downstream ? /*#__PURE__*/_react.default.createElement("span", {
-    style: {
-      background: updownstreamColor
+    const children = subfeatures
+        .sort((a, b) => a.start - b.start)
+        .map(sub => ({
+        ...sub,
+        start: sub.start - feature.start,
+        end: sub.end - feature.start,
+    }));
+    // we filter duplicate entries in cds and exon lists duplicate entries may be
+    // rare but was seen in Gencode v36 track NCList, likely a bug on GFF3 or
+    // probably worth ignoring here (produces broken protein translations if
+    // included)
+    //
+    // position 1:224,800,006..225,203,064 gene ENSG00000185842.15 first
+    // transcript ENST00000445597.6
+    //
+    // http://localhost:3000/?config=test_data%2Fconfig.json&session=share-FUl7G1isvF&password=HXh5Y
+    let cds = (0, util_2.dedupe)(children.filter(sub => sub.type === 'CDS'));
+    let utr = (0, util_2.dedupe)(children.filter(sub => sub.type.match(/utr/i)));
+    let exons = (0, util_2.dedupe)(children.filter(sub => sub.type === 'exon'));
+    if (!utr.length && cds.length && exons.length) {
+        utr = (0, util_2.calculateUTRs)(cds, exons);
     }
-  }, downstream) : null);
-}
-
-var SequencePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref4, ref) {
-  var feature = _ref4.feature,
-      mode = _ref4.mode,
-      _ref4$sequence = _ref4.sequence,
-      sequence = _ref4$sequence.seq,
-      _ref4$sequence$upstre = _ref4$sequence.upstream,
-      upstream = _ref4$sequence$upstre === void 0 ? '' : _ref4$sequence$upstre,
-      _ref4$sequence$downst = _ref4$sequence.downstream,
-      downstream = _ref4$sequence$downst === void 0 ? '' : _ref4$sequence$downst;
-  var subfeatures = feature.subfeatures;
-  var codonTable = (0, _util.generateCodonTable)(_util.defaultCodonTable);
-
-  if (!subfeatures) {
-    return null;
-  }
-
-  var children = subfeatures.sort(function (a, b) {
-    return a.start - b.start;
-  }).map(function (sub) {
-    return _objectSpread(_objectSpread({}, sub), {}, {
-      start: sub.start - feature.start,
-      end: sub.end - feature.start
-    });
-  }); // we filter duplicate entries in cds and exon lists duplicate entries may be
-  // rare but was seen in Gencode v36 track NCList, likely a bug on GFF3 or
-  // probably worth ignoring here (produces broken protein translations if
-  // included)
-  //
-  // position 1:224,800,006..225,203,064 gene ENSG00000185842.15 first
-  // transcript ENST00000445597.6
-  //
-  // http://localhost:3000/?config=test_data%2Fconfig.json&session=share-FUl7G1isvF&password=HXh5Y
-
-  var cds = (0, _util2.dedupe)(children.filter(function (sub) {
-    return sub.type === 'CDS';
-  }));
-  var utr = (0, _util2.dedupe)(children.filter(function (sub) {
-    return sub.type.match(/utr/i);
-  }));
-  var exons = (0, _util2.dedupe)(children.filter(function (sub) {
-    return sub.type === 'exon';
-  }));
-
-  if (!utr.length && cds.length && exons.length) {
-    utr = (0, _util2.calculateUTRs)(cds, exons);
-  }
-
-  if (feature.strand === -1) {
-    // doing this in a single assignment is needed because downstream and
-    // upstream are swapped so this avoids a temp variable
-    ;
-    var _ref5 = [(0, _util.revcom)(sequence), (0, _util.revcom)(downstream), (0, _util.revcom)(upstream)];
-    sequence = _ref5[0];
-    upstream = _ref5[1];
-    downstream = _ref5[2];
-    cds = (0, _util2.revlist)(cds, sequence.length);
-    exons = (0, _util2.revlist)(exons, sequence.length);
-    utr = (0, _util2.revlist)(utr, sequence.length);
-  }
-
-  return /*#__PURE__*/_react.default.createElement("div", {
-    ref: ref,
-    "data-testid": "sequence_panel"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      fontFamily: 'monospace',
-      wordWrap: 'break-word',
-      maxWidth: 600
+    if (feature.strand === -1) {
+        // doing this in a single assignment is needed because downstream and
+        // upstream are swapped so this avoids a temp variable
+        ;
+        [sequence, upstream, downstream] = [
+            (0, util_1.revcom)(sequence),
+            (0, util_1.revcom)(downstream),
+            (0, util_1.revcom)(upstream),
+        ];
+        cds = (0, util_2.revlist)(cds, sequence.length);
+        exons = (0, util_2.revlist)(exons, sequence.length);
+        utr = (0, util_2.revlist)(utr, sequence.length);
     }
-  }, ">".concat(feature.name || feature.id || 'unknown', "-").concat(mode, "\n"), mode === 'cds' ? /*#__PURE__*/_react.default.createElement(GeneCDS, {
-    cds: cds,
-    sequence: sequence
-  }) : mode === 'cdna' ? /*#__PURE__*/_react.default.createElement(GenecDNA, {
-    exons: exons,
-    cds: cds,
-    utr: utr,
-    sequence: sequence
-  }) : mode === 'protein' ? /*#__PURE__*/_react.default.createElement(GeneProtein, {
-    cds: cds,
-    codonTable: codonTable,
-    sequence: sequence
-  }) : mode === 'gene' ? /*#__PURE__*/_react.default.createElement(GenecDNA, {
-    exons: exons,
-    cds: cds,
-    utr: utr,
-    sequence: sequence,
-    includeIntrons: true
-  }) : mode === 'gene_collapsed_intron' ? /*#__PURE__*/_react.default.createElement(GenecDNA, {
-    exons: exons,
-    cds: cds,
-    sequence: sequence,
-    utr: utr,
-    includeIntrons: true,
-    collapseIntron: true
-  }) : mode === 'gene_updownstream' ? /*#__PURE__*/_react.default.createElement(GenecDNA, {
-    exons: exons,
-    cds: cds,
-    sequence: sequence,
-    utr: utr,
-    upstream: upstream,
-    downstream: downstream,
-    includeIntrons: true
-  }) : mode === 'gene_updownstream_collapsed_intron' ? /*#__PURE__*/_react.default.createElement(GenecDNA, {
-    exons: exons,
-    cds: cds,
-    sequence: sequence,
-    utr: utr,
-    upstream: upstream,
-    downstream: downstream,
-    includeIntrons: true,
-    collapseIntron: true
-  }) : /*#__PURE__*/_react.default.createElement("div", null, "Unknown type")));
-}); // display the stitched-together sequence of a gene's CDS, cDNA, or protein
+    return (react_1.default.createElement("div", { ref: ref, "data-testid": "sequence_panel" },
+        react_1.default.createElement("div", { style: {
+                fontFamily: 'monospace',
+                wordWrap: 'break-word',
+                fontSize: 12,
+                maxWidth: 600,
+            } },
+            `>${feature.name || feature.id || 'unknown'}-${mode}\n`,
+            mode === 'cds' ? (react_1.default.createElement(GeneCDS, { cds: cds, sequence: sequence })) : mode === 'cdna' ? (react_1.default.createElement(GenecDNA, { exons: exons, cds: cds, utr: utr, sequence: sequence })) : mode === 'protein' ? (react_1.default.createElement(GeneProtein, { cds: cds, codonTable: codonTable, sequence: sequence })) : mode === 'gene' ? (react_1.default.createElement(GenecDNA, { exons: exons, cds: cds, utr: utr, sequence: sequence, includeIntrons: true })) : mode === 'gene_collapsed_intron' ? (react_1.default.createElement(GenecDNA, { exons: exons, cds: cds, sequence: sequence, utr: utr, includeIntrons: true, collapseIntron: true })) : mode === 'gene_updownstream' ? (react_1.default.createElement(GenecDNA, { exons: exons, cds: cds, sequence: sequence, utr: utr, upstream: upstream, downstream: downstream, includeIntrons: true })) : mode === 'gene_updownstream_collapsed_intron' ? (react_1.default.createElement(GenecDNA, { exons: exons, cds: cds, sequence: sequence, utr: utr, upstream: upstream, downstream: downstream, includeIntrons: true, collapseIntron: true })) : (react_1.default.createElement("div", null, "Unknown type")))));
+});
+// display the stitched-together sequence of a gene's CDS, cDNA, or protein
 // sequence. this is a best effort and weird genomic phenomena could lead these
 // to not be 100% accurate
-
-
-exports.SequencePanel = SequencePanel;
-
-function SequenceFeatureDetails(_ref6) {
-  var _parentFeature$subfea;
-
-  var model = _ref6.model,
-      feature = _ref6.feature;
-  var classes = useStyles();
-  var parentFeature = feature;
-  var hasCDS = (_parentFeature$subfea = parentFeature.subfeatures) === null || _parentFeature$subfea === void 0 ? void 0 : _parentFeature$subfea.find(function (sub) {
-    return sub.type === 'CDS';
-  });
-  var seqPanelRef = (0, _react.useRef)(null);
-
-  var _useInView = (0, _reactIntersectionObserver.useInView)(),
-      ref = _useInView.ref,
-      inView = _useInView.inView;
-
-  var _useState = (0, _react.useState)(),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      sequence = _useState2[0],
-      setSequence = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      error = _useState4[0],
-      setError = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(hasCDS ? 'cds' : 'cdna'),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      mode = _useState6[0],
-      setMode = _useState6[1];
-
-  var _useState7 = (0, _react.useState)(false),
-      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      copied = _useState8[0],
-      setCopied = _useState8[1];
-
-  var _useState9 = (0, _react.useState)(false),
-      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      copiedHtml = _useState10[0],
-      setCopiedHtml = _useState10[1];
-
-  (0, _react.useEffect)(function () {
-    var _model$view;
-
-    var finished = false;
-
-    if (!model || !inView) {
-      return function () {};
-    }
-
-    var _getSession = (0, _util.getSession)(model),
-        assemblyManager = _getSession.assemblyManager,
-        rpcManager = _getSession.rpcManager;
-
-    var _ref7 = ((_model$view = model.view) === null || _model$view === void 0 ? void 0 : _model$view.assemblyNames) || [],
-        _ref8 = (0, _slicedToArray2.default)(_ref7, 1),
-        assemblyName = _ref8[0];
-
-    function fetchSeq(_x, _x2, _x3) {
-      return _fetchSeq.apply(this, arguments);
-    }
-
-    function _fetchSeq() {
-      _fetchSeq = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(start, end, refName) {
-        var assembly, sessionId, feats, _ref11, _ref12, feat;
-
-        return _regenerator.default.wrap(function _callee2$(_context2) {
-          while (1) {
-            switch (_context2.prev = _context2.next) {
-              case 0:
-                _context2.next = 2;
-                return assemblyManager.waitForAssembly(assemblyName);
-
-              case 2:
-                assembly = _context2.sent;
-
-                if (assembly) {
-                  _context2.next = 5;
-                  break;
-                }
-
+function SequenceFeatureDetails({ 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 { ref, inView } = (0, react_intersection_observer_1.useInView)();
+    const [sequence, setSequence] = (0, react_1.useState)();
+    const [error, setError] = (0, react_1.useState)();
+    const [mode, setMode] = (0, react_1.useState)(hasCDS ? 'cds' : 'cdna');
+    const [copied, setCopied] = (0, react_1.useState)(false);
+    const [copiedHtml, setCopiedHtml] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        let finished = false;
+        if (!model || !inView) {
+            return () => { };
+        }
+        const { assemblyManager, rpcManager } = (0, util_1.getSession)(model);
+        const [assemblyName] = ((_a = model.view) === null || _a === void 0 ? void 0 : _a.assemblyNames) || [];
+        async function fetchSeq(start, end, refName) {
+            const assembly = await assemblyManager.waitForAssembly(assemblyName);
+            if (!assembly) {
                 throw new Error('assembly not found');
-
-              case 5:
-                sessionId = 'getSequence';
-                _context2.next = 8;
-                return rpcManager.call(sessionId, 'CoreGetFeatures', {
-                  adapterConfig: (0, _configuration.getConf)(assembly, ['sequence', 'adapter']),
-                  sessionId: sessionId,
-                  regions: [{
-                    start: start,
-                    end: end,
-                    refName: assembly.getCanonicalRefName(refName)
-                  }]
-                });
-
-              case 8:
-                feats = _context2.sent;
-                _ref11 = feats, _ref12 = (0, _slicedToArray2.default)(_ref11, 1), feat = _ref12[0];
-
-                if (feat) {
-                  _context2.next = 12;
-                  break;
-                }
-
-                throw new Error("sequence not found for feature with refName:".concat(refName));
-
-              case 12:
-                return _context2.abrupt("return", feat.get('seq'));
-
-              case 13:
-              case "end":
-                return _context2.stop();
             }
-          }
-        }, _callee2);
-      }));
-      return _fetchSeq.apply(this, arguments);
-    }
-
-    ;
-    (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-      var _ref10, start, end, refName, seq, up, down;
-
-      return _regenerator.default.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              _context.prev = 0;
-              _ref10 = feature, start = _ref10.start, end = _ref10.end, refName = _ref10.refName;
-              _context.next = 4;
-              return fetchSeq(start, end, refName);
-
-            case 4:
-              seq = _context.sent;
-              _context.next = 7;
-              return fetchSeq(Math.max(0, start - 500), start, refName);
-
-            case 7:
-              up = _context.sent;
-              _context.next = 10;
-              return fetchSeq(end, end + 500, refName);
-
-            case 10:
-              down = _context.sent;
-
-              if (!finished) {
-                setSequence({
-                  seq: seq,
-                  upstream: up,
-                  downstream: down
-                });
-              }
-
-              _context.next = 17;
-              break;
-
-            case 14:
-              _context.prev = 14;
-              _context.t0 = _context["catch"](0);
-              setError(_context.t0);
-
-            case 17:
-            case "end":
-              return _context.stop();
-          }
+            const sessionId = 'getSequence';
+            const feats = await rpcManager.call(sessionId, 'CoreGetFeatures', {
+                adapterConfig: (0, configuration_1.getConf)(assembly, ['sequence', 'adapter']),
+                sessionId,
+                regions: [
+                    {
+                        start,
+                        end,
+                        refName: assembly.getCanonicalRefName(refName),
+                    },
+                ],
+            });
+            const [feat] = feats;
+            if (!feat) {
+                throw new Error(`sequence not found for feature with refName:${refName}`);
+            }
+            return feat.get('seq');
         }
-      }, _callee, null, [[0, 14]]);
-    }))();
-    return function () {
-      finished = true;
-    };
-  }, [feature, inView, model]);
-  var loading = !sequence;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    ref: ref
-  }, /*#__PURE__*/_react.default.createElement(_core.Select, {
-    value: mode,
-    onChange: function onChange(event) {
-      return setMode(event.target.value);
-    }
-  }, hasCDS ? /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
-    value: "cds"
-  }, "CDS") : null, hasCDS ? /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
-    value: "protein"
-  }, "Protein") : null, /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
-    value: "gene"
-  }, "Gene w/ introns"), /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
-    value: "gene_collapsed_intron"
-  }, "Gene w/ 10bp of intron"), /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
-    value: "gene_updownstream"
-  }, "Gene w/ 500bp up+down stream"), /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
-    value: "gene_updownstream_collapsed_intron"
-  }, "Gene w/ 500bp up+down stream w/ 10bp intron"), /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
-    value: "cdna"
-  }, "cDNA")), /*#__PURE__*/_react.default.createElement(_core.Button, {
-    className: classes.button,
-    type: "button",
-    variant: "contained",
-    onClick: function onClick() {
-      var ref = seqPanelRef.current;
-
-      if (ref) {
-        (0, _copyToClipboard.default)(ref.textContent || '', {
-          format: 'text/plain'
-        });
-        setCopied(true);
-        setTimeout(function () {
-          return setCopied(false);
-        }, 1000);
-      }
-    }
-  }, copied ? 'Copied to clipboard!' : 'Copy as plaintext'), /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
-    title: "Note that 'Copy as HTML' can retain the colors but cannot be pasted into some programs like notepad that only expect plain text"
-  }, /*#__PURE__*/_react.default.createElement(_core.Button, {
-    className: classes.button,
-    type: "button",
-    variant: "contained",
-    onClick: function onClick() {
-      var ref = seqPanelRef.current;
-
-      if (ref) {
-        (0, _copyToClipboard.default)(ref.innerHTML, {
-          format: 'text/html'
-        });
-        setCopiedHtml(true);
-        setTimeout(function () {
-          return setCopiedHtml(false);
-        }, 1000);
-      }
-    }
-  }, copiedHtml ? 'Copied to clipboard!' : 'Copy as HTML')), /*#__PURE__*/_react.default.createElement("div", {
-    "data-testid": "feature_sequence"
-  }, error ? /*#__PURE__*/_react.default.createElement(_core.Typography, {
-    color: "error"
-  }, "".concat(error)) : loading ? /*#__PURE__*/_react.default.createElement("div", null, "Loading gene sequence...") : sequence ? /*#__PURE__*/_react.default.createElement(SequencePanel, {
-    ref: seqPanelRef,
-    feature: parentFeature,
-    mode: mode,
-    sequence: sequence
-  }) : /*#__PURE__*/_react.default.createElement("div", null, "No sequence found")));
-}
+        ;
+        (async () => {
+            try {
+                const { start, end, refName } = feature;
+                const seq = await fetchSeq(start, end, refName);
+                const up = await fetchSeq(Math.max(0, start - 500), start, refName);
+                const down = await fetchSeq(end, end + 500, refName);
+                if (!finished) {
+                    setSequence({ seq, upstream: up, downstream: down });
+                }
+            }
+            catch (e) {
+                setError(e);
+            }
+        })();
+        return () => {
+            finished = true;
+        };
+    }, [feature, inView, model]);
+    const loading = !sequence;
+    return (react_1.default.createElement("div", { ref: ref },
+        react_1.default.createElement(material_1.FormControl, null,
+            react_1.default.createElement(material_1.Select, { value: mode, onChange: event => setMode(event.target.value) },
+                hasCDS ? react_1.default.createElement(material_1.MenuItem, { value: "cds" }, "CDS") : null,
+                hasCDS ? react_1.default.createElement(material_1.MenuItem, { value: "protein" }, "Protein") : null,
+                react_1.default.createElement(material_1.MenuItem, { value: "gene" }, "Gene w/ introns"),
+                react_1.default.createElement(material_1.MenuItem, { value: "gene_collapsed_intron" }, "Gene w/ 10bp of intron"),
+                react_1.default.createElement(material_1.MenuItem, { value: "gene_updownstream" }, "Gene w/ 500bp up+down stream"),
+                react_1.default.createElement(material_1.MenuItem, { value: "gene_updownstream_collapsed_intron" }, "Gene w/ 500bp up+down stream w/ 10bp intron"),
+                react_1.default.createElement(material_1.MenuItem, { value: "cdna" }, "cDNA"))),
+        react_1.default.createElement(material_1.Button, { className: classes.button, type: "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 as plaintext'),
+        react_1.default.createElement(material_1.Tooltip, { title: "Note that 'Copy as HTML' can retain the colors but cannot be pasted into some programs like notepad that only expect plain text" },
+            react_1.default.createElement(material_1.Button, { className: classes.button, type: "button", variant: "contained", 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 as HTML')),
+        react_1.default.createElement("div", { "data-testid": "feature_sequence" }, error ? (react_1.default.createElement(material_1.Typography, { color: "error" }, `${error}`)) : loading ? (react_1.default.createElement("div", null, "Loading gene sequence...")) : sequence ? (react_1.default.createElement(exports.SequencePanel, { ref: seqPanelRef, feature: parentFeature, mode: mode, sequence: sequence })) : (react_1.default.createElement("div", null, "No sequence found")))));
+}
+exports.default = SequenceFeatureDetails;