@teselagen/ove 0.8.39 → 0.8.41

package/index.umd.js

@@ -124411,14 +124411,34 @@ ${seq.sequence}
         track.alignmentData.sequence
       );
       const mismatches = matchHighlightRanges.filter(({ isMatch }) => !isMatch);
+      const alignedSeq = track.alignmentData.sequence;
+      const seqLen = alignedSeq.length;
+      const startIndex = seqLen - alignedSeq.replace(/^-+/, "").length;
+      const endIndex = alignedSeq.replace(/-+$/, "").length;
+      const gapRanges = [
+        startIndex > 0 && {
+          start: 0,
+          end: startIndex - 1,
+          differenceType: "gap"
+        },
+        endIndex < seqLen && {
+          start: endIndex,
+          end: seqLen - 1,
+          differenceType: "gap"
+        }
+      ].filter(Boolean);
       return __spreadProps(__spreadValues({}, track), {
         sequenceData: sequenceData2,
         matchHighlightRanges,
-        additionalSelectionLayers: matchHighlightRanges.filter(({ isMatch }) => !isMatch).map((range2) => {
-          return __spreadProps(__spreadValues(__spreadValues({}, range2), highlightRangeProps), {
+        additionalSelectionLayers: [
+          ...matchHighlightRanges.filter(({ isMatch }) => !isMatch).map((range2) => __spreadProps(__spreadValues(__spreadValues({}, range2), highlightRangeProps), {
             className: "veAlignmentMismatch"
-          });
-        }),
+          })),
+          ...gapRanges.map((range2) => __spreadProps(__spreadValues(__spreadValues({}, range2), highlightRangeProps), {
+            className: "veAlignmentMismatch"
+          }))
+        ],
+        gapRanges,
         mismatches
       });
     });
@@ -124552,23 +124572,30 @@ ${seq.sequence}
     const startIndex = seqLength - nonTempSeqWithoutLeadingDashes.length;
     const endIndex = seqLength - (seqLength - nonTempSeqWithoutTrailingDashes.length);
     for (let index2 = startIndex; index2 < endIndex; index2++) {
-      const isMatch = tempSeq[index2].toLowerCase() === nonTempSeq[index2].toLowerCase();
-      const previousRange = ranges[ranges.length - 1];
-      if (previousRange) {
-        if (previousRange.isMatch === isMatch) {
-          previousRange.end++;
+      const tempBase = tempSeq[index2].toLowerCase();
+      const nonTempBase = nonTempSeq[index2].toLowerCase();
+      const isMatch = tempBase === nonTempBase;
+      let differenceType = null;
+      if (!isMatch) {
+        if (tempBase === "-") {
+          differenceType = "insertion";
+        } else if (nonTempBase === "-") {
+          differenceType = "deletion";
         } else {
-          ranges.push({
-            start: index2,
-            end: index2,
-            isMatch
-          });
+          differenceType = "mismatch";
         }
+      }
+      const previousRange = ranges[ranges.length - 1];
+      if (previousRange && previousRange.isMatch === isMatch && previousRange.differenceType === differenceType) {
+        previousRange.end++;
+      } else if (previousRange) {
+        ranges.push({ start: index2, end: index2, isMatch, differenceType });
       } else {
         ranges.push({
           start: startIndex,
           end: startIndex,
-          isMatch
+          isMatch,
+          differenceType
         });
       }
     }
@@ -145343,7 +145370,7 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
     input.click();
   }
   __name(showFileDialog, "showFileDialog");
-  const version = "0.8.39";
+  const version = "0.8.41";
   const packageJson = {
     version
   };
@@ -151610,11 +151637,13 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
           dimensions: { width = 200 },
           laneHeight,
           laneSpacing = 1,
-          isTrackSelected = []
+          isTrackSelected = [],
+          activeFilterType = "all"
         } = this.props;
         const charWidth2 = this.getCharWidth();
         const {
           matchHighlightRanges: _matchHighlightRanges,
+          gapRanges = [],
           alignmentData: { trimmedRange } = {}
         } = alignmentTracks[i2];
         const matchHighlightRanges = !trimmedRange ? _matchHighlightRanges : flatMap(_matchHighlightRanges, (r2) => {
@@ -151641,10 +151670,19 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
             charWidth2
           );
           const toAdd = `M${xStart},${y2} L${xStart + width2},${y2} L${xStart + width2},${y2 + height} L${xStart},${y2 + height}`;
-          if (!range2.isMatch) {
+          if (!range2.isMatch && (activeFilterType === "all" || range2.differenceType === activeFilterType)) {
             redPath += toAdd;
           }
         });
