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

package/src/BaseLinearDisplay/models/BaseLinearDisplayModel.tsx

@@ -1,5 +1,6 @@
 /* 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 { MenuItem } from '@jbrowse/core/ui'
@@ -19,10 +20,7 @@ import { Stats } 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,7 @@ 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, estimateRegionsStatsPre } from './util'
 
 type LGV = LinearGenomeViewModel
 
@@ -46,26 +44,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 = `${parseFloat((totalBytes / 1000000).toPrecision(3))} Mb`
-  } else if (Math.floor(totalBytes / 1000) > 0) {
-    displayBp = `${parseFloat((totalBytes / 1000).toPrecision(3))} Kb`
-  } else {
-    displayBp = `${Math.floor(totalBytes)} bytes`
-  }
-  return displayBp
-}
-
 const minDisplayHeight = 20
 
 /**
@@ -109,12 +89,12 @@ function stateModelFactory() {
       message: '',
       featureIdUnderMouse: undefined as undefined | string,
       contextMenuFeature: undefined as undefined | Feature,
-      estimatedRegionStatsP: undefined as undefined | Promise<Stats>,
-      estimatedRegionStats: undefined as undefined | Stats,
+      estimatedRegionsStatsP: undefined as undefined | Promise<Stats>,
+      estimatedRegionsStats: undefined as undefined | Stats,
     }))
     .views(self => ({
       get height() {
-        return self.heightPreConfig ?? getConf(self, 'height')
+        return self.heightPreConfig ?? (getConf(self, 'height') as number)
       },
       /**
        * #getter
@@ -184,7 +164,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 +182,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 +215,7 @@ function stateModelFactory() {
        * #getter
        */
       get currentBytesRequested() {
-        return self.estimatedRegionStats?.bytes || 0
+        return self.estimatedRegionsStats?.bytes || 0
       },
 
       /**
@@ -239,7 +223,7 @@ function stateModelFactory() {
        */
       get currentFeatureScreenDensity() {
         const view = getContainingView(self) as LGV
-        return (self.estimatedRegionStats?.featureDensity || 0) * view.bpPerPx
+        return (self.estimatedRegionsStats?.featureDensity || 0) * view.bpPerPx
       },
 
       /**
@@ -252,7 +236,7 @@ function stateModelFactory() {
        * #getter
        */
       get estimatedStatsReady() {
-        return !!self.estimatedRegionStats
+        return !!self.estimatedRegionsStats || !!self.userBpPerPxLimit
       },
 
       /**
@@ -261,7 +245,7 @@ function stateModelFactory() {
       get maxAllowableBytes() {
         return (
           self.userByteSizeLimit ||
-          self.estimatedRegionStats?.fetchSizeLimit ||
+          self.estimatedRegionsStats?.fetchSizeLimit ||
           (getConf(self, 'fetchSizeLimit') as number)
         )
       },
@@ -273,105 +257,75 @@ 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 estimateRegionsStats() {
+        if (!self.estimatedRegionsStatsP) {
+          self.estimatedRegionsStatsP = estimateRegionsStatsPre(self).catch(
+            e => {
+              this.setRegionsStatsP(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.estimatedRegionsStatsP
       },
+
       /**
        * #action
        */
