@jbrowse/plugin-wiggle 1.7.9 → 2.0.0

package/src/LinearWiggleDisplay/models/model.tsx

@@ -201,12 +201,12 @@ const stateModelFactory = (
 
       get maxScore() {
         const { max } = self.constraints
-        return max !== undefined ? max : getConf(self, 'maxScore')
+        return max ?? getConf(self, 'maxScore')
       },
 
       get minScore() {
         const { min } = self.constraints
-        return min !== undefined ? min : getConf(self, 'minScore')
+        return min ?? getConf(self, 'minScore')
       },
     }))
     .views(self => ({
@@ -214,16 +214,26 @@ const stateModelFactory = (
         const configBlob =
           getConf(self, ['renderers', self.rendererTypeName]) || {}
 
+        const {
+          color,
+          posColor,
+          negColor,
+          summaryScoreMode,
+          scaleType,
+          displayCrossHatches,
+          fill,
+        } = self
+
         return self.rendererType.configSchema.create(
           {
             ...configBlob,
-            filled: self.fill,
-            scaleType: self.scaleType,
-            displayCrossHatches: self.displayCrossHatches,
-            summaryScoreMode: self.summaryScoreMode,
-            ...(self.color ? { color: self.color } : {}),
-            ...(self.negColor ? { negColor: self.negColor } : {}),
-            ...(self.posColor ? { posColor: self.posColor } : {}),
+            ...(scaleType ? { scaleType } : {}),
+            ...(fill ? { filled: fill } : {}),
+            ...(displayCrossHatches ? { displayCrossHatches } : {}),
+            ...(summaryScoreMode ? { summaryScoreMode } : {}),
+            ...(color ? { color } : {}),
+            ...(negColor ? { negColor } : {}),
+            ...(posColor ? { posColor } : {}),
           },
           getEnv(self),
         )
@@ -233,22 +243,18 @@ const stateModelFactory = (
       let oldDomain: [number, number] = [0, 0]
       return {
         get filled() {
-          return typeof self.fill !== 'undefined'
-            ? self.fill
-            : readConfObject(self.rendererConfig, 'filled')
+          const { fill, rendererConfig: conf } = self
+          return fill ?? readConfObject(conf, 'filled')
         },
         get summaryScoreModeSetting() {
-          return (
-            self.summaryScoreMode ||
-            readConfObject(self.rendererConfig, 'summaryScoreMode')
-          )
+          const { summaryScoreMode, rendererConfig: conf } = self
+          return summaryScoreMode ?? readConfObject(conf, 'summaryScoreMode')
         },
         get domain() {
           const { stats, scaleType, minScore, maxScore } = self
-          const { scoreMin, scoreMax } = stats
 
           const ret = getNiceDomain({
-            domain: [scoreMin, scoreMax],
+            domain: [stats.scoreMin, stats.scoreMax],
             bounds: [minScore, maxScore],
             scaleType,
           })
@@ -287,14 +293,12 @@ const stateModelFactory = (
         },
 
         get autoscaleType() {
-          return self.autoscale || getConf(self, 'autoscale')
+          return self.autoscale ?? getConf(self, 'autoscale')
         },
 
         get displayCrossHatchesSetting() {
-          return (
-            self.displayCrossHatches ||
-            readConfObject(self.rendererConfig, 'displayCrossHatches')
-          )
+          const { displayCrossHatches: hatches, rendererConfig: conf } = self
+          return hatches ?? readConfObject(conf, 'displayCrossHatches')
         },
       }
     })
@@ -320,18 +324,19 @@ const stateModelFactory = (
       return {
         renderProps() {
           const superProps = superRenderProps()
+          const { filters, ticks, height, resolution, scaleOpts } = self
           return {
             ...superProps,
             notReady: superProps.notReady || !self.statsReady,
             rpcDriverName: self.rpcDriverName,
             displayModel: self,
             config: self.rendererConfig,
-            scaleOpts: self.scaleOpts,
-            resolution: self.resolution,
-            height: self.height,
-            ticks: self.ticks,
-            displayCrossHatches: self.displayCrossHatches,
-            filters: self.filters,
+            displayCrossHatches: self.displayCrossHatchesSetting,
+            scaleOpts,
+            resolution,
+            height,
+            ticks,
+            filters,
           }
         },
 
@@ -351,6 +356,7 @@ const stateModelFactory = (
     })
     .views(self => {
       const { trackMenuItems: superTrackMenuItems } = self
+      const hasRenderings = getConf(self, 'defaultRendering')
       return {
         trackMenuItems() {
           return [
@@ -362,26 +368,20 @@ const stateModelFactory = (
                     subMenu: [
                       {
                         label: 'Finer resolution',
-                        onClick: () => {
-                          self.setResolution(self.resolution * 5)
-                        },
+                        onClick: () => self.setResolution(self.resolution * 5),
                       },
                       {
                         label: 'Coarser resolution',
-                        onClick: () => {
-                          self.setResolution(self.resolution / 5)
-                        },
+                        onClick: () => self.setResolution(self.resolution / 5),
                       },
                     ],
                   },
                   {
                     label: 'Summary score mode',
-                    subMenu: ['min', 'max', 'avg', 'whiskers'].map(elt => {
-                      return {
-                        label: elt,
-                        onClick: () => self.setSummaryScoreMode(elt),
-                      }
-                    }),
+                    subMenu: ['min', 'max', 'avg', 'whiskers'].map(elt => ({
+                      label: elt,
+                      onClick: () => self.setSummaryScoreMode(elt),
+                    })),
                   },
                 ]
               : []),
@@ -391,33 +391,26 @@ const stateModelFactory = (
                     label: self.filled
                       ? 'Turn off histogram fill'
                       : 'Turn on histogram fill',
-                    onClick: () => {
-                      self.setFill(!self.filled)
-                    },
+                    onClick: () => self.setFill(!self.filled),
                   },
                 ]
               : []),
             {
               label:
                 self.scaleType === 'log' ? 'Set linear scale' : 'Set log scale',
-              onClick: () => {
-                self.toggleLogScale()
-              },
+              onClick: () => self.toggleLogScale(),
             },
             {
               type: 'checkbox',
               label: 'Draw cross hatches',
               checked: self.displayCrossHatchesSetting,
-              onClick: () => {
-                self.toggleCrossHatches()
-              },
+              onClick: () => self.toggleCrossHatches(),
             },
-
-            ...(Object.keys(getConf(self, 'renderers') || {}).length > 1
+            ...(hasRenderings
               ? [
                   {
                     label: 'Renderer type',
-                    subMenu: [...rendererTypes.keys()].map(key => ({
+                    subMenu: ['xyplot', 'density', 'line'].map(key => ({
                       label: key,
                       onClick: () => self.setRendererType(key),
                     })),
@@ -435,30 +428,26 @@ const stateModelFactory = (
                     ]
                   : []),
                 ['localsd', 'Local ± 3σ'],
-              ].map(([val, label]) => {
-                return {
-                  label,
-                  onClick() {
-                    self.setAutoscale(val)
-                  },
-                }
-              }),
+              ].map(([val, label]) => ({
+                label,
+                onClick: () => self.setAutoscale(val),
+              })),
             },
             {
               label: 'Set min/max score',
               onClick: () => {
-                getSession(self).queueDialog(doneCallback => [
+                getSession(self).queueDialog(handleClose => [
                   SetMinMaxDlg,
-                  { model: self, handleClose: doneCallback },
+                  { model: self, handleClose },
                 ])
               },
             },
             {
               label: 'Set color',
               onClick: () => {
-                getSession(self).queueDialog(doneCallback => [
+                getSession(self).queueDialog(handleClose => [
                   SetColorDlg,
-                  { model: self, handleClose: doneCallback },
+                  { model: self, handleClose },
                 ])
               },
             },
@@ -554,9 +543,9 @@ const stateModelFactory = (
         async reload() {
           self.setError()
           const aborter = new AbortController()
-          let stats
+          self.setLoading(aborter)
           try {
-            stats = await getStats({
+            const stats = await getStats({
               signal: aborter.signal,
               ...self.renderProps(),
             })
@@ -574,9 +563,7 @@ const stateModelFactory = (
             autorun(
               async () => {
                 try {
-                  const aborter = new AbortController()
                   const view = getContainingView(self) as LGV
-                  self.setLoading(aborter)
 
                   if (!view.initialized) {
                     return
@@ -588,6 +575,8 @@ const stateModelFactory = (
                   if (self.regionTooLarge) {
                     return
                   }
+                  const aborter = new AbortController()
+                  self.setLoading(aborter)
 
                   const wiggleStats = await getStats({
                     signal: aborter.signal,

package/src/WiggleBaseRenderer.tsx

@@ -8,7 +8,7 @@ import FeatureRendererType, {
   ResultsDeserialized,
 } from '@jbrowse/core/pluggableElementTypes/renderers/FeatureRendererType'
 import { renderToAbstractCanvas } from '@jbrowse/core/util/offscreenCanvasUtils'
-import { ThemeOptions } from '@material-ui/core'
+import { ThemeOptions } from '@mui/material'
 import { ScaleOpts } from './util'
 
 export interface RenderArgs extends FeatureRenderArgs {
@@ -22,7 +22,7 @@ export interface RenderArgsDeserialized extends FeatureRenderArgsDeserialized {
   scaleOpts: ScaleOpts
   displayCrossHatches: boolean
   ticks: { values: number[] }
-  theme: ThemeOptions
+  themeOptions: ThemeOptions
 }
 
 export interface RenderArgsDeserializedWithFeatures
@@ -82,5 +82,5 @@ export default abstract class WiggleBaseRenderer extends FeatureRendererType {
   abstract draw<T extends RenderArgsDeserializedWithFeatures>(
     ctx: CanvasRenderingContext2D,
     props: T,
-  ): void
+  ): Promise<void>
 }

package/src/XYPlotRenderer/XYPlotRenderer.test.js

@@ -2,6 +2,11 @@ import SimpleFeature from '@jbrowse/core/util/simpleFeature'
 import { renderToAbstractCanvas } from '@jbrowse/core/util/offscreenCanvasUtils'
 import XYPlotRenderer, { configSchema, ReactComponent } from '.'
 
+import { Image, createCanvas } from 'canvas'
+
+global.nodeImage = Image
+global.nodeCreateCanvas = createCanvas
+
 test('several features', async () => {
   const pluginManager = {}
   const renderer = new XYPlotRenderer({

package/src/XYPlotRenderer/XYPlotRenderer.ts

@@ -1,15 +1,36 @@
 import { readConfObject } from '@jbrowse/core/configuration'
 import { featureSpanPx } from '@jbrowse/core/util'
-import Color from 'color'
-import { Feature } from '@jbrowse/core/util/simpleFeature'
+import { Feature } from '@jbrowse/core/util'
 import { getOrigin, getScale } from '../util'
 import WiggleBaseRenderer, {
   RenderArgsDeserializedWithFeatures,
 } from '../WiggleBaseRenderer'
 import { YSCALEBAR_LABEL_OFFSET } from '../LinearWiggleDisplay/models/model'
 
+function fillRect(
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  color?: string,
+) {
+  if (color) {
+    ctx.fillStyle = String(color)
+  }
+  if (width < 0) {
+    x += width
+    width = -width
+  }
+  if (height < 0) {
+    y += height
+    height = -height
+  }
+  ctx.fillRect(x, y, width, height)
+}
+
 export default class XYPlotRenderer extends WiggleBaseRenderer {
-  draw(
+  async draw(
     ctx: CanvasRenderingContext2D,
     props: RenderArgsDeserializedWithFeatures,
   ) {
@@ -23,22 +44,27 @@ export default class XYPlotRenderer extends WiggleBaseRenderer {
       ticks,
       displayCrossHatches,
     } = props
+    const Color = await import('color').then(f => f.default)
     const [region] = regions
     const width = (region.end - region.start) / bpPerPx
 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const rc = (s: string, rest?: Record<string, any>) =>
+      readConfObject(config, s, rest)
+
     // 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 offset = YSCALEBAR_LABEL_OFFSET
     const height = unadjustedHeight - offset * 2
 
-    const pivotValue = readConfObject(config, 'bicolorPivotValue')
-    const negColor = readConfObject(config, 'negColor')
-    const posColor = readConfObject(config, 'posColor')
-    const filled = readConfObject(config, 'filled')
-    const clipColor = readConfObject(config, 'clipColor')
-    const highlightColor = readConfObject(config, 'highlightColor')
-    const summaryScoreMode = readConfObject(config, 'summaryScoreMode')
+    const pivotValue = rc('bicolorPivotValue')
+    const negColor = rc('negColor')
+    const posColor = rc('posColor')
+    const filled = rc('filled')
+    const clipColor = rc('clipColor')
+    const highlightColor = rc('highlightColor')
+    const summaryScoreMode = rc('summaryScoreMode')
 
     const scale = getScale({ ...scaleOpts, range: [0, height] })
     const originY = getOrigin(scaleOpts.scaleType)
@@ -48,11 +74,10 @@ export default class XYPlotRenderer extends WiggleBaseRenderer {
     const toHeight = (n: number) => toY(originY) - toY(n)
 
     const colorCallback =
-      readConfObject(config, 'color') === '#f0f'
+      rc('color') === '#f0f'
         ? (_: Feature, score: number) =>
             score < pivotValue ? negColor : posColor
-        : (feature: Feature, _score: number) =>
-            readConfObject(config, 'color', { feature })
+        : (feature: Feature, _score: number) => rc('color', { feature })
 
     const crossingOrigin = niceMin < pivotValue && niceMax > pivotValue
     for (const feature of features.values()) {
@@ -69,62 +94,84 @@ export default class XYPlotRenderer extends WiggleBaseRenderer {
 
       if (summaryScoreMode === 'max') {
         score = summary ? maxr : score
-        ctx.fillStyle = colorCallback(feature, score)
-        ctx.fillRect(leftPx, toY(score), w, filled ? toHeight(score) : 1)
+        fillRect(
+          ctx,
+          leftPx,
+          toY(score),
+          w,
+          filled ? toHeight(score) : 1,
+          colorCallback(feature, score),
+        )
       } else if (summaryScoreMode === 'min') {
         score = summary ? minr : score
-        ctx.fillStyle = colorCallback(feature, score)
-        ctx.fillRect(leftPx, toY(score), w, filled ? toHeight(score) : 1)
+        fillRect(
+          ctx,
+          leftPx,
+          toY(score),
+          w,
+          filled ? toHeight(score) : 1,
+          colorCallback(feature, score),
+        )
       } else if (summaryScoreMode === 'whiskers') {
         const c = colorCallback(feature, score)
         if (summary) {
-          ctx.fillStyle = crossingOrigin
-            ? colorCallback(feature, maxr)
-            : Color(c).lighten(0.6).toString()
-          ctx.fillRect(
+          fillRect(
+            ctx,
             leftPx,
             toY(maxr),
             w,
             filled ? toHeight(maxr) - toHeight(score) : 1,
+            crossingOrigin
+              ? colorCallback(feature, maxr)
+              : Color(c).lighten(0.6),
           )
         }
 
         // normal
-        ctx.fillStyle =
-          crossingOrigin && summary
-            ? Color(colorCallback(feature, maxr)).mix(
-                Color(colorCallback(feature, minr)),
-              )
-            : c
-        ctx.fillRect(
+        fillRect(
+          ctx,
           leftPx,
           toY(score),
           w,
           filled ? toHeight(score) - (summary ? toHeight(minr) : 0) : 1,
+          crossingOrigin && summary
+            ? Color(colorCallback(feature, maxr)).mix(
+                Color(colorCallback(feature, minr)),
+              )
+            : c,
         )
 
         // min
         if (summary) {
-          ctx.fillStyle = crossingOrigin
-            ? colorCallback(feature, minr)
-            : Color(c).darken(0.6).toString()
-          ctx.fillRect(leftPx, toY(minr), w, filled ? toHeight(minr) : 1)
+          fillRect(
+            ctx,
+            leftPx,
+            toY(minr),
+            w,
+            filled ? toHeight(minr) : 1,
+            crossingOrigin
+              ? colorCallback(feature, minr)
+              : Color(c).darken(0.6),
+          )
         }
       } else {
-        ctx.fillStyle = colorCallback(feature, score)
-        ctx.fillRect(leftPx, toY(score), w, filled ? toHeight(score) : 1)
+        fillRect(
+          ctx,
+          leftPx,
+          toY(score),
+          w,
+          filled ? toHeight(score) : 1,
+          colorCallback(feature, score),
+        )
       }
 
       if (highClipping) {
-        ctx.fillStyle = clipColor
-        ctx.fillRect(leftPx, 0, w, 4)
+        fillRect(ctx, leftPx, 0, w, 4, clipColor)
       } else if (lowClipping && scaleOpts.scaleType !== 'log') {
-        ctx.fillStyle = clipColor
-        ctx.fillRect(leftPx, unadjustedHeight - 4, w, 4)
+        fillRect(ctx, leftPx, unadjustedHeight - 4, w, 4, clipColor)
       }
       if (feature.get('highlighted')) {
-        ctx.fillStyle = highlightColor
-        ctx.fillRect(leftPx, 0, w, height)
+        fillRect(ctx, leftPx, 0, w, height, highlightColor)
       }
     }
 

package/src/XYPlotRenderer/index.ts

@@ -1,11 +1,28 @@
 import { ConfigurationSchema } from '@jbrowse/core/configuration'
 import ConfigSchema from '../configSchema'
-
+import { types } from 'mobx-state-tree'
 export { default as ReactComponent } from '../WiggleRendering'
 export { default } from './XYPlotRenderer'
 
 export const configSchema = ConfigurationSchema(
   'XYPlotRenderer',
-  {},
+  {
+    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',
+    },
+  },
   { baseConfiguration: ConfigSchema, explicitlyTyped: true },
 )

package/src/configSchema.ts

@@ -29,17 +29,6 @@ export default ConfigurationSchema(
       description: 'the color of the clipping marker',
       defaultValue: 'red',
     },
-    renderType: {
-      type: 'stringEnum',
-      model: types.enumeration('Rendering type', ['xyplot', 'density', 'line']),
-      description: 'The type of rendering for wiggle data to use',
-      defaultValue: 'xyplot',
-    },
-    filled: {
-      type: 'boolean',
-      description: 'fill in histogram',
-      defaultValue: true,
-    },
     bicolorPivot: {
       type: 'stringEnum',
       model: types.enumeration('Scale type', [
@@ -56,18 +45,6 @@ export default ConfigurationSchema(
       defaultValue: 0,
       description: 'value to use for bicolor pivot',
     },
-    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',
-    },
-    displayCrossHatches: {
-      type: 'boolean',
-      description: 'choose to draw cross hatches (sideways lines)',
-      defaultValue: false,
-    },
   },
   { explicitlyTyped: true },
 )