+        if (activeFilterType === "gap") {
+          gapRanges.forEach((range2) => {
+            const { xStart, width: width2 } = getXStartAndWidthFromNonCircularRange(
+              range2,
+              charWidth2
+            );
+            redPath += `M${xStart},${y2} L${xStart + width2},${y2} L${xStart + width2},${y2 + height} L${xStart},${y2 + height}`;
+          });
+        }
         return /* @__PURE__ */ React.createElement(
           "div",
           {
@@ -151674,7 +151712,8 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
         "scrollAlignmentView",
         "laneHeight",
         "laneSpacing",
-        "isTrackSelected"
+        "isTrackSelected",
+        "activeFilterType"
       ].some((key) => props[key] !== newProps[key]))
         return true;
       return false;
@@ -151952,6 +151991,899 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
     return splitRangeIntoTwoPartsIfItIsCircular(inverted, seqLen);
   }
   __name(getTrimmedRangesToDisplay, "getTrimmedRangesToDisplay");
+  function groupConsecutiveDifferences(differences) {
+    const grouped = [];
+    for (const diff of differences) {
+      if (diff.type === "mismatch") {
+        grouped.push(__spreadProps(__spreadValues({}, diff), { start: diff.position, end: diff.position }));
+        continue;
+      }
+      const last2 = grouped[grouped.length - 1];
+      if (last2 && last2.type === diff.type && last2.end === diff.position - 1) {
+        grouped[grouped.length - 1] = __spreadProps(__spreadValues({}, last2), { end: diff.position });
+      } else {
+        grouped.push(__spreadProps(__spreadValues({}, diff), { start: diff.position, end: diff.position }));
+      }
+    }
+    return grouped;
+  }
+  __name(groupConsecutiveDifferences, "groupConsecutiveDifferences");
+  function findAlignmentDifferences(alignedSeqs) {
+    var _a2;
+    if (alignedSeqs.length < 2 || !((_a2 = alignedSeqs[0]) == null ? void 0 : _a2.length)) return [];
+    const template = alignedSeqs[0].toLowerCase();
+    const nonTemplates = alignedSeqs.slice(1).map((s2) => s2.toLowerCase());
+    const trackBounds = nonTemplates.map((seq) => {
+      const withoutLeading = seq.replace(/^-+/, "");
+      const withoutTrailing = seq.replace(/-+$/, "");
+      const start2 = seq.length - withoutLeading.length;
+      const end2 = seq.length - (seq.length - withoutTrailing.length);
+      return { start: start2, end: end2 };
+    });
+    const differences = [];
+    for (let i2 = 0; i2 < template.length; i2++) {
+      const templateBase = template[i2];
+      const allNonTemplateBases = nonTemplates.map((seq) => seq[i2]);
+      const bases = [templateBase, ...allNonTemplateBases];
+      const alignedIndices = trackBounds.reduce((acc, { start: start2, end: end2 }, idx) => {
+        if (i2 >= start2 && i2 < end2) acc.push(idx);
+        return acc;
+      }, []);
+      if (alignedIndices.length === 0) {
+        differences.push({ position: i2, type: "gap", bases });
+        continue;
+      }
+      const alignedBases = alignedIndices.map((idx) => allNonTemplateBases[idx]);
+      const templateIsGap = templateBase === "-";
+      const nonTemplateHasBase = alignedBases.some((b3) => b3 !== "-");
+      const nonTemplateHasGap = alignedBases.some((b3) => b3 === "-");
+      if (templateIsGap && nonTemplateHasBase) {
+        differences.push({ position: i2, type: "insertion", bases });
+      } else if (!templateIsGap && nonTemplateHasGap) {
+        differences.push({ position: i2, type: "deletion", bases });
+      } else if (!templateIsGap) {
+        const uniqueBases = /* @__PURE__ */ new Set([templateBase, ...alignedBases]);
+        if (uniqueBases.size > 1) {
+          differences.push({ position: i2, type: "mismatch", bases });
+        }
+      }
+    }
+    return differences;
+  }
+  __name(findAlignmentDifferences, "findAlignmentDifferences");
+  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");
+  const FILTER_OPTIONS = [
+    { value: "all", label: "All" },
+    { value: "mismatch", label: "Mismatches" },
+    { value: "insertion", label: "Insertions" },
+    { value: "deletion", label: "Deletions" },
+    { value: "gap", label: "Gaps" }
+  ];
+  function FindMismatches(props) {
+    var _a2;
+    const { alignmentJson, id: id2, onFilterChange } = props;
+    const alignedSeqs = reactExports.useMemo(
+      () => alignmentJson.map((t2) => {
+        var _a3;
+        return ((_a3 = t2.alignmentData) == null ? void 0 : _a3.sequence) || "";
+      }),
+      [alignmentJson]
+    );
+    const [activeFilter, setActiveFilter] = React.useState("all");
+    const allDifferences = reactExports.useMemo(
+      () => groupConsecutiveDifferences(findAlignmentDifferences(alignedSeqs)),
+      [alignedSeqs]
+    );
+    const countsByType = reactExports.useMemo(() => {
+      const counts = { all: 0, mismatch: 0, insertion: 0, deletion: 0, gap: 0 };
+      allDifferences.forEach((d2) => {
+        counts[d2.type] = (counts[d2.type] || 0) + 1;
+        counts.all++;
+      });
+      return counts;
+    }, [allDifferences]);
+    const differences = reactExports.useMemo(() => {
+      const filtered = activeFilter === "all" ? allDifferences : allDifferences.filter((d2) => d2.type === activeFilter);
+      return [{ position: -1, start: -1, end: -1, bases: [""] }, ...filtered];
+    }, [allDifferences, activeFilter]);
+    const currentCaretPosition = useSelector(
+      (state2) => {
+        var _a3;
+        return (_a3 = state2.VectorEditor.__allEditorsOptions.alignments[id2]) == null ? void 0 : _a3.caretPosition;
+      }
+    );
+    const [currentIdx, setCurrentIdx] = React.useState(0);
+    const currentDiff = differences[currentIdx];
+    const disablePrev = currentIdx <= 1;
+    const disableNext = currentIdx >= differences.length - 1;
+    reactExports.useEffect(() => {
+      setCurrentIdx(0);
+    }, [activeFilter]);
+    reactExports.useEffect(() => {
+      onFilterChange == null ? void 0 : onFilterChange({ activeFilter });
+    }, [activeFilter, onFilterChange]);
+    reactExports.useEffect(() => {
+      if (currentCaretPosition !== -1) {
+        const diffIdx = differences.findIndex(
+          (d2, i2) => i2 > 0 && currentCaretPosition >= d2.start && currentCaretPosition <= d2.end + 1
+        );
+        if (diffIdx !== -1 && diffIdx !== currentIdx) {
+          setCurrentIdx(diffIdx);
+        }
+      }
+    }, [currentCaretPosition, differences, currentIdx]);
+    const updateView = /* @__PURE__ */ __name((diff) => {
+      const idx = differences.indexOf(diff);
+      const { start: start2, end: end2 } = diff;
+      setCurrentIdx(idx);
+      updateCaretPosition({ start: start2, end: end2 });
+      setTimeout(() => {
+        scrollToAlignmentSelection();
+      }, 0);
+    }, "updateView");
+    const prevDifference = /* @__PURE__ */ __name(() => {
+      var _a3, _b2;
+      const pivot = currentCaretPosition >= 0 ? currentCaretPosition : (_b2 = (_a3 = differences[currentIdx]) == null ? void 0 : _a3.start) != null ? _b2 : 0;
+      const prev = [...differences].reverse().find((d2) => d2.start >= 0 && d2.start < pivot);
+      if (prev) updateView(prev);
+    }, "prevDifference");
+    const nextDifference = /* @__PURE__ */ __name(() => {
+      var _a3, _b2;
+      const pivot = currentCaretPosition >= 0 ? currentCaretPosition : (_b2 = (_a3 = differences[currentIdx]) == null ? void 0 : _a3.start) != null ? _b2 : -1;
+      const next = differences.find((d2) => d2.start > pivot && d2.start >= 0);
+      if (next) updateView(next);
+    }, "nextDifference");
+    const noDifferences = differences.length <= 1;
+    const activeOption = FILTER_OPTIONS.find((o2) => o2.value === activeFilter);
+    const activeLabel = (_a2 = activeOption == null ? void 0 : activeOption.label) != null ? _a2 : "Differences";
+    const filterMenu = /* @__PURE__ */ React.createElement(Menu, null, FILTER_OPTIONS.map(({ value, label }) => {
+      var _a3;
+      const count2 = (_a3 = countsByType[value]) != null ? _a3 : 0;
+      const isActive2 = activeFilter === value;
+      return /* @__PURE__ */ React.createElement(
+        MenuItem,
+        {
+          key: value,
+          active: isActive2,
+          onClick: /* @__PURE__ */ __name(() => setActiveFilter(value), "onClick"),
+          text: /* @__PURE__ */ React.createElement("span", { className: "veDiffMenuItem-inner" }, label, /* @__PURE__ */ React.createElement(Tag, { round: true, minimal: true, style: { marginLeft: 6 } }, count2))
+        }
+      );
+    }));
+    return /* @__PURE__ */ React.createElement("div", { className: "veDiffNavigator" }, /* @__PURE__ */ React.createElement(
+      Popover,
+      {
+        minimal: true,
+        position: Position.BOTTOM_LEFT,
+        content: filterMenu,
+        target: /* @__PURE__ */ React.createElement(
+          Button,
+          {
+            minimal: true,
+            "data-tip": "Filter Difference Type",
+            small: true,
+            rightIcon: "caret-down",
+            className: "veDiffFilter-trigger"
+          },
+          activeLabel
+        )
+      }
+    ), noDifferences ? /* @__PURE__ */ React.createElement("span", { className: "veDiffNav-empty" }, "no", " ", activeFilter === "all" ? "differences" : activeLabel.toLowerCase()) : /* @__PURE__ */ React.createElement("div", { className: "veDiffNav" }, /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        minimal: true,
+        small: true,
+        "data-tip": "Previous Difference",
+        icon: "arrow-left",
+        intent: Intent.PRIMARY,
+        onClick: prevDifference,
+        disabled: disablePrev
+      }
+    ), /* @__PURE__ */ React.createElement("div", { className: "veDiffNav-center" }, /* @__PURE__ */ React.createElement("span", { className: "veDiffNav-fraction" }, currentIdx, /* @__PURE__ */ React.createElement("span", { className: "veDiffNav-sep" }, "/"), differences.length - 1), (currentDiff == null ? void 0 : currentDiff.start) > -1 && /* @__PURE__ */ React.createElement("span", { className: "veDiffNav-pos" }, ":", currentDiff.start + 1)), /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        minimal: true,
+        small: true,
+        "data-tip": "Next Difference",
+        icon: "arrow-right",
+        intent: Intent.PRIMARY,
+        onClick: nextDifference,
+        disabled: disableNext
+      }
+    )));
+  }
+  __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,
@@ -151959,17 +152891,18 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
         minimal: true,
         position: "bottom",
         content: /* @__PURE__ */ React.createElement(VisibilityOptions$2, __spreadValues({}, props)),
