@jbrowse/plugin-wiggle 2.6.1 → 2.6.2

package/src/MultiLinearWiggleDisplay/components/util.ts

@@ -1,33 +0,0 @@
-export function moveUp(arr: { name: string }[], sel: string[], by = 1) {
-  const idxs = sel
-    .map(l => arr.findIndex(v => v.name === l))
-    .sort((a, b) => a - b)
-  let lastIdx = 0
-  for (let i = 0; i < idxs.length; i++) {
-    const old = idxs[i]
-    const idx = Math.max(lastIdx, old - by)
-    if (idx >= lastIdx) {
-      arr.splice(idx, 0, arr.splice(old, 1)[0])
-    }
-    lastIdx = lastIdx + 1
-  }
-
-  return arr
-}
-
-export function moveDown(arr: { name: string }[], sel: string[], by = 1) {
-  const idxs = sel
-    .map(l => arr.findIndex(v => v.name === l))
-    .sort((a, b) => b - a)
-  let lastIdx = arr.length - 1
-  for (let i = 0; i < idxs.length; i++) {
-    const old = idxs[i]
-    const idx = Math.min(lastIdx, old + by)
-    if (idx <= lastIdx) {
-      arr.splice(idx, 0, arr.splice(old, 1)[0])
-    }
-    lastIdx = lastIdx - 1
-  }
-
-  return arr
-}

package/src/MultiLinearWiggleDisplay/index.ts

@@ -1,21 +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)
-    return new DisplayType({
-      name: 'MultiLinearWiggleDisplay',
-      displayName: 'Multi-wiggle display',
-      configSchema,
-      stateModel: modelFactory(pluginManager, configSchema),
-      trackType: 'MultiQuantitativeTrack',
-      viewType: 'LinearGenomeView',
-      ReactComponent: lazy(() => import('./components/WiggleDisplayComponent')),
-    })
-  })
-}

package/src/MultiLinearWiggleDisplay/models/configSchema.ts

@@ -1,74 +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 MultiLinearWiggleDisplay
- */
-function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
-
-export default function WiggleConfigFactory(pluginManager: PluginManager) {
-  const MultiXYPlotRendererConfigSchema = pluginManager.getRendererType(
-    'MultiXYPlotRenderer',
-  ).configSchema
-  const MultiDensityRendererConfigSchema = pluginManager.getRendererType(
-    'MultiDensityRenderer',
-  ).configSchema
-  const MultiRowXYPlotRendererConfigSchema = pluginManager.getRendererType(
-    'MultiRowXYPlotRenderer',
-  ).configSchema
-  const MultiLineRendererConfigSchema =
-    pluginManager.getRendererType('MultiLineRenderer').configSchema
-  const MultiRowLineRendererConfigSchema = pluginManager.getRendererType(
-    'MultiRowLineRenderer',
-  ).configSchema
-
-  return ConfigurationSchema(
-    'MultiLinearWiggleDisplay',
-    {
-      /**
-       * #slot
-       */
-      defaultRendering: {
-        type: 'stringEnum',
-        model: types.enumeration('Rendering', [
-          'multirowxy',
-          'xyplot',
-          'multirowdensity',
-          'multiline',
-          'multirowline',
-        ]),
-        defaultValue: 'multirowxy',
-      },
-
-      /**
-       * #slot
-       */
-      renderers: ConfigurationSchema('RenderersConfiguration', {
-        MultiXYPlotRenderer: MultiXYPlotRendererConfigSchema,
-        MultiDensityRenderer: MultiDensityRendererConfigSchema,
-        MultiRowXYPlotRenderer: MultiRowXYPlotRendererConfigSchema,
-        MultiLineRenderer: MultiLineRendererConfigSchema,
-        MultiRowLineRenderer: MultiRowLineRendererConfigSchema,
-      }),
-
-      /**
-       * #slot
-       */
-      height: {
-        type: 'number',
-        defaultValue: 200,
-      },
-    },
-    {
-      /**
-       * #baseConfiguration
-       */
-      baseConfiguration: sharedWiggleConfigFactory(),
-      explicitlyTyped: true,
-    },
-  )
-}

