@jbrowse/plugin-wiggle 2.5.0 → 2.6.2

package/src/drawxy.ts

@@ -1,388 +0,0 @@
-import {
-  AnyConfigurationModel,
-  readConfObject,
-} from '@jbrowse/core/configuration'
-import { clamp, featureSpanPx, Feature, Region } from '@jbrowse/core/util'
-
-// locals
-import { getOrigin, getScale, ScaleOpts } from './util'
-
-// avoid drawing negative width features for SVG exports
-function fillRectCtx(
-  x: number,
-  y: number,
-  width: number,
-  height: number,
-  ctx: CanvasRenderingContext2D,
-  color?: string,
-) {
-  if (width < 0) {
-    x += width
-    width = -width
-  }
-  if (height < 0) {
-    y += height
-    height = -height
-  }
-
-  if (color) {
-    ctx.fillStyle = color
-  }
-  ctx.fillRect(x, y, width, height)
-}
-
-const fudgeFactor = 0.4
-const clipHeight = 2
-
-export function drawXY(
-  ctx: CanvasRenderingContext2D,
-  props: {
-    features: Map<string, Feature> | Feature[]
-    bpPerPx: number
-    regions: Region[]
-    scaleOpts: ScaleOpts
-    height: number
-    ticks: { values: number[] }
-    config: AnyConfigurationModel
-    displayCrossHatches: boolean
-    offset?: number
-    colorCallback: (f: Feature, score: number) => string
-    Color: typeof import('color')
-  },
-) {
-  const {
-    features,
-    bpPerPx,
-    regions,
-    scaleOpts,
-    height: unadjustedHeight,
-    config,
-    ticks,
-    displayCrossHatches,
-    offset = 0,
-    colorCallback,
-    Color,
-  } = props
-  const [region] = regions
-  const width = (region.end - region.start) / bpPerPx
-
-  // the adjusted height takes into account YSCALEBAR_LABEL_OFFSET from the
-  // wiggle display, and makes the height of the actual drawn area add
-  // "padding" to the top and bottom of the display
-  const height = unadjustedHeight - offset * 2
-
-  const filled = readConfObject(config, 'filled')
-  const clipColor = readConfObject(config, 'clipColor')
-  const summaryScoreMode = readConfObject(config, 'summaryScoreMode')
-  const pivotValue = readConfObject(config, 'bicolorPivotValue')
-  const minSize = readConfObject(config, 'minSize')
-
-  const scale = getScale({ ...scaleOpts, range: [0, height] })
-  const originY = getOrigin(scaleOpts.scaleType)
-  const [niceMin, niceMax] = scale.domain()
-
-  const toY = (n: number) => clamp(height - (scale(n) || 0), 0, height) + offset
-  const toOrigin = (n: number) => toY(originY) - toY(n)
-  const getHeight = (n: number) => (filled ? toOrigin(n) : Math.max(minSize, 1))
-  let hasClipping = false
-
-  let prevLeftPx = -Infinity
-  const reducedFeatures = []
-  const crossingOrigin = niceMin < pivotValue && niceMax > pivotValue
-
-  // we handle whiskers separately to render max row, min row, and avg in three
-  // passes. this reduces subpixel rendering issues. note: for stylistic
-  // reasons, clipping indicator is only drawn for score, not min/max score
-  if (summaryScoreMode === 'whiskers') {
-    let lastCol
-    let lastMix
-    for (const feature of features.values()) {
-      const [leftPx, rightPx] = featureSpanPx(feature, region, bpPerPx)
-      if (feature.get('summary')) {
-        const w = Math.max(rightPx - leftPx + fudgeFactor, minSize)
-        const max = feature.get('maxScore')
-        const c = colorCallback(feature, max)
-        const effectiveC = crossingOrigin
-          ? c
-          : c === lastCol
-          ? lastMix
-          : (lastMix = Color(c).lighten(0.4).toString())
-        fillRectCtx(leftPx, toY(max), w, getHeight(max), ctx, effectiveC)
-        lastCol = c
-      }
-    }
-    lastMix = undefined
-    lastCol = undefined
-    for (const feature of features.values()) {
-      const [leftPx, rightPx] = featureSpanPx(feature, region, bpPerPx)
-      const score = feature.get('score')
-      const max = feature.get('maxScore')
-      const min = feature.get('minScore')
-      const summary = feature.get('summary')
-      const c = colorCallback(feature, score)
-      const effectiveC =
-        crossingOrigin && summary
-          ? c === lastCol
-            ? lastMix
-            : (lastMix = Color(colorCallback(feature, max))
-                .mix(Color(colorCallback(feature, min)))
-                .toString())
-          : c
-      const w = Math.max(rightPx - leftPx + fudgeFactor, minSize)
-      // create reduced features, avoiding multiple features per px
-      if (Math.floor(leftPx) !== Math.floor(prevLeftPx)) {
-        reducedFeatures.push(feature)
-        prevLeftPx = leftPx
-      }
-      hasClipping = hasClipping || score < niceMin || score > niceMax
-      fillRectCtx(leftPx, toY(score), w, getHeight(score), ctx, effectiveC)
-      lastCol = c
-    }
-    lastMix = undefined
-    lastCol = undefined
-    for (const feature of features.values()) {
-      const [leftPx, rightPx] = featureSpanPx(feature, region, bpPerPx)
-
-      if (feature.get('summary')) {
-        const min = feature.get('minScore')
-        const c = colorCallback(feature, min)
-        const w = Math.max(rightPx - leftPx + fudgeFactor, minSize)
-        const effectiveC = crossingOrigin
-          ? c
-          : c === lastCol
-          ? lastMix
-          : (lastMix = Color(c).darken(0.4).toString())
-
-        fillRectCtx(leftPx, toY(min), w, getHeight(min), ctx, effectiveC)
-        lastCol = c
-      }
-    }
-  } else {
-    for (const feature of features.values()) {
-      const [leftPx, rightPx] = featureSpanPx(feature, region, bpPerPx)
-
-      // create reduced features, avoiding multiple features per px
-      if (Math.floor(leftPx) !== Math.floor(prevLeftPx)) {
-        reducedFeatures.push(feature)
-        prevLeftPx = leftPx
-      }
-
-      const score = feature.get('score')
-      const c = colorCallback(feature, score)
-
-      hasClipping = hasClipping || score < niceMin || score > niceMax
-      const w = Math.max(rightPx - leftPx + fudgeFactor, minSize)
-
-      if (summaryScoreMode === 'max') {
-        const s = feature.get('summary') ? feature.get('maxScore') : score
-        fillRectCtx(leftPx, toY(s), w, getHeight(s), ctx, c)
-      } else if (summaryScoreMode === 'min') {
-        const s = feature.get('summary') ? feature.get('minScore') : score
-        fillRectCtx(leftPx, toY(s), w, getHeight(s), ctx, c)
-      } else {
-        fillRectCtx(leftPx, toY(score), w, getHeight(score), ctx, c)
-      }
-    }
-  }
-
-  // second pass: draw clipping
-  // avoid persisting the red fillstyle with save/restore
-  ctx.save()
-  if (hasClipping) {
-    ctx.fillStyle = clipColor
-    for (const feature of features.values()) {
-      const [leftPx, rightPx] = featureSpanPx(feature, region, bpPerPx)
-      const w = rightPx - leftPx + fudgeFactor
-      const score = feature.get('score')
-      if (score > niceMax) {
-        fillRectCtx(leftPx, offset, w, clipHeight, ctx)
-      } else if (score < niceMin && scaleOpts.scaleType !== 'log') {
-        fillRectCtx(leftPx, unadjustedHeight, w, clipHeight, ctx)
-      }
-    }
-  }
-  ctx.restore()
-
-  if (displayCrossHatches) {
-    ctx.lineWidth = 1
-    ctx.strokeStyle = 'rgba(200,200,200,0.5)'
-    ticks.values.forEach(tick => {
-      ctx.beginPath()
-      ctx.moveTo(0, Math.round(toY(tick)))
-      ctx.lineTo(width, Math.round(toY(tick)))
-      ctx.stroke()
-    })
-  }
-
-  return { reducedFeatures }
-}
-
-export function drawLine(
-  ctx: CanvasRenderingContext2D,
-  props: {
-    features: Map<string, Feature> | Feature[]
-    regions: Region[]
-    bpPerPx: number
-    scaleOpts: ScaleOpts
-    height: number
-    ticks: { values: number[] }
-    displayCrossHatches: boolean
-    colorCallback: (f: Feature, score: number) => string
-    config: AnyConfigurationModel
-    offset?: number
-  },
-) {
-  const {
-    features,
-    regions,
-    bpPerPx,
-    scaleOpts,
-    height: unadjustedHeight,
-    ticks: { values },
-    displayCrossHatches,
-    colorCallback,
-    config,
-    offset = 0,
-  } = props
-  const [region] = regions
-  const width = (region.end - region.start) / bpPerPx
-
-  // the adjusted height takes into account YSCALEBAR_LABEL_OFFSET from the
-  // wiggle display, and makes the height of the actual drawn area add
-  // "padding" to the top and bottom of the display
-  const height = unadjustedHeight - offset * 2
-  const clipColor = readConfObject(config, 'clipColor')
-  const scale = getScale({ ...scaleOpts, range: [0, height] })
-  const [niceMin, niceMax] = scale.domain()
-  const toY = (n: number) => clamp(height - (scale(n) || 0), 0, height) + offset
-
-  let lastVal
-
-  let prevLeftPx = -Infinity
-  const reducedFeatures = []
-  for (const feature of features.values()) {
-    const [leftPx, rightPx] = featureSpanPx(feature, region, bpPerPx)
-
-    // create reduced features, avoiding multiple features per px
-    if (Math.floor(leftPx) !== Math.floor(prevLeftPx)) {
-      reducedFeatures.push(feature)
-      prevLeftPx = leftPx
-    }
-    const score = feature.get('score')
-    const lowClipping = score < niceMin
-    const highClipping = score > niceMax
-    const w = rightPx - leftPx + fudgeFactor
-
-    const c = colorCallback(feature, score)
-
-    ctx.beginPath()
-    ctx.strokeStyle = c
-    const startPos = lastVal !== undefined ? lastVal : score
-    if (!region.reversed) {
-      ctx.moveTo(leftPx, toY(startPos))
-      ctx.lineTo(leftPx, toY(score))
-      ctx.lineTo(rightPx, toY(score))
-    } else {
-      ctx.moveTo(rightPx, toY(startPos))
-      ctx.lineTo(rightPx, toY(score))
-      ctx.lineTo(leftPx, toY(score))
-    }
-    ctx.stroke()
-    lastVal = score
-
-    if (highClipping) {
-      ctx.fillStyle = clipColor
-      ctx.fillRect(leftPx, offset, w, clipHeight)
-    } else if (lowClipping && scaleOpts.scaleType !== 'log') {
-      ctx.fillStyle = clipColor
-      ctx.fillRect(leftPx, height - clipHeight, w, height)
-    }
-  }
-
-  if (displayCrossHatches) {
-    ctx.lineWidth = 1
-    ctx.strokeStyle = 'rgba(200,200,200,0.5)'
-    values.forEach(tick => {
-      ctx.beginPath()
-      ctx.moveTo(0, Math.round(toY(tick)))
-      ctx.lineTo(width, Math.round(toY(tick)))
-      ctx.stroke()
-    })
-  }
-  return { reducedFeatures }
-}
-
-export function drawDensity(
-  ctx: CanvasRenderingContext2D,
-  props: {
-    features: Map<string, Feature> | Feature[]
-    regions: Region[]
-    bpPerPx: number
-    scaleOpts: ScaleOpts
-    height: number
-    ticks: { values: number[] }
-    displayCrossHatches: boolean
-    config: AnyConfigurationModel
-  },
-) {
-  const { features, regions, bpPerPx, scaleOpts, height, config } = props
-  const [region] = regions
-  const pivot = readConfObject(config, 'bicolorPivot')
-  const pivotValue = readConfObject(config, 'bicolorPivotValue')
-  const negColor = readConfObject(config, 'negColor')
-  const posColor = readConfObject(config, 'posColor')
-  const color = readConfObject(config, 'color')
-  const clipColor = readConfObject(config, 'clipColor')
-  const crossing = pivot !== 'none' && scaleOpts.scaleType !== 'log'
-  const scale = getScale({
-    ...scaleOpts,
-    pivotValue: crossing ? pivotValue : undefined,
-    range: crossing ? [negColor, 'white', posColor] : ['white', posColor],
-  })
-
-  const scale2 = getScale({ ...scaleOpts, range: [0, height] })
-  const cb =
-    color === '#f0f'
-      ? (_: Feature, score: number) => scale(score)
-      : (feature: Feature, score: number) =>
-          readConfObject(config, 'color', { feature, score })
-  const [niceMin, niceMax] = scale2.domain()
-
-  let prevLeftPx = -Infinity
-  let hasClipping = false
-  const reducedFeatures = []
-  for (const feature of features.values()) {
-    const [leftPx, rightPx] = featureSpanPx(feature, region, bpPerPx)
-
-    // create reduced features, avoiding multiple features per px
-    if (Math.floor(leftPx) !== Math.floor(prevLeftPx)) {
-      reducedFeatures.push(feature)
-      prevLeftPx = leftPx
-    }
-    const score = feature.get('score')
-    hasClipping = hasClipping || score > niceMax || score < niceMin
-    const w = rightPx - leftPx + fudgeFactor
-    ctx.fillStyle = cb(feature, score)
-    ctx.fillRect(leftPx, 0, w, height)
-  }
-
-  // second pass: draw clipping
-  // avoid persisting the red fillstyle with save/restore
-  ctx.save()
-  if (hasClipping) {
-    ctx.fillStyle = clipColor
-    for (const feature of features.values()) {
-      const [leftPx, rightPx] = featureSpanPx(feature, region, bpPerPx)
-      const w = rightPx - leftPx + fudgeFactor
-      const score = feature.get('score')
-      if (score > niceMax) {
-        fillRectCtx(leftPx, 0, w, clipHeight, ctx)
-      } else if (score < niceMin && scaleOpts.scaleType !== 'log') {
-        fillRectCtx(leftPx, 0, w, clipHeight, ctx)
-      }
-    }
-  }
-  ctx.restore()
-
-  return { reducedFeatures }
-}