-        target: /* @__PURE__ */ React.createElement(Tooltip, { content: "Visibility Options" }, /* @__PURE__ */ React.createElement(
+        target: /* @__PURE__ */ React.createElement(
           Button,
           {
             className: "tg-alignment-visibility-toggle",
             small: true,
+            "data-tip": "Visibility Options",
             rightIcon: "caret-down",
             intent: Intent.PRIMARY,
             minimal: true,
             icon: "eye-open"
           }
-        ))
+        )
       }
     );
   }, "AlignmentVisibilityTool"));
@@ -165135,7 +166068,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 +166086,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 +166127,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 +166162,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 +166176,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 +166271,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 +166689,11 @@ 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 [activeFilterType, setActiveFilterType] = reactExports.useState("all");
+    const handleFilterChange = reactExports.useCallback(({ activeFilter }) => {
+      setActiveFilterType(activeFilter);
+    }, []);
     const bindOutsideChangeHelper = reactExports.useRef({});
     const alignmentHolder = reactExports.useRef(null);
     const alignmentHolderTop = reactExports.useRef(null);
@@ -166427,7 +167418,12 @@ ${seqDataToCopy}\r
               alignmentData,
               chromatogramData
             }) : linearViewOptions)), {
-              additionalSelectionLayers,
+              additionalSelectionLayers: [
+                ...i2 !== 0 ? (additionalSelectionLayers || []).filter(
+                  (layer) => activeFilterType === "all" ? layer.differenceType !== "gap" : layer.differenceType === activeFilterType
+                ) : additionalSelectionLayers || [],
+                ...searchMatchLayers || []
+              ],
               dimensions: {
                 width: linearViewWidth
               },
@@ -166955,7 +167951,7 @@ ${seqDataToCopy}\r
                   display: "flex",
                   minHeight: "32px",
                   width: "100%",
-                  flexWrap: "nowrap",
+                  flexWrap: "wrap",
                   flexDirection: "row",
                   flex: "0 0 auto"
                 },
@@ -167076,6 +168072,22 @@ ${seqDataToCopy}\r
                   currentPairwiseAlignmentIndex
                 }, alignmentVisibilityToolOptions)
               ),
+              /* @__PURE__ */ React.createElement(
+                AlignmentSearchBar,
+                {
+                  alignmentTracks,
+                  id: id2,
+                  setSearchMatchLayers
+                }
+              ),
+              /* @__PURE__ */ React.createElement(
+                FindMismatches,
+                {
+                  alignmentJson: alignmentTracks,
+                  id: id2,
+                  onFilterChange: handleFilterChange
+                }
+              ),
               additionalTopEl,
               saveMessage && /* @__PURE__ */ React.createElement(
                 "div",
@@ -167176,6 +168188,7 @@ ${seqDataToCopy}\r
                 }
               )),
               alignmentTracks,
+              activeFilterType,
               dimensions: {
                 width: Math.max(width, 10) || 10
               },
@@ -172365,108 +173378,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 +173549,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 +176349,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