@jbrowse/plugin-alignments 2.6.1 → 2.6.2

package/src/LinearReadArcsDisplay/util.ts

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

package/src/LinearReadCloudDisplay/components/ReactComponent.tsx

@@ -1,48 +0,0 @@
-import React, { useCallback } from 'react'
-import { observer } from 'mobx-react'
-import { getContainingView } from '@jbrowse/core/util'
-import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
-
-// local
-import { LinearReadCloudDisplayModel } from '../model'
-import BaseDisplayComponent from '../../shared/BaseDisplayComponent'
-
-type LGV = LinearGenomeViewModel
-
-const Cloud = observer(function ({
-  model,
-}: {
-  model: LinearReadCloudDisplayModel
-}) {
-  const view = getContainingView(model) as LGV
-  const width = Math.round(view.dynamicBlocks.totalWidthPx)
-  const height = model.height
-  const cb = useCallback(
-    (ref: HTMLCanvasElement) => model.setRef(ref),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [model, width, height],
-  )
-
-  // note: the position absolute below avoids scrollbar from appearing on track
-  return (
-    <canvas
-      data-testid="cloud-canvas"
-      ref={cb}
-      style={{ width, height, position: 'absolute' }}
-      width={width * 2}
-      height={height * 2}
-    />
-  )
-})
-
-export default observer(function ({
-  model,
-}: {
-  model: LinearReadCloudDisplayModel
-}) {
-  return (
-    <BaseDisplayComponent model={model}>
-      <Cloud model={model} />
-    </BaseDisplayComponent>
-  )
-})

package/src/LinearReadCloudDisplay/configSchema.ts

@@ -1,57 +0,0 @@
-import PluginManager from '@jbrowse/core/PluginManager'
-import { ConfigurationSchema } from '@jbrowse/core/configuration'
-import { linearBasicDisplayConfigSchemaFactory } from '@jbrowse/plugin-linear-genome-view'
-import { types } from 'mobx-state-tree'
-
-/**
- * #config LinearReadCloudDisplay
- */
-function configSchemaF(pluginManager: PluginManager) {
-  return ConfigurationSchema(
-    'LinearReadCloudDisplay',
-    {
-      /**
-       * #slot
-       */
-      maxFeatureScreenDensity: {
-        type: 'number',
-        description: 'maximum features per pixel that is displayed in the view',
-        defaultValue: 5,
-      },
-
-      /**
-       * #slot
-       */
-      featureHeight: {
-        type: 'number',
-        defaultValue: 7,
-      },
-
-      /**
-       * #slot
-       */
-      colorScheme: {
-        type: 'stringEnum',
-        model: types.enumeration('colorScheme', [
-          'strand',
-          'normal',
-          'insertSize',
-          'insertSizeAndOrientation',
-          'mappingQuality',
-          'tag',
-        ]),
-        description: 'color scheme to use',
-        defaultValue: 'normal',
-      },
-    },
-    {
-      /**
-       * #baseConfiguration
-       */
-      baseConfiguration: linearBasicDisplayConfigSchemaFactory(pluginManager),
-      explicitlyTyped: true,
-    },
-  )
-}
-
-export default configSchemaF

package/src/LinearReadCloudDisplay/drawFeats.ts

@@ -1,35 +0,0 @@
-import { getContainingView, getSession } from '@jbrowse/core/util'
-import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
-
-// locals
-import { LinearReadCloudDisplayModel } from './model'
-import { hasPairedReads } from '../shared/util'
-import { drawPairChains } from './drawPairChains'
-import { drawLongReadChains } from './drawLongReadChains'
-
-type LGV = LinearGenomeViewModel
-
-export function drawFeats(
-  self: LinearReadCloudDisplayModel,
-  ctx: CanvasRenderingContext2D,
-) {
-  const { chainData } = self
-  if (!chainData) {
-    return
-  }
-  const { assemblyManager } = getSession(self)
-  const view = getContainingView(self) as LGV
-  const assemblyName = view.assemblyNames[0]
-  const asm = assemblyManager.get(assemblyName)
-  if (!asm) {
-    return
-  }
-
-  const hasPaired = hasPairedReads(chainData)
-
-  if (hasPaired) {
-    drawPairChains({ self, view, asm, ctx, chainData })
-  } else {
-    drawLongReadChains({ self, view, asm, ctx, chainData })
-  }
-}

package/src/LinearReadCloudDisplay/drawLongReadChains.ts

