@jbrowse/plugin-wiggle 1.7.11 → 2.1.0

package/src/MultiQuantitativeTrack/index.ts

@@ -0,0 +1,26 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
+import {
+  createBaseTrackConfig,
+  createBaseTrackModel,
+} from '@jbrowse/core/pluggableElementTypes/models'
+import TrackType from '@jbrowse/core/pluggableElementTypes/TrackType'
+import PluginManager from '@jbrowse/core/PluginManager'
+
+export default (pluginManager: PluginManager) => {
+  pluginManager.addTrackType(() => {
+    const configSchema = ConfigurationSchema(
+      'MultiQuantitativeTrack',
+      {},
+      { baseConfiguration: createBaseTrackConfig(pluginManager) },
+    )
+    return new TrackType({
+      name: 'MultiQuantitativeTrack',
+      configSchema,
+      stateModel: createBaseTrackModel(
+        pluginManager,
+        'MultiQuantitativeTrack',
+        configSchema,
+      ),
+    })
+  })
+}

package/src/MultiRowLineRenderer/MultiRowLineRenderer.ts

@@ -0,0 +1,36 @@
+import { Feature } from '@jbrowse/core/util'
+import { groupBy } from '../util'
+import { drawLine } from '../drawxy'
+import WiggleBaseRenderer, {
+  MultiRenderArgsDeserialized as MultiArgs,
+} from '../WiggleBaseRenderer'
+
+export default class MultiRowLineRenderer extends WiggleBaseRenderer {
+  // @ts-ignore
+  async draw(ctx: CanvasRenderingContext2D, props: MultiArgs) {
+    const { bpPerPx, sources, regions, features } = props
+    const [region] = regions
+    const groups = groupBy([...features.values()], f => f.get('source'))
+    const height = props.height / Object.keys(groups).length
+    const width = (region.end - region.start) / bpPerPx
+    let feats = [] as Feature[]
+    ctx.save()
+    sources.forEach(source => {
+      const { reducedFeatures } = drawLine(ctx, {
+        ...props,
+        features: groups[source.name],
+        height,
+        colorCallback: () => source.color || 'blue',
+      })
+      ctx.strokeStyle = 'rgba(200,200,200,0.8)'
+      ctx.beginPath()
+      ctx.moveTo(0, height)
+      ctx.lineTo(width, height)
+      ctx.stroke()
+      ctx.translate(0, height)
+      feats = feats.concat(reducedFeatures)
+    })
+    ctx.restore()
+    return { reducedFeatures: feats }
+  }
+}

package/src/MultiRowLineRenderer/configSchema.ts

@@ -0,0 +1,25 @@
+import { types } from 'mobx-state-tree'
+
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
+import ConfigSchema from '../configSchema'
+
+const configSchema = ConfigurationSchema(
+  'MultiRowLineRenderer',
+  {
+    displayCrossHatches: {
+      type: 'boolean',
+      description: 'choose to draw cross hatches (sideways lines)',
+      defaultValue: false,
+    },
+    summaryScoreMode: {
+      type: 'stringEnum',
+      model: types.enumeration('Score type', ['max', 'min', 'avg', 'whiskers']),
+      description:
+        'choose whether to use max/min/average or whiskers which combines all three into the same rendering',
+      defaultValue: 'avg',
+    },
+  },
+  { baseConfiguration: ConfigSchema, explicitlyTyped: true },
+)
+
+export default configSchema

package/src/MultiRowLineRenderer/index.ts

@@ -0,0 +1,16 @@
+import PluginManager from '@jbrowse/core/PluginManager'
+import ReactComponent from '../MultiWiggleRendering'
+import MultiRowLineRenderer from './MultiRowLineRenderer'
+import configSchema from './configSchema'
+
+export default (pluginManager: PluginManager) => {
+  pluginManager.addRendererType(
+    () =>
+      new MultiRowLineRenderer({
+        name: 'MultiRowLineRenderer',
+        ReactComponent,
+        configSchema,
+        pluginManager,
+      }),
+  )
+}

package/src/MultiRowXYPlotRenderer/MultiRowXYPlotRenderer.ts

