@jbrowse/plugin-alignments 2.6.1 → 2.6.2

package/src/PileupRPC/util.ts

@@ -1,19 +0,0 @@
-import { ReducedFeature } from '../shared/fetchChains'
-
-export function getInsertSizeStats(features: ReducedFeature[]) {
-  const filtered = features.map(f => Math.abs(f.tlen))
-  const sum = filtered.reduce((a, b) => a + b, 0)
-  const sum2 = filtered.map(a => a * a).reduce((a, b) => a + b, 0)
-  const total = filtered.length
-  const avg = sum / total
-  const sd = Math.sqrt((total * sum2 - sum * sum) / (total * total))
-  const upper = avg + 4 * sd
-  const lower = avg - 3 * sd
-  return { upper, lower, avg, sd }
-}
-
-export function filterForPairs(features: ReducedFeature[]) {
-  return features.filter(
-    f => f.flags & 2 && !(f.flags & 256) && !(f.flags & 2048),
-  )
-}

package/src/PileupRenderer/PileupLayoutSession.ts

@@ -1,64 +0,0 @@
-import deepEqual from 'fast-deep-equal'
-import { LayoutSession } from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType'
-import { AnyConfigurationModel } from '@jbrowse/core/configuration'
-import SerializableFilterChain from '@jbrowse/core/pluggableElementTypes/renderers/util/serializableFilterChain'
-import GranularRectLayout from '@jbrowse/core/util/layouts/GranularRectLayout'
-import MultiLayout from '@jbrowse/core/util/layouts/MultiLayout'
-import { readConfObject } from '@jbrowse/core/configuration'
-
-export interface PileupLayoutSessionProps {
-  config: AnyConfigurationModel
-  bpPerPx: number
-  filters: SerializableFilterChain
-  filterBy: unknown
-  sortedBy: unknown
-  showSoftClip: unknown
-}
-
-type MyMultiLayout = MultiLayout<GranularRectLayout<unknown>, unknown>
-interface CachedPileupLayout {
-  layout: MyMultiLayout
-  config: AnyConfigurationModel
-  filters: SerializableFilterChain
-  filterBy: unknown
-  sortedBy: unknown
-  showSoftClip: boolean
-}
-// Sorting and revealing soft clip changes the layout of Pileup renderer
-// Adds extra conditions to see if cached layout is valid
-export class PileupLayoutSession extends LayoutSession {
-  sortedBy: unknown
-  filterBy: unknown
-
-  showSoftClip = false
-
-  constructor(args: PileupLayoutSessionProps) {
-    super(args)
-    this.config = args.config
-  }
-
-  cachedLayoutIsValid(cachedLayout: CachedPileupLayout) {
-    return (
-      super.cachedLayoutIsValid(cachedLayout) &&
-      this.showSoftClip === cachedLayout.showSoftClip &&
-      deepEqual(this.sortedBy, cachedLayout.sortedBy) &&
-      deepEqual(this.filterBy, cachedLayout.filterBy)
-    )
-  }
-
-  cachedLayout: CachedPileupLayout | undefined
-
-  get layout(): MyMultiLayout {
-    if (!this.cachedLayout || !this.cachedLayoutIsValid(this.cachedLayout)) {
-      this.cachedLayout = {
-        layout: this.makeLayout(),
-        config: readConfObject(this.config),
-        filters: this.filters,
-        filterBy: this.filterBy,
-        sortedBy: this.sortedBy,
-        showSoftClip: this.showSoftClip,
-      }
-    }
-    return this.cachedLayout.layout
-  }
-}

package/src/PileupRenderer/PileupRenderer.ts

