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

package/package.json

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

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
@@ -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/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/LinearGenomeView/components/TrackContainer.tsx

@@ -1,20 +1,23 @@
 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 { getConf } from '@jbrowse/core/configuration'
 import { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models'
+import { getConf } from '@jbrowse/core/configuration'
 import { ResizeHandle } from '@jbrowse/core/ui'
 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'
 
 const useStyles = makeStyles(theme => ({
-  root: {},
+  root: { marginTop: 2 },
   resizeHandle: {
     height: RESIZE_HANDLE_HEIGHT,
+    boxSizing: 'border-box',
+    position: 'relative',
     zIndex: 2,
   },
   overlay: {
@@ -28,7 +31,16 @@ const useStyles = makeStyles(theme => ({
   },
   trackLabel: {
     zIndex: 3,
-    margin: theme.spacing(1),
+  },
+
+  // 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
+    left: -1,
+    height: '100%',
+    width: '100%',
   },
   trackLabelInline: {
     position: 'relative',
@@ -49,20 +61,35 @@ const useStyles = makeStyles(theme => ({
 
 type LGV = LinearGenomeViewModel
 
+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: LGV
+  model: LinearGenomeViewModel
   track: BaseTrackModel
 }) {
   const classes = useStyles()
   const display = track.displays[0]
-  const { id, trackLabels, horizontalScroll, draggingTrackId, moveTrack } =
-    model
+  const { horizontalScroll, draggingTrackId, moveTrack } = model
   const { height } = display
   const trackId = getConf(track, 'trackId')
-  const ref = useRef<HTMLDivElement>(null)
+  const ref = useRef(null)
 
   useEffect(() => {
     if (ref.current) {
@@ -86,9 +113,9 @@ function TrackContainer({
   const dimmed = draggingTrackId !== undefined && draggingTrackId !== display.id
 
   return (
-    <div className={classes.root}>
-      <Paper
-        variant="outlined"
+    <Paper className={classes.root} variant="outlined">
+      <TrackContainerLabel model={track} view={model} />
+      <div
         className={classes.trackRenderingContainer}
         style={{ height }}
         onScroll={event => {
@@ -96,24 +123,16 @@ function TrackContainer({
           display.setScrollTop(target.scrollTop)
         }}
         onDragEnter={debouncedOnDragEnter}
-        data-testid={`trackRenderingContainer-${id}-${trackId}`}
+        data-testid={`trackRenderingContainer-${model.id}-${trackId}`}
         role="presentation"
       >
-        {trackLabels !== 'hidden' ? (
-          <TrackLabel
-            track={track}
-            className={clsx(
-              classes.trackLabel,
-              trackLabels === 'overlapping'
-                ? classes.trackLabelOverlap
-                : classes.trackLabelInline,
-            )}
-          />
-        ) : null}
-        <div ref={ref} style={{ transform: `scaleX(${model.scaleFactor})` }}>
+        <div
+          ref={ref}
+          className={classes.renderingComponentContainer}
+          style={{ transform: `scaleX(${model.scaleFactor})` }}
+        >
           <RenderingComponent
             model={display}
-            blockState={{}}
             onHorizontalScroll={horizontalScroll}
           />
         </div>
@@ -129,7 +148,7 @@ function TrackContainer({
             <DisplayBlurb model={display} />
           </div>
         ) : null}
-      </Paper>
+      </div>
       <div
         className={classes.overlay}
         style={{
@@ -142,7 +161,7 @@ function TrackContainer({
         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>
   )