@apollo-annotation/jbrowse-plugin-apollo 0.3.7 → 0.3.8

package/src/LinearApolloSixFrameDisplay/glyphs/Glyph.ts

@@ -1,10 +1,8 @@
 import { type AnnotationFeature } from '@apollo-annotation/mst'
 import { type MenuItem } from '@jbrowse/core/ui'
 
-import {
-  type LinearApolloSixFrameDisplayMouseEvents,
-  type MousePositionWithFeatureAndGlyph,
-} from '../stateModel/mouseEvents'
+import { type MousePositionWithFeature } from '../../util'
+import { type LinearApolloSixFrameDisplayMouseEvents } from '../stateModel/mouseEvents'
 import { type LinearApolloSixFrameDisplayRendering } from '../stateModel/rendering'
 import { type CanvasMouseEvent } from '../types'
 
@@ -30,25 +28,25 @@ export interface Glyph {
 
   onMouseDown(
     display: LinearApolloSixFrameDisplayMouseEvents,
-    currentMousePosition: MousePositionWithFeatureAndGlyph,
+    currentMousePosition: MousePositionWithFeature,
     event: CanvasMouseEvent,
   ): void
 
   onMouseMove(
     display: LinearApolloSixFrameDisplayMouseEvents,
-    currentMousePosition: MousePositionWithFeatureAndGlyph,
+    currentMousePosition: MousePositionWithFeature,
     event: CanvasMouseEvent,
   ): void
 
   onMouseLeave(
     display: LinearApolloSixFrameDisplayMouseEvents,
-    currentMousePosition: MousePositionWithFeatureAndGlyph,
+    currentMousePosition: MousePositionWithFeature,
     event: CanvasMouseEvent,
   ): void
 
   onMouseUp(
     display: LinearApolloSixFrameDisplayMouseEvents,
-    currentMousePosition: MousePositionWithFeatureAndGlyph,
+    currentMousePosition: MousePositionWithFeature,
     event: CanvasMouseEvent,
   ): void
 
@@ -57,7 +55,13 @@ export interface Glyph {
     context: CanvasRenderingContext2D,
   ): void
 
+  getContextMenuItemsForFeature(
+    display: LinearApolloSixFrameDisplayMouseEvents,
+    sourceFeature: AnnotationFeature,
+  ): MenuItem[]
+
   getContextMenuItems(
     display: LinearApolloSixFrameDisplayMouseEvents,
+    currentMousePosition: MousePositionWithFeature,
   ): MenuItem[]
 }

package/src/LinearApolloSixFrameDisplay/stateModel/base.ts

@@ -22,8 +22,9 @@ import { addDisposer, cast, getRoot, getSnapshot, types } from 'mobx-state-tree'
 
 import { type ApolloInternetAccountModel } from '../../ApolloInternetAccount/model'
 import { FilterFeatures } from '../../components/FilterFeatures'
-import { type ApolloSessionModel } from '../../session'
+import { type ApolloSessionModel, type HoveredFeature } from '../../session'
 import { type ApolloRootModel } from '../../types'
+import { EditZoomThresholdDialog } from '../../util/displayUtils'
 
 const minDisplayHeight = 20
 
