@jbrowse/plugin-wiggle 1.6.3 → 1.6.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-wiggle",
-  "version": "1.6.3",
+  "version": "1.6.6",
   "description": "JBrowse 2 wiggle adapters, tracks, etc.",
   "keywords": [
     "jbrowse",
@@ -35,15 +35,15 @@
     "useSrc": "node ../../scripts/useSrc.js"
   },
   "dependencies": {
-    "@gmod/bbi": "^1.0.31",
+    "@gmod/bbi": "^1.0.32",
     "@material-ui/icons": "^4.11.2",
     "@popperjs/core": "^2.11.0",
-    "abortable-promise-cache": "^1.1.3",
+    "abortable-promise-cache": "^1.5.0",
     "color": "^3.1.1",
     "d3-scale": "^3.2.3",
     "json-stable-stringify": "^1.0.1",
     "react-color": "^2.19.3",
-    "react-d3-axis": "^0.1.2",
+    "react-d3-axis-mod": "^0.1.3",
     "react-popper": "^2.0.0"
   },
   "peerDependencies": {
@@ -60,5 +60,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c6d6783d3dc82ea96390ab177ceb8ed38b439333"
+  "gitHead": "9fcca7793af0df2d6e527ddaace2b368c8ed2879"
 }

package/src/LinearWiggleDisplay/components/Tooltip.tsx