@@ -1,142 +0,0 @@
-import BoxRendererType, {
-  RenderArgsDeserialized as BoxRenderArgsDeserialized,
-} from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType'
-import {
-  Feature,
-  Region,
-  notEmpty,
-  renderToAbstractCanvas,
-} from '@jbrowse/core/util'
-import { BaseLayout } from '@jbrowse/core/util/layouts/BaseLayout'
-import { getAdapter } from '@jbrowse/core/data_adapters/dataAdapterCache'
-import {
-  PileupLayoutSession,
-  PileupLayoutSessionProps,
-} from './PileupLayoutSession'
-import { BaseFeatureDataAdapter } from '@jbrowse/core/data_adapters/BaseAdapter'
-
-// locals
-import { fetchSequence, shouldFetchReferenceSequence } from '../util'
-import { layoutFeats } from './layoutFeatures'
-import { makeImageData } from './makeImageData'
-import { readConfObject } from '@jbrowse/core/configuration'
-
-export interface RenderArgsDeserialized extends BoxRenderArgsDeserialized {
-  colorBy?: { type: string; tag?: string }
-  colorTagMap?: Record<string, string>
-  modificationTagMap?: Record<string, string | undefined>
-  sortedBy?: {
-    type: string
-    pos: number
-    refName: string
-    assemblyName: string
-    tag?: string
-  }
-  showSoftClip: boolean
-  highResolutionScaling: number
-}
-
-export interface RenderArgsDeserializedWithFeaturesAndLayout
-  extends RenderArgsDeserialized {
-  features: Map<string, Feature>
-  layout: BaseLayout<Feature>
-  regionSequence?: string
-}
-
-export default class PileupRenderer extends BoxRendererType {
-  supportsSVG = true
-
-  async fetchSequence(renderProps: RenderArgsDeserialized) {
-    const { sessionId, regions, adapterConfig } = renderProps
-    const { sequenceAdapter } = adapterConfig
-    if (!sequenceAdapter) {
-      return undefined
-    }
-    const pm = this.pluginManager
-    const { dataAdapter } = await getAdapter(pm, sessionId, sequenceAdapter)
-    const [region] = regions
-    return fetchSequence(region, dataAdapter as BaseFeatureDataAdapter)
-  }
-
-  getExpandedRegion(region: Region, renderArgs: RenderArgsDeserialized) {
-    const { config, showSoftClip } = renderArgs
-    const { start, end } = region
-    const maxClippingSize = readConfObject(config, 'maxClippingSize')
-    const bpExpansion = showSoftClip ? Math.round(maxClippingSize) : 0
-
-    return {
-      // xref https://github.com/mobxjs/mobx-state-tree/issues/1524 for Omit
-      ...(region as Omit<typeof region, symbol>),
-      start: Math.floor(Math.max(start - bpExpansion, 0)),
-      end: Math.ceil(end + bpExpansion),
-    }
-  }
-
-  async render(renderProps: RenderArgsDeserialized) {
-    const features = await this.getFeatures(renderProps)
-    const layout = this.createLayoutInWorker(renderProps)
-    const { regions, bpPerPx } = renderProps
-    const [region] = regions
-
-    const layoutRecords = layoutFeats({
-      ...renderProps,
-      features,
-      layout,
-    })
-
-    // only need reference sequence if there are features and only for some
-    // cases
-    const regionSequence =
-      features.size && shouldFetchReferenceSequence(renderProps.colorBy?.type)
-        ? await this.fetchSequence(renderProps)
-        : undefined
-    const width = (region.end - region.start) / bpPerPx
-    const height = Math.max(layout.getTotalHeight(), 1)
-    const Color = await import('color').then(f => f.default)
-    const res = await renderToAbstractCanvas(width, height, renderProps, ctx =>
-      makeImageData({
-        ctx,
-        layoutRecords: layoutRecords.filter(notEmpty),
-        canvasWidth: width,
-        renderArgs: {
-          ...renderProps,
-          layout,
-          features,
-          regionSequence,
-          Color,
-        },
-      }),
-    )
-
-    const results = await super.render({
-      ...renderProps,
-      ...res,
-      features,
-      layout,
-      height,
-      width,
-    })
-
-    return {
-      ...results,
-      ...res,
-      features: new Map(),
-      layout,
-      height,
-      width,
-      maxHeightReached: layout.maxHeightReached,
-    }
-  }
-
-  createSession(args: PileupLayoutSessionProps) {
-    return new PileupLayoutSession(args)
-  }
-}
-
-export {
-  type RenderArgs,
-  type RenderResults,
-  type RenderArgsSerialized,
-  type ResultsSerialized,
-  type ResultsDeserialized,
-} from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType'

