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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-linear-genome-view",
-  "version": "1.6.7",
+  "version": "1.6.8",
   "description": "JBrowse 2 linear genome view",
   "keywords": [
     "jbrowse",
@@ -61,5 +61,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "02012ec299c36647f755316571775d36b0fee5ec"
+  "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
@@ -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

@@ -13,9 +13,7 @@ import { LinearGenomeViewModel, RESIZE_HANDLE_HEIGHT } from '..'
 import TrackLabel from './TrackLabel'
 
 const useStyles = makeStyles(theme => ({
-  root: {
-    margin: 2,
-  },
+  root: { marginTop: 2 },
   resizeHandle: {
     height: RESIZE_HANDLE_HEIGHT,
     boxSizing: 'border-box',
@@ -34,6 +32,16 @@ const useStyles = makeStyles(theme => ({
   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
+    left: -1,
+    height: '100%',
+    width: '100%',
+  },
   trackLabelInline: {
     position: 'relative',
     display: 'inline-block',
@@ -48,31 +56,26 @@ const useStyles = makeStyles(theme => ({
     position: 'relative',
     background: 'none',
     zIndex: 2,
-    boxSizing: 'content-box',
   },
 }))
 
 type LGV = LinearGenomeViewModel
 
-function TrackContainerLabel({
-  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
-}
+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,
@@ -123,7 +126,11 @@ function TrackContainer({
         data-testid={`trackRenderingContainer-${model.id}-${trackId}`}
         role="presentation"
       >
-        <div ref={ref} style={{ transform: `scaleX(${model.scaleFactor})` }}>
+        <div
+          ref={ref}
+          className={classes.renderingComponentContainer}
+          style={{ transform: `scaleX(${model.scaleFactor})` }}
+        >
           <RenderingComponent
             model={display}
             onHorizontalScroll={horizontalScroll}

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

@@ -533,12 +533,12 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
         style="height: 100px;"
       >
         <div
+          class="makeStyles-renderingComponentContainer"
           style="transform: scaleX(1);"
         >
           <div
             class="makeStyles-display"
             data-testid="display-testConfig-LinearBareDisplay"
-            role="presentation"
           >
             <div
               class="makeStyles-linearBlocks"
@@ -1423,12 +1423,12 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
         style="height: 100px;"
       >
         <div
+          class="makeStyles-renderingComponentContainer"
           style="transform: scaleX(1);"
         >
           <div
             class="makeStyles-display"
             data-testid="display-testConfig-LinearBareDisplay"
-            role="presentation"
           >
             <div
               class="makeStyles-linearBlocks"
@@ -1443,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"
@@ -1463,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"
@@ -1578,12 +1568,12 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
         style="height: 100px;"
       >
         <div
+          class="makeStyles-renderingComponentContainer"
           style="transform: scaleX(1);"
         >
           <div
             class="makeStyles-display"
             data-testid="display-testConfig2-LinearBareDisplay"
-            role="presentation"
           >
             <div
               class="makeStyles-linearBlocks"
@@ -1598,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"
@@ -1618,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"