@jbrowse/plugin-wiggle 2.0.1 → 2.1.0

package/src/MultiXYPlotRenderer/configSchema.ts

@@ -0,0 +1,31 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
+import { types } from 'mobx-state-tree'
+import ConfigSchema from '../configSchema'
+
+const configSchema = ConfigurationSchema(
+  'MultiXYPlotRenderer',
+  {
+    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: 'avg',
+    },
+    minSize: {
+      type: 'number',
+      defaultValue: 0,
+    },
+  },
+  { baseConfiguration: ConfigSchema, explicitlyTyped: true },
+)
+export default configSchema

package/src/MultiXYPlotRenderer/index.ts

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

package/src/QuantitativeTrack/index.ts

@@ -0,0 +1,26 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
+import {
+  createBaseTrackConfig,
+  createBaseTrackModel,
+} from '@jbrowse/core/pluggableElementTypes/models'
+import TrackType from '@jbrowse/core/pluggableElementTypes/TrackType'
+import PluginManager from '@jbrowse/core/PluginManager'
+
+export default (pluginManager: PluginManager) => {
+  pluginManager.addTrackType(() => {
+    const configSchema = ConfigurationSchema(
+      'QuantitativeTrack',
+      {},
+      { baseConfiguration: createBaseTrackConfig(pluginManager) },
+    )
+    return new TrackType({
+      name: 'QuantitativeTrack',
+      configSchema,
+      stateModel: createBaseTrackModel(
+        pluginManager,
+        'QuantitativeTrack',
+        configSchema,
+      ),
+    })
+  })
+}

package/src/Tooltip.tsx

@@ -0,0 +1,123 @@
+import React, { useMemo, useState } from 'react'
+import { observer } from 'mobx-react'
+import { alpha, Portal } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import { Feature } from '@jbrowse/core/util'
+
+// locals
+import { YSCALEBAR_LABEL_OFFSET, round } from './util'
+import { usePopper } from 'react-popper'
+
+const useStyles = makeStyles()(theme => ({
+  // these styles come from
+  // https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Tooltip/Tooltip.js
+  tooltip: {
+    position: 'absolute',
+    pointerEvents: 'none',
+    backgroundColor: alpha(theme.palette.grey[700], 0.9),
+    borderRadius: theme.shape.borderRadius,
+    color: theme.palette.common.white,
+    fontFamily: theme.typography.fontFamily,
+    padding: '4px 8px',
+    fontSize: theme.typography.pxToRem(12),
+    lineHeight: `${round(14 / 10)}em`,
+    maxWidth: 300,
+    wordWrap: 'break-word',
+  },
+
+  hoverVertical: {
+    background: '#333',
+    border: 'none',
+    width: 1,
+    height: '100%',
+    top: YSCALEBAR_LABEL_OFFSET,
+    cursor: 'default',
+    position: 'absolute',
+    pointerEvents: 'none',
+  },
+}))
+
+type Coord = [number, number]
+
+// React.forwardRef component for the tooltip, the ref is used for measuring
+// the size of the tooltip
+export type TooltipContentsComponent = React.ForwardRefExoticComponent<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  { feature: Feature; model: any } & React.RefAttributes<HTMLDivElement>
+>
+
+function Tooltip({
+  model,
+  height,
+  clientMouseCoord,
+  offsetMouseCoord,
+  clientRect,
+  TooltipContents,
+  useClientY,
+}: {
+  model: { featureUnderMouse: Feature }
+  useClientY?: boolean
+  height: number
+  clientMouseCoord: Coord
+  offsetMouseCoord: Coord
+  clientRect?: DOMRect
+  TooltipContents: TooltipContentsComponent
+}) {
+  const { featureUnderMouse } = model
+  const [width, setWidth] = useState(0)
+  const [anchorEl, setAnchorEl] = useState<HTMLDivElement | null>(null)
+  const { classes } = useStyles()
+
+  // must be memoized a la https://github.com/popperjs/react-popper/issues/391
+  const virtElement = useMemo(
+    () => ({
+      getBoundingClientRect: () => {
+        const x = clientMouseCoord[0] + width / 2 + 20
+        const y = useClientY ? clientMouseCoord[1] : clientRect?.top || 0
+        return {
+          top: y,
+          left: x,
+          bottom: y,
+          right: x,
+          width: 0,
+          height: 0,
+          x,
+          y,
+          toJSON() {},
+        }
+      },
+    }),
+    [clientRect?.top, clientMouseCoord, width, useClientY],
+  )
+  const { styles, attributes } = usePopper(virtElement, anchorEl)
+
+  return featureUnderMouse ? (
+    <>
+      <Portal>
+        <div
+          ref={setAnchorEl}
+          className={classes.tooltip}
+          // zIndex needed to go over widget drawer
+          style={{ ...styles.popper, zIndex: 100000 }}
+          {...attributes.popper}
+        >
+          <TooltipContents
+            ref={elt => setWidth(elt?.getBoundingClientRect().width || 0)}
+            model={model}
+            feature={featureUnderMouse}
+          />
+        </div>
+      </Portal>
+
+      <div
+        className={classes.hoverVertical}
+        style={{
+          left: offsetMouseCoord[0],
+          height: height - YSCALEBAR_LABEL_OFFSET * 2,
+        }}
+      />
+    </>
+  ) : null
+}
+
+export default observer(Tooltip)