@@ -29,7 +29,7 @@ const useStyles = makeStyles(theme => ({
     color: theme.palette.common.white,
     fontFamily: theme.typography.fontFamily,
     padding: '4px 8px',
-    fontSize: theme.typography.pxToRem(10),
+    fontSize: theme.typography.pxToRem(12),
     lineHeight: `${round(14 / 10)}em`,
     maxWidth: 300,
     wordWrap: 'break-word',
@@ -91,7 +91,7 @@ const Tooltip = observer(
     height: number
     clientMouseCoord: Coord
     offsetMouseCoord: Coord
-    clientRect?: ClientRect
+    clientRect?: DOMRect
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     TooltipContents: React.FC<any>
@@ -161,7 +161,7 @@ const WiggleTooltip = observer(
     height: number
     offsetMouseCoord: Coord
     clientMouseCoord: Coord
-    clientRect?: ClientRect
+    clientRect?: DOMRect
   }) => {
     return <Tooltip TooltipContents={TooltipContents} {...props} />
   },

package/src/LinearWiggleDisplay/components/WiggleDisplayComponent.tsx

@@ -1,32 +1,25 @@
+import React from 'react'
+import {
+  measureText,
+  getContainingView,
+  getContainingTrack,
+} from '@jbrowse/core/util'
+import { getConf } from '@jbrowse/core/configuration'
 import { BaseLinearDisplayComponent } from '@jbrowse/plugin-linear-genome-view'
 import { observer } from 'mobx-react'
-import React from 'react'
-import { Axis, LEFT, RIGHT } from 'react-d3-axis'
 import { WiggleDisplayModel } from '../models/model'
-
-export const YScaleBar = observer(
-  ({
-    model,
-    orientation,
-  }: {
-    model: WiggleDisplayModel
-    orientation?: string
-  }) => {
-    const { ticks } = model
-
-    return (
-      <Axis
-        {...ticks}
-        format={(n: number) => n}
-        style={{ orient: orientation === 'left' ? LEFT : RIGHT }}
-      />
-    )
-  },
-)
+import YScaleBar from './YScaleBar'
 
 const LinearWiggleDisplay = observer((props: { model: WiggleDisplayModel }) => {
   const { model } = props
   const { stats, height, needsScalebar } = model
+
+  // @ts-ignore
+  const { trackLabels } = getContainingView(model)
+  const left =
+    trackLabels === 'overlapping'
+      ? measureText(getConf(getContainingTrack(model), 'name'), 12.8) + 100
+      : 50
   return (
     <div>
       <BaseLinearDisplayComponent {...props} />
@@ -35,7 +28,7 @@ const LinearWiggleDisplay = observer((props: { model: WiggleDisplayModel }) => {
           style={{
             position: 'absolute',
             top: 0,
-            left: 300,
+            left,
             pointerEvents: 'none',
             height,
             width: 50,
@@ -49,3 +42,5 @@ const LinearWiggleDisplay = observer((props: { model: WiggleDisplayModel }) => {
 })
 
 export default LinearWiggleDisplay
+
+export { YScaleBar }

package/src/LinearWiggleDisplay/components/YScaleBar.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+import { Axis, LEFT, RIGHT } from 'react-d3-axis-mod'
+import { WiggleDisplayModel } from '../models/model'
+
+const YScaleBar = observer(
+  ({
+    model,
+    orientation,
+  }: {
+    model: WiggleDisplayModel
+    orientation?: string
+  }) => {
+    const { ticks } = model
+
+    return ticks ? (
+      <Axis
+        {...ticks}
+        shadow={2}
+        format={(n: number) => n}
+        style={{ orient: orientation === 'left' ? LEFT : RIGHT }}
+      />
+    ) : null
+  },
+)
+export default YScaleBar

package/src/LinearWiggleDisplay/models/configSchema.ts

@@ -27,6 +27,11 @@ export default function WiggleConfigFactory(pluginManager: PluginManager) {
         description:
           'global/local using their min/max values or w/ standard deviations (globalsd/localsd)',
       },
+      minimalTicks: {
+        type: 'boolean',
+        defaultValue: false,
+        description: 'use the minimal amount of ticks',
+      },
 
       minScore: {
         type: 'number',

package/src/LinearWiggleDisplay/models/model.tsx

@@ -1,6 +1,7 @@
 import React, { lazy } from 'react'
 import {
   ConfigurationReference,
+  AnyConfigurationSchemaType,
   getConf,
   readConfObject,
 } from '@jbrowse/core/configuration'
@@ -15,14 +16,13 @@ import {
   BaseLinearDisplay,
   LinearGenomeViewModel,
 } from '@jbrowse/plugin-linear-genome-view'
-import { autorun, observable, when } from 'mobx'
+import { autorun, when } from 'mobx'
 import { addDisposer, isAlive, types, getEnv, Instance } from 'mobx-state-tree'
 import PluginManager from '@jbrowse/core/PluginManager'
 
-import { AnyConfigurationSchemaType } from '@jbrowse/core/configuration/configurationSchema'
 import { FeatureStats } from '@jbrowse/core/util/stats'
 import { Feature } from '@jbrowse/core/util/simpleFeature'
-import { axisPropsFromTickScale } from 'react-d3-axis'
+import { axisPropsFromTickScale } from 'react-d3-axis-mod'
 import { getNiceDomain, getScale } from '../../util'
 
 import Tooltip from '../components/Tooltip'
@@ -41,13 +41,6 @@ const rendererTypes = new Map([
   ['line', 'LinePlotRenderer'],
 ])
 
-function logb(x: number, y: number) {
-  return Math.log(y) / Math.log(x)
-}
-function round(v: number, b = 1.5) {
-  return (v >= 0 ? 1 : -1) * Math.pow(b, 1 + Math.floor(logb(b, Math.abs(v))))
-}
-
 type LGV = LinearGenomeViewModel
 
 const stateModelFactory = (
@@ -84,13 +77,23 @@ const stateModelFactory = (
     .volatile(() => ({
       statsReady: false,
       message: undefined as undefined | string,
-      stats: observable({ scoreMin: 0, scoreMax: 50 }),
+      stats: { scoreMin: 0, scoreMax: 50 },
       statsFetchInProgress: undefined as undefined | AbortController,
     }))
     .actions(self => ({
-      updateStats(stats: { scoreMin: number; scoreMax: number }) {
-        self.stats.scoreMin = stats.scoreMin
-        self.stats.scoreMax = stats.scoreMax
+      updateStats({
+        scoreMin,
+        scoreMax,
+      }: {
+        scoreMin: number
+        scoreMax: number
+      }) {
+        if (
+          self.stats.scoreMin !== scoreMin ||
+          self.stats.scoreMax !== scoreMax
+        ) {
+          self.stats = { scoreMin, scoreMax }
+        }
         self.statsReady = true
       },
       setColor(color: string) {
@@ -242,28 +245,19 @@ const stateModelFactory = (
         },
         get domain() {
           const { stats, scaleType, minScore, maxScore } = self
+          const { scoreMin, scoreMax } = stats
 
           const ret = getNiceDomain({
-            domain: [stats.scoreMin, stats.scoreMax],
+            domain: [scoreMin, scoreMax],
             bounds: [minScore, maxScore],
             scaleType,
           })
-          const headroom = getConf(self, 'headroom') || 0
 
           // avoid weird scalebar if log value and empty region displayed
           if (scaleType === 'log' && ret[1] === Number.MIN_VALUE) {
             return [0, Number.MIN_VALUE]
           }
 
-          // heuristic to just give some extra headroom on bigwig scores if no
-          // maxScore/minScore specified (they have MAX_VALUE/MIN_VALUE if so)
-          if (maxScore === Number.MAX_VALUE && ret[1] > 1.0) {
-            ret[1] = round(ret[1] + headroom)
-          }
-          if (minScore === Number.MIN_VALUE && ret[0] < -1.0) {
-            ret[0] = round(ret[0] - headroom)
-          }
-
           // avoid returning a new object if it matches the old value
           if (JSON.stringify(oldDomain) !== JSON.stringify(ret)) {
             oldDomain = ret
@@ -307,6 +301,7 @@ const stateModelFactory = (
     .views(self => ({
       get ticks() {
         const { scaleType, domain, height } = self
+        const minimalTicks = getConf(self, 'minimalTicks')
         const range = [height - YSCALEBAR_LABEL_OFFSET, YSCALEBAR_LABEL_OFFSET]
         const scale = getScale({
           scaleType,
@@ -314,8 +309,10 @@ const stateModelFactory = (
           range,
           inverted: getConf(self, 'inverted'),
         })
-        const ticks = height < 50 ? 2 : 4
-        return axisPropsFromTickScale(scale, ticks)
+        const ticks = axisPropsFromTickScale(scale, 4)
+        return height < 100 || minimalTicks
+          ? { ...ticks, values: domain }
+          : ticks
       },
     }))
     .views(self => {
@@ -450,7 +447,7 @@ const stateModelFactory = (
             {
               label: 'Set min/max score',
               onClick: () => {
-                getSession(self).queueDialog((doneCallback: Function) => [
+                getSession(self).queueDialog(doneCallback => [
                   SetMinMaxDlg,
                   { model: self, handleClose: doneCallback },
                 ])
@@ -459,7 +456,7 @@ const stateModelFactory = (
             {
               label: 'Set color',
               onClick: () => {
-                getSession(self).queueDialog((doneCallback: Function) => [
+                getSession(self).queueDialog(doneCallback => [
                   SetColorDlg,
                   { model: self, handleClose: doneCallback },
                 ])

package/src/WiggleBaseRenderer.tsx

@@ -78,8 +78,8 @@ export default abstract class WiggleBaseRenderer extends FeatureRendererType {
    * draw features to context given props, to be used by derived renderer
    * classes
    */
-  abstract draw(
+  abstract draw<T extends RenderArgsDeserializedWithFeatures>(
     ctx: CanvasRenderingContext2D,
-    props: RenderArgsDeserialized,
+    props: T,
   ): void
 }

package/src/WiggleRPC/rpcMethods.ts

@@ -44,15 +44,8 @@ export class WiggleGetGlobalStats extends RpcMethodType {
       adapterConfig,
     )
 
-    if (dataAdapter instanceof BaseFeatureDataAdapter) {
-      // @ts-ignore
-      if (dataAdapter.capabilities.includes('hasGlobalStats')) {
-        // @ts-ignore
-        return dataAdapter.getGlobalStats(deserializedArgs)
-      }
-      throw new Error('Data adapter does not support global stats')
-    }
-    throw new Error('Data adapter not found')
+    // @ts-ignore
+    return dataAdapter.getGlobalStats(deserializedArgs)
   }
 }
 

package/src/XYPlotRenderer/XYPlotRenderer.ts

@@ -20,7 +20,7 @@ export default class XYPlotRenderer extends WiggleBaseRenderer {
       scaleOpts,
       height: unadjustedHeight,
       config,
-      ticks: { values },
+      ticks,
       displayCrossHatches,
     } = props
     const [region] = regions
@@ -39,6 +39,7 @@ export default class XYPlotRenderer extends WiggleBaseRenderer {
     const clipColor = readConfObject(config, 'clipColor')
     const highlightColor = readConfObject(config, 'highlightColor')
     const summaryScoreMode = readConfObject(config, 'summaryScoreMode')
+
     const scale = getScale({ ...scaleOpts, range: [0, height] })
     const originY = getOrigin(scaleOpts.scaleType)
     const [niceMin, niceMax] = scale.domain()
@@ -53,11 +54,6 @@ export default class XYPlotRenderer extends WiggleBaseRenderer {
         : (feature: Feature, _score: number) =>
             readConfObject(config, 'color', { feature })
 
-    ctx.strokeStyle = 'grey'
-    ctx.moveTo(0, toY(0))
-    ctx.lineTo(width, toY(0))
-    ctx.stroke()
-
     const crossingOrigin = niceMin < pivotValue && niceMax > pivotValue
     for (const feature of features.values()) {
       const [leftPx, rightPx] = featureSpanPx(feature, region, bpPerPx)
@@ -135,7 +131,7 @@ export default class XYPlotRenderer extends WiggleBaseRenderer {
     if (displayCrossHatches) {
       ctx.lineWidth = 1
       ctx.strokeStyle = 'rgba(200,200,200,0.8)'
-      values.forEach(tick => {
+      ticks.values.forEach(tick => {
         ctx.beginPath()
         ctx.moveTo(0, Math.round(toY(tick)))
         ctx.lineTo(width, Math.round(toY(tick)))

package/src/declare.d.ts

@@ -1,3 +1,3 @@
 declare module '@jbrowse/core/util/offscreenCanvasPonyfill'
 declare module '@jbrowse/core/util/QuickLRU'
-declare module 'react-d3-axis'
+declare module 'react-d3-axis-mod'