@jbrowse/plugin-wiggle 2.5.0 → 2.6.1

package/src/LinearWiggleDisplay/models/model.tsx

@@ -1,37 +1,25 @@
 import React, { lazy } from 'react'
 import {
-  ConfigurationReference,
   AnyConfigurationSchemaType,
   getConf,
-  readConfObject,
 } from '@jbrowse/core/configuration'
-import {
-  getEnv,
-  getSession,
-  getContainingView,
-  isSelectionContainer,
-  Feature,
-} from '@jbrowse/core/util'
-import {
-  BaseLinearDisplay,
-  LinearGenomeViewModel,
-} from '@jbrowse/plugin-linear-genome-view'
-import { when } from 'mobx'
+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 {
-  getNiceDomain,
   getScale,
   quantitativeStatsAutorun,
   YSCALEBAR_LABEL_OFFSET,
 } from '../../util'
 
 import Tooltip from '../components/Tooltip'
-import YScaleBar from '../../shared/YScaleBar'
+import SharedWiggleMixin from '../../shared/modelShared'
 
-const SetMinMaxDlg = lazy(() => import('../../shared/SetMinMaxDialog'))
+// lazies
 const SetColorDlg = lazy(() => import('../components/SetColorDialog'))
 
 // using a map because it preserves order
@@ -41,11 +29,9 @@ const rendererTypes = new Map([
   ['line', 'LinePlotRenderer'],
 ])
 
