Misc

plugins/alignments/src/LinearReadArcsDisplay/drawFeats.ts

@@ -108,11 +108,11 @@ export default function drawFeats(
       } else {
         if (hasPaired) {
           if (type === 'insertSizeAndOrientation') {
-            ctx.strokeStyle = getInsertSizeAndOrientationColor(k1, k2, stats)
+            ctx.strokeStyle = getInsertSizeAndOrientationColor(k1, k2, stats)[0]
           } else if (type === 'orientation') {
-            ctx.strokeStyle = getOrientationColor(k1)
+            ctx.strokeStyle = getOrientationColor(k1)[0]
           } else if (type === 'insertSize') {
-            ctx.strokeStyle = getInsertSizeColor(k1, k2, stats) || 'grey'
+            ctx.strokeStyle = getInsertSizeColor(k1, k2, stats)?.[0] || 'grey'
           } else if (type === 'gradient') {
             ctx.strokeStyle = `hsl(${Math.log10(absrad) * 10},50%,50%)`
           }

plugins/alignments/src/LinearReadCloudDisplay/drawFeats.ts

@@ -8,7 +8,7 @@ import {
   getInsertSizeColor,
   getInsertSizeAndOrientationColor,
 } from '../shared/color'
-import { ReducedFeature } from '../shared/fetchChains'
+import { ChainStats, ReducedFeature } from '../shared/fetchChains'
 import { LinearReadCloudDisplayModel } from './model'
 import { fillRectCtx, strokeRectCtx } from './util'
 
@@ -43,12 +43,47 @@ export default function drawFeats(
   }
 
   const { chains, stats } = chainData
+  const type = self.colorBy?.type || 'insertSizeAndOrientation'
+
+  function fill({
+    r1s,
+    r1e,
+    r2s,
+    r2e,
+    distance,
+    v0,
+    v1,
+  }: {
+    r1s: number
+    r1e: number
+    r2s: number
+    r2e: number
+    distance: number
+    v0: ReducedFeature
+    v1: ReducedFeature
+  }) {
+    const w1 = Math.max(r1e - r1s, 2)
+    const w2 = Math.max(r2e - r2s, 2)
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const [fill, stroke] = getColor({ type, v0, v1, stats: stats! })
+
+    const top = (Math.log(distance) - minD) * scaler
+    const halfHeight = featureHeight / 2 - 0.5
+    const w = r2s - r1e
+    fillRectCtx(r1e - view.offsetPx, top + halfHeight, w, 1, ctx, 'black')
+
+    strokeRectCtx(r1s - view.offsetPx, top, w1, featureHeight, ctx, stroke)
+    strokeRectCtx(r2s - view.offsetPx, top, w2, featureHeight, ctx, stroke)
+    fillRectCtx(r1s - view.offsetPx, top, w1, featureHeight, ctx, fill)
+    fillRectCtx(r2s - view.offsetPx, top, w2, featureHeight, ctx, fill)
+  }
+
   const coords: ChainCoord[] = []
   for (let i = 0; i < chains.length; i++) {
     const chain = chains[i]
-    // if we're looking at a paired read (flag 1) then assume it is just two
-    // reads (some small cases may defy this assumption such as secondary
-    // alignments but this may be uncommon)
+    // if we're looking at a paired read (flag 1) then assume it is just
+    // two reads (some small cases may defy this assumption such as
+    // secondary alignments but this may be uncommon)
     if (chain[0].flags & 1) {
       if (chain.length > 1) {
         const v0 = chain[0]
@@ -91,13 +126,13 @@ export default function drawFeats(
         const r1e = view.bpToPx({ refName: ra1, coord: v0.end })?.offsetPx
         if (r1s !== undefined && r1e !== undefined) {
           const w1 = Math.max(r1e - r1s, 2)
-          ctx.fillStyle = 'red'
-          fillRectCtx(r1s - view.offsetPx, 0, w1, featureHeight, ctx)
+          fillRectCtx(r1s - view.offsetPx, 0, w1, featureHeight, ctx, '#f00')
+          strokeRectCtx(r1s - view.offsetPx, 0, w1, featureHeight, ctx, '#a00')
         }
       }
     } else {
-      // if we're not looking at pairs, then it could be a multiply-split-long
-      // read, so traverse chain
+      // if we're not looking at pairs, then it could be a
+      // multiply-split-long read, so traverse chain
       for (let i = 1; i < chain.length; i++) {
         const v0 = chain[i - 1]
         const v1 = chain[i]
@@ -135,38 +170,39 @@ export default function drawFeats(
     }
   }
 
-  const halfHeight = featureHeight / 2 - 0.5
   const maxD = Math.log(max(coords.map(c => c.distance)))
   const minD = Math.max(Math.log(min(coords.map(c => c.distance))) - 1, 0)
   const scaler = (displayHeight - 20) / (maxD - minD)
 
-  ctx.strokeStyle = '#ddd'
   for (let i = 0; i < coords.length; i++) {
-    const { r1s, r1e, r2s, r2e, v0, v1, distance } = coords[i]
-    const type = self.colorBy?.type || 'insertSizeAndOrientation'
-
-    const top = (Math.log(distance) - minD) * scaler
-    const w = r2s - r1e
-    ctx.fillStyle = 'black'
-    fillRectCtx(r1e - view.offsetPx, top + halfHeight, w, 1, ctx)
-
-    if (type === 'insertSizeAndOrientation') {
-      ctx.fillStyle = getInsertSizeAndOrientationColor(v0, v1, stats)
-    } else if (type === 'orientation') {
-      ctx.fillStyle = getOrientationColor(v0)
-    } else if (type === 'insertSize') {
-      ctx.fillStyle = getInsertSizeColor(v0, v1, stats) || 'grey'
-    } else if (type === 'gradient') {
-      const s = Math.min(v0.start, v1.start)
-      const e = Math.max(v0.end, v1.end)
-      ctx.fillStyle = `hsl(${Math.log10(Math.abs(e - s)) * 10},50%,50%)`
-    }
+    fill(coords[i])
+  }
+}
 
-    const w1 = Math.max(r1e - r1s, 2)
-    const w2 = Math.max(r2e - r2s, 2)
-    fillRectCtx(r1s - view.offsetPx, top, w1, featureHeight, ctx)
-    fillRectCtx(r2s - view.offsetPx, top, w2, featureHeight, ctx)
-    strokeRectCtx(r2s - view.offsetPx, top, w2, featureHeight, ctx)
-    strokeRectCtx(r2s - view.offsetPx, top, w2, featureHeight, ctx)
+function getColor({
+  type,
+  v0,
+  v1,
+  stats,
+}: {
+  type: string
+  v0: ReducedFeature
+  v1: ReducedFeature
+  stats: ChainStats
+}) {
+  if (type === 'insertSizeAndOrientation') {
+    return getInsertSizeAndOrientationColor(v0, v1, stats)
+  } else if (type === 'orientation') {
+    return getOrientationColor(v0)
+  } else if (type === 'insertSize') {
+    return getInsertSizeColor(v0, v1, stats) || 'grey'
+  } else if (type === 'gradient') {
+    const s = Math.min(v0.start, v1.start)
+    const e = Math.max(v0.end, v1.end)
+    return [
+      `hsl(${Math.log10(Math.abs(e - s)) * 10},50%,50%)`,
+      `hsl(${Math.log10(Math.abs(e - s)) * 10},50%,30%)`,
+    ]
   }
+  return []
 }

plugins/alignments/src/shared/color.ts

@@ -1,11 +1,30 @@
 import { orientationTypes } from '../util'
 import { ChainStats } from './fetchChains'
 
-const alignmentColoring: { [key: string]: string } = {
-  color_pair_lr: '#c8c8c8',
-  color_pair_rr: 'navy',
-  color_pair_rl: 'teal',
-  color_pair_ll: 'green',
+const fillColor: { [key: string]: string } = {
+  LR: '#c8c8c8',
+  RR: 'navy',
+  RL: 'teal',
+  LL: 'green',
+  large: 'red',
+  small: '#f0f',
+  interchrom: 'purple',
+  unknown: 'grey',
+}
+
+// manually calculated by running
+// Object.fromEntries(Object.entries(fillColor).map(([key,val])=>{
+//   return [key, color(val).darken('0.3').hex()]
+// }))
+const strokeColor: { [key: string]: string } = {
+  LR: '#8C8C8C',
+  RR: '#00005A',
+  RL: '#005A5A',
+  LL: '#005A00',
+  large: '#B30000',
+  small: '#B300B2',
+  interchrom: '#5A005A',
+  unknown: '#5A5A5A',
 }
 
 export function getInsertSizeColor(
@@ -16,13 +35,13 @@ export function getInsertSizeColor(
   const sameRef = f1.refName === f2.refName
   const tlen = Math.abs(f1.tlen || 0)
   if (sameRef && tlen > (stats?.upper || 0)) {
-    return 'red'
+    return [fillColor.large, strokeColor.large] as const
   } else if (sameRef && tlen < (stats?.lower || 0)) {
-    return '#f0f'
+    return [fillColor.small, strokeColor.small] as const
   } else if (!sameRef) {
-    return 'purple'
+    return [fillColor.interchrom, strokeColor.interchrom] as const
   }
-  return ''
+  return undefined
 }
 
 export function getInsertSizeAndOrientationColor(
@@ -34,14 +53,10 @@ export function getInsertSizeAndOrientationColor(
 }
 
 export function getOrientationColor(f: { pair_orientation?: string }) {
-  const type = orientationTypes['fr']
-  const orientation = type[f.pair_orientation || '']
-  const map = {
-    LR: 'color_pair_lr',
-    RR: 'color_pair_rr',
-    RL: 'color_pair_rl',
-    LL: 'color_pair_ll',
-  }
-  const val = map[orientation as keyof typeof map]
-  return alignmentColoring[val] || 'grey'
+  const type = orientationTypes.fr
+  const type2 = type[f.pair_orientation || '']
+  return [
+    fillColor[type2] || fillColor.unknown,
+    strokeColor[type2] || strokeColor.unknown,
+  ] as const
 }