@jbrowse/plugin-sequence 1.6.7 → 1.7.0

package/dist/BgzipFastaAdapter/BgzipFastaAdapter.js

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _indexedfasta = require("@gmod/indexedfasta");
+
+var _io = require("@jbrowse/core/util/io");
+
+var _configuration = require("@jbrowse/core/configuration");
+
+var _IndexedFastaAdapter = _interopRequireDefault(require("../IndexedFastaAdapter/IndexedFastaAdapter"));
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var _default = /*#__PURE__*/function (_IndexedFasta) {
+  (0, _inherits2["default"])(_default, _IndexedFasta);
+
+  var _super = _createSuper(_default);
+
+  function _default(config, getSubAdapter, pluginManager) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, _default);
+    _this = _super.call(this, config, getSubAdapter, pluginManager);
+    var fastaLocation = (0, _configuration.readConfObject)(config, 'fastaLocation');
+    var faiLocation = (0, _configuration.readConfObject)(config, 'faiLocation');
+    var gziLocation = (0, _configuration.readConfObject)(config, 'gziLocation');
+
+    if (!fastaLocation) {
+      throw new Error('must provide fastaLocation');
+    }
+
+    if (!faiLocation) {
+      throw new Error('must provide faiLocation');
+    }
+
+    if (!gziLocation) {
+      throw new Error('must provide gziLocation');
+    }
+
+    var fastaOpts = {
+      fasta: (0, _io.openLocation)(fastaLocation, _this.pluginManager),
+      fai: (0, _io.openLocation)(faiLocation, _this.pluginManager),
+      gzi: (0, _io.openLocation)(gziLocation, _this.pluginManager)
+    };
+    _this.fasta = new _indexedfasta.BgzipIndexedFasta(fastaOpts);
+    return _this;
+  }
+
+  return (0, _createClass2["default"])(_default);
+}(_IndexedFastaAdapter["default"]);
+
+exports["default"] = _default;

package/dist/BgzipFastaAdapter/BgzipFastaAdapter.test.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _operators = require("rxjs/operators");
+
+var _BgzipFastaAdapter = _interopRequireDefault(require("./BgzipFastaAdapter"));
+
+var _configSchema = _interopRequireDefault(require("./configSchema"));
+
+test('can use a indexed fasta with gzi', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+  var adapter, features, featuresArray, features2, featuresArray2;
+  return _regenerator["default"].wrap(function _callee$(_context) {
+    while (1) {
+      switch (_context.prev = _context.next) {
+        case 0:
+          adapter = new _BgzipFastaAdapter["default"](_configSchema["default"].create({
+            fastaLocation: {
+              localPath: require.resolve('../../test_data/volvox.fa.gz'),
+              locationType: 'LocalPathLocation'
+            },
+            faiLocation: {
+              localPath: require.resolve('../../test_data/volvox.fa.gz.fai'),
+              locationType: 'LocalPathLocation'
+            },
+            gziLocation: {
+              localPath: require.resolve('../../test_data/volvox.fa.gz.gzi'),
+              locationType: 'LocalPathLocation'
+            }
+          }));
+          features = adapter.getFeatures({
+            refName: 'ctgA',
+            start: 0,
+            end: 20000
+          });
+          _context.next = 4;
+          return features.pipe((0, _operators.toArray)()).toPromise();
+
+        case 4:
+          featuresArray = _context.sent;
+          expect(featuresArray).toMatchSnapshot();
+          features2 = adapter.getFeatures({
+            refName: 'ctgC',
+            start: 0,
+            end: 20000
+          });
+          _context.next = 9;
+          return features2.pipe((0, _operators.toArray)()).toPromise();
+
+        case 9:
+          featuresArray2 = _context.sent;
+          expect(featuresArray2).toMatchSnapshot();
+
+        case 11:
+        case "end":
+          return _context.stop();
+      }
+    }
+  }, _callee);
+})));

package/dist/BgzipFastaAdapter/configSchema.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _configuration = require("@jbrowse/core/configuration");
+
+var _default = (0, _configuration.ConfigurationSchema)('BgzipFastaAdapter', {
+  fastaLocation: {
+    type: 'fileLocation',
+    defaultValue: {
+      uri: '/path/to/seq.fa.gz',
+      locationType: 'UriLocation'
+    }
+  },
+  faiLocation: {
+    type: 'fileLocation',
+    defaultValue: {
+      uri: '/path/to/seq.fa.gz.fai',
+      locationType: 'UriLocation'
+    }
+  },
+  gziLocation: {
+    type: 'fileLocation',
+    defaultValue: {
+      uri: '/path/to/seq.fa.gz.gzi',
+      locationType: 'UriLocation'
+    }
+  }
+}, {
+  explicitlyTyped: true
+});
+
+exports["default"] = _default;