-type LGV = LinearGenomeViewModel
-
 /**
  * #stateModel LinearWiggleDisplay
- * Extends `BaseLinearDisplay`
+ * extends `SharedWiggleMixin`
  */
 function stateModelFactory(
   pluginManager: PluginManager,
@@ -54,411 +40,36 @@ function stateModelFactory(
   return types
     .compose(
       'LinearWiggleDisplay',
-      BaseLinearDisplay,
+      SharedWiggleMixin(configSchema),
       types.model({
         /**
          * #property
          */
         type: types.literal('LinearWiggleDisplay'),
-        /**
-         * #property
-         */
-        configuration: ConfigurationReference(configSchema),
-        /**
-         * #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),
-          }),
-          {},
-        ),
       }),
     )
-    .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 TooltipComponent() {
-        return Tooltip as unknown as React.FC
-      },
-
-      /**
-       * #getter
-       */
-      get adapterTypeName() {
-        return self.adapterConfig.type
-      },
-
-      /**
-       * #getter
-       */
-      get rendererTypeNameSimple() {
-        return self.rendererTypeNameState || getConf(self, 'defaultRendering')
+        return Tooltip as React.FC
       },
 
       /**
        * #getter
        */
       get rendererTypeName() {
-        const name = this.rendererTypeNameSimple
+        const name = self.rendererTypeNameSimple
         const rendererType = rendererTypes.get(name)
         if (!rendererType) {
           throw new Error(`unknown renderer ${name}`)
         }
         return rendererType
       },
-
-      /**
-       * #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 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),
-        )
-      },
-    }))
-    .views(self => {
-      let oldDomain: [number, number] = [0, 0]
-      return {
-        /**
-         * #getter
-         */
-        get filled() {
-          return readConfObject(self.rendererConfig, 'filled')
-        },
-        /**
-         * #getter
-         */
-        get summaryScoreModeSetting() {
-          return readConfObject(self.rendererConfig, 'summaryScoreMode')
-        },
-        /**
-         * #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
-        },
-
-        /**
-         * #getter
-         */
-        get needsScalebar() {
-          return (
-            self.rendererTypeName === 'XYPlotRenderer' ||
-            self.rendererTypeName === 'LinePlotRenderer'
-          )
-        },
-        /**
-         * #getter
-         */
-        get scaleOpts() {
-          return {
-            domain: this.domain,
-            stats: self.stats,
-            autoscaleType: this.autoscaleType,
-            scaleType: self.scaleType,
-            inverted: getConf(self, 'inverted'),
-          }
-        },
-
-        /**
-         * #getter
-         */
-        get canHaveFill() {
-          return self.rendererTypeName === 'XYPlotRenderer'
-        },
-
-        /**
-         * #getter
-         */
-        get autoscaleType() {
-          return self.autoscale ?? getConf(self, 'autoscale')
-        },
-
-        /**
-         * #getter
-         */
-        get displayCrossHatchesSetting() {
-          return readConfObject(self.rendererConfig, 'displayCrossHatches')
-        },
-      }
-    })
     .views(self => ({
       /**
        * #getter
@@ -482,14 +93,6 @@ function stateModelFactory(
           ? { ...ticks, values: domain }
           : ticks
       },
-
-      /**
-       * #getter
-       */
-      get adapterCapabilities() {
-        const type = self.adapterTypeName
-        return pluginManager.getAdapterType(type).adapterCapabilities
-      },
     }))
     .views(self => {
       const { renderProps: superRenderProps } = self
@@ -514,20 +117,14 @@ function stateModelFactory(
             filters,
           }
         },
-        /**
-         * #getter
-         */
-        get hasResolution() {
-          return self.adapterCapabilities.includes('hasResolution')
-        },
 
         /**
          * #getter
          */
-        get hasGlobalStats() {
-          return self.adapterCapabilities.includes('hasGlobalStats')
+        get needsScalebar() {
+          const { rendererTypeName: type } = self
+          return type === 'XYPlotRenderer' || type === 'LinePlotRenderer'
         },
-
         /**
          * #getter
          */
@@ -552,32 +149,10 @@ function stateModelFactory(
         trackMenuItems() {
           return [
             ...superTrackMenuItems(),
-            ...(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: 'Score',
+              subMenu: self.scoreTrackMenuItems(),
+            },
 
             ...(self.canHaveFill
               ? [
@@ -594,11 +169,6 @@ function stateModelFactory(
                   },
                 ]
               : []),
-            {
-              label:
-                self.scaleType === 'log' ? 'Set linear scale' : 'Set log scale',
-              onClick: () => self.toggleLogScale(),
-            },
 
             ...(self.needsScalebar
               ? [
@@ -624,33 +194,7 @@ function stateModelFactory(
                   },
                 ]
               : []),
-            {
-              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 },
-                ])
-              },
-            },
+
             {
               label: 'Set color',
               onClick: () => {
@@ -665,43 +209,18 @@ function stateModelFactory(
       }
     })
     .actions(self => {
-      const { reload: superReload, renderSvg: superRenderSvg } = self
-
-      type ExportSvgOpts = Parameters<typeof superRenderSvg>[0]
+      const { renderSvg: superRenderSvg } = self
 
       return {
-        /**
-         * #action
-         * re-runs stats and refresh whole display on reload
-         */
-        async reload() {
-          self.setError()
-          superReload()
-        },
-
         afterAttach() {
           quantitativeStatsAutorun(self)
         },
         /**
          * #action
          */
-        async renderSvg(opts: ExportSvgOpts) {
-          await when(() => !!self.stats && !!self.regionCannotBeRenderedText)
-          const { needsScalebar, stats } = self
-          const { offsetPx } = getContainingView(self) as LGV
-          return (
-            <>
-              <g id="snpcov">{await superRenderSvg(opts)}</g>
-              {needsScalebar && stats ? (
-                <g transform={`translate(${Math.max(-offsetPx, 0)})`}>
-                  <YScaleBar
-                    model={self as WiggleDisplayModel}
-                    orientation="left"
-                  />
-                </g>
-              ) : null}
-            </>
-          )
+        async renderSvg(opts: ExportSvgDisplayOptions) {
+          const { renderSvg } = await import('./renderSvg')
+          return renderSvg(self, opts, superRenderSvg)
         },
       }
     })

package/src/LinearWiggleDisplay/models/renderSvg.tsx

@@ -0,0 +1,29 @@
+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,5 +1,4 @@
-import { Feature } from '@jbrowse/core/util'
-import { groupBy } from '../util'
+import { groupBy, Feature } from '@jbrowse/core/util'
 import WiggleBaseRenderer, {
   MultiRenderArgsDeserialized as MultiArgs,
 } from '../WiggleBaseRenderer'

package/src/MultiLineRenderer/MultiLineRenderer.ts

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

package/src/MultiLinearWiggleDisplay/components/SetColorDialog.tsx

@@ -13,7 +13,6 @@ import clone from 'clone'
 // locals
 import DraggableDialog from './DraggableDialog'
 import ColorPicker, { ColorPopover } from '@jbrowse/core/ui/ColorPicker'
-import { UriLink } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail'
 import { moveUp, moveDown } from './util'
 import { Source } from '../../util'
 
@@ -22,6 +21,7 @@ import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp
 import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown'
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'
+import UriLink from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/UriLink'
 
 const useStyles = makeStyles()({
   content: {