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

package/src/LinearGenomeView/components/SearchResultsDialog.tsx

@@ -1,143 +1,48 @@
 import React from 'react'
-import { resolveIdentifier, getRoot } from 'mobx-state-tree'
-import { getSession, getEnv } from '@jbrowse/core/util'
 import { Dialog } from '@jbrowse/core/ui'
 import {
   Button,
   DialogActions,
   DialogContent,
   Divider,
-  Paper,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
   Typography,
 } from '@mui/material'
 
 import { LinearGenomeViewModel } from '../..'
+import BaseResult from '@jbrowse/core/TextSearch/BaseResults'
+import SearchResultsTable from './SearchResultsTable'
 
 export default function SearchResultsDialog({
   model,
-  optAssemblyName,
+  assemblyName,
+  searchQuery,
+  searchResults,
   handleClose,
 }: {
   model: LinearGenomeViewModel
-  optAssemblyName?: string
+  assemblyName?: string
+  searchQuery: string
+  searchResults?: BaseResult[]
   handleClose: () => void
 }) {
-  const session = getSession(model)
-  const { pluginManager } = getEnv(session)
-  const { assemblyManager } = session
-  let assemblyName = optAssemblyName
-  if (model.displayedRegions.length > 0) {
-    assemblyName = model.displayedRegions[0]?.assemblyName
-  }
-  if (!assemblyName) {
-    throw new Error(`Assembly name not found`)
-  }
-  const assembly = assemblyManager.get(assemblyName)
-  if (!assembly) {
-    throw new Error(`assembly ${assemblyName} not found`)
-  }
-  if (!assembly.regions) {
-    throw new Error(`assembly ${assemblyName} regions not loaded`)
-  }
-  const assemblyRegions = assembly.regions
-
-  async function handleClick(location: string) {
-    try {
-      const newRegion = assemblyRegions.find(
-        region => location === region.refName,
-      )
-      if (newRegion) {
-        model.setDisplayedRegions([newRegion])
-        // we use showAllRegions after setDisplayedRegions to make the entire
-        // region visible, xref #1703
-        model.showAllRegions()
-      } else {
-        await model.navToLocString(location, assemblyName)
-      }
-    } catch (e) {
-      console.warn(e)
-      session.notify(`${e}`, 'warning')
-    }
-  }
-
-  function getTrackName(trackId: string | undefined) {
-    if (trackId) {
-      const schema = pluginManager.pluggableConfigSchemaType('track')
-      const configuration = resolveIdentifier(schema, getRoot(model), trackId)
-      return configuration?.name?.value || ''
-    }
-    return ''
-  }
-
   return (
     <Dialog open maxWidth="xl" onClose={handleClose} title="Search results">
       <DialogContent>
-        {!model.searchResults?.length ? (
+        {!searchResults?.length ? (
           <Typography>
-            No results found for <b>{model.searchQuery}</b>
+            No results found for <b>{searchQuery}</b>
           </Typography>
         ) : (
           <>
             <Typography>
-              Showing results for <b>{model.searchQuery}</b>
+              Showing results for <b>{searchQuery}</b>
             </Typography>
-            <TableContainer component={Paper}>
-              <Table>
-                <TableHead>
-                  <TableRow>
-                    <TableCell>Name</TableCell>
-                    <TableCell align="right">Location</TableCell>
-                    <TableCell align="right">Track</TableCell>
-                    <TableCell align="right" />
-                  </TableRow>
-                </TableHead>
-                <TableBody>
-                  {model.searchResults.map(result => (
-                    <TableRow key={`${result.getId()}`}>
-                      <TableCell component="th" scope="row">
-                        {result.getLabel()}
-                      </TableCell>
-                      <TableCell align="right">
-                        {result.getLocation()}
-                      </TableCell>
-                      <TableCell align="right">
-                        {getTrackName(result.getTrackId()) || 'N/A'}
-                      </TableCell>
-                      <TableCell align="right">
-                        <Button
-                          onClick={async () => {
-                            try {
-                              const location = result.getLocation()
-                              if (location) {
-                                await handleClick(location)
-                                const resultTrackId = result.getTrackId()
-                                if (resultTrackId) {
-                                  model.showTrack(resultTrackId)
-                                }
-                              }
-                            } catch (e) {
-                              console.error(e)
-                              session.notify(`${e}`, 'error')
-                            }
-                            handleClose()
-                          }}
-                          color="primary"
-                          variant="contained"
-                        >
-                          Go
-                        </Button>
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </TableContainer>
+            <SearchResultsTable
+              model={model}
+              handleClose={handleClose}
+              assemblyName={assemblyName}
+              searchResults={searchResults}
+            />
           </>
         )}
       </DialogContent>

package/src/LinearGenomeView/components/SearchResultsTable.tsx

@@ -0,0 +1,121 @@
+import React from 'react'
+import {
+  Button,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+} from '@mui/material'
+import BaseResult from '@jbrowse/core/TextSearch/BaseResults'
+import { getRoot, resolveIdentifier } from 'mobx-state-tree'
+import { getEnv, getSession } from '@jbrowse/core/util'
+
+// locals
+import { LinearGenomeViewModel } from '../..'
+
+export default function SearchResultsTable({
+  searchResults,
+  assemblyName: optAssemblyName,
+  model,
+  handleClose,
+}: {
+  searchResults: BaseResult[]
+  assemblyName?: string
+  model: LinearGenomeViewModel
+  handleClose: () => void
+}) {
+  const session = getSession(model)
+  const { pluginManager } = getEnv(session)
+  const { assemblyManager } = session
+  const assemblyName =
+    optAssemblyName || model.displayedRegions[0]?.assemblyName
+
+  const assembly = assemblyManager.get(assemblyName)
+  if (!assembly) {
+    throw new Error(`assembly ${assemblyName} not found`)
+  }
+  if (!assembly.regions) {
+    throw new Error(`assembly ${assemblyName} regions not loaded`)
+  }
+
+  function getTrackName(trackId: string | undefined) {
+    if (trackId) {
+      const schema = pluginManager.pluggableConfigSchemaType('track')
+      const configuration = resolveIdentifier(schema, getRoot(model), trackId)
+      return configuration?.name?.value || ''
+    }
+    return ''
+  }
+  async function handleClick(location: string) {
+    try {
+      const newRegion = assembly?.regions?.find(
+        region => location === region.refName,
+      )
+      if (newRegion) {
+        model.setDisplayedRegions([newRegion])
+        // we use showAllRegions after setDisplayedRegions to make the entire
+        // region visible, xref #1703
+        model.showAllRegions()
+      } else {
+        await model.navToLocString(location, assemblyName)
+      }
+    } catch (e) {
+      console.warn(e)
+      session.notify(`${e}`, 'warning')
+    }
+  }
+  return (
+    <TableContainer component={Paper}>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell>Name</TableCell>
+            <TableCell align="right">Location</TableCell>
+            <TableCell align="right">Track</TableCell>
+            <TableCell align="right" />
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {searchResults.map(result => (
+            <TableRow key={`${result.getId()}`}>
+              <TableCell component="th" scope="row">
+                {result.getLabel()}
+              </TableCell>
+              <TableCell align="right">{result.getLocation()}</TableCell>
+              <TableCell align="right">
+                {getTrackName(result.getTrackId()) || 'N/A'}
+              </TableCell>
+              <TableCell align="right">
+                <Button
+                  onClick={async () => {
+                    try {
+                      const location = result.getLocation()
+                      if (location) {
+                        await handleClick(location)
+                        const resultTrackId = result.getTrackId()
+                        if (resultTrackId) {
+                          model.showTrack(resultTrackId)
+                        }
+                      }
+                    } catch (e) {
+                      console.error(e)
+                      session.notify(`${e}`, 'error')
+                    }
+                    handleClose()
+                  }}
+                  color="primary"
+                  variant="contained"
+                >
+                  Go
+                </Button>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  )
+}

package/src/LinearGenomeView/components/TrackContainer.tsx

@@ -93,7 +93,7 @@ function TrackContainer({
   const { horizontalScroll, draggingTrackId, moveTrack } = model
   const { height, RenderingComponent, DisplayBlurb } = display
   const trackId = getConf(track, 'trackId')
-  const ref = useRef(null)
+  const ref = useRef<HTMLDivElement>(null)
   const dimmed = draggingTrackId !== undefined && draggingTrackId !== display.id
   const minimized = track.minimized
   const debouncedOnDragEnter = useDebouncedCallback(() => {
@@ -111,7 +111,17 @@ function TrackContainer({
   }, [model.trackRefs, trackId])
 
   return (
-    <Paper className={classes.root} variant="outlined">
+    <Paper
+      ref={ref}
+      className={classes.root}
+      variant="outlined"
+      onClick={event => {
+        if (event.detail === 2 && !track.displays[0].featureIdUnderMouse) {
+          const left = ref.current?.getBoundingClientRect().left || 0
+          model.zoomTo(model.bpPerPx / 2, event.clientX - left, true)
+        }
+      }}
+    >
       <TrackContainerLabel model={track} view={model} />
       <ErrorBoundary
         key={track.id}
@@ -127,7 +137,6 @@ function TrackContainer({
           {!minimized ? (
             <>
               <div
-                ref={ref}
                 className={classes.renderingComponentContainer}
                 style={{ transform: `scaleX(${model.scaleFactor})` }}
               >

package/src/LinearGenomeView/components/TracksContainer.tsx

@@ -14,6 +14,7 @@ import Gridlines from './Gridlines'
 import CenterLine from './CenterLine'
 import VerticalGuide from './VerticalGuide'
 import RubberbandSpan from './RubberbandSpan'
+import { getEnv } from '@jbrowse/core/util'
 
 const useStyles = makeStyles()({
   tracksContainer: {
@@ -32,6 +33,7 @@ export default observer(function TracksContainer({
   model: LGV
 }) {
   const { classes } = useStyles()
+  const { pluginManager } = getEnv(model)
   const { mouseDown: mouseDown1, mouseUp } = useSideScroll(model)
   const ref = useRef<HTMLDivElement>(null)
   const {
@@ -51,17 +53,17 @@ export default observer(function TracksContainer({
   } = useRangeSelect(ref, model, true)
   useWheelScroll(ref, model)
 
+  const additionals = pluginManager.evaluateExtensionPoint(
+    'LinearGenomeView-TracksContainerComponent',
+    undefined,
+    { model },
+  ) as React.ReactNode
+
   return (
     <div
       ref={ref}
       data-testid="trackContainer"
       className={classes.tracksContainer}
-      onClick={event => {
-        if (event.detail === 2) {
-          const left = ref.current?.getBoundingClientRect().left || 0
-          model.zoomTo(model.bpPerPx / 2, event.clientX - left, true)
-        }
-      }}
       onMouseDown={event => {
         mouseDown1(event)
         mouseDown2(event)
@@ -105,6 +107,7 @@ export default observer(function TracksContainer({
           />
         }
       />
+      {additionals}
       {children}
     </div>
   )

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

@@ -77,7 +77,7 @@ exports[`renders one track, one region 1`] = `
         class="css-1fs11k8-overview"
       >
         <svg
-          class="css-1fsr3xw-overviewSvg"
+          class="css-191b84s-overviewSvg"
           height="48"
         >
           <polygon
@@ -157,7 +157,7 @@ exports[`renders one track, one region 1`] = `
               />
             </button>
             <div
-              class="MuiAutocomplete-root css-l3ln04-MuiAutocomplete-root"
+              class="MuiAutocomplete-root css-1h51icj-MuiAutocomplete-root"
               data-testid="autocomplete"
               style="width: 175px;"
             >
@@ -166,7 +166,7 @@ exports[`renders one track, one region 1`] = `
                 style="margin: 7px;"
               >
                 <div
-                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-154xyx0-MuiInputBase-root-MuiOutlinedInput-root"
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-154xyx0-MuiInputBase-root-MuiOutlinedInput-root"
                   style="padding: 0px; height: 32px; background: rgba(255, 255, 255, 0.8);"
                 >
                   <input
@@ -175,7 +175,7 @@ exports[`renders one track, one region 1`] = `
                     aria-invalid="false"
                     autocapitalize="none"
                     autocomplete="off"
-                    class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-nxo287-MuiInputBase-input-MuiOutlinedInput-input"
+                    class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-19qh8xo-MuiInputBase-input-MuiOutlinedInput-input"
                     id="mui-7"
                     placeholder="Search for location"
                     role="combobox"
@@ -184,7 +184,7 @@ exports[`renders one track, one region 1`] = `
                     value="ctgA:1..100"
                   />
                   <div
-                    class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeMedium css-1laqsz7-MuiInputAdornment-root"
+                    class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeSmall css-1laqsz7-MuiInputAdornment-root"
                     style="margin-right: 7px;"
                   >
                     <svg
@@ -651,7 +651,7 @@ exports[`renders two tracks, two regions 1`] = `
         class="css-1fs11k8-overview"
       >
         <svg
-          class="css-1fsr3xw-overviewSvg"
+          class="css-191b84s-overviewSvg"
           height="48"
         >
           <polygon
@@ -731,16 +731,16 @@ exports[`renders two tracks, two regions 1`] = `
               />
             </button>
             <div
-              class="MuiAutocomplete-root css-l3ln04-MuiAutocomplete-root"
+              class="MuiAutocomplete-root css-1h51icj-MuiAutocomplete-root"
               data-testid="autocomplete"
-              style="width: 260.27500000000003px;"
+              style="width: 283.990625px;"
             >
               <div
                 class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-1efd6m0-MuiFormControl-root-MuiTextField-root-headerRefName"
                 style="margin: 7px;"
               >
                 <div
-                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-154xyx0-MuiInputBase-root-MuiOutlinedInput-root"
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-154xyx0-MuiInputBase-root-MuiOutlinedInput-root"
                   style="padding: 0px; height: 32px; background: rgba(255, 255, 255, 0.8);"
                 >
                   <input
@@ -749,7 +749,7 @@ exports[`renders two tracks, two regions 1`] = `
                     aria-invalid="false"
                     autocapitalize="none"
                     autocomplete="off"
-                    class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-nxo287-MuiInputBase-input-MuiOutlinedInput-input"
+                    class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-19qh8xo-MuiInputBase-input-MuiOutlinedInput-input"
                     id="mui-9"
                     placeholder="Search for location"
                     role="combobox"
@@ -758,7 +758,7 @@ exports[`renders two tracks, two regions 1`] = `
                     value="ctgA:1..100 ctgB:1,001..1,698"
                   />
                   <div
-                    class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeMedium css-1laqsz7-MuiInputAdornment-root"
+                    class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeSmall css-1laqsz7-MuiInputAdornment-root"
                     style="margin-right: 7px;"
                   >
                     <svg

package/src/LinearGenomeView/components/util.ts

@@ -65,7 +65,8 @@ export function getCytobands(assembly: Assembly | undefined, refName: string) {
   return (
     assembly?.cytobands
       ?.map(f => ({
-        refName: assembly.getCanonicalRefName(f.get('refName')),
+        refName:
+          assembly.getCanonicalRefName(f.get('refName')) || f.get('refName'),
         start: f.get('start'),
         end: f.get('end'),
         type: f.get('type'),

package/src/LinearGenomeView/index.test.ts

@@ -234,29 +234,27 @@ test('can instantiate a model that tests navTo/moveTo', async () => {
   expect(model.bpPerPx).toBe(0.125)
 
   expect(() => model.navTo({ refName: 'ctgA', start: 200, end: 100 })).toThrow(
-    'start "201" is greater than end "100"',
+    /start greater than end/,
   )
 
-  expect(() =>
-    model.navTo({ refName: 'ctgDoesNotExist', start: 0, end: 100 }),
-  ).toThrow('could not find a region with refName "ctgDoesNotExist"')
+  expect(() => model.navTo({ refName: 'noExist', start: 0, end: 100 })).toThrow(
+    /could not find a region/,
+  )
 
   expect(() => model.navTo({ refName: 'ctgA', end: 20100 })).toThrow(
-    'could not find a region with refName "ctgA" that contained an end position 20100',
+    /could not find a region/,
   )
 
   expect(() => model.navTo({ refName: 'ctgA', start: 20000 })).toThrow(
-    'could not find a region with refName "ctgA" that contained a start position 20001',
+    /could not find a region/,
   )
 
   expect(() =>
     model.navTo({ refName: 'ctgA', start: 20000, end: 20100 }),
-  ).toThrow(
-    'could not find a region that completely contained "ctgA:20,001..20,100"',
-  )
+  ).toThrow(/could not find a region/)
 
   expect(() => model.navTo({ refName: 'ctgA', start: 0, end: 20000 })).toThrow(
-    'could not find a region that completely contained "ctgA:1..20,000"',
+    /could not find a region/,
   )
 })
 
@@ -304,8 +302,8 @@ test('can navToMultiple', () => {
     { refName: 'ctgA', start: 5000, end: 10000 },
     { refName: 'ctgC', start: 0, end: 5000 },
   ])
-  expect(model.offsetPx).toBe(2793)
-  expect(model.bpPerPx).toBeCloseTo(12.531)
+  expect(model.offsetPx).toBe(199)
+  expect(model.bpPerPx).toBeCloseTo(25.12562)
 })
 
 describe('Zoom to selected displayed regions', () => {