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

package/src/LinearApolloDisplay/glyphs/BoxGlyph.ts

@@ -1,231 +1,92 @@
 import type { AnnotationFeature } from '@apollo-annotation/mst'
 import type { MenuItem } from '@jbrowse/core/ui'
+import type { ContentBlock } from '@jbrowse/core/util/blockTypes'
 import { alpha } from '@mui/material'
 
-import {
-  type MousePosition,
-  type MousePositionWithFeature,
-  getContextMenuItemsForFeature,
-  isMousePositionWithFeature,
-  isSelectedFeature,
-} from '../../util'
+import { getContextMenuItemsForFeature, isSelectedFeature } from '../../util'
 import type { LinearApolloDisplay } from '../stateModel'
 import type { LinearApolloDisplayMouseEvents } from '../stateModel/mouseEvents'
-import type { LinearApolloDisplayRendering } from '../stateModel/rendering'
-import type { CanvasMouseEvent } from '../types'
 
-import type { Glyph } from './Glyph'
+import type { Glyph, OverlayType } from './Glyph'
+import { drawOverlayBox, getFeatureBox, strokeRectInner } from './util'
 
-function drawBoxOutline(
+function draw(
+  display: LinearApolloDisplay,
   ctx: CanvasRenderingContext2D,
-  x: number,
-  y: number,
-  width: number,
-  height: number,
-  color: string,
+  feature: AnnotationFeature,
+  row: number,
+  rowInFeature: number,
+  block: ContentBlock,
 ) {
-  drawBox(ctx, x, y, width, height, color)
-  if (width <= 2) {
-    return
+  const { selectedFeature, theme } = display
+  const [top, left, width, height] = getFeatureBox(display, feature, row, block)
+  if (width > 2) {
+    ctx.fillStyle = theme.palette.background.default
+    ctx.fillRect(left, top, width, height)
+  }
+  strokeRectInner(ctx, left, top, width, height, theme.palette.text.primary)
+  if (isSelectedFeature(feature, selectedFeature)) {
+    drawOverlay(display, ctx, feature, row, block, 'select')
   }
-  ctx.clearRect(x + 1, y + 1, width - 2, height - 2)
-}
-
-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)
 }
 
