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

package/src/LinearApolloDisplay/glyphs/GenericChildGlyph.ts

@@ -1,223 +1,113 @@
 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 MousePositionWithFeature,
-  containsSelectedFeature,
-  isMousePositionWithFeature,
-} from '../../util'
-import { getRelatedFeatures } from '../../util/annotationFeatureUtils'
+import { isSelectedFeature } from '../../util'
 import type { LinearApolloDisplay } from '../stateModel'
-import type { LinearApolloDisplayMouseEvents } from '../stateModel/mouseEvents'
-import type { LinearApolloDisplayRendering } from '../stateModel/rendering'
 
-import { boxGlyph, drawBox } from './BoxGlyph'
-import type { Glyph } from './Glyph'
+import { boxGlyph } from './BoxGlyph'
+import type { Glyph, OverlayType } from './Glyph'
+import { drawOverlayBox, getFeatureBox, strokeRectInner } from './util'
 
-function featuresForRow(feature: AnnotationFeature): AnnotationFeature[][] {
-  const features = [[feature]]
-  if (feature.children) {
-    for (const [, child] of feature.children) {
-      features.push(...featuresForRow(child))
-    }
-  }
-  return features
-}
-
-function getRowCount(feature: AnnotationFeature) {
-  return featuresForRow(feature).length
+function getRowCount(display: LinearApolloDisplay, feature: AnnotationFeature) {
+  return getLayout(display, feature).byRow.length
 }
 
 function draw(
+  display: LinearApolloDisplay,
   ctx: CanvasRenderingContext2D,
   feature: AnnotationFeature,
   row: number,
-  stateModel: LinearApolloDisplayRendering,
-  displayedRegionIndex: number,
+  rowInFeature: number,
+  block: ContentBlock,
 ) {
-  const { selectedFeature } = stateModel
-  for (let i = 0; i < getRowCount(feature); i++) {
-    drawRow(ctx, feature, row + i, row, stateModel, displayedRegionIndex)
+  if (rowInFeature > 0) {
+    return
   }
-  if (selectedFeature && containsSelectedFeature(feature, selectedFeature)) {
-    drawHighlight(stateModel, ctx, selectedFeature)
+  const { apolloRowHeight, selectedFeature, theme } = display
+  const [top, left, width] = getFeatureBox(display, feature, row, block)
+  const height = getRowCount(display, feature) * apolloRowHeight
+  if (width > 2) {
+    ctx.fillStyle = alpha(theme.palette.background.paper, 0.6)
+    ctx.fillRect(left, top, width, height)
   }
-}
+  strokeRectInner(ctx, left, top, width, height, theme.palette.text.primary)
+  boxGlyph.draw(display, ctx, feature, row, 0, block)
 
-function drawRow(
-  ctx: CanvasRenderingContext2D,
-  topLevelFeature: AnnotationFeature,
-  row: number,
-  topRow: number,
-  stateModel: LinearApolloDisplayRendering,
-  displayedRegionIndex: number,
-) {
-  const features = featuresForRow(topLevelFeature)[row - topRow]
-  for (const feature of features) {
-    drawFeature(ctx, feature, row, stateModel, displayedRegionIndex)
+  if (isSelectedFeature(feature, selectedFeature)) {
+    drawOverlay(display, ctx, feature, row, block, 'select')
   }
 }
 
-function drawFeature(
-  ctx: CanvasRenderingContext2D,
+function drawOverlay(
+  display: LinearApolloDisplay,
+  overlayCtx: CanvasRenderingContext2D,
   feature: AnnotationFeature,
   row: number,
-  stateModel: LinearApolloDisplayRendering,
-  displayedRegionIndex: number,
+  block: ContentBlock,
+  overlayType: OverlayType,
 ) {
-  const { apolloRowHeight: heightPx, lgv, 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 rowCount = getRowCount(feature)
-  const groupingColor = alpha(theme.palette.background.paper, 0.6)
-  if (rowCount > 1) {
-    // draw background that encapsulates all child features
-    const featureHeight = rowCount * heightPx
-    drawBox(ctx, startPx, top, widthPx, featureHeight, groupingColor)
-  }
-  boxGlyph.draw(ctx, feature, row, stateModel, displayedRegionIndex)
+  const { apolloRowHeight } = display
+  const [top, left, width] = getFeatureBox(display, feature, row, block)
+  const height = getRowCount(display, feature) * apolloRowHeight
+  drawOverlayBox(
+    display,
+    overlayCtx,
+    left,
+    top,
+    width,
+    height,
+    feature,
+    overlayType,
+  )
 }
 
-function drawHighlight(
-  stateModel: LinearApolloDisplayRendering,
-  ctx: CanvasRenderingContext2D,
-  feature: AnnotationFeature,
-  selected = false,
-) {
-  const { apolloRowHeight, lgv, theme } = stateModel
-
-  const position = stateModel.getFeatureLayoutPosition(feature)
-  if (!position) {
-    return
+function getLayout(display: LinearApolloDisplay, feature: AnnotationFeature) {
+  const layout = {
+    byFeature: new Map([[feature._id, 0]]),
+    byRow: [[{ feature, rowInFeature: 0 }]],
+    min: feature.min,
+    max: feature.max,
   }
-  const { featureRow, layoutIndex, layoutRow } = position
-  const { bpPerPx, displayedRegions, offsetPx } = lgv
-  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 + featureRow) * apolloRowHeight
-  const widthPx = length / bpPerPx
-  ctx.fillStyle = selected
-    ? theme.palette.action.disabled
-    : theme.palette.action.focus
-  ctx.fillRect(startPx, top, widthPx, apolloRowHeight * getRowCount(feature))
-}
-
-function drawHover(
-  stateModel: LinearApolloDisplay,
-  ctx: CanvasRenderingContext2D,
-) {
-  const { hoveredFeature } = stateModel
-  if (!hoveredFeature) {
-    return
+  const { children } = feature
+  if (!children) {
+    return layout
   }
-  drawHighlight(stateModel, ctx, hoveredFeature.feature)
-}
-
-function getFeatureFromLayout(
-  feature: AnnotationFeature,
-  bp: number,
-  row: number,
-) {
-  const layoutRow = featuresForRow(feature)[row]
-  return layoutRow.find((f) => bp >= f.min && bp <= f.max)
-}
-
-function getRowForFeature(
-  feature: AnnotationFeature,
-  childFeature: AnnotationFeature,
-) {
-  const rows = featuresForRow(feature)
-  for (const [idx, row] of rows.entries()) {
-    if (row.some((feature) => feature._id === childFeature._id)) {
-      return idx
+  // eslint-disable-next-line @typescript-eslint/unbound-method
+  const { getGlyph } = display
+  for (const [, child] of children) {
+    const glyph = getGlyph(child)
+    const childLayout = glyph.getLayout(display, child)
+    const startingRowIndex = layout.byRow.length
+    for (const [idx, row] of childLayout.byRow.entries()) {
+      layout.byRow.push([
+        { feature, rowInFeature: startingRowIndex + idx },
+        ...row,
+      ])
+    }
+    for (const entry of childLayout.byFeature.entries()) {
+      const [featureId, rowNumber] = entry
+      layout.byFeature.set(featureId, rowNumber + startingRowIndex)
     }
   }
-  return
+  return layout
 }
 
-function getContextMenuItems(
-  display: LinearApolloDisplayMouseEvents,
-  mousePosition: MousePositionWithFeature,
-): MenuItem[] {
-  const { hoveredFeature, session } = display
-  const menuItems: MenuItem[] = []
-  if (!hoveredFeature) {
-    return menuItems
-  }
-  const { featureTypeOntology } = session.apolloDataStore.ontologyManager
-  if (!featureTypeOntology) {
-    throw new Error('featureTypeOntology is undefined')
-  }
-  const sourceFeatureMenuItems = boxGlyph.getContextMenuItems(
-    display,
-    mousePosition,
-  )
-  menuItems.push({
-    label: hoveredFeature.feature.type,
-    subMenu: sourceFeatureMenuItems,
-  })
-  if (isMousePositionWithFeature(mousePosition)) {
-    const { bp, feature } = mousePosition
-    for (const relative of getRelatedFeatures(feature, bp)) {
-      if (relative._id === hoveredFeature.feature._id) {
-        continue
-      }
-      const contextMenuItemsForFeature = boxGlyph.getContextMenuItemsForFeature(
-        display,
-        relative,
-      )
-      menuItems.push({
-        label: relative.type,
-        subMenu: contextMenuItemsForFeature,
-      })
-    }
-  }
-  return menuItems
+function getContextMenuItems(): MenuItem[] {
+  return []
 }
 
 // False positive here, none of these functions use "this"
 /* eslint-disable @typescript-eslint/unbound-method */
-const {
-  drawDragPreview,
-  drawTooltip,
-  getContextMenuItemsForFeature,
-  onMouseDown,
-  onMouseLeave,
-  onMouseMove,
-  onMouseUp,
-} = boxGlyph
+const { drawDragPreview } = boxGlyph
 /* eslint-enable @typescript-eslint/unbound-method */
 
 export const genericChildGlyph: Glyph = {
   draw,
   drawDragPreview,
-  drawHover,
-  drawTooltip,
-  getContextMenuItemsForFeature,
+  drawOverlay,
   getContextMenuItems,
-  getFeatureFromLayout,
-  getRowCount,
-  getRowForFeature,
-  onMouseDown,
-  onMouseLeave,
-  onMouseMove,
-  onMouseUp,
+  getLayout,
+  isDraggable: true,
 }

package/src/LinearApolloDisplay/glyphs/Glyph.ts

@@ -1,86 +1,62 @@
 import type { AnnotationFeature } from '@apollo-annotation/mst'
 import type { MenuItem } from '@jbrowse/core/ui'
+import type { ContentBlock } from '@jbrowse/core/util/blockTypes'
 
-import type { OntologyRecord } from '../../OntologyManager'
-import type { MousePositionWithFeature } from '../../util'
-import type { LinearApolloDisplayMouseEvents } from '../stateModel/mouseEvents'
-import type { LinearApolloDisplayRendering } from '../stateModel/rendering'
-import type { CanvasMouseEvent } from '../types'
+import type { LinearApolloDisplay } from '../stateModel'
+
+interface LayoutFeature {
+  feature: AnnotationFeature
+  rowInFeature: number
+}
+export type LayoutRow = LayoutFeature[]
+
+export interface Layout {
+  byFeature: Map<string, number>
+  byRow: LayoutRow[]
+  min: number
+  max: number
+}
+
+export type OverlayType = 'hover' | 'select' | 'highlight'
 
 export interface Glyph {
-  /** @returns number of layout rows used by this glyph with this feature and zoom level */
-  getRowCount(
-    feature: AnnotationFeature,
-    featureTypeOntology: OntologyRecord,
-    bpPerPx: number,
-  ): number
   /** draw the feature's primary rendering on the canvas */
   draw(
+    display: LinearApolloDisplay,
     ctx: CanvasRenderingContext2D,
     feature: AnnotationFeature,
     row: number,
-    stateModel: LinearApolloDisplayRendering,
-    displayedRegionIndex: number,
-  ): void
-  /** @returns the feature or subfeature at the given bp and row number in this glyph's layout */
-  getFeatureFromLayout(
+    rowInFeature: number,
+    block: ContentBlock,
+  ): void
+  /**
+   * draw an overlay of the feature, used for when the feature is selected,
+   * hovered over, or highlighted
+   */
+  drawOverlay(
+    display: LinearApolloDisplay,
+    overlayCtx: CanvasRenderingContext2D,
     feature: AnnotationFeature,
-    bp: number,
     row: number,
-    featureTypeOntology: OntologyRecord,
-  ): AnnotationFeature | undefined
-  getRowForFeature(
-    feature: AnnotationFeature,
-    childFeature: AnnotationFeature,
-    featureTypeOntology: OntologyRecord,
-  ): number | undefined
-
-  drawHover(
-    display: LinearApolloDisplayMouseEvents,
-    overlayCtx: CanvasRenderingContext2D,
+    block: ContentBlock,
+    overlayType: OverlayType,
+    rowInFeature?: number,
   ): void
-
+  /** draw a preview of the result of a dragging action on the overlay canvas */
   drawDragPreview(
-    display: LinearApolloDisplayMouseEvents,
-    ctx: CanvasRenderingContext2D,
-  ): void
-
-  onMouseDown(
-    display: LinearApolloDisplayMouseEvents,
-    currentMousePosition: MousePositionWithFeature,
-    event: CanvasMouseEvent,
-  ): void
-
-  onMouseMove(
-    display: LinearApolloDisplayMouseEvents,
-    currentMousePosition: MousePositionWithFeature,
-    event: CanvasMouseEvent,
-  ): void
-
-  onMouseLeave(
-    display: LinearApolloDisplayMouseEvents,
-    currentMousePosition: MousePositionWithFeature,
-    event: CanvasMouseEvent,
-  ): void
-
-  onMouseUp(
-    display: LinearApolloDisplayMouseEvents,
-    currentMousePosition: MousePositionWithFeature,
-    event: CanvasMouseEvent,
-  ): void
-
-  drawTooltip(
-    display: LinearApolloDisplayMouseEvents,
-    context: CanvasRenderingContext2D,
+    display: LinearApolloDisplay,
+    overlayCtx: CanvasRenderingContext2D,
+    feature: AnnotationFeature,
+    row: number,
+    block: ContentBlock,
   ): void
 
-  getContextMenuItemsForFeature(
-    display: LinearApolloDisplayMouseEvents,
-    sourceFeature: AnnotationFeature,
-  ): MenuItem[]
+  getLayout(display: LinearApolloDisplay, feature: AnnotationFeature): Layout
 
   getContextMenuItems(
-    display: LinearApolloDisplayMouseEvents,
-    currentMousePosition: MousePositionWithFeature,
+    display: LinearApolloDisplay,
+    feature: AnnotationFeature,
   ): MenuItem[]
+
+  isDraggable: boolean
 }