package/src/MultiLinearWiggleDisplay/models/model.tsx

@@ -1,469 +0,0 @@
-import React, { lazy } from 'react'
-import { addDisposer, isAlive, types, Instance } from 'mobx-state-tree'
-import { autorun } from 'mobx'
-import { axisPropsFromTickScale } from 'react-d3-axis-mod'
-import deepEqual from 'fast-deep-equal'
-
-// jbrowse imports
-import {
-  AnyConfigurationSchemaType,
-  getConf,
-} from '@jbrowse/core/configuration'
-import { getSession, Feature } from '@jbrowse/core/util'
-import { getRpcSessionId } from '@jbrowse/core/util/tracks'
-import { set1 as colors } from '@jbrowse/core/ui/colors'
-import PluginManager from '@jbrowse/core/PluginManager'
-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'
-
-const randomColor = () =>
-  '#000000'.replaceAll('0', () => (~~(Math.random() * 16)).toString(16))
-
-// lazies
-const SetColorDlg = lazy(() => import('../components/SetColorDialog'))
-
-// using a map because it preserves order
-const rendererTypes = new Map([
-  ['xyplot', 'MultiXYPlotRenderer'],
-  ['multirowxy', 'MultiRowXYPlotRenderer'],
-  ['multirowdensity', 'MultiDensityRenderer'],
-  ['multiline', 'MultiLineRenderer'],
-  ['multirowline', 'MultiRowLineRenderer'],
-])
-
-interface Source {
-  name: string
-  color?: string
-  group?: string
-}
-
-/**
- * #stateModel MultiLinearWiggleDisplay
- * extends `SharedWiggleMixin`
- */
-export function stateModelFactory(
-  pluginManager: PluginManager,
-  configSchema: AnyConfigurationSchemaType,
-) {
-  return types
-    .compose(
-      'MultiLinearWiggleDisplay',
-      SharedWiggleMixin(configSchema),
-      types.model({
-        /**
-         * #property
-         */
-        type: types.literal('MultiLinearWiggleDisplay'),
-
-        /**
-         * #property
-         */
-        layout: types.optional(types.frozen<Source[]>(), []),
-      }),
-    )
-    .volatile(() => ({
-      featureUnderMouseVolatile: undefined as Feature | undefined,
-      sourcesVolatile: undefined as Source[] | undefined,
-    }))
-    .actions(self => ({
-      /**
-       * #action
-       */
-      setLayout(layout: Source[]) {
-        self.layout = layout
-      },
-      /**
-       * #action
-       */
-      clearLayout() {
-        self.layout = []
-      },
-
-      /**
-       * #action
-       */
-      setSources(sources: Source[]) {
-        if (!deepEqual(sources, self.sourcesVolatile)) {
-          self.sourcesVolatile = sources
-        }
-      },
-
-      /**
-       * #action
-       */
-      setFeatureUnderMouse(f?: Feature) {
-        self.featureUnderMouseVolatile = f
-      },
-    }))
-    .views(self => ({
-      /**
-       * #getter
-       */
-      get featureUnderMouse() {
-        return self.featureUnderMouseVolatile
-      },
-      /**
-       * #getter
-       */
-      get TooltipComponent() {
-        return Tooltip as unknown 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 needsScalebar() {
-        return (
-          self.rendererTypeName === 'MultiXYPlotRenderer' ||
-          self.rendererTypeName === 'MultiRowXYPlotRenderer' ||
-          self.rendererTypeName === 'MultiLineRenderer' ||
-          self.rendererTypeName === 'MultiRowLineRenderer'
-        )
-      },
-      /**
-       * #getter
-       */
-      get needsFullHeightScalebar() {
-        return (
-          self.rendererTypeName === 'MultiXYPlotRenderer' ||
-          self.rendererTypeName === 'MultiLineRenderer'
-        )
-      },
-      /**
-       * #getter
-       */
-      get isMultiRow() {
-        return (
-          self.rendererTypeName === 'MultiRowXYPlotRenderer' ||
-          self.rendererTypeName === 'MultiRowLineRenderer' ||
-          self.rendererTypeName === 'MultiDensityRenderer'
-        )
-      },
-      /**
-       * #getter
-       * can be used to give it a "color scale" like a R heatmap, not
-       * implemented like this yet but flag can be used for this
-       */
-      get needsCustomLegend() {
-        return self.rendererTypeName === 'MultiDensityRenderer'
-      },
-
-      get canHaveFill() {
-        return (
-          self.rendererTypeName === 'MultiXYPlotRenderer' ||
-          self.rendererTypeName === 'MultiRowXYPlotRenderer'
-        )
-      },
-      /**
-       * #getter
-       * the multirowxy and multiline don't need to use colors on the legend
-       * boxes since their track is drawn with the color. sort of a stylistic
-       * choice
-       */
-      get renderColorBoxes() {
-        return !(
-          self.rendererTypeName === 'MultiRowLineRenderer' ||
-          self.rendererTypeName === 'MultiRowXYPlotRenderer'
-        )
-      },
-      /**
-       * #getter
-       * positions multi-row below the tracklabel even if using overlap
-       * tracklabels for everything else
-       */
-      get prefersOffset() {
-        return this.isMultiRow
-      },
-      /**
-       * #getter
-       */
-      get sources() {
-        const sources = Object.fromEntries(
-          self.sourcesVolatile?.map(s => [s.name, s]) || [],
-        )
-        const iter = self.layout.length ? self.layout : self.sourcesVolatile
-        return iter
-          ?.map(s => ({
-            ...sources[s.name],
-            ...s,
-          }))
-          .map((s, i) => ({
-            ...s,
-            color:
-              s.color ||
-              (!this.isMultiRow ? colors[i] || randomColor() : 'blue'),
-          }))
-      },
-    }))
-
-    .views(self => ({
-      /**
-       * #getter
-       */
-      get rowHeight() {
-        const { sources, height, isMultiRow } = self
-        return isMultiRow ? height / (sources?.length || 1) : height
-      },
-      /**
-       * #getter
-       */
-      get rowHeightTooSmallForScalebar() {
-        return this.rowHeight < 70
-      },
-
-      /**
-       * #getter
-       */
-      get useMinimalTicks() {
-        return (
-          getConf(self, 'minimalTicks') || this.rowHeightTooSmallForScalebar
-        )
-      },
-    }))
-    .views(self => ({
-      /**
-       * #getter
-       */
-      get ticks() {
-        const { scaleType, domain, isMultiRow, rowHeight, useMinimalTicks } =
-          self
-
-        if (!domain) {
-          return undefined
-        }
-
-        const offset = isMultiRow ? 0 : YSCALEBAR_LABEL_OFFSET
-        const ticks = axisPropsFromTickScale(
-          getScale({
-            scaleType,
-            domain,
-            range: [rowHeight - offset, offset],
-            inverted: getConf(self, 'inverted') as boolean,
-          }),
-          4,
-        )
-        return useMinimalTicks ? { ...ticks, values: domain } : ticks
-      },
-
-      /**
-       * #getter
-       */
-      get colors() {
-        return [
-          'red',
-          'blue',
-          'green',
-          'orange',
-          'purple',
-          'cyan',
-          'pink',
-          'darkblue',
-          'darkred',
-          'pink',
-        ]
-      },
-    }))
-    .views(self => {
-      const { renderProps: superRenderProps } = self
-      return {
-        /**
-         * #method
-         */
-        renderProps() {
-          const superProps = superRenderProps()
-          const {
-            displayCrossHatches,
-            filters,
-            height,
-            resolution,
-            rpcDriverName,
-            scaleOpts,
-            stats,
-            sources,
-            ticks,
-            rendererConfig: config,
-          } = self
-          return {
-            ...superProps,
-            notReady: superProps.notReady || !sources || !stats,
-            displayModel: self,
-            config,
-            displayCrossHatches,
-            filters,
-            height,
-            resolution,
-            rpcDriverName,
-            scaleOpts,
-            sources,
-            ticks,
-            onMouseMove: (_: unknown, f: Feature) =>
-              self.setFeatureUnderMouse(f),
-            onMouseLeave: () => self.setFeatureUnderMouse(undefined),
-          }
-        },
-
-        /**
-         * #getter
-         */
-        get hasResolution() {
-          return self.adapterCapabilities.includes('hasResolution')
-        },
-
-        /**
-         * #getter
-         */
-        get hasGlobalStats() {
-          return self.adapterCapabilities.includes('hasGlobalStats')
-        },
-
-        /**
-         * #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',
-                      'multirowxy',
-                      'multirowdensity',
-                      'multiline',
-                      'multirowline',
-                    ].map(key => ({
-                      label: key,
-                      type: 'radio',
-                      checked: self.rendererTypeNameSimple === key,
-                      onClick: () => self.setRendererType(key),
-                    })),
-                  },
-                ]
-              : []),
-
-            {
-              label: 'Edit colors/arrangement...',
-              onClick: () => {
-                getSession(self).queueDialog(handleClose => [
-                  SetColorDlg,
-                  { model: self, handleClose },
-                ])
-              },
-            },
-          ]
-        },
-      }
-    })
-    .actions(self => {
-      const { renderSvg: superRenderSvg } = self
-      return {
-        afterAttach() {
-          quantitativeStatsAutorun(self)
-          addDisposer(
-            self,
-            autorun(async () => {
-              const { rpcManager } = getSession(self)
-              const { adapterConfig } = self
-              const sessionId = getRpcSessionId(self)
-              const sources = (await rpcManager.call(
-                sessionId,
-                'MultiWiggleGetSources',
-                {
-                  sessionId,
-                  adapterConfig,
-                },
-              )) as Source[]
-              if (isAlive(self)) {
-                self.setSources(sources)
-              }
-            }),
-          )
-        },
-
-        /**
-         * #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/MultiLinearWiggleDisplay/models/renderSvg.tsx

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

package/src/MultiQuantitativeTrack/configSchema.ts

@@ -1,23 +0,0 @@
-import { ConfigurationSchema } from '@jbrowse/core/configuration'
-import { createBaseTrackConfig } from '@jbrowse/core/pluggableElementTypes/models'
-import PluginManager from '@jbrowse/core/PluginManager'
-
-/**
- * #config MultiQuantitativeTrack
- */
-function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
-
-const configSchema = (pluginManager: PluginManager) => {
-  return ConfigurationSchema(
-    'MultiQuantitativeTrack',
-    {},
-    {
-      /**
-       * #baseConfiguration
-       */
-      baseConfiguration: createBaseTrackConfig(pluginManager),
-    },
-  )
-}
-
-export default configSchema

package/src/MultiQuantitativeTrack/index.ts

@@ -1,20 +0,0 @@
-import { createBaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models'
-import TrackType from '@jbrowse/core/pluggableElementTypes/TrackType'
-import PluginManager from '@jbrowse/core/PluginManager'
-import configSchemaF from './configSchema'
-
-export default (pluginManager: PluginManager) => {
-  pluginManager.addTrackType(() => {
-    const configSchema = configSchemaF(pluginManager)
-    return new TrackType({
-      name: 'MultiQuantitativeTrack',
-      displayName: 'Multi-quantitative track',
-      configSchema,
-      stateModel: createBaseTrackModel(
-        pluginManager,
-        'MultiQuantitativeTrack',
-        configSchema,
-      ),
-    })
-  })
-}

package/src/MultiRowLineRenderer/MultiRowLineRenderer.ts

@@ -1,35 +0,0 @@
-import { groupBy, Feature } from '@jbrowse/core/util'
-import { drawLine } from '../drawxy'
-import WiggleBaseRenderer, {
-  MultiRenderArgsDeserialized as MultiArgs,
-} from '../WiggleBaseRenderer'
-
-export default class MultiRowLineRenderer 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 { reducedFeatures } = drawLine(ctx, {
-        ...props,
-        features: groups[source.name],
-        height,
-        colorCallback: () => source.color || 'blue',
-      })
-      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 }
-  }
-}