@jbrowse/plugin-alignments 2.4.2 → 2.6.0

package/src/shared/color.ts

@@ -1,14 +1,53 @@
-import { orientationTypes } from '../util'
+import { orientationTypes, pairMap } from '../util'
 import { ChainStats } from './fetchChains'
 
-const alignmentColoring: { [key: string]: string } = {
+export const fillColor = {
+  color_fwd_strand_not_proper: '#ECC8C8',
+  color_rev_strand_not_proper: '#BEBED8',
+  color_fwd_strand: '#EC8B8B',
+  color_rev_strand: '#8F8FD8',
+  color_fwd_missing_mate: '#D11919',
+  color_rev_missing_mate: '#1919D1',
+  color_fwd_diff_chr: '#000',
+  color_rev_diff_chr: '#969696',
   color_pair_lr: '#c8c8c8',
   color_pair_rr: 'navy',
   color_pair_rl: 'teal',
   color_pair_ll: 'green',
+  color_nostrand: '#c8c8c8',
+  color_interchrom: 'purple',
+  color_longinsert: 'red',
+  color_shortinsert: 'pink',
+  color_unknown: 'grey',
 }
 
-export function getInsertSizeColor(
+// manually calculated by running
+// const color = require('color')
+// Object.fromEntries(Object.entries(fillColor).map(([key,val])=>{
+//   return [key, color(val).darken('0.3').hex()]
+// }))
+// this avoids (expensive) use of Color module at runtime
+export const strokeColor = {
+  color_fwd_strand_not_proper: '#CA6767',
+  color_rev_strand_not_proper: '#7272AA',
+  color_fwd_strand: '#DC2A2A',
+  color_rev_strand: '#4141BA',
+  color_fwd_missing_mate: '#921111',
+  color_rev_missing_mate: '#111192',
+  color_fwd_diff_chr: '#000000',
+  color_rev_diff_chr: '#696969',
+  color_pair_lr: '#8C8C8C',
+  color_pair_rr: '#00005A',
+  color_pair_rl: '#005A5A',
+  color_pair_ll: '#005A00',
+  color_nostrand: '#8C8C8C',
+  color_interchrom: '#5A005A',
+  color_longinsert: '#B30000',
+  color_shortinsert: '#FF3A5C',
+  color_unknown: 'grey',
+}
+
+export function getPairedInsertSizeColor(
   f1: { refName: string; tlen?: number },
   f2: { refName: string },
   stats?: ChainStats,
@@ -16,32 +55,32 @@ 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.color_longinsert, strokeColor.color_longinsert] as const
   } else if (sameRef && tlen < (stats?.lower || 0)) {
-    return '#f0f'
+    return [fillColor.color_shortinsert, strokeColor.color_shortinsert] as const
   } else if (!sameRef) {
-    return 'purple'
+    return [fillColor.color_interchrom, strokeColor.color_interchrom] as const
   }
-  return ''
+  return undefined
 }
 
