@jbrowse/plugin-linear-genome-view 1.6.5 → 1.6.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-linear-genome-view",
-  "version": "1.6.5",
+  "version": "1.6.8",
   "description": "JBrowse 2 linear genome view",
   "keywords": [
     "jbrowse",
@@ -61,5 +61,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ab41f017840ffef09f5d60b008281cedaa5abe26"
+  "gitHead": "585e522096651ef4afb188366bb46d723439dc1b"
 }

package/src/BaseLinearDisplay/components/BaseLinearDisplay.tsx

@@ -1,8 +1,8 @@
 import React, { useState, useRef, useMemo } from 'react'
+import { observer } from 'mobx-react'
 import { Portal, alpha, useTheme, makeStyles } from '@material-ui/core'
 import { getConf } from '@jbrowse/core/configuration'
 import { Menu } from '@jbrowse/core/ui'
-import { observer } from 'mobx-react'
 import { usePopper } from 'react-popper'
 
 // locals
@@ -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',
@@ -56,7 +56,6 @@ const Tooltip = observer(
     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
@@ -111,7 +110,7 @@ const BaseLinearDisplay = observer(
     const classes = useStyles()
     const theme = useTheme()
     const ref = useRef<HTMLDivElement>(null)
-    const [clientRect, setClientRect] = useState<ClientRect>()
+    const [clientRect, setClientRect] = useState<DOMRect>()
     const [offsetMouseCoord, setOffsetMouseCoord] = useState<Coord>([0, 0])
     const [clientMouseCoord, setClientMouseCoord] = useState<Coord>([0, 0])
     const [contextCoord, setContextCoord] = useState<Coord>()
@@ -139,17 +138,15 @@ const BaseLinearDisplay = observer(
           }
         }}
         onMouseMove={event => {
-          if (ref.current) {
-            const rect = ref.current.getBoundingClientRect()
-            setOffsetMouseCoord([
-              event.clientX - rect.left,
-              event.clientY - rect.top,
-            ])
-            setClientMouseCoord([event.clientX, event.clientY])
-            setClientRect(rect)
+          if (!ref.current) {
+            return
           }
+          const rect = ref.current.getBoundingClientRect()
+          const { left, top } = rect
+          setOffsetMouseCoord([event.clientX - left, event.clientY - top])
+          setClientMouseCoord([event.clientX, event.clientY])
+          setClientRect(rect)
         }}
-        role="presentation"
       >
         {DisplayMessageComponent ? (
           <DisplayMessageComponent model={model} />

package/src/BaseLinearDisplay/models/BaseLinearDisplayModel.tsx

@@ -426,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/components/SetMaxHeight.tsx

@@ -3,6 +3,7 @@ import { observer } from 'mobx-react'
 import {
   Button,
   Dialog,
+  DialogActions,
   DialogContent,
   DialogTitle,
   IconButton,
@@ -57,21 +58,22 @@ function SetMaxHeightDlg(props: {
           <CloseIcon />
         </IconButton>
       </DialogTitle>
-      <DialogContent>
-        <div className={classes.root}>
-          <Typography>Set max height for the track</Typography>
-          <TextField
-            value={max}
-            onChange={event => {
-              setMax(event.target.value)
-            }}
-            placeholder="Enter max score"
-          />
+      <DialogContent className={classes.root}>
+        <Typography>
+          Set max height for the track. For example, you can increase this if
+          the layout says "Max height reached"
+        </Typography>
+        <TextField
+          value={max}
+          onChange={event => setMax(event.target.value)}
+          placeholder="Enter max score"
+        />
+        <DialogActions>
           <Button
             variant="contained"
             color="primary"
             type="submit"
-            style={{ marginLeft: 20 }}
+            autoFocus
             onClick={() => {
               model.setMaxHeight(
                 max !== '' && !Number.isNaN(+max) ? +max : undefined,
@@ -81,7 +83,14 @@ function SetMaxHeightDlg(props: {
           >
             Submit
           </Button>
-        </div>
+          <Button
+            variant="contained"
+            color="secondary"
+            onClick={() => handleClose()}
+          >
+            Cancel
+          </Button>
+        </DialogActions>
       </DialogContent>
     </Dialog>
   )

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

@@ -4,7 +4,7 @@ import { isAlive } from 'mobx-state-tree'
 import { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models'
 import { getConf } from '@jbrowse/core/configuration'
 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'
@@ -13,7 +13,7 @@ import { LinearGenomeViewModel, RESIZE_HANDLE_HEIGHT } from '..'
 import TrackLabel from './TrackLabel'
 
 const useStyles = makeStyles(theme => ({
-  root: {},
+  root: { marginTop: 2 },
   resizeHandle: {
     height: RESIZE_HANDLE_HEIGHT,
     boxSizing: 'border-box',
@@ -29,6 +29,12 @@ const useStyles = makeStyles(theme => ({
     zIndex: 3,
     borderRadius: theme.shape.borderRadius,
   },
+  trackLabel: {
+    zIndex: 3,
+  },
+
+  // aligns with block bounderies. check for example the breakpoint split view
+  // demo to see if features align if wanting to change things
   renderingComponentContainer: {
     position: 'absolute',
     // -1 offset because of the 1px border of the Paper
@@ -36,10 +42,6 @@ const useStyles = makeStyles(theme => ({
     height: '100%',
     width: '100%',
   },
-  trackLabel: {
-    zIndex: 3,
-    margin: theme.spacing(1),
-  },
   trackLabelInline: {
     position: 'relative',
     display: 'inline-block',
@@ -54,22 +56,38 @@ const useStyles = makeStyles(theme => ({
     position: 'relative',
     background: 'none',
     zIndex: 2,
-    boxSizing: 'content-box',
   },
 }))
 
 type LGV = LinearGenomeViewModel
 
-function TrackContainer(props: {
+const TrackContainerLabel = observer(
+  ({ model, view }: { model: BaseTrackModel; view: LGV }) => {
+    const classes = useStyles()
+    const labelStyle =
+      view.trackLabels === 'overlapping'
+        ? classes.trackLabelOverlap
+        : classes.trackLabelInline
+    return view.trackLabels !== 'hidden' ? (
+      <TrackLabel
+        track={model}
+        className={clsx(classes.trackLabel, labelStyle)}
+      />
+    ) : null
+  },
+)
+
+function TrackContainer({
+  model,
+  track,
+}: {
   model: LinearGenomeViewModel
   track: BaseTrackModel
 }) {
   const classes = useStyles()
-  const { model, track } = props
   const display = track.displays[0]
   const { horizontalScroll, draggingTrackId, moveTrack } = model
   const { height } = display
-  const view = getContainingView(display) as LGV
   const trackId = getConf(track, 'trackId')
   const ref = useRef(null)
 
@@ -95,21 +113,9 @@ function TrackContainer(props: {
   const dimmed = draggingTrackId !== undefined && draggingTrackId !== display.id
 
   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"
+    <Paper className={classes.root} variant="outlined">
+      <TrackContainerLabel model={track} view={model} />
+      <div
         className={classes.trackRenderingContainer}
         style={{ height }}
         onScroll={event => {
@@ -117,7 +123,7 @@ function TrackContainer(props: {
           display.setScrollTop(target.scrollTop)
         }}
         onDragEnter={debouncedOnDragEnter}
-        data-testid={`trackRenderingContainer-${view.id}-${trackId}`}
+        data-testid={`trackRenderingContainer-${model.id}-${trackId}`}
         role="presentation"
       >
         <div
@@ -127,7 +133,6 @@ function TrackContainer(props: {
         >
           <RenderingComponent
             model={display}
-            blockState={{}}
             onHorizontalScroll={horizontalScroll}
           />
         </div>
@@ -140,11 +145,10 @@ function TrackContainer(props: {
               top: display.height - 20,
             }}
           >
-            {' '}
             <DisplayBlurb model={display} />
           </div>
         ) : null}
-      </Paper>
+      </div>
       <div
         className={classes.overlay}
         style={{
@@ -157,7 +161,7 @@ function TrackContainer(props: {
         onDrag={display.resizeHeight}
         className={classes.resizeHandle}
       />
-    </div>
+    </Paper>
   )
 }
 

package/src/LinearGenomeView/components/TracksContainer.tsx

@@ -185,7 +185,6 @@ function TracksContainer({
           />
         }
       />
-      <div className={classes.spacer} />
       {children}
     </div>
   )

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

@@ -449,10 +449,7 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-spacer"
-    />
-    <div
-      class="makeStyles-root"
+      class="MuiPaper-root makeStyles-root MuiPaper-outlined MuiPaper-rounded"
     >
       <div
         class="MuiPaper-root makeStyles-trackLabel makeStyles-trackLabelOverlap makeStyles-root MuiPaper-elevation1 MuiPaper-rounded"
@@ -530,7 +527,7 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
         </button>
       </div>
       <div
-        class="MuiPaper-root makeStyles-trackRenderingContainer MuiPaper-outlined MuiPaper-rounded"
+        class="makeStyles-trackRenderingContainer"
         data-testid="trackRenderingContainer-lgv-testConfig"
         role="presentation"
         style="height: 100px;"
@@ -542,7 +539,6 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
           <div
             class="makeStyles-display"
             data-testid="display-testConfig-LinearBareDisplay"
-            role="presentation"
           >
             <div
               class="makeStyles-linearBlocks"
@@ -770,7 +766,7 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
             class="MuiAutocomplete-root"
             data-testid="autocomplete"
             role="combobox"
-            style="width: 255.22500000000002px;"
+            style="width: 255.27500000000003px;"
           >
             <div
               class="MuiFormControl-root MuiTextField-root makeStyles-headerRefName MuiFormControl-fullWidth"
@@ -790,7 +786,7 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
                   placeholder="Search for location"
                   spellcheck="false"
                   type="text"
-                  value="ctgA:1..100;ctgB:1,001..1,698"
+                  value="ctgA:1..100 ctgB:1,001..1,698"
                 />
                 <div
                   class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
@@ -1343,10 +1339,7 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-spacer"
-    />
-    <div
-      class="makeStyles-root"
+      class="MuiPaper-root makeStyles-root MuiPaper-outlined MuiPaper-rounded"
     >
       <div
         class="MuiPaper-root makeStyles-trackLabel makeStyles-trackLabelOverlap makeStyles-root MuiPaper-elevation1 MuiPaper-rounded"
@@ -1424,7 +1417,7 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
         </button>
       </div>
       <div
-        class="MuiPaper-root makeStyles-trackRenderingContainer MuiPaper-outlined MuiPaper-rounded"
+        class="makeStyles-trackRenderingContainer"
         data-testid="trackRenderingContainer-lgv-testConfig"
         role="presentation"
         style="height: 100px;"
@@ -1436,7 +1429,6 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
           <div
             class="makeStyles-display"
             data-testid="display-testConfig-LinearBareDisplay"
-            role="presentation"
           >
             <div
               class="makeStyles-linearBlocks"
@@ -1451,17 +1443,12 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
                 class="makeStyles-contentBlock"
                 style="width: 100px;"
               >
-                <div
-                  style="position: relative;"
-                >
-                  <svg
-                    class="SvgFeatureRendering"
-                    data-testid="svgfeatures"
-                    height="100"
-                    style="display: block;"
-                    width="100"
-                  />
-                </div>
+                <svg
+                  class="SvgFeatureRendering"
+                  data-testid="svgfeatures"
+                  height="100"
+                  width="100"
+                />
               </div>
               <div
                 class="makeStyles-interRegionPaddingBlock"
@@ -1471,17 +1458,12 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
                 class="makeStyles-contentBlock"
                 style="width: 1000px;"
               >
-                <div
-                  style="position: relative;"
-                >
-                  <svg
-                    class="SvgFeatureRendering"
-                    data-testid="svgfeatures"
-                    height="100"
-                    style="display: block;"
-                    width="1000"
-                  />
-                </div>
+                <svg
+                  class="SvgFeatureRendering"
+                  data-testid="svgfeatures"
+                  height="100"
+                  width="1000"
+                />
               </div>
               <div
                 class="makeStyles-boundaryPaddingBlock"
@@ -1502,7 +1484,7 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
       />
     </div>
     <div
-      class="makeStyles-root"
+      class="MuiPaper-root makeStyles-root MuiPaper-outlined MuiPaper-rounded"
     >
       <div
         class="MuiPaper-root makeStyles-trackLabel makeStyles-trackLabelOverlap makeStyles-root MuiPaper-elevation1 MuiPaper-rounded"
@@ -1580,7 +1562,7 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
         </button>
       </div>
       <div
-        class="MuiPaper-root makeStyles-trackRenderingContainer MuiPaper-outlined MuiPaper-rounded"
+        class="makeStyles-trackRenderingContainer"
         data-testid="trackRenderingContainer-lgv-testConfig2"
         role="presentation"
         style="height: 100px;"
@@ -1592,7 +1574,6 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
           <div
             class="makeStyles-display"
             data-testid="display-testConfig2-LinearBareDisplay"
-            role="presentation"
           >
             <div
               class="makeStyles-linearBlocks"
@@ -1607,17 +1588,12 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
                 class="makeStyles-contentBlock"
                 style="width: 100px;"
               >
-                <div
-                  style="position: relative;"
-                >
-                  <svg
-                    class="SvgFeatureRendering"
-                    data-testid="svgfeatures"
-                    height="100"
-                    style="display: block;"
-                    width="100"
-                  />
-                </div>
+                <svg
+                  class="SvgFeatureRendering"
+                  data-testid="svgfeatures"
+                  height="100"
+                  width="100"
+                />
               </div>
               <div
                 class="makeStyles-interRegionPaddingBlock"
@@ -1627,17 +1603,12 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
                 class="makeStyles-contentBlock"
                 style="width: 1000px;"
               >
-                <div
-                  style="position: relative;"
-                >
-                  <svg
-                    class="SvgFeatureRendering"
-                    data-testid="svgfeatures"
-                    height="100"
-                    style="display: block;"
-                    width="1000"
-                  />
-                </div>
+                <svg
+                  class="SvgFeatureRendering"
+                  data-testid="svgfeatures"
+                  height="100"
+                  width="1000"
+                />
               </div>
               <div
                 class="makeStyles-boundaryPaddingBlock"