@teselagen/ove 0.8.39 → 0.8.41

package/src/AlignmentView/findAlignmentDifferences.test.js

@@ -0,0 +1,208 @@
+/* Copyright (C) 2018 TeselaGen Biotechnology, Inc. */
+import * as chai from "chai";
+import {
+  findAlignmentDifferences,
+  groupConsecutiveDifferences
+} from "./findAlignmentDifferences";
+
+chai.should();
+const { expect } = chai;
+
+describe("findAlignmentDifferences", () => {
+  it("returns empty array when fewer than 2 tracks", () => {
+    expect(findAlignmentDifferences([])).to.deep.equal([]);
+    expect(findAlignmentDifferences(["ACGT"])).to.deep.equal([]);
+  });
+
+  it("returns empty array when template is empty", () => {
+    expect(findAlignmentDifferences(["", ""])).to.deep.equal([]);
+  });
+
+  it("returns empty array when sequences are identical", () => {
+    expect(findAlignmentDifferences(["ACGT", "ACGT"])).to.deep.equal([]);
+  });
+
+  it("detects a single mismatch", () => {
+    // pos 1: A vs T
+    const diffs = findAlignmentDifferences(["ACGT", "ATGT"]);
+    expect(diffs).to.have.lengthOf(1);
+    expect(diffs[0]).to.deep.include({ position: 1, type: "mismatch" });
+  });
+
+  it("detects multiple mismatches", () => {
+    const diffs = findAlignmentDifferences(["AAAA", "TATA"]);
+    expect(diffs).to.have.lengthOf(2);
+    expect(diffs.map(d => d.position)).to.deep.equal([0, 2]);
+    diffs.forEach(d => expect(d.type).to.equal("mismatch"));
+  });
+
+  it("detects mismatches in protein sequences (amino acids)", () => {
+    const diffs = findAlignmentDifferences(["MAST", "MAST"]);
+    expect(diffs).to.have.lengthOf(0);
+
+    const diffs2 = findAlignmentDifferences(["MAST", "MVST"]);
+    expect(diffs2).to.have.lengthOf(1);
+    expect(diffs2[0]).to.deep.include({ position: 1, type: "mismatch" });
+  });
+
+  it("is case-insensitive", () => {
+    const diffs = findAlignmentDifferences(["ACGT", "acgt"]);
+    expect(diffs).to.have.lengthOf(0);
+  });
+
+  it("detects a single-base insertion (gap in template)", () => {
+    // template: A-GT, query: ACGT → position 1 is an insertion
+    const diffs = findAlignmentDifferences(["A-GT", "ACGT"]);
+    const insertions = diffs.filter(d => d.type === "insertion");
+    expect(insertions).to.have.lengthOf(1);
+    expect(insertions[0].position).to.equal(1);
+  });
+
+  it("detects a multi-base insertion", () => {
+    // template: A---GT, query: ACCCGT
+    const diffs = findAlignmentDifferences(["A---GT", "ACCCGT"]);
+    const insertions = diffs.filter(d => d.type === "insertion");
+    expect(insertions).to.have.lengthOf(3);
+    expect(insertions.map(d => d.position)).to.deep.equal([1, 2, 3]);
+  });
+
+  it("detects a single-base deletion (gap in non-template)", () => {
+    // template: ACGT, query: A-GT → position 1 is a deletion
+    const diffs = findAlignmentDifferences(["ACGT", "A-GT"]);
+    const deletions = diffs.filter(d => d.type === "deletion");
+    expect(deletions).to.have.lengthOf(1);
+    expect(deletions[0].position).to.equal(1);
+  });
+
+  it("detects a multi-base deletion", () => {
+    // template: ACCCGT, query: A---GT
+    const diffs = findAlignmentDifferences(["ACCCGT", "A---GT"]);
+    const deletions = diffs.filter(d => d.type === "deletion");
+    expect(deletions).to.have.lengthOf(3);
+    expect(deletions.map(d => d.position)).to.deep.equal([1, 2, 3]);
+  });
+
+  it("detects leading non-aligned region", () => {
+    // query hasn't started yet at position 0-1
+    const diffs = findAlignmentDifferences(["ACGT", "--GT"]);
+    const gaps = diffs.filter(d => d.type === "gap");
+    expect(gaps).to.have.lengthOf(2);
+    expect(gaps.map(d => d.position)).to.deep.equal([0, 1]);
+  });
+
+  it("detects trailing non-aligned region", () => {
+    // query has ended after position 1
+    const diffs = findAlignmentDifferences(["ACGT", "AC--"]);
+    const gaps = diffs.filter(d => d.type === "gap");
+    expect(gaps).to.have.lengthOf(2);
+    expect(gaps.map(d => d.position)).to.deep.equal([2, 3]);
+  });
+
+  it("detects both leading and trailing non-aligned regions", () => {
+    const diffs = findAlignmentDifferences(["ACGTAC", "-CGTA-"]);
+    const gaps = diffs.filter(d => d.type === "gap");
+    expect(gaps.map(d => d.position)).to.deep.equal([0, 5]);
+  });
+
+  it("fully-gapped query returns all positions as gap", () => {
+    const diffs = findAlignmentDifferences(["ACGT", "----"]);
+    expect(diffs).to.have.lengthOf(4);
+    diffs.forEach(d => expect(d.type).to.equal("gap"));
+  });
+
+  it("handles mixed difference types in one alignment", () => {
+    // template: AACGT
+    // query:    -ACGG
+    // pos 0: gap (leading '-' in query), pos 4: mismatch (T vs G)
+    const diffs = findAlignmentDifferences(["AACGT", "-ACGG"]);
+    expect(diffs.find(d => d.position === 0)?.type).to.equal("gap");
+    expect(diffs.find(d => d.position === 4)?.type).to.equal("mismatch");
+  });
+
+  it("handles multiple non-template tracks", () => {
+    // template: ACGT
+    // track1:   ATGT  → mismatch at pos 1
+    // track2:   AC-T  → deletion at pos 2
+    const diffs = findAlignmentDifferences(["ACGT", "ATGT", "AC-T"]);
+    expect(diffs.find(d => d.position === 1)?.type).to.equal("mismatch");
+    expect(diffs.find(d => d.position === 2)?.type).to.equal("deletion");
+  });
+
+  it("includes all track bases in returned diff object", () => {
+    // mismatch at position 1: template 'C' vs non-template 'T'
+    const diffs = findAlignmentDifferences(["ACGT", "ATGT"]);
+    expect(diffs[0].bases).to.have.lengthOf(2);
+    expect(diffs[0].bases[0]).to.equal("c"); // template at pos 1 (lowercased)
+    expect(diffs[0].bases[1]).to.equal("t"); // non-template at pos 1 (lowercased)
+  });
+});
+
+describe("groupConsecutiveDifferences", () => {
+  it("returns empty array for empty input", () => {
+    expect(groupConsecutiveDifferences([])).to.deep.equal([]);
+  });
+
+  it("does not group mismatches — each stays individual", () => {
+    // 4 consecutive mismatches → 4 separate entries
+    const diffs = findAlignmentDifferences(["AAAA", "TTTT"]);
+    const grouped = groupConsecutiveDifferences(diffs);
+    expect(grouped).to.have.lengthOf(4);
+    grouped.forEach((g, i) => {
+      expect(g.type).to.equal("mismatch");
+      expect(g.start).to.equal(i);
+      expect(g.end).to.equal(i);
+    });
+  });
+
+  it("groups consecutive deletions into one region", () => {
+    // template: ACCCGT, query: A---GT → 3 consecutive deletions
+    const diffs = findAlignmentDifferences(["ACCCGT", "A---GT"]);
+    const grouped = groupConsecutiveDifferences(diffs);
+    expect(grouped).to.have.lengthOf(1);
+    expect(grouped[0]).to.deep.include({ type: "deletion", start: 1, end: 3 });
+  });
+
+  it("groups consecutive insertions into one region", () => {
+    // template: A---GT, query: ACCCGT → 3 consecutive insertions
+    const diffs = findAlignmentDifferences(["A---GT", "ACCCGT"]);
+    const grouped = groupConsecutiveDifferences(diffs);
+    expect(grouped).to.have.lengthOf(1);
+    expect(grouped[0]).to.deep.include({ type: "insertion", start: 1, end: 3 });
+  });
+
+  it("groups consecutive gaps into one region", () => {
+    // leading 2-base gap + trailing 2-base gap
+    const diffs = findAlignmentDifferences(["ACGTAC", "--GT--"]);
+    const grouped = groupConsecutiveDifferences(diffs);
+    expect(grouped).to.have.lengthOf(2);
+    expect(grouped[0]).to.deep.include({ type: "gap", start: 0, end: 1 });
+    expect(grouped[1]).to.deep.include({ type: "gap", start: 4, end: 5 });
+  });
+
+  it("keeps non-consecutive same-type differences separate", () => {
+    // two deletions separated by a match; ends with base so trailing '-' is still aligned
+    // template: ACACA, query: A-A-A → deletions at pos 1 and 3, matches elsewhere
+    const diffs = findAlignmentDifferences(["ACACA", "A-A-A"]);
+    const grouped = groupConsecutiveDifferences(diffs);
+    expect(grouped).to.have.lengthOf(2);
+    expect(grouped[0]).to.deep.include({ type: "deletion", start: 1, end: 1 });
+    expect(grouped[1]).to.deep.include({ type: "deletion", start: 3, end: 3 });
+  });
+
+  it("handles mixed types — groups each type's runs independently", () => {
+    // template: A--CGT, query: ACCC-T
+    // pos 0: A vs A → match
+    // pos 1,2: template '-', query 'C','C' → insertions
+    // pos 3: C vs C → match
+    // pos 4: G vs '-' → deletion
+    // pos 5: T vs T → match
+    const diffs = findAlignmentDifferences(["A--CGT", "ACCC-T"]);
+    const grouped = groupConsecutiveDifferences(diffs);
+    const insertionGroups = grouped.filter(g => g.type === "insertion");
+    const deletionGroups = grouped.filter(g => g.type === "deletion");
+    expect(insertionGroups).to.have.lengthOf(1);
+    expect(insertionGroups[0]).to.deep.include({ start: 1, end: 2 });
+    expect(deletionGroups).to.have.lengthOf(1);
+    expect(deletionGroups[0]).to.deep.include({ start: 4, end: 4 });
+  });
+});

