@jbrowse/plugin-wiggle 2.6.1 → 2.6.3

package/src/LinearWiggleDisplay/models/model.tsx

@@ -1,232 +0,0 @@
-import React, { lazy } from 'react'
-import {
-  AnyConfigurationSchemaType,
-  getConf,
-} from '@jbrowse/core/configuration'
-import { getSession } from '@jbrowse/core/util'
-import { types, Instance } from 'mobx-state-tree'
-import PluginManager from '@jbrowse/core/PluginManager'
-import { axisPropsFromTickScale } from 'react-d3-axis-mod'
-import { ExportSvgDisplayOptions } from '@jbrowse/plugin-linear-genome-view'
-
-// locals
-import {
-  getScale,
-  quantitativeStatsAutorun,
-  YSCALEBAR_LABEL_OFFSET,
-} from '../../util'
-
-import Tooltip from '../components/Tooltip'
-import SharedWiggleMixin from '../../shared/modelShared'
-
-// lazies
-const SetColorDlg = lazy(() => import('../components/SetColorDialog'))
-
-// using a map because it preserves order
-const rendererTypes = new Map([
-  ['xyplot', 'XYPlotRenderer'],
-  ['density', 'DensityRenderer'],
-  ['line', 'LinePlotRenderer'],
-])
-
-/**
- * #stateModel LinearWiggleDisplay
- * extends `SharedWiggleMixin`
- */
-function stateModelFactory(
-  pluginManager: PluginManager,
-  configSchema: AnyConfigurationSchemaType,
-) {
-  return types
-    .compose(
-      'LinearWiggleDisplay',
-      SharedWiggleMixin(configSchema),
-      types.model({
-        /**
-         * #property
-         */
-        type: types.literal('LinearWiggleDisplay'),
-      }),
-    )
-
-    .views(self => ({
-      /**
-       * #getter
-       */
-      get TooltipComponent() {
-        return Tooltip as React.FC
-      },
-
-      /**
-       * #getter
-       */
-      get rendererTypeName() {
-        const name = self.rendererTypeNameSimple
-        const rendererType = rendererTypes.get(name)
-        if (!rendererType) {
-          throw new Error(`unknown renderer ${name}`)
-        }
-        return rendererType
-      },
-    }))
-
-    .views(self => ({
-      /**
-       * #getter
-       */
-      get ticks() {
-        const { scaleType, domain, height } = self
-        const minimalTicks = getConf(self, 'minimalTicks')
-        const inverted = getConf(self, 'inverted')
-        const range = [height - YSCALEBAR_LABEL_OFFSET, YSCALEBAR_LABEL_OFFSET]
-        if (!domain) {
-          return undefined
-        }
-        const scale = getScale({
-          scaleType,
-          domain,
-          range,
-          inverted,
-        })
-        const ticks = axisPropsFromTickScale(scale, 4)
-        return height < 100 || minimalTicks
-          ? { ...ticks, values: domain }
-          : ticks
-      },
-    }))
-    .views(self => {
-      const { renderProps: superRenderProps } = self
-      return {
-        /**
-         * #method
-         */
-        renderProps() {
-          const superProps = superRenderProps()
-          const { filters, ticks, height, resolution, scaleOpts } = self
-          return {
-            ...superProps,
-            notReady: superProps.notReady || !self.stats,
-            rpcDriverName: self.rpcDriverName,
-            displayModel: self,
-            config: self.rendererConfig,
-            displayCrossHatches: self.displayCrossHatchesSetting,
-            scaleOpts,
-            resolution,
-            height,
-            ticks,
-            filters,
-          }
-        },
-
-        /**
-         * #getter
-         */
-        get needsScalebar() {
-          const { rendererTypeName: type } = self
-          return type === 'XYPlotRenderer' || type === 'LinePlotRenderer'
-        },
-        /**
-         * #getter
-         */
-        get fillSetting() {
-          if (self.filled) {
-            return 0
-          } else if (!self.filled && self.minSize === 1) {
-            return 1
-          } else {
-            return 2
-          }
-        },
-      }
-    })
-    .views(self => {
-      const { trackMenuItems: superTrackMenuItems } = self
-      const hasRenderings = getConf(self, 'defaultRendering')
-      return {
-        /**
-         * #method
-         */
-        trackMenuItems() {
-          return [
-            ...superTrackMenuItems(),
-            {
-              label: 'Score',
-              subMenu: self.scoreTrackMenuItems(),
-            },
-
-            ...(self.canHaveFill
-              ? [
-                  {
-                    label: 'Fill mode',
-                    subMenu: ['filled', 'no fill', 'no fill w/ emphasis'].map(
-                      (elt, idx) => ({
-                        label: elt,
-                        type: 'radio',
-                        checked: self.fillSetting === idx,
-                        onClick: () => self.setFill(idx),
-                      }),
-                    ),
-                  },
-                ]
-              : []),
-
-            ...(self.needsScalebar
-              ? [
-                  {
-                    type: 'checkbox',
-                    label: 'Draw cross hatches',
-                    checked: self.displayCrossHatchesSetting,
-                    onClick: () => self.toggleCrossHatches(),
-                  },
-                ]
-              : []),
-
-            ...(hasRenderings
-              ? [
-                  {
-                    label: 'Renderer type',
-                    subMenu: ['xyplot', 'density', 'line'].map(key => ({
-                      label: key,
-                      type: 'radio',
-                      checked: self.rendererTypeNameSimple === key,
-                      onClick: () => self.setRendererType(key),
-                    })),
-                  },
-                ]
-              : []),
-
-            {
-              label: 'Set color',
-              onClick: () => {
-                getSession(self).queueDialog(handleClose => [
-                  SetColorDlg,
-                  { model: self, handleClose },
-                ])
-              },
-            },
-          ]
-        },
-      }
-    })
-    .actions(self => {
-      const { renderSvg: superRenderSvg } = self
-
-      return {
-        afterAttach() {
-          quantitativeStatsAutorun(self)
-        },
-        /**
-         * #action
-         */
-        async renderSvg(opts: ExportSvgDisplayOptions) {
-          const { renderSvg } = await import('./renderSvg')
-          return renderSvg(self, opts, superRenderSvg)
-        },
-      }
-    })
-}
-
-export type WiggleDisplayStateModel = ReturnType<typeof stateModelFactory>
-export type WiggleDisplayModel = Instance<WiggleDisplayStateModel>
-
-export default stateModelFactory