@@ -1,85 +0,0 @@
-import { getConf } from '@jbrowse/core/configuration'
-import { max, min } from '@jbrowse/core/util'
-import { Assembly } from '@jbrowse/core/assemblyManager/assembly'
-import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
-
-// locals
-import { ChainData } from '../shared/fetchChains'
-import { LinearReadCloudDisplayModel } from './model'
-import { fillColor, strokeColor } from '../shared/color'
-import { fillRectCtx, strokeRectCtx } from './util'
-
-export function drawLongReadChains({
-  ctx,
-  self,
-  chainData,
-  view,
-  asm,
-}: {
-  ctx: CanvasRenderingContext2D
-  self: LinearReadCloudDisplayModel
-  chainData: ChainData
-  view: LinearGenomeViewModel
-  asm: Assembly
-}) {
-  const distances: number[] = []
-  const minXs: number[] = []
-  const { chains } = chainData
-  const { height } = self
-  const featureHeight = getConf(self, 'featureHeight')
-
-  // get bounds on the 'distances' (pixel span that a particular split long
-  // read 'chain' would have in view)
-  for (const chain of chains) {
-    let minX = Number.MAX_VALUE
-    let maxX = Number.MIN_VALUE
-    for (const elt of chain) {
-      const refName = asm.getCanonicalRefName(elt.refName) || elt.refName
-      const rs = view.bpToPx({ refName, coord: elt.start })?.offsetPx
-      const re = view.bpToPx({ refName, coord: elt.end })?.offsetPx
-      if (rs !== undefined && re !== undefined) {
-        minX = Math.min(minX, rs)
-        maxX = Math.max(maxX, re)
-      }
-    }
-    const distance = Math.abs(maxX - minX)
-    distances.push(distance)
-    minXs.push(minX)
-  }
-
-  const maxD = Math.log(max(distances))
-  const minD = Math.max(Math.log(min(distances)) - 1, 0)
-  const scaler = (height - 20) / (maxD - minD)
-  const halfHeight = featureHeight / 2 - 0.5
-
-  // draw split long read 'chains' as connected entities
-  for (let i = 0; i < chains.length; i++) {
-    const chain = chains[i]
-    const w = distances[i]
-    const top = (Math.log(w) - minD) * scaler
-    const min = minXs[i]
-    fillRectCtx(min - view.offsetPx, top + halfHeight, w, 1, ctx, 'black')
-    const c1 = chain[0]
-    let primaryStrand: undefined | number
-    if (!(c1.flags & 2048)) {
-      primaryStrand = c1.strand
-    } else {
-      const res = c1.SA?.split(';')[0].split(',')[2]
-      primaryStrand = res === '-' ? -1 : 1
-    }
-    for (const v0 of chain) {
-      const ra = asm.getCanonicalRefName(v0.refName) || v0.refName
-      const rs = view.bpToPx({ refName: ra, coord: v0.start })?.offsetPx
-      const re = view.bpToPx({ refName: ra, coord: v0.end })?.offsetPx
-      if (rs !== undefined && re !== undefined) {
-        const w = Math.max(re - rs, 2)
-        const l = rs - view.offsetPx
-        const effectiveStrand = v0.strand * primaryStrand
-        const c =
-          effectiveStrand === -1 ? 'color_rev_strand' : 'color_fwd_strand'
-        strokeRectCtx(l, top, w, featureHeight, ctx, strokeColor[c])
-        fillRectCtx(l, top, w, featureHeight, ctx, fillColor[c])
-      }
-    }
-  }
-}

package/src/LinearReadCloudDisplay/drawPairChains.ts

