Fixes to negative strand CIGAR renderings

GMOD · Jul 11, 2022 · 03ab944 · 03ab944
1 parent edd9360
commit 03ab944
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 9 deletions.
diff --git a/plugins/alignments/src/BamAdapter/MismatchParser.ts b/plugins/alignments/src/BamAdapter/MismatchParser.ts
@@ -11,8 +11,8 @@ export interface Mismatch {
 }
 const mdRegex = new RegExp(/(\d+|\^[a-z]+|[a-z])/gi)
 const modificationRegex = new RegExp(/([A-Z])([-+])([^,.?]+)([.?])?/)
-export function parseCigar(cigar: string) {
-  return (cigar || '').split(/([MIDNSHPX=])/)
+export function parseCigar(cigar: string = '') {
+  return cigar.split(/([MIDNSHPX=])/).slice(0, -1)
 }
 export function cigarToMismatches(
   ops: string[],

diff --git a/...s/linear-comparative-view/src/LinearSyntenyRenderer/components/LinearSyntenyRendering.tsx b/...s/linear-comparative-view/src/LinearSyntenyRenderer/components/LinearSyntenyRendering.tsx
@@ -252,7 +252,7 @@ function LinearSyntenyRendering({
   const [currX, setCurrX] = useState<number>()
   const [currY, setCurrY] = useState<number>()
   const { color, assemblyManager, parentView } = getResources(displayModel)
-  const hydratedFeatures = useMemo(
+  const es = useMemo(
     () =>
       features.map(level =>
         level
@@ -262,19 +262,19 @@ function LinearSyntenyRendering({
     [features],
   )
   const matches = useMemo(
-    () => layoutMatches(hydratedFeatures, assemblyManager),
-    [hydratedFeatures, assemblyManager],
+    () => layoutMatches(es, assemblyManager),
+    [es, assemblyManager],
   )
 
   const parsedCIGARs = useMemo(
     () =>
       new Map(
-        hydratedFeatures.flat().map(f => {
+        es.flat().map(f => {
           const cigar = f.get('cg') || f.get('CIGAR')
           return [f.id(), cigar ? MismatchParser.parseCigar(cigar) : undefined]
         }),
       ),
-    [hydratedFeatures],
+    [es],
   )
   const drawCurves = parentView?.drawCurves
   const views = parentView?.views
@@ -400,6 +400,9 @@ function LinearSyntenyRendering({
             let cx1 = x11
             let cx2 = x21
 
+            // we have to read the CIGAR backwards when looking at negative strand features
+            const f1flipped = f1.get('strand')
+
             // flip the direction of the CIGAR drawing in horizontally flipped
             // modes
             const rev1 = x11 < x12 ? 1 : -1
@@ -415,7 +418,11 @@ function LinearSyntenyRendering({
               const unitMultiplier2 = Math.floor(
                 MAX_COLOR_RANGE / (cigar.length / 2),
               )
-              for (let j = 0; j < cigar.length; j += 2) {
+              for (
+                let j = f1flipped ? cigar.length - 2 : 0;
+                f1flipped ? j >= 0 : j < cigar.length;
+                j += f1flipped ? -2 : 2
+              ) {
                 const idx = j * unitMultiplier2 + 1
                 const r = Math.floor(idx / (255 * 255)) % 255
                 const g = Math.floor(idx / 255) % 255
@@ -453,10 +460,11 @@ function LinearSyntenyRendering({
                   // if it is a small feature and not the last element of the
                   // CIGAR (which could skip rendering it entire if we did turn
                   // it on), then turn on continuing flag
+                  const isNotLast = f1flipped ? j > 2 : j < cigar.length - 2
                   if (
                     Math.abs(cx1 - px1) < 1 &&
                     Math.abs(cx2 - px2) < 1 &&
-                    j < cigar.length - 2
+                    isNotLast
                   ) {
                     continuingFlag = true
                   } else {