@jbrowse/plugin-linear-genome-view 2.4.2 → 2.6.1

package/src/BaseLinearDisplay/models/FeatureDensityMixin.tsx

@@ -0,0 +1,213 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from 'react'
+import { getConf } from '@jbrowse/core/configuration'
+import { getContainingView } from '@jbrowse/core/util'
+import { FeatureDensityStats } from '@jbrowse/core/data_adapters/BaseAdapter'
+import { Region } from '@jbrowse/core/util/types'
+import { autorun } from 'mobx'
+import { addDisposer, isAlive, types } from 'mobx-state-tree'
+
+// locals
+import { LinearGenomeViewModel } from '../../LinearGenomeView'
+import TooLargeMessage from '../components/TooLargeMessage'
+import { getDisplayStr, getFeatureDensityStatsPre } from './util'
+import autorunFeatureDensityStats from './autorunFeatureDensityStats'
+
+type LGV = LinearGenomeViewModel
+
+/**
+ * #stateModel FeatureDensityMixin
+ * #category display
+ */
+export default function FeatureDensityMixin() {
+  return types
+    .model({
+      /**
+       * #property
+       */
+      userBpPerPxLimit: types.maybe(types.number),
+      /**
+       * #property
+       */
+
+      userByteSizeLimit: types.maybe(types.number),
+    })
+    .volatile(() => ({
+      featureDensityStatsP: undefined as
+        | undefined
+        | Promise<FeatureDensityStats>,
+      featureDensityStats: undefined as undefined | FeatureDensityStats,
+      currStatsBpPerPx: 0,
+    }))
+    .views(self => ({
+      /**
+       * #getter
+       */
+      get currentBytesRequested() {
+        return self.featureDensityStats?.bytes || 0
+      },
+
+      /**
+       * #getter
+       */
+      get currentFeatureScreenDensity() {
+        const view = getContainingView(self) as LGV
+        return (self.featureDensityStats?.featureDensity || 0) * view.bpPerPx
+      },
+
+      /**
+       * #getter
+       */
+      get maxFeatureScreenDensity() {
+        // @ts-expect-error
+        return getConf(self, 'maxFeatureScreenDensity')
+      },
+      /**
+       * #getter
+       */
+      get featureDensityStatsReady() {
+        const view = getContainingView(self)
+        return (
+          self.currStatsBpPerPx === view.bpPerPx &&
+          (!!self.featureDensityStats || !!self.userBpPerPxLimit)
+        )
+      },
+
+      /**
+       * #getter
+       */
+      get maxAllowableBytes() {
+        return (
+          self.userByteSizeLimit ||
+          self.featureDensityStats?.fetchSizeLimit ||
+          // @ts-expect-error
+          (getConf(self, 'fetchSizeLimit') as number)
+        )
+      },
+    }))
+    .actions(self => ({
+      afterAttach() {
+        addDisposer(
+          self,
+          autorun(() => autorunFeatureDensityStats(self as any)),
+        )
+      },
+    }))
+    .actions(self => ({
+      /**
+       * #action
+       */
+      setCurrStatsBpPerPx(n: number) {
+        self.currStatsBpPerPx = n
+      },
+      /**
+       * #action
+       */
+      setFeatureDensityStatsLimit(stats?: FeatureDensityStats) {
+        const view = getContainingView(self) as LGV
+        if (stats?.bytes) {
+          self.userByteSizeLimit = stats.bytes
+        } else {
+          self.userBpPerPxLimit = view.bpPerPx
+        }
+      },
+      /**
+       * #action
+       */
+      async getFeatureDensityStats() {
+        if (!self.featureDensityStatsP) {
+          self.featureDensityStatsP = getFeatureDensityStatsPre(
+            self as any,
+          ).catch(e => {
+            if (isAlive(self)) {
+              this.setFeatureDensityStatsP(undefined)
+            }
+            throw e
+          })
+        }
+        return self.featureDensityStatsP
+      },
+
+      /**
+       * #action
+       */
+      setFeatureDensityStatsP(arg: any) {
+        self.featureDensityStatsP = arg
+      },
+
+      /**
+       * #action
+       */
+      setFeatureDensityStats(featureDensityStats?: FeatureDensityStats) {
+        self.featureDensityStats = featureDensityStats
+      },
+      /**
+       * #action
+       */
+      clearFeatureDensityStats() {
+        self.featureDensityStatsP = undefined
+        self.featureDensityStats = undefined
+      },
+    }))
+    .views(self => ({
+      /**
+       * #getter
+       * region is too large if:
+       * - stats are ready
+       * - region is greater than 20kb (don't warn when zoomed in less than that)
+       * - and bytes is greater than max allowed bytes or density greater than max
+       *   density
+       */
+      get regionTooLarge() {
+        const view = getContainingView(self) as LGV
+        if (
+          !self.featureDensityStatsReady ||
+          view.dynamicBlocks.totalBp < 20_000
+        ) {
+          return false
+        }
+        return (
+          self.currentBytesRequested > self.maxAllowableBytes ||
+          (self.userBpPerPxLimit
+            ? view.bpPerPx > self.userBpPerPxLimit
+            : self.currentFeatureScreenDensity > self.maxFeatureScreenDensity)
+        )
+      },
+
+      /**
+       * #getter
+       * only shows a message of bytes requested is defined, the feature density
+       * based stats don't produce any helpful message besides to zoom in
+       */
+      get regionTooLargeReason() {
+        const req = self.currentBytesRequested
+        const max = self.maxAllowableBytes
+
+        return req && req > max
+          ? `Requested too much data (${getDisplayStr(req)})`
+          : ''
+      },
+    }))
+    .views(self => ({
+      /**
+       * #method
+       */
+      regionCannotBeRenderedText(_region: Region) {
+        return self.regionTooLarge ? 'Force load to see features' : ''
+      },
+
+      /**
+       * #method
+       * @param region -
+       * @returns falsy if the region is fine to try rendering. Otherwise,
+       *  return a react node + string of text.
+       *  string of text describes why it cannot be rendered
+       *  react node allows user to force load at current setting
+       */
+      regionCannotBeRendered(_region: Region) {
+        return self.regionTooLarge ? (
+          <TooLargeMessage model={self as any} />
+        ) : null
+      },
+    }))
+}

