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

package/src/LinearGenomeView/components/RefNameAutocomplete.tsx

@@ -6,6 +6,7 @@ import BaseResult, {
 } from '@jbrowse/core/TextSearch/BaseResults'
 import {
   Autocomplete,
+  AutocompleteRenderInputParams,
   IconButton,
   InputAdornment,
   TextField,
@@ -69,6 +70,23 @@ function filterOptions(options: Option[], searchQuery: string) {
   )
 }
 
+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({
   model,
   onSelect,
@@ -98,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[]>()
@@ -151,10 +168,10 @@ 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 width = Math.min(
-    Math.max(measureText(inputBoxVal, 16) + 50, minWidth),
+    Math.max(measureText(inputBoxVal, 14) + 100, minWidth),
     maxWidth,
   )
 
@@ -203,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)} />
@@ -276,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)

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