@jbrowse/plugin-wiggle 1.7.11 → 2.1.0

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/{LinePlotRenderer/index.js → DensityRenderer/configSchema.ts}

@@ -1,11 +1,11 @@
 import { ConfigurationSchema } from '@jbrowse/core/configuration'
-import ConfigSchema from '../configSchema'
 
-export { default as ReactComponent } from '../WiggleRendering'
-export { default } from './LinePlotRenderer'
+import ConfigSchema from '../configSchema'
 
-export const configSchema = ConfigurationSchema(
-  'LinePlotRenderer',
+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 {
-  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/configSchema.ts

@@ -0,0 +1,16 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
+import ConfigSchema from '../configSchema'
+
+const configSchema = ConfigurationSchema(
+  'LinePlotRenderer',
+  {
+    displayCrossHatches: {
+      type: 'boolean',
+      description: 'choose to draw cross hatches (sideways lines)',
+      defaultValue: false,
+    },
+  },
+  { 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,
+      }),
+  )
+}

package/src/LinearWiggleDisplay/components/SetColorDialog.tsx

@@ -1,20 +1,21 @@
 import React, { useState } from 'react'
+import { observer } from 'mobx-react'
 import {
   Button,
   Dialog,
   DialogContent,
   DialogActions,
   DialogTitle,
-  IconButton,
-  Typography,
   FormControlLabel,
+  IconButton,
   Radio,
-  makeStyles,
-} from '@material-ui/core'
-import CloseIcon from '@material-ui/icons/Close'
-import { CompactPicker, Color, RGBColor } from 'react-color'
+  Typography,
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import CloseIcon from '@mui/icons-material/Close'
+import { ColorPicker } from '@jbrowse/core/ui/ColorPicker'
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   closeButton: {
     position: 'absolute',
     right: theme.spacing(1),
@@ -23,29 +24,21 @@ 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 serialize(color: Color) {
-  if (color instanceof Object) {
-    const { r, g, b } = color as RGBColor
-    return `rgb(${r},${g},${b})`
-  }
-  return color
-}
-
-export default function SetColorDialog({
+function SetColorDialog({
   model,
   handleClose,
 }: {
   model: {
-    color: number
+    color?: string
+    posColor?: string
+    negColor?: string
     setColor: (arg?: string) => void
     setPosColor: (arg?: string) => void
     setNegColor: (arg?: string) => void
   }
   handleClose: () => void
 }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const [posneg, setPosNeg] = useState(false)
 
   return (
@@ -78,16 +71,19 @@ export default function SetColorDialog({
         {posneg ? (
           <>
             <Typography>Positive color</Typography>
-            <CompactPicker
+            <ColorPicker
+              color={model.posColor || 'black'}
               onChange={event => {
-                model.setPosColor(serialize(event.rgb))
+                model.setPosColor(event)
                 model.setColor(undefined)
               }}
             />
             <Typography>Negative color</Typography>
-            <CompactPicker
+
+            <ColorPicker
+              color={model.negColor || 'black'}
               onChange={event => {
-                model.setNegColor(serialize(event.rgb))
+                model.setNegColor(event)
                 model.setColor(undefined)
               }}
             />
@@ -95,10 +91,9 @@ export default function SetColorDialog({
         ) : (
           <>
             <Typography>Overall color</Typography>
-            <CompactPicker
-              onChange={event => {
-                model.setColor(serialize(event.rgb))
-              }}
+            <ColorPicker
+              color={model.color || 'black'}
+              onChange={event => model.setColor(event)}
             />
           </>
         )}
@@ -120,9 +115,7 @@ export default function SetColorDialog({
           variant="contained"
           color="primary"
           type="submit"
-          onClick={() => {
-            handleClose()
-          }}
+          onClick={() => handleClose()}
         >
           Submit
         </Button>
@@ -130,3 +123,5 @@ export default function SetColorDialog({
     </Dialog>
   )
 }
+
+export default observer(SetColorDialog)

package/src/LinearWiggleDisplay/components/SetMinMaxDialog.tsx

@@ -1,15 +1,17 @@
 import React, { useState } from 'react'
-import { makeStyles } from '@material-ui/core/styles'
-import Button from '@material-ui/core/Button'
-import TextField from '@material-ui/core/TextField'
-import Typography from '@material-ui/core/Typography'
-import Dialog from '@material-ui/core/Dialog'
-import DialogContent from '@material-ui/core/DialogContent'
-import DialogTitle from '@material-ui/core/DialogTitle'
-import IconButton from '@material-ui/core/IconButton'
-import CloseIcon from '@material-ui/icons/Close'
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  TextField,
+  Typography,
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import CloseIcon from '@mui/icons-material/Close'
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   root: {},
   closeButton: {
     position: 'absolute',
@@ -29,7 +31,7 @@ export default function SetMinMaxDlg(props: {
   }
   handleClose: () => void
 }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const { model, handleClose } = props
   const { minScore, maxScore, scaleType } = model