@jbrowse/plugin-linear-genome-view 2.2.1 → 2.3.0

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<LinearGenomeView /> renders one track, one region 1`] = `
+exports[`renders one track, one region 1`] = `
 <div
   style="position: relative;"
 >
@@ -9,57 +9,57 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
       style="position: relative;"
     >
       <div
-        class="css-16hdnmo-rubberBandControl"
+        class="css-dznme2-rubberbandControl"
         role="presentation"
       >
         <div
-          class="css-1420449-scaleBar"
+          class="css-16vhz0m-scalebar"
         >
           <div
-            class="css-1i1w1rp-scaleBarVisibleRegion"
+            class="css-den3n5-scalebarVisibleRegion"
             style="width: 800px; left: 0px; background: rgba(66, 165, 245, 0.3); border-color: #42a5f5;"
           />
           <div
-            class="css-z1h6g4-scaleBarContig"
+            class="css-osn2dd-scalebarContig"
             style="width: 0px; left: 0px; background-color: rgb(153, 153, 153);"
           />
           <div>
             <p
-              class="MuiTypography-root MuiTypography-body1 css-6v00mp-MuiTypography-root-scaleBarRefName"
+              class="MuiTypography-root MuiTypography-body1 css-1hokke9-MuiTypography-root-scalebarRefName"
               style="left: 3px; color: rgb(153, 102, 0);"
             >
               ctgA
             </p>
             <div
-              class="css-1an6zsa-scaleBarContig-scaleBarContigForward-scaleBarBorder"
+              class="css-c4j89u-scalebarContig-scalebarContigForward-scalebarBorder"
               style="left: 0px; width: 800px; border-color: rgb(153, 102, 0);"
             >
               <p
-                class="MuiTypography-root MuiTypography-body2 css-23pkd3-MuiTypography-root-scaleBarLabel"
+                class="MuiTypography-root MuiTypography-body2 css-7mggk8-MuiTypography-root-scalebarLabel"
                 style="left: 160px; pointer-events: none; color: rgb(153, 102, 0);"
               >
                 20
               </p>
               <p
-                class="MuiTypography-root MuiTypography-body2 css-23pkd3-MuiTypography-root-scaleBarLabel"
+                class="MuiTypography-root MuiTypography-body2 css-7mggk8-MuiTypography-root-scalebarLabel"
                 style="left: 320px; pointer-events: none; color: rgb(153, 102, 0);"
               >
                 40
               </p>
               <p
-                class="MuiTypography-root MuiTypography-body2 css-23pkd3-MuiTypography-root-scaleBarLabel"
+                class="MuiTypography-root MuiTypography-body2 css-7mggk8-MuiTypography-root-scalebarLabel"
                 style="left: 480px; pointer-events: none; color: rgb(153, 102, 0);"
               >
                 60
               </p>
               <p
-                class="MuiTypography-root MuiTypography-body2 css-23pkd3-MuiTypography-root-scaleBarLabel"
+                class="MuiTypography-root MuiTypography-body2 css-7mggk8-MuiTypography-root-scalebarLabel"
                 style="left: 640px; pointer-events: none; color: rgb(153, 102, 0);"
               >
                 80
               </p>
               <p
-                class="MuiTypography-root MuiTypography-body2 css-23pkd3-MuiTypography-root-scaleBarLabel"
+                class="MuiTypography-root MuiTypography-body2 css-7mggk8-MuiTypography-root-scalebarLabel"
                 style="left: 800px; pointer-events: none; color: rgb(153, 102, 0);"
               >
                 100
@@ -67,7 +67,7 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
             </div>
           </div>
           <div
-            class="css-z1h6g4-scaleBarContig"
+            class="css-osn2dd-scalebarContig"
             style="width: 0px; left: 800px; background-color: rgb(153, 153, 153);"
           />
         </div>
@@ -381,20 +381,19 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
       </div>
     </div>
     <div
-      class="css-16hdnmo-rubberBandControl"
-      data-testid="rubberBand_controls"
-      role="presentation"
+      class="css-dznme2-rubberbandControl"
+      data-testid="rubberband_controls"
     >
       <div
-        class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded css-1gfu64w-MuiPaper-root-scaleBarContainer"
+        class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded css-1coqp07-MuiPaper-root-scalebarContainer"
         data-resizer="true"
         style="height: 17px; box-sizing: border-box;"
       >
         <div
-          class="css-17t6jej-scaleBarZoomContainer"
+          class="css-khofof-scalebarZoomContainer"
         >
           <div
-            class="css-1u2dss8-scaleBar"
+            class="css-y3821b-scalebar"
             style="left: -801px; width: 1700px; height: 17px; box-sizing: border-box;"
           >
             <div
@@ -512,7 +511,6 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
           >
             <div
               class="css-d6gpow-linearBlocks"
-              data-testid="Blockset"
               style="left: -800px;"
             >
               <div
@@ -545,7 +543,7 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
 </div>
 `;
 
-exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
+exports[`renders two tracks, two regions 1`] = `
 <div
   style="position: relative;"
 >
@@ -554,73 +552,73 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
       style="position: relative;"
     >
       <div
-        class="css-16hdnmo-rubberBandControl"
+        class="css-dznme2-rubberbandControl"
         role="presentation"
       >
         <div
-          class="css-1420449-scaleBar"
+          class="css-16vhz0m-scalebar"
         >
           <div
-            class="css-1i1w1rp-scaleBarVisibleRegion"
+            class="css-den3n5-scalebarVisibleRegion"
             style="width: 580px; left: 0px; background: rgba(66, 165, 245, 0.3); border-color: #42a5f5;"
           />
           <div
-            class="css-z1h6g4-scaleBarContig"
+            class="css-osn2dd-scalebarContig"
             style="width: 0px; left: 0px; background-color: rgb(153, 153, 153);"
           />
           <div>
             <p
-              class="MuiTypography-root MuiTypography-body1 css-6v00mp-MuiTypography-root-scaleBarRefName"
+              class="MuiTypography-root MuiTypography-body1 css-1hokke9-MuiTypography-root-scalebarRefName"
               style="left: 3px; color: rgb(153, 102, 0);"
             >
               ctgA
             </p>
             <div
-              class="css-1an6zsa-scaleBarContig-scaleBarContigForward-scaleBarBorder"
+              class="css-c4j89u-scalebarContig-scalebarContigForward-scalebarBorder"
               style="left: 0px; width: 72.72727272727273px; border-color: rgb(153, 102, 0);"
             />
           </div>
           <div
-            class="css-z1h6g4-scaleBarContig"
+            class="css-osn2dd-scalebarContig"
             style="width: 0px; left: 72.72727272727273px; background-color: rgb(153, 153, 153);"
           />
           <div>
             <p
-              class="MuiTypography-root MuiTypography-body1 css-6v00mp-MuiTypography-root-scaleBarRefName"
+              class="MuiTypography-root MuiTypography-body1 css-1hokke9-MuiTypography-root-scalebarRefName"
               style="left: 75.72727272727273px;"
             >
               ctgB
             </p>
             <div
-              class="css-1an6zsa-scaleBarContig-scaleBarContigForward-scaleBarBorder"
+              class="css-c4j89u-scalebarContig-scalebarContigForward-scalebarBorder"
               style="left: 72.72727272727273px; width: 727.2727272727273px;"
             >
               <p
-                class="MuiTypography-root MuiTypography-body2 css-23pkd3-MuiTypography-root-scaleBarLabel"
+                class="MuiTypography-root MuiTypography-body2 css-7mggk8-MuiTypography-root-scalebarLabel"
                 style="left: 145.0909090909091px; pointer-events: none;"
               >
                 1,200
               </p>
               <p
-                class="MuiTypography-root MuiTypography-body2 css-23pkd3-MuiTypography-root-scaleBarLabel"
+                class="MuiTypography-root MuiTypography-body2 css-7mggk8-MuiTypography-root-scalebarLabel"
                 style="left: 290.1818181818182px; pointer-events: none;"
               >
                 1,400
               </p>
               <p
-                class="MuiTypography-root MuiTypography-body2 css-23pkd3-MuiTypography-root-scaleBarLabel"
+                class="MuiTypography-root MuiTypography-body2 css-7mggk8-MuiTypography-root-scalebarLabel"
                 style="left: 435.27272727272725px; pointer-events: none;"
               >
                 1,600
               </p>
               <p
-                class="MuiTypography-root MuiTypography-body2 css-23pkd3-MuiTypography-root-scaleBarLabel"
+                class="MuiTypography-root MuiTypography-body2 css-7mggk8-MuiTypography-root-scalebarLabel"
                 style="left: 580.3636363636364px; pointer-events: none;"
               >
                 1,800
               </p>
               <p
-                class="MuiTypography-root MuiTypography-body2 css-23pkd3-MuiTypography-root-scaleBarLabel"
+                class="MuiTypography-root MuiTypography-body2 css-7mggk8-MuiTypography-root-scalebarLabel"
                 style="left: 725.4545454545454px; pointer-events: none;"
               >
                 2,000
@@ -628,7 +626,7 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
             </div>
           </div>
           <div
-            class="css-z1h6g4-scaleBarContig"
+            class="css-osn2dd-scalebarContig"
             style="width: 0px; left: 800px; background-color: rgb(153, 153, 153);"
           />
         </div>
@@ -1117,20 +1115,19 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
       </div>
     </div>
     <div
-      class="css-16hdnmo-rubberBandControl"
-      data-testid="rubberBand_controls"
-      role="presentation"
+      class="css-dznme2-rubberbandControl"
+      data-testid="rubberband_controls"
     >
       <div
-        class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded css-1gfu64w-MuiPaper-root-scaleBarContainer"
+        class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded css-1coqp07-MuiPaper-root-scalebarContainer"
         data-resizer="true"
         style="height: 17px; box-sizing: border-box;"
       >
         <div
-          class="css-17t6jej-scaleBarZoomContainer"
+          class="css-khofof-scalebarZoomContainer"
         >
           <div
-            class="css-1u2dss8-scaleBar"
+            class="css-y3821b-scalebar"
             style="left: -801px; width: 1702px; height: 17px; box-sizing: border-box;"
           >
             <div
@@ -1310,7 +1307,6 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
           >
             <div
               class="css-d6gpow-linearBlocks"
-              data-testid="Blockset"
               style="left: -800px;"
             >
               <div
@@ -1442,7 +1438,6 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
           >
             <div
               class="css-d6gpow-linearBlocks"
-              data-testid="Blockset"
               style="left: -800px;"
             >
               <div

package/src/LinearGenomeView/components/hooks.ts

@@ -0,0 +1,300 @@
+import React, { useRef, useEffect, useState } from 'react'
+import normalizeWheel from 'normalize-wheel'
+
+// locals
+import { LinearGenomeViewModel } from '..'
+import { getRelativeX } from './util'
+
+type LGV = LinearGenomeViewModel
+type Timer = ReturnType<typeof setTimeout>
+
+export function useSideScroll(model: LGV) {
+  const [mouseDragging, setMouseDragging] = useState(false)
+  // refs are to store these variables to avoid repeated rerenders associated
+  // with useState/setState
+  const scheduled = useRef(false)
+
+  const prevX = useRef<number>(0)
+
+  useEffect(() => {
+    let cleanup = () => {}
+
+    function globalMouseMove(event: MouseEvent) {
+      event.preventDefault()
+      const currX = event.clientX
+      const distance = currX - prevX.current
+      if (distance) {
+        // use rAF to make it so multiple event handlers aren't fired per-frame
+        // see https://calendar.perfplanet.com/2013/the-runtime-performance-checklist/
+        if (!scheduled.current) {
+          scheduled.current = true
+          window.requestAnimationFrame(() => {
+            model.horizontalScroll(-distance)
+            scheduled.current = false
+            prevX.current = event.clientX
+          })
+        }
+      }
+    }
+
+    function globalMouseUp() {
+      prevX.current = 0
+      if (mouseDragging) {
+        setMouseDragging(false)
+      }
+    }
+
+    if (mouseDragging) {
+      window.addEventListener('mousemove', globalMouseMove, true)
+      window.addEventListener('mouseup', globalMouseUp, true)
+      cleanup = () => {
+        window.removeEventListener('mousemove', globalMouseMove, true)
+        window.removeEventListener('mouseup', globalMouseUp, true)
+      }
+    }
+    return cleanup
+  }, [model, mouseDragging, prevX])
+
+  function mouseDown(event: React.MouseEvent) {
+    if (event.shiftKey) {
+      return
+    }
+    // check if clicking a draggable element or a resize handle
+    const target = event.target as HTMLElement
+    if (target.draggable || target.dataset.resizer) {
+      return
+    }
+
+    // otherwise do click and drag scroll
+    if (event.button === 0) {
+      prevX.current = event.clientX
+      setMouseDragging(true)
+    }
+  }
+
+  // this local mouseup is used in addition to the global because sometimes
+  // the global add/remove are not called in time, resulting in issue #533
+  function mouseUp(event: React.MouseEvent) {
+    event.preventDefault()
+    setMouseDragging(false)
+  }
+  return { mouseDown, mouseUp }
+}
+
+interface AnchorPosition {
+  offsetX: number
+  clientX: number
+  clientY: number
+}
+
+export function useRangeSelect(
+  ref: React.RefObject<HTMLDivElement>,
+  model: LGV,
+  shiftOnly?: boolean,
+) {
+  const [startX, setStartX] = useState<number>()
+  const [currentX, setCurrentX] = useState<number>()
+
+  // clientX and clientY used for anchorPosition for menu
+  // offsetX used for calculations about width of selection
+  const [anchorPosition, setAnchorPosition] = useState<AnchorPosition>()
+  const [guideX, setGuideX] = useState<number>()
+  const mouseDragging = startX !== undefined && anchorPosition === undefined
+
+  useEffect(() => {
+    function computeOffsets(offsetX: number) {
+      if (startX === undefined) {
+        return
+      }
+      const leftPx = Math.min(startX, offsetX)
+      const rightPx = Math.max(startX, offsetX)
+      return {
+        leftOffset: model.pxToBp(leftPx),
+        rightOffset: model.pxToBp(rightPx),
+      }
+    }
+
+    function globalMouseMove(event: MouseEvent) {
+      if (ref.current && mouseDragging) {
+        const relativeX = getRelativeX(event, ref.current)
+        setCurrentX(relativeX)
+      }
+    }
+
+    function globalMouseUp(event: MouseEvent) {
+      if (startX !== undefined && ref.current) {
+        const { clientX, clientY } = event
+        const offsetX = getRelativeX(event, ref.current)
+        // as stated above, store both clientX/Y and offsetX for different
+        // purposes
+        setAnchorPosition({
+          offsetX,
+          clientX,
+          clientY,
+        })
+        const args = computeOffsets(offsetX)
+        if (args) {
+          model.setOffsets(args.leftOffset, args.rightOffset)
+        }
+        setGuideX(undefined)
+      }
+    }
+    if (mouseDragging) {
+      window.addEventListener('mousemove', globalMouseMove)
+      window.addEventListener('mouseup', globalMouseUp)
+      return () => {
+        window.removeEventListener('mousemove', globalMouseMove)
+        window.removeEventListener('mouseup', globalMouseUp)
+      }
+    }
+    return () => {}
+  }, [startX, mouseDragging, anchorPosition, model, ref])
+
+  useEffect(() => {
+    if (
+      !mouseDragging &&
+      currentX !== undefined &&
+      startX !== undefined &&
+      Math.abs(currentX - startX) <= 3
+    ) {
+      handleClose()
+    }
+  }, [mouseDragging, currentX, startX])
+
+  function mouseDown(event: React.MouseEvent<HTMLDivElement>) {
+    if (shiftOnly && !event.shiftKey) {
+      return
+    }
+
+    event.preventDefault()
+    event.stopPropagation()
+    const relativeX = getRelativeX(event, ref.current)
+    setStartX(relativeX)
+    setCurrentX(relativeX)
+  }
+
+  function mouseMove(event: React.MouseEvent<HTMLDivElement>) {
+    if (shiftOnly) {
+      if (event.shiftKey) {
+        setGuideX(getRelativeX(event, ref.current))
+      } else {
+        setGuideX(undefined)
+      }
+    } else {
+      setGuideX(getRelativeX(event, ref.current))
+    }
+  }
+
+  function mouseOut() {
+    setGuideX(undefined)
+    model.setOffsets(undefined, undefined)
+  }
+
+  function handleClose() {
+    setAnchorPosition(undefined)
+    setStartX(undefined)
+    setCurrentX(undefined)
+  }
+
+  function handleMenuItemClick(_: unknown, callback: Function) {
+    callback()
+    handleClose()
+  }
+
+  const open = Boolean(anchorPosition)
+  if (startX === undefined) {
+    return {
+      open,
+      guideX,
+      mouseDown,
+      mouseMove,
+      mouseOut,
+      handleMenuItemClick,
+    }
+  } else {
+    const right = anchorPosition ? anchorPosition.offsetX : currentX || 0
+    const left = right < startX ? right : startX
+    const width = Math.abs(right - startX)
+    const leftBpOffset = model.pxToBp(left)
+    const rightBpOffset = model.pxToBp(left + width)
+    const numOfBpSelected = Math.ceil(width * model.bpPerPx)
+
+    return {
+      open,
+      rubberbandOn: true,
+      mouseDown,
+      mouseMove,
+      mouseOut,
+      handleClose,
+      handleMenuItemClick,
+      leftBpOffset,
+      rightBpOffset,
+      anchorPosition,
+      numOfBpSelected,
+      width,
+      left,
+    }
+  }
+}
+
+export function useWheelScroll(
+  ref: React.RefObject<HTMLDivElement>,
+  model: LGV,
+) {
+  const delta = useRef(0)
+  const timeout = useRef<Timer>()
+  const scheduled = useRef(false)
+  useEffect(() => {
+    const curr = ref.current
+
+    // if ctrl is held down, zoom in with y-scroll
+    // else scroll horizontally with x-scroll
+    function onWheel(origEvent: WheelEvent) {
+      const event = normalizeWheel(origEvent)
+      if (origEvent.ctrlKey === true) {
+        origEvent.preventDefault()
+        delta.current += event.pixelY / 500
+        model.setScaleFactor(
+          delta.current < 0 ? 1 - delta.current : 1 / (1 + delta.current),
+        )
+        if (timeout.current) {
+          clearTimeout(timeout.current)
+        }
+        timeout.current = setTimeout(() => {
+          model.setScaleFactor(1)
+          model.zoomTo(
+            delta.current > 0
+              ? model.bpPerPx * (1 + delta.current)
+              : model.bpPerPx / (1 - delta.current),
+          )
+          delta.current = 0
+        }, 300)
+      } else {
+        // this is needed to stop the event from triggering "back button
+        // action" on MacOSX etc.  but is a heuristic to avoid preventing the
+        // inner-track scroll behavior
+        if (Math.abs(event.pixelX) > Math.abs(2 * event.pixelY)) {
+          origEvent.preventDefault()
+        }
+        delta.current += event.pixelX
+        if (!scheduled.current) {
+          // use rAF to make it so multiple event handlers aren't fired per-frame
+          // see https://calendar.perfplanet.com/2013/the-runtime-performance-checklist/
+          scheduled.current = true
+          window.requestAnimationFrame(() => {
+            model.horizontalScroll(delta.current)
+            delta.current = 0
+            scheduled.current = false
+          })
+        }
+      }
+    }
+    if (curr) {
+      curr.addEventListener('wheel', onWheel)
+      return () => {
+        curr.removeEventListener('wheel', onWheel)
+      }
+    }
+    return () => {}
+  }, [model, ref])
+}

package/src/LinearGenomeView/components/util.ts

@@ -1,17 +1,8 @@
 import { Assembly } from '@jbrowse/core/assemblyManager/assembly'
 import { SearchType } from '@jbrowse/core/data_adapters/BaseAdapter'
-import BaseResult from '@jbrowse/core/TextSearch/BaseResults'
 import { SearchScope } from '@jbrowse/core/TextSearch/TextSearchManager'
-import { TextSearchManager } from '@jbrowse/core/util'
-
-export function dedupe(
-  results: BaseResult[] = [],
-  cb: (result: BaseResult) => string,
-) {
-  return results.filter(
-    (elt, idx, self) => idx === self.findIndex(t => cb(t) === cb(elt)),
-  )
-}
+import { dedupe, TextSearchManager } from '@jbrowse/core/util'
+import BaseResult from '@jbrowse/core/TextSearch/BaseResults'
 
 export async function fetchResults({
   queryString,
@@ -63,3 +54,9 @@ export function splitLast(str: string, split: string): [string, string] {
     return [before, after]
   }
 }
+
+export function getRelativeX<
+  T extends { clientX: number; target: EventTarget | null },
+>(event: T, element: HTMLElement | null) {
+  return event.clientX - (element?.getBoundingClientRect().left || 0)
+}

package/src/LinearGenomeView/index.test.ts

@@ -947,16 +947,16 @@ test('navToLocString with human assembly', async () => {
   view.setDisplayedRegions(hg38Regions.slice(0, 1))
   const w = view.width
 
-  view.navToLocString('2')
+  await view.navToLocString('2')
   await waitFor(() => expect(view.bpPerPx).toBe(hg38Regions[1].end / w))
 
-  view.navToLocString('chr3')
+  await view.navToLocString('chr3')
   await waitFor(() => expect(view.bpPerPx).toBe(hg38Regions[2].end / w))
 
-  view.navToLocString('chr3:1,000,000,000-1,100,000,000')
+  await view.navToLocString('chr3:1,000,000,000-1,100,000,000')
   await waitFor(() => expect(view.bpPerPx).toBe(0.02))
   await waitFor(() => expect(view.offsetPx).toBe(9914777550))
-  view.navToLocString('chr3:-1,100,000,000..-1,000,000,000')
+  await view.navToLocString('chr3:-1,100,000,000..-1,000,000,000')
 })
 
 test('multi region', async () => {
@@ -972,7 +972,7 @@ test('multi region', async () => {
   model.setWidth(800)
   model.setDisplayedRegions(volvoxDisplayedRegions.slice(0, 1))
 
-  model.navToLocString('ctgA ctgB')
+  await model.navToLocString('ctgA ctgB')
   await waitFor(() => expect(model.displayedRegions[0].refName).toBe('ctgA'))
   await waitFor(() => expect(model.displayedRegions[1].refName).toBe('ctgB'))
 })
@@ -990,8 +990,7 @@ test('space separated locstring', async () => {
   model.setWidth(800)
   model.setDisplayedRegions(volvoxDisplayedRegions.slice(0, 1))
 
-  model.navToLocString('ctgA 0 100')
-
+  await model.navToLocString('ctgA 0 100')
   await waitFor(() => expect(model.offsetPx).toBe(0))
   await waitFor(() => expect(model.bpPerPx).toBe(0.125))
 })

package/src/LinearGenomeView/index.ts

@@ -0,0 +1,18 @@
+import { lazy } from 'react'
+import PluginManager from '@jbrowse/core/PluginManager'
+import { ViewType } from '@jbrowse/core/pluggableElementTypes'
+import { stateModelFactory } from './model'
+
+export default (pluginManager: PluginManager) => {
+  pluginManager.addViewType(
+    () =>
+      new ViewType({
+        name: 'LinearGenomeView',
+        displayName: 'Linear genome view',
+        stateModel: stateModelFactory(pluginManager),
+        ReactComponent: lazy(() => import('./components/LinearGenomeView')),
+      }),
+  )
+}
+
+export * from './model'