@jbrowse/plugin-alignments 2.6.1 → 2.6.3

package/src/PileupRenderer/index.ts

@@ -1,16 +0,0 @@
-import PluginManager from '@jbrowse/core/PluginManager'
-import PileupRenderer from './PileupRenderer'
-import configSchema from './configSchema'
-import ReactComponent from './components/PileupRendering'
-
-export default function register(pluginManager: PluginManager) {
-  pluginManager.addRendererType(() => {
-    return new PileupRenderer({
-      name: 'PileupRenderer',
-      displayName: 'Pileup renderer',
-      ReactComponent,
-      configSchema,
-      pluginManager,
-    })
-  })
-}

package/src/PileupRenderer/layoutFeature.ts

@@ -1,83 +0,0 @@
-import { bpSpanPx, Feature, Region } from '@jbrowse/core/util'
-import { BaseLayout } from '@jbrowse/core/util/layouts'
-// locals
-import { Mismatch } from '../MismatchParser'
-
-export interface LayoutRecord {
-  feature: Feature
-  leftPx: number
-  rightPx: number
-  topPx: number
-  heightPx: number
-}
-
-export function layoutFeature({
-  feature,
-  layout,
-  bpPerPx,
-  region,
-  showSoftClip,
-  heightPx,
-  displayMode,
-}: {
-  feature: Feature
-  layout: BaseLayout<Feature>
-  bpPerPx: number
-  region: Region
-  showSoftClip?: boolean
-  heightPx: number
-  displayMode: string
-}): LayoutRecord | null {
-  let expansionBefore = 0
-  let expansionAfter = 0
-
-  // Expand the start and end of feature when softclipping enabled
-  if (showSoftClip) {
-    const mismatches = feature.get('mismatches') as Mismatch[]
-    const seq = feature.get('seq') as string
-    if (seq) {
-      for (let i = 0; i < mismatches.length; i += 1) {
-        const { type, start, cliplen = 0 } = mismatches[i]
-        if (type === 'softclip') {
-          start === 0 ? (expansionBefore = cliplen) : (expansionAfter = cliplen)
-        }
-      }
-    }
-  }
-
-  const [leftPx, rightPx] = bpSpanPx(
-    feature.get('start') - expansionBefore,
-    feature.get('end') + expansionAfter,
-    region,
-    bpPerPx,
-  )
-
-  if (displayMode === 'compact') {
-    heightPx /= 3
-  }
-  if (feature.get('refName') !== region.refName) {
-    throw new Error(
-      `feature ${feature.id()} is not on the current region's reference sequence ${
-        region.refName
-      }`,
-    )
-  }
-  const topPx = layout.addRect(
-    feature.id(),
-    feature.get('start') - expansionBefore,
-    feature.get('end') + expansionAfter,
-    heightPx,
-    feature,
-  )
-  if (topPx === null) {
-    return null
-  }
-
-  return {
-    feature,
-    leftPx,
-    rightPx,
-    topPx: displayMode === 'collapse' ? 0 : topPx,
-    heightPx,
-  }
-}

package/src/PileupRenderer/layoutFeatures.ts

@@ -1,44 +0,0 @@
-import { readConfObject } from '@jbrowse/core/configuration'
-import { iterMap } from '@jbrowse/core/util'
-
-// locals
-import { layoutFeature } from './layoutFeature'
-import { RenderArgsDeserializedWithFeaturesAndLayout } from './PileupRenderer'
-import { sortFeature } from './sortUtil'
-
-// layout determines the height of the canvas that we use to render
-export function layoutFeats(
-  props: RenderArgsDeserializedWithFeaturesAndLayout,
-) {
-  const { layout, features, sortedBy, config, bpPerPx, showSoftClip, regions } =
-    props
-  const [region] = regions
-  if (!layout) {
-    throw new Error(`layout required`)
-  }
-  if (!layout.addRect) {
-    throw new Error('invalid layout object')
-  }
-
-  const featureMap =
-    sortedBy?.type && region.start === sortedBy.pos
-      ? sortFeature(features, sortedBy)
-      : features
-
-  const heightPx = readConfObject(config, 'height')
-  const displayMode = readConfObject(config, 'displayMode')
-  return iterMap(
-    featureMap.values(),
-    feature =>
-      layoutFeature({
-        feature,
-        layout,
-        bpPerPx,
-        region,
-        showSoftClip,
-        heightPx,
-        displayMode,
-      }),
-    featureMap.size,
-  )
-}

