Improved alignments track contrasts

GMOD · Feb 22, 2023 · e514a51 · e514a51
1 parent 9ca507e
commit e514a51
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 36 deletions.
diff --git a/packages/core/ui/theme.ts b/packages/core/ui/theme.ts
@@ -1,4 +1,4 @@
-import { blue, green, red, grey, amber } from '@mui/material/colors'
+import { blue, green, red, grey, orange } from '@mui/material/colors'
 import { createTheme, ThemeOptions } from '@mui/material/styles'
 import type { PaletteAugmentColorOptions } from '@mui/material/styles/createPalette'
 import deepmerge from 'deepmerge'
@@ -50,7 +50,7 @@ function stockTheme() {
       bases: {
         A: refTheme.palette.augmentColor({ color: green }),
         C: refTheme.palette.augmentColor({ color: blue }),
-        G: refTheme.palette.augmentColor({ color: amber }),
+        G: refTheme.palette.augmentColor({ color: orange }),
         T: refTheme.palette.augmentColor({ color: red }),
       },
     },
@@ -98,7 +98,7 @@ function getDarkStockTheme() {
       bases: {
         A: refTheme.palette.augmentColor({ color: green }),
         C: refTheme.palette.augmentColor({ color: blue }),
-        G: refTheme.palette.augmentColor({ color: amber }),
+        G: refTheme.palette.augmentColor({ color: orange }),
         T: refTheme.palette.augmentColor({ color: red }),
       },
     },
@@ -132,7 +132,7 @@ function getDarkMinimalTheme() {
       bases: {
         A: refTheme.palette.augmentColor({ color: green }),
         C: refTheme.palette.augmentColor({ color: blue }),
-        G: refTheme.palette.augmentColor({ color: amber }),
+        G: refTheme.palette.augmentColor({ color: orange }),
         T: refTheme.palette.augmentColor({ color: red }),
       },
     },
@@ -152,7 +152,7 @@ function getMinimalTheme() {
       bases: {
         A: refTheme.palette.augmentColor({ color: green }),
         C: refTheme.palette.augmentColor({ color: blue }),
-        G: refTheme.palette.augmentColor({ color: amber }),
+        G: refTheme.palette.augmentColor({ color: orange }),
         T: refTheme.palette.augmentColor({ color: red }),
       },
     },

diff --git a/plugins/alignments/src/PileupRenderer/PileupRenderer.ts b/plugins/alignments/src/PileupRenderer/PileupRenderer.ts
@@ -189,13 +189,10 @@ export default class PileupRenderer extends BoxRendererType {
         }
       }
     }
+    const s = feature.get('start') - expansionBefore
+    const e = feature.get('end') + expansionAfter
 
