@apollo-annotation/jbrowse-plugin-apollo 0.1.18 → 0.1.20

package/src/LinearApolloDisplay/glyphs/BoxGlyph.ts

@@ -1,427 +1,500 @@
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
-/* eslint-disable @typescript-eslint/unbound-method */
-import { AnnotationFeatureI } from '@apollo-annotation/mst'
-import {
-  LocationEndChange,
-  LocationStartChange,
-} from '@apollo-annotation/shared'
+import { AnnotationFeature } from '@apollo-annotation/mst'
 import { Theme, alpha } from '@mui/material'
+import { MenuItem } from '@jbrowse/core/ui'
+
+import { AbstractSessionModel, SessionWithWidgets } from '@jbrowse/core/util'
+
+import {
+  AddChildFeature,
+  CopyFeature,
+  DeleteFeature,
+  ModifyFeatureAttribute,
+} from '../../components'
 
 import { LinearApolloDisplay } from '../stateModel'
-import { MousePosition } from '../stateModel/mouseEvents'
+import {
+  isMousePositionWithFeatureAndGlyph,
+  LinearApolloDisplayMouseEvents,
+  MousePosition,
+  MousePositionWithFeatureAndGlyph,
+} from '../stateModel/mouseEvents'
 import { CanvasMouseEvent } from '../types'
 import { Glyph } from './Glyph'
+import { LinearApolloDisplayRendering } from '../stateModel/rendering'
 
