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

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,3 +1,10 @@
+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'
+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
@@ -22,3 +29,39 @@ export function getDisplayStr(totalBytes: number) {
   }
   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 getFeatureDensityStatsPre(
+  self: IAnyStateTreeNode & {
+    adapterConfig?: AnyConfigurationModel
+    setMessage: (arg: string) => void
+  },
+) {
+  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, 'CoreGetFeatureDensityStats', {
+    sessionId,
+    regions,
+    adapterConfig,
+    statusCallback: (message: string) => {
+      if (isAlive(self)) {
+        self.setMessage(message)
+      }
+    },
+  }) as Promise<FeatureDensityStats>
+}

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',

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/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/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/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',

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/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}

package/src/LinearGenomeView/components/RefNameAutocomplete.tsx

@@ -6,6 +6,7 @@ import BaseResult, {
 } from '@jbrowse/core/TextSearch/BaseResults'
 import {
   Autocomplete,
+  AutocompleteRenderInputParams,
   IconButton,
   InputAdornment,
   TextField,
@@ -30,13 +31,12 @@ export interface Option {
 function aggregateResults(results: BaseResult[]) {
   const m: { [key: string]: BaseResult[] } = {}
 
-  for (let i = 0; i < results.length; i++) {
-    const r = results[i]
-    const d = r.getDisplayString()
-    if (!m[d]) {
-      m[d] = []
+  for (const result of results) {
+    const displayString = result.getDisplayString()
+    if (!m[displayString]) {
+      m[displayString] = []
     }
-    m[d].push(r)
+    m[displayString].push(result)
   }
   return m
 }
@@ -63,13 +63,28 @@ function getDeduplicatedResult(results: BaseResult[]) {
 // because they do not have a matchedObject. the trix search results already
 // filter so don't need re-filtering
 function filterOptions(options: Option[], searchQuery: string) {
-  return options.filter(option => {
-    const { result } = option
-    return (
+  return options.filter(
+    ({ result }) =>
       result.getLabel().toLowerCase().includes(searchQuery) ||
-      result.matchedObject
-    )
-  })
+      result.matchedObject,
+  )
+}
+
+function getFiltered(opts: Option[], inputValue: string) {
+  const filtered = filterOptions(opts, inputValue.toLocaleLowerCase())
+  return [
+    ...filtered.slice(0, 100),
+    ...(filtered.length > 100
+      ? [
+          {
+            group: 'limitOption',
+            result: new BaseResult({
+              label: 'keep typing for more results',
+            }),
+          },
+        ]
+      : []),
+  ]
 }
 
 function RefNameAutocomplete({
@@ -101,7 +116,6 @@ function RefNameAutocomplete({
   const { assemblyManager } = session
   const [open, setOpen] = useState(false)
   const [loaded, setLoaded] = useState(true)
-  const [isHelpDialogDisplayed, setHelpDialogDisplayed] = useState(false)
   const [currentSearch, setCurrentSearch] = useState('')
   const [inputValue, setInputValue] = useState('')
   const [searchOptions, setSearchOptions] = useState<Option[]>()
@@ -109,18 +123,17 @@ function RefNameAutocomplete({
   const assembly = assemblyName ? assemblyManager.get(assemblyName) : undefined
   const { coarseVisibleLocStrings, hasDisplayedRegions } = model
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const regions = assembly?.regions || []
+  const regions = assembly?.regions
 
   const options = useMemo(
     () =>
-      regions.map(option => ({
+      regions?.map(option => ({
         result: new RefSequenceResult({
           refName: option.refName,
           label: option.refName,
           matchedAttribute: 'refName',
         }),
-      })),
+      })) || [],
     [regions],
   )
 
@@ -155,10 +168,12 @@ function RefNameAutocomplete({
 
   const inputBoxVal = coarseVisibleLocStrings || value || ''
 
-  // heuristic, text width + icon width + 50 accommodates help icon and search
+  // heuristic, text width + 60 accommodates help icon and search
   // icon
-  const w = measureText(inputBoxVal, 16) + 50
-  const width = Math.min(Math.max(w, minWidth), maxWidth)
+  const width = Math.min(
+    Math.max(measureText(inputBoxVal, 14) + 100, minWidth),
+    maxWidth,
+  )
 
   // notes on implementation:
   // The selectOnFocus setting helps highlight the field when clicked
@@ -205,70 +220,77 @@ function RefNameAutocomplete({
           setInputValue(inputBoxVal)
         }}
         options={!searchOptions?.length ? options : searchOptions}
-        getOptionDisabled={option => option?.group === 'limitOption'}
-        filterOptions={(options, params) => {
-          const filtered = filterOptions(
-            options,
-            params.inputValue.toLocaleLowerCase(),
-          )
-          return [
-            ...filtered.slice(0, 100),
-            ...(filtered.length > 100
-              ? [
-                  {
-                    group: 'limitOption',
-                    result: new BaseResult({
-                      label: 'keep typing for more results',
-                    }),
-                  },
-                ]
-              : []),
-          ]
-        }}
-        renderInput={params => {
-          const { helperText, InputProps = {} } = TextFieldProps
-          return (
-            <TextField
-              onBlur={() =>
-                // this is used to restore a refName or the non-user-typed input
-                // to the box on blurring
-                setInputValue(inputBoxVal)
-              }
-              {...params}
-              {...TextFieldProps}
-              helperText={helperText}
-              InputProps={{
-                ...params.InputProps,
-                ...InputProps,
-
-                endAdornment: (
-                  <>
-                    <InputAdornment position="end" style={{ marginRight: 7 }}>
-                      <SearchIcon fontSize="small" />
-                      {showHelp ? (
-                        <IconButton
-                          onClick={() => setHelpDialogDisplayed(true)}
-                          size="small"
-                        >
-                          <HelpIcon fontSize="small" />
-                        </IconButton>
-                      ) : null}
-                    </InputAdornment>
-                    {params.InputProps.endAdornment}
-                  </>
-                ),
-              }}
-              placeholder="Search for location"
-              onChange={e => setCurrentSearch(e.target.value)}
-            />
-          )
-        }}
-        getOptionLabel={option =>
-          (typeof option === 'string'
-            ? option
-            : option.result.getDisplayString()) || ''
+        getOptionDisabled={option => option.group === 'limitOption'}
+        filterOptions={(opts, { inputValue }) => getFiltered(opts, inputValue)}
+        renderInput={params => (
+          <AutocompleteTextField
+            showHelp={showHelp}
+            params={params}
+            inputBoxVal={inputBoxVal}
+            TextFieldProps={TextFieldProps}
+            setCurrentSearch={setCurrentSearch}
+            setInputValue={setInputValue}
+          />
+        )}
+        getOptionLabel={opt =>
+          typeof opt === 'string' ? opt : opt.result.getDisplayString()
         }
       />
+    </>
+  )
+}
+
+function AutocompleteTextField({
+  TextFieldProps,
+  inputBoxVal,
+  params,
+  showHelp,
+  setInputValue,
+  setCurrentSearch,
+}: {
+  TextFieldProps: TFP
+  inputBoxVal: string
+  showHelp?: boolean
+  params: AutocompleteRenderInputParams
+  setInputValue: (arg: string) => void
+  setCurrentSearch: (arg: string) => void
+}) {
+  const { helperText, InputProps = {} } = TextFieldProps
+  return (
+    <TextField
+      onBlur={() =>
+        // this is used to restore a refName or the non-user-typed input
+        // to the box on blurring
+        setInputValue(inputBoxVal)
+      }
+      {...params}
+      {...TextFieldProps}
+      size="small"
+      helperText={helperText}
+      InputProps={{
+        ...params.InputProps,
+        ...InputProps,
+
+        endAdornment: (
+          <EndAdornment
+            showHelp={showHelp}
+            endAdornment={params.InputProps.endAdornment}
+          />
+        ),
+      }}
+      placeholder="Search for location"
+      onChange={e => setCurrentSearch(e.target.value)}
+    />
+  )
+}
+
+function HelpAdornment() {
+  const [isHelpDialogDisplayed, setHelpDialogDisplayed] = useState(false)
+  return (
+    <>
+      <IconButton onClick={() => setHelpDialogDisplayed(true)} size="small">
+        <HelpIcon fontSize="small" />
+      </IconButton>
       {isHelpDialogDisplayed ? (
         <Suspense fallback={<div />}>
           <HelpDialog handleClose={() => setHelpDialogDisplayed(false)} />
@@ -278,4 +300,22 @@ function RefNameAutocomplete({
   )
 }
 
+function EndAdornment({
+  showHelp,
+  endAdornment,
+}: {
+  showHelp?: boolean
+  endAdornment: React.ReactNode
+}) {
+  return (
+    <>
+      <InputAdornment position="end" style={{ marginRight: 7 }}>
+        <SearchIcon fontSize="small" />
+        {showHelp ? <HelpAdornment /> : null}
+      </InputAdornment>
+      {endAdornment}
+    </>
+  )
+}
+
 export default observer(RefNameAutocomplete)