@jbrowse/plugin-linear-genome-view 2.1.2 → 2.1.4

package/src/LinearGenomeView/components/ImportForm.tsx

@@ -9,7 +9,7 @@ import CloseIcon from '@mui/icons-material/Close'
 
 // locals
 import RefNameAutocomplete from './RefNameAutocomplete'
-import { fetchResults } from './util'
+import { fetchResults, splitLast } from './util'
 import { LinearGenomeViewModel, WIDGET_HEIGHT } from '..'
 const SearchResultsDialog = lazy(() => import('./SearchResultsDialog'))
 
@@ -34,6 +34,8 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
   const { rankSearchResults, isSearchDialogDisplayed, error } = model
   const [selectedAsm, setSelectedAsm] = useState(assemblyNames[0])
   const [importError, setImportError] = useState(error)
+  const [option, setOption] = useState<BaseResult>()
+
   const searchScope = model.searchScope(selectedAsm)
 
   const assembly = assemblyManager.get(selectedAsm)
@@ -45,11 +47,16 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
   const [myVal, setValue] = useState('')
   const value = myVal || regions[0]?.refName
 
-  // use this instead of useState initializer because the useState initializer
-  // won't update in response to an observable
-  const option = new BaseResult({
-    label: value,
-  })
+  function navToOption(option: BaseResult) {
+    const location = option.getLocation()
+    const trackId = option.getTrackId()
+    if (location) {
+      model.navToLocString(location, selectedAsm)
+      if (trackId) {
+        model.showTrack(trackId)
+      }
+    }
+  }
 
   // gets a string as input, or use stored option results from previous query,
   // then re-query and