package/src/AlignmentView/index.js

@@ -30,6 +30,8 @@ import ReactDOM from "react-dom";
 
 import { NonReduxEnhancedLinearView } from "../LinearView";
 import Minimap, { getTrimmedRangesToDisplay } from "./Minimap";
+import FindMismatches from "./Mismatches";
+import AlignmentSearchBar from "./AlignmentSearchBar";
 import { compose, branch, renderComponent } from "recompose";
 import AlignmentVisibilityTool from "./AlignmentVisibilityTool";
 import * as alignmentActions from "../redux/alignments";
@@ -160,6 +162,12 @@ export const AlignmentView = props => {
   const [tempTrimBefore, setTempTrimBefore] = useState({});
   const [tempTrimAfter, setTempTrimAfter] = useState({});
   const [tempTrimmingCaret, setTempTrimmingCaret] = useState({});
+  const [searchMatchLayers, setSearchMatchLayers] = React.useState([]);
+  const [activeFilterType, setActiveFilterType] = useState("all");
+
+  const handleFilterChange = useCallback(({ activeFilter }) => {
+    setActiveFilterType(activeFilter);
+  }, []);
   const bindOutsideChangeHelper = useRef({});
   const alignmentHolder = useRef(null);
   const alignmentHolderTop = useRef(null);
@@ -1014,7 +1022,16 @@ export const AlignmentView = props => {
                   chromatogramData
                 })
               : linearViewOptions))}