package/src/LinearWiggleDisplay/models/renderSvg.tsx

@@ -1,29 +0,0 @@
-import React from 'react'
-import { getContainingView } from '@jbrowse/core/util'
-import { when } from 'mobx'
-import YScaleBar from '../../shared/YScaleBar'
-import {
-  ExportSvgDisplayOptions,
-  LinearGenomeViewModel,
-} from '@jbrowse/plugin-linear-genome-view'
-import { WiggleDisplayModel } from './model'
-
-export async function renderSvg(
-  self: WiggleDisplayModel,
-  opts: ExportSvgDisplayOptions,
-  superRenderSvg: (opts: ExportSvgDisplayOptions) => Promise<React.ReactNode>,
-) {
-  await when(() => !!self.stats && !!self.regionCannotBeRenderedText)
-  const { needsScalebar, stats } = self
-  const { offsetPx } = getContainingView(self) as LinearGenomeViewModel
-  return (
-    <>
-      <g id="snpcov">{await superRenderSvg(opts)}</g>
-      {needsScalebar && stats ? (
-        <g transform={`translate(${Math.max(-offsetPx, 0)})`}>
-          <YScaleBar model={self} orientation="left" />
-        </g>
-      ) : null}
-    </>
-  )
-}

package/src/MultiDensityRenderer/MultiDensityRenderer.ts

@@ -1,38 +0,0 @@
-import { groupBy, Feature } from '@jbrowse/core/util'
-import WiggleBaseRenderer, {
-  MultiRenderArgsDeserialized as MultiArgs,
-} from '../WiggleBaseRenderer'
-import { drawDensity } from '../drawxy'
-
-export default class MultiXYPlotRenderer extends WiggleBaseRenderer {
-  // @ts-expect-error
-  async draw(ctx: CanvasRenderingContext2D, props: MultiArgs) {
-    const { bpPerPx, sources, regions, features } = props
-    const [region] = regions
-    const groups = groupBy([...features.values()], f => f.get('source'))
-    const height = props.height / Object.keys(groups).length
-    const width = (region.end - region.start) / bpPerPx
-    let feats = [] as Feature[]
-    ctx.save()
-    sources.forEach(source => {
-      const features = groups[source.name]
-      if (!features) {
-        return
-      }
-      const { reducedFeatures } = drawDensity(ctx, {
-        ...props,
-        features,
-        height,
-      })
-      ctx.strokeStyle = 'rgba(200,200,200,0.8)'
-      ctx.beginPath()
-      ctx.moveTo(0, height)
-      ctx.lineTo(width, height)
-      ctx.stroke()
-      ctx.translate(0, height)
-      feats = [...feats, ...reducedFeatures]
-    })
-    ctx.restore()
-    return { reducedFeatures: feats }
-  }
-}

