@jbrowse/core 2.0.1 → 2.1.0

package/util/layouts/GranularRectLayout.js

@@ -1,26 +1,5 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
+Object.defineProperty(exports, "__esModule", { value: true });
 /**
  * Rectangle-layout manager that lays out rectangles using bitmaps at
  * resolution that, for efficiency, may be somewhat lower than that of
@@ -29,573 +8,427 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
  * bitmap resolution.
  */
 // minimum excess size of the array at which we garbage collect
-var minSizeToBotherWith = 10000;
-var maxFeaturePitchWidth = 20000;
-
+const minSizeToBotherWith = 10000;
+const maxFeaturePitchWidth = 20000;
 function segmentsIntersect(x1, x2, y1, y2) {
-  return x2 >= y1 && y2 >= x1;
+    return x2 >= y1 && y2 >= x1;
 }
-
 // a single row in the layout
-var LayoutRow = /*#__PURE__*/function () {
-  function LayoutRow() {
-    (0, _classCallCheck2.default)(this, LayoutRow);
-    (0, _defineProperty2.default)(this, "padding", void 0);
-    (0, _defineProperty2.default)(this, "allFilled", void 0);
-    (0, _defineProperty2.default)(this, "widthLimit", void 0);
-    (0, _defineProperty2.default)(this, "rowState", void 0);
-    this.padding = 1;
-    this.widthLimit = 1000000; // this.rowState.offset is the offset of the bits array relative to the genomic coordinates
-    //      (modified by pitchX, but we don't know that in this class)
-    // this.rowState.bits is the array of items in the layout row, indexed by (x - this.offset)
-    // this.rowState.min is the leftmost edge of all the rectangles we have in the layout
-    // this.rowState.max is the rightmost edge of all the rectangles we have in the layout
-  } // log(msg: string): void {
-  //   // if (this.rowNumber === 0)
-  //   // eslint-disable-next-line no-console
-  //   console.log(`r${this.rowNumber}: ${msg}`)
-  // }
-
-
-  (0, _createClass2.default)(LayoutRow, [{
-    key: "setAllFilled",
-    value: function setAllFilled(data) {
-      this.allFilled = data;
+class LayoutRow {
+    constructor() {
+        this.padding = 1;
+        this.widthLimit = 1000000;
+        // this.rowState.offset is the offset of the bits array relative to the genomic coordinates
+        //      (modified by pitchX, but we don't know that in this class)
+        // this.rowState.bits is the array of items in the layout row, indexed by (x - this.offset)
+        // this.rowState.min is the leftmost edge of all the rectangles we have in the layout
+        // this.rowState.max is the rightmost edge of all the rectangles we have in the layout
     }
-  }, {
-    key: "getItemAt",
-    value: function getItemAt(x) {
-      if (this.allFilled) {
-        return this.allFilled;
-      }
-
-      if (!this.rowState) {
-        return undefined;
-      }
-
-      if (this.rowState.min === undefined) {
-        return undefined;
-      }
-
-      if (x < this.rowState.min) {
-        return undefined;
-      }
-
-      if (x >= this.rowState.max) {
-        return undefined;
-      }
-
-      var offset = x - this.rowState.offset; // if (offset < 0)
-      //     debugger
-      // if (offset >= this.rowState.bits.length)
-      //     debugger
-
-      return this.rowState.bits[offset];
+    // log(msg: string): void {
+    //   // if (this.rowNumber === 0)
+    //   // eslint-disable-next-line no-console
+    //   console.log(`r${this.rowNumber}: ${msg}`)
+    // }
+    setAllFilled(data) {
+        this.allFilled = data;
     }
-  }, {
-    key: "isRangeClear",
-    value: function isRangeClear(left, right) {
-      if (this.allFilled) {
-        return false;
-      }
-
-      if (!this.rowState) {
-        return true;
-      }
-
-      var _this$rowState = this.rowState,
-          min = _this$rowState.min,
-          max = _this$rowState.max;
-
-      if (right <= min || left >= max) {
+    getItemAt(x) {
+        if (this.allFilled) {
+            return this.allFilled;
+        }
+        if (!this.rowState) {
+            return undefined;
+        }
+        if (this.rowState.min === undefined) {
+            return undefined;
+        }
+        if (x < this.rowState.min) {
+            return undefined;
+        }
+        if (x >= this.rowState.max) {
+            return undefined;
+        }
+        const offset = x - this.rowState.offset;
+        // if (offset < 0)
+        //     debugger
+        // if (offset >= this.rowState.bits.length)
+        //     debugger
+        return this.rowState.bits[offset];
+    }
+    isRangeClear(left, right) {
+        if (this.allFilled) {
+            return false;
+        }
+        if (!this.rowState) {
+            return true;
+        }
+        const { min, max } = this.rowState;
+        if (right <= min || left >= max) {
+            return true;
+        }
+        // TODO: check right and middle before looping
+        const maxX = Math.min(max, right);
+        let x = Math.max(min, left);
+        for (; x < right && x < maxX; x += 1) {
+            if (this.getItemAt(x)) {
+                return false;
+            }
+        }
         return true;
-      } // TODO: check right and middle before looping
-
-
-      var maxX = Math.min(max, right);
-      var x = Math.max(min, left);
-
-      for (; x < right && x < maxX; x += 1) {
-        if (this.getItemAt(x)) {
-          return false;
-        }
-      }
-
-      return true;
     }
-  }, {
-    key: "initialize",
-    value: function initialize(left, right) {
-      // NOTE: this.rowState.min, this.rowState.max, and this.rowState.offset are interbase coordinates
-      var rectWidth = right - left;
-      return {
-        offset: left - rectWidth,
-        min: left,
-        max: right,
-        bits: new Array(3 * rectWidth)
-      }; // this.log(`initialize ${this.rowState.min} - ${this.rowState.max} (${this.rowState.bits.length})`)
+    initialize(left, right) {
+        // NOTE: this.rowState.min, this.rowState.max, and this.rowState.offset are interbase coordinates
+        const rectWidth = right - left;
+        return {
+            offset: left - rectWidth,
+            min: left,
+            max: right,
+            bits: new Array(3 * rectWidth),
+        };
+        // this.log(`initialize ${this.rowState.min} - ${this.rowState.max} (${this.rowState.bits.length})`)
     }
-  }, {
-    key: "addRect",
-    value: function addRect(rect, data) {
-      var left = rect.l;
-      var right = rect.r + this.padding; // only padding on the right
-
-      if (!this.rowState) {
-        this.rowState = this.initialize(left, right);
-      } // or check if we need to expand to the left and/or to the right
-
-
-      var oLeft = left - this.rowState.offset;
-      var oRight = right - this.rowState.offset;
-      var currLength = this.rowState.bits.length; // expand rightward if necessary
-
-      if (oRight >= this.rowState.bits.length) {
-        var additionalLength = oRight + 1;
-
-        if (this.rowState.bits.length + additionalLength > this.widthLimit) {
-          console.warn('Layout width limit exceeded, discarding old layout. Please be more careful about discarding unused blocks.');
-          this.rowState = this.initialize(left, right);
-        } else if (additionalLength > 0) {
-          this.rowState.bits = this.rowState.bits.concat(new Array(additionalLength));
-        }
-      } // expand leftward if necessary
-
-
-      if (left < this.rowState.offset) {
-        // use math.min to avoid negative lengths
-        var _additionalLength = Math.min(currLength - oLeft, this.rowState.offset);
-
-        if (this.rowState.bits.length + _additionalLength > this.widthLimit) {
-          console.warn('Layout width limit exceeded, discarding old layout. Please be more careful about discarding unused blocks.');
-          this.rowState = this.initialize(left, right);
-        } else {
-          this.rowState.bits = new Array(_additionalLength).concat(this.rowState.bits);
-          this.rowState.offset -= _additionalLength;
-        }
-      }
-
-      oRight = right - this.rowState.offset;
-      oLeft = left - this.rowState.offset;
-      var w = oRight - oLeft;
-
-      if (w > maxFeaturePitchWidth) {
-        console.warn("Layout X pitch set too low, feature spans ".concat(w, " bits in a single row."), rect, data);
-      }
-
-      for (var x = oLeft; x < oRight; x += 1) {
-        this.rowState.bits[x] = data;
-      }
-
-      if (left < this.rowState.min) {
-        this.rowState.min = left;
-      }
-
-      if (right > this.rowState.max) {
-        this.rowState.max = right;
-      }
+    addRect(rect, data) {
+        const left = rect.l;
+        const right = rect.r + this.padding; // only padding on the right
+        if (!this.rowState) {
+            this.rowState = this.initialize(left, right);
+        }
+        // or check if we need to expand to the left and/or to the right
+        let oLeft = left - this.rowState.offset;
+        let oRight = right - this.rowState.offset;
+        const currLength = this.rowState.bits.length;
+        // expand rightward if necessary
+        if (oRight >= this.rowState.bits.length) {
+            const additionalLength = oRight + 1;
+            if (this.rowState.bits.length + additionalLength > this.widthLimit) {
+                console.warn('Layout width limit exceeded, discarding old layout. Please be more careful about discarding unused blocks.');
+                this.rowState = this.initialize(left, right);
+            }
+            else if (additionalLength > 0) {
+                this.rowState.bits = this.rowState.bits.concat(new Array(additionalLength));
+            }
+        }
+        // expand leftward if necessary
+        if (left < this.rowState.offset) {
+            // use math.min to avoid negative lengths
+            const additionalLength = Math.min(currLength - oLeft, this.rowState.offset);
+            if (this.rowState.bits.length + additionalLength > this.widthLimit) {
+                console.warn('Layout width limit exceeded, discarding old layout. Please be more careful about discarding unused blocks.');
+                this.rowState = this.initialize(left, right);
+            }
+            else {
+                this.rowState.bits = new Array(additionalLength).concat(this.rowState.bits);
+                this.rowState.offset -= additionalLength;
+            }
+        }
+        oRight = right - this.rowState.offset;
+        oLeft = left - this.rowState.offset;
+        const w = oRight - oLeft;
+        if (w > maxFeaturePitchWidth) {
+            console.warn(`Layout X pitch set too low, feature spans ${w} bits in a single row.`, rect, data);
+        }
+        for (let x = oLeft; x < oRight; x += 1) {
+            this.rowState.bits[x] = data;
+        }
+        if (left < this.rowState.min) {
+            this.rowState.min = left;
+        }
+        if (right > this.rowState.max) {
+            this.rowState.max = right;
+        }
     }
     /**
      *  Given a range of interbase coordinates, deletes all data dealing with that range
      */
-
-  }, {
-    key: "discardRange",
-    value: function discardRange(left, right) {
-      if (this.allFilled) {
-        return;
-      } // allFilled is irrevocable currently
-      // if we have no data, do nothing
-
-
-      if (!this.rowState) {
-        return;
-      } // if doesn't overlap at all, do nothing
-
-
-      if (right <= this.rowState.min || left >= this.rowState.max) {
-        return;
-      } // if completely encloses range, discard everything
-
-
-      if (left <= this.rowState.min && right >= this.rowState.max) {
-        this.rowState = undefined;
-        return;
-      } // if overlaps left edge, adjust the min
-
-
-      if (right > this.rowState.min && left <= this.rowState.min) {
-        this.rowState.min = right;
-      } // if overlaps right edge, adjust the max
-
-
-      if (left < this.rowState.max && right >= this.rowState.max) {
-        this.rowState.max = left;
-      } // now trim the left, right, or both sides of the array
-
-
-      if (this.rowState.offset < this.rowState.min - minSizeToBotherWith && this.rowState.bits.length > this.rowState.max + minSizeToBotherWith - this.rowState.offset) {
-        // trim both sides
-        var leftTrimAmount = this.rowState.min - this.rowState.offset;
-        var rightTrimAmount = this.rowState.bits.length - 1 - (this.rowState.max - this.rowState.offset); // if (rightTrimAmount <= 0) debugger
-        // if (leftTrimAmount <= 0) debugger
-        // this.log(`trim both sides, ${leftTrimAmount} from left, ${rightTrimAmount} from right`)
-
-        this.rowState.bits = this.rowState.bits.slice(leftTrimAmount, this.rowState.bits.length - rightTrimAmount);
-        this.rowState.offset += leftTrimAmount; // if (this.rowState.offset > this.rowState.min) debugger
-        // if (this.rowState.bits.length <= this.rowState.max - this.rowState.offset) debugger
-      } else if (this.rowState.offset < this.rowState.min - minSizeToBotherWith) {
-        // trim left side
-        var desiredOffset = this.rowState.min - Math.floor(minSizeToBotherWith / 2);
-        var trimAmount = desiredOffset - this.rowState.offset; // this.log(`trim left side by ${trimAmount}`)
-
-        this.rowState.bits.splice(0, trimAmount);
-        this.rowState.offset += trimAmount; // if (this.rowState.offset > this.rowState.min) debugger
-        // if (this.rowState.bits.length <= this.rowState.max - this.rowState.offset) debugger
-      } else if (this.rowState.bits.length > this.rowState.max - this.rowState.offset + minSizeToBotherWith) {
-        // trim right side
-        var desiredLength = this.rowState.max - this.rowState.offset + 1 + Math.floor(minSizeToBotherWith / 2); // this.log(`trim right side by ${this.rowState.bits.length-desiredLength}`)
-        // if (desiredLength > this.rowState.bits.length) debugger
-
-        this.rowState.bits.length = desiredLength; // if (this.rowState.offset > this.rowState.min) debugger
+    discardRange(left, right) {
+        if (this.allFilled) {
+            return;
+        } // allFilled is irrevocable currently
+        // if we have no data, do nothing
+        if (!this.rowState) {
+            return;
+        }
+        // if doesn't overlap at all, do nothing
+        if (right <= this.rowState.min || left >= this.rowState.max) {
+            return;
+        }
+        // if completely encloses range, discard everything
+        if (left <= this.rowState.min && right >= this.rowState.max) {
+            this.rowState = undefined;
+            return;
+        }
+        // if overlaps left edge, adjust the min
+        if (right > this.rowState.min && left <= this.rowState.min) {
+            this.rowState.min = right;
+        }
+        // if overlaps right edge, adjust the max
+        if (left < this.rowState.max && right >= this.rowState.max) {
+            this.rowState.max = left;
+        }
+        // now trim the left, right, or both sides of the array
+        if (this.rowState.offset < this.rowState.min - minSizeToBotherWith &&
+            this.rowState.bits.length >
+                this.rowState.max + minSizeToBotherWith - this.rowState.offset) {
+            // trim both sides
+            const leftTrimAmount = this.rowState.min - this.rowState.offset;
+            const rightTrimAmount = this.rowState.bits.length -
+                1 -
+                (this.rowState.max - this.rowState.offset);
+            // if (rightTrimAmount <= 0) debugger
+            // if (leftTrimAmount <= 0) debugger
+            // this.log(`trim both sides, ${leftTrimAmount} from left, ${rightTrimAmount} from right`)
+            this.rowState.bits = this.rowState.bits.slice(leftTrimAmount, this.rowState.bits.length - rightTrimAmount);
+            this.rowState.offset += leftTrimAmount;
+            // if (this.rowState.offset > this.rowState.min) debugger
+            // if (this.rowState.bits.length <= this.rowState.max - this.rowState.offset) debugger
+        }
+        else if (this.rowState.offset < this.rowState.min - minSizeToBotherWith) {
+            // trim left side
+            const desiredOffset = this.rowState.min - Math.floor(minSizeToBotherWith / 2);
+            const trimAmount = desiredOffset - this.rowState.offset;
+            // this.log(`trim left side by ${trimAmount}`)
+            this.rowState.bits.splice(0, trimAmount);
+            this.rowState.offset += trimAmount;
+            // if (this.rowState.offset > this.rowState.min) debugger
+            // if (this.rowState.bits.length <= this.rowState.max - this.rowState.offset) debugger
+        }
+        else if (this.rowState.bits.length >
+            this.rowState.max - this.rowState.offset + minSizeToBotherWith) {
+            // trim right side
+            const desiredLength = this.rowState.max -
+                this.rowState.offset +
+                1 +
+                Math.floor(minSizeToBotherWith / 2);
+            // this.log(`trim right side by ${this.rowState.bits.length-desiredLength}`)
+            // if (desiredLength > this.rowState.bits.length) debugger
+            this.rowState.bits.length = desiredLength;
+            // if (this.rowState.offset > this.rowState.min) debugger
+            // if (this.rowState.bits.length <= this.rowState.max - this.rowState.offset) debugger
+        }
+        // if (this.rowState.offset > this.rowState.min) debugger
         // if (this.rowState.bits.length <= this.rowState.max - this.rowState.offset) debugger
-      } // if (this.rowState.offset > this.rowState.min) debugger
-      // if (this.rowState.bits.length <= this.rowState.max - this.rowState.offset) debugger
-      // if range now enclosed in the new bounds, loop through and clear the bits
-
-
-      var oLeft = Math.max(this.rowState.min, left) - this.rowState.offset; // if (oLeft < 0) debugger
-      // if (oLeft >= this.rowState.bits.length) debugger
-      // if (oRight < 0) debugger
-      // if (oRight >= this.rowState.bits.length) debugger
-
-      var oRight = Math.min(right, this.rowState.max) - this.rowState.offset;
-
-      for (var x = oLeft; x >= 0 && x < oRight; x += 1) {
-        this.rowState.bits[x] = undefined;
-      }
+        // if range now enclosed in the new bounds, loop through and clear the bits
+        const oLeft = Math.max(this.rowState.min, left) - this.rowState.offset;
+        // if (oLeft < 0) debugger
+        // if (oLeft >= this.rowState.bits.length) debugger
+        // if (oRight < 0) debugger
+        // if (oRight >= this.rowState.bits.length) debugger
+        const oRight = Math.min(right, this.rowState.max) - this.rowState.offset;
+        for (let x = oLeft; x >= 0 && x < oRight; x += 1) {
+            this.rowState.bits[x] = undefined;
+        }
     }
-  }]);
-  return LayoutRow;
-}();
-
-var GranularRectLayout = /*#__PURE__*/function () {
-  /*
-   *
-   * pitchX - layout grid pitch in the X direction
-   * pitchY - layout grid pitch in the Y direction
-   * maxHeight - maximum layout height, default Infinity (no max)
-   */
-  function GranularRectLayout() {
-    var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-        _ref$pitchX = _ref.pitchX,
-        pitchX = _ref$pitchX === void 0 ? 10 : _ref$pitchX,
-        _ref$pitchY = _ref.pitchY,
-        pitchY = _ref$pitchY === void 0 ? 10 : _ref$pitchY,
-        _ref$maxHeight = _ref.maxHeight,
-        maxHeight = _ref$maxHeight === void 0 ? 10000 : _ref$maxHeight,
-        _ref$hardRowLimit = _ref.hardRowLimit,
-        hardRowLimit = _ref$hardRowLimit === void 0 ? 10000 : _ref$hardRowLimit,
-        _ref$displayMode = _ref.displayMode,
-        displayMode = _ref$displayMode === void 0 ? 'normal' : _ref$displayMode;
-
-    (0, _classCallCheck2.default)(this, GranularRectLayout);
-    (0, _defineProperty2.default)(this, "pitchX", void 0);
-    (0, _defineProperty2.default)(this, "pitchY", void 0);
-    (0, _defineProperty2.default)(this, "hardRowLimit", void 0);
-    (0, _defineProperty2.default)(this, "bitmap", void 0);
-    (0, _defineProperty2.default)(this, "rectangles", void 0);
-    (0, _defineProperty2.default)(this, "maxHeightReached", void 0);
-    (0, _defineProperty2.default)(this, "maxHeight", void 0);
-    (0, _defineProperty2.default)(this, "displayMode", void 0);
-    (0, _defineProperty2.default)(this, "pTotalHeight", void 0);
-    this.pitchX = pitchX;
-    this.pitchY = pitchY;
-    this.hardRowLimit = hardRowLimit;
-    this.maxHeightReached = false;
-    this.displayMode = displayMode; // reduce the pitchY to try and pack the features tighter
-
-    if (this.displayMode === 'compact') {
-      this.pitchY = Math.round(this.pitchY / 4) || 1;
-      this.pitchX = Math.round(this.pitchX / 4) || 1;
+}
+class GranularRectLayout {
+    /*
+     *
+     * pitchX - layout grid pitch in the X direction
+     * pitchY - layout grid pitch in the Y direction
+     * maxHeight - maximum layout height, default Infinity (no max)
+     */
+    constructor({ pitchX = 10, pitchY = 10, maxHeight = 10000, hardRowLimit = 10000, displayMode = 'normal', } = {}) {
+        this.pitchX = pitchX;
+        this.pitchY = pitchY;
+        this.hardRowLimit = hardRowLimit;
+        this.maxHeightReached = false;
+        this.displayMode = displayMode;
+        // reduce the pitchY to try and pack the features tighter
+        if (this.displayMode === 'compact') {
+            this.pitchY = Math.round(this.pitchY / 4) || 1;
+            this.pitchX = Math.round(this.pitchX / 4) || 1;
+        }
+        this.bitmap = [];
+        this.rectangles = new Map();
+        this.maxHeight = Math.ceil(maxHeight / this.pitchY);
+        this.pTotalHeight = 0; // total height, in units of bitmap squares (px/pitchY)
     }
-
-    this.bitmap = [];
-    this.rectangles = new Map();
-    this.maxHeight = Math.ceil(maxHeight / this.pitchY);
-    this.pTotalHeight = 0; // total height, in units of bitmap squares (px/pitchY)
-  }
-  /**
-   * @returns top position for the rect, or Null if laying
-   *  out the rect would exceed maxHeight
-   */
-
-
-  (0, _createClass2.default)(GranularRectLayout, [{
-    key: "addRect",
-    value: function addRect(id, left, right, height, data) {
-      // if we have already laid it out, return its layout
-      var storedRec = this.rectangles.get(id);
-
-      if (storedRec) {
-        if (storedRec.top === null) {
-          return null;
-        } // add it to the bitmap again, since that bitmap range may have been
-        // discarded
-
-
-        this.addRectToBitmap(storedRec);
-        return storedRec.top * this.pitchY;
-      }
-
-      var pLeft = Math.floor(left / this.pitchX);
-      var pRight = Math.floor(right / this.pitchX);
-      var pHeight = Math.ceil(height / this.pitchY);
-      var rectangle = {
-        id: id,
-        l: pLeft,
-        r: pRight,
-        top: null,
-        h: pHeight,
-        originalHeight: height,
-        data: data
-      };
-      var maxTop = this.maxHeight - pHeight;
-      var top = 0;
-
-      if (this.displayMode !== 'collapse') {
-        for (; top <= maxTop; top += 1) {
-          if (!this.collides(rectangle, top)) {
-            break;
-          }
-        }
-
-        if (top > maxTop) {
-          rectangle.top = null;
-          this.rectangles.set(id, rectangle);
-          this.maxHeightReached = true;
-          return null;
-        }
-      }
-
-      rectangle.top = top;
-      this.addRectToBitmap(rectangle);
-      this.rectangles.set(id, rectangle);
-      this.pTotalHeight = Math.max(this.pTotalHeight || 0, top + pHeight);
-      return top * this.pitchY;
+    /**
+     * @returns top position for the rect, or Null if laying
+     *  out the rect would exceed maxHeight
+     */
+    addRect(id, left, right, height, data) {
+        // if we have already laid it out, return its layout
+        const storedRec = this.rectangles.get(id);
+        if (storedRec) {
+            if (storedRec.top === null) {
+                return null;
+            }
+            // add it to the bitmap again, since that bitmap range may have been
+            // discarded
+            this.addRectToBitmap(storedRec);
+            return storedRec.top * this.pitchY;
+        }
+        const pLeft = Math.floor(left / this.pitchX);
+        const pRight = Math.floor(right / this.pitchX);
+        const pHeight = Math.ceil(height / this.pitchY);
+        const rectangle = {
+            id,
+            l: pLeft,
+            r: pRight,
+            top: null,
+            h: pHeight,
+            originalHeight: height,
+            data,
+        };
+        const maxTop = this.maxHeight - pHeight;
+        let top = 0;
+        if (this.displayMode !== 'collapse') {
+            for (; top <= maxTop; top += 1) {
+                if (!this.collides(rectangle, top)) {
+                    break;
+                }
+            }
+            if (top > maxTop) {
+                rectangle.top = null;
+                this.rectangles.set(id, rectangle);
+                this.maxHeightReached = true;
+                return null;
+            }
+        }
+        rectangle.top = top;
+        this.addRectToBitmap(rectangle);
+        this.rectangles.set(id, rectangle);
+        this.pTotalHeight = Math.max(this.pTotalHeight || 0, top + pHeight);
+        return top * this.pitchY;
     }
-  }, {
-    key: "collides",
-    value: function collides(rect, top) {
-      var bitmap = this.bitmap;
-      var maxY = top + rect.h;
-
-      for (var y = top; y < maxY; y += 1) {
-        var row = bitmap[y];
-
-        if (row && !row.isRangeClear(rect.l, rect.r)) {
-          return true;
-        }
-      }
-
-      return false;
+    collides(rect, top) {
+        const { bitmap } = this;
+        const maxY = top + rect.h;
+        for (let y = top; y < maxY; y += 1) {
+            const row = bitmap[y];
+            if (row && !row.isRangeClear(rect.l, rect.r)) {
+                return true;
+            }
+        }
+        return false;
     }
     /**
      * make a subarray if it does not exist
      */
-
-  }, {
-    key: "autovivifyRow",
-    value: function autovivifyRow(bitmap, y) {
-      var row = bitmap[y];
-
-      if (!row) {
-        if (y > this.hardRowLimit) {
-          throw new Error("layout hard limit (".concat(this.hardRowLimit * this.pitchY, "px) exceeded, aborting layout"));
-        }
-
-        row = new LayoutRow();
-        bitmap[y] = row;
-      }
-
-      return row;
+    autovivifyRow(bitmap, y) {
+        let row = bitmap[y];
+        if (!row) {
+            if (y > this.hardRowLimit) {
+                throw new Error(`layout hard limit (${this.hardRowLimit * this.pitchY}px) exceeded, aborting layout`);
+            }
+            row = new LayoutRow();
+            bitmap[y] = row;
+        }
+        return row;
     }
-  }, {
-    key: "addRectToBitmap",
-    value: function addRectToBitmap(rect) {
-      if (rect.top === null) {
-        return;
-      }
-
-      var data = rect.id;
-      var yEnd = rect.top + rect.h;
-
-      if (rect.r - rect.l > maxFeaturePitchWidth) {
-        // the rect is very big in relation to the view size, just pretend, for
-        // the purposes of layout, that it extends infinitely.  this will cause
-        // weird layout if a user scrolls manually for a very, very long time
-        // along the genome at the same zoom level.  but most users will not do
-        // that.  hopefully.
-        for (var y = rect.top; y < yEnd; y += 1) {
-          this.autovivifyRow(this.bitmap, y).setAllFilled(data);
-        }
-      } else {
-        for (var _y = rect.top; _y < yEnd; _y += 1) {
-          this.autovivifyRow(this.bitmap, _y).addRect(rect, data);
-        }
-      }
+    addRectToBitmap(rect) {
+        if (rect.top === null) {
+            return;
+        }
+        const data = rect.id;
+        const yEnd = rect.top + rect.h;
+        if (rect.r - rect.l > maxFeaturePitchWidth) {
+            // the rect is very big in relation to the view size, just pretend, for
+            // the purposes of layout, that it extends infinitely.  this will cause
+            // weird layout if a user scrolls manually for a very, very long time
+            // along the genome at the same zoom level.  but most users will not do
+            // that.  hopefully.
+            for (let y = rect.top; y < yEnd; y += 1) {
+                this.autovivifyRow(this.bitmap, y).setAllFilled(data);
+            }
+        }
+        else {
+            for (let y = rect.top; y < yEnd; y += 1) {
+                this.autovivifyRow(this.bitmap, y).addRect(rect, data);
+            }
+        }
     }
     /**
      *  Given a range of X coordinates, deletes all data dealing with
      *  the features.
      */
-
-  }, {
-    key: "discardRange",
-    value: function discardRange(left, right) {
-      // console.log( 'discard', left, right );
-      var pLeft = Math.floor(left / this.pitchX);
-      var pRight = Math.floor(right / this.pitchX);
-      var bitmap = this.bitmap;
-
-      for (var y = 0; y < bitmap.length; y += 1) {
-        var row = bitmap[y];
-
-        if (row) {
-          row.discardRange(pLeft, pRight);
-        }
-      }
+    discardRange(left, right) {
+        // console.log( 'discard', left, right );
+        const pLeft = Math.floor(left / this.pitchX);
+        const pRight = Math.floor(right / this.pitchX);
+        const { bitmap } = this;
+        for (let y = 0; y < bitmap.length; y += 1) {
+            const row = bitmap[y];
+            if (row) {
+                row.discardRange(pLeft, pRight);
+            }
+        }
     }
-  }, {
-    key: "hasSeen",
-    value: function hasSeen(id) {
-      return this.rectangles.has(id);
+    hasSeen(id) {
+        return this.rectangles.has(id);
     }
-  }, {
-    key: "getByCoord",
-    value: function getByCoord(x, y) {
-      var pY = Math.floor(y / this.pitchY);
-      var row = this.bitmap[pY];
-
-      if (!row) {
-        return undefined;
-      }
-
-      var pX = Math.floor(x / this.pitchX);
-      return row.getItemAt(pX);
+    getByCoord(x, y) {
+        const pY = Math.floor(y / this.pitchY);
+        const row = this.bitmap[pY];
+        if (!row) {
+            return undefined;
+        }
+        const pX = Math.floor(x / this.pitchX);
+        return row.getItemAt(pX);
     }
-  }, {
-    key: "getByID",
-    value: function getByID(id) {
-      var r = this.rectangles.get(id);
-
-      if (r) {
-        var t = r.top * this.pitchY;
-        return [r.l * this.pitchX, t, r.r * this.pitchX, t + r.originalHeight];
-      }
-
-      return undefined;
+    getByID(id) {
+        const r = this.rectangles.get(id);
+        if (r) {
+            const t = r.top * this.pitchY;
+            return [r.l * this.pitchX, t, r.r * this.pitchX, t + r.originalHeight];
+        }
+        return undefined;
     }
-  }, {
-    key: "getDataByID",
-    value: function getDataByID(id) {
-      var _this$rectangles$get;
-
-      return (_this$rectangles$get = this.rectangles.get(id)) === null || _this$rectangles$get === void 0 ? void 0 : _this$rectangles$get.data;
+    getDataByID(id) {
+        var _a;
+        return (_a = this.rectangles.get(id)) === null || _a === void 0 ? void 0 : _a.data;
     }
-  }, {
-    key: "cleanup",
-    value: function cleanup() {}
-  }, {
-    key: "getTotalHeight",
-    value: function getTotalHeight() {
-      return this.pTotalHeight * this.pitchY;
+    cleanup() { }
+    getTotalHeight() {
+        return this.pTotalHeight * this.pitchY;
     }
-  }, {
-    key: "totalHeight",
-    get: function get() {
-      return this.getTotalHeight();
+    get totalHeight() {
+        return this.getTotalHeight();
     }
-  }, {
-    key: "getRectangles",
-    value: function getRectangles() {
-      var _this = this;
-
-      return new Map(Array.from(this.rectangles.entries()).map(function (_ref2) {
-        var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
-            id = _ref3[0],
-            rect = _ref3[1];
-
-        var l = rect.l,
-            r = rect.r,
-            originalHeight = rect.originalHeight,
-            top = rect.top;
-        var t = (top || 0) * _this.pitchY;
-        var b = t + originalHeight;
-        return [id, [l * _this.pitchX, t, r * _this.pitchX, b]]; // left, top, right, bottom
-      }));
+    getRectangles() {
+        return new Map(Array.from(this.rectangles.entries()).map(([id, rect]) => {
+            const { l, r, originalHeight, top } = rect;
+            const t = (top || 0) * this.pitchY;
+            const b = t + originalHeight;
+            return [id, [l * this.pitchX, t, r * this.pitchX, b]]; // left, top, right, bottom
+        }));
     }
-  }, {
-    key: "serializeRegion",
-    value: function serializeRegion(region) {
-      var regionRectangles = {};
-      var maxHeightReached = false;
-
-      var _iterator = _createForOfIteratorHelper(this.rectangles.entries()),
-          _step;
-
-      try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var _step$value = (0, _slicedToArray2.default)(_step.value, 2),
-              id = _step$value[0],
-              rect = _step$value[1];
-
-          var l = rect.l,
-              r = rect.r,
-              originalHeight = rect.originalHeight,
-              top = rect.top;
-
-          if (rect.top === null) {
-            maxHeightReached = true;
-          } else {
-            var t = (top || 0) * this.pitchY;
-            var b = t + originalHeight;
-            var y1 = l * this.pitchX;
-            var y2 = r * this.pitchX;
-            var x1 = region.start;
-            var x2 = region.end; // add +/- pitchX to avoid resolution causing errors
-
-            if (segmentsIntersect(x1, x2, y1 - this.pitchX, y2 + this.pitchX)) {
-              regionRectangles[id] = [y1, t, y2, b];
+    serializeRegion(region) {
+        const regionRectangles = {};
+        let maxHeightReached = false;
+        for (const [id, rect] of this.rectangles.entries()) {
+            const { l, r, originalHeight, top } = rect;
+            if (rect.top === null) {
+                maxHeightReached = true;
+            }
+            else {
+                const t = (top || 0) * this.pitchY;
+                const b = t + originalHeight;
+                const y1 = l * this.pitchX;
+                const y2 = r * this.pitchX;
+                const x1 = region.start;
+                const x2 = region.end;
+                // add +/- pitchX to avoid resolution causing errors
+                if (segmentsIntersect(x1, x2, y1 - this.pitchX, y2 + this.pitchX)) {
+                    regionRectangles[id] = [y1, t, y2, b];
+                }
             }
-          }
-        }
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
-      }
-
-      return {
-        rectangles: regionRectangles,
-        containsNoTransferables: true,
-        totalHeight: this.getTotalHeight(),
-        maxHeightReached: maxHeightReached
-      };
+        }
+        return {
+            rectangles: regionRectangles,
+            containsNoTransferables: true,
+            totalHeight: this.getTotalHeight(),
+            maxHeightReached,
+        };
     }
-  }, {
-    key: "toJSON",
-    value: function toJSON() {
-      var rectangles = Object.fromEntries(this.getRectangles());
-      return {
-        rectangles: rectangles,
-        containsNoTransferables: true,
-        totalHeight: this.getTotalHeight(),
-        maxHeightReached: this.maxHeightReached
-      };
+    toJSON() {
+        const rectangles = Object.fromEntries(this.getRectangles());
+        return {
+            rectangles,
+            containsNoTransferables: true,
+            totalHeight: this.getTotalHeight(),
+            maxHeightReached: this.maxHeightReached,
+        };
     }
-  }]);
-  return GranularRectLayout;
-}();
-
-exports.default = GranularRectLayout;
+}
+exports.default = GranularRectLayout;