Make softclip indicator black if none

GMOD · Dec 20, 2020 · b7a232a · b7a232a
1 parent f033ae9
commit b7a232a
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 8 deletions.
diff --git a/plugins/alignments/src/PileupRenderer/PileupRenderer.ts b/plugins/alignments/src/PileupRenderer/PileupRenderer.ts
@@ -249,6 +249,7 @@ export default class PileupRenderer extends BoxRendererType {
       ctx.fillStyle = readConfObject(config, 'color', [feature])
       ctx.fillRect(leftPx, topPx, Math.max(rightPx - leftPx, 1.5), heightPx)
       const mismatches: Mismatch[] = feature.get('mismatches')
+      const seq = feature.get('seq')
 
       if (mismatches) {
         const colorForBase: { [key: string]: string } = {
@@ -309,9 +310,12 @@ export default class PileupRenderer extends BoxRendererType {
             }
           } else if (
             mismatch.type === 'hardclip' ||
-            (!showSoftClip && mismatch.type === 'softclip')
+            mismatch.type === 'softclip'
           ) {
             ctx.fillStyle = mismatch.type === 'hardclip' ? 'red' : 'blue'
+            if (!seq) {
+              ctx.fillStyle = 'black'
+            }
             const pos = mismatchLeftPx - 1
             ctx.fillRect(pos, topPx + 1, w, heightPx - 2)
             ctx.fillRect(pos - w, topPx, w * 3, 1)
@@ -345,9 +349,12 @@ export default class PileupRenderer extends BoxRendererType {
         // Display all bases softclipped off in lightened colors
         if (showSoftClip) {
           const seq = feature.get('seq')
-          if (!seq) return
-          for (let j = 0; j < mismatches.length; j += 1) {
-            const mismatch = mismatches[j]
+          if (!seq) {
+            return
+          }
+
+          const clips = [mismatches[0], mismatches[mismatches.length - 1]]
+          clips.forEach(mismatch => {
             if (mismatch.type === 'softclip') {
               const softClipLength = mismatch.cliplen || 0
               const softClipStart =
@@ -370,15 +377,17 @@ export default class PileupRenderer extends BoxRendererType {
                   Math.abs(softClipLeftPx - softClipRightPx),
                 )
 
-                // Black accounts for IUPAC ambiguity code bases such as N that show in soft clipping
-                ctx.fillStyle = lighten(colorForBase[base] || '#000000', 0.3)
+                // Black accounts for IUPAC ambiguity code bases such as N that
+                // show in soft clipping
+                const baseColor = colorForBase[base] || '#000000'
+                ctx.fillStyle = baseColor
                 ctx.fillRect(softClipLeftPx, topPx, softClipWidthPx, heightPx)
 
                 if (
                   softClipWidthPx >= charSize.width &&
                   heightPx >= charSize.height - 5
                 ) {
-                  ctx.fillStyle = 'black'
+                  ctx.fillStyle = theme.palette.getContrastText(baseColor)
                   ctx.fillText(
                     base,
                     softClipLeftPx + (softClipWidthPx - charSize.width) / 2 + 1,
@@ -387,7 +396,7 @@ export default class PileupRenderer extends BoxRendererType {
                 }
               }
             }
-          }
+          })
         }
       }
     })

diff --git a/website/docs/faq.md b/website/docs/faq.md
@@ -136,3 +136,10 @@ In JBrowse 1, the app level menu operated on the single linear genome view, but
 with JBrowse 2, the top level menu only performs global operations and the
 linear genome view has it's own hamburger menu. Note that each track also has
 it's own track level menu.
+
+### Why do some of my reads not display soft clipping?
+
+Some reads, such as secondary reads, do not have a SEQ field on their records,
+so they will not display softclipping.
+
+These reads will display their soft-clipping indicator as black