package/src/WiggleBaseRenderer.tsx

@@ -1,4 +1,3 @@
-import { Feature } from '@jbrowse/core/util/simpleFeature'
 import FeatureRendererType, {
   RenderArgs as FeatureRenderArgs,
   RenderArgsSerialized,
@@ -7,9 +6,9 @@ import FeatureRendererType, {
   ResultsSerialized,
   ResultsDeserialized,
 } from '@jbrowse/core/pluggableElementTypes/renderers/FeatureRendererType'
-import { renderToAbstractCanvas } from '@jbrowse/core/util/offscreenCanvasUtils'
+import { renderToAbstractCanvas, Feature } from '@jbrowse/core/util'
 import { ThemeOptions } from '@mui/material'
-import { ScaleOpts } from './util'
+import { ScaleOpts, Source } from './util'
 
 export interface RenderArgs extends FeatureRenderArgs {
   scaleOpts: ScaleOpts
@@ -30,6 +29,11 @@ export interface RenderArgsDeserializedWithFeatures
   features: Map<string, Feature>
 }
 
+export interface MultiRenderArgsDeserialized
+  extends RenderArgsDeserializedWithFeatures {
+  sources: Source[]
+}
+
 export type {
   RenderArgsSerialized,
   RenderResults,
@@ -46,11 +50,12 @@ export default abstract class WiggleBaseRenderer extends FeatureRendererType {
     const [region] = regions
     const width = (region.end - region.start) / bpPerPx
 
-    const res = await renderToAbstractCanvas(
+    // @ts-ignore
+    const { reducedFeatures, ...rest } = await renderToAbstractCanvas(
       width,
       height,
       renderProps,
-      (ctx: CanvasRenderingContext2D) =>
+      ctx =>
         this.draw(ctx, {
           ...renderProps,
           features,
@@ -59,7 +64,7 @@ export default abstract class WiggleBaseRenderer extends FeatureRendererType {
 
     const results = await super.render({
       ...renderProps,
-      ...res,
+      ...rest,
       features,
       height,
       width,
@@ -67,8 +72,9 @@ export default abstract class WiggleBaseRenderer extends FeatureRendererType {
 
     return {
       ...results,
-      ...res,
-      features,
+      ...rest,
+      // @ts-ignore
+      features: reducedFeatures || results.features,
       containsNoTransferables: true,
       height,
       width,
@@ -82,5 +88,5 @@ export default abstract class WiggleBaseRenderer extends FeatureRendererType {
   abstract draw<T extends RenderArgsDeserializedWithFeatures>(
     ctx: CanvasRenderingContext2D,
     props: T,
-  ): Promise<void>
+  ): Promise<Record<string, unknown> | void>
 }

package/src/WiggleRPC/rpcMethods.ts

@@ -1,11 +1,10 @@
-import { getAdapter } from '@jbrowse/core/data_adapters/dataAdapterCache'
 import RpcMethodType from '@jbrowse/core/pluggableElementTypes/RpcMethodType'
+import SerializableFilterChain from '@jbrowse/core/pluggableElementTypes/renderers/util/serializableFilterChain'
+import { getAdapter } from '@jbrowse/core/data_adapters/dataAdapterCache'
 import { RenderArgs } from '@jbrowse/core/rpc/coreRpcMethods'
-import { renameRegionsIfNeeded } from '@jbrowse/core/util'
-import { Region } from '@jbrowse/core/util/types'
+import { renameRegionsIfNeeded, Region } from '@jbrowse/core/util'
 import { RemoteAbortSignal } from '@jbrowse/core/rpc/remoteAbortSignals'
 import { BaseFeatureDataAdapter } from '@jbrowse/core/data_adapters/BaseAdapter'
-import SerializableFilterChain from '@jbrowse/core/pluggableElementTypes/renderers/util/serializableFilterChain'
 import { FeatureStats } from '@jbrowse/core/util/stats'
 
 export class WiggleGetGlobalStats extends RpcMethodType {
@@ -33,16 +32,13 @@ export class WiggleGetGlobalStats extends RpcMethodType {
     },
     rpcDriverClassName: string,
   ): Promise<FeatureStats> {
+    const pm = this.pluginManager
     const deserializedArgs = await this.deserializeArguments(
       args,
       rpcDriverClassName,
     )
     const { adapterConfig, sessionId } = deserializedArgs
-    const { dataAdapter } = await getAdapter(
-      this.pluginManager,
-      sessionId,
-      adapterConfig,
-    )
+    const { dataAdapter } = await getAdapter(pm, sessionId, adapterConfig)
 
     // @ts-ignore
     return dataAdapter.getGlobalStats(deserializedArgs)
@@ -69,15 +65,15 @@ export class WiggleGetMultiRegionStats extends RpcMethodType {
     args: RenderArgs & { signal?: AbortSignal; statusCallback?: Function },
     rpcDriverClassName: string,
   ) {
-    const assemblyManager =
-      this.pluginManager.rootModel?.session?.assemblyManager
+    const pm = this.pluginManager
+    const assemblyManager = pm.rootModel?.session?.assemblyManager
     if (!assemblyManager) {
       return args
     }
 
     const renamedArgs = await renameRegionsIfNeeded(assemblyManager, {
       ...args,
-      filters: args.filters && args.filters.toJSON().filters,
+      filters: args.filters?.toJSON().filters,
     })
 
     return super.serializeArguments(renamedArgs, rpcDriverClassName)
@@ -94,16 +90,13 @@ export class WiggleGetMultiRegionStats extends RpcMethodType {
     },
     rpcDriverClassName: string,
   ) {
+    const pm = this.pluginManager
     const deserializedArgs = await this.deserializeArguments(
       args,
       rpcDriverClassName,
     )
     const { regions, adapterConfig, sessionId } = deserializedArgs
-    const { dataAdapter } = await getAdapter(
-      this.pluginManager,
-      sessionId,
-      adapterConfig,
-    )
+    const { dataAdapter } = await getAdapter(pm, sessionId, adapterConfig)
 
     if (dataAdapter instanceof BaseFeatureDataAdapter) {
       return dataAdapter.getMultiRegionStats(regions, deserializedArgs)
@@ -111,3 +104,61 @@ export class WiggleGetMultiRegionStats extends RpcMethodType {
     throw new Error('Data adapter not found')
   }
 }
+
+export class MultiWiggleGetSources extends RpcMethodType {
+  name = 'MultiWiggleGetSources'
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  async deserializeArguments(args: any, rpcDriverClassName: string) {
+    const l = await super.deserializeArguments(args, rpcDriverClassName)
+    return {
+      ...l,
+      filters: args.filters
+        ? new SerializableFilterChain({
+            filters: args.filters,
+          })
+        : undefined,
+    }
+  }
+
+  async serializeArguments(
+    args: RenderArgs & { signal?: AbortSignal; statusCallback?: Function },
+    rpcDriverClassName: string,
+  ) {
+    const pm = this.pluginManager
+    const assemblyManager = pm.rootModel?.session?.assemblyManager
+    if (!assemblyManager) {
+      return args
+    }
+
+    const renamedArgs = await renameRegionsIfNeeded(assemblyManager, {
+      ...args,
+      filters: args.filters?.toJSON().filters,
+    })
+
+    return super.serializeArguments(renamedArgs, rpcDriverClassName)
+  }
+
+  async execute(
+    args: {
+      adapterConfig: {}
+      signal?: RemoteAbortSignal
+      sessionId: string
+      headers?: Record<string, string>
+      regions: Region[]
+      bpPerPx: number
+    },
+    rpcDriverClassName: string,
+  ) {
+    const pm = this.pluginManager
+    const deserializedArgs = await this.deserializeArguments(
+      args,
+      rpcDriverClassName,
+    )
+    const { regions, adapterConfig, sessionId } = deserializedArgs
+    const { dataAdapter } = await getAdapter(pm, sessionId, adapterConfig)
+
+    // @ts-ignore
+    return dataAdapter.getSources(regions, deserializedArgs)
+  }
+}

package/src/WiggleRendering.tsx

@@ -2,7 +2,7 @@ import { observer } from 'mobx-react'
 import React, { useRef } from 'react'
 
 import { Region } from '@jbrowse/core/util/types'
-import { Feature } from '@jbrowse/core/util/simpleFeature'
+import { Feature } from '@jbrowse/core/util'
 import { PrerenderedCanvas } from '@jbrowse/core/ui'
 
 function WiggleRendering(props: {
@@ -40,7 +40,11 @@ function WiggleRendering(props: {
     const clientBp = region.start + bpPerPx * px
     let featureUnderMouse
     for (const feature of features.values()) {
-      if (clientBp <= feature.get('end') && clientBp >= feature.get('start')) {
+      // bpPerPx added to the end to accomodate "reduced features" (one feature per px)
+      if (
+        clientBp <= feature.get('end') + bpPerPx &&
+        clientBp >= feature.get('start')
+      ) {
         featureUnderMouse = feature
         break
       }
@@ -51,23 +55,13 @@ function WiggleRendering(props: {
     <div
       ref={ref}
       data-testid="wiggle-rendering-test"
-      onMouseMove={event => {
-        const featureUnderMouse = getFeatureUnderMouse(event.clientX)
-        onMouseMove(
-          event,
-          featureUnderMouse ? featureUnderMouse.id() : undefined,
-        )
-      }}
-      onClick={event => {
-        const featureUnderMouse = getFeatureUnderMouse(event.clientX)
-        onFeatureClick(
-          event,
-          featureUnderMouse ? featureUnderMouse.id() : undefined,
-        )
-      }}
+      onMouseMove={event =>
+        onMouseMove(event, getFeatureUnderMouse(event.clientX)?.id())
+      }
+      onClick={event =>
+        onFeatureClick(event, getFeatureUnderMouse(event.clientX)?.id())
+      }
       onMouseLeave={event => onMouseLeave(event)}
-      role="presentation"
-      className="WiggleRendering"
       style={{
         overflow: 'visible',
         position: 'relative',

package/src/XYPlotRenderer/XYPlotRenderer.test.js

@@ -1,6 +1,8 @@
 import SimpleFeature from '@jbrowse/core/util/simpleFeature'
 import { renderToAbstractCanvas } from '@jbrowse/core/util/offscreenCanvasUtils'
-import XYPlotRenderer, { configSchema, ReactComponent } from '.'
+import configSchema from './configSchema'
+import XYPlotRenderer from './XYPlotRenderer'
+import ReactComponent from '../WiggleRendering'
 
 import { Image, createCanvas } from 'canvas'
 

package/src/XYPlotRenderer/XYPlotRenderer.ts

@@ -1,189 +1,37 @@
 import { readConfObject } from '@jbrowse/core/configuration'
-import { featureSpanPx } from '@jbrowse/core/util'
 import { Feature } from '@jbrowse/core/util'
-import { getOrigin, getScale } from '../util'
+import { drawXY } from '../drawxy'
 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)
-}
+import { YSCALEBAR_LABEL_OFFSET } from '../util'
 
 export default class XYPlotRenderer extends WiggleBaseRenderer {
   async draw(
     ctx: CanvasRenderingContext2D,
     props: RenderArgsDeserializedWithFeatures,
   ) {
-    const {
-      features,
-      bpPerPx,
-      regions,
-      scaleOpts,
-      height: unadjustedHeight,
-      config,
-      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)
+    const { features, config } = props
 
     // 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 = 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)
-    const [niceMin, niceMax] = scale.domain()
-
-    const toY = (n: number) => height - (scale(n) || 0) + offset
-    const toHeight = (n: number) => toY(originY) - toY(n)
-
-    const colorCallback =
-      rc('color') === '#f0f'
-        ? (_: Feature, score: number) =>
-            score < pivotValue ? negColor : posColor
-        : (feature: Feature, _score: number) => rc('color', { feature })
-
-    const crossingOrigin = niceMin < pivotValue && niceMax > pivotValue
-    for (const feature of features.values()) {
-      const [leftPx, rightPx] = featureSpanPx(feature, region, bpPerPx)
-      let score = feature.get('score')
-      const maxr = feature.get('maxScore')
-      const minr = feature.get('minScore')
-
-      const lowClipping = score < niceMin
-      const highClipping = score > niceMax
-      const w = rightPx - leftPx + 0.4 // fudge factor for subpixel rendering
-
-      const summary = feature.get('summary')
-
-      if (summaryScoreMode === 'max') {
-        score = summary ? maxr : score
-        fillRect(
-          ctx,
-          leftPx,
-          toY(score),
-          w,
-          filled ? toHeight(score) : 1,
-          colorCallback(feature, score),
-        )
-      } else if (summaryScoreMode === 'min') {
-        score = summary ? minr : score
-        fillRect(
-          ctx,
-          leftPx,
-          toY(score),
-          w,
-          filled ? toHeight(score) : 1,
-          colorCallback(feature, score),
-        )
-      } else if (summaryScoreMode === 'whiskers') {
-        const c = colorCallback(feature, score)
-        if (summary) {
-          fillRect(
-            ctx,
-            leftPx,
-            toY(maxr),
-            w,
-            filled ? toHeight(maxr) - toHeight(score) : 1,
-            crossingOrigin
-              ? colorCallback(feature, maxr)
-              : Color(c).lighten(0.6),
-          )
-        }
-
-        // normal
-        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) {
-          fillRect(
-            ctx,
-            leftPx,
-            toY(minr),
-            w,
-            filled ? toHeight(minr) : 1,
-            crossingOrigin
-              ? colorCallback(feature, minr)
-              : Color(c).darken(0.6),
-          )
-        }
-      } else {
-        fillRect(
-          ctx,
-          leftPx,
-          toY(score),
-          w,
-          filled ? toHeight(score) : 1,
-          colorCallback(feature, score),
-        )
-      }
-
-      if (highClipping) {
-        fillRect(ctx, leftPx, 0, w, 4, clipColor)
-      } else if (lowClipping && scaleOpts.scaleType !== 'log') {
-        fillRect(ctx, leftPx, unadjustedHeight - 4, w, 4, clipColor)
-      }
-      if (feature.get('highlighted')) {
-        fillRect(ctx, leftPx, 0, w, height, highlightColor)
-      }
-    }
+    const pivotValue = readConfObject(config, 'bicolorPivotValue')
+    const negColor = readConfObject(config, 'negColor')
+    const posColor = readConfObject(config, 'posColor')
+    const Color = await import('color').then(f => f.default)
 
-    if (displayCrossHatches) {
-      ctx.lineWidth = 1
-      ctx.strokeStyle = 'rgba(200,200,200,0.8)'
-      ticks.values.forEach(tick => {
-        ctx.beginPath()
-        ctx.moveTo(0, Math.round(toY(tick)))
-        ctx.lineTo(width, Math.round(toY(tick)))
-        ctx.stroke()
-      })
-    }
+    return drawXY(ctx, {
+      ...props,
+      colorCallback:
+        readConfObject(config, 'color') === '#f0f'
+          ? (_: Feature, score: number) =>
+              score < pivotValue ? negColor : posColor
+          : (feature: Feature, _score: number) =>
+              readConfObject(config, 'color', { feature }),
+      offset: YSCALEBAR_LABEL_OFFSET,
+      features: [...features.values()],
+      Color,
+    })
   }
 }

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

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