@apollo-annotation/jbrowse-plugin-apollo 0.3.6 → 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

@@ -10,6 +10,7 @@ import { type AnyConfigurationSchemaType } from '@jbrowse/core/configuration/con
 import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes'
 import {
   type AbstractSessionModel,
+  type SessionWithWidgets,
   getContainingView,
   getSession,
 } from '@jbrowse/core/util'
@@ -21,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
 
@@ -36,6 +38,9 @@ export function baseModelFactory(
       configuration: ConfigurationReference(configSchema),
       graphical: true,
       table: false,
+      showFeatureLabels: true,
+      showCheckResults: true,
+      zoomThreshold: 200,
       heightPreConfig: types.maybe(
         types.refinement(
           'displayHeight',
@@ -72,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() {
@@ -96,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
@@ -138,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) {
@@ -164,15 +176,24 @@ export function baseModelFactory(
         self.graphical = true
         self.table = true
       },
+      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 } = self
+          const { graphical, table, showFeatureLabels, showCheckResults } = self
           return [
             ...superTrackMenuItems(),
             {
@@ -203,6 +224,31 @@ export function baseModelFactory(
                     self.showGraphicalAndTable()
                   },
                 },
+                {
+                  label: 'Feature Labels',
+                  type: 'checkbox',
+                  checked: showFeatureLabels,
+                  onClick: () => {
+                    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 },
+                    ])
+                  },
+                },
               ],
             },
             {
@@ -236,6 +282,39 @@ 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],
+      ) {
+        const [region] = self.regions
+        const { assemblyName, refName } = region
+        const assembly = self.getAssemblyId(assemblyName)
+        if (!assembly) {
+          return
+        }
+        const { session } = self
+        const { changeManager } = session.apolloDataStore
+        const [widgetName, widgetId] = customWidgetNameAndId ?? [
+          'ApolloFeatureDetailsWidget',
+          'apolloFeatureDetailsWidget',
+        ]
+        const apolloFeatureWidget = (
+          session as unknown as SessionWithWidgets
+        ).addWidget(widgetName, widgetId, {
+          feature,
+          assembly,
+          refName,
+          changeManager,
+        })
+        ;(session as unknown as SessionWithWidgets).showWidget(
+          apolloFeatureWidget,
+        )
+      },
       afterAttach() {
         addDisposer(
           self,

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(
@@ -82,6 +78,9 @@ export function layoutsModelFactory(
       getGlyph(_feature: AnnotationFeature) {
         return geneGlyph
       },
+      featureLabelSpacer(elem: number): number {
+        return self.showFeatureLabels ? elem * 2 - 1 : elem
+      },
     }))
     .actions((self) => ({
       addSeenFeature(feature: AnnotationFeature) {
@@ -91,6 +90,11 @@ export function layoutsModelFactory(
         self.seenFeatures.delete(featureId)
       },
     }))
+    .views((self) => ({
+      get geneTrackRowNums() {
+        return [4, 5].map((elem) => self.featureLabelSpacer(elem))
+      },
+    }))
     .views((self) => ({
       get featureLayouts() {
         const { assemblyManager } =
@@ -120,12 +124,15 @@ export function layoutsModelFactory(
               throw new Error('featureTypeOntology is undefined')
             }
             if (feature.looksLikeGene) {
-              const rowNum = feature.strand == 1 ? 4 : 5
+              const rowNum =
+                feature.strand == 1
+                  ? self.geneTrackRowNums[0]
+                  : self.geneTrackRowNums[1]
               if (!featureLayout.get(rowNum)) {
                 featureLayout.set(rowNum, [])
               }
               const layoutRow = featureLayout.get(rowNum)
-              layoutRow?.push({ rowNum, feature, cds: null })
+              layoutRow?.push({ rowNum, feature })
               const { children } = feature
               if (!children) {
                 continue
@@ -142,9 +149,12 @@ export function layoutsModelFactory(
                       if (!featureTypeOntology.isTypeOf(exon.type, 'exon')) {
                         continue
                       }
-                      const rowNum = exon.strand == 1 ? 4 : 5
+                      const rowNum =
+                        exon.strand == 1
+                          ? 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) {
@@ -155,12 +165,14 @@ export function layoutsModelFactory(
                         strand ?? 1,
                         cds.phase,
                       )
-                      rowNum = rowNum < 0 ? -1 * rowNum + 5 : rowNum
+                      rowNum = self.featureLabelSpacer(
+                        rowNum < 0 ? -1 * rowNum + 5 : rowNum,
+                      )
                       if (!featureLayout.get(rowNum)) {
                         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,55 +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 } from 'mobx-state-tree'
+import { type Instance, addDisposer, cast } from 'mobx-state-tree'
 import { type CSSProperties } from 'react'
 
-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,
@@ -75,13 +40,13 @@ export function mouseEventsModelIntermediateFactory(
         start: MousePosition
         current: MousePosition
         feature: AnnotationFeature
-        edge: 'min' | 'max'
+        edge: Edge
+        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
@@ -90,8 +55,13 @@ export function mouseEventsModelIntermediateFactory(
         if (!layoutRow) {
           return mousePosition
         }
+        const { featureTypeOntology } =
+          self.session.apolloDataStore.ontologyManager
+        if (!featureTypeOntology) {
+          throw new Error('featureTypeOntology is undefined')
+        }
         let foundFeature
-        if ([4, 5].includes(row)) {
+        if (self.geneTrackRowNums.includes(row)) {
           foundFeature = layoutRow.find(
             (f) =>
               f.feature.type == 'exon' &&
@@ -104,19 +74,45 @@ export function mouseEventsModelIntermediateFactory(
             )
           }
         } else {
-          foundFeature = layoutRow.find(
-            (f) => f.cds != null && bp >= f.cds.min && bp <= f.cds.max,
-          )
+          foundFeature = layoutRow.find((f) => {
+            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,
         }
       },
     }))
@@ -135,14 +131,14 @@ export function mouseEventsModelIntermediateFactory(
       },
     }))
     .actions((self) => ({
-      setApolloHover(n?: (typeof self)['apolloHover']) {
-        self.apolloHover = n
-      },
       setCursor(cursor?: CSSProperties['cursor']) {
         if (self.cursor !== cursor) {
           self.cursor = cursor
         }
       },
+      updateFilteredTranscripts(forms: string[]): void {
+        self.filteredTranscripts = cast(forms)
+      },
     }))
     .actions(() => ({
       // onClick(event: CanvasMouseEvent) {
@@ -160,36 +156,43 @@ 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: 'min' | 'max',
+        edge: Edge,
+        shrinkParent = false,
       ) {
         self.apolloDragging = {
           start: mousePosition,
           current: mousePosition,
           feature,
           edge,
+          shrinkParent,
         }
       },
       endDrag() {
         if (!self.apolloDragging) {
           throw new Error('endDrag() called with no current drag in progress')
         }
-        const { current, edge, feature, start } = self.apolloDragging
+        const { current, edge, feature, start, shrinkParent } =
+          self.apolloDragging
         // don't do anything if it was only dragged a tiny bit
         if (Math.abs(current.x - start.x) <= 4) {
           self.setDragging()
@@ -199,33 +202,35 @@ export function mouseEventsModelFactory(
         const { displayedRegions } = self.lgv
         const region = displayedRegions[start.regionNumber]
         const assembly = self.getAssemblyId(region.assemblyName)
+        const changes = getPropagatedLocationChanges(
+          feature,
+          current.bp,
+          edge,
+          shrinkParent,
+        )
 
-        let change: LocationEndChange | LocationStartChange
-        if (edge === 'max') {
-          const featureId = feature._id
-          const oldEnd = feature.max
-          const newEnd = current.bp
-          change = new LocationEndChange({
-            typeName: 'LocationEndChange',
-            changedIds: [featureId],
-            featureId,
-            oldEnd,
-            newEnd,
-            assembly,
-          })
-        } else {
-          const featureId = feature._id
-          const oldStart = feature.min
-          const newStart = current.bp
-          change = new LocationStartChange({
-            typeName: 'LocationStartChange',
-            changedIds: [featureId],
-            featureId,
-            oldStart,
-            newStart,
-            assembly,
-          })
-        }
+        const change: LocationEndChange | LocationStartChange =
+          edge === 'max'
+            ? new LocationEndChange({
+                typeName: 'LocationEndChange',
+                changedIds: changes.map((c) => c.featureId),
+                changes: changes.map((c) => ({
+                  featureId: c.featureId,
+                  oldEnd: c.oldLocation,
+                  newEnd: c.newLocation,
+                })),
+                assembly,
+              })
+            : new LocationStartChange({
+                typeName: 'LocationStartChange',
+                changedIds: changes.map((c) => c.featureId),
+                changes: changes.map((c) => ({
+                  featureId: c.featureId,
+                  oldStart: c.oldLocation,
+                  newStart: c.newLocation,
+                })),
+                assembly,
+              })
         void self.changeManager.submit(change)
         self.setDragging()
         self.setCursor()
@@ -234,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) {
@@ -249,38 +251,31 @@ 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()
         }
 
         if (self.apolloDragging) {
@@ -310,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)