-          additionalSelectionLayers={additionalSelectionLayers}
+          additionalSelectionLayers={[
+            ...(i !== 0
+              ? (additionalSelectionLayers || []).filter(layer =>
+                  activeFilterType === "all"
+                    ? layer.differenceType !== "gap"
+                    : layer.differenceType === activeFilterType
+                )
+              : additionalSelectionLayers || []),
+            ...(searchMatchLayers || [])
+          ]}
           dimensions={{
             width: linearViewWidth
           }}
@@ -1614,7 +1631,7 @@ export const AlignmentView = props => {
                     display: "flex",
                     minHeight: "32px",
                     width: "100%",
-                    flexWrap: "nowrap",
+                    flexWrap: "wrap",
                     flexDirection: "row",
                     flex: "0 0 auto"
                   }}
@@ -1747,6 +1764,16 @@ export const AlignmentView = props => {
                       {...alignmentVisibilityToolOptions}
                     />
                   )}
+                  <AlignmentSearchBar
+                    alignmentTracks={alignmentTracks}
+                    id={id}
+                    setSearchMatchLayers={setSearchMatchLayers}
+                  />
+                  <FindMismatches
+                    alignmentJson={alignmentTracks}
+                    id={id}
+                    onFilterChange={handleFilterChange}
+                  />
                   {additionalTopEl}
                   {saveMessage && (
                     <div
@@ -1857,6 +1884,7 @@ export const AlignmentView = props => {
                     </>
                   }
                   alignmentTracks={alignmentTracks}
+                  activeFilterType={activeFilterType}
                   dimensions={{
                     width: Math.max(width, 10) || 10
                   }}

package/src/AlignmentView/style.css

@@ -1,3 +1,7 @@
+.alignment-search-bar .bp3-input {
+  border-radius: 5px !important;
+}
+
 .tg-pinch-helper {
   width: 100%;
 }
@@ -60,6 +64,10 @@
 /* .alignmentViewTrackContainer:hover .alignmentTrackNameDiv {
   opacity: 1 !important;
 } */
+.ve-alignment-top-bar {
+  align-items: center;
+}
+
 .ve-alignment-top-bar > * {
   overflow-wrap: normal;
   flex: 0 0 auto;
@@ -76,6 +84,82 @@
 .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/src/AlignmentView/utils.js

@@ -0,0 +1,30 @@
+/* Copyright (C) 2018 TeselaGen Biotechnology, Inc. */
+
+/**
+ * @typedef {Object} Mismatch
+ * @property {number} position
+ * @property {string[]} bases
+ */
+
+/**
+ * @typedef {Object} FindMismatchesProps
+ * @property {Array<{
+ *   alignmentData: {
+ *     sequence: string
+ *   }
+ * }>} alignmentJson
+ * @property {string} id
+ */
+
+export function scrollToAlignmentSelection() {
+  const el = document.querySelector(".veCaret");
+  if (el) {
+    el.scrollIntoView({ inline: "center", block: "nearest" });
+  }
+}
+
+export function updateCaretPosition({ start, end }) {
+  if (window.updateAlignmentSelection) {
+    window.updateAlignmentSelection({ start, end });
+  }
+}

package/src/PropertySidePanel/index.js

@@ -5,11 +5,15 @@ import {
   aminoAcidShortNames
 } from "./calculateAminoAcidFrequency";
 import { Button } from "@blueprintjs/core";
+import {
+  scrollToAlignmentSelection,
+  updateCaretPosition
+} from "../AlignmentView/utils";
+import { DataTable } from "@teselagen/ui";
 
 export default ({ properties, setProperties, style }) => {
   const sidebarRef = React.useRef(null);
   const [mismatchesCount, setMismatchesCount] = React.useState(0);
-  const [mismatchesInRange, setMismatchesInRange] = React.useState(0);
 
   const { track, isOpen, selection, isPairwise } = properties;
 
@@ -33,6 +37,33 @@ export default ({ properties, setProperties, style }) => {
     return isPairwise ? tr.filter(m => m?.color === "red") : tr;
   }, [track, mismatchKey, isPairwise]);
 
+  const mismatchSchema = useMemo(
+    () => ({
+      fields: [
+        {
+          path: "start",
+          type: "number",
+          displayName: "Start",
+          render: val => val + 1
+        },
+        {
+          path: "end",
+          type: "number",
+          displayName: "End",
+          render: val => val + 1
+        }
+      ]
+    }),
+    []
+  );
+
+  const mismatchEntities = useMemo(() => {
+    return (trackMismatches || []).map((m, i) => ({
+      ...m,
+      id: i.toString()
+    }));
+  }, [trackMismatches]);
+
   useEffect(() => {
     if (!isOpen || sidebarRef.current === null || !track) {
       return;
@@ -54,24 +85,6 @@ export default ({ properties, setProperties, style }) => {
     });
 
     setMismatchesCount(mismatchCount);
-    setMismatchesInRange(mismatchCount);
-
-    if (selection && selection.start > -1 && selection.end > -1) {
-      let count = 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) {
-          count += overlapEnd - overlapStart + 1;
-        }
-      });
-      setMismatchesInRange(count);
-    }
   }, [isOpen, track, selection, trackMismatches]);
 
   const aminoFreq = useMemo(() => {
@@ -110,7 +123,7 @@ export default ({ properties, setProperties, style }) => {
             width: "100%"
           }}
         ></div>
-        <h5>Track Properties</h5>
+        <HeaderItem title="Track Properties" />
 
         <div className="bp3-tab-panel">
           <RowItem item={name} title="Name" />
@@ -129,10 +142,6 @@ export default ({ properties, setProperties, style }) => {
               />
             </>
           )}
