Fix BoxGlyph drawTooltip to work with GeneGlyph

GMOD · Nov 4, 2024 · 1ec2b0a · 1ec2b0a
1 parent 76dec0b
commit 1ec2b0a
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 67 deletions.
diff --git a/packages/jbrowse-plugin-apollo/src/LinearApolloDisplay/glyphs/BoxGlyph.ts b/packages/jbrowse-plugin-apollo/src/LinearApolloDisplay/glyphs/BoxGlyph.ts
@@ -175,7 +175,7 @@ function drawTooltip(
   if (!position) {
     return
   }
-  const { layoutIndex, layoutRow } = position
+  const { featureRow, layoutIndex, layoutRow } = position
   const { bpPerPx, displayedRegions, offsetPx } = lgv
   const displayedRegion = displayedRegions[layoutIndex]
   const { refName, reversed } = displayedRegion
@@ -191,7 +191,7 @@ function drawTooltip(
       coord: reversed ? max : min,
       regionNumber: layoutIndex,
     })?.offsetPx ?? 0) - offsetPx
-  const top = layoutRow * apolloRowHeight
+  const top = (layoutRow + featureRow) * apolloRowHeight
   const widthPx = length / bpPerPx
 
   const featureType = `Type: ${feature.type}`

diff --git a/packages/jbrowse-plugin-apollo/src/LinearApolloDisplay/glyphs/GeneGlyph.ts b/packages/jbrowse-plugin-apollo/src/LinearApolloDisplay/glyphs/GeneGlyph.ts
@@ -523,73 +523,9 @@ function getDraggableFeatureInfo(
   return
 }
 
-function drawTooltip(
-  display: LinearApolloDisplayMouseEvents,
-  context: CanvasRenderingContext2D,
-): void {
-  const { apolloHover, apolloRowHeight, lgv, theme } = display
-  if (!apolloHover) {
-    return
-  }
-  const { feature, topLevelFeature } = apolloHover
-  const position = display.getFeatureLayoutPosition(feature)
-  if (!position) {
-    return
-  }
-  const { layoutIndex, layoutRow } = position
-  const rowIdx = getRowForFeature(topLevelFeature, feature)
-  const { bpPerPx, displayedRegions, offsetPx } = lgv
-  const displayedRegion = displayedRegions[layoutIndex]
-  const { refName, reversed } = displayedRegion
-
-  let location = 'Loc: '
-
-  const { length, max, min } = feature
-  location += `${min + 1}–${max}`
-
-  let startPx =
-    (lgv.bpToPx({
-      refName,
-      coord: reversed ? max : min,
-      regionNumber: layoutIndex,
-    })?.offsetPx ?? 0) - offsetPx
-  const top = (layoutRow + (rowIdx ?? 0)) * apolloRowHeight
-  const widthPx = length / bpPerPx
-
-  const featureType = `Type: ${feature.type}`
-  const { attributes } = feature
-  const featureName = attributes.get('gff_name')?.find((name) => name !== '')
-  const textWidth = [
-    context.measureText(featureType).width,
-    context.measureText(location).width,
-  ]
-  if (featureName) {
-    textWidth.push(context.measureText(`Name: ${featureName}`).width)
-  }
-  const maxWidth = Math.max(...textWidth)
-
-  startPx = startPx + widthPx + 5
-  context.fillStyle = alpha(theme?.palette.text.primary ?? 'rgb(1, 1, 1)', 0.7)
-  context.fillRect(startPx, top, maxWidth + 4, textWidth.length === 3 ? 45 : 35)
-  context.beginPath()
-  context.moveTo(startPx, top)
-  context.lineTo(startPx - 5, top + 5)
-  context.lineTo(startPx, top + 10)
-  context.fill()
-  context.fillStyle = theme?.palette.background.default ?? 'rgba(255, 255, 255)'
-  let textTop = top + 12
-  context.fillText(featureType, startPx + 2, textTop)
-  if (featureName) {
-    textTop = textTop + 12
-    context.fillText(`Name: ${featureName}`, startPx + 2, textTop)
-  }
-  textTop = textTop + 12
-  context.fillText(location, startPx + 2, textTop)
-}
-
 // False positive here, none of these functions use "this"
 /* eslint-disable @typescript-eslint/unbound-method */
-const { getContextMenuItems, onMouseLeave } = boxGlyph
+const { drawTooltip, getContextMenuItems, onMouseLeave } = boxGlyph
 /* eslint-enable @typescript-eslint/unbound-method */
 
 export const geneGlyph: Glyph = {