package/src/PileupRenderer/colorBy.ts

@@ -1,74 +0,0 @@
-import {
-  AnyConfigurationModel,
-  readConfObject,
-} from '@jbrowse/core/configuration'
-import { Feature } from '@jbrowse/core/util'
-import { fillColor } from '../shared/color'
-import { orientationTypes } from '../util'
-
-export function colorByInsertSize(feature: Feature) {
-  return feature.get('is_paired') &&
-    feature.get('refName') !== feature.get('next_ref')
-    ? '#555'
-    : `hsl(${Math.abs(feature.get('template_length')) / 10},50%,50%)`
-}
-
-export function colorByMappingQuality(feature: Feature) {
-  return `hsl(${feature.get('mq')},50%,50%)`
-}
-
-function getOrientation(feature: Feature, config: AnyConfigurationModel) {
-  const orientationType = readConfObject(config, 'orientationType') as
-    | 'fr'
-    | 'ff'
-    | 'rf'
-  const type = orientationTypes[orientationType]
-  const orientation = type[feature.get('pair_orientation') as string]
-  return {
-    LR: 'color_pair_lr' as const,
-    RR: 'color_pair_rr' as const,
-    RL: 'color_pair_rl' as const,
-    LL: 'color_pair_ll' as const,
-  }[orientation]
-}
-
-export function colorByStrand(feature: Feature) {
-  return feature.get('strand') === -1 ? '#8F8FD8' : '#EC8B8B'
-}
-
-export function colorByOrientation(
-  feature: Feature,
-  config: AnyConfigurationModel,
-) {
-  return fillColor[getOrientation(feature, config) || 'color_nostrand']
-}
-function getStranded(feature: Feature) {
-  const flags = feature.get('flags')
-  const strand = feature.get('strand')
-  // is paired
-  if (flags & 1) {
-    const revflag = flags & 64
-    const flipper = revflag ? -1 : 1
-
-    // proper pairing
-    if (flags & 2) {
-      return strand * flipper === 1 ? 'color_rev_strand' : 'color_fwd_strand'
-    } else if (feature.get('multi_segment_next_segment_unmapped')) {
-      return strand * flipper === 1
-        ? 'color_rev_missing_mate'
-        : 'color_fwd_missing_mate'
-    } else if (feature.get('refName') === feature.get('next_refName')) {
-      return strand * flipper === 1
-        ? 'color_rev_strand_not_proper'
-        : 'color_fwd_strand_not_proper'
-    } else {
-      // should only leave aberrant chr
-      return strand === 1 ? 'color_fwd_diff_chr' : 'color_rev_diff_chr'
-    }
-  }
-  return strand === 1 ? 'color_fwd_strand' : 'color_rev_strand'
-}
-
-export function colorByStrandedRnaSeq(feature: Feature) {
-  return fillColor[getStranded(feature)]
-}

package/src/PileupRenderer/components/PileupRendering.tsx