-function draw(
-  ctx: CanvasRenderingContext2D,
+function drawOverlay(
+  display: LinearApolloDisplay,
+  overlayCtx: CanvasRenderingContext2D,
   feature: AnnotationFeature,
   row: number,
-  stateModel: LinearApolloDisplayRendering,
-  displayedRegionIndex: number,
+  block: ContentBlock,
+  overlayType: OverlayType,
 ) {
-  const { apolloRowHeight: heightPx, lgv, selectedFeature, 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 widthPx = feature.length / bpPerPx
-  const startPx = reversed ? minX - widthPx : minX
-  const top = row * heightPx
-  const backgroundColor = theme.palette.background.default
-  const textColor = theme.palette.text.primary
-  const featureBox: [number, number, number, number] = [
-    startPx,
+  const [top, left, width, height] = getFeatureBox(display, feature, row, block)
+  drawOverlayBox(
+    display,
+    overlayCtx,
+    left,
     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
-  }
-
-  drawBoxFill(ctx, startPx, top, widthPx, heightPx, backgroundColor)
-  if (isSelectedFeature(feature, selectedFeature)) {
-    drawHighlight(stateModel, ctx, feature, true)
-  }
+    width,
+    height,
+    feature,
+    overlayType,
+  )
 }
 
 function drawDragPreview(
-  stateModel: LinearApolloDisplay,
+  display: LinearApolloDisplay,
   overlayCtx: CanvasRenderingContext2D,
+  feature: AnnotationFeature,
+  row: number,
+  block: ContentBlock,
 ) {
-  const { apolloDragging, apolloRowHeight, lgv, theme } = stateModel
-  const { bpPerPx, displayedRegions, offsetPx } = lgv
+  const { apolloDragging, theme } = display
   if (!apolloDragging) {
     return
   }
-  const { current, edge, feature, start } = apolloDragging
+  const { current, start } = apolloDragging
+  const min = Math.min(current.bp, start.bp)
+  const max = Math.max(current.bp, start.bp)
 
-  const row = Math.floor(start.y / apolloRowHeight)
-  const region = displayedRegions[start.regionNumber]
-  const rowCount = getRowCount(feature)
+  const [top, left, width, height] = getFeatureBox(
+    display,
+    { min, max },
+    row,
+    block,
+  )
 
-  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
-  overlayCtx.setLineDash([6])
-  overlayCtx.strokeRect(rectX, rectY, rectWidth, rectHeight)
   overlayCtx.fillStyle = alpha(theme.palette.info.main, 0.2)
-  overlayCtx.fillRect(rectX, rectY, rectWidth, rectHeight)
-}
-
-function drawHighlight(
-  stateModel: LinearApolloDisplayRendering,
-  ctx: CanvasRenderingContext2D,
-  feature: AnnotationFeature,
-  selected = false,
-) {
-  const { apolloRowHeight, lgv, theme } = stateModel
-  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 = selected
-    ? theme.palette.action.disabled
-    : theme.palette.action.focus
-  ctx.fillRect(startPx, top, widthPx, apolloRowHeight)
-}
+  overlayCtx.fillRect(left, top, width, height)
 
-function drawHover(
-  stateModel: LinearApolloDisplay,
-  ctx: CanvasRenderingContext2D,
-) {
-  const { hoveredFeature } = stateModel
-  if (!hoveredFeature) {
-    return
-  }
-  drawHighlight(stateModel, ctx, hoveredFeature.feature)
+  overlayCtx.setLineDash([6])
+  strokeRectInner(overlayCtx, left, top, width, height, theme.palette.info.main)
 }
 
-function drawTooltip(
-  display: LinearApolloDisplayMouseEvents,
-  context: CanvasRenderingContext2D,
-): void {
-  const { hoveredFeature, apolloRowHeight, lgv, theme } = display
-  if (!hoveredFeature) {
-    return
-  }
-  const { feature } = hoveredFeature
-  const position = display.getFeatureLayoutPosition(feature)
-  if (!position) {
-    return
-  }
-  const { featureRow, layoutIndex, layoutRow } = position
-  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 + featureRow) * 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)
+function getLayout(display: LinearApolloDisplay, feature: AnnotationFeature) {
+  return {
+    byFeature: new Map([[feature._id, 0]]),
+    byRow: [[{ feature, rowInFeature: 0 }]],
+    min: feature.min,
+    max: feature.max,
   }
-  const maxWidth = Math.max(...textWidth)
-
-  startPx = startPx + widthPx + 5
-  context.fillStyle = alpha(theme.palette.text.primary, 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
-  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)
-}
-
-export function drawBox(
-  ctx: CanvasRenderingContext2D,
-  x: number,
-  y: number,
-  width: number,
-  height: number,
-  color: string,
-) {
-  ctx.fillStyle = color
-  ctx.fillRect(x, y, width, height)
 }
 
 function getContextMenuItems(
@@ -238,114 +99,11 @@ function getContextMenuItems(
   return getContextMenuItemsForFeature(display, hoveredFeature.feature)
 }
 
-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: MousePositionWithFeature,
-  event: CanvasMouseEvent,
-) {
-  const { feature } = 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 edge = isMouseOnFeatureEdge(currentMousePosition, feature, stateModel)
-  if (edge) {
-    event.stopPropagation()
-    stateModel.startDrag(currentMousePosition, feature, edge)
-  }
-}
-
-function onMouseLeave(): void {
-  return
-}
-
-function onMouseMove(
-  stateModel: LinearApolloDisplay,
-  mousePosition: MousePosition,
-) {
-  if (isMousePositionWithFeature(mousePosition)) {
-    const { feature, bp } = mousePosition
-    stateModel.setHoveredFeature({ feature, bp })
-    const edge = isMouseOnFeatureEdge(mousePosition, feature, stateModel)
-    if (edge) {
-      stateModel.setCursor('col-resize')
-      return
-    }
-  }
-  stateModel.setCursor()
-}
-
-function onMouseUp(
-  stateModel: LinearApolloDisplay,
-  mousePosition: MousePosition,
-) {
-  if (stateModel.apolloDragging) {
-    return
-  }
-  const { feature } = mousePosition
-  if (!feature) {
-    return
-  }
-  stateModel.setSelectedFeature(feature)
-  stateModel.showFeatureDetailsWidget(feature)
-}
-
-/** @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
-    }
-    if (Math.abs(minPx - x) < 4) {
-      return 'min'
-    }
-    if (Math.abs(maxPx - x) < 4) {
-      return 'max'
-    }
-  }
-  return
-}
-
 export const boxGlyph: Glyph = {
   draw,
   drawDragPreview,
-  drawHover,
-  drawTooltip,
-  getContextMenuItemsForFeature,
+  drawOverlay,
   getContextMenuItems,
-  getFeatureFromLayout,
-  getRowCount,
-  getRowForFeature,
-  onMouseDown,
-  onMouseLeave,
-  onMouseMove,
-  onMouseUp,
+  getLayout,
+  isDraggable: true,
 }

package/src/LinearApolloDisplay/glyphs/CDSGlyph.ts

@@ -0,0 +1,145 @@
+import type {
+  AnnotationFeature,
+  TranscriptPartCoding,
+} from '@apollo-annotation/mst'
+import type { MenuItem } from '@jbrowse/core/ui'
+import { getFrame } from '@jbrowse/core/util'
+import type { ContentBlock } from '@jbrowse/core/util/blockTypes'
+
+import { isSelectedFeature } from '../../util'
+import type { LinearApolloDisplay } from '../stateModel'
+
+import { boxGlyph } from './BoxGlyph'
+import type { Glyph, OverlayType } from './Glyph'
+import { drawOverlayBox, getFeatureBox, strokeRectInner } from './util'
+
+function drawCDSLocation(
+  display: LinearApolloDisplay,
+  ctx: CanvasRenderingContext2D,
+  cdsLocation: TranscriptPartCoding,
+  strand: 1 | -1 | undefined,
+  row: number,
+  block: ContentBlock,
+) {
+  const { apolloRowHeight, canvasPatterns, theme } = display
+  const [top, left, width] = getFeatureBox(display, cdsLocation, row, block)
+  const halfHeight = Math.round(apolloRowHeight / 2)
+  if (width > 2) {
+    const frame = getFrame(
+      cdsLocation.min,
+      cdsLocation.max,
+      strand ?? 1,
+      cdsLocation.phase,
+    )
+    const frameColor = theme.palette.framesCDS.at(frame)?.main
+    ctx.fillStyle = frameColor ?? 'black'
+    ctx.fillRect(left, top, width, apolloRowHeight)
+    const forwardFill = canvasPatterns.forward
+    const backwardFill = canvasPatterns.backward
+    if (forwardFill && backwardFill && strand) {
+      const { reversed } = block
+      const reversal = reversed ? -1 : 1
+      const [topFill, bottomFill] =
+        strand * reversal === 1
+          ? [forwardFill, backwardFill]
+          : [backwardFill, forwardFill]
+      ctx.fillStyle = topFill
+      ctx.fillRect(left, top, width, halfHeight)
+      ctx.fillStyle = bottomFill
+      ctx.fillRect(left, top + halfHeight, width, halfHeight)
+    }
+  }
+  strokeRectInner(
+    ctx,
+    left,
+    top,
+    width,
+    apolloRowHeight,
+    theme.palette.text.primary,
+  )
+}
+
+function draw(
+  display: LinearApolloDisplay,
+  ctx: CanvasRenderingContext2D,
+  cds: AnnotationFeature,
+  row: number,
+  rowInFeature: number,
+  block: ContentBlock,
+) {
+  const transcript = cds.parent
+  if (!transcript) {
+    boxGlyph.draw(display, ctx, cds, row, 0, block)
+    return
+  }
+  const { cdsLocations } = transcript
+  const thisCDSLocations = cdsLocations.find((loc) => {
+    const min = loc.at(cds.strand === 1 ? 0 : -1)?.min
+    const max = loc.at(cds.strand === 1 ? -1 : 0)?.max
+    return cds.min === min && cds.max === max
+  })
+  if (!thisCDSLocations) {
+    return
+  }
+  for (const cdsLocation of thisCDSLocations) {
+    drawCDSLocation(display, ctx, cdsLocation, cds.strand, row, block)
+  }
+  const { selectedFeature } = display
+  if (isSelectedFeature(cds, selectedFeature)) {
+    drawOverlay(display, ctx, cds, row, block, 'select')
+  }
+}
+
+function drawOverlay(
+  display: LinearApolloDisplay,
+  overlayCtx: CanvasRenderingContext2D,
+  cds: AnnotationFeature,
+  row: number,
+  block: ContentBlock,
+  overlayType: OverlayType,
+) {
+  const { apolloRowHeight } = display
+  const [top, left, width] = getFeatureBox(display, cds, row, block)
+  const height = getRowCount() * apolloRowHeight
+  drawOverlayBox(
+    display,
+    overlayCtx,
+    left,
+    top,
+    width,
+    height,
+    cds,
+    overlayType,
+  )
+}
+
+function getLayout(display: LinearApolloDisplay, feature: AnnotationFeature) {
+  return {
+    byFeature: new Map([[feature._id, 0]]),
+    byRow: [[{ feature, rowInFeature: 0 }]],
+    min: feature.min,
+    max: feature.max,
+  }
+}
+
+function getRowCount() {
+  return 1
+}
+
+function getContextMenuItems(): MenuItem[] {
+  return []
+}
+
+// False positive here, none of these functions use "this"
+/* eslint-disable @typescript-eslint/unbound-method */
+const { drawDragPreview } = boxGlyph
+/* eslint-enable @typescript-eslint/unbound-method */
+
+export const cdsGlyph: Glyph = {
+  draw,
+  drawDragPreview,
+  drawOverlay,
+  getContextMenuItems,
+  getLayout,
+  isDraggable: true,
+}