@jbrowse/plugin-linear-genome-view 1.6.3 → 1.6.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-linear-genome-view",
-  "version": "1.6.3",
+  "version": "1.6.6",
   "description": "JBrowse 2 linear genome view",
   "keywords": [
     "jbrowse",
@@ -61,5 +61,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c6d6783d3dc82ea96390ab177ceb8ed38b439333"
+  "gitHead": "9fcca7793af0df2d6e527ddaace2b368c8ed2879"
 }

package/src/BaseLinearDisplay/components/BaseLinearDisplay.tsx

@@ -31,7 +31,7 @@ const useStyles = makeStyles(theme => ({
     color: theme.palette.common.white,
     fontFamily: theme.typography.fontFamily,
     padding: '4px 8px',
-    fontSize: theme.typography.pxToRem(10),
+    fontSize: theme.typography.pxToRem(12),
     lineHeight: `${round(14 / 10)}em`,
     maxWidth: 300,
     wordWrap: 'break-word',
@@ -96,9 +96,7 @@ const Tooltip = observer(
           {...attributes.popper}
         >
           <TooltipContents
-            ref={(elt: HTMLDivElement) =>
-              setWidth(elt?.getBoundingClientRect().width || 0)
-            }
+            ref={elt => setWidth(elt?.getBoundingClientRect().width || 0)}
             message={contents}
           />
         </div>

package/src/BaseLinearDisplay/components/LinearBlocks.tsx

@@ -1,7 +1,7 @@
+import React from 'react'
 import { makeStyles } from '@material-ui/core/styles'
 import { getContainingView } from '@jbrowse/core/util'
-import { observer, PropTypes } from 'mobx-react'
-import React from 'react'
+import { observer } from 'mobx-react'
 import {
   ContentBlock,
   ElidedBlock,
@@ -14,6 +14,7 @@ import {
   ElidedBlock as ElidedBlockComponent,
   InterRegionPaddingBlock as InterRegionPaddingBlockComponent,
 } from './Block'
+import { LinearGenomeViewModel } from '../../LinearGenomeView'
 
 const useStyles = makeStyles({
   linearBlocks: {
@@ -96,8 +97,7 @@ const RenderedBlocks = observer(
 function LinearBlocks({ model }: { model: BaseLinearDisplayModel }) {
   const classes = useStyles()
   const { blockDefinitions } = model
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const viewModel = getContainingView(model) as any
+  const viewModel = getContainingView(model) as LinearGenomeViewModel
   return (
     <div
       data-testid="Blockset"
@@ -111,9 +111,5 @@ function LinearBlocks({ model }: { model: BaseLinearDisplayModel }) {
   )
 }
 
-LinearBlocks.propTypes = {
-  model: PropTypes.observableObject.isRequired,
-}
-
 export { RenderedBlocks, useStyles }
 export default observer(LinearBlocks)

package/src/BaseLinearDisplay/models/BaseLinearDisplayModel.tsx

@@ -387,7 +387,10 @@ export const BaseLinearDisplay = types
         self.setError()
         const aborter = new AbortController()
         const view = getContainingView(self) as LGV
-        if (!view.initialized) {
+
+        // extra check for contentBlocks.length
+        // https://github.com/GMOD/jbrowse-components/issues/2694
+        if (!view.initialized || !view.staticBlocks.contentBlocks.length) {
           return
         }
 
@@ -411,7 +414,7 @@ export const BaseLinearDisplay = types
       afterAttach() {
         // this autorun performs stats estimation
         //
-        // the chain of events calls estimateRegionStats against the data
+        // the chain of events calls estimateRegionsStats against the data
         // adapter which by default uses featureDensity, but can also respond
         // with a byte size estimate and fetch size limit (data adapter can
         // define what is too much data)
@@ -423,7 +426,12 @@ export const BaseLinearDisplay = types
                 const aborter = new AbortController()
                 const view = getContainingView(self) as LGV
 
-                if (!view.initialized) {
+                // extra check for contentBlocks.length
+                // https://github.com/GMOD/jbrowse-components/issues/2694
+                if (
+                  !view.initialized ||
+                  !view.staticBlocks.contentBlocks.length
+                ) {
                   return
                 }
 

package/src/LinearBasicDisplay/model.ts

@@ -139,7 +139,7 @@ const stateModelFactory = (configSchema: AnyConfigurationSchemaType) =>
             {
               label: 'Set max height',
               onClick: () => {
-                getSession(self).queueDialog((doneCallback: Function) => [
+                getSession(self).queueDialog(doneCallback => [
                   SetMaxHeightDlg,
                   { model: self, handleClose: doneCallback },
                 ])

package/src/LinearGenomeView/components/HelpDialog.tsx

@@ -53,7 +53,9 @@ export default function HelpDialog({
           <li>
             Jump to a specific region by typing the region into the location box
             as: <code>ref:start..end</code> or <code>ref:start-end</code>.
-            Commas are allowed in the start and end coordinates.
+            Commas are allowed in the start and end coordinates. A
+            space-separated list of locstrings can be used to open up multiple
+            chromosomes at a time
           </li>
         </ul>
         <h3>Example Searches</h3>
@@ -68,6 +70,17 @@ export default function HelpDialog({
             <code>chr4:79,500,000..80,000,000</code> - jumps the region on
             chromosome 4 between 79.5Mb and 80Mb.
           </li>
+          <li>
+            <code>chr1:1-100 chr2:1-100</code> - create a split view of
+            chr1:1-100 and chr2:1-100
+          </li>
+          <li>
+            <code>chr1 chr2 chr3</code> - open up multiple chromosomes at once
+          </li>
+          <li>
+            <code>chr1:1-100[rev] chr2:1-100</code> - open up the first region
+            in the horizontally flipped orientation
+          </li>
         </ul>
       </DialogContent>
       <Divider />

package/src/LinearGenomeView/components/LinearGenomeViewSvg.tsx

@@ -3,7 +3,7 @@ import { renderToStaticMarkup } from 'react-dom/server'
 import { when } from 'mobx'
 import { getParent } from 'mobx-state-tree'
 import { getConf, readConfObject } from '@jbrowse/core/configuration'
-import { getSession } from '@jbrowse/core/util'
+import { getSession, getBpDisplayStr } from '@jbrowse/core/util'
 import { AnyConfigurationModel } from '@jbrowse/core/configuration/configurationSchema'
 import Base1DView from '@jbrowse/core/util/Base1DViewModel'
 
@@ -18,18 +18,6 @@ import { Polygon, Cytobands } from './OverviewScaleBar'
 
 type LGV = LinearGenomeViewModel
 
-function getBpDisplayStr(totalBp: number) {
-  let displayBp
-  if (Math.floor(totalBp / 1000000) > 0) {
-    displayBp = `${parseFloat((totalBp / 1000000).toPrecision(3))}Mbp`
-  } else if (Math.floor(totalBp / 1000) > 0) {
-    displayBp = `${parseFloat((totalBp / 1000).toPrecision(3))}Kbp`
-  } else {
-    displayBp = `${Math.floor(totalBp)}bp`
-  }
-  return displayBp
-}
-
 function ScaleBar({ model, fontSize }: { model: LGV; fontSize: number }) {
   const {
     offsetPx,

package/src/LinearGenomeView/components/OverviewScaleBar.tsx

@@ -181,7 +181,7 @@ const Cytobands = observer(
     assembly?: Assembly
     block: ContentBlock
   }) => {
-    const { offsetPx } = block
+    const { offsetPx, reversed } = block
     const cytobands = assembly?.cytobands
       ?.map(f => ({
         refName: assembly.getCanonicalRefName(f.get('refName')),
@@ -205,6 +205,10 @@ const Cytobands = observer(
         ]
       })
 
+    const arr = cytobands || []
+    const lcap = reversed ? arr.length - 1 : 0
+    const rcap = reversed ? 0 : arr.length - 1
+
     let firstCent = true
     return cytobands ? (
       <g transform={`translate(-${offsetPx})`}>
@@ -238,7 +242,7 @@ const Cytobands = observer(
             )
           }
 
-          if (index === 0) {
+          if (lcap === index) {
             return (
               <path
                 key={key}
@@ -252,7 +256,7 @@ const Cytobands = observer(
                 fill={colorMap[type]}
               />
             )
-          } else if (index === cytobands.length - 1) {
+          } else if (rcap === index) {
             return (
               <path
                 key={key}

package/src/LinearGenomeView/components/TrackContainer.tsx

@@ -1,13 +1,12 @@
 import React, { useEffect, useRef } from 'react'
+import { Paper, makeStyles } from '@material-ui/core'
 import { observer } from 'mobx-react'
 import { isAlive } from 'mobx-state-tree'
-import { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models'
 import { getConf } from '@jbrowse/core/configuration'
+import { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models'
 import { ResizeHandle } from '@jbrowse/core/ui'
-import { useDebouncedCallback, getContainingView } from '@jbrowse/core/util'
+import { useDebouncedCallback } from '@jbrowse/core/util'
 import clsx from 'clsx'
-import Paper from '@material-ui/core/Paper'
-import { makeStyles } from '@material-ui/core/styles'
 
 import { LinearGenomeViewModel, RESIZE_HANDLE_HEIGHT } from '..'
 import TrackLabel from './TrackLabel'
@@ -16,8 +15,6 @@ const useStyles = makeStyles(theme => ({
   root: {},
   resizeHandle: {
     height: RESIZE_HANDLE_HEIGHT,
-    boxSizing: 'border-box',
-    position: 'relative',
     zIndex: 2,
   },
   overlay: {
@@ -29,13 +26,6 @@ const useStyles = makeStyles(theme => ({
     zIndex: 3,
     borderRadius: theme.shape.borderRadius,
   },
-  renderingComponentContainer: {
-    position: 'absolute',
-    // -1 offset because of the 1px border of the Paper
-    left: -1,
-    height: '100%',
-    width: '100%',
-  },
   trackLabel: {
     zIndex: 3,
     margin: theme.spacing(1),
@@ -54,24 +44,25 @@ const useStyles = makeStyles(theme => ({
     position: 'relative',
     background: 'none',
     zIndex: 2,
-    boxSizing: 'content-box',
   },
 }))
 
 type LGV = LinearGenomeViewModel
 
-function TrackContainer(props: {
-  model: LinearGenomeViewModel
+function TrackContainer({
+  model,
+  track,
+}: {
+  model: LGV
   track: BaseTrackModel
 }) {
   const classes = useStyles()
-  const { model, track } = props
   const display = track.displays[0]
-  const { horizontalScroll, draggingTrackId, moveTrack } = model
+  const { id, trackLabels, horizontalScroll, draggingTrackId, moveTrack } =
+    model
   const { height } = display
-  const view = getContainingView(display) as LGV
   const trackId = getConf(track, 'trackId')
-  const ref = useRef(null)
+  const ref = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
     if (ref.current) {
@@ -96,18 +87,6 @@ function TrackContainer(props: {
 
   return (
     <div className={classes.root}>
-      {view.trackLabels !== 'hidden' ? (
-        <TrackLabel
-          track={track}
-          className={clsx(
-            classes.trackLabel,
-            view.trackLabels === 'overlapping'
-              ? classes.trackLabelOverlap
-              : classes.trackLabelInline,
-          )}
-        />
-      ) : null}
-
       <Paper
         variant="outlined"
         className={classes.trackRenderingContainer}
@@ -117,14 +96,21 @@ function TrackContainer(props: {
           display.setScrollTop(target.scrollTop)
         }}
         onDragEnter={debouncedOnDragEnter}
-        data-testid={`trackRenderingContainer-${view.id}-${trackId}`}
+        data-testid={`trackRenderingContainer-${id}-${trackId}`}
         role="presentation"
       >
-        <div
-          ref={ref}
-          className={classes.renderingComponentContainer}
-          style={{ transform: `scaleX(${model.scaleFactor})` }}
-        >
+        {trackLabels !== 'hidden' ? (
+          <TrackLabel
+            track={track}
+            className={clsx(
+              classes.trackLabel,
+              trackLabels === 'overlapping'
+                ? classes.trackLabelOverlap
+                : classes.trackLabelInline,
+            )}
+          />
+        ) : null}
+        <div ref={ref} style={{ transform: `scaleX(${model.scaleFactor})` }}>
           <RenderingComponent
             model={display}
             blockState={{}}
@@ -140,7 +126,6 @@ function TrackContainer(props: {
               top: display.height - 20,
             }}
           >
-            {' '}
             <DisplayBlurb model={display} />
           </div>
         ) : null}

package/src/LinearGenomeView/components/TrackLabel.tsx

@@ -102,7 +102,10 @@ const TrackLabel = React.forwardRef(
       handleClose()
     }
 
-    const items = track.trackMenuItems()
+    const items = [
+      ...session.getTrackActionMenuItems?.(trackConf),
+      ...track.trackMenuItems(),
+    ].sort((a, b) => (b.priority || 0) - (a.priority || 0))
 
     return (
       <>
@@ -148,10 +151,7 @@ const TrackLabel = React.forwardRef(
           onMenuItemClick={handleMenuItemClick}
           open={Boolean(anchorEl)}
           onClose={handleClose}
-          menuItems={[
-            ...session.getTrackActionMenuItems?.(trackConf),
-            ...items,
-          ].sort((a, b) => (b.priority || 0) - (a.priority || 0))}
+          menuItems={items}
         />
       </>
     )