@teselagen/ove 0.8.40 → 0.8.41

package/AlignmentView/findAlignmentDifferences.d.ts

@@ -0,0 +1,53 @@
+/**
+ * @typedef {"mismatch"|"insertion"|"deletion"|"gap"} DifferenceType
+ *
+ * @typedef {Object} AlignmentDifference
+ * @property {number} position - 0-based column index in the aligned sequence
+ * @property {DifferenceType} type
+ * @property {string[]} bases - bases at this column for each track (template first)
+ */
+/**
+ * Group consecutive same-type differences into regions.
+ * Mismatches are never grouped — each is its own entry.
+ * Insertions, deletions, and gaps that are side-by-side are collapsed into
+ * one entry with a `start` and `end` (both inclusive, 0-based).
+ *
+ * @param {AlignmentDifference[]} differences
+ * @returns {Array<AlignmentDifference & { start: number, end: number }>}
+ */
+export function groupConsecutiveDifferences(differences: AlignmentDifference[]): Array<AlignmentDifference & {
+    start: number;
+    end: number;
+}>;
+/**
+ * Classify alignment columns into difference types relative to the template track.
+ *
+ * Template is alignedSeqs[0]. Non-template tracks are alignedSeqs[1+].
+ *
+ * Classification rules (per column):
+ *  - "gap"       : no non-template track is in its aligned region at this position
+ *  - "insertion" : template has '-', at least one aligned non-template has a non-gap base
+ *  - "deletion"  : template has a non-gap base, at least one aligned non-template has '-'
+ *  - "mismatch"  : no gaps among aligned tracks, unique base set has more than one member
+ *
+ * Only tracks whose aligned region covers position i participate in classification.
+ * This correctly handles multi-read alignments (e.g. Sanger) where reads cover
+ * different sub-ranges of the full alignment.
+ *
+ * @param {string[]} alignedSeqs - Aligned sequence strings, all same length
+ * @returns {AlignmentDifference[]}
+ */
+export function findAlignmentDifferences(alignedSeqs: string[]): AlignmentDifference[];
+export default findAlignmentDifferences;
+export type DifferenceType = "mismatch" | "insertion" | "deletion" | "gap";
+export type AlignmentDifference = {
+    /**
+     * - 0-based column index in the aligned sequence
+     */
+    position: number;
+    type: DifferenceType;
+    /**
+     * - bases at this column for each track (template first)
+     */
+    bases: string[];
+};

package/index.cjs.js

@@ -95510,14 +95510,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
     });
   });
@@ -95651,23 +95671,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
       });
     }
   }
@@ -117245,7 +117272,7 @@ function showFileDialog({ multiple = false, onSelect }) {
   input.click();
 }
 __name(showFileDialog, "showFileDialog");
-const version = "0.8.40";
+const version = "0.8.41";
 const packageJson = {
   version
 };
