@teselagen/ove 0.7.7 → 0.7.8

package/index.umd.js

@@ -144826,21 +144826,20 @@ ${seq.sequence}
   })(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$2.createElement(
         "div",
@@ -148356,7 +148355,7 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
       hasYOffset: true
     }
   };
-  const estimateRowHeight = /* @__PURE__ */ __name((props) => {
+  const _estimateRowHeight = /* @__PURE__ */ __name((props) => {
     let {
       index: index2,
       cache: cache2,
@@ -148414,7 +148413,7 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
     }
     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);
@@ -149695,7 +149694,7 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
   }
   __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 = {
@@ -166348,7 +166347,7 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
       //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,
@@ -170989,21 +170988,125 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
       e2
     );
   }
-  const _AlignmentView = class _AlignmentView extends React$2.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] = reactExports.useState(0);
+    const [nameDivWidth, setNameDivWidth] = reactExports.useState(140);
+    const [charWidthInLinearView, _setCharWidthInLinearView] = reactExports.useState(
+      charWidthInLinearViewDefault
+    );
+    const [alignmentName, setAlignmentName] = reactExports.useState(_alignmentName);
+    const [isTrackDragging, setIsTrackDragging] = reactExports.useState(false);
+    const [saveMessage, setSaveMessage] = reactExports.useState();
+    const [saveMessageLoading, setSaveMessageLoading] = reactExports.useState(false);
+    const [tempTrimBefore, setTempTrimBefore] = reactExports.useState({});
+    const [tempTrimAfter, setTempTrimAfter] = reactExports.useState({});
+    const [tempTrimmingCaret, setTempTrimmingCaret] = reactExports.useState({});
+    const bindOutsideChangeHelper = reactExports.useRef({});
+    const alignmentHolder = reactExports.useRef(null);
+    const alignmentHolderTop = reactExports.useRef(null);
+    const veTracksAndAlignmentHolder = reactExports.useRef(null);
+    const InfiniteScroller = reactExports.useRef(null);
+    const oldAlignmentHolderScrollTop = reactExports.useRef(0);
+    const blockScroll = reactExports.useRef(false);
+    const isZooming = reactExports.useRef(false);
+    const rowData = reactExports.useRef({});
+    const latestMouseY = reactExports.useRef();
+    const easyStore2 = reactExports.useRef(
+      store$1({
+        selectionLayer: { start: -1, end: -1 },
+        caretPosition: -1,
+        percentScrolled: 0,
+        viewportWidth: 400,
+        verticalVisibleRange: { start: 0, end: 0 }
+      })
+    );
+    const getAllAlignmentsFastaText = reactExports.useCallback(() => {
+      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]);
+    reactExports.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");
@@ -171015,1319 +171118,688 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
           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");