@@ -0,0 +1,43 @@
+import { Feature } from '@jbrowse/core/util'
+import { groupBy } from '../util'
+import { drawXY } from '../drawxy'
+
+import WiggleBaseRenderer, {
+  MultiRenderArgsDeserialized as MultiArgs,
+} from '../WiggleBaseRenderer'
+
+export default class MultiXYPlotRenderer extends WiggleBaseRenderer {
+  // @ts-ignore
+  async draw(ctx: CanvasRenderingContext2D, props: MultiArgs) {
+    const { bpPerPx, sources, regions, features } = props
+    const [region] = regions
+    const groups = groupBy([...features.values()], f => f.get('source'))
+    const height = props.height / Object.keys(groups).length
+    const width = (region.end - region.start) / bpPerPx
+    const Color = await import('color').then(f => f.default)
+    let feats = [] as Feature[]
+    ctx.save()
+    sources.forEach(source => {
+      const features = groups[source.name]
+      if (!features) {
+        return
+      }
+      const { reducedFeatures } = drawXY(ctx, {
+        ...props,
+        features,
+        height,
+        colorCallback: () => source.color || 'blue',
+        Color,
+      })
+      ctx.strokeStyle = 'rgba(200,200,200,0.8)'
+      ctx.beginPath()
+      ctx.moveTo(0, height)
+      ctx.lineTo(width, height)
+      ctx.stroke()
+      ctx.translate(0, height)
+      feats = feats.concat(reducedFeatures)
+    })
+    ctx.restore()
+    return { reducedFeatures: feats }
+  }
+}

package/src/MultiRowXYPlotRenderer/configSchema.ts

@@ -0,0 +1,33 @@
+import { types } from 'mobx-state-tree'
+
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
+import ConfigSchema from '../configSchema'
+
+const configSchema = ConfigurationSchema(
+  'MultiRowXYPlotRenderer',
+  {
+    filled: {
+      type: 'boolean',
+      defaultValue: true,
+    },
+    displayCrossHatches: {
+      type: 'boolean',
+      description: 'choose to draw cross hatches (sideways lines)',
+      defaultValue: false,
+    },
+    summaryScoreMode: {
+      type: 'stringEnum',
+      model: types.enumeration('Score type', ['max', 'min', 'avg', 'whiskers']),
+      description:
+        'choose whether to use max/min/average or whiskers which combines all three into the same rendering',
+      defaultValue: 'whiskers',
+    },
+    minSize: {
+      type: 'number',
+      defaultValue: 0,
+    },
+  },
+  { baseConfiguration: ConfigSchema, explicitlyTyped: true },
+)
+
+export default configSchema

package/src/MultiRowXYPlotRenderer/index.ts

@@ -0,0 +1,16 @@
+import PluginManager from '@jbrowse/core/PluginManager'
+import ReactComponent from '../MultiWiggleRendering'
+import MultiRowXYPlotRenderer from './MultiRowXYPlotRenderer'
+import configSchema from './configSchema'
+
+export default (pluginManager: PluginManager) => {
+  pluginManager.addRendererType(
+    () =>
+      new MultiRowXYPlotRenderer({
+        name: 'MultiRowXYPlotRenderer',
+        ReactComponent,
+        configSchema,
+        pluginManager,
+      }),
+  )
+}

package/src/MultiWiggleAdapter/MultiWiggleAdapter.ts

