@jbrowse/plugin-linear-genome-view 2.0.0 → 2.1.2

package/src/LinearGenomeView/components/TrackContainer.tsx

@@ -8,6 +8,7 @@ import { getConf } from '@jbrowse/core/configuration'
 import { ResizeHandle } from '@jbrowse/core/ui'
 import { useDebouncedCallback } from '@jbrowse/core/util'
 
+// locals
 import { LinearGenomeViewModel } from '..'
 import TrackLabel from './TrackLabel'
 
@@ -42,7 +43,7 @@ const useStyles = makeStyles()({
     height: '100%',
     width: '100%',
   },
-  trackLabelInline: {
+  trackLabelOffset: {
     position: 'relative',
     display: 'inline-block',
   },
@@ -64,15 +65,15 @@ type LGV = LinearGenomeViewModel
 const TrackContainerLabel = observer(
   ({ model, view }: { model: BaseTrackModel; view: LGV }) => {
     const { classes, cx } = useStyles()
+    const display = model.displays[0]
+    const { trackLabel, trackLabelOverlap, trackLabelOffset } = classes
     const labelStyle =
-      view.trackLabels === 'overlapping'
-        ? classes.trackLabelOverlap
-        : classes.trackLabelInline
+      view.trackLabels !== 'overlapping' || display.prefersOffset
+        ? trackLabelOffset
+        : trackLabelOverlap
+
     return view.trackLabels !== 'hidden' ? (
-      <TrackLabel
-        track={model}
-        className={cx(classes.trackLabel, labelStyle)}
-      />
+      <TrackLabel track={model} className={cx(trackLabel, labelStyle)} />
     ) : null
   },
 )
@@ -81,16 +82,21 @@ function TrackContainer({
   model,
   track,
 }: {
-  model: LinearGenomeViewModel
+  model: LGV
   track: BaseTrackModel
 }) {
   const { classes } = useStyles()
   const display = track.displays[0]
   const { horizontalScroll, draggingTrackId, moveTrack } = model
-  const { height } = display
+  const { height, RenderingComponent, DisplayBlurb } = display
   const trackId = getConf(track, 'trackId')
   const ref = useRef(null)
-
+  const dimmed = draggingTrackId !== undefined && draggingTrackId !== display.id
+  const debouncedOnDragEnter = useDebouncedCallback(() => {
+    if (isAlive(display) && dimmed) {
+      moveTrack(draggingTrackId, track.id)
+    }
+  }, 100)
   useEffect(() => {
     if (ref.current) {
       model.trackRefs[trackId] = ref.current
@@ -99,18 +105,6 @@ function TrackContainer({
       delete model.trackRefs[trackId]
     }
   }, [model.trackRefs, trackId])
-  function onDragEnter() {
-    if (
-      draggingTrackId !== undefined &&
-      isAlive(display) &&
-      draggingTrackId !== display.id
-    ) {
-      moveTrack(draggingTrackId, track.id)
-    }
-  }
-  const debouncedOnDragEnter = useDebouncedCallback(onDragEnter, 100)
-  const { RenderingComponent, DisplayBlurb } = display
-  const dimmed = draggingTrackId !== undefined && draggingTrackId !== display.id
 
   return (
     <Paper className={classes.root} variant="outlined">
@@ -118,13 +112,9 @@ function TrackContainer({
       <div
         className={classes.trackRenderingContainer}
         style={{ height }}
-        onScroll={event => {
-          const target = event.target as HTMLDivElement
-          display.setScrollTop(target.scrollTop)
-        }}
+        onScroll={event => display.setScrollTop(event.currentTarget.scrollTop)}
         onDragEnter={debouncedOnDragEnter}
         data-testid={`trackRenderingContainer-${model.id}-${trackId}`}
-        role="presentation"
       >
         <div
           ref={ref}

package/src/LinearGenomeView/components/TrackLabel.tsx

@@ -1,7 +1,11 @@
 import React from 'react'
 import { observer } from 'mobx-react'
 import { Instance } from 'mobx-state-tree'
-import { getConf, readConfObject } from '@jbrowse/core/configuration'
+import {
+  AnyConfigurationModel,
+  getConf,
+  readConfObject,
+} from '@jbrowse/core/configuration'
 import CascadingMenu from '@jbrowse/core/ui/CascadingMenu'
 import { getSession, getContainingView } from '@jbrowse/core/util'
 import { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models'
@@ -52,10 +56,28 @@ const useStyles = makeStyles()(theme => ({
 }))
 
 type LGV = Instance<LinearGenomeViewStateModel>
+
 interface Props {
   track: BaseTrackModel
   className?: string
 }
+
+function getTrackName(
+  track: BaseTrackModel,
+  session: { assemblies: AnyConfigurationModel[] },
+) {
+  const trackName = getConf(track, 'name')
+  if (getConf(track, 'type') === 'ReferenceSequenceTrack') {
+    const asm = session.assemblies.find(a => a.sequence === track.configuration)
+    return (
+      trackName ||
+      (asm
+        ? `Reference Sequence (${readConfObject(asm, 'name')})`
+        : 'Reference Sequence')
+    )
+  }
+  return trackName
+}
 const TrackLabel = React.forwardRef<HTMLDivElement, Props>(
   ({ track, className }, ref) => {
     const { classes, cx } = useStyles()
@@ -63,6 +85,7 @@ const TrackLabel = React.forwardRef<HTMLDivElement, Props>(
     const session = getSession(track)
     const trackConf = track.configuration
     const trackId = getConf(track, 'trackId')
+    const trackName = getTrackName(track, session)
 
     const popupState = usePopupState({
       popupId: 'trackLabelMenu',
@@ -70,7 +93,7 @@ const TrackLabel = React.forwardRef<HTMLDivElement, Props>(
     })
 
     const onDragStart = (event: React.DragEvent<HTMLSpanElement>) => {
-      const target = event.target as HTMLElement
+      const target = event.currentTarget
       if (target.parentNode) {
         const parent = target.parentNode as HTMLElement
         event.dataTransfer.setDragImage(parent, 20, 20)
@@ -78,69 +101,53 @@ const TrackLabel = React.forwardRef<HTMLDivElement, Props>(
       }
     }
 
-    const onDragEnd = () => {
-      view.setDraggingTrackId(undefined)
-    }
-
-    let trackName = getConf(track, 'name')
-    if (getConf(track, 'type') === 'ReferenceSequenceTrack') {
-      const r = session.assemblies.find(a => a.sequence === trackConf)
-      trackName =
-        trackName ||
-        (r
-          ? `Reference Sequence (${readConfObject(r, 'name')})`
-          : 'Reference Sequence')
-    }
-
     const items = [
       ...(session.getTrackActionMenuItems?.(trackConf) || []),
       ...track.trackMenuItems(),
     ].sort((a, b) => (b.priority || 0) - (a.priority || 0))
 
     return (
-      <>
-        <Paper ref={ref} className={cx(className, classes.root)}>
-          <span
-            draggable
-            className={classes.dragHandle}
-            onDragStart={onDragStart}
-            onDragEnd={onDragEnd}
-            data-testid={`dragHandle-${view.id}-${trackId}`}
-          >
-            <DragIcon className={classes.dragHandleIcon} fontSize="small" />
-          </span>
-          <IconButton
-            onClick={() => view.hideTrack(trackId)}
-            className={classes.iconButton}
-            title="close this track"
-            color="secondary"
-          >
-            <CloseIcon fontSize="small" />
-          </IconButton>
-          <Typography
-            variant="body1"
-            component="span"
-            className={classes.trackName}
-          >
-            {trackName}
-          </Typography>
-          <IconButton
-            {...bindTrigger(popupState)}
-            className={classes.iconButton}
-            color="secondary"
-            data-testid="track_menu_icon"
-            disabled={!items.length}
-          >
-            <MoreVertIcon fontSize="small" />
-          </IconButton>
-        </Paper>
+      <Paper ref={ref} className={cx(className, classes.root)}>
+        <span
+          draggable
+          className={classes.dragHandle}
+          onDragStart={onDragStart}
+          onDragEnd={() => view.setDraggingTrackId(undefined)}
+          data-testid={`dragHandle-${view.id}-${trackId}`}
+        >
+          <DragIcon className={classes.dragHandleIcon} fontSize="small" />
+        </span>
+        <IconButton
+          onClick={() => view.hideTrack(trackId)}
+          className={classes.iconButton}
+          title="close this track"
+          color="secondary"
+        >
+          <CloseIcon fontSize="small" />
+        </IconButton>
+        <Typography
+          variant="body1"
+          component="span"
+          className={classes.trackName}
+        >
+          {trackName}
+        </Typography>
+        <IconButton
+          {...bindTrigger(popupState)}
+          className={classes.iconButton}
+          color="secondary"
+          data-testid="track_menu_icon"
+          disabled={!items.length}
+        >
+          <MoreVertIcon fontSize="small" />
+        </IconButton>
         <CascadingMenu
           {...bindPopover(popupState)}
           onMenuItemClick={(_: unknown, callback: Function) => callback()}
           menuItems={items}
           popupState={popupState}
         />
-      </>
+      </Paper>
     )
   },
 )

package/src/LinearGenomeView/components/TracksContainer.tsx

@@ -7,7 +7,7 @@ import normalizeWheel from 'normalize-wheel'
 import { LinearGenomeViewStateModel, SCALE_BAR_HEIGHT } from '..'
 import RubberBand from './RubberBand'
 import ScaleBar from './ScaleBar'
-import VerticalGuides from './VerticalGuides'
+import Gridlines from './Gridlines'
 import CenterLine from './CenterLine'
 
 const useStyles = makeStyles()({
@@ -168,7 +168,7 @@ function TracksContainer({
       onMouseUp={mouseUp}
       onMouseLeave={mouseLeave}
     >
-      <VerticalGuides model={model} />
+      {model.showGridlines ? <Gridlines model={model} /> : null}
       {model.showCenterLine ? <CenterLine model={model} /> : null}
 
       <RubberBand

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

@@ -90,7 +90,7 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
         class="tss-ig8oez-headerBar"
       >
         <button
-          class="MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButtonBase-root tss-19jxj46-toggleButton css-1d3f8j8-MuiButtonBase-root-MuiButton-root"
+          class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeMedium MuiButton-textSizeMedium tss-19jxj46-toggleButton css-1d3f8j8-MuiButtonBase-root-MuiButton-root"
           tabindex="0"
           title="Open track selector"
           type="button"
@@ -117,7 +117,7 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
           class="MuiFormGroup-root MuiFormGroup-row tss-4gub8h-headerForm css-qfz70r-MuiFormGroup-root"
         >
           <button
-            class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButtonBase-root tss-7ktir1-panButton css-1rwt2y5-MuiButtonBase-root-MuiButton-root"
+            class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium tss-7ktir1-panButton css-1rwt2y5-MuiButtonBase-root-MuiButton-root"
             tabindex="0"
             type="button"
           >
@@ -137,7 +137,7 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
             />
           </button>
           <button
-            class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButtonBase-root tss-7ktir1-panButton css-1rwt2y5-MuiButtonBase-root-MuiButton-root"
+            class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium tss-7ktir1-panButton css-1rwt2y5-MuiButtonBase-root-MuiButton-root"
             tabindex="0"
             type="button"
           >
@@ -166,7 +166,7 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
               style="margin: 7px; min-width: 175px;"
             >
               <div
-                class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-154xyx0-MuiInputBase-root-MuiOutlinedInput-root"
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-154xyx0-MuiInputBase-root-MuiOutlinedInput-root"
                 style="padding: 0px; height: 32px; background: rgba(255, 255, 255, 0.8);"
               >
                 <input
@@ -175,7 +175,7 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
                   aria-invalid="false"
                   autocapitalize="none"
                   autocomplete="off"
-                  class="MuiOutlinedInput-input MuiInputBase-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-nxo287-MuiInputBase-input-MuiOutlinedInput-input"
+                  class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-nxo287-MuiInputBase-input-MuiOutlinedInput-input"
                   id="refNameAutocomplete-lgv"
                   placeholder="Search for location"
                   role="combobox"
@@ -265,7 +265,7 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
             </svg>
           </button>
           <span
-            class="MuiSlider-colorPrimary MuiSlider-sizeSmall MuiSlider-root tss-1c03ro5-slider css-53tbrc-MuiSlider-root"
+            class="MuiSlider-root MuiSlider-colorPrimary MuiSlider-sizeSmall tss-1c03ro5-slider css-53tbrc-MuiSlider-root"
           >
             <span
               class="MuiSlider-rail css-14pt78w-MuiSlider-rail"
@@ -275,7 +275,7 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
               style="left: 0%; width: 0%;"
             />
             <span
-              class="MuiSlider-thumbColorPrimary MuiSlider-thumbSizeSmall MuiSlider-thumb css-14gf62f-MuiSlider-thumb"
+              class="MuiSlider-thumb MuiSlider-thumbColorPrimary MuiSlider-thumbSizeSmall css-14gf62f-MuiSlider-thumb"
               data-focusvisible="false"
               data-index="0"
               style="left: 0%;"
@@ -500,7 +500,6 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
       <div
         class="tss-1ql7uaq-trackRenderingContainer"
         data-testid="trackRenderingContainer-lgv-testConfig"
-        role="presentation"
         style="height: 100px;"
       >
         <div
@@ -656,7 +655,7 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
         class="tss-ig8oez-headerBar"
       >
         <button
-          class="MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButtonBase-root tss-19jxj46-toggleButton css-1d3f8j8-MuiButtonBase-root-MuiButton-root"
+          class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeMedium MuiButton-textSizeMedium tss-19jxj46-toggleButton css-1d3f8j8-MuiButtonBase-root-MuiButton-root"
           tabindex="0"
           title="Open track selector"
           type="button"
@@ -683,7 +682,7 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
           class="MuiFormGroup-root MuiFormGroup-row tss-4gub8h-headerForm css-qfz70r-MuiFormGroup-root"
         >
           <button
-            class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButtonBase-root tss-7ktir1-panButton css-1rwt2y5-MuiButtonBase-root-MuiButton-root"
+            class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium tss-7ktir1-panButton css-1rwt2y5-MuiButtonBase-root-MuiButton-root"
             tabindex="0"
             type="button"
           >
@@ -703,7 +702,7 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
             />
           </button>
           <button
-            class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButtonBase-root tss-7ktir1-panButton css-1rwt2y5-MuiButtonBase-root-MuiButton-root"
+            class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium tss-7ktir1-panButton css-1rwt2y5-MuiButtonBase-root-MuiButton-root"
             tabindex="0"
             type="button"
           >
@@ -732,7 +731,7 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
               style="margin: 7px; min-width: 175px;"
             >
               <div
-                class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-154xyx0-MuiInputBase-root-MuiOutlinedInput-root"
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-154xyx0-MuiInputBase-root-MuiOutlinedInput-root"
                 style="padding: 0px; height: 32px; background: rgba(255, 255, 255, 0.8);"
               >
                 <input
@@ -741,7 +740,7 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
                   aria-invalid="false"
                   autocapitalize="none"
                   autocomplete="off"
-                  class="MuiOutlinedInput-input MuiInputBase-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-nxo287-MuiInputBase-input-MuiOutlinedInput-input"
+                  class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-nxo287-MuiInputBase-input-MuiOutlinedInput-input"
                   id="refNameAutocomplete-lgv"
                   placeholder="Search for location"
                   role="combobox"
@@ -833,7 +832,7 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
             />
           </button>
           <span
-            class="MuiSlider-colorPrimary MuiSlider-sizeSmall MuiSlider-root tss-1c03ro5-slider css-53tbrc-MuiSlider-root"
+            class="MuiSlider-root MuiSlider-colorPrimary MuiSlider-sizeSmall tss-1c03ro5-slider css-53tbrc-MuiSlider-root"
           >
             <span
               class="MuiSlider-rail css-14pt78w-MuiSlider-rail"
@@ -843,7 +842,7 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
               style="left: 0%; width: 9.774680693120512%;"
             />
             <span
-              class="MuiSlider-thumbColorPrimary MuiSlider-thumbSizeSmall MuiSlider-thumb css-14gf62f-MuiSlider-thumb"
+              class="MuiSlider-thumb MuiSlider-thumbColorPrimary MuiSlider-thumbSizeSmall css-14gf62f-MuiSlider-thumb"
               data-focusvisible="false"
               data-index="0"
               style="left: 9.774680693120512%;"
@@ -1361,7 +1360,6 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
       <div
         class="tss-1ql7uaq-trackRenderingContainer"
         data-testid="trackRenderingContainer-lgv-testConfig"
-        role="presentation"
         style="height: 100px;"
       >
         <div
@@ -1498,7 +1496,6 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
       <div
         class="tss-1ql7uaq-trackRenderingContainer"
         data-testid="trackRenderingContainer-lgv-testConfig2"
-        role="presentation"
         style="height: 100px;"
       >
         <div

package/src/LinearGenomeView/index.test.ts

@@ -290,13 +290,13 @@ test('can navToMultiple', () => {
     { refName: 'ctgC', start: 0, end: 5000 },
   ])
   expect(model.offsetPx).toBe(199)
-  expect(model.bpPerPx).toBeCloseTo(25.126)
+  expect(model.bpPerPx).toBeCloseTo(25.125)
 
   model.navToMultiple([
     { refName: 'ctgA', start: 5000, end: 10000 },
     { refName: 'ctgC', start: 0, end: 5000 },
   ])
-  expect(model.offsetPx).toBe(2799)
+  expect(model.offsetPx).toBe(2793)
   expect(model.bpPerPx).toBeCloseTo(12.531)
 })
 
@@ -330,7 +330,7 @@ describe('Zoom to selected displayed regions', () => {
     // 'ctgA' 15000  bp+ 'ctgA' 10000 bp+ 'ctgB' 3000 bp = 28000 totalbp
     expect(model.totalBp).toEqual(28000)
 
-    model.zoomToDisplayedRegions(
+    model.moveTo(
       {
         start: 5000,
         index: 0,
@@ -354,32 +354,8 @@ describe('Zoom to selected displayed regions', () => {
     expect(model.bpPerPx).toBeCloseTo(31.408)
   })
 
-  it('can select if start and end object are swapped', () => {
-    // should be same results as above test
-    model.zoomToDisplayedRegions(
-      {
-        start: 0,
-        index: 2,
-        coord: 1,
-        end: 3000,
-        offset: 1,
-        refName: 'ctgB',
-      },
-      {
-        start: 5000,
-        index: 0,
-        end: 20000,
-        coord: 5001,
-        offset: 0,
-        refName: 'ctgA',
-      },
-    )
-    expect(model.offsetPx).toEqual(0)
-    expect(model.bpPerPx).toBeCloseTo(31.408)
-  })
-
   it('can select over one refSeq', () => {
-    model.zoomToDisplayedRegions(
+    model.moveTo(
       {
         start: 5000,
         index: 0,
@@ -404,7 +380,7 @@ describe('Zoom to selected displayed regions', () => {
   })
 
   it('can select one region with start or end outside of displayed region', () => {
-    model.zoomToDisplayedRegions(
+    model.moveTo(
       {
         start: 5000,
         index: 0,
@@ -423,7 +399,8 @@ describe('Zoom to selected displayed regions', () => {
       },
     )
     // offsetPx is still 0 since we are starting from the first coord
-    expect(model.offsetPx).toBe(0)
+    // needed Math.abs since it was giving negative-zero (-0)
+    expect(Math.abs(model.offsetPx)).toEqual(0)
     // endOffset 19000 - (-1) = 19001 /  800 = zoomTo(23.75)
     expect(model.bpPerPx).toBeCloseTo(23.75)
     expect(model.bpPerPx).toBeLessThan(largestBpPerPx)
@@ -434,7 +411,7 @@ describe('Zoom to selected displayed regions', () => {
     model.showAllRegions()
     expect(model.bpPerPx).toBeCloseTo(38.8888)
     // totalBp = 28000 / 1000 = 28 as maxBpPerPx
-    model.zoomToDisplayedRegions(
+    model.moveTo(
       {
         start: 5000,
         index: 0,
@@ -468,7 +445,7 @@ describe('Zoom to selected displayed regions', () => {
     // totalBp 15000 + 3000 + 35000 = 53000
     // then 53000 / (width*0.9) = 73.6111
     expect(model.bpPerPx).toBeCloseTo(73.61111)
-    model.zoomToDisplayedRegions(
+    model.moveTo(
       {
         start: 5000,
         coord: 15000,
@@ -533,7 +510,7 @@ test('can instantiate a model that >2 regions', () => {
     { refName: 'ctgB', index: 1, offset: 0, start: 0, end: 10000 },
     { refName: 'ctgC', index: 2, offset: 0, start: 0, end: 10000 },
   )
-  expect(model.offsetPx).toEqual(10000 / model.bpPerPx + 2)
+  expect(model.offsetPx).toEqual(10000 / model.bpPerPx)
   expect(model.displayedRegionsTotalPx).toEqual(30000 / model.bpPerPx)
   model.showAllRegions()
   expect(model.offsetPx).toEqual(-40)
@@ -659,7 +636,7 @@ test('can perform pxToBp on human genome things with ellided blocks (zoomed out)
 
   // chrX after an ellided block, this tests a specific coord but should just be
   // probably somewhat around here
-  expect(model.pxToBp(1228).coord).toBe(99349155)
+  expect(model.pxToBp(1228).coord).toBe(118604872)
   expect(model.pxToBp(1228).refName).toBe('X')
 
   // chrY_random at the end
@@ -688,7 +665,7 @@ test('can showAllRegionsInAssembly', async () => {
   ])
 })
 
-describe('Get Sequence for selected displayed regions', () => {
+describe('get sequence for selected displayed regions', () => {
   const { Session, LinearGenomeModel } = initialize()
   /* the start of all the results should be +1
   the sequence dialog then handles converting from 1-based closed to interbase
@@ -778,7 +755,7 @@ describe('Get Sequence for selected displayed regions', () => {
       model.rightOffset,
     )
 
-    expect(outOfBounds.length).toEqual(0)
+    expect(outOfBounds.length).toEqual(1)
   })
 
   it('selects multiple regions with a region in between', () => {
@@ -948,6 +925,7 @@ test('navToLocString with human assembly', () => {
     assemblyManager: {
       assemblies: {
         hg38: {
+          // @ts-ignore
           regions: hg38DisplayedRegions,
         },
       },