Preserve double border line when using trackLabel offset and smaller …

…gap between snpcoverage and reads (#2678)
GMOD · Mar 2, 2022 · 26e5eee · 26e5eee
1 parent 01bffe2
commit 26e5eee
Show file tree

Hide file tree

Showing 5 changed files with 324 additions and 332 deletions.
diff --git a/plugins/alignments/src/LinearAlignmentsDisplay/components/AlignmentsDisplay.tsx b/plugins/alignments/src/LinearAlignmentsDisplay/components/AlignmentsDisplay.tsx
@@ -2,47 +2,55 @@ import React from 'react'
 import { observer } from 'mobx-react'
 import { getConf } from '@jbrowse/core/configuration'
 import { ResizeHandle } from '@jbrowse/core/ui'
+import { makeStyles } from '@material-ui/core'
 import { AlignmentsDisplayModel } from '../models/model'
 
+const useStyles = makeStyles(() => ({
+  resizeHandle: {
+    height: 2,
+    position: 'absolute',
+    zIndex: 2,
+  },
+}))
+
 function AlignmentsDisplay({ model }: { model: AlignmentsDisplayModel }) {
   const { PileupDisplay, SNPCoverageDisplay, showPileup, showCoverage } = model
+  const classes = useStyles()
+  const top = SNPCoverageDisplay.height
   return (
     <div
       data-testid={`display-${getConf(model, 'displayId')}`}
       style={{ position: 'relative' }}
     >
-      <div data-testid="Blockset-snpcoverage">
-        {showCoverage ? (
-          <SNPCoverageDisplay.RenderingComponent model={SNPCoverageDisplay} />
-        ) : null}
-      </div>
-      <ResizeHandle
-        onDrag={delta => {
-          if (SNPCoverageDisplay) {
-            SNPCoverageDisplay.setHeight(SNPCoverageDisplay.height + delta)
-            return delta
-          }
-          return 0
-        }}
-        style={{
-          position: 'absolute',
-          top: showCoverage ? SNPCoverageDisplay.height + 2 : 0,
-          height: 3,
-        }}
-      />
+      {showCoverage ? (
+        <>
+          <div data-testid="Blockset-snpcoverage">
+            <SNPCoverageDisplay.RenderingComponent model={SNPCoverageDisplay} />
+          </div>
+          <ResizeHandle
+            onDrag={delta => {
+              SNPCoverageDisplay.setHeight(SNPCoverageDisplay.height + delta)
+              return delta
+            }}
+            className={classes.resizeHandle}
+            style={{
+              top,
+            }}
+          />
+        </>
+      ) : null}
 
-      <div
-        data-testid="Blockset-pileup"
-        style={{
-          position: 'absolute',
-          top: showCoverage ? SNPCoverageDisplay.height + 5 : 0,
-          height: 3,
-        }}
-      >
-        {showPileup ? (
+      {showPileup ? (
+        <div
+          data-testid="Blockset-pileup"
+          style={{
+            position: 'absolute',
+            top: showCoverage ? SNPCoverageDisplay.height : 0,
+          }}
+        >
           <PileupDisplay.RenderingComponent model={PileupDisplay} />
-        ) : null}
-      </div>
+        </div>
+      ) : null}
     </div>
   )
 }

diff --git a/plugins/alignments/src/LinearAlignmentsDisplay/models/model.tsx b/plugins/alignments/src/LinearAlignmentsDisplay/models/model.tsx
@@ -1,13 +1,16 @@
 import React from 'react'
-import { ConfigurationReference, getConf } from '@jbrowse/core/configuration'
-import { AnyConfigurationModel } from '@jbrowse/core/configuration/configurationSchema'
+import {
+  ConfigurationReference,
+  AnyConfigurationModel,
+  getConf,
+} from '@jbrowse/core/configuration'
 import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes/models'
 import PluginManager from '@jbrowse/core/PluginManager'
 import { MenuItem } from '@jbrowse/core/ui'
-import deepEqual from 'fast-deep-equal'
 import { autorun, when } from 'mobx'
 import { addDisposer, getSnapshot, Instance, types } from 'mobx-state-tree'
 import { getContainingTrack } from '@jbrowse/core/util'
+import deepEqual from 'fast-deep-equal'
 import { AlignmentsConfigModel } from './configSchema'
 
 const minDisplayHeight = 20

diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/TrackContainer.tsx b/plugins/linear-genome-view/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}