-export function getInsertSizeAndOrientationColor(
+export function getPairedInsertSizeAndOrientationColor(
   f1: { refName: string; pair_orientation?: string; tlen?: number },
   f2: { refName: string },
   stats?: ChainStats,
 ) {
-  return getInsertSizeColor(f1, f2, stats) || getOrientationColor(f1)
+  return (
+    getPairedInsertSizeColor(f1, f2, stats) || getPairedOrientationColor(f1)
+  )
 }
 
-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'
+export function getPairedOrientationColor(f: { pair_orientation?: string }) {
+  const type = orientationTypes.fr
+  const type2 = pairMap[
+    type[f.pair_orientation || ''] as keyof typeof pairMap
+  ] as keyof typeof fillColor
+  return [
+    fillColor[type2] || fillColor.color_unknown,
+    strokeColor[type2] || strokeColor.color_unknown,
+  ] as const
 }

package/src/shared/fetchChains.ts

@@ -3,8 +3,10 @@ import {
   getContainingView,
   getSession,
 } from '@jbrowse/core/util'
-import { getSnapshot, IAnyStateTreeNode } from 'mobx-state-tree'
+import { getSnapshot } from 'mobx-state-tree'
 import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+import { LinearReadArcsDisplayModel } from '../LinearReadArcsDisplay/model'
+import { LinearReadCloudDisplayModel } from '../LinearReadCloudDisplay/model'
 
 type LGV = LinearGenomeViewModel
 
@@ -36,28 +38,25 @@ export interface ChainData {
   stats?: ChainStats
 }
 
-export async function fetchChains(self: IAnyStateTreeNode) {
-  try {
-    const { rpcSessionId: sessionId } = getContainingTrack(self)
-    const { rpcManager } = getSession(self)
-    const view = getContainingView(self) as LGV
-
-    if (!view.initialized || self.error) {
-      return
-    }
-    self.setLoading(true)
-
-    const ret = (await rpcManager.call(sessionId, 'PileupGetReducedFeatures', {
-      sessionId,
-      regions: view.staticBlocks.contentBlocks,
-      filterBy: getSnapshot(self.filterBy),
-      adapterConfig: self.adapterConfig,
-    })) as ChainData
-
-    self.setChainData(ret)
-    self.setLoading(false)
-  } catch (e) {
-    console.error(e)
-    self.setError(e)
+export async function fetchChains(
+  self: LinearReadArcsDisplayModel | LinearReadCloudDisplayModel,
+) {
+  const { rpcSessionId: sessionId } = getContainingTrack(self)
+  const { rpcManager } = getSession(self)
+  const view = getContainingView(self) as LGV
+
+  if (!view.initialized || self.error || self.regionTooLarge) {
+    return
   }
+
+  self.setLoading(true)
+  const ret = (await rpcManager.call(sessionId, 'PileupGetReducedFeatures', {
+    sessionId,
+    regions: view.staticBlocks.contentBlocks,
+    filterBy: getSnapshot(self.filterBy),
+    adapterConfig: self.adapterConfig,
+  })) as ChainData
+
+  self.setChainData(ret)
+  self.setLoading(false)
 }

package/src/shared/renderSvg.tsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import { getContainingView } from '@jbrowse/core/util'
+import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+
+// stabilize clipid under test for snapshot
+function getId(id: string) {
+  const isJest = typeof jest === 'undefined'
+  return `arc-clip-${isJest ? id : 'jest'}`
+}
+
+type LGV = LinearGenomeViewModel
+
+export async function renderSvg<T extends { id: string; height: number }>(
+  self: T,
+  opts: { rasterizeLayers?: boolean },
+  cb: (
+    model: T,
+    ctx: CanvasRenderingContext2D,
+    width: number,
+    height: number,
+  ) => void,
+) {
+  const view = getContainingView(self) as LGV
+  const width = view.dynamicBlocks.totalWidthPx
+  const height = self.height
+  if (opts.rasterizeLayers) {
+    const canvas = document.createElement('canvas')
+    canvas.width = width * 2
+    canvas.height = height * 2
+    const ctx = canvas.getContext('2d')
+    if (!ctx) {
+      return
+    }
+    ctx.scale(2, 2)
+    cb(self, ctx, width, height)
+    return (
+      <image
+        width={width}
+        height={height}
+        xlinkHref={canvas.toDataURL('image/png')}
+      />
+    )
+  } else {
+    // @ts-ignore
+    const C2S = await import('canvas2svg')
+    const ctx = new C2S.default(width, height)
+    cb(self, ctx, width, height)
+    const clipid = getId(self.id)
+    return (
+      <>
+        <defs>
+          <clipPath id={clipid}>
+            <rect x={0} y={0} width={width} height={height} />
+          </clipPath>
+        </defs>
+        <g
+          /* eslint-disable-next-line react/no-danger */
+          dangerouslySetInnerHTML={{ __html: ctx.getSvg().innerHTML }}
+          clipPath={`url(#${clipid})`}
+        />
+      </>
+    )
+  }
+}

package/src/shared/util.ts

@@ -0,0 +1,10 @@
+import { ChainData } from './fetchChains'
+
+export function hasPairedReads(features: ChainData) {
+  for (const f of features.chains.values()) {
+    if (f[0].flags & 1) {
+      return true
+    }
+  }
+  return false
+}

package/src/util.ts

@@ -1,19 +1,21 @@
 import { BaseFeatureDataAdapter } from '@jbrowse/core/data_adapters/BaseAdapter'
+import { Feature, AugmentedRegion } from '@jbrowse/core/util'
 import { toArray } from 'rxjs/operators'
-import { Feature } from '@jbrowse/core/util/simpleFeature'
-import { AugmentedRegion } from '@jbrowse/core/util'
 import { firstValueFrom } from 'rxjs'
+import { IAnyStateTreeNode, addDisposer, isAlive } from 'mobx-state-tree'
+import { IAutorunOptions, autorun } from 'mobx'
+
 // get tag from BAM or CRAM feature, where CRAM uses feature.get('tags') and
 // BAM does not
 export function getTag(feature: Feature, tag: string) {
   const tags = feature.get('tags')
-  return tags ? tags[tag] : feature.get(tag)
+  return tags !== undefined ? tags[tag] : feature.get(tag)
 }
 
 // use fallback alt tag, used in situations where upper case/lower case tags
 // exist e.g. Mm/MM for base modifications
 export function getTagAlt(feature: Feature, tag: string, alt: string) {
-  return getTag(feature, tag) || getTag(feature, alt)
+  return getTag(feature, tag) ?? getTag(feature, alt)
 }
 
 // orientation definitions from igv.js, see also
@@ -62,6 +64,13 @@ export const orientationTypes = {
   } as { [key: string]: string },
 }
 
+export const pairMap = {
+  LR: 'color_pair_lr',
+  LL: 'color_pair_ll',
+  RR: 'color_pair_rr',
+  RL: 'color_pair_rl',
+} as const
+
 export function getColorWGBS(strand: number, base: string) {
   if (strand === 1) {
     if (base === 'C') {
@@ -81,11 +90,13 @@ export function getColorWGBS(strand: number, base: string) {
   return '#888'
 }
 
+// fetches region sequence augmenting by +/- 1bp for CpG on either side of
+// requested region
 export async function fetchSequence(
   region: AugmentedRegion,
   adapter: BaseFeatureDataAdapter,
 ) {
-  const { end, originalRefName, refName } = region
+  const { start, end, originalRefName, refName } = region
 
   const feats = await firstValueFrom(
     adapter
@@ -93,6 +104,7 @@ export async function fetchSequence(
         ...region,
         refName: originalRefName || refName,
         end: end + 1,
+        start: Math.max(0, start - 1),
       })
       .pipe(toArray()),
   )
@@ -103,3 +115,40 @@ export async function fetchSequence(
 export function shouldFetchReferenceSequence(type?: string) {
   return type === 'methylation'
 }
+
+// adapted from IGV
+// https://github.com/igvteam/igv/blob/e803e3af2d8c9ea049961dfd4628146bdde9a574/src/main/java/org/broad/igv/sam/mods/BaseModificationColors.java#L27
+export const modificationColors = {
+  m: 'rgb(255,0,0)',
+  h: 'rgb(11, 132, 165)',
+  o: 'rgb(111, 78, 129)',
+  f: 'rgb(246, 200, 95)',
+  c: 'rgb(157, 216, 102)',
+  g: 'rgb(255, 160, 86)',
+  e: 'rgb(141, 221, 208)',
+  b: 'rgb(202, 71, 47)',
+} as Record<string, string | undefined>
+
+type DisplayModel = IAnyStateTreeNode & { setError: (arg: unknown) => void }
+
+export function createAutorun(
+  self: DisplayModel,
+  cb: () => Promise<void>,
+  opts?: IAutorunOptions,
+) {
+  addDisposer(
+    self,
+    autorun(async () => {
+      try {
+        await cb()
+      } catch (e) {
+        if (isAlive(self)) {
+          self.setError(e)
+        }
+      }
+    }, opts),
+  )
+}
+export function randomColor() {
+  return `hsl(${Math.random() * 200}, 50%, 50%)`
+}