package/src/PileupRenderer/makeImageData.ts

@@ -1,93 +0,0 @@
-import { Feature } from '@jbrowse/core/util'
-import { RenderArgsDeserializedWithFeaturesAndLayout } from './PileupRenderer'
-import { readConfObject } from '@jbrowse/core/configuration'
-import { createJBrowseTheme } from '@jbrowse/core/ui'
-import {
-  getCharWidthHeight,
-  getColorBaseMap,
-  getContrastBaseMap,
-  shouldDrawIndels,
-  shouldDrawSNPsMuted,
-} from './util'
-import { renderAlignment } from './renderAlignment'
-import { renderMismatches } from './renderMismatches'
-import { renderSoftClipping } from './renderSoftClipping'
-
-export interface RenderArgsWithColor
-  extends RenderArgsDeserializedWithFeaturesAndLayout {
-  Color: Awaited<typeof import('color')>
-}
-
-interface LayoutFeature {
-  heightPx: number
-  topPx: number
-  feature: Feature
-}
-
-export function makeImageData({
-  ctx,
-  layoutRecords,
-  canvasWidth,
-  renderArgs,
-}: {
-  ctx: CanvasRenderingContext2D
-  canvasWidth: number
-  layoutRecords: LayoutFeature[]
-  renderArgs: RenderArgsWithColor
-}) {
-  const { config, showSoftClip, colorBy, theme: configTheme } = renderArgs
-  const mismatchAlpha = readConfObject(config, 'mismatchAlpha')
-  const minSubfeatureWidth = readConfObject(config, 'minSubfeatureWidth')
-  const largeInsertionIndicatorScale = readConfObject(
-    config,
-    'largeInsertionIndicatorScale',
-  )
-  const defaultColor = readConfObject(config, 'color') === '#f0f'
-  const theme = createJBrowseTheme(configTheme)
-  const colorForBase = getColorBaseMap(theme)
-  const contrastForBase = getContrastBaseMap(theme)
-  ctx.font = 'bold 10px Courier New,monospace'
-
-  const { charWidth, charHeight } = getCharWidthHeight()
-  const drawSNPsMuted = shouldDrawSNPsMuted(colorBy?.type)
-  const drawIndels = shouldDrawIndels()
-  for (const feat of layoutRecords) {
-    renderAlignment({
-      ctx,
-      feat,
-      renderArgs,
-      defaultColor,
-      colorForBase,
-      contrastForBase,
-      charWidth,
-      charHeight,
-      canvasWidth,
-    })
-    renderMismatches({
-      ctx,
-      feat,
-      renderArgs,
-      mismatchAlpha,
-      drawSNPsMuted,
-      drawIndels,
-      largeInsertionIndicatorScale,
-      minSubfeatureWidth,
-      charWidth,
-      charHeight,
-      colorForBase,
-      contrastForBase,
-      canvasWidth,
-    })
-    if (showSoftClip) {
-      renderSoftClipping({
-        ctx,
-        feat,
-        renderArgs,
-        colorForBase,
-        config,
-        theme,
-        canvasWidth,
-      })
-    }
-  }
-}

package/src/PileupRenderer/renderAlignment.ts

