@jbrowse/plugin-alignments 2.6.1 → 2.6.3

package/src/LinearReadArcsDisplay/components/ReactComponent.tsx

@@ -1,50 +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 { LinearReadArcsDisplayModel } from '../model'
-import BaseDisplayComponent from '../../shared/BaseDisplayComponent'
-
-type LGV = LinearGenomeViewModel
-
-const Arcs = observer(function ({
-  model,
-}: {
-  model: LinearReadArcsDisplayModel
-}) {
-  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="arc-canvas"
-      ref={cb}
-      style={{ width, height, position: 'absolute' }}
-      width={width * 2}
-      height={height * 2}
-    />
-  )
-})
-
-export default observer(function ({
-  model,
-}: {
-  model: LinearReadArcsDisplayModel
-}) {
-  return (
-    <BaseDisplayComponent model={model}>
-      <Arcs model={model} />
-    </BaseDisplayComponent>
-  )
-})

package/src/LinearReadArcsDisplay/configSchema.ts

@@ -1,68 +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 LinearReadArcsDisplay
- */
-function configSchemaF(pluginManager: PluginManager) {
-  return ConfigurationSchema(
-    'LinearReadArcsDisplay',
-    {
-      /**
-       * #slot
-       */
-      maxFeatureScreenDensity: {
-        type: 'number',
-        description: 'maximum features per pixel that is displayed in the view',
-        defaultValue: 5,
-      },
-
-      /**
-       * #slot
-       */
-      lineWidth: {
-        type: 'number',
-        description: 'set arc line width',
-        defaultValue: 1,
-      },
-
-      /**
-       * #slot
-       */
-      jitter: {
-        type: 'number',
-        description:
-          'jitters the x position so e.g. if many reads map to exact same x position, jittering makes it easy to see that there are many of them',
-        defaultValue: 0,
-      },
-
-      /**
-       * #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/LinearReadArcsDisplay/declare.d.ts

@@ -1 +0,0 @@
-declare module 'canvas2svg'

package/src/LinearReadArcsDisplay/drawFeats.ts

@@ -1,210 +0,0 @@
-import { getContainingView, getSession } from '@jbrowse/core/util'
-import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
-import { Assembly } from '@jbrowse/core/assemblyManager/assembly'
-
-// locals
-import {
-  getPairedOrientationColor,
-  getPairedInsertSizeColor,
-  getPairedInsertSizeAndOrientationColor,
-} from '../shared/color'
-import { featurizeSA } from '../MismatchParser'
-import { LinearReadArcsDisplayModel } from './model'
-import { hasPairedReads } from '../shared/util'
-
-type LGV = LinearGenomeViewModel
-
-function jitter(n: number) {
-  return Math.random() * 2 * n - n
-}
-
-interface CoreFeat {
-  strand: number
-  refName: string
-  start: number
-  end: number
-}
-
-function drawLineAtOffset(
-  ctx: CanvasRenderingContext2D,
-  offset: number,
-  height: number,
-  color: string,
-) {
-  // draws a vertical line off to middle of nowhere if the second end not found
-  ctx.strokeStyle = color
-  ctx.beginPath()
-  ctx.moveTo(offset, 0)
-  ctx.lineTo(offset, height)
-  ctx.stroke()
-}
-
-export function drawFeats(
-  self: LinearReadArcsDisplayModel,
-  ctx: CanvasRenderingContext2D,
-  width: number,
-  height: number,
-) {
-  const {
-    chainData,
-    colorBy,
-    drawInter,
-    drawLongRange,
-    lineWidthSetting,
-    jitterVal,
-  } = self
-  if (!chainData) {
-    return
-  }
-  const view = getContainingView(self) as LGV
-  const { assemblyManager } = getSession(self)
-  const { chains, stats } = chainData
-  const hasPaired = hasPairedReads(chainData)
-  const asm = assemblyManager.get(view.assemblyNames[0])
-  const type = colorBy?.type || 'insertSizeAndOrientation'
-  if (!asm) {
-    return
-  }
-  ctx.lineWidth = lineWidthSetting
-
-  function draw(
-    k1: CoreFeat & { tlen?: number; pair_orientation?: string },
-    k2: CoreFeat,
-    assembly: Assembly,
-    longRange?: boolean,
-  ) {
-    const s1 = k1.strand
-    const s2 = k2.strand
-    const f1 = s1 === -1
-    const f2 = s2 === -1
-
-    const p1 = f1 ? k1.start : k1.end
-    const p2 = hasPaired ? (f2 ? k2.start : k2.end) : f2 ? k2.end : k2.start
-    const ra1 = assembly.getCanonicalRefName(k1.refName) || k1.refName
-    const ra2 = assembly.getCanonicalRefName(k2.refName) || k2.refName
-    const r1 = view.bpToPx({ refName: ra1, coord: p1 })?.offsetPx
-    const r2 = view.bpToPx({ refName: ra2, coord: p2 })?.offsetPx
-
-    if (r1 !== undefined && r2 !== undefined) {
-      const radius = (r2 - r1) / 2
-      const absrad = Math.abs(radius)
-      const p = r1 - view.offsetPx
-      const p2 = r2 - view.offsetPx
-      const drawArcInsteadOfBezier = absrad > 10_000
-
-      // bezier (used for non-long-range arcs) requires moveTo before beginPath
-      // arc (used for long-range) requires moveTo after beginPath (or else a
-      // unwanted line at y=0 is rendered along with the arc)
-      if (longRange && drawArcInsteadOfBezier) {
-        ctx.moveTo(p, 0)
-        ctx.beginPath()
-      } else {
-        ctx.beginPath()
-        ctx.moveTo(p, 0)
-      }
-
-      if (longRange && drawArcInsteadOfBezier) {
-        ctx.strokeStyle = 'red'
-      } else {
-        if (hasPaired) {
-          if (type === 'insertSizeAndOrientation') {
-            ctx.strokeStyle = getPairedInsertSizeAndOrientationColor(
-              k1,
-              k2,
-              stats,
-            )[0]
-          } else if (type === 'orientation') {
-            ctx.strokeStyle = getPairedOrientationColor(k1)[0]
-          } else if (type === 'insertSize') {
-            ctx.strokeStyle =
-              getPairedInsertSizeColor(k1, k2, stats)?.[0] || 'grey'
-          } else if (type === 'gradient') {
-            ctx.strokeStyle = `hsl(${Math.log10(absrad) * 10},50%,50%)`
-          }
-        } else {
-          if (type === 'orientation' || type === 'insertSizeAndOrientation') {
-            if (s1 === -1 && s2 === 1) {
-              ctx.strokeStyle = 'navy'
-            } else if (s1 === 1 && s2 === -1) {
-              ctx.strokeStyle = 'green'
-            } else {
-              ctx.strokeStyle = 'grey'
-            }
-          } else if (type === 'gradient') {
-            ctx.strokeStyle = `hsl(${Math.log10(absrad) * 10},50%,50%)`
-          }
-        }
-      }
-
-      const destX = p + radius * 2
-      const destY = Math.min(height + jitter(jitterVal), absrad)
-      if (longRange) {
-        // avoid drawing gigantic circles that glitch out the rendering,
-        // instead draw vertical lines
-        if (absrad > 100_000) {
-          drawLineAtOffset(ctx, p + jitter(jitterVal), height, 'red')
-          drawLineAtOffset(ctx, p2 + jitter(jitterVal), height, 'red')
-        } else if (drawArcInsteadOfBezier) {
-          ctx.arc(p + radius + jitter(jitterVal), 0, absrad, 0, Math.PI)
-          ctx.stroke()
-        } else {
-          ctx.bezierCurveTo(
-            p + jitter(jitterVal),
-            destY,
-            destX,
-            destY,
-            destX + jitter(jitterVal),
-            0,
-          )
-          ctx.stroke()
-        }
-      } else {
-        ctx.bezierCurveTo(
-          p + jitter(jitterVal),
-          destY,
-          destX,
-          destY,
-          destX + jitter(jitterVal),
-          0,
-        )
-        ctx.stroke()
-      }
-    } else if (r1 && drawInter) {
-      drawLineAtOffset(ctx, r1 - view.offsetPx, height, 'purple')
-    }
-  }
-
-  for (const chain of chains) {
-    // chain.length === 1, singleton (other pairs/mates not in view)
-    if (chain.length === 1 && drawLongRange) {
-      const f = chain[0]
-      if (hasPaired && !(f.flags & 8)) {
-        const mate = {
-          refName: f.next_ref || '',
-          start: f.next_pos || 0,
-          end: f.next_pos || 0,
-          strand: f.strand,
-        }
-        draw(f, mate, asm, true)
-      } else {
-        const features = [f, ...featurizeSA(f.SA, f.id, f.strand, f.name)].sort(
-          (a, b) => a.clipPos - b.clipPos,
-        )
-        for (let i = 0; i < features.length - 1; i++) {
-          const f = features[i]
-          const v1 = features[i + 1]
-          draw(f, v1, asm, true)
-        }
-      }
-    } else {
-      const res = hasPaired
-        ? chain.filter(f => !(f.flags & 2048) && !(f.flags & 8))
-        : chain
-            .sort((a, b) => a.clipPos - b.clipPos)
-            .filter(f => !(f.flags & 256))
-      for (let i = 0; i < res.length - 1; i++) {
-        draw(res[i], res[i + 1], asm, false)
-      }
-    }
-  }
-}

package/src/LinearReadArcsDisplay/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: 'LinearReadArcsDisplay',
-      displayName: 'Arc display',
-      configSchema,
-      stateModel: stateModelF(configSchema),
-      trackType: 'AlignmentsTrack',
-      viewType: 'LinearGenomeView',
-      subDisplay: { type: 'LinearAlignmentsDisplay', lowerPanel: true },
-      ReactComponent,
-    })
-  })
-}

package/src/LinearReadArcsDisplay/model.tsx

@@ -1,355 +0,0 @@
-import React, { lazy } from 'react'
-import { cast, types, Instance } from 'mobx-state-tree'
-import {
-  AnyConfigurationSchemaType,
-  ConfigurationReference,
-  getConf,
-} from '@jbrowse/core/configuration'
-import { getSession } from '@jbrowse/core/util'
-import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes'
-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 LinearReadArcsDisplay
- * extends `BaseDisplay`, it is not a block based track, hence not
- * BaseLinearDisplay
- */
-function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
-  return types
-    .compose(
-      'LinearReadArcsDisplay',
-      BaseDisplay,
-      TrackHeightMixin(),
-      FeatureDensityMixin(),
-      types.model({
-        /**
-         * #property
-         */
-        type: types.literal('LinearReadArcsDisplay'),
-        /**
-         * #property
-         */
-        configuration: ConfigurationReference(configSchema),
-
-        /**
-         * #property
-         */
-        filterBy: types.optional(FilterModel, {}),
-
-        /**
-         * #property
-         */
-        lineWidth: types.maybe(types.number),
-
-        /**
-         * #property
-         */
-        jitter: types.maybe(types.number),
-
-        /**
-         * #property
-         */
-        colorBy: types.maybe(
-          types.model({
-            type: types.string,
-            tag: types.maybe(types.string),
-            extra: types.frozen(),
-          }),
-        ),
-
-        /**
-         * #property
-         */
-        drawInter: true,
-
-        /**
-         * #property
-         */
-        drawLongRange: true,
-      }),
-    )
-    .volatile(() => ({
-      loading: false,
-      chainData: undefined as ChainData | undefined,
-      lastDrawnOffsetPx: undefined as number | undefined,
-      lastDrawnBpPerPx: 0,
-      ref: null as HTMLCanvasElement | null,
-    }))
-    .actions(self => ({
-      /**
-       * #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
-      },
-
-      /**
-       * #action
-       */
-      setColorScheme(s: { type: string }) {
-        self.colorBy = cast(s)
-      },
-
-      /**
-       * #action
-       */
-      setChainData(args: ChainData) {
-        self.chainData = args
-      },
-
-      /**
-       * #action
-       */
-      setDrawInter(f: boolean) {
-        self.drawInter = f
-      },
-
-      /**
-       * #action
-       */
-      setDrawLongRange(f: boolean) {
-        self.drawLongRange = f
-      },
-
-      /**
-       * #action
-       */
-      setFilterBy(filter: Filter) {
-        self.filterBy = cast(filter)
-      },
-
-      /**
-       * #action
-       * thin, bold, extrabold, etc
-       */
-      setLineWidth(n: number) {
-        self.lineWidth = n
-      },
-
-      /**
-       * #action
-       * jitter val, helpful to jitter the x direction so you see better
-       * evidence when e.g. 100 long reads map to same x position
-       */
-      setJitter(n: number) {
-        self.jitter = n
-      },
-    }))
-
-    .views(self => ({
-      /**
-       * #getter
-       */
-      get drawn() {
-        return self.lastDrawnOffsetPx !== undefined
-      },
-      /**
-       * #getter
-       */
-      get lineWidthSetting() {
-        return self.lineWidth ?? getConf(self, 'lineWidth')
-      },
-
-      /**
-       * #getter
-       */
-      get jitterVal(): number {
-        return self.jitter ?? getConf(self, 'jitter')
-      },
-    }))
-    .views(self => {
-      const {
-        trackMenuItems: superTrackMenuItems,
-        renderProps: superRenderProps,
-      } = self
-      return {
-        /**
-         * #method
-         * only used to tell system it's ready for export
-         */
-        renderProps() {
-          return {
-            ...superRenderProps(),
-            notReady: !self.chainData,
-          }
-        },
-
-        /**
-         * #method
-         */
-        trackMenuItems() {
-          return [
-            ...superTrackMenuItems(),
-            {
-              label: 'Filter by',
-              icon: FilterListIcon,
-              onClick: () => {
-                getSession(self).queueDialog(handleClose => [
-                  FilterByTagDlg,
-                  { model: self, handleClose },
-                ])
-              },
-            },
-            {
-              label: 'Line width',
-              subMenu: [
-                {
-                  label: 'Thin',
-                  onClick: () => self.setLineWidth(1),
-                },
-                {
-                  label: 'Bold',
-                  onClick: () => self.setLineWidth(2),
-                },
-                {
-                  label: 'Extra bold',
-                  onClick: () => self.setLineWidth(5),
-                },
-              ],
-            },
-            {
-              label: 'Jitter x-positions',
-              subMenu: [
-                {
-                  type: 'checkbox',
-                  checked: self.jitterVal === 0,
-                  label: 'None',
-                  onClick: () => self.setJitter(0),
-                },
-                {
-                  type: 'checkbox',
-                  checked: self.jitterVal === 2,
-                  label: 'Small',
-                  onClick: () => self.setJitter(2),
-                },
-                {
-                  type: 'checkbox',
-                  checked: self.jitterVal === 10,
-                  label: 'Large',
-                  onClick: () => self.setJitter(10),
-                },
-              ],
-            },
-            {
-              label: 'Draw inter-region vertical lines',
-              type: 'checkbox',
-              checked: self.drawInter,
-              onClick: () => self.setDrawInter(!self.drawInter),
-            },
-            {
-              label: 'Draw long range connections',
-              type: 'checkbox',
-              checked: self.drawLongRange,
-              onClick: () => self.setDrawLongRange(!self.drawLongRange),
-            },
-            {
-              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' }),
-                },
-              ],
-            },
-          ]
-        },
-      }
-    })
-    .views(self => ({
-      /**
-       * #method
-       */
-      async renderSvg(opts: {
-        rasterizeLayers?: boolean
-      }): Promise<React.ReactNode> {
-        const { renderSvg } = await import('../shared/renderSvg')
-        const { drawFeats } = await import('./drawFeats')
-        return renderSvg(self as LinearReadArcsDisplayModel, 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 LinearReadArcsDisplayStateModel = ReturnType<
-  typeof stateModelFactory
->
-export type LinearReadArcsDisplayModel =
-  Instance<LinearReadArcsDisplayStateModel>
-
-export default stateModelFactory