-    const [leftPx, rightPx] = bpSpanPx(
-      feature.get('start') - expansionBefore,
-      feature.get('end') + expansionAfter,
-      region,
-      bpPerPx,
-    )
+    const [leftPx, rightPx] = bpSpanPx(s, e, region, bpPerPx)
 
     if (displayMode === 'compact') {
       heightPx /= 3
@@ -207,13 +204,7 @@ export default class PileupRenderer extends BoxRendererType {
         }`,
       )
     }
-    const topPx = layout.addRect(
-      feature.id(),
-      feature.get('start') - expansionBefore,
-      feature.get('end') + expansionAfter,
-      heightPx,
-      feature,
-    )
+    const topPx = layout.addRect(feature.id(), s, e, heightPx, feature)
     if (topPx === null) {
       return null
     }
@@ -658,6 +649,7 @@ export default class PileupRenderer extends BoxRendererType {
     charWidth,
     charHeight,
     defaultColor,
+    theme,
     canvasWidth,
   }: {
     ctx: CanvasRenderingContext2D
@@ -669,9 +661,9 @@ export default class PileupRenderer extends BoxRendererType {
     charHeight: number
     defaultColor: boolean
     canvasWidth: number
+    theme: Theme
   }) {
     const { config, bpPerPx, regions, colorBy, colorTagMap = {} } = renderArgs
-
     const { tag = '', type: colorType = '' } = colorBy || {}
     const { feature } = feat
     const region = regions[0]
@@ -751,7 +743,7 @@ export default class PileupRenderer extends BoxRendererType {
       default:
         if (defaultColor) {
           // avoid a readConfObject call here
-          ctx.fillStyle = '#c8c8c8'
+          ctx.fillStyle = '#ccc'
         } else {
           ctx.fillStyle = readConfObject(config, 'color', { feature })
         }
@@ -825,6 +817,7 @@ export default class PileupRenderer extends BoxRendererType {
     canvasWidth,
     drawSNPsMuted,
     drawIndels = true,
+    theme,
   }: {
     ctx: CanvasRenderingContext2D
     feat: LayoutFeature
@@ -839,6 +832,7 @@ export default class PileupRenderer extends BoxRendererType {
     charWidth: number
     charHeight: number
     canvasWidth: number
+    theme: Theme
   }) {
     const { Color, bpPerPx, regions } = renderArgs
     const { heightPx, topPx, feature } = feat
@@ -875,7 +869,7 @@ export default class PileupRenderer extends BoxRendererType {
 
           fillRect(
             ctx,
-            leftPx,
+            Math.round(leftPx),
             topPx,
             widthPx,
             heightPx,
@@ -1165,6 +1159,7 @@ export default class PileupRenderer extends BoxRendererType {
         charWidth,
         charHeight,
         canvasWidth,
+        theme,
       })
       this.drawMismatches({
         ctx,
@@ -1180,6 +1175,7 @@ export default class PileupRenderer extends BoxRendererType {
         colorForBase,
         contrastForBase,
         canvasWidth,
+        theme,
       })
       if (showSoftClip) {
         this.drawSoftClipping({

diff --git a/plugins/alignments/src/PileupRenderer/configSchema.ts b/plugins/alignments/src/PileupRenderer/configSchema.ts
@@ -50,7 +50,7 @@ const PileupRenderer = ConfigurationSchema(
       type: 'number',
       description:
         'the minimum width in px for a pileup mismatch feature. use for increasing/decreasing mismatch marker widths when zoomed out, e.g. 0 or 1',
-      defaultValue: 0.7,
+      defaultValue: 1,
     },
     /**
      * #slot

diff --git a/plugins/alignments/src/SNPCoverageRenderer/SNPCoverageRenderer.ts b/plugins/alignments/src/SNPCoverageRenderer/SNPCoverageRenderer.ts
@@ -35,6 +35,8 @@ interface SNPInfo {
   total: number
 }
 
+const fudgeFactor = 0.6
+
 export default class SNPCoverageRenderer extends WiggleBaseRenderer {
   // note: the snps are drawn on linear scale even if the data is drawn in log
   // scape hence the two different scales being used
@@ -78,6 +80,7 @@ export default class SNPCoverageRenderer extends WiggleBaseRenderer {
       scaleType: 'linear',
     })
     const originY = getOrigin(scaleOpts.scaleType)
+    const originLinear = getOrigin('linear')
 
     const indicatorThreshold = readConfObject(cfg, 'indicatorThreshold')
     const drawInterbaseCounts = readConfObject(cfg, 'drawInterbaseCounts')
@@ -87,25 +90,22 @@ export default class SNPCoverageRenderer extends WiggleBaseRenderer {
     // get the y coordinate that we are plotting at, this can be log scale
     const toY = (n: number) => height - (viewScale(n) || 0) + offset
     const toHeight = (n: number) => toY(originY) - toY(n)
-
-    const indicatorToY = (n: number) =>
-      height - (indicatorViewScale(n) || 0) + offset
-    const indicatorToHeight = (n: number) =>
-      indicatorToY(getOrigin('linear')) - indicatorToY(n)
+    // used specifically for indicator
+    const toY2 = (n: number) => height - (indicatorViewScale(n) || 0) + offset
+    const toHeight2 = (n: number) => toY2(originLinear) - toY2(n)
 
     const { bases } = theme.palette
     const colorForBase: { [key: string]: string } = {
       A: bases.A.main,
       C: bases.C.main,
       G: bases.G.main,
       T: bases.T.main,
-      total: 'lightgrey',
+      total: '#ccc',
       insertion: 'purple',
       softclip: 'blue',
       hardclip: 'red',
       meth: 'red',
       unmeth: 'blue',
-      ref: 'lightgrey',
     }
 
     const feats = [...features.values()]
@@ -118,7 +118,7 @@ export default class SNPCoverageRenderer extends WiggleBaseRenderer {
     for (let i = 0; i < coverage.length; i++) {
       const feature = coverage[i]
       const [leftPx, rightPx] = featureSpanPx(feature, region, bpPerPx)
-      const w = rightPx - leftPx + 0.3
+      const w = rightPx - leftPx + fudgeFactor
       const score = feature.get('score') as number
       ctx.fillRect(leftPx, toY(score), w, toHeight(score))
     }
@@ -144,7 +144,7 @@ export default class SNPCoverageRenderer extends WiggleBaseRenderer {
 
       const score = feature.get('score') as number
       const snpinfo = feature.get('snpinfo') as SNPInfo
-      const w = Math.max(rightPx - leftPx + 0.3, 1)
+      const w = Math.max(rightPx - leftPx + fudgeFactor, 1)
       const totalScore = snpinfo.total
       const keys = Object.keys(snpinfo.cov).sort()
 
@@ -160,7 +160,7 @@ export default class SNPCoverageRenderer extends WiggleBaseRenderer {
         const height = toHeight(score)
         const bottom = toY(score) + height
         ctx.fillRect(
-          leftPx,
+          Math.floor(leftPx),
           bottom - ((total + curr) / score) * height,
           w,
           (total / score) * height,
@@ -175,12 +175,13 @@ export default class SNPCoverageRenderer extends WiggleBaseRenderer {
         for (let i = 0; i < interbaseEvents.length; i++) {
           const base = interbaseEvents[i]
           const { total } = snpinfo.noncov[base]
+          const r = 0.6
           ctx.fillStyle = colorForBase[base]
           ctx.fillRect(
-            leftPx - 0.6 + extraHorizontallyFlippedOffset,
-            indicatorHeight + indicatorToHeight(curr),
-            1.2,
-            indicatorToHeight(total),
+            leftPx - r + extraHorizontallyFlippedOffset,
+            indicatorHeight + toHeight2(curr),
+            r * 2,
+            toHeight2(total),
           )
           curr += total
         }