@teselagen/ove 0.7.7 → 0.7.8

package/index.es.js

@@ -17944,25 +17944,16 @@ var getIntrinsic = /* @__PURE__ */ __name(function GetIntrinsic(name2, allowMiss
   return value;
 }, "GetIntrinsic");
 var callBind$3 = { exports: {} };
-var esDefineProperty;
-var hasRequiredEsDefineProperty;
-function requireEsDefineProperty() {
-  if (hasRequiredEsDefineProperty)
-    return esDefineProperty;
-  hasRequiredEsDefineProperty = 1;
-  var GetIntrinsic3 = getIntrinsic;
-  var $defineProperty2 = GetIntrinsic3("%Object.defineProperty%", true) || false;
-  if ($defineProperty2) {
-    try {
-      $defineProperty2({}, "a", { value: 1 });
-    } catch (e2) {
-      $defineProperty2 = false;
-    }
+var GetIntrinsic$4 = getIntrinsic;
+var $defineProperty$2 = GetIntrinsic$4("%Object.defineProperty%", true) || false;
+if ($defineProperty$2) {
+  try {
+    $defineProperty$2({}, "a", { value: 1 });
+  } catch (e2) {
+    $defineProperty$2 = false;
   }
-  esDefineProperty = $defineProperty2;
-  return esDefineProperty;
 }
-__name(requireEsDefineProperty, "requireEsDefineProperty");
+var esDefineProperty = $defineProperty$2;
 var GetIntrinsic$3 = getIntrinsic;
 var $gOPD$1 = GetIntrinsic$3("%Object.getOwnPropertyDescriptor%", true);
 if ($gOPD$1) {
@@ -17973,7 +17964,7 @@ if ($gOPD$1) {
   }
 }
 var gopd$1 = $gOPD$1;
-var $defineProperty$1 = requireEsDefineProperty();
+var $defineProperty$1 = esDefineProperty;
 var $SyntaxError = syntax;
 var $TypeError$4 = type$1;
 var gopd = gopd$1;
@@ -18014,7 +18005,7 @@ var defineDataProperty$1 = /* @__PURE__ */ __name(function defineDataProperty(ob
     throw new $SyntaxError("This environment does not support defining a property as non-configurable, non-writable, or non-enumerable.");
   }
 }, "defineDataProperty");
-var $defineProperty = requireEsDefineProperty();
+var $defineProperty = esDefineProperty;
 var hasPropertyDescriptors = /* @__PURE__ */ __name(function hasPropertyDescriptors2() {
   return !!$defineProperty;
 }, "hasPropertyDescriptors");
@@ -18083,7 +18074,7 @@ var setFunctionLength = /* @__PURE__ */ __name(function setFunctionLength2(fn4,
   var $apply = GetIntrinsic3("%Function.prototype.apply%");
   var $call = GetIntrinsic3("%Function.prototype.call%");
   var $reflectApply = GetIntrinsic3("%Reflect.apply%", true) || bind3.call($call, $apply);
-  var $defineProperty2 = requireEsDefineProperty();
+  var $defineProperty2 = esDefineProperty;
   var $max = GetIntrinsic3("%Math.max%");
   module2.exports = /* @__PURE__ */ __name(function callBind2(originalFunction) {
     if (typeof originalFunction !== "function") {
@@ -116252,21 +116243,20 @@ var pluralize$1 = { exports: {} };
 })(pluralize$1);
 var pluralizeExports = pluralize$1.exports;
 const pluralize = /* @__PURE__ */ getDefaultExportFromCjs(pluralizeExports);
-function Caret$2(props) {
-  const {
-    charWidth: charWidth2,
-    row,
-    sequenceLength,
-    caretPosition: caretPosition2,
-    isProtein: isProtein2,
-    onClick,
-    isDraggable,
-    leftMargin = 0,
-    onRightClick,
-    style: style2,
-    selectionMessage,
-    className = ""
-  } = props;
+function Caret$2({
+  charWidth: charWidth2,
+  row,
+  sequenceLength,
+  caretPosition: caretPosition2,
+  isProtein: isProtein2,
+  onClick,
+  isDraggable,
+  leftMargin = 0,
+  onRightClick,
+  style: style2,
+  selectionMessage,
+  className = ""
+}) {
   if (row.start <= caretPosition2 && row.end + 1 >= caretPosition2 || row.end === sequenceLength - 1 && row.end < caretPosition2) {
     const cursorEl = /* @__PURE__ */ React__default$1.createElement(
       "div",
@@ -119816,7 +119806,7 @@ const annotationsToCompute = {
     hasYOffset: true
   }
 };
-const estimateRowHeight = /* @__PURE__ */ __name((props) => {
+const _estimateRowHeight = /* @__PURE__ */ __name((props) => {
   let {
     index: index2,
     cache: cache2,
@@ -119874,7 +119864,7 @@ const estimateRowHeight = /* @__PURE__ */ __name((props) => {
   }
   cache2[index2] = totalHeight;
   return totalHeight;
-}, "estimateRowHeight");
+}, "_estimateRowHeight");
 function getHeights(heightKey, props) {
   const annotationHeight = !heightKey ? 0 : props[heightKey + "Height"] || (rowHeights[heightKey] || {}).height || 0;
   const marginHeight = (props[heightKey + "MarginTop"] || (rowHeights[heightKey] || {}).marginTop || 0) + (props[heightKey + "MarginBottom"] || (rowHeights[heightKey] || {}).marginBottom || 0);
@@ -121155,7 +121145,7 @@ function showFileDialog({ multiple = false, onSelect }) {
 }
 __name(showFileDialog, "showFileDialog");
 const name = "@teselagen/ove";
-const version = "0.7.6";
+const version = "0.7.7";
 const main = "./src/index.js";
 const type = "module";
 const exports$1 = {
@@ -139413,7 +139403,7 @@ const __RowView = class __RowView extends React__default$1.Component {
     //this function gives a fairly rough height estimate for the rows so that the ReactList can give a good guess of how much space to leave for scrolling and where to jump to in the sequence
     __publicField(this, "estimateRowHeight", /* @__PURE__ */ __name((index2, cache2) => {
       const { annotationVisibility: annotationVisibility2, annotationLabelVisibility: annotationLabelVisibility2, sequenceData: sequenceData2 } = this.props;
-      return estimateRowHeight({
+      return _estimateRowHeight({
         index: index2,
         cache: cache2,
         chromatogramData: sequenceData2.chromatogramData,
@@ -144054,21 +144044,125 @@ try {
     e2
   );
 }
-const _AlignmentView = class _AlignmentView extends React__default$1.Component {
-  constructor(props) {
-    super(props);
-    __publicField(this, "bindOutsideChangeHelper", {});
-    __publicField(this, "getMaxLength", /* @__PURE__ */ __name(() => {
-      const { alignmentTracks } = this.props;
-      const { sequenceData: sequenceData2 = { sequence: "" }, alignmentData } = alignmentTracks[0];
-      const data = alignmentData || sequenceData2;
-      return data.noSequence ? data.size : data.sequence.length;
-    }, "getMaxLength"));
-    __publicField(this, "handleAlignmentCopy", /* @__PURE__ */ __name((event) => {
+const AlignmentView = /* @__PURE__ */ __name((props) => {
+  const {
+    alignmentType,
+    alignmentRunUpdate: alignmentRunUpdate2,
+    alignmentName: _alignmentName,
+    caretPosition: caretPosition2,
+    handleAlignmentSave,
+    id: id2,
+    isFullyZoomedOut,
+    scrollPercentageToJumpTo,
+    selectionLayer: selectionLayer2,
+    sequenceData: sequenceData2,
+    sequenceLength,
+    shouldAutosave,
+    store: store2,
+    height: height2,
+    minimapLaneHeight,
+    minimapLaneSpacing,
+    isInPairwiseOverviewView,
+    noVisibilityOptions,
+    updateAlignmentSortOrder,
+    alignmentSortOrder,
+    handleBackButtonClicked,
+    allowTrimming,
+    additionalSelectionLayerRightClickedOptions,
+    selectionLayerRightClicked,
+    additionalTopEl,
+    additionalTopLeftEl,
+    handleAlignmentRename,
+    stateTrackingId,
+    style: style2,
+    unmappedSeqs
+  } = props;
+  const _a2 = props, {
+    alignmentId,
+    alignmentTrackIndex,
+    alignmentTracks = [],
+    alignmentVisibilityToolOptions,
+    allowTrackNameEdit,
+    allowTrackRearrange,
+    currentPairwiseAlignmentIndex,
+    handleSelectTrack,
+    hasTemplate,
+    isPairwise,
+    linearViewOptions,
+    noClickDragHandlers,
+    pairwiseAlignments,
+    pairwiseOverviewAlignmentTracks,
+    upsertAlignmentRun: upsertAlignmentRun2
+  } = _a2, rest = __objRest(_a2, [
+    "alignmentId",
+    "alignmentTrackIndex",
+    "alignmentTracks",
+    "alignmentVisibilityToolOptions",
+    "allowTrackNameEdit",
+    "allowTrackRearrange",
+    "currentPairwiseAlignmentIndex",
+    "handleSelectTrack",
+    "hasTemplate",
+    "isPairwise",
+    "linearViewOptions",
+    "noClickDragHandlers",
+    "pairwiseAlignments",
+    "pairwiseOverviewAlignmentTracks",
+    "upsertAlignmentRun"
+  ]);
+  const [width, setWidth] = useState(0);
+  const [nameDivWidth, setNameDivWidth] = useState(140);
+  const [charWidthInLinearView, _setCharWidthInLinearView] = useState(
+    charWidthInLinearViewDefault
+  );
+  const [alignmentName, setAlignmentName] = useState(_alignmentName);
+  const [isTrackDragging, setIsTrackDragging] = useState(false);
+  const [saveMessage, setSaveMessage] = useState();
+  const [saveMessageLoading, setSaveMessageLoading] = useState(false);
+  const [tempTrimBefore, setTempTrimBefore] = useState({});
+  const [tempTrimAfter, setTempTrimAfter] = useState({});
+  const [tempTrimmingCaret, setTempTrimmingCaret] = useState({});
+  const bindOutsideChangeHelper = useRef({});
+  const alignmentHolder = useRef(null);
+  const alignmentHolderTop = useRef(null);
+  const veTracksAndAlignmentHolder = useRef(null);
+  const InfiniteScroller = useRef(null);
+  const oldAlignmentHolderScrollTop = useRef(0);
+  const blockScroll = useRef(false);
+  const isZooming = useRef(false);
+  const rowData = useRef({});
+  const latestMouseY = useRef();
+  const easyStore2 = useRef(
+    store$1({
+      selectionLayer: { start: -1, end: -1 },
+      caretPosition: -1,
+      percentScrolled: 0,
+      viewportWidth: 400,
+      verticalVisibleRange: { start: 0, end: 0 }
+    })
+  );
+  const getAllAlignmentsFastaText = useCallback$1(() => {
+    const selectionLayer22 = store2.getState().VectorEditor.__allEditorsOptions.alignments[id2].selectionLayer || {};
+    const seqDataOfAllTracksToCopy = [];
+    alignmentTracks.forEach((track2) => {
+      const seqDataToCopy = getSequenceDataBetweenRange(
+        track2.alignmentData,
+        selectionLayer22
+      ).sequence;
+      seqDataOfAllTracksToCopy.push(
+        `>${track2.alignmentData.name}\r
+${seqDataToCopy}\r
+`
+      );
+    });
+    return seqDataOfAllTracksToCopy.join("");
+  }, [alignmentTracks, id2, store2]);
+  useEffect(() => {
+    const handleAlignmentCopy = /* @__PURE__ */ __name((event) => {
       if (event.key === "c" && !event.shiftKey && (event.metaKey === true || event.ctrlKey === true)) {
         const input = document.createElement("textarea");
         document.body.appendChild(input);
-        const seqDataToCopy = this.getAllAlignmentsFastaText();
+        const seqDataToCopy = getAllAlignmentsFastaText();
         input.value = seqDataToCopy;
         input.select();
         const copySuccess = document.execCommand("copy");
@@ -144080,1319 +144174,688 @@ const _AlignmentView = class _AlignmentView extends React__default$1.Component {
         document.body.removeChild(input);
         event.preventDefault();
       }
-    }, "handleAlignmentCopy"));
-    __publicField(this, "getAllAlignmentsFastaText", /* @__PURE__ */ __name(() => {
-      const selectionLayer2 = this.props.store.getState().VectorEditor.__allEditorsOptions.alignments[this.props.id].selectionLayer || {};
-      const { alignmentTracks } = this.props;
-      const seqDataOfAllTracksToCopy = [];
-      alignmentTracks.forEach((track2) => {
-        const seqDataToCopy = getSequenceDataBetweenRange(
-          track2.alignmentData,
-          selectionLayer2
-        ).sequence;
-        seqDataOfAllTracksToCopy.push(
-          `>${track2.alignmentData.name}\r
-${seqDataToCopy}\r
-`
-        );
-      });
-      return seqDataOfAllTracksToCopy.join("");
-    }, "getAllAlignmentsFastaText"));
-    __publicField(this, "state", {
-      alignmentName: this.props.alignmentName,
-      isTrackDragging: false,
-      charWidthInLinearView: charWidthInLinearViewDefault,
-      scrollAlignmentView: false,
-      width: 0,
-      nameDivWidth: 140
-    });
-    __publicField(this, "easyStore", store$1({
-      selectionLayer: { start: -1, end: -1 },
-      caretPosition: -1,
-      percentScrolled: 0,
-      viewportWidth: 400,
-      verticalVisibleRange: { start: 0, end: 0 }
-    }));
-    __publicField(this, "getMinCharWidth", /* @__PURE__ */ __name((noNameDiv) => {
+    }, "handleAlignmentCopy");
+    document.addEventListener("keydown", handleAlignmentCopy);
+    return () => {
+      document.removeEventListener("keydown", handleAlignmentCopy);
+    };
+  }, [getAllAlignmentsFastaText]);
+  const scrollAlignmentToPercent = /* @__PURE__ */ __name((scrollPercentage) => {
+    const scrollPercentageToUse = Math.min(Math.max(scrollPercentage, 0), 1);
+    easyStore2.current.percentScrolled = scrollPercentageToUse;
+    alignmentHolder.current.scrollLeft = scrollPercentageToUse * (alignmentHolder.current.scrollWidth - alignmentHolder.current.clientWidth);
+    if (alignmentHolderTop.current) {
+      alignmentHolderTop.current.scrollLeft = scrollPercentageToUse * (alignmentHolderTop.current.scrollWidth - alignmentHolderTop.current.clientWidth);
+    }
+  }, "scrollAlignmentToPercent");
+  useEffect(() => {
+    window.scrollAlignmentToPercent = scrollAlignmentToPercent;
+    if (window.Cypress)
+      window.Cypress.scrollAlignmentToPercent = scrollAlignmentToPercent;
+    return () => {
+      delete window.scrollAlignmentToPercent;
+      if (window.Cypress)
+        delete window.Cypress.scrollAlignmentToPercent;
+    };
+  }, []);
+  const maxLength = useMemo$1(() => {
+    const { sequenceData: sequenceData22 = { sequence: "" }, alignmentData } = alignmentTracks[0];
+    const data = alignmentData || sequenceData22;
+    return data.noSequence ? data.size : data.sequence.length;
+  }, [alignmentTracks]);
+  const getSequenceLength = useCallback$1(() => {
+    var _a3, _b2, _c;
+    return ((_c = (_b2 = (_a3 = alignmentTracks == null ? void 0 : alignmentTracks[0]) == null ? void 0 : _a3.alignmentData) == null ? void 0 : _b2.sequence) == null ? void 0 : _c.length) || 1;
+  }, [alignmentTracks]);
+  const getMinCharWidth = useCallback$1(
+    (noNameDiv) => {
       const toReturn = Math.min(
-        Math.max(
-          this.state.width - (noNameDiv ? 0 : this.state.nameDivWidth) - 5,
-          1
-        ) / this.getSequenceLength(),
+        Math.max(width - (noNameDiv ? 0 : nameDivWidth) - 5, 1) / getSequenceLength(),
         10
       );
       if (isNaN(toReturn))
         return 10;
       return toReturn;
-    }, "getMinCharWidth"));
-    __publicField(this, "getSequenceLength", /* @__PURE__ */ __name(() => {
-      const { alignmentTracks: [template] = [] } = this.props;
-      return template.alignmentData.sequence.length || 1;
-    }, "getSequenceLength"));
-    __publicField(this, "annotationClicked", /* @__PURE__ */ __name(({
-      event,
-      annotation,
-      gapsBefore = 0,
-      gapsInside = 0
-    }) => {
-      event.preventDefault && event.preventDefault();
-      event.stopPropagation && event.stopPropagation();
-      this.updateSelectionOrCaret(event.shiftKey, __spreadProps(__spreadValues({}, annotation), {
-        start: annotation.start + gapsBefore,
-        end: annotation.end + gapsBefore + gapsInside
-      }));
-    }, "annotationClicked"));
-    __publicField(this, "updateSelectionOrCaret", /* @__PURE__ */ __name((shiftHeld, newRangeOrCaret, { forceReduxUpdate } = {}) => {
-      const sequenceLength = this.getSequenceLength();
-      updateSelectionOrCaret({
-        doNotWrapOrigin: true,
-        shiftHeld,
-        sequenceLength,
-        newRangeOrCaret,
-        caretPosition: this.easyStore.caretPosition,
-        selectionLayer: this.easyStore.selectionLayer,
-        selectionLayerUpdate: forceReduxUpdate ? this.forceReduxSelectionLayerUpdate : this.selectionLayerUpdate,
-        caretPositionUpdate: this.caretPositionUpdate
-      });
-    }, "updateSelectionOrCaret"));
-    __publicField(this, "caretPositionUpdate", /* @__PURE__ */ __name((position2) => {
-      const { caretPosition: caretPosition2 = -1, alignmentId } = this.props;
-      if (caretPosition2 === position2) {
+    },
+    [getSequenceLength, nameDivWidth, width]
+  );
+  const charWidth2 = useMemo$1(() => {
+    if (isFullyZoomedOut) {
+      return getMinCharWidth();
+    } else {
+      return Math.max(getMinCharWidth(), charWidthInLinearView);
+    }
+  }, [charWidthInLinearView, getMinCharWidth, isFullyZoomedOut]);
+  const debouncedAlignmentRunUpdate = debounce$1(alignmentRunUpdate2, 1e3);
+  const caretPositionUpdate2 = useCallback$1(
+    (position2) => {
+      if ((caretPosition2 || -1) === position2) {
         return;
       }
-      this.easyStore.caretPosition = position2;
-      this.easyStore.selectionLayer = { start: -1, end: -1 };
-      this.debouncedAlignmentRunUpdate({
+      easyStore2.current.caretPosition = position2;
+      easyStore2.current.selectionLayer = { start: -1, end: -1 };
+      debouncedAlignmentRunUpdate({
         alignmentId,
         selectionLayer: { start: -1, end: -1 },
         caretPosition: position2
       });
-    }, "caretPositionUpdate"));
-    __publicField(this, "debouncedAlignmentRunUpdate", debounce$1(this.props.alignmentRunUpdate, 1e3));
-    __publicField(this, "forceReduxSelectionLayerUpdate", /* @__PURE__ */ __name((newSelection) => {
-      this.selectionLayerUpdate(newSelection, { forceReduxUpdate: true });
-    }, "forceReduxSelectionLayerUpdate"));
-    __publicField(this, "selectionLayerUpdate", /* @__PURE__ */ __name((newSelection, { forceReduxUpdate } = {}) => {
-      const { selectionLayer: selectionLayer2 = { start: -1, end: -1 }, alignmentId } = this.props;
+    },
+    [alignmentId, caretPosition2, debouncedAlignmentRunUpdate]
+  );
+  const selectionLayerUpdate2 = useCallback$1(
+    (newSelection, { forceReduxUpdate } = {}) => {
+      const usableSelectionLayer = selectionLayer2 || { start: -1, end: -1 };
       if (!newSelection)
         return;
       const { start: start2, end: end2 } = newSelection;
-      if (selectionLayer2.start === start2 && selectionLayer2.end === end2) {
+      if (usableSelectionLayer.start === start2 && usableSelectionLayer.end === end2) {
         return;
       }
-      this.easyStore.caretPosition = -1;
-      this.easyStore.selectionLayer = newSelection;
-      (forceReduxUpdate ? this.props.alignmentRunUpdate : this.debouncedAlignmentRunUpdate)({
+      easyStore2.current.caretPosition = -1;
+      easyStore2.current.selectionLayer = newSelection;
+      (forceReduxUpdate ? alignmentRunUpdate2 : debouncedAlignmentRunUpdate)({
         alignmentId,
         selectionLayer: newSelection,
         caretPosition: -1
       });
-    }, "selectionLayerUpdate"));
-    __publicField(this, "getCharWidthInLinearView", /* @__PURE__ */ __name(() => {
-      if (this.props.isFullyZoomedOut) {
-        return this.getMinCharWidth();
-      } else {
-        return Math.max(this.getMinCharWidth(), this.state.charWidthInLinearView);
-      }
-    }, "getCharWidthInLinearView"));
-    __publicField(this, "getNumBpsShownInLinearView", /* @__PURE__ */ __name(() => {
-      const toReturn = (this.state.width - this.state.nameDivWidth) / this.getCharWidthInLinearView();
-      return toReturn || 0;
-    }, "getNumBpsShownInLinearView"));
-    __publicField(this, "setVerticalScrollRange", throttle$1(() => {
-      if (this && this.InfiniteScroller && this.InfiniteScroller.getFractionalVisibleRange && this.easyStore) {
-        let [start2, end2] = this.InfiniteScroller.getFractionalVisibleRange();
-        if (this.props.hasTemplate) {
-          end2 = end2 + 1;
-        }
-        if (this.easyStore.verticalVisibleRange.start !== start2 || this.easyStore.verticalVisibleRange.end !== end2)
-          this.easyStore.verticalVisibleRange = { start: start2, end: end2 };
-      }
-    }, 100));
-    __publicField(this, "handleScroll", /* @__PURE__ */ __name(() => {
-      if (this.alignmentHolder.scrollTop !== this.oldAlignmentHolderScrollTop) {
-        setTimeout(() => {
-          this.setVerticalScrollRange();
-          this.oldAlignmentHolderScrollTop = this.alignmentHolder.scrollTop;
-        }, 100);
-      }
-      if (this.blockScroll) {
-        return;
-      }
-      const 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;
-      }
-      updateLabelsForInViewFeatures({ rectElement: ".alignmentHolder" });
-    }, "handleScroll"));
-    __publicField(this, "handleTopScroll", /* @__PURE__ */ __name(() => {
-      this.alignmentHolder.scrollLeft = this.alignmentHolderTop.scrollLeft;
-    }, "handleTopScroll"));
-    /**
-     * Responsible for handling resizing the highlighted region of the minimap
-     * @param {*} newSliderSize
-     * @param {*} newPercent
-     */
-    __publicField(this, "onMinimapSizeAdjust", /* @__PURE__ */ __name((newSliderSize, newPercent) => {
-      const percentageOfSpace = newSliderSize / this.state.width;
-      const seqLength = this.getSequenceLength();
-      const numBpsInView = seqLength * percentageOfSpace;
-      const newCharWidth = (this.state.width - this.state.nameDivWidth) / numBpsInView;
-      this.blockScroll = true;
-      this.setCharWidthInLinearView({ charWidthInLinearView: newCharWidth });
-      setTimeout(() => {
-        this.scrollAlignmentToPercent(newPercent);
-        this.blockScroll = false;
-        updateLabelsForInViewFeatures({ rectElement: ".alignmentHolder" });
-      });
-    }, "onMinimapSizeAdjust"));
-    __publicField(this, "setCharWidthInLinearView", /* @__PURE__ */ __name(({ charWidthInLinearView }) => {
-      window.localStorage.setItem(
-        "charWidthInLinearViewDefault",
-        charWidthInLinearView
-      );
-      this.setState({ charWidthInLinearView });
-      charWidthInLinearViewDefault = JSON.parse(
-        window.localStorage.getItem("charWidthInLinearViewDefault")
-      );
-    }, "setCharWidthInLinearView"));
-    __publicField(this, "scrollToCaret", /* @__PURE__ */ __name(() => {
-      let el = window.document.querySelector(".veCaret:not(.zoomSelection)");
-      if (!el) {
-        el = window.document.querySelector(".veCaret");
-      }
-      if (!el) {
-        return;
-      }
-      el.scrollIntoView({ inline: "center", block: "nearest" });
-    }, "scrollToCaret"));
-    __publicField(this, "scrollAlignmentToPercent", /* @__PURE__ */ __name((scrollPercentage) => {
-      const 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);
-      }
-    }, "scrollAlignmentToPercent"));
-    __publicField(this, "scrollYToTrack", /* @__PURE__ */ __name((trackIndex) => {
-      this.InfiniteScroller.scrollTo(trackIndex);
-    }, "scrollYToTrack"));
-    __publicField(this, "estimateRowHeight", /* @__PURE__ */ __name((index2, cache2) => {
-      const { alignmentVisibilityToolOptions, alignmentTracks } = this.props;
-      const track2 = alignmentTracks[index2];
-      if (!track2)
-        return 100;
-      const { sequenceData: sequenceData2 } = track2;
-      this.rowData = prepareRowData(sequenceData2, sequenceData2.sequence.length);
-      return estimateRowHeight({
-        index: index2,
-        cache: cache2,
-        // clearCache: this.clearCache,
-        row: this.rowData[index2],
-        annotationVisibility: alignmentVisibilityToolOptions.alignmentAnnotationVisibility,
-        annotationLabelVisibility: alignmentVisibilityToolOptions.alignmentAnnotationLabelVisibility
-      });
-    }, "estimateRowHeight"));
-    __publicField(this, "getMaxLinearViewWidth", /* @__PURE__ */ __name(() => {
-      let maxWidth = 0;
-      const charWidthInLinearView = this.getCharWidthInLinearView();
-      forEach$4(this.props.alignmentTracks, (t2) => {
-        const w2 = (t2.alignmentData || t2.sequenceData).sequence.length;
-        if (w2 > maxWidth)
-          maxWidth = w2;
+    },
+    [
+      alignmentId,
+      alignmentRunUpdate2,
+      debouncedAlignmentRunUpdate,
+      selectionLayer2
+    ]
+  );
+  const updateSelectionOrCaret$1 = useCallback$1(
+    (shiftHeld, newRangeOrCaret, { forceReduxUpdate } = {}) => {
+      const forceReduxSelectionLayerUpdate = /* @__PURE__ */ __name((newSelection) => {
+        selectionLayerUpdate2(newSelection, { forceReduxUpdate: true });
+      }, "forceReduxSelectionLayerUpdate");
+      const sequenceLength2 = getSequenceLength();
+      updateSelectionOrCaret({
+        doNotWrapOrigin: true,
+        shiftHeld,
+        sequenceLength: sequenceLength2,
+        newRangeOrCaret,
+        caretPosition: easyStore2.current.caretPosition,
+        selectionLayer: easyStore2.current.selectionLayer,
+        selectionLayerUpdate: forceReduxUpdate ? forceReduxSelectionLayerUpdate : selectionLayerUpdate2,
+        caretPositionUpdate: caretPositionUpdate2
       });
-      return maxWidth * charWidthInLinearView;
-    }, "getMaxLinearViewWidth"));
-    __publicField(this, "renderItem", /* @__PURE__ */ __name((_i, key, isTemplate, cloneProps) => {
-      const charWidthInLinearView = this.getCharWidthInLinearView();
-      const _a2 = this.props, {
-        alignmentTrackIndex,
-        pairwiseAlignments,
-        currentPairwiseAlignmentIndex,
-        pairwiseOverviewAlignmentTracks,
-        alignmentTracks = [],
-        upsertAlignmentRun: upsertAlignmentRun2,
-        alignmentId,
-        noClickDragHandlers,
-        handleSelectTrack,
-        allowTrackRearrange,
-        isPairwise,
-        linearViewOptions,
-        alignmentVisibilityToolOptions,
-        hasTemplate,
-        allowTrackNameEdit
-      } = _a2, rest = __objRest(_a2, [
-        "alignmentTrackIndex",
-        "pairwiseAlignments",
-        "currentPairwiseAlignmentIndex",
-        "pairwiseOverviewAlignmentTracks",
-        "alignmentTracks",
-        "upsertAlignmentRun",
-        "alignmentId",
-        "noClickDragHandlers",
-        "handleSelectTrack",
-        "allowTrackRearrange",
-        "isPairwise",
-        "linearViewOptions",
-        "alignmentVisibilityToolOptions",
-        "hasTemplate",
-        "allowTrackNameEdit"
-      ]);
-      const isDragDisabled = !allowTrackRearrange || isPairwise;
-      let i;
-      if (isTemplate) {
-        i = _i;
-      } else if (hasTemplate) {
-        i = _i + 1;
+    },
+    [caretPositionUpdate2, getSequenceLength, selectionLayerUpdate2]
+  );
+  const getNearestCursorPositionToMouseEvent2 = useCallback$1(
+    (_2, event, callback2) => {
+      let nearestCaretPos = 0;
+      const rowDomNode = veTracksAndAlignmentHolder.current;
+      const boundingRowRect = rowDomNode.getBoundingClientRect();
+      if (getClientX(event) - boundingRowRect.left - nameDivWidth < 0) {
+        nearestCaretPos = 0;
       } else {
-        i = _i;
-      }
-      const track2 = alignmentTracks[i];
-      if (!track2)
-        return null;
-      const {
-        sequenceData: sequenceData2,
-        alignmentData,
-        isReversed,
-        wasTrimmed,
-        additionalSelectionLayers,
-        chromatogramData
-        // mismatches
-      } = track2;
-      const seqLen = this.getMaxLength();
-      const trimmedRangesToDisplay = getTrimmedRangesToDisplay({
-        seqLen,
-        trimmedRange: alignmentData == null ? void 0 : alignmentData.trimmedRange
-      });
-      const linearViewWidth = (alignmentData || sequenceData2).sequence.length * charWidthInLinearView;
-      const name2 = sequenceData2.name || sequenceData2.id;
-      const tickSpacing = massageTickSpacing(
-        Math.ceil(120 / charWidthInLinearView)
-      );
-      const { compactNames } = alignmentVisibilityToolOptions.alignmentAnnotationVisibility;
-      const selectionLayer2 = [
-        this.state[`tempTrimBefore${i}`] || trimmedRangesToDisplay[0],
-        this.state[`tempTrimAfter${i}`] || trimmedRangesToDisplay[1]
-      ].filter((i2) => i2).map((i2) => __spreadProps(__spreadValues({}, i2), {
-        hideCarets: true,
-        ignoreGaps: true,
-        className: "tg-trimmed-region",
-        color: "gray"
-      }));
-      const innerRenderItem = /* @__PURE__ */ __name((provided = {}, snapshot) => {
-        var _a3;
-        return /* @__PURE__ */ React__default$1.createElement(
-          "div",
-          __spreadProps(__spreadValues({
-            ref: provided == null ? void 0 : provided.innerRef
-          }, provided == null ? void 0 : provided.draggableProps), {
-            className: classNames("alignmentViewTrackContainer", {
-              isDragDisabled
-            }),
-            "data-alignment-track-index": i,
-            style: __spreadValues(__spreadValues({
-              boxShadow: isTemplate ? "red 0px -1px 0px 0px inset, red 0px 1px 0px 0px inset" : "0px -1px 0px 0px inset",
-              display: "flex"
-            }, (_a3 = provided == null ? void 0 : provided.draggableProps) == null ? void 0 : _a3.style), (snapshot == null ? void 0 : snapshot.isDragging) && { left: unset }),
-            key: i
-          }),
-          /* @__PURE__ */ React__default$1.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"
-              },
-              "data-title": name2,
-              key: i
-            },
-            /* @__PURE__ */ React__default$1.createElement(
-              "div",
-              __spreadProps(__spreadValues({}, provided == null ? void 0 : provided.dragHandleProps), {
-                style: __spreadProps(__spreadValues({}, compactNames && {
-                  display: "flex",
-                  alignItems: "flex-start"
-                }), {
-                  cursor: !isPairwise && allowTrackRearrange && !isTemplate ? "move" : ""
-                })
-              }),
-              /* @__PURE__ */ React__default$1.createElement(
-                "div",
-                {
-                  className: "alignmentTrackNameDiv",
-                  style: __spreadValues({
-                    background: "#3FA6DA",
-                    display: "inline-block",
-                    color: "white",
-                    borderRadius: 5,
-                    paddingRight: 5
-                  }, compactNames && {
-                    marginRight: 5
-                  })
-                },
-                allowTrackNameEdit && /* @__PURE__ */ React__default$1.createElement(
-                  Button,
-                  {
-                    onClick: () => {
-                      showDialog({
-                        ModalComponent: EditTrackNameDialog,
-                        props: {
-                          initialValues: {
-                            name: name2
-                          },
-                          updateName: ({ newName }) => {
-                            updateTrackHelper({
-                              currentPairwiseAlignmentIndex,
-                              pairwiseAlignments,
-                              upsertAlignmentRun: upsertAlignmentRun2,
-                              alignmentId,
-                              alignmentTracks,
-                              alignmentTrackIndex: i,
-                              update: { name: newName }
-                            });
-                          }
-                        }
-                      });
-                    },
-                    small: true,
-                    "data-tip": "Edit Track Name",
-                    className: "edit-track-name-btn",
-                    icon: /* @__PURE__ */ React__default$1.createElement(Icon, { size: 12, color: "lightgrey", icon: "edit" }),
-                    minimal: true
-                  }
-                ),
-                sequenceData2.seqLink && /* @__PURE__ */ React__default$1.createElement(
-                  AnchorButton,
-                  {
-                    href: sequenceData2.seqLink,
-                    "data-tip": sequenceData2.seqLinkTooltip,
-                    target: "_blank",
-                    small: true,
-                    icon: /* @__PURE__ */ React__default$1.createElement(Icon, { size: 12, color: "white", icon: "document-open" }),
-                    minimal: true
-                  }
-                ),
-                name2
-              ),
-              /* @__PURE__ */ React__default$1.createElement("div", { style: { fontSize: 10, marginTop: 2, marginBottom: 2 } }, isReversed && /* @__PURE__ */ React__default$1.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$1.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"
-              ), sequenceData2.sequence.length, " bps")
-            ),
-            /* @__PURE__ */ React__default$1.createElement(
-              HorizontalPanelDragHandle,
-              {
-                onDrag: ({ dx }) => {
-                  this.setState({
-                    nameDivWidth: Math.min(
-                      this.state.nameDivWidth - dx,
-                      this.state.width - 20
-                    )
-                  });
-                }
-              }
-            )
-          ),
-          handleSelectTrack && !isTemplate && /* @__PURE__ */ React__default$1.createElement(
-            "div",
-            {
-              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$1.createElement(
-            NonReduxEnhancedLinearView,
-            __spreadValues({}, __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, rest), {
-              caretPosition: this.state[`tempTrimmingCaret${i}`] || -1,
-              selectionLayer: selectionLayer2,
-              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: noop$7,
-              //override these since we're defining the handlers above
-              editorDragStopped: noop$7,
-              //override these since we're defining the handlers above
-              editorDragged: noop$7,
-              //override these since we're defining the handlers above
-              hideName: true,
-              sequenceData: sequenceData2,
-              // sequenceDataWithRefSeqCdsFeatures,
-              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,
-              chromatogramData,
-              height: "100%",
-              vectorInteractionWrapperStyle: {
-                overflowY: "hidden"
-              },
-              withZoomLinearView: false,
-              marginWidth: 0,
-              linearViewCharWidth: charWidthInLinearView,
-              ignoreGapsOnHighlight: true
-            }), linearViewOptions && (isFunction$7(linearViewOptions) ? linearViewOptions({
-              index: i,
-              isTemplate,
-              alignmentVisibilityToolOptions,
-              sequenceData: sequenceData2,
-              alignmentData,
-              chromatogramData
-            }) : linearViewOptions)), {
-              additionalSelectionLayers,
-              dimensions: {
-                width: linearViewWidth
-              },
-              width: linearViewWidth,
-              paddingBottom: 5,
-              scrollDataPassed: this.easyStore
-            }))
-          )
+        const clickXPositionRelativeToRowContainer = getClientX(event) - boundingRowRect.left - nameDivWidth;
+        const numberOfBPsInFromRowStart = Math.floor(
+          (clickXPositionRelativeToRowContainer + charWidth2 / 2) / charWidth2
         );
-      }, "innerRenderItem");
-      if (isTemplate)
-        return innerRenderItem();
-      if (cloneProps)
-        return innerRenderItem(cloneProps.provided, cloneProps.snapshot);
-      const idToUse = alignmentData.id || sequenceData2.id || i + "_index_id";
-      return /* @__PURE__ */ React__default$1.createElement(
-        PublicDraggable,
-        {
-          key: idToUse.toString(),
-          index: i,
-          isDragDisabled,
-          draggableId: idToUse.toString()
-        },
-        innerRenderItem
-      );
-    }, "renderItem"));
-    __publicField(this, "handleResize", throttle$1(([e2]) => {
-      this.easyStore.viewportWidth = e2.contentRect.width - this.state.nameDivWidth || 400;
-      this.setState({ width: e2.contentRect.width });
-    }, 200));
-    __publicField(this, "removeMinimapHighlightForMouseLeave", /* @__PURE__ */ __name(() => {
-      const minimapLaneEl = document.querySelector(`.minimapLane.lane-hovered`);
-      if (!minimapLaneEl)
-        return;
-      minimapLaneEl.classList.remove("lane-hovered");
-    }, "removeMinimapHighlightForMouseLeave"));
-    __publicField(this, "updateMinimapHighlightForMouseMove", /* @__PURE__ */ __name((event) => {
-      this.latestMouseY = getClientY(event);
-      this.updateMinimapHighlight();
-    }, "updateMinimapHighlightForMouseMove"));
-    __publicField(this, "updateMinimapHighlight", /* @__PURE__ */ __name(() => {
-      const rows = document.querySelectorAll(`.alignmentViewTrackContainer`);
-      const rowsLength = document.querySelectorAll(`.minimapLane`).length;
-      if (rowsLength <= 4) {
-        return;
-      }
-      some(rows, (rowDomNode) => {
-        const boundingRowRect = rowDomNode.getBoundingClientRect();
-        if (this.latestMouseY > boundingRowRect.top && this.latestMouseY < boundingRowRect.top + boundingRowRect.height) {
-          const prevMinimapLaneEl = document.querySelector(
-            `.minimapLane.lane-hovered`
-          );
-          if (prevMinimapLaneEl) {
-            prevMinimapLaneEl.classList.remove("lane-hovered");
-          }
-          const i = Number(rowDomNode.getAttribute("data-alignment-track-index"));
-          const minimapLaneEl = document.querySelector(
-            `.minimapLane:nth-child(${i + 1})`
-          );
-          if (!minimapLaneEl)
-            return;
-          minimapLaneEl.classList.add("lane-hovered");
-          return true;
+        nearestCaretPos = numberOfBPsInFromRowStart + 0;
+        if (nearestCaretPos > maxLength + 1) {
+          nearestCaretPos = maxLength + 1;
         }
-      });
-    }, "updateMinimapHighlight"));
-    __publicField(this, "onTrackDragStart", /* @__PURE__ */ __name(() => {
-      this.setState({ isTrackDragging: true });
-    }, "onTrackDragStart"));
-    __publicField(this, "onTrackDragEnd", /* @__PURE__ */ __name(({ destination, source }) => {
-      this.setState({ isTrackDragging: false });
-      if (!destination) {
-        return;
       }
-      const { upsertAlignmentRun: upsertAlignmentRun2, alignmentId, alignmentTracks } = this.props;
-      upsertAlignmentRun2({
-        id: alignmentId,
-        alignmentTracks: array_move(
-          alignmentTracks,
-          source.index,
-          destination.index
+      if (sequenceData2 == null ? void 0 : sequenceData2.isProtein) {
+        nearestCaretPos = Math.round(nearestCaretPos / 3) * 3;
+      }
+      if (sequenceLength === 0)
+        nearestCaretPos = 0;
+      const callbackVals = {
+        updateSelectionOrCaret: updateSelectionOrCaret$1,
+        nearestCaretPos,
+        sequenceLength: getSequenceLength(),
+        caretPosition: easyStore2.current.caretPosition,
+        selectionLayer: easyStore2.current.selectionLayer,
+        easyStore: easyStore2.current,
+        caretPositionUpdate: caretPositionUpdate2,
+        selectionLayerUpdate: selectionLayerUpdate2,
+        event,
+        doNotWrapOrigin: true,
+        shiftHeld: event.shiftKey,
+        // caretGrabbed: event.target.className === "cursor",
+        selectionStartGrabbed: event.target.classList.contains(
+          draggableClassnames.selectionStart
+        ),
+        selectionEndGrabbed: event.target.classList.contains(
+          draggableClassnames.selectionEnd
         )
+      };
+      callback2(callbackVals);
+    },
+    [
+      caretPositionUpdate2,
+      charWidth2,
+      getSequenceLength,
+      maxLength,
+      nameDivWidth,
+      selectionLayerUpdate2,
+      sequenceData2 == null ? void 0 : sequenceData2.isProtein,
+      sequenceLength,
+      updateSelectionOrCaret$1
+    ]
+  );
+  useEffect(() => {
+    const updateAlignmentSelection = /* @__PURE__ */ __name((newRangeOrCaret) => {
+      updateSelectionOrCaret$1(false, newRangeOrCaret, {
+        forceReduxUpdate: true
       });
-    }, "onTrackDragEnd"));
-    window.scrollAlignmentToPercent = this.scrollAlignmentToPercent;
+    }, "updateAlignmentSelection");
+    window.updateAlignmentSelection = updateAlignmentSelection;
     if (window.Cypress)
-      window.Cypress.scrollAlignmentToPercent = this.scrollAlignmentToPercent;
-    this.onShortcutCopy = document.addEventListener(
-      "keydown",
-      this.handleAlignmentCopy
-    );
-  }
-  getNearestCursorPositionToMouseEvent(rowData, event, callback2) {
-    this.charWidth = this.getCharWidthInLinearView();
-    let nearestCaretPos = 0;
-    const rowDomNode = this.veTracksAndAlignmentHolder;
-    const boundingRowRect = rowDomNode.getBoundingClientRect();
-    const maxEnd = this.getMaxLength();
-    if (getClientX(event) - boundingRowRect.left - this.state.nameDivWidth < 0) {
-      nearestCaretPos = 0;
-    } else {
-      const clickXPositionRelativeToRowContainer = getClientX(event) - boundingRowRect.left - this.state.nameDivWidth;
-      const numberOfBPsInFromRowStart = Math.floor(
-        (clickXPositionRelativeToRowContainer + this.charWidth / 2) / this.charWidth
-      );
-      nearestCaretPos = numberOfBPsInFromRowStart + 0;
-      if (nearestCaretPos > maxEnd + 1) {
-        nearestCaretPos = maxEnd + 1;
+      window.Cypress.updateAlignmentSelection = updateAlignmentSelection;
+    return () => {
+      delete window.updateAlignmentSelection;
+      if (window.Cypress) {
+        delete window.Cypress.updateAlignmentSelection;
       }
-    }
-    if (this.props.sequenceData && this.props.sequenceData.isProtein) {
-      nearestCaretPos = Math.round(nearestCaretPos / 3) * 3;
-    }
-    if (this.props.sequenceLength === 0)
-      nearestCaretPos = 0;
-    const callbackVals = {
-      updateSelectionOrCaret: this.updateSelectionOrCaret,
-      nearestCaretPos,
-      sequenceLength: this.getSequenceLength(),
-      caretPosition: this.easyStore.caretPosition,
-      selectionLayer: this.easyStore.selectionLayer,
-      easyStore: this.easyStore,
-      caretPositionUpdate: this.caretPositionUpdate,
-      selectionLayerUpdate: this.selectionLayerUpdate,
-      event,
-      doNotWrapOrigin: true,
-      shiftHeld: event.shiftKey,
-      // caretGrabbed: event.target.className === "cursor",
-      selectionStartGrabbed: event.target.classList.contains(
-        draggableClassnames.selectionStart
-      ),
-      selectionEndGrabbed: event.target.classList.contains(
-        draggableClassnames.selectionEnd
-      )
     };
-    callback2(callbackVals);
-  }
-  componentWillUnmount() {
-    if (window.Cypress) {
-      delete window.scrollAlignmentToPercent;
-      delete window.Cypress.scrollAlignmentToPercent;
-      delete window.updateAlignmentSelection;
-      delete window.Cypress.updateAlignmentSelection;
-    }
-    this.onShortcutCopy && document.removeEventListener("keydown", this.handleAlignmentCopy);
-  }
-  componentDidUpdate(prevProps) {
-    return __async(this, null, function* () {
-      if (prevProps.scrollPercentageToJumpTo !== this.props.scrollPercentageToJumpTo && this.props.scrollPercentageToJumpTo !== void 0) {
-        this.scrollAlignmentToPercent(this.props.scrollPercentageToJumpTo);
+  }, [updateSelectionOrCaret$1]);
+  const setVerticalScrollRange = throttle$1(() => {
+    if (InfiniteScroller.current && InfiniteScroller.current.getFractionalVisibleRange && easyStore2.current) {
+      let [start2, end2] = InfiniteScroller.current.getFractionalVisibleRange();
+      if (hasTemplate) {
+        end2 = end2 + 1;
       }
-      if (this.props.shouldAutosave && prevProps && prevProps.stateTrackingId && this.props.stateTrackingId !== prevProps.stateTrackingId) {
-        this.setState({ saveMessage: "Alignment Saving.." });
-        this.setState({ saveMessageLoading: true });
+      if (easyStore2.current.verticalVisibleRange.start !== start2 || easyStore2.current.verticalVisibleRange.end !== end2)
+        easyStore2.current.verticalVisibleRange = { start: start2, end: end2 };
+    }
+  }, 100);
+  useEffect(() => {
+    setTimeout(() => {
+      updateLabelsForInViewFeatures({ rectElement: ".alignmentHolder" });
+    }, 0);
+    setTimeout(() => {
+      setVerticalScrollRange();
+    }, 500);
+  });
+  useEffect(() => {
+    if (scrollPercentageToJumpTo !== void 0) {
+      scrollAlignmentToPercent(scrollPercentageToJumpTo);
+    }
+  }, [scrollPercentageToJumpTo]);
+  useEffect(() => {
+    const saveAlignment = /* @__PURE__ */ __name(() => __async(void 0, null, function* () {
+      if (shouldAutosave && stateTrackingId) {
+        setSaveMessage("Alignment Saving..");
+        setSaveMessageLoading(true);
         let cleanedTracks;
-        if (this.props.pairwiseAlignments) {
-          cleanedTracks = this.props.pairwiseAlignments.map(cleanTracks);
+        if (pairwiseAlignments) {
+          cleanedTracks = pairwiseAlignments.map(cleanTracks);
         } else {
-          cleanedTracks = cleanTracks(this.props.alignmentTracks);
+          cleanedTracks = cleanTracks(alignmentTracks);
         }
-        yield this.props.handleAlignmentSave(cleanedTracks, this.props);
-        this.setState({ saveMessage: "Alignment Saved" });
-        this.setState({ saveMessageLoading: false });
+        yield handleAlignmentSave(cleanedTracks);
+        setSaveMessage("Alignment Saved");
+        setSaveMessageLoading(false);
         setTimeout(() => {
-          this.setState({ saveMessage: void 0 });
-          this.setState({ saveMessageLoading: false });
+          setSaveMessage(void 0);
+          setSaveMessageLoading(false);
         }, 5e3);
       }
-    });
-  }
-  componentDidMount() {
-    const updateAlignmentSelection = /* @__PURE__ */ __name((newRangeOrCaret) => {
-      this.updateSelectionOrCaret(false, newRangeOrCaret, {
-        forceReduxUpdate: true
-      });
-    }, "updateAlignmentSelection");
-    window.updateAlignmentSelection = updateAlignmentSelection;
-    if (window.Cypress)
-      window.Cypress.updateAlignmentSelection = updateAlignmentSelection;
+    }), "saveAlignment");
+    saveAlignment();
+  }, [
+    alignmentTracks,
+    handleAlignmentSave,
+    pairwiseAlignments,
+    shouldAutosave,
+    stateTrackingId
+  ]);
+  const annotationClicked = /* @__PURE__ */ __name(({
+    event,
+    annotation,
+    gapsBefore = 0,
+    gapsInside = 0
+  }) => {
+    event.preventDefault && event.preventDefault();
+    event.stopPropagation && event.stopPropagation();
+    updateSelectionOrCaret$1(event.shiftKey, __spreadProps(__spreadValues({}, annotation), {
+      start: annotation.start + gapsBefore,
+      end: annotation.end + gapsBefore + gapsInside
+    }));
+  }, "annotationClicked");
+  const getNumBpsShownInLinearView = /* @__PURE__ */ __name(() => {
+    const toReturn = (width - nameDivWidth) / charWidth2;
+    return toReturn || 0;
+  }, "getNumBpsShownInLinearView");
+  const handleScroll = /* @__PURE__ */ __name(() => {
+    if (alignmentHolder.current.scrollTop !== oldAlignmentHolderScrollTop.current) {
+      setTimeout(() => {
+        setVerticalScrollRange();
+        oldAlignmentHolderScrollTop.current = alignmentHolder.current.scrollTop;
+      }, 100);
+    }
+    if (blockScroll.current) {
+      return;
+    }
+    const scrollPercentage = alignmentHolder.current.scrollLeft / (alignmentHolder.current.scrollWidth - alignmentHolder.current.clientWidth);
+    easyStore2.current.percentScrolled = scrollPercentage || 0;
+    if (!isZooming.current) {
+      easyStore2.current.percentScrolledPreZoom = easyStore2.current.percentScrolled;
+    }
+    if (alignmentHolderTop.current) {
+      alignmentHolderTop.current.scrollLeft = alignmentHolder.current.scrollLeft;
+    }
+    updateLabelsForInViewFeatures({ rectElement: ".alignmentHolder" });
+  }, "handleScroll");
+  const handleTopScroll = /* @__PURE__ */ __name(() => {
+    alignmentHolder.current.scrollLeft = alignmentHolderTop.current.scrollLeft;
+  }, "handleTopScroll");
+  const onMinimapSizeAdjust = /* @__PURE__ */ __name((newSliderSize, newPercent) => {
+    const percentageOfSpace = newSliderSize / width;
+    const seqLength = getSequenceLength();
+    const numBpsInView = seqLength * percentageOfSpace;
+    const newCharWidth = (width - nameDivWidth) / numBpsInView;
+    blockScroll.current = true;
+    setCharWidthInLinearView({ charWidthInLinearView: newCharWidth });
     setTimeout(() => {
+      scrollAlignmentToPercent(newPercent);
+      blockScroll.current = false;
       updateLabelsForInViewFeatures({ rectElement: ".alignmentHolder" });
-    }, 0);
-    setTimeout(() => {
-      this.setVerticalScrollRange();
-    }, 500);
-  }
-  render() {
-    const charWidthInLinearView = this.getCharWidthInLinearView();
-    const {
-      alignmentTracks = [],
-      height: height2,
-      minimapLaneHeight,
-      minimapLaneSpacing,
-      isInPairwiseOverviewView,
-      isPairwise,
-      currentPairwiseAlignmentIndex,
-      hasTemplate,
-      noVisibilityOptions,
-      updateAlignmentSortOrder,
-      alignmentSortOrder,
-      handleBackButtonClicked,
-      noClickDragHandlers,
-      upsertAlignmentRun: upsertAlignmentRun2,
-      alignmentId,
-      allowTrimming,
-      additionalSelectionLayerRightClickedOptions,
-      selectionLayerRightClicked,
-      additionalTopEl,
-      additionalTopLeftEl,
-      handleAlignmentRename,
-      alignmentVisibilityToolOptions
-    } = this.props;
-    const sequenceLength = this.getMaxLength();
-    if (!alignmentTracks || !alignmentTracks[0] || !alignmentTracks[0].alignmentData) {
-      console.error("corrupted data!", this.props);
-      return "corrupted data!";
-    }
-    const getTrackVis = /* @__PURE__ */ __name((alignmentTracks2, isTemplate, allTracks) => {
-      const rowData = {};
-      const innerTrackVis = /* @__PURE__ */ __name((drop_provided, drop_snapshot) => {
-        return /* @__PURE__ */ React__default$1.createElement(
-          "div",
-          {
-            className: "alignmentTracks ",
-            style: {
-              overflowY: "auto",
-              display: "flex",
-              zIndex: 10
-            }
-          },
-          /* @__PURE__ */ React__default$1.createElement(
-            "div",
-            {
-              style: {
-                overflowX: "auto",
-                width: this.state.width
-              },
-              ref: (ref2) => {
-                this[isTemplate ? "alignmentHolderTop" : "alignmentHolder"] = ref2;
-              },
-              onContextMenu: (e2) => {
-                if (!allowTrimming || isTargetWithinEl(e2, ".alignmentTrackName")) {
-                  return;
-                }
-                this.getTrackTrimmingOptions({
-                  e: e2,
-                  allTracks,
-                  upsertAlignmentRun: upsertAlignmentRun2,
-                  alignmentId,
-                  currentPairwiseAlignmentIndex
-                });
-              },
-              onMouseLeave: this.removeMinimapHighlightForMouseLeave,
-              onMouseMove: this.updateMinimapHighlightForMouseMove,
-              dataname: "scrollGroup",
-              className: "alignmentHolder",
-              onScroll: isTemplate ? this.handleTopScroll : this.handleScroll
-            },
-            /* @__PURE__ */ React__default$1.createElement(
-              ReactDraggable,
-              {
-                disabled: this.state.isTrackDragging,
-                bounds: { top: 0, left: 0, right: 0, bottom: 0 },
-                onDrag: noClickDragHandlers ? noop$7 : (event) => {
-                  if (this.state.isTrackDragging)
-                    return;
-                  this.getNearestCursorPositionToMouseEvent(
-                    rowData,
-                    event,
-                    editorDragged
-                  );
-                },
-                onStart: noClickDragHandlers ? noop$7 : (event) => {
-                  if (isTargetWithinEl(event, ".alignmentTrackName")) {
-                    return this.setState({ isTrackDragging: true });
-                  }
-                  if (this.state.isTrackDragging)
-                    return;
-                  this.getNearestCursorPositionToMouseEvent(
-                    rowData,
-                    event,
-                    editorDragStarted
-                  );
-                },
-                onStop: noClickDragHandlers ? noop$7 : (...args) => {
-                  setTimeout(() => {
-                    this.setState({ isTrackDragging: false });
-                  }, 0);
-                  editorDragStopped(...args);
-                }
-              },
-              /* @__PURE__ */ React__default$1.createElement(
-                "div",
-                {
-                  ref: (ref2) => this.veTracksAndAlignmentHolder = ref2,
-                  className: classNames("veTracksAndAlignmentHolder", {
-                    isTrackDragging: this.state.isTrackDragging
-                  }),
-                  onClick: noClickDragHandlers ? noop$7 : (event) => {
-                    if (this.state.isTrackDragging)
-                      return;
-                    if (isTargetWithinEl(event, ".alignmentTrackName")) {
-                      return;
-                    }
-                    this.getNearestCursorPositionToMouseEvent(
-                      rowData,
-                      event,
-                      editorClicked
-                    );
-                  }
-                },
-                /* @__PURE__ */ React__default$1.createElement(
-                  PerformantSelectionLayer,
-                  {
-                    leftMargin: this.state.nameDivWidth,
-                    className: "veAlignmentSelectionLayer",
-                    isDraggable: true,
-                    selectionLayerRightClicked: selectionLayerRightClicked ? (...args) => {
-                      selectionLayerRightClicked(...args, this.props);
-                    } : (...args) => {
-                      const { event } = args[0];
-                      const track2 = getTrackFromEvent(event, allTracks);
-                      const alignmentData = track2.alignmentData;
-                      const { name: name2 } = alignmentData;
-                      const copySpecificAlignmentFasta = /* @__PURE__ */ __name(() => __async(this, null, function* () {
-                        const { selectionLayer: selectionLayer2 } = this.props.store.getState().VectorEditor.__allEditorsOptions.alignments[this.props.id] || {};
-                        const seqDataToCopy = getSequenceDataBetweenRange(
-                          alignmentData,
-                          selectionLayer2
-                        ).sequence;
-                        const seqDataToCopyAsFasta = `>${name2}\r
-${seqDataToCopy}\r
-`;
-                        yield navigator.clipboard.writeText(
-                          seqDataToCopyAsFasta
-                        );
-                      }), "copySpecificAlignmentFasta");
-                      const copySpecificAlignment = /* @__PURE__ */ __name(() => __async(this, null, function* () {
-                        const { selectionLayer: selectionLayer2 } = this.props.store.getState().VectorEditor.__allEditorsOptions.alignments[this.props.id] || {};
-                        const seqDataToCopy = getSequenceDataBetweenRange(
-                          alignmentData,
-                          selectionLayer2
-                        ).sequence;
-                        yield navigator.clipboard.writeText(
-                          seqDataToCopy
-                        );
-                      }), "copySpecificAlignment");
-                      const getAllAlignmentsFastaText = /* @__PURE__ */ __name(() => __async(this, null, function* () {
-                        yield navigator.clipboard.writeText(
-                          this.getAllAlignmentsFastaText()
-                        );
-                      }), "getAllAlignmentsFastaText");
-                      showContextMenu(
-                        [
-                          ...additionalSelectionLayerRightClickedOptions ? additionalSelectionLayerRightClickedOptions(
-                            ...args,
-                            this.props
-                          ) : [],
-                          {
-                            text: "Copy Selection of All Alignments as Fasta",
-                            className: "copyAllAlignmentsFastaClipboardHelper",
-                            hotkey: "cmd+c",
-                            onClick: () => {
-                              getAllAlignmentsFastaText();
-                              window.toastr.success("Selection Copied");
-                            }
-                          },
-                          {
-                            text: `Copy Selection of ${name2} as Fasta`,
-                            className: "copySpecificAlignmentFastaClipboardHelper",
-                            onClick: () => {
-                              copySpecificAlignmentFasta();
-                              window.toastr.success(
-                                "Selection Copied As Fasta"
-                              );
-                            }
-                          },
-                          {
-                            text: `Copy Selection of ${name2}`,
-                            className: "copySpecificAlignmentAsPlainClipboardHelper",
-                            onClick: () => {
-                              copySpecificAlignment();
-                              window.toastr.success("Selection Copied");
-                            }
-                          }
-                        ],
-                        void 0,
-                        event
-                      );
-                    },
-                    easyStore: this.easyStore,
-                    sequenceLength,
-                    charWidth: this.getCharWidthInLinearView(),
-                    row: { start: 0, end: sequenceLength - 1 }
-                  }
-                ),
-                /* @__PURE__ */ React__default$1.createElement(
-                  PerformantCaret,
-                  {
-                    leftMargin: this.state.nameDivWidth,
-                    className: "veAlignmentSelectionLayer",
-                    isDraggable: true,
-                    sequenceLength,
-                    charWidth: this.getCharWidthInLinearView(),
-                    row: { start: 0, end: sequenceLength - 1 },
-                    easyStore: this.easyStore
-                  }
-                ),
-                isTemplate ? this.renderItem(0, 0, isTemplate) : /* @__PURE__ */ React__default$1.createElement(
-                  ReactList,
-                  {
-                    ref: (c2) => {
-                      this.InfiniteScroller = c2;
-                      const domNode = ReactDOM$1.findDOMNode(c2);
-                      if (domNode instanceof HTMLElement) {
-                        drop_provided.innerRef(domNode);
-                      }
-                    },
-                    type: "variable",
-                    itemSizeEstimator: this.estimateRowHeight,
-                    itemRenderer: this.renderItem,
-                    length: alignmentTracks2.length + (drop_snapshot.isUsingPlaceholder ? 1 : 0)
-                  }
-                )
-              )
-            )
-          )
-        );
-      }, "innerTrackVis");
-      if (isTemplate)
-        return innerTrackVis();
-      else
-        return /* @__PURE__ */ React__default$1.createElement(
-          ConnectedDroppable$1,
-          {
-            mode: "virtual",
-            renderClone: (provided, snapshot, { source: { index: index2 } }) => {
-              return this.renderItem(index2, index2, false, {
-                provided,
-                snapshot
-              });
-            },
-            direction: "vertical",
-            droppableId: "droppable" + isTemplate ? "_no_drop" : ""
-          },
-          innerTrackVis
-        );
-    }, "getTrackVis");
-    const [firstTrack, ...otherTracks] = alignmentTracks;
-    const totalWidthOfMinimap = this.state.width;
-    const totalWidthInAlignmentView = 14 * this.getSequenceLength();
-    const minSliderSize = Math.min(
-      totalWidthOfMinimap * (totalWidthOfMinimap / totalWidthInAlignmentView),
-      totalWidthOfMinimap
+    });
+  }, "onMinimapSizeAdjust");
+  const setCharWidthInLinearView = /* @__PURE__ */ __name(({ charWidthInLinearView: charWidthInLinearView2 }) => {
+    window.localStorage.setItem(
+      "charWidthInLinearViewDefault",
+      charWidthInLinearView2
     );
-    const viewportHeight = Math.max(
-      document.documentElement.clientHeight,
-      window.innerHeight || 0
+    _setCharWidthInLinearView(charWidthInLinearView2);
+    charWidthInLinearViewDefault = JSON.parse(
+      window.localStorage.getItem("charWidthInLinearViewDefault")
     );
-    const pinchHandler = {
-      onPinch: ({ delta: [d2] }) => {
-        this.bindOutsideChangeHelper.triggerChange(({ value, changeValue }) => {
-          if (d2 > 0) {
-            if (value > 8) {
-              changeValue(value + 0.4);
-            } else {
-              changeValue(value + 0.2);
-            }
-          } else if (d2 < 0) {
-            if (value > 8) {
-              changeValue(value - 0.4);
-            } else {
-              changeValue(value - 0.2);
-            }
-          }
-        });
-        updateLabelsForInViewFeatures();
-      }
-    };
-    return /* @__PURE__ */ React__default$1.createElement(PinchHelper, __spreadValues({}, pinchHandler), /* @__PURE__ */ React__default$1.createElement(ResizeSensor, { onResize: this.handleResize }, /* @__PURE__ */ React__default$1.createElement(
-      "div",
-      {
-        style: __spreadValues({
-          height: height2 || (isPairwise ? "auto" : viewportHeight * 0.88),
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "space-between",
-          position: "relative",
-          overflowY: "auto"
-        }, this.props.style),
-        className: "alignmentView"
-      },
-      /* @__PURE__ */ React__default$1.createElement(
-        DragDropContext,
-        {
-          onDragStart: this.onTrackDragStart,
-          onDragEnd: this.onTrackDragEnd
-        },
+  }, "setCharWidthInLinearView");
+  const scrollToCaret2 = /* @__PURE__ */ __name(() => {
+    let el = window.document.querySelector(".veCaret:not(.zoomSelection)");
+    if (!el) {
+      el = window.document.querySelector(".veCaret");
+    }
+    if (!el) {
+      return;
+    }
+    el.scrollIntoView({ inline: "center", block: "nearest" });
+  }, "scrollToCaret");
+  const scrollYToTrack = /* @__PURE__ */ __name((trackIndex) => {
+    InfiniteScroller.current.scrollTo(trackIndex);
+  }, "scrollYToTrack");
+  const estimateRowHeight = /* @__PURE__ */ __name((index2, cache2) => {
+    const track2 = alignmentTracks[index2];
+    if (!track2)
+      return 100;
+    const { sequenceData: sequenceData22 } = track2;
+    rowData.current = prepareRowData(
+      sequenceData22,
+      sequenceData22.sequence.length
+    );
+    return _estimateRowHeight({
+      index: index2,
+      cache: cache2,
+      row: rowData.current[index2],
+      annotationVisibility: alignmentVisibilityToolOptions.alignmentAnnotationVisibility,
+      annotationLabelVisibility: alignmentVisibilityToolOptions.alignmentAnnotationLabelVisibility
+    });
+  }, "estimateRowHeight");
+  const renderItem = /* @__PURE__ */ __name((_i, key, isTemplate, cloneProps) => {
+    const isDragDisabled = !allowTrackRearrange || isPairwise;
+    let i;
+    if (isTemplate) {
+      i = _i;
+    } else if (hasTemplate) {
+      i = _i + 1;
+    } else {
+      i = _i;
+    }
+    const track2 = alignmentTracks == null ? void 0 : alignmentTracks[i];
+    if (!track2)
+      return null;
+    const {
+      sequenceData: sequenceData22,
+      alignmentData,
+      isReversed,
+      wasTrimmed,
+      additionalSelectionLayers,
+      chromatogramData
+      // mismatches
+    } = track2;
+    const seqLen = maxLength;
+    const trimmedRangesToDisplay = getTrimmedRangesToDisplay({
+      seqLen,
+      trimmedRange: alignmentData == null ? void 0 : alignmentData.trimmedRange
+    });
+    const linearViewWidth = (alignmentData || sequenceData22).sequence.length * charWidth2;
+    const name2 = sequenceData22.name || sequenceData22.id;
+    const tickSpacing = massageTickSpacing(Math.ceil(120 / charWidth2));
+    const { compactNames } = alignmentVisibilityToolOptions.alignmentAnnotationVisibility;
+    const selectionLayer22 = [
+      tempTrimBefore[i] || trimmedRangesToDisplay[0],
+      tempTrimAfter[i] || trimmedRangesToDisplay[1]
+    ].filter((i2) => i2).map((i2) => __spreadProps(__spreadValues({}, i2), {
+      hideCarets: true,
+      ignoreGaps: true,
+      className: "tg-trimmed-region",
+      color: "gray"
+    }));
+    const innerRenderItem = /* @__PURE__ */ __name((provided = {}, snapshot) => {
+      var _a3;
+      return /* @__PURE__ */ React__default$1.createElement(
+        "div",
+        __spreadProps(__spreadValues({
+          ref: provided == null ? void 0 : provided.innerRef
+        }, provided == null ? void 0 : provided.draggableProps), {
+          className: classNames("alignmentViewTrackContainer", {
+            isDragDisabled
+          }),
+          "data-alignment-track-index": i,
+          style: __spreadValues(__spreadValues({
+            boxShadow: isTemplate ? "red 0px -1px 0px 0px inset, red 0px 1px 0px 0px inset" : "0px -1px 0px 0px inset",
+            display: "flex"
+          }, (_a3 = provided == null ? void 0 : provided.draggableProps) == null ? void 0 : _a3.style), (snapshot == null ? void 0 : snapshot.isDragging) && { left: unset }),
+          key: i
+        }),
         /* @__PURE__ */ React__default$1.createElement(
           "div",
           {
+            className: "alignmentTrackName",
             style: {
-              display: "flex",
-              flexDirection: "column",
-              position: "relative",
-              overflowY: "auto"
+              position: "sticky",
+              left: 0,
+              zIndex: 10,
+              borderBottom: `1px solid ${isTemplate ? "red" : "lightgray"}`,
+              borderRight: `1px solid ${isTemplate ? "red" : "lightgray"}`,
+              width: nameDivWidth - 3,
+              padding: 2,
+              marginRight: 3,
+              paddingBottom: 0,
+              minWidth: nameDivWidth - 3,
+              overflow: "hidden",
+              scrollbarWidth: "none",
+              whiteSpace: "nowrap"
             },
-            className: "alignmentView-top-container"
+            "data-title": name2,
+            key: i
           },
           /* @__PURE__ */ React__default$1.createElement(
             "div",
-            {
-              style: {
-                paddingTop: "3px",
-                paddingBottom: "5px",
-                borderBottom: "1px solid",
+            __spreadProps(__spreadValues({}, provided == null ? void 0 : provided.dragHandleProps), {
+              style: __spreadProps(__spreadValues({}, compactNames && {
                 display: "flex",
-                minHeight: "32px",
-                width: "100%",
-                flexWrap: "nowrap",
-                flexDirection: "row",
-                flex: "0 0 auto"
-              },
-              className: "ve-alignment-top-bar"
-            },
-            additionalTopLeftEl,
-            handleBackButtonClicked && /* @__PURE__ */ React__default$1.createElement(Tooltip, { content: "Back to Pairwise Alignment Overview" }, /* @__PURE__ */ React__default$1.createElement(
-              Button,
-              {
-                icon: "arrow-left",
-                onClick: () => {
-                  handleBackButtonClicked();
-                  this.caretPositionUpdate(-1);
-                },
-                small: true,
-                intent: Intent.PRIMARY,
-                minimal: true,
-                style: { marginRight: 10 },
-                className: "alignmentViewBackButton"
-              }
-            )),
-            /* @__PURE__ */ React__default$1.createElement("div", { style: { display: "flex" } }, /* @__PURE__ */ React__default$1.createElement(
-              EditableText,
-              {
-                disabled: !handleAlignmentRename,
-                onChange: (v2) => {
-                  this.setState({
-                    alignmentName: v2
-                  });
-                },
-                maxLength: 399,
-                value: this.state.alignmentName,
-                onConfirm: (v2) => __async(this, null, function* () {
-                  if (!v2) {
-                    this.setState({
-                      alignmentName: this.props.alignmentName
-                    });
-                    return;
-                  }
-                  if (v2 === this.props.alignmentName) {
-                    return;
-                  }
-                  this.setState({ saveMessage: "Alignment Renaming.." });
-                  this.setState({ saveMessageLoading: true });
-                  yield handleAlignmentRename(v2, this.props);
-                  this.setState({ saveMessage: "Rename Successful" });
-                  this.setState({ saveMessageLoading: false });
-                  setTimeout(() => {
-                    this.setState({ saveMessage: void 0 });
-                    this.setState({ saveMessageLoading: false });
-                  }, 5e3);
-                }),
-                selectAllOnFocus: true,
-                className: "veAlignmentName"
-              }
-            ), "   ", /* @__PURE__ */ React__default$1.createElement(
+                alignItems: "flex-start"
+              }), {
+                cursor: !isPairwise && allowTrackRearrange && !isTemplate ? "move" : ""
+              })
+            }),
+            /* @__PURE__ */ React__default$1.createElement(
               "div",
               {
-                className: "veAlignmentType",
-                style: {
-                  paddingTop: "3px",
-                  fontSize: "14px",
-                  color: "grey",
-                  maxWidth: "300px",
-                  overflow: "hidden",
-                  textOverflow: "ellipsis",
-                  whiteSpace: "nowrap"
-                },
-                "data-title": this.props.alignmentType || "Unknown Alignment Type"
+                className: "alignmentTrackNameDiv",
+                style: __spreadValues({
+                  background: "#3FA6DA",
+                  display: "inline-block",
+                  color: "white",
+                  borderRadius: 5,
+                  paddingRight: 5
+                }, compactNames && {
+                  marginRight: 5
+                })
               },
-              this.props.alignmentType || "Unknown Alignment Type"
-            )),
-            this.props.unmappedSeqs && /* @__PURE__ */ React__default$1.createElement(
-              InfoHelper,
-              {
-                size: 20,
-                content: /* @__PURE__ */ React__default$1.createElement("div", null, "This alignment had sequences that did not map to the template sequence:", this.props.unmappedSeqs.map(
-                  ({ sequenceData: sequenceData2 }, i) => /* @__PURE__ */ React__default$1.createElement("div", { key: i }, sequenceData2.name)
-                )),
-                intent: "warning",
-                icon: "warning-sign"
-              }
-            ),
-            !isInPairwiseOverviewView && /* @__PURE__ */ React__default$1.createElement(
-              UncontrolledSliderWithPlusMinusBtns,
-              {
-                noWraparound: true,
-                bindOutsideChangeHelper: this.bindOutsideChangeHelper,
-                onClick: () => {
-                  setTimeout(this.scrollToCaret, 0);
-                },
-                minCharWidth: this.getMinCharWidth(),
-                onChange: (zoomLvl) => __async(this, null, function* () {
-                  this.isZooming = true;
-                  setTimeout(() => {
-                    this.isZooming = false;
-                  }, 10);
-                  const minCharWidth = this.getMinCharWidth();
-                  const scaleFactor = Math.pow(12 / minCharWidth, 1 / 10);
-                  const newCharWidth = minCharWidth * Math.pow(scaleFactor, zoomLvl);
-                  yield this.setCharWidthInLinearView({
-                    charWidthInLinearView: newCharWidth
-                  });
-                  yield this.scrollToCaret();
-                  yield updateLabelsForInViewFeatures({
-                    rectElement: ".alignmentHolder"
-                  });
-                }),
-                coerceInitialValue,
-                title: "Adjust Zoom Level",
-                style: { paddingTop: "4px", width: 100 },
-                className: "veZoomAlignmentSlider ove-slider",
-                labelRenderer: false,
-                initialValue: charWidthInLinearView,
-                stepSize: 0.05,
-                max: 10,
-                min: 0,
-                clickStepSize: 0.5
-              }
-            ),
-            !noVisibilityOptions && !isInPairwiseOverviewView && /* @__PURE__ */ React__default$1.createElement(
-              AlignmentVisibilityTool,
-              __spreadValues({
-                currentPairwiseAlignmentIndex
-              }, alignmentVisibilityToolOptions)
-            ),
-            updateAlignmentSortOrder && !isInPairwiseOverviewView && /* @__PURE__ */ React__default$1.createElement(
-              Popover,
-              {
-                minimal: true,
-                content: /* @__PURE__ */ React__default$1.createElement(Menu, null, /* @__PURE__ */ React__default$1.createElement(
-                  MenuItem,
-                  {
-                    active: true,
-                    onClick: () => {
-                      updateAlignmentSortOrder("Position");
-                    },
-                    text: "Position"
-                  }
-                ), /* @__PURE__ */ React__default$1.createElement(
-                  MenuItem,
-                  {
-                    active: alignmentSortOrder,
-                    onClick: () => {
-                      updateAlignmentSortOrder("Alphabetical");
-                    },
-                    text: "Alphabetical"
-                  }
-                )),
-                target: /* @__PURE__ */ React__default$1.createElement(
-                  Button,
-                  {
-                    small: true,
-                    text: "Sort Order",
-                    rightIcon: "caret-down",
-                    icon: "sort"
-                  }
-                )
-              }
+              allowTrackNameEdit && /* @__PURE__ */ React__default$1.createElement(
+                Button,
+                {
+                  onClick: () => {
+                    showDialog({
+                      ModalComponent: EditTrackNameDialog,
+                      props: {
+                        initialValues: {
+                          name: name2
+                        },
+                        updateName: ({ newName }) => {
+                          updateTrackHelper({
+                            currentPairwiseAlignmentIndex,
+                            pairwiseAlignments,
+                            upsertAlignmentRun: upsertAlignmentRun2,
+                            alignmentId,
+                            alignmentTracks: alignmentTracks || [],
+                            alignmentTrackIndex: i,
+                            update: { name: newName }
+                          });
+                        }
+                      }
+                    });
+                  },
+                  small: true,
+                  "data-tip": "Edit Track Name",
+                  className: "edit-track-name-btn",
+                  icon: /* @__PURE__ */ React__default$1.createElement(Icon, { size: 12, color: "lightgrey", icon: "edit" }),
+                  minimal: true
+                }
+              ),
+              sequenceData22.seqLink && /* @__PURE__ */ React__default$1.createElement(
+                AnchorButton,
+                {
+                  href: sequenceData22.seqLink,
+                  "data-tip": sequenceData22.seqLinkTooltip,
+                  target: "_blank",
+                  small: true,
+                  icon: /* @__PURE__ */ React__default$1.createElement(Icon, { size: 12, color: "white", icon: "document-open" }),
+                  minimal: true
+                }
+              ),
+              name2
             ),
-            additionalTopEl,
-            this.state.saveMessage && /* @__PURE__ */ React__default$1.createElement(
-              "div",
+            /* @__PURE__ */ React__default$1.createElement("div", { style: { fontSize: 10, marginTop: 2, marginBottom: 2 } }, isReversed && /* @__PURE__ */ React__default$1.createElement(
+              "span",
               {
-                className: "ove-menu-toast",
                 style: {
-                  display: "flex",
-                  alignItems: "center",
-                  marginLeft: "auto",
-                  marginRight: 10
-                }
+                  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"
               },
-              this.state.saveMessageLoading ? /* @__PURE__ */ React__default$1.createElement("div", null, /* @__PURE__ */ React__default$1.createElement(Spinner, { size: 15 })) : /* @__PURE__ */ React__default$1.createElement(Icon, { icon: "tick-circle", intent: "success" }),
-              " ",
-              " ",
-              this.state.saveMessage
-            )
-          ),
-          hasTemplate ? /* @__PURE__ */ React__default$1.createElement(React__default$1.Fragment, null, /* @__PURE__ */ React__default$1.createElement("div", { className: "alignmentTrackFixedToTop" }, getTrackVis([firstTrack], true, alignmentTracks)), getTrackVis(otherTracks, false, alignmentTracks)) : getTrackVis(alignmentTracks, false, alignmentTracks)
-        )
-      ),
-      !isInPairwiseOverviewView && /* @__PURE__ */ React__default$1.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$1.createElement(
-          Minimap,
-          __spreadProps(__spreadValues({}, {
-            selectionLayerComp: /* @__PURE__ */ React__default$1.createElement(React__default$1.Fragment, null, /* @__PURE__ */ React__default$1.createElement(
-              PerformantSelectionLayer,
-              {
-                is: true,
-                hideCarets: true,
-                className: "veAlignmentSelectionLayer veMinimapSelectionLayer",
-                easyStore: this.easyStore,
-                sequenceLength,
-                charWidth: this.getMinCharWidth(true),
-                row: { start: 0, end: sequenceLength - 1 }
-              }
-            ), /* @__PURE__ */ React__default$1.createElement(
-              PerformantCaret,
+              isReversed ? "REV" : "FWD",
+              " "
+            ), wasTrimmed && /* @__PURE__ */ React__default$1.createElement(
+              "span",
               {
                 style: {
-                  opacity: 0.2
+                  backgroundColor: "#13C9BA",
+                  padding: 2,
+                  paddingLeft: 4,
+                  color: "white",
+                  marginRight: 2,
+                  borderRadius: "5px"
                 },
-                className: "veAlignmentSelectionLayer veMinimapSelectionLayer",
-                sequenceLength,
-                charWidth: this.getMinCharWidth(true),
-                row: { start: 0, end: sequenceLength - 1 },
-                easyStore: this.easyStore
+                "data-tip": "This sequence was trimmed and resubmitted for alignment"
+              },
+              "TRIMMED"
+            ), sequenceData22.sequence.length, " bps")
+          ),
+          /* @__PURE__ */ React__default$1.createElement(
+            HorizontalPanelDragHandle,
+            {
+              onDrag: ({ dx }) => {
+                setNameDivWidth(Math.min(nameDivWidth - dx, width - 20));
               }
-            )),
-            alignmentTracks,
+            }
+          )
+        ),
+        handleSelectTrack && !isTemplate && /* @__PURE__ */ React__default$1.createElement(
+          "div",
+          {
+            onClick: () => {
+              handleSelectTrack(i);
+            },
+            style: {
+              position: "absolute",
+              opacity: 0,
+              height: "100%",
+              left: nameDivWidth,
+              width: linearViewWidth,
+              fontWeight: "bolder",
+              cursor: "pointer",
+              padding: 5,
+              textAlign: "center",
+              zIndex: 400
+            },
+            className: "alignmentViewSelectTrackPopover veWhiteBackground"
+          },
+          "Inspect track"
+        ),
+        /* @__PURE__ */ React__default$1.createElement(
+          NonReduxEnhancedLinearView,
+          __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, rest), {
+            caretPosition: tempTrimmingCaret[i] || -1,
+            selectionLayer: selectionLayer22,
+            isInAlignment: true,
+            annotationVisibilityOverrides: alignmentVisibilityToolOptions.alignmentAnnotationVisibility,
+            linearViewAnnotationLabelVisibilityOverrides: alignmentVisibilityToolOptions.alignmentAnnotationLabelVisibility,
+            marginWith: 0,
+            orfClicked: annotationClicked,
+            primerClicked: annotationClicked,
+            translationClicked: annotationClicked,
+            cutsiteClicked: annotationClicked,
+            translationDoubleClicked: annotationClicked,
+            deletionLayerClicked: annotationClicked,
+            replacementLayerClicked: annotationClicked,
+            featureClicked: annotationClicked,
+            partClicked: annotationClicked,
+            searchLayerClicked: annotationClicked,
+            editorDragStarted: noop$7,
+            editorDragStopped: noop$7,
+            editorDragged: noop$7,
+            hideName: true,
+            sequenceData: sequenceData22,
+            tickSpacing,
+            allowSeqDataOverride: true,
+            editorName: `${isTemplate ? "template_" : ""}alignmentView${i}`,
+            alignmentData,
+            chromatogramData,
+            height: "100%",
+            vectorInteractionWrapperStyle: {
+              overflowY: "hidden"
+            },
+            withZoomLinearView: false,
+            marginWidth: 0,
+            linearViewCharWidth: charWidth2,
+            ignoreGapsOnHighlight: true
+          }), linearViewOptions && (isFunction$7(linearViewOptions) ? linearViewOptions({
+            index: i,
+            isTemplate,
+            alignmentVisibilityToolOptions,
+            sequenceData: sequenceData22,
+            alignmentData,
+            chromatogramData
+          }) : linearViewOptions)), {
+            additionalSelectionLayers,
             dimensions: {
-              width: Math.max(this.state.width, 10) || 10
+              width: linearViewWidth
             },
-            nameDivOffsetPercent: 0,
-            // this.state.nameDivWidth / this.getMaxLinearViewWidth(),
-            scrollYToTrack: this.scrollYToTrack,
-            onSizeAdjust: this.onMinimapSizeAdjust,
-            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
+            width: linearViewWidth,
+            paddingBottom: 5,
+            scrollDataPassed: easyStore2.current
           })
         )
-      ),
-      /* @__PURE__ */ React__default$1.createElement(
-        GlobalDialog,
-        null
+      );
+    }, "innerRenderItem");
+    if (isTemplate)
+      return innerRenderItem();
+    if (cloneProps)
+      return innerRenderItem(cloneProps.provided, cloneProps.snapshot);
+    const idToUse = alignmentData.id || sequenceData22.id || i + "_index_id";
+    return /* @__PURE__ */ React__default$1.createElement(
+      PublicDraggable,
+      {
+        key: idToUse.toString(),
+        index: i,
+        isDragDisabled,
+        draggableId: idToUse.toString()
+      },
+      innerRenderItem
+    );
+  }, "renderItem");
+  const handleResize = throttle$1(([e2]) => {
+    easyStore2.current.viewportWidth = e2.contentRect.width - nameDivWidth || 400;
+    setWidth(e2.contentRect.width);
+  }, 200);
+  const removeMinimapHighlightForMouseLeave = /* @__PURE__ */ __name(() => {
+    const minimapLaneEl = document.querySelector(`.minimapLane.lane-hovered`);
+    if (!minimapLaneEl)
+      return;
+    minimapLaneEl.classList.remove("lane-hovered");
+  }, "removeMinimapHighlightForMouseLeave");
+  const updateMinimapHighlightForMouseMove = /* @__PURE__ */ __name((event) => {
+    latestMouseY.current = getClientY(event);
+    updateMinimapHighlight();
+  }, "updateMinimapHighlightForMouseMove");
+  const updateMinimapHighlight = /* @__PURE__ */ __name(() => {
+    const rows = document.querySelectorAll(`.alignmentViewTrackContainer`);
+    const rowsLength = document.querySelectorAll(`.minimapLane`).length;
+    if (rowsLength <= 4) {
+      return;
+    }
+    some(rows, (rowDomNode) => {
+      const boundingRowRect = rowDomNode.getBoundingClientRect();
+      if (latestMouseY.current > boundingRowRect.top && latestMouseY.current < boundingRowRect.top + boundingRowRect.height) {
+        const prevMinimapLaneEl = document.querySelector(
+          `.minimapLane.lane-hovered`
+        );
+        if (prevMinimapLaneEl) {
+          prevMinimapLaneEl.classList.remove("lane-hovered");
+        }
+        const i = Number(rowDomNode.getAttribute("data-alignment-track-index"));
+        const minimapLaneEl = document.querySelector(
+          `.minimapLane:nth-child(${i + 1})`
+        );
+        if (!minimapLaneEl)
+          return;
+        minimapLaneEl.classList.add("lane-hovered");
+        return true;
+      }
+    });
+  }, "updateMinimapHighlight");
+  const onTrackDragStart = /* @__PURE__ */ __name(() => {
+    setIsTrackDragging(true);
+  }, "onTrackDragStart");
+  const onTrackDragEnd = /* @__PURE__ */ __name(({ destination, source }) => {
+    setIsTrackDragging(false);
+    if (!destination) {
+      return;
+    }
+    upsertAlignmentRun2({
+      id: alignmentId,
+      alignmentTracks: array_move(
+        alignmentTracks,
+        source.index,
+        destination.index
       )
-    )));
-  }
-  getTrackTrimmingOptions({
+    });
+  }, "onTrackDragEnd");
+  const getTrackTrimmingOptions = /* @__PURE__ */ __name(({
     e: e2,
     allTracks,
-    upsertAlignmentRun: upsertAlignmentRun2,
-    currentPairwiseAlignmentIndex,
-    alignmentId
-  }) {
+    upsertAlignmentRun: upsertAlignmentRun22,
+    currentPairwiseAlignmentIndex: currentPairwiseAlignmentIndex2,
+    alignmentId: alignmentId2
+  }) => {
     const track2 = getTrackFromEvent(e2, allTracks);
-    this.getNearestCursorPositionToMouseEvent(
-      this.rowData,
+    getNearestCursorPositionToMouseEvent2(
+      rowData.current,
       e2,
       ({ nearestCaretPos }) => {
-        var _a2, _b2, _c, _d;
-        this.setState({
-          [`tempTrimmingCaret${track2.index}`]: nearestCaretPos
-        });
-        const afterDisabled = nearestCaretPos <= ((_a2 = track2.alignmentData.trimmedRange) == null ? void 0 : _a2.start);
+        var _a3, _b2, _c, _d;
+        setTempTrimmingCaret((prev) => __spreadProps(__spreadValues({}, prev), {
+          [track2.index]: nearestCaretPos
+        }));
+        const afterDisabled = nearestCaretPos <= ((_a3 = track2.alignmentData.trimmedRange) == null ? void 0 : _a3.start);
         const beforeDisabled = nearestCaretPos > ((_b2 = track2.alignmentData.trimmedRange) == null ? void 0 : _b2.end);
         showContextMenu(
           [
@@ -145413,28 +144876,25 @@ ${seqDataToCopy}\r
               text: "Ignore Before",
               disabled: beforeDisabled,
               icon: "drawer-left-filled",
-              onMouseOver: () => !beforeDisabled && this.setState({
-                [`tempTrimBefore${track2.index}`]: {
-                  start: 0,
-                  end: nearestCaretPos - 1
-                }
-              }),
-              onMouseLeave: () => this.setState({
-                [`tempTrimBefore${track2.index}`]: void 0
-              }),
+              onMouseOver: () => !beforeDisabled && setTempTrimBefore((prev) => __spreadProps(__spreadValues({}, prev), {
+                [track2.index]: { start: 0, end: nearestCaretPos - 1 }
+              })),
+              onMouseLeave: () => setTempTrimBefore((prev) => __spreadProps(__spreadValues({}, prev), {
+                [track2.index]: void 0
+              })),
               onClick: () => {
-                var _a3;
+                var _a4;
                 updateTrackHelper({
-                  currentPairwiseAlignmentIndex,
-                  upsertAlignmentRun: upsertAlignmentRun2,
-                  alignmentId,
+                  currentPairwiseAlignmentIndex: currentPairwiseAlignmentIndex2,
+                  upsertAlignmentRun: upsertAlignmentRun22,
+                  alignmentId: alignmentId2,
                   alignmentTracks: allTracks,
                   alignmentTrackIndex: track2.index,
                   hasBeenTrimmed: true,
                   update: {
                     trimmedRange: {
                       start: nearestCaretPos,
-                      end: ((_a3 = track2.alignmentData.trimmedRange) == null ? void 0 : _a3.end) || this.getMaxLength() - 1
+                      end: ((_a4 = track2.alignmentData.trimmedRange) == null ? void 0 : _a4.end) || maxLength - 1
                     }
                   }
                 });
@@ -145444,27 +144904,24 @@ ${seqDataToCopy}\r
               text: "Ignore After",
               disabled: afterDisabled,
               icon: "drawer-right-filled",
-              onMouseOver: () => !afterDisabled && this.setState({
-                [`tempTrimAfter${track2.index}`]: {
-                  start: nearestCaretPos,
-                  end: this.getMaxLength() - 1
-                }
-              }),
-              onMouseLeave: () => this.setState({
-                [`tempTrimAfter${track2.index}`]: void 0
-              }),
+              onMouseOver: () => !afterDisabled && setTempTrimAfter((prev) => __spreadProps(__spreadValues({}, prev), {
+                [track2.index]: { start: nearestCaretPos, end: maxLength - 1 }
+              })),
+              onMouseLeave: () => setTempTrimAfter((prev) => __spreadProps(__spreadValues({}, prev), {
+                [track2.index]: void 0
+              })),
               onClick: () => {
-                var _a3;
+                var _a4;
                 updateTrackHelper({
-                  currentPairwiseAlignmentIndex,
-                  upsertAlignmentRun: upsertAlignmentRun2,
-                  alignmentId,
+                  currentPairwiseAlignmentIndex: currentPairwiseAlignmentIndex2,
+                  upsertAlignmentRun: upsertAlignmentRun22,
+                  alignmentId: alignmentId2,
                   alignmentTracks: allTracks,
                   alignmentTrackIndex: track2.index,
                   hasBeenTrimmed: true,
                   update: {
                     trimmedRange: {
-                      start: ((_a3 = track2.alignmentData.trimmedRange) == null ? void 0 : _a3.start) || 0,
+                      start: ((_a4 = track2.alignmentData.trimmedRange) == null ? void 0 : _a4.start) || 0,
                       end: nearestCaretPos - 1
                     }
                   }
@@ -145480,9 +144937,9 @@ ${seqDataToCopy}\r
               icon: "trash",
               onClick: () => {
                 updateTrackHelper({
-                  currentPairwiseAlignmentIndex,
-                  upsertAlignmentRun: upsertAlignmentRun2,
-                  alignmentId,
+                  currentPairwiseAlignmentIndex: currentPairwiseAlignmentIndex2,
+                  upsertAlignmentRun: upsertAlignmentRun22,
+                  alignmentId: alignmentId2,
                   alignmentTracks: allTracks,
                   alignmentTrackIndex: track2.index,
                   hasBeenTrimmed: false,
@@ -145496,19 +144953,562 @@ ${seqDataToCopy}\r
           void 0,
           e2,
           () => {
-            this.setState({
-              [`tempTrimmingCaret${track2.index}`]: void 0
-            });
+            setTempTrimAfter((prev) => __spreadProps(__spreadValues({}, prev), { [track2.index]: void 0 }));
           }
         );
       }
     );
     e2.preventDefault();
     e2.stopPropagation();
+  }, "getTrackTrimmingOptions");
+  if (!alignmentTracks || !alignmentTracks[0] || !alignmentTracks[0].alignmentData) {
+    console.error("corrupted data!", props);
+    return "corrupted data!";
   }
-};
-__name(_AlignmentView, "AlignmentView");
-let AlignmentView = _AlignmentView;
+  const getTrackVis = /* @__PURE__ */ __name((alignmentTracks2, isTemplate, allTracks) => {
+    const rowData2 = {};
+    const innerTrackVis = /* @__PURE__ */ __name((drop_provided, drop_snapshot) => {
+      return /* @__PURE__ */ React__default$1.createElement(
+        "div",
+        {
+          className: "alignmentTracks ",
+          style: {
+            overflowY: "auto",
+            display: "flex",
+            zIndex: 10
+          }
+        },
+        /* @__PURE__ */ React__default$1.createElement(
+          "div",
+          {
+            style: { overflowX: "auto", width },
+            ref: (ref2) => {
+              if (isTemplate) {
+                alignmentHolderTop.current = ref2;
+              } else {
+                alignmentHolder.current = ref2;
+              }
+            },
+            onContextMenu: (e2) => {
+              if (!allowTrimming || isTargetWithinEl(e2, ".alignmentTrackName")) {
+                return;
+              }
+              getTrackTrimmingOptions({
+                e: e2,
+                allTracks,
+                upsertAlignmentRun: upsertAlignmentRun2,
+                alignmentId,
+                currentPairwiseAlignmentIndex
+              });
+            },
+            onMouseLeave: removeMinimapHighlightForMouseLeave,
+            onMouseMove: updateMinimapHighlightForMouseMove,
+            dataname: "scrollGroup",
+            className: "alignmentHolder",
+            onScroll: isTemplate ? handleTopScroll : handleScroll
+          },
+          /* @__PURE__ */ React__default$1.createElement(
+            ReactDraggable,
+            {
+              disabled: isTrackDragging,
+              bounds: { top: 0, left: 0, right: 0, bottom: 0 },
+              onDrag: noClickDragHandlers ? noop$7 : (event) => {
+                if (isTrackDragging)
+                  return;
+                getNearestCursorPositionToMouseEvent2(
+                  rowData2,
+                  event,
+                  editorDragged
+                );
+              },
+              onStart: noClickDragHandlers ? noop$7 : (event) => {
+                if (isTargetWithinEl(event, ".alignmentTrackName")) {
+                  setIsTrackDragging(true);
+                  return;
+                }
+                if (isTrackDragging)
+                  return;
+                getNearestCursorPositionToMouseEvent2(
+                  rowData2,
+                  event,
+                  editorDragStarted
+                );
+              },
+              onStop: noClickDragHandlers ? noop$7 : (...args) => {
+                setTimeout(() => {
+                  setIsTrackDragging(false);
+                }, 0);
+                editorDragStopped(...args);
+              }
+            },
+            /* @__PURE__ */ React__default$1.createElement(
+              "div",
+              {
+                ref: veTracksAndAlignmentHolder,
+                className: classNames("veTracksAndAlignmentHolder", {
+                  isTrackDragging
+                }),
+                onClick: noClickDragHandlers ? noop$7 : (event) => {
+                  if (isTrackDragging)
+                    return;
+                  if (isTargetWithinEl(event, ".alignmentTrackName")) {
+                    return;
+                  }
+                  getNearestCursorPositionToMouseEvent2(
+                    rowData2,
+                    event,
+                    editorClicked
+                  );
+                }
+              },
+              /* @__PURE__ */ React__default$1.createElement(
+                PerformantSelectionLayer,
+                {
+                  leftMargin: nameDivWidth,
+                  className: "veAlignmentSelectionLayer",
+                  isDraggable: true,
+                  selectionLayerRightClicked: selectionLayerRightClicked ? (...args) => {
+                    selectionLayerRightClicked(...args, props);
+                  } : (...args) => {
+                    const { event } = args[0];
+                    const track2 = getTrackFromEvent(event, allTracks);
+                    const alignmentData = track2.alignmentData;
+                    const { name: name2 } = alignmentData;
+                    const copySpecificAlignmentFasta = /* @__PURE__ */ __name(() => __async(void 0, null, function* () {
+                      const { selectionLayer: selectionLayer22 } = store2.getState().VectorEditor.__allEditorsOptions.alignments[id2] || {};
+                      const seqDataToCopy = getSequenceDataBetweenRange(
+                        alignmentData,
+                        selectionLayer22
+                      ).sequence;
+                      const seqDataToCopyAsFasta = `>${name2}\r
+${seqDataToCopy}\r
+`;
+                      yield navigator.clipboard.writeText(
+                        seqDataToCopyAsFasta
+                      );
+                    }), "copySpecificAlignmentFasta");
+                    const copySpecificAlignment = /* @__PURE__ */ __name(() => __async(void 0, null, function* () {
+                      const { selectionLayer: selectionLayer22 } = store2.getState().VectorEditor.__allEditorsOptions.alignments[id2] || {};
+                      const seqDataToCopy = getSequenceDataBetweenRange(
+                        alignmentData,
+                        selectionLayer22
+                      ).sequence;
+                      yield navigator.clipboard.writeText(seqDataToCopy);
+                    }), "copySpecificAlignment");
+                    const getAllAlignmentsFastaText2 = /* @__PURE__ */ __name(() => __async(void 0, null, function* () {
+                      yield navigator.clipboard.writeText(
+                        getAllAlignmentsFastaText2()
+                      );
+                    }), "getAllAlignmentsFastaText2");
+                    showContextMenu(
+                      [
+                        ...additionalSelectionLayerRightClickedOptions ? additionalSelectionLayerRightClickedOptions(
+                          ...args,
+                          props
+                        ) : [],
+                        {
+                          text: "Copy Selection of All Alignments as Fasta",
+                          className: "copyAllAlignmentsFastaClipboardHelper",
+                          hotkey: "cmd+c",
+                          onClick: () => {
+                            getAllAlignmentsFastaText2();
+                            window.toastr.success("Selection Copied");
+                          }
+                        },
+                        {
+                          text: `Copy Selection of ${name2} as Fasta`,
+                          className: "copySpecificAlignmentFastaClipboardHelper",
+                          onClick: () => {
+                            copySpecificAlignmentFasta();
+                            window.toastr.success(
+                              "Selection Copied As Fasta"
+                            );
+                          }
+                        },
+                        {
+                          text: `Copy Selection of ${name2}`,
+                          className: "copySpecificAlignmentAsPlainClipboardHelper",
+                          onClick: () => {
+                            copySpecificAlignment();
+                            window.toastr.success("Selection Copied");
+                          }
+                        }
+                      ],
+                      void 0,
+                      event
+                    );
+                  },
+                  easyStore: easyStore2.current,
+                  sequenceLength: maxLength,
+                  charWidth: charWidth2,
+                  row: { start: 0, end: maxLength - 1 }
+                }
+              ),
+              /* @__PURE__ */ React__default$1.createElement(
+                PerformantCaret,
+                {
+                  leftMargin: nameDivWidth,
+                  className: "veAlignmentSelectionLayer",
+                  isDraggable: true,
+                  sequenceLength: maxLength,
+                  charWidth: charWidth2,
+                  row: { start: 0, end: maxLength - 1 },
+                  easyStore: easyStore2.current
+                }
+              ),
+              isTemplate ? renderItem(0, 0, isTemplate) : /* @__PURE__ */ React__default$1.createElement(
+                ReactList,
+                {
+                  ref: (c2) => {
+                    InfiniteScroller.current = c2;
+                    const domNode = ReactDOM$1.findDOMNode(c2);
+                    if (domNode instanceof HTMLElement) {
+                      drop_provided.innerRef(domNode);
+                    }
+                  },
+                  type: "variable",
+                  itemSizeEstimator: estimateRowHeight,
+                  itemRenderer: renderItem,
+                  length: alignmentTracks2.length + (drop_snapshot.isUsingPlaceholder ? 1 : 0)
+                }
+              )
+            )
+          )
+        )
+      );
+    }, "innerTrackVis");
+    if (isTemplate)
+      return innerTrackVis();
+    else
+      return /* @__PURE__ */ React__default$1.createElement(
+        ConnectedDroppable$1,
+        {
+          mode: "virtual",
+          renderClone: (provided, snapshot, { source: { index: index2 } }) => {
+            return renderItem(index2, index2, false, {
+              provided,
+              snapshot
+            });
+          },
+          direction: "vertical",
+          droppableId: "droppable" + isTemplate ? "_no_drop" : ""
+        },
+        innerTrackVis
+      );
+  }, "getTrackVis");
+  const [firstTrack, ...otherTracks] = alignmentTracks;
+  const totalWidthOfMinimap = width;
+  const totalWidthInAlignmentView = 14 * getSequenceLength();
+  const minSliderSize = Math.min(
+    totalWidthOfMinimap * (totalWidthOfMinimap / totalWidthInAlignmentView),
+    totalWidthOfMinimap
+  );
+  const viewportHeight = Math.max(
+    document.documentElement.clientHeight,
+    window.innerHeight || 0
+  );
+  const pinchHandler = {
+    onPinch: ({ delta: [d2] }) => {
+      bindOutsideChangeHelper.current.triggerChange(
+        ({ value, changeValue }) => {
+          if (d2 > 0) {
+            if (value > 8) {
+              changeValue(value + 0.4);
+            } else {
+              changeValue(value + 0.2);
+            }
+          } else if (d2 < 0) {
+            if (value > 8) {
+              changeValue(value - 0.4);
+            } else {
+              changeValue(value - 0.2);
+            }
+          }
+        }
+      );
+      updateLabelsForInViewFeatures();
+    }
+  };
+  return /* @__PURE__ */ React__default$1.createElement(PinchHelper, __spreadValues({}, pinchHandler), /* @__PURE__ */ React__default$1.createElement(ResizeSensor, { onResize: handleResize }, /* @__PURE__ */ React__default$1.createElement(
+    "div",
+    {
+      style: __spreadValues({
+        height: height2 || (isPairwise ? "auto" : viewportHeight * 0.88),
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "space-between",
+        position: "relative",
+        overflowY: "auto"
+      }, style2),
+      className: "alignmentView"
+    },
+    /* @__PURE__ */ React__default$1.createElement(
+      DragDropContext,
+      {
+        onDragStart: onTrackDragStart,
+        onDragEnd: onTrackDragEnd
+      },
+      /* @__PURE__ */ React__default$1.createElement(
+        "div",
+        {
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            position: "relative",
+            overflowY: "auto"
+          },
+          className: "alignmentView-top-container"
+        },
+        /* @__PURE__ */ React__default$1.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"
+          },
+          additionalTopLeftEl,
+          handleBackButtonClicked && /* @__PURE__ */ React__default$1.createElement(Tooltip, { content: "Back to Pairwise Alignment Overview" }, /* @__PURE__ */ React__default$1.createElement(
+            Button,
+            {
+              icon: "arrow-left",
+              onClick: () => {
+                handleBackButtonClicked();
+                caretPositionUpdate2(-1);
+              },
+              small: true,
+              intent: Intent.PRIMARY,
+              minimal: true,
+              style: { marginRight: 10 },
+              className: "alignmentViewBackButton"
+            }
+          )),
+          /* @__PURE__ */ React__default$1.createElement("div", { style: { display: "flex" } }, /* @__PURE__ */ React__default$1.createElement(
+            EditableText,
+            {
+              disabled: !handleAlignmentRename,
+              onChange: (v2) => {
+                setAlignmentName(v2);
+              },
+              maxLength: 399,
+              value: alignmentName,
+              onConfirm: (v2) => __async(void 0, null, function* () {
+                if (!v2) {
+                  setAlignmentName(_alignmentName);
+                  return;
+                }
+                if (v2 === _alignmentName) {
+                  return;
+                }
+                setSaveMessage("Alignment Renaming..");
+                setSaveMessageLoading(true);
+                yield handleAlignmentRename(v2, props);
+                setSaveMessage("Rename Successful");
+                setSaveMessageLoading(false);
+                setTimeout(() => {
+                  setSaveMessage(void 0);
+                  setSaveMessageLoading(false);
+                }, 5e3);
+              }),
+              selectAllOnFocus: true,
+              className: "veAlignmentName"
+            }
+          ), "   ", /* @__PURE__ */ React__default$1.createElement(
+            "div",
+            {
+              className: "veAlignmentType",
+              style: {
+                paddingTop: "3px",
+                fontSize: "14px",
+                color: "grey",
+                maxWidth: "300px",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              },
+              "data-title": alignmentType || "Unknown Alignment Type"
+            },
+            alignmentType || "Unknown Alignment Type"
+          )),
+          unmappedSeqs && /* @__PURE__ */ React__default$1.createElement(
+            InfoHelper,
+            {
+              size: 20,
+              content: /* @__PURE__ */ React__default$1.createElement("div", null, "This alignment had sequences that did not map to the template sequence:", unmappedSeqs.map(({ sequenceData: sequenceData22 }, i) => /* @__PURE__ */ React__default$1.createElement("div", { key: i }, sequenceData22.name))),
+              intent: "warning",
+              icon: "warning-sign"
+            }
+          ),
+          !isInPairwiseOverviewView && /* @__PURE__ */ React__default$1.createElement(
+            UncontrolledSliderWithPlusMinusBtns,
+            {
+              noWraparound: true,
+              bindOutsideChangeHelper: bindOutsideChangeHelper.current,
+              onClick: () => {
+                setTimeout(scrollToCaret2, 0);
+              },
+              minCharWidth: getMinCharWidth(),
+              onChange: (zoomLvl) => __async(void 0, null, function* () {
+                isZooming.current = true;
+                setTimeout(() => {
+                  isZooming.current = false;
+                }, 10);
+                const minCharWidth = getMinCharWidth();
+                const scaleFactor = Math.pow(12 / minCharWidth, 1 / 10);
+                const newCharWidth = minCharWidth * Math.pow(scaleFactor, zoomLvl);
+                yield setCharWidthInLinearView({
+                  charWidthInLinearView: newCharWidth
+                });
+                yield scrollToCaret2();
+                yield updateLabelsForInViewFeatures({
+                  rectElement: ".alignmentHolder"
+                });
+              }),
+              coerceInitialValue,
+              title: "Adjust Zoom Level",
+              style: { paddingTop: "4px", width: 100 },
+              className: "veZoomAlignmentSlider ove-slider",
+              labelRenderer: false,
+              initialValue: charWidth2,
+              stepSize: 0.05,
+              max: 10,
+              min: 0,
+              clickStepSize: 0.5
+            }
+          ),
+          !noVisibilityOptions && !isInPairwiseOverviewView && /* @__PURE__ */ React__default$1.createElement(
+            AlignmentVisibilityTool,
+            __spreadValues({
+              currentPairwiseAlignmentIndex
+            }, alignmentVisibilityToolOptions)
+          ),
+          updateAlignmentSortOrder && !isInPairwiseOverviewView && /* @__PURE__ */ React__default$1.createElement(
+            Popover,
+            {
+              minimal: true,
+              content: /* @__PURE__ */ React__default$1.createElement(Menu, null, /* @__PURE__ */ React__default$1.createElement(
+                MenuItem,
+                {
+                  active: true,
+                  onClick: () => {
+                    updateAlignmentSortOrder("Position");
+                  },
+                  text: "Position"
+                }
+              ), /* @__PURE__ */ React__default$1.createElement(
+                MenuItem,
+                {
+                  active: alignmentSortOrder,
+                  onClick: () => {
+                    updateAlignmentSortOrder("Alphabetical");
+                  },
+                  text: "Alphabetical"
+                }
+              )),
+              target: /* @__PURE__ */ React__default$1.createElement(
+                Button,
+                {
+                  small: true,
+                  text: "Sort Order",
+                  rightIcon: "caret-down",
+                  icon: "sort"
+                }
+              )
+            }
+          ),
+          additionalTopEl,
+          saveMessage && /* @__PURE__ */ React__default$1.createElement(
+            "div",
+            {
+              className: "ove-menu-toast",
+              style: {
+                display: "flex",
+                alignItems: "center",
+                marginLeft: "auto",
+                marginRight: 10
+              }
+            },
+            saveMessageLoading ? /* @__PURE__ */ React__default$1.createElement("div", null, /* @__PURE__ */ React__default$1.createElement(Spinner, { size: 15 })) : /* @__PURE__ */ React__default$1.createElement(Icon, { icon: "tick-circle", intent: "success" }),
+            " ",
+            " ",
+            saveMessage
+          )
+        ),
+        hasTemplate ? /* @__PURE__ */ React__default$1.createElement(React__default$1.Fragment, null, /* @__PURE__ */ React__default$1.createElement("div", { className: "alignmentTrackFixedToTop" }, getTrackVis([firstTrack], true, alignmentTracks)), getTrackVis(otherTracks, false, alignmentTracks)) : getTrackVis(alignmentTracks, false, alignmentTracks)
+      )
+    ),
+    !isInPairwiseOverviewView && /* @__PURE__ */ React__default$1.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$1.createElement(
+        Minimap,
+        {
+          selectionLayerComp: /* @__PURE__ */ React__default$1.createElement(React__default$1.Fragment, null, /* @__PURE__ */ React__default$1.createElement(
+            PerformantSelectionLayer,
+            {
+              is: true,
+              hideCarets: true,
+              className: "veAlignmentSelectionLayer veMinimapSelectionLayer",
+              easyStore: easyStore2.current,
+              sequenceLength: maxLength,
+              charWidth: getMinCharWidth(true),
+              row: { start: 0, end: maxLength - 1 }
+            }
+          ), /* @__PURE__ */ React__default$1.createElement(
+            PerformantCaret,
+            {
+              style: {
+                opacity: 0.2
+              },
+              className: "veAlignmentSelectionLayer veMinimapSelectionLayer",
+              sequenceLength: maxLength,
+              charWidth: getMinCharWidth(true),
+              row: { start: 0, end: maxLength - 1 },
+              easyStore: easyStore2.current
+            }
+          )),
+          alignmentTracks,
+          dimensions: {
+            width: Math.max(width, 10) || 10
+          },
+          nameDivOffsetPercent: 0,
+          scrollYToTrack,
+          onSizeAdjust: onMinimapSizeAdjust,
+          minSliderSize,
+          laneHeight: minimapLaneHeight || (alignmentTracks.length > 5 ? 10 : 17),
+          laneSpacing: minimapLaneSpacing || (alignmentTracks.length > 5 ? 2 : 1),
+          easyStore: easyStore2.current,
+          numBpsShownInLinearView: getNumBpsShownInLinearView(),
+          scrollAlignmentView: false,
+          onMinimapScrollX: scrollAlignmentToPercent
+        }
+      )
+    ),
+    /* @__PURE__ */ React__default$1.createElement(
+      GlobalDialog,
+      null
+    )
+  )));
+}, "AlignmentView");
 const AlignmentView$1 = compose(
   withStore,
   withEditorProps,