@apollo-annotation/jbrowse-plugin-apollo 0.3.7 → 0.3.8

package/src/LinearApolloDisplay/stateModel/mouseEvents.ts

@@ -6,110 +6,22 @@ import {
 import type PluginManager from '@jbrowse/core/PluginManager'
 import { type AnyConfigurationSchemaType } from '@jbrowse/core/configuration/configurationSchema'
 import { type MenuItem } from '@jbrowse/core/ui'
-import { type Frame, getFrame } from '@jbrowse/core/util'
-import { type LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
-import { type Theme } from '@mui/material'
 import { autorun } from 'mobx'
 import { type Instance, addDisposer } from 'mobx-state-tree'
 import { type CSSProperties } from 'react'
 
-import { type Edge, getPropagatedLocationChanges } from '../../util'
-import { type Glyph } from '../glyphs/Glyph'
+import {
+  type Edge,
+  type MousePosition,
+  type MousePositionWithFeature,
+  getMousePosition,
+  getPropagatedLocationChanges,
+  isMousePositionWithFeature,
+} from '../../util'
 import { type CanvasMouseEvent } from '../types'
 
 import { renderingModelFactory } from './rendering'
 
-export interface FeatureAndGlyphUnderMouse {
-  feature: AnnotationFeature
-  topLevelFeature: AnnotationFeature
-  glyph: Glyph
-}
-
-/** extended information about the position of the mouse on the canvas, including the refName, bp, and displayedRegion number */
-export interface MousePosition {
-  x: number
-  y: number
-  refName: string
-  bp: number
-  regionNumber: number
-  featureAndGlyphUnderMouse?: FeatureAndGlyphUnderMouse
-}
-
-export type MousePositionWithFeatureAndGlyph = Required<MousePosition>
-
-export function isMousePositionWithFeatureAndGlyph(
-  mousePosition: MousePosition,
-): mousePosition is MousePositionWithFeatureAndGlyph {
-  return 'featureAndGlyphUnderMouse' in mousePosition
-}
-
-function getMousePosition(
-  event: React.MouseEvent,
-  lgv: LinearGenomeViewModel,
-): MousePosition {
-  const canvas = event.currentTarget
-  const { clientX, clientY } = event
-  const { left, top } = canvas.getBoundingClientRect()
-  const x = clientX - left
-  const y = clientY - top
-  const { coord: bp, index: regionNumber, refName } = lgv.pxToBp(x)
-  return { x, y, refName, bp, regionNumber }
-}
-
-function getTranslationRow(frame: Frame, bpPerPx: number) {
-  const offset = bpPerPx <= 1 ? 2 : 0
-  switch (frame) {
-    case 3: {
-      return 0
-    }
-    case 2: {
-      return 1
-    }
-    case 1: {
-      return 2
-    }
-    case -1: {
-      return 3 + offset
-    }
-    case -2: {
-      return 4 + offset
-    }
-    case -3: {
-      return 5 + offset
-    }
-  }
-}
-
-function getSeqRow(
-  strand: 1 | -1 | undefined,
-  bpPerPx: number,
-): number | undefined {
-  if (bpPerPx > 1 || strand === undefined) {
-    return
-  }
-  return strand === 1 ? 3 : 4
-}
-
-function highlightSeq(
-  seqTrackOverlayctx: CanvasRenderingContext2D,
-  theme: Theme | undefined,
-  startPx: number,
-  sequenceRowHeight: number,
-  row: number | undefined,
-  widthPx: number,
-) {
-  if (row !== undefined) {
-    seqTrackOverlayctx.fillStyle =
-      theme?.palette.action.focus ?? 'rgba(0,0,0,0.04)'
-    seqTrackOverlayctx.fillRect(
-      startPx,
-      sequenceRowHeight * row,
-      widthPx,
-      sequenceRowHeight,
-    )
-  }
-}
-
 export function mouseEventsModelIntermediateFactory(
   pluginManager: PluginManager,
   configSchema: AnyConfigurationSchemaType,
@@ -129,7 +41,6 @@ export function mouseEventsModelIntermediateFactory(
         shrinkParent: boolean
       } | null,
       cursor: undefined as CSSProperties['cursor'] | undefined,
-      apolloHover: undefined as FeatureAndGlyphUnderMouse | undefined,
     }))
     .views((self) => ({
       getMousePosition(event: React.MouseEvent): MousePosition {
@@ -170,7 +81,7 @@ export function mouseEventsModelIntermediateFactory(
         }
         return {
           ...mousePosition,
-          featureAndGlyphUnderMouse: { feature, topLevelFeature, glyph },
+          feature,
         }
       },
     }))