@@ -0,0 +1,120 @@
+import {
+  BaseFeatureDataAdapter,
+  BaseOptions,
+} from '@jbrowse/core/data_adapters/BaseAdapter'
+import { AugmentedRegion as Region } from '@jbrowse/core/util/types'
+import { ObservableCreate } from '@jbrowse/core/util/rxjs'
+import { SimpleFeature, Feature } from '@jbrowse/core/util'
+import { merge } from 'rxjs'
+import { map } from 'rxjs/operators'
+
+interface WiggleOptions extends BaseOptions {
+  resolution?: number
+}
+
+function getFilename(uri: string) {
+  const filename = uri.slice(uri.lastIndexOf('/') + 1)
+  return filename.slice(0, filename.lastIndexOf('.'))
+}
+
+interface AdapterEntry {
+  dataAdapter: BaseFeatureDataAdapter
+  [key: string]: unknown
+}
+
+export default class MultiWiggleAdapter extends BaseFeatureDataAdapter {
+  public static capabilities = [
+    'hasResolution',
+    'hasLocalStats',
+    'hasGlobalStats',
+  ]
+
+  public async getAdapters(): Promise<AdapterEntry[]> {
+    const getSubAdapter = this.getSubAdapter
+    if (!getSubAdapter) {
+      throw new Error('no getSubAdapter available')
+    }
+    let subConfs = this.getConf('subadapters')
+    if (!subConfs?.length) {
+      const entries = this.getConf('bigWigs') as string[]
+      subConfs = entries.map(entry => ({
+        type: 'BigWigAdapter',
+        source: getFilename(entry),
+        bigWigLocation: {
+          uri: entry,
+        },
+      }))
+    }
+
+    return Promise.all(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      subConfs.map(async (conf: any) => {
+        const dataAdapter = (await getSubAdapter(conf))
+          .dataAdapter as BaseFeatureDataAdapter
+        return {
+          source: dataAdapter.id,
+          ...conf,
+          dataAdapter,
+        }
+      }),
+    )
+  }
+
+  // note: can't really have dis-agreeing refNames
+  public async getRefNames(opts?: BaseOptions) {
+    const adapters = await this.getAdapters()
+    return adapters[0].dataAdapter.getRefNames(opts)
+  }
+
+  public async getGlobalStats(opts?: BaseOptions) {
+    const adapters = await this.getAdapters()
+    const stats = (
+      await Promise.all(
+        // @ts-ignore
+        adapters.map(adp => adp.dataAdapter.getGlobalStats?.(opts)),
+      )
+    ).filter(f => !!f)
+    const scoreMin = Math.min(...stats.map(s => s.scoreMin))
+    const scoreMax = Math.max(...stats.map(s => s.scoreMax))
+    return { scoreMin, scoreMax }
+  }
+
+  public getFeatures(region: Region, opts: WiggleOptions = {}) {
+    return ObservableCreate<Feature>(async observer => {
+      const adapters = await this.getAdapters()
+      merge(
+        ...adapters.map(adp =>
+          adp.dataAdapter.getFeatures(region, opts).pipe(
+            map(p =>
+              // add source field if it does not exist
+              p.get('source')
+                ? p
+                : new SimpleFeature({
+                    ...p.toJSON(),
+                    uniqueId: adp.source + '-' + p.id(),
+                    source: adp.source,
+                  }),
+            ),
+          ),
+        ),
+      ).subscribe(observer)
+    }, opts.signal)
+  }
+
+  // always render bigwig instead of calculating a feature density for it
+  async estimateRegionsStats(_regions: Region[]) {
+    return { featureDensity: 0 }
+  }
+
+  // in another adapter type, this could be dynamic depending on region or
+  // something, but it is static for this particular multi-wiggle adapter type
+  async getSources() {
+    const adapters = await this.getAdapters()
+    return adapters.map(({ dataAdapter, source, ...rest }) => ({
+      name: source,
+      ...rest,
+    }))
+  }
+
+  public freeResources(): void {}
+}

package/src/MultiWiggleAdapter/configSchema.ts

@@ -0,0 +1,16 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
+
+export default ConfigurationSchema(
+  'MultiWiggleAdapter',
+  {
+    subadapters: {
+      type: 'frozen',
+      defaultValue: [],
+    },
+    bigWigs: {
+      type: 'frozen',
+      defaultValue: [],
+    },
+  },
+  { explicitlyTyped: true },
+)

package/src/MultiWiggleAdapter/index.ts

@@ -0,0 +1,20 @@
+import configSchema from './configSchema'
+import AdapterType from '@jbrowse/core/pluggableElementTypes/AdapterType'
+import PluginManager from '@jbrowse/core/PluginManager'
+
+export default (pluginManager: PluginManager) => {
+  pluginManager.addAdapterType(
+    () =>
+      new AdapterType({
+        name: 'MultiWiggleAdapter',
+        configSchema,
+        adapterCapabilities: [
+          'hasResolution',
+          'hasLocalStats',
+          'hasGlobalStats',
+        ],
+        getAdapterClass: () =>
+          import('./MultiWiggleAdapter').then(r => r.default),
+      }),
+  )
+}

package/src/MultiWiggleAddTrackWidget/AddTrackWorkflow.tsx

