@jbrowse/plugin-wiggle 1.5.7 → 1.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-wiggle",
-  "version": "1.5.7",
+  "version": "1.6.2",
   "description": "JBrowse 2 wiggle adapters, tracks, etc.",
   "keywords": [
     "jbrowse",
@@ -60,5 +60,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b69276a6760ca01c7c7d905e2172b4adf9df8d"
+  "gitHead": "92455c6021abd69548496a450983d89f8837860d"
 }

package/src/BigWigAdapter/BigWigAdapter.ts

@@ -5,15 +5,15 @@ 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 { 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 { Instance } from 'mobx-state-tree'
+import { AnyConfigurationModel } from '@jbrowse/core/configuration/configurationSchema'
 import { rectifyStats, UnrectifiedFeatureStats } from '@jbrowse/core/util/stats'
 import PluginManager from '@jbrowse/core/PluginManager'
 
-import configSchema from './configSchema'
 import { getSubAdapterType } from '@jbrowse/core/data_adapters/dataAdapterCache'
 
 interface WiggleOptions extends BaseOptions {
@@ -30,7 +30,7 @@ export default class BigWigAdapter extends BaseFeatureDataAdapter {
   ]
 
   public constructor(
-    config: Instance<typeof configSchema>,
+    config: AnyConfigurationModel,
     getSubAdapter?: getSubAdapterType,
     pluginManager?: PluginManager,
   ) {
@@ -45,25 +45,24 @@ export default class BigWigAdapter extends BaseFeatureDataAdapter {
 
   private async setup(opts?: BaseOptions) {
     const { statusCallback = () => {} } = opts || {}
-    statusCallback('Downloading bigwig header')
-    const result = await this.bigwig.getHeader(opts)
-    statusCallback('')
-    return result
+    return updateStatus('Downloading bigwig header', statusCallback, () =>
+      this.bigwig.getHeader(opts),
+    )
   }
 
   public async getRefNames(opts?: BaseOptions) {
-    const header = await this.setup(opts)
-    return Object.keys(header.refsByName)
+    const { refsByName } = await this.setup(opts)
+    return Object.keys(refsByName)
   }
 
   public async refIdToName(refId: number) {
-    const h = await this.setup()
-    return (h.refsByNumber[refId] || { name: undefined }).name
+    const { refsByNumber } = await this.setup()
+    return refsByNumber[refId]?.name
   }
 
   public async getGlobalStats(opts?: BaseOptions) {
-    const header = await this.setup(opts)
-    return rectifyStats(header.totalSummary as UnrectifiedFeatureStats)
+    const { totalSummary } = await this.setup(opts)
+    return rectifyStats(totalSummary as UnrectifiedFeatureStats)
   }
 
   public getFeatures(region: Region, opts: WiggleOptions = {}) {
@@ -92,5 +91,10 @@ export default class BigWigAdapter extends BaseFeatureDataAdapter {
     }, signal)
   }
 
+  // always render bigwig instead of calculating a feature density for it
+  async estimateRegionsStats(_regions: Region[]) {
+    return { featureDensity: 0 }
+  }
+
   public freeResources(): void {}
 }

package/src/DensityRenderer/index.ts

@@ -24,11 +24,10 @@ export default class DensityRenderer extends WiggleBaseRenderer {
     const pivotValue = readConfObject(config, 'bicolorPivotValue')
     const negColor = readConfObject(config, 'negColor')
     const posColor = readConfObject(config, 'posColor')
+    const color = readConfObject(config, 'color')
     let colorCallback
-    let colorScale: ReturnType<typeof getScale>
-    if (readConfObject(config, 'color') === '#f0f') {
-      // default color, use posColor/negColor instead
-      colorScale =
+    if (color === '#f0f') {
+      const colorScale =
         pivot !== 'none'
           ? getScale({
               ...scaleOpts,

package/src/LinearWiggleDisplay/components/SetColorDialog.tsx

@@ -1,17 +1,20 @@
-import React from 'react'
-import { makeStyles } from '@material-ui/core/styles'
+import React, { useState } from 'react'
 import {
+  Button,
   Dialog,
   DialogContent,
+  DialogActions,
   DialogTitle,
   IconButton,
-  Button,
+  Typography,
+  FormControlLabel,
+  Radio,
+  makeStyles,
 } from '@material-ui/core'
 import CloseIcon from '@material-ui/icons/Close'
 import { CompactPicker, Color, RGBColor } from 'react-color'
 
 const useStyles = makeStyles(theme => ({
-  root: {},
   closeButton: {
     position: 'absolute',
     right: theme.spacing(1),
@@ -22,33 +25,34 @@ const useStyles = makeStyles(theme => ({
 
 // this is needed because passing a entire color object into the react-color
 // for alpha, can't pass in an rgba string for example
-function serializeColor(color: Color) {
+function serialize(color: Color) {
   if (color instanceof Object) {
-    const { r, g, b, a } = color as RGBColor
-    return `rgb(${r},${g},${b},${a})`
+    const { r, g, b } = color as RGBColor
+    return `rgb(${r},${g},${b})`
   }
   return color
 }
 
-export default function SetColorDialog(props: {
+export default function SetColorDialog({
+  model,
+  handleClose,
+}: {
   model: {
     color: number
-    setColor: Function
+    setColor: (arg?: string) => void
+    setPosColor: (arg?: string) => void
+    setNegColor: (arg?: string) => void
   }
   handleClose: () => void
 }) {
   const classes = useStyles()
-  const { model, handleClose } = props
+  const [posneg, setPosNeg] = useState(false)
 
   return (
-    <Dialog
-      open
-      onClose={handleClose}
-      aria-labelledby="alert-dialog-title"
-      aria-describedby="alert-dialog-description"
-    >
-      <DialogTitle id="alert-dialog-title">
-        Select a color
+    <Dialog open onClose={handleClose}>
+      <DialogTitle>
+        Select either an overall color, or the positive/negative colors. Note
+        that density renderers only work properly with positive/negative colors
         <IconButton
           aria-label="close"
           className={classes.closeButton}
@@ -57,37 +61,72 @@ export default function SetColorDialog(props: {
           <CloseIcon />
         </IconButton>
       </DialogTitle>
-      <DialogContent style={{ overflowX: 'hidden' }}>
-        <div className={classes.root}>
-          <CompactPicker
-            onChange={event => {
-              model.setColor(serializeColor(event.rgb))
-            }}
-          />
-          <br />
-          <div style={{ margin: 20 }}>
-            <Button
-              onClick={() => {
+      <DialogContent>
+        <FormControlLabel
+          checked={!posneg}
+          onClick={() => setPosNeg(false)}
+          control={<Radio />}
+          label={'Overall color'}
+        />
+        <FormControlLabel
+          checked={posneg}
+          onClick={() => setPosNeg(true)}
+          control={<Radio />}
+          label={'Positive/negative color'}
+        />
+
+        {posneg ? (
+          <>
+            <Typography>Positive color</Typography>
+            <CompactPicker
+              onChange={event => {
+                model.setPosColor(serialize(event.rgb))
+                model.setColor(undefined)
+              }}
+            />
+            <Typography>Negative color</Typography>
+            <CompactPicker
+              onChange={event => {
+                model.setNegColor(serialize(event.rgb))
                 model.setColor(undefined)
               }}
-              color="secondary"
-              variant="contained"
-            >
-              Restore default from config
-            </Button>
-            <Button
-              variant="contained"
-              color="primary"
-              type="submit"
-              onClick={() => {
-                handleClose()
+            />
+          </>
+        ) : (
+          <>
+            <Typography>Overall color</Typography>
+            <CompactPicker
+              onChange={event => {
+                model.setColor(serialize(event.rgb))
               }}
-            >
-              Submit
-            </Button>
-          </div>
-        </div>
+            />
+          </>
+        )}
       </DialogContent>
+      <DialogActions>
+        <Button
+          onClick={() => {
+            model.setPosColor(undefined)
+            model.setNegColor(undefined)
+            model.setColor(undefined)
+          }}
+          color="secondary"
+          variant="contained"
+        >
+          Restore default
+        </Button>
+
+        <Button
+          variant="contained"
+          color="primary"
+          type="submit"
+          onClick={() => {
+            handleClose()
+          }}
+        >
+          Submit
+        </Button>
+      </DialogActions>
     </Dialog>
   )
 }

package/src/LinearWiggleDisplay/components/WiggleDisplayComponent.tsx

@@ -26,11 +26,11 @@ export const YScaleBar = observer(
 
 const LinearWiggleDisplay = observer((props: { model: WiggleDisplayModel }) => {
   const { model } = props
-  const { ready, stats, height, needsScalebar } = model
+  const { stats, height, needsScalebar } = model
   return (
     <div>
       <BaseLinearDisplayComponent {...props} />
-      {ready && stats && needsScalebar ? (
+      {stats && needsScalebar ? (
         <svg
           style={{
             position: 'absolute',

package/src/LinearWiggleDisplay/models/configSchema.ts

@@ -27,6 +27,7 @@ export default function WiggleConfigFactory(pluginManager: PluginManager) {
         description:
           'global/local using their min/max values or w/ standard deviations (globalsd/localsd)',
       },
+
       minScore: {
         type: 'number',
         defaultValue: Number.MIN_VALUE,

package/src/LinearWiggleDisplay/models/model.tsx

@@ -65,6 +65,8 @@ const stateModelFactory = (
         resolution: types.optional(types.number, 1),
         fill: types.maybe(types.boolean),
         color: types.maybe(types.string),
+        posColor: types.maybe(types.string),
+        negColor: types.maybe(types.string),
         summaryScoreMode: types.maybe(types.string),
         rendererTypeNameState: types.maybe(types.string),
         scale: types.maybe(types.string),
@@ -80,7 +82,7 @@ const stateModelFactory = (
       }),
     )
     .volatile(() => ({
-      ready: false,
+      statsReady: false,
       message: undefined as undefined | string,
       stats: observable({ scoreMin: 0, scoreMax: 50 }),
       statsFetchInProgress: undefined as undefined | AbortController,
@@ -89,11 +91,17 @@ const stateModelFactory = (
       updateStats(stats: { scoreMin: number; scoreMax: number }) {
         self.stats.scoreMin = stats.scoreMin
         self.stats.scoreMax = stats.scoreMax
-        self.ready = true
+        self.statsReady = true
       },
       setColor(color: string) {
         self.color = color
       },
+      setPosColor(color: string) {
+        self.posColor = color
+      },
+      setNegColor(color: string) {
+        self.negColor = color
+      },
 
       setLoading(aborter: AbortController) {
         const { statsFetchInProgress: statsFetch } = self
@@ -161,7 +169,7 @@ const stateModelFactory = (
       },
     }))
     .views(self => ({
-      get TooltipComponent(): React.FC {
+      get TooltipComponent() {
         return Tooltip as unknown as React.FC
       },
 
@@ -187,11 +195,6 @@ const stateModelFactory = (
       get scaleType() {
         return self.scale || getConf(self, 'scaleType')
       },
-      get filled() {
-        return typeof self.fill !== 'undefined'
-          ? self.fill
-          : readConfObject(this.rendererConfig, 'filled')
-      },
 
       get maxScore() {
         const { max } = self.constraints
@@ -202,19 +205,22 @@ const stateModelFactory = (
         const { min } = self.constraints
         return min !== undefined ? min : getConf(self, 'minScore')
       },
-
+    }))
+    .views(self => ({
       get rendererConfig() {
         const configBlob =
-          getConf(self, ['renderers', this.rendererTypeName]) || {}
+          getConf(self, ['renderers', self.rendererTypeName]) || {}
 
         return self.rendererType.configSchema.create(
           {
             ...configBlob,
             filled: self.fill,
-            scaleType: this.scaleType,
+            scaleType: self.scaleType,
             displayCrossHatches: self.displayCrossHatches,
             summaryScoreMode: self.summaryScoreMode,
-            color: self.color,
+            ...(self.color ? { color: self.color } : {}),
+            ...(self.negColor ? { negColor: self.negColor } : {}),
+            ...(self.posColor ? { posColor: self.posColor } : {}),
           },
           getEnv(self),
         )
@@ -223,6 +229,11 @@ const stateModelFactory = (
     .views(self => {
       let oldDomain: [number, number] = [0, 0]
       return {
+        get filled() {
+          return typeof self.fill !== 'undefined'
+            ? self.fill
+            : readConfObject(self.rendererConfig, 'filled')
+        },
         get summaryScoreModeSetting() {
           return (
             self.summaryScoreMode ||
@@ -311,9 +322,10 @@ const stateModelFactory = (
       const { renderProps: superRenderProps } = self
       return {
         renderProps() {
+          const superProps = superRenderProps()
           return {
-            ...superRenderProps(),
-            notReady: !self.ready,
+            ...superProps,
+            notReady: superProps.notReady || !self.statsReady,
             rpcDriverName: self.rpcDriverName,
             displayModel: self,
             config: self.rendererConfig,
@@ -481,6 +493,7 @@ const stateModelFactory = (
           },
           ...opts,
         }
+
         if (autoscaleType === 'global' || autoscaleType === 'globalsd') {
           const results: FeatureStats = (await rpcManager.call(
             sessionId,
@@ -572,17 +585,20 @@ const stateModelFactory = (
                     return
                   }
 
-                  if (view.bpPerPx > self.maxViewBpPerPx) {
+                  if (!self.estimatedStatsReady) {
+                    return
+                  }
+                  if (self.regionTooLarge) {
                     return
                   }
 
-                  const stats = await getStats({
+                  const wiggleStats = await getStats({
                     signal: aborter.signal,
                     filters: self.filters,
                   })
 
                   if (isAlive(self)) {
-                    self.updateStats(stats)
+                    self.updateStats(wiggleStats)
                   }
                 } catch (e) {
                   if (!isAbortException(e) && isAlive(self)) {
@@ -596,7 +612,7 @@ const stateModelFactory = (
           )
         },
         async renderSvg(opts: ExportSvgOpts) {
-          await when(() => self.ready && !!self.regionCannotBeRenderedText)
+          await when(() => self.statsReady && !!self.regionCannotBeRenderedText)
           const { needsScalebar, stats } = self
           const { offsetPx } = getContainingView(self) as LGV
           return (

package/src/index.ts

@@ -103,12 +103,17 @@ export default class WigglePlugin extends Plugin {
           const regexGuess = /\.(bw|bigwig)$/i
           const adapterName = 'BigWigAdapter'
           const fileName = getFileName(file)
-          if (regexGuess.test(fileName) || adapterHint === adapterName) {
-            return {
-              type: adapterName,
-              bigWigLocation: file,
-            }
+          const obj = {
+            type: adapterName,
+            bigWigLocation: file,
           }
+
+          if (regexGuess.test(fileName) && !adapterHint) {
+            return obj
+          } else if (adapterHint === adapterName) {
+            return obj
+          }
+
           return adapterGuesser(file, index, adapterHint)
         }
       },

package/src/util.ts

@@ -41,7 +41,6 @@ export function getScale({
     throw new Error('undefined scaleType')
   }
   scale.domain(pivotValue !== undefined ? [min, pivotValue, max] : [min, max])
-  // console.log('before', scale.domain())
   scale.nice()
 
   const [rangeMin, rangeMax] = range
@@ -49,8 +48,6 @@ export function getScale({
     throw new Error('invalid range')
   }
   scale.range(inverted ? range.slice().reverse() : range)
-
-  // console.log('after', scale.domain())
   return scale
 }
 /**
@@ -118,7 +115,7 @@ export function getNiceDomain({
     }
   }
   if (min === undefined || max === undefined) {
-    throw new Error('invalid domain')
+    throw new Error('invalid domain supplied to stats function')
   }
   if (minScore !== undefined && minScore !== Number.MIN_VALUE) {
     min = minScore