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

package/src/LinearGenomeView/components/RefNameAutocomplete.tsx

@@ -6,7 +6,6 @@ import BaseResult, {
 } from '@jbrowse/core/TextSearch/BaseResults'
 import {
   Autocomplete,
-  CircularProgress,
   IconButton,
   InputAdornment,
   TextField,
@@ -28,6 +27,38 @@ export interface Option {
   result: BaseResult
 }
 
+function aggregateResults(results: BaseResult[]) {
+  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)
+  }
+  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
@@ -51,6 +82,7 @@ function RefNameAutocomplete({
   value,
   showHelp = true,
   minWidth = 200,
+  maxWidth = 550,
   TextFieldProps = {},
 }: {
   model: LinearGenomeViewModel
@@ -61,6 +93,7 @@ function RefNameAutocomplete({
   fetchResults: (query: string) => Promise<BaseResult[]>
   style?: React.CSSProperties
   minWidth?: number
+  maxWidth?: number
   showHelp?: boolean
   TextFieldProps?: TFP
 }) {
@@ -104,32 +137,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,19 +155,16 @@ function RefNameAutocomplete({
 
   const inputBoxVal = coarseVisibleLocStrings || value || ''
 
-  // heuristic, text width + icon width
-  // + 45 accommodates help icon and search icon
-  const width = Math.min(
-    Math.max(measureText(inputBoxVal, 16) + 50, minWidth),
-    550,
-  )
+  // heuristic, text width + icon width + 50 accommodates help icon and search
+  // icon
+  const w = measureText(inputBoxVal, 16) + 50
+  const width = Math.min(Math.max(w, minWidth), maxWidth)
 
   // notes on implementation:
   // The selectOnFocus setting helps highlight the field when clicked
   return (
     <>
       <Autocomplete
-        id={`refNameAutocomplete-${model.id}`}
         data-testid="autocomplete"
         disableListWrap
         disableClearable
@@ -237,21 +243,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,14 +1,13 @@
 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'
 
 const useStyles = makeStyles()(theme => {
   const { primary, tertiary } = theme.palette
   const background = tertiary
-    ? alpha(tertiary.main, 0.7)
-    : alpha(primary.main, 0.7)
+    ? alpha(tertiary.light, 0.7)
+    : alpha(primary.light, 0.7)
   return {
     rubberband: {
       height: '100%',
@@ -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,

package/src/LinearGenomeView/components/TrackLabel.tsx

@@ -3,10 +3,11 @@ import { IconButton, Paper, Typography, alpha } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
 import { observer } from 'mobx-react'
 import { getConf } from '@jbrowse/core/configuration'
-import CascadingMenu from '@jbrowse/core/ui/CascadingMenu'
 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,
@@ -22,7 +23,6 @@ import MinimizeIcon from '@mui/icons-material/Minimize'
 import AddIcon from '@mui/icons-material/Add'
 
 import { LinearGenomeViewModel } from '..'
-import { SanitizedHTML } from '@jbrowse/core/ui'
 
 const useStyles = makeStyles()(theme => ({
   root: {
@@ -42,7 +42,6 @@ const useStyles = makeStyles()(theme => ({
   },
   dragHandle: {
     cursor: 'grab',
-    color: '#135560',
   },
   dragHandleIcon: {
     display: 'inline-block',
@@ -61,83 +60,84 @@ interface Props {
   className?: string
 }
 
-const TrackLabel = React.forwardRef<HTMLDivElement, Props>(
-  ({ track, className }, ref) => {
-    const { classes, cx } = useStyles()
-    const view = getContainingView(track) as LGV
-    const session = getSession(track)
-    const trackConf = track.configuration
-    const minimized = track.minimized
-    const trackId = getConf(track, 'trackId')
-    const trackName = getTrackName(trackConf, session)
+const TrackLabel = React.forwardRef<HTMLDivElement, Props>(function (
+  { track, className },
+  ref,
+) {
+  const { classes, cx } = useStyles()
+  const view = getContainingView(track) as LGV
+  const session = getSession(track)
+  const trackConf = track.configuration
+  const minimized = track.minimized
+  const trackId = getConf(track, 'trackId')
+  const trackName = getTrackName(trackConf, session)
 
-    const popupState = usePopupState({
-      popupId: 'trackLabelMenu',
-      variant: 'popover',
-    })
+  const popupState = usePopupState({
+    popupId: 'trackLabelMenu',
+    variant: 'popover',
+  })
 
-    const items = [
-      {
-        label: minimized ? 'Restore track' : 'Minimize track',
-        icon: minimized ? AddIcon : MinimizeIcon,
-        onClick: () => track.setMinimized(!minimized),
-      },
-      ...(session.getTrackActionMenuItems?.(trackConf) || []),
-      ...track.trackMenuItems(),
-    ].sort((a, b) => (b.priority || 0) - (a.priority || 0))
+  const items = [
+    {
+      label: minimized ? 'Restore track' : 'Minimize track',
+      icon: minimized ? AddIcon : MinimizeIcon,
+      onClick: () => track.setMinimized(!minimized),
+    },
+    ...(session.getTrackActionMenuItems?.(trackConf) || []),
+    ...track.trackMenuItems(),
+  ].sort((a, b) => (b.priority || 0) - (a.priority || 0))
 
-    return (
-      <Paper ref={ref} className={cx(className, classes.root)}>
-        <span
-          draggable
-          className={classes.dragHandle}
-          onDragStart={event => {
-            const target = event.currentTarget
-            if (target.parentNode) {
-              const parent = target.parentNode as HTMLElement
-              event.dataTransfer.setDragImage(parent, 20, 20)
-              view.setDraggingTrackId(track.id)
-            }
-          }}
-          onDragEnd={() => view.setDraggingTrackId(undefined)}
-          data-testid={`dragHandle-${view.id}-${trackId}`}
-        >
-          <DragIcon className={classes.dragHandleIcon} fontSize="small" />
-        </span>
-        <IconButton
-          onClick={() => view.hideTrack(trackId)}
-          className={classes.iconButton}
-          title="close this track"
-          color="secondary"
-        >
-          <CloseIcon fontSize="small" />
-        </IconButton>
+  return (
+    <Paper ref={ref} className={cx(className, classes.root)}>
+      <span
+        draggable
+        className={classes.dragHandle}
+        onDragStart={event => {
+          const target = event.currentTarget
+          if (target.parentNode) {
+            const parent = target.parentNode as HTMLElement
+            event.dataTransfer.setDragImage(parent, 20, 20)
+            view.setDraggingTrackId(track.id)
+          }
+        }}
+        onDragEnd={() => view.setDraggingTrackId(undefined)}
+        data-testid={`dragHandle-${view.id}-${trackId}`}
+      >
+        <DragIcon className={classes.dragHandleIcon} fontSize="small" />
+      </span>
+      <IconButton
+        onClick={() => view.hideTrack(trackId)}
+        className={classes.iconButton}
+        title="close this track"
+      >
+        <CloseIcon fontSize="small" />
+      </IconButton>
 
-        <Typography
-          variant="body1"
-          component="span"
-          className={classes.trackName}
-        >
-          <SanitizedHTML html={trackName + (minimized ? ' (minimized)' : '')} />
-        </Typography>
-        <IconButton
-          {...bindTrigger(popupState)}
-          className={classes.iconButton}
-          color="secondary"
-          data-testid="track_menu_icon"
-          disabled={!items.length}
-        >
-          <MoreVertIcon fontSize="small" />
-        </IconButton>
-        <CascadingMenu
-          {...bindPopover(popupState)}
-          onMenuItemClick={(_: unknown, callback: Function) => callback()}
-          menuItems={items}
-          popupState={popupState}
+      <Typography
+        variant="body1"
+        component="span"
+        className={classes.trackName}
+      >
+        <SanitizedHTML
+          html={`${trackName}${minimized ? ' (minimized)' : ''}`}
         />
-      </Paper>
-    )
-  },
-)
+      </Typography>
+      <IconButton
+        {...bindTrigger(popupState)}
+        className={classes.iconButton}
+        data-testid="track_menu_icon"
+        disabled={items.length === 0}
+      >
+        <MoreVertIcon fontSize="small" />
+      </IconButton>
+      <CascadingMenu
+        {...bindPopover(popupState)}
+        onMenuItemClick={(_: unknown, callback: Function) => callback()}
+        menuItems={items}
+        popupState={popupState}
+      />
+    </Paper>
+  )
+})
 
 export default observer(TrackLabel)

package/src/LinearGenomeView/components/TracksContainer.tsx

@@ -20,15 +20,11 @@ const useStyles = makeStyles()({
     position: 'relative',
     overflow: 'hidden',
   },
-  spacer: {
-    position: 'relative',
-    height: 3,
-  },
 })
 
 type LGV = LinearGenomeViewModel
 
-function TracksContainer({
+export default observer(function TracksContainer({
   children,
   model,
 }: {
@@ -60,6 +56,12 @@ function TracksContainer({
       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)
@@ -106,6 +108,4 @@ function TracksContainer({
       {children}
     </div>
   )
-}
-
-export default observer(TracksContainer)
+})

package/src/LinearGenomeView/components/ZoomControls.tsx

@@ -6,7 +6,7 @@ import ZoomIn from '@mui/icons-material/ZoomIn'
 import ZoomOut from '@mui/icons-material/ZoomOut'
 import { LinearGenomeViewModel } from '..'
 
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   container: {
     display: 'flex',
     flexDirection: 'row',
@@ -14,8 +14,9 @@ const useStyles = makeStyles()({
   },
   slider: {
     width: 70,
+    color: theme.palette.text.secondary,
   },
-})
+}))
 
 function ZoomControls({ model }: { model: LinearGenomeViewModel }) {
   const { classes } = useStyles()
@@ -31,7 +32,6 @@ function ZoomControls({ model }: { model: LinearGenomeViewModel }) {
         data-testid="zoom_out"
         onClick={() => model.zoom(bpPerPx * 2)}
         disabled={bpPerPx >= maxBpPerPx - 0.0001 || scaleFactor !== 1}
-        color="secondary"
         size="large"
       >
         <ZoomOut />
@@ -51,7 +51,6 @@ function ZoomControls({ model }: { model: LinearGenomeViewModel }) {
         data-testid="zoom_in"
         onClick={() => model.zoom(model.bpPerPx / 2)}
         disabled={bpPerPx <= minBpPerPx + 0.0001 || scaleFactor !== 1}
-        color="secondary"
         size="large"
       >
         <ZoomIn />