cds color code

shashankbrgowda · Jan 25, 2024 · 00a6dc8 · 00a6dc8
1 parent bf85e02
commit 00a6dc8
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 9 deletions.
diff --git a/packages/jbrowse-plugin-apollo/src/LinearApolloDisplay/glyphs/CanonicalGeneGlyph.ts b/packages/jbrowse-plugin-apollo/src/LinearApolloDisplay/glyphs/CanonicalGeneGlyph.ts
@@ -11,7 +11,9 @@ import { LinearApolloDisplay } from '../stateModel'
 import {
   CDSDiscontinuousLocation,
   MousePosition,
+  getSeqRow,
 } from '../stateModel/mouseEvents'
+import { transRowsColorCodes } from '../stateModel/rendering'
 import { CanvasMouseEvent } from '../types'
 import { Glyph } from './Glyph'
 
@@ -248,10 +250,15 @@ export class CanonicalGeneGlyph extends Glyph {
             ctx.fillRect(startPx, cdsTop, widthPx, cdsHeight)
             if (widthPx > 2) {
               ctx.clearRect(startPx + 1, cdsTop + 1, widthPx - 2, cdsHeight - 2)
+              const seqRow = getSeqRow(cds, bpPerPx)
+              const cdsColorCode =
+                seqRow === undefined
+                  ? 'rgb(171,71,188)'
+                  : transRowsColorCodes[seqRow]
               ctx.fillStyle =
                 apolloSelectedFeature && cds._id === apolloSelectedFeature._id
                   ? 'rgb(0,0,0)'
-                  : 'rgb(171,71,188)'
+                  : cdsColorCode
               ctx.fillRect(startPx + 1, cdsTop + 1, widthPx - 2, cdsHeight - 2)
               if (forwardFill && backwardFill && strand) {
                 const reversal = reversed ? -1 : 1

diff --git a/packages/jbrowse-plugin-apollo/src/LinearApolloDisplay/glyphs/ImplicitExonGeneGlyph.ts b/packages/jbrowse-plugin-apollo/src/LinearApolloDisplay/glyphs/ImplicitExonGeneGlyph.ts
@@ -3,7 +3,8 @@ import { AnnotationFeatureI } from 'apollo-mst'
 import { LocationEndChange, LocationStartChange } from 'apollo-shared'
 
 import { LinearApolloDisplay } from '../stateModel'
-import { MousePosition } from '../stateModel/mouseEvents'
+import { MousePosition, getSeqRow } from '../stateModel/mouseEvents'
+import { transRowsColorCodes } from '../stateModel/rendering'
 import { CanvasMouseEvent } from '../types'
 import { Glyph } from './Glyph'
 
@@ -126,12 +127,17 @@ export class ImplicitExonGeneGlyph extends Glyph {
           ctx.fillRect(startPx, cdsOrUTRTop, widthPx, height)
           if (widthPx > 2) {
             ctx.clearRect(startPx + 1, cdsOrUTRTop + 1, widthPx - 2, height - 2)
+            const seqRow = getSeqRow(cdsOrUTR, bpPerPx)
+            const cdsColorCode =
+              seqRow !== undefined && isCDS
+                ? transRowsColorCodes[seqRow]
+                : 'rgb(171,71,188)'
             ctx.fillStyle =
               apolloSelectedFeature &&
               cdsOrUTR._id === apolloSelectedFeature._id
                 ? 'rgb(0,0,0)'
                 : isCDS
-                ? 'rgb(171,71,188)'
+                ? cdsColorCode
                 : 'rgb(211,211,211)'
             ctx.fillRect(startPx + 1, cdsOrUTRTop + 1, widthPx - 2, height - 2)
             if (forwardFill && backwardFill && strand) {

diff --git a/packages/jbrowse-plugin-apollo/src/LinearApolloDisplay/stateModel/mouseEvents.ts b/packages/jbrowse-plugin-apollo/src/LinearApolloDisplay/stateModel/mouseEvents.ts
@@ -50,7 +50,7 @@ function getMousePosition(
   return { x, y, refName, bp, regionNumber }
 }
 
-function getSeqRow(feature: AnnotationFeatureI, bpPerPx: number) {
+export function getSeqRow(feature: AnnotationFeatureI, bpPerPx: number) {
   const rowOffset = bpPerPx <= 1 ? 5 : 3
   if (feature.type === 'CDS' && feature.phase !== undefined) {
     return feature.strand === -1
@@ -74,8 +74,7 @@ function highlightSeq(
   widthPx: number,
 ) {
   if (row !== undefined) {
-    seqTrackOverlayctx.fillStyle =
-      theme?.palette.action.focus ?? 'rgba(0,0,0,0.04)'
+    seqTrackOverlayctx.fillStyle = 'rgba(0,0,0,0.3)'
     seqTrackOverlayctx.fillRect(
       startPx,
       sequenceRowHeight * row,

diff --git a/packages/jbrowse-plugin-apollo/src/LinearApolloDisplay/stateModel/rendering.ts b/packages/jbrowse-plugin-apollo/src/LinearApolloDisplay/stateModel/rendering.ts
@@ -9,6 +9,15 @@ import { ApolloSessionModel } from '../../session'
 import { getGlyph } from './getGlyph'
 import { layoutsModelFactory } from './layouts'
 
+export const transRowsColorCodes: Record<number, string> = {
+  0: '#F1948A',
+  1: '#7DCEA0',
+  2: '#7FB3D5',
+  5: '#7FB3D5',
+  6: '#7DCEA0',
+  7: '#F1948A',
+}
+
 export function renderingModelIntermediateFactory(
   pluginManager: PluginManager,
   configSchema: AnyConfigurationSchemaType,
@@ -145,13 +154,17 @@ function colorCode(letter: string, theme?: Theme) {
   )
 }
 
-function codonColorCode(letter: string) {
+function codonColorCode(letter: string, rowColorCode: string, bpPerPx: number) {
   const colorMap: Record<string, string> = {
     M: '#33ee33',
     '*': '#f44336',
   }
 
-  return colorMap[letter?.toUpperCase()] || 'lightgray'
+  if (colorMap[letter?.toUpperCase()] !== undefined) {
+    return colorMap[letter?.toUpperCase()]
+  }
+
+  return bpPerPx <= 0.1 ? rowColorCode : 'lightgray'
 }
 
 function reverseCodonSeq(seq: string): string {
@@ -186,6 +199,7 @@ function drawTranslation(
   seq: string,
   i: number,
   reverse: boolean,
+  rowColorCode: string,
 ) {
   let codonSeq: string = seq.slice(i, i + 3).toUpperCase()
   if (reverse) {
@@ -197,7 +211,7 @@ function drawTranslation(
     return
   }
   seqTrackctx.beginPath()
-  seqTrackctx.fillStyle = codonColorCode(codonLetter)
+  seqTrackctx.fillStyle = codonColorCode(codonLetter, rowColorCode, bpPerPx)
   seqTrackctx.rect(trnslStartPx, trnslY, trnslWidthPx, sequenceRowHeight)
   seqTrackctx.fill()
   if (bpPerPx <= 0.1) {
@@ -277,6 +291,7 @@ export function sequenceRenderingModelFactory(
                       seq,
                       i,
                       false,
+                      transRowsColorCodes[Math.abs(j - 2)],
                     )
                   }
                 }
@@ -351,6 +366,7 @@ export function sequenceRenderingModelFactory(
                       seq,
                       i,
                       true,
+                      transRowsColorCodes[rowOffset + k],
                     )
                   }
                 }