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

package/src/LinearApolloDisplay/glyphs/Glyph.ts

@@ -1,405 +1,73 @@
-/* eslint-disable @typescript-eslint/unbound-method */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-/* eslint-disable @typescript-eslint/no-unsafe-return */
-import { AnnotationFeatureI } from '@apollo-annotation/mst'
+import { AnnotationFeature } from '@apollo-annotation/mst'
 import { MenuItem } from '@jbrowse/core/ui'
-import { AbstractSessionModel, SessionWithWidgets } from '@jbrowse/core/util'
-import { alpha } from '@mui/material'
 
-import {
-  AddChildFeature,
-  CopyFeature,
-  DeleteFeature,
-  ModifyFeatureAttribute,
-} from '../../components'
 import {
   LinearApolloDisplayMouseEvents,
-  MousePosition,
+  MousePositionWithFeatureAndGlyph,
 } from '../stateModel/mouseEvents'
 import { LinearApolloDisplayRendering } from '../stateModel/rendering'
 import { CanvasMouseEvent } from '../types'
 
-export abstract class Glyph {
+export interface Glyph {
   /** @returns number of layout rows used by this glyph with this feature and zoom level */
-  abstract getRowCount(feature: AnnotationFeatureI, bpPerPx: number): number
-
+  getRowCount(feature: AnnotationFeature, bpPerPx: number): number
   /** draw the feature's primary rendering on the canvas */
-  abstract draw(
-    display: LinearApolloDisplayRendering,
+  draw(
     ctx: CanvasRenderingContext2D,
-    feature: AnnotationFeatureI,
-    xOffset: number,
+    feature: AnnotationFeature,
     row: number,
-    reversed: boolean,
+    stateModel: LinearApolloDisplayRendering,
+    displayedRegionIndex: number,
   ): void
-
   /** @returns the feature or subfeature at the given bp and row number in this glyph's layout */
-  abstract getFeatureFromLayout(
-    feature: AnnotationFeatureI,
+  getFeatureFromLayout(
+    feature: AnnotationFeature,
     bp: number,
     row: number,
-  ): AnnotationFeatureI | undefined
-
-  abstract getRowForFeature(
-    feature: AnnotationFeatureI,
-    childFeature: AnnotationFeatureI,
+  ): AnnotationFeature | undefined
+  getRowForFeature(
+    feature: AnnotationFeature,
+    childFeature: AnnotationFeature,
   ): number | undefined
 
-  abstract continueDrag(
-    display: LinearApolloDisplayRendering,
-    currentMousePosition: MousePosition,
-  ): void
-
   drawHover(
-    _display: LinearApolloDisplayMouseEvents,
-    _overlayCtx: CanvasRenderingContext2D,
-    _rowNum?: number,
-    _xOffset?: number,
-    _reversed?: boolean,
-  ) {
-    return
-  }
+    display: LinearApolloDisplayMouseEvents,
+    overlayCtx: CanvasRenderingContext2D,
+  ): void
 
   drawDragPreview(
-    _display: LinearApolloDisplayMouseEvents,
-    _ctx: CanvasRenderingContext2D,
-  ) {
-    return
-  }
-
-  /** @returns true if the current drag that is starting is valid */
-  startDrag(
-    _display: LinearApolloDisplayMouseEvents,
-    _event: CanvasMouseEvent,
-  ): boolean {
-    return false
-  }
-
-  executeDrag(
-    _display: LinearApolloDisplayMouseEvents,
-    _event: CanvasMouseEvent,
-  ): void {
-    return
-  }
+    display: LinearApolloDisplayMouseEvents,
+    ctx: CanvasRenderingContext2D,
+  ): void
 
   onMouseDown(
-    _display: LinearApolloDisplayMouseEvents,
-    _event: CanvasMouseEvent,
-  ): void {
-    return
-  }
+    display: LinearApolloDisplayMouseEvents,
+    currentMousePosition: MousePositionWithFeatureAndGlyph,
+    event: CanvasMouseEvent,
+  ): void
 
   onMouseMove(
-    _display: LinearApolloDisplayMouseEvents,
-    _event: CanvasMouseEvent,
-  ): void {
-    return
-  }
+    display: LinearApolloDisplayMouseEvents,
+    currentMousePosition: MousePositionWithFeatureAndGlyph,
+    event: CanvasMouseEvent,
+  ): void
 
   onMouseLeave(
-    _display: LinearApolloDisplayMouseEvents,
-    _event: CanvasMouseEvent,
-  ): void {
-    return
-  }
+    display: LinearApolloDisplayMouseEvents,
+    currentMousePosition: MousePositionWithFeatureAndGlyph,
+    event: CanvasMouseEvent,
+  ): void
 
   onMouseUp(
-    _display: LinearApolloDisplayMouseEvents,
-    _event: CanvasMouseEvent,
-  ): void {
-    return
-  }
-
-  onContextMenu(
-    _display: LinearApolloDisplayMouseEvents,
-    _event: CanvasMouseEvent,
-  ): void {
-    return
-  }
+    display: LinearApolloDisplayMouseEvents,
+    currentMousePosition: MousePositionWithFeatureAndGlyph,
+    event: CanvasMouseEvent,
+  ): void
 
   drawTooltip(
     display: LinearApolloDisplayMouseEvents,
     context: CanvasRenderingContext2D,
-  ): void {
-    const { apolloHover, apolloRowHeight, displayedRegions, lgv, theme } =
-      display
-    if (!apolloHover) {
-      return
-    }
-    const { feature, mousePosition } = apolloHover
-    if (!(feature && mousePosition)) {
-      return
-    }
-    const { regionNumber, y } = mousePosition
-    const displayedRegion = displayedRegions[regionNumber]
-    const { refName, reversed } = displayedRegion
-    const { bpPerPx, bpToPx, offsetPx } = lgv
-
-    const { discontinuousLocations } = feature
-    let start: number, end: number, length: number
-    let location = 'Loc: '
-    if (discontinuousLocations && discontinuousLocations.length > 0) {
-      const lastLoc = discontinuousLocations.at(-1)
-      if (!lastLoc) {
-        return
-      }
-      ;({ start } = lastLoc)
-      ;({ end } = lastLoc)
-      length = lastLoc.end - lastLoc.start
-
-      if (discontinuousLocations.length <= 2) {
-        for (const [i, loc] of discontinuousLocations.entries()) {
-          location += `${loc.start + 1}–${loc.end}`
-          if (i !== discontinuousLocations.length - 1) {
-            location += ','
-          }
-        }
-      } else {
-        const [firstLoc] = discontinuousLocations
-        location += `${firstLoc.start + 1}–${firstLoc.end},…,${
-          lastLoc.start + 1
-        }–${lastLoc.end}`
-      }
-    } else {
-      ;({ end, length, start } = feature)
-      location += `${start + 1}–${end}`
-    }
-
-    let 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
-
-    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)
-
-    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)
-  }
-
-  getAdjacentFeatures(
-    feature?: AnnotationFeatureI,
-    parentFeature?: AnnotationFeatureI,
-  ): {
-    prevFeature?: AnnotationFeatureI
-    nextFeature?: AnnotationFeatureI
-  } {
-    let prevFeature: AnnotationFeatureI | undefined
-    let nextFeature: AnnotationFeatureI | undefined
-    let i = 0
-    if (!feature || !(parentFeature && parentFeature.children)) {
-      return { prevFeature, nextFeature }
-    }
-    for (const [, f] of parentFeature.children) {
-      if (f._id === feature._id) {
-        break
-      }
-      i++
-    }
-    const keys = [...parentFeature.children.keys()]
-    if (i > 0) {
-      const key = keys[i - 1]
-      prevFeature = parentFeature.children.get(key)
-    }
-    if (i < keys.length - 1) {
-      const key = keys[i + 1]
-      nextFeature = parentFeature.children.get(key)
-    }
-    return { prevFeature, nextFeature }
-  }
-
-  getParentFeature(
-    feature?: AnnotationFeatureI,
-    topLevelFeature?: AnnotationFeatureI,
-  ) {
-    let parentFeature
-
-    if (!feature || !(topLevelFeature && topLevelFeature.children)) {
-      return parentFeature
-    }
-
-    for (const [, f] of topLevelFeature.children) {
-      if (f._id === feature._id) {
-        parentFeature = topLevelFeature
-        break
-      }
-      if (!f?.children) {
-        continue
-      }
-      for (const [, cf] of f.children) {
-        if (cf._id === feature._id) {
-          parentFeature = f
-          break
-        }
-      }
-      if (parentFeature) {
-        break
-      }
-    }
-    return parentFeature
-  }
+  ): void
 
