@jbrowse/plugin-wiggle 2.6.1 → 2.6.2

package/src/CreateMultiWiggleExtension/index.ts

@@ -1,66 +0,0 @@
-import { lazy } from 'react'
-import PluginManager from '@jbrowse/core/PluginManager'
-import { readConfObject } from '@jbrowse/core/configuration'
-import { getSession, isSessionWithAddTracks } 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',
-    (items: unknown[], props: Record<string, unknown>) => {
-      const { session } = props
-      return [
-        ...items,
-        ...(isSessionWithAddTracks(session)
-          ? [
-              {
-                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.flatMap(c => readConfObject(c, 'assemblyNames')),
-                      ),
-                    ]
-                    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 && arg1) {
-                          makeTrack(arg1)
-                        }
-                        handleClose()
-                      },
-                    },
-                  ])
-                },
-              },
-            ]
-          : []),
-      ]
-    },
-  )
-}

package/src/DensityRenderer/DensityRenderer.test.ts

@@ -1,62 +0,0 @@
-import SimpleFeature from '@jbrowse/core/util/simpleFeature'
-import { renderToAbstractCanvas } from '@jbrowse/core/util/offscreenCanvasUtils'
-import DensityRenderer from './DensityRenderer'
-import configSchema from './configSchema'
-import ReactComponent from '../WiggleRendering'
-
-import { Image, createCanvas } from 'canvas'
-
-// @ts-expect-error
-global.nodeImage = Image
-
-// @ts-expect-error
-global.nodeCreateCanvas = createCanvas
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const pluginManager = {} as any
-
-const renderer = new DensityRenderer({
-  name: 'DensityRenderer',
-  ReactComponent,
-  configSchema,
-  pluginManager,
-})
-
-test('inverted mode and reversed', async () => {
-  const renderProps = {
-    features: [
-      new SimpleFeature({ id: 't1', data: { start: 1, end: 100, score: 1 } }),
-      new SimpleFeature({ id: 't2', data: { start: 101, end: 200, score: 2 } }),
-    ],
-    regions: [
-      {
-        end: 100,
-        start: 1,
-        reversed: true,
-        refName: 'ctgA',
-        assemblyName: 'volvox',
-      },
-    ],
-    scaleOpts: {
-      domain: [0, 100],
-      range: [0, 200],
-      inverted: true,
-      scaleType: 'linear',
-    },
-    config: {
-      posColor: 'red',
-      negColor: 'blue',
-    },
-    bpPerPx: 3,
-    highResolutionScaling: 1,
-    height: 100,
-  }
-
-  const res = await renderToAbstractCanvas(1000, 200, renderProps, ctx =>
-    // @ts-expect-error
-    renderer.draw(ctx, renderProps),
-  )
-  expect(res).toMatchSnapshot({
-    imageData: expect.any(Object),
-  })
-})

package/src/DensityRenderer/DensityRenderer.ts

@@ -1,14 +0,0 @@
-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.ts.snap

@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`inverted mode and reversed 1`] = `
-{
-  "imageData": Any<Object>,
-  "reducedFeatures": [
-    {
-      "end": 100,
-      "score": 1,
-      "start": 1,
-      "uniqueId": "t1",
-    },
-    {
-      "end": 200,
-      "score": 2,
-      "start": 101,
-      "uniqueId": "t2",
-    },
-  ],
-}
-`;

package/src/DensityRenderer/configSchema.ts

@@ -1,22 +0,0 @@
-import { ConfigurationSchema } from '@jbrowse/core/configuration'
-
-import baseWiggleRendererConfigSchema from '../configSchema'
-
-/**
- * #config DensityRenderer
- */
-function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
-
-const configSchema = ConfigurationSchema(
-  'DensityRenderer',
-  {},
-  {
-    /**
-     * #baseConfiguration
-     */
-    baseConfiguration: baseWiggleRendererConfigSchema,
-    explicitlyTyped: true,
-  },
-)
-
-export default configSchema

package/src/DensityRenderer/index.ts

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

package/src/LinePlotRenderer/LinePlotRenderer.ts

@@ -1,19 +0,0 @@
-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