@@ -1,97 +0,0 @@
-import { LayoutFeature } from './util'
-
-import { getAlignmentShapeColor } from './getAlignmentShapeColor'
-import { renderAlignmentShape } from './renderAlignmentShape'
-import { renderPerBaseQuality } from './renderPerBaseQuality'
-import { renderPerBaseLettering } from './renderPerBaseLettering'
-import { renderModifications } from './renderModifications'
-import { renderMethylation } from './renderMethylation'
-import { RenderArgsWithColor } from './makeImageData'
-
-export function renderAlignment({
-  ctx,
-  feat,
-  renderArgs,
-  colorForBase,
-  contrastForBase,
-  charWidth,
-  charHeight,
-  defaultColor,
-  canvasWidth,
-}: {
-  ctx: CanvasRenderingContext2D
-  feat: LayoutFeature
-  renderArgs: RenderArgsWithColor
-  colorForBase: Record<string, string>
-  contrastForBase: Record<string, string>
-  charWidth: number
-  charHeight: number
-  defaultColor: boolean
-  canvasWidth: number
-}) {
-  const { config, bpPerPx, regions, colorBy, colorTagMap = {} } = renderArgs
-  const { tag = '', type: colorType = '' } = colorBy || {}
-  const { feature } = feat
-  const region = regions[0]
-
-  ctx.fillStyle = getAlignmentShapeColor({
-    feature,
-    config,
-    tag,
-    defaultColor,
-    colorType,
-    colorTagMap,
-  })
-
-  renderAlignmentShape({ ctx, feat, renderArgs })
-
-  // second pass for color types that render per-base things that go over the
-  // existing drawing
-  switch (colorType) {
-    case 'perBaseQuality':
-      renderPerBaseQuality({
-        ctx,
-        feat,
-        region,
-        bpPerPx,
-        canvasWidth,
-      })
-      break
-
-    case 'perBaseLettering':
-      renderPerBaseLettering({
-        ctx,
-        feat,
-        region,
-        bpPerPx,
-        colorForBase,
-        contrastForBase,
-        charWidth,
-        charHeight,
-        canvasWidth,
-      })
-      break
-
-    case 'modifications':
-      renderModifications({
-        ctx,
-        feat,
-        region,
-        bpPerPx,
-        renderArgs,
-        canvasWidth,
-      })
-      break
-
-    case 'methylation':
-      renderMethylation({
-        ctx,
-        feat,
-        region,
-        bpPerPx,
-        renderArgs,
-        canvasWidth,
-      })
-      break
-  }
-}

package/src/PileupRenderer/renderAlignmentShape.ts

@@ -1,45 +0,0 @@
-import { bpSpanPx } from '@jbrowse/core/util'
-import { RenderArgsDeserialized } from './PileupRenderer'
-import { LayoutFeature } from './util'
-
-export function renderAlignmentShape({
-  ctx,
-  feat,
-  renderArgs,
-}: {
-  ctx: CanvasRenderingContext2D
-  feat: LayoutFeature
-  renderArgs: RenderArgsDeserialized
-}) {
-  const { regions, bpPerPx } = renderArgs
-  const { heightPx, topPx, feature } = feat
-  const [region] = regions
-  const s = feature.get('start')
-  const e = feature.get('end')
-  const [leftPx, rightPx] = bpSpanPx(s, e, region, bpPerPx)
-  const flip = region.reversed ? -1 : 1
-  const strand = feature.get('strand') * flip
-  if (bpPerPx < 10) {
-    if (strand === -1) {
-      ctx.beginPath()
-      ctx.moveTo(leftPx - 5, topPx + heightPx / 2)
-      ctx.lineTo(leftPx, topPx + heightPx)
-      ctx.lineTo(rightPx, topPx + heightPx)
-      ctx.lineTo(rightPx, topPx)
-      ctx.lineTo(leftPx, topPx)
-      ctx.closePath()
-      ctx.fill()
-    } else {
-      ctx.beginPath()
-      ctx.moveTo(leftPx, topPx)
-      ctx.lineTo(leftPx, topPx + heightPx)
-      ctx.lineTo(rightPx, topPx + heightPx)
-      ctx.lineTo(rightPx + 5, topPx + heightPx / 2)
-      ctx.lineTo(rightPx, topPx)
-      ctx.closePath()
-      ctx.fill()
-    }
-  } else {
-    ctx.fillRect(leftPx, topPx, rightPx - leftPx, heightPx)
-  }
-}