+    reactExports.useEffect(() => {
+      window.scrollAlignmentToPercent = scrollAlignmentToPercent;
+      if (window.Cypress)
+        window.Cypress.scrollAlignmentToPercent = scrollAlignmentToPercent;
+      return () => {
+        delete window.scrollAlignmentToPercent;
+        if (window.Cypress)
+          delete window.Cypress.scrollAlignmentToPercent;
+      };
+    }, []);
+    const maxLength = reactExports.useMemo(() => {
+      const { sequenceData: sequenceData22 = { sequence: "" }, alignmentData } = alignmentTracks[0];
+      const data = alignmentData || sequenceData22;
+      return data.noSequence ? data.size : data.sequence.length;
+    }, [alignmentTracks]);
+    const getSequenceLength = reactExports.useCallback(() => {
+      var _a3, _b2, _c2;
+      return ((_c2 = (_b2 = (_a3 = alignmentTracks == null ? void 0 : alignmentTracks[0]) == null ? void 0 : _a3.alignmentData) == null ? void 0 : _b2.sequence) == null ? void 0 : _c2.length) || 1;
+    }, [alignmentTracks]);
+    const getMinCharWidth = reactExports.useCallback(
+      (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 = reactExports.useMemo(() => {
+      if (isFullyZoomedOut) {
+        return getMinCharWidth();
+      } else {
+        return Math.max(getMinCharWidth(), charWidthInLinearView);
+      }
+    }, [charWidthInLinearView, getMinCharWidth, isFullyZoomedOut]);
+    const debouncedAlignmentRunUpdate = debounce(alignmentRunUpdate2, 1e3);
+    const caretPositionUpdate2 = reactExports.useCallback(
+      (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(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 = reactExports.useCallback(
+      (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();
+      },
+      [
+        alignmentId,
+        alignmentRunUpdate2,
+        debouncedAlignmentRunUpdate,
+        selectionLayer2
+      ]
+    );
+    const updateSelectionOrCaret$1 = reactExports.useCallback(
+      (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
+        });
+      },
+      [caretPositionUpdate2, getSequenceLength, selectionLayerUpdate2]
+    );
+    const getNearestCursorPositionToMouseEvent2 = reactExports.useCallback(
+      (_2, event, callback2) => {
+        let nearestCaretPos = 0;
+        const rowDomNode = veTracksAndAlignmentHolder.current;
+        const boundingRowRect = rowDomNode.getBoundingClientRect();
+        if (getClientX(event) - boundingRowRect.left - nameDivWidth < 0) {
+          nearestCaretPos = 0;
         } 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(() => {
-        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);
+          const clickXPositionRelativeToRowContainer = getClientX(event) - boundingRowRect.left - nameDivWidth;
+          const numberOfBPsInFromRowStart = Math.floor(
+            (clickXPositionRelativeToRowContainer + charWidth2 / 2) / charWidth2
+          );
+          nearestCaretPos = numberOfBPsInFromRowStart + 0;
+          if (nearestCaretPos > maxLength + 1) {
+            nearestCaretPos = maxLength + 1;
+          }
         }
-        if (this.blockScroll) {
-          return;
+        if (sequenceData2 == null ? void 0 : sequenceData2.isProtein) {
+          nearestCaretPos = Math.round(nearestCaretPos / 3) * 3;
         }
-        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 (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
+      ]
+    );
+    reactExports.useEffect(() => {
+      const updateAlignmentSelection = /* @__PURE__ */ __name((newRangeOrCaret) => {
+        updateSelectionOrCaret$1(false, newRangeOrCaret, {
+          forceReduxUpdate: true
+        });
+      }, "updateAlignmentSelection");
+      window.updateAlignmentSelection = updateAlignmentSelection;
+      if (window.Cypress)
+        window.Cypress.updateAlignmentSelection = updateAlignmentSelection;
+      return () => {
+        delete window.updateAlignmentSelection;
+        if (window.Cypress) {
+          delete window.Cypress.updateAlignmentSelection;
         }
-        if (this.alignmentHolderTop) {
-          this.alignmentHolderTop.scrollLeft = this.alignmentHolder.scrollLeft;
+      };
+    }, [updateSelectionOrCaret$1]);
+    const setVerticalScrollRange = throttle(() => {
+      if (InfiniteScroller.current && InfiniteScroller.current.getFractionalVisibleRange && easyStore2.current) {
+        let [start2, end2] = InfiniteScroller.current.getFractionalVisibleRange();
+        if (hasTemplate) {
+          end2 = end2 + 1;
         }
+        if (easyStore2.current.verticalVisibleRange.start !== start2 || easyStore2.current.verticalVisibleRange.end !== end2)
+          easyStore2.current.verticalVisibleRange = { start: start2, end: end2 };
+      }
+    }, 100);
+    reactExports.useEffect(() => {
+      setTimeout(() => {
         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 el2 = window.document.querySelector(".veCaret:not(.zoomSelection)");
-        if (!el2) {
-          el2 = window.document.querySelector(".veCaret");
-        }
-        if (!el2) {
-          return;
-        }
-        el2.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;
-        });
-        return maxWidth * charWidthInLinearView;
-      }, "getMaxLinearViewWidth"));
-      __publicField(this, "renderItem", /* @__PURE__ */ __name((_i, key2, 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 i2;
-        if (isTemplate) {
-          i2 = _i;
-        } else if (hasTemplate) {
-          i2 = _i + 1;
-        } else {
-          i2 = _i;
+      }, 0);
+      setTimeout(() => {
+        setVerticalScrollRange();
+      }, 500);
+    });
+    reactExports.useEffect(() => {
+      if (scrollPercentageToJumpTo !== void 0) {
+        scrollAlignmentToPercent(scrollPercentageToJumpTo);
+      }
+    }, [scrollPercentageToJumpTo]);
+    reactExports.useEffect(() => {
+      const saveAlignment = /* @__PURE__ */ __name(() => __async(this, null, function* () {
+        if (shouldAutosave && stateTrackingId) {
+          setSaveMessage("Alignment Saving..");
+          setSaveMessageLoading(true);
+          let cleanedTracks;
+          if (pairwiseAlignments) {
+            cleanedTracks = pairwiseAlignments.map(cleanTracks);
+          } else {
+            cleanedTracks = cleanTracks(alignmentTracks);
+          }
+          yield handleAlignmentSave(cleanedTracks);
+          setSaveMessage("Alignment Saved");
+          setSaveMessageLoading(false);
+          setTimeout(() => {
+            setSaveMessage(void 0);
+            setSaveMessageLoading(false);
+          }, 5e3);
         }
-        const track2 = alignmentTracks[i2];
-        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${i2}`] || trimmedRangesToDisplay[0],
-          this.state[`tempTrimAfter${i2}`] || trimmedRangesToDisplay[1]
-        ].filter((i22) => i22).map((i22) => __spreadProps(__spreadValues({}, i22), {
-          hideCarets: true,
-          ignoreGaps: true,
-          className: "tg-trimmed-region",
-          color: "gray"
-        }));
-        const innerRenderItem = /* @__PURE__ */ __name((provided = {}, snapshot) => {
-          var _a3;
-          return /* @__PURE__ */ React$2.createElement(
+      }), "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" });
+      });
+    }, "onMinimapSizeAdjust");
+    const setCharWidthInLinearView = /* @__PURE__ */ __name(({ charWidthInLinearView: charWidthInLinearView2 }) => {
+      window.localStorage.setItem(
+        "charWidthInLinearViewDefault",
+        charWidthInLinearView2
+      );
+      _setCharWidthInLinearView(charWidthInLinearView2);
+      charWidthInLinearViewDefault = JSON.parse(
+        window.localStorage.getItem("charWidthInLinearViewDefault")
+      );
+    }, "setCharWidthInLinearView");
+    const scrollToCaret2 = /* @__PURE__ */ __name(() => {
+      let el2 = window.document.querySelector(".veCaret:not(.zoomSelection)");
+      if (!el2) {
+        el2 = window.document.querySelector(".veCaret");
+      }
+      if (!el2) {
+        return;
+      }
+      el2.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, key2, isTemplate, cloneProps) => {
+      const isDragDisabled = !allowTrackRearrange || isPairwise;
+      let i2;
+      if (isTemplate) {
+        i2 = _i;
+      } else if (hasTemplate) {
+        i2 = _i + 1;
+      } else {
+        i2 = _i;
+      }
+      const track2 = alignmentTracks == null ? void 0 : alignmentTracks[i2];
+      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[i2] || trimmedRangesToDisplay[0],
+        tempTrimAfter[i2] || trimmedRangesToDisplay[1]
+      ].filter((i22) => i22).map((i22) => __spreadProps(__spreadValues({}, i22), {
+        hideCarets: true,
+        ignoreGaps: true,
+        className: "tg-trimmed-region",
+        color: "gray"
+      }));
+      const innerRenderItem = /* @__PURE__ */ __name((provided = {}, snapshot) => {
+        var _a3;
+        return /* @__PURE__ */ React$2.createElement(
+          "div",
+          __spreadProps(__spreadValues({
+            ref: provided == null ? void 0 : provided.innerRef
+          }, provided == null ? void 0 : provided.draggableProps), {
+            className: classNames$1("alignmentViewTrackContainer", {
+              isDragDisabled
+            }),
+            "data-alignment-track-index": i2,
+            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: i2
+          }),
+          /* @__PURE__ */ React$2.createElement(
             "div",
-            __spreadProps(__spreadValues({
-              ref: provided == null ? void 0 : provided.innerRef
-            }, provided == null ? void 0 : provided.draggableProps), {
-              className: classNames$1("alignmentViewTrackContainer", {
-                isDragDisabled
-              }),
-              "data-alignment-track-index": i2,
-              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 }),
+            {
+              className: "alignmentTrackName",
+              style: {
+                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"
+              },
+              "data-title": name2,
               key: i2
-            }),
+            },
             /* @__PURE__ */ React$2.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: i2
-              },
+              __spreadProps(__spreadValues({}, provided == null ? void 0 : provided.dragHandleProps), {
+                style: __spreadProps(__spreadValues({}, compactNames && {
+                  display: "flex",
+                  alignItems: "flex-start"
+                }), {
+                  cursor: !isPairwise && allowTrackRearrange && !isTemplate ? "move" : ""
+                })
+              }),
               /* @__PURE__ */ React$2.createElement(
                 "div",
-                __spreadProps(__spreadValues({}, provided == null ? void 0 : provided.dragHandleProps), {
-                  style: __spreadProps(__spreadValues({}, compactNames && {
-                    display: "flex",
-                    alignItems: "flex-start"
-                  }), {
-                    cursor: !isPairwise && allowTrackRearrange && !isTemplate ? "move" : ""
+                {
+                  className: "alignmentTrackNameDiv",
+                  style: __spreadValues({
+                    background: "#3FA6DA",
+                    display: "inline-block",
+                    color: "white",
+                    borderRadius: 5,
+                    paddingRight: 5
+                  }, compactNames && {
+                    marginRight: 5
                   })
-                }),
-                /* @__PURE__ */ React$2.createElement(
-                  "div",
+                },
+                allowTrackNameEdit && /* @__PURE__ */ React$2.createElement(
+                  Button,
                   {
-                    className: "alignmentTrackNameDiv",
-                    style: __spreadValues({
-                      background: "#3FA6DA",
-                      display: "inline-block",
-                      color: "white",
-                      borderRadius: 5,
-                      paddingRight: 5
-                    }, compactNames && {
-                      marginRight: 5
-                    })
-                  },
-                  allowTrackNameEdit && /* @__PURE__ */ React$2.createElement(
-                    Button,
-                    {
-                      onClick: () => {
-                        showDialog({
-                          ModalComponent: EditTrackNameDialog,
-                          props: {
-                            initialValues: {
-                              name: name2
-                            },
-                            updateName: ({ newName }) => {
-                              updateTrackHelper({
-                                currentPairwiseAlignmentIndex,
-                                pairwiseAlignments,
-                                upsertAlignmentRun: upsertAlignmentRun2,
-                                alignmentId,
-                                alignmentTracks,
-                                alignmentTrackIndex: i2,
-                                update: { name: newName }
-                              });
-                            }
+                    onClick: () => {
+                      showDialog({
+                        ModalComponent: EditTrackNameDialog,
+                        props: {
+                          initialValues: {
+                            name: name2
+                          },
+                          updateName: ({ newName }) => {
+                            updateTrackHelper({
+                              currentPairwiseAlignmentIndex,
+                              pairwiseAlignments,
+                              upsertAlignmentRun: upsertAlignmentRun2,
+                              alignmentId,
+                              alignmentTracks: alignmentTracks || [],
+                              alignmentTrackIndex: i2,
+                              update: { name: newName }
+                            });
                           }
-                        });
-                      },
-                      small: true,
-                      "data-tip": "Edit Track Name",
-                      className: "edit-track-name-btn",
-                      icon: /* @__PURE__ */ React$2.createElement(Icon, { size: 12, color: "lightgrey", icon: "edit" }),
-                      minimal: true
-                    }
-                  ),
-                  sequenceData2.seqLink && /* @__PURE__ */ React$2.createElement(
-                    AnchorButton,
-                    {
-                      href: sequenceData2.seqLink,
-                      "data-tip": sequenceData2.seqLinkTooltip,
-                      target: "_blank",
-                      small: true,
-                      icon: /* @__PURE__ */ React$2.createElement(Icon, { size: 12, color: "white", icon: "document-open" }),
-                      minimal: true
-                    }
-                  ),
-                  name2
-                ),
-                /* @__PURE__ */ React$2.createElement("div", { style: { fontSize: 10, marginTop: 2, marginBottom: 2 } }, isReversed && /* @__PURE__ */ React$2.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$2.createElement(
-                  "span",
+                    small: true,
+                    "data-tip": "Edit Track Name",
+                    className: "edit-track-name-btn",
+                    icon: /* @__PURE__ */ React$2.createElement(Icon, { size: 12, color: "lightgrey", icon: "edit" }),
+                    minimal: true
+                  }
+                ),
+                sequenceData22.seqLink && /* @__PURE__ */ React$2.createElement(
+                  AnchorButton,
                   {
-                    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")
+                    href: sequenceData22.seqLink,
+                    "data-tip": sequenceData22.seqLinkTooltip,
+                    target: "_blank",
+                    small: true,
+                    icon: /* @__PURE__ */ React$2.createElement(Icon, { size: 12, color: "white", icon: "document-open" }),
+                    minimal: true
+                  }
+                ),
+                name2
               ),
-              /* @__PURE__ */ React$2.createElement(
-                HorizontalPanelDragHandle,
+              /* @__PURE__ */ React$2.createElement("div", { style: { fontSize: 10, marginTop: 2, marginBottom: 2 } }, isReversed && /* @__PURE__ */ React$2.createElement(
+                "span",
                 {
-                  onDrag: ({ dx }) => {
-                    this.setState({
-                      nameDivWidth: Math.min(
-                        this.state.nameDivWidth - dx,
-                        this.state.width - 20
-                      )
-                    });
-                  }
-                }
-              )
-            ),
-            handleSelectTrack && !isTemplate && /* @__PURE__ */ React$2.createElement(
-              "div",
-              {
-                onClick: () => {
-                  handleSelectTrack(i2);
+                  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"
                 },
-                style: {
-                  position: "absolute",
-                  opacity: 0,
-                  height: "100%",
-                  left: this.state.nameDivWidth,
-                  width: linearViewWidth,
-                  fontWeight: "bolder",
-                  cursor: "pointer",
-                  padding: 5,
-                  textAlign: "center",
-                  zIndex: 400
+                isReversed ? "REV" : "FWD",
+                " "
+              ), wasTrimmed && /* @__PURE__ */ React$2.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"
                 },
-                className: "alignmentViewSelectTrackPopover veWhiteBackground"
-              },
-              "Inspect track"
+                "TRIMMED"
+              ), sequenceData22.sequence.length, " bps")
             ),
             /* @__PURE__ */ React$2.createElement(
-              NonReduxEnhancedLinearView,
-              __spreadValues({}, __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, rest), {
-                caretPosition: this.state[`tempTrimmingCaret${i2}`] || -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${i2}`,
-                alignmentData,
-                chromatogramData,
-                height: "100%",
-                vectorInteractionWrapperStyle: {
-                  overflowY: "hidden"
-                },
-                withZoomLinearView: false,
-                marginWidth: 0,
-                linearViewCharWidth: charWidthInLinearView,
-                ignoreGapsOnHighlight: true
-              }), linearViewOptions && (isFunction$2(linearViewOptions) ? linearViewOptions({
-                index: i2,
-                isTemplate,
-                alignmentVisibilityToolOptions,
-                sequenceData: sequenceData2,
-                alignmentData,
-                chromatogramData
-              }) : linearViewOptions)), {
-                additionalSelectionLayers,
-                dimensions: {
-                  width: linearViewWidth
-                },
-                width: linearViewWidth,
-                paddingBottom: 5,
-                scrollDataPassed: this.easyStore
-              }))
-            )
-          );
-        }, "innerRenderItem");
-        if (isTemplate)
-          return innerRenderItem();
-        if (cloneProps)
-          return innerRenderItem(cloneProps.provided, cloneProps.snapshot);
-        const idToUse = alignmentData.id || sequenceData2.id || i2 + "_index_id";
-        return /* @__PURE__ */ React$2.createElement(
-          PublicDraggable,
-          {
-            key: idToUse.toString(),
-            index: i2,
-            isDragDisabled,
-            draggableId: idToUse.toString()
-          },
-          innerRenderItem
-        );
-      }, "renderItem"));
-      __publicField(this, "handleResize", throttle(([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 i2 = Number(rowDomNode.getAttribute("data-alignment-track-index"));
-            const minimapLaneEl = document.querySelector(
-              `.minimapLane:nth-child(${i2 + 1})`
-            );
-            if (!minimapLaneEl)
-              return;
-            minimapLaneEl.classList.add("lane-hovered");
-            return true;
-          }
-        });
-      }, "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
-          )
-        });
-      }, "onTrackDragEnd"));
-      window.scrollAlignmentToPercent = this.scrollAlignmentToPercent;
-      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;
-        }
-      }
-      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);
-        }
-        if (this.props.shouldAutosave && prevProps && prevProps.stateTrackingId && this.props.stateTrackingId !== prevProps.stateTrackingId) {
-          this.setState({ saveMessage: "Alignment Saving.." });
-          this.setState({ saveMessageLoading: true });
-          let cleanedTracks;
-          if (this.props.pairwiseAlignments) {
-            cleanedTracks = this.props.pairwiseAlignments.map(cleanTracks);
-          } else {
-            cleanedTracks = cleanTracks(this.props.alignmentTracks);
-          }
-          yield this.props.handleAlignmentSave(cleanedTracks, this.props);
-          this.setState({ saveMessage: "Alignment Saved" });
-          this.setState({ saveMessageLoading: false });
-          setTimeout(() => {
-            this.setState({ saveMessage: void 0 });
-            this.setState({ saveMessageLoading: 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;
-      setTimeout(() => {
-        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$2.createElement(
-            "div",
-            {
-              className: "alignmentTracks ",
-              style: {
-                overflowY: "auto",
-                display: "flex",
-                zIndex: 10
-              }
-            },
-            /* @__PURE__ */ React$2.createElement(
-              "div",
+              HorizontalPanelDragHandle,
               {
-                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$2.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$2.createElement(
-                  "div",
-                  {
-                    ref: (ref2) => this.veTracksAndAlignmentHolder = ref2,
-                    className: classNames$1("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$2.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$2.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$2.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$2.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
-      );
-      const viewportHeight = Math.max(
-        document.documentElement.clientHeight,
-        window.innerHeight || 0
-      );
-      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);
+                onDrag: ({ dx }) => {
+                  setNameDivWidth(Math.min(nameDivWidth - dx, width - 20));
+                }
               }
-            }
-          });
-          updateLabelsForInViewFeatures();
-        }
-      };
-      return /* @__PURE__ */ React$2.createElement(PinchHelper, __spreadValues({}, pinchHandler), /* @__PURE__ */ React$2.createElement(ResizeSensor, { onResize: this.handleResize }, /* @__PURE__ */ React$2.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$2.createElement(
-          DragDropContext,
-          {
-            onDragStart: this.onTrackDragStart,
-            onDragEnd: this.onTrackDragEnd
-          },
-          /* @__PURE__ */ React$2.createElement(
+            )
+          ),
+          handleSelectTrack && !isTemplate && /* @__PURE__ */ React$2.createElement(
             "div",
             {
+              onClick: () => {
+                handleSelectTrack(i2);
+              },
               style: {
-                display: "flex",
-                flexDirection: "column",
-                position: "relative",
-                overflowY: "auto"
+                position: "absolute",
+                opacity: 0,
+                height: "100%",
+                left: nameDivWidth,
+                width: linearViewWidth,
+                fontWeight: "bolder",
+                cursor: "pointer",
+                padding: 5,
+                textAlign: "center",
+                zIndex: 400
               },
-              className: "alignmentView-top-container"
+              className: "alignmentViewSelectTrackPopover veWhiteBackground"
             },
-            /* @__PURE__ */ React$2.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$2.createElement(Tooltip, { content: "Back to Pairwise Alignment Overview" }, /* @__PURE__ */ React$2.createElement(
-                Button,
-                {
-                  icon: "arrow-left",
-                  onClick: () => {
-                    handleBackButtonClicked();
-                    this.caretPositionUpdate(-1);
-                  },
-                  small: true,
-                  intent: Intent.PRIMARY,
-                  minimal: true,
-                  style: { marginRight: 10 },
-                  className: "alignmentViewBackButton"
-                }
-              )),
-              /* @__PURE__ */ React$2.createElement("div", { style: { display: "flex" } }, /* @__PURE__ */ React$2.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$2.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"
-                },
-                this.props.alignmentType || "Unknown Alignment Type"
-              )),
-              this.props.unmappedSeqs && /* @__PURE__ */ React$2.createElement(
-                InfoHelper,
-                {
-                  size: 20,
-                  content: /* @__PURE__ */ React$2.createElement("div", null, "This alignment had sequences that did not map to the template sequence:", this.props.unmappedSeqs.map(
-                    ({ sequenceData: sequenceData2 }, i2) => /* @__PURE__ */ React$2.createElement("div", { key: i2 }, sequenceData2.name)
-                  )),
-                  intent: "warning",
-                  icon: "warning-sign"
-                }
-              ),
-              !isInPairwiseOverviewView && /* @__PURE__ */ React$2.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$2.createElement(
-                AlignmentVisibilityTool,
-                __spreadValues({
-                  currentPairwiseAlignmentIndex
-                }, alignmentVisibilityToolOptions)
-              ),
-              updateAlignmentSortOrder && !isInPairwiseOverviewView && /* @__PURE__ */ React$2.createElement(
-                Popover,
-                {
-                  minimal: true,
-                  content: /* @__PURE__ */ React$2.createElement(Menu, null, /* @__PURE__ */ React$2.createElement(
-                    MenuItem,
-                    {
-                      active: true,
-                      onClick: () => {
-                        updateAlignmentSortOrder("Position");
-                      },
-                      text: "Position"
-                    }
-                  ), /* @__PURE__ */ React$2.createElement(
-                    MenuItem,
-                    {
-                      active: alignmentSortOrder,
-                      onClick: () => {
-                        updateAlignmentSortOrder("Alphabetical");
-                      },
-                      text: "Alphabetical"
-                    }
-                  )),
-                  target: /* @__PURE__ */ React$2.createElement(
-                    Button,
-                    {
-                      small: true,
-                      text: "Sort Order",
-                      rightIcon: "caret-down",
-                      icon: "sort"
-                    }
-                  )
-                }
-              ),
-              additionalTopEl,
-              this.state.saveMessage && /* @__PURE__ */ React$2.createElement(
-                "div",
-                {
-                  className: "ove-menu-toast",
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    marginLeft: "auto",
-                    marginRight: 10
-                  }
-                },
-                this.state.saveMessageLoading ? /* @__PURE__ */ React$2.createElement("div", null, /* @__PURE__ */ React$2.createElement(Spinner, { size: 15 })) : /* @__PURE__ */ React$2.createElement(Icon, { icon: "tick-circle", intent: "success" }),
-                " ",
-                " ",
-                this.state.saveMessage
-              )
-            ),
-            hasTemplate ? /* @__PURE__ */ React$2.createElement(React$2.Fragment, null, /* @__PURE__ */ React$2.createElement("div", { className: "alignmentTrackFixedToTop" }, getTrackVis([firstTrack], true, alignmentTracks)), getTrackVis(otherTracks, false, alignmentTracks)) : getTrackVis(alignmentTracks, false, alignmentTracks)
-          )
-        ),
-        !isInPairwiseOverviewView && /* @__PURE__ */ React$2.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"
-            }
-          },
+            "Inspect track"
+          ),
           /* @__PURE__ */ React$2.createElement(
-            Minimap,
-            __spreadProps(__spreadValues({}, {
-              selectionLayerComp: /* @__PURE__ */ React$2.createElement(React$2.Fragment, null, /* @__PURE__ */ React$2.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$2.createElement(
-                PerformantCaret,
-                {
-                  style: {
-                    opacity: 0.2
-                  },
-                  className: "veAlignmentSelectionLayer veMinimapSelectionLayer",
-                  sequenceLength,
-                  charWidth: this.getMinCharWidth(true),
-                  row: { start: 0, end: sequenceLength - 1 },
-                  easyStore: this.easyStore
-                }
-              )),
-              alignmentTracks,
+            NonReduxEnhancedLinearView,
+            __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, rest), {
+              caretPosition: tempTrimmingCaret[i2] || -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${i2}`,
+              alignmentData,
+              chromatogramData,
+              height: "100%",
+              vectorInteractionWrapperStyle: {
+                overflowY: "hidden"
+              },
+              withZoomLinearView: false,
+              marginWidth: 0,
+              linearViewCharWidth: charWidth2,
+              ignoreGapsOnHighlight: true
+            }), linearViewOptions && (isFunction$2(linearViewOptions) ? linearViewOptions({
+              index: i2,
+              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$2.createElement(
-          GlobalDialog,
-          null
+        );
+      }, "innerRenderItem");
+      if (isTemplate)
+        return innerRenderItem();
+      if (cloneProps)
+        return innerRenderItem(cloneProps.provided, cloneProps.snapshot);
+      const idToUse = alignmentData.id || sequenceData22.id || i2 + "_index_id";
+      return /* @__PURE__ */ React$2.createElement(
+        PublicDraggable,
+        {
+          key: idToUse.toString(),
+          index: i2,
+          isDragDisabled,
+          draggableId: idToUse.toString()
+        },
+        innerRenderItem
+      );
+    }, "renderItem");
+    const handleResize = throttle(([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 i2 = Number(rowDomNode.getAttribute("data-alignment-track-index"));
+          const minimapLaneEl = document.querySelector(
+            `.minimapLane:nth-child(${i2 + 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, _c2, _d2;
-          this.setState({
-            [`tempTrimmingCaret${track2.index}`]: nearestCaretPos
-          });
-          const afterDisabled = nearestCaretPos <= ((_a2 = track2.alignmentData.trimmedRange) == null ? void 0 : _a2.start);
+          var _a3, _b2, _c2, _d2;
+          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(
             [
@@ -172348,28 +171820,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
                       }
                     }
                   });
@@ -172379,27 +171848,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
                       }
                     }
@@ -172415,9 +171881,9 @@ ${seqDataToCopy}\r
                 icon: "trash",
                 onClick: () => {
                   updateTrackHelper({
-                    currentPairwiseAlignmentIndex,
-                    upsertAlignmentRun: upsertAlignmentRun2,
-                    alignmentId,
+                    currentPairwiseAlignmentIndex: currentPairwiseAlignmentIndex2,
+                    upsertAlignmentRun: upsertAlignmentRun22,
+                    alignmentId: alignmentId2,
                     alignmentTracks: allTracks,
                     alignmentTrackIndex: track2.index,
                     hasBeenTrimmed: false,
@@ -172431,19 +171897,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$2.createElement(
+          "div",
+          {
+            className: "alignmentTracks ",
+            style: {
+              overflowY: "auto",
+              display: "flex",
+              zIndex: 10
+            }
+          },
+          /* @__PURE__ */ React$2.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$2.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$2.createElement(
+                "div",
+                {
+                  ref: veTracksAndAlignmentHolder,
+                  className: classNames$1("veTracksAndAlignmentHolder", {
+                    isTrackDragging
+                  }),
+                  onClick: noClickDragHandlers ? noop$7 : (event) => {
+                    if (isTrackDragging)
+                      return;
+                    if (isTargetWithinEl(event, ".alignmentTrackName")) {
+                      return;
+                    }
+                    getNearestCursorPositionToMouseEvent2(
+                      rowData2,
+                      event,
+                      editorClicked
+                    );
+                  }
+                },
+                /* @__PURE__ */ React$2.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(this, 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(this, 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(this, 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$2.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$2.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$2.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$2.createElement(PinchHelper, __spreadValues({}, pinchHandler), /* @__PURE__ */ React$2.createElement(ResizeSensor, { onResize: handleResize }, /* @__PURE__ */ React$2.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$2.createElement(
+        DragDropContext,
+        {
+          onDragStart: onTrackDragStart,
+          onDragEnd: onTrackDragEnd
+        },
+        /* @__PURE__ */ React$2.createElement(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              position: "relative",
+              overflowY: "auto"
+            },
+            className: "alignmentView-top-container"
+          },
+          /* @__PURE__ */ React$2.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$2.createElement(Tooltip, { content: "Back to Pairwise Alignment Overview" }, /* @__PURE__ */ React$2.createElement(
+              Button,
+              {
+                icon: "arrow-left",
+                onClick: () => {
+                  handleBackButtonClicked();
+                  caretPositionUpdate2(-1);
+                },
+                small: true,
+                intent: Intent.PRIMARY,
+                minimal: true,
+                style: { marginRight: 10 },
+                className: "alignmentViewBackButton"
+              }
+            )),
+            /* @__PURE__ */ React$2.createElement("div", { style: { display: "flex" } }, /* @__PURE__ */ React$2.createElement(
+              EditableText,
+              {
+                disabled: !handleAlignmentRename,
+                onChange: (v2) => {
+                  setAlignmentName(v2);
+                },
+                maxLength: 399,
+                value: alignmentName,
+                onConfirm: (v2) => __async(this, 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$2.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$2.createElement(
+              InfoHelper,
+              {
+                size: 20,
+                content: /* @__PURE__ */ React$2.createElement("div", null, "This alignment had sequences that did not map to the template sequence:", unmappedSeqs.map(({ sequenceData: sequenceData22 }, i2) => /* @__PURE__ */ React$2.createElement("div", { key: i2 }, sequenceData22.name))),
+                intent: "warning",
+                icon: "warning-sign"
+              }
+            ),
+            !isInPairwiseOverviewView && /* @__PURE__ */ React$2.createElement(
+              UncontrolledSliderWithPlusMinusBtns,
+              {
+                noWraparound: true,
+                bindOutsideChangeHelper: bindOutsideChangeHelper.current,
+                onClick: () => {
+                  setTimeout(scrollToCaret2, 0);
+                },
+                minCharWidth: getMinCharWidth(),
+                onChange: (zoomLvl) => __async(this, 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$2.createElement(
+              AlignmentVisibilityTool,
+              __spreadValues({
+                currentPairwiseAlignmentIndex
+              }, alignmentVisibilityToolOptions)
+            ),
+            updateAlignmentSortOrder && !isInPairwiseOverviewView && /* @__PURE__ */ React$2.createElement(
+              Popover,
+              {
+                minimal: true,
+                content: /* @__PURE__ */ React$2.createElement(Menu, null, /* @__PURE__ */ React$2.createElement(
+                  MenuItem,
+                  {
+                    active: true,
+                    onClick: () => {
+                      updateAlignmentSortOrder("Position");
+                    },
+                    text: "Position"
+                  }
+                ), /* @__PURE__ */ React$2.createElement(
+                  MenuItem,
+                  {
+                    active: alignmentSortOrder,
+                    onClick: () => {
+                      updateAlignmentSortOrder("Alphabetical");
+                    },
+                    text: "Alphabetical"
+                  }
+                )),
+                target: /* @__PURE__ */ React$2.createElement(
+                  Button,
+                  {
+                    small: true,
+                    text: "Sort Order",
+                    rightIcon: "caret-down",
+                    icon: "sort"
+                  }
+                )
+              }
+            ),
+            additionalTopEl,
+            saveMessage && /* @__PURE__ */ React$2.createElement(
+              "div",
+              {
+                className: "ove-menu-toast",
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  marginLeft: "auto",
+                  marginRight: 10
+                }
+              },
+              saveMessageLoading ? /* @__PURE__ */ React$2.createElement("div", null, /* @__PURE__ */ React$2.createElement(Spinner, { size: 15 })) : /* @__PURE__ */ React$2.createElement(Icon, { icon: "tick-circle", intent: "success" }),
+              " ",
+              " ",
+              saveMessage
+            )
+          ),
+          hasTemplate ? /* @__PURE__ */ React$2.createElement(React$2.Fragment, null, /* @__PURE__ */ React$2.createElement("div", { className: "alignmentTrackFixedToTop" }, getTrackVis([firstTrack], true, alignmentTracks)), getTrackVis(otherTracks, false, alignmentTracks)) : getTrackVis(alignmentTracks, false, alignmentTracks)
+        )
+      ),
+      !isInPairwiseOverviewView && /* @__PURE__ */ React$2.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$2.createElement(
+          Minimap,
+          {
+            selectionLayerComp: /* @__PURE__ */ React$2.createElement(React$2.Fragment, null, /* @__PURE__ */ React$2.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$2.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$2.createElement(
+        GlobalDialog,
+        null
+      )
+    )));
+  }, "AlignmentView");
   const AlignmentView$1 = compose(
     withStore,
     withEditorProps,