@@ -1,139 +0,0 @@
-import { getConf } from '@jbrowse/core/configuration'
-import { max, min } from '@jbrowse/core/util'
-import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
-import { Assembly } from '@jbrowse/core/assemblyManager/assembly'
-
-import { ChainData, ChainStats, ReducedFeature } from '../shared/fetchChains'
-import { LinearReadCloudDisplayModel } from './model'
-import { fillRectCtx, strokeRectCtx } from './util'
-import {
-  getPairedInsertSizeAndOrientationColor,
-  getPairedInsertSizeColor,
-  getPairedOrientationColor,
-} from '../shared/color'
-
-interface ChainCoord {
-  distance: number
-  r1s: number
-  r1e: number
-  r2s: number
-  r2e: number
-  v0: ReducedFeature
-  v1: ReducedFeature
-}
-
-export function drawPairChains({
-  ctx,
-  self,
-  chainData,
-  view,
-  asm,
-}: {
-  ctx: CanvasRenderingContext2D
-  self: LinearReadCloudDisplayModel
-  chainData: ChainData
-  view: LinearGenomeViewModel
-  asm: Assembly
-}) {
-  const coords: ChainCoord[] = []
-  const featureHeight = getConf(self, 'featureHeight')
-  const type = self.colorBy?.type || 'insertSizeAndOrientation'
-  const { chains, stats } = chainData
-
-  for (const chain of chains) {
-    // if we're looking at a paired read (flag 1) then assume it is just
-    // two reads (some small cases may defy this assumption such as
-    // secondary alignments but this may be uncommon)
-    if (chain.length > 1) {
-      const v0 = chain[0]
-      const v1 = chain[1]
-      const ra1 = asm.getCanonicalRefName(v0.refName) || v0.refName
-      const ra2 = asm.getCanonicalRefName(v1.refName) || v1.refName
-      const r1s = view.bpToPx({ refName: ra1, coord: v0.start })?.offsetPx
-      const r1e = view.bpToPx({ refName: ra1, coord: v0.end })?.offsetPx
-      const r2s = view.bpToPx({ refName: ra2, coord: v1.start })?.offsetPx
-      const r2e = view.bpToPx({ refName: ra2, coord: v1.end })?.offsetPx
-
-      let distance = 0
-
-      if (
-        r1s !== undefined &&
-        r1e !== undefined &&
-        r2s !== undefined &&
-        r2e !== undefined
-      ) {
-        if (v0.refName === v1.refName) {
-          const s = Math.min(v0.start, v1.start)
-          const e = Math.max(v0.end, v1.end)
-          distance = Math.abs(e - s)
-        }
-        coords.push({
-          r1s,
-          r1e,
-          r2s,
-          r2e,
-          v0,
-          v1,
-          distance,
-        })
-      }
-    } else if (self.drawSingletons) {
-      const v0 = chain[0]
-
-      const ra1 = asm.getCanonicalRefName(v0.refName) || v0.refName
-      const r1s = view.bpToPx({ refName: ra1, coord: v0.start })?.offsetPx
-      const r1e = view.bpToPx({ refName: ra1, coord: v0.end })?.offsetPx
-      if (r1s !== undefined && r1e !== undefined) {
-        const w1 = Math.max(r1e - r1s, 2)
-        fillRectCtx(r1s - view.offsetPx, 0, w1, featureHeight, ctx, '#f00')
-        strokeRectCtx(r1s - view.offsetPx, 0, w1, featureHeight, ctx, '#a00')
-      }
-    }
-  }
-
-  const maxD = Math.log(max(coords.map(c => c.distance)))
-  const minD = Math.max(Math.log(min(coords.map(c => c.distance))) - 1, 0)
-  const scaler = (self.height - 20) / (maxD - minD)
-  for (let i = 0; i < coords.length; i++) {
-    const { r1e, r1s, r2e, r2s, distance, v0, v1 } = coords[i]
-    const w1 = Math.max(r1e - r1s, 2)
-    const w2 = Math.max(r2e - r2s, 2)
-    const [fill, stroke] = getPairedColor({ type, v0, v1, stats }) || []
-    const top = (Math.log(distance) - minD) * scaler
-    const halfHeight = featureHeight / 2 - 0.5
-    const w = r2s - r1e
-    fillRectCtx(r1e - view.offsetPx, top + halfHeight, w, 1, ctx, 'black')
-    strokeRectCtx(r1s - view.offsetPx, top, w1, featureHeight, ctx, stroke)
-    strokeRectCtx(r2s - view.offsetPx, top, w2, featureHeight, ctx, stroke)
-    fillRectCtx(r1s - view.offsetPx, top, w1, featureHeight, ctx, fill)
-    fillRectCtx(r2s - view.offsetPx, top, w2, featureHeight, ctx, fill)
-  }
-}
-
-export function getPairedColor({
-  type,
-  v0,
-  v1,
-  stats,
-}: {
-  type: string
-  v0: ReducedFeature
-  v1: ReducedFeature
-  stats?: ChainStats
-}): readonly [string, string] | undefined {
-  if (type === 'insertSizeAndOrientation') {
-    return getPairedInsertSizeAndOrientationColor(v0, v1, stats)
-  } else if (type === 'orientation') {
-    return getPairedOrientationColor(v0)
-  } else if (type === 'insertSize') {
-    return getPairedInsertSizeColor(v0, v1, stats)
-  } else if (type === 'gradient') {
-    const s = Math.min(v0.start, v1.start)
-    const e = Math.max(v0.end, v1.end)
-    return [
-      `hsl(${Math.log10(Math.abs(e - s)) * 10},50%,50%)`,
-      `hsl(${Math.log10(Math.abs(e - s)) * 10},50%,30%)`,
-    ] as const
-  }
-  return undefined
-}