package/src/BaseLinearDisplay/models/TrackHeightMixin.tsx

@@ -0,0 +1,59 @@
+import { getConf } from '@jbrowse/core/configuration'
+import { types } from 'mobx-state-tree'
+
+const minDisplayHeight = 20
+
+/**
+ * #stateModel TrackHeightMixin
+ * #category display
+ */
+export default function TrackHeightMixin() {
+  return types
+    .model({
+      /**
+       * #property
+       */
+      heightPreConfig: types.maybe(
+        types.refinement(
+          'displayHeight',
+          types.number,
+          n => n >= minDisplayHeight,
+        ),
+      ),
+    })
+    .volatile(() => ({
+      /**
+       * #property
+       */
+      scrollTop: 0,
+    }))
+    .views(self => ({
+      get height() {
+        // @ts-expect-error
+        return self.heightPreConfig ?? (getConf(self, 'height') as number)
+      },
+    }))
+    .actions(self => ({
+      /**
+       * #action
+       */
+      setScrollTop(scrollTop: number) {
+        self.scrollTop = scrollTop
+      },
+      /**
+       * #action
+       */
+      setHeight(displayHeight: number) {
+        self.heightPreConfig = Math.max(displayHeight, minDisplayHeight)
+        return self.height
+      },
+      /**
+       * #action
+       */
+      resizeHeight(distance: number) {
+        const oldHeight = self.height
+        const newHeight = this.setHeight(self.height + distance)
+        return newHeight - oldHeight
+      },
+    }))
+}

package/src/BaseLinearDisplay/models/autorunFeatureDensityStats.ts