@@ -189,9 +100,6 @@ export function mouseEventsModelIntermediateFactory(
       },
     }))
     .actions((self) => ({
-      setApolloHover(n?: (typeof self)['apolloHover']) {
-        self.apolloHover = n
-      },
       setCursor(cursor?: CSSProperties['cursor']) {
         if (self.cursor !== cursor) {
           self.cursor = cursor
@@ -210,150 +118,25 @@ export function mouseEventsModelIntermediateFactory(
     }))
 }
 
-export function mouseEventsSeqHightlightModelFactory(
-  pluginManager: PluginManager,
-  configSchema: AnyConfigurationSchemaType,
-) {
-  const LinearApolloDisplayRendering = mouseEventsModelIntermediateFactory(
-    pluginManager,
-    configSchema,
-  )
-
-  return LinearApolloDisplayRendering.actions((self) => ({
-    afterAttach() {
-      addDisposer(
-        self,
-        autorun(
-          () => {
-            // This type is wrong in @jbrowse/core
-            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-            if (!self.lgv.initialized || self.regionCannotBeRendered()) {
-              return
-            }
-            const seqTrackOverlayctx =
-              self.seqTrackOverlayCanvas?.getContext('2d')
-            if (!seqTrackOverlayctx) {
-              return
-            }
-
-            seqTrackOverlayctx.clearRect(
-              0,
-              0,
-              self.lgv.dynamicBlocks.totalWidthPx,
-              self.lgv.bpPerPx <= 1 ? 125 : 95,
-            )
-
-            const {
-              apolloHover,
-              lgv,
-              regions,
-              sequenceRowHeight,
-              session,
-              theme,
-            } = self
-
-            if (!apolloHover) {
-              return
-            }
-            const { feature } = apolloHover
-
-            const { featureTypeOntology } =
-              session.apolloDataStore.ontologyManager
-            if (!featureTypeOntology) {
-              throw new Error('featureTypeOntology is undefined')
-            }
-            for (const [idx, region] of regions.entries()) {
-              if (featureTypeOntology.isTypeOf(feature.type, 'CDS')) {
-                const parentFeature = feature.parent
-                if (!parentFeature) {
-                  continue
-                }
-                const cdsLocs = parentFeature.cdsLocations.find(
-                  (loc) =>
-                    feature.min === loc.at(0)?.min &&
-                    feature.max === loc.at(-1)?.max,
-                )
-                if (!cdsLocs) {
-                  continue
-                }
-                for (const dl of cdsLocs) {
-                  const frame = getFrame(
-                    dl.min,
-                    dl.max,
-                    feature.strand ?? 1,
-                    dl.phase,
-                  )
-                  const row = getTranslationRow(frame, lgv.bpPerPx)
-                  const offset =
-                    (lgv.bpToPx({
-                      refName: region.refName,
-                      coord: dl.min,
-                      regionNumber: idx,
-                    })?.offsetPx ?? 0) - lgv.offsetPx
-                  const widthPx = (dl.max - dl.min) / lgv.bpPerPx
-                  const startPx = lgv.displayedRegions[idx].reversed
-                    ? offset - widthPx
-                    : offset
-
-                  highlightSeq(
-                    seqTrackOverlayctx,
-                    theme,
-                    startPx,
-                    sequenceRowHeight,
-                    row,
-                    widthPx,
-                  )
-                }
-              } else {
-                const row = getSeqRow(feature.strand, lgv.bpPerPx)
-                const offset =
-                  (lgv.bpToPx({
-                    refName: region.refName,
-                    coord: feature.min,
-                    regionNumber: idx,
-                  })?.offsetPx ?? 0) - lgv.offsetPx
-                const widthPx = feature.length / lgv.bpPerPx
-                const startPx = lgv.displayedRegions[idx].reversed
-                  ? offset - widthPx
-                  : offset
-
-                highlightSeq(
-                  seqTrackOverlayctx,
-                  theme,
-                  startPx,
-                  sequenceRowHeight,
-                  row,
-                  widthPx,
-                )
-              }
-            }
-          },
-          { name: 'LinearApolloDisplayRenderSeqHighlight' },
-        ),
-      )
-    },
-  }))
-}
-
 export function mouseEventsModelFactory(
   pluginManager: PluginManager,
   configSchema: AnyConfigurationSchemaType,
 ) {
-  const LinearApolloDisplayMouseEvents = mouseEventsSeqHightlightModelFactory(
+  const LinearApolloDisplayMouseEvents = mouseEventsModelIntermediateFactory(
     pluginManager,
     configSchema,
   )
 
   return LinearApolloDisplayMouseEvents.views((self) => ({
     contextMenuItems(event: React.MouseEvent<HTMLDivElement>): MenuItem[] {
-      const { apolloHover } = self
-      if (!apolloHover) {
+      const { hoveredFeature } = self
+      if (!hoveredFeature) {
         return []
       }
       const mousePosition = self.getMousePosition(event)
-      const { topLevelFeature } = apolloHover
+      const { topLevelFeature } = hoveredFeature.feature
       const glyph = self.getGlyph(topLevelFeature)
-      if (isMousePositionWithFeatureAndGlyph(mousePosition)) {
+      if (isMousePositionWithFeature(mousePosition)) {
         return glyph.getContextMenuItems(self, mousePosition)
       }
       return []
@@ -363,7 +146,7 @@ export function mouseEventsModelFactory(
       // explicitly pass in a feature in case it's not the same as the one in
       // mousePosition (e.g. if features are drawn overlapping).
       startDrag(
-        mousePosition: MousePositionWithFeatureAndGlyph,
+        mousePosition: MousePositionWithFeature,
         feature: AnnotationFeature,
         edge: Edge,
         shrinkParent = false,
@@ -428,12 +211,9 @@ export function mouseEventsModelFactory(
     .actions((self) => ({
       onMouseDown(event: CanvasMouseEvent) {
         const mousePosition = self.getMousePosition(event)
-        if (isMousePositionWithFeatureAndGlyph(mousePosition)) {
-          mousePosition.featureAndGlyphUnderMouse.glyph.onMouseDown(
-            self,
-            mousePosition,
-            event,
-          )
+        if (isMousePositionWithFeature(mousePosition)) {
+          const glyph = self.getGlyph(mousePosition.feature)
+          glyph.onMouseDown(self, mousePosition, event)
         }
       },
       onMouseMove(event: CanvasMouseEvent) {
@@ -443,38 +223,29 @@ export function mouseEventsModelFactory(
           self.continueDrag(mousePosition, event)
           return
         }
-        if (isMousePositionWithFeatureAndGlyph(mousePosition)) {
-          mousePosition.featureAndGlyphUnderMouse.glyph.onMouseMove(
-            self,
-            mousePosition,
-            event,
-          )
+        if (isMousePositionWithFeature(mousePosition)) {
+          const glyph = self.getGlyph(mousePosition.feature)
+          glyph.onMouseMove(self, mousePosition, event)
         } else {
-          self.setApolloHover()
+          self.setHoveredFeature()
           self.setCursor()
         }
       },
       onMouseLeave(event: CanvasMouseEvent) {
         self.setDragging()
-        self.setApolloHover()
+        self.setHoveredFeature()
 
         const mousePosition = self.getMousePosition(event)
-        if (isMousePositionWithFeatureAndGlyph(mousePosition)) {
-          mousePosition.featureAndGlyphUnderMouse.glyph.onMouseLeave(
-            self,
-            mousePosition,
-            event,
-          )
+        if (isMousePositionWithFeature(mousePosition)) {
+          const glyph = self.getGlyph(mousePosition.feature)
+          glyph.onMouseLeave(self, mousePosition, event)
         }
       },
       onMouseUp(event: CanvasMouseEvent) {
         const mousePosition = self.getMousePosition(event)
-        if (isMousePositionWithFeatureAndGlyph(mousePosition)) {
-          mousePosition.featureAndGlyphUnderMouse.glyph.onMouseUp(
-            self,
-            mousePosition,
-            event,
-          )
+        if (isMousePositionWithFeature(mousePosition)) {
+          const glyph = self.getGlyph(mousePosition.feature)
+          glyph.onMouseUp(self, mousePosition, event)
         } else {
           self.setSelectedFeature()
         }
@@ -506,11 +277,11 @@ export function mouseEventsModelFactory(
                 self.featuresHeight,
               )
 
-              const { apolloDragging, apolloHover } = self
-              if (!apolloHover) {
+              const { apolloDragging, hoveredFeature } = self
+              if (!hoveredFeature) {
                 return
               }
-              const { glyph } = apolloHover
+              const glyph = self.getGlyph(hoveredFeature.feature)
 
               // draw mouseover hovers
               glyph.drawHover(self, ctx)