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

package/src/LinearGenomeView/components/ImportForm.tsx

@@ -4,10 +4,10 @@ import { observer } from 'mobx-react'
 import { getSession } from '@jbrowse/core/util'
 import {
   Button,
-  CircularProgress,
   FormControl,
   Container,
   Grid,
+  CircularProgress,
 } from '@mui/material'
 import { ErrorMessage, AssemblySelector } from '@jbrowse/core/ui'
 import BaseResult from '@jbrowse/core/TextSearch/BaseResults'
@@ -19,6 +19,8 @@ import CloseIcon from '@mui/icons-material/Close'
 import RefNameAutocomplete from './RefNameAutocomplete'
 import { fetchResults, splitLast } from './util'
 import { LinearGenomeViewModel } from '..'
+
+// lazies
 const SearchResultsDialog = lazy(() => import('./SearchResultsDialog'))
 
 const useStyles = makeStyles()(theme => ({
@@ -35,29 +37,29 @@ const useStyles = makeStyles()(theme => ({
 
 type LGV = LinearGenomeViewModel
 
-const ImportForm = observer(({ model }: { model: LGV }) => {
+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 [selectedAsm, setSelectedAsm] = useState(assemblyNames[0])
   const [option, setOption] = useState<BaseResult>()
-
   const searchScope = model.searchScope(selectedAsm)
-
   const assembly = assemblyManager.get(selectedAsm)
   const assemblyError = assemblyNames.length
     ? assembly?.error
     : 'No configured assemblies'
-  const regions = assembly?.regions || []
   const displayError = assemblyError || error
   const [value, setValue] = useState('')
-  const r0 = regions[0]?.refName
+  const regions = assembly?.regions
+  const assemblyLoaded = !!regions
+  const r0 = regions ? regions[0]?.refName : ''
 
-  // useEffect resets to an "initial state" of displaying first region from assembly
-  // after assembly change. needs to react to selectedAsm as well as r0 because changing
-  // assembly will run setValue('') and then r0 may not change if assembly names are the
-  // same across assemblies, but it still needs to be reset
+  // useEffect resets to an "initial state" of displaying first region from
+  // assembly after assembly change. needs to react to selectedAsm as well as
+  // r0 because changing assembly will run setValue('') and then r0 may not
+  // change if assembly names are the same across assemblies, but it still
+  // needs to be reset
   useEffect(() => {
     setValue(r0)
   }, [r0, selectedAsm])
@@ -89,7 +91,7 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
         const allRefs = assembly?.allRefNamesWithLowerCase || []
         if (
           allRefs.includes(input) ||
-          (allRefs.includes(ref) && !Number.isNaN(parseInt(rest, 10)))
+          (allRefs.includes(ref) && !Number.isNaN(Number.parseInt(rest, 10)))
         ) {
           await model.navToLocString(input, selectedAsm)
         } else {
@@ -142,10 +144,7 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
             <Grid item>
               <FormControl>
                 <AssemblySelector
-                  onChange={val => {
-                    setSelectedAsm(val)
-                    setValue('')
-                  }}
+                  onChange={val => setSelectedAsm(val)}
                   localStorageKey="lgv"
                   session={session}
                   selected={selectedAsm}
@@ -156,7 +155,7 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
               {selectedAsm ? (
                 assemblyError ? (
                   <CloseIcon style={{ color: 'red' }} />
-                ) : value ? (
+                ) : assemblyLoaded ? (
                   <FormControl>
                     <RefNameAutocomplete
                       fetchResults={queryString =>
@@ -169,9 +168,8 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
                         })
                       }
                       model={model}
-                      assemblyName={assemblyError ? undefined : selectedAsm}
+                      assemblyName={selectedAsm}
                       value={value}
-                      // note: minWidth 270 accommodates full width of helperText
                       minWidth={270}
                       onChange={str => setValue(str)}
                       onSelect={val => setOption(val)}
@@ -179,16 +177,11 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
                         variant: 'outlined',
                         helperText:
                           'Enter sequence name, feature name, or location',
-                        style: { minWidth: '175px' },
                       }}
                     />
                   </FormControl>
                 ) : (
-                  <CircularProgress
-                    role="progressbar"
-                    size={20}
-                    disableShrink
-                  />
+                  <CircularProgress size={20} disableShrink />
                 )
               ) : null}
             </Grid>
@@ -232,5 +225,3 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
     </div>
   )
 })
-
-export default ImportForm

package/src/LinearGenomeView/components/OverviewRubberband.tsx

@@ -4,6 +4,8 @@ import { makeStyles } from 'tss-react/mui'
 import { getSession, stringify } from '@jbrowse/core/util'
 import { observer } from 'mobx-react'
 import { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel'
+
+// locals
 import { LinearGenomeViewModel } from '..'
 import RubberbandSpan from './RubberbandSpan'
 import { getRelativeX } from './util'
@@ -25,50 +27,43 @@ const useStyles = makeStyles()({
   },
 })
 
-const HoverTooltip = observer(
-  ({
-    model,
-    open,
-    guideX,
-    overview,
-  }: {
-    model: LGV
-    open: boolean
-    guideX: number
-    overview: Base1DViewModel
-  }) => {
-    const { classes } = useStyles()
-    const { cytobandOffset } = model
-    const { assemblyManager } = getSession(model)
-
-    const px = overview.pxToBp(guideX - cytobandOffset)
-    const assembly = assemblyManager.get(px.assemblyName)
-    const cytoband = assembly?.cytobands?.find(
-      f =>
-        px.coord > f.get('start') &&
-        px.coord < f.get('end') &&
-        px.refName === assembly.getCanonicalRefName(f.get('refName')),
-    )
+const HoverTooltip = observer(function ({
+  model,
+  open,
+  guideX,
+  overview,
+}: {
+  model: LGV
+  open: boolean
+  guideX: number
+  overview: Base1DViewModel
+}) {
+  const { classes } = useStyles()
+  const { cytobandOffset } = model
+  const { assemblyManager } = getSession(model)
+
+  const px = overview.pxToBp(guideX - cytobandOffset)
+  const assembly = assemblyManager.get(px.assemblyName)
+  const cytoband = assembly?.cytobands?.find(
+    f =>
+      px.coord > f.get('start') &&
+      px.coord < f.get('end') &&
+      px.refName === assembly.getCanonicalRefName(f.get('refName')),
+  )
 
-    return (
-      <Tooltip
-        open={open}
-        placement="top"
-        title={[stringify(px), cytoband?.get('name')].join(' ')}
-        arrow
-      >
-        <div
-          className={classes.guide}
-          style={{
-            left: guideX,
-          }}
-        />
-      </Tooltip>
-    )
-  },
-)
+  return (
+    <Tooltip
+      open={open}
+      placement="top"
+      title={[stringify(px), cytoband?.get('name')].join(' ')}
+      arrow
+    >
+      <div className={classes.guide} style={{ left: guideX }} />
+    </Tooltip>
+  )
+})
 
-function OverviewRubberband({
+export default observer(function OverviewRubberband({
   model,
   overview,
   ControlComponent = <div />,
@@ -171,7 +166,6 @@ function OverviewRubberband({
         ) : null}
         <div
           className={classes.rubberbandControl}
-          role="presentation"
           ref={controlsRef}
           onMouseDown={mouseDown}
           onMouseOut={mouseOut}
@@ -195,7 +189,7 @@ function OverviewRubberband({
   if (startX) {
     leftBpOffset = overview.pxToBp(startX - cytobandOffset)
     rightBpOffset = overview.pxToBp(startX + width - cytobandOffset)
-    if (currentX && currentX < startX) {
+    if (currentX !== undefined && currentX < startX) {
       ;[leftBpOffset, rightBpOffset] = [rightBpOffset, leftBpOffset]
     }
   }
@@ -206,14 +200,13 @@ function OverviewRubberband({
         <RubberbandSpan
           leftBpOffset={leftBpOffset}
           rightBpOffset={rightBpOffset}
-          width={width}
+          width={Math.abs(width)}
           left={left}
         />
       ) : null}
       <div
         data-testid="rubberband_controls"
         className={classes.rubberbandControl}
-        role="presentation"
         ref={controlsRef}
         onMouseDown={mouseDown}
         onMouseOut={mouseOut}
@@ -223,6 +216,4 @@ function OverviewRubberband({
       </div>
     </div>
   )
-}
-
-export default observer(OverviewRubberband)
+})

package/src/LinearGenomeView/components/OverviewScalebar.tsx

@@ -297,7 +297,7 @@ const Scalebar = observer(function ({
   )
 })
 
-function OverviewScalebar({
+export default observer(function OverviewScalebar({
   model,
   children,
 }: {
@@ -337,8 +337,8 @@ function OverviewScalebar({
       </div>
     </div>
   )
-}
+})
 
-export default observer(OverviewScalebar)
+export { Polygon }
 
-export { Cytobands, Polygon }
+export { default as Cytobands } from './Cytobands'

package/src/LinearGenomeView/components/RefNameAutocomplete.tsx

@@ -6,7 +6,6 @@ import BaseResult, {
 } from '@jbrowse/core/TextSearch/BaseResults'
 import {
   Autocomplete,
-  CircularProgress,
   IconButton,
   InputAdornment,
   TextField,
@@ -28,17 +27,46 @@ export interface Option {
   result: BaseResult
 }
 
+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
+}
+
+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,
+            }),
+          },
+  )
+}
+
 // 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
 // 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 RefNameAutocomplete({
@@ -51,6 +79,7 @@ function RefNameAutocomplete({
   value,
   showHelp = true,
   minWidth = 200,
+  maxWidth = 550,
   TextFieldProps = {},
 }: {
   model: LinearGenomeViewModel
@@ -61,6 +90,7 @@ function RefNameAutocomplete({
   fetchResults: (query: string) => Promise<BaseResult[]>
   style?: React.CSSProperties
   minWidth?: number
+  maxWidth?: number
   showHelp?: boolean
   TextFieldProps?: TFP
 }) {
@@ -76,18 +106,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],
   )
 
@@ -104,32 +133,8 @@ function RefNameAutocomplete({
         setLoaded(false)
         const results = await fetchResults(debouncedSearch)
         if (active) {
-          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] = []
-            }
-            m[d].push(r)
-          }
-          const display = Object.entries(m).map(([displayString, results]) => {
-            if (results.length === 1) {
-              return { result: results[0] }
-            } else {
-              return {
-                result: new BaseResult({
-                  displayString,
-                  results,
-                  label: displayString,
-                }),
-              }
-            }
-          })
-
-          setSearchOptions(display)
           setLoaded(true)
+          setSearchOptions(getDeduplicatedResult(results))
         }
       } catch (e) {
         console.error(e)
@@ -146,11 +151,11 @@ function RefNameAutocomplete({
 
   const inputBoxVal = coarseVisibleLocStrings || value || ''
 
-  // heuristic, text width + icon width
-  // + 45 accommodates help icon and search icon
+  // heuristic, text width + icon width + 50 accommodates help icon and search
+  // icon
   const width = Math.min(
     Math.max(measureText(inputBoxVal, 16) + 50, minWidth),
-    550,
+    maxWidth,
   )
 
   // notes on implementation:
@@ -158,7 +163,6 @@ function RefNameAutocomplete({
   return (
     <>
       <Autocomplete
-        id={`refNameAutocomplete-${model.id}`}
         data-testid="autocomplete"
         disableListWrap
         disableClearable
@@ -237,21 +241,17 @@ function RefNameAutocomplete({
 
                 endAdornment: (
                   <>
-                    {regions.length === 0 ? (
-                      <CircularProgress color="inherit" size={20} />
-                    ) : (
-                      <InputAdornment position="end" style={{ marginRight: 7 }}>
-                        <SearchIcon fontSize="small" />
-                        {showHelp ? (
-                          <IconButton
-                            onClick={() => setHelpDialogDisplayed(true)}
-                            size="small"
-                          >
-                            <HelpIcon fontSize="small" />
-                          </IconButton>
-                        ) : null}
-                      </InputAdornment>
-                    )}
+                    <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}
                   </>
                 ),

package/src/LinearGenomeView/components/RubberbandSpan.tsx

@@ -1,6 +1,5 @@
 import React, { useRef } from 'react'
 import { makeStyles } from 'tss-react/mui'
-
 import { Popover, Typography, alpha } from '@mui/material'
 import { stringify, toLocale } from '@jbrowse/core/util'
 
@@ -43,7 +42,7 @@ interface Offset {
   oob?: boolean
 }
 
-function RubberbandSpan({
+export default function RubberbandSpan({
   leftBpOffset,
   rightBpOffset,
   numOfBpSelected,
@@ -67,14 +66,8 @@ function RubberbandSpan({
             classes={{ paper: classes.paper }}
             open
             anchorEl={ref.current}
-            anchorOrigin={{
-              vertical: 'top',
-              horizontal: 'left',
-            }}
-            transformOrigin={{
-              vertical: 'bottom',
-              horizontal: 'right',
-            }}
+            anchorOrigin={{ vertical: 'top', horizontal: 'left' }}
+            transformOrigin={{ vertical: 'bottom', horizontal: 'right' }}
             keepMounted
             disableRestoreFocus
           >
@@ -82,19 +75,11 @@ function RubberbandSpan({
           </Popover>
           <Popover
             className={classes.popover}
-            classes={{
-              paper: classes.paper,
-            }}
+            classes={{ paper: classes.paper }}
             open
             anchorEl={ref.current}
-            anchorOrigin={{
-              vertical: 'top',
-              horizontal: 'right',
-            }}
-            transformOrigin={{
-              vertical: 'bottom',
-              horizontal: 'left',
-            }}
+            anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+            transformOrigin={{ vertical: 'bottom', horizontal: 'left' }}
             keepMounted
             disableRestoreFocus
           >
@@ -112,5 +97,3 @@ function RubberbandSpan({
     </>
   )
 }
-
-export default RubberbandSpan

package/src/LinearGenomeView/components/SearchBox.tsx

@@ -61,7 +61,7 @@ function SearchBox({
         const allRefs = assembly?.allRefNamesWithLowerCase || []
         if (
           allRefs.includes(input) ||
-          (allRefs.includes(ref) && !Number.isNaN(parseInt(rest, 10)))
+          (allRefs.includes(ref) && !Number.isNaN(Number.parseInt(rest, 10)))
         ) {
           await model.navToLocString(input, assemblyName)
         } else {
@@ -103,10 +103,11 @@ function SearchBox({
         })
       }
       model={model}
+      minWidth={175}
       TextFieldProps={{
         variant: 'outlined',
         className: classes.headerRefName,
-        style: { margin: SPACING, minWidth: '175px' },
+        style: { margin: SPACING },
         InputProps: {
           style: {
             padding: 0,