@@ -1,30 +0,0 @@
-import { ConfigurationSchema } from '@jbrowse/core/configuration'
-import baseWiggleRendererConfigSchema from '../configSchema'
-
-/**
- * #config LinePlotRenderer
- */
-function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
-
-const configSchema = ConfigurationSchema(
-  'LinePlotRenderer',
-  {
-    /**
-     * #slot
-     */
-    displayCrossHatches: {
-      type: 'boolean',
-      description: 'choose to draw cross hatches (sideways lines)',
-      defaultValue: false,
-    },
-  },
-  {
-    /**
-     * #baseConfiguration
-     */
-    baseConfiguration: baseWiggleRendererConfigSchema,
-    explicitlyTyped: true,
-  },
-)
-
-export default configSchema

package/src/LinePlotRenderer/index.ts

@@ -1,16 +0,0 @@
-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,107 +0,0 @@
-import React, { useState } from 'react'
-import { observer } from 'mobx-react'
-import {
-  Button,
-  DialogContent,
-  DialogActions,
-  FormControlLabel,
-  Radio,
-  Typography,
-} from '@mui/material'
-import { Dialog } from '@jbrowse/core/ui'
-import { ColorPicker } from '@jbrowse/core/ui/ColorPicker'
-
-function SetColorDialog({
-  model,
-  handleClose,
-}: {
-  model: {
-    color?: string
-    posColor?: string
-    negColor?: string
-    setColor: (arg?: string) => void
-    setPosColor: (arg?: string) => void
-    setNegColor: (arg?: string) => void
-  }
-  handleClose: () => void
-}) {
-  const [posneg, setPosNeg] = useState(false)
-
-  return (
-    <Dialog open onClose={handleClose} title="Set color">
-      <DialogContent>
-        <Typography>
-          Select either an overall color, or the positive/negative colors. Note
-          that density renderers only work properly with positive/negative
-          colors
-        </Typography>
-        <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>
-            <ColorPicker
-              color={model.posColor || 'black'}
-              onChange={event => {
-                model.setPosColor(event)
-                model.setColor(undefined)
-              }}
-            />
-            <Typography>Negative color</Typography>
-
-            <ColorPicker
-              color={model.negColor || 'black'}
-              onChange={event => {
-                model.setNegColor(event)
-                model.setColor(undefined)
-              }}
-            />
-          </>
-        ) : (
-          <>
-            <Typography>Overall color</Typography>
-            <ColorPicker
-              color={model.color || 'black'}
-              onChange={event => model.setColor(event)}
-            />
-          </>
-        )}
-      </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>
-  )
-}
-
-export default observer(SetColorDialog)

package/src/LinearWiggleDisplay/components/Tooltip.tsx

@@ -1,59 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react'
-import { Feature } from '@jbrowse/core/util'
-
-// locals
-import Tooltip, { TooltipContentsComponent } from '../../Tooltip'
-import { toP } from '../../util'
-
-const en = (n: number) => n.toLocaleString('en-US')
-
-interface Props {
-  feature: Feature
-}
-
-const TooltipContents = React.forwardRef<HTMLDivElement, Props>(function (
-  { feature },
-  ref,
-) {
-  const start = feature.get('start')
-  const end = feature.get('end')
-  const name = feature.get('refName')
-  const loc = [name, start === end ? en(start) : `${en(start)}..${en(end)}`]
-    .filter(f => !!f)
-    .join(':')
-
-  return feature.get('summary') !== undefined ? (
-    <div ref={ref}>
-      {loc}
-      <br />
-      Max: {toP(feature.get('maxScore'))}
-      <br />
-      Avg: {toP(feature.get('score'))}
-      <br />
-      Min: {toP(feature.get('minScore'))}
-    </div>
-  ) : (
-    <div ref={ref}>
-      {loc}
-      <br />
-      {`${toP(feature.get('score'))}`}
-    </div>
-  )
-})
-
-type Coord = [number, number]
-
-const WiggleTooltip = observer(function (props: {
-  model: { featureUnderMouse: Feature }
-  height: number
-  offsetMouseCoord: Coord
-  clientMouseCoord: Coord
-  clientRect?: DOMRect
-  TooltipContents?: TooltipContentsComponent
-}) {
-  return <Tooltip TooltipContents={TooltipContents} {...props} />
-})
-export default WiggleTooltip
-
-export { default as Tooltip } from '../../Tooltip'

package/src/LinearWiggleDisplay/components/WiggleDisplayComponent.tsx