-      setRegionStatsP(p?: Promise<Stats>) {
-        self.estimatedRegionStatsP = p
+      setRegionsStatsP(arg: any) {
+        self.estimatedRegionsStatsP = arg
       },
+
       /**
        * #action
        */
-      setRegionStats(estimatedRegionStats?: Stats) {
-        self.estimatedRegionStats = estimatedRegionStats
+      setRegionsStats(estimatedRegionsStats?: Stats) {
+        self.estimatedRegionsStats = estimatedRegionsStats
       },
       /**
        * #action
        */
-      clearRegionStats() {
-        self.estimatedRegionStatsP = undefined
-        self.estimatedRegionStats = undefined
+      clearRegionsStats() {
+        self.estimatedRegionsStatsP = undefined
+        self.estimatedRegionsStats = undefined
       },
       /**
        * #action
        */
       setHeight(displayHeight: number) {
-        if (displayHeight > minDisplayHeight) {
-          self.heightPreConfig = displayHeight
-        } else {
-          self.heightPreConfig = minDisplayHeight
-        }
+        self.heightPreConfig =
+          displayHeight > minDisplayHeight ? displayHeight : minDisplayHeight
         return self.height
       },
       /**
@@ -393,9 +347,9 @@ function stateModelFactory() {
       /**
        * #action
        */
-      updateStatsLimit(stats: Stats) {
+      updateStatsLimit(stats?: Stats) {
         const view = getContainingView(self) as LGV
-        if (stats.bytes) {
+        if (stats?.bytes) {
           self.userByteSizeLimit = stats.bytes
         } else {
           self.userBpPerPxLimit = view.bpPerPx
@@ -487,13 +441,11 @@ function stateModelFactory() {
         if (!self.estimatedStatsReady || 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)
         )
       },
 
@@ -520,7 +472,6 @@ function stateModelFactory() {
          */
         async reload() {
           self.setError()
-          const aborter = new AbortController()
           const view = getContainingView(self) as LGV
 
           // extra check for contentBlocks.length
@@ -530,84 +481,70 @@ function stateModelFactory() {
           }
 
           try {
-            self.estimatedRegionStatsP = self.estimateRegionsStats(
-              view.staticBlocks.contentBlocks,
-              { signal: aborter.signal },
-            )
-            const estimatedRegionStats = await self.estimatedRegionStatsP
+            const estimatedRegionsStats = await self.estimateRegionsStats()
 
             if (isAlive(self)) {
-              self.setRegionStats(estimatedRegionStats)
+              self.setRegionsStats(estimatedRegionsStats)
               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 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 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.estimatedRegionsStats?.featureDensity !== undefined) {
+                self.setCurrBpPerPx(view.bpPerPx)
+                return
+              }
+
+              // we estimate stats once at a given zoom level
+              if (view.bpPerPx === self.currBpPerPx) {
+                return
+              }
+
+              self.clearRegionsStats()
+              self.setCurrBpPerPx(view.bpPerPx)
+              const estimatedRegionsStats = await self.estimateRegionsStats()
+              if (isAlive(self)) {
+                self.setRegionsStats(estimatedRegionsStats)
+              }
+            } catch (e) {
+              if (!isAbortException(e) && isAlive(self)) {
+                console.error(e)
+                self.setError(e)
+              }
+            }
+          }),
+        )
+      },
+    }))
     .views(self => ({
       /**
        * #method
@@ -625,8 +562,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
       },
 
       /**
@@ -639,20 +575,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
@@ -662,7 +600,7 @@ function stateModelFactory() {
         return {
           ...getParentRenderProps(self),
           notReady:
-            self.currBpPerPx !== view.bpPerPx || !self.estimatedRegionStats,
+            self.currBpPerPx !== view.bpPerPx || !self.estimatedRegionsStats,
           rpcDriverName: self.rpcDriverName,
           displayModel: self,
           onFeatureClick(_: unknown, featureId?: string) {
@@ -802,7 +740,7 @@ function stateModelFactory() {
       }
       // rewrite "height" from older snapshots to "heightPreConfig", this allows
       // us to maintain a height "getter" going forward
-      // @ts-ignore
+      // @ts-expect-error
       const { height, ...rest } = snap
       return { heightPreConfig: height, ...rest }
     })

package/src/BaseLinearDisplay/models/serverSideRenderedBlock.ts

@@ -81,10 +81,11 @@ const blockState = types
         self.status = message
       },
       setLoading(abortController: AbortController) {
-        if (renderInProgress !== undefined) {
-          if (!renderInProgress.signal.aborted) {
-            renderInProgress.abort()
-          }
+        if (
+          renderInProgress !== undefined &&
+          !renderInProgress.signal.aborted
+        ) {
+          renderInProgress.abort()
         }
         self.filled = false
         self.message = undefined
@@ -215,7 +216,7 @@ export function renderBlockData(
     const regionAsm = self.region.assemblyName
     if (
       !assemblyNames.includes(regionAsm) &&
-      !assemblyNames.find(name => assemblyManager.get(name)?.hasName(regionAsm))
+      !assemblyNames.some(name => assemblyManager.get(name)?.hasName(regionAsm))
     ) {
       throw new Error(
         `region assembly (${regionAsm}) does not match track assemblies (${assemblyNames})`,

package/src/BaseLinearDisplay/models/util.ts

@@ -1,3 +1,9 @@
+import { Stats } 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'
+import { LinearGenomeViewModel } from '../../LinearGenomeView'
+
 export interface RenderProps {
   rendererType: any // eslint-disable-line @typescript-eslint/no-explicit-any
   renderArgs: { [key: string]: any } // eslint-disable-line @typescript-eslint/no-explicit-any
@@ -14,11 +20,42 @@ export interface ErrorProps {
 export function getDisplayStr(totalBytes: number) {
   let displayBp
   if (Math.floor(totalBytes / 1000000) > 0) {
-    displayBp = `${parseFloat((totalBytes / 1000000).toPrecision(3))} Mb`
+    displayBp = `${Number.parseFloat((totalBytes / 1000000).toPrecision(3))} Mb`
   } else if (Math.floor(totalBytes / 1000) > 0) {
-    displayBp = `${parseFloat((totalBytes / 1000).toPrecision(3))} Kb`
+    displayBp = `${Number.parseFloat((totalBytes / 1000).toPrecision(3))} Kb`
   } else {
     displayBp = `${Math.floor(totalBytes)} bytes`
   }
   return displayBp
 }
+
+// stabilize clipid under test for snapshot
+export function getId(id: string, index: number) {
+  const isJest = typeof jest === 'undefined'
+  return `clip-${isJest ? id : 'jest'}-${index}`
+}
+
+export async function estimateRegionsStatsPre(self: IAnyStateTreeNode) {
+  const view = getContainingView(self) as LinearGenomeViewModel
+  const regions = view.staticBlocks.contentBlocks
+
+  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 {}
+  }
+  const sessionId = getRpcSessionId(self)
+
+  return rpcManager.call(sessionId, 'CoreEstimateRegionStats', {
+    sessionId,
+    regions,
+    adapterConfig,
+    statusCallback: (message: string) => {
+      if (isAlive(self)) {
+        self.setMessage(message)
+      }
+    },
+  }) as Promise<Stats>
+}

package/src/LaunchLinearGenomeView/index.ts

@@ -7,7 +7,7 @@ type LGV = LinearGenomeViewModel
 export default (pluginManager: PluginManager) => {
   pluginManager.addToExtensionPoint(
     'LaunchView-LinearGenomeView',
-    // @ts-ignore
+    // @ts-expect-error
     async ({
       session,
       assembly,

package/src/LinearBareDisplay/index.ts

@@ -12,6 +12,7 @@ export default (pluginManager: PluginManager) => {
     return new DisplayType({
       name: 'LinearBareDisplay',
       configSchema,
+      displayName: 'Bare feature display',
       stateModel: stateModelFactory(configSchema),
       trackType: 'BasicTrack',
       viewType: 'LinearGenomeView',
@@ -20,4 +21,5 @@ export default (pluginManager: PluginManager) => {
   })
 }
 
-export { configSchemaFactory, stateModelFactory }
+export { configSchemaFactory } from './configSchema'
+export { stateModelFactory } from './model'

package/src/LinearBasicDisplay/components/SetMaxHeight.tsx

@@ -10,15 +10,11 @@ import {
 } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles()(theme => ({
+const useStyles = makeStyles()({
   root: {
     width: 500,
   },
-
-  field: {
-    margin: theme.spacing(2),
-  },
-}))
+})
 
 function SetMaxHeightDlg({
   model,
@@ -26,7 +22,7 @@ function SetMaxHeightDlg({
 }: {
   model: {
     maxHeight?: number
-    setMaxHeight: Function
+    setMaxHeight: (arg?: number) => void
   }
   handleClose: () => void
 }) {

package/src/LinearBasicDisplay/index.ts

@@ -11,7 +11,7 @@ export default (pluginManager: PluginManager) => {
     const config = configSchema(pluginManager)
     return new DisplayType({
       name: 'LinearBasicDisplay',
-      displayName: 'Basic deature display',
+      displayName: 'Basic feature display',
       configSchema: config,
       stateModel: modelFactory(config),
       trackType: 'FeatureTrack',
@@ -21,4 +21,5 @@ export default (pluginManager: PluginManager) => {
   })
 }
 
-export { modelFactory, configSchema }
+export { default as modelFactory } from './model'
+export { default as configSchema } from './configSchema'

package/src/LinearBasicDisplay/model.ts

@@ -137,7 +137,7 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
       /**
        * #action
        */
-      setMaxHeight(val: number) {
+      setMaxHeight(val?: number) {
         self.trackMaxHeight = val
       },
     }))

package/src/LinearGenomeView/components/ExportSvgDialog.tsx

@@ -86,7 +86,7 @@ export default function ExportSvgDlg({
             {Object.entries(session.allThemes()).map(([key, val]) => (
               <MenuItem key={key} value={key}>
                 {
-                  // @ts-ignore
+                  // @ts-expect-error
                   val.name || '(Unknown name)'
                 }
               </MenuItem>