@@ -38,6 +39,8 @@ export function baseModelFactory(
       graphical: true,
       table: false,
       showFeatureLabels: true,
+      showCheckResults: true,
+      zoomThreshold: 200,
       heightPreConfig: types.maybe(
         types.refinement(
           'displayHeight',
@@ -74,10 +77,13 @@ export function baseModelFactory(
           return 500
         }
         if (self.graphical) {
-          return 200
+          return self.showFeatureLabels ? 400 : 200
         }
         return 300
       },
+      get zoomThresholdSetting() {
+        return self.zoomThreshold ?? getConf(self, 'zoomThreshold')
+      },
     }))
     .views((self) => ({
       get rendererTypeName() {
@@ -98,7 +104,7 @@ export function baseModelFactory(
         return regions
       },
       regionCannotBeRendered(/* region */) {
-        if (self.lgv && self.lgv.bpPerPx >= 200) {
+        if (self.lgv && self.lgv.bpPerPx >= self.zoomThreshold) {
           return 'Zoom in to see annotations'
         }
         return
@@ -140,6 +146,10 @@ export function baseModelFactory(
         return (self.session as unknown as ApolloSessionModel)
           .apolloSelectedFeature
       },
+      get hoveredFeature(): HoveredFeature | undefined {
+        return (self.session as unknown as ApolloSessionModel)
+          .apolloHoveredFeature
+      },
     }))
     .actions((self) => ({
       setScrollTop(scrollTop: number) {
@@ -169,15 +179,21 @@ export function baseModelFactory(
       toggleShowFeatureLabels() {
         self.showFeatureLabels = !self.showFeatureLabels
       },
+      toggleShowCheckResults() {
+        self.showCheckResults = !self.showCheckResults
+      },
       updateFilteredFeatureTypes(types: string[]) {
         self.filteredFeatureTypes = cast(types)
       },
+      setZoomThresholdSetting({ zoomThreshold }: { zoomThreshold: number }) {
+        self.zoomThreshold = zoomThreshold
+      },
     }))
     .views((self) => {
       const { filteredFeatureTypes, trackMenuItems: superTrackMenuItems } = self
       return {
         trackMenuItems() {
-          const { graphical, table, showFeatureLabels } = self
+          const { graphical, table, showFeatureLabels, showCheckResults } = self
           return [
             ...superTrackMenuItems(),
             {
@@ -216,6 +232,23 @@ export function baseModelFactory(
                     self.toggleShowFeatureLabels()
                   },
                 },
+                {
+                  label: 'Check Results',
+                  type: 'checkbox',
+                  checked: showCheckResults,
+                  onClick: () => {
+                    self.toggleShowCheckResults()
+                  },
+                },
+                {
+                  label: 'Change zoom threshold',
+                  onClick: () => {
+                    getSession(self).queueDialog((handleClose) => [
+                      EditZoomThresholdDialog,
+                      { model: self, handleClose },
+                    ])
+                  },
+                },
               ],
             },
             {
@@ -249,6 +282,11 @@ export function baseModelFactory(
           self.session as unknown as ApolloSessionModel
         ).apolloSetSelectedFeature(feature)
       },
+      setHoveredFeature(hoveredFeature?: HoveredFeature) {
+        ;(
+          self.session as unknown as ApolloSessionModel
+        ).apolloSetHoveredFeature(hoveredFeature)
+      },
       showFeatureDetailsWidget(
         feature: AnnotationFeature,
         customWidgetNameAndId?: [string, string],

package/src/LinearApolloSixFrameDisplay/stateModel/layouts.ts

@@ -1,9 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
 
-import {
-  type AnnotationFeature,
-  type TranscriptPartCoding,
-} from '@apollo-annotation/mst'
+import { type AnnotationFeature } from '@apollo-annotation/mst'
 import type PluginManager from '@jbrowse/core/PluginManager'
 import { type AnyConfigurationSchemaType } from '@jbrowse/core/configuration/configurationSchema'
 import {
@@ -22,7 +19,6 @@ import { baseModelFactory } from './base'
 export interface LayoutRow {
   rowNum: number
   feature: AnnotationFeature
-  cds: TranscriptPartCoding | null
 }
 
 export function layoutsModelFactory(
@@ -136,7 +132,7 @@ export function layoutsModelFactory(
                 featureLayout.set(rowNum, [])
               }
               const layoutRow = featureLayout.get(rowNum)
-              layoutRow?.push({ rowNum, feature, cds: null })
+              layoutRow?.push({ rowNum, feature })
               const { children } = feature
               if (!children) {
                 continue
@@ -158,7 +154,7 @@ export function layoutsModelFactory(
                           ? self.geneTrackRowNums[0]
                           : self.geneTrackRowNums[1]
                       const layoutRow = featureLayout.get(rowNum)
-                      layoutRow?.push({ rowNum, feature: exon, cds: null })
+                      layoutRow?.push({ rowNum, feature: exon })
                     }
                   }
                   for (const cdsRow of cdsLocations) {
@@ -176,7 +172,7 @@ export function layoutsModelFactory(
                         featureLayout.set(rowNum, [])
                       }
                       const layoutRow = featureLayout.get(rowNum)
-                      layoutRow?.push({ rowNum, feature: child, cds })
+                      layoutRow?.push({ rowNum, feature: child })
                     }
                   }
                 }

package/src/LinearApolloSixFrameDisplay/stateModel/mouseEvents.ts

@@ -1,7 +1,4 @@
-import {
-  type AnnotationFeature,
-  type TranscriptPartCoding,
-} from '@apollo-annotation/mst'
+import { type AnnotationFeature } from '@apollo-annotation/mst'
 import {
   LocationEndChange,
   LocationStartChange,
@@ -9,56 +6,23 @@ import {
 import type PluginManager from '@jbrowse/core/PluginManager'
 import { type AnyConfigurationSchemaType } from '@jbrowse/core/configuration/configurationSchema'
 import { type MenuItem } from '@jbrowse/core/ui'
-import { type LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+import { getFrame } from '@jbrowse/core/util'
 import { autorun } from 'mobx'
 import { type Instance, addDisposer, cast } from 'mobx-state-tree'
 import { type CSSProperties } from 'react'
 
-import { type Edge, getPropagatedLocationChanges } from '../../util'
-import { type Coord } from '../components'
-import { type Glyph } from '../glyphs/Glyph'
+import {
+  type Edge,
+  type MousePosition,
+  type MousePositionWithFeature,
+  getMousePosition,
+  getPropagatedLocationChanges,
+  isMousePositionWithFeature,
+} from '../../util'
 import { type CanvasMouseEvent } from '../types'
 
 import { renderingModelFactory } from './rendering'
 
-export interface FeatureAndGlyphUnderMouse {
-  cds: TranscriptPartCoding | null
-  feature: AnnotationFeature
-  topLevelFeature: AnnotationFeature
-  glyph: Glyph
-}
-
-/** extended information about the position of the mouse on the canvas, including the refName, bp, and displayedRegion number */
-export interface MousePosition {
-  x: number
-  y: number
-  refName: string
-  bp: number
-  regionNumber: number
-  featureAndGlyphUnderMouse?: FeatureAndGlyphUnderMouse
-}
-
-export type MousePositionWithFeatureAndGlyph = Required<MousePosition>
-
-export function isMousePositionWithFeatureAndGlyph(
-  mousePosition: MousePosition,
-): mousePosition is MousePositionWithFeatureAndGlyph {
-  return 'featureAndGlyphUnderMouse' in mousePosition
-}
-
-function getMousePosition(
-  event: CanvasMouseEvent,
-  lgv: LinearGenomeViewModel,
-): MousePosition {
-  const canvas = event.currentTarget
-  const { clientX, clientY } = event
-  const { left, top } = canvas.getBoundingClientRect()
-  const x = clientX - left
-  const y = clientY - top
-  const { coord: bp, index: regionNumber, refName } = lgv.pxToBp(x)
-  return { x, y, refName, bp, regionNumber }
-}
-
 export function mouseEventsModelIntermediateFactory(
   pluginManager: PluginManager,
   configSchema: AnyConfigurationSchemaType,
@@ -80,10 +44,9 @@ export function mouseEventsModelIntermediateFactory(
         shrinkParent: boolean
       } | null,
       cursor: undefined as CSSProperties['cursor'] | undefined,
-      apolloHover: undefined as FeatureAndGlyphUnderMouse | undefined,
     }))
     .views((self) => ({
-      getMousePosition(event: CanvasMouseEvent): MousePosition {
+      getMousePosition(event: React.MouseEvent): MousePosition {
         const mousePosition = getMousePosition(event, self.lgv)
         const { bp, regionNumber, y } = mousePosition
         const row = Math.floor(y / self.apolloRowHeight) + 1
@@ -92,6 +55,11 @@ export function mouseEventsModelIntermediateFactory(
         if (!layoutRow) {
           return mousePosition
         }
+        const { featureTypeOntology } =
+          self.session.apolloDataStore.ontologyManager
+        if (!featureTypeOntology) {
+          throw new Error('featureTypeOntology is undefined')
+        }
         let foundFeature
         if (self.geneTrackRowNums.includes(row)) {
           foundFeature = layoutRow.find(
@@ -107,25 +75,44 @@ export function mouseEventsModelIntermediateFactory(
           }
         } else {
           foundFeature = layoutRow.find((f) => {
-            const featureID = f.feature.attributes.get('gff_id')?.toString()
-            return (
-              f.cds != null &&
-              bp >= f.cds.min &&
-              bp <= f.cds.max &&
-              (featureID === undefined ||
-                !self.filteredTranscripts.includes(featureID))
+            const { feature } = f
+            const featureID = feature.attributes.get('gff_id')?.toString()
+            const isTranscript = featureTypeOntology.isTypeOf(
+              feature.type,
+              'transcript',
             )
+            if (!isTranscript) {
+              return false
+            }
+            for (const loc of feature.cdsLocations) {
+              for (const cds of loc) {
+                let rowNum: number = getFrame(
+                  cds.min,
+                  cds.max,
+                  feature.strand ?? 1,
+                  cds.phase,
+                )
+                rowNum = self.featureLabelSpacer(
+                  rowNum < 0 ? -1 * rowNum + 5 : rowNum,
+                )
+                if (row === rowNum && bp >= cds.min && bp <= cds.max) {
+                  return (
+                    featureID === undefined ||
+                    !self.filteredTranscripts.includes(featureID)
+                  )
+                }
+              }
+            }
+            return false
           })
         }
         if (!foundFeature) {
           return mousePosition
         }
-        const { feature, cds } = foundFeature
-        const { topLevelFeature } = feature
-        const glyph = self.getGlyph(feature)
+        const { feature } = foundFeature
         return {
           ...mousePosition,
-          featureAndGlyphUnderMouse: { cds, feature, topLevelFeature, glyph },
+          feature,
         }
       },
     }))
@@ -144,9 +131,6 @@ export function mouseEventsModelIntermediateFactory(
       },
     }))
     .actions((self) => ({
-      setApolloHover(n?: (typeof self)['apolloHover']) {
-        self.apolloHover = n
-      },
       setCursor(cursor?: CSSProperties['cursor']) {
         if (self.cursor !== cursor) {
           self.cursor = cursor
@@ -172,21 +156,25 @@ export function mouseEventsModelFactory(
     mouseEventsModelIntermediateFactory(pluginManager, configSchema)
 
   return LinearApolloSixFrameDisplayMouseEvents.views((self) => ({
-    contextMenuItems(contextCoord?: Coord): MenuItem[] {
-      const { apolloHover } = self
-      if (!(apolloHover && contextCoord)) {
+    contextMenuItems(event: React.MouseEvent<HTMLDivElement>): MenuItem[] {
+      const { hoveredFeature } = self
+      if (!hoveredFeature) {
         return []
       }
-      const { topLevelFeature } = apolloHover
+      const mousePosition = self.getMousePosition(event)
+      const { topLevelFeature } = hoveredFeature.feature
       const glyph = self.getGlyph(topLevelFeature)
-      return glyph.getContextMenuItems(self)
+      if (isMousePositionWithFeature(mousePosition)) {
+        return glyph.getContextMenuItems(self, mousePosition)
+      }
+      return []
     },
   }))
     .actions((self) => ({
       // explicitly pass in a feature in case it's not the same as the one in
       // mousePosition (e.g. if features are drawn overlapping).
       startDrag(
-        mousePosition: MousePositionWithFeatureAndGlyph,
+        mousePosition: MousePositionWithFeature,
         feature: AnnotationFeature,
         edge: Edge,
         shrinkParent = false,
@@ -251,12 +239,9 @@ export function mouseEventsModelFactory(
     .actions((self) => ({
       onMouseDown(event: CanvasMouseEvent) {
         const mousePosition = self.getMousePosition(event)
-        if (isMousePositionWithFeatureAndGlyph(mousePosition)) {
-          mousePosition.featureAndGlyphUnderMouse.glyph.onMouseDown(
-            self,
-            mousePosition,
-            event,
-          )
+        if (isMousePositionWithFeature(mousePosition)) {
+          const glyph = self.getGlyph(mousePosition.feature)
+          glyph.onMouseDown(self, mousePosition, event)
         }
       },
       onMouseMove(event: CanvasMouseEvent) {
@@ -266,38 +251,29 @@ export function mouseEventsModelFactory(
           self.continueDrag(mousePosition, event)
           return
         }
-        if (isMousePositionWithFeatureAndGlyph(mousePosition)) {
-          mousePosition.featureAndGlyphUnderMouse.glyph.onMouseMove(
-            self,
-            mousePosition,
-            event,
-          )
+        if (isMousePositionWithFeature(mousePosition)) {
+          const glyph = self.getGlyph(mousePosition.feature)
+          glyph.onMouseMove(self, mousePosition, event)
         } else {
-          self.setApolloHover()
+          self.setHoveredFeature()
           self.setCursor()
         }
       },
       onMouseLeave(event: CanvasMouseEvent) {
         self.setDragging()
-        self.setApolloHover()
+        self.setHoveredFeature()
 
         const mousePosition = self.getMousePosition(event)
-        if (isMousePositionWithFeatureAndGlyph(mousePosition)) {
-          mousePosition.featureAndGlyphUnderMouse.glyph.onMouseLeave(
-            self,
-            mousePosition,
-            event,
-          )
+        if (isMousePositionWithFeature(mousePosition)) {
+          const glyph = self.getGlyph(mousePosition.feature)
+          glyph.onMouseLeave(self, mousePosition, event)
         }
       },
       onMouseUp(event: CanvasMouseEvent) {
         const mousePosition = self.getMousePosition(event)
-        if (isMousePositionWithFeatureAndGlyph(mousePosition)) {
-          mousePosition.featureAndGlyphUnderMouse.glyph.onMouseUp(
-            self,
-            mousePosition,
-            event,
-          )
+        if (isMousePositionWithFeature(mousePosition)) {
+          const glyph = self.getGlyph(mousePosition.feature)
+          glyph.onMouseUp(self, mousePosition, event)
         } else {
           self.setSelectedFeature()
         }
@@ -329,11 +305,11 @@ export function mouseEventsModelFactory(
                 self.featuresHeight,
               )
 
-              const { apolloDragging, apolloHover } = self
-              if (!apolloHover) {
+              const { apolloDragging, hoveredFeature } = self
+              if (!hoveredFeature) {
                 return
               }
-              const { glyph } = apolloHover
+              const glyph = self.getGlyph(hoveredFeature.feature)
 
               // draw mouseover hovers
               glyph.drawHover(self, ctx)

package/src/LinearApolloSixFrameDisplay/stateModel/rendering.ts

@@ -2,7 +2,7 @@
 import type PluginManager from '@jbrowse/core/PluginManager'
 import { type AnyConfigurationSchemaType } from '@jbrowse/core/configuration/configurationSchema'
 import { doesIntersect2 } from '@jbrowse/core/util'
-import { type Theme } from '@mui/material'
+import { type Theme, createTheme } from '@mui/material'
 import { autorun } from 'mobx'
 import { type Instance, addDisposer, types } from 'mobx-state-tree'
 
@@ -10,7 +10,7 @@ import { type ApolloSessionModel } from '../../session'
 
 import { layoutsModelFactory } from './layouts'
 
-export function renderingModelIntermediateFactory(
+export function renderingModelFactory(
   pluginManager: PluginManager,
   configSchema: AnyConfigurationSchemaType,
 ) {
@@ -23,11 +23,10 @@ export function renderingModelIntermediateFactory(
     'LinearApolloSixFrameDisplayRendering',
   )
     .props({
-      sequenceRowHeight: 15,
       apolloRowHeight: 20,
       detailsMinHeight: 200,
       detailsHeight: 200,
-      lastRowTooltipBufferHeight: 80,
+      lastRowTooltipBufferHeight: 120,
       isShown: true,
       filteredTranscripts: types.array(types.string),
     })
@@ -35,7 +34,7 @@ export function renderingModelIntermediateFactory(
       canvas: null as HTMLCanvasElement | null,
       overlayCanvas: null as HTMLCanvasElement | null,
       collaboratorCanvas: null as HTMLCanvasElement | null,
-      theme: undefined as Theme | undefined,
+      theme: createTheme(),
     }))
     .views((self) => ({
       get featuresHeight() {
@@ -70,6 +69,8 @@ export function renderingModelIntermediateFactory(
       setTheme(theme: Theme) {
         self.theme = theme
       },
+    }))
+    .actions((self) => ({
       afterAttach() {
         addDisposer(
           self,
@@ -130,69 +131,56 @@ export function renderingModelIntermediateFactory(
             { name: 'LinearApolloSixFrameDisplayRenderCollaborators' },
           ),
         )
-      },
-    }))
-}
-
-export function renderingModelFactory(
-  pluginManager: PluginManager,
-  configSchema: AnyConfigurationSchemaType,
-) {
-  const LinearApolloSixFrameDisplayRendering =
-    renderingModelIntermediateFactory(pluginManager, configSchema)
-
-  return LinearApolloSixFrameDisplayRendering.actions((self) => ({
-    afterAttach() {
-      addDisposer(
-        self,
-        autorun(
-          () => {
-            const { canvas, featureLayouts, featuresHeight, lgv } = self
-            if (!lgv.initialized || self.regionCannotBeRendered()) {
-              return
-            }
-            const { displayedRegions, dynamicBlocks } = lgv
+        addDisposer(
+          self,
+          autorun(
+            () => {
+              const { canvas, featureLayouts, featuresHeight, lgv } = self
+              if (!lgv.initialized || self.regionCannotBeRendered()) {
+                return
+              }
+              const { displayedRegions, dynamicBlocks } = lgv
 
-            const ctx = canvas?.getContext('2d')
-            if (!ctx) {
-              return
-            }
-            ctx.clearRect(0, 0, dynamicBlocks.totalWidthPx, featuresHeight)
-            for (const [idx, featureLayout] of featureLayouts.entries()) {
-              const displayedRegion = displayedRegions[idx]
-              for (const [row, featureLayoutRow] of featureLayout.entries()) {
-                for (const { feature } of featureLayoutRow) {
-                  if (!feature.looksLikeGene) {
-                    continue
-                  }
-                  if (
-                    !doesIntersect2(
-                      displayedRegion.start,
-                      displayedRegion.end,
-                      feature.min,
-                      feature.max,
-                    )
-                  ) {
-                    continue
-                  }
-                  const { topLevelFeature } = feature
-                  const glyph = self.getGlyph(topLevelFeature)
-                  if (glyph !== undefined) {
-                    glyph.draw(ctx, topLevelFeature, row, self, idx)
+              const ctx = canvas?.getContext('2d')
+              if (!ctx) {
+                return
+              }
+              ctx.clearRect(0, 0, dynamicBlocks.totalWidthPx, featuresHeight)
+              for (const [idx, featureLayout] of featureLayouts.entries()) {
+                const displayedRegion = displayedRegions[idx]
+                for (const [row, featureLayoutRow] of featureLayout.entries()) {
+                  for (const { feature } of featureLayoutRow) {
+                    if (!feature.looksLikeGene) {
+                      continue
+                    }
+                    if (
+                      !doesIntersect2(
+                        displayedRegion.start,
+                        displayedRegion.end,
+                        feature.min,
+                        feature.max,
+                      )
+                    ) {
+                      continue
+                    }
+                    const { topLevelFeature } = feature
+                    const glyph = self.getGlyph(topLevelFeature)
+                    if (glyph !== undefined) {
+                      glyph.draw(ctx, topLevelFeature, row, self, idx)
+                    }
                   }
                 }
               }
-            }
-          },
-          { name: 'LinearApolloSixFrameDisplayRenderFeatures' },
-        ),
-      )
-    },
-  }))
+            },
+            { name: 'LinearApolloSixFrameDisplayRenderFeatures' },
+          ),
+        )
+      },
+    }))
 }
 
 export type LinearApolloSixFrameDisplayRenderingModel = ReturnType<
-  typeof renderingModelIntermediateFactory
+  typeof renderingModelFactory
 >
 // eslint disable because of
 // https://mobx-state-tree.js.org/tips/typescript#using-a-mst-type-at-design-time