package/src/PileupRenderer/renderMethylation.ts

@@ -1,75 +0,0 @@
-import { bpSpanPx, Region } from '@jbrowse/core/util'
-import { getMethBins } from '../MismatchParser'
-import { fillRect, LayoutFeature } from './util'
-import { RenderArgsWithColor } from './makeImageData'
-
-// Color by methylation is slightly modified version of color by
-// modifications that focuses on CpG sites, with non-methylated CpG colored
-export function renderMethylation({
-  ctx,
-  feat,
-  region,
-  bpPerPx,
-  renderArgs,
-  canvasWidth,
-}: {
-  ctx: CanvasRenderingContext2D
-  feat: LayoutFeature
-  region: Region
-  bpPerPx: number
-  renderArgs: RenderArgsWithColor
-  canvasWidth: number
-}) {
-  const { regionSequence, Color } = renderArgs
-  const { feature, topPx, heightPx } = feat
-  if (!regionSequence) {
-    throw new Error('region sequence required for methylation')
-  }
-
-  const seq = feature.get('seq') as string | undefined
-  if (!seq) {
-    return
-  }
-  const fstart = feature.get('start')
-  const fend = feature.get('end')
-  const { methBins, methProbs } = getMethBins(feature)
-
-  function getCol(k: number) {
-    if (methBins[k]) {
-      const p = methProbs[k] || 0
-      return p > 0.5
-        ? Color('red')
-            .alpha((p - 0.5) * 2)
-            .hsl()
-            .string()
-        : Color('blue')
-            .alpha(1 - p * 2)
-            .hsl()
-            .string()
-    }
-    return undefined
-  }
-  for (let i = 0; i < fend - fstart; i++) {
-    const j = i + fstart
-    const l1 = regionSequence[j - region.start + 1]?.toLowerCase()
-    const l2 = regionSequence[j - region.start + 2]?.toLowerCase()
-
-    if (l1 === 'c' && l2 === 'g') {
-      if (bpPerPx > 2) {
-        const [leftPx, rightPx] = bpSpanPx(j, j + 2, region, bpPerPx)
-        const w = rightPx - leftPx + 0.5
-        const c = getCol(i) || getCol(i + 1) || 'blue'
-        fillRect(ctx, leftPx, topPx, w, heightPx, canvasWidth, c)
-      } else {
-        const [leftPx, rightPx] = bpSpanPx(j, j + 1, region, bpPerPx)
-        const w = rightPx - leftPx + 0.5
-        const c = getCol(i) || 'blue'
-        fillRect(ctx, leftPx, topPx, w, heightPx, canvasWidth, c)
-        const [leftPx2, rightPx2] = bpSpanPx(j + 1, j + 2, region, bpPerPx)
-        const w2 = rightPx2 - leftPx2 + 0.5
-        const c2 = getCol(i + 1) || 'blue'
-        fillRect(ctx, leftPx2, topPx, w2, heightPx, canvasWidth, c2)
-      }
-    }
-  }
-}

package/src/PileupRenderer/renderMismatches.ts