-          <RowItem
-            item={`${mismatchesInRange}/${mismatchesCount}`}
-            title="Mismatches"
-          />
           <RowItem
             item={
               selection && selection.start > -1 ? (
@@ -145,8 +154,38 @@ export default ({ properties, setProperties, style }) => {
             }
             title="Region"
           />
+          <HeaderItem title={`Mismatches (${mismatchesCount})`} />
+
+          {trackMismatches && trackMismatches.length > 0 && (
+            <div
+              style={{
+                margin: "0px 10px"
+              }}
+            >
+              <DataTable
+                formName="mismatchesTable"
+                isSimple
+                noHeader
+                noFooter
+                withSearch={false}
+                noPadding
+                compact
+                maxHeight={150}
+                entities={mismatchEntities}
+                schema={mismatchSchema}
+                onRowClick={(e, row) => {
+                  updateCaretPosition({ start: row.start, end: row.end });
+                  setTimeout(() => {
+                    scrollToAlignmentSelection();
+                  }, 0);
+                }}
+              />
+            </div>
+          )}
         </div>
-        <h5>{isProtein ? "Amino Acid" : "Base Pair"} Frequencies</h5>
+        <HeaderItem
+          title={`${isProtein ? "Amino Acid" : "Base Pair"} Frequencies`}
+        />
         <div className="sidebar-table">
           <div className="sidebar-row">
             <div className="sidebar-cell">
@@ -225,15 +264,37 @@ export default ({ properties, setProperties, style }) => {
 };
 
 function RowItem({ item, title, units }) {
-  if (!item) return;
-
+  // Skip rendering when the value is absent (null or undefined),
+  // but still allow 0 and other falsy-but-valid values.
+  if (item == null) {
+    return null;
+  }
   const propertyClass = title.split(" ").join("-").toLowerCase();
   return (
     <div className={`ve-flex-row property-${propertyClass}`}>
-      <div className="ve-column-left">{title}</div>
+      <div style={{ fontWeight: "bold" }} className="ve-column-left">
+        {title}
+      </div>
       <div className="ve-column-right">
         {item} {units ?? ""}
       </div>
     </div>
   );
 }
+
+const HeaderItem = ({ title }) => {
+  return (
+    <h5
+      style={{
+        margin: 0,
+        fontSize: 15,
+        fontWeight: "bold",
+        textAlign: "center",
+        padding: "5px 0",
+        borderBottom: "1px solid #f1f1f1"
+      }}
+    >
+      {title}
+    </h5>
+  );
+};