-  getContextMenuItems(display: LinearApolloDisplayMouseEvents): MenuItem[] {
-    const {
-      apolloHover,
-      apolloInternetAccount: internetAccount,
-      changeManager,
-      getAssemblyId,
-      regions,
-      selectedFeature,
-      session,
-      setSelectedFeature,
-    } = display
-    const { feature: sourceFeature } = apolloHover ?? {}
-    const role = internetAccount ? internetAccount.role : 'admin'
-    const admin = role === 'admin'
-    const readOnly = !(role && ['admin', 'user'].includes(role))
-    const menuItems: MenuItem[] = []
-    if (sourceFeature) {
-      const [region] = regions
-      const sourceAssemblyId = getAssemblyId(region.assemblyName)
-      const currentAssemblyId = 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,
-                },
-              ],
-            )
-          },
-        },
-        {
-          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
-  }
+  getContextMenuItems(display: LinearApolloDisplayMouseEvents): MenuItem[]
 }

package/src/LinearApolloDisplay/glyphs/index.ts

@@ -1,4 +1,3 @@
 export * from './BoxGlyph'
-export * from './CanonicalGeneGlyph'
+export * from './GeneGlyph'
 export * from './GenericChildGlyph'
-export * from './ImplicitExonGeneGlyph'

package/src/LinearApolloDisplay/stateModel/base.ts

