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

package/src/LinearApolloDisplay/glyphs/CanonicalGeneGlyph.ts

@@ -1,1204 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-/* eslint-disable @typescript-eslint/no-unsafe-argument */
-/* eslint-disable @typescript-eslint/unbound-method */
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
-import { AnnotationFeatureI } from '@apollo-annotation/mst'
-import {
-  DiscontinuousLocationEndChange,
-  DiscontinuousLocationStartChange,
-  LocationEndChange,
-  LocationStartChange,
-} from '@apollo-annotation/shared'
-import { alpha } from '@mui/material'
-
-import { LinearApolloDisplay } from '../stateModel'
-import {
-  CDSDiscontinuousLocation,
-  MousePosition,
-} from '../stateModel/mouseEvents'
-import { frameColors, getFrame } from '../stateModel/rendering'
-import { CanvasMouseEvent } from '../types'
-import { Glyph } from './Glyph'
-
-type LocationChange =
-  | DiscontinuousLocationEndChange
-  | DiscontinuousLocationStartChange
-  | LocationEndChange
-  | LocationStartChange
-
-let forwardFill: CanvasPattern | null = null
-let backwardFill: CanvasPattern | null = null
-if ('document' in window) {
-  for (const direction of ['forward', 'backward']) {
-    const canvas = document.createElement('canvas')
-    const canvasSize = 10
-    canvas.width = canvas.height = canvasSize
-    const ctx = canvas.getContext('2d')
-    if (ctx) {
-      const stripeColor1 = 'rgba(0,0,0,0)'
-      const stripeColor2 = 'rgba(255,255,255,0.25)'
-      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.fillRect(0, 0, 10, 10)
-      if (direction === 'forward') {
-        forwardFill = ctx.createPattern(canvas, 'repeat')
-      } else {
-        backwardFill = ctx.createPattern(canvas, 'repeat')
-      }
-    }
-  }
-}
-
-interface AnnotationFeature {
-  parent?: AnnotationFeatureI
-  start?: number
-  end?: number
-  phase?: 0 | 1 | 2
-  annotationFeature: AnnotationFeatureI
-}
-
-interface CDSFeatures {
-  parent: AnnotationFeatureI
-  cds: AnnotationFeatureI
-}
-
-interface ExonCDSRelation {
-  exon: AnnotationFeatureI
-  cdsDL?: CDSDiscontinuousLocation
-}
-
-export class CanonicalGeneGlyph extends Glyph {
-  featuresForRow(feature: AnnotationFeatureI): AnnotationFeature[][] {
-    const cdsFeatures: CDSFeatures[] = []
-    for (const [, child] of feature.children ?? new Map()) {
-      for (const [, annotationFeature] of child.children ?? new Map()) {
-        if (annotationFeature.type === 'CDS') {
-          cdsFeatures.push({
-            parent: child,
-            cds: annotationFeature,
-          })
-        }
-      }
-    }
-
-    const features: AnnotationFeature[][] = []
-    for (const f of cdsFeatures) {
-      const childFeatures: AnnotationFeature[] = []
-      for (const [, cf] of f.parent.children ?? new Map()) {
-        if (cf.type === 'CDS' && cf._id !== f.cds._id) {
-          continue
-        }
-        if (cf.discontinuousLocations && cf.discontinuousLocations.length > 0) {
-          for (const dl of cf.discontinuousLocations) {
-            childFeatures.push({
-              annotationFeature: cf,
-              parent: f.parent,
-              start: dl.start,
-              end: dl.end,
-              phase: dl.phase,
-            })
-          }
-        } else {
-          childFeatures.push({
-            annotationFeature: cf,
-            parent: f.parent,
-          })
-        }
-      }
-      childFeatures.push({
-        annotationFeature: f.parent,
-      })
-      features.push(childFeatures)
-    }
-
-    return features
-  }
-
-  getRowCount(feature: AnnotationFeatureI, _bpPerPx?: number): number {
-    let cdsCount = 0
-    for (const [, child] of feature.children ?? new Map()) {
-      for (const [, grandchild] of child.children ?? new Map()) {
-        if (grandchild.type === 'CDS') {
-          cdsCount += 1
-        }
-      }
-    }
-    return cdsCount
-  }
-
-  draw(
-    stateModel: LinearApolloDisplay,
-    ctx: CanvasRenderingContext2D,
-    feature: AnnotationFeatureI,
-    xOffset: number,
-    row: number,
-    reversed: boolean,
-  ): void {
-    const { apolloRowHeight, lgv, session, theme } = stateModel
-    const { bpPerPx } = lgv
-    const rowHeight = apolloRowHeight
-    const utrHeight = Math.round(0.6 * rowHeight)
-    const cdsHeight = Math.round(0.9 * rowHeight)
-    const { _id, children, min, strand } = feature
-    const { apolloSelectedFeature } = session
-    let currentCDS = 0
-    for (const [, mrna] of children ?? new Map()) {
-      if (mrna.type !== 'mRNA') {
-        continue
-      }
-      for (const [, cds] of mrna.children ?? new Map()) {
-        if (cds.type !== 'CDS') {
-          continue
-        }
-        const offsetPx = (mrna.start - min) / bpPerPx
-        const widthPx = mrna.length / bpPerPx
-        const startPx = reversed
-          ? xOffset - offsetPx - widthPx
-          : xOffset + offsetPx
-        const height =
-          Math.round((currentCDS + 1 / 2) * rowHeight) + row * rowHeight
-        ctx.strokeStyle = theme?.palette.text.primary ?? 'black'
-        ctx.beginPath()
-        ctx.moveTo(startPx, height)
-        ctx.lineTo(startPx + widthPx, height)
-        ctx.stroke()
-        currentCDS += 1
-      }
-    }
-    currentCDS = 0
-    for (const [, mrna] of children ?? new Map()) {
-      if (mrna.type !== 'mRNA') {
-        continue
-      }
-      const cdsCount = [...(mrna.children ?? [])].filter(
-        ([, exonOrCDS]) => exonOrCDS.type === 'CDS',
-      ).length
-      for (let count = 0; count < cdsCount; count++) {
-        for (const [, exon] of mrna.children ?? new Map()) {
-          if (exon.type !== 'exon') {
-            continue
-          }
-          const offsetPx = (exon.start - min) / bpPerPx
-          const widthPx = exon.length / bpPerPx
-          const startPx = reversed
-            ? xOffset - offsetPx - widthPx
-            : xOffset + offsetPx
-          const top = (row + currentCDS) * rowHeight
-          const utrTop = top + (rowHeight - utrHeight) / 2
-          ctx.fillStyle = theme?.palette.text.primary ?? 'black'
-          ctx.fillRect(startPx, utrTop, widthPx, utrHeight)
-          if (widthPx > 2) {
-            ctx.clearRect(startPx + 1, utrTop + 1, widthPx - 2, utrHeight - 2)
-            ctx.fillStyle =
-              apolloSelectedFeature && exon._id === apolloSelectedFeature._id
-                ? 'rgb(0,0,0)'
-                : 'rgb(211,211,211)'
-            ctx.fillRect(startPx + 1, utrTop + 1, widthPx - 2, utrHeight - 2)
-            if (forwardFill && backwardFill && strand) {
-              const reversal = reversed ? -1 : 1
-              const [topFill, bottomFill] =
-                strand * reversal === 1
-                  ? [forwardFill, backwardFill]
-                  : [backwardFill, forwardFill]
-              ctx.fillStyle = topFill
-              ctx.fillRect(
-                startPx + 1,
-                utrTop + 1,
-                widthPx - 2,
-                (utrHeight - 2) / 2,
-              )
-              ctx.fillStyle = bottomFill
-              ctx.fillRect(
-                startPx + 1,
-                utrTop + 1 + (utrHeight - 2) / 2,
-                widthPx - 2,
-                (utrHeight - 2) / 2,
-              )
-            }
-          }
-        }
-        currentCDS += 1
-      }
-    }
-    currentCDS = 0
-    for (const [, mrna] of children ?? new Map()) {
-      if (mrna.type !== 'mRNA') {
-        continue
-      }
-      for (const [, cds] of mrna.children ?? new Map()) {
-        if (cds.type !== 'CDS') {
-          continue
-        }
-        if (cds.discontinuousLocations) {
-          for (const cdsLocation of cds.discontinuousLocations) {
-            const offsetPx = (cdsLocation.start - min) / bpPerPx
-            const widthPx = (cdsLocation.end - cdsLocation.start) / bpPerPx
-            const startPx = reversed
-              ? xOffset - offsetPx - widthPx
-              : xOffset + offsetPx
-            ctx.fillStyle = theme?.palette.text.primary ?? 'black'
-            const top = (row + currentCDS) * rowHeight
-            const cdsTop = top + (rowHeight - cdsHeight) / 2
-            ctx.fillRect(startPx, cdsTop, widthPx, cdsHeight)
-            if (widthPx > 2) {
-              ctx.clearRect(startPx + 1, cdsTop + 1, widthPx - 2, cdsHeight - 2)
-              const frame = getFrame(
-                cdsLocation.start,
-                cdsLocation.end,
-                cdsLocation.strand,
-                cdsLocation.phase,
-              )
-              const cdsColorCode = frameColors.at(frame) ?? 'rgb(171,71,188)'
-              ctx.fillStyle =
-                apolloSelectedFeature && cds._id === apolloSelectedFeature._id
-                  ? 'rgb(0,0,0)'
-                  : cdsColorCode
-              ctx.fillRect(startPx + 1, cdsTop + 1, widthPx - 2, cdsHeight - 2)
-              if (forwardFill && backwardFill && strand) {
-                const reversal = reversed ? -1 : 1
-                const [topFill, bottomFill] =
-                  strand * reversal === 1
-                    ? [forwardFill, backwardFill]
-                    : [backwardFill, forwardFill]
-                ctx.fillStyle = topFill
-                ctx.fillRect(
-                  startPx + 1,
-                  cdsTop + 1,
-                  widthPx - 2,
-                  (cdsHeight - 2) / 2,
-                )
-                ctx.fillStyle = bottomFill
-                ctx.fillRect(
-                  startPx + 1,
-                  cdsTop + (cdsHeight - 2) / 2,
-                  widthPx - 2,
-                  (cdsHeight - 2) / 2,
-                )
-              }
-            }
-          }
-        }
-        currentCDS += 1
-      }
-    }
-    if (apolloSelectedFeature) {
-      if (_id === apolloSelectedFeature._id) {
-        const widthPx = feature.length / bpPerPx
-        const startPx = reversed ? xOffset - widthPx : xOffset
-        const top = row * rowHeight
-        const height = this.getRowCount(feature) * rowHeight
-        ctx.fillStyle = theme?.palette.action.selected ?? 'rgba(0,0,0,0.08)'
-        ctx.fillRect(startPx, top, widthPx, height)
-      } else {
-        let featureEntry: AnnotationFeatureI | undefined
-        let featureRow: number | undefined
-        let i = 0
-        for (const [, f] of children ?? new Map()) {
-          if (f._id === apolloSelectedFeature._id) {
-            featureEntry = f
-            featureRow = i
-          }
-          i++
-        }
-
-        if (featureEntry === undefined || featureRow === undefined) {
-          return
-        }
-        const cdsCount = this.cdsCount(featureEntry)
-        let height = rowHeight
-        if (cdsCount > 1) {
-          height = height * cdsCount
-        }
-        const widthPx = featureEntry.length / bpPerPx
-        const offsetPx = (featureEntry.start - min) / bpPerPx
-        const startPx = reversed ? xOffset - widthPx : xOffset + offsetPx
-        const top = (row + featureRow) * rowHeight
-        ctx.fillStyle = theme?.palette.action.selected ?? 'rgba(0,0,0,08)'
-        ctx.fillRect(startPx, top, widthPx, height)
-      }
-    }
-  }
-
-  // CDS count with discontinuous locations
-  cdsCount(feature?: AnnotationFeatureI) {
-    let cdsCount = 0
-    for (const [, cf] of feature?.children ?? new Map()) {
-      if (
-        cf.type === 'CDS' &&
-        cf.discontinuousLocations &&
-        cf.discontinuousLocations.length > 0
-      ) {
-        cdsCount++
-      }
-    }
-    return cdsCount
-  }
-
-  drawHover(
-    stateModel: LinearApolloDisplay,
-    ctx: CanvasRenderingContext2D,
-    rowNum: number,
-    xOffset: number,
-    reversed: boolean,
-  ) {
-    const { apolloHover } = stateModel
-    if (!apolloHover) {
-      return
-    }
-    const { feature } = apolloHover
-    if (!feature) {
-      return
-    }
-
-    if (
-      feature.discontinuousLocations &&
-      feature.discontinuousLocations.length > 0
-    ) {
-      for (const dl of feature.discontinuousLocations) {
-        this.drawShadeForFeature(
-          stateModel,
-          ctx,
-          dl.start,
-          dl.end,
-          dl.end - dl.start,
-        )
-      }
-    } else {
-      this.drawShadeForFeature(
-        stateModel,
-        ctx,
-        feature.start,
-        feature.end,
-        feature.length,
-        rowNum,
-        xOffset,
-        reversed,
-      )
-    }
-  }
-
-  drawShadeForFeature(
-    stateModel: LinearApolloDisplay,
-    ctx: CanvasRenderingContext2D,
-    start: number,
-    end: number,
-    length: number,
-    rowNum?: number,
-    xOffset?: number,
-    reversed?: boolean,
-  ) {
-    const { apolloHover, apolloRowHeight, displayedRegions, lgv, theme } =
-      stateModel
-    const { bpPerPx, bpToPx, offsetPx } = lgv
-
-    if (!apolloHover) {
-      return
-    }
-    const { feature, topLevelFeature } = apolloHover
-
-    if (!feature || !topLevelFeature) {
-      return
-    }
-
-    let featureEntry: AnnotationFeatureI | undefined
-    let childFeature: AnnotationFeatureI | undefined
-    let featureRow: number | undefined
-    let i = 0
-    for (const [, f] of topLevelFeature.children ?? new Map()) {
-      if (f._id === feature._id) {
-        featureEntry = f
-        featureRow = i
-      }
-      for (const [, cf] of f.children ?? new Map()) {
-        if (cf._id === feature._id) {
-          childFeature = cf
-          featureEntry = f
-          featureRow = i
-        }
-      }
-      i++
-    }
-
-    const cdsCount = this.cdsCount(featureEntry)
-
-    if (cdsCount > 1 && rowNum && xOffset) {
-      if (featureEntry === undefined || featureRow === undefined) {
-        return
-      }
-      const widthPx = childFeature
-        ? childFeature.length / bpPerPx
-        : featureEntry.length / bpPerPx
-      const offsetPx = childFeature
-        ? (childFeature.start - feature.min) / bpPerPx
-        : (featureEntry.start - feature.min) / bpPerPx
-      const startPx = reversed ? xOffset - widthPx : xOffset + offsetPx
-      const top = (rowNum + featureRow) * apolloRowHeight
-      ctx.fillStyle = theme?.palette.action.selected ?? 'rgba(0,0,0,04)'
-      ctx.fillRect(startPx, top, widthPx, apolloRowHeight * cdsCount)
-    } else {
-      const { mousePosition } = apolloHover
-      if (!mousePosition) {
-        return
-      }
-      const rowHeight = apolloRowHeight
-      const { regionNumber, y } = mousePosition
-      const rowNumber = Math.floor(y / rowHeight)
-
-      const displayedRegion = displayedRegions[regionNumber]
-      const { refName, reversed } = displayedRegion
-      const startPx =
-        (bpToPx({
-          refName,
-          coord: reversed ? end : start,
-          regionNumber,
-        })?.offsetPx ?? 0) - offsetPx
-      const top = rowNumber * rowHeight
-      const widthPx = length / bpPerPx
-      ctx.fillStyle = theme?.palette.action.focus ?? 'rgba(0,0,0,0.04)'
-      ctx.fillRect(startPx, top, widthPx, rowHeight)
-    }
-  }
-
-  drawDragPreview(
-    stateModel: LinearApolloDisplay,
-    overlayCtx: CanvasRenderingContext2D,
-  ) {
-    const { apolloDragging, apolloRowHeight, displayedRegions, lgv, theme } =
-      stateModel
-    const { bpPerPx, offsetPx } = lgv
-    if (!apolloDragging) {
-      return
-    }
-    const {
-      discontinuousLocation,
-      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
-    }
-
-    const row = Math.floor(startingMousePosition.y / apolloRowHeight)
-    const region = displayedRegions[startingMousePosition.regionNumber]
-    const rowCount = 1
-
-    let featureEdgeBp
-    if (discontinuousLocation) {
-      featureEdgeBp = region.reversed
-        ? region.end - discontinuousLocation[edge]
-        : discontinuousLocation[edge] - region.start
-    } else {
-      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)
-  }
-
-  /**
-   * Check If the mouse position is on the edge of the selected feature
-   */
-  isMouseOnFeatureEdge(
-    mousePosition: MousePosition,
-    feature: AnnotationFeatureI,
-    stateModel: LinearApolloDisplay,
-    topLevelFeature?: AnnotationFeatureI,
-  ) {
-    if (!mousePosition) {
-      return
-    }
-
-    const { bp, refName, regionNumber, x } = mousePosition
-    const { lgv } = stateModel
-    const { bpToPx, offsetPx } = lgv
-    let startPxInfo
-    let endPxInfo
-    if (
-      feature.discontinuousLocations &&
-      feature.discontinuousLocations.length > 0
-    ) {
-      let discontinuousLocation
-      for (const dl of feature.discontinuousLocations) {
-        if (bp >= dl.start && bp <= dl.end) {
-          discontinuousLocation = dl
-          break
-        }
-      }
-      if (!discontinuousLocation) {
-        return
-      }
-      startPxInfo = bpToPx({
-        refName,
-        coord: discontinuousLocation.start,
-        regionNumber,
-      })
-      endPxInfo = bpToPx({
-        refName,
-        coord: discontinuousLocation.end,
-        regionNumber,
-      })
-    } else {
-      startPxInfo = bpToPx({
-        refName,
-        coord: feature.start,
-        regionNumber,
-      })
-      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
-      }
-      const parentFeature = this.getParentFeature(feature, topLevelFeature)
-      // Limit dragging till parent feature end
-      if (parentFeature) {
-        if (parentFeature.type === 'gene') {
-          return
-        }
-        if (feature.start <= parentFeature.start && Math.abs(startPx - x) < 4) {
-          return
-        }
-        if (feature.end >= parentFeature.end && Math.abs(endPx - x) < 4) {
-          return
-        }
-      }
-      if (Math.abs(startPx - x) < 4) {
-        return 'start'
-      }
-      if (Math.abs(endPx - x) < 4) {
-        return 'end'
-      }
-    }
-    return
-  }
-
-  onMouseMove(stateModel: LinearApolloDisplay, event: CanvasMouseEvent) {
-    const { feature, mousePosition, topLevelFeature } =
-      stateModel.getFeatureAndGlyphUnderMouse(event)
-    if (stateModel.apolloDragging) {
-      stateModel.setCursor('col-resize')
-      return
-    }
-    if (feature && mousePosition) {
-      const edge = this.isMouseOnFeatureEdge(
-        mousePosition,
-        feature,
-        stateModel,
-        topLevelFeature,
-      )
-      if (edge) {
-        stateModel.setCursor('col-resize')
-      } else {
-        stateModel.setCursor()
-      }
-    }
-  }
-
-  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()
-      }
-    }
-  }
-
-  onMouseUp(stateModel: LinearApolloDisplay, event: CanvasMouseEvent) {
-    if (stateModel.apolloDragging ?? event.button !== 0) {
-      return
-    }
-    const { feature } = stateModel.getFeatureAndGlyphUnderMouse(event)
-    if (feature) {
-      stateModel.setSelectedFeature(feature)
-    }
-  }
-
-  startDrag(stateModel: LinearApolloDisplay): boolean {
-    // only accept the drag if we are on the edge of the feature
-    const { feature, mousePosition, topLevelFeature } =
-      stateModel.apolloDragging?.start ?? {}
-    const { mousePosition: currentMousePosition } =
-      stateModel.apolloDragging?.current ?? {}
-    if (feature && mousePosition && currentMousePosition) {
-      const edge = this.isMouseOnFeatureEdge(
-        mousePosition,
-        feature,
-        stateModel,
-        topLevelFeature,
-      )
-      if (edge) {
-        return true
-      }
-    }
-    return false
-  }
-
-  adjacentExonsOfCdsDL(
-    cdsDL: CDSDiscontinuousLocation,
-    exonCDSRelations: ExonCDSRelation[],
-  ) {
-    let prevExon, nextExon, matchingExon, idx
-    if (exonCDSRelations) {
-      for (const [i, exonCDSRelation] of exonCDSRelations.entries()) {
-        const dl = exonCDSRelation.cdsDL
-        if (
-          cdsDL.start === dl?.start &&
-          cdsDL.end === dl.end &&
-          cdsDL.phase === dl.phase
-        ) {
-          idx = i
-          break
-        }
-      }
-      if (idx !== undefined) {
-        const { exon } = exonCDSRelations[idx]
-        matchingExon = exon
-      }
-      if (idx !== undefined && idx > 0) {
-        prevExon = exonCDSRelations[idx - 1].exon
-      }
-      if (idx !== undefined && idx < exonCDSRelations.length - 1) {
-        nextExon = exonCDSRelations[idx + 1].exon
-      }
-    }
-    return { prevExon, matchingExon, nextExon }
-  }
-
-  exonCDSRelation(
-    cds?: AnnotationFeatureI,
-    topLevelFeature?: AnnotationFeatureI,
-  ): ExonCDSRelation[] {
-    const exonCDSRelations: ExonCDSRelation[] = []
-    if (!cds) {
-      return exonCDSRelations
-    }
-    const parentFeature = this.getParentFeature(cds, topLevelFeature)
-    if (!parentFeature?.children) {
-      return exonCDSRelations
-    }
-    for (const [, f] of parentFeature.children) {
-      if (f.type === 'exon') {
-        const cdsDLForExon = this.cdsDLForExon(f, cds)
-        exonCDSRelations.push({
-          exon: f,
-          cdsDL: cdsDLForExon
-            ? {
-                start: cdsDLForExon.start,
-                end: cdsDLForExon.end,
-                phase: cdsDLForExon.phase,
-              }
-            : undefined,
-        })
-      }
-    }
-    return exonCDSRelations
-  }
-
-  cdsDLForExon(exon: AnnotationFeatureI, cds: AnnotationFeatureI) {
-    let discontinuousLocation
-    if (cds.discontinuousLocations && cds.discontinuousLocations.length > 0) {
-      for (const dl of cds.discontinuousLocations) {
-        if (dl.start >= exon.start && dl.end <= exon.end) {
-          discontinuousLocation = dl
-          break
-        }
-      }
-    }
-    return discontinuousLocation
-  }
-
-  cdsDlsForExon(
-    exon: AnnotationFeatureI,
-    topLevelFeature?: AnnotationFeatureI,
-  ): CDSDiscontinuousLocation[] {
-    const dls: CDSDiscontinuousLocation[] = []
-    const parentFeature = this.getParentFeature(exon, topLevelFeature)
-    if (!parentFeature?.children || !topLevelFeature) {
-      return dls
-    }
-    const cdsFeatures: AnnotationFeatureI[] = []
-    for (const [, f] of parentFeature.children) {
-      if (f.type === 'CDS') {
-        cdsFeatures.push(f)
-      }
-    }
-
-    for (const cds of cdsFeatures) {
-      for (const [, f] of parentFeature.children) {
-        if (f.type === 'exon' && f._id === exon._id) {
-          const cdsDLForExon = this.cdsDLForExon(f, cds)
-          if (cdsDLForExon) {
-            dls.push(cdsDLForExon)
-          }
-        }
-      }
-    }
-    return dls
-  }
-
-  adjacentExonsOfExon(
-    exon: AnnotationFeatureI,
-    topLevelFeature?: AnnotationFeatureI,
-  ) {
-    const parentFeature: AnnotationFeatureI = this.getParentFeature(
-      exon,
-      topLevelFeature,
-    )
-    if (!(parentFeature && parentFeature.children)) {
-      return
-    }
-
-    let i = 0
-    for (const [, f] of parentFeature.children) {
-      if (f._id === exon._id) {
-        break
-      }
-      i++
-    }
-
-    let prevExon, nextExon
-    const keys = [...parentFeature.children.keys()]
-    if (i > 0) {
-      const f = parentFeature.children.get(keys[i - 1])
-      if (f && f.type === 'exon') {
-        prevExon = f
-      }
-    }
-    if (i < keys.length - 1) {
-      const f = parentFeature.children.get(keys[i + 1])
-      if (f && f.type === 'exon') {
-        nextExon = f
-      }
-    }
-    return { prevExon, nextExon }
-  }
-
-  continueDrag(
-    stateModel: LinearApolloDisplay,
-    currentMousePosition: MousePosition,
-  ): void {
-    const {
-      discontinuousLocation,
-      feature,
-      glyph,
-      mousePosition,
-      topLevelFeature,
-    } = stateModel.apolloDragging?.start ?? {}
-    if (!(currentMousePosition && mousePosition)) {
-      return
-    }
-    const { bp } = currentMousePosition
-    if (!feature || !currentMousePosition) {
-      return
-    }
-    const edge = this.isMouseOnFeatureEdge(
-      mousePosition,
-      feature,
-      stateModel,
-      topLevelFeature,
-    )
-
-    if (
-      feature.type === 'CDS' &&
-      feature.discontinuousLocations &&
-      feature.discontinuousLocations.length > 0 &&
-      discontinuousLocation
-    ) {
-      const exonCDSRelations = this.exonCDSRelation(feature, topLevelFeature)
-      const { matchingExon, nextExon, prevExon } = this.adjacentExonsOfCdsDL(
-        discontinuousLocation,
-        exonCDSRelations,
-      )
-
-      if (nextExon && bp >= nextExon.start - 1) {
-        return
-      }
-      if (prevExon && bp <= prevExon.end + 1) {
-        return
-      }
-      if (!prevExon && nextExon && matchingExon && bp < matchingExon.start) {
-        return
-      }
-      if (prevExon && !nextExon && matchingExon && bp > matchingExon.end) {
-        return
-      }
-
-      if (
-        edge &&
-        ((edge === 'start' && bp >= discontinuousLocation.end - 1) ||
-          (edge === 'end' && bp <= discontinuousLocation.start + 1))
-      ) {
-        return
-      }
-    }
-
-    if (feature.type !== 'CDS') {
-      const adjacentExons = this.adjacentExonsOfExon(feature, topLevelFeature)
-      if (adjacentExons?.nextExon && bp >= adjacentExons.nextExon.start - 1) {
-        return
-      }
-      if (adjacentExons?.prevExon && bp <= adjacentExons.prevExon.end + 1) {
-        return
-      }
-      const dls: CDSDiscontinuousLocation[] = this.cdsDlsForExon(
-        feature,
-        topLevelFeature,
-      )
-
-      if (dls && dls.length > 0) {
-        let stopDrag
-        for (const dl of dls) {
-          if (
-            edge &&
-            ((edge === 'start' && bp >= dl.start - 1) ||
-              (edge === 'end' && bp <= dl.end + 1))
-          ) {
-            stopDrag = true
-            break
-          }
-        }
-        if (stopDrag) {
-          return
-        }
-      } else {
-        if (
-          edge &&
-          ((edge === 'start' && bp >= feature.end - 1) ||
-            (edge === 'end' && bp <= feature.start + 1))
-        ) {
-          return
-        }
-      }
-    }
-
-    stateModel.setDragging({
-      start: {
-        feature,
-        topLevelFeature,
-        glyph,
-        discontinuousLocation,
-        mousePosition,
-      },
-      current: {
-        feature,
-        topLevelFeature,
-        glyph,
-        mousePosition: currentMousePosition,
-      },
-    })
-  }
-
-  getFeatureFromLayout(
-    feature: AnnotationFeatureI,
-    bp: number,
-    row: number,
-  ): AnnotationFeatureI | undefined {
-    const featuresForRow: AnnotationFeature[] =
-      this.featuresForRow(feature)[row]
-    let featureFromLayout: AnnotationFeatureI | undefined
-
-    for (const f of featuresForRow) {
-      if (
-        f.start !== undefined &&
-        f.end !== undefined &&
-        f.phase !== undefined
-      ) {
-        if (bp >= f.start && bp <= f.end && f.parent) {
-          featureFromLayout = f.annotationFeature
-        }
-      } else {
-        if (
-          bp >= f.annotationFeature.start &&
-          bp <= f.annotationFeature.end &&
-          f.parent
-        ) {
-          featureFromLayout = f.annotationFeature
-        }
-      }
-    }
-
-    if (!featureFromLayout) {
-      featureFromLayout = featuresForRow.at(-1)?.annotationFeature
-    }
-
-    return featureFromLayout
-  }
-
-  getRowForFeature(
-    feature: AnnotationFeatureI,
-    childFeature: AnnotationFeatureI,
-  ) {
-    const rows = this.featuresForRow(feature)
-    for (const [idx, row] of rows.entries()) {
-      if (
-        row.some(
-          (feature) => feature.annotationFeature._id === childFeature._id,
-        )
-      ) {
-        return idx
-      }
-    }
-    return
-  }
-
-  async executeDrag(stateModel: LinearApolloDisplay) {
-    const {
-      apolloDragging,
-      changeManager,
-      displayedRegions,
-      getAssemblyId,
-      setCursor,
-    } = stateModel
-    if (!apolloDragging) {
-      return
-    }
-    const {
-      discontinuousLocation,
-      feature,
-      glyph,
-      mousePosition: startingMousePosition,
-      topLevelFeature,
-    } = apolloDragging.start
-    if (!feature) {
-      throw new Error('no feature for drag preview??')
-    }
-    if (glyph !== this) {
-      throw new Error('drawDragPreview() called on wrong glyph?')
-    }
-    const edge = this.isMouseOnFeatureEdge(
-      startingMousePosition,
-      feature,
-      stateModel,
-    )
-    if (!edge) {
-      return
-    }
-
-    const { mousePosition: currentMousePosition } = apolloDragging.current
-    const region = displayedRegions[startingMousePosition.regionNumber]
-    const newBp = currentMousePosition.bp
-    const assembly = getAssemblyId(region.assemblyName)
-    const changes: (
-      | LocationStartChange
-      | LocationEndChange
-      | DiscontinuousLocationEndChange
-      | DiscontinuousLocationStartChange
-    )[] = []
-
-    if (edge === 'start') {
-      if (
-        discontinuousLocation?.idx !== undefined &&
-        feature.discontinuousLocations &&
-        feature.discontinuousLocations.length > 0
-      ) {
-        const oldStart =
-          feature.discontinuousLocations[discontinuousLocation.idx].start
-        this.addDiscontinuousLocStartChange(
-          changes,
-          feature,
-          newBp,
-          oldStart,
-          assembly,
-          discontinuousLocation.idx,
-        )
-
-        const exonCDSRelations = this.exonCDSRelation(feature, topLevelFeature)
-        const exonForCds = this.adjacentExonsOfCdsDL(
-          discontinuousLocation,
-          exonCDSRelations,
-        )
-        if (
-          exonForCds &&
-          exonForCds.matchingExon &&
-          newBp < exonForCds.matchingExon.start
-        ) {
-          this.addStartLocationChange(
-            changes,
-            exonForCds.matchingExon,
-            newBp,
-            assembly,
-          )
-        }
-      } else {
-        this.addStartLocationChange(changes, feature, newBp, assembly)
-      }
-    } else {
-      if (
-        discontinuousLocation?.idx !== undefined &&
-        feature.discontinuousLocations &&
-        feature.discontinuousLocations.length > 0
-      ) {
-        const oldEnd =
-          feature.discontinuousLocations[discontinuousLocation.idx].end
-        this.addDiscontinuousLocEndChange(
-          changes,
-          feature,
-          newBp,
-          oldEnd,
-          assembly,
-          discontinuousLocation.idx,
-        )
-
-        const exonCDSRelations = this.exonCDSRelation(feature, topLevelFeature)
-        const exonForCds = this.adjacentExonsOfCdsDL(
-          discontinuousLocation,
-          exonCDSRelations,
-        )
-        if (
-          exonForCds &&
-          exonForCds.matchingExon &&
-          newBp > exonForCds.matchingExon.end
-        ) {
-          this.addEndLocationChange(
-            changes,
-            exonForCds.matchingExon,
-            newBp,
-            assembly,
-          )
-        }
-      } else {
-        this.addEndLocationChange(changes, feature, newBp, assembly)
-      }
-    }
-
-    if (!changeManager) {
-      throw new Error('no change manager')
-    }
-    for (const change of changes) {
-      await changeManager.submit(change)
-    }
-
-    setCursor()
-  }
-
-  addDiscontinuousLocStartChange(
-    changes: LocationChange[],
-    feature: AnnotationFeatureI, // cds
-    newBp: number,
-    oldStart: number,
-    assembly: string,
-    index: number,
-  ) {
-    const featureId = feature._id
-    changes.push(
-      new DiscontinuousLocationStartChange({
-        typeName: 'DiscontinuousLocationStartChange',
-        changedIds: [feature._id],
-        featureId,
-        newStart: newBp,
-        oldStart,
-        index,
-        assembly,
-      }),
-    )
-  }
-
-  addDiscontinuousLocEndChange(
-    changes: LocationChange[],
-    feature: AnnotationFeatureI, // cds
-    newBp: number,
-    oldEnd: number,
-    assembly: string,
-    index: number,
-  ) {
-    const featureId = feature._id
-    changes.push(
-      new DiscontinuousLocationEndChange({
-        typeName: 'DiscontinuousLocationEndChange',
-        changedIds: [feature._id],
-        featureId,
-        newEnd: newBp,
-        oldEnd,
-        index,
-        assembly,
-      }),
-    )
-  }
-
-  addEndLocationChange(
-    changes: LocationChange[],
-    feature: AnnotationFeatureI,
-    newBp: number,
-    assembly: string,
-  ) {
-    const featureId = feature._id
-    const oldEnd = feature.end
-    const newEnd = newBp
-    changes.push(
-      new LocationEndChange({
-        typeName: 'LocationEndChange',
-        changedIds: [featureId],
-        featureId,
-        oldEnd,
-        newEnd,
-        assembly,
-      }),
-    )
-  }
-
-  addStartLocationChange(
-    changes: LocationChange[],
-    feature: AnnotationFeatureI,
-    newBp: number,
-    assembly: string,
-  ) {
-    const featureId = feature._id
-    const oldStart = feature.start
-    const newStart = newBp
-    changes.push(
-      new LocationStartChange({
-        typeName: 'LocationStartChange',
-        changedIds: [featureId],
-        featureId,
-        oldStart,
-        newStart,
-        assembly,
-      }),
-    )
-  }
-}