@jbrowse/plugin-linear-genome-view 1.7.9 → 1.7.10

package/src/BaseLinearDisplay/components/Tooltip.tsx

@@ -0,0 +1,97 @@
+import React, { useState, useMemo } from 'react'
+import { getConf } from '@jbrowse/core/configuration'
+import { observer } from 'mobx-react'
+import { Portal, alpha, makeStyles } from '@material-ui/core'
+import { usePopper } from 'react-popper'
+
+// locals
+import { BaseLinearDisplayModel } from '../models/BaseLinearDisplayModel'
+
+function round(value: number) {
+  return Math.round(value * 1e5) / 1e5
+}
+const useStyles = makeStyles(theme => ({
+  // these styles come from
+  // https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Tooltip/Tooltip.js
+  tooltip: {
+    pointerEvents: 'none',
+    backgroundColor: alpha(theme.palette.grey[700], 0.9),
+    borderRadius: theme.shape.borderRadius,
+    color: theme.palette.common.white,
+    fontFamily: theme.typography.fontFamily,
+    padding: '4px 8px',
+    fontSize: theme.typography.pxToRem(12),
+    lineHeight: `${round(14 / 10)}em`,
+    maxWidth: 300,
+    wordWrap: 'break-word',
+  },
+}))
+
+const TooltipContents = React.forwardRef<
+  HTMLDivElement,
+  { message: React.ReactNode | string }
+>(({ message }: { message: React.ReactNode | string }, ref) => {
+  return <div ref={ref}>{message}</div>
+})
+
+type Coord = [number, number]
+const Tooltip = observer(
+  ({
+    model,
+    clientMouseCoord,
+  }: {
+    model: BaseLinearDisplayModel
+    clientMouseCoord: Coord
+  }) => {
+    const classes = useStyles()
+    const { featureUnderMouse } = model
+    const [width, setWidth] = useState(0)
+    const [popperElt, setPopperElt] = useState<HTMLDivElement | null>(null)
+
+    // must be memoized a la https://github.com/popperjs/react-popper/issues/391
+    const virtElement = useMemo(
+      () => ({
+        getBoundingClientRect: () => {
+          const x = clientMouseCoord[0] + width / 2 + 20
+          const y = clientMouseCoord[1]
+          return {
+            top: y,
+            left: x,
+            bottom: y,
+            right: x,
+            width: 0,
+            height: 0,
+            x,
+            y,
+            toJSON() {},
+          }
+        },
+      }),
+      [clientMouseCoord, width],
+    )
+    const { styles, attributes } = usePopper(virtElement, popperElt)
+
+    const contents = featureUnderMouse
+      ? getConf(model, 'mouseover', { feature: featureUnderMouse })
+      : undefined
+
+    return featureUnderMouse && contents ? (
+      <Portal>
+        <div
+          ref={setPopperElt}
+          className={classes.tooltip}
+          // zIndex needed to go over widget drawer
+          style={{ ...styles.popper, zIndex: 100000 }}
+          {...attributes.popper}
+        >
+          <TooltipContents
+            ref={elt => setWidth(elt?.getBoundingClientRect().width || 0)}
+            message={contents}
+          />
+        </div>
+      </Portal>
+    ) : null
+  },
+)
+
+export default Tooltip

package/src/BaseLinearDisplay/models/BaseLinearDisplayModel.tsx

@@ -7,6 +7,7 @@ import { MenuItem } from '@jbrowse/core/ui'
 import {
   isAbortException,
   getContainingView,
+  getContainingTrack,
   getSession,
   getViewParams,
   isSelectionContainer,
@@ -333,8 +334,13 @@ export const BaseLinearDisplay = types
         const featureWidget = session.addWidget(
           'BaseFeatureWidget',
           'baseFeature',
-          { featureData: feature.toJSON(), view: getContainingView(self) },
+          {
+            view: getContainingView(self),
+            track: getContainingTrack(self),
+            featureData: feature.toJSON(),
+          },
         )
+
         session.showWidget(featureWidget)
       }
       if (isSelectionContainer(session)) {
@@ -551,7 +557,7 @@ export const BaseLinearDisplay = types
           self.currBpPerPx !== view.bpPerPx || !self.estimatedRegionStats,
         rpcDriverName: self.rpcDriverName,
         displayModel: self,
-        onFeatureClick(_: unknown, featureId: string | undefined) {
+        onFeatureClick(_: unknown, featureId?: string) {
           const f = featureId || self.featureIdUnderMouse
           if (!f) {
             self.clearFeatureSelection()
@@ -566,7 +572,7 @@ export const BaseLinearDisplay = types
           self.clearFeatureSelection()
         },
         // similar to click but opens a menu with further options
-        onFeatureContextMenu(_: unknown, featureId: string | undefined) {
+        onFeatureContextMenu(_: unknown, featureId?: string) {
           const f = featureId || self.featureIdUnderMouse
           if (!f) {
             self.clearFeatureSelection()
@@ -576,7 +582,7 @@ export const BaseLinearDisplay = types
           }
         },
 
-        onMouseMove(_: unknown, featureId: string | undefined) {
+        onMouseMove(_: unknown, featureId?: string) {
           self.setFeatureIdUnderMouse(featureId)
         },
 

package/src/LinearGenomeView/components/Header.tsx

@@ -7,6 +7,7 @@ import {
   makeStyles,
   alpha,
 } from '@material-ui/core'
+import { getTickDisplayStr2 } from '@jbrowse/core/util'
 import SearchBox from './SearchBox'
 
 // icons
@@ -97,10 +98,10 @@ function PanControls({ model }: { model: LGV }) {
 
 const RegionWidth = observer(({ model }: { model: LGV }) => {
   const classes = useStyles()
-  const { coarseTotalBp } = model
+  const { coarseTotalBp, bpPerPx } = model
   return (
     <Typography variant="body2" color="textSecondary" className={classes.bp}>
-      {Math.round(coarseTotalBp).toLocaleString('en-US')} bp
+      {getTickDisplayStr2(coarseTotalBp, bpPerPx)}
     </Typography>
   )
 })

package/src/LinearGenomeView/components/HelpDialog.tsx

@@ -32,11 +32,8 @@ export default function HelpDialog({
         Using the search box
         {handleClose ? (
           <IconButton
-            data-testid="close-resultsDialog"
             className={classes.closeButton}
-            onClick={() => {
-              handleClose()
-            }}
+            onClick={() => handleClose()}
           >
             <CloseIcon />
           </IconButton>
@@ -81,6 +78,10 @@ export default function HelpDialog({
             <code>chr1:1-100[rev] chr2:1-100</code> - open up the first region
             in the horizontally flipped orientation
           </li>
+          <li>
+            <code>chr1 100 200</code> - use whitespace separated refname, start,
+            end
+          </li>
         </ul>
       </DialogContent>
       <Divider />

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

@@ -79,7 +79,7 @@ describe('<LinearGenomeView />', () => {
     await findByText('Foo Track')
     // test needs to wait until it's updated to display 100 bp in the header to
     // make snapshot pass
-    await findByText('100 bp')
+    await findByText('100bp')
     expect(container.firstChild).toMatchSnapshot()
   })
   it('renders two tracks, two regions', async () => {
@@ -145,7 +145,7 @@ describe('<LinearGenomeView />', () => {
       <LinearGenomeView model={model} />,
     )
     await findByText('Foo Track')
-    await findByText('798 bp')
+    await findByText('798bp')
     await findAllByTestId('svgfeatures')
 
     expect(container.firstChild).toMatchSnapshot()

package/src/LinearGenomeView/components/LinearGenomeView.tsx

@@ -92,16 +92,22 @@ const LinearGenomeView = observer(({ model }: { model: LGV }) => {
       <TracksContainer model={model}>
         {!tracks.length ? (
           <Paper variant="outlined" className={classes.note}>
-            <Typography>No tracks active.</Typography>
-            <Button
-              variant="contained"
-              color="primary"
-              onClick={model.activateTrackSelector}
-              style={{ zIndex: 1000 }}
-              startIcon={<TrackSelectorIcon />}
-            >
-              Open track selector
-            </Button>
+            {!model.hideNoTracksActive ? (
+              <>
+                <Typography>No tracks active.</Typography>
+                <Button
+                  variant="contained"
+                  color="primary"
+                  onClick={model.activateTrackSelector}
+                  style={{ zIndex: 1000 }}
+                  startIcon={<TrackSelectorIcon />}
+                >
+                  Open track selector
+                </Button>
+              </>
+            ) : (
+              <div style={{ height: '48px' }}></div>
+            )}
           </Paper>
         ) : (
           tracks.map(track => (

package/src/LinearGenomeView/components/OverviewScaleBar.tsx

@@ -5,7 +5,7 @@ import { Instance } from 'mobx-state-tree'
 import clsx from 'clsx'
 
 import Base1DView, { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel'
-import { getSession } from '@jbrowse/core/util'
+import { getSession, getTickDisplayStr } from '@jbrowse/core/util'
 import { ContentBlock } from '@jbrowse/core/util/blockTypes'
 import { Assembly } from '@jbrowse/core/assemblyManager/assembly'
 
@@ -51,7 +51,6 @@ const useStyles = makeStyles(theme => {
     },
     scaleBarLabel: {
       height: HEADER_OVERVIEW_HEIGHT,
-      width: 1,
       position: 'absolute',
       display: 'flex',
       justifyContent: 'center',
@@ -301,7 +300,7 @@ const OverviewBox = observer(
     overview: Base1DViewModel
   }) => {
     const classes = useStyles()
-    const { cytobandOffset, showCytobands } = model
+    const { cytobandOffset, bpPerPx, showCytobands } = model
     const { start, end, reversed, refName, assemblyName } = block
     const { majorPitch } = chooseGridPitch(scale, 120, 15)
     const { assemblyManager } = getSession(model)
@@ -354,7 +353,7 @@ const OverviewBox = observer(
                     color: refNameColor,
                   }}
                 >
-                  {tickLabel.toLocaleString('en-US')}
+                  {getTickDisplayStr(tickLabel, bpPerPx)}
                 </Typography>
               ))
             : null}

package/src/LinearGenomeView/components/ScaleBar.tsx

@@ -14,6 +14,7 @@ import {
   InterRegionPaddingBlock as InterRegionPaddingBlockComponent,
 } from '../../BaseLinearDisplay/components/Block'
 import { makeTicks } from '../util'
+import { getTickDisplayStr } from '@jbrowse/core/util'
 
 type LGV = LinearGenomeViewModel
 
@@ -95,18 +96,14 @@ const RenderedRefNameLabels = observer(({ model }: { model: LGV }) => {
 
 const RenderedScaleBarLabels = observer(({ model }: { model: LGV }) => {
   const classes = useStyles()
+  const { bpPerPx } = model
 
   return (
     <>
       {model.staticBlocks.map((block, index) => {
         if (block instanceof ContentBlock) {
-          const ticks = makeTicks(
-            block.start,
-            block.end,
-            model.bpPerPx,
-            true,
-            false,
-          )
+          const { start, end } = block
+          const ticks = makeTicks(start, end, bpPerPx, true, false)
 
           return (
             <ContentBlockComponent key={`${block.key}-${index}`} block={block}>
@@ -116,7 +113,7 @@ const RenderedScaleBarLabels = observer(({ model }: { model: LGV }) => {
                     (block.reversed
                       ? block.end - tick.base
                       : tick.base - block.start) / model.bpPerPx
-                  const baseNumber = (tick.base + 1).toLocaleString('en-US')
+                  const baseNumber = tick.base + 1
                   return (
                     <div
                       key={tick.base}
@@ -125,7 +122,7 @@ const RenderedScaleBarLabels = observer(({ model }: { model: LGV }) => {
                     >
                       {baseNumber ? (
                         <Typography className={classes.majorTickLabel}>
-                          {baseNumber}
+                          {getTickDisplayStr(baseNumber, bpPerPx)}
                         </Typography>
                       ) : null}
                     </div>

package/src/LinearGenomeView/components/TrackLabel.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { getConf, readConfObject } from '@jbrowse/core/configuration'
-import { Menu } from '@jbrowse/core/ui'
+import CascadingMenu from '@jbrowse/core/ui/CascadingMenu'
 import { getSession, getContainingView } from '@jbrowse/core/util'
 import { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models'
 import {
@@ -11,14 +11,21 @@ import {
   makeStyles,
 } from '@material-ui/core'
 
+import {
+  bindTrigger,
+  bindPopover,
+  usePopupState,
+} from 'material-ui-popup-state/hooks'
+
+import clsx from 'clsx'
+import { observer } from 'mobx-react'
+import { Instance } from 'mobx-state-tree'
+
 // icons
 import MoreVertIcon from '@material-ui/icons/MoreVert'
 import DragIcon from '@material-ui/icons/DragIndicator'
 import CloseIcon from '@material-ui/icons/Close'
 
-import clsx from 'clsx'
-import { observer } from 'mobx-react'
-import { Instance } from 'mobx-state-tree'
 import { LinearGenomeViewStateModel } from '..'
 
 const useStyles = makeStyles(theme => ({
@@ -54,22 +61,20 @@ const useStyles = makeStyles(theme => ({
 type LGV = Instance<LinearGenomeViewStateModel>
 
 const TrackLabel = React.forwardRef(
-  (props: { track: BaseTrackModel; className?: string }, ref) => {
+  (
+    { track, className }: { track: BaseTrackModel; className?: string },
+    ref,
+  ) => {
     const classes = useStyles()
-    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null)
-    const { track, className } = props
     const view = getContainingView(track) as LGV
     const session = getSession(track)
     const trackConf = track.configuration
     const trackId = getConf(track, 'trackId')
 
-    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-      setAnchorEl(event.currentTarget)
-    }
-
-    const handleClose = () => {
-      setAnchorEl(null)
-    }
+    const popupState = usePopupState({
+      popupId: 'trackLabelMenu',
+      variant: 'popover',
+    })
 
     const onDragStart = (event: React.DragEvent<HTMLSpanElement>) => {
       const target = event.target as HTMLElement
@@ -91,17 +96,12 @@ const TrackLabel = React.forwardRef(
     if (getConf(track, 'type') === 'ReferenceSequenceTrack') {
       const r = session.assemblies.find(a => a.sequence === trackConf)
       trackName =
-        readConfObject(trackConf, 'name') ||
+        trackName ||
         (r
           ? `Reference Sequence (${readConfObject(r, 'name')})`
           : 'Reference Sequence')
     }
 
-    function handleMenuItemClick(_: unknown, callback: Function) {
-      callback()
-      handleClose()
-    }
-
     const items = [
       ...(session.getTrackActionMenuItems?.(trackConf) || []),
       ...track.trackMenuItems(),
@@ -135,9 +135,7 @@ const TrackLabel = React.forwardRef(
             {trackName}
           </Typography>
           <IconButton
-            aria-controls="simple-menu"
-            aria-haspopup="true"
-            onClick={handleClick}
+            {...bindTrigger(popupState)}
             className={classes.iconButton}
             color="secondary"
             data-testid="track_menu_icon"
@@ -146,12 +144,11 @@ const TrackLabel = React.forwardRef(
             <MoreVertIcon />
           </IconButton>
         </Paper>
-        <Menu
-          anchorEl={anchorEl}
-          onMenuItemClick={handleMenuItemClick}
-          open={Boolean(anchorEl)}
-          onClose={handleClose}
+        <CascadingMenu
+          {...bindPopover(popupState)}
+          onMenuItemClick={(_: unknown, callback: Function) => callback()}
           menuItems={items}
+          popupState={popupState}
         />
       </>
     )

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

@@ -255,8 +255,7 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
         <p
           class="MuiTypography-root makeStyles-bp MuiTypography-body2 MuiTypography-colorTextSecondary"
         >
-          100
-           bp
+          100bp
         </p>
         <div
           class="makeStyles-container"
@@ -425,13 +424,7 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
               <div
                 class="makeStyles-tick"
                 style="left: -1px;"
-              >
-                <p
-                  class="MuiTypography-root makeStyles-majorTickLabel MuiTypography-body1"
-                >
-                  0
-                </p>
-              </div>
+              />
             </div>
             <div
               class="makeStyles-boundaryPaddingBlock"
@@ -500,7 +493,6 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
           Foo Track
         </span>
         <button
-          aria-controls="simple-menu"
           aria-haspopup="true"
           class="MuiButtonBase-root MuiIconButton-root makeStyles-iconButton MuiIconButton-colorSecondary"
           data-testid="track_menu_icon"
@@ -850,8 +842,7 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
         <p
           class="MuiTypography-root makeStyles-bp MuiTypography-body2 MuiTypography-colorTextSecondary"
         >
-          798
-           bp
+          798bp
         </p>
         <div
           class="makeStyles-container"
@@ -1239,13 +1230,7 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
               <div
                 class="makeStyles-tick"
                 style="left: -1px;"
-              >
-                <p
-                  class="MuiTypography-root makeStyles-majorTickLabel MuiTypography-body1"
-                >
-                  0
-                </p>
-              </div>
+              />
             </div>
             <div
               class="makeStyles-interRegionPaddingBlock"
@@ -1390,7 +1375,6 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
           Foo Track
         </span>
         <button
-          aria-controls="simple-menu"
           aria-haspopup="true"
           class="MuiButtonBase-root MuiIconButton-root makeStyles-iconButton MuiIconButton-colorSecondary"
           data-testid="track_menu_icon"
@@ -1533,7 +1517,6 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
           Bar Track
         </span>
         <button
-          aria-controls="simple-menu"
           aria-haspopup="true"
           class="MuiButtonBase-root MuiIconButton-root makeStyles-iconButton MuiIconButton-colorSecondary"
           data-testid="track_menu_icon"

package/src/LinearGenomeView/index.test.ts

@@ -72,7 +72,7 @@ function initialize() {
     })
     .actions(self => ({
       isValidRefName(str: string) {
-        return !str.includes(':')
+        return str === 'ctgA' || str === 'ctgB'
       },
       get(str: string) {
         return self.assemblies.get(str)
@@ -989,8 +989,23 @@ test('multi region', () => {
   model.navToLocString('ctgA ctgB')
   expect(model.displayedRegions[0].refName).toBe('ctgA')
   expect(model.displayedRegions[1].refName).toBe('ctgB')
-  // [
-  //   { refName: 'ctgA', start: 0, end: 50001 },
-  //   { refName: 'ctgB', start: 0, end: 6079 },
-  // ])
+})
+
+test('space separated locstring', () => {
+  const { Session, LinearGenomeModel } = initialize()
+  const model = Session.create({
+    configuration: {},
+  }).setView(
+    LinearGenomeModel.create({
+      type: 'LinearGenomeView',
+      tracks: [{ name: 'foo track', type: 'BasicTrack' }],
+    }),
+  )
+  model.setWidth(800)
+  model.setDisplayedRegions(volvoxDisplayedRegions.slice(0, 1))
+
+  model.navToLocString('ctgA 0 100')
+
+  expect(model.offsetPx).toBe(0)
+  expect(model.bpPerPx).toBe(0.125)
 })