@@ -1,209 +0,0 @@
-import React, { useRef, useState, useEffect } from 'react'
-import { Region } from '@jbrowse/core/util/types'
-import { PrerenderedCanvas } from '@jbrowse/core/ui'
-import { bpSpanPx } from '@jbrowse/core/util'
-import { observer } from 'mobx-react'
-import type { BaseLinearDisplayModel } from '@jbrowse/plugin-linear-genome-view'
-
-// used so that user can click-away-from-feature below the laid out features
-// (issue #1248)
-const canvasPadding = 100
-function PileupRendering(props: {
-  blockKey: string
-  displayModel: BaseLinearDisplayModel
-  width: number
-  height: number
-  regions: Region[]
-  bpPerPx: number
-  sortedBy?: { type: string; pos: number; refName: string }
-  colorBy?: { type: string; tag?: string }
-  filterBy?: { tagFilter?: { tag: string } }
-  onMouseMove?: (event: React.MouseEvent, featureId?: string) => void
-}) {
-  const {
-    onMouseMove,
-    blockKey,
-    displayModel,
-    width,
-    height,
-    regions,
-    bpPerPx,
-    sortedBy,
-    colorBy,
-    filterBy,
-  } = props
-  const { selectedFeatureId, featureIdUnderMouse, contextMenuFeature } =
-    displayModel
-
-  const [region] = regions
-  const highlightOverlayCanvas = useRef<HTMLCanvasElement>(null)
-  const [mouseIsDown, setMouseIsDown] = useState(false)
-  const [movedDuringLastMouseDown, setMovedDuringLastMouseDown] =
-    useState(false)
-  useEffect(() => {
-    const canvas = highlightOverlayCanvas.current
-    if (!canvas) {
-      return
-    }
-    const ctx = canvas.getContext('2d')
-    if (!ctx) {
-      return
-    }
-    ctx.clearRect(0, 0, canvas.width, canvas.height)
-    const selectedRect = selectedFeatureId
-      ? displayModel.getFeatureByID?.(blockKey, selectedFeatureId)
-      : undefined
-    if (selectedRect) {
-      const [leftBp, topPx, rightBp, bottomPx] = selectedRect
-      const [leftPx, rightPx] = bpSpanPx(leftBp, rightBp, region, bpPerPx)
-      const rectTop = Math.round(topPx)
-      const rectHeight = Math.round(bottomPx - topPx)
-      ctx.shadowColor = '#222266'
-      ctx.shadowBlur = 10
-      ctx.lineJoin = 'bevel'
-      ctx.lineWidth = 2
-      ctx.strokeStyle = '#00b8ff'
-      ctx.strokeRect(
-        leftPx - 2,
-        rectTop - 2,
-        rightPx - leftPx + 4,
-        rectHeight + 4,
-      )
-      ctx.clearRect(leftPx, rectTop, rightPx - leftPx, rectHeight)
-    }
-    const highlightedFeature = featureIdUnderMouse || contextMenuFeature?.id()
-    const highlightedRect = highlightedFeature
-      ? displayModel.getFeatureByID?.(blockKey, highlightedFeature)
-      : undefined
-    if (highlightedRect) {
-      const [leftBp, topPx, rightBp, bottomPx] = highlightedRect
-      const [leftPx, rightPx] = bpSpanPx(leftBp, rightBp, region, bpPerPx)
-      const rectTop = Math.round(topPx)
-      const rectHeight = Math.round(bottomPx - topPx)
-      ctx.fillStyle = '#0003'
-      ctx.fillRect(leftPx, rectTop, rightPx - leftPx, rectHeight)
-    }
-  }, [
-    bpPerPx,
-    region,
-    blockKey,
-    selectedFeatureId,
-    displayModel,
-    featureIdUnderMouse,
-    contextMenuFeature,
-  ])
-
-  function onMouseDown(event: React.MouseEvent) {
-    setMouseIsDown(true)
-    setMovedDuringLastMouseDown(false)
-    callMouseHandler('MouseDown', event)
-  }
-
-  function onMouseEnter(event: React.MouseEvent) {
-    callMouseHandler('MouseEnter', event)
-  }
-
-  function onMouseOut(event: React.MouseEvent) {
-    callMouseHandler('MouseOut', event)
-    callMouseHandler('MouseLeave', event)
-  }
-
-  function onMouseOver(event: React.MouseEvent) {
-    callMouseHandler('MouseOver', event)
-  }
-
-  function onMouseUp(event: React.MouseEvent) {
-    setMouseIsDown(false)
-    callMouseHandler('MouseUp', event)
-  }
-
-  function onClick(event: React.MouseEvent) {
-    if (!movedDuringLastMouseDown) {
-      callMouseHandler('Click', event)
-    }
-  }
-
-  function onMouseLeave(event: React.MouseEvent) {
-    callMouseHandler('MouseOut', event)
-    callMouseHandler('MouseLeave', event)
-  }
-
-  function onContextMenu(event: React.MouseEvent) {
-    callMouseHandler('ContextMenu', event)
-  }
-
-  function mouseMove(event: React.MouseEvent) {
-    if (!highlightOverlayCanvas.current) {
-      return
-    }
-    if (mouseIsDown) {
-      setMovedDuringLastMouseDown(true)
-    }
-    const rect = highlightOverlayCanvas.current.getBoundingClientRect()
-    const offsetX = event.clientX - rect.left
-    const offsetY = event.clientY - rect.top
-    const px = region.reversed ? width - offsetX : offsetX
-    const clientBp = region.start + bpPerPx * px
-
-    onMouseMove?.(
-      event,
-      displayModel.getFeatureOverlapping(blockKey, clientBp, offsetY),
-    )
-  }
-
-  function callMouseHandler(handlerName: string, event: React.MouseEvent) {
-    // @ts-expect-error
-    // eslint-disable-next-line react/destructuring-assignment
-    const featureHandler = props[`onFeature${handlerName}`]
-    // @ts-expect-error
-    // eslint-disable-next-line react/destructuring-assignment
-    const canvasHandler = props[`on${handlerName}`]
-    if (featureHandler && featureIdUnderMouse) {
-      featureHandler(event, featureIdUnderMouse)
-    } else if (canvasHandler) {
-      canvasHandler(event, featureIdUnderMouse)
-    }
-  }
-
-  const canvasWidth = Math.ceil(width)
-  // need to call this in render so we get the right observer behavior
-  return (
-    <div
-      data-testid={`pileup-${[
-        sortedBy?.type,
-        colorBy?.type,
-        colorBy?.tag,
-        filterBy?.tagFilter?.tag,
-      ]
-        .filter(f => !!f)
-        .join('-')}`}
-      style={{ position: 'relative', width: canvasWidth, height }}
-    >
-      <PrerenderedCanvas
-        {...props}
-        style={{ position: 'absolute', left: 0, top: 0 }}
-      />
-      <canvas
-        data-testid="pileup_overlay_canvas"
-        width={canvasWidth}
-        height={height + canvasPadding}
-        style={{ position: 'absolute', left: 0, top: 0 }}
-        className="highlightOverlayCanvas"
-        ref={highlightOverlayCanvas}
-        onMouseDown={event => onMouseDown(event)}
-        onMouseEnter={event => onMouseEnter(event)}
-        onMouseOut={event => onMouseOut(event)}
-        onMouseOver={event => onMouseOver(event)}
-        onMouseUp={event => onMouseUp(event)}
-        onMouseLeave={event => onMouseLeave(event)}
-        onMouseMove={event => mouseMove(event)}
-        onClick={event => onClick(event)}
-        onContextMenu={event => onContextMenu(event)}
-        onFocus={() => {}}
-        onBlur={() => {}}
-      />
-    </div>
-  )
-}
-
-export default observer(PileupRendering)