package/src/LinearReadCloudDisplay/index.ts

@@ -1,23 +0,0 @@
-import PluginManager from '@jbrowse/core/PluginManager'
-import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType'
-
-// locals
-import ReactComponent from './components/ReactComponent'
-import configSchemaF from './configSchema'
-import stateModelF from './model'
-
-export default function register(pluginManager: PluginManager) {
-  pluginManager.addDisplayType(() => {
-    const configSchema = configSchemaF(pluginManager)
-    return new DisplayType({
-      name: 'LinearReadCloudDisplay',
-      displayName: 'Read cloud display',
-      configSchema,
-      stateModel: stateModelF(configSchema),
-      trackType: 'AlignmentsTrack',
-      viewType: 'LinearGenomeView',
-      subDisplay: { type: 'LinearAlignmentsDisplay', lowerPanel: true },
-      ReactComponent,
-    })
-  })
-}

package/src/LinearReadCloudDisplay/model.tsx

@@ -1,246 +0,0 @@
-import React, { lazy } from 'react'
-import { cast, types, Instance } from 'mobx-state-tree'
-import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes'
-import {
-  AnyConfigurationSchemaType,
-  ConfigurationReference,
-} from '@jbrowse/core/configuration'
-import { getSession } from '@jbrowse/core/util'
-import {
-  FeatureDensityMixin,
-  TrackHeightMixin,
-} from '@jbrowse/plugin-linear-genome-view'
-
-// icons
-import PaletteIcon from '@mui/icons-material/Palette'
-import FilterListIcon from '@mui/icons-material/ClearAll'
-
-// locals
-import { FilterModel } from '../shared'
-import { ChainData } from '../shared/fetchChains'
-
-// async
-const FilterByTagDlg = lazy(() => import('../shared/FilterByTag'))
-
-interface Filter {
-  flagInclude: number
-  flagExclude: number
-  readName?: string
-  tagFilter?: { tag: string; value: string }
-}
-
-/**
- * #stateModel LinearReadCloudDisplay
- * extends `BaseDisplay`, it is not a block based track, hence not BaseLinearDisplay
- */
-function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
-  return types
-    .compose(
-      'LinearReadCloudDisplay',
-      BaseDisplay,
-      TrackHeightMixin(),
-      FeatureDensityMixin(),
-      types.model({
-        /**
-         * #property
-         */
-        type: types.literal('LinearReadCloudDisplay'),
-        /**
-         * #property
-         */
-        configuration: ConfigurationReference(configSchema),
-
-        /**
-         * #property
-         */
-        filterBy: types.optional(FilterModel, {}),
-
-        /**
-         * #property
-         */
-        colorBy: types.maybe(
-          types.model({
-            type: types.string,
-            tag: types.maybe(types.string),
-            extra: types.frozen(),
-          }),
-        ),
-
-        /**
-         * #property
-         */
-        drawSingletons: true,
-      }),
-    )
-    .volatile(() => ({
-      loading: false,
-      chainData: undefined as ChainData | undefined,
-      lastDrawnOffsetPx: undefined as number | undefined,
-      lastDrawnBpPerPx: 0,
-      ref: null as HTMLCanvasElement | null,
-    }))
-    .actions(self => ({
-      /**
-       * #action
-       */
-      setDrawSingletons(f: boolean) {
-        self.drawSingletons = f
-      },
-      /**
-       * #action
-       */
-      setLastDrawnOffsetPx(n: number) {
-        self.lastDrawnOffsetPx = n
-      },
-      /**
-       * #action
-       */
-      setLastDrawnBpPerPx(n: number) {
-        self.lastDrawnBpPerPx = n
-      },
-
-      /**
-       * #action
-       */
-      setLoading(f: boolean) {
-        self.loading = f
-      },
-      /**
-       * #action
-       */
-      reload() {
-        self.error = undefined
-      },
-      /**
-       * #action
-       * internal, a reference to a HTMLCanvas because we use a autorun to draw
-       * the canvas
-       */
-      setRef(ref: HTMLCanvasElement | null) {
-        self.ref = ref
-      },
-
-      setColorScheme(s: { type: string }) {
-        self.colorBy = cast(s)
-      },
-
-      /**
-       * #action
-       */
-      setChainData(args: ChainData) {
-        self.chainData = args
-      },
-
-      /**
-       * #action
-       */
-      setFilterBy(filter: Filter) {
-        self.filterBy = cast(filter)
-      },
-    }))
-    .views(self => ({
-      get drawn() {
-        return self.lastDrawnOffsetPx !== undefined
-      },
-    }))
-    .views(self => {
-      const {
-        trackMenuItems: superTrackMenuItems,
-        renderProps: superRenderProps,
-      } = self
-
-      return {
-        // we don't use a server side renderer, so this fills in minimal
-        // info so as not to crash
-        renderProps() {
-          return {
-            ...superRenderProps(),
-            notReady: !self.chainData,
-          }
-        },
-
-        /**
-         * #method
-         */
-        trackMenuItems() {
-          return [
-            ...superTrackMenuItems(),
-            {
-              label: 'Draw singletons',
-              type: 'checkbox',
-              checked: self.drawSingletons,
-              onClick: () => self.setDrawSingletons(!self.drawSingletons),
-            },
-            {
-              label: 'Filter by',
-              icon: FilterListIcon,
-              onClick: () => {
-                getSession(self).queueDialog(handleClose => [
-                  FilterByTagDlg,
-                  { model: self, handleClose },
-                ])
-              },
-            },
-
-            {
-              label: 'Color scheme',
-              icon: PaletteIcon,
-              subMenu: [
-                {
-                  label: 'Insert size ± 3σ and orientation',
-                  onClick: () =>
-                    self.setColorScheme({ type: 'insertSizeAndOrientation' }),
-                },
-                {
-                  label: 'Insert size ± 3σ',
-                  onClick: () => self.setColorScheme({ type: 'insertSize' }),
-                },
-                {
-                  label: 'Orientation',
-                  onClick: () => self.setColorScheme({ type: 'orientation' }),
-                },
-                {
-                  label: 'Insert size gradient',
-                  onClick: () => self.setColorScheme({ type: 'gradient' }),
-                },
-              ],
-            },
-          ]
-        },
-
-        /**
-         * #method
-         */
-        async renderSvg(opts: {
-          rasterizeLayers?: boolean
-        }): Promise<React.ReactNode> {
-          const { renderSvg } = await import('../shared/renderSvg')
-          const { drawFeats } = await import('./drawFeats')
-          return renderSvg(self as LinearReadCloudDisplayModel, opts, drawFeats)
-        },
-      }
-    })
-    .actions(self => ({
-      afterAttach() {
-        // eslint-disable-next-line @typescript-eslint/no-floating-promises
-        ;(async () => {
-          try {
-            const { doAfterAttach } = await import('../shared/afterAttach')
-            const { drawFeats } = await import('./drawFeats')
-            doAfterAttach(self, drawFeats)
-          } catch (e) {
-            console.error(e)
-            self.setError(e)
-          }
-        })()
-      },
-    }))
-}
-
-export type LinearReadCloudDisplayStateModel = ReturnType<
-  typeof stateModelFactory
->
-export type LinearReadCloudDisplayModel =
-  Instance<LinearReadCloudDisplayStateModel>
-
-export default stateModelFactory

package/src/LinearReadCloudDisplay/util.ts

@@ -1,47 +0,0 @@
-// avoid drawing negative width features for SVG exports
-export function fillRectCtx(
-  x: number,
-  y: number,
-  width: number,
-  height: number,
-  ctx: CanvasRenderingContext2D,
-  fillColor?: string,
-) {
-  if (width < 0) {
-    x += width
-    width = -width
-  }
-  if (height < 0) {
-    y += height
-    height = -height
-  }
-
-  if (fillColor) {
-    ctx.fillStyle = fillColor
-  }
-
-  ctx.fillRect(x, y, width, height)
-}
-
-export function strokeRectCtx(
-  x: number,
-  y: number,
-  width: number,
-  height: number,
-  ctx: CanvasRenderingContext2D,
-  strokeColor?: string,
-) {
-  if (width < 0) {
-    x += width
-    width = -width
-  }
-  if (height < 0) {
-    y += height
-    height = -height
-  }
-
-  if (strokeColor) {
-    ctx.strokeStyle = strokeColor
-  }
-  ctx.strokeRect(x, y, width, height)
-}