package/src/index.test.ts

@@ -1,16 +0,0 @@
-import PluginManager from '@jbrowse/core/PluginManager'
-import { getSnapshot } from 'mobx-state-tree'
-import ThisPlugin from '.'
-
-test('plugin in a stock JBrowse', () => {
-  const pluginManager = new PluginManager([new ThisPlugin()])
-  pluginManager.createPluggableElements()
-  pluginManager.configure()
-  expect(() => pluginManager.addPlugin(new ThisPlugin())).toThrow(
-    /JBrowse already configured, cannot add plugins/,
-  )
-
-  const BigWigAdapter = pluginManager.getAdapterType('BigWigAdapter')
-  const config = BigWigAdapter.configSchema.create({ type: 'BigWigAdapter' })
-  expect(getSnapshot(config)).toMatchSnapshot()
-})

package/src/index.ts

@@ -1,130 +0,0 @@
-import Plugin from '@jbrowse/core/Plugin'
-import PluginManager from '@jbrowse/core/PluginManager'
-import { FileLocation } from '@jbrowse/core/util/types'
-import {
-  AdapterGuesser,
-  TrackTypeGuesser,
-  getFileName,
-} from '@jbrowse/core/util/tracks'
-
-// locals
-import WiggleBaseRenderer from './WiggleBaseRenderer'
-
-import BigWigAdapterF from './BigWigAdapter'
-import QuantitativeTrackF from './QuantitativeTrack'
-import MultiQuantitativeTrackF from './MultiQuantitativeTrack'
-import MultiWiggleAdapterF from './MultiWiggleAdapter'
-import DensityRendererF from './DensityRenderer'
-import XYPlotRendererF from './XYPlotRenderer'
-import LinePlotRendererF from './LinePlotRenderer'
-import LinearWiggleDisplayF from './LinearWiggleDisplay'
-import MultiLinearWiggleDisplayF from './MultiLinearWiggleDisplay'
-import MultiXYPlotRendererF from './MultiXYPlotRenderer'
-import MultiRowXYPlotRendererF from './MultiRowXYPlotRenderer'
-import MultiDensityRendererF from './MultiDensityRenderer'
-import MultiLineRendererF from './MultiLineRenderer'
-import MultiRowLineRendererF from './MultiRowLineRenderer'
-import CreateMultiWiggleExtensionF from './CreateMultiWiggleExtension'
-import MultiWiggleAddTrackWidgetF from './MultiWiggleAddTrackWidget'
-
-import * as utils from './util'
-
-import {
-  WiggleGetGlobalQuantitativeStats,
-  WiggleGetMultiRegionQuantitativeStats,
-  MultiWiggleGetSources,
-} from './WiggleRPC/rpcMethods'
-
-import {
-  ReactComponent as LinearWiggleDisplayReactComponent,
-  modelFactory as linearWiggleDisplayModelFactory,
-} from './LinearWiggleDisplay'
-
-import {
-  ReactComponent as XYPlotRendererReactComponent,
-  configSchema as xyPlotRendererConfigSchema,
-  XYPlotRenderer,
-} from './XYPlotRenderer'
-
-export default class WigglePlugin extends Plugin {
-  name = 'WigglePlugin'
-
-  install(pm: PluginManager) {
-    MultiWiggleAdapterF(pm)
-    BigWigAdapterF(pm)
-    QuantitativeTrackF(pm)
-    MultiQuantitativeTrackF(pm)
-    LinearWiggleDisplayF(pm)
-    MultiLinearWiggleDisplayF(pm)
-    LinePlotRendererF(pm)
-    XYPlotRendererF(pm)
-    DensityRendererF(pm)
-    MultiXYPlotRendererF(pm)
-    MultiRowXYPlotRendererF(pm)
-    MultiDensityRendererF(pm)
-    MultiLineRendererF(pm)
-    MultiRowLineRendererF(pm)
-    MultiWiggleAddTrackWidgetF(pm)
-    CreateMultiWiggleExtensionF(pm)
-
-    pm.addToExtensionPoint(
-      'Core-guessAdapterForLocation',
-      (cb: AdapterGuesser) => {
-        return (file: FileLocation, index?: FileLocation, hint?: string) => {
-          const regexGuess = /\.(bw|bigwig)$/i
-          const adapterName = 'BigWigAdapter'
-          const fileName = getFileName(file)
-          const obj = {
-            type: adapterName,
-            bigWigLocation: file,
-          }
-
-          if (regexGuess.test(fileName) && !hint) {
-            return obj
-          } else if (hint === adapterName) {
-            return obj
-          }
-
-          return cb(file, index, hint)
-        }
-      },
-    )
-    pm.addToExtensionPoint(
-      'Core-guessTrackTypeForLocation',
-      (trackTypeGuesser: TrackTypeGuesser) => {
-        return (adapterName: string) => {
-          if (adapterName === 'BigWigAdapter') {
-            return 'QuantitativeTrack'
-          }
-          return trackTypeGuesser(adapterName)
-        }
-      },
-    )
-
-    pm.addRpcMethod(() => new WiggleGetGlobalQuantitativeStats(pm))
-    pm.addRpcMethod(() => new WiggleGetMultiRegionQuantitativeStats(pm))
-    pm.addRpcMethod(() => new MultiWiggleGetSources(pm))
-  }
-
-  exports = {
-    LinearWiggleDisplayReactComponent,
-    XYPlotRendererReactComponent,
-    XYPlotRenderer,
-    WiggleBaseRenderer,
-    linearWiggleDisplayModelFactory,
-    xyPlotRendererConfigSchema,
-    utils,
-  }
-}
-
-export * from './util'
-
-export { default as WiggleRendering } from './WiggleRendering'
-export {
-  Tooltip,
-  ReactComponent as LinearWiggleDisplayReactComponent,
-  modelFactory as linearWiggleDisplayModelFactory,
-} from './LinearWiggleDisplay'
-export { type TooltipContentsComponent } from './Tooltip'
-
-export { default as WiggleBaseRenderer } from './WiggleBaseRenderer'