package/src/PileupRenderer/configSchema.ts

@@ -1,108 +0,0 @@
-import { ConfigurationSchema } from '@jbrowse/core/configuration'
-import { types } from 'mobx-state-tree'
-
-/**
- * #config PileupRenderer
- */
-function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
-
-const PileupRenderer = ConfigurationSchema(
-  'PileupRenderer',
-  {
-    /**
-     * #slot
-     * default magenta here is used to detect the user has not customized this
-     */
-    color: {
-      type: 'color',
-      description: 'the color of each feature in a pileup alignment',
-      defaultValue: '#f0f',
-      contextVariable: ['feature'],
-    },
-
-    /**
-     * #slot
-     */
-    orientationType: {
-      type: 'stringEnum',
-      model: types.enumeration('orientationType', ['fr', 'rf', 'ff']),
-      defaultValue: 'fr',
-      description:
-        'read sequencer orientation. fr is normal "reads pointing at each other ---> <--- while some other sequencers can use other options',
-    },
-    /**
-     * #slot
-     */
-    displayMode: {
-      type: 'stringEnum',
-      model: types.enumeration('displayMode', [
-        'normal',
-        'compact',
-        'collapse',
-      ]),
-      description: 'Alternative display modes',
-      defaultValue: 'normal',
-    },
-    /**
-     * #slot
-     */
-    minSubfeatureWidth: {
-      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: 1,
-    },
-    /**
-     * #slot
-     */
-    maxHeight: {
-      type: 'integer',
-      description: 'the maximum height to be used in a pileup rendering',
-      defaultValue: 1200,
-    },
-    /**
-     * #slot
-     */
-    maxClippingSize: {
-      type: 'integer',
-      description: 'the max clip size to be used in a pileup rendering',
-      defaultValue: 10000,
-    },
-    /**
-     * #slot
-     */
-    height: {
-      type: 'number',
-      description: 'the height of each feature in a pileup alignment',
-      defaultValue: 7,
-      contextVariable: ['feature'],
-    },
-    /**
-     * #slot
-     */
-    noSpacing: {
-      type: 'boolean',
-      description: 'remove spacing between features',
-      defaultValue: false,
-    },
-    /**
-     * #slot
-     */
-    largeInsertionIndicatorScale: {
-      type: 'number',
-      description:
-        'scale at which to draw the large insertion indicators (bp/pixel)',
-      defaultValue: 10,
-    },
-    /**
-     * #slot
-     */
-    mismatchAlpha: {
-      type: 'boolean',
-      defaultValue: false,
-      description: 'Fade low quality mismatches',
-    },
-  },
-  { explicitlyTyped: true },
-)
-export default PileupRenderer

