"use strict";

exports.__esModule = true;
exports["default"] = exports.AlignmentView = void 0;
var _HorizontalPanelDragHandle = require("./HorizontalPanelDragHandle");
var _dnd = require("@hello-pangea/dnd");
var _clipboard = _interopRequireDefault(require("clipboard"));
var _react = _interopRequireDefault(require("react"));
var _reactRedux = require("react-redux");
var _core = require("@blueprintjs/core");
var _teselagenReactComponents = require("teselagen-react-components");
var _reactEasyState = require("@risingstack/react-easy-state");
var _lodash = require("lodash");
var _sequenceUtils = require("@teselagen/sequence-utils");
var _reactList = _interopRequireDefault(require("@teselagen/react-list"));
var _reactDom = _interopRequireDefault(require("react-dom"));
var _LinearView = require("../LinearView");
var _Minimap = _interopRequireWildcard(require("./Minimap"));
var _recompose = require("recompose");
var _AlignmentVisibilityTool = _interopRequireDefault(require("./AlignmentVisibilityTool"));
var alignmentActions = _interopRequireWildcard(require("../redux/alignments"));
var _estimateRowHeight = _interopRequireDefault(require("../RowView/estimateRowHeight"));
var _prepareRowData = _interopRequireDefault(require("../utils/prepareRowData"));
var _withEditorProps = _interopRequireDefault(require("../withEditorProps"));
require("./style.css");
var _clickAndDragUtils = require("../withEditorInteractions/clickAndDragUtils");
var _reactDraggable = _interopRequireDefault(require("react-draggable"));
var _draggableClassnames = _interopRequireDefault(require("../constants/draggableClassnames"));
var _Caret = _interopRequireDefault(require("../RowItem/Caret"));
var _massageTickSpacing = require("../utils/massageTickSpacing");
var _editorUtils = require("../utils/editorUtils");
var _UncontrolledSliderWithPlusMinusBtns = _interopRequireDefault(require("../helperComponents/UncontrolledSliderWithPlusMinusBtns"));
var _updateLabelsForInViewFeatures = require("../utils/updateLabelsForInViewFeatures");
var _PinchHelper = _interopRequireDefault(require("../helperComponents/PinchHelper/PinchHelper"));
var _GlobalDialogUtils = require("../GlobalDialogUtils");
var _GlobalDialog = require("../GlobalDialog");
var _array_move = require("../ToolBar/array_move");
var _classnames = _interopRequireDefault(require("classnames"));
var _getTrackFromEvent = require("./getTrackFromEvent");
var _PerformantSelectionLayer = require("./PerformantSelectionLayer");
var _PairwiseAlignmentView = require("./PairwiseAlignmentView");
var _updateTrackHelper = require("./updateTrackHelper");
var _isTargetWithinEl = require("./isTargetWithinEl");
var _EditTrackNameDialog = require("./EditTrackNameDialog");
var _coerceInitialValue = require("./coerceInitialValue");
var _excluded = ["alignmentTrackIndex", "pairwiseAlignments", "currentPairwiseAlignmentIndex", "pairwiseOverviewAlignmentTracks", "alignmentTracks", "upsertAlignmentRun", "alignmentId", "noClickDragHandlers", "handleSelectTrack", "allowTrackRearrange", "isPairwise", "linearViewOptions", "alignmentVisibilityToolOptions", "hasTemplate", "allowTrackNameEdit"],
  _excluded2 = ["easyStore"];
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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return exports; }; var exports = {}, Op = Object.prototype, hasOwn = Op.hasOwnProperty, defineProperty = Object.defineProperty || function (obj, key, desc) { obj[key] = desc.value; }, $Symbol = "function" == typeof Symbol ? Symbol : {}, iteratorSymbol = $Symbol.iterator || "@@iterator", asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; function define(obj, key, value) { return Object.defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }), obj[key]; } try { define({}, ""); } catch (err) { define = function define(obj, key, value) { return obj[key] = value; }; } function wrap(innerFn, outerFn, self, tryLocsList) { var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, generator = Object.create(protoGenerator.prototype), context = new Context(tryLocsList || []); return defineProperty(generator, "_invoke", { value: makeInvokeMethod(innerFn, self, context) }), generator; } function tryCatch(fn, obj, arg) { try { return { type: "normal", arg: fn.call(obj, arg) }; } catch (err) { return { type: "throw", arg: err }; } } exports.wrap = wrap; var ContinueSentinel = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var IteratorPrototype = {}; define(IteratorPrototype, iteratorSymbol, function () { return this; }); var getProto = Object.getPrototypeOf, NativeIteratorPrototype = getProto && getProto(getProto(values([]))); NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype); function defineIteratorMethods(prototype) { ["next", "throw", "return"].forEach(function (method) { define(prototype, method, function (arg) { return this._invoke(method, arg); }); }); } function AsyncIterator(generator, PromiseImpl) { function invoke(method, arg, resolve, reject) { var record = tryCatch(generator[method], generator, arg); if ("throw" !== record.type) { var result = record.arg, value = result.value; return value && "object" == typeof value && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { invoke("next", value, resolve, reject); }, function (err) { invoke("throw", err, resolve, reject); }) : PromiseImpl.resolve(value).then(function (unwrapped) { result.value = unwrapped, resolve(result); }, function (error) { return invoke("throw", error, resolve, reject); }); } reject(record.arg); } var previousPromise; defineProperty(this, "_invoke", { value: function value(method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(innerFn, self, context) { var state = "suspendedStart"; return function (method, arg) { if ("executing" === state) throw new Error("Generator is already running"); if ("completed" === state) { if ("throw" === method) throw arg; return doneResult(); } for (context.method = method, context.arg = arg;;) { var delegate = context.delegate; if (delegate) { var delegateResult = maybeInvokeDelegate(delegate, context); if (delegateResult) { if (delegateResult === ContinueSentinel) continue; return delegateResult; } } if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { if ("suspendedStart" === state) throw state = "completed", context.arg; context.dispatchException(context.arg); } else "return" === context.method && context.abrupt("return", context.arg); state = "executing"; var record = tryCatch(innerFn, self, context); if ("normal" === record.type) { if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; return { value: record.arg, done: context.done }; } "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); } }; } function maybeInvokeDelegate(delegate, context) { var methodName = context.method, method = delegate.iterator[methodName]; if (undefined === method) return context.delegate = null, "throw" === methodName && delegate.iterator["return"] && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method) || "return" !== methodName && (context.method = "throw", context.arg = new TypeError("The iterator does not provide a '" + methodName + "' method")), ContinueSentinel; var record = tryCatch(method, delegate.iterator, context.arg); if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; var info = record.arg; return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); } function pushTryEntry(locs) { var entry = { tryLoc: locs[0] }; 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); } function resetTryEntry(entry) { var record = entry.completion || {}; record.type = "normal", delete record.arg, entry.completion = record; } function Context(tryLocsList) { this.tryEntries = [{ tryLoc: "root" }], tryLocsList.forEach(pushTryEntry, this), this.reset(!0); } function values(iterable) { if (iterable) { var iteratorMethod = iterable[iteratorSymbol]; if (iteratorMethod) return iteratorMethod.call(iterable); if ("function" == typeof iterable.next) return iterable; if (!isNaN(iterable.length)) { var i = -1, next = function next() { for (; ++i < iterable.length;) { if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; } return next.value = undefined, next.done = !0, next; }; return next.next = next; } } return { next: doneResult }; } function doneResult() { return { value: undefined, done: !0 }; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, defineProperty(Gp, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), defineProperty(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { var ctor = "function" == typeof genFun && genFun.constructor; return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); }, exports.mark = function (genFun) { return Object.setPrototypeOf ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = Object.create(Gp), genFun; }, exports.awrap = function (arg) { return { __await: arg }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { return this; }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { void 0 === PromiseImpl && (PromiseImpl = Promise); var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { return result.done ? result.value : iter.next(); }); }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { return this; }), define(Gp, "toString", function () { return "[object Generator]"; }), exports.keys = function (val) { var object = Object(val), keys = []; for (var key in object) { keys.push(key); } return keys.reverse(), function next() { for (; keys.length;) { var key = keys.pop(); if (key in object) return next.value = key, next.done = !1, next; } return next.done = !0, next; }; }, exports.values = values, Context.prototype = { constructor: Context, reset: function reset(skipTempReset) { if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) { "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined); } }, stop: function stop() { this.done = !0; var rootRecord = this.tryEntries[0].completion; if ("throw" === rootRecord.type) throw rootRecord.arg; return this.rval; }, dispatchException: function dispatchException(exception) { if (this.done) throw exception; var context = this; function handle(loc, caught) { return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; } for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i], record = entry.completion; if ("root" === entry.tryLoc) return handle("end"); if (entry.tryLoc <= this.prev) { var hasCatch = hasOwn.call(entry, "catchLoc"), hasFinally = hasOwn.call(entry, "finallyLoc"); if (hasCatch && hasFinally) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } else if (hasCatch) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); } else { if (!hasFinally) throw new Error("try statement without catch or finally"); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } } } }, abrupt: function abrupt(type, arg) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { var finallyEntry = entry; break; } } finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); var record = finallyEntry ? finallyEntry.completion : {}; return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); }, complete: function complete(record, afterLoc) { if ("throw" === record.type) throw record.arg; return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; }, finish: function finish(finallyLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; } }, "catch": function _catch(tryLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc === tryLoc) { var record = entry.completion; if ("throw" === record.type) { var thrown = record.arg; resetTryEntry(entry); } return thrown; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(iterable, resultName, nextLoc) { return this.delegate = { iterator: values(iterable), resultName: resultName, nextLoc: nextLoc }, "next" === this.method && (this.arg = undefined), ContinueSentinel; } }, exports; }
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
var charWidthInLinearViewDefault = 12;
try {
  var newVal = JSON.parse(window.localStorage.getItem("charWidthInLinearViewDefault"));
  if (newVal) charWidthInLinearViewDefault = newVal;
} catch (e) {
  console.error("error setting charWidthInLinearViewDefault from local storage:", e);
}
var AlignmentView = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(AlignmentView, _React$Component);
  function AlignmentView(props) {
    var _this;
    _this = _React$Component.call(this, props) || this;
    _defineProperty(_assertThisInitialized(_this), "bindOutsideChangeHelper", {});
    _defineProperty(_assertThisInitialized(_this), "getMaxLength", function () {
      var alignmentTracks = _this.props.alignmentTracks;
      var _alignmentTracks$ = alignmentTracks[0],
        _alignmentTracks$$seq = _alignmentTracks$.sequenceData,
        sequenceData = _alignmentTracks$$seq === void 0 ? {
          sequence: ""
        } : _alignmentTracks$$seq,
        alignmentData = _alignmentTracks$.alignmentData;
      var data = alignmentData || sequenceData;
      return data.noSequence ? data.size : data.sequence.length;
    });
    _defineProperty(_assertThisInitialized(_this), "handleAlignmentCopy", function (event) {
      if (event.key === "c" && !event.shiftKey && (event.metaKey === true || event.ctrlKey === true)) {
        var input = document.createElement("textarea");
        document.body.appendChild(input);
        var seqDataToCopy = _this.getAllAlignmentsFastaText();
        input.value = seqDataToCopy;
        input.select();
        var copySuccess = document.execCommand("copy");
        if (!copySuccess) {
          window.toastr.error("Selection Not Copied");
        } else {
          window.toastr.success("Selection Copied");
        }
        document.body.removeChild(input);
        event.preventDefault();
      }
    });
    _defineProperty(_assertThisInitialized(_this), "getAllAlignmentsFastaText", function () {
      var selectionLayer = _this.props.store.getState().VectorEditor.__allEditorsOptions.alignments[_this.props.id].selectionLayer || {};
      var alignmentTracks = _this.props.alignmentTracks;
      var seqDataOfAllTracksToCopy = [];
      alignmentTracks.forEach(function (track) {
        var seqDataToCopy = (0, _sequenceUtils.getSequenceDataBetweenRange)(track.alignmentData, selectionLayer).sequence;
        seqDataOfAllTracksToCopy.push(">" + track.alignmentData.name + "\r\n" + seqDataToCopy + "\r\n");
      });
      return seqDataOfAllTracksToCopy.join("");
    });
    _defineProperty(_assertThisInitialized(_this), "state", {
      alignmentName: _this.props.alignmentName,
      isTrackDragging: false,
      charWidthInLinearView: charWidthInLinearViewDefault,
      scrollAlignmentView: false,
      width: 0,
      nameDivWidth: 140
    });
    _defineProperty(_assertThisInitialized(_this), "easyStore", (0, _reactEasyState.store)({
      selectionLayer: {
        start: -1,
        end: -1
      },
      caretPosition: -1,
      percentScrolled: 0,
      viewportWidth: 400,
      verticalVisibleRange: {
        start: 0,
        end: 0
      }
    }));
    _defineProperty(_assertThisInitialized(_this), "getMinCharWidth", function (noNameDiv) {
      var toReturn = Math.min(Math.max(_this.state.width - (noNameDiv ? 0 : _this.state.nameDivWidth) - 5, 1) / _this.getSequenceLength(), 10);
      if (isNaN(toReturn)) return 10;
      return toReturn;
    });
    _defineProperty(_assertThisInitialized(_this), "getSequenceLength", function () {
      var _this$props$alignment = _this.props.alignmentTracks;
      _this$props$alignment = _this$props$alignment === void 0 ? [] : _this$props$alignment;
      var template = _this$props$alignment[0];
      return template.alignmentData.sequence.length || 1;
    });
    _defineProperty(_assertThisInitialized(_this), "annotationClicked", function (_ref) {
      var event = _ref.event,
        annotation = _ref.annotation,
        _ref$gapsBefore = _ref.gapsBefore,
        gapsBefore = _ref$gapsBefore === void 0 ? 0 : _ref$gapsBefore,
        _ref$gapsInside = _ref.gapsInside,
        gapsInside = _ref$gapsInside === void 0 ? 0 : _ref$gapsInside;
      event.preventDefault && event.preventDefault();
      event.stopPropagation && event.stopPropagation();
      _this.updateSelectionOrCaret(event.shiftKey, _extends({}, annotation, {
        start: annotation.start + gapsBefore,
        end: annotation.end + gapsBefore + gapsInside
      }));
    });
    _defineProperty(_assertThisInitialized(_this), "updateSelectionOrCaret", function (shiftHeld, newRangeOrCaret, _temp) {
      var _ref2 = _temp === void 0 ? {} : _temp,
        forceReduxUpdate = _ref2.forceReduxUpdate;
      var sequenceLength = _this.getSequenceLength();
      (0, _clickAndDragUtils.updateSelectionOrCaret)({
        doNotWrapOrigin: true,
        shiftHeld: shiftHeld,
        sequenceLength: sequenceLength,
        newRangeOrCaret: newRangeOrCaret,
        caretPosition: _this.easyStore.caretPosition,
        selectionLayer: _this.easyStore.selectionLayer,
        selectionLayerUpdate: forceReduxUpdate ? _this.forceReduxSelectionLayerUpdate : _this.selectionLayerUpdate,
        caretPositionUpdate: _this.caretPositionUpdate
      });
    });
    _defineProperty(_assertThisInitialized(_this), "caretPositionUpdate", function (position) {
      var _this$props = _this.props,
        _this$props$caretPosi = _this$props.caretPosition,
        caretPosition = _this$props$caretPosi === void 0 ? -1 : _this$props$caretPosi,
        alignmentId = _this$props.alignmentId;
      if (caretPosition === position) {
        return;
      }
      _this.easyStore.caretPosition = position;
      _this.easyStore.selectionLayer = {
        start: -1,
        end: -1
      };
      _this.debouncedAlignmentRunUpdate({
        alignmentId: alignmentId,
        selectionLayer: {
          start: -1,
          end: -1
        },
        caretPosition: position
      });
    });
    _defineProperty(_assertThisInitialized(_this), "debouncedAlignmentRunUpdate", (0, _lodash.debounce)(_this.props.alignmentRunUpdate, 1000));
    _defineProperty(_assertThisInitialized(_this), "forceReduxSelectionLayerUpdate", function (newSelection) {
      _this.selectionLayerUpdate(newSelection, {
        forceReduxUpdate: true
      });
    });
    _defineProperty(_assertThisInitialized(_this), "selectionLayerUpdate", function (newSelection, _temp2) {
      var _ref3 = _temp2 === void 0 ? {} : _temp2,
        forceReduxUpdate = _ref3.forceReduxUpdate;
      var _this$props2 = _this.props,
        _this$props2$selectio = _this$props2.selectionLayer,
        selectionLayer = _this$props2$selectio === void 0 ? {
          start: -1,
          end: -1
        } : _this$props2$selectio,
        alignmentId = _this$props2.alignmentId;
      if (!newSelection) return;
      var start = newSelection.start,
        end = newSelection.end;
      if (selectionLayer.start === start && selectionLayer.end === end) {
        return;
      }
      _this.easyStore.caretPosition = -1;
      _this.easyStore.selectionLayer = newSelection;
      (forceReduxUpdate ? _this.props.alignmentRunUpdate : _this.debouncedAlignmentRunUpdate)({
        alignmentId: alignmentId,
        selectionLayer: newSelection,
        caretPosition: -1
      });
    });
    _defineProperty(_assertThisInitialized(_this), "getCharWidthInLinearView", function () {
      if (_this.props.isFullyZoomedOut) {
        return _this.getMinCharWidth();
      } else {
        return Math.max(_this.getMinCharWidth(), _this.state.charWidthInLinearView);
      }
    });
    _defineProperty(_assertThisInitialized(_this), "getNumBpsShownInLinearView", function () {
      var toReturn = (_this.state.width - _this.state.nameDivWidth) / _this.getCharWidthInLinearView();
      return toReturn || 0;
    });
    _defineProperty(_assertThisInitialized(_this), "setVerticalScrollRange", (0, _lodash.throttle)(function () {
      if (_assertThisInitialized(_this) && _this.InfiniteScroller && _this.InfiniteScroller.getFractionalVisibleRange && _this.easyStore) {
        var _this$InfiniteScrolle = _this.InfiniteScroller.getFractionalVisibleRange(),
          start = _this$InfiniteScrolle[0],
          end = _this$InfiniteScrolle[1];
        if (_this.props.hasTemplate) {
          end = end + 1;
        }
        if (_this.easyStore.verticalVisibleRange.start !== start || _this.easyStore.verticalVisibleRange.end !== end) _this.easyStore.verticalVisibleRange = {
          start: start,
          end: end
        };
      }
    }, 100));
    _defineProperty(_assertThisInitialized(_this), "handleScroll", function () {
      // tnr: maybe add this in at some point
      // this.updateMinimapHighlightForScroll(
      //   this.oldMinimapScrollTracker || this.alignmentHolder.scrollTop,
      //   this.alignmentHolder.scrollTop
      // );
      // this.oldMinimapScrollTracker = this.alignmentHolder.scrollTop;
      // if (this.alignmentHolder.scrollTop !== this.oldMinimapScrollTracker) {
      // }
      if (_this.alignmentHolder.scrollTop !== _this.oldAlignmentHolderScrollTop) {
        setTimeout(function () {
          _this.setVerticalScrollRange();
          _this.oldAlignmentHolderScrollTop = _this.alignmentHolder.scrollTop;
        }, 100);
      }
      if (_this.blockScroll) {
        //we have to block the scroll sometimes when adjusting the minimap so things aren't too jumpy
        return;
      }
      var scrollPercentage = _this.alignmentHolder.scrollLeft / (_this.alignmentHolder.scrollWidth - _this.alignmentHolder.clientWidth);
      _this.easyStore.percentScrolled = scrollPercentage || 0;
      if (!_this.isZooming) {
        _this.easyStore.percentScrolledPreZoom = _this.easyStore.percentScrolled;
      }
      if (_this.alignmentHolderTop) {
        _this.alignmentHolderTop.scrollLeft = _this.alignmentHolder.scrollLeft;
      }
      (0, _updateLabelsForInViewFeatures.updateLabelsForInViewFeatures)({
        rectElement: ".alignmentHolder"
      });
    });
    _defineProperty(_assertThisInitialized(_this), "handleTopScroll", function () {
      _this.alignmentHolder.scrollLeft = _this.alignmentHolderTop.scrollLeft;
    });
    _defineProperty(_assertThisInitialized(_this), "onMinimapSizeAdjust", function (newSliderSize, newPercent) {
      var percentageOfSpace = newSliderSize / _this.state.width;
      var seqLength = _this.getSequenceLength();
      var numBpsInView = seqLength * percentageOfSpace;
      var newCharWidth = (_this.state.width - _this.state.nameDivWidth) / numBpsInView;
      _this.blockScroll = true;
      _this.setCharWidthInLinearView({
        charWidthInLinearView: newCharWidth
      });
      setTimeout(function () {
        _this.scrollAlignmentToPercent(newPercent);
        _this.blockScroll = false;
        (0, _updateLabelsForInViewFeatures.updateLabelsForInViewFeatures)({
          rectElement: ".alignmentHolder"
        });
      });
    });
    _defineProperty(_assertThisInitialized(_this), "setCharWidthInLinearView", function (_ref4) {
      var charWidthInLinearView = _ref4.charWidthInLinearView;
      window.localStorage.setItem("charWidthInLinearViewDefault", charWidthInLinearView);
      _this.setState({
        charWidthInLinearView: charWidthInLinearView
      });
      charWidthInLinearViewDefault = JSON.parse(window.localStorage.getItem("charWidthInLinearViewDefault"));
    });
    _defineProperty(_assertThisInitialized(_this), "scrollToCaret", function () {
      var el = window.document.querySelector(".veCaret:not(.zoomSelection)"); //adding .veRowViewCaret breaks this for some reason
      if (!el) {
        el = window.document.querySelector(".veCaret"); //adding .veRowViewCaret breaks this for some reason
      }

      if (!el) {
        return;
      }
      el.scrollIntoView({
        inline: "center",
        block: "nearest"
      });
    });
    _defineProperty(_assertThisInitialized(_this), "scrollAlignmentToPercent", function (scrollPercentage) {
      var scrollPercentageToUse = Math.min(Math.max(scrollPercentage, 0), 1);
      _this.easyStore.percentScrolled = scrollPercentageToUse;
      _this.alignmentHolder.scrollLeft = scrollPercentageToUse * (_this.alignmentHolder.scrollWidth - _this.alignmentHolder.clientWidth);
      if (_this.alignmentHolderTop) {
        _this.alignmentHolderTop.scrollLeft = scrollPercentageToUse * (_this.alignmentHolderTop.scrollWidth - _this.alignmentHolderTop.clientWidth);
      }
    });
    _defineProperty(_assertThisInitialized(_this), "scrollYToTrack", function (trackIndex) {
      _this.InfiniteScroller.scrollTo(trackIndex);
    });
    _defineProperty(_assertThisInitialized(_this), "estimateRowHeight", function (index, cache) {
      var _this$props3 = _this.props,
        alignmentVisibilityToolOptions = _this$props3.alignmentVisibilityToolOptions,
        alignmentTracks = _this$props3.alignmentTracks;
      var track = alignmentTracks[index];
      if (!track) return 100;
      var sequenceData = track.sequenceData;
      _this.rowData = (0, _prepareRowData["default"])(sequenceData, sequenceData.sequence.length);
      return (0, _estimateRowHeight["default"])({
        index: index,
        cache: cache,
        // clearCache: this.clearCache,
        row: _this.rowData[index],
        annotationVisibility: alignmentVisibilityToolOptions.alignmentAnnotationVisibility,
        annotationLabelVisibility: alignmentVisibilityToolOptions.alignmentAnnotationLabelVisibility
      });
    });
    _defineProperty(_assertThisInitialized(_this), "getMaxLinearViewWidth", function () {
      var maxWidth = 0;
      var charWidthInLinearView = _this.getCharWidthInLinearView();
      (0, _lodash.forEach)(_this.props.alignmentTracks, function (t) {
        var w = (t.alignmentData || t.sequenceData).sequence.length;
        if (w > maxWidth) maxWidth = w;
      });
      return maxWidth * charWidthInLinearView;
    });
    _defineProperty(_assertThisInitialized(_this), "renderItem", function (_i, key, isTemplate, cloneProps) {
      var charWidthInLinearView = _this.getCharWidthInLinearView();
      var _this$props4 = _this.props,
        alignmentTrackIndex = _this$props4.alignmentTrackIndex,
        pairwiseAlignments = _this$props4.pairwiseAlignments,
        currentPairwiseAlignmentIndex = _this$props4.currentPairwiseAlignmentIndex,
        pairwiseOverviewAlignmentTracks = _this$props4.pairwiseOverviewAlignmentTracks,
        _this$props4$alignmen = _this$props4.alignmentTracks,
        alignmentTracks = _this$props4$alignmen === void 0 ? [] : _this$props4$alignmen,
        upsertAlignmentRun = _this$props4.upsertAlignmentRun,
        alignmentId = _this$props4.alignmentId,
        noClickDragHandlers = _this$props4.noClickDragHandlers,
        handleSelectTrack = _this$props4.handleSelectTrack,
        allowTrackRearrange = _this$props4.allowTrackRearrange,
        isPairwise = _this$props4.isPairwise,
        linearViewOptions = _this$props4.linearViewOptions,
        alignmentVisibilityToolOptions = _this$props4.alignmentVisibilityToolOptions,
        hasTemplate = _this$props4.hasTemplate,
        allowTrackNameEdit = _this$props4.allowTrackNameEdit,
        rest = _objectWithoutPropertiesLoose(_this$props4, _excluded);
      var isDragDisabled = !allowTrackRearrange || isPairwise;
      var i;
      if (isTemplate) {
        i = _i;
      } else if (hasTemplate) {
        i = _i + 1;
      } else {
        i = _i;
      }
      var track = alignmentTracks[i];
      if (!track) return null;
      var sequenceData = track.sequenceData,
        alignmentData = track.alignmentData,
        isReversed = track.isReversed,
        wasTrimmed = track.wasTrimmed,
        additionalSelectionLayers = track.additionalSelectionLayers,
        chromatogramData = track.chromatogramData;
      var seqLen = _this.getMaxLength();
      var trimmedRangesToDisplay = (0, _Minimap.getTrimmedRangesToDisplay)({
        seqLen: seqLen,
        trimmedRange: alignmentData === null || alignmentData === void 0 ? void 0 : alignmentData.trimmedRange
      });
      var linearViewWidth = (alignmentData || sequenceData).sequence.length * charWidthInLinearView;
      var name = sequenceData.name || sequenceData.id;

      //tnw: commenting this out for now since it can significantly slow down the alignment visualization
      /**
       * for alignment of sanger seq reads to a ref seq, have translations show up at the bp pos of ref seq's CDS features across all seq reads
       **/
      // let sequenceDataWithRefSeqCdsFeatures;
      // if (this.props.alignmentType === "SANGER SEQUENCING") {
      //   if (i !== 0) {
      //     sequenceDataWithRefSeqCdsFeatures = cloneDeep(sequenceData);
      //     const refSeqCdsFeaturesBpPos = [];
      //     alignmentTracks[0].sequenceData.features.forEach((feature) => {
      //       if (feature.type === "CDS") {
      //         const editedFeature = cloneDeep(feature);
      //         // in seq reads, ref seq's CDS feature translations need to show up at the bp pos of alignment, not the original bp pos
      //         // actual position in the track
      //         const absoluteFeatureStart =
      //           getGaps(feature.start, alignmentTracks[0].alignmentData.sequence)
      //             .gapsBefore + feature.start;
      //         const gapsBeforeSeqRead = getGaps(
      //           0,
      //           alignmentData.sequence
      //         ).gapsBefore;
      //         const bpsFromSeqReadStartToFeatureStartIncludingGaps =
      //           absoluteFeatureStart - gapsBeforeSeqRead;
      //         const absoluteFeatureEnd =
      //           getGaps(feature.end, alignmentTracks[0].alignmentData.sequence)
      //             .gapsBefore + feature.end;
      //         // const gapsBeforeFeatureInSeqRead = getGaps(feature.start - gapsBeforeSeqRead, alignmentData.sequence).gapsBefore
      //         const gapsAfterSeqRead =
      //           alignmentData.sequence.length -
      //           alignmentData.sequence.replace(/-+$/g, "").length;
      //         const seqReadLengthWithoutGapsBeforeAfter =
      //           alignmentData.sequence.length -
      //           gapsBeforeSeqRead -
      //           gapsAfterSeqRead;
      //         const absoluteSeqReadStart = gapsBeforeSeqRead;
      //         const absoluteSeqReadEnd =
      //           absoluteSeqReadStart + seqReadLengthWithoutGapsBeforeAfter;
      //         let featureStartInSeqRead;
      //         if (absoluteFeatureEnd < absoluteSeqReadStart) {
      //           // if the feature ends before the seq read starts, do nothing
      //         } else if (absoluteFeatureStart > absoluteSeqReadEnd) {
      //           // if the feature starts after the seq read ends, do nothing
      //         } else if (
      //           absoluteFeatureStart < absoluteSeqReadStart &&
      //           absoluteFeatureEnd > absoluteSeqReadStart
      //         ) {
      //           // if the feature starts before the seq read starts but doesn't end before the seq read starts
      //           const arrayOfCodonStartPos = [];
      //           for (
      //             let i = absoluteFeatureStart;
      //             i < absoluteSeqReadStart + 6;
      //             i += 3
      //           ) {
      //             arrayOfCodonStartPos.push(i);
      //           }
      //           // want to start translation at the codon start pos closest to seq read start
      //           const absoluteTranslationStartInFrame =
      //             arrayOfCodonStartPos.reduce((prev, curr) =>
      //               Math.abs(curr - absoluteSeqReadStart) <
      //                 Math.abs(prev - absoluteSeqReadStart) &&
      //               curr >= absoluteSeqReadStart
      //                 ? curr
      //                 : prev
      //             );
      //           const seqReadTranslationStartInFrame =
      //             absoluteTranslationStartInFrame - gapsBeforeSeqRead;
      //           editedFeature.start = seqReadTranslationStartInFrame;
      //           const shortenedFeatureLength =
      //             Math.abs(absoluteFeatureEnd - absoluteFeatureStart) -
      //             (absoluteTranslationStartInFrame - absoluteFeatureStart);
      //           editedFeature.end = editedFeature.start + shortenedFeatureLength;
      //           refSeqCdsFeaturesBpPos.push(editedFeature);
      //         } else {
      //           // if the feature is fully contained within the seq read start/end
      //           const seqReadStartToFeatureStartIncludingGaps =
      //             alignmentData.sequence
      //               .replace(/^-+/g, "")
      //               .replace(/-+$/g, "")
      //               .slice(0, bpsFromSeqReadStartToFeatureStartIncludingGaps);
      //           const arrayOfGaps = seqReadStartToFeatureStartIncludingGaps.match(
      //             new RegExp("-", "g")
      //           );
      //           let numOfGapsFromSeqReadStartToFeatureStart = 0;
      //           if (arrayOfGaps !== null) {
      //             numOfGapsFromSeqReadStartToFeatureStart = arrayOfGaps.length;
      //           }
      //           featureStartInSeqRead =
      //             bpsFromSeqReadStartToFeatureStartIncludingGaps -
      //             numOfGapsFromSeqReadStartToFeatureStart;
      //           editedFeature.start = featureStartInSeqRead;
      //           const featureLength = Math.abs(feature.end - feature.start);
      //           editedFeature.end = editedFeature.start + featureLength;
      //           refSeqCdsFeaturesBpPos.push(editedFeature);
      //         }
      //       }
      //     });
      //     // add ref seq's CDS features to seq reads (not the actual sequenceData) to generate translations at those bp pos
      //     if (refSeqCdsFeaturesBpPos.length !== 0) {
      //       sequenceDataWithRefSeqCdsFeatures.features.push(
      //         ...refSeqCdsFeaturesBpPos
      //       );
      //       // use returned aligned sequence rather than original sequence because after bowtie2, may be reverse complement or have soft-clipped ends
      //       sequenceDataWithRefSeqCdsFeatures.sequence =
      //         alignmentData.sequence.replace(/-/g, "");
      //     }
      //   }
      // }
      var tickSpacing = (0, _massageTickSpacing.massageTickSpacing)(Math.ceil(120 / charWidthInLinearView));
      var compactNames = alignmentVisibilityToolOptions.alignmentAnnotationVisibility.compactNames;
      var selectionLayer = [_this.state["tempTrimBefore" + i] || trimmedRangesToDisplay[0], _this.state["tempTrimAfter" + i] || trimmedRangesToDisplay[1]].filter(function (i) {
        return i;
      }).map(function (i) {
        return _extends({}, i, {
          hideCarets: true,
          ignoreGaps: true,
          className: "tg-trimmed-region",
          color: "gray"
        });
      });
      var innerRenderItem = function innerRenderItem(provided, snapshot) {
        var _provided, _provided2, _provided3, _provided3$draggableP, _provided4;
        if (provided === void 0) {
          provided = {};
        }
        return /*#__PURE__*/_react["default"].createElement("div", _extends({
          ref: (_provided = provided) === null || _provided === void 0 ? void 0 : _provided.innerRef
        }, (_provided2 = provided) === null || _provided2 === void 0 ? void 0 : _provided2.draggableProps, {
          className: (0, _classnames["default"])("alignmentViewTrackContainer", {
            isDragDisabled: isDragDisabled
          }),
          "data-alignment-track-index": i,
          style: _extends({
            boxShadow: isTemplate ? "red 0px -1px 0px 0px inset, red 0px 1px 0px 0px inset" : "0px -1px 0px 0px inset",
            display: "flex"
          }, (_provided3 = provided) === null || _provided3 === void 0 ? void 0 : (_provided3$draggableP = _provided3.draggableProps) === null || _provided3$draggableP === void 0 ? void 0 : _provided3$draggableP.style, (snapshot === null || snapshot === void 0 ? void 0 : snapshot.isDragging) && {
            left: _lodash.unset
          }),
          key: i
        }), /*#__PURE__*/_react["default"].createElement("div", {
          className: "alignmentTrackName",
          style: {
            position: "sticky",
            left: 0,
            zIndex: 10,
            borderBottom: "1px solid " + (isTemplate ? "red" : "lightgray"),
            borderRight: "1px solid " + (isTemplate ? "red" : "lightgray"),
            width: _this.state.nameDivWidth - 3,
            padding: 2,
            marginRight: 3,
            paddingBottom: 0,
            minWidth: _this.state.nameDivWidth - 3,
            overflow: "hidden",
            scrollbarWidth: "none",
            whiteSpace: "nowrap"
          },
          title: name,
          key: i
        }, /*#__PURE__*/_react["default"].createElement("div", _extends({}, (_provided4 = provided) === null || _provided4 === void 0 ? void 0 : _provided4.dragHandleProps, {
          style: _extends({}, compactNames && {
            display: "flex",
            alignItems: "flex-start"
          }, {
            cursor: !isPairwise && allowTrackRearrange && !isTemplate ? "move" : ""
          })
        }), /*#__PURE__*/_react["default"].createElement("div", {
          className: "alignmentTrackNameDiv",
          style: _extends({
            background: "#3FA6DA",
            display: "inline-block",
            color: "white",
            borderRadius: 5,
            paddingRight: 5
          }, compactNames && {
            marginRight: 5
          })
        }, allowTrackNameEdit && /*#__PURE__*/_react["default"].createElement(_core.Button, {
          onClick: function onClick() {
            (0, _GlobalDialogUtils.showDialog)({
              ModalComponent: _EditTrackNameDialog.EditTrackNameDialog,
              props: {
                initialValues: {
                  name: name
                },
                updateName: function updateName(_ref5) {
                  var newName = _ref5.newName;
                  (0, _updateTrackHelper.updateTrackHelper)({
                    currentPairwiseAlignmentIndex: currentPairwiseAlignmentIndex,
                    pairwiseAlignments: pairwiseAlignments,
                    upsertAlignmentRun: upsertAlignmentRun,
                    alignmentId: alignmentId,
                    alignmentTracks: alignmentTracks,
                    alignmentTrackIndex: i,
                    update: {
                      name: newName
                    }
                  });
                }
              }
            });
          },
          small: true,
          "data-tip": "Edit Track Name",
          className: "edit-track-name-btn",
          icon: /*#__PURE__*/_react["default"].createElement(_core.Icon, {
            size: 12,
            color: "lightgrey",
            icon: "edit"
          }),
          minimal: true
        }), sequenceData.seqLink && /*#__PURE__*/_react["default"].createElement(_core.AnchorButton, {
          href: sequenceData.seqLink,
          "data-tip": sequenceData.seqLinkTooltip,
          target: "_blank",
          small: true,
          icon: /*#__PURE__*/_react["default"].createElement(_core.Icon, {
            size: 12,
            color: "white",
            icon: "document-open"
          }),
          minimal: true
        }), name), /*#__PURE__*/_react["default"].createElement("div", {
          style: {
            fontSize: 10,
            marginTop: 2,
            marginBottom: 2
          }
        }, isReversed && /*#__PURE__*/_react["default"].createElement("span", {
          style: {
            backgroundColor: isReversed ? "#E76A6E" : "#4C90F0",
            padding: 2,
            paddingLeft: 4,
            color: "white",
            marginRight: 2,
            borderRadius: "5px"
          },
          "data-tip": isReversed ? "The alignment algorithm matched the reverse complement of this input sequence" : "The original sequence was NOT reversed complemented by the alignment algorithm"
        }, isReversed ? "REV" : "FWD", " "), wasTrimmed && /*#__PURE__*/_react["default"].createElement("span", {
          style: {
            backgroundColor: "#13C9BA",
            padding: 2,
            paddingLeft: 4,
            color: "white",
            marginRight: 2,
            borderRadius: "5px"
          },
          "data-tip": "This sequence was trimmed and resubmitted for alignment"
        }, "TRIMMED"), sequenceData.sequence.length, " bps")), /*#__PURE__*/_react["default"].createElement(_HorizontalPanelDragHandle.HorizontalPanelDragHandle, {
          onDrag: function onDrag(_ref6) {
            var dx = _ref6.dx;
            _this.setState({
              nameDivWidth: Math.min(_this.state.nameDivWidth - dx, _this.state.width - 20)
            });
          }
        })), handleSelectTrack && !isTemplate && /*#__PURE__*/_react["default"].createElement("div", {
          onClick: function onClick() {
            handleSelectTrack(i);
          },
          style: {
            position: "absolute",
            opacity: 0,
            height: "100%",
            left: _this.state.nameDivWidth,
            width: linearViewWidth,
            fontWeight: "bolder",
            cursor: "pointer",
            padding: 5,
            textAlign: "center",
            zIndex: 400
          },
          className: "alignmentViewSelectTrackPopover veWhiteBackground"
        }, "Inspect track"), /*#__PURE__*/_react["default"].createElement(_LinearView.NonReduxEnhancedLinearView, _extends({}, rest, {
          caretPosition: _this.state["tempTrimmingCaret" + i] || -1,
          selectionLayer: selectionLayer,
          isInAlignment: true,
          // : { start: -1, end: -1 },
          annotationVisibilityOverrides: alignmentVisibilityToolOptions.alignmentAnnotationVisibility,
          linearViewAnnotationLabelVisibilityOverrides: alignmentVisibilityToolOptions.alignmentAnnotationLabelVisibility,
          marginWith: 0,
          orfClicked: _this.annotationClicked,
          primerClicked: _this.annotationClicked,
          translationClicked: _this.annotationClicked,
          cutsiteClicked: _this.annotationClicked,
          translationDoubleClicked: _this.annotationClicked,
          deletionLayerClicked: _this.annotationClicked,
          replacementLayerClicked: _this.annotationClicked,
          featureClicked: _this.annotationClicked,
          partClicked: _this.annotationClicked,
          searchLayerClicked: _this.annotationClicked,
          editorDragStarted: _lodash.noop,
          //override these since we're defining the handlers above
          editorDragStopped: _lodash.noop,
          //override these since we're defining the handlers above
          editorDragged: _lodash.noop,
          //override these since we're defining the handlers above
          hideName: true,
          sequenceData: sequenceData,
          // sequenceDataWithRefSeqCdsFeatures,
          tickSpacing: tickSpacing,
          allowSeqDataOverride: true,
          //override the sequence data stored in redux so we can track the caret position/selection layer in redux but not have to update the redux editor
          editorName: (isTemplate ? "template_" : "") + "alignmentView" + i,
          alignmentData: alignmentData,
          chromatogramData: chromatogramData,
          height: "100%",
          vectorInteractionWrapperStyle: {
            overflowY: "hidden"
          },
          marginWidth: 0,
          linearViewCharWidth: charWidthInLinearView,
          ignoreGapsOnHighlight: true
        }, linearViewOptions && ((0, _lodash.isFunction)(linearViewOptions) ? linearViewOptions({
          index: i,
          isTemplate: isTemplate,
          alignmentVisibilityToolOptions: alignmentVisibilityToolOptions,
          sequenceData: sequenceData,
          alignmentData: alignmentData,
          chromatogramData: chromatogramData
        }) : linearViewOptions), {
          additionalSelectionLayers: additionalSelectionLayers,
          dimensions: {
            width: linearViewWidth
          },
          width: linearViewWidth,
          paddingBottom: 5,
          scrollDataPassed: _this.easyStore
        })));
      };
      if (isTemplate) return innerRenderItem();
      if (cloneProps) return innerRenderItem(cloneProps.provided, cloneProps.snapshot);
      var idToUse = alignmentData.id || sequenceData.id || i + "_index_id";
      return /*#__PURE__*/_react["default"].createElement(_dnd.Draggable, {
        key: idToUse.toString(),
        index: i,
        isDragDisabled: isDragDisabled,
        draggableId: idToUse.toString()
      }, innerRenderItem);
    });
    _defineProperty(_assertThisInitialized(_this), "handleResize", (0, _lodash.throttle)(function (_ref7) {
      var e = _ref7[0];
      _this.easyStore.viewportWidth = e.contentRect.width - _this.state.nameDivWidth || 400;
      _this.setState({
        width: e.contentRect.width
      });
    }, 200));
    _defineProperty(_assertThisInitialized(_this), "removeMinimapHighlightForMouseLeave", function () {
      var minimapLaneEl = document.querySelector(".minimapLane.lane-hovered");
      if (!minimapLaneEl) return;
      minimapLaneEl.classList.remove("lane-hovered");
    });
    _defineProperty(_assertThisInitialized(_this), "updateMinimapHighlightForMouseMove", function (event) {
      _this.latestMouseY = (0, _editorUtils.getClientY)(event); //we use this variable later
      _this.updateMinimapHighlight();
    });
    _defineProperty(_assertThisInitialized(_this), "updateMinimapHighlight", function () {
      var rows = document.querySelectorAll(".alignmentViewTrackContainer");
      var rowsLength = document.querySelectorAll(".minimapLane").length;
      if (rowsLength <= 4) {
        return; // no need to include this functionality here
      }

      (0, _lodash.some)(rows, function (rowDomNode) {
        var boundingRowRect = rowDomNode.getBoundingClientRect();
        if (_this.latestMouseY > boundingRowRect.top && _this.latestMouseY < boundingRowRect.top + boundingRowRect.height) {
          var prevMinimapLaneEl = document.querySelector(".minimapLane.lane-hovered");
          if (prevMinimapLaneEl) {
            prevMinimapLaneEl.classList.remove("lane-hovered");
          }
          var i = Number(rowDomNode.getAttribute("data-alignment-track-index"));

          //then the click falls within this row
          var minimapLaneEl = document.querySelector(".minimapLane:nth-child(" + (i + 1) + ")");
          if (!minimapLaneEl) return;
          minimapLaneEl.classList.add("lane-hovered");
          return true; //break the loop early because we found the row the click event landed in
        }
      });
    });
    _defineProperty(_assertThisInitialized(_this), "onTrackDragStart", function () {
      _this.setState({
        isTrackDragging: true
      });
    });
    _defineProperty(_assertThisInitialized(_this), "onTrackDragEnd", function (_ref8) {
      var destination = _ref8.destination,
        source = _ref8.source;
      _this.setState({
        isTrackDragging: false
      });
      if (!destination) {
        return;
      }
      var _this$props5 = _this.props,
        upsertAlignmentRun = _this$props5.upsertAlignmentRun,
        alignmentId = _this$props5.alignmentId,
        alignmentTracks = _this$props5.alignmentTracks;
      upsertAlignmentRun({
        id: alignmentId,
        alignmentTracks: (0, _array_move.array_move)(alignmentTracks, source.index, destination.index)
      });
    });
    window.scrollAlignmentToPercent = _this.scrollAlignmentToPercent;
    if (window.Cypress) window.Cypress.scrollAlignmentToPercent = _this.scrollAlignmentToPercent;
    _this.onShortcutCopy = document.addEventListener("keydown", _this.handleAlignmentCopy);
    return _this;
  }
  var _proto = AlignmentView.prototype;
  _proto.getNearestCursorPositionToMouseEvent = function getNearestCursorPositionToMouseEvent(rowData, event, callback) {
    this.charWidth = this.getCharWidthInLinearView();
    //loop through all the rendered rows to see if the click event lands in one of them
    var nearestCaretPos = 0;
    var rowDomNode = this.veTracksAndAlignmentHolder;
    var boundingRowRect = rowDomNode.getBoundingClientRect();
    var maxEnd = this.getMaxLength();
    if ((0, _editorUtils.getClientX)(event) - boundingRowRect.left - this.state.nameDivWidth < 0) {
      nearestCaretPos = 0;
    } else {
      var clickXPositionRelativeToRowContainer = (0, _editorUtils.getClientX)(event) - boundingRowRect.left - this.state.nameDivWidth;
      var numberOfBPsInFromRowStart = Math.floor((clickXPositionRelativeToRowContainer + this.charWidth / 2) / this.charWidth);
      nearestCaretPos = numberOfBPsInFromRowStart + 0;
      if (nearestCaretPos > maxEnd + 1) {
        nearestCaretPos = maxEnd + 1;
      }
    }
    if (this.props.sequenceData && this.props.sequenceData.isProtein) {
      nearestCaretPos = Math.round(nearestCaretPos / 3) * 3;
    }
    if (this.props.sequenceLength === 0) nearestCaretPos = 0;
    var callbackVals = {
      updateSelectionOrCaret: this.updateSelectionOrCaret,
      nearestCaretPos: nearestCaretPos,
      sequenceLength: this.getSequenceLength(),
      caretPosition: this.easyStore.caretPosition,
      selectionLayer: this.easyStore.selectionLayer,
      easyStore: this.easyStore,
      caretPositionUpdate: this.caretPositionUpdate,
      selectionLayerUpdate: this.selectionLayerUpdate,
      event: event,
      doNotWrapOrigin: true,
      shiftHeld: event.shiftKey,
      // caretGrabbed: event.target.className === "cursor",
      selectionStartGrabbed: event.target.classList.contains(_draggableClassnames["default"].selectionStart),
      selectionEndGrabbed: event.target.classList.contains(_draggableClassnames["default"].selectionEnd)
    };
    callback(callbackVals);
  };
  _proto.componentWillUnmount = function componentWillUnmount() {
    if (window.Cypress) {
      delete window.scrollAlignmentToPercent;
      delete window.Cypress.scrollAlignmentToPercent;
      delete window.updateAlignmentSelection;
      delete window.Cypress.updateAlignmentSelection;
    }
    var _this$props6 = this.props,
      removeAlignmentFromRedux = _this$props6.removeAlignmentFromRedux,
      id = _this$props6.id;
    removeAlignmentFromRedux({
      id: id
    });
    this.onShortcutCopy && document.removeEventListener("keydown", this.handleAlignmentCopy);
  };
  _proto.componentDidUpdate = /*#__PURE__*/function () {
    var _componentDidUpdate = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(prevProps) {
      var _this2 = this;
      var cleanedTracks;
      return _regeneratorRuntime().wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              if (prevProps.scrollPercentageToJumpTo !== this.props.scrollPercentageToJumpTo && this.props.scrollPercentageToJumpTo !== undefined) {
                this.scrollAlignmentToPercent(this.props.scrollPercentageToJumpTo);
              }
              //autosave if necessary!
              if (!(this.props.shouldAutosave && prevProps && prevProps.stateTrackingId && this.props.stateTrackingId !== prevProps.stateTrackingId)) {
                _context.next = 10;
                break;
              }
              this.setState({
                saveMessage: "Alignment Saving.."
              });
              this.setState({
                saveMessageLoading: true
              });
              if (this.props.pairwiseAlignments) {
                cleanedTracks = this.props.pairwiseAlignments.map(cleanTracks);
              } else {
                cleanedTracks = cleanTracks(this.props.alignmentTracks);
              }
              _context.next = 7;
              return this.props.handleAlignmentSave(cleanedTracks, this.props);
            case 7:
              this.setState({
                saveMessage: "Alignment Saved"
              });
              this.setState({
                saveMessageLoading: false
              });
              setTimeout(function () {
                _this2.setState({
                  saveMessage: undefined
                });
                _this2.setState({
                  saveMessageLoading: false
                });
              }, 5000);
            case 10:
            case "end":
              return _context.stop();
          }
        }
      }, _callee, this);
    }));
    function componentDidUpdate(_x) {
      return _componentDidUpdate.apply(this, arguments);
    }
    return componentDidUpdate;
  }();
  _proto.componentDidMount = function componentDidMount() {
    var _this3 = this;
    var updateAlignmentSelection = function updateAlignmentSelection(newRangeOrCaret) {
      _this3.updateSelectionOrCaret(false, newRangeOrCaret, {
        forceReduxUpdate: true
      });
    };
    window.updateAlignmentSelection = updateAlignmentSelection;
    if (window.Cypress) window.Cypress.updateAlignmentSelection = updateAlignmentSelection;
    setTimeout(function () {
      (0, _updateLabelsForInViewFeatures.updateLabelsForInViewFeatures)({
        rectElement: ".alignmentHolder"
      });
    }, 0);
    setTimeout(function () {
      _this3.setVerticalScrollRange();
    }, 500);
  };
  _proto.render = function render() {
    var _this4 = this;
    var charWidthInLinearView = this.getCharWidthInLinearView();
    var _this$props7 = this.props,
      _this$props7$alignmen = _this$props7.alignmentTracks,
      alignmentTracks = _this$props7$alignmen === void 0 ? [] : _this$props7$alignmen,
      height = _this$props7.height,
      minimapLaneHeight = _this$props7.minimapLaneHeight,
      minimapLaneSpacing = _this$props7.minimapLaneSpacing,
      isInPairwiseOverviewView = _this$props7.isInPairwiseOverviewView,
      isPairwise = _this$props7.isPairwise,
      currentPairwiseAlignmentIndex = _this$props7.currentPairwiseAlignmentIndex,
      hasTemplate = _this$props7.hasTemplate,
      noVisibilityOptions = _this$props7.noVisibilityOptions,
      updateAlignmentSortOrder = _this$props7.updateAlignmentSortOrder,
      alignmentSortOrder = _this$props7.alignmentSortOrder,
      handleBackButtonClicked = _this$props7.handleBackButtonClicked,
      noClickDragHandlers = _this$props7.noClickDragHandlers,
      upsertAlignmentRun = _this$props7.upsertAlignmentRun,
      alignmentId = _this$props7.alignmentId,
      allowTrimming = _this$props7.allowTrimming,
      additionalSelectionLayerRightClickedOptions = _this$props7.additionalSelectionLayerRightClickedOptions,
      selectionLayerRightClicked = _this$props7.selectionLayerRightClicked,
      additionalTopEl = _this$props7.additionalTopEl,
      handleAlignmentRename = _this$props7.handleAlignmentRename,
      alignmentVisibilityToolOptions = _this$props7.alignmentVisibilityToolOptions;
    var sequenceLength = this.getMaxLength();
    if (!alignmentTracks || !alignmentTracks[0] || !alignmentTracks[0].alignmentData) {
      console.error("corrupted data!", this.props);
      return "corrupted data!";
    }
    var getTrackVis = function getTrackVis(alignmentTracks, isTemplate, allTracks) {
      var rowData = {};
      var innerTrackVis = function innerTrackVis(drop_provided, drop_snapshot) {
        return /*#__PURE__*/_react["default"].createElement("div", {
          className: "alignmentTracks ",
          style: {
            overflowY: "auto",
            display: "flex",
            zIndex: 10
          }
        }, /*#__PURE__*/_react["default"].createElement("div", {
          style: {
            overflowX: "auto",
            width: _this4.state.width
          },
          ref: function ref(_ref12) {
            _this4[isTemplate ? "alignmentHolderTop" : "alignmentHolder"] = _ref12;
          },
          onContextMenu: function onContextMenu(e) {
            if (!allowTrimming || (0, _isTargetWithinEl.isTargetWithinEl)(e, ".alignmentTrackName")) {
              return;
            }
            _this4.getTrackTrimmingOptions({
              e: e,
              allTracks: allTracks,
              upsertAlignmentRun: upsertAlignmentRun,
              alignmentId: alignmentId,
              currentPairwiseAlignmentIndex: currentPairwiseAlignmentIndex
            });
          },
          onMouseLeave: _this4.removeMinimapHighlightForMouseLeave,
          onMouseMove: _this4.updateMinimapHighlightForMouseMove,
          dataname: "scrollGroup",
          className: "alignmentHolder",
          onScroll: isTemplate ? _this4.handleTopScroll : _this4.handleScroll
        }, /*#__PURE__*/_react["default"].createElement(_reactDraggable["default"], {
          disabled: _this4.state.isTrackDragging,
          bounds: {
            top: 0,
            left: 0,
            right: 0,
            bottom: 0
          },
          onDrag: noClickDragHandlers ? _lodash.noop : function (event) {
            if (_this4.state.isTrackDragging) return;
            _this4.getNearestCursorPositionToMouseEvent(rowData, event, _clickAndDragUtils.editorDragged);
          },
          onStart: noClickDragHandlers ? _lodash.noop : function (event) {
            if ((0, _isTargetWithinEl.isTargetWithinEl)(event, ".alignmentTrackName")) {
              return _this4.setState({
                isTrackDragging: true
              });
            }
            if (_this4.state.isTrackDragging) return;
            _this4.getNearestCursorPositionToMouseEvent(rowData, event, _clickAndDragUtils.editorDragStarted);
          },
          onStop: noClickDragHandlers ? _lodash.noop : function () {
            setTimeout(function () {
              _this4.setState({
                isTrackDragging: false
              });
            }, 0);
            _clickAndDragUtils.editorDragStopped.apply(void 0, arguments);
          }
        }, /*#__PURE__*/_react["default"].createElement("div", {
          ref: function ref(_ref11) {
            return _this4.veTracksAndAlignmentHolder = _ref11;
          },
          className: (0, _classnames["default"])("veTracksAndAlignmentHolder", {
            isTrackDragging: _this4.state.isTrackDragging
          })
          // onContextMenu={
          //tnrtodo add copy single track/all tracks logic here
          // (event) => {
          // this.getNearestCursorPositionToMouseEvent(
          //   rowData,
          //   event,
          //   () => {
          //   }
          // );
          // }
          // }
          ,
          onClick: noClickDragHandlers ? _lodash.noop : function (event) {
            if (_this4.state.isTrackDragging) return;
            if ((0, _isTargetWithinEl.isTargetWithinEl)(event, ".alignmentTrackName")) {
              return;
            }
            _this4.getNearestCursorPositionToMouseEvent(rowData, event, _clickAndDragUtils.editorClicked);
          }
        }, /*#__PURE__*/_react["default"].createElement(_PerformantSelectionLayer.PerformantSelectionLayer, {
          leftMargin: _this4.state.nameDivWidth,
          className: "veAlignmentSelectionLayer",
          isDraggable: true,
          selectionLayerRightClicked: selectionLayerRightClicked ? function () {
            for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
              args[_key] = arguments[_key];
            }
            selectionLayerRightClicked.apply(void 0, args.concat([_this4.props]));
          } : function () {
            for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
              args[_key2] = arguments[_key2];
            }
            var event = args[0].event;
            var track = (0, _getTrackFromEvent.getTrackFromEvent)(event, allTracks);
            var alignmentData = track.alignmentData;
            var name = alignmentData.name;
            (0, _teselagenReactComponents.showContextMenu)([].concat(additionalSelectionLayerRightClickedOptions ? additionalSelectionLayerRightClickedOptions.apply(void 0, args.concat([_this4.props])) : [], [{
              text: "Copy Selection of All Alignments as Fasta",
              className: "copyAllAlignmentsFastaClipboardHelper",
              hotkey: "cmd+c",
              willUnmount: function willUnmount() {
                _this4.copyAllAlignmentsFastaClipboardHelper && _this4.copyAllAlignmentsFastaClipboardHelper.destroy();
              },
              didMount: function didMount() {
                _this4.copyAllAlignmentsFastaClipboardHelper = new _clipboard["default"](".copyAllAlignmentsFastaClipboardHelper", {
                  action: "copyAllAlignmentsFasta",
                  text: function text() {
                    return _this4.getAllAlignmentsFastaText();
                  }
                });
              },
              onClick: function onClick() {
                window.toastr.success("Selection Copied");
              }
            }, {
              text: "Copy Selection of " + name + " as Fasta",
              className: "copySpecificAlignmentFastaClipboardHelper",
              willUnmount: function willUnmount() {
                _this4.copySpecificAlignmentFastaClipboardHelper && _this4.copySpecificAlignmentFastaClipboardHelper.destroy();
              },
              didMount: function didMount() {
                _this4.copySpecificAlignmentFastaClipboardHelper = new _clipboard["default"](".copySpecificAlignmentFastaClipboardHelper", {
                  action: "copySpecificAlignmentFasta",
                  text: function text() {
                    var _ref9 = _this4.props.store.getState().VectorEditor.__allEditorsOptions.alignments[_this4.props.id] || {},
                      selectionLayer = _ref9.selectionLayer;
                    var seqDataToCopy = (0, _sequenceUtils.getSequenceDataBetweenRange)(alignmentData, selectionLayer).sequence;
                    var seqDataToCopyAsFasta = ">" + name + "\r\n" + seqDataToCopy + "\r\n";
                    return seqDataToCopyAsFasta;
                  }
                });
              },
              onClick: function onClick() {
                window.toastr.success("Selection Copied As Fasta");
              }
            }, {
              text: "Copy Selection of " + name,
              className: "copySpecificAlignmentAsPlainClipboardHelper",
              willUnmount: function willUnmount() {
                _this4.copySpecificAlignmentAsPlainClipboardHelper && _this4.copySpecificAlignmentAsPlainClipboardHelper.destroy();
              },
              didMount: function didMount() {
                _this4.copySpecificAlignmentAsPlainClipboardHelper = new _clipboard["default"](".copySpecificAlignmentAsPlainClipboardHelper", {
                  action: "copySpecificAlignmentFasta",
                  text: function text() {
                    var _ref10 = _this4.props.store.getState().VectorEditor.__allEditorsOptions.alignments[_this4.props.id] || {},
                      selectionLayer = _ref10.selectionLayer;
                    var seqDataToCopy = (0, _sequenceUtils.getSequenceDataBetweenRange)(alignmentData, selectionLayer).sequence;
                    return seqDataToCopy;
                  }
                });
              },
              onClick: function onClick() {
                window.toastr.success("Selection Copied");
              }
            }]), undefined, event);
          },
          easyStore: _this4.easyStore,
          sequenceLength: sequenceLength,
          charWidth: _this4.getCharWidthInLinearView(),
          row: {
            start: 0,
            end: sequenceLength - 1
          }
        }), /*#__PURE__*/_react["default"].createElement(PerformantCaret, {
          leftMargin: _this4.state.nameDivWidth,
          className: "veAlignmentSelectionLayer",
          isDraggable: true,
          sequenceLength: sequenceLength,
          charWidth: _this4.getCharWidthInLinearView(),
          row: {
            start: 0,
            end: sequenceLength - 1
          },
          easyStore: _this4.easyStore
        }), isTemplate ? _this4.renderItem(0, 0, isTemplate) : /*#__PURE__*/_react["default"].createElement(_reactList["default"], {
          ref: function ref(c) {
            _this4.InfiniteScroller = c;
            var domNode = _reactDom["default"].findDOMNode(c);
            if (domNode instanceof HTMLElement) {
              drop_provided.innerRef(domNode);
            }
          },
          type: "variable",
          itemSizeEstimator: _this4.estimateRowHeight,
          itemRenderer: _this4.renderItem,
          length: alignmentTracks.length + (drop_snapshot.isUsingPlaceholder ? 1 : 0)
        })))));
      };
      if (isTemplate) return innerTrackVis();else return /*#__PURE__*/_react["default"].createElement(_dnd.Droppable, {
        mode: "virtual",
        renderClone: function renderClone(provided, snapshot, _ref13) {
          var index = _ref13.source.index;
          return _this4.renderItem(index, index, false, {
            provided: provided,
            snapshot: snapshot
          });
        },
        direction: "vertical",
        droppableId: "droppable" + isTemplate ? "_no_drop" : ""
      }, innerTrackVis);
    };
    var firstTrack = alignmentTracks[0],
      otherTracks = alignmentTracks.slice(1);
    var totalWidthOfMinimap = this.state.width;
    var totalWidthInAlignmentView = 14 * this.getSequenceLength();
    var minSliderSize = Math.min(totalWidthOfMinimap * (totalWidthOfMinimap / totalWidthInAlignmentView), totalWidthOfMinimap);
    var viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

    /**
     * Parameters to be passed to our Pinch Handler component
     * OnPinch is the method to be executed when the pinch gesture is registered
     * Pinch Handler for minimap
     */
    var pinchHandler = {
      onPinch: function onPinch(_ref14) {
        var _ref14$delta = _ref14.delta,
          d = _ref14$delta[0];
        _this4.bindOutsideChangeHelper.triggerChange(function (_ref15) {
          var value = _ref15.value,
            changeValue = _ref15.changeValue;
          // changeValue(d);
          if (d > 0) {
            if (value > 8) {
              changeValue(value + 0.4);
            } else {
              changeValue(value + 0.2);
            }
          } else if (d < 0) {
            if (value > 8) {
              changeValue(value - 0.4);
            } else {
              changeValue(value - 0.2);
            }
          }
        });
        (0, _updateLabelsForInViewFeatures.updateLabelsForInViewFeatures)();
      }
    };
    return /*#__PURE__*/_react["default"].createElement(_PinchHelper["default"], pinchHandler, /*#__PURE__*/_react["default"].createElement(_core.ResizeSensor, {
      onResize: this.handleResize
    }, /*#__PURE__*/_react["default"].createElement("div", {
      style: _extends({
        height: height || (isPairwise ? "auto" : viewportHeight * 0.88),
        display: "flex",
        flexDirection: "column",
        justifyContent: "space-between",
        position: "relative",
        overflowY: "auto"
      }, this.props.style),
      className: "alignmentView"
    }, /*#__PURE__*/_react["default"].createElement(_dnd.DragDropContext, {
      onDragStart: this.onTrackDragStart,
      onDragEnd: this.onTrackDragEnd
    }, /*#__PURE__*/_react["default"].createElement("div", {
      style: {
        display: "flex",
        flexDirection: "column",
        position: "relative",
        overflowY: "auto"
      },
      className: "alignmentView-top-container"
    }, /*#__PURE__*/_react["default"].createElement("div", {
      style: {
        paddingTop: "3px",
        paddingBottom: "5px",
        borderBottom: "1px solid",
        display: "flex",
        minHeight: "32px",
        width: "100%",
        flexWrap: "nowrap",
        flexDirection: "row",
        flex: "0 0 auto"
      },
      className: "ve-alignment-top-bar"
    }, handleBackButtonClicked && /*#__PURE__*/_react["default"].createElement(_core.Tooltip, {
      content: "Back to Pairwise Alignment Overview"
    }, /*#__PURE__*/_react["default"].createElement(_core.Button, {
      icon: "arrow-left",
      onClick: function onClick() {
        // this.setState({
        //   charWidthInLinearView: charWidthInLinearViewDefault
        // });
        handleBackButtonClicked();
        _this4.caretPositionUpdate(-1);
      },
      small: true,
      intent: _core.Intent.PRIMARY,
      minimal: true,
      style: {
        marginRight: 10
      },
      className: "alignmentViewBackButton"
    })), /*#__PURE__*/_react["default"].createElement("div", {
      style: {
        display: "flex"
      }
    }, /*#__PURE__*/_react["default"].createElement(_core.EditableText, {
      disabled: !handleAlignmentRename,
      onChange: function onChange(v) {
        _this4.setState({
          alignmentName: v
        });
      },
      maxLength: 399 //stop the name from being tooo long
      ,
      value: this.state.alignmentName,
      onConfirm: /*#__PURE__*/function () {
        var _ref16 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(v) {
          return _regeneratorRuntime().wrap(function _callee2$(_context2) {
            while (1) {
              switch (_context2.prev = _context2.next) {
                case 0:
                  if (v) {
                    _context2.next = 3;
                    break;
                  }
                  _this4.setState({
                    alignmentName: _this4.props.alignmentName
                  });
                  return _context2.abrupt("return");
                case 3:
                  if (!(v === _this4.props.alignmentName)) {
                    _context2.next = 5;
                    break;
                  }
                  return _context2.abrupt("return");
                case 5:
                  _this4.setState({
                    saveMessage: "Alignment Renaming.."
                  });
                  _this4.setState({
                    saveMessageLoading: true
                  });
                  _context2.next = 9;
                  return handleAlignmentRename(v, _this4.props);
                case 9:
                  _this4.setState({
                    saveMessage: "Rename Successful"
                  });
                  _this4.setState({
                    saveMessageLoading: false
                  });
                  setTimeout(function () {
                    _this4.setState({
                      saveMessage: undefined
                    });
                    _this4.setState({
                      saveMessageLoading: false
                    });
                  }, 5000);
                case 12:
                case "end":
                  return _context2.stop();
              }
            }
          }, _callee2);
        }));
        return function (_x2) {
          return _ref16.apply(this, arguments);
        };
      }(),
      selectAllOnFocus: true,
      className: "veAlignmentName"
    }), "\xA0\xA0\xA0", /*#__PURE__*/_react["default"].createElement("div", {
      className: "veAlignmentType",
      style: {
        paddingTop: "3px",
        fontSize: "14px",
        color: "grey",
        maxWidth: "300px",
        overflow: "hidden",
        textOverflow: "ellipsis",
        whiteSpace: "nowrap"
      },
      title: this.props.alignmentType || "Unknown Alignment Type"
    }, this.props.alignmentType || "Unknown Alignment Type")), this.props.unmappedSeqs && /*#__PURE__*/_react["default"].createElement(_teselagenReactComponents.InfoHelper, {
      size: 20,
      content: /*#__PURE__*/_react["default"].createElement("div", null, "This alignment had sequences that did not map to the template sequence:", this.props.unmappedSeqs.map(function (_ref17, i) {
        var sequenceData = _ref17.sequenceData;
        return /*#__PURE__*/_react["default"].createElement("div", {
          key: i
        }, sequenceData.name);
      })),
      intent: "warning",
      icon: "warning-sign"
    }), !isInPairwiseOverviewView && /*#__PURE__*/_react["default"].createElement(_UncontrolledSliderWithPlusMinusBtns["default"], {
      noWraparound: true,
      bindOutsideChangeHelper: this.bindOutsideChangeHelper,
      onClick: function onClick() {
        setTimeout(_this4.scrollToCaret, 0);
      },
      minCharWidth: this.getMinCharWidth(),
      onChange: /*#__PURE__*/function () {
        var _ref18 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(zoomLvl) {
          var minCharWidth, scaleFactor, newCharWidth;
          return _regeneratorRuntime().wrap(function _callee3$(_context3) {
            while (1) {
              switch (_context3.prev = _context3.next) {
                case 0:
                  _this4.isZooming = true;
                  setTimeout(function () {
                    _this4.isZooming = false;
                  }, 10);
                  // zoomLvl is in the range of 0 to 10
                  minCharWidth = _this4.getMinCharWidth();
                  scaleFactor = Math.pow(12 / minCharWidth, 1 / 10);
                  newCharWidth = minCharWidth * Math.pow(scaleFactor, zoomLvl);
                  _context3.next = 7;
                  return _this4.setCharWidthInLinearView({
                    charWidthInLinearView: newCharWidth
                  });
                case 7:
                  _context3.next = 9;
                  return _this4.scrollToCaret();
                case 9:
                  _context3.next = 11;
                  return (0, _updateLabelsForInViewFeatures.updateLabelsForInViewFeatures)({
                    rectElement: ".alignmentHolder"
                  });
                case 11:
                case "end":
                  return _context3.stop();
              }
            }
          }, _callee3);
        }));
        return function (_x3) {
          return _ref18.apply(this, arguments);
        };
      }(),
      coerceInitialValue: _coerceInitialValue.coerceInitialValue,
      title: "Adjust Zoom Level",
      style: {
        paddingTop: "4px",
        width: 100
      },
      className: "veZoomAlignmentSlider ove-slider",
      labelRenderer: false,
      initialValue: charWidthInLinearView,
      stepSize: 0.05 //was 0.01
      ,
      max: 10,
      min: 0,
      clickStepSize: 0.5
    }), !noVisibilityOptions && !isInPairwiseOverviewView && /*#__PURE__*/_react["default"].createElement(_AlignmentVisibilityTool["default"], _extends({
      currentPairwiseAlignmentIndex: currentPairwiseAlignmentIndex
    }, alignmentVisibilityToolOptions)), updateAlignmentSortOrder && !isInPairwiseOverviewView && /*#__PURE__*/_react["default"].createElement(_core.Popover, {
      minimal: true,
      content: /*#__PURE__*/_react["default"].createElement(_core.Menu, null, /*#__PURE__*/_react["default"].createElement(_core.MenuItem, {
        active: true || alignmentSortOrder,
        onClick: function onClick() {
          updateAlignmentSortOrder("Position");
        },
        text: "Position"
      }), /*#__PURE__*/_react["default"].createElement(_core.MenuItem, {
        active: false || alignmentSortOrder,
        onClick: function onClick() {
          updateAlignmentSortOrder("Alphabetical");
        },
        text: "Alphabetical"
      })),
      target: /*#__PURE__*/_react["default"].createElement(_core.Button, {
        small: true,
        text: "Sort Order",
        rightIcon: "caret-down",
        icon: "sort"
      })
    }), additionalTopEl, this.state.saveMessage && /*#__PURE__*/_react["default"].createElement("div", {
      className: "ove-menu-toast",
      style: {
        display: "flex",
        alignItems: "center",
        marginLeft: "auto",
        marginRight: 10
      }
    }, this.state.saveMessageLoading ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_core.Spinner, {
      size: 15
    })) : /*#__PURE__*/_react["default"].createElement(_core.Icon, {
      icon: "tick-circle",
      intent: "success"
    }), " ", "\xA0", this.state.saveMessage)), hasTemplate ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
      className: "alignmentTrackFixedToTop"
    }, getTrackVis([firstTrack], true, alignmentTracks)), getTrackVis(otherTracks, false, alignmentTracks)) : getTrackVis(alignmentTracks, false, alignmentTracks))), !isInPairwiseOverviewView && /*#__PURE__*/_react["default"].createElement("div", {
      className: "alignmentViewBottomBar",
      style: {
        // flexGrow: 1,
        // minHeight: "-webkit-min-content", //https://stackoverflow.com/questions/28029736/how-to-prevent-a-flex-item-from-shrinking-smaller-than-its-content
        maxHeight: 210,
        marginTop: 4,
        paddingTop: 4,
        borderTop: "1px solid lightgrey",
        display: "flex"
      }
    }, /*#__PURE__*/_react["default"].createElement(_Minimap["default"], {
      selectionLayerComp: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_PerformantSelectionLayer.PerformantSelectionLayer, {
        is: true,
        hideCarets: true,
        className: "veAlignmentSelectionLayer veMinimapSelectionLayer",
        easyStore: this.easyStore,
        sequenceLength: sequenceLength,
        charWidth: this.getMinCharWidth(true),
        row: {
          start: 0,
          end: sequenceLength - 1
        }
      }), /*#__PURE__*/_react["default"].createElement(PerformantCaret, {
        style: {
          opacity: 0.2
        },
        className: "veAlignmentSelectionLayer veMinimapSelectionLayer",
        sequenceLength: sequenceLength,
        charWidth: this.getMinCharWidth(true),
        row: {
          start: 0,
          end: sequenceLength - 1
        },
        easyStore: this.easyStore
      })),
      alignmentTracks: alignmentTracks,
      dimensions: {
        width: Math.max(this.state.width, 10) || 10
      },
      nameDivOffsetPercent: 0,
      // this.state.nameDivWidth / this.getMaxLinearViewWidth(),
      scrollYToTrack: this.scrollYToTrack,
      onSizeAdjust: this.onMinimapSizeAdjust,
      minSliderSize: minSliderSize,
      laneHeight: minimapLaneHeight || (alignmentTracks.length > 5 ? 10 : 17),
      laneSpacing: minimapLaneSpacing || (alignmentTracks.length > 5 ? 2 : 1),
      easyStore: this.easyStore,
      numBpsShownInLinearView: this.getNumBpsShownInLinearView(),
      scrollAlignmentView: this.state.scrollAlignmentView,
      onMinimapScrollX: this.scrollAlignmentToPercent
    })), /*#__PURE__*/_react["default"].createElement(_GlobalDialog.GlobalDialog
    // {...pickedUserDefinedHandlersAndOpts}
    // dialogOverrides={pick(this.props, [
    //   "AddOrEditFeatureDialogOverride",
    //   "AddOrEditPartDialogOverride",
    //   "AddOrEditPrimerDialogOverride"
    // ])}
    , null))));
  };
  _proto.getTrackTrimmingOptions = function getTrackTrimmingOptions(_ref19) {
    var _this5 = this;
    var e = _ref19.e,
      allTracks = _ref19.allTracks,
      upsertAlignmentRun = _ref19.upsertAlignmentRun,
      currentPairwiseAlignmentIndex = _ref19.currentPairwiseAlignmentIndex,
      alignmentId = _ref19.alignmentId;
    var track = (0, _getTrackFromEvent.getTrackFromEvent)(e, allTracks);
    this.getNearestCursorPositionToMouseEvent(this.rowData, e, function (_ref20) {
      var _this5$setState, _track$alignmentData$, _track$alignmentData$2, _track$alignmentData, _track$alignmentData$5;
      var nearestCaretPos = _ref20.nearestCaretPos;
      _this5.setState((_this5$setState = {}, _this5$setState["tempTrimmingCaret" + track.index] = nearestCaretPos, _this5$setState));
      var afterDisabled = nearestCaretPos <= ((_track$alignmentData$ = track.alignmentData.trimmedRange) === null || _track$alignmentData$ === void 0 ? void 0 : _track$alignmentData$.start);
      var beforeDisabled = nearestCaretPos > ((_track$alignmentData$2 = track.alignmentData.trimmedRange) === null || _track$alignmentData$2 === void 0 ? void 0 : _track$alignmentData$2.end);
      (0, _teselagenReactComponents.showContextMenu)([{
        divider: /*#__PURE__*/_react["default"].createElement("div", {
          style: {
            color: "#137cbd",
            fontSize: 13,
            fontWeight: "bold"
          }
        }, "Trim " + (track.sequenceData.name || track.sequenceData.id) + "...")
      }, {
        text: "Ignore Before",
        disabled: beforeDisabled,
        icon: "drawer-left-filled",
        onMouseOver: function onMouseOver() {
          var _this5$setState2;
          return !beforeDisabled && _this5.setState((_this5$setState2 = {}, _this5$setState2["tempTrimBefore" + track.index] = {
            start: 0,
            end: nearestCaretPos - 1
          }, _this5$setState2));
        },
        onMouseLeave: function onMouseLeave() {
          var _this5$setState3;
          return _this5.setState((_this5$setState3 = {}, _this5$setState3["tempTrimBefore" + track.index] = undefined, _this5$setState3));
        },
        onClick: function onClick() {
          var _track$alignmentData$3;
          (0, _updateTrackHelper.updateTrackHelper)({
            currentPairwiseAlignmentIndex: currentPairwiseAlignmentIndex,
            upsertAlignmentRun: upsertAlignmentRun,
            alignmentId: alignmentId,
            alignmentTracks: allTracks,
            alignmentTrackIndex: track.index,
            hasBeenTrimmed: true,
            update: {
              trimmedRange: {
                start: nearestCaretPos,
                end: ((_track$alignmentData$3 = track.alignmentData.trimmedRange) === null || _track$alignmentData$3 === void 0 ? void 0 : _track$alignmentData$3.end) || _this5.getMaxLength() - 1
              }
            }
          });
        }
      }, {
        text: "Ignore After",
        disabled: afterDisabled,
        icon: "drawer-right-filled",
        onMouseOver: function onMouseOver() {
          var _this5$setState4;
          return !afterDisabled && _this5.setState((_this5$setState4 = {}, _this5$setState4["tempTrimAfter" + track.index] = {
            start: nearestCaretPos,
            end: _this5.getMaxLength() - 1
          }, _this5$setState4));
        },
        onMouseLeave: function onMouseLeave() {
          var _this5$setState5;
          return _this5.setState((_this5$setState5 = {}, _this5$setState5["tempTrimAfter" + track.index] = undefined, _this5$setState5));
        },
        onClick: function onClick() {
          var _track$alignmentData$4;
          (0, _updateTrackHelper.updateTrackHelper)({
            currentPairwiseAlignmentIndex: currentPairwiseAlignmentIndex,
            upsertAlignmentRun: upsertAlignmentRun,
            alignmentId: alignmentId,
            alignmentTracks: allTracks,
            alignmentTrackIndex: track.index,
            hasBeenTrimmed: true,
            update: {
              trimmedRange: {
                start: ((_track$alignmentData$4 = track.alignmentData.trimmedRange) === null || _track$alignmentData$4 === void 0 ? void 0 : _track$alignmentData$4.start) || 0,
                end: nearestCaretPos - 1
              }
            }
          });
        }
      }, {
        divider: ""
      }, {
        text: "Clear Trim(s)",
        disabled: !((track === null || track === void 0 ? void 0 : (_track$alignmentData = track.alignmentData) === null || _track$alignmentData === void 0 ? void 0 : (_track$alignmentData$5 = _track$alignmentData.trimmedRange) === null || _track$alignmentData$5 === void 0 ? void 0 : _track$alignmentData$5.start) > -1),
        icon: "trash",
        onClick: function onClick() {
          (0, _updateTrackHelper.updateTrackHelper)({
            currentPairwiseAlignmentIndex: currentPairwiseAlignmentIndex,
            upsertAlignmentRun: upsertAlignmentRun,
            alignmentId: alignmentId,
            alignmentTracks: allTracks,
            alignmentTrackIndex: track.index,
            hasBeenTrimmed: false,
            update: {
              trimmedRange: undefined
            }
          });
        }
      }], undefined, e, function () {
        var _this5$setState6;
        _this5.setState((_this5$setState6 = {}, _this5$setState6["tempTrimmingCaret" + track.index] = undefined, _this5$setState6));
      });
    });
    e.preventDefault();
    e.stopPropagation();
  };
  return AlignmentView;
}(_react["default"].Component);
exports.AlignmentView = AlignmentView;
var _default = (0, _recompose.compose)(_teselagenReactComponents.withStore, _withEditorProps["default"], (0, _reactRedux.connect)(function (state, ownProps) {
  // const {id}
  var alignments = state.VectorEditor.__allEditorsOptions.alignments;
  var alignmentId = ownProps.id,
    updateAlignmentViewVisibility = ownProps.updateAlignmentViewVisibility;
  var alignment = _extends({}, alignments[alignmentId], {
    id: alignmentId
  });
  var _ref21 = alignment || {},
    stateTrackingId = _ref21.stateTrackingId,
    unmappedSeqs = _ref21.unmappedSeqs,
    alignmentTracks = _ref21.alignmentTracks,
    pairwiseAlignments = _ref21.pairwiseAlignments,
    alignmentType = _ref21.alignmentType,
    scrollPercentageToJumpTo = _ref21.scrollPercentageToJumpTo,
    pairwiseOverviewAlignmentTracks = _ref21.pairwiseOverviewAlignmentTracks,
    loading = _ref21.loading,
    alignmentAnnotationVisibility = _ref21.alignmentAnnotationVisibility,
    alignmentAnnotationLabelVisibility = _ref21.alignmentAnnotationLabelVisibility,
    _ref21$caretPosition = _ref21.caretPosition,
    caretPosition = _ref21$caretPosition === void 0 ? -1 : _ref21$caretPosition,
    _ref21$selectionLayer = _ref21.selectionLayer,
    selectionLayer = _ref21$selectionLayer === void 0 ? {
      start: -1,
      end: -1
    } : _ref21$selectionLayer;
  if (loading) {
    return {
      loading: true
    };
  }
  if (!alignmentTracks && !pairwiseAlignments) return {
    noTracks: true
  };
  var templateLength = (pairwiseAlignments ? pairwiseAlignments[0][0] : alignmentTracks[0]).alignmentData.sequence.length;
  var alignmentAnnotationsToToggle = ["features", "parts", "sequence", "reverseSequence", "axis", "translations", "cdsFeatureTranslations", "chromatogram", "dnaColors", "compactNames"];
  var togglableAlignmentAnnotationSettings = {};
  (0, _lodash.map)(alignmentAnnotationsToToggle, function (annotation) {
    if (annotation in alignmentAnnotationVisibility) {
      togglableAlignmentAnnotationSettings[annotation] = alignmentAnnotationVisibility[annotation];
    }
  });
  var annotationsWithCounts = [];
  if (alignmentTracks) {
    var totalNumOfFeatures = 0;
    var totalNumOfParts = 0;
    alignmentTracks.forEach(function (seq) {
      if (seq.sequenceData.features) {
        totalNumOfFeatures += seq.sequenceData.features.length;
      }
      if (seq.sequenceData.parts) {
        totalNumOfParts += seq.sequenceData.parts.length;
      }
    });
    annotationsWithCounts.push({
      features: totalNumOfFeatures,
      parts: totalNumOfParts
    });
  } else if (pairwiseAlignments) {
    pairwiseAlignments.forEach(function (pairwise) {
      var totalNumOfFeatures = 0;
      var totalNumOfParts = 0;
      pairwise.forEach(function (seq) {
        if (seq.sequenceData.features) {
          totalNumOfFeatures += seq.sequenceData.features.length;
        }
        if (seq.sequenceData.parts) {
          totalNumOfParts += seq.sequenceData.parts.length;
        }
      });
      annotationsWithCounts.push({
        features: totalNumOfFeatures,
        parts: totalNumOfParts
      });
    });
  }
  return {
    isAlignment: true,
    selectionLayer: selectionLayer,
    unmappedSeqs: unmappedSeqs,
    caretPosition: caretPosition,
    alignmentId: alignmentId,
    stateTrackingId: stateTrackingId,
    sequenceData: {
      //pass fake seq data in so editor interactions work
      sequence: Array.from(templateLength).map(function () {
        return "a";
      }).join("")
    },
    pairwiseAlignments: pairwiseAlignments,
    alignmentType: alignmentType,
    alignmentTracks: alignmentTracks,
    scrollPercentageToJumpTo: scrollPercentageToJumpTo,
    pairwiseOverviewAlignmentTracks: pairwiseOverviewAlignmentTracks,
    //manipulate the props coming in so we can pass a single clean prop to the visibility options tool
    alignmentVisibilityToolOptions: {
      alignmentAnnotationVisibility: alignmentAnnotationVisibility,
      alignmentAnnotationLabelVisibility: alignmentAnnotationLabelVisibility,
      alignmentAnnotationVisibilityToggle: function alignmentAnnotationVisibilityToggle(updates) {
        setTimeout(function () {
          (0, _updateLabelsForInViewFeatures.updateLabelsForInViewFeatures)({
            rectElement: ".alignmentHolder"
          });
        }, 0);
        updateAlignmentViewVisibility(_extends({}, alignment, {
          alignmentAnnotationVisibility: _extends({}, alignment.alignmentAnnotationVisibility, updates)
        }));
      },
      alignmentAnnotationLabelVisibilityToggle: function alignmentAnnotationLabelVisibilityToggle(name) {
        var _extends2;
        updateAlignmentViewVisibility(_extends({}, alignment, {
          alignmentAnnotationLabelVisibility: _extends({}, alignment.alignmentAnnotationLabelVisibility, (_extends2 = {}, _extends2[name] = !alignment.alignmentAnnotationLabelVisibility[name], _extends2))
        }));
      },
      togglableAlignmentAnnotationSettings: togglableAlignmentAnnotationSettings,
      annotationsWithCounts: annotationsWithCounts
    }
  };
}, _extends({}, alignmentActions)), (0, _recompose.branch)(function (_ref22) {
  var loading = _ref22.loading;
  return loading;
}, (0, _recompose.renderComponent)(function () {
  return /*#__PURE__*/_react["default"].createElement(_teselagenReactComponents.Loading, {
    bounce: true
  });
})), (0, _recompose.branch)(function (_ref23) {
  var noTracks = _ref23.noTracks;
  return noTracks;
}, (0, _recompose.renderComponent)(function () {
  return /*#__PURE__*/_react["default"].createElement("div", {
    style: {
      minHeight: 30,
      minWidth: 150
    }
  }, "\"No Tracks Found\"");
})), (0, _recompose.branch)(function (_ref24) {
  var pairwiseAlignments = _ref24.pairwiseAlignments;
  return pairwiseAlignments;
}, (0, _recompose.renderComponent)(function (props) {
  return /*#__PURE__*/_react["default"].createElement(_PairwiseAlignmentView.PairwiseAlignmentView, props);
})))(AlignmentView);
exports["default"] = _default;
var PerformantCaret = (0, _reactEasyState.view)(function (_ref25) {
  var easyStore = _ref25.easyStore,
    rest = _objectWithoutPropertiesLoose(_ref25, _excluded2);
  return /*#__PURE__*/_react["default"].createElement(_Caret["default"], _extends({
    caretPosition: easyStore.caretPosition
  }, rest));
});
function cleanTracks(alignmentTracks) {
  return alignmentTracks.map(function (t) {
    return (0, _lodash.omit)(t, ["matchHighlightRanges", "additionalSelectionLayers", "mismatches"]);
  });
}