package/src/MultiDensityRenderer/configSchema.ts

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

package/src/MultiDensityRenderer/index.ts

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

package/src/MultiLineRenderer/MultiLineRenderer.ts

@@ -1,28 +0,0 @@
-import { groupBy, Feature } from '@jbrowse/core/util'
-import { drawLine } from '../drawxy'
-
-import WiggleBaseRenderer, {
-  MultiRenderArgsDeserialized as MultiArgs,
-} from '../WiggleBaseRenderer'
-
-export default class MultiLineRenderer extends WiggleBaseRenderer {
-  // @ts-expect-error
-  async draw(ctx: CanvasRenderingContext2D, props: MultiArgs) {
-    const { sources, features } = props
-    const groups = groupBy([...features.values()], f => f.get('source'))
-    let feats = [] as Feature[]
-    sources.forEach(source => {
-      const features = groups[source.name]
-      if (!features) {
-        return
-      }
-      const { reducedFeatures } = drawLine(ctx, {
-        ...props,
-        features,
-        colorCallback: () => source.color || 'blue',
-      })
-      feats = [...feats, ...reducedFeatures]
-    })
-    return { reducedFeatures: feats }
-  }
-}

package/src/MultiLineRenderer/configSchema.ts

@@ -1,39 +0,0 @@
-import { ConfigurationSchema } from '@jbrowse/core/configuration'
-import { types } from 'mobx-state-tree'
-import baseWiggleRendererConfigSchema from '../configSchema'
-/**
- * #config MultiLineRenderer
- */
-function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
-
-const configSchema = ConfigurationSchema(
-  'MultiLineRenderer',
-  {
-    /**
-     * #slot
-     */
-    displayCrossHatches: {
-      type: 'boolean',
-      description: 'choose to draw cross hatches (sideways lines)',
-      defaultValue: false,
-    },
-    /**
-     * #slot
-     */
-    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',
-    },
-  },
-  {
-    /**
-     * #baseConfiguration
-     */
-    baseConfiguration: baseWiggleRendererConfigSchema,
-    explicitlyTyped: true,
-  },
-)
-export default configSchema

package/src/MultiLineRenderer/index.ts

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

package/src/MultiLinearWiggleDisplay/components/DraggableDialog.tsx

@@ -1,71 +0,0 @@
-import React from 'react'
-import {
-  Dialog,
-  DialogTitle,
-  IconButton,
-  Divider,
-  DialogProps,
-  Paper,
-  PaperProps,
-  ScopedCssBaseline,
-} from '@mui/material'
-import { observer } from 'mobx-react'
-import { makeStyles } from 'tss-react/mui'
-import Draggable from 'react-draggable'
-
-// icons
-import CloseIcon from '@mui/icons-material/Close'
-
-const useStyles = makeStyles()(theme => ({
-  closeButton: {
-    position: 'absolute',
-    right: theme.spacing(1),
-    top: theme.spacing(1),
-    color: theme.palette.grey[500],
-  },
-}))
-
-// draggable dialog demo https://mui.com/material-ui/react-dialog/#draggable-dialog
-function PaperComponent(props: PaperProps) {
-  return (
-    <Draggable
-      handle="#draggable-dialog-title"
-      cancel={'[class*="MuiDialogContent-root"]'}
-    >
-      <Paper {...props} />
-    </Draggable>
-  )
-}
-
-function DraggableDialog(props: DialogProps & { title: string }) {
-  const { classes } = useStyles()
-  const { title, children, onClose } = props
-
-  return (
-    <Dialog
-      {...props}
-      PaperComponent={PaperComponent}
-      aria-labelledby="draggable-dialog-title" // this area is important for the draggable functionality
-    >
-      <ScopedCssBaseline>
-        <DialogTitle style={{ cursor: 'move' }} id="draggable-dialog-title">
-          {title}
-          {onClose ? (
-            <IconButton
-              className={classes.closeButton}
-              onClick={() => {
-                // @ts-expect-error
-                onClose()
-              }}
-            >
-              <CloseIcon />
-            </IconButton>
-          ) : null}
-        </DialogTitle>
-        <Divider />
-        {children}
-      </ScopedCssBaseline>
-    </Dialog>
-  )
-}
-export default observer(DraggableDialog)