@jbrowse/plugin-wiggle 2.0.1 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-wiggle",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "JBrowse 2 wiggle adapters, tracks, etc.",
   "keywords": [
     "jbrowse",
@@ -38,19 +38,25 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.17.9",
-    "@gmod/bbi": "^1.0.35",
+    "@gmod/bbi": "^2.0.2",
     "@mui/icons-material": "^5.0.2",
     "@popperjs/core": "^2.11.0",
+    "clone": "^2.1.2",
     "color": "^3.1.1",
+    "d3-color": "^3.0.2",
     "d3-scale": "^3.0.2",
-    "react-color": "^2.19.3",
-    "react-d3-axis-mod": "^0.1.3",
+    "fast-deep-equal": "^3.1.3",
+    "is-object": "^1.0.1",
+    "react-d3-axis-mod": "^0.1.8",
+    "react-draggable": "^4.4.5",
     "react-popper": "^2.0.0"
   },
   "peerDependencies": {
     "@jbrowse/core": "^2.0.0",
+    "@jbrowse/plugin-data-management": "^2.0.0",
     "@jbrowse/plugin-linear-genome-view": "^2.0.0",
     "@mui/material": "^5.0.0",
+    "@mui/x-data-grid": "^5.0.1",
     "mobx": "^6.0.0",
     "mobx-react": "^7.0.0",
     "mobx-state-tree": "^5.0.0",
@@ -65,5 +71,5 @@
   "distModule": "esm/index.js",
   "srcModule": "src/index.ts",
   "module": "esm/index.js",
-  "gitHead": "ed935bf5612af3818abdc8ef52d100d5d81d33a2"
+  "gitHead": "0db0462fa1f9f15ab4869da085bcab032b9483c3"
 }

package/src/BigWigAdapter/BigWigAdapter.ts

@@ -5,23 +5,17 @@ import {
 } from '@jbrowse/core/data_adapters/BaseAdapter'
 import { AugmentedRegion as Region } from '@jbrowse/core/util/types'
 import { openLocation } from '@jbrowse/core/util/io'
-import { updateStatus } from '@jbrowse/core/util'
+import { updateStatus, Feature } from '@jbrowse/core/util'
 import { ObservableCreate } from '@jbrowse/core/util/rxjs'
-import SimpleFeature, { Feature } from '@jbrowse/core/util/simpleFeature'
-import { map, mergeAll } from 'rxjs/operators'
-import { readConfObject } from '@jbrowse/core/configuration'
-import { AnyConfigurationModel } from '@jbrowse/core/configuration/configurationSchema'
 import { rectifyStats, UnrectifiedFeatureStats } from '@jbrowse/core/util/stats'
