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

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useRef } from 'react'
 import { Paper } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
 import { observer } from 'mobx-react'
@@ -7,13 +7,13 @@ import { ErrorBoundary } from 'react-error-boundary'
 
 // jbrowse core
 import { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models'
-import { getConf } from '@jbrowse/core/configuration'
 import { ResizeHandle, ErrorMessage } from '@jbrowse/core/ui'
 import { useDebouncedCallback } from '@jbrowse/core/util'
 
 // locals
 import { LinearGenomeViewModel } from '..'
-import TrackLabel from './TrackLabel'
+import TrackLabelContainer from './TrackLabelContainer'
+import TrackRenderingContainer from './TrackRenderingContainer'
 
 const useStyles = makeStyles()({
   root: {
@@ -33,55 +33,11 @@ const useStyles = makeStyles()({
     width: '100%',
     zIndex: 3,
   },
-  trackLabel: {
-    zIndex: 3,
-  },
-
-  // aligns with block boundaries. check for example the breakpoint split view
-  // demo to see if features align if wanting to change things
-  renderingComponentContainer: {
-    position: 'absolute',
-    // -1 offset because of the 1px border of the Paper
-    left: -1,
-    height: '100%',
-    width: '100%',
-  },
-  trackLabelOffset: {
-    position: 'relative',
-    display: 'inline-block',
-  },
-  trackLabelOverlap: {
-    position: 'absolute',
-  },
-  trackRenderingContainer: {
-    overflowY: 'auto',
-    overflowX: 'hidden',
-    whiteSpace: 'nowrap',
-    position: 'relative',
-    background: 'none',
-    zIndex: 2,
-  },
 })
 
 type LGV = LinearGenomeViewModel
 
-const TrackContainerLabel = observer(
-  ({ model, view }: { model: BaseTrackModel; view: LGV }) => {
-    const { classes, cx } = useStyles()
-    const display = model.displays[0]
-    const { trackLabel, trackLabelOverlap, trackLabelOffset } = classes
-    const labelStyle =
-      view.trackLabels !== 'overlapping' || display.prefersOffset
-        ? trackLabelOffset
-        : trackLabelOverlap
-
-    return view.trackLabels !== 'hidden' ? (
-      <TrackLabel track={model} className={cx(trackLabel, labelStyle)} />
-    ) : null
-  },
-)
-
-function TrackContainer({
+export default observer(function TrackContainer({
   model,
   track,
 }: {
@@ -90,67 +46,34 @@ function TrackContainer({
 }) {
   const { classes } = useStyles()
   const display = track.displays[0]
-  const { horizontalScroll, draggingTrackId, moveTrack } = model
-  const { height, RenderingComponent, DisplayBlurb } = display
-  const trackId = getConf(track, 'trackId')
-  const ref = useRef(null)
+  const { draggingTrackId } = model
+  const ref2 = useRef<HTMLDivElement>(null)
   const dimmed = draggingTrackId !== undefined && draggingTrackId !== display.id
-  const minimized = track.minimized
   const debouncedOnDragEnter = useDebouncedCallback(() => {
     if (isAlive(display) && dimmed) {
-      moveTrack(draggingTrackId, track.id)
+      model.moveTrack(draggingTrackId, track.id)
     }
   }, 100)
-  useEffect(() => {
-    if (ref.current) {
-      model.trackRefs[trackId] = ref.current
-    }
-    return () => {
-      delete model.trackRefs[trackId]
-    }
-  }, [model.trackRefs, trackId])
 
   return (
-    <Paper className={classes.root} variant="outlined">
-      <TrackContainerLabel model={track} view={model} />
-      <ErrorBoundary
-        key={track.id}
-        FallbackComponent={({ error }) => <ErrorMessage error={error} />}
-      >
-        <div
-          className={classes.trackRenderingContainer}
-          style={{ height: minimized ? 20 : height }}
-          onScroll={evt => display.setScrollTop(evt.currentTarget.scrollTop)}
+    <Paper
+      ref={ref2}
+      className={classes.root}
+      variant="outlined"
+      onClick={event => {
+        if (event.detail === 2 && !track.displays[0].featureIdUnderMouse) {
+          const left = ref2.current?.getBoundingClientRect().left || 0
+          model.zoomTo(model.bpPerPx / 2, event.clientX - left, true)
+        }
+      }}
+    >
+      <TrackLabelContainer track={track} view={model} />
+      <ErrorBoundary FallbackComponent={e => <ErrorMessage error={e.error} />}>
+        <TrackRenderingContainer
+          model={model}
+          track={track}
           onDragEnter={debouncedOnDragEnter}
-          data-testid={`trackRenderingContainer-${model.id}-${trackId}`}
-        >
-          {!minimized ? (
-            <>
-              <div
-                ref={ref}
-                className={classes.renderingComponentContainer}
-                style={{ transform: `scaleX(${model.scaleFactor})` }}
-              >
-                <RenderingComponent
-                  model={display}
-                  onHorizontalScroll={horizontalScroll}
-                />
-              </div>
-
-              {DisplayBlurb ? (
-                <div
-                  style={{
-                    position: 'absolute',
-                    left: 0,
-                    top: display.height - 20,
-                  }}
-                >
-                  <DisplayBlurb model={display} />
-                </div>
-              ) : null}
-            </>
-          ) : null}
-        </div>
+        />
       </ErrorBoundary>
       <div
         className={classes.overlay}
@@ -166,6 +89,4 @@ function TrackContainer({
       />
     </Paper>
   )
-}
-
-export default observer(TrackContainer)
+})

package/src/LinearGenomeView/components/TrackLabel.tsx

@@ -7,13 +7,7 @@ import { getSession, getContainingView } from '@jbrowse/core/util'
 import { getTrackName } from '@jbrowse/core/util/tracks'
 import { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models'
 import { SanitizedHTML } from '@jbrowse/core/ui'
-import CascadingMenu from '@jbrowse/core/ui/CascadingMenu'
-
-import {
-  bindTrigger,
-  bindPopover,
-  usePopupState,
-} from 'material-ui-popup-state/hooks'
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
 
 // icons
 import MoreVertIcon from '@mui/icons-material/MoreVert'
@@ -71,12 +65,6 @@ const TrackLabel = React.forwardRef<HTMLDivElement, Props>(function (
   const minimized = track.minimized
   const trackId = getConf(track, 'trackId')
   const trackName = getTrackName(trackConf, session)
-
-  const popupState = usePopupState({
-    popupId: 'trackLabelMenu',
-    variant: 'popover',
-  })
-
   const items = [
     {
       label: minimized ? 'Restore track' : 'Minimize track',
@@ -119,23 +107,15 @@ const TrackLabel = React.forwardRef<HTMLDivElement, Props>(function (
         className={classes.trackName}
       >
         <SanitizedHTML
-          html={`${trackName}${minimized ? ' (minimized)' : ''}`}
+          html={[trackName, minimized ? '(minimized)' : '']
+            .filter(f => !!f)
+            .join(' ')}
         />
       </Typography>
-      <IconButton
-        {...bindTrigger(popupState)}
-        className={classes.iconButton}
-        data-testid="track_menu_icon"
-        disabled={items.length === 0}
-      >
+
+      <CascadingMenuButton menuItems={items} data-testid="track_menu_icon">
         <MoreVertIcon fontSize="small" />
-      </IconButton>
-      <CascadingMenu
-        {...bindPopover(popupState)}
-        onMenuItemClick={(_: unknown, callback: Function) => callback()}
-        menuItems={items}
-        popupState={popupState}
-      />
+      </CascadingMenuButton>
     </Paper>
   )
 })

package/src/LinearGenomeView/components/TrackLabelContainer.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { makeStyles } from 'tss-react/mui'
+import { observer } from 'mobx-react'
+
+// jbrowse core
+import { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models'
+
+// locals
+import { LinearGenomeViewModel } from '..'
+import TrackLabel from './TrackLabel'
+
+const useStyles = makeStyles()({
+  trackLabel: {
+    zIndex: 3,
+  },
+
+  trackLabelOffset: {
+    position: 'relative',
+    display: 'inline-block',
+  },
+  trackLabelOverlap: {
+    position: 'absolute',
+  },
+})
+
+type LGV = LinearGenomeViewModel
+
+const TrackLabelContainer = observer(function ({
+  track,
+  view,
+}: {
+  track: BaseTrackModel
+  view: LGV
+}) {
+  const { classes, cx } = useStyles()
+  const display = track.displays[0]
+  const { trackLabel, trackLabelOverlap, trackLabelOffset } = classes
+  const labelStyle =
+    view.trackLabels !== 'overlapping' || display.prefersOffset
+      ? trackLabelOffset
+      : trackLabelOverlap
+
+  return view.trackLabels !== 'hidden' ? (
+    <TrackLabel track={track} className={cx(trackLabel, labelStyle)} />
+  ) : null
+})
+
+export default TrackLabelContainer

package/src/LinearGenomeView/components/TrackRenderingContainer.tsx

@@ -0,0 +1,96 @@
+import React, { useEffect, useRef } from 'react'
+import { makeStyles } from 'tss-react/mui'
+import { observer } from 'mobx-react'
+
+// jbrowse core
+import { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models'
+import { getConf } from '@jbrowse/core/configuration'
+
+// locals
+import { LinearGenomeViewModel } from '..'
+
+const useStyles = makeStyles()({
+  // aligns with block boundaries. check for example the breakpoint split view
+  // demo to see if features align if wanting to change things
+  renderingComponentContainer: {
+    position: 'absolute',
+    // -1 offset because of the 1px border of the Paper
+    left: -1,
+    height: '100%',
+    width: '100%',
+  },
+
+  trackRenderingContainer: {
+    overflowY: 'auto',
+    overflowX: 'hidden',
+    whiteSpace: 'nowrap',
+    position: 'relative',
+    background: 'none',
+    zIndex: 2,
+  },
+})
+
+type LGV = LinearGenomeViewModel
+
+export default observer(function TrackRenderingContainer({
+  model,
+  track,
+  onDragEnter,
+}: {
+  model: LGV
+  track: BaseTrackModel
+  onDragEnter: () => void
+}) {
+  const { classes } = useStyles()
+  const display = track.displays[0]
+  const { height, RenderingComponent, DisplayBlurb } = display
+  const trackId = getConf(track, 'trackId')
+  const ref = useRef<HTMLDivElement>(null)
+  const minimized = track.minimized
+
+  useEffect(() => {
+    if (ref.current) {
+      model.trackRefs[trackId] = ref.current
+    }
+    return () => {
+      delete model.trackRefs[trackId]
+    }
+  }, [model.trackRefs, trackId])
+
+  return (
+    <div
+      className={classes.trackRenderingContainer}
+      style={{ height: minimized ? 20 : height }}
+      onScroll={evt => display.setScrollTop(evt.currentTarget.scrollTop)}
+      onDragEnter={onDragEnter}
+      data-testid={`trackRenderingContainer-${model.id}-${trackId}`}
+    >
+      {!minimized ? (
+        <>
+          <div
+            ref={ref}
+            className={classes.renderingComponentContainer}
+            style={{ transform: `scaleX(${model.scaleFactor})` }}
+          >
+            <RenderingComponent
+              model={display}
+              onHorizontalScroll={model.horizontalScroll}
+            />
+          </div>
+
+          {DisplayBlurb ? (
+            <div
+              style={{
+                position: 'absolute',
+                left: 0,
+                top: display.height - 20,
+              }}
+            >
+              <DisplayBlurb model={display} />
+            </div>
+          ) : null}
+        </>
+      ) : null}
+    </div>
+  )
+})