@teselagen/ove 0.8.39 → 0.8.40

package/index.umd.js

@@ -145343,7 +145343,7 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
     input.click();
   }
   __name(showFileDialog, "showFileDialog");
-  const version = "0.8.39";
+  const version = "0.8.40";
   const packageJson = {
     version
   };
@@ -151952,6 +151952,853 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
     return splitRangeIntoTwoPartsIfItIsCircular(inverted, seqLen);
   }
   __name(getTrimmedRangesToDisplay, "getTrimmedRangesToDisplay");
+  function scrollToAlignmentSelection() {
+    const el = document.querySelector(".veCaret");
+    if (el) {
+      el.scrollIntoView({ inline: "center", block: "nearest" });
+    }
+  }
+  __name(scrollToAlignmentSelection, "scrollToAlignmentSelection");
+  function updateCaretPosition({ start: start2, end: end2 }) {
+    if (window.updateAlignmentSelection) {
+      window.updateAlignmentSelection({ start: start2, end: end2 });
+    }
+  }
+  __name(updateCaretPosition, "updateCaretPosition");
+  function FindMismatches(props) {
+    const { alignmentJson, id: id2 } = props;
+    const alignedSeqs = reactExports.useMemo(
+      () => alignmentJson.map((t2) => {
+        var _a2;
+        return ((_a2 = t2.alignmentData) == null ? void 0 : _a2.sequence) || "";
+      }),
+      [alignmentJson]
+    );
+    const mismatches = reactExports.useMemo(() => {
+      const result = [{ position: 0, bases: [""] }];
+      if (alignedSeqs.length > 1 && alignedSeqs[0].length) {
+        for (let i2 = 0; i2 < alignedSeqs[0].length; i2++) {
+          const bases = alignedSeqs.map((seq) => seq[i2]);
+          const uniqueBases = new Set(bases);
+          if (uniqueBases.size > 1 && !uniqueBases.has("-")) {
+            result.push({ position: i2, bases });
+          }
+        }
+      }
+      return result;
+    }, [alignedSeqs]);
+    const currentCaretPosition = useSelector(
+      (state2) => {
+        var _a2;
+        return (_a2 = state2.VectorEditor.__allEditorsOptions.alignments[id2]) == null ? void 0 : _a2.caretPosition;
+      }
+    );
+    const [currentIdx, setCurrentIdx] = React.useState(0);
+    const [disablePrev, setDisablePrev] = React.useState(true);
+    const [disableNext, setDisableNext] = React.useState(false);
+    const currentMismatch = mismatches[currentIdx];
+    const handleButtonsState = reactExports.useCallback(
+      (caret) => {
+        if (mismatches.length <= 1) {
+          setDisablePrev(true);
+          setDisableNext(true);
+          return;
+        }
+        const firstMismatchPos = mismatches[1].position;
+        const lastMismatchPos = mismatches[mismatches.length - 1].position;
+        setDisablePrev(caret <= firstMismatchPos);
+        setDisableNext(caret >= lastMismatchPos);
+      },
+      [mismatches]
+    );
+    reactExports.useEffect(() => {
+      if (currentCaretPosition !== -1) {
+        const mismatchIdx = mismatches.findIndex(
+          (m2) => m2.position === currentCaretPosition || m2.position === currentCaretPosition - 1
+        );
+        if (mismatchIdx !== -1 && mismatchIdx !== currentIdx) {
+          handleButtonsState(currentCaretPosition);
+          setCurrentIdx(mismatchIdx);
+        }
+      }
+    }, [currentCaretPosition, mismatches, currentIdx, handleButtonsState]);
+    const updateView = /* @__PURE__ */ __name((mismatch) => {
+      const idx = mismatches.indexOf(mismatch);
+      const position2 = mismatch.position;
+      handleButtonsState(position2);
+      setCurrentIdx(idx);
+      updateCaretPosition({ start: position2, end: position2 });
+      setTimeout(() => {
+        scrollToAlignmentSelection();
+      }, 0);
+    }, "updateView");
+    const prevMismatch = /* @__PURE__ */ __name(() => {
+      if (currentIdx > 1) {
+        const newIdx = Math.max(0, currentIdx - 1);
+        let prev = mismatches[newIdx];
+        if (currentCaretPosition > 0) {
+          prev = [...mismatches].reverse().find((m2) => m2.position < currentCaretPosition);
+        }
+        if (prev) {
+          updateView(prev);
+        }
+      }
+    }, "prevMismatch");
+    const nextMismatch = /* @__PURE__ */ __name(() => {
+      if (currentIdx < mismatches.length - 1) {
+        const newIdx = Math.min(mismatches.length - 1, currentIdx + 1);
+        let next = mismatches[newIdx];
+        if (currentCaretPosition > 0) {
+          next = mismatches.find(
+            (m2) => m2.position > currentCaretPosition && m2.position > 1
+          );
+        }
+        if (next) {
+          updateView(next);
+        }
+      }
+    }, "nextMismatch");
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "row",
+          justifyContent: "center",
+          alignItems: "center",
+          gap: 10
+        }
+      },
+      mismatches.length === 1 ? /* @__PURE__ */ React.createElement("span", { style: { fontStyle: "italic", color: "grey" } }, "no mismatches") : /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "column" } }, /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center"
+          }
+        },
+        /* @__PURE__ */ React.createElement("strong", null, "Mismatches"),
+        /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: 2 } }, /* @__PURE__ */ React.createElement(
+          Button,
+          {
+            intent: "primary",
+            icon: "arrow-left",
+            "data-tip": "Previous Mismatch",
+            onClick: prevMismatch,
+            disabled: disablePrev,
+            small: true,
+            minimal: true
+          }
+        ), /* @__PURE__ */ React.createElement(
+          Button,
+          {
+            intent: "primary",
+            icon: "arrow-right",
+            "data-tip": "Next Mismatch",
+            onClick: nextMismatch,
+            disabled: disableNext,
+            small: true,
+            minimal: true
+          }
+        ))
+      ), /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          style: {
+            fontSize: "0.8em",
+            color: "grey",
+            lineHeight: "0.8em"
+          }
+        },
+        currentMismatch.position > 1 && /* @__PURE__ */ React.createElement("span", null, "Position: ", currentMismatch.position + 1, " | "),
+        "(",
+        currentIdx,
+        " of ",
+        mismatches.length - 1,
+        ")"
+      ))
+    );
+  }
+  __name(FindMismatches, "FindMismatches");
+  function getGapMap(sequence2) {
+    const gapMap = [0];
+    sequence2.split("").forEach((char) => {
+      if (char === "-") {
+        gapMap[Math.max(0, gapMap.length - 1)] = (gapMap[Math.max(0, gapMap.length - 1)] || 0) + 1;
+      } else {
+        gapMap.push(gapMap[gapMap.length - 1] || 0);
+      }
+    });
+    return gapMap;
+  }
+  __name(getGapMap, "getGapMap");
+  const MATCH_COLOR = "gold";
+  const CURRENT_MATCH_COLOR = "green";
+  const MISMATCH_COLOR = "red";
+  const ANNOTATION_TYPES = ["features", "parts", "primers"];
+  const initialSearchState = {
+    searchText: "",
+    matches: [],
+    currentMatchIndex: 0,
+    searched: false,
+    featureMatches: [],
+    dnaOrAA: "DNA",
+    ambiguousOrLiteral: "LITERAL",
+    mismatchesAllowed: 0
+  };
+  function searchReducer(state2, action2) {
+    switch (action2.type) {
+      case "SET_SEARCH_TEXT":
+        return __spreadProps(__spreadValues({}, state2), { searchText: action2.payload });
+      case "SET_MATCHES":
+        return __spreadProps(__spreadValues({}, state2), {
+          matches: action2.payload.matches,
+          currentMatchIndex: action2.payload.currentMatchIndex
+        });
+      case "SET_CURRENT_MATCH_INDEX":
+        return __spreadProps(__spreadValues({}, state2), { currentMatchIndex: action2.payload });
+      case "SET_SEARCHED":
+        return __spreadProps(__spreadValues({}, state2), { searched: action2.payload });
+      case "SEARCH_COMPLETE":
+        return __spreadProps(__spreadValues({}, state2), {
+          matches: action2.payload.matches,
+          currentMatchIndex: action2.payload.currentMatchIndex,
+          searched: action2.payload.searched
+        });
+      case "SET_FEATURE_MATCHES":
+        return __spreadProps(__spreadValues({}, state2), { featureMatches: action2.payload });
+      case "SET_DNA_OR_AA":
+        return __spreadProps(__spreadValues({}, state2), { dnaOrAA: action2.payload });
+      case "SET_AMBIGUOUS_OR_LITERAL":
+        return __spreadProps(__spreadValues({}, state2), { ambiguousOrLiteral: action2.payload });
+      case "SET_MISMATCHES_ALLOWED":
+        return __spreadProps(__spreadValues({}, state2), { mismatchesAllowed: Math.max(0, action2.payload) });
+      case "RESET":
+        return __spreadValues({}, initialSearchState);
+      default:
+        return state2;
+    }
+  }
+  __name(searchReducer, "searchReducer");
+  function AlignmentSearchBar(props) {
+    const { alignmentTracks = [], setSearchMatchLayers } = props;
+    const [searchState, dispatch] = reactExports.useReducer(searchReducer, initialSearchState);
+    const {
+      searchText,
+      matches,
+      currentMatchIndex,
+      searched,
+      featureMatches,
+      dnaOrAA,
+      ambiguousOrLiteral,
+      mismatchesAllowed
+    } = searchState;
+    const debouncedSearch = reactExports.useRef(
+      debounce((text2, search2, featureSearch) => {
+        search2(text2);
+        featureSearch(text2);
+      }, 50)
+    ).current;
+    reactExports.useEffect(() => {
+      return () => {
+        debouncedSearch.cancel();
+      };
+    }, [debouncedSearch]);
+    const [highlightAll, setHighlightAll] = reactExports.useState(false);
+    const [isExpanded, setIsExpanded] = reactExports.useState(false);
+    const [isOpen2, setIsOpen] = reactExports.useState(false);
+    const [isPopoverOpen, setIsPopoverOpen] = reactExports.useState(false);
+    const handleToggleExpanded = reactExports.useCallback(() => {
+      setIsExpanded((prev) => {
+        const next = !prev;
+        if (!next) setIsPopoverOpen(true);
+        return next;
+      });
+    }, [setIsPopoverOpen]);
+    reactExports.useEffect(() => {
+      dispatch({ type: "RESET" });
+      if (setSearchMatchLayers) setSearchMatchLayers([]);
+    }, [setSearchMatchLayers]);
+    const buildMatchLayers = reactExports.useCallback(
+      (allMatches, activeIndex) => {
+        if (!setSearchMatchLayers) return;
+        if (!allMatches.length) {
+          setSearchMatchLayers([]);
+          return;
+        }
+        const makeMismatchLayers = /* @__PURE__ */ __name((match) => (match.mismatchAlignmentPositions || []).map((pos) => ({
+          start: pos,
+          end: pos,
+          color: MISMATCH_COLOR,
+          className: "veSearchMismatch",
+          ignoreGaps: true,
+          hideCarets: true
+        })), "makeMismatchLayers");
+        const layers = highlightAll ? allMatches.flatMap((match, i2) => [
+          {
+            start: match.alignmentStart,
+            end: match.alignmentEnd,
+            color: i2 === activeIndex ? CURRENT_MATCH_COLOR : MATCH_COLOR,
+            className: i2 === activeIndex ? "veSearchLayerActive" : "veSearchLayer",
+            ignoreGaps: true
+          },
+          ...makeMismatchLayers(match)
+        ]) : [
+          {
+            start: allMatches[activeIndex].alignmentStart,
+            end: allMatches[activeIndex].alignmentEnd,
+            color: CURRENT_MATCH_COLOR,
+            className: "veSearchLayerActive",
+            ignoreGaps: true
+          },
+          ...makeMismatchLayers(allMatches[activeIndex])
+        ];
+        setSearchMatchLayers(layers);
+      },
+      [setSearchMatchLayers, highlightAll]
+    );
+    const navigateTo = reactExports.useCallback(
+      (allMatches, index2) => {
+        const match = allMatches[index2];
+        if (!match) return;
+        updateCaretPosition({
+          start: match.alignmentStart,
+          end: match.alignmentEnd
+        });
+        setTimeout(() => {
+          scrollToAlignmentSelection();
+        }, 0);
+        buildMatchLayers(allMatches, index2);
+      },
+      [buildMatchLayers]
+    );
+    const runSearch = reactExports.useCallback(
+      (text2) => {
+        const query = text2.trim();
+        if (!query) {
+          dispatch({
+            type: "SEARCH_COMPLETE",
+            payload: { matches: [], currentMatchIndex: 0, searched: false }
+          });
+          if (setSearchMatchLayers) setSearchMatchLayers([]);
+          return;
+        }
+        const allMatches = [];
+        alignmentTracks.slice(0, 1).forEach((track, trackIndex) => {
+          var _a2, _b2;
+          const rawSeq = ((_a2 = track.sequenceData) == null ? void 0 : _a2.sequence) || "";
+          const alignedSeq = ((_b2 = track.alignmentData) == null ? void 0 : _b2.sequence) || "";
+          const gapMap = getGapMap(alignedSeq);
+          const gapOffset = /* @__PURE__ */ __name((n2) => {
+            var _a3, _b3;
+            return (_b3 = (_a3 = gapMap[n2]) != null ? _a3 : gapMap[gapMap.length - 1]) != null ? _b3 : 0;
+          }, "gapOffset");
+          let seqMatches = [];
+          if (dnaOrAA === "DNA" && ambiguousOrLiteral === "LITERAL" && mismatchesAllowed > 0) {
+            const approxMatches = findApproxMatches(
+              query.toLowerCase(),
+              rawSeq.toLowerCase(),
+              mismatchesAllowed,
+              false
+            );
+            seqMatches = approxMatches.map((m2) => ({
+              start: m2.index,
+              end: m2.index + m2.match.length - 1,
+              mismatchPositions: m2.mismatchPositions
+            }));
+          } else {
+            seqMatches = findSequenceMatches(rawSeq, query, {
+              isCircular: false,
+              isAmbiguous: ambiguousOrLiteral === "AMBIGUOUS",
+              isProteinSearch: dnaOrAA !== "DNA",
+              searchReverseStrand: dnaOrAA === "DNA"
+            });
+          }
+          const hitsToProcess = query.length < 2 ? seqMatches.slice(0, 1) : seqMatches;
+          hitsToProcess.forEach(({ start: start2, end: end2, mismatchPositions }) => {
+            const alignmentStart = start2 + gapOffset(start2);
+            const alignmentEnd = end2 + gapOffset(end2);
+            const mismatchAlignmentPositions = (mismatchPositions || []).map(
+              (p2) => {
+                const absPos = start2 + p2;
+                return absPos + gapOffset(absPos);
+              }
+            );
+            allMatches.push({
+              trackIndex,
+              alignmentStart,
+              alignmentEnd,
+              mismatchAlignmentPositions
+            });
+          });
+        });
+        const results = query.length < 2 ? allMatches.slice(0, 1) : allMatches;
+        dispatch({
+          type: "SEARCH_COMPLETE",
+          payload: { matches: results, currentMatchIndex: 0, searched: true }
+        });
+        if (results.length) {
+          navigateTo(results, 0);
+        } else {
+          if (setSearchMatchLayers) setSearchMatchLayers([]);
+        }
+      },
+      [
+        alignmentTracks,
+        navigateTo,
+        dnaOrAA,
+        ambiguousOrLiteral,
+        mismatchesAllowed,
+        setSearchMatchLayers
+      ]
+    );
+    const runFeatureSearch = reactExports.useCallback(
+      (text2) => {
+        const query = text2.trim().toLowerCase();
+        if (!query) {
+          dispatch({ type: "SET_FEATURE_MATCHES", payload: [] });
+          return;
+        }
+        const allMatches = [];
+        alignmentTracks.slice(0, 1).forEach((track, trackIndex) => {
+          const { sequenceData: sequenceData2, alignmentData } = track;
+          const alignedSeq = (alignmentData == null ? void 0 : alignmentData.sequence) || "";
+          const gapMap = getGapMap(alignedSeq);
+          const gapOffset = /* @__PURE__ */ __name((n2) => {
+            var _a2, _b2;
+            return (_b2 = (_a2 = gapMap[n2]) != null ? _a2 : gapMap[gapMap.length - 1]) != null ? _b2 : 0;
+          }, "gapOffset");
+          const trackName = (alignmentData == null ? void 0 : alignmentData.name) || (sequenceData2 == null ? void 0 : sequenceData2.name) || (sequenceData2 == null ? void 0 : sequenceData2.id) || "";
+          ANNOTATION_TYPES.forEach((type2) => {
+            const anns = sequenceData2 == null ? void 0 : sequenceData2[type2];
+            if (!anns) return;
+            const annsArray = Array.isArray(anns) ? anns : Object.values(anns);
+            annsArray.forEach((ann) => {
+              if (!ann.name) return;
+              if (ann.name.toLowerCase().includes(query)) {
+                const alignmentStart = ann.start + gapOffset(ann.start);
+                const alignmentEnd = ann.end + gapOffset(ann.end);
+                allMatches.push({
+                  trackIndex,
+                  trackName,
+                  type: type2,
+                  annotation: ann,
+                  alignmentStart,
+                  alignmentEnd
+                });
+              }
+            });
+          });
+        });
+        dispatch({ type: "SET_FEATURE_MATCHES", payload: allMatches });
+      },
+      [alignmentTracks]
+    );
+    const goToPrev = reactExports.useCallback(() => {
+      if (!matches.length) return;
+      const newIndex = currentMatchIndex === 0 ? matches.length - 1 : currentMatchIndex - 1;
+      dispatch({ type: "SET_CURRENT_MATCH_INDEX", payload: newIndex });
+      navigateTo(matches, newIndex);
+    }, [matches, currentMatchIndex, navigateTo]);
+    const goToNext = reactExports.useCallback(() => {
+      if (!matches.length) return;
+      const newIndex = currentMatchIndex === matches.length - 1 ? 0 : currentMatchIndex + 1;
+      dispatch({ type: "SET_CURRENT_MATCH_INDEX", payload: newIndex });
+      navigateTo(matches, newIndex);
+    }, [matches, currentMatchIndex, navigateTo]);
+    const handleKeyDown = reactExports.useCallback(
+      (e2) => {
+        if (e2.key === "Escape") {
+          setIsOpen(false);
+        }
+        if (e2.key === "Enter") {
+          if (e2.shiftKey) {
+            goToPrev();
+          } else {
+            goToNext();
+          }
+          e2.preventDefault();
+          e2.stopPropagation();
+        }
+      },
+      [goToPrev, goToNext]
+    );
+    reactExports.useEffect(() => {
+      if (!searched || !searchText.trim()) return;
+      runSearch(searchText);
+      runFeatureSearch(searchText);
+    }, [
+      dnaOrAA,
+      ambiguousOrLiteral,
+      mismatchesAllowed,
+      runSearch,
+      runFeatureSearch,
+      searched,
+      searchText
+    ]);
+    reactExports.useEffect(() => {
+      if (searchText.trim().length < 1) setHighlightAll(false);
+    }, [searchText]);
+    const prevHighlightAll = reactExports.useRef(highlightAll);
+    reactExports.useEffect(() => {
+      if (prevHighlightAll.current !== highlightAll) {
+        prevHighlightAll.current = highlightAll;
+        if (matches.length) buildMatchLayers(matches, currentMatchIndex);
+      }
+    }, [highlightAll, matches, currentMatchIndex, buildMatchLayers]);
+    const hasMatches = matches.length > 0;
+    const handleChange = reactExports.useCallback(
+      (e2) => {
+        const value = e2.target.value;
+        dispatch({ type: "SET_SEARCH_TEXT", payload: value });
+        debouncedSearch(value, runSearch, runFeatureSearch);
+      },
+      [debouncedSearch, runSearch, runFeatureSearch]
+    );
+    const handleFeatureClick = reactExports.useCallback((featureMatch) => {
+      updateCaretPosition({
+        start: featureMatch.alignmentStart,
+        end: featureMatch.alignmentEnd
+      });
+      setTimeout(() => {
+        scrollToAlignmentSelection();
+      }, 0);
+    }, []);
+    const matchCounter = /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        style: {
+          marginRight: 3,
+          color: "lightgrey",
+          fontSize: "0.9em",
+          whiteSpace: "nowrap"
+        }
+      },
+      hasMatches ? currentMatchIndex + 1 : 0,
+      "/",
+      matches.length
+    );
+    const inlineNavEl = /* @__PURE__ */ React.createElement("span", { style: { display: "flex", alignItems: "center" } }, !isExpanded && /* @__PURE__ */ React.createElement(
+      Popover,
+      {
+        autoFocus: false,
+        enforceFocus: false,
+        isOpen: isPopoverOpen,
+        onInteraction: setIsPopoverOpen,
+        position: Position.TOP,
+        content: /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: "ve-find-options-popover",
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              paddingLeft: 20,
+              paddingBottom: 10,
+              paddingTop: 10,
+              paddingRight: 20,
+              gap: 6
+            }
+          },
+          /* @__PURE__ */ React.createElement(
+            FindOptionsPanel,
+            {
+              dnaOrAA,
+              ambiguousOrLiteral,
+              mismatchesAllowed,
+              searchText,
+              matches,
+              dispatch,
+              highlightAll,
+              setHighlightAll,
+              isExpanded,
+              onToggleExpanded: handleToggleExpanded
+            }
+          )
+        ),
+        target: /* @__PURE__ */ React.createElement(Button, { minimal: true, icon: "wrench", "data-tip": "Options" })
+      }
+    ), matchCounter, /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        minimal: true,
+        small: true,
+        icon: "caret-left",
+        "data-tip": "Previous",
+        disabled: !hasMatches,
+        onClick: goToPrev
+      }
+    ), /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        minimal: true,
+        small: true,
+        icon: "caret-right",
+        "data-tip": "Next",
+        disabled: !hasMatches,
+        onClick: goToNext
+      }
+    ), /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        minimal: true,
+        small: true,
+        "data-tip": "Close (Esc)",
+        icon: "small-cross",
+        onClick: /* @__PURE__ */ __name(() => setIsOpen(false), "onClick")
+      }
+    ));
+    const expandedNavEl = /* @__PURE__ */ React.createElement("span", { style: { display: "flex", alignItems: "center" } }, matchCounter, /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        minimal: true,
+        small: true,
+        icon: "caret-up",
+        disabled: !hasMatches,
+        onClick: goToPrev
+      }
+    ), /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        minimal: true,
+        small: true,
+        icon: "caret-down",
+        disabled: !hasMatches,
+        onClick: goToNext
+      }
+    ));
+    if (!isOpen2) {
+      return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+        Button,
+        {
+          minimal: true,
+          small: true,
+          intent: "primary",
+          icon: "search",
+          rightIcon: "caret-right",
+          "data-tip": "Search",
+          onClick: /* @__PURE__ */ __name(() => setIsOpen(true), "onClick")
+        }
+      ));
+    }
+    const annotationPopoverOpen = searched && featureMatches.length > 0;
+    const inputEl = /* @__PURE__ */ React.createElement(
+      InputGroup,
+      {
+        className: "tg-find-tool-input alignment-search-bar",
+        leftIcon: "search",
+        placeholder: "Search...",
+        autoFocus: true,
+        value: searchText,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        rightElement: inlineNavEl
+      }
+    );
+    return /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, !isExpanded && /* @__PURE__ */ React.createElement(
+      Popover,
+      {
+        autoFocus: false,
+        enforceFocus: false,
+        modifiers: {
+          arrow: false
+        },
+        position: Position.BOTTOM,
+        isOpen: annotationPopoverOpen,
+        content: /* @__PURE__ */ React.createElement(
+          AnnotationResultsComp,
+          {
+            featureMatches,
+            onClickMatch: handleFeatureClick
+          }
+        ),
+        target: inputEl
+      }
+    ), isExpanded && /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          padding: 10,
+          paddingBottom: 25,
+          display: "flex",
+          alignItems: "flex-start",
+          gap: 10,
+          zIndex: 5e4,
+          background: "white",
+          boxShadow: "0 2px 8px rgba(0,0,0,0.2)",
+          borderRadius: 3
+        }
+      },
+      /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 6 } }, /* @__PURE__ */ React.createElement(
+        TextArea,
+        {
+          autoFocus: true,
+          placeholder: "Search sequences and annotations...",
+          value: searchText,
+          onChange: handleChange,
+          onKeyDown: handleKeyDown,
+          style: { resize: "vertical", width: 350, height: 190 }
+        }
+      ), annotationPopoverOpen && /* @__PURE__ */ React.createElement(
+        AnnotationResultsComp,
+        {
+          featureMatches,
+          onClickMatch: handleFeatureClick
+        }
+      )),
+      /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 5 } }, expandedNavEl, /* @__PURE__ */ React.createElement(
+        FindOptionsPanel,
+        {
+          dnaOrAA,
+          ambiguousOrLiteral,
+          mismatchesAllowed,
+          searchText,
+          matches,
+          dispatch,
+          highlightAll,
+          setHighlightAll,
+          isExpanded,
+          onToggleExpanded: handleToggleExpanded
+        }
+      )),
+      /* @__PURE__ */ React.createElement(
+        Button,
+        {
+          minimal: true,
+          style: { position: "absolute", bottom: 0, right: 0 },
+          onClick: /* @__PURE__ */ __name(() => setIsOpen(false), "onClick"),
+          icon: "cross"
+        }
+      )
+    ));
+  }
+  __name(AlignmentSearchBar, "AlignmentSearchBar");
+  function AnnotationResultsComp({ featureMatches, onClickMatch }) {
+    const byType = {};
+    ANNOTATION_TYPES.forEach((type2) => {
+      byType[type2] = [];
+    });
+    featureMatches.forEach((match) => {
+      if (byType[match.type]) {
+        byType[match.type].push(match);
+      }
+    });
+    const featureColorMap = getFeatureToColorMap({ includeHidden: true });
+    return /* @__PURE__ */ React.createElement("div", { className: "veAnnotationFindMatches" }, ANNOTATION_TYPES.map((type2) => {
+      const anns = byType[type2];
+      if (!anns.length) return null;
+      const showing = anns.slice(0, 10);
+      return /* @__PURE__ */ React.createElement("div", { key: type2 }, /* @__PURE__ */ React.createElement("div", { className: "veAnnotationFoundType" }, anns.length, " ", getSingular(type2), " match", anns.length > 1 ? "es" : null, anns.length > 10 ? ` (only showing 10)` : null, ":"), /* @__PURE__ */ React.createElement("div", null, showing.map((match, i2) => {
+        const { annotation } = match;
+        const annotationColor = type2 === "parts" ? "#ac68cc" : annotation.color || featureColorMap[annotation.type];
+        return /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            key: i2,
+            onClick: /* @__PURE__ */ __name(() => onClickMatch(match), "onClick"),
+            className: "veAnnotationFoundResult"
+          },
+          /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              style: {
+                background: annotationColor,
+                height: 15,
+                width: 15,
+                marginRight: 3
+              }
+            }
+          ), annotation.name),
+          /* @__PURE__ */ React.createElement("div", { className: "veAnnotationFoundResultRange" }, annotation.start + 1, "-", annotation.end + 1)
+        );
+      })));
+    }));
+  }
+  __name(AnnotationResultsComp, "AnnotationResultsComp");
+  function FindOptionsPanel({
+    dnaOrAA,
+    ambiguousOrLiteral,
+    mismatchesAllowed,
+    searchText,
+    matches,
+    dispatch,
+    highlightAll,
+    setHighlightAll,
+    isExpanded,
+    onToggleExpanded
+  }) {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      TgHTMLSelect,
+      {
+        options: [
+          { label: "DNA", value: "DNA" },
+          { label: "Amino Acids", value: "AA" }
+        ],
+        value: dnaOrAA,
+        onChange: /* @__PURE__ */ __name((e2) => dispatch({ type: "SET_DNA_OR_AA", payload: e2.target.value }), "onChange")
+      }
+    ), /* @__PURE__ */ React.createElement("div", { style: { display: "flex" } }, /* @__PURE__ */ React.createElement(
+      TgHTMLSelect,
+      {
+        options: [
+          { label: "Literal", value: "LITERAL" },
+          { label: "Ambiguous", value: "AMBIGUOUS" }
+        ],
+        value: ambiguousOrLiteral,
+        onChange: /* @__PURE__ */ __name((e2) => dispatch({
+          type: "SET_AMBIGUOUS_OR_LITERAL",
+          payload: e2.target.value
+        }), "onChange")
+      }
+    ), /* @__PURE__ */ React.createElement(InfoHelper, { style: { marginLeft: 10 } }, /* @__PURE__ */ React.createElement("div", null, "Ambiguous substitutions:", /* @__PURE__ */ React.createElement("div", { style: { display: "flex", fontSize: 12 } }, /* @__PURE__ */ React.createElement("div", { style: { marginRight: 20 } }, /* @__PURE__ */ React.createElement("div", { style: { fontSize: 14, marginBottom: 4, marginTop: 5 } }, "DNA:"), /* @__PURE__ */ React.createElement("div", null, "M: AC"), /* @__PURE__ */ React.createElement("div", null, "R: AG"), /* @__PURE__ */ React.createElement("div", null, "W: AT"), /* @__PURE__ */ React.createElement("div", null, "S: CG"), /* @__PURE__ */ React.createElement("div", null, "Y: CT"), /* @__PURE__ */ React.createElement("div", null, "K: GT"), /* @__PURE__ */ React.createElement("div", null, "V: ACG"), /* @__PURE__ */ React.createElement("div", null, "H: ACT"), /* @__PURE__ */ React.createElement("div", null, "D: AGT"), /* @__PURE__ */ React.createElement("div", null, "B: CGT"), /* @__PURE__ */ React.createElement("div", null, "X: GATC"), /* @__PURE__ */ React.createElement("div", null, "N: GATC"), /* @__PURE__ */ React.createElement("div", null, "*: any")), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { style: { fontSize: 14, marginBottom: 4, marginTop: 5 } }, "AA:"), /* @__PURE__ */ React.createElement("div", null, "B: ND"), /* @__PURE__ */ React.createElement("div", null, "J: IL"), /* @__PURE__ */ React.createElement("div", null, "X: ACDEFGHIKLMNPQRSTVWY"), /* @__PURE__ */ React.createElement("div", null, "Z: QE"), /* @__PURE__ */ React.createElement("div", null, "*: any")))))), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          marginTop: "8px",
+          display: "flex",
+          flexDirection: "row",
+          gap: "3px",
+          alignItems: "center"
+        }
+      },
+      /* @__PURE__ */ React.createElement("label", null, "Mismatches Allowed:"),
+      /* @__PURE__ */ React.createElement(
+        NumericInput,
+        {
+          min: 0,
+          max: 10,
+          className: "tg-mismatches-allowed-input",
+          style: { width: "60px" },
+          value: mismatchesAllowed,
+          disabled: dnaOrAA !== "DNA" || ambiguousOrLiteral !== "LITERAL",
+          onValueChange: /* @__PURE__ */ __name((value) => dispatch({
+            type: "SET_MISMATCHES_ALLOWED",
+            payload: Number.parseInt(value, 10) || 0
+          }), "onValueChange")
+        }
+      ),
+      /* @__PURE__ */ React.createElement(InfoHelper, { style: { marginLeft: 10 } }, /* @__PURE__ */ React.createElement("div", null, "Number of mismatches allowed when searching DNA sequences with literal matching.", /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement("br", null), "Higher values may slow down search performance."))
+    ), /* @__PURE__ */ React.createElement(
+      Switch,
+      {
+        checked: highlightAll,
+        onChange: /* @__PURE__ */ __name(() => setHighlightAll((v2) => !v2), "onChange"),
+        disabled: searchText.trim().length < 2 || matches.length > MAX_MATCHES_DISPLAYED
+      },
+      /* @__PURE__ */ React.createElement(
+        Tooltip,
+        {
+          disabled: matches.length <= MAX_MATCHES_DISPLAYED,
+          content: `Disabled because there are >${MAX_MATCHES_DISPLAYED} matches`
+        },
+        "Highlight All"
+      )
+    ), /* @__PURE__ */ React.createElement(Switch, { checked: isExpanded, onChange: onToggleExpanded }, "Expanded"));
+  }
+  __name(FindOptionsPanel, "FindOptionsPanel");
   const AlignmentVisibilityTool = pure(/* @__PURE__ */ __name(function AlignmentVisibilityTool2(props) {
     return /* @__PURE__ */ React.createElement(
       Popover,
@@ -165135,7 +165982,6 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
   const PropertySidePanel = /* @__PURE__ */ __name(({ properties: properties2, setProperties, style: style2 }) => {
     const sidebarRef = React.useRef(null);
     const [mismatchesCount, setMismatchesCount] = React.useState(0);
-    const [mismatchesInRange, setMismatchesInRange] = React.useState(0);
     const { track, isOpen: isOpen2, selection, isPairwise } = properties2;
     const getSequenceInRegion = reactExports.useCallback(() => {
       var _a2, _b2;
@@ -165154,6 +166000,30 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
       if (!Array.isArray(tr)) return [];
       return isPairwise ? tr.filter((m2) => (m2 == null ? void 0 : m2.color) === "red") : tr;
     }, [track, mismatchKey, isPairwise]);
+    const mismatchSchema = reactExports.useMemo(
+      () => ({
+        fields: [
+          {
+            path: "start",
+            type: "number",
+            displayName: "Start",
+            render: /* @__PURE__ */ __name((val2) => val2 + 1, "render")
+          },
+          {
+            path: "end",
+            type: "number",
+            displayName: "End",
+            render: /* @__PURE__ */ __name((val2) => val2 + 1, "render")
+          }
+        ]
+      }),
+      []
+    );
+    const mismatchEntities = reactExports.useMemo(() => {
+      return (trackMismatches || []).map((m2, i2) => __spreadProps(__spreadValues({}, m2), {
+        id: i2.toString()
+      }));
+    }, [trackMismatches]);
     reactExports.useEffect(() => {
       if (!isOpen2 || sidebarRef.current === null || !track) {
         return;
@@ -165171,21 +166041,6 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
         }
       });
       setMismatchesCount(mismatchCount);
-      setMismatchesInRange(mismatchCount);
-      if (selection && selection.start > -1 && selection.end > -1) {
-        let count2 = 0;
-        trackMismatches == null ? void 0 : trackMismatches.forEach((tm) => {
-          if (tm === null || tm.start === null || tm.end === null) {
-            return;
-          }
-          const overlapStart = Math.max(tm.start, selection.start);
-          const overlapEnd = Math.min(tm.end, selection.end);
-          if (overlapEnd >= overlapStart) {
-            count2 += overlapEnd - overlapStart + 1;
-          }
-        });
-        setMismatchesInRange(count2);
-      }
     }, [isOpen2, track, selection, trackMismatches]);
     const aminoFreq = reactExports.useMemo(() => {
       var _a2, _b2;
@@ -165221,7 +166076,7 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
             width: "100%"
           }
         }
-      ), /* @__PURE__ */ React.createElement("h5", null, "Track Properties"), /* @__PURE__ */ React.createElement("div", { className: "bp3-tab-panel" }, /* @__PURE__ */ React.createElement(RowItem, { item: name2, title: "Name" }), /* @__PURE__ */ React.createElement(RowItem, { item: isProtein2 ? proteinSize : size2, title: "Length" }), /* @__PURE__ */ React.createElement(
+      ), /* @__PURE__ */ React.createElement(HeaderItem, { title: "Track Properties" }), /* @__PURE__ */ React.createElement("div", { className: "bp3-tab-panel" }, /* @__PURE__ */ React.createElement(RowItem, { item: name2, title: "Name" }), /* @__PURE__ */ React.createElement(RowItem, { item: isProtein2 ? proteinSize : size2, title: "Length" }), /* @__PURE__ */ React.createElement(
         RowItem,
         {
           item: molecularWeight == null ? void 0 : molecularWeight.toFixed(2),
@@ -165235,18 +166090,45 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
           title: "Extinction Coefficient"
         }
       )), /* @__PURE__ */ React.createElement(
-        RowItem,
-        {
-          item: `${mismatchesInRange}/${mismatchesCount}`,
-          title: "Mismatches"
-        }
-      ), /* @__PURE__ */ React.createElement(
         RowItem,
         {
           item: selection && selection.start > -1 ? /* @__PURE__ */ React.createElement("span", null, selection.start + 1, " - ", selection.end + 1) : /* @__PURE__ */ React.createElement("span", null, "1 - ", isProtein2 ? proteinSize : size2),
           title: "Region"
         }
-      )), /* @__PURE__ */ React.createElement("h5", null, isProtein2 ? "Amino Acid" : "Base Pair", " Frequencies"), /* @__PURE__ */ React.createElement("div", { className: "sidebar-table" }, /* @__PURE__ */ React.createElement("div", { className: "sidebar-row" }, /* @__PURE__ */ React.createElement("div", { className: "sidebar-cell" }, isProtein2 ? "Amino Acid" : "Base"), /* @__PURE__ */ React.createElement("div", { className: "sidebar-cell" }, "Count"), /* @__PURE__ */ React.createElement("div", { className: "sidebar-cell" }, "Percentage")), frequencyEntries.map(([aa, data], idx) => {
+      ), /* @__PURE__ */ React.createElement(HeaderItem, { title: `Mismatches (${mismatchesCount})` }), trackMismatches && trackMismatches.length > 0 && /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            margin: "0px 10px"
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          WrappedDT,
+          {
+            formName: "mismatchesTable",
+            isSimple: true,
+            noHeader: true,
+            noFooter: true,
+            withSearch: false,
+            noPadding: true,
+            compact: true,
+            maxHeight: 150,
+            entities: mismatchEntities,
+            schema: mismatchSchema,
+            onRowClick: /* @__PURE__ */ __name((e2, row) => {
+              updateCaretPosition({ start: row.start, end: row.end });
+              setTimeout(() => {
+                scrollToAlignmentSelection();
+              }, 0);
+            }, "onRowClick")
+          }
+        )
+      )), /* @__PURE__ */ React.createElement(
+        HeaderItem,
+        {
+          title: `${isProtein2 ? "Amino Acid" : "Base Pair"} Frequencies`
+        }
+      ), /* @__PURE__ */ React.createElement("div", { className: "sidebar-table" }, /* @__PURE__ */ React.createElement("div", { className: "sidebar-row" }, /* @__PURE__ */ React.createElement("div", { className: "sidebar-cell" }, isProtein2 ? "Amino Acid" : "Base"), /* @__PURE__ */ React.createElement("div", { className: "sidebar-cell" }, "Count"), /* @__PURE__ */ React.createElement("div", { className: "sidebar-cell" }, "Percentage")), frequencyEntries.map(([aa, data], idx) => {
         return /* @__PURE__ */ React.createElement("div", { className: `sidebar-row property-amino-acid-${idx}` }, /* @__PURE__ */ React.createElement("div", { className: "sidebar-cell" }, aa, " ", isProtein2 ? `(${aminoAcidShortNames[aa]})` : ""), /* @__PURE__ */ React.createElement("div", { className: "sidebar-cell" }, data.count), /* @__PURE__ */ React.createElement("div", { className: "sidebar-cell" }, data.percentage.toFixed(1), "%"));
       })));
     } else {
@@ -165303,11 +166185,29 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
     );
   }, "PropertySidePanel");
   function RowItem({ item, title, units }) {
-    if (!item) return;
+    if (item == null) {
+      return null;
+    }
     const propertyClass = title.split(" ").join("-").toLowerCase();
-    return /* @__PURE__ */ React.createElement("div", { className: `ve-flex-row property-${propertyClass}` }, /* @__PURE__ */ React.createElement("div", { className: "ve-column-left" }, title), /* @__PURE__ */ React.createElement("div", { className: "ve-column-right" }, item, " ", units != null ? units : ""));
+    return /* @__PURE__ */ React.createElement("div", { className: `ve-flex-row property-${propertyClass}` }, /* @__PURE__ */ React.createElement("div", { style: { fontWeight: "bold" }, className: "ve-column-left" }, title), /* @__PURE__ */ React.createElement("div", { className: "ve-column-right" }, item, " ", units != null ? units : ""));
   }
   __name(RowItem, "RowItem");
