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

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.test.tsx

@@ -157,11 +157,11 @@ test('renders two tracks, two regions', async () => {
   })
   const model = session.views[0]
   model.setWidth(800)
-  const { container, findByText, queryAllByTestId } = render(
-    <LinearGenomeView model={model} />,
-  )
+  const { container, findByDisplayValue, findByText, queryAllByTestId } =
+    render(<LinearGenomeView model={model} />)
   await findByText('Foo Track')
   await findByText('798bp')
+  await findByDisplayValue('ctgA:1..100 ctgB:1,001..1,698')
   await waitFor(() => expect(queryAllByTestId('svgfeatures').length).toBe(4))
   expect(container).toMatchSnapshot()
 }, 15000)

package/src/LinearGenomeView/components/LinearGenomeView.tsx

@@ -1,17 +1,18 @@
-import React from 'react'
+import React, { lazy } from 'react'
 import { Button, Paper, Typography } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
-import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons'
 import { LoadingEllipses } from '@jbrowse/core/ui'
 import { observer } from 'mobx-react'
 
+// icons
+import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons'
+
 // locals
 import { LinearGenomeViewModel } from '..'
 import TrackContainer from './TrackContainer'
 import TracksContainer from './TracksContainer'
-import ImportForm from './ImportForm'
-import GetSequenceDialog from './GetSequenceDialog'
-import SearchResultsDialog from './SearchResultsDialog'
+
+const ImportForm = lazy(() => import('./ImportForm'))
 
 type LGV = LinearGenomeViewModel
 
@@ -39,18 +40,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/MiniControls.tsx

@@ -1,7 +1,6 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { observer } from 'mobx-react'
 import { IconButton, Paper } from '@mui/material'
-import Menu from '@jbrowse/core/ui/Menu'
 
 // icons
 import ZoomIn from '@mui/icons-material/ZoomIn'
@@ -10,45 +9,45 @@ import ArrowDown from '@mui/icons-material/KeyboardArrowDown'
 
 // locals
 import { LinearGenomeViewModel } from '..'
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
+import { makeStyles } from 'tss-react/mui'
 