@@ -57,45 +64,34 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
   // 2) if it's a single result navigate to it
   // 3) else assume it's a locstring and navigate to it
   async function handleSelectedRegion(input: string) {
-    if (!option) {
-      return
-    }
-    let trackId = option.getTrackId()
-    let location = input || option.getLocation() || ''
-    const [ref, rest] = location.split(':')
-    const allRefs = assembly?.allRefNames || []
     try {
-      // instead of querying text-index, first:
-      // - check if input matches a refname directly
-      // - or looks like locstring
-      // then just navigate as if it were a locstring
-      if (
-        allRefs.includes(location) ||
-        (allRefs.includes(ref) &&
-          rest !== undefined &&
-          !Number.isNaN(parseInt(rest, 10)))
-      ) {
-        model.navToLocString(location, selectedAsm)
+      if (option?.getDisplayString() === input && option.hasLocation()) {
+        navToOption(option)
       } else {
-        const results = await fetchResults({
-          queryString: input,
-          searchType: 'exact',
-          searchScope,
-          rankSearchResults,
-          textSearchManager,
-          assembly,
-        })
-        if (results.length > 1) {
-          model.setSearchResults(results, input.toLowerCase())
-          return
-        } else if (results.length === 1) {
-          location = results[0].getLocation()
-          trackId = results[0].getTrackId()
-        }
+        const [ref, rest] = splitLast(input, ':')
+        const allRefs = assembly?.allRefNamesWithLowerCase || []
+        if (
+          allRefs.includes(input) ||
+          (allRefs.includes(ref) && !Number.isNaN(parseInt(rest, 10)))
+        ) {
+          model.navToLocString(input, selectedAsm)
+        } else {
+          const results = await fetchResults({
+            queryString: input,
+            searchType: 'exact',
+            searchScope,
+            rankSearchResults,
+            textSearchManager,
+            assembly,
+          })
 
-        model.navToLocString(location, selectedAsm)
-        if (trackId) {
-          model.showTrack(trackId)
+          if (results.length > 1) {
+            model.setSearchResults(results, input.toLowerCase())
+          } else if (results.length === 1) {
+            navToOption(results[0])
+          } else {
+            model.navToLocString(input, selectedAsm)
+          }
         }
       }
     } catch (e) {
@@ -160,6 +156,7 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
                     // note: minWidth 270 accomodates full width of helperText
                     minWidth={270}
                     onChange={str => setValue(str)}
+                    onSelect={val => setOption(val)}
                     TextFieldProps={{
                       variant: 'outlined',
                       helperText:

package/src/LinearGenomeView/components/LinearGenomeViewSvg.tsx

@@ -235,10 +235,10 @@ function SVGTracks({
         const current = offset
         const trackName =
           getConf(track, 'name') ||
-          `Reference sequence (${readConfObject(
-            getParent(track.configuration),
-            'name',
-          )})`
+          `Reference sequence (${
+            readConfObject(getParent(track.configuration), 'displayName') ||
+            readConfObject(getParent(track.configuration), 'name')
+          })`
         const display = track.displays[0]
         offset += display.height + paddingHeight + textHeight
         return (

package/src/LinearGenomeView/components/RefNameAutocomplete.tsx

@@ -19,7 +19,6 @@ import HelpIcon from '@mui/icons-material/Help'
 
 // locals
 import { LinearGenomeViewModel } from '..'
-import { dedupe } from './util'
 
 // lazy
 const HelpDialog = lazy(() => import('./HelpDialog'))
@@ -74,8 +73,8 @@ function RefNameAutocomplete({
   const [inputValue, setInputValue] = useState('')
   const [searchOptions, setSearchOptions] = useState<Option[]>()
   const debouncedSearch = useDebounce(currentSearch, 300)
-  const { coarseVisibleLocStrings, hasDisplayedRegions } = model
   const assembly = assemblyName ? assemblyManager.get(assemblyName) : undefined
+  const { coarseVisibleLocStrings, hasDisplayedRegions } = model
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const regions = assembly?.regions || []
@@ -104,11 +103,31 @@ function RefNameAutocomplete({
         setLoaded(false)
         const results = await fetchResults(debouncedSearch)
         if (active) {
-          setSearchOptions(
-            dedupe(results, r => r.getDisplayString()).map(result => ({
-              result,
-            })),
-          )
+          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)
         }
       } catch (e) {
@@ -150,7 +169,7 @@ function RefNameAutocomplete({
         value={inputBoxVal}
         loading={!loaded}
         inputValue={inputValue}
-        onInputChange={(event, newInputValue) => {
+        onInputChange={(_event, newInputValue) => {
           setInputValue(newInputValue)
           onChange?.(newInputValue)
         }}

package/src/LinearGenomeView/components/SearchBox.tsx

@@ -7,7 +7,7 @@ import BaseResult from '@jbrowse/core/TextSearch/BaseResults'
 
 // locals
 import RefNameAutocomplete from './RefNameAutocomplete'
-import { fetchResults } from './util'
+import { fetchResults, splitLast } from './util'
 import { LinearGenomeViewModel, SPACING, WIDGET_HEIGHT } from '..'
 
 const useStyles = makeStyles()(() => ({
@@ -33,49 +33,52 @@ function SearchBox({
   const assembly = assemblyManager.get(assemblyName)
   const searchScope = model.searchScope(assemblyName)
 
+  function navToOption(option: BaseResult) {
+    const location = option.getLocation()
+    const trackId = option.getTrackId()
+    if (location) {
+      model.navToLocString(location, assemblyName)
+      if (trackId) {
+        model.showTrack(trackId)
+      }
+    }
+  }
+
   // gets a string as input, or use stored option results from previous query,
   // then re-query and
   // 1) if it has multiple results: pop a dialog
   // 2) if it's a single result navigate to it
   // 3) else assume it's a locstring and navigate to it
   async function handleSelectedRegion(option: BaseResult) {
-    let trackId = option.getTrackId()
-    let location = option.getLocation()
-    const label = option.getLabel()
-    const [ref, rest] = location.split(':')
-    const allRefs = assembly?.allRefNames || []
     try {
-      // instead of querying text-index, first:
-      // - check if input matches a refName directly
-      // - or looks like locString
-      // then just navigate as if it were a locString
-      if (
-        allRefs.includes(location) ||
-        (allRefs.includes(ref) &&
-          rest !== undefined &&
-          !Number.isNaN(parseInt(rest, 10)))
-      ) {
-        model.navToLocString(location, assemblyName)
+      if (option.hasLocation()) {
+        navToOption(option)
       } else {
-        const results = await fetchResults({
-          queryString: label,
-          searchType: 'exact',
-          searchScope,
-          rankSearchResults,
-          textSearchManager,
-          assembly,
-        })
-        if (results.length > 1) {
-          model.setSearchResults(results, label.toLowerCase())
-          return
-        } else if (results.length === 1) {
-          location = results[0].getLocation()
-          trackId = results[0].getTrackId()
-        }
+        const input = option.getLabel()
+        const [ref, rest] = splitLast(input, ':')
+        const allRefs = assembly?.allRefNamesWithLowerCase || []
+        if (
+          allRefs.includes(input) ||
+          (allRefs.includes(ref) && !Number.isNaN(parseInt(rest, 10)))
+        ) {
+          model.navToLocString(input, assemblyName)
+        } else {
+          const results = await fetchResults({
+            queryString: input,
+            searchType: 'exact',
+            searchScope,
+            rankSearchResults,
+            textSearchManager,
+            assembly,
+          })
 
-        model.navToLocString(location, assemblyName)
-        if (trackId) {
-          model.showTrack(trackId)
+          if (results.length > 1) {
+            model.setSearchResults(results, input.toLowerCase())
+          } else if (results.length === 1) {
+            navToOption(results[0])
+          } else {
+            model.navToLocString(input, assemblyName)
+          }
         }
       }
     } catch (e) {

package/src/LinearGenomeView/components/SearchResultsDialog.tsx

@@ -150,10 +150,13 @@ export default function SearchResultsDialog({
                       <TableCell align="right">
                         <Button
                           onClick={() => {
-                            handleClick(result.getLocation())
-                            const resultTrackId = result.getTrackId()
-                            if (resultTrackId) {
-                              model.showTrack(resultTrackId)
+                            const location = result.getLocation()
+                            if (location) {
+                              handleClick(location)
+                              const resultTrackId = result.getTrackId()
+                              if (resultTrackId) {
+                                model.showTrack(resultTrackId)
+                              }
                             }
                             handleClose()
                           }}

package/src/LinearGenomeView/components/TrackLabel.tsx

@@ -72,7 +72,9 @@ function getTrackName(
     return (
       trackName ||
       (asm
-        ? `Reference Sequence (${readConfObject(asm, 'name')})`
+        ? `Reference Sequence (${
+            readConfObject(asm, 'displayName') || readConfObject(asm, 'name')
+          })`
         : 'Reference Sequence')
     )
   }

package/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.js.snap

@@ -157,7 +157,7 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
             />
           </button>
           <div
-            class="MuiAutocomplete-root css-16awh2u-MuiAutocomplete-root"
+            class="MuiAutocomplete-root css-1qqsdnr-MuiAutocomplete-root"
             data-testid="autocomplete"
             style="width: 200px;"
           >
@@ -722,7 +722,7 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
             />
           </button>
           <div
-            class="MuiAutocomplete-root css-16awh2u-MuiAutocomplete-root"
+            class="MuiAutocomplete-root css-1qqsdnr-MuiAutocomplete-root"
             data-testid="autocomplete"
             style="width: 255.27500000000003px;"
           >

package/src/LinearGenomeView/components/util.ts

@@ -51,3 +51,15 @@ export async function fetchResults({
     elt => elt.getId(),
   )
 }
+
+// splits on the last instance of a character
+export function splitLast(str: string, split: string): [string, string] {
+  const lastIndex = str.lastIndexOf(split)
+  if (lastIndex === -1) {
+    return [str, '']
+  } else {
+    const before = str.slice(0, lastIndex)
+    const after = str.slice(lastIndex + 1)
+    return [before, after]
+  }
+}