package/src/shared/SetMinMaxDialog.tsx

@@ -1,88 +0,0 @@
-import React, { useState } from 'react'
-import {
-  Button,
-  DialogActions,
-  DialogContent,
-  TextField,
-  Typography,
-} from '@mui/material'
-import { Dialog } from '@jbrowse/core/ui'
-
-export default function SetMinMaxDlg(props: {
-  model: {
-    minScore: number
-    maxScore: number
-    scaleType: string
-    setMinScore: Function
-    setMaxScore: Function
-  }
-  handleClose: () => void
-}) {
-  const { model, handleClose } = props
-  const { minScore, maxScore, scaleType } = model
-
-  const [min, setMin] = useState(
-    `${minScore !== Number.MIN_VALUE ? minScore : ''}`,
-  )
-  const [max, setMax] = useState(
-    `${maxScore !== Number.MAX_VALUE ? maxScore : ''}`,
-  )
-
-  const ok =
-    min !== '' && max !== '' && !Number.isNaN(+min) && !Number.isNaN(+max)
-      ? +max > +min
-      : true
-
-  const logOk =
-    scaleType === 'log' && min !== '' && !Number.isNaN(+min) ? +min > 0 : true
-
-  return (
-    <Dialog open onClose={handleClose} title="Set min/max score for track">
-      <DialogContent>
-        <Typography>Enter min/max score: </Typography>
-        {!ok ? (
-          <Typography color="error">
-            Max is greater than or equal to min
-          </Typography>
-        ) : null}
-
-        {!logOk ? (
-          <Typography color="error">
-            Min score should be greater than 0 for log scale
-          </Typography>
-        ) : null}
-
-        <TextField
-          value={min}
-          onChange={event => setMin(event.target.value)}
-          placeholder="Enter min score"
-        />
-        <TextField
-          value={max}
-          onChange={event => setMax(event.target.value)}
-          placeholder="Enter max score"
-        />
-      </DialogContent>
-      <DialogActions>
-        <Button
-          variant="contained"
-          color="primary"
-          type="submit"
-          style={{ marginLeft: 20 }}
-          disabled={!ok}
-          onClick={() => {
-            model.setMinScore(
-              min !== '' && !Number.isNaN(+min) ? +min : undefined,
-            )
-            model.setMaxScore(
-              max !== '' && !Number.isNaN(+max) ? +max : undefined,
-            )
-            handleClose()
-          }}
-        >
-          Submit
-        </Button>
-      </DialogActions>
-    </Dialog>
-  )
-}

package/src/shared/YScaleBar.tsx

@@ -1,25 +0,0 @@
-import React from 'react'
-import { useTheme } from '@mui/material'
-import { observer } from 'mobx-react'
-import { axisPropsFromTickScale, Axis, LEFT, RIGHT } from 'react-d3-axis-mod'
-
-export default observer(function ({
-  model,
-  orientation,
-}: {
-  model: { ticks?: ReturnType<typeof axisPropsFromTickScale> }
-  orientation?: string
-}) {
-  const { ticks } = model
-  const theme = useTheme()
-  return ticks ? (
-    <Axis
-      {...ticks}
-      shadow={2}
-      format={(n: number) => n}
-      style={{ orient: orientation === 'left' ? LEFT : RIGHT }}
-      bg={theme.palette.background.default}
-      fg={theme.palette.text.primary}
-    />
-  ) : null
-})

package/src/util.test.ts

@@ -1,43 +0,0 @@
-import { getNiceDomain, getScale } from './util'
-
-test('linear scale', () => {
-  const scaleType = 'linear'
-  const domain = [0, 100]
-  const range = [0, 100]
-  const scale = getScale({ scaleType, domain, range })
-  expect(scale.domain()).toEqual(domain)
-})
-
-test('log scale', () => {
-  const scaleType = 'log'
-  const domain = [1, 100]
-  const range = [0, 100]
-  const scale = getScale({ scaleType, domain, range })
-  expect(scale.domain()).toEqual([1, 128])
-})
-
-test('test inverted', () => {
-  const scaleType = 'log'
-  const inverted = true
-  const domain = [1, 100]
-  const range = [0, 100]
-  const scale = getScale({ scaleType, domain, range, inverted })
-  expect(scale.domain()).toEqual([1, 128])
-  expect(scale.range()).toEqual(range.reverse())
-})
-
-test('test minScore', () => {
-  const scaleType = 'linear'
-  const domain = [0, 100] as const
-  const bounds = [50, undefined] as const
-  const ret = getNiceDomain({ scaleType, domain, bounds })
-  expect(ret).toEqual([50, 100])
-})
-
-test('test min and max score', () => {
-  const scaleType = 'linear'
-  const domain = [1, 100] as const
-  const bounds = [undefined, 70] as const
-  const ret = getNiceDomain({ scaleType, domain, bounds })
-  expect(ret).toEqual([0, 70])
-})