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

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

package/src/LinearGenomeView/index.tsx

@@ -67,6 +67,7 @@ export interface BpOffset {
 
 export interface ExportSvgOptions {
   rasterizeLayers?: boolean
+  filename?: string
 }
 
 function calculateVisibleLocStrings(contentBlocks: BaseBlock[]) {
@@ -126,6 +127,7 @@ export function stateModelFactory(pluginManager: PluginManager) {
         ),
         hideHeader: false,
         hideHeaderOverview: false,
+        hideNoTracksActive: false,
         trackSelectorType: types.optional(
           types.enumeration(['hierarchical']),
           'hierarchical',
@@ -176,11 +178,18 @@ export function stateModelFactory(pluginManager: PluginManager) {
       get interRegionPaddingWidth() {
         return INTER_REGION_PADDING_WIDTH
       },
+
+      get assemblyNames() {
+        return [
+          ...new Set(self.displayedRegions.map(region => region.assemblyName)),
+        ]
+      },
     }))
     .views(self => ({
       get assemblyErrors() {
         const { assemblyManager } = getSession(self)
-        return this.assemblyNames
+        const { assemblyNames } = self
+        return assemblyNames
           .map(a => assemblyManager.get(a)?.error)
           .filter(f => !!f)
           .join(', ')
@@ -188,9 +197,8 @@ export function stateModelFactory(pluginManager: PluginManager) {
 
       get assembliesInitialized() {
         const { assemblyManager } = getSession(self)
-        return this.assemblyNames.every(
-          a => assemblyManager.get(a)?.initialized,
-        )
+        const { assemblyNames } = self
+        return assemblyNames.every(a => assemblyManager.get(a)?.initialized)
       },
       get initialized() {
         return self.volatileWidth !== undefined && this.assembliesInitialized
@@ -272,11 +280,6 @@ export function stateModelFactory(pluginManager: PluginManager) {
         }
       },
 
-      get assemblyNames() {
-        return [
-          ...new Set(self.displayedRegions.map(region => region.assemblyName)),
-        ]
-      },
       searchScope(assemblyName: string) {
         return {
           assemblyName,
@@ -285,13 +288,6 @@ export function stateModelFactory(pluginManager: PluginManager) {
         }
       },
 
-      /**
-       * @param refName - refName of the displayedRegion
-       * @param coord - coordinate at the displayed Region
-       * @param regionNumber - optional param used as identifier when
-       * there are multiple displayedRegions with the same refName
-       * @returns offsetPx of the displayed region that it lands in
-       */
       bpToPx({
         refName,
         coord,
@@ -395,10 +391,8 @@ export function stateModelFactory(pluginManager: PluginManager) {
           track => track.configuration.trackId,
         )
         results.forEach(result => {
-          if (openTrackIds !== []) {
-            if (openTrackIds.includes(result.trackId)) {
-              result.updateScore(result.getScore() + 1)
-            }
+          if (openTrackIds.includes(result.trackId)) {
+            result.updateScore(result.getScore() + 1)
           }
         })
         return results
@@ -406,7 +400,7 @@ export function stateModelFactory(pluginManager: PluginManager) {
 
       // modifies view menu action onClick to apply to all tracks of same type
       rewriteOnClicks(trackType: string, viewMenuActions: MenuItem[]) {
-        viewMenuActions.forEach((action: MenuItem) => {
+        viewMenuActions.forEach(action => {
           // go to lowest level menu
           if ('subMenu' in action) {
             this.rewriteOnClicks(trackType, action.subMenu)
@@ -463,6 +457,9 @@ export function stateModelFactory(pluginManager: PluginManager) {
       toggleHeaderOverview() {
         self.hideHeaderOverview = !self.hideHeaderOverview
       },
+      toggleNoTracksActive() {
+        self.hideNoTracksActive = !self.hideNoTracksActive
+      },
 
       scrollTo(offsetPx: number) {
         const newOffsetPx = clamp(offsetPx, self.minOffset, self.maxOffset)
@@ -674,13 +671,38 @@ export function stateModelFactory(pluginManager: PluginManager) {
         const { assemblyManager } = getSession(self)
         const { isValidRefName } = assemblyManager
         const assemblyName = optAssemblyName || assemblyNames[0]
+        let parsedLocStrings
+        const inputs = locString
+          .split(/(\s+)/)
+          .map(f => f.trim())
+          .filter(f => !!f)
 
-        const parsedLocStrings = locString
-          .split(' ')
-          .filter(f => !!f.trim())
-          .map(l => parseLocString(l, ref => isValidRefName(ref, assemblyName)))
+        // first try interpreting as a whitespace-separated sequence of
+        // multiple locstrings
+        try {
+          parsedLocStrings = inputs.map(l =>
+            parseLocString(l, ref => isValidRefName(ref, assemblyName)),
+          )
+        } catch (e) {
+          // if this fails, try interpreting as a whitespace-separated refname,
+          // start, end if start and end are integer inputs
+          const [refName, start, end] = inputs
+          if (
+            `${e}`.match(/Unknown reference sequence/) &&
+            Number.isInteger(+start) &&
+            Number.isInteger(+end)
+          ) {
+            parsedLocStrings = [
+              parseLocString(refName + ':' + start + '..' + end, ref =>
+                isValidRefName(ref, assemblyName),
+              ),
+            ]
+          } else {
+            throw e
+          }
+        }
 
-        const locations = parsedLocStrings.map(region => {
+        const locations = parsedLocStrings?.map(region => {
           const asmName = region.assemblyName || assemblyName
           const asm = assemblyManager.get(asmName)
           const { refName } = region
@@ -1206,6 +1228,13 @@ export function stateModelFactory(pluginManager: PluginManager) {
             onClick: self.toggleHeaderOverview,
             disabled: self.hideHeader,
           },
+          {
+            label: 'Show no tracks active button',
+            icon: VisibilityIcon,
+            type: 'checkbox',
+            checked: !self.hideNoTracksActive,
+            onClick: self.toggleNoTracksActive,
+          },
           {
             label: 'Track labels',
             icon: LabelIcon,
@@ -1330,7 +1359,7 @@ export function stateModelFactory(pluginManager: PluginManager) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const html = await renderToSvg(self as any, opts)
         const blob = new Blob([html], { type: 'image/svg+xml' })
-        saveAs(blob, 'image.svg')
+        saveAs(blob, opts.filename || 'image.svg')
       },
     }))
     .views(self => ({

package/src/index.ts

@@ -137,42 +137,47 @@ export default class LinearGenomeViewPlugin extends Plugin {
         loc: string
         tracks?: string[]
       }) => {
-        const { assemblyManager } = session
-        const view = session.addView('LinearGenomeView', {}) as LGV
+        try {
+          const { assemblyManager } = session
+          const view = session.addView('LinearGenomeView', {}) as LGV
 
-        await when(() => !!view.volatileWidth)
+          await when(() => !!view.volatileWidth)
 
-        if (!assembly) {
-          throw new Error(
-            'No assembly provided when launching linear genome view',
-          )
-        }
+          if (!assembly) {
+            throw new Error(
+              'No assembly provided when launching linear genome view',
+            )
+          }
 
-        const asm = await assemblyManager.waitForAssembly(assembly)
-        if (!asm) {
-          throw new Error(
-            `Assembly "${assembly}" not found when launching linear genome view`,
-          )
-        }
+          const asm = await assemblyManager.waitForAssembly(assembly)
+          if (!asm) {
+            throw new Error(
+              `Assembly "${assembly}" not found when launching linear genome view`,
+            )
+          }
 
-        view.navToLocString(loc, assembly)
-
-        const idsNotFound = [] as string[]
-        tracks.forEach(track => {
-          try {
-            view.showTrack(track)
-          } catch (e) {
-            if (`${e}`.match('Could not resolve identifier')) {
-              idsNotFound.push(track)
-            } else {
-              throw e
+          view.navToLocString(loc, assembly)
+
+          const idsNotFound = [] as string[]
+          tracks.forEach(track => {
+            try {
+              view.showTrack(track)
+            } catch (e) {
+              if (`${e}`.match('Could not resolve identifier')) {
+                idsNotFound.push(track)
+              } else {
+                throw e
+              }
             }
+          })
+          if (idsNotFound.length) {
+            throw new Error(
+              `Could not resolve identifiers: ${idsNotFound.join(',')}`,
+            )
           }
-        })
-        if (idsNotFound.length) {
-          throw new Error(
-            `Could not resolve identifiers: ${idsNotFound.join(',')}`,
-          )
+        } catch (e) {
+          session.notify(`${e}`, 'error')
+          throw e
         }
       },
     )