@@ -3,7 +3,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
-import { AnnotationFeatureI } from '@apollo-annotation/mst'
+import { AnnotationFeature } from '@apollo-annotation/mst'
 import { ConfigurationReference, getConf } from '@jbrowse/core/configuration'
 import { AnyConfigurationSchemaType } from '@jbrowse/core/configuration/configurationSchema'
 import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes'
@@ -75,9 +75,6 @@ export function baseModelFactory(
         )
         return regions
       },
-      get displayedRegions() {
-        return self.lgv.displayedRegions
-      },
       regionCannotBeRendered(/* region */) {
         if (self.lgv && self.lgv.bpPerPx >= 200) {
           return 'Zoom in to see annotations'
@@ -117,13 +114,13 @@ export function baseModelFactory(
         }
         return assembly.name
       },
-      get selectedFeature(): AnnotationFeatureI | undefined {
+      get selectedFeature(): AnnotationFeature | undefined {
         return (self.session as unknown as ApolloSessionModel)
           .apolloSelectedFeature
       },
     }))
     .actions((self) => ({
-      setSelectedFeature(feature?: AnnotationFeatureI) {
+      setSelectedFeature(feature?: AnnotationFeature) {
         ;(
           self.session as unknown as ApolloSessionModel
         ).apolloSetSelectedFeature(feature)

package/src/LinearApolloDisplay/stateModel/getGlyph.ts

@@ -1,40 +1,40 @@
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-import { AnnotationFeatureI } from '@apollo-annotation/mst'
+import { AnnotationFeature } from '@apollo-annotation/mst'
 
-import {
-  BoxGlyph,
-  CanonicalGeneGlyph,
-  GenericChildGlyph,
-  ImplicitExonGeneGlyph,
-} from '../glyphs'
+import { boxGlyph, geneGlyph, genericChildGlyph } from '../glyphs'
 import { Glyph } from '../glyphs/Glyph'
 
-const boxGlyph = new BoxGlyph()
-const canonicalGeneGlyph = new CanonicalGeneGlyph()
-const genericChildGlyph = new GenericChildGlyph()
-const implicitExonGeneGlyph = new ImplicitExonGeneGlyph()
-
 /** get the appropriate glyph for the given top-level feature */
-export function getGlyph(feature: AnnotationFeatureI, _bpPerPx: number): Glyph {
-  if (feature.type === 'gene') {
-    let hasExon = false
-    for (const [, mrna] of feature.children ?? new Map()) {
-      if (mrna.type !== 'mRNA') {
-        continue
-      }
-      for (const [, possibleExon] of mrna.children ?? new Map()) {
-        if (possibleExon.type === 'exon') {
-          hasExon = true
-        }
-      }
-    }
-    if (hasExon) {
-      return canonicalGeneGlyph
-    }
-    return implicitExonGeneGlyph
+export function getGlyph(feature: AnnotationFeature): Glyph {
+  if (looksLikeGene(feature)) {
+    return geneGlyph
   }
   if (feature.children?.size) {
     return genericChildGlyph
   }
   return boxGlyph
 }
+
+function looksLikeGene(feature: AnnotationFeature) {
+  const { children } = feature
+  if (!children?.size) {
+    return false
+  }
+  for (const [, child] of children) {
+    if (child.type === 'mRNA') {
+      const { children: grandChildren } = child
+      if (!grandChildren?.size) {
+        return false
+      }
+      const hasCDS = [...grandChildren.values()].some(
+        (grandchild) => grandchild.type === 'CDS',
+      )
+      const hasExon = [...grandChildren.values()].some(
+        (grandchild) => grandchild.type === 'exon',
+      )
+      if (hasCDS && hasExon) {
+        return true
+      }
+    }
+  }
+  return false
+}

package/src/LinearApolloDisplay/stateModel/index.ts

@@ -17,4 +17,8 @@ export function stateModelFactory(
 }
 
 export type LinearApolloDisplayStateModel = ReturnType<typeof stateModelFactory>
-export type LinearApolloDisplay = Instance<LinearApolloDisplayStateModel>
+// eslint disable because of
+// https://mobx-state-tree.js.org/tips/typescript#using-a-mst-type-at-design-time
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface LinearApolloDisplay
+  extends Instance<LinearApolloDisplayStateModel> {}

package/src/LinearApolloDisplay/stateModel/layouts.ts

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
-/* eslint-disable @typescript-eslint/no-unsafe-argument */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-import { AnnotationFeatureI } from '@apollo-annotation/mst'
+
+import { AnnotationFeature } from '@apollo-annotation/mst'
 import { AnyConfigurationSchemaType } from '@jbrowse/core/configuration/configurationSchema'
 import PluginManager from '@jbrowse/core/PluginManager'
 import { AbstractSessionModel, doesIntersect2 } from '@jbrowse/core/util'
@@ -23,13 +22,13 @@ export function layoutsModelFactory(
       featuresMinMaxLimit: 500_000,
     })
     .volatile(() => ({
-      seenFeatures: observable.map<string, AnnotationFeatureI>(),
+      seenFeatures: observable.map<string, AnnotationFeature>(),
     }))
     .views((self) => ({
       get featuresMinMax() {
         const { assemblyManager } =
           self.session as unknown as AbstractSessionModel
-        return self.displayedRegions.map((region) => {
+        return self.lgv.displayedRegions.map((region) => {
           const assembly = assemblyManager.get(region.assemblyName)
           let min: number | undefined
           let max: number | undefined
@@ -48,10 +47,10 @@ export function layoutsModelFactory(
             if (max === undefined) {
               ;({ max } = feature)
             }
-            if (feature.min < min) {
+            if (feature.minWithChildren < min) {
               ;({ min } = feature)
             }
-            if (feature.end > max) {
+            if (feature.maxWithChildren > max) {
               ;({ max } = feature)
             }
           }
@@ -63,7 +62,7 @@ export function layoutsModelFactory(
       },
     }))
     .actions((self) => ({
-      addSeenFeature(feature: AnnotationFeatureI) {
+      addSeenFeature(feature: AnnotationFeature) {
         self.seenFeatures.set(feature._id, feature)
       },
       deleteSeenFeature(featureId: string) {
@@ -74,12 +73,9 @@ export function layoutsModelFactory(
       get featureLayouts() {
         const { assemblyManager } =
           self.session as unknown as AbstractSessionModel
-        return self.displayedRegions.map((region, idx) => {
+        return self.lgv.displayedRegions.map((region, idx) => {
           const assembly = assemblyManager.get(region.assemblyName)
-          const featureLayout = new Map<
-            number,
-            [number, AnnotationFeatureI][]
-          >()
+          const featureLayout = new Map<number, [number, AnnotationFeature][]>()
           const minMax = self.featuresMinMax[idx]
           if (!minMax) {
             return featureLayout
@@ -98,7 +94,7 @@ export function layoutsModelFactory(
             ) {
               continue
             }
-            const rowCount = getGlyph(feature, self.lgv.bpPerPx).getRowCount(
+            const rowCount = getGlyph(feature).getRowCount(
               feature,
               self.lgv.bpPerPx,
             )
@@ -160,9 +156,9 @@ export function layoutsModelFactory(
           return featureLayout
         })
       },
-      getFeatureLayoutPosition(feature: AnnotationFeatureI) {
+      getFeatureLayoutPosition(feature: AnnotationFeature) {
         const { featureLayouts } = this
-        for (const layout of featureLayouts) {
+        for (const [idx, layout] of featureLayouts.entries()) {
           for (const [layoutRowNum, layoutRow] of layout) {
             for (const [featureRowNum, layoutFeature] of layoutRow) {
               if (featureRowNum !== 0) {
@@ -171,15 +167,23 @@ export function layoutsModelFactory(
                 continue
               }
               if (feature._id === layoutFeature._id) {
-                return { layoutRow: layoutRowNum, featureRow: featureRowNum }
+                return {
+                  layoutIndex: idx,
+                  layoutRow: layoutRowNum,
+                  featureRow: featureRowNum,
+                }
               }
               if (layoutFeature.hasDescendant(feature._id)) {
-                const row = getGlyph(
+                const row = getGlyph(layoutFeature).getRowForFeature(
                   layoutFeature,
-                  self.lgv.bpPerPx,
-                ).getRowForFeature(layoutFeature, feature)
+                  feature,
+                )
                 if (row !== undefined) {
-                  return { layoutRow: layoutRowNum, featureRow: row }
+                  return {
+                    layoutIndex: idx,
+                    layoutRow: layoutRowNum,
+                    featureRow: row,
+                  }
                 }
               }
             }
@@ -210,13 +214,17 @@ export function layoutsModelFactory(
                   self.session as unknown as ApolloSessionModel
                 ).apolloDataStore.assemblies.get(region.assemblyName)
                 const ref = assembly?.getByRefName(region.refName)
-                for (const [, feature] of ref?.features ?? new Map()) {
+                const features = ref?.features
+                if (!features) {
+                  continue
+                }
+                for (const [, feature] of features) {
                   if (
                     doesIntersect2(
                       region.start,
                       region.end,
-                      feature.start,
-                      feature.end,
+                      feature.min,
+                      feature.max,
                     ) &&
                     !self.seenFeatures.has(feature._id)
                   ) {