@@ -125114,11 +125141,13 @@ const _Minimap = class _Minimap extends React.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) => {
@@ -125145,10 +125174,19 @@ const _Minimap = class _Minimap extends React.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.createElement(
         "div",
         {
@@ -125178,7 +125216,8 @@ const _Minimap = class _Minimap extends React.Component {
       "scrollAlignmentView",
       "laneHeight",
       "laneSpacing",
-      "isTrackSelected"
+      "isTrackSelected",
+      "activeFilterType"
     ].some((key) => props[key] !== newProps[key]))
       return true;
     return false;
@@ -125456,6 +125495,66 @@ 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) {
@@ -125469,159 +125568,145 @@ function updateCaretPosition({ 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) {
-  const { alignmentJson, id: id2 } = props;
+  var _a2;
+  const { alignmentJson, id: id2, onFilterChange } = props;
   const alignedSeqs = React.useMemo(
     () => alignmentJson.map((t2) => {
-      var _a2;
-      return ((_a2 = t2.alignmentData) == null ? void 0 : _a2.sequence) || "";
+      var _a3;
+      return ((_a3 = t2.alignmentData) == null ? void 0 : _a3.sequence) || "";
     }),
     [alignmentJson]
   );
-  const mismatches = React.useMemo(() => {
-    const result = [{ position: 0, bases: [""] }];
-    if (alignedSeqs.length > 1 && alignedSeqs[0].length) {
-      for (let i = 0; i < alignedSeqs[0].length; i++) {
-        const bases = alignedSeqs.map((seq) => seq[i]);
-        const uniqueBases = new Set(bases);
-        if (uniqueBases.size > 1 && !uniqueBases.has("-")) {
-          result.push({ position: i, bases });
-        }
-      }
-    }
-    return result;
-  }, [alignedSeqs]);
+  const [activeFilter, setActiveFilter] = React.useState("all");
+  const allDifferences = React.useMemo(
+    () => groupConsecutiveDifferences(findAlignmentDifferences(alignedSeqs)),
+    [alignedSeqs]
+  );
+  const countsByType = React.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 = React.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 = reactRedux.useSelector(
     (state2) => {
-      var _a2;
-      return (_a2 = state2.VectorEditor.__allEditorsOptions.alignments[id2]) == null ? void 0 : _a2.caretPosition;
+      var _a3;
+      return (_a3 = state2.VectorEditor.__allEditorsOptions.alignments[id2]) == null ? void 0 : _a3.caretPosition;
     }
   );
   const [currentIdx, setCurrentIdx] = React.useState(0);
-  const [disablePrev, setDisablePrev] = React.useState(true);
-  const [disableNext, setDisableNext] = React.useState(false);
-  const currentMismatch = mismatches[currentIdx];
-  const handleButtonsState = React.useCallback(
-    (caret) => {
-      if (mismatches.length <= 1) {
-        setDisablePrev(true);
-        setDisableNext(true);
-        return;
-      }
-      const firstMismatchPos = mismatches[1].position;
-      const lastMismatchPos = mismatches[mismatches.length - 1].position;
-      setDisablePrev(caret <= firstMismatchPos);
-      setDisableNext(caret >= lastMismatchPos);
-    },
-    [mismatches]
-  );
+  const currentDiff = differences[currentIdx];
+  const disablePrev = currentIdx <= 1;
+  const disableNext = currentIdx >= differences.length - 1;
+  React.useEffect(() => {
+    setCurrentIdx(0);
+  }, [activeFilter]);
+  React.useEffect(() => {
+    onFilterChange == null ? void 0 : onFilterChange({ activeFilter });
+  }, [activeFilter, onFilterChange]);
   React.useEffect(() => {
     if (currentCaretPosition !== -1) {
-      const mismatchIdx = mismatches.findIndex(
-        (m2) => m2.position === currentCaretPosition || m2.position === currentCaretPosition - 1
+      const diffIdx = differences.findIndex(
+        (d2, i) => i > 0 && currentCaretPosition >= d2.start && currentCaretPosition <= d2.end + 1
       );
-      if (mismatchIdx !== -1 && mismatchIdx !== currentIdx) {
-        handleButtonsState(currentCaretPosition);
-        setCurrentIdx(mismatchIdx);
+      if (diffIdx !== -1 && diffIdx !== currentIdx) {
+        setCurrentIdx(diffIdx);
       }
     }
-  }, [currentCaretPosition, mismatches, currentIdx, handleButtonsState]);
-  const updateView = /* @__PURE__ */ __name((mismatch) => {
-    const idx = mismatches.indexOf(mismatch);
-    const position2 = mismatch.position;
-    handleButtonsState(position2);
+  }, [currentCaretPosition, differences, currentIdx]);
+  const updateView = /* @__PURE__ */ __name((diff) => {
+    const idx = differences.indexOf(diff);
+    const { start: start2, end: end2 } = diff;
     setCurrentIdx(idx);
-    updateCaretPosition({ start: position2, end: position2 });
+    updateCaretPosition({ start: start2, end: end2 });
     setTimeout(() => {
       scrollToAlignmentSelection();
     }, 0);
   }, "updateView");
-  const prevMismatch = /* @__PURE__ */ __name(() => {
-    if (currentIdx > 1) {
-      const newIdx = Math.max(0, currentIdx - 1);
-      let prev = mismatches[newIdx];
-      if (currentCaretPosition > 0) {
-        prev = [...mismatches].reverse().find((m2) => m2.position < currentCaretPosition);
-      }
-      if (prev) {
-        updateView(prev);
-      }
-    }
-  }, "prevMismatch");
-  const nextMismatch = /* @__PURE__ */ __name(() => {
-    if (currentIdx < mismatches.length - 1) {
-      const newIdx = Math.min(mismatches.length - 1, currentIdx + 1);
-      let next = mismatches[newIdx];
-      if (currentCaretPosition > 0) {
-        next = mismatches.find(
-          (m2) => m2.position > currentCaretPosition && m2.position > 1
-        );
-      }
-      if (next) {
-        updateView(next);
+  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(core.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(
+      core.MenuItem,
+      {
+        key: value,
+        active: isActive2,
+        onClick: /* @__PURE__ */ __name(() => setActiveFilter(value), "onClick"),
+        text: /* @__PURE__ */ React.createElement("span", { className: "veDiffMenuItem-inner" }, label, /* @__PURE__ */ React.createElement(core.Tag, { round: true, minimal: true, style: { marginLeft: 6 } }, count2))
       }
-    }
-  }, "nextMismatch");
-  return /* @__PURE__ */ React.createElement(
-    "div",
+    );
+  }));
+  return /* @__PURE__ */ React.createElement("div", { className: "veDiffNavigator" }, /* @__PURE__ */ React.createElement(
+    core.Popover,
     {
-      style: {
-        display: "flex",
-        flexDirection: "row",
-        justifyContent: "center",
-        alignItems: "center",
-        gap: 10
-      }
-    },
-    mismatches.length === 1 ? /* @__PURE__ */ React.createElement("span", { style: { fontStyle: "italic", color: "grey" } }, "no mismatches") : /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "column" } }, /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        style: {
-          display: "flex",
-          alignItems: "center"
-        }
-      },
-      /* @__PURE__ */ React.createElement("strong", null, "Mismatches"),
-      /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: 2 } }, /* @__PURE__ */ React.createElement(
-        core.Button,
-        {
-          intent: "primary",
-          icon: "arrow-left",
-          "data-tip": "Previous Mismatch",
-          onClick: prevMismatch,
-          disabled: disablePrev,
-          small: true,
-          minimal: true
-        }
-      ), /* @__PURE__ */ React.createElement(
+      minimal: true,
+      position: core.Position.BOTTOM_LEFT,
+      content: filterMenu,
+      target: /* @__PURE__ */ React.createElement(
         core.Button,
         {
-          intent: "primary",
-          icon: "arrow-right",
-          "data-tip": "Next Mismatch",
-          onClick: nextMismatch,
-          disabled: disableNext,
+          minimal: true,
+          "data-tip": "Filter Difference Type",
           small: true,
-          minimal: true
-        }
-      ))
-    ), /* @__PURE__ */ React.createElement(
-      "span",
-      {
-        style: {
-          fontSize: "0.8em",
-          color: "grey",
-          lineHeight: "0.8em"
-        }
-      },
-      currentMismatch.position > 1 && /* @__PURE__ */ React.createElement("span", null, "Position: ", currentMismatch.position + 1, " | "),
-      "(",
-      currentIdx,
-      " of ",
-      mismatches.length - 1,
-      ")"
-    ))
-  );
+          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(
+    core.Button,
+    {
+      minimal: true,
+      small: true,
+      "data-tip": "Previous Difference",
+      icon: "arrow-left",
+      intent: core.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(
+    core.Button,
+    {
+      minimal: true,
+      small: true,
+      "data-tip": "Next Difference",
+      icon: "arrow-right",
+      intent: core.Intent.PRIMARY,
+      onClick: nextDifference,
+      disabled: disableNext
+    }
+  )));
 }
 __name(FindMismatches, "FindMismatches");
 function getGapMap(sequence2) {
@@ -126310,17 +126395,18 @@ const AlignmentVisibilityTool = pure(/* @__PURE__ */ __name(function AlignmentVi
       minimal: true,
       position: "bottom",
       content: /* @__PURE__ */ React.createElement(VisibilityOptions$2, __spreadValues({}, props)),
-      target: /* @__PURE__ */ React.createElement(core.Tooltip, { content: "Visibility Options" }, /* @__PURE__ */ React.createElement(
+      target: /* @__PURE__ */ React.createElement(
         core.Button,
         {
           className: "tg-alignment-visibility-toggle",
           small: true,
+          "data-tip": "Visibility Options",
           rightIcon: "caret-down",
           intent: core.Intent.PRIMARY,
           minimal: true,
           icon: "eye-open"
         }
-      ))
+      )
     }
   );
 }, "AlignmentVisibilityTool"));
