@teselagen/ove 0.8.40 → 0.8.42

package/ove.css

@@ -11297,6 +11297,10 @@ path.partWithSelectedTag {
 /* .alignmentViewTrackContainer:hover .alignmentTrackNameDiv {
   opacity: 1 !important;
 } */
+.ve-alignment-top-bar {
+  align-items: center;
+}
+
 .ve-alignment-top-bar > * {
   overflow-wrap: normal;
   flex: 0 0 auto;
@@ -11313,6 +11317,82 @@ path.partWithSelectedTag {
 .veAlignmentMismatch {
   opacity: 0.9;
 }
+
+.veDiffNavigator {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* Menu item content layout */
+.veDiffMenuItem-inner {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+/* Navigation pill — groups prev/counter/next into one unit */
+.veDiffNav {
+  display: flex;
+  align-items: center;
+  border-radius: 3px;
+  background: rgba(92, 112, 128, 0.06);
+  border: 1px solid rgba(92, 112, 128, 0.18);
+}
+
+.veDiffNav-center {
+  display: flex;
+  align-items: baseline;
+  gap: 3px;
+  padding: 0 6px;
+  min-width: 64px;
+  justify-content: center;
+}
+
+.veDiffNav-fraction {
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  color: #5c7080;
+  line-height: 1;
+}
+
+.veDiffNav-sep {
+  margin: 0 1px;
+  opacity: 0.45;
+}
+
+/* Position number — monospace fits sequence coordinates */
+.veDiffNav-pos {
+  font-size: 10px;
+  font-family: monospace;
+  font-variant-numeric: tabular-nums;
+  color: #a7b6c2;
+  line-height: 1;
+}
+
+.veDiffNav-empty {
+  font-size: 11px;
+  font-style: italic;
+  color: #a7b6c2;
+  padding: 0 4px;
+}
+
+.bp3-dark .veDiffNav {
+  background: rgba(167, 182, 194, 0.05);
+  border-color: rgba(167, 182, 194, 0.14);
+}
+
+.bp3-dark .veDiffNav-fraction {
+  color: #5c7080;
+}
+
+.bp3-dark .veDiffNav-pos {
+  color: #4f6272;
+}
+
+.bp3-dark .veDiffNav-empty {
+  color: #5c7080;
+}
 .veRowItem:has(.rowViewTextContainer) .veAlignmentMismatch {
   opacity: 0.5;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ove",
-  "version": "0.8.40",
+  "version": "0.8.42",
   "main": "./src/index.js",
   "type": "module",
   "repository": "https://github.com/TeselaGen/tg-oss",
@@ -15,7 +15,7 @@
     "@blueprintjs/core": "3.54.0",
     "@hello-pangea/dnd": "16.2.0",
     "@risingstack/react-easy-state": "^6.3.0",
-    "@teselagen/bio-parsers": "0.4.36",
+    "@teselagen/bio-parsers": "0.4.37",
     "@teselagen/file-utils": "0.3.23",
     "@teselagen/range-utils": "0.3.20",
     "@teselagen/react-list": "0.8.18",

package/src/AlignmentView/AlignmentVisibilityTool.js

@@ -2,7 +2,6 @@ import {
   Button,
   Popover,
   Intent,
-  Tooltip,
   Tag,
   Menu,
   MenuItem
@@ -21,16 +20,15 @@ export default pureNoFunc(function AlignmentVisibilityTool(props) {
       position="bottom"
       content={<VisibilityOptions {...props} />}
       target={
-        <Tooltip content="Visibility Options">
-          <Button
-            className="tg-alignment-visibility-toggle"
-            small
-            rightIcon="caret-down"
-            intent={Intent.PRIMARY}
-            minimal
-            icon="eye-open"
-          />
-        </Tooltip>
+        <Button
+          className="tg-alignment-visibility-toggle"
+          small
+          data-tip="Visibility Options"
+          rightIcon="caret-down"
+          intent={Intent.PRIMARY}
+          minimal
+          icon="eye-open"
+        />
       }
     />
   );

package/src/AlignmentView/Minimap.js

@@ -23,7 +23,8 @@ export default class Minimap extends React.Component {
         "scrollAlignmentView",
         "laneHeight",
         "laneSpacing",
-        "isTrackSelected"
+        "isTrackSelected",
+        "activeFilterType"
       ].some(key => props[key] !== newProps[key])
     )
       return true;
@@ -185,12 +186,14 @@ export default class Minimap extends React.Component {
       dimensions: { width = 200 },
       laneHeight,
       laneSpacing = 1,
-      isTrackSelected = []
+      isTrackSelected = [],
+      activeFilterType = "all"
     } = this.props;
     const charWidth = this.getCharWidth();
 
     const {
       matchHighlightRanges: _matchHighlightRanges,
+      gapRanges = [],
       alignmentData: { trimmedRange } = {}
     } = alignmentTracks[i];
     const matchHighlightRanges = !trimmedRange
@@ -228,10 +231,25 @@ export default class Minimap extends React.Component {
       const toAdd = `M${xStart},${y} L${xStart + width},${y} L${
         xStart + width
       },${y + height} L${xStart},${y + height}`;
-      if (!range.isMatch) {
+      if (
+        !range.isMatch &&
+        (activeFilterType === "all" ||
+          range.differenceType === activeFilterType)
+      ) {
         redPath += toAdd;
       }
     });
+    if (activeFilterType === "gap") {
+      gapRanges.forEach(range => {
+        const { xStart, width } = getXStartAndWidthFromNonCircularRange(
+          range,
+          charWidth
+        );
+        redPath += `M${xStart},${y} L${xStart + width},${y} L${
+          xStart + width
+        },${y + height} L${xStart},${y + height}`;
+      });
+    }
     return (
       <div
         key={i + "-lane"}

package/src/AlignmentView/Mismatches.js

@@ -1,183 +1,208 @@
 /* Copyright (C) 2018 TeselaGen Biotechnology, Inc. */
-import React, { useEffect, useCallback, useMemo } from "react";
+
+import {
+  Button,
+  Intent,
+  Menu,
+  MenuItem,
+  Popover,
+  Position,
+  Tag
+} from "@blueprintjs/core";
+import React, { useEffect, useMemo } from "react";
 import { useSelector } from "react-redux";
-import { Button } from "@blueprintjs/core";
+import {
+  findAlignmentDifferences,
+  groupConsecutiveDifferences
+} from "./findAlignmentDifferences";
 import { scrollToAlignmentSelection, updateCaretPosition } from "./utils";
 
+const FILTER_OPTIONS = [
+  { value: "all", label: "All" },
+  { value: "mismatch", label: "Mismatches" },
+  { value: "insertion", label: "Insertions" },
+  { value: "deletion", label: "Deletions" },
+  { value: "gap", label: "Gaps" }
+];
+
 export function FindMismatches(props) {
-  const { alignmentJson, id } = props;
+  const { alignmentJson, id, onFilterChange } = props;
   const alignedSeqs = useMemo(
     () => alignmentJson.map(t => t.alignmentData?.sequence || ""),
     [alignmentJson]
   );
 
-  // Find mismatch positions
-  const mismatches = 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);
-        // Ignore gaps-only columns
-        if (uniqueBases.size > 1 && !uniqueBases.has("-")) {
-          result.push({ position: i, bases });
-        }
-      }
-    }
-    return result;
-  }, [alignedSeqs]);
+  const [activeFilter, setActiveFilter] = React.useState("all");
+
+  const allDifferences = useMemo(
+    () => groupConsecutiveDifferences(findAlignmentDifferences(alignedSeqs)),
+    [alignedSeqs]
+  );
+
+  const countsByType = useMemo(() => {
+    const counts = { all: 0, mismatch: 0, insertion: 0, deletion: 0, gap: 0 };
+    allDifferences.forEach(d => {
+      counts[d.type] = (counts[d.type] || 0) + 1;
+      counts.all++;
+    });
+    return counts;
+  }, [allDifferences]);
+
+  const differences = useMemo(() => {
+    const filtered =
+      activeFilter === "all"
+        ? allDifferences
+        : allDifferences.filter(d => d.type === activeFilter);
+    return [{ position: -1, start: -1, end: -1, bases: [""] }, ...filtered];
+  }, [allDifferences, activeFilter]);
 
   const currentCaretPosition = useSelector(
     state =>
       state.VectorEditor.__allEditorsOptions.alignments[id]?.caretPosition
   );
 
-  // State for navigation
   const [currentIdx, setCurrentIdx] = React.useState(0);
-  const [disablePrev, setDisablePrev] = React.useState(true);
-  const [disableNext, setDisableNext] = React.useState(false);
-
-  // Current mismatch info
-  const currentMismatch = mismatches[currentIdx];
-
-  const handleButtonsState = useCallback(
-    caret => {
-      if (mismatches.length <= 1) {
-        setDisablePrev(true);
-        setDisableNext(true);
-        return;
-      }
 
-      const firstMismatchPos = mismatches[1].position;
-      const lastMismatchPos = mismatches[mismatches.length - 1].position;
+  const currentDiff = differences[currentIdx];
+  const disablePrev = currentIdx <= 1;
+  const disableNext = currentIdx >= differences.length - 1;
 
-      setDisablePrev(caret <= firstMismatchPos);
-      setDisableNext(caret >= lastMismatchPos);
-    },
-    [mismatches]
-  );
+  useEffect(() => {
+    setCurrentIdx(0);
+  }, [activeFilter]);
+
+  useEffect(() => {
+    onFilterChange?.({ activeFilter });
+  }, [activeFilter, onFilterChange]);
 
-  // Update currentIdx when caret moves to a mismatch
   useEffect(() => {
     if (currentCaretPosition !== -1) {
-      const mismatchIdx = mismatches.findIndex(
-        m =>
-          m.position === currentCaretPosition ||
-          m.position === currentCaretPosition - 1
+      const diffIdx = differences.findIndex(
+        (d, i) =>
+          i > 0 &&
+          currentCaretPosition >= d.start &&
+          currentCaretPosition <= d.end + 1
       );
-      if (mismatchIdx !== -1 && mismatchIdx !== currentIdx) {
-        handleButtonsState(currentCaretPosition);
-        setCurrentIdx(mismatchIdx);
+      if (diffIdx !== -1 && diffIdx !== currentIdx) {
+        setCurrentIdx(diffIdx);
       }
     }
-  }, [currentCaretPosition, mismatches, currentIdx, handleButtonsState]);
-
-  const updateView = mismatch => {
-    const idx = mismatches.indexOf(mismatch);
-    const position = mismatch.position;
-
-    handleButtonsState(position);
+  }, [currentCaretPosition, differences, currentIdx]);
 
+  const updateView = diff => {
+    const idx = differences.indexOf(diff);
+    const { start, end } = diff;
     setCurrentIdx(idx);
-
-    updateCaretPosition({ start: position, end: position });
+    updateCaretPosition({ start, end });
     setTimeout(() => {
       scrollToAlignmentSelection();
     }, 0);
   };
 
-  // Handle mismatch navigation
-  const prevMismatch = () => {
-    if (currentIdx > 1) {
-      const newIdx = Math.max(0, currentIdx - 1);
-      let prev = mismatches[newIdx];
-
-      if (currentCaretPosition > 0) {
-        prev = [...mismatches]
-          .reverse()
-          .find(m => m.position < currentCaretPosition);
-      }
-
-      if (prev) {
-        updateView(prev);
-      }
-    }
+  const prevDifference = () => {
+    const pivot =
+      currentCaretPosition >= 0
+        ? currentCaretPosition
+        : (differences[currentIdx]?.start ?? 0);
+    const prev = [...differences]
+      .reverse()
+      .find(d => d.start >= 0 && d.start < pivot);
+    if (prev) updateView(prev);
   };
 
-  const nextMismatch = () => {
-    if (currentIdx < mismatches.length - 1) {
-      const newIdx = Math.min(mismatches.length - 1, currentIdx + 1);
-      let next = mismatches[newIdx];
+  const nextDifference = () => {
+    const pivot =
+      currentCaretPosition >= 0
+        ? currentCaretPosition
+        : (differences[currentIdx]?.start ?? -1);
+    const next = differences.find(d => d.start > pivot && d.start >= 0);
+    if (next) updateView(next);
+  };
 
-      if (currentCaretPosition > 0) {
-        next = mismatches.find(
-          m => m.position > currentCaretPosition && m.position > 1
+  const noDifferences = differences.length <= 1;
+  const activeOption = FILTER_OPTIONS.find(o => o.value === activeFilter);
+  const activeLabel = activeOption?.label ?? "Differences";
+
+  const filterMenu = (
+    <Menu>
+      {FILTER_OPTIONS.map(({ value, label }) => {
+        const count = countsByType[value] ?? 0;
+        const isActive = activeFilter === value;
+        return (
+          <MenuItem
+            key={value}
+            active={isActive}
+            onClick={() => setActiveFilter(value)}
+            text={
+              <span className="veDiffMenuItem-inner">
+                {label}
+                <Tag round minimal style={{ marginLeft: 6 }}>
+                  {count}
+                </Tag>
+              </span>
+            }
+          />
         );
-      }
-
-      if (next) {
-        updateView(next);
-      }
-    }
-  };
+      })}
+    </Menu>
+  );
 
   return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "row",
-        justifyContent: "center",
-        alignItems: "center",
-        gap: 10
-      }}
-    >
-      {mismatches.length === 1 ? (
-        <span style={{ fontStyle: "italic", color: "grey" }}>
-          no mismatches
+    <div className="veDiffNavigator">
+      {/* Filter dropdown — single button replacing 5 filter chips */}
+      <Popover
+        minimal
+        position={Position.BOTTOM_LEFT}
+        content={filterMenu}
+        target={
+          <Button
+            minimal
+            data-tip="Filter Difference Type"
+            small
+            rightIcon="caret-down"
+            className="veDiffFilter-trigger"
+          >
+            {activeLabel}
+          </Button>
+        }
+      />
+
+      {/* Navigation control */}
+      {noDifferences ? (
+        <span className="veDiffNav-empty">
+          no{" "}
+          {activeFilter === "all" ? "differences" : activeLabel.toLowerCase()}
         </span>
       ) : (
-        <div style={{ display: "flex", flexDirection: "column" }}>
-          <div
-            style={{
-              display: "flex",
-              alignItems: "center"
-            }}
-          >
-            <strong>Mismatches</strong>
-            <div style={{ display: "flex", gap: 2 }}>
-              <Button
-                intent="primary"
-                icon="arrow-left"
-                data-tip="Previous Mismatch"
-                onClick={prevMismatch}
-                disabled={disablePrev}
-                small
-                minimal
-              />
-              <Button
-                intent="primary"
-                icon="arrow-right"
-                data-tip="Next Mismatch"
-                onClick={nextMismatch}
-                disabled={disableNext}
-                small
-                minimal
-              />
-            </div>
-          </div>
-          <span
-            style={{
-              fontSize: "0.8em",
-              color: "grey",
-              lineHeight: "0.8em"
-            }}
-          >
-            {currentMismatch.position > 1 && (
-              <span>Position: {currentMismatch.position + 1} | </span>
+        <div className="veDiffNav">
+          <Button
+            minimal
+            small
+            data-tip="Previous Difference"
+            icon="arrow-left"
+            intent={Intent.PRIMARY}
+            onClick={prevDifference}
+            disabled={disablePrev}
+          />
+          <div className="veDiffNav-center">
+            <span className="veDiffNav-fraction">
+              {currentIdx}
+              <span className="veDiffNav-sep">/</span>
+              {differences.length - 1}
+            </span>
+            {currentDiff?.start > -1 && (
+              <span className="veDiffNav-pos">:{currentDiff.start + 1}</span>
             )}
-            ({currentIdx} of {mismatches.length - 1})
-          </span>
+          </div>
+          <Button
+            minimal
+            small
+            data-tip="Next Difference"
+            icon="arrow-right"
+            intent={Intent.PRIMARY}
+            onClick={nextDifference}
+            disabled={disableNext}
+          />
         </div>
       )}
     </div>

package/src/AlignmentView/findAlignmentDifferences.js

@@ -0,0 +1,116 @@
+/* Copyright (C) 2018 TeselaGen Biotechnology, Inc. */
+
+/**
+ * @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) {
+  const grouped = [];
+
+  for (const diff of differences) {
+    if (diff.type === "mismatch") {
+      grouped.push({ ...diff, start: diff.position, end: diff.position });
+      continue;
+    }
+
+    const last = grouped[grouped.length - 1];
+    if (last && last.type === diff.type && last.end === diff.position - 1) {
+      grouped[grouped.length - 1] = { ...last, end: diff.position };
+    } else {
+      grouped.push({ ...diff, start: diff.position, end: diff.position });
+    }
+  }
+
+  return grouped;
+}
+
+/**
+ * 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) {
+  if (alignedSeqs.length < 2 || !alignedSeqs[0]?.length) return [];
+
+  const template = alignedSeqs[0].toLowerCase();
+  const nonTemplates = alignedSeqs.slice(1).map(s => s.toLowerCase());
+
+  // Compute non-aligned region boundaries for each non-template track.
+  // Positions in [0, start) and [end, length) are non-aligned ("gap").
+  const trackBounds = nonTemplates.map(seq => {
+    const withoutLeading = seq.replace(/^-+/, "");
+    const withoutTrailing = seq.replace(/-+$/, "");
+    const start = seq.length - withoutLeading.length;
+    const end = seq.length - (seq.length - withoutTrailing.length);
+    return { start, end };
+  });
+
+  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];
+
+    // Only consider tracks whose aligned region covers position i.
+    // Using `some` here would classify a position as a gap whenever any single
+    // track hasn't started or has ended, swamping real differences from other
+    // tracks that ARE aligned (critical for multi-read Sanger alignments).
+    const alignedIndices = trackBounds.reduce((acc, { start, end }, idx) => {
+      if (i >= start && i < end) 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(b => b !== "-");
+    const nonTemplateHasGap = alignedBases.some(b => b === "-");
+
+    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 = new Set([templateBase, ...alignedBases]);
+      if (uniqueBases.size > 1) {
+        differences.push({ position: i, type: "mismatch", bases });
+      }
+    }
+  }
+
+  return differences;
+}
+
+export default findAlignmentDifferences;