@apollo-annotation/jbrowse-plugin-apollo 0.3.13 → 1.0.0

package/src/LinearApolloDisplay/stateModel/mouseEvents.ts

@@ -6,22 +6,52 @@ import {
 import type PluginManager from '@jbrowse/core/PluginManager'
 import type { AnyConfigurationSchemaType } from '@jbrowse/core/configuration'
 import type { MenuItem } from '@jbrowse/core/ui'
+import { doesIntersect2 } from '@jbrowse/core/util'
 import { type Instance, addDisposer } from '@jbrowse/mobx-state-tree'
+import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 import { autorun } from 'mobx'
 import type { CSSProperties } from 'react'
 
 import {
   type Edge,
-  type MousePosition,
-  type MousePositionWithFeature,
-  getMousePosition,
+  getContextMenuItemsForFeature,
   getPropagatedLocationChanges,
-  isMousePositionWithFeature,
+  isCDSFeature,
+  isExonFeature,
+  selectFeatureAndOpenWidget,
 } from '../../util'
+import { isMouseOnFeatureEdge } from '../glyphs/util'
 import type { CanvasMouseEvent } from '../types'
 
 import { renderingModelFactory } from './rendering'
 
+export interface MousePosition {
+  x: number
+  y: number
+  assemblyName: string
+  refName: string
+  bp: number
+  regionNumber: number
+}
+
+export 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,
+    assemblyName,
+    refName,
+  } = lgv.pxToBp(x)
+  return { x, y, assemblyName, refName, bp, regionNumber }
+}
+
 export function mouseEventsModelIntermediateFactory(
   pluginManager: PluginManager,
   configSchema: AnyConfigurationSchemaType,
@@ -44,45 +74,16 @@ export function mouseEventsModelIntermediateFactory(
     }))
     .views((self) => ({
       getMousePosition(event: React.MouseEvent): MousePosition {
-        const mousePosition = getMousePosition(event, self.lgv)
-        const { bp, regionNumber, y } = mousePosition
+        return getMousePosition(event, self.lgv)
+      },
+      getFeaturesAtMousePosition(mousePosition: MousePosition) {
+        const { bp, assemblyName, refName, y } = mousePosition
         const row = Math.floor(y / self.apolloRowHeight)
-        const featureLayout = self.featureLayouts[regionNumber]
-        const layoutRow = featureLayout.get(row)
-        if (!layoutRow) {
-          return mousePosition
-        }
-        const foundFeature = layoutRow.find((f) => {
-          const feature = self.getAnnotationFeatureById(f[1])
-          return feature && bp >= feature.min && bp <= feature.max
-        })
-        if (!foundFeature) {
-          return mousePosition
-        }
-        const [featureRow, topLevelFeatureId] = foundFeature
-        const topLevelFeature = self.getAnnotationFeatureById(topLevelFeatureId)
-        if (!topLevelFeature) {
-          return mousePosition
-        }
-        const glyph = self.getGlyph(topLevelFeature)
-        const { featureTypeOntology } =
-          self.session.apolloDataStore.ontologyManager
-        if (!featureTypeOntology) {
-          throw new Error('featureTypeOntology is undefined')
-        }
-        const feature = glyph.getFeatureFromLayout(
-          topLevelFeature,
-          bp,
-          featureRow,
-          featureTypeOntology,
-        )
-        if (!feature) {
-          return mousePosition
-        }
-        return {
-          ...mousePosition,
-          feature,
+        const featureLayout = self.layouts.get(assemblyName)?.get(refName)
+        if (!featureLayout) {
+          return []
         }
+        return self.getFeaturesAtPosition(assemblyName, refName, row, bp)
       },
     }))
     .actions((self) => ({
@@ -129,91 +130,116 @@ export function mouseEventsModelFactory(
 
   return LinearApolloDisplayMouseEvents.views((self) => ({
     contextMenuItems(event: React.MouseEvent<HTMLDivElement>): MenuItem[] {
-      const { hoveredFeature } = self
-      if (!hoveredFeature) {
-        return []
-      }
       const mousePosition = self.getMousePosition(event)
-      const { topLevelFeature } = hoveredFeature.feature
-      const glyph = self.getGlyph(topLevelFeature)
-      if (isMousePositionWithFeature(mousePosition)) {
-        return glyph.getContextMenuItems(self, mousePosition)
+      const features = self.getFeaturesAtMousePosition(mousePosition)
+      if (features.length === 1) {
+        return getContextMenuItemsForFeature(self, features[0])
       }
-      return []
+      const menuItems: MenuItem[] = []
+      for (const feature of features) {
+        const glyph = self.getGlyph(feature)
+        menuItems.push({
+          label: feature.type,
+          subMenu: [
+            ...getContextMenuItemsForFeature(self, feature),
+            // @ts-expect-error ts doesn't understand mst extension
+            ...glyph.getContextMenuItems(self, feature),
+          ],
+        })
+      }
+      return menuItems
     },
   }))
-    .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: MousePositionWithFeature,
-        feature: AnnotationFeature,
-        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, shrinkParent } =
-          self.apolloDragging
-        // don't do anything if it was only dragged a tiny bit
-        if (Math.abs(current.x - start.x) <= 4) {
+    .actions((self) => {
+      function cancelDragListener(event: KeyboardEvent) {
+        if (event.key === 'Escape') {
           self.setDragging()
-          self.setCursor()
-          return
         }
-        const { displayedRegions } = self.lgv
-        const region = displayedRegions[start.regionNumber]
-        const assembly = self.getAssemblyId(region.assemblyName)
-        const changes = getPropagatedLocationChanges(
-          feature,
-          current.bp,
-          edge,
-          shrinkParent,
-        )
+      }
+      return {
+        // 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: MousePosition,
+          feature: AnnotationFeature,
+          edge: Edge,
+          shrinkParent = false,
+        ) {
+          globalThis.addEventListener('keydown', cancelDragListener, true)
+          self.apolloDragging = {
+            start: mousePosition,
+            current: mousePosition,
+            feature,
+            edge,
+            shrinkParent,
+          }
+        },
+        endDrag() {
+          globalThis.removeEventListener('keydown', cancelDragListener, true)
+          if (!self.apolloDragging) {
+            throw new Error('endDrag() called with no current drag in progress')
+          }
+          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()
+            self.setCursor()
+            return
+          }
+          const { displayedRegions } = self.lgv
+          const region = displayedRegions[start.regionNumber]
+          const assembly = self.getAssemblyId(region.assemblyName)
+          const changes = getPropagatedLocationChanges(
+            feature,
+            current.bp,
+            edge,
+            shrinkParent,
+          )
 
-        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()
-      },
-    }))
+          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()
+        },
+      }
+    })
     .actions((self) => ({
       onMouseDown(event: CanvasMouseEvent) {
         const mousePosition = self.getMousePosition(event)
-        if (isMousePositionWithFeature(mousePosition)) {
-          const glyph = self.getGlyph(mousePosition.feature)
-          glyph.onMouseDown(self, mousePosition, event)
+        const features = self.getFeaturesAtMousePosition(mousePosition)
+        for (const feature of features.toReversed()) {
+          const glyph = self.getGlyph(feature)
+          if (glyph.isDraggable) {
+            // @ts-expect-error ts doesn't understand mst extension
+            const edge = isMouseOnFeatureEdge(mousePosition, feature, self)
+            if (edge) {
+              event.stopPropagation()
+              self.startDrag(mousePosition, feature, edge, true)
+              return
+            }
+          }
         }
       },
       onMouseMove(event: CanvasMouseEvent) {
@@ -223,36 +249,58 @@ export function mouseEventsModelFactory(
           self.continueDrag(mousePosition, event)
           return
         }
-        if (isMousePositionWithFeature(mousePosition)) {
-          const glyph = self.getGlyph(mousePosition.feature)
-          glyph.onMouseMove(self, mousePosition, event)
+        const features = self.getFeaturesAtMousePosition(mousePosition)
+        let topFeature = features.at(-1)
+        // TODO: can we get this special case for CDS to fit nicely in the glyph?
+        if (topFeature && isCDSFeature(topFeature, self.session)) {
+          const nextFeature = features.at(-2)
+          if (nextFeature && !isExonFeature(nextFeature, self.session)) {
+            topFeature = nextFeature
+          }
+        }
+        if (topFeature) {
+          self.setHoveredFeature({ feature: topFeature, bp: mousePosition.bp })
         } else {
           self.setHoveredFeature()
-          self.setCursor()
         }
+        for (const feature of features.toReversed()) {
+          const glyph = self.getGlyph(feature)
+          if (
+            glyph.isDraggable &&
+            // @ts-expect-error ts doesn't understand mst extension
+            isMouseOnFeatureEdge(mousePosition, feature, self)
+          ) {
+            self.setCursor('col-resize')
+            return
+          }
+        }
+        self.setCursor()
       },
-      onMouseLeave(event: CanvasMouseEvent) {
+      onMouseLeave(_event: CanvasMouseEvent) {
         self.setDragging()
         self.setHoveredFeature()
-
-        const mousePosition = self.getMousePosition(event)
-        if (isMousePositionWithFeature(mousePosition)) {
-          const glyph = self.getGlyph(mousePosition.feature)
-          glyph.onMouseLeave(self, mousePosition, event)
-        }
       },
       onMouseUp(event: CanvasMouseEvent) {
+        if (self.apolloDragging) {
+          self.endDrag()
+          return
+        }
         const mousePosition = self.getMousePosition(event)
-        if (isMousePositionWithFeature(mousePosition)) {
-          const glyph = self.getGlyph(mousePosition.feature)
-          glyph.onMouseUp(self, mousePosition, event)
+        const features = self.getFeaturesAtMousePosition(mousePosition)
+        let topFeature = features.at(-1)
+        // TODO: can we get this special case for CDS to fit nicely in the glyph?
+        if (topFeature && isCDSFeature(topFeature, self.session)) {
+          const nextFeature = features.at(-2)
+          if (nextFeature && !isExonFeature(nextFeature, self.session)) {
+            topFeature = nextFeature
+          }
+        }
+        if (topFeature) {
+          selectFeatureAndOpenWidget(self, topFeature)
+          self.setSelectedFeature(topFeature)
         } else {
           self.setSelectedFeature()
         }
-
-        if (self.apolloDragging) {
-          self.endDrag()
-        }
       },
     }))
     .actions((self) => ({
@@ -261,42 +309,88 @@ export function mouseEventsModelFactory(
           self,
           autorun(
             () => {
-              // This type is wrong in @jbrowse/core
-              // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-              if (!self.lgv.initialized || self.regionCannotBeRendered()) {
+              const { lgv, overlayCanvas } = self
+              if (
+                !lgv.initialized ||
+                // This type is wrong in @jbrowse/core
+                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                self.regionCannotBeRendered() ||
+                !overlayCanvas
+              ) {
                 return
               }
-              const ctx = self.overlayCanvas?.getContext('2d')
+              const { dynamicBlocks, offsetPx } = lgv
+              const ctx = overlayCanvas.getContext('2d')
               if (!ctx) {
                 return
               }
-              ctx.clearRect(
-                0,
-                0,
-                self.lgv.dynamicBlocks.totalWidthPx,
-                self.featuresHeight,
-              )
-
+              ctx.clearRect(0, 0, overlayCanvas.width, overlayCanvas.height)
               const { apolloDragging, hoveredFeature } = self
               if (!hoveredFeature) {
                 return
               }
-              const glyph = self.getGlyph(hoveredFeature.feature)
+              const { feature } = hoveredFeature
+              const glyph = self.getGlyph(feature)
+              const row = self.getRowForFeature(feature)
+              if (row === undefined) {
+                return
+              }
 
-              // draw mouseover hovers
-              glyph.drawHover(self, ctx)
+              for (const block of dynamicBlocks.contentBlocks) {
+                const blockLeftPx = block.offsetPx - offsetPx
+                ctx.save()
+                ctx.beginPath()
+                ctx.rect(blockLeftPx, 0, block.widthPx, overlayCanvas.height)
+                ctx.clip()
+                if (
+                  block.assemblyName === feature.assemblyId &&
+                  doesIntersect2(
+                    block.start,
+                    block.end,
+                    feature.min,
+                    feature.max,
+                  )
+                ) {
+                  // draw mouseover hovers
+                  glyph.drawOverlay(
+                    // @ts-expect-error ts doesn't understand mst extension
+                    self,
+                    ctx,
+                    feature,
+                    row,
+                    block,
+                    'hover',
+                  )
+                }
+                if (apolloDragging) {
+                  const {
+                    current,
+                    start,
+                    feature: dragFeature,
+                  } = apolloDragging
+                  const dragMin = Math.min(current.bp, start.bp)
+                  const dragMax = Math.max(current.bp, start.bp)
+                  if (
+                    doesIntersect2(block.start, block.end, dragMin, dragMax)
+                  ) {
+                    const dragGlyph = self.getGlyph(dragFeature)
+                    const row = self.getRowForFeature(dragFeature)
 
-              // draw tooltip on hover
-              glyph.drawTooltip(self, ctx)
+                    if (row !== undefined) {
+                      // draw dragging previews
+                      dragGlyph.drawDragPreview(
+                        // @ts-expect-error ts doesn't understand mst extension
+                        self,
+                        ctx,
+                        dragFeature,
+                        row,
+                        block,
+                      )
+                    }
+                  }
+                }
 
-              // dragging previews
-              if (apolloDragging) {
-                // NOTE: the glyph where the drag started is responsible for drawing the preview.
-                // it can call methods in other glyphs to help with this though.
-                const glyph = self.getGlyph(
-                  apolloDragging.feature.topLevelFeature,
-                )
-                glyph.drawDragPreview(self, ctx)
+                ctx.restore()
               }
             },
             { name: 'LinearApolloDisplayRenderMouseoverAndDrag' },

package/src/LinearApolloDisplay/stateModel/rendering.ts

@@ -24,7 +24,6 @@ export function renderingModelFactory(
       apolloRowHeight: 20,
       detailsMinHeight: 200,
       detailsHeight: 200,
-      lastRowTooltipBufferHeight: 40,
       isShown: true,
       filteredTranscripts: types.array(types.string),
     })
@@ -35,11 +34,51 @@ export function renderingModelFactory(
       theme: createTheme(),
     }))
     .views((self) => ({
-      get featuresHeight() {
-        return (
-          (self.highestRow + 1) * self.apolloRowHeight +
-          self.lastRowTooltipBufferHeight
-        )
+      featuresHeight(assemblyName: string) {
+        return (self.highestRow(assemblyName) + 1) * self.apolloRowHeight
+      },
+      get canvasPatterns(): Record<
+        'forward' | 'backward',
+        CanvasPattern | null
+      > {
+        const patterns: Record<'forward' | 'backward', CanvasPattern | null> = {
+          forward: null,
+          backward: null,
+        }
+        const canvas = document.createElement('canvas')
+        const ctx = canvas?.getContext('2d')
+        if (!ctx) {
+          return patterns
+        }
+        const canvasSize = 10
+        canvas.width = canvas.height = canvasSize
+        const { theme } = self
+        const stripeColor1 =
+          theme.palette.mode === 'light' ? 'rgba(0,0,0,0)' : 'rgba(0,0,0,0.75)'
+        const stripeColor2 =
+          theme.palette.mode === 'light'
+            ? 'rgba(255,255,255,0.25)'
+            : 'rgba(0,0,0,0.50)'
+        const directions = ['forward', 'backward'] as const
+        for (const direction of directions) {
+          const gradient =
+            direction === 'forward'
+              ? ctx.createLinearGradient(0, canvasSize, canvasSize, 0)
+              : ctx.createLinearGradient(0, 0, canvasSize, canvasSize)
+          gradient.addColorStop(0, stripeColor1)
+          gradient.addColorStop(0.25, stripeColor1)
+          gradient.addColorStop(0.25, stripeColor2)
+          gradient.addColorStop(0.5, stripeColor2)
+          gradient.addColorStop(0.5, stripeColor1)
+          gradient.addColorStop(0.75, stripeColor1)
+          gradient.addColorStop(0.75, stripeColor2)
+          gradient.addColorStop(1, stripeColor2)
+          ctx.fillStyle = gradient
+          ctx.clearRect(0, 0, canvasSize, canvasSize)
+          ctx.fillRect(0, 0, canvasSize, canvasSize)
+          patterns[direction] = ctx.createPattern(canvas, 'repeat')
+        }
+        return patterns
       },
     }))
     .actions((self) => ({
@@ -84,7 +123,7 @@ export function renderingModelFactory(
                 0,
                 0,
                 self.lgv.dynamicBlocks.totalWidthPx,
-                self.featuresHeight,
+                self.featuresHeight(self.lgv.assemblyNames[0]),
               )
               for (const collaborator of (
                 self.session as unknown as ApolloSessionModel
@@ -132,38 +171,81 @@ export function renderingModelFactory(
           self,
           autorun(
             () => {
-              const { canvas, featureLayouts, featuresHeight, lgv } = self
-              if (!lgv.initialized || self.regionCannotBeRendered()) {
+              const { canvas, layouts, lgv } = self
+              if (
+                !lgv.initialized ||
+                self.regionCannotBeRendered() ||
+                !canvas
+              ) {
                 return
               }
-              const { displayedRegions, dynamicBlocks } = lgv
+              const { dynamicBlocks, offsetPx } = lgv
 
-              const ctx = canvas?.getContext('2d')
+              const ctx = canvas.getContext('2d')
               if (!ctx) {
                 return
               }
-              ctx.clearRect(0, 0, dynamicBlocks.totalWidthPx, featuresHeight)
-              for (const [idx, featureLayout] of featureLayouts.entries()) {
-                const displayedRegion = displayedRegions[idx]
-                for (const [row, featureLayoutRow] of featureLayout.entries()) {
-                  for (const [featureRow, featureId] of featureLayoutRow) {
-                    const feature = self.getAnnotationFeatureById(featureId)
-                    if (featureRow > 0 || !feature) {
+              const featureLayouts = layouts.get(lgv.assemblyNames[0])
+              if (!featureLayouts) {
+                return
+              }
+              ctx.clearRect(0, 0, canvas.width, canvas.height)
+              for (const block of dynamicBlocks.contentBlocks) {
+                const blockLeftPx = block.offsetPx - offsetPx
+                ctx.save()
+                ctx.beginPath()
+                ctx.rect(blockLeftPx, 0, block.widthPx, canvas.height)
+                ctx.clip()
+                const layout = featureLayouts.get(block.refName)
+                if (!layout) {
+                  return
+                }
+                const { byRow } = layout
+                for (const [row, layoutRow] of byRow.entries()) {
+                  for (const layoutFeature of layoutRow) {
+                    const { feature, rowInFeature } = layoutFeature
+                    if (
+                      !doesIntersect2(
+                        block.start,
+                        block.end,
+                        feature.min,
+                        feature.max,
+                      )
+                    ) {
                       continue
                     }
+                    self
+                      .getGlyph(feature)
+                      // @ts-expect-error ts doesn't understand mst extension
+                      .draw(self, ctx, feature, row, rowInFeature, block)
+                  }
+                }
+                for (const [row, layoutRow] of byRow.entries()) {
+                  for (const layoutFeature of layoutRow) {
+                    const { feature, rowInFeature } = layoutFeature
                     if (
                       !doesIntersect2(
-                        displayedRegion.start,
-                        displayedRegion.end,
+                        block.start,
+                        block.end,
                         feature.min,
                         feature.max,
                       )
                     ) {
                       continue
                     }
-                    self.getGlyph(feature).draw(ctx, feature, row, self, idx)
+                    self.getGlyph(feature).drawOverlay(
+                      // @ts-expect-error ts doesn't understand mst extension
+                      self,
+                      ctx,
+                      feature,
+                      row,
+                      block,
+                      'highlight',
+                      rowInFeature,
+                    )
                   }
                 }
+                ctx.restore()
               }
             },
             { name: 'LinearApolloDisplayRenderFeatures' },