@@ -1,206 +0,0 @@
-import { bpSpanPx, measureText } from '@jbrowse/core/util'
-import { Mismatch } from '../MismatchParser'
-import { fillRect, LayoutFeature } from './util'
-import { RenderArgsWithColor } from './makeImageData'
-
-export function renderMismatches({
-  ctx,
-  feat,
-  renderArgs,
-  minSubfeatureWidth,
-  largeInsertionIndicatorScale,
-  mismatchAlpha,
-  charWidth,
-  charHeight,
-  colorForBase,
-  contrastForBase,
-  canvasWidth,
-  drawSNPsMuted,
-  drawIndels = true,
-}: {
-  ctx: CanvasRenderingContext2D
-  feat: LayoutFeature
-  renderArgs: RenderArgsWithColor
-  colorForBase: { [key: string]: string }
-  contrastForBase: { [key: string]: string }
-  mismatchAlpha?: boolean
-  drawIndels?: boolean
-  drawSNPsMuted?: boolean
-  minSubfeatureWidth: number
-  largeInsertionIndicatorScale: number
-  charWidth: number
-  charHeight: number
-  canvasWidth: number
-}) {
-  const { Color, bpPerPx, regions } = renderArgs
-  const { heightPx, topPx, feature } = feat
-  const [region] = regions
-  const start = feature.get('start')
-
-  const pxPerBp = Math.min(1 / bpPerPx, 2)
-  const mismatches = feature.get('mismatches') as Mismatch[] | undefined
-  const heightLim = charHeight - 2
-
-  // extraHorizontallyFlippedOffset is used to draw interbase items, which
-  // are located to the left when forward and right when reversed
-  const extraHorizontallyFlippedOffset = region.reversed ? 1 / bpPerPx + 1 : -1
-
-  if (!mismatches) {
-    return
-  }
-
-  // two pass rendering: first pass, draw all the mismatches except wide
-  // insertion markers
-  for (let i = 0; i < mismatches.length; i += 1) {
-    const mismatch = mismatches[i]
-    const mstart = start + mismatch.start
-    const mlen = mismatch.length
-    const mbase = mismatch.base
-    const [leftPx, rightPx] = bpSpanPx(mstart, mstart + mlen, region, bpPerPx)
-    const widthPx = Math.max(minSubfeatureWidth, Math.abs(leftPx - rightPx))
-    if (mismatch.type === 'mismatch') {
-      if (!drawSNPsMuted) {
-        const baseColor = colorForBase[mismatch.base] || '#888'
-        const c = mismatchAlpha
-          ? mismatch.qual === undefined
-            ? baseColor
-            : Color(baseColor)
-                .alpha(Math.min(1, mismatch.qual / 50))
-                .hsl()
-                .string()
-          : baseColor
-
-        fillRect(
-          ctx,
-          Math.round(leftPx),
-          topPx,
-          widthPx,
-          heightPx,
-          canvasWidth,
-          c,
-        )
-      }
-
-      if (widthPx >= charWidth && heightPx >= heightLim) {
-        // normal SNP coloring
-        const contrastColor = drawSNPsMuted
-          ? 'black'
-          : contrastForBase[mismatch.base] || 'black'
-        ctx.fillStyle = mismatchAlpha
-          ? mismatch.qual === undefined
-            ? contrastColor
-            : Color(contrastColor)
-                .alpha(Math.min(1, mismatch.qual / 50))
-                .hsl()
-                .string()
-          : contrastColor
-        ctx.fillText(
-          mbase,
-          leftPx + (widthPx - charWidth) / 2 + 1,
-          topPx + heightPx,
-        )
-      }
-    } else if (mismatch.type === 'deletion' && drawIndels) {
-      fillRect(
-        ctx,
-        leftPx,
-        topPx,
-        Math.abs(leftPx - rightPx),
-        heightPx,
-        canvasWidth,
-        colorForBase.deletion,
-      )
-      const txt = `${mismatch.length}`
-      const rwidth = measureText(txt, 10)
-      if (widthPx >= rwidth && heightPx >= heightLim) {
-        ctx.fillStyle = contrastForBase.deletion
-        ctx.fillText(txt, (leftPx + rightPx) / 2 - rwidth / 2, topPx + heightPx)
-      }
-    } else if (mismatch.type === 'insertion' && drawIndels) {
-      ctx.fillStyle = 'purple'
-      const pos = leftPx + extraHorizontallyFlippedOffset
-      const len = +mismatch.base || mismatch.length
-      const insW = Math.max(0, Math.min(1.2, 1 / bpPerPx))
-      if (len < 10) {
-        fillRect(ctx, pos, topPx, insW, heightPx, canvasWidth, 'purple')
-        if (1 / bpPerPx >= charWidth && heightPx >= heightLim) {
-          const l = pos - insW
-          fillRect(ctx, l, topPx, insW * 3, 1, canvasWidth)
-          fillRect(ctx, l, topPx + heightPx - 1, insW * 3, 1, canvasWidth)
-          ctx.fillText(`(${mismatch.base})`, pos + 3, topPx + heightPx)
-        }
-      }
-    } else if (mismatch.type === 'hardclip' || mismatch.type === 'softclip') {
-      const pos = leftPx + extraHorizontallyFlippedOffset
-      const c = mismatch.type === 'hardclip' ? 'red' : 'blue'
-      const clipW = Math.max(minSubfeatureWidth, pxPerBp)
-      fillRect(ctx, pos, topPx, clipW, heightPx, canvasWidth, c)
-      if (1 / bpPerPx >= charWidth && heightPx >= heightLim) {
-        const l = pos - clipW
-        fillRect(ctx, l, topPx, clipW * 3, 1, canvasWidth)
-        fillRect(ctx, l, topPx + heightPx - 1, clipW * 3, 1, canvasWidth)
-        ctx.fillText(`(${mismatch.base})`, pos + 3, topPx + heightPx)
-      }
-    } else if (mismatch.type === 'skip') {
-      // fix to avoid bad rendering note that this was also related to chrome
-      // bug https://bugs.chromium.org/p/chromium/issues/detail?id=1131528
-      // also affected firefox ref #1236 #2750
-      if (leftPx + widthPx > 0) {
-        // make small exons more visible when zoomed far out
-        const adjustPx = widthPx - (bpPerPx > 10 ? 1.5 : 0)
-        ctx.clearRect(leftPx, topPx, adjustPx, heightPx)
-        fillRect(
-          ctx,
-          Math.max(0, leftPx),
-          topPx + heightPx / 2 - 1,
-          adjustPx + (leftPx < 0 ? leftPx : 0),
-          2,
-          canvasWidth,
-          '#333',
-        )
-      }
-    }
-  }
-
-  // second pass, draw wide insertion markers on top
-  if (drawIndels) {
-    for (let i = 0; i < mismatches.length; i += 1) {
-      const mismatch = mismatches[i]
-      const mstart = start + mismatch.start
-      const mlen = mismatch.length
-      const [leftPx] = bpSpanPx(mstart, mstart + mlen, region, bpPerPx)
-      const len = +mismatch.base || mismatch.length
-      const txt = `${len}`
-      if (mismatch.type === 'insertion' && len >= 10) {
-        if (bpPerPx > largeInsertionIndicatorScale) {
-          fillRect(ctx, leftPx - 1, topPx, 2, heightPx, canvasWidth, 'purple')
-        } else if (heightPx > charHeight) {
-          const rwidth = measureText(txt)
-          const padding = 5
-          fillRect(
-            ctx,
-            leftPx - rwidth / 2 - padding,
-            topPx,
-            rwidth + 2 * padding,
-            heightPx,
-            canvasWidth,
-            'purple',
-          )
-          ctx.fillStyle = 'white'
-          ctx.fillText(txt, leftPx - rwidth / 2, topPx + heightPx)
-        } else {
-          const padding = 2
-          fillRect(
-            ctx,
-            leftPx - padding,
-            topPx,
-            2 * padding,
-            heightPx,
-            canvasWidth,
-            'purple',
-          )
-        }
-      }
-    }
-  }
-}