@apollo-annotation/jbrowse-plugin-apollo 0.3.6 → 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 Coord } from '../components'
-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: CanvasMouseEvent,
-  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,
@@ -125,13 +37,13 @@ export function mouseEventsModelIntermediateFactory(
         start: MousePosition
         current: MousePosition
         feature: AnnotationFeature
-        edge: 'min' | 'max'
+        edge: Edge
+        shrinkParent: boolean
       } | null,
       cursor: undefined as CSSProperties['cursor'] | undefined,
-      apolloHover: undefined as FeatureAndGlyphUnderMouse | undefined,
     }))
     .views((self) => ({
-      getMousePosition(event: CanvasMouseEvent): MousePosition {
+      getMousePosition(event: React.MouseEvent): MousePosition {
         const mousePosition = getMousePosition(event, self.lgv)
         const { bp, regionNumber, y } = mousePosition
         const row = Math.floor(y / self.apolloRowHeight)
@@ -169,7 +81,7 @@ export function mouseEventsModelIntermediateFactory(
         }
         return {
           ...mousePosition,
-          featureAndGlyphUnderMouse: { feature, topLevelFeature, glyph },
+          feature,
         }
       },
     }))
@@ -188,14 +100,15 @@ export function mouseEventsModelIntermediateFactory(
       },
     }))
     .actions((self) => ({
-      setApolloHover(n?: (typeof self)['apolloHover']) {
-        self.apolloHover = n
-      },
       setCursor(cursor?: CSSProperties['cursor']) {
         if (self.cursor !== cursor) {
           self.cursor = cursor
         }
       },
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      updateFilteredTranscripts(forms: string[]) {
+        return
+      },
     }))
     .actions(() => ({
       // onClick(event: CanvasMouseEvent) {
@@ -205,171 +118,53 @@ 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(contextCoord?: Coord): MenuItem[] {
-      const { apolloHover } = self
-      if (!(apolloHover && contextCoord)) {
+    contextMenuItems(event: React.MouseEvent<HTMLDivElement>): MenuItem[] {
+      const { hoveredFeature } = self
+      if (!hoveredFeature) {
         return []
       }
-      const { topLevelFeature } = apolloHover
+      const mousePosition = self.getMousePosition(event)
+      const { topLevelFeature } = hoveredFeature.feature
       const glyph = self.getGlyph(topLevelFeature)
-      return glyph.getContextMenuItems(self)
+      if (isMousePositionWithFeature(mousePosition)) {
+        return glyph.getContextMenuItems(self, mousePosition)
+      }
+      return []
     },
   }))
     .actions((self) => ({
       // 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: 'min' | 'max',
+        edge: Edge,
+        shrinkParent = false,
       ) {
         self.apolloDragging = {
           start: mousePosition,
           current: mousePosition,
           feature,
           edge,
+          shrinkParent,
         }
       },
       endDrag() {
         if (!self.apolloDragging) {
           throw new Error('endDrag() called with no current drag in progress')
         }
-        const { current, edge, feature, start } = self.apolloDragging
+        const { current, edge, feature, start, shrinkParent } =
+          self.apolloDragging
         // don't do anything if it was only dragged a tiny bit
         if (Math.abs(current.x - start.x) <= 4) {
           self.setDragging()
@@ -379,33 +174,35 @@ export function mouseEventsModelFactory(
         const { displayedRegions } = self.lgv
         const region = displayedRegions[start.regionNumber]
         const assembly = self.getAssemblyId(region.assemblyName)
+        const changes = getPropagatedLocationChanges(
+          feature,
+          current.bp,
+          edge,
+          shrinkParent,
+        )
 
-        let change: LocationEndChange | LocationStartChange
-        if (edge === 'max') {
-          const featureId = feature._id
-          const oldEnd = feature.max
-          const newEnd = current.bp
-          change = new LocationEndChange({
-            typeName: 'LocationEndChange',
-            changedIds: [featureId],
-            featureId,
-            oldEnd,
-            newEnd,
-            assembly,
-          })
-        } else {
-          const featureId = feature._id
-          const oldStart = feature.min
-          const newStart = current.bp
-          change = new LocationStartChange({
-            typeName: 'LocationStartChange',
-            changedIds: [featureId],
-            featureId,
-            oldStart,
-            newStart,
-            assembly,
-          })
-        }
+        const change: LocationEndChange | LocationStartChange =
+          edge === 'max'
+            ? new LocationEndChange({
+                typeName: 'LocationEndChange',
+                changedIds: changes.map((c) => c.featureId),
+                changes: changes.map((c) => ({
+                  featureId: c.featureId,
+                  oldEnd: c.oldLocation,
+                  newEnd: c.newLocation,
+                })),
+                assembly,
+              })
+            : new LocationStartChange({
+                typeName: 'LocationStartChange',
+                changedIds: changes.map((c) => c.featureId),
+                changes: changes.map((c) => ({
+                  featureId: c.featureId,
+                  oldStart: c.oldLocation,
+                  newStart: c.newLocation,
+                })),
+                assembly,
+              })
         void self.changeManager.submit(change)
         self.setDragging()
         self.setCursor()
@@ -414,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) {
@@ -429,38 +223,31 @@ 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()
         }
 
         if (self.apolloDragging) {
@@ -490,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)