@teselagen/ove 0.8.39 → 0.8.41

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,134 +1,212 @@
-import React from "react";
-import { DataTable, withSelectedEntities } from "@teselagen/ui";
-
-class Mismatches extends React.Component {
-  UNSAFE_componentWillMount() {
-    const { alignmentData, mismatches } = this.props;
-    // const { alignmentId, alignments } = this.props;
-    const mismatchList = this.getMismatchList(alignmentData, mismatches);
-    // const mismatchListAll = this.getMismatchList(alignmentId, alignments);
-    const schema = {
-      fields: [{ path: "mismatches", type: "number" }]
-    };
-    this.setState({ mismatchList, schema });
-  }
-
-  getGapMap = sequence => {
-    const gapMap = [0]; //a map of position to how many gaps come before that position [0,0,0,5,5,5,5,17,17,17, ]
-    sequence.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;
-  };
+/* Copyright (C) 2018 TeselaGen Biotechnology, Inc. */
+
+import {
+  Button,
+  Intent,
+  Menu,
+  MenuItem,
+  Popover,
+  Position,
+  Tag
+} from "@blueprintjs/core";
+import React, { useEffect, useMemo } from "react";
+import { useSelector } from "react-redux";
+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, onFilterChange } = props;
+  const alignedSeqs = useMemo(
+    () => alignmentJson.map(t => t.alignmentData?.sequence || ""),
+    [alignmentJson]
+  );
+
+  const [activeFilter, setActiveFilter] = React.useState("all");
 
-  getMismatchList = (alignmentData, mismatches) => {
-    // getMismatchList = (alignmentId, alignments) => {
-    // let mismatchListAll = [];
-    // skip first sequence/ref seq, since there will be no mismatches
-    // for (let trackI = 1; trackI < alignments[alignmentId].alignmentTracks.length; trackI++) {
-    const mismatchList = [];
-    // const trackName = alignmentData.name;
-    // const editedTrackName = trackName.slice(trackName.indexOf("_") + 1);
-
-    let getGaps = () => ({
-      gapsBefore: 0,
-      gapsInside: 0
+  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++;
     });
-    const gapMap = this.getGapMap(alignmentData.sequence);
-    getGaps = rangeOrCaretPosition => {
-      if (typeof rangeOrCaretPosition !== "object") {
-        return {
-          gapsBefore: gapMap[Math.min(rangeOrCaretPosition, gapMap.length - 1)]
-        };
-      }
-      const { start, end } = rangeOrCaretPosition;
-      const toReturn = {
-        gapsBefore: gapMap[start],
-        gapsInside:
-          gapMap[Math.min(end, gapMap.length - 1)] -
-          gapMap[Math.min(start, gapMap.length - 1)]
-      };
-      return toReturn;
-    };
-
-    const gapsBeforeSequence = getGaps(0).gapsBefore;
-    for (let mismatchI = 0; mismatchI < mismatches.length; mismatchI++) {
-      const mismatchEnd = mismatches[mismatchI].end;
-      const mismatchStart = mismatches[mismatchI].start;
-      const mismatchDifference = mismatchEnd - mismatchStart;
-      // display 'position' as 1-based but store 'start' & 'end' as 0-based
-      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 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
+  );
+
+  const [currentIdx, setCurrentIdx] = React.useState(0);
+
+  const currentDiff = differences[currentIdx];
+  const disablePrev = currentIdx <= 1;
+  const disableNext = currentIdx >= differences.length - 1;
+
+  useEffect(() => {
+    setCurrentIdx(0);
+  }, [activeFilter]);
+
+  useEffect(() => {
+    onFilterChange?.({ activeFilter });
+  }, [activeFilter, onFilterChange]);
+
+  useEffect(() => {
+    if (currentCaretPosition !== -1) {
+      const diffIdx = differences.findIndex(
+        (d, i) =>
+          i > 0 &&
+          currentCaretPosition >= d.start &&
+          currentCaretPosition <= d.end + 1
+      );
+      if (diffIdx !== -1 && diffIdx !== currentIdx) {
+        setCurrentIdx(diffIdx);
       }
     }
-    return mismatchList;
+  }, [currentCaretPosition, differences, currentIdx]);
+
+  const updateView = diff => {
+    const idx = differences.indexOf(diff);
+    const { start, end } = diff;
+    setCurrentIdx(idx);
+    updateCaretPosition({ start, end });
+    setTimeout(() => {
+      scrollToAlignmentSelection();
+    }, 0);
   };
 
-  render() {
-    const { mismatchList, schema } = this.state;
-    let tableOfMismatches;
-    if (mismatchList.length === 0) {
-      tableOfMismatches = null;
-    } else {
-      tableOfMismatches = (
-        <DataTable
-          maxHeight={168}
-          formName={"mismatchesTable"}
-          isSimple
-          compact
-          noRouter
-          // onRowSelect={this.handleMismatchClick}
-          schema={schema}
-          entities={mismatchList}
-        />
-      );
-    }
+  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 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);
+  };
+
+  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>
+            }
+          />
+        );
+      })}
+    </Menu>
+  );
+
+  return (
+    <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>
+        }
+      />
 
-    return (
-      <div style={{ maxHeight: 180.8, overflowY: "scroll" }}>
-        {/* <div style={{ fontSize: 15, textAlign: "center" }}><b>Positions of Mismatches</b></div> */}
-        <div
-          style={{
-            // margin: 10,
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center"
-          }}
-        >
-          <div style={{ width: 100, margin: 4 }}>
-            {/* <div style={{
-                                    paddingBottom: 10,
-                                    textOverflow: "ellipsis",
-                                    overflowY: "auto",
-                                    whiteSpace: "nowrap",
-                                    fontSize: 13,
-                                    textAlign: "center"
-                                }}>
-                                    <b>{mismatchList[0].name}</b>
-                                </div> */}
-            {tableOfMismatches}
+      {/* Navigation control */}
+      {noDifferences ? (
+        <span className="veDiffNav-empty">
+          no{" "}
+          {activeFilter === "all" ? "differences" : activeLabel.toLowerCase()}
+        </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>
+            )}
           </div>
+          <Button
+            minimal
+            small
+            data-tip="Next Difference"
+            icon="arrow-right"
+            intent={Intent.PRIMARY}
+            onClick={nextDifference}
+            disabled={disableNext}
+          />
         </div>
-      </div>
-    );
-  }
+      )}
+    </div>
+  );
 }
 
-export default withSelectedEntities("mismatchesTable")(Mismatches);
+export default FindMismatches;

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;