Add genotype mouseover to normal mode

Author: cmdcolin

packages/core/ui/BaseTooltip.tsx

@@ -1,4 +1,5 @@
 import {
+  offset,
   useClientPoint,
   useFloating,
   useInteractions,
@@ -43,6 +44,7 @@ export default function BaseTooltip({
   const { refs, floatingStyles, context } = useFloating({
     placement,
     strategy: 'fixed',
+    middleware: [offset(5)],
   })
 
   const clientPoint = useClientPoint(context, clientPointCoords)

plugins/variants/src/MultiLinearVariantRenderer/MultiVariantRenderer.ts

@@ -15,17 +15,11 @@ export default class MultiVariantBaseRenderer extends FeatureRendererType {
 
     const { makeImageData } = await import('./makeImageData')
 
-    const rest = await renderToAbstractCanvas(
-      width,
-      height,
-      renderProps,
-      async ctx => {
-        await makeImageData(ctx, {
-          ...renderProps,
-          features,
-        })
-        return undefined
-      },
+    const rest = await renderToAbstractCanvas(width, height, renderProps, ctx =>
+      makeImageData(ctx, {
+        ...renderProps,
+        features,
+      }),
     )
 
     const results = await super.render({

plugins/variants/src/MultiLinearVariantRenderer/MultiVariantRendering.tsx

@@ -1,14 +1,13 @@
-import { useRef } from 'react'
+import { useMemo, useRef } from 'react'
 
 import { PrerenderedCanvas } from '@jbrowse/core/ui'
 import { observer } from 'mobx-react'
+import RBush from 'rbush'
 
 import type { Source } from '../types'
 import type { Feature } from '@jbrowse/core/util'
 import type { Region } from '@jbrowse/core/util/types'
 
-// locals
-
 const MultiVariantRendering = observer(function (props: {
   regions: Region[]
   features: Map<string, Feature>
@@ -18,16 +17,51 @@ const MultiVariantRendering = observer(function (props: {
   sources: Source[]
   scrollTop: number
   totalHeight: number
+  rbush: RBush<{ genotype: string }>
+  displayModel: any
   onMouseLeave?: (event: React.MouseEvent) => void
   onMouseMove?: (event: React.MouseEvent, arg?: Feature) => void
   onFeatureClick?: (event: React.MouseEvent, arg?: Feature) => void
 }) {
   const { totalHeight, scrollTop } = props
+  const { rbush, displayModel } = props
   const ref = useRef<HTMLDivElement>(null)
+  const rbush2 = useMemo(
+    () => new RBush<{ genotype: string }>().fromJSON(rbush),
+    [rbush],
+  )
+
+  function getFeatureUnderMouse(eventClientX: number, eventClientY: number) {
+    let offsetX = 0
+    let offsetY = 0
+    if (ref.current) {
+      const r = ref.current.getBoundingClientRect()
+      offsetX = eventClientX - r.left
+      offsetY = eventClientY - r.top
+    }
+    const ret = rbush2.search({
+      minX: offsetX,
+      maxX: offsetX + 3,
+      minY: offsetY,
+      maxY: offsetY + 3,
+    })
+    return ret[0]?.genotype
+  }
 
   return (
     <div
       ref={ref}
+      onMouseMove={e =>
+        displayModel.setHoveredGenotype?.(
+          getFeatureUnderMouse(e.clientX, e.clientY),
+        )
+      }
+      onMouseLeave={() => {
+        displayModel.setHoveredGenotype?.(undefined)
+      }}
+      onMouseOut={() => {
+        displayModel.setHoveredGenotype?.(undefined)
+      }}
       style={{
         overflow: 'visible',
         position: 'relative',

plugins/variants/src/MultiLinearVariantRenderer/makeImageData.ts

@@ -1,4 +1,5 @@
 import { featureSpanPx } from '@jbrowse/core/util'
+import RBush from 'rbush'
 
 import {
   getColorAlleleCount,
@@ -55,20 +56,27 @@ export async function makeImageData(
     features.values(),
     minorAlleleFrequencyFilter,
   )
+  const rbush = new RBush()
   for (const feature of mafs) {
     const [leftPx, rightPx] = featureSpanPx(feature, region, bpPerPx)
     const w = Math.max(Math.round(rightPx - leftPx), 2)
     const samp = feature.get('genotypes') as Record<string, string>
-    let t = -scrollTop
+    let y = -scrollTop
 
     const s = sources.length
     for (let j = 0; j < s; j++) {
       const { name, HP } = sources[j]!
       const genotype = samp[name]
       const x = Math.floor(leftPx)
-      const y = t
       const h = Math.max(rowHeight, 1)
       if (genotype) {
+        rbush.insert({
+          minX: x - f2,
+          maxX: x + w + f2,
+          minY: y - f2,
+          maxY: y + h + f2,
+          genotype,
+        })
         const isPhased = genotype.includes('|')
         if (renderingMode === 'phased') {
           if (isPhased) {
@@ -83,7 +91,10 @@ export async function makeImageData(
           drawColorAlleleCount(alleles, ctx, x, y, w, h)
         }
       }
-      t += rowHeight
+      y += rowHeight
     }
   }
+  return {
+    rbush: rbush.toJSON(),
+  }
 }

plugins/variants/src/shared/SetRowHeightDialog.tsx

@@ -22,7 +22,9 @@ export default function SetRowHeight({
       <DialogContent>
         <TextField
           value={value}
-          onChange={event => { setValue(event.target.value) }}
+          onChange={event => {
+            setValue(event.target.value)
+          }}
         />
       </DialogContent>
       <DialogActions>