-const MiniControls = observer((props: { model: LinearGenomeViewModel }) => {
-  const { model } = props
-  const { bpPerPx, maxBpPerPx, minBpPerPx, scaleFactor, hideHeader } = model
-  const [anchorEl, setAnchorEl] = useState<HTMLElement>()
+const useStyles = makeStyles()(theme => ({
+  bg: {
+    position: 'absolute',
+    right: 0,
+    zIndex: 1001,
+    background: theme.palette.background.paper,
+  },
+}))
 
+const MiniControls = observer(function ({
+  model,
+}: {
+  model: LinearGenomeViewModel
+}) {
+  const { classes } = useStyles()
+  const { bpPerPx, maxBpPerPx, minBpPerPx, scaleFactor, hideHeader } = model
   return hideHeader ? (
-    <div style={{ position: 'absolute', right: '0px', zIndex: '1001' }}>
-      <Paper style={{ background: '#aaa7' }}>
-        <IconButton onClick={event => setAnchorEl(event.currentTarget)}>
-          <ArrowDown fontSize="small" />
-        </IconButton>
-
-        <IconButton
-          data-testid="zoom_out"
-          onClick={() => model.zoom(bpPerPx * 2)}
-          disabled={bpPerPx >= maxBpPerPx - 0.0001 || scaleFactor !== 1}
-        >
-          <ZoomOut fontSize="small" />
-        </IconButton>
-        <IconButton
-          data-testid="zoom_in"
-          onClick={() => model.zoom(model.bpPerPx / 2)}
-          disabled={bpPerPx <= minBpPerPx + 0.0001 || scaleFactor !== 1}
-        >
-          <ZoomIn fontSize="small" />
-        </IconButton>
-        <Menu
-          anchorEl={anchorEl}
-          open={Boolean(anchorEl)}
-          onMenuItemClick={(_, callback) => {
-            callback()
-            setAnchorEl(undefined)
-          }}
-          onClose={() => setAnchorEl(undefined)}
-          menuItems={model.menuItems()}
-        />
-      </Paper>
-    </div>
+    <Paper className={classes.bg}>
+      <CascadingMenuButton menuItems={model.menuItems()}>
+        <ArrowDown fontSize="small" />
+      </CascadingMenuButton>
+      <IconButton
+        data-testid="zoom_out"
+        onClick={() => model.zoom(bpPerPx * 2)}
+        disabled={bpPerPx >= maxBpPerPx - 0.0001 || scaleFactor !== 1}
+      >
+        <ZoomOut fontSize="small" />
+      </IconButton>
+      <IconButton
+        data-testid="zoom_in"
+        onClick={() => model.zoom(model.bpPerPx / 2)}
+        disabled={bpPerPx <= minBpPerPx + 0.0001 || scaleFactor !== 1}
+      >
+        <ZoomIn fontSize="small" />
+      </IconButton>
+    </Paper>
   ) : null
 })
 

package/src/LinearGenomeView/components/OverviewScalebar.tsx

@@ -69,6 +69,7 @@ const useStyles = makeStyles()(theme => ({
     position: 'relative',
   },
   overviewSvg: {
+    pointerEvents: 'none',
     width: '100%',
     position: 'absolute',
   },
@@ -92,11 +93,14 @@ const Polygon = observer(function ({
   const { tertiary, primary } = theme.palette
   const polygonColor = tertiary ? tertiary.light : primary.light
 
+  // catches possible null from at's below
   if (!contentBlocks.length) {
     return null
   }
-  const first = contentBlocks[0]
-  const last = contentBlocks[contentBlocks.length - 1]
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const first = contentBlocks.at(0)!
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const last = contentBlocks.at(-1)!
   const topLeft =
     (overview.bpToPx({
       ...first,
@@ -170,7 +174,7 @@ const OverviewBox = observer(function ({
         style={{
           left: block.offsetPx + 3,
           color: canDisplayCytobands
-            ? theme.palette.primary.contrastText
+            ? theme.palette.text.primary
             : refNameColor,
         }}
         className={classes.scalebarRefName}
@@ -237,18 +241,21 @@ const Scalebar = observer(function ({
 
   const { tertiary, primary } = theme.palette
   const scalebarColor = tertiary ? tertiary.light : primary.light
-
+  // catches possible null from at's below
   if (!visibleRegions.length) {
     return null
   }
-  const first = visibleRegions[0]
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const first = visibleRegions.at(0)!
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const last = visibleRegions.at(-1)!
+
   const firstOverviewPx =
     overview.bpToPx({
       ...first,
       coord: first.reversed ? first.end : first.start,
     }) || 0
 
-  const last = visibleRegions[visibleRegions.length - 1]
   const lastOverviewPx =
     overview.bpToPx({
       ...last,

package/src/LinearGenomeView/components/RefNameAutocomplete/AutocompleteTextField.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import {
+  AutocompleteRenderInputParams,
+  TextField,
+  TextFieldProps as TFP,
+} from '@mui/material'
+
+// locals
+import EndAdornment from './EndAdornment'
+
+export default 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)}
+    />
+  )
+}

package/src/LinearGenomeView/components/RefNameAutocomplete/EndAdornment.tsx

@@ -0,0 +1,44 @@
+import React, { Suspense, lazy, useState } from 'react'
+
+import { IconButton, InputAdornment } from '@mui/material'
+
+// icons
+import SearchIcon from '@mui/icons-material/Search'
+import HelpIcon from '@mui/icons-material/Help'
+
+// lazy
+const HelpDialog = lazy(() => import('./HelpDialog'))
+
+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)} />
+        </Suspense>
+      ) : null}
+    </>
+  )
+}
+
+export default function EndAdornment({
+  showHelp,
+  endAdornment,
+}: {
+  showHelp?: boolean
+  endAdornment: React.ReactNode
+}) {
+  return (
+    <>
+      <InputAdornment position="end" style={{ marginRight: 7 }}>
+        <SearchIcon fontSize="small" />
+        {showHelp ? <HelpAdornment /> : null}
+      </InputAdornment>
+      {endAdornment}
+    </>
+  )
+}

package/src/LinearGenomeView/components/RefNameAutocomplete/index.tsx

@@ -0,0 +1,160 @@
+import React, { useEffect, useState } from 'react'
+import { observer } from 'mobx-react'
+import { getSession, useDebounce, measureText } from '@jbrowse/core/util'
+import BaseResult, {
+  RefSequenceResult,
+} from '@jbrowse/core/TextSearch/BaseResults'
+import { Autocomplete, TextFieldProps as TFP } from '@mui/material'
+
+// locals
+import { LinearGenomeViewModel } from '../../model'
+import { getDeduplicatedResult, getFiltered, Option } from './util'
+import AutocompleteTextField from './AutocompleteTextField'
+
+export default observer(function RefNameAutocomplete({
+  model,
+  onSelect,
+  assemblyName,
+  style,
+  fetchResults,
+  onChange,
+  value,
+  showHelp = true,
+  minWidth = 200,
+  maxWidth = 550,
+  TextFieldProps = {},
+}: {
+  model: LinearGenomeViewModel
+  onSelect?: (region: BaseResult) => void
+  onChange?: (val: string) => void
+  assemblyName?: string
+  value?: string
+  fetchResults: (query: string) => Promise<BaseResult[]>
+  style?: React.CSSProperties
+  minWidth?: number
+  maxWidth?: number
+  showHelp?: boolean
+  TextFieldProps?: TFP
+}) {
+  const session = getSession(model)
+  const { assemblyManager } = session
+  const [open, setOpen] = useState(false)
+  const [loaded, setLoaded] = useState(true)
+  const [currentSearch, setCurrentSearch] = useState('')
+  const [inputValue, setInputValue] = useState('')
+  const [searchOptions, setSearchOptions] = useState<Option[]>()
+  const debouncedSearch = useDebounce(currentSearch, 300)
+  const assembly = assemblyName ? assemblyManager.get(assemblyName) : undefined
+  const { coarseVisibleLocStrings, hasDisplayedRegions } = model
+
+  useEffect(() => {
+    let active = true
+
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    ;(async () => {
+      try {
+        if (debouncedSearch === '' || !assemblyName) {
+          return
+        }
+
+        setLoaded(false)
+        const results = await fetchResults(debouncedSearch)
+        if (active) {
+          setLoaded(true)
+          setSearchOptions(getDeduplicatedResult(results))
+        }
+      } catch (e) {
+        console.error(e)
+        if (active) {
+          session.notify(`${e}`, 'error')
+        }
+      }
+    })()
+
+    return () => {
+      active = false
+    }
+  }, [assemblyName, fetchResults, debouncedSearch, session, model])
+
+  const inputBoxVal = coarseVisibleLocStrings || value || ''
+
+  // heuristic, text width + 60 accommodates help icon and search icon
+  const width = Math.min(
+    Math.max(measureText(inputBoxVal, 14) + 100, minWidth),
+    maxWidth,
+  )
+
+  // notes on implementation:
+  // The selectOnFocus setting helps highlight the field when clicked
+  return (
+    <>
+      <Autocomplete
+        data-testid="autocomplete"
+        disableListWrap
+        disableClearable
+        disabled={!assemblyName}
+        freeSolo
+        includeInputInList
+        selectOnFocus
+        style={{ ...style, width }}
+        value={inputBoxVal}
+        loading={!loaded}
+        inputValue={inputValue}
+        onInputChange={(_event, newInputValue) => {
+          setInputValue(newInputValue)
+          onChange?.(newInputValue)
+        }}
+        loadingText="loading results"
+        open={open}
+        onOpen={() => setOpen(true)}
+        onClose={() => {
+          setOpen(false)
+          setLoaded(true)
+          if (hasDisplayedRegions) {
+            setCurrentSearch('')
+            setSearchOptions(undefined)
+          }
+        }}
+        onChange={(_event, selectedOption) => {
+          if (!selectedOption || !assemblyName) {
+            return
+          }
+
+          if (typeof selectedOption === 'string') {
+            // handles string inputs on keyPress enter
+            onSelect?.(new BaseResult({ label: selectedOption }))
+          } else {
+            onSelect?.(selectedOption.result)
+          }
+          setInputValue(inputBoxVal)
+        }}
+        options={
+          !searchOptions?.length
+            ? assembly?.regions?.map(option => ({
+                result: new RefSequenceResult({
+                  refName: option.refName,
+                  label: option.refName,
+                  matchedAttribute: 'refName',
+                }),
+              })) || []
+            : searchOptions
+        }
+        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()
+        }
+      />
+    </>
+  )
+})

package/src/LinearGenomeView/components/RefNameAutocomplete/util.ts

@@ -0,0 +1,65 @@
+import BaseResult from '@jbrowse/core/TextSearch/BaseResults'
+
+export interface Option {
+  group?: string
+  result: BaseResult
+}
+
+// filter so don't need re-filtering
+function filterOptions(options: Option[], searchQuery: string) {
+  return options.filter(
+    ({ result }) =>
+      result.getLabel().toLowerCase().includes(searchQuery) ||
+      result.matchedObject,
+  )
+}
+
+// the logic of this method is to only apply a filter to RefSequenceResults
+// because they do not have a matchedObject. the trix search results already
+export 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',
+            }),
+          },
+        ]
+      : []),
+  ]
+}
+
+export function aggregateResults(results: BaseResult[]) {
+  const m: { [key: string]: BaseResult[] } = {}
+
+  for (const result of results) {
+    const displayString = result.getDisplayString()
+    if (!m[displayString]) {
+      m[displayString] = []
+    }
+    m[displayString].push(result)
+  }
+  return m
+}
+
+export function getDeduplicatedResult(results: BaseResult[]) {
+  return Object.entries(aggregateResults(results)).map(
+    ([displayString, results]) =>
+      results.length === 1
+        ? {
+            result: results[0],
+          }
+        : {
+            // deduplicate a "multi-result"
+            result: new BaseResult({
+              displayString,
+              results,
+              label: displayString,
+            }),
+          },
+  )
+}