@@ -0,0 +1,46 @@
+import { getContainingView, isAbortException } from '@jbrowse/core/util'
+import { LinearGenomeViewModel } from '../../LinearGenomeView'
+import { isAlive } from 'mobx-state-tree'
+import { BaseLinearDisplayModel } from './BaseLinearDisplayModel'
+
+// stats estimation autorun calls getFeatureDensityStats against the data
+// adapter which by default uses featureDensity, but can also respond with a
+// byte size estimate and fetch size limit (data adapter can define what is too
+// much data)
+export default async function autorunFeatureDensityStats(
+  self: BaseLinearDisplayModel,
+) {
+  try {
+    const view = getContainingView(self) as LinearGenomeViewModel
+
+    // extra check for contentBlocks.length
+    // https://github.com/GMOD/jbrowse-components/issues/2694
+    if (
+      !view.initialized ||
+      !view.staticBlocks.contentBlocks.length ||
+      view.bpPerPx === self.currStatsBpPerPx ||
+      self.error
+    ) {
+      return
+    }
+
+    // don't re-estimate featureDensity even if zoom level changes,
+    // jbrowse1-style assume it's sort of representative
+    if (self.featureDensityStats?.featureDensity !== undefined) {
+      self.setCurrStatsBpPerPx(view.bpPerPx)
+      return
+    }
+
+    self.clearFeatureDensityStats()
+    self.setCurrStatsBpPerPx(view.bpPerPx)
+    const stats = await self.getFeatureDensityStats()
+    if (isAlive(self)) {
+      self.setFeatureDensityStats(stats)
+    }
+  } catch (e) {
+    if (!isAbortException(e) && isAlive(self)) {
+      console.error(e)
+      self.setError(e)
+    }
+  }
+}

package/src/BaseLinearDisplay/models/configSchema.ts