+  const HeaderItem = /* @__PURE__ */ __name(({ title }) => {
+    return /* @__PURE__ */ React.createElement(
+      "h5",
+      {
+        style: {
+          margin: 0,
+          fontSize: 15,
+          fontWeight: "bold",
+          textAlign: "center",
+          padding: "5px 0",
+          borderBottom: "1px solid #f1f1f1"
+        }
+      },
+      title
+    );
+  }, "HeaderItem");
   function calculatePairwiseIdentity(seq1, seq2, excludeGaps = true) {
     if (seq1.length !== seq2.length) {
       throw new Error("Sequences must be aligned (same length)");
@@ -165703,6 +166603,7 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
     const [tempTrimBefore, setTempTrimBefore] = reactExports.useState({});
     const [tempTrimAfter, setTempTrimAfter] = reactExports.useState({});
     const [tempTrimmingCaret, setTempTrimmingCaret] = reactExports.useState({});
+    const [searchMatchLayers, setSearchMatchLayers] = React.useState([]);
     const bindOutsideChangeHelper = reactExports.useRef({});
     const alignmentHolder = reactExports.useRef(null);
     const alignmentHolderTop = reactExports.useRef(null);
@@ -166427,7 +167328,10 @@ ${seqDataToCopy}\r
               alignmentData,
               chromatogramData
             }) : linearViewOptions)), {
-              additionalSelectionLayers,
+              additionalSelectionLayers: [
+                ...additionalSelectionLayers || [],
+                ...searchMatchLayers || []
+              ],
               dimensions: {
                 width: linearViewWidth
               },
@@ -166955,7 +167859,7 @@ ${seqDataToCopy}\r
                   display: "flex",
                   minHeight: "32px",
                   width: "100%",
-                  flexWrap: "nowrap",
+                  flexWrap: "wrap",
                   flexDirection: "row",
                   flex: "0 0 auto"
                 },
