@teselagen/ove 0.8.39 → 0.8.41

package/index.es.js

@@ -95492,14 +95492,34 @@ function addHighlightedDifferences(alignmentTracks) {
       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
     });
   });
@@ -95633,23 +95653,30 @@ function getRangeMatchesBetweenTemplateAndNonTemplate(tempSeq, nonTempSeq) {
   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
       });
     }
   }
@@ -117227,7 +117254,7 @@ function showFileDialog({ multiple = false, onSelect }) {
   input.click();
 }
 __name(showFileDialog, "showFileDialog");
-const version = "0.8.39";
+const version = "0.8.41";
 const packageJson = {
   version
 };
@@ -125096,11 +125123,13 @@ const _Minimap = class _Minimap extends React__default.Component {
         dimensions: { width = 200 },
         laneHeight,
         laneSpacing = 1,
-        isTrackSelected = []
+        isTrackSelected = [],
+        activeFilterType = "all"
       } = this.props;
       const charWidth2 = this.getCharWidth();
       const {
         matchHighlightRanges: _matchHighlightRanges,
+        gapRanges = [],
         alignmentData: { trimmedRange } = {}
       } = alignmentTracks[i];
       const matchHighlightRanges = !trimmedRange ? _matchHighlightRanges : flatMap(_matchHighlightRanges, (r2) => {
@@ -125127,10 +125156,19 @@ const _Minimap = class _Minimap extends React__default.Component {
           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__default.createElement(
         "div",
         {
@@ -125160,7 +125198,8 @@ const _Minimap = class _Minimap extends React__default.Component {
       "scrollAlignmentView",
       "laneHeight",
       "laneSpacing",
-      "isTrackSelected"
+      "isTrackSelected",
+      "activeFilterType"
     ].some((key) => props[key] !== newProps[key]))
       return true;
     return false;
@@ -125438,6 +125477,899 @@ function getTrimmedRangesToDisplay({ trimmedRange, seqLen }) {
   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 i = 0; i < template.length; i++) {
+    const templateBase = template[i];
+    const allNonTemplateBases = nonTemplates.map((seq) => seq[i]);
+    const bases = [templateBase, ...allNonTemplateBases];
+    const alignedIndices = trackBounds.reduce((acc, { start: start2, end: end2 }, idx) => {
+      if (i >= start2 && i < end2) acc.push(idx);
+      return acc;
+    }, []);
+    if (alignedIndices.length === 0) {
+      differences.push({ position: i, 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: i, type: "insertion", bases });
+    } else if (!templateIsGap && nonTemplateHasGap) {
+      differences.push({ position: i, type: "deletion", bases });
+    } else if (!templateIsGap) {
+      const uniqueBases = /* @__PURE__ */ new Set([templateBase, ...alignedBases]);
+      if (uniqueBases.size > 1) {
+        differences.push({ position: i, 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 = useMemo$1(
+    () => alignmentJson.map((t2) => {
+      var _a3;
+      return ((_a3 = t2.alignmentData) == null ? void 0 : _a3.sequence) || "";
+    }),
+    [alignmentJson]
+  );
+  const [activeFilter, setActiveFilter] = React__default.useState("all");
+  const allDifferences = useMemo$1(
+    () => groupConsecutiveDifferences(findAlignmentDifferences(alignedSeqs)),
+    [alignedSeqs]
+  );
+  const countsByType = useMemo$1(() => {
+    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 = useMemo$1(() => {
+    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__default.useState(0);
+  const currentDiff = differences[currentIdx];
+  const disablePrev = currentIdx <= 1;
+  const disableNext = currentIdx >= differences.length - 1;
+  useEffect(() => {
+    setCurrentIdx(0);
+  }, [activeFilter]);
+  useEffect(() => {
+    onFilterChange == null ? void 0 : onFilterChange({ activeFilter });
+  }, [activeFilter, onFilterChange]);
+  useEffect(() => {
+    if (currentCaretPosition !== -1) {
+      const diffIdx = differences.findIndex(
+        (d2, i) => i > 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__default.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__default.createElement(
+      MenuItem,
+      {
+        key: value,
+        active: isActive2,
+        onClick: /* @__PURE__ */ __name(() => setActiveFilter(value), "onClick"),
+        text: /* @__PURE__ */ React__default.createElement("span", { className: "veDiffMenuItem-inner" }, label, /* @__PURE__ */ React__default.createElement(Tag, { round: true, minimal: true, style: { marginLeft: 6 } }, count2))
+      }
+    );
+  }));
+  return /* @__PURE__ */ React__default.createElement("div", { className: "veDiffNavigator" }, /* @__PURE__ */ React__default.createElement(
+    Popover,
+    {
+      minimal: true,
+      position: Position.BOTTOM_LEFT,
+      content: filterMenu,
+      target: /* @__PURE__ */ React__default.createElement(
+        Button,
+        {
+          minimal: true,
+          "data-tip": "Filter Difference Type",
+          small: true,
+          rightIcon: "caret-down",
+          className: "veDiffFilter-trigger"
+        },
+        activeLabel
+      )
+    }
+  ), noDifferences ? /* @__PURE__ */ React__default.createElement("span", { className: "veDiffNav-empty" }, "no", " ", activeFilter === "all" ? "differences" : activeLabel.toLowerCase()) : /* @__PURE__ */ React__default.createElement("div", { className: "veDiffNav" }, /* @__PURE__ */ React__default.createElement(
+    Button,
+    {
+      minimal: true,
+      small: true,
+      "data-tip": "Previous Difference",
+      icon: "arrow-left",
+      intent: Intent.PRIMARY,
+      onClick: prevDifference,
+      disabled: disablePrev
+    }
+  ), /* @__PURE__ */ React__default.createElement("div", { className: "veDiffNav-center" }, /* @__PURE__ */ React__default.createElement("span", { className: "veDiffNav-fraction" }, currentIdx, /* @__PURE__ */ React__default.createElement("span", { className: "veDiffNav-sep" }, "/"), differences.length - 1), (currentDiff == null ? void 0 : currentDiff.start) > -1 && /* @__PURE__ */ React__default.createElement("span", { className: "veDiffNav-pos" }, ":", currentDiff.start + 1)), /* @__PURE__ */ React__default.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] = useReducer(searchReducer, initialSearchState);
+  const {
+    searchText,
+    matches,
+    currentMatchIndex,
+    searched,
+    featureMatches,
+    dnaOrAA,
+    ambiguousOrLiteral,
+    mismatchesAllowed
+  } = searchState;
+  const debouncedSearch = useRef(
+    debounce$1((text2, search2, featureSearch) => {
+      search2(text2);
+      featureSearch(text2);
+    }, 50)
+  ).current;
+  useEffect(() => {
+    return () => {
+      debouncedSearch.cancel();
+    };
+  }, [debouncedSearch]);
+  const [highlightAll, setHighlightAll] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const handleToggleExpanded = useCallback$1(() => {
+    setIsExpanded((prev) => {
+      const next = !prev;
+      if (!next) setIsPopoverOpen(true);
+      return next;
+    });
+  }, [setIsPopoverOpen]);
+  useEffect(() => {
+    dispatch({ type: "RESET" });
+    if (setSearchMatchLayers) setSearchMatchLayers([]);
+  }, [setSearchMatchLayers]);
+  const buildMatchLayers = useCallback$1(
+    (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, i) => [
+        {
+          start: match.alignmentStart,
+          end: match.alignmentEnd,
+          color: i === activeIndex ? CURRENT_MATCH_COLOR : MATCH_COLOR,
+          className: i === 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 = useCallback$1(
+    (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 = useCallback$1(
+    (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 = useCallback$1(
+    (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 = useCallback$1(() => {
+    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 = useCallback$1(() => {
+    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 = useCallback$1(
+    (e) => {
+      if (e.key === "Escape") {
+        setIsOpen(false);
+      }
+      if (e.key === "Enter") {
+        if (e.shiftKey) {
+          goToPrev();
+        } else {
+          goToNext();
+        }
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    },
+    [goToPrev, goToNext]
+  );
+  useEffect(() => {
+    if (!searched || !searchText.trim()) return;
+    runSearch(searchText);
+    runFeatureSearch(searchText);
+  }, [
+    dnaOrAA,
+    ambiguousOrLiteral,
+    mismatchesAllowed,
+    runSearch,
+    runFeatureSearch,
+    searched,
+    searchText
+  ]);
+  useEffect(() => {
+    if (searchText.trim().length < 1) setHighlightAll(false);
+  }, [searchText]);
+  const prevHighlightAll = useRef(highlightAll);
+  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 = useCallback$1(
+    (e) => {
+      const value = e.target.value;
+      dispatch({ type: "SET_SEARCH_TEXT", payload: value });
+      debouncedSearch(value, runSearch, runFeatureSearch);
+    },
+    [debouncedSearch, runSearch, runFeatureSearch]
+  );
+  const handleFeatureClick = useCallback$1((featureMatch) => {
+    updateCaretPosition({
+      start: featureMatch.alignmentStart,
+      end: featureMatch.alignmentEnd
+    });
+    setTimeout(() => {
+      scrollToAlignmentSelection();
+    }, 0);
+  }, []);
+  const matchCounter = /* @__PURE__ */ React__default.createElement(
+    "span",
+    {
+      style: {
+        marginRight: 3,
+        color: "lightgrey",
+        fontSize: "0.9em",
+        whiteSpace: "nowrap"
+      }
+    },
+    hasMatches ? currentMatchIndex + 1 : 0,
+    "/",
+    matches.length
+  );
+  const inlineNavEl = /* @__PURE__ */ React__default.createElement("span", { style: { display: "flex", alignItems: "center" } }, !isExpanded && /* @__PURE__ */ React__default.createElement(
+    Popover,
+    {
+      autoFocus: false,
+      enforceFocus: false,
+      isOpen: isPopoverOpen,
+      onInteraction: setIsPopoverOpen,
+      position: Position.TOP,
+      content: /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          className: "ve-find-options-popover",
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            paddingLeft: 20,
+            paddingBottom: 10,
+            paddingTop: 10,
+            paddingRight: 20,
+            gap: 6
+          }
+        },
+        /* @__PURE__ */ React__default.createElement(
+          FindOptionsPanel,
+          {
+            dnaOrAA,
+            ambiguousOrLiteral,
+            mismatchesAllowed,
+            searchText,
+            matches,
+            dispatch,
+            highlightAll,
+            setHighlightAll,
+            isExpanded,
+            onToggleExpanded: handleToggleExpanded
+          }
+        )
+      ),
+      target: /* @__PURE__ */ React__default.createElement(Button, { minimal: true, icon: "wrench", "data-tip": "Options" })
+    }
+  ), matchCounter, /* @__PURE__ */ React__default.createElement(
+    Button,
+    {
+      minimal: true,
+      small: true,
+      icon: "caret-left",
+      "data-tip": "Previous",
+      disabled: !hasMatches,
+      onClick: goToPrev
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    Button,
+    {
+      minimal: true,
+      small: true,
+      icon: "caret-right",
+      "data-tip": "Next",
+      disabled: !hasMatches,
+      onClick: goToNext
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    Button,
+    {
+      minimal: true,
+      small: true,
+      "data-tip": "Close (Esc)",
+      icon: "small-cross",
+      onClick: /* @__PURE__ */ __name(() => setIsOpen(false), "onClick")
+    }
+  ));
+  const expandedNavEl = /* @__PURE__ */ React__default.createElement("span", { style: { display: "flex", alignItems: "center" } }, matchCounter, /* @__PURE__ */ React__default.createElement(
+    Button,
+    {
+      minimal: true,
+      small: true,
+      icon: "caret-up",
+      disabled: !hasMatches,
+      onClick: goToPrev
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    Button,
+    {
+      minimal: true,
+      small: true,
+      icon: "caret-down",
+      disabled: !hasMatches,
+      onClick: goToNext
+    }
+  ));
+  if (!isOpen) {
+    return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.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__default.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__default.createElement("div", { style: { position: "relative" } }, !isExpanded && /* @__PURE__ */ React__default.createElement(
+    Popover,
+    {
+      autoFocus: false,
+      enforceFocus: false,
+      modifiers: {
+        arrow: false
+      },
+      position: Position.BOTTOM,
+      isOpen: annotationPopoverOpen,
+      content: /* @__PURE__ */ React__default.createElement(
+        AnnotationResultsComp,
+        {
+          featureMatches,
+          onClickMatch: handleFeatureClick
+        }
+      ),
+      target: inputEl
+    }
+  ), isExpanded && /* @__PURE__ */ React__default.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__default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 6 } }, /* @__PURE__ */ React__default.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__default.createElement(
+      AnnotationResultsComp,
+      {
+        featureMatches,
+        onClickMatch: handleFeatureClick
+      }
+    )),
+    /* @__PURE__ */ React__default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 5 } }, expandedNavEl, /* @__PURE__ */ React__default.createElement(
+      FindOptionsPanel,
+      {
+        dnaOrAA,
+        ambiguousOrLiteral,
+        mismatchesAllowed,
+        searchText,
+        matches,
+        dispatch,
+        highlightAll,
+        setHighlightAll,
+        isExpanded,
+        onToggleExpanded: handleToggleExpanded
+      }
+    )),
+    /* @__PURE__ */ React__default.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__default.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__default.createElement("div", { key: type2 }, /* @__PURE__ */ React__default.createElement("div", { className: "veAnnotationFoundType" }, anns.length, " ", getSingular(type2), " match", anns.length > 1 ? "es" : null, anns.length > 10 ? ` (only showing 10)` : null, ":"), /* @__PURE__ */ React__default.createElement("div", null, showing.map((match, i) => {
+      const { annotation } = match;
+      const annotationColor = type2 === "parts" ? "#ac68cc" : annotation.color || featureColorMap[annotation.type];
+      return /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          key: i,
+          onClick: /* @__PURE__ */ __name(() => onClickMatch(match), "onClick"),
+          className: "veAnnotationFoundResult"
+        },
+        /* @__PURE__ */ React__default.createElement("div", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React__default.createElement(
+          "div",
+          {
+            style: {
+              background: annotationColor,
+              height: 15,
+              width: 15,
+              marginRight: 3
+            }
+          }
+        ), annotation.name),
+        /* @__PURE__ */ React__default.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__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+    TgHTMLSelect,
+    {
+      options: [
+        { label: "DNA", value: "DNA" },
+        { label: "Amino Acids", value: "AA" }
+      ],
+      value: dnaOrAA,
+      onChange: /* @__PURE__ */ __name((e) => dispatch({ type: "SET_DNA_OR_AA", payload: e.target.value }), "onChange")
+    }
+  ), /* @__PURE__ */ React__default.createElement("div", { style: { display: "flex" } }, /* @__PURE__ */ React__default.createElement(
+    TgHTMLSelect,
+    {
+      options: [
+        { label: "Literal", value: "LITERAL" },
+        { label: "Ambiguous", value: "AMBIGUOUS" }
+      ],
+      value: ambiguousOrLiteral,
+      onChange: /* @__PURE__ */ __name((e) => dispatch({
+        type: "SET_AMBIGUOUS_OR_LITERAL",
+        payload: e.target.value
+      }), "onChange")
+    }
+  ), /* @__PURE__ */ React__default.createElement(InfoHelper, { style: { marginLeft: 10 } }, /* @__PURE__ */ React__default.createElement("div", null, "Ambiguous substitutions:", /* @__PURE__ */ React__default.createElement("div", { style: { display: "flex", fontSize: 12 } }, /* @__PURE__ */ React__default.createElement("div", { style: { marginRight: 20 } }, /* @__PURE__ */ React__default.createElement("div", { style: { fontSize: 14, marginBottom: 4, marginTop: 5 } }, "DNA:"), /* @__PURE__ */ React__default.createElement("div", null, "M: AC"), /* @__PURE__ */ React__default.createElement("div", null, "R: AG"), /* @__PURE__ */ React__default.createElement("div", null, "W: AT"), /* @__PURE__ */ React__default.createElement("div", null, "S: CG"), /* @__PURE__ */ React__default.createElement("div", null, "Y: CT"), /* @__PURE__ */ React__default.createElement("div", null, "K: GT"), /* @__PURE__ */ React__default.createElement("div", null, "V: ACG"), /* @__PURE__ */ React__default.createElement("div", null, "H: ACT"), /* @__PURE__ */ React__default.createElement("div", null, "D: AGT"), /* @__PURE__ */ React__default.createElement("div", null, "B: CGT"), /* @__PURE__ */ React__default.createElement("div", null, "X: GATC"), /* @__PURE__ */ React__default.createElement("div", null, "N: GATC"), /* @__PURE__ */ React__default.createElement("div", null, "*: any")), /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement("div", { style: { fontSize: 14, marginBottom: 4, marginTop: 5 } }, "AA:"), /* @__PURE__ */ React__default.createElement("div", null, "B: ND"), /* @__PURE__ */ React__default.createElement("div", null, "J: IL"), /* @__PURE__ */ React__default.createElement("div", null, "X: ACDEFGHIKLMNPQRSTVWY"), /* @__PURE__ */ React__default.createElement("div", null, "Z: QE"), /* @__PURE__ */ React__default.createElement("div", null, "*: any")))))), /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      style: {
+        marginTop: "8px",
+        display: "flex",
+        flexDirection: "row",
+        gap: "3px",
+        alignItems: "center"
+      }
+    },
+    /* @__PURE__ */ React__default.createElement("label", null, "Mismatches Allowed:"),
+    /* @__PURE__ */ React__default.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__default.createElement(InfoHelper, { style: { marginLeft: 10 } }, /* @__PURE__ */ React__default.createElement("div", null, "Number of mismatches allowed when searching DNA sequences with literal matching.", /* @__PURE__ */ React__default.createElement("br", null), /* @__PURE__ */ React__default.createElement("br", null), "Higher values may slow down search performance."))
+  ), /* @__PURE__ */ React__default.createElement(
+    Switch,
+    {
+      checked: highlightAll,
+      onChange: /* @__PURE__ */ __name(() => setHighlightAll((v2) => !v2), "onChange"),
+      disabled: searchText.trim().length < 2 || matches.length > MAX_MATCHES_DISPLAYED
+    },
+    /* @__PURE__ */ React__default.createElement(
+      Tooltip,
+      {
+        disabled: matches.length <= MAX_MATCHES_DISPLAYED,
+        content: `Disabled because there are >${MAX_MATCHES_DISPLAYED} matches`
+      },
+      "Highlight All"
+    )
+  ), /* @__PURE__ */ React__default.createElement(Switch, { checked: isExpanded, onChange: onToggleExpanded }, "Expanded"));
+}
+__name(FindOptionsPanel, "FindOptionsPanel");
 const AlignmentVisibilityTool = pure(/* @__PURE__ */ __name(function AlignmentVisibilityTool2(props) {
   return /* @__PURE__ */ React__default.createElement(
     Popover,
@@ -125445,17 +126377,18 @@ const AlignmentVisibilityTool = pure(/* @__PURE__ */ __name(function AlignmentVi
       minimal: true,
       position: "bottom",
       content: /* @__PURE__ */ React__default.createElement(VisibilityOptions$2, __spreadValues({}, props)),
-      target: /* @__PURE__ */ React__default.createElement(Tooltip, { content: "Visibility Options" }, /* @__PURE__ */ React__default.createElement(
+      target: /* @__PURE__ */ React__default.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"));
@@ -138621,7 +139554,6 @@ const aminoAcidShortNames = {
 const PropertySidePanel = /* @__PURE__ */ __name(({ properties: properties2, setProperties, style: style2 }) => {
   const sidebarRef = React__default.useRef(null);
   const [mismatchesCount, setMismatchesCount] = React__default.useState(0);
-  const [mismatchesInRange, setMismatchesInRange] = React__default.useState(0);
   const { track, isOpen, selection, isPairwise } = properties2;
   const getSequenceInRegion = useCallback$1(() => {
     var _a2, _b2;
@@ -138640,6 +139572,30 @@ const PropertySidePanel = /* @__PURE__ */ __name(({ properties: properties2, set
     if (!Array.isArray(tr)) return [];
     return isPairwise ? tr.filter((m2) => (m2 == null ? void 0 : m2.color) === "red") : tr;
   }, [track, mismatchKey, isPairwise]);
+  const mismatchSchema = useMemo$1(
+    () => ({
+      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 = useMemo$1(() => {
+    return (trackMismatches || []).map((m2, i) => __spreadProps(__spreadValues({}, m2), {
+      id: i.toString()
+    }));
+  }, [trackMismatches]);
   useEffect(() => {
     if (!isOpen || sidebarRef.current === null || !track) {
       return;
@@ -138657,21 +139613,6 @@ const PropertySidePanel = /* @__PURE__ */ __name(({ properties: properties2, set
       }
     });
     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);
-    }
   }, [isOpen, track, selection, trackMismatches]);
   const aminoFreq = useMemo$1(() => {
     var _a2, _b2;
@@ -138707,7 +139648,7 @@ const PropertySidePanel = /* @__PURE__ */ __name(({ properties: properties2, set
           width: "100%"
         }
       }
-    ), /* @__PURE__ */ React__default.createElement("h5", null, "Track Properties"), /* @__PURE__ */ React__default.createElement("div", { className: "bp3-tab-panel" }, /* @__PURE__ */ React__default.createElement(RowItem, { item: name2, title: "Name" }), /* @__PURE__ */ React__default.createElement(RowItem, { item: isProtein2 ? proteinSize : size, title: "Length" }), /* @__PURE__ */ React__default.createElement(
+    ), /* @__PURE__ */ React__default.createElement(HeaderItem, { title: "Track Properties" }), /* @__PURE__ */ React__default.createElement("div", { className: "bp3-tab-panel" }, /* @__PURE__ */ React__default.createElement(RowItem, { item: name2, title: "Name" }), /* @__PURE__ */ React__default.createElement(RowItem, { item: isProtein2 ? proteinSize : size, title: "Length" }), /* @__PURE__ */ React__default.createElement(
       RowItem,
       {
         item: molecularWeight == null ? void 0 : molecularWeight.toFixed(2),
@@ -138721,18 +139662,45 @@ const PropertySidePanel = /* @__PURE__ */ __name(({ properties: properties2, set
         title: "Extinction Coefficient"
       }
     )), /* @__PURE__ */ React__default.createElement(
-      RowItem,
-      {
-        item: `${mismatchesInRange}/${mismatchesCount}`,
-        title: "Mismatches"
-      }
-    ), /* @__PURE__ */ React__default.createElement(
       RowItem,
       {
         item: selection && selection.start > -1 ? /* @__PURE__ */ React__default.createElement("span", null, selection.start + 1, " - ", selection.end + 1) : /* @__PURE__ */ React__default.createElement("span", null, "1 - ", isProtein2 ? proteinSize : size),
         title: "Region"
       }
-    )), /* @__PURE__ */ React__default.createElement("h5", null, isProtein2 ? "Amino Acid" : "Base Pair", " Frequencies"), /* @__PURE__ */ React__default.createElement("div", { className: "sidebar-table" }, /* @__PURE__ */ React__default.createElement("div", { className: "sidebar-row" }, /* @__PURE__ */ React__default.createElement("div", { className: "sidebar-cell" }, isProtein2 ? "Amino Acid" : "Base"), /* @__PURE__ */ React__default.createElement("div", { className: "sidebar-cell" }, "Count"), /* @__PURE__ */ React__default.createElement("div", { className: "sidebar-cell" }, "Percentage")), frequencyEntries.map(([aa, data], idx) => {
+    ), /* @__PURE__ */ React__default.createElement(HeaderItem, { title: `Mismatches (${mismatchesCount})` }), trackMismatches && trackMismatches.length > 0 && /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        style: {
+          margin: "0px 10px"
+        }
+      },
+      /* @__PURE__ */ React__default.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((e, row) => {
+            updateCaretPosition({ start: row.start, end: row.end });
+            setTimeout(() => {
+              scrollToAlignmentSelection();
+            }, 0);
+          }, "onRowClick")
+        }
+      )
+    )), /* @__PURE__ */ React__default.createElement(
+      HeaderItem,
+      {
+        title: `${isProtein2 ? "Amino Acid" : "Base Pair"} Frequencies`
+      }
+    ), /* @__PURE__ */ React__default.createElement("div", { className: "sidebar-table" }, /* @__PURE__ */ React__default.createElement("div", { className: "sidebar-row" }, /* @__PURE__ */ React__default.createElement("div", { className: "sidebar-cell" }, isProtein2 ? "Amino Acid" : "Base"), /* @__PURE__ */ React__default.createElement("div", { className: "sidebar-cell" }, "Count"), /* @__PURE__ */ React__default.createElement("div", { className: "sidebar-cell" }, "Percentage")), frequencyEntries.map(([aa, data], idx) => {
       return /* @__PURE__ */ React__default.createElement("div", { className: `sidebar-row property-amino-acid-${idx}` }, /* @__PURE__ */ React__default.createElement("div", { className: "sidebar-cell" }, aa, " ", isProtein2 ? `(${aminoAcidShortNames[aa]})` : ""), /* @__PURE__ */ React__default.createElement("div", { className: "sidebar-cell" }, data.count), /* @__PURE__ */ React__default.createElement("div", { className: "sidebar-cell" }, data.percentage.toFixed(1), "%"));
     })));
   } else {
@@ -138789,11 +139757,29 @@ const PropertySidePanel = /* @__PURE__ */ __name(({ properties: properties2, set
   );
 }, "PropertySidePanel");
 function RowItem({ item, title, units }) {
-  if (!item) return;
+  if (item == null) {
+    return null;
+  }
   const propertyClass = title.split(" ").join("-").toLowerCase();
-  return /* @__PURE__ */ React__default.createElement("div", { className: `ve-flex-row property-${propertyClass}` }, /* @__PURE__ */ React__default.createElement("div", { className: "ve-column-left" }, title), /* @__PURE__ */ React__default.createElement("div", { className: "ve-column-right" }, item, " ", units != null ? units : ""));
+  return /* @__PURE__ */ React__default.createElement("div", { className: `ve-flex-row property-${propertyClass}` }, /* @__PURE__ */ React__default.createElement("div", { style: { fontWeight: "bold" }, className: "ve-column-left" }, title), /* @__PURE__ */ React__default.createElement("div", { className: "ve-column-right" }, item, " ", units != null ? units : ""));
 }
 __name(RowItem, "RowItem");
+const HeaderItem = /* @__PURE__ */ __name(({ title }) => {
+  return /* @__PURE__ */ React__default.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)");
@@ -139189,6 +140175,11 @@ const AlignmentView = /* @__PURE__ */ __name((props) => {
   const [tempTrimBefore, setTempTrimBefore] = useState({});
   const [tempTrimAfter, setTempTrimAfter] = useState({});
   const [tempTrimmingCaret, setTempTrimmingCaret] = useState({});
+  const [searchMatchLayers, setSearchMatchLayers] = React__default.useState([]);
+  const [activeFilterType, setActiveFilterType] = useState("all");
+  const handleFilterChange = useCallback$1(({ activeFilter }) => {
+    setActiveFilterType(activeFilter);
+  }, []);
   const bindOutsideChangeHelper = useRef({});
   const alignmentHolder = useRef(null);
   const alignmentHolderTop = useRef(null);
@@ -139913,7 +140904,12 @@ ${seqDataToCopy}\r
             alignmentData,
             chromatogramData
           }) : linearViewOptions)), {
-            additionalSelectionLayers,
+            additionalSelectionLayers: [
+              ...i !== 0 ? (additionalSelectionLayers || []).filter(
+                (layer) => activeFilterType === "all" ? layer.differenceType !== "gap" : layer.differenceType === activeFilterType
+              ) : additionalSelectionLayers || [],
+              ...searchMatchLayers || []
+            ],
             dimensions: {
               width: linearViewWidth
             },
@@ -140441,7 +141437,7 @@ ${seqDataToCopy}\r
                 display: "flex",
                 minHeight: "32px",
                 width: "100%",
-                flexWrap: "nowrap",
+                flexWrap: "wrap",
                 flexDirection: "row",
                 flex: "0 0 auto"
               },
@@ -140562,6 +141558,22 @@ ${seqDataToCopy}\r
                 currentPairwiseAlignmentIndex
               }, alignmentVisibilityToolOptions)
             ),
+            /* @__PURE__ */ React__default.createElement(
+              AlignmentSearchBar,
+              {
+                alignmentTracks,
+                id: id2,
+                setSearchMatchLayers
+              }
+            ),
+            /* @__PURE__ */ React__default.createElement(
+              FindMismatches,
+              {
+                alignmentJson: alignmentTracks,
+                id: id2,
+                onFilterChange: handleFilterChange
+              }
+            ),
             additionalTopEl,
             saveMessage && /* @__PURE__ */ React__default.createElement(
               "div",
@@ -140662,6 +141674,7 @@ ${seqDataToCopy}\r
               }
             )),
             alignmentTracks,
+            activeFilterType,
             dimensions: {
               width: Math.max(width, 10) || 10
             },
@@ -145851,108 +146864,6 @@ const schema = {
   ]
 };
 const DigestTool$1 = withEditorInteractions(DigestTool);
-const _Mismatches = class _Mismatches extends React__default.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 getGaps2 = /* @__PURE__ */ __name(() => ({
-        gapsBefore: 0,
-        gapsInside: 0
-      }), "getGaps");
-      const gapMap = this.getGapMap(alignmentData.sequence);
-      getGaps2 = /* @__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 = getGaps2(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__default.createElement(
-        WrappedDT,
-        {
-          maxHeight: 168,
-          formName: "mismatchesTable",
-          isSimple: true,
-          compact: true,
-          noRouter: true,
-          schema: schema2,
-          entities: mismatchList
-        }
-      );
-    }
-    return /* @__PURE__ */ React__default.createElement("div", { style: { maxHeight: 180.8, overflowY: "scroll" } }, /* @__PURE__ */ React__default.createElement(
-      "div",
-      {
-        style: {
-          // margin: 10,
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center"
-        }
-      },
-      /* @__PURE__ */ React__default.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,
@@ -146124,7 +147035,7 @@ const _panelMap = {
     comp: PropertiesDialog$1,
     panelSpecificProps: ["PropertiesProps"]
   },
-  mismatches: Mismatches$1
+  mismatches: FindMismatches
 };
 const reorder = /* @__PURE__ */ __name((list2, startIndex, endIndex) => {
   const result = Array.from(list2);
@@ -148954,18 +149865,6 @@ __name(createAlignmentView, "createAlignmentView");
 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");
 let getGaps = /* @__PURE__ */ __name(() => ({
   gapsBefore: 0,
   gapsInside: 0