@@ -2,6 +2,7 @@ import { ConfigurationSchema } from '@jbrowse/core/configuration'
 
 /**
  * #config BaseLinearDisplay
+ * #category display
  * `BaseLinearDisplay` is a "base" config that is extended by classes like
  * `LinearBasicDisplay` (used for feature tracks, etc) and `LinearBareDisplay`
  * (more stripped down than even the basic display, not commonly used)
@@ -37,6 +38,16 @@ const baseLinearDisplayConfigSchema = ConfigurationSchema(
       defaultValue: 100,
       description: 'default height for the track',
     },
+    /**
+     * #slot
+     */
+    mouseover: {
+      type: 'string',
+      description: 'text to display when the cursor hovers over a feature',
+      defaultValue: `jexl:get(feature,'name')`,
+
+      contextVariable: ['feature'],
+    },
   },
   {
     /**

package/src/BaseLinearDisplay/models/renderSvg.tsx

@@ -0,0 +1,101 @@
+import React from 'react'
+import { ThemeOptions } from '@mui/material'
+import {
+  getContainingView,
+  getViewParams,
+  ReactRendering,
+} from '@jbrowse/core/util'
+
+// locals
+import { ExportSvgOptions, LinearGenomeViewModel } from '../../LinearGenomeView'
+import BlockState, { renderBlockData } from './serverSideRenderedBlock'
+import { getId } from './util'
+
+import { BaseLinearDisplayModel } from './BaseLinearDisplayModel'
+
+export default async function renderBaseLinearDisplaySvg(
+  self: BaseLinearDisplayModel,
+  opts: ExportSvgOptions & {
+    overrideHeight: number
+    theme: ThemeOptions
+  },
+) {
+  const { height, id } = self
+  const { overrideHeight } = opts
+  const view = getContainingView(self) as LinearGenomeViewModel
+  const { offsetPx: viewOffsetPx, roundedDynamicBlocks, width } = view
+  const renderings = await Promise.all(
+    roundedDynamicBlocks.map(async block => {
+      const blockState = BlockState.create({
+        key: block.key,
+        region: block,
+      })
+
+      // regionCannotBeRendered can return jsx so look for plaintext
+      // version, or just get the default if none available
+      const cannotBeRenderedReason =
+        self.regionCannotBeRenderedText(block) ||
+        self.regionCannotBeRendered(block)
+
+      if (cannotBeRenderedReason) {
+        return [
+          block,
+          {
+            reactElement: (
+              <>
+                <rect x={0} y={0} width={width} height={20} fill="#aaa" />
+                <text x={0} y={15}>
+                  {cannotBeRenderedReason}
+                </text>
+              </>
+            ),
+          },
+        ] as const
+      }
+
+      const { rpcManager, renderArgs, renderProps, rendererType } =
+        renderBlockData(blockState, self)
+
+      return [
+        block,
+        await rendererType.renderInClient(rpcManager, {
+          ...renderArgs,
+          ...renderProps,
+          viewParams: getViewParams(self, true),
+          exportSVG: opts,
+          theme: opts.theme || renderProps.theme,
+        }),
+      ] as const
+    }),
+  )
+
+  return (
+    <>
+      {renderings.map(([block, rendering], index) => {
+        const { offsetPx, widthPx } = block
+        const offset = offsetPx - viewOffsetPx
+        const clipid = getId(id, index)
+
+        return (
+          <React.Fragment key={`frag-${index}`}>
+            <defs>
+              <clipPath id={clipid}>
+                <rect
+                  x={0}
+                  y={0}
+                  width={widthPx}
+                  height={overrideHeight || height}
+                />
+              </clipPath>
+            </defs>
+            <g transform={`translate(${offset} 0)`}>
+              <g clipPath={`url(#${clipid})`}>
+                <ReactRendering rendering={rendering} />
+              </g>
+            </g>
+          </React.Fragment>
+        )
+      })}
+    </>
+  )
+}

package/src/BaseLinearDisplay/models/serverSideRenderedBlock.ts

@@ -63,19 +63,25 @@ const blockState = types
       },
       afterAttach() {
         const display = getContainingDisplay(self)
-        makeAbortableReaction(
-          self as any,
-          renderBlockData,
-          renderBlockEffect, // reaction doesn't expect async here
-          {
-            name: `${display.id}/${assembleLocString(self.region)} rendering`,
-            delay: display.renderDelay,
-            fireImmediately: true,
-          },
-          this.setLoading,
-          this.setRendered,
-          this.setError,
-        )
+        setTimeout(() => {
+          if (isAlive(self)) {
+            makeAbortableReaction(
+              self as any,
+              renderBlockData,
+              renderBlockEffect, // reaction doesn't expect async here
+              {
+                name: `${display.id}/${assembleLocString(
+                  self.region,
+                )} rendering`,
+                delay: display.renderDelay,
+                fireImmediately: true,
+              },
+              this.setLoading,
+              this.setRendered,
+              this.setError,
+            )
+          }
+        }, display.renderDelay)
       },
       setStatus(message: string) {
         self.status = message
@@ -175,25 +181,27 @@ const blockState = types
         getParent<any>(self, 2).reload()
       },
       beforeDestroy() {
-        if (renderInProgress && !renderInProgress.signal.aborted) {
-          renderInProgress.abort()
-        }
-        const display = getContainingDisplay(self)
-        const { rpcManager } = getSession(self)
-        const { rendererType } = display
-        const { renderArgs } = renderBlockData(cast(self))
-        // renderArgs can be undefined if an error occurred in this block
-        if (renderArgs) {
-          rendererType
-            .freeResourcesInClient(
-              rpcManager,
-              JSON.parse(JSON.stringify(renderArgs)),
-            )
-            .catch((e: Error) => {
-              // just console.error if it's something while it's being destroyed
-              console.warn('Error while destroying block', e)
-            })
-        }
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        ;(async () => {
+          try {
+            if (renderInProgress && !renderInProgress.signal.aborted) {
+              renderInProgress.abort()
+            }
+            const display = getContainingDisplay(self)
+            const { rpcManager } = getSession(self)
+            const { rendererType } = display
+            const { renderArgs } = renderBlockData(cast(self))
+            // renderArgs can be undefined if an error occurred in this block
+            if (renderArgs) {
+              await rendererType.freeResourcesInClient(
+                rpcManager,
+                JSON.parse(JSON.stringify(renderArgs)),
+              )
+            }
+          } catch (e) {
+            console.error('Error while destroying block', e)
+          }
+        })()
       },
     }
   })

package/src/BaseLinearDisplay/models/util.ts

@@ -1,4 +1,5 @@
-import { Stats } from '@jbrowse/core/data_adapters/BaseAdapter'
+import { AnyConfigurationModel } from '@jbrowse/core/configuration'
+import { FeatureDensityStats } from '@jbrowse/core/data_adapters/BaseAdapter'
 import { getContainingView, getSession } from '@jbrowse/core/util'
 import { getRpcSessionId } from '@jbrowse/core/util/tracks'
 import { IAnyStateTreeNode, isAlive } from 'mobx-state-tree'
@@ -35,7 +36,12 @@ export function getId(id: string, index: number) {
   return `clip-${isJest ? id : 'jest'}-${index}`
 }
 
-export async function estimateRegionsStatsPre(self: IAnyStateTreeNode) {
+export async function getFeatureDensityStatsPre(
+  self: IAnyStateTreeNode & {
+    adapterConfig?: AnyConfigurationModel
+    setMessage: (arg: string) => void
+  },
+) {
   const view = getContainingView(self) as LinearGenomeViewModel
   const regions = view.staticBlocks.contentBlocks
 
@@ -48,7 +54,7 @@ export async function estimateRegionsStatsPre(self: IAnyStateTreeNode) {
   }
   const sessionId = getRpcSessionId(self)
 
-  return rpcManager.call(sessionId, 'CoreEstimateRegionStats', {
+  return rpcManager.call(sessionId, 'CoreGetFeatureDensityStats', {
     sessionId,
     regions,
     adapterConfig,
@@ -57,5 +63,5 @@ export async function estimateRegionsStatsPre(self: IAnyStateTreeNode) {
         self.setMessage(message)
       }
     },
-  }) as Promise<Stats>
+  }) as Promise<FeatureDensityStats>
 }

package/src/BasicTrack/configSchema.ts

@@ -4,6 +4,7 @@ import PluginManager from '@jbrowse/core/PluginManager'
 
 /**
  * #config BasicTrack
+ * #category track
  * synonym for FeatureTrack
  */
 function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars

package/src/FeatureTrack/configSchema.ts

@@ -4,6 +4,7 @@ import PluginManager from '@jbrowse/core/PluginManager'
 
 /**
  * #config FeatureTrack
+ * #category track
  * used for basic gene and feature tracks, generally used with LinearBasicDisplay
  */
 function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars

package/src/LinearBareDisplay/configSchema.ts

@@ -4,6 +4,7 @@ import { baseLinearDisplayConfigSchema } from '../BaseLinearDisplay'
 
 /**
  * #config LinearBareDisplay
+ * #category display
  */
 function configSchemaFactory(pluginManager: PluginManager) {
   return ConfigurationSchema(

package/src/LinearBareDisplay/model.ts

@@ -1,13 +1,14 @@
 import {
   AnyConfigurationSchemaType,
   ConfigurationReference,
-} from '@jbrowse/core/configuration/configurationSchema'
+} from '@jbrowse/core/configuration'
 import { getParentRenderProps } from '@jbrowse/core/util/tracks'
 import { types } from 'mobx-state-tree'
 import { BaseLinearDisplay } from '../BaseLinearDisplay'
 
 /**
  * #stateModel LinearBareDisplay
+ * #category display
  * extends `BaseLinearDisplay`
  */
 export function stateModelFactory(configSchema: AnyConfigurationSchemaType) {

package/src/LinearBasicDisplay/configSchema.ts

@@ -4,21 +4,12 @@ import { baseLinearDisplayConfigSchema } from '../BaseLinearDisplay'
 
 /**
  * #config LinearBasicDisplay
+ * #category display
  */
 function configSchemaFactory(pluginManager: PluginManager) {
   return ConfigurationSchema(
     'LinearBasicDisplay',
     {
-      /**
-       * #slot
-       */
-      mouseover: {
-        type: 'string',
-        description: 'what to display in a given mouseover',
-        defaultValue: `jexl:get(feature,'name')`,
-
-        contextVariable: ['feature'],
-      },
       /**
        * #slot
        */

package/src/LinearBasicDisplay/model.ts

@@ -18,6 +18,7 @@ const SetMaxHeightDlg = lazy(() => import('./components/SetMaxHeight'))
 
 /**
  * #stateModel LinearBasicDisplay
+ * #category display
  * used by `FeatureTrack`, has simple settings like "show/hide feature labels",
  * etc.
  */