-import PluginManager from '@jbrowse/core/PluginManager'
-
-import { getSubAdapterType } from '@jbrowse/core/data_adapters/dataAdapterCache'
 
 interface WiggleOptions extends BaseOptions {
   resolution?: number
 }
 
 export default class BigWigAdapter extends BaseFeatureDataAdapter {
-  private bigwig: BigWig
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  private setupP?: Promise<{ bigwig: BigWig; header: any }>
 
   public static capabilities = [
     'hasResolution',
@@ -29,39 +23,50 @@ export default class BigWigAdapter extends BaseFeatureDataAdapter {
     'hasGlobalStats',
   ]
 
-  public constructor(
-    config: AnyConfigurationModel,
-    getSubAdapter?: getSubAdapterType,
-    pluginManager?: PluginManager,
-  ) {
-    super(config, getSubAdapter, pluginManager)
-    this.bigwig = new BigWig({
+  private async setupPre(opts?: BaseOptions) {
+    const { statusCallback = () => {} } = opts || {}
+    const bigwig = new BigWig({
       filehandle: openLocation(
-        readConfObject(config, 'bigWigLocation'),
+        this.getConf('bigWigLocation'),
         this.pluginManager,
       ),
     })
+    const header = await updateStatus(
+      'Downloading bigwig header',
+      statusCallback,
+      () => bigwig.getHeader(opts),
+    )
+    return { bigwig, header }
   }
 
-  private async setup(opts?: BaseOptions) {
-    const { statusCallback = () => {} } = opts || {}
-    return updateStatus('Downloading bigwig header', statusCallback, () =>
-      this.bigwig.getHeader(opts),
-    )
+  async setup(opts?: BaseOptions) {
+    if (!this.setupP) {
+      this.setupP = this.setupPre(opts).catch(e => {
+        this.setupP = undefined
+        throw e
+      })
+    }
+    return this.setupP
   }
 
   public async getRefNames(opts?: BaseOptions) {
-    const { refsByName } = await this.setup(opts)
+    const {
+      header: { refsByName },
+    } = await this.setup(opts)
     return Object.keys(refsByName)
   }
 
   public async refIdToName(refId: number) {
-    const { refsByNumber } = await this.setup()
+    const {
+      header: { refsByNumber },
+    } = await this.setup()
     return refsByNumber[refId]?.name
   }
 
   public async getGlobalStats(opts?: BaseOptions) {
-    const { totalSummary } = await this.setup(opts)
+    const {
+      header: { totalSummary },
+    } = await this.setup(opts)
     return rectifyStats(totalSummary as UnrectifiedFeatureStats)
   }
 
@@ -75,19 +80,32 @@ export default class BigWigAdapter extends BaseFeatureDataAdapter {
     } = opts
     return ObservableCreate<Feature>(async observer => {
       statusCallback('Downloading bigwig data')
-      const ob = await this.bigwig.getFeatureStream(refName, start, end, {
+      const source = this.getConf('source')
+      const { bigwig } = await this.setup(opts)
+      const feats = await bigwig.getFeatures(refName, start, end, {
         ...opts,
         basesPerSpan: bpPerPx / resolution,
       })
-      ob.pipe(
-        mergeAll(),
-        map(record => {
-          return new SimpleFeature({
-            id: `${refName}:${record.start}-${record.end}`,
-            data: { ...record, refName },
-          })
-        }),
-      ).subscribe(observer)
+
+      for (let i = 0; i < feats.length; i++) {
+        const data = feats[i]
+        if (source) {
+          // @ts-ignore
+          data.source = source
+        }
+        const uniqueId = `${source}:${region.refName}:${data.start}-${data.end}`
+        // @ts-ignore
+        data.refName = refName
+        data.uniqueId = uniqueId
+        observer.next({
+          // @ts-ignore
+          get: (str: string) => (data as Record<string, unknown>)[str],
+          id: () => uniqueId,
+          // @ts-ignore
+          toJSON: () => data,
+        })
+      }
+      observer.complete()
     }, signal)
   }
 

package/src/BigWigAdapter/__snapshots__/BigWigAdapter.test.ts.snap

@@ -48,70 +48,70 @@ Array [
     "refName": "ctgA",
     "score": 18,
     "start": 1002,
-    "uniqueId": "ctgA:1002-1003",
+    "uniqueId": ":ctgA:1002-1003",
   },
   Object {
     "end": 1004,
     "refName": "ctgA",
     "score": 18,
     "start": 1003,
-    "uniqueId": "ctgA:1003-1004",
+    "uniqueId": ":ctgA:1003-1004",
   },
   Object {
     "end": 1005,
     "refName": "ctgA",
     "score": 18,
     "start": 1004,
-    "uniqueId": "ctgA:1004-1005",
+    "uniqueId": ":ctgA:1004-1005",
   },
   Object {
     "end": 1006,
     "refName": "ctgA",
     "score": 19,
     "start": 1005,
-    "uniqueId": "ctgA:1005-1006",
+    "uniqueId": ":ctgA:1005-1006",
   },
   Object {
     "end": 1007,
     "refName": "ctgA",
     "score": 20,
     "start": 1006,
-    "uniqueId": "ctgA:1006-1007",
+    "uniqueId": ":ctgA:1006-1007",
   },
   Object {
     "end": 1008,
     "refName": "ctgA",
     "score": 20,
     "start": 1007,
-    "uniqueId": "ctgA:1007-1008",
+    "uniqueId": ":ctgA:1007-1008",
   },
   Object {
     "end": 1009,
     "refName": "ctgA",
     "score": 20,
     "start": 1008,
-    "uniqueId": "ctgA:1008-1009",
+    "uniqueId": ":ctgA:1008-1009",
   },
   Object {
     "end": 1010,
     "refName": "ctgA",
     "score": 20,
     "start": 1009,
-    "uniqueId": "ctgA:1009-1010",
+    "uniqueId": ":ctgA:1009-1010",
   },
   Object {
     "end": 1011,
     "refName": "ctgA",
     "score": 20,
     "start": 1010,
-    "uniqueId": "ctgA:1010-1011",
+    "uniqueId": ":ctgA:1010-1011",
   },
   Object {
     "end": 1012,
     "refName": "ctgA",
     "score": 19,
     "start": 1011,
-    "uniqueId": "ctgA:1011-1012",
+    "uniqueId": ":ctgA:1011-1012",
   },
 ]
 `;

package/src/BigWigAdapter/configSchema.ts

@@ -10,6 +10,11 @@ export default ConfigurationSchema(
         locationType: 'UriLocation',
       },
     },
+    source: {
+      type: 'string',
+      defaultValue: '',
+      description: 'Used for multiwiggle',
+    },
   },
   { explicitlyTyped: true },
 )

package/src/BigWigAdapter/index.ts

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

package/src/CreateMultiWiggleExtension/ConfirmDialog.tsx

@@ -0,0 +1,66 @@
+import React, { useState } from 'react'
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  TextField,
+  Typography,
+} from '@mui/material'
+import {
+  AnyConfigurationModel,
+  readConfObject,
+} from '@jbrowse/core/configuration'
+
+const ConfirmDialog = ({
+  tracks,
+  onClose,
+}: {
+  tracks: AnyConfigurationModel[]
+  onClose: (arg: boolean, arg1?: { name: string }) => void
+}) => {
+  const [val, setVal] = useState('MultiWiggle ' + Date.now())
+  const allQuant = tracks.every(t => t.type === 'QuantitativeTrack')
+  return (
+    <Dialog open onClose={() => onClose(false)}>
+      <DialogTitle>Confirm multi-wiggle track create</DialogTitle>
+      <DialogContent>
+        <Typography>
+          {!allQuant
+            ? 'Not every track looks like a QuantitativeTrack. This could have unexpected behavior, confirm if it looks ok.'
+            : null}
+          Listing:
+        </Typography>
+        <ul>
+          {tracks.map(track => (
+            <li key={track.trackId}>
+              {readConfObject(track, 'name')} - {track.type}
+            </li>
+          ))}
+        </ul>
+        <TextField
+          value={val}
+          onChange={event => setVal(event.target.value)}
+          helperText="Track name"
+        />
+        <Typography>Confirm creation of track?</Typography>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={() => onClose(false)} color="primary">
+          Cancel
+        </Button>
+        <Button
+          onClick={() => onClose(true, { name: val })}
+          color="primary"
+          variant="contained"
+          autoFocus
+        >
+          Submit
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}
+
+export default ConfirmDialog

package/src/CreateMultiWiggleExtension/index.ts

@@ -0,0 +1,57 @@
+import { lazy } from 'react'
+import PluginManager from '@jbrowse/core/PluginManager'
+import { readConfObject } from '@jbrowse/core/configuration'
+import { getSession } from '@jbrowse/core/util'
+import { HierarchicalTrackSelectorModel } from '@jbrowse/plugin-data-management'
+
+const ConfirmDialog = lazy(() => import('./ConfirmDialog'))
+
+export default function (pm: PluginManager) {
+  pm.addToExtensionPoint('TrackSelector-multiTrackMenuItems', () => {
+    return [
+      {
+        label: 'Create multi-wiggle track',
+        onClick: (model: HierarchicalTrackSelectorModel) => {
+          const tracks = model.selection
+          const trackIds = tracks.map(c => readConfObject(c, 'name'))
+          function makeTrack(arg: { name: string }) {
+            const subadapters = tracks
+              .map(c => readConfObject(c, 'adapter'))
+              .map((c, idx) => ({ ...c, source: trackIds[idx] }))
+            const assemblyNames = [
+              ...new Set(
+                tracks.map(c => readConfObject(c, 'assemblyNames')).flat(),
+              ),
+            ]
+            const now = +Date.now()
+            const trackId = `multitrack-${now}-sessionTrack`
+
+            getSession(model).addTrackConf({
+              type: 'MultiQuantitativeTrack',
+              trackId,
+              name: arg.name,
+              assemblyNames,
+              adapter: {
+                type: 'MultiWiggleAdapter',
+                subadapters,
+              },
+            })
+            model.view.showTrack(trackId)
+          }
+          getSession(model).queueDialog(handleClose => [
+            ConfirmDialog,
+            {
+              tracks,
+              onClose: (arg: boolean, arg1: { name: string }) => {
+                if (arg) {
+                  makeTrack(arg1)
+                }
+                handleClose()
+              },
+            },
+          ])
+        },
+      },
+    ]
+  })
+}

package/src/DensityRenderer/DensityRenderer.test.js

@@ -1,6 +1,8 @@
 import SimpleFeature from '@jbrowse/core/util/simpleFeature'
 import { renderToAbstractCanvas } from '@jbrowse/core/util/offscreenCanvasUtils'
-import DensityRenderer, { configSchema, ReactComponent } from '.'
+import DensityRenderer from './DensityRenderer'
+import configSchema from './configSchema'
+import ReactComponent from '../WiggleRendering'
 
 import { Image, createCanvas } from 'canvas'
 
@@ -32,12 +34,16 @@ test('inverted mode and reversed', async () => {
     ],
     scaleOpts: {
       domain: [0, 100],
+      range: [0, 200],
       inverted: true,
       scaleType: 'linear',
     },
+    config: {
+      posColor: 'red',
+      negColor: 'blue',
+    },
     bpPerPx: 3,
     highResolutionScaling: 1,
-    config: {},
     height: 100,
   }
 

package/src/DensityRenderer/DensityRenderer.ts

@@ -0,0 +1,14 @@
+import { drawDensity } from '../drawxy'
+
+import WiggleBaseRenderer, {
+  RenderArgsDeserializedWithFeatures,
+} from '../WiggleBaseRenderer'
+
+export default class DensityRenderer extends WiggleBaseRenderer {
+  async draw(
+    ctx: CanvasRenderingContext2D,
+    props: RenderArgsDeserializedWithFeatures,
+  ) {
+    return drawDensity(ctx, props)
+  }
+}

package/src/DensityRenderer/__snapshots__/DensityRenderer.test.js.snap

@@ -3,5 +3,13 @@
 exports[`inverted mode and reversed 1`] = `
 Object {
   "imageData": Any<Object>,
+  "reducedFeatures": Array [
+    Object {
+      "end": 200,
+      "score": 2,
+      "start": 101,
+      "uniqueId": "t2",
+    },
+  ],
 }
 `;

package/src/DensityRenderer/configSchema.ts

@@ -0,0 +1,11 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
+
+import ConfigSchema from '../configSchema'
+
+const configSchema = ConfigurationSchema(
+  'DensityRenderer',
+  {},
+  { baseConfiguration: ConfigSchema, explicitlyTyped: true },
+)
+
+export default configSchema

package/src/DensityRenderer/index.ts

@@ -1,56 +1,17 @@
-import {
-  readConfObject,
-  ConfigurationSchema,
-} from '@jbrowse/core/configuration'
-import { featureSpanPx } from '@jbrowse/core/util'
-import { Feature } from '@jbrowse/core/util/simpleFeature'
-import { getScale } from '../util'
+import configSchema from './configSchema'
 
-import ConfigSchema from '../configSchema'
-import WiggleBaseRenderer, {
-  RenderArgsDeserializedWithFeatures,
-} from '../WiggleBaseRenderer'
+import PluginManager from '@jbrowse/core/PluginManager'
+import DensityRenderer from './DensityRenderer'
+import ReactComponent from '../WiggleRendering'
 
-export { default as ReactComponent } from '../WiggleRendering'
-
-export default class DensityRenderer extends WiggleBaseRenderer {
-  async draw(
-    ctx: CanvasRenderingContext2D,
-    props: RenderArgsDeserializedWithFeatures,
-  ) {
-    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')
-    let colorCallback
-    if (color === '#f0f') {
-      const colorScale =
-        pivot !== 'none'
-          ? getScale({
-              ...scaleOpts,
-              pivotValue,
-              range: [negColor, 'white', posColor],
-            })
-          : getScale({ ...scaleOpts, range: ['white', posColor] })
-      colorCallback = (feature: Feature) => colorScale(feature.get('score'))
-    } else {
-      colorCallback = (feature: Feature) =>
-        readConfObject(config, 'color', { feature })
-    }
-
-    for (const feature of features.values()) {
-      const [leftPx, rightPx] = featureSpanPx(feature, region, bpPerPx)
-      const w = rightPx - leftPx + 0.3 // fudge factor for subpixel rendering
-      ctx.fillStyle = colorCallback(feature)
-      ctx.fillRect(leftPx, 0, w, height)
-    }
-  }
+export default (pluginManager: PluginManager) => {
+  pluginManager.addRendererType(
+    () =>
+      new DensityRenderer({
+        name: 'DensityRenderer',
+        ReactComponent,
+        configSchema,
+        pluginManager,
+      }),
+  )
 }
-export const configSchema = ConfigurationSchema(
-  'DensityRenderer',
-  {},
-  { baseConfiguration: ConfigSchema, explicitlyTyped: true },
-)

package/src/LinePlotRenderer/LinePlotRenderer.ts

@@ -0,0 +1,19 @@
+import WiggleBaseRenderer, {
+  RenderArgsDeserializedWithFeatures,
+} from '../WiggleBaseRenderer'
+
+import { YSCALEBAR_LABEL_OFFSET } from '../util'
+import { drawLine } from '../drawxy'
+
+export default class LinePlotRenderer extends WiggleBaseRenderer {
+  async draw(
+    ctx: CanvasRenderingContext2D,
+    props: RenderArgsDeserializedWithFeatures,
+  ) {
+    return drawLine(ctx, {
+      ...props,
+      offset: YSCALEBAR_LABEL_OFFSET,
+      colorCallback: () => 'grey',
+    })
+  }
+}

package/src/LinePlotRenderer/{index.js → configSchema.ts}

@@ -1,10 +1,7 @@
 import { ConfigurationSchema } from '@jbrowse/core/configuration'
 import ConfigSchema from '../configSchema'
 
-export { default as ReactComponent } from '../WiggleRendering'
-export { default } from './LinePlotRenderer'
-
-export const configSchema = ConfigurationSchema(
+const configSchema = ConfigurationSchema(
   'LinePlotRenderer',
   {
     displayCrossHatches: {
@@ -15,3 +12,5 @@ export const configSchema = ConfigurationSchema(
   },
   { baseConfiguration: ConfigSchema, explicitlyTyped: true },
 )
+
+export default configSchema

package/src/LinePlotRenderer/index.ts

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