package/dist/BgzipFastaAdapter/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "configSchema", {
+  enumerable: true,
+  get: function get() {
+    return _configSchema["default"];
+  }
+});
+
+var _configSchema = _interopRequireDefault(require("./configSchema"));

package/dist/ChromSizesAdapter/ChromSizesAdapter.js

@@ -0,0 +1,170 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _BaseAdapter2 = require("@jbrowse/core/data_adapters/BaseAdapter");
+
+var _io = require("@jbrowse/core/util/io");
+
+var _configuration = require("@jbrowse/core/configuration");
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var _default = /*#__PURE__*/function (_BaseAdapter) {
+  (0, _inherits2["default"])(_default, _BaseAdapter);
+
+  var _super = _createSuper(_default);
+
+  // the map of refSeq to length
+  function _default(config, getSubAdapter, pluginManager) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, _default);
+    _this = _super.call(this, config, getSubAdapter, pluginManager);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "refSeqs", void 0);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "source", void 0);
+    var chromSizesLocation = (0, _configuration.readConfObject)(config, 'chromSizesLocation');
+
+    if (!chromSizesLocation) {
+      throw new Error('must provide chromSizesLocation');
+    }
+
+    var file = (0, _io.openLocation)(chromSizesLocation, _this.pluginManager);
+    _this.source = file.toString();
+    _this.refSeqs = _this.init(file);
+    return _this;
+  }
+
+  (0, _createClass2["default"])(_default, [{
+    key: "init",
+    value: function () {
+      var _init = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(file) {
+        var data, refSeqs;
+        return _regenerator["default"].wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return file.readFile('utf8');
+
+              case 2:
+                data = _context.sent;
+                refSeqs = {};
+
+                if (data.length) {
+                  _context.next = 6;
+                  break;
+                }
+
+                throw new Error("Could not read file ".concat(file.toString()));
+
+              case 6:
+                data.split('\n').forEach(function (line) {
+                  if (line.length) {
+                    var _line$split = line.split('\t'),
+                        _line$split2 = (0, _slicedToArray2["default"])(_line$split, 2),
+                        name = _line$split2[0],
+                        length = _line$split2[1];
+
+                    refSeqs[name] = +length;
+                  }
+                });
+                return _context.abrupt("return", refSeqs);
+
+              case 8:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      function init(_x) {
+        return _init.apply(this, arguments);
+      }
+
+      return init;
+    }()
+  }, {
+    key: "getRegions",
+    value: function () {
+      var _getRegions = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+        var refSeqs;
+        return _regenerator["default"].wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                _context2.next = 2;
+                return this.refSeqs;
+
+              case 2:
+                refSeqs = _context2.sent;
+                return _context2.abrupt("return", Object.keys(refSeqs).map(function (refName) {
+                  return {
+                    refName: refName,
+                    start: 0,
+                    end: refSeqs[refName]
+                  };
+                }));
+
+              case 4:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, this);
+      }));
+
+      function getRegions() {
+        return _getRegions.apply(this, arguments);
+      }
+
+      return getRegions;
+    }()
+  }, {
+    key: "getFeatures",
+    value: function getFeatures() {
+      throw new Error('sequence not available');
+    }
+  }, {
+    key: "getHeader",
+    value: function getHeader() {
+      return {};
+    }
+  }, {
+    key: "freeResources",
+    value: function
+      /* { region } */
+    freeResources() {}
+  }]);
+  return _default;
+}(_BaseAdapter2.BaseAdapter);
+
+exports["default"] = _default;

package/dist/ChromSizesAdapter/ChromSizesAdapter.test.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _ChromSizesAdapter = _interopRequireDefault(require("./ChromSizesAdapter"));
+
+var _configSchema = _interopRequireDefault(require("./configSchema"));
+
+test('adapter can fetch sequence from volvox.chrom.sizes', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+  var adapter, regions;
+  return _regenerator["default"].wrap(function _callee$(_context) {
+    while (1) {
+      switch (_context.prev = _context.next) {
+        case 0:
+          adapter = new _ChromSizesAdapter["default"](_configSchema["default"].create({
+            chromSizesLocation: {
+              localPath: require.resolve('./test_data/volvox.chrom.sizes'),
+              locationType: 'LocalPathLocation'
+            }
+          }));
+          _context.next = 3;
+          return adapter.getRegions();
+
+        case 3:
+          regions = _context.sent;
+          expect(regions).toEqual([{
+            refName: 'ctgA',
+            start: 0,
+            end: 50001
+          }, {
+            refName: 'ctgB',
+            start: 0,
+            end: 6079
+          }]);
+
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }
+  }, _callee);
+})));