-export class BoxGlyph extends Glyph {
-  getRowCount(_feature: AnnotationFeatureI) {
-    return 1
+function drawBoxOutline(
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  color: string,
+) {
+  drawBox(ctx, x, y, width, height, color)
+  if (width <= 2) {
+    return
   }
+  ctx.clearRect(x + 1, y + 1, width - 2, height - 2)
+}
 
-  protected getIsSelectedFeature(
-    feature: AnnotationFeatureI,
-    selectedFeature: AnnotationFeatureI | undefined,
-  ) {
-    return Boolean(selectedFeature && feature._id === selectedFeature._id)
-  }
+function drawBoxFill(
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  color: string,
+) {
+  drawBox(ctx, x + 1, y + 1, width - 2, height - 2, color)
+}
 
-  protected getBackgroundColor(theme: Theme | undefined, selected: boolean) {
-    return selected
-      ? theme?.palette.text.primary ?? 'black'
-      : theme?.palette.background.default ?? 'white'
-  }
+function drawBoxText(
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  width: number,
+  color: string,
+  text: string,
+) {
+  ctx.fillStyle = color
+  const textStart = Math.max(x + 1, 0)
+  const textWidth = x - 1 + width - textStart
+  ctx.fillText(text, textStart, y + 11, textWidth)
+}
 
-  protected getTextColor(theme: Theme | undefined, selected: boolean) {
-    return selected
-      ? theme?.palette.getContrastText(
-          this.getBackgroundColor(theme, selected),
-        ) ?? 'white'
-      : theme?.palette.text.primary ?? 'black'
+function draw(
+  ctx: CanvasRenderingContext2D,
+  feature: AnnotationFeature,
+  row: number,
+  stateModel: LinearApolloDisplayRendering,
+  displayedRegionIndex: number,
+) {
+  const { apolloRowHeight: heightPx, lgv, session, theme } = stateModel
+  const { bpPerPx, displayedRegions, offsetPx } = lgv
+  const displayedRegion = displayedRegions[displayedRegionIndex]
+  const minX =
+    (lgv.bpToPx({
+      refName: displayedRegion.refName,
+      coord: feature.min,
+      regionNumber: displayedRegionIndex,
+    })?.offsetPx ?? 0) - offsetPx
+  const { reversed } = displayedRegion
+  const { apolloSelectedFeature } = session
+  const widthPx = feature.length / bpPerPx
+  const startPx = reversed ? minX - widthPx : minX
+  const top = row * heightPx
+  const isSelected = isSelectedFeature(feature, apolloSelectedFeature)
+  const backgroundColor = getBackgroundColor(theme, isSelected)
+  const textColor = getTextColor(theme, isSelected)
+  const featureBox: [number, number, number, number] = [
+    startPx,
+    top,
+    widthPx,
+    heightPx,
+  ]
+  drawBoxOutline(ctx, ...featureBox, textColor)
+  if (widthPx <= 2) {
+    // Don't need to add details if the feature is too small to see them
+    return
   }
 
-  protected drawBox(
-    ctx: CanvasRenderingContext2D,
-    x: number,
-    y: number,
-    width: number,
-    height: number,
-    color: string,
-  ) {
-    ctx.fillStyle = color
-    ctx.fillRect(x, y, width, height)
-  }
+  drawBoxFill(ctx, startPx, top, widthPx, heightPx, backgroundColor)
+  drawBoxText(ctx, startPx, top, widthPx, textColor, feature.type)
+}
 
-  protected drawBoxOutline(
-    ctx: CanvasRenderingContext2D,
-    x: number,
-    y: number,
-    width: number,
-    height: number,
-    color: string,
-  ) {
-    this.drawBox(ctx, x, y, width, height, color)
-    ctx.clearRect(x + 1, y + 1, width - 2, height - 2)
+function drawDragPreview(
+  stateModel: LinearApolloDisplay,
+  overlayCtx: CanvasRenderingContext2D,
+) {
+  const { apolloDragging, apolloRowHeight, lgv, theme } = stateModel
+  const { bpPerPx, displayedRegions, offsetPx } = lgv
+  if (!apolloDragging) {
+    return
   }
+  const { current, edge, feature, start } = apolloDragging
+
+  const row = Math.floor(start.y / apolloRowHeight)
+  const region = displayedRegions[start.regionNumber]
+  const rowCount = getRowCount(feature)
+
+  const featureEdgeBp = region.reversed
+    ? region.end - feature[edge]
+    : feature[edge] - region.start
+  const featureEdgePx = featureEdgeBp / bpPerPx - offsetPx
+  const rectX = Math.min(current.x, featureEdgePx)
+  const rectY = row * apolloRowHeight
+  const rectWidth = Math.abs(current.x - featureEdgePx)
+  const rectHeight = apolloRowHeight * rowCount
+  overlayCtx.strokeStyle = theme?.palette.info.main ?? 'rgb(255,0,0)'
+  overlayCtx.setLineDash([6])
+  overlayCtx.strokeRect(rectX, rectY, rectWidth, rectHeight)
+  overlayCtx.fillStyle = alpha(theme?.palette.info.main ?? 'rgb(255,0,0)', 0.2)
+  overlayCtx.fillRect(rectX, rectY, rectWidth, rectHeight)
+}
 
-  protected drawBoxFill(
-    ctx: CanvasRenderingContext2D,
-    x: number,
-    y: number,
-    width: number,
-    height: number,
-    color: string,
-  ) {
-    this.drawBox(ctx, x + 1, y + 1, width - 2, height - 2, color)
+function drawHover(
+  stateModel: LinearApolloDisplay,
+  ctx: CanvasRenderingContext2D,
+) {
+  const { apolloHover, apolloRowHeight, lgv, theme } = stateModel
+  if (!apolloHover) {
+    return
+  }
+  const { feature } = apolloHover
+  const position = stateModel.getFeatureLayoutPosition(feature)
+  if (!position) {
+    return
   }
+  const { bpPerPx, displayedRegions, offsetPx } = lgv
+  const { layoutIndex, layoutRow } = position
+  const displayedRegion = displayedRegions[layoutIndex]
+  const { refName, reversed } = displayedRegion
+  const { length, max, min } = feature
+  const startPx =
+    (lgv.bpToPx({
+      refName,
+      coord: reversed ? max : min,
+      regionNumber: layoutIndex,
+    })?.offsetPx ?? 0) - offsetPx
+  const top = layoutRow * apolloRowHeight
+  const widthPx = length / bpPerPx
+  ctx.fillStyle = theme?.palette.action.focus ?? 'rgba(0,0,0,0.04)'
+  ctx.fillRect(startPx, top, widthPx, apolloRowHeight)
+}
 
-  protected drawBoxText(
-    ctx: CanvasRenderingContext2D,
-    x: number,
-    y: number,
-    width: number,
-    color: string,
-    text: string,
-  ) {
-    ctx.fillStyle = color
-    const textStart = Math.max(x + 1, 0)
-    const textWidth = x - 1 + width - textStart
-    ctx.fillText(text, textStart, y + 11, textWidth)
+function drawTooltip(
+  display: LinearApolloDisplayMouseEvents,
+  context: CanvasRenderingContext2D,
+): void {
+  const { apolloHover, apolloRowHeight, lgv, theme } = display
+  if (!apolloHover) {
+    return
   }
+  const { feature } = apolloHover
+  const position = display.getFeatureLayoutPosition(feature)
+  if (!position) {
+    return
+  }
+  const { layoutIndex, layoutRow } = position
+  const { bpPerPx, displayedRegions, offsetPx } = lgv
+  const displayedRegion = displayedRegions[layoutIndex]
+  const { refName, reversed } = displayedRegion
 
-  draw(
-    stateModel: LinearApolloDisplay,
-    ctx: CanvasRenderingContext2D,
-    feature: AnnotationFeatureI,
-    xOffset: number,
-    row: number,
-    reversed: boolean,
-  ) {
-    const { apolloRowHeight: heightPx, lgv, session, theme } = stateModel
-    const { bpPerPx } = lgv
-    const { apolloSelectedFeature } = session
-    const offsetPx = (feature.start - feature.min) / bpPerPx
-    const widthPx = feature.length / bpPerPx
-    const startPx = reversed ? xOffset - offsetPx - widthPx : xOffset + offsetPx
-    const top = row * heightPx
-    const isSelected = this.getIsSelectedFeature(feature, apolloSelectedFeature)
-    const backgroundColor = this.getBackgroundColor(theme, isSelected)
-    const textColor = this.getTextColor(theme, isSelected)
-    const groupingColor = isSelected
-      ? 'rgba(130,0,0,0.45)'
-      : 'rgba(255,0,0,0.25)'
-    const featureBox: [number, number, number, number] = [
-      startPx,
-      top,
-      widthPx,
-      heightPx,
-    ]
-    this.drawBoxOutline(ctx, ...featureBox, textColor)
-    if (widthPx <= 2) {
-      // Don't need to add details if the feature is too small to see them
-      return
-    }
+  let location = 'Loc: '
 
-    let featureLocations: { start: number; end: number; type: string }[] = [
-      feature,
-    ]
-    if (
-      feature.discontinuousLocations &&
-      feature.discontinuousLocations.length > 0
-    ) {
-      featureLocations = feature.discontinuousLocations.map((f) => ({
-        start: f.start,
-        end: f.end,
-        type: feature.type,
-      }))
-    }
-    if (featureLocations.length > 1) {
-      this.drawBoxFill(ctx, ...featureBox, groupingColor)
-      for (const location of featureLocations) {
-        const offsetPx = (location.start - feature.min) / bpPerPx
-        const widthPx = (location.end - location.start) / bpPerPx
-        const startPx = reversed
-          ? xOffset - offsetPx - widthPx
-          : xOffset + offsetPx
-        this.drawBoxOutline(ctx, startPx, top, widthPx, heightPx, textColor)
-      }
-    }
+  const { length, max, min } = feature
+  location += `${min + 1}–${max}`
 
-    for (const location of featureLocations) {
-      const offsetPx = (location.start - feature.min) / bpPerPx
-      const widthPx = (location.end - location.start) / bpPerPx
-      const startPx = reversed
-        ? xOffset - offsetPx - widthPx
-        : xOffset + offsetPx
-      this.drawBoxFill(ctx, startPx, top, widthPx, heightPx, backgroundColor)
-      this.drawBoxText(ctx, startPx, top, widthPx, textColor, location.type)
-    }
-  }
+  let startPx =
+    (lgv.bpToPx({
+      refName,
+      coord: reversed ? max : min,
+      regionNumber: layoutIndex,
+    })?.offsetPx ?? 0) - offsetPx
+  const top = layoutRow * apolloRowHeight
+  const widthPx = length / bpPerPx
 
-  getFeatureFromLayout(
-    feature: AnnotationFeatureI,
-    _bp: number,
-    _row: number,
-  ): AnnotationFeatureI | undefined {
-    return feature
+  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)
 
-  getRowForFeature(
-    _feature: AnnotationFeatureI,
-    _childFeature: AnnotationFeatureI,
-  ): number | undefined {
-    return 0
+  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)
+}
 
-  /** @returns undefined if mouse not on the edge of this feature, otherwise 'start' or 'end' depending on which edge */
-  isMouseOnFeatureEdge(
-    mousePosition: MousePosition,
-    feature: AnnotationFeatureI,
-    stateModel: LinearApolloDisplay,
-  ) {
-    if (!mousePosition) {
-      return
-    }
-    const { refName, regionNumber, x } = mousePosition
-    const { lgv } = stateModel
-    const { bpToPx, offsetPx } = lgv
-    const startPxInfo = bpToPx({ refName, coord: feature.start, regionNumber })
-    const endPxInfo = bpToPx({ refName, coord: feature.end, regionNumber })
-    if (startPxInfo !== undefined && endPxInfo !== undefined) {
-      const startPx = startPxInfo.offsetPx - offsetPx
-      const endPx = endPxInfo.offsetPx - offsetPx
-      if (Math.abs(endPx - startPx) < 8) {
-        return
-      }
-      if (Math.abs(startPx - x) < 4) {
-        return 'start'
-      }
-      if (Math.abs(endPx - x) < 4) {
-        return 'end'
-      }
-    }
-    return
-  }
+export function isSelectedFeature(
+  feature: AnnotationFeature,
+  selectedFeature: AnnotationFeature | undefined,
+) {
+  return Boolean(selectedFeature && feature._id === selectedFeature._id)
+}
 
-  drawHover(stateModel: LinearApolloDisplay, ctx: CanvasRenderingContext2D) {
-    const { apolloHover, apolloRowHeight, displayedRegions, lgv, theme } =
-      stateModel
-    if (!apolloHover) {
-      return
-    }
-    const { feature, mousePosition } = apolloHover
-    if (!feature || !mousePosition) {
-      return
-    }
-    const { bpPerPx, bpToPx, offsetPx } = lgv
-    const displayedRegion = displayedRegions[mousePosition.regionNumber]
-    const { refName, reversed } = displayedRegion
-    const { end, length, start } = feature
-    const { regionNumber, y } = mousePosition
-    const startPx =
-      (bpToPx({ refName, coord: reversed ? end : start, regionNumber })
-        ?.offsetPx ?? 0) - offsetPx
-    const row = Math.floor(y / apolloRowHeight)
-    const top = row * apolloRowHeight
-    const widthPx = length / bpPerPx
-    ctx.fillStyle = theme?.palette.action.focus ?? 'rgba(0,0,0,0.04)'
-    ctx.fillRect(startPx, top, widthPx, apolloRowHeight)
-  }
+function getBackgroundColor(theme: Theme | undefined, selected: boolean) {
+  return selected
+    ? theme?.palette.text.primary ?? 'black'
+    : theme?.palette.background.default ?? 'white'
+}
 
-  drawDragPreview(
-    stateModel: LinearApolloDisplay,
-    overlayCtx: CanvasRenderingContext2D,
-  ) {
-    const { apolloDragging, apolloRowHeight, displayedRegions, lgv, theme } =
-      stateModel
-    const { bpPerPx, offsetPx } = lgv
-    if (!apolloDragging) {
-      return
-    }
-    const {
-      feature,
-      glyph,
-      mousePosition: startingMousePosition,
-    } = apolloDragging.start
-    if (!feature) {
-      throw new Error('no feature for drag preview??')
-    }
-    if (glyph !== this) {
-      throw new Error('drawDragPreview() called on wrong glyph?')
-    }
-    const { mousePosition: currentMousePosition } = apolloDragging.current
-    const edge = this.isMouseOnFeatureEdge(
-      startingMousePosition,
-      feature,
-      stateModel,
-    )
-    if (!edge) {
-      return
-    }
+function getTextColor(theme: Theme | undefined, selected: boolean) {
+  return selected
+    ? theme?.palette.getContrastText(getBackgroundColor(theme, selected)) ??
+        'white'
+    : theme?.palette.text.primary ?? 'black'
+}
 
-    const row = Math.floor(startingMousePosition.y / apolloRowHeight)
-    const region = displayedRegions[startingMousePosition.regionNumber]
-    const rowCount = this.getRowCount(feature)
-
-    const featureEdgeBp = region.reversed
-      ? region.end - feature[edge]
-      : feature[edge] - region.start
-    const featureEdgePx = featureEdgeBp / bpPerPx - offsetPx
-
-    const rectX = Math.min(currentMousePosition.x, featureEdgePx)
-    const rectY = row * apolloRowHeight
-    const rectWidth = Math.abs(currentMousePosition.x - featureEdgePx)
-    const rectHeight = apolloRowHeight * rowCount
-
-    overlayCtx.strokeStyle = theme?.palette.info.main ?? 'rgb(255,0,0)'
-    overlayCtx.setLineDash([6])
-    overlayCtx.strokeRect(rectX, rectY, rectWidth, rectHeight)
-    overlayCtx.fillStyle = alpha(
-      theme?.palette.info.main ?? 'rgb(255,0,0)',
-      0.2,
-    )
-    overlayCtx.fillRect(rectX, rectY, rectWidth, rectHeight)
-  }
+export function drawBox(
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  color: string,
+) {
+  ctx.fillStyle = color
+  ctx.fillRect(x, y, width, height)
+}
 
-  onMouseMove(stateModel: LinearApolloDisplay, event: CanvasMouseEvent) {
-    const { feature, mousePosition } =
-      stateModel.getFeatureAndGlyphUnderMouse(event)
-    if (stateModel.apolloDragging) {
-      stateModel.setCursor('col-resize')
-      return
-    }
-    if (feature && mousePosition) {
-      const edge = this.isMouseOnFeatureEdge(mousePosition, feature, stateModel)
-      if (edge) {
-        stateModel.setCursor('col-resize')
-      } else {
-        stateModel.setCursor()
-      }
-    }
+function getContextMenuItems(
+  display: LinearApolloDisplayMouseEvents,
+): MenuItem[] {
+  const {
+    apolloHover,
+    apolloInternetAccount: internetAccount,
+    changeManager,
+    regions,
+    selectedFeature,
+    session,
+  } = display
+  const menuItems: MenuItem[] = []
+  if (!apolloHover) {
+    return menuItems
   }
+  const { feature: sourceFeature } = apolloHover
+  const role = internetAccount ? internetAccount.role : 'admin'
+  const admin = role === 'admin'
+  const readOnly = !(role && ['admin', 'user'].includes(role))
+  const [region] = regions
+  const sourceAssemblyId = display.getAssemblyId(region.assemblyName)
+  const currentAssemblyId = display.getAssemblyId(region.assemblyName)
+  menuItems.push(
+    {
+      label: 'Add child feature',
+      disabled: readOnly,
+      onClick: () => {
+        ;(session as unknown as AbstractSessionModel).queueDialog(
+          (doneCallback) => [
+            AddChildFeature,
+            {
+              session,
+              handleClose: () => {
+                doneCallback()
+              },
+              changeManager,
+              sourceFeature,
+              sourceAssemblyId,
+              internetAccount,
+            },
+          ],
+        )
+      },
+    },
+    {
+      label: 'Copy features and annotations',
+      disabled: readOnly,
+      onClick: () => {
+        ;(session as unknown as AbstractSessionModel).queueDialog(
+          (doneCallback) => [
+            CopyFeature,
+            {
+              session,
+              handleClose: () => {
+                doneCallback()
+              },
+              changeManager,
+              sourceFeature,
+              sourceAssemblyId: currentAssemblyId,
+            },
+          ],
+        )
+      },
+    },
+    {
+      label: 'Delete feature',
+      disabled: !admin,
+      onClick: () => {
+        ;(session as unknown as AbstractSessionModel).queueDialog(
+          (doneCallback) => [
+            DeleteFeature,
+            {
+              session,
+              handleClose: () => {
+                doneCallback()
+              },
+              changeManager,
+              sourceFeature,
+              sourceAssemblyId: currentAssemblyId,
+              selectedFeature,
+              setSelectedFeature: (feature?: AnnotationFeature) => {
+                display.setSelectedFeature(feature)
+              },
+            },
+          ],
+        )
+      },
+    },
+    {
+      label: 'Modify feature attribute',
+      disabled: readOnly,
+      onClick: () => {
+        ;(session as unknown as AbstractSessionModel).queueDialog(
+          (doneCallback) => [
+            ModifyFeatureAttribute,
+            {
+              session,
+              handleClose: () => {
+                doneCallback()
+              },
+              changeManager,
+              sourceFeature,
+              sourceAssemblyId: currentAssemblyId,
+            },
+          ],
+        )
+      },
+    },
+    {
+      label: 'Edit feature details',
+      onClick: () => {
+        const apolloFeatureWidget = (
+          session as unknown as SessionWithWidgets
+        ).addWidget(
+          'ApolloFeatureDetailsWidget',
+          'apolloFeatureDetailsWidget',
+          {
+            feature: sourceFeature,
+            assembly: currentAssemblyId,
+            refName: region.refName,
+          },
+        )
+        ;(session as unknown as SessionWithWidgets).showWidget(
+          apolloFeatureWidget,
+        )
+      },
+    },
+  )
+  return menuItems
+}
 
-  onMouseDown(stateModel: LinearApolloDisplay, event: CanvasMouseEvent) {
-    // swallow the mouseDown if we are on the edge of the feature
-    const { feature, mousePosition } =
-      stateModel.getFeatureAndGlyphUnderMouse(event)
-    if (feature && mousePosition) {
-      const edge = this.isMouseOnFeatureEdge(mousePosition, feature, stateModel)
-      if (edge) {
-        event.stopPropagation()
-      }
-    }
+function getFeatureFromLayout(
+  feature: AnnotationFeature,
+  _bp: number,
+  _row: number,
+): AnnotationFeature {
+  return feature
+}
+
+function getRowCount(_feature: AnnotationFeature) {
+  return 1
+}
+
+function getRowForFeature(
+  _feature: AnnotationFeature,
+  _childFeature: AnnotationFeature,
+): number | undefined {
+  return 0
+}
+
+function onMouseDown(
+  stateModel: LinearApolloDisplay,
+  currentMousePosition: MousePositionWithFeatureAndGlyph,
+  event: CanvasMouseEvent,
+) {
+  const { featureAndGlyphUnderMouse } = currentMousePosition
+  // swallow the mouseDown if we are on the edge of the feature so that we
+  // don't start dragging the view if we try to drag the feature edge
+  const { feature } = featureAndGlyphUnderMouse
+  const edge = isMouseOnFeatureEdge(currentMousePosition, feature, stateModel)
+  if (edge) {
+    event.stopPropagation()
+    stateModel.startDrag(currentMousePosition, feature, edge)
   }
+}
+
+function onMouseLeave(): void {
+  return
+}
 
-  onMouseUp(stateModel: LinearApolloDisplay, event: CanvasMouseEvent) {
-    if (stateModel.apolloDragging ?? event.button !== 0) {
+function onMouseMove(
+  stateModel: LinearApolloDisplay,
+  mousePosition: MousePosition,
+) {
+  if (isMousePositionWithFeatureAndGlyph(mousePosition)) {
+    const { featureAndGlyphUnderMouse } = mousePosition
+    stateModel.setApolloHover(featureAndGlyphUnderMouse)
+    const { feature } = featureAndGlyphUnderMouse
+    const edge = isMouseOnFeatureEdge(mousePosition, feature, stateModel)
+    if (edge) {
+      stateModel.setCursor('col-resize')
       return
     }
-    const { feature } = stateModel.getFeatureAndGlyphUnderMouse(event)
-    if (feature) {
-      stateModel.setSelectedFeature(feature)
-    }
   }
+  stateModel.setCursor()
+}
 
-  startDrag(stateModel: LinearApolloDisplay): boolean {
-    // only accept the drag if we are on the edge of the feature
-    const { feature, mousePosition } = stateModel.apolloDragging?.start ?? {}
-    if (feature && mousePosition) {
-      const edge = this.isMouseOnFeatureEdge(mousePosition, feature, stateModel)
-      if (edge) {
-        return true
-      }
-    }
-    return false
+function onMouseUp(
+  stateModel: LinearApolloDisplay,
+  mousePosition: MousePosition,
+) {
+  if (stateModel.apolloDragging) {
+    return
   }
-
-  continueDrag(
-    stateModel: LinearApolloDisplay,
-    currentMousePosition: MousePosition,
-  ) {
-    const { feature, glyph, mousePosition, topLevelFeature } =
-      stateModel.apolloDragging?.start ?? {}
-    if (!(currentMousePosition && mousePosition)) {
-      return
-    }
-    stateModel.setDragging({
-      start: {
-        feature,
-        topLevelFeature,
-        glyph,
-        mousePosition,
-      },
-      current: {
-        feature,
-        topLevelFeature,
-        glyph,
-        mousePosition: currentMousePosition,
-      },
-    })
+  const { featureAndGlyphUnderMouse } = mousePosition
+  if (featureAndGlyphUnderMouse?.feature) {
+    stateModel.setSelectedFeature(featureAndGlyphUnderMouse.feature)
   }
+}
 
-  executeDrag(stateModel: LinearApolloDisplay) {
-    const {
-      apolloDragging,
-      changeManager,
-      displayedRegions,
-      getAssemblyId,
-      setCursor,
-    } = stateModel
-    if (!apolloDragging) {
+/** @returns undefined if mouse not on the edge of this feature, otherwise 'start' or 'end' depending on which edge */
+function isMouseOnFeatureEdge(
+  mousePosition: MousePosition,
+  feature: AnnotationFeature,
+  stateModel: LinearApolloDisplay,
+) {
+  const { refName, regionNumber, x } = mousePosition
+  const { lgv } = stateModel
+  const { offsetPx } = lgv
+  const minPxInfo = lgv.bpToPx({ refName, coord: feature.min, regionNumber })
+  const maxPxInfo = lgv.bpToPx({ refName, coord: feature.max, regionNumber })
+  if (minPxInfo !== undefined && maxPxInfo !== undefined) {
+    const minPx = minPxInfo.offsetPx - offsetPx
+    const maxPx = maxPxInfo.offsetPx - offsetPx
+    if (Math.abs(maxPx - minPx) < 8) {
       return
     }
-    const {
-      feature,
-      glyph,
-      mousePosition: startingMousePosition,
-    } = apolloDragging.start
-    if (!feature) {
-      throw new Error('no feature for drag preview??')
-    }
-    if (glyph !== this) {
-      throw new Error('drawDragPreview() called on wrong glyph?')
+    if (Math.abs(minPx - x) < 4) {
+      return 'min'
     }
-    const edge = this.isMouseOnFeatureEdge(
-      startingMousePosition,
-      feature,
-      stateModel,
-    )
-    if (!edge) {
-      return
+    if (Math.abs(maxPx - x) < 4) {
+      return 'max'
     }
-
-    const { mousePosition: currentMousePosition } = apolloDragging.current
-    const region = displayedRegions[startingMousePosition.regionNumber]
-    const newBp = currentMousePosition.bp
-    const assembly = getAssemblyId(region.assemblyName)
-    let change: LocationEndChange | LocationStartChange
-    if (edge === 'end') {
-      const featureId = feature._id
-      const oldEnd = feature.end
-      const newEnd = newBp
-      change = new LocationEndChange({
-        typeName: 'LocationEndChange',
-        changedIds: [featureId],
-        featureId,
-        oldEnd,
-        newEnd,
-        assembly,
-      })
-    } else {
-      const featureId = feature._id
-      const oldStart = feature.start
-      const newStart = newBp
-      change = new LocationStartChange({
-        typeName: 'LocationStartChange',
-        changedIds: [featureId],
-        featureId,
-        oldStart,
-        newStart,
-        assembly,
-      })
-    }
-    if (!changeManager) {
-      throw new Error('no change manager')
-    }
-    void changeManager.submit(change)
-    setCursor()
   }
+  return
+}
+
+export const boxGlyph: Glyph = {
+  draw,
+  drawDragPreview,
+  drawHover,
+  drawTooltip,
+  getContextMenuItems,
+  getFeatureFromLayout,
+  getRowCount,
+  getRowForFeature,
+  onMouseDown,
+  onMouseLeave,
+  onMouseMove,
+  onMouseUp,
 }