@@ -167076,6 +167980,15 @@ ${seqDataToCopy}\r
                   currentPairwiseAlignmentIndex
                 }, alignmentVisibilityToolOptions)
               ),
+              /* @__PURE__ */ React.createElement(
+                AlignmentSearchBar,
+                {
+                  alignmentTracks,
+                  id: id2,
+                  setSearchMatchLayers
+                }
+              ),
+              /* @__PURE__ */ React.createElement(FindMismatches, { alignmentJson: alignmentTracks, id: id2 }),
               additionalTopEl,
               saveMessage && /* @__PURE__ */ React.createElement(
                 "div",
@@ -172365,108 +173278,6 @@ ${seqDataToCopy}\r
     ]
   };
   const DigestTool$1 = withEditorInteractions(DigestTool);
-  const _Mismatches = class _Mismatches extends React.Component {
-    constructor() {
-      super(...arguments);
-      __publicField(this, "getGapMap", /* @__PURE__ */ __name((sequence2) => {
-        const gapMap = [0];
-        sequence2.split("").forEach((char) => {
-          if (char === "-") {
-            gapMap[Math.max(0, gapMap.length - 1)] = (gapMap[Math.max(0, gapMap.length - 1)] || 0) + 1;
-          } else {
-            gapMap.push(gapMap[gapMap.length - 1] || 0);
-          }
-        });
-        return gapMap;
-      }, "getGapMap"));
-      __publicField(this, "getMismatchList", /* @__PURE__ */ __name((alignmentData, mismatches) => {
-        const mismatchList = [];
-        let getGaps = /* @__PURE__ */ __name(() => ({
-          gapsBefore: 0,
-          gapsInside: 0
-        }), "getGaps");
-        const gapMap = this.getGapMap(alignmentData.sequence);
-        getGaps = /* @__PURE__ */ __name((rangeOrCaretPosition) => {
-          if (typeof rangeOrCaretPosition !== "object") {
-            return {
-              gapsBefore: gapMap[Math.min(rangeOrCaretPosition, gapMap.length - 1)]
-            };
-          }
-          const { start: start2, end: end2 } = rangeOrCaretPosition;
-          const toReturn = {
-            gapsBefore: gapMap[start2],
-            gapsInside: gapMap[Math.min(end2, gapMap.length - 1)] - gapMap[Math.min(start2, gapMap.length - 1)]
-          };
-          return toReturn;
-        }, "getGaps");
-        const gapsBeforeSequence = getGaps(0).gapsBefore;
-        for (let mismatchI = 0; mismatchI < mismatches.length; mismatchI++) {
-          const mismatchEnd = mismatches[mismatchI].end;
-          const mismatchStart = mismatches[mismatchI].start;
-          const mismatchDifference = mismatchEnd - mismatchStart;
-          if (mismatchDifference === 0) {
-            mismatchList.push({
-              mismatches: mismatchStart + 1 - gapsBeforeSequence,
-              start: mismatchStart - gapsBeforeSequence,
-              end: mismatchStart - gapsBeforeSequence
-            });
-          } else {
-            for (let innerI = 0; innerI <= mismatchDifference; innerI++) {
-              mismatchList.push({
-                mismatches: mismatchStart + innerI + 1 - gapsBeforeSequence,
-                start: mismatchStart + innerI - gapsBeforeSequence,
-                end: mismatchStart + innerI - gapsBeforeSequence
-              });
-            }
-          }
-        }
-        return mismatchList;
-      }, "getMismatchList"));
-    }
-    UNSAFE_componentWillMount() {
-      const { alignmentData, mismatches } = this.props;
-      const mismatchList = this.getMismatchList(alignmentData, mismatches);
-      const schema2 = {
-        fields: [{ path: "mismatches", type: "number" }]
-      };
-      this.setState({ mismatchList, schema: schema2 });
-    }
-    render() {
-      const { mismatchList, schema: schema2 } = this.state;
-      let tableOfMismatches;
-      if (mismatchList.length === 0) {
-        tableOfMismatches = null;
-      } else {
-        tableOfMismatches = /* @__PURE__ */ React.createElement(
-          WrappedDT,
-          {
-            maxHeight: 168,
-            formName: "mismatchesTable",
-            isSimple: true,
-            compact: true,
-            noRouter: true,
-            schema: schema2,
-            entities: mismatchList
-          }
-        );
-      }
-      return /* @__PURE__ */ React.createElement("div", { style: { maxHeight: 180.8, overflowY: "scroll" } }, /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          style: {
-            // margin: 10,
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center"
-          }
-        },
-        /* @__PURE__ */ React.createElement("div", { style: { width: 100, margin: 4 } }, tableOfMismatches)
-      ));
-    }
-  };
-  __name(_Mismatches, "Mismatches");
-  let Mismatches = _Mismatches;
-  const Mismatches$1 = withSelectedEntities("mismatchesTable")(Mismatches);
   function PCRTool(props) {
     const {
       sequenceData: sequenceData2,
@@ -172638,7 +173449,7 @@ ${seqDataToCopy}\r
       comp: PropertiesDialog$1,
       panelSpecificProps: ["PropertiesProps"]
     },
-    mismatches: Mismatches$1
+    mismatches: FindMismatches
   };
   const reorder = /* @__PURE__ */ __name((list2, startIndex, endIndex) => {
     const result = Array.from(list2);
@@ -175438,18 +176249,6 @@ ${seqDataToCopy}\r
   window.createVectorEditor = createVectorEditor;
   window.createAlignmentView = createAlignmentView;
   window.createVersionHistoryView = createVersionHistoryView;
-  function getGapMap(sequence2) {
-    const gapMap = [0];
-    sequence2.split("").forEach((char) => {
-      if (char === "-") {
-        gapMap[Math.max(0, gapMap.length - 1)] = (gapMap[Math.max(0, gapMap.length - 1)] || 0) + 1;
-      } else {
-        gapMap.push(gapMap[gapMap.length - 1] || 0);
-      }
-    });
-    return gapMap;
-  }
-  __name(getGapMap, "getGapMap");
   exports2.getGaps = () => ({
     gapsBefore: 0,
     gapsInside: 0