@@ -1,53 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react'
-import {
-  measureText,
-  getContainingView,
-  getContainingTrack,
-} from '@jbrowse/core/util'
-import { getConf } from '@jbrowse/core/configuration'
-import {
-  BaseLinearDisplayComponent,
-  LinearGenomeViewModel,
-} from '@jbrowse/plugin-linear-genome-view'
-
-// locals
-import { WiggleDisplayModel } from '../models/model'
-import YScaleBar from '../../shared/YScaleBar'
-
-type LGV = LinearGenomeViewModel
-
-const LinearWiggleDisplay = observer((props: { model: WiggleDisplayModel }) => {
-  const { model } = props
-  const { stats, height, needsScalebar } = model
-
-  const { trackLabels } = getContainingView(model) as LGV
-  const track = getContainingTrack(model)
-  const left =
-    trackLabels === 'overlapping'
-      ? measureText(getConf(track, 'name'), 12.8) + 100
-      : 50
-  return (
-    <div>
-      <BaseLinearDisplayComponent {...props} />
-      {stats && needsScalebar ? (
-        <svg
-          style={{
-            position: 'absolute',
-            top: 0,
-            left,
-            pointerEvents: 'none',
-            height,
-            width: 50,
-          }}
-        >
-          <YScaleBar model={model} />
-        </svg>
-      ) : null}
-    </div>
-  )
-})
-
-export default LinearWiggleDisplay
-
-export { default as YScaleBar } from '../../shared/YScaleBar'

package/src/LinearWiggleDisplay/index.ts

@@ -1,26 +0,0 @@
-import PluginManager from '@jbrowse/core/PluginManager'
-import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType'
-
-import configSchemaFactory from './models/configSchema'
-import modelFactory from './models/model'
-import { lazy } from 'react'
-
-export default (pluginManager: PluginManager) => {
-  pluginManager.addDisplayType(() => {
-    const configSchema = configSchemaFactory(pluginManager)
-    const stateModel = modelFactory(pluginManager, configSchema)
-    return new DisplayType({
-      name: 'LinearWiggleDisplay',
-      displayName: 'Wiggle display',
-      configSchema,
-      stateModel,
-      trackType: 'QuantitativeTrack',
-      viewType: 'LinearGenomeView',
-      ReactComponent: lazy(() => import('./components/WiggleDisplayComponent')),
-    })
-  })
-}
-
-export { default as Tooltip } from './components/Tooltip'
-export { default as ReactComponent } from './components/WiggleDisplayComponent'
-export { default as modelFactory } from './models/model'

package/src/LinearWiggleDisplay/models/configSchema.ts

@@ -1,47 +0,0 @@
-import { ConfigurationSchema } from '@jbrowse/core/configuration'
-import { types } from 'mobx-state-tree'
-import PluginManager from '@jbrowse/core/PluginManager'
-
-// locals
-import sharedWiggleConfigFactory from '../../shared/configShared'
-
-/**
- * #config LinearWiggleDisplay
- */
-export default function WiggleConfigFactory(pluginManager: PluginManager) {
-  const XYPlotRendererConfigSchema =
-    pluginManager.getRendererType('XYPlotRenderer').configSchema
-  const DensityRendererConfigSchema =
-    pluginManager.getRendererType('DensityRenderer').configSchema
-  const LinePlotRendererConfigSchema =
-    pluginManager.getRendererType('LinePlotRenderer').configSchema
-
-  return ConfigurationSchema(
-    'LinearWiggleDisplay',
-    {
-      /**
-       * #slot
-       */
-      defaultRendering: {
-        type: 'stringEnum',
-        model: types.enumeration('Rendering', ['density', 'xyplot', 'line']),
-        defaultValue: 'xyplot',
-      },
-      /**
-       * #slot
-       */
-      renderers: ConfigurationSchema('RenderersConfiguration', {
-        DensityRenderer: DensityRendererConfigSchema,
-        XYPlotRenderer: XYPlotRendererConfigSchema,
-        LinePlotRenderer: LinePlotRendererConfigSchema,
-      }),
-    },
-    {
-      /**
-       * #baseConfiguration
-       */
-      baseConfiguration: sharedWiggleConfigFactory(),
-      explicitlyTyped: true,
-    },
-  )
-}