@jbrowse/plugin-linear-genome-view 2.4.1 → 2.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-linear-genome-view",
-  "version": "2.4.1",
+  "version": "2.5.0",
   "description": "JBrowse 2 linear genome view",
   "keywords": [
     "jbrowse",
@@ -49,7 +49,7 @@
     "file-saver": "^2.0.0",
     "material-ui-popup-state": "^5.0.0",
     "normalize-wheel": "^1.0.1",
-    "react-error-boundary": "^3.0.0",
+    "react-error-boundary": "^4.0.3",
     "react-popper": "^2.0.0"
   },
   "peerDependencies": {
@@ -66,5 +66,5 @@
     "access": "public"
   },
   "module": "esm/index.js",
-  "gitHead": "747c50c4edc0184827efa4f8dfc576ca9a72caeb"
+  "gitHead": "d1ca073996d008f0fe9a52f7c1a47ae649dcfdaf"
 }

package/src/BaseLinearDisplay/components/ServerSideRenderedBlockContent.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import { makeStyles } from 'tss-react/mui'
 import { observer } from 'mobx-react'
 import { getParent } from 'mobx-state-tree'
@@ -24,34 +24,15 @@ const useStyles = makeStyles()(theme => {
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const LoadingMessage = observer(({ model }: { model: any }) => {
-  // only show the loading message after 300ms to prevent excessive flickering
-  const [shown, setShown] = useState(false)
   const { classes } = useStyles()
-  useEffect(() => {
-    let killed = false
-    const timeout = setTimeout(() => {
-      if (!killed) {
-        setShown(true)
-      }
-    }, 300)
-    return () => {
-      clearTimeout(timeout)
-      killed = true
-    }
-  }, [])
-
   const { status: blockStatus } = model
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const { message: displayStatus } = getParent<any>(model, 2)
   const status = displayStatus || blockStatus
   return (
-    <>
-      {shown ? (
-        <div className={classes.loading}>
-          <LoadingEllipses message={status} />
-        </div>
-      ) : null}
-    </>
+    <div className={classes.loading}>
+      <LoadingEllipses message={status} />
+    </div>
   )
 })
 
@@ -71,19 +52,18 @@ const ServerSideRenderedBlockContent = observer(function ({
         action={model.reload}
       />
     )
-  }
-  if (model.message) {
+  } else if (model.message) {
     // the message can be a fully rendered react component, e.g. the region too large message
     return React.isValidElement(model.message) ? (
       model.message
     ) : (
       <BlockMsg message={`${model.message}`} severity="info" />
     )
-  }
-  if (!model.filled) {
+  } else if (!model.filled) {
     return <LoadingMessage model={model} />
+  } else {
+    return model.reactElement
   }
-  return model.reactElement
 })
 
 export default ServerSideRenderedBlockContent

package/src/BaseLinearDisplay/components/TooLargeMessage.tsx

@@ -1,14 +1,16 @@
 import React from 'react'
+import { FeatureDensityStats } from '@jbrowse/core/data_adapters/BaseAdapter'
+
+// locals
 import BlockMsg from '../components/BlockMsg'
-import { Stats } from '@jbrowse/core/data_adapters/BaseAdapter'
 
 function TooLargeMessage({
   model,
 }: {
   model: {
     regionTooLargeReason: string
-    estimatedRegionStats?: Stats
-    updateStatsLimit: (s: Stats) => void
+    featureDensityStats?: FeatureDensityStats
+    setFeatureDensityStatsLimit: (s?: FeatureDensityStats) => void
     reload: () => void
   }
 }) {
@@ -17,16 +19,16 @@ function TooLargeMessage({
     <BlockMsg
       severity="warning"
       action={() => {
-        if (!model.estimatedRegionStats) {
-          console.error('No global stats?')
-        } else {
-          model.updateStatsLimit(model.estimatedRegionStats)
-          model.reload()
-        }
+        model.setFeatureDensityStatsLimit(model.featureDensityStats)
+        model.reload()
       }}
       buttonText="Force load"
-      message={`${regionTooLargeReason ? regionTooLargeReason + '. ' : ''}
-      Zoom in to see features or force load (may be slow).`}
+      message={[
+        regionTooLargeReason,
+        'Zoom in to see features or force load (may be slow)',
+      ]
+        .filter(f => !!f)
+        .join('. ')}
     />
   )
 }

package/src/BaseLinearDisplay/models/BaseLinearDisplayModel.tsx

@@ -1,7 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react'
+import { ThemeOptions } from '@mui/material'
 import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes/models'
-import { getConf } from '@jbrowse/core/configuration'
+import { ConfigurationReference, getConf } from '@jbrowse/core/configuration'
 import { MenuItem } from '@jbrowse/core/ui'
 import {
   isAbortException,
@@ -15,14 +16,11 @@ import {
   Feature,
   ReactRendering,
 } from '@jbrowse/core/util'
-import { Stats } from '@jbrowse/core/data_adapters/BaseAdapter'
+import { FeatureDensityStats } from '@jbrowse/core/data_adapters/BaseAdapter'
 import { BaseBlock } from '@jbrowse/core/util/blockTypes'
 import { Region } from '@jbrowse/core/util/types'
 import CompositeMap from '@jbrowse/core/util/compositeMap'
-import {
-  getParentRenderProps,
-  getRpcSessionId,
-} from '@jbrowse/core/util/tracks'
+import { getParentRenderProps } from '@jbrowse/core/util/tracks'
 import { autorun } from 'mobx'
 import { addDisposer, isAlive, types, Instance } from 'mobx-state-tree'
 
@@ -34,7 +32,8 @@ import { LinearGenomeViewModel, ExportSvgOptions } from '../../LinearGenomeView'
 import { Tooltip } from '../components/BaseLinearDisplay'
 import TooLargeMessage from '../components/TooLargeMessage'
 import BlockState, { renderBlockData } from './serverSideRenderedBlock'
-import { ThemeOptions } from '@mui/material'
+import { getId, getDisplayStr, getFeatureDensityStatsPre } from './util'
+import configSchema from './configSchema'
 
 type LGV = LinearGenomeViewModel
 
@@ -46,26 +45,8 @@ export interface Layout {
   name: string
 }
 
-// stabilize clipid under test for snapshot
-function getId(id: string, index: number) {
-  const isJest = typeof jest === 'undefined'
-  return `clip-${isJest ? id : 'jest'}-${index}`
-}
-
 type LayoutRecord = [number, number, number, number]
 
-function getDisplayStr(totalBytes: number) {
-  let displayBp
-  if (Math.floor(totalBytes / 1000000) > 0) {
-    displayBp = `${Number.parseFloat((totalBytes / 1000000).toPrecision(3))} Mb`
-  } else if (Math.floor(totalBytes / 1000) > 0) {
-    displayBp = `${Number.parseFloat((totalBytes / 1000).toPrecision(3))} Kb`
-  } else {
-    displayBp = `${Math.floor(totalBytes)} bytes`
-  }
-  return displayBp
-}
-
 const minDisplayHeight = 20
 
 /**
@@ -101,6 +82,10 @@ function stateModelFactory() {
          * #property
          */
         userByteSizeLimit: types.maybe(types.number),
+        /**
+         * #property
+         */
+        configuration: ConfigurationReference(configSchema),
       }),
     )
     .volatile(() => ({
@@ -109,8 +94,10 @@ function stateModelFactory() {
       message: '',
       featureIdUnderMouse: undefined as undefined | string,
       contextMenuFeature: undefined as undefined | Feature,
-      estimatedRegionStatsP: undefined as undefined | Promise<Stats>,
-      estimatedRegionStats: undefined as undefined | Stats,
+      featureDensityStatsP: undefined as
+        | undefined
+        | Promise<FeatureDensityStats>,
+      featureDensityStats: undefined as undefined | FeatureDensityStats,
     }))
     .views(self => ({
       get height() {
@@ -184,7 +171,7 @@ function stateModelFactory() {
       get features() {
         const featureMaps = []
         for (const block of self.blockState.values()) {
-          if (block && block.features) {
+          if (block?.features) {
             featureMaps.push(block.features)
           }
         }
@@ -202,7 +189,11 @@ function stateModelFactory() {
       /**
        * #getter
        */
-      getFeatureOverlapping(blockKey: string, x: number, y: number) {
+      getFeatureOverlapping(
+        blockKey: string,
+        x: number,
+        y: number,
+      ): string | undefined {
         return self.blockState.get(blockKey)?.layout?.getByCoord(x, y)
       },
 
@@ -231,7 +222,7 @@ function stateModelFactory() {
        * #getter
        */
       get currentBytesRequested() {
-        return self.estimatedRegionStats?.bytes || 0
+        return self.featureDensityStats?.bytes || 0
       },
 
       /**
@@ -239,7 +230,7 @@ function stateModelFactory() {
        */
       get currentFeatureScreenDensity() {
         const view = getContainingView(self) as LGV
-        return (self.estimatedRegionStats?.featureDensity || 0) * view.bpPerPx
+        return (self.featureDensityStats?.featureDensity || 0) * view.bpPerPx
       },
 
       /**
@@ -251,8 +242,8 @@ function stateModelFactory() {
       /**
        * #getter
        */
-      get estimatedStatsReady() {
-        return !!self.estimatedRegionStats
+      get featureDensityStatsReady() {
+        return !!self.featureDensityStats || !!self.userBpPerPxLimit
       },
 
       /**
@@ -261,7 +252,7 @@ function stateModelFactory() {
       get maxAllowableBytes() {
         return (
           self.userByteSizeLimit ||
-          self.estimatedRegionStats?.fetchSizeLimit ||
+          self.featureDensityStats?.fetchSizeLimit ||
           (getConf(self, 'fetchSizeLimit') as number)
         )
       },
@@ -273,95 +264,68 @@ function stateModelFactory() {
       setMessage(message: string) {
         self.message = message
       },
-
+    }))
+    .actions(self => ({
       afterAttach() {
         // watch the parent's blocks to update our block state when they change,
         // then we recreate the blocks on our own model (creating and deleting to
         // match the parent blocks)
-        const blockWatchDisposer = autorun(() => {
-          const blocksPresent: { [key: string]: boolean } = {}
-          const view = getContainingView(self) as LGV
-          if (view.initialized) {
-            self.blockDefinitions.contentBlocks.forEach(block => {
-              blocksPresent[block.key] = true
-              if (!self.blockState.has(block.key)) {
-                this.addBlock(block.key, block)
-              }
-            })
-            self.blockState.forEach((_, key) => {
-              if (!blocksPresent[key]) {
-                this.deleteBlock(key)
-              }
-            })
-          }
-        })
-
-        addDisposer(self, blockWatchDisposer)
+        addDisposer(
+          self,
+          autorun(() => {
+            const blocksPresent: { [key: string]: boolean } = {}
+            const view = getContainingView(self) as LGV
+            if (view.initialized) {
+              self.blockDefinitions.contentBlocks.forEach(block => {
+                blocksPresent[block.key] = true
+                if (!self.blockState.has(block.key)) {
+                  this.addBlock(block.key, block)
+                }
+              })
+              self.blockState.forEach((_, key) => {
+                if (!blocksPresent[key]) {
+                  this.deleteBlock(key)
+                }
+              })
+            }
+          }),
+        )
       },
 
       /**
        * #action
        */
-      estimateRegionsStats(
-        regions: Region[],
-        opts: {
-          headers?: Record<string, string>
-          signal?: AbortSignal
-          filters?: string[]
-        },
-      ) {
-        if (self.estimatedRegionStatsP) {
-          return self.estimatedRegionStatsP
-        }
-
-        const { rpcManager } = getSession(self)
-        const { adapterConfig } = self
-        if (!adapterConfig) {
-          // A track extending the base track might not have an adapter config
-          // e.g. Apollo tracks don't use adapters
-          return Promise.resolve({})
-        }
-        const sessionId = getRpcSessionId(self)
-
-        const params = {
-          sessionId,
-          regions,
-          adapterConfig,
-          statusCallback: (message: string) => {
-            if (isAlive(self)) {
-              this.setMessage(message)
-            }
-          },
-          ...opts,
+      async getFeatureDensityStats() {
+        if (!self.featureDensityStatsP) {
+          self.featureDensityStatsP = getFeatureDensityStatsPre(self).catch(
+            e => {
+              this.setFeatureDensityStatsP(undefined)
+              throw e
+            },
+          )
         }
-
-        self.estimatedRegionStatsP = rpcManager
-          .call(sessionId, 'CoreEstimateRegionStats', params)
-          .catch(e => {
-            this.setRegionStatsP(undefined)
-            throw e
-          }) as Promise<Stats>
-
-        return self.estimatedRegionStatsP
+        return self.featureDensityStatsP
       },
+
       /**
        * #action
        */
-      setRegionStatsP(p?: Promise<Stats>) {
-        self.estimatedRegionStatsP = p
+      setFeatureDensityStatsP(arg: any) {
+        self.featureDensityStatsP = arg
       },
+
       /**
        * #action
        */
-      setRegionStats(estimatedRegionStats?: Stats) {
-        self.estimatedRegionStats = estimatedRegionStats
+      setFeatureDensityStats(featureDensityStats?: FeatureDensityStats) {
+        self.featureDensityStats = featureDensityStats
       },
       /**
        * #action
        */
-      clearRegionStats() {
-        self.estimatedRegionStatsP = undefined
-        self.estimatedRegionStats = undefined
+      clearFeatureDensityStats() {
+        self.featureDensityStatsP = undefined
+        self.featureDensityStats = undefined
       },
       /**
        * #action
@@ -390,9 +354,9 @@ function stateModelFactory() {
       /**
        * #action
        */
-      updateStatsLimit(stats: Stats) {
+      setFeatureDensityStatsLimit(stats?: FeatureDensityStats) {
         const view = getContainingView(self) as LGV
-        if (stats.bytes) {
+        if (stats?.bytes) {
           self.userByteSizeLimit = stats.bytes
         } else {
           self.userBpPerPxLimit = view.bpPerPx
@@ -449,13 +413,12 @@ function stateModelFactory() {
        * #action
        */
       clearFeatureSelection() {
-        const session = getSession(self)
-        session.clearSelection()
+        getSession(self).clearSelection()
       },
       /**
        * #action
        */
-      setFeatureIdUnderMouse(feature: string | undefined) {
+      setFeatureIdUnderMouse(feature?: string) {
         self.featureIdUnderMouse = feature
       },
       /**
@@ -477,20 +440,22 @@ function stateModelFactory() {
        * 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
+       * - and bytes is greater than max allowed bytes or density greater than max
+       *   density
        */
       get regionTooLarge() {
         const view = getContainingView(self) as LGV
-        if (!self.estimatedStatsReady || view.dynamicBlocks.totalBp < 20_000) {
+        if (
+          !self.featureDensityStatsReady ||
+          view.dynamicBlocks.totalBp < 20_000
+        ) {
           return false
         }
-        const bpLimitOrDensity = self.userBpPerPxLimit
-          ? view.bpPerPx > self.userBpPerPxLimit
-          : self.currentFeatureScreenDensity > self.maxFeatureScreenDensity
-
         return (
           self.currentBytesRequested > self.maxAllowableBytes ||
-          bpLimitOrDensity
+          (self.userBpPerPxLimit
+            ? view.bpPerPx > self.userBpPerPxLimit
+            : self.currentFeatureScreenDensity > self.maxFeatureScreenDensity)
         )
       },
 
@@ -517,7 +482,6 @@ function stateModelFactory() {
          */
         async reload() {
           self.setError()
-          const aborter = new AbortController()
           const view = getContainingView(self) as LGV
 
           // extra check for contentBlocks.length
@@ -527,84 +491,70 @@ function stateModelFactory() {
           }
 
           try {
-            self.estimatedRegionStatsP = self.estimateRegionsStats(
-              view.staticBlocks.contentBlocks,
-              { signal: aborter.signal },
-            )
-            const estimatedRegionStats = await self.estimatedRegionStatsP
+            const featureDensityStats = await self.getFeatureDensityStats()
 
             if (isAlive(self)) {
-              self.setRegionStats(estimatedRegionStats)
+              self.setFeatureDensityStats(featureDensityStats)
               superReload()
-            } else {
-              return
             }
           } catch (e) {
             console.error(e)
             self.setError(e)
           }
         },
-        afterAttach() {
-          // this autorun performs stats estimation
-          //
-          // the chain of events calls estimateRegionsStats 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)
-          addDisposer(
-            self,
-            autorun(
-              async () => {
-                try {
-                  const aborter = new AbortController()
-                  const view = getContainingView(self) as LGV
-
-                  // extra check for contentBlocks.length
-                  // https://github.com/GMOD/jbrowse-components/issues/2694
-                  if (
-                    !view.initialized ||
-                    !view.staticBlocks.contentBlocks.length
-                  ) {
-                    return
-                  }
-
-                  // don't re-estimate featureDensity even if zoom level changes,
-                  // jbrowse1-style assume it's sort of representative
-                  if (self.estimatedRegionStats?.featureDensity !== undefined) {
-                    self.setCurrBpPerPx(view.bpPerPx)
-                    return
-                  }
-
-                  // we estimate stats once at a given zoom level
-                  if (view.bpPerPx === self.currBpPerPx) {
-                    return
-                  }
-
-                  self.clearRegionStats()
-                  self.setCurrBpPerPx(view.bpPerPx)
-                  const statsP = self.estimateRegionsStats(
-                    view.staticBlocks.contentBlocks,
-                    { signal: aborter.signal },
-                  )
-                  self.setRegionStatsP(statsP)
-                  const estimatedRegionStats = await statsP
-
-                  if (isAlive(self)) {
-                    self.setRegionStats(estimatedRegionStats)
-                  }
-                } catch (e) {
-                  if (!isAbortException(e) && isAlive(self)) {
-                    console.error(e)
-                    self.setError(e)
-                  }
-                }
-              },
-              { delay: 500 },
-            ),
-          )
-        },
       }
     })
+    .actions(self => ({
+      afterAttach() {
+        // this autorun performs stats estimation
+        //
+        // the chain of events 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)
+        addDisposer(
+          self,
+          autorun(async () => {
+            try {
+              const view = getContainingView(self) as LGV
+
+              // extra check for contentBlocks.length
+              // https://github.com/GMOD/jbrowse-components/issues/2694
+              if (
+                !view.initialized ||
+                !view.staticBlocks.contentBlocks.length
+              ) {
+                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.setCurrBpPerPx(view.bpPerPx)
+                return
+              }
+
+              // we estimate stats once at a given zoom level
+              if (view.bpPerPx === self.currBpPerPx) {
+                return
+              }
+
+              self.clearFeatureDensityStats()
+              self.setCurrBpPerPx(view.bpPerPx)
+              const featureDensityStats = await self.getFeatureDensityStats()
+              if (isAlive(self)) {
+                self.setFeatureDensityStats(featureDensityStats)
+              }
+            } catch (e) {
+              if (!isAbortException(e) && isAlive(self)) {
+                console.error(e)
+                self.setError(e)
+              }
+            }
+          }),
+        )
+      },
+    }))
     .views(self => ({
       /**
        * #method
@@ -622,8 +572,7 @@ function stateModelFactory() {
        *  react node allows user to force load at current setting
        */
       regionCannotBeRendered(_region: Region) {
-        const { regionTooLarge } = self
-        return regionTooLarge ? <TooLargeMessage model={self} /> : null
+        return self.regionTooLarge ? <TooLargeMessage model={self} /> : null
       },
 
       /**
@@ -636,20 +585,22 @@ function stateModelFactory() {
       /**
        * #method
        */
-      contextMenuItems() {
-        return self.contextMenuFeature
-          ? [
-              {
-                label: 'Open feature details',
-                icon: MenuOpenIcon,
-                onClick: () => {
-                  if (self.contextMenuFeature) {
-                    self.selectFeature(self.contextMenuFeature)
-                  }
+      contextMenuItems(): MenuItem[] {
+        return [
+          ...(self.contextMenuFeature
+            ? [
+                {
+                  label: 'Open feature details',
+                  icon: MenuOpenIcon,
+                  onClick: () => {
+                    if (self.contextMenuFeature) {
+                      self.selectFeature(self.contextMenuFeature)
+                    }
+                  },
                 },
-              },
-            ]
-          : []
+              ]
+            : []),
+        ]
       },
       /**
        * #method
@@ -659,7 +610,7 @@ function stateModelFactory() {
         return {
           ...getParentRenderProps(self),
           notReady:
-            self.currBpPerPx !== view.bpPerPx || !self.estimatedRegionStats,
+            self.currBpPerPx !== view.bpPerPx || !self.featureDensityStatsReady,
           rpcDriverName: self.rpcDriverName,
           displayModel: self,
           onFeatureClick(_: unknown, featureId?: string) {

package/src/BaseLinearDisplay/models/configSchema.ts

@@ -37,6 +37,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'],
+    },
   },
   {
     /**