package/src/PileupRenderer/getAlignmentShapeColor.ts

@@ -1,87 +0,0 @@
-import {
-  AnyConfigurationModel,
-  readConfObject,
-} from '@jbrowse/core/configuration'
-import { Feature } from '@jbrowse/core/util'
-import { fillColor } from '../shared/color'
-import {
-  colorByInsertSize,
-  colorByMappingQuality,
-  colorByOrientation,
-  colorByStrand,
-  colorByStrandedRnaSeq,
-} from './colorBy'
-
-export function getAlignmentShapeColor({
-  colorType,
-  tag,
-  feature,
-  config,
-  defaultColor,
-  colorTagMap,
-}: {
-  colorType: string
-  tag: string
-  feature: Feature
-  defaultColor: boolean
-  config: AnyConfigurationModel
-  colorTagMap: Record<string, string>
-}) {
-  // first pass for simple color changes that change the color of the
-  // alignment
-  switch (colorType) {
-    case 'insertSize':
-      return colorByInsertSize(feature)
-    case 'strand':
-      return colorByStrand(feature)
-    case 'mappingQuality':
-      return colorByMappingQuality(feature)
-    case 'pairOrientation':
-      return colorByOrientation(feature, config)
-    case 'stranded':
-      return colorByStrandedRnaSeq(feature)
-    case 'xs':
-    case 'tag': {
-      const tags = feature.get('tags')
-      const val = tags ? tags[tag] : feature.get(tag)
-
-      if (tag === 'XS' || tag === 'TS') {
-        return fillColor[
-          {
-            '-': 'color_rev_strand' as const,
-            '+': 'color_fwd_strand' as const,
-          }[val as '-' | '+'] || 'color_nostrand'
-        ]
-      } else if (tag === 'ts') {
-        return fillColor[
-          {
-            '-':
-              feature.get('strand') === -1
-                ? ('color_fwd_strand' as const)
-                : ('color_rev_strand' as const),
-            '+':
-              feature.get('strand') === -1
-                ? ('color_rev_strand' as const)
-                : ('color_fwd_strand' as const),
-          }[val as '-' | '+'] || 'color_nostrand'
-        ]
-      } else {
-        return colorTagMap[val] || fillColor['color_nostrand']
-      }
-    }
-    case 'insertSizeAndPairOrientation':
-      break
-
-    case 'modifications':
-    case 'methylation':
-      // this coloring is similar to igv.js, and is helpful to color negative
-      // strand reads differently because their c-g will be flipped (e.g. g-c
-      // read right to left)
-      return feature.get('flags') & 16 ? '#c8dcc8' : '#c8c8c8'
-
-    default:
-      return defaultColor
-        ? 'lightgrey'
-        : readConfObject(config, 'color', { feature })
-  }
-}