package/dist/ChromSizesAdapter/configSchema.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _configuration = require("@jbrowse/core/configuration");
+
+var _default = (0, _configuration.ConfigurationSchema)('ChromSizesAdapter', {
+  chromSizesLocation: {
+    type: 'fileLocation',
+    defaultValue: {
+      uri: '/path/to/species.chrom.sizes',
+      locationType: 'UriLocation'
+    }
+  }
+}, {
+  explicitlyTyped: true
+});
+
+exports["default"] = _default;

package/dist/ChromSizesAdapter/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "configSchema", {
+  enumerable: true,
+  get: function get() {
+    return _configSchema["default"];
+  }
+});
+
+var _configSchema = _interopRequireDefault(require("./configSchema"));

package/dist/DivSequenceRenderer/components/DivSequenceRendering.js

@@ -0,0 +1,239 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _color = require("@jbrowse/core/util/color");
+
+var _ui = require("@jbrowse/core/ui");
+
+var _mobxReact = require("mobx-react");
+
+var _util = require("@jbrowse/core/util");
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+function Translation(props) {
+  var codonTable = props.codonTable,
+      seq = props.seq,
+      frame = props.frame,
+      bpPerPx = props.bpPerPx,
+      region = props.region,
+      height = props.height,
+      y = props.y,
+      _props$reverse = props.reverse,
+      reverse = _props$reverse === void 0 ? false : _props$reverse,
+      theme = props.theme;
+  var scale = bpPerPx; // the tilt variable normalizes the frame to where we are starting from,
+  // which increases consistency across blocks
+
+  var tilt = 3 - region.start % 3; // the effectiveFrame incorporates tilt and the frame to say what the
+  // effective frame that is plotted. The +3 is for when frame is -2 and this
+  // can otherwise result in effectiveFrame -1
+
+  var effectiveFrame = (frame + tilt + 3) % 3;
+  var seqSliced = seq.slice(effectiveFrame);
+  var translated = [];
+
+  for (var i = 0; i < seqSliced.length; i += 3) {
+    var codon = seqSliced.slice(i, i + 3);
+    var normalizedCodon = reverse ? (0, _util.revcom)(codon) : codon;
+    var aminoAcid = codonTable[normalizedCodon] || '';
+    translated.push({
+      letter: aminoAcid,
+      codon: normalizedCodon.toUpperCase()
+    });
+  }
+
+  var w = 1 / scale * 3;
+  var drop = region.start === 0 ? 0 : w;
+  var render = 1 / bpPerPx >= 12;
+  var width = (region.end - region.start) / bpPerPx;
+  var map = ['#d8d8d8', '#adadad', '#8f8f8f'].reverse();
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, translated.map(function (element, index) {
+    var x = region.reversed ? width - (w * (index + 1) + effectiveFrame / scale - drop) : w * index + effectiveFrame / scale - drop;
+    var letter = element.letter,
+        codon = element.codon;
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
+      key: "".concat(index, "-").concat(letter)
+    }, /*#__PURE__*/_react["default"].createElement("rect", {
+      x: x,
+      y: y,
+      width: render ? w : w + 0.7
+      /* small fudge factor when zoomed out*/
+      ,
+      height: height,
+      stroke: render ? '#555' : 'none',
+      fill: _util.defaultStarts.includes(codon) ? theme.palette.startCodon : _util.defaultStops.includes(codon) ? theme.palette.stopCodon : map[Math.abs(frame)]
+    }), render ? /*#__PURE__*/_react["default"].createElement("text", {
+      x: x + w / 2,
+      y: y + height / 2,
+      dominantBaseline: "middle",
+      textAnchor: "middle"
+    }, letter) : null);
+  }));
+}
+
+function DNA(props) {
+  var bpPerPx = props.bpPerPx,
+      region = props.region,
+      feature = props.feature,
+      theme = props.theme,
+      height = props.height,
+      seq = props.seq,
+      y = props.y;
+  var render = 1 / bpPerPx >= 12;
+
+  var _bpSpanPx = (0, _util.bpSpanPx)(feature.get('start'), feature.get('end'), region, bpPerPx),
+      _bpSpanPx2 = (0, _slicedToArray2["default"])(_bpSpanPx, 2),
+      leftPx = _bpSpanPx2[0],
+      rightPx = _bpSpanPx2[1];
+
+  var reverse = region.reversed;
+  var len = feature.get('end') - feature.get('start');
+  var w = Math.max((rightPx - leftPx) / len, 0.8);
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, seq.split('').map(function (letter, index) {
+    var color = theme.palette.bases[letter.toUpperCase()];
+    var x = reverse ? rightPx - (index + 1) * w : leftPx + index * w;
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
+      key: index
+    }, /*#__PURE__*/_react["default"].createElement("rect", {
+      x: x,
+      y: y,
+      width: w,
+      height: height,
+      fill: color ? color.main : '#aaa',
+      stroke: render ? '#555' : 'none'
+    }), render ? /*#__PURE__*/_react["default"].createElement("text", {
+      x: x + w / 2,
+      y: y + height / 2,
+      dominantBaseline: "middle",
+      textAnchor: "middle",
+      fill: color ? (0, _color.contrastingTextColor)(color.main) : 'black'
+    }, letter) : null);
+  }));
+}
+
+var SequenceSVG = function SequenceSVG(_ref) {
+  var regions = _ref.regions,
+      configTheme = _ref.theme,
+      _ref$features = _ref.features,
+      features = _ref$features === void 0 ? new Map() : _ref$features,
+      showReverse = _ref.showReverse,
+      showForward = _ref.showForward,
+      showTranslation = _ref.showTranslation,
+      bpPerPx = _ref.bpPerPx;
+
+  var _regions = (0, _slicedToArray2["default"])(regions, 1),
+      region = _regions[0];
+
+  var theme = (0, _ui.createJBrowseTheme)(configTheme);
+  var codonTable = (0, _util.generateCodonTable)(_util.defaultCodonTable);
+  var height = 20;
+
+  var _ref2 = (0, _toConsumableArray2["default"])(features.values()),
+      feature = _ref2[0];
+
+  if (!feature) {
+    return null;
+  }
+
+  var seq = feature.get('seq');
+
+  if (!seq) {
+    return null;
+  } // incrementer for the y-position of the current sequence being rendered
+  // (applies to both translation rows and dna rows)
+
+
+  var currY = -20;
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, showTranslation && (region.reversed ? showReverse : showForward) ? [2, 1, 0].map(function (index) {
+    return /*#__PURE__*/_react["default"].createElement(Translation, {
+      key: "translation-".concat(index),
+      seq: seq,
+      y: currY += 20,
+      codonTable: codonTable,
+      frame: index,
+      bpPerPx: bpPerPx,
+      region: region,
+      theme: theme,
+      height: height,
+      reverse: region.reversed
+    });
+  }) : null, showForward ? /*#__PURE__*/_react["default"].createElement(DNA, {
+    height: height,
+    y: currY += 20,
+    feature: feature,
+    region: region,
+    seq: region.reversed ? (0, _util.complement)(seq) : seq,
+    bpPerPx: bpPerPx,
+    theme: theme
+  }) : null, showReverse ? /*#__PURE__*/_react["default"].createElement(DNA, {
+    height: height,
+    y: currY += 20,
+    feature: feature,
+    region: region,
+    seq: region.reversed ? seq : (0, _util.complement)(seq),
+    bpPerPx: bpPerPx,
+    theme: theme
+  }) : null, showTranslation && (region.reversed ? showForward : showReverse) ? [0, -1, -2].map(function (index) {
+    return /*#__PURE__*/_react["default"].createElement(Translation, {
+      key: "rev-translation-".concat(index),
+      seq: seq,
+      y: currY += 20,
+      codonTable: codonTable,
+      frame: index,
+      bpPerPx: bpPerPx,
+      region: region,
+      theme: theme,
+      height: height,
+      reverse: !region.reversed
+    });
+  }) : null);
+};
+
+var Wrapper = function Wrapper(_ref3) {
+  var exportSVG = _ref3.exportSVG,
+      width = _ref3.width,
+      totalHeight = _ref3.totalHeight,
+      children = _ref3.children;
+  return exportSVG ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children) : /*#__PURE__*/_react["default"].createElement("svg", {
+    "data-testid": "sequence_track",
+    width: width,
+    height: totalHeight,
+    style: {
+      width: width,
+      height: totalHeight
+    }
+  }, children);
+};
+
+function Sequence(props) {
+  var regions = props.regions,
+      bpPerPx = props.bpPerPx;
+
+  var _regions2 = (0, _slicedToArray2["default"])(regions, 1),
+      region = _regions2[0];
+
+  var width = (region.end - region.start) / bpPerPx;
+  var totalHeight = 200;
+  return /*#__PURE__*/_react["default"].createElement(Wrapper, (0, _extends2["default"])({}, props, {
+    totalHeight: totalHeight,
+    width: width
+  }), /*#__PURE__*/_react["default"].createElement(SequenceSVG, props));
+}
+
+var _default = (0, _mobxReact.observer)(Sequence);
+
+exports["default"] = _default;