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

package/src/BaseLinearDisplay/models/BaseLinearDisplayModel.tsx

@@ -2,7 +2,7 @@
 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,
@@ -16,7 +16,7 @@ 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'
@@ -32,7 +32,8 @@ import { LinearGenomeViewModel, ExportSvgOptions } from '../../LinearGenomeView'
 import { Tooltip } from '../components/BaseLinearDisplay'
 import TooLargeMessage from '../components/TooLargeMessage'
 import BlockState, { renderBlockData } from './serverSideRenderedBlock'
-import { getId, getDisplayStr, estimateRegionsStatsPre } from './util'
+import { getId, getDisplayStr, getFeatureDensityStatsPre } from './util'
+import configSchema from './configSchema'
 
 type LGV = LinearGenomeViewModel
 
@@ -81,6 +82,10 @@ function stateModelFactory() {
          * #property
          */
         userByteSizeLimit: types.maybe(types.number),
+        /**
+         * #property
+         */
+        configuration: ConfigurationReference(configSchema),
       }),
     )
     .volatile(() => ({
@@ -89,8 +94,10 @@ function stateModelFactory() {
       message: '',
       featureIdUnderMouse: undefined as undefined | string,
       contextMenuFeature: undefined as undefined | Feature,
-      estimatedRegionsStatsP: undefined as undefined | Promise<Stats>,
-      estimatedRegionsStats: undefined as undefined | Stats,
+      featureDensityStatsP: undefined as
+        | undefined
+        | Promise<FeatureDensityStats>,
+      featureDensityStats: undefined as undefined | FeatureDensityStats,
     }))
     .views(self => ({
       get height() {
@@ -215,7 +222,7 @@ function stateModelFactory() {
        * #getter
        */
       get currentBytesRequested() {
-        return self.estimatedRegionsStats?.bytes || 0
+        return self.featureDensityStats?.bytes || 0
       },
 
       /**
@@ -223,7 +230,7 @@ function stateModelFactory() {
        */
       get currentFeatureScreenDensity() {
         const view = getContainingView(self) as LGV
-        return (self.estimatedRegionsStats?.featureDensity || 0) * view.bpPerPx
+        return (self.featureDensityStats?.featureDensity || 0) * view.bpPerPx
       },
 
       /**
@@ -235,8 +242,8 @@ function stateModelFactory() {
       /**
        * #getter
        */
-      get estimatedStatsReady() {
-        return !!self.estimatedRegionsStats || !!self.userBpPerPxLimit
+      get featureDensityStatsReady() {
+        return !!self.featureDensityStats || !!self.userBpPerPxLimit
       },
 
       /**
@@ -245,7 +252,7 @@ function stateModelFactory() {
       get maxAllowableBytes() {
         return (
           self.userByteSizeLimit ||
-          self.estimatedRegionsStats?.fetchSizeLimit ||
+          self.featureDensityStats?.fetchSizeLimit ||
           (getConf(self, 'fetchSizeLimit') as number)
         )
       },
@@ -288,37 +295,37 @@ function stateModelFactory() {
       /**
        * #action
        */
-      async estimateRegionsStats() {
-        if (!self.estimatedRegionsStatsP) {
-          self.estimatedRegionsStatsP = estimateRegionsStatsPre(self).catch(
+      async getFeatureDensityStats() {
+        if (!self.featureDensityStatsP) {
+          self.featureDensityStatsP = getFeatureDensityStatsPre(self).catch(
             e => {
-              this.setRegionsStatsP(undefined)
+              this.setFeatureDensityStatsP(undefined)
               throw e
             },
           )
         }
-        return self.estimatedRegionsStatsP
+        return self.featureDensityStatsP
       },
 
       /**
        * #action
        */
-      setRegionsStatsP(arg: any) {
-        self.estimatedRegionsStatsP = arg
+      setFeatureDensityStatsP(arg: any) {
+        self.featureDensityStatsP = arg
       },
 
       /**
        * #action
        */
-      setRegionsStats(estimatedRegionsStats?: Stats) {
-        self.estimatedRegionsStats = estimatedRegionsStats
+      setFeatureDensityStats(featureDensityStats?: FeatureDensityStats) {
+        self.featureDensityStats = featureDensityStats
       },
       /**
        * #action
        */
-      clearRegionsStats() {
-        self.estimatedRegionsStatsP = undefined
-        self.estimatedRegionsStats = undefined
+      clearFeatureDensityStats() {
+        self.featureDensityStatsP = undefined
+        self.featureDensityStats = undefined
       },
       /**
        * #action
@@ -347,7 +354,7 @@ function stateModelFactory() {
       /**
        * #action
        */
-      updateStatsLimit(stats?: Stats) {
+      setFeatureDensityStatsLimit(stats?: FeatureDensityStats) {
         const view = getContainingView(self) as LGV
         if (stats?.bytes) {
           self.userByteSizeLimit = stats.bytes
@@ -406,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
       },
       /**
@@ -434,11 +440,15 @@ 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
         }
         return (
@@ -481,10 +491,10 @@ function stateModelFactory() {
           }
 
           try {
-            const estimatedRegionsStats = await self.estimateRegionsStats()
+            const featureDensityStats = await self.getFeatureDensityStats()
 
             if (isAlive(self)) {
-              self.setRegionsStats(estimatedRegionsStats)
+              self.setFeatureDensityStats(featureDensityStats)
               superReload()
             }
           } catch (e) {
@@ -498,7 +508,7 @@ function stateModelFactory() {
       afterAttach() {
         // this autorun performs stats estimation
         //
-        // the chain of events calls estimateRegionsStats against the data
+        // 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)
@@ -519,7 +529,7 @@ function stateModelFactory() {
 
               // don't re-estimate featureDensity even if zoom level changes,
               // jbrowse1-style assume it's sort of representative
-              if (self.estimatedRegionsStats?.featureDensity !== undefined) {
+              if (self.featureDensityStats?.featureDensity !== undefined) {
                 self.setCurrBpPerPx(view.bpPerPx)
                 return
               }
@@ -529,11 +539,11 @@ function stateModelFactory() {
                 return
               }
 
-              self.clearRegionsStats()
+              self.clearFeatureDensityStats()
               self.setCurrBpPerPx(view.bpPerPx)
-              const estimatedRegionsStats = await self.estimateRegionsStats()
+              const featureDensityStats = await self.getFeatureDensityStats()
               if (isAlive(self)) {
-                self.setRegionsStats(estimatedRegionsStats)
+                self.setFeatureDensityStats(featureDensityStats)
               }
             } catch (e) {
               if (!isAbortException(e) && isAlive(self)) {
@@ -600,7 +610,7 @@ function stateModelFactory() {
         return {
           ...getParentRenderProps(self),
           notReady:
-            self.currBpPerPx !== view.bpPerPx || !self.estimatedRegionsStats,
+            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'],
+    },
   },
   {
     /**

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

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/LinearBareDisplay/model.ts

@@ -1,7 +1,7 @@
 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'

package/src/LinearBasicDisplay/configSchema.ts

@@ -9,16 +9,6 @@ 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/LinearGenomeView/components/GetSequenceDialog.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { makeStyles } from 'tss-react/mui'
 import {
   Button,
@@ -96,14 +96,6 @@ function SequenceDialog({
   const { leftOffset, rightOffset } = model
   const loading = Boolean(sequenceChunks === undefined)
 
-  // avoid infinite looping of useEffect
-  // random note: the current selected region can't be a computed because it
-  // uses action on base1dview even though it's on the ephemeral base1dview
-  const regionsSelected = useMemo(
-    () => model.getSelectedRegions(leftOffset, rightOffset),
-    [model, leftOffset, rightOffset],
-  )
-
   useEffect(() => {
     let active = true
     const controller = new AbortController()
@@ -111,18 +103,17 @@ function SequenceDialog({
     // eslint-disable-next-line @typescript-eslint/no-floating-promises
     ;(async () => {
       try {
-        if (regionsSelected.length > 0) {
-          const chunks = await fetchSequence(
-            model,
-            regionsSelected,
-            controller.signal,
-          )
-          if (active) {
-            setSequenceChunks(chunks)
-          }
-        } else {
+        // random note: the current selected region can't be a computed because
+        // it uses action on base1dview even though it's on the ephemeral
+        // base1dview
+        const selection = model.getSelectedRegions(leftOffset, rightOffset)
+        if (selection.length === 0) {
           throw new Error('Selected region is out of bounds')
         }
+        const chunks = await fetchSequence(model, selection, controller.signal)
+        if (active) {
+          setSequenceChunks(chunks)
+        }
       } catch (e) {
         console.error(e)
         if (active) {
@@ -135,7 +126,7 @@ function SequenceDialog({
       controller.abort()
       active = false
     }
-  }, [model, session, regionsSelected])
+  }, [model, session, leftOffset, rightOffset])
 
   const sequence = sequenceChunks
     ? formatSeqFasta(
@@ -146,10 +137,10 @@ function SequenceDialog({
             const chunkRefName = chunk.get('refName')
             const chunkStart = chunk.get('start') + 1
             const chunkEnd = chunk.get('end')
-            const chunkLocstring = `${chunkRefName}:${chunkStart}-${chunkEnd}`
+            const loc = `${chunkRefName}:${chunkStart}-${chunkEnd}`
             if (chunkSeq?.length !== chunkEnd - chunkStart + 1) {
               throw new Error(
-                `${chunkLocstring} returned ${chunkSeq.length.toLocaleString()} bases, but should have returned ${(
+                `${loc} returned ${chunkSeq.length.toLocaleString()} bases, but should have returned ${(
                   chunkEnd - chunkStart
                 ).toLocaleString()}`,
               )
@@ -162,8 +153,7 @@ function SequenceDialog({
               chunkSeq = complement(chunkSeq)
             }
             return {
-              header:
-                chunkLocstring + (rev ? '-rev' : '') + (comp ? '-comp' : ''),
+              header: loc + (rev ? '-rev' : '') + (comp ? '-comp' : ''),
               seq: chunkSeq,
             }
           }),
@@ -178,7 +168,7 @@ function SequenceDialog({
       open
       onClose={() => {
         handleClose()
-        model.setOffsets(undefined, undefined)
+        model.setOffsets()
       }}
       title="Reference sequence"
     >

package/src/LinearGenomeView/components/ImportForm.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, lazy } from 'react'
+import React, { useState, useEffect } from 'react'
 import { makeStyles } from 'tss-react/mui'
 import { observer } from 'mobx-react'
 import { getSession } from '@jbrowse/core/util'
@@ -20,9 +20,6 @@ import RefNameAutocomplete from './RefNameAutocomplete'
 import { fetchResults, splitLast } from './util'
 import { LinearGenomeViewModel } from '..'
 
-// lazies
-const SearchResultsDialog = lazy(() => import('./SearchResultsDialog'))
-
 const useStyles = makeStyles()(theme => ({
   importFormContainer: {
     padding: theme.spacing(2),
@@ -41,7 +38,7 @@ export default observer(function ({ model }: { model: LGV }) {
   const { classes } = useStyles()
   const session = getSession(model)
   const { assemblyNames, assemblyManager, textSearchManager } = session
-  const { rankSearchResults, isSearchDialogDisplayed, error } = model
+  const { rankSearchResults, error } = model
   const [selectedAsm, setSelectedAsm] = useState(assemblyNames[0])
   const [option, setOption] = useState<BaseResult>()
   const searchScope = model.searchScope(selectedAsm)
@@ -85,7 +82,7 @@ export default observer(function ({ model }: { model: LGV }) {
       if (option?.getDisplayString() === input && option.hasLocation()) {
         await navToOption(option)
       } else if (option?.results?.length) {
-        model.setSearchResults(option.results, option.getLabel())
+        model.setSearchResults(option.results, option.getLabel(), selectedAsm)
       } else {
         const [ref, rest] = splitLast(input, ':')
         const allRefs = assembly?.allRefNamesWithLowerCase || []
@@ -105,7 +102,7 @@ export default observer(function ({ model }: { model: LGV }) {
           })
 
           if (results.length > 1) {
-            model.setSearchResults(results, input.toLowerCase())
+            model.setSearchResults(results, input.toLowerCase(), selectedAsm)
           } else if (results.length === 1) {
             await navToOption(results[0])
           } else {
@@ -215,13 +212,6 @@ export default observer(function ({ model }: { model: LGV }) {
           </Grid>
         </form>
       </Container>
-      {isSearchDialogDisplayed ? (
-        <SearchResultsDialog
-          model={model}
-          optAssemblyName={selectedAsm}
-          handleClose={() => model.setSearchResults(undefined, undefined)}
-        />
-      ) : null}
     </div>
   )
 })

package/src/LinearGenomeView/components/LinearGenomeView.tsx

@@ -10,8 +10,6 @@ import { LinearGenomeViewModel } from '..'
 import TrackContainer from './TrackContainer'
 import TracksContainer from './TracksContainer'
 import ImportForm from './ImportForm'
-import GetSequenceDialog from './GetSequenceDialog'
-import SearchResultsDialog from './SearchResultsDialog'
 
 type LGV = LinearGenomeViewModel
 
@@ -39,18 +37,6 @@ const LinearGenomeView = observer(({ model }: { model: LGV }) => {
 
   return (
     <div style={{ position: 'relative' }}>
-      {model.seqDialogDisplayed ? (
-        <GetSequenceDialog
-          model={model}
-          handleClose={() => model.setGetSequenceDialogOpen(false)}
-        />
-      ) : null}
-      {model.isSearchDialogDisplayed ? (
-        <SearchResultsDialog
-          model={model}
-          handleClose={() => model.setSearchResults(undefined, undefined)}
-        />
-      ) : null}
       <HeaderComponent model={model} />
       <MiniControlsComponent model={model} />
       <TracksContainer model={model}>

package/src/LinearGenomeView/components/OverviewScalebar.tsx

@@ -69,6 +69,7 @@ const useStyles = makeStyles()(theme => ({
     position: 'relative',
   },
   overviewSvg: {
+    pointerEvents: 'none',
     width: '100%',
     position: 'absolute',
   },
@@ -170,7 +171,7 @@ const OverviewBox = observer(function ({
         style={{
           left: block.offsetPx + 3,
           color: canDisplayCytobands
-            ? theme.palette.primary.contrastText
+            ? theme.palette.text.primary
             : refNameColor,
         }}
         className={classes.scalebarRefName}