@jbrowse/plugin-wiggle 2.5.0 → 2.6.1

package/src/MultiLinearWiggleDisplay/models/renderSvg.tsx

@@ -0,0 +1,26 @@
+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/MultiRowLineRenderer/MultiRowLineRenderer.ts

@@ -1,5 +1,4 @@
-import { Feature } from '@jbrowse/core/util'
-import { groupBy } from '../util'
+import { groupBy, Feature } from '@jbrowse/core/util'
 import { drawLine } from '../drawxy'
 import WiggleBaseRenderer, {
   MultiRenderArgsDeserialized as MultiArgs,

package/src/MultiRowXYPlotRenderer/MultiRowXYPlotRenderer.ts

@@ -1,5 +1,4 @@
-import { Feature } from '@jbrowse/core/util'
-import { groupBy } from '../util'
+import { groupBy, Feature } from '@jbrowse/core/util'
 import { drawXY } from '../drawxy'
 
 import WiggleBaseRenderer, {

package/src/MultiWiggleAddTrackWidget/AddTrackWorkflow.tsx

@@ -77,7 +77,7 @@ export default function MultiWiggleWidget({ model }: { model: AddTrackModel }) {
           const session = getSession(model)
 
           const trackId = [
-            `${trackName.toLowerCase().replace(/ /g, '_')}-${Date.now()}`,
+            `${trackName.toLowerCase().replaceAll(' ', '_')}-${Date.now()}`,
             `${session.adminMode ? '' : '-sessionTrack'}`,
           ].join('')
 

package/src/MultiXYPlotRenderer/MultiXYPlotRenderer.ts

@@ -1,6 +1,6 @@
-import { Feature } from '@jbrowse/core/util'
+import { groupBy, Feature } from '@jbrowse/core/util'
 import { drawXY } from '../drawxy'
-import { groupBy, YSCALEBAR_LABEL_OFFSET } from '../util'
+import { YSCALEBAR_LABEL_OFFSET } from '../util'
 
 import WiggleBaseRenderer, {
   MultiRenderArgsDeserialized as MultiArgs,

package/src/shared/YScaleBar.tsx

@@ -3,11 +3,13 @@ import { useTheme } from '@mui/material'
 import { observer } from 'mobx-react'
 import { axisPropsFromTickScale, Axis, LEFT, RIGHT } from 'react-d3-axis-mod'
 
-export default observer(function ({
+type Ticks = ReturnType<typeof axisPropsFromTickScale>
+
+export default observer(function YScaleBar({
   model,
   orientation,
 }: {
-  model: { ticks?: ReturnType<typeof axisPropsFromTickScale> }
+  model: { ticks?: Ticks }
   orientation?: string
 }) {
   const { ticks } = model

package/src/shared/configShared.ts

@@ -0,0 +1,90 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
+import { baseLinearDisplayConfigSchema } from '@jbrowse/plugin-linear-genome-view'
+import { types } from 'mobx-state-tree'
+
+/**
+ * #config SharedWiggleDisplay
+ */
+export default function sharedWiggleConfigFactory() {
+  return ConfigurationSchema(
+    'MultiLinearWiggleDisplay',
+    {
+      /**
+       * #slot
+       */
+      autoscale: {
+        type: 'stringEnum',
+        defaultValue: 'local',
+        model: types.enumeration('Autoscale type', [
+          'global',
+          'local',
+          'globalsd',
+          'localsd',
+          'zscore',
+        ]),
+        description:
+          'global/local using their min/max values or w/ standard deviations (globalsd/localsd)',
+      },
+
+      /**
+       * #slot
+       */
+      minimalTicks: {
+        type: 'boolean',
+        defaultValue: false,
+        description: 'use the minimal amount of ticks',
+      },
+
+      /**
+       * #slot
+       */
+      minScore: {
+        type: 'number',
+        defaultValue: Number.MIN_VALUE,
+        description: 'minimum value for the y-scale',
+      },
+      /**
+       * #slot
+       */
+      maxScore: {
+        type: 'number',
+        description: 'maximum value for the y-scale',
+        defaultValue: Number.MAX_VALUE,
+      },
+      /**
+       * #slot
+       */
+      numStdDev: {
+        type: 'number',
+        description:
+          'number of standard deviations to use for autoscale types globalsd or localsd',
+        defaultValue: 3,
+      },
+      /**
+       * #slot
+       */
+      scaleType: {
+        type: 'stringEnum',
+        model: types.enumeration('Scale type', ['linear', 'log']), // todo zscale
+        description: 'The type of scale to use',
+        defaultValue: 'linear',
+      },
+
+      /**
+       * #slot
+       */
+      inverted: {
+        type: 'boolean',
+        description: 'draw upside down',
+        defaultValue: false,
+      },
+    },
+    {
+      /**
+       * #baseConfiguration
+       */
+      baseConfiguration: baseLinearDisplayConfigSchema,
+      explicitlyTyped: true,
+    },
+  )
+}

package/src/shared/modelShared.ts

@@ -0,0 +1,510 @@
+import {
+  AnyConfigurationSchemaType,
+  ConfigurationReference,
+  getConf,
+  readConfObject,
+} from '@jbrowse/core/configuration'
+import {
+  Feature,
+  getEnv,
+  getSession,
+  isSelectionContainer,
+} from '@jbrowse/core/util'
+import { BaseLinearDisplay } from '@jbrowse/plugin-linear-genome-view'
+import { types } from 'mobx-state-tree'
+
+// locals
+import { getNiceDomain } from '../util'
+import { lazy } from 'react'
+
+// lazies
+const SetMinMaxDlg = lazy(() => import('./SetMinMaxDialog'))
+
+/**
+ * #stateModel SharedWiggleMixin
+ */
+export default function SharedWiggleMixin(
+  configSchema: AnyConfigurationSchemaType,
+) {
+  return types
+    .compose(
+      BaseLinearDisplay,
+      types.model({
+        /**
+         * #property
+         */
+        selectedRendering: types.optional(types.string, ''),
+        /**
+         * #property
+         */
+        resolution: types.optional(types.number, 1),
+        /**
+         * #property
+         */
+        fill: types.maybe(types.boolean),
+        /**
+         * #property
+         */
+        minSize: types.maybe(types.number),
+        /**
+         * #property
+         */
+        color: types.maybe(types.string),
+        /**
+         * #property
+         */
+        posColor: types.maybe(types.string),
+        /**
+         * #property
+         */
+        negColor: types.maybe(types.string),
+        /**
+         * #property
+         */
+        summaryScoreMode: types.maybe(types.string),
+        /**
+         * #property
+         */
+        rendererTypeNameState: types.maybe(types.string),
+        /**
+         * #property
+         */
+        scale: types.maybe(types.string),
+        /**
+         * #property
+         */
+        autoscale: types.maybe(types.string),
+        /**
+         * #property
+         */
+        displayCrossHatches: types.maybe(types.boolean),
+        /**
+         * #property
+         */
+        constraints: types.optional(
+          types.model({
+            max: types.maybe(types.number),
+            min: types.maybe(types.number),
+          }),
+          {},
+        ),
+        /**
+         * #property
+         */
+        configuration: ConfigurationReference(configSchema),
+      }),
+    )
+    .volatile(() => ({
+      message: undefined as undefined | string,
+      stats: undefined as { scoreMin: number; scoreMax: number } | undefined,
+      statsFetchInProgress: undefined as undefined | AbortController,
+    }))
+    .actions(self => ({
+      /**
+       * #action
+       */
+      updateQuantitativeStats(stats: { scoreMin: number; scoreMax: number }) {
+        const { scoreMin, scoreMax } = stats
+        const EPSILON = 0.000001
+        if (!self.stats) {
+          self.stats = { scoreMin, scoreMax }
+        } else if (
+          Math.abs(self.stats.scoreMax - scoreMax) > EPSILON ||
+          Math.abs(self.stats.scoreMin - scoreMin) > EPSILON
+        ) {
+          self.stats = { scoreMin, scoreMax }
+        }
+      },
+      /**
+       * #action
+       */
+      setColor(color?: string) {
+        self.color = color
+      },
+      /**
+       * #action
+       */
+      setPosColor(color?: string) {
+        self.posColor = color
+      },
+      /**
+       * #action
+       */
+      setNegColor(color?: string) {
+        self.negColor = color
+      },
+
+      /**
+       * #action
+       */
+      setLoading(aborter: AbortController) {
+        const { statsFetchInProgress: statsFetch } = self
+        if (statsFetch !== undefined && !statsFetch.signal.aborted) {
+          statsFetch.abort()
+        }
+        self.statsFetchInProgress = aborter
+      },
+
+      /**
+       * #action
+       * this overrides the BaseLinearDisplayModel to avoid popping up a
+       * feature detail display, but still sets the feature selection on the
+       * model so listeners can detect a click
+       */
+      selectFeature(feature: Feature) {
+        const session = getSession(self)
+        if (isSelectionContainer(session)) {
+          session.setSelection(feature)
+        }
+      },
+
+      /**
+       * #action
+       */
+      setResolution(res: number) {
+        self.resolution = res
+      },
+
+      /**
+       * #action
+       */
+      setFill(fill: number) {
+        if (fill === 0) {
+          self.fill = true
+          self.minSize = 0
+        } else if (fill === 1) {
+          self.fill = false
+          self.minSize = 1
+        } else if (fill === 2) {
+          self.fill = false
+          self.minSize = 2
+        }
+      },
+
+      /**
+       * #action
+       */
+      toggleLogScale() {
+        self.scale = self.scale === 'log' ? 'linear' : 'log'
+      },
+
+      /**
+       * #action
+       */
+      setScaleType(scale?: string) {
+        self.scale = scale
+      },
+
+      /**
+       * #action
+       */
+      setSummaryScoreMode(val: string) {
+        self.summaryScoreMode = val
+      },
+
+      /**
+       * #action
+       */
+      setAutoscale(val: string) {
+        self.autoscale = val
+      },
+
+      /**
+       * #action
+       */
+      setMaxScore(val?: number) {
+        self.constraints.max = val
+      },
+
+      /**
+       * #action
+       */
+      setRendererType(val: string) {
+        self.rendererTypeNameState = val
+      },
+
+      /**
+       * #action
+       */
+      setMinScore(val?: number) {
+        self.constraints.min = val
+      },
+
+      /**
+       * #action
+       */
+      toggleCrossHatches() {
+        self.displayCrossHatches = !self.displayCrossHatches
+      },
+
+      /**
+       * #action
+       */
+      setCrossHatches(cross: boolean) {
+        self.displayCrossHatches = cross
+      },
+    }))
+
+    .views(self => ({
+      /**
+       * #getter
+       */
+      get adapterTypeName() {
+        return self.adapterConfig.type
+      },
+
+      /**
+       * #getter
+       */
+      get rendererTypeNameSimple() {
+        return self.rendererTypeNameState ?? getConf(self, 'defaultRendering')
+      },
+
+      /**
+       * #getter
+       * subclasses can define these, as snpcoverage track does
+       */
+      get filters() {
+        return undefined
+      },
+
+      /**
+       * #getter
+       */
+      get scaleType() {
+        return self.scale ?? getConf(self, 'scaleType')
+      },
+
+      /**
+       * #getter
+       */
+      get maxScore() {
+        return self.constraints.max ?? getConf(self, 'maxScore')
+      },
+
+      /**
+       * #getter
+       */
+      get minScore() {
+        return self.constraints.min ?? getConf(self, 'minScore')
+      },
+    }))
+    .views(self => ({
+      /**
+       * #getter
+       */
+      get adapterCapabilities() {
+        const type = self.adapterTypeName
+        const { pluginManager } = getEnv(self)
+        return pluginManager.getAdapterType(type).adapterCapabilities
+      },
+      /**
+       * #getter
+       */
+      get rendererConfig() {
+        const {
+          color,
+          displayCrossHatches,
+          fill,
+          minSize,
+          negColor,
+          posColor,
+          summaryScoreMode,
+          scaleType,
+          rendererTypeName,
+        } = self
+        const configBlob = getConf(self, ['renderers', rendererTypeName]) || {}
+        return self.rendererType.configSchema.create(
+          {
+            ...configBlob,
+            ...(scaleType ? { scaleType } : {}),
+            ...(fill !== undefined ? { filled: fill } : {}),
+            ...(displayCrossHatches !== undefined
+              ? { displayCrossHatches }
+              : {}),
+            ...(summaryScoreMode !== undefined ? { summaryScoreMode } : {}),
+            ...(color !== undefined ? { color } : {}),
+            ...(negColor !== undefined ? { negColor } : {}),
+            ...(posColor !== undefined ? { posColor } : {}),
+            ...(minSize !== undefined ? { minSize } : {}),
+          },
+          getEnv(self),
+        )
+      },
+
+      /**
+       * #getter
+       */
+      get autoscaleType() {
+        return self.autoscale ?? getConf(self, 'autoscale')
+      },
+    }))
+    .views(self => {
+      let oldDomain: [number, number] = [0, 0]
+      return {
+        /**
+         * #getter
+         */
+        get domain() {
+          const { stats, scaleType, minScore, maxScore } = self
+          if (!stats) {
+            return undefined
+          }
+
+          const ret = getNiceDomain({
+            domain: [stats.scoreMin, stats.scoreMax],
+            bounds: [minScore, maxScore],
+            scaleType,
+          })
+
+          // avoid weird scalebar if log value and empty region displayed
+          if (scaleType === 'log' && ret[1] === Number.MIN_VALUE) {
+            return [0, Number.MIN_VALUE]
+          }
+
+          // avoid returning a new object if it matches the old value
+          if (JSON.stringify(oldDomain) !== JSON.stringify(ret)) {
+            oldDomain = ret
+          }
+
+          return oldDomain
+        },
+      }
+    })
+    .views(self => ({
+      /**
+       * #getter
+       */
+      get filled(): boolean {
+        const { fill, rendererConfig } = self
+        return fill ?? readConfObject(rendererConfig, 'filled')
+      },
+      /**
+       * #getter
+       */
+      get summaryScoreModeSetting(): string {
+        const { summaryScoreMode: mode, rendererConfig } = self
+        return mode ?? readConfObject(rendererConfig, 'summaryScoreMode')
+      },
+
+      /**
+       * #getter
+       */
+      get scaleOpts() {
+        return {
+          domain: self.domain,
+          stats: self.stats,
+          autoscaleType: self.autoscaleType,
+          scaleType: self.scaleType,
+          inverted: getConf(self, 'inverted'),
+        }
+      },
+
+      /**
+       * #getter
+       */
+      get canHaveFill() {
+        return self.rendererTypeName === 'XYPlotRenderer'
+      },
+
+      /**
+       * #getter
+       */
+      get displayCrossHatchesSetting(): boolean {
+        const { displayCrossHatches: hatches, rendererConfig } = self
+        return hatches ?? readConfObject(rendererConfig, 'displayCrossHatches')
+      },
+      /**
+       * #getter
+       */
+      get hasResolution() {
+        return self.adapterCapabilities.includes('hasResolution')
+      },
+
+      /**
+       * #getter
+       */
+      get hasGlobalStats() {
+        return self.adapterCapabilities.includes('hasGlobalStats')
+      },
+    }))
+    .views(self => ({
+      /**
+       * #method
+       */
+      scoreTrackMenuItems() {
+        return [
+          ...(self.hasResolution
+            ? [
+                {
+                  label: 'Resolution',
+                  subMenu: [
+                    {
+                      label: 'Finer resolution',
+                      onClick: () => self.setResolution(self.resolution * 5),
+                    },
+                    {
+                      label: 'Coarser resolution',
+                      onClick: () => self.setResolution(self.resolution / 5),
+                    },
+                  ],
+                },
+                {
+                  label: 'Summary score mode',
+                  subMenu: ['min', 'max', 'avg', 'whiskers'].map(elt => ({
+                    label: elt,
+                    type: 'radio',
+                    checked: self.summaryScoreModeSetting === elt,
+                    onClick: () => self.setSummaryScoreMode(elt),
+                  })),
+                },
+              ]
+            : []),
+          {
+            label:
+              self.scaleType === 'log' ? 'Set linear scale' : 'Set log scale',
+            onClick: () => self.toggleLogScale(),
+          },
+          {
+            label: 'Autoscale type',
+            subMenu: [
+              ['local', 'Local'],
+              ...(self.hasGlobalStats
+                ? [
+                    ['global', 'Global'],
+                    ['globalsd', 'Global ± 3σ'],
+                  ]
+                : []),
+              ['localsd', 'Local ± 3σ'],
+            ].map(([val, label]) => ({
+              label,
+              type: 'radio',
+              checked: self.autoscaleType === val,
+              onClick: () => self.setAutoscale(val),
+            })),
+          },
+          {
+            label: 'Set min/max score',
+            onClick: () => {
+              getSession(self).queueDialog(handleClose => [
+                SetMinMaxDlg,
+                { model: self, handleClose },
+              ])
+            },
+          },
+        ]
+      },
+    }))
+    .actions(self => {
+      const { reload: superReload } = self
+      return {
+        /**
+         * #action
+         */
+        async reload() {
+          self.setError()
+          superReload()
+        },
+      }
+    })
+}

package/src/util.ts

@@ -167,15 +167,6 @@ export function getNiceDomain({
   return scale.domain() as [number, number]
 }
 
-export function groupBy<T>(array: T[], predicate: (v: T) => string) {
-  const result = {} as { [key: string]: T[] }
-  for (const value of array) {
-    const entry = (result[predicate(value)] ||= [])
-    entry.push(value)
-  }
-  return result
-}
-
 export async function getQuantitativeStats(
   self: {
     adapterConfig: AnyConfigurationModel
@@ -205,7 +196,7 @@ export async function getQuantitativeStats(
   }
 
   if (autoscaleType === 'global' || autoscaleType === 'globalsd') {
-    const results: QuantitativeStats = (await rpcManager.call(
+    const results = (await rpcManager.call(
       sessionId,
       'WiggleGetGlobalQuantitativeStats',
       params,