@@ -140108,6 +140194,10 @@ const AlignmentView = /* @__PURE__ */ __name((props) => {
   const [tempTrimAfter, setTempTrimAfter] = React.useState({});
   const [tempTrimmingCaret, setTempTrimmingCaret] = React.useState({});
   const [searchMatchLayers, setSearchMatchLayers] = React.useState([]);
+  const [activeFilterType, setActiveFilterType] = React.useState("all");
+  const handleFilterChange = React.useCallback(({ activeFilter }) => {
+    setActiveFilterType(activeFilter);
+  }, []);
   const bindOutsideChangeHelper = React.useRef({});
   const alignmentHolder = React.useRef(null);
   const alignmentHolderTop = React.useRef(null);
@@ -140833,7 +140923,9 @@ ${seqDataToCopy}\r
             chromatogramData
           }) : linearViewOptions)), {
             additionalSelectionLayers: [
-              ...additionalSelectionLayers || [],
+              ...i !== 0 ? (additionalSelectionLayers || []).filter(
+                (layer) => activeFilterType === "all" ? layer.differenceType !== "gap" : layer.differenceType === activeFilterType
+              ) : additionalSelectionLayers || [],
               ...searchMatchLayers || []
             ],
             dimensions: {
@@ -141492,7 +141584,14 @@ ${seqDataToCopy}\r
                 setSearchMatchLayers
               }
             ),
-            /* @__PURE__ */ React.createElement(FindMismatches, { alignmentJson: alignmentTracks, id: id2 }),
+            /* @__PURE__ */ React.createElement(
+              FindMismatches,
+              {
+                alignmentJson: alignmentTracks,
+                id: id2,
+                onFilterChange: handleFilterChange
+              }
+            ),
             additionalTopEl,
             saveMessage && /* @__PURE__ */ React.createElement(
               "div",
@@ -141593,6 +141692,7 @@ ${seqDataToCopy}\r
               }
             )),
             alignmentTracks,
+            activeFilterType,
             dimensions: {
               width: Math.max(width, 10) || 10
             },