@@ -0,0 +1,130 @@
+import React, { useState } from 'react'
+import { Button, Paper, TextField } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import { getSession, isElectron } from '@jbrowse/core/util'
+import { storeBlobLocation } from '@jbrowse/core/util/tracks'
+import { AddTrackModel } from '@jbrowse/plugin-data-management'
+
+const useStyles = makeStyles()(theme => ({
+  textbox: {
+    width: '100%',
+  },
+  paper: {
+    margin: theme.spacing(),
+    padding: theme.spacing(),
+  },
+  submit: {
+    marginTop: 25,
+    marginBottom: 100,
+    display: 'block',
+  },
+}))
+
+export default function MultiWiggleWidget({ model }: { model: AddTrackModel }) {
+  const { classes } = useStyles()
+  const [val, setVal] = useState('')
+  const [trackName, setTrackName] = useState('MultiWiggle ' + Date.now())
+  return (
+    <Paper className={classes.paper}>
+      <ul>
+        <li>Enter list of URLs for bigwig files in the textbox</li>
+        <li>
+          Or, use the button below the text box to select files from your
+          computer
+        </li>
+      </ul>
+
+      <TextField
+        multiline
+        rows={10}
+        value={val}
+        onChange={event => setVal(event.target.value)}
+        placeholder={'Paste list of URLs here, or use file selector below'}
+        variant="outlined"
+        className={classes.textbox}
+      />
+
+      <Button variant="outlined" component="label">
+        Choose Files from your computer
+        <input
+          type="file"
+          hidden
+          multiple
+          onChange={({ target }) => {
+            const res = Array.from(target?.files || []).map(file => ({
+              type: 'BigWigAdapter',
+              bigWigLocation: isElectron
+                ? {
+                    localPath: (file as File & { path: string }).path,
+                    locationType: 'LocalPathLocation',
+                  }
+                : storeBlobLocation({ blob: file }),
+              source: file.name,
+            }))
+            setVal(JSON.stringify(res, null, 2))
+          }}
+        />
+      </Button>
+      <TextField
+        value={trackName}
+        onChange={event => setTrackName(event.target.value)}
+        helperText="Track name"
+      />
+      <Button
+        variant="contained"
+        className={classes.submit}
+        onClick={() => {
+          const session = getSession(model)
+
+          const trackId = [
+            `${trackName.toLowerCase().replace(/ /g, '_')}-${Date.now()}`,
+            `${session.adminMode ? '' : '-sessionTrack'}`,
+          ].join('')
+
+          // allow list of bigwigs in JSON format or line-by-line
+          let bigWigs
+          try {
+            bigWigs = JSON.parse(val)
+          } catch (e) {
+            bigWigs = val.split('\n')
+          }
+          const obj =
+            typeof bigWigs[0] === 'string'
+              ? { bigWigs }
+              : { subadapters: bigWigs }
+
+          session.addTrackConf({
+            trackId,
+            type: 'MultiQuantitativeTrack',
+            name: trackName,
+            assemblyNames: [model.assembly],
+            adapter: {
+              type: 'MultiWiggleAdapter',
+              ...obj,
+            },
+          })
+          model.view?.showTrack(trackId)
+
+          model.clearData()
+          session.hideWidget(model)
+        }}
+      >
+        Submit
+      </Button>
+
+      <p>Additional notes: </p>
+      <ul>
+        <li>
+          The list of bigwig files in the text box can be a list of URLs, or a
+          list of elements like{' '}
+          <code>{`[{"type":"BigWigAdapter","bigWigLocation":{"uri":"http://host/file.bw"}, "color":"green","source":"name for subtrack"}]`}</code>{' '}
+          to apply e.g. the color attribute to the view
+        </li>
+        <li>
+          Adding local files will update the textbox with JSON contents that are
+          ready to submit with the "Submit" button
+        </li>
+      </ul>
+    </Paper>
+  )
+}

package/src/MultiWiggleAddTrackWidget/index.ts

@@ -0,0 +1,17 @@
+import PluginManager from '@jbrowse/core/PluginManager'
+import { AddTrackWorkflowType } from '@jbrowse/core/pluggableElementTypes'
+import { types } from 'mobx-state-tree'
+
+// locals
+import MultiWiggleWidget from './AddTrackWorkflow'
+
+export default (pm: PluginManager) => {
+  pm.addAddTrackWorkflowType(
+    () =>
+      new AddTrackWorkflowType({
+        name: 'Multi-wiggle track',
+        ReactComponent: MultiWiggleWidget,
+        stateModel: types.model({}),
+      }),
+  )
+}

package/src/MultiWiggleRendering.tsx

@@ -0,0 +1,125 @@
+import { observer } from 'mobx-react'
+import React, { useRef } from 'react'
+
+import { Region } from '@jbrowse/core/util/types'
+import { SimpleFeature, Feature } from '@jbrowse/core/util'
+import { PrerenderedCanvas } from '@jbrowse/core/ui'
+import { Source } from './util'
+
+function WiggleRendering(props: {
+  regions: Region[]
+  features: Map<string, Feature>
+  bpPerPx: number
+  width: number
+  height: number
+  onMouseLeave: Function
+  onMouseMove: Function
+  onFeatureClick: Function
+  blockKey: string
+  sources: Source[]
+  displayModel: { isMultiRow: boolean }
+}) {
+  const {
+    regions,
+    features,
+    bpPerPx,
+    width,
+    height,
+    sources,
+    onMouseLeave = () => {},
+    onMouseMove = () => {},
+    onFeatureClick = () => {},
+    displayModel,
+  } = props
+  const [region] = regions
+  const ref = useRef<HTMLDivElement>(null)
+
+  function getFeatureUnderMouse(eventClientX: number, eventClientY: number) {
+    if (!ref.current) {
+      return
+    }
+    const rect = ref.current.getBoundingClientRect()
+    const offsetX = eventClientX - rect.left
+    const offsetY = eventClientY - rect.top
+    const source = sources[Math.floor((offsetY / height) * sources.length)]
+    if (!source) {
+      return
+    }
+    const px = region.reversed ? width - offsetX : offsetX
+    const mouseoverBp = region.start + bpPerPx * px
+    let featureUnderMouse
+    if (displayModel.isMultiRow) {
+      for (const feature of features.values()) {
+        if (feature.get('source') !== source.name) {
+          continue
+        }
+        if (
+          mouseoverBp <= feature.get('end') + bpPerPx &&
+          mouseoverBp >= feature.get('start')
+        ) {
+          featureUnderMouse = feature
+          break
+        }
+      }
+    } else {
+      const featuresUnderMouse = []
+      for (const feature of features.values()) {
+        if (
+          mouseoverBp <= feature.get('end') + bpPerPx &&
+          mouseoverBp >= feature.get('start')
+        ) {
+          featuresUnderMouse.push(feature)
+        }
+      }
+
+      if (featuresUnderMouse.length) {
+        const pos = Math.floor(mouseoverBp)
+        featureUnderMouse = new SimpleFeature({
+          uniqueId: 'mouseoverfeat',
+          sources: Object.fromEntries(
+            featuresUnderMouse
+              .map(f => f.toJSON())
+              .map(f => {
+                const { refName, start, end, source, ...rest } = f
+                return [source, rest]
+              }),
+          ),
+          ...region,
+          start: pos,
+          end: pos + 1,
+        })
+      }
+    }
+    return featureUnderMouse
+  }
+
+  return (
+    <div
+      ref={ref}
+      onMouseMove={event => {
+        const featureUnderMouse = getFeatureUnderMouse(
+          event.clientX,
+          event.clientY,
+        )
+        onMouseMove(event, featureUnderMouse)
+      }}
+      onClick={event => {
+        const featureUnderMouse = getFeatureUnderMouse(
+          event.clientX,
+          event.clientY,
+        )
+        onFeatureClick(event, featureUnderMouse)
+      }}
+      onMouseLeave={event => onMouseLeave(event)}
+      style={{
+        overflow: 'visible',
+        position: 'relative',
+        height,
+      }}
+    >
+      <PrerenderedCanvas {...props} />
+    </div>
+  )
+}
+
+export default observer(WiggleRendering)

package/src/MultiXYPlotRenderer/MultiXYPlotRenderer.ts

@@ -0,0 +1,32 @@
+import { Feature } from '@jbrowse/core/util'
+import { drawXY } from '../drawxy'
+import { groupBy, YSCALEBAR_LABEL_OFFSET } from '../util'
+
+import WiggleBaseRenderer, {
+  MultiRenderArgsDeserialized as MultiArgs,
+} from '../WiggleBaseRenderer'
+
+export default class MultiXYPlotRenderer extends WiggleBaseRenderer {
+  // @ts-ignore
+  async draw(ctx: CanvasRenderingContext2D, props: MultiArgs) {
+    const { sources, features } = props
+    const groups = groupBy([...features.values()], f => f.get('source'))
+    const Color = await import('color').then(f => f.default)
+    let feats = [] as Feature[]
+    sources.forEach(source => {
+      const features = groups[source.name]
+      if (!features) {
+        return
+      }
+      const { reducedFeatures } = drawXY(ctx, {
+        ...props,
+        features,
+        offset: YSCALEBAR_LABEL_OFFSET,
+        colorCallback: () => source.color || 'blue',
+        Color,
+      })
+      feats = feats.concat(reducedFeatures)
+    })
+    return { reducedFeatures: feats }
+  }
+}