@jbrowse/plugin-linear-genome-view 1.7.8 → 1.7.11

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',
@@ -171,6 +170,19 @@ const colorMap: { [key: string]: string | undefined } = {
   acen: '#800',
 }
 
+function getCytobands(assembly: Assembly | undefined, refName: string) {
+  return (
+    assembly?.cytobands
+      ?.map(f => ({
+        refName: assembly.getCanonicalRefName(f.get('refName')),
+        start: f.get('start'),
+        end: f.get('end'),
+        type: f.get('type'),
+      }))
+      .filter(f => f.refName === refName) || []
+  )
+}
+
 const Cytobands = observer(
   ({
     overview,
@@ -182,37 +194,30 @@ const Cytobands = observer(
     block: ContentBlock
   }) => {
     const { offsetPx, reversed } = block
-    const cytobands = assembly?.cytobands
-      ?.map(f => ({
-        refName: assembly.getCanonicalRefName(f.get('refName')),
-        start: f.get('start'),
-        end: f.get('end'),
-        type: f.get('type'),
-      }))
-      .filter(f => f.refName === block.refName)
-      .map(f => {
-        const { refName, start, end, type } = f
-        return [
-          overview.bpToPx({
-            refName,
-            coord: start,
-          }),
-          overview.bpToPx({
-            refName,
-            coord: end,
-          }),
-          type,
-        ]
-      })
+    const cytobands = getCytobands(assembly, block.refName)
+    const coords = cytobands.map(f => {
+      const { refName, start, end, type } = f
+      return [
+        overview.bpToPx({
+          refName,
+          coord: start,
+        }),
+        overview.bpToPx({
+          refName,
+          coord: end,
+        }),
+        type,
+      ]
+    })
 
     const arr = cytobands || []
     const lcap = reversed ? arr.length - 1 : 0
     const rcap = reversed ? 0 : arr.length - 1
 
     let firstCent = true
-    return cytobands ? (
+    return (
       <g transform={`translate(-${offsetPx})`}>
-        {cytobands.map(([start, end, type], index) => {
+        {coords.map(([start, end, type], index) => {
           const key = `${start}-${end}-${type}`
           if (type === 'acen' && firstCent) {
             firstCent = false
@@ -284,7 +289,7 @@ const Cytobands = observer(
           }
         })}
       </g>
-    ) : null
+    )
   },
 )
 
@@ -301,7 +306,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)
@@ -314,13 +319,16 @@ const OverviewBox = observer(
       tickLabels.push(reversed ? end - offsetLabel : start + offsetLabel)
     }
 
+    const canDisplayCytobands =
+      showCytobands && getCytobands(assembly, block.refName).length
+
     return (
       <div>
         {/* name of sequence */}
         <Typography
           style={{
             left: block.offsetPx + 3,
-            color: showCytobands ? 'black' : refNameColor,
+            color: canDisplayCytobands ? 'black' : refNameColor,
           }}
           className={classes.scaleBarRefName}
         >
@@ -329,12 +337,12 @@ const OverviewBox = observer(
         <div
           className={clsx(
             classes.scaleBarContig,
-            showCytobands
+            canDisplayCytobands
               ? undefined
               : reversed
               ? classes.scaleBarContigReverse
               : classes.scaleBarContigForward,
-            !showCytobands ? classes.scaleBarBorder : undefined,
+            !canDisplayCytobands ? classes.scaleBarBorder : undefined,
           )}
           style={{
             left: block.offsetPx + cytobandOffset,
@@ -342,7 +350,7 @@ const OverviewBox = observer(
             borderColor: refNameColor,
           }}
         >
-          {!showCytobands
+          {!canDisplayCytobands
             ? tickLabels.map((tickLabel, labelIdx) => (
                 <Typography
                   key={`${JSON.stringify(block)}-${tickLabel}-${labelIdx}`}
@@ -354,12 +362,12 @@ const OverviewBox = observer(
                     color: refNameColor,
                   }}
                 >
-                  {tickLabel.toLocaleString('en-US')}
+                  {getTickDisplayStr(tickLabel, bpPerPx)}
                 </Typography>
               ))
             : null}
 
-          {showCytobands ? (
+          {canDisplayCytobands ? (
             <svg style={{ width: '100%' }}>
               <Cytobands
                 overview={overview}

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/SearchBox.tsx

@@ -3,11 +3,10 @@ import { observer } from 'mobx-react'
 import { makeStyles, useTheme, alpha } from '@material-ui/core'
 import BaseResult from '@jbrowse/core/TextSearch/BaseResults'
 import { getSession } from '@jbrowse/core/util'
-import { SearchType } from '@jbrowse/core/data_adapters/BaseAdapter'
 
 // locals
 import RefNameAutocomplete from './RefNameAutocomplete'
-import { dedupe } from './util'
+import { fetchResults } from './util'
 import { LinearGenomeViewModel, SPACING, WIDGET_HEIGHT } from '..'
 
 const useStyles = makeStyles(() => ({
@@ -33,31 +32,6 @@ function SearchBox({
   const assembly = assemblyManager.get(assemblyName)
   const searchScope = model.searchScope(assemblyName)
 
-  async function fetchResults(query: string, searchType?: SearchType) {
-    if (!textSearchManager) {
-      console.warn('No text search manager')
-    }
-
-    const textSearchResults = await textSearchManager?.search(
-      {
-        queryString: query,
-        searchType,
-      },
-      searchScope,
-      rankSearchResults,
-    )
-
-    const refNameResults = assembly?.allRefNames
-      ?.filter(refName => refName.startsWith(query))
-      .map(r => new BaseResult({ label: r }))
-      .slice(0, 10)
-
-    return dedupe(
-      [...(refNameResults || []), ...(textSearchResults || [])],
-      elt => elt.getId(),
-    )
-  }
-
   // gets a string as input, or use stored option results from previous query,
   // then re-query and
   // 1) if it has multiple results: pop a dialog
@@ -82,7 +56,14 @@ function SearchBox({
       ) {
         model.navToLocString(location, assemblyName)
       } else {
-        const results = await fetchResults(label, 'exact')
+        const results = await fetchResults({
+          queryString: label,
+          searchType: 'exact',
+          searchScope,
+          rankSearchResults,
+          textSearchManager,
+          assembly,
+        })
         if (results.length > 1) {
           model.setSearchResults(results, label.toLowerCase())
           return
@@ -106,7 +87,15 @@ function SearchBox({
       showHelp={showHelp}
       onSelect={handleSelectedRegion}
       assemblyName={assemblyName}
-      fetchResults={fetchResults}
+      fetchResults={queryString =>
+        fetchResults({
+          queryString,
+          searchScope,
+          rankSearchResults,
+          textSearchManager,
+          assembly,
+        })
+      }
       model={model}
       TextFieldProps={{
         variant: 'outlined',

package/src/LinearGenomeView/components/SearchResultsDialog.tsx

@@ -156,7 +156,6 @@ export default function SearchResultsDialog({
                             }
                             handleClose()
                           }}
-                          disabled={!getTrackName(result.getTrackId())}
                           color="primary"
                           variant="contained"
                         >

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/components/util.ts

@@ -1,4 +1,8 @@
+import { Assembly } from '@jbrowse/core/assemblyManager/assembly'
+import { SearchType } from '@jbrowse/core/data_adapters/BaseAdapter'
 import BaseResult from '@jbrowse/core/TextSearch/BaseResults'
+import { SearchScope } from '@jbrowse/core/TextSearch/TextSearchManager'
+import { TextSearchManager } from '@jbrowse/core/util'
 
 export function dedupe(
   results: BaseResult[] = [],
@@ -8,3 +12,42 @@ export function dedupe(
     (elt, idx, self) => idx === self.findIndex(t => cb(t) === cb(elt)),
   )
 }
+
+export async function fetchResults({
+  queryString,
+  searchType,
+  searchScope,
+  rankSearchResults,
+  textSearchManager,
+  assembly,
+}: {
+  queryString: string
+  searchScope: SearchScope
+  rankSearchResults: (results: BaseResult[]) => BaseResult[]
+  searchType?: SearchType
+  textSearchManager?: TextSearchManager
+  assembly?: Assembly
+}) {
+  if (!textSearchManager) {
+    console.warn('No text search manager')
+  }
+
+  const textSearchResults = await textSearchManager?.search(
+    {
+      queryString,
+      searchType,
+    },
+    searchScope,
+    rankSearchResults,
+  )
+
+  const refNameResults = assembly?.allRefNames
+    ?.filter(ref => ref.toLowerCase().startsWith(queryString.toLowerCase()))
+    .slice(0, 10)
+    .map(r => new BaseResult({ label: r }))
+
+  return dedupe(
+    [...(refNameResults || []), ...(textSearchResults || [])],
+    elt => elt.getId(),
+  )
+}

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)
 })