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

package/src/LinearApolloDisplay/glyphs/GenericChildGlyph.ts

@@ -1,9 +1,18 @@
 import { type AnnotationFeature } from '@apollo-annotation/mst'
+import { type MenuItem } from '@jbrowse/core/ui'
+import { alpha } from '@mui/material'
 
+import {
+  type MousePositionWithFeature,
+  containsSelectedFeature,
+  isMousePositionWithFeature,
+} from '../../util'
+import { getRelatedFeatures } from '../../util/annotationFeatureUtils'
 import { type LinearApolloDisplay } from '../stateModel'
+import { type LinearApolloDisplayMouseEvents } from '../stateModel/mouseEvents'
 import { type LinearApolloDisplayRendering } from '../stateModel/rendering'
 
-import { boxGlyph, drawBox, isSelectedFeature } from './BoxGlyph'
+import { boxGlyph, drawBox } from './BoxGlyph'
 import { type Glyph } from './Glyph'
 
 function featuresForRow(feature: AnnotationFeature): AnnotationFeature[][] {
@@ -27,9 +36,13 @@ function draw(
   stateModel: LinearApolloDisplayRendering,
   displayedRegionIndex: number,
 ) {
+  const { selectedFeature } = stateModel
   for (let i = 0; i < getRowCount(feature); i++) {
     drawRow(ctx, feature, row + i, row, stateModel, displayedRegionIndex)
   }
+  if (selectedFeature && containsSelectedFeature(feature, selectedFeature)) {
+    drawHighlight(stateModel, ctx, selectedFeature)
+  }
 }
 
 function drawRow(
@@ -53,7 +66,7 @@ function drawFeature(
   stateModel: LinearApolloDisplayRendering,
   displayedRegionIndex: number,
 ) {
-  const { apolloRowHeight: heightPx, lgv, session } = stateModel
+  const { apolloRowHeight: heightPx, lgv, theme } = stateModel
   const { bpPerPx, displayedRegions, offsetPx } = lgv
   const displayedRegion = displayedRegions[displayedRegionIndex]
   const minX =
@@ -63,13 +76,11 @@ function drawFeature(
       regionNumber: displayedRegionIndex,
     })?.offsetPx ?? 0) - offsetPx
   const { reversed } = displayedRegion
-  const { apolloSelectedFeature } = session
   const widthPx = feature.length / bpPerPx
   const startPx = reversed ? minX - widthPx : minX
   const top = row * heightPx
   const rowCount = getRowCount(feature)
-  const isSelected = isSelectedFeature(feature, apolloSelectedFeature)
-  const groupingColor = isSelected ? 'rgba(130,0,0,0.45)' : 'rgba(255,0,0,0.25)'
+  const groupingColor = alpha(theme.palette.background.paper, 0.6)
   if (rowCount > 1) {
     // draw background that encapsulates all child features
     const featureHeight = rowCount * heightPx
@@ -78,15 +89,14 @@ function drawFeature(
   boxGlyph.draw(ctx, feature, row, stateModel, displayedRegionIndex)
 }
 
-function drawHover(
-  stateModel: LinearApolloDisplay,
+function drawHighlight(
+  stateModel: LinearApolloDisplayRendering,
   ctx: CanvasRenderingContext2D,
+  feature: AnnotationFeature,
+  selected = false,
 ) {
-  const { apolloHover, apolloRowHeight, lgv } = stateModel
-  if (!apolloHover) {
-    return
-  }
-  const { feature } = apolloHover
+  const { apolloRowHeight, lgv, theme } = stateModel
+
   const position = stateModel.getFeatureLayoutPosition(feature)
   if (!position) {
     return
@@ -104,10 +114,23 @@ function drawHover(
     })?.offsetPx ?? 0) - offsetPx
   const top = (layoutRow + featureRow) * apolloRowHeight
   const widthPx = length / bpPerPx
-  ctx.fillStyle = 'rgba(0,0,0,0.2)'
+  ctx.fillStyle = selected
+    ? theme.palette.action.disabled
+    : theme.palette.action.focus
   ctx.fillRect(startPx, top, widthPx, apolloRowHeight * getRowCount(feature))
 }
 
+function drawHover(
+  stateModel: LinearApolloDisplay,
+  ctx: CanvasRenderingContext2D,
+) {
+  const { hoveredFeature } = stateModel
+  if (!hoveredFeature) {
+    return
+  }
+  drawHighlight(stateModel, ctx, hoveredFeature.feature)
+}
+
 function getFeatureFromLayout(
   feature: AnnotationFeature,
   bp: number,
@@ -130,12 +153,52 @@ function getRowForFeature(
   return
 }
 
+function getContextMenuItems(
+  display: LinearApolloDisplayMouseEvents,
+  mousePosition: MousePositionWithFeature,
+): MenuItem[] {
+  const { hoveredFeature, session } = display
+  const menuItems: MenuItem[] = []
+  if (!hoveredFeature) {
+    return menuItems
+  }
+  const { featureTypeOntology } = session.apolloDataStore.ontologyManager
+  if (!featureTypeOntology) {
+    throw new Error('featureTypeOntology is undefined')
+  }
+  const sourceFeatureMenuItems = boxGlyph.getContextMenuItems(
+    display,
+    mousePosition,
+  )
+  menuItems.push({
+    label: hoveredFeature.feature.type,
+    subMenu: sourceFeatureMenuItems,
+  })
+  if (isMousePositionWithFeature(mousePosition)) {
+    const { bp, feature } = mousePosition
+    for (const relative of getRelatedFeatures(feature, bp)) {
+      if (relative._id === hoveredFeature.feature._id) {
+        continue
+      }
+      const contextMenuItemsForFeature = boxGlyph.getContextMenuItemsForFeature(
+        display,
+        relative,
+      )
+      menuItems.push({
+        label: relative.type,
+        subMenu: contextMenuItemsForFeature,
+      })
+    }
+  }
+  return menuItems
+}
+
 // False positive here, none of these functions use "this"
 /* eslint-disable @typescript-eslint/unbound-method */
 const {
   drawDragPreview,
   drawTooltip,
-  getContextMenuItems,
+  getContextMenuItemsForFeature,
   onMouseDown,
   onMouseLeave,
   onMouseMove,
@@ -148,6 +211,7 @@ export const genericChildGlyph: Glyph = {
   drawDragPreview,
   drawHover,
   drawTooltip,
+  getContextMenuItemsForFeature,
   getContextMenuItems,
   getFeatureFromLayout,
   getRowCount,

package/src/LinearApolloDisplay/glyphs/Glyph.ts

@@ -2,10 +2,8 @@ import { type AnnotationFeature } from '@apollo-annotation/mst'
 import { type MenuItem } from '@jbrowse/core/ui'
 
 import { type OntologyRecord } from '../../OntologyManager'
-import {
-  type LinearApolloDisplayMouseEvents,
-  type MousePositionWithFeatureAndGlyph,
-} from '../stateModel/mouseEvents'
+import { type MousePositionWithFeature } from '../../util'
+import { type LinearApolloDisplayMouseEvents } from '../stateModel/mouseEvents'
 import { type LinearApolloDisplayRendering } from '../stateModel/rendering'
 import { type CanvasMouseEvent } from '../types'
 
@@ -49,25 +47,25 @@ export interface Glyph {
 
   onMouseDown(
     display: LinearApolloDisplayMouseEvents,
-    currentMousePosition: MousePositionWithFeatureAndGlyph,
+    currentMousePosition: MousePositionWithFeature,
     event: CanvasMouseEvent,
   ): void
 
   onMouseMove(
     display: LinearApolloDisplayMouseEvents,
-    currentMousePosition: MousePositionWithFeatureAndGlyph,
+    currentMousePosition: MousePositionWithFeature,
     event: CanvasMouseEvent,
   ): void
 
   onMouseLeave(
     display: LinearApolloDisplayMouseEvents,
-    currentMousePosition: MousePositionWithFeatureAndGlyph,
+    currentMousePosition: MousePositionWithFeature,
     event: CanvasMouseEvent,
   ): void
 
   onMouseUp(
     display: LinearApolloDisplayMouseEvents,
-    currentMousePosition: MousePositionWithFeatureAndGlyph,
+    currentMousePosition: MousePositionWithFeature,
     event: CanvasMouseEvent,
   ): void
 
@@ -76,5 +74,13 @@ export interface Glyph {
     context: CanvasRenderingContext2D,
   ): void
 
-  getContextMenuItems(display: LinearApolloDisplayMouseEvents): MenuItem[]
+  getContextMenuItemsForFeature(
+    display: LinearApolloDisplayMouseEvents,
+    sourceFeature: AnnotationFeature,
+  ): MenuItem[]
+
+  getContextMenuItems(
+    display: LinearApolloDisplayMouseEvents,
+    currentMousePosition: MousePositionWithFeature,
+  ): MenuItem[]
 }

package/src/LinearApolloDisplay/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,9 +38,8 @@ export function baseModelFactory(
       configuration: ConfigurationReference(configSchema),
       graphical: true,
       table: false,
-      showStartCodons: false,
-      showStopCodons: true,
-      highContrast: false,
+      showCheckResults: true,
+      zoomThreshold: 200,
       heightPreConfig: types.maybe(
         types.refinement(
           'displayHeight',
@@ -73,16 +74,19 @@ export function baseModelFactory(
           return self.heightPreConfig
         }
         if (self.graphical && self.table) {
-          return 500
+          return 400
         }
         if (self.graphical) {
-          return 200
+          return 100
         }
-        return 300
+        return 200
       },
       get loading() {
         return self.loadingState
       },
+      get zoomThresholdSetting() {
+        return self.zoomThreshold ?? getConf(self, 'zoomThreshold')
+      },
     }))
     .views((self) => ({
       get rendererTypeName() {
@@ -103,7 +107,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
@@ -145,6 +149,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) {
@@ -171,14 +179,8 @@ export function baseModelFactory(
         self.graphical = true
         self.table = true
       },
-      toggleShowStartCodons() {
-        self.showStartCodons = !self.showStartCodons
-      },
-      toggleShowStopCodons() {
-        self.showStopCodons = !self.showStopCodons
-      },
-      toggleHighContrast() {
-        self.highContrast = !self.highContrast
+      toggleShowCheckResults() {
+        self.showCheckResults = !self.showCheckResults
       },
       updateFilteredFeatureTypes(types: string[]) {
         self.filteredFeatureTypes = cast(types)
@@ -186,18 +188,15 @@ export function baseModelFactory(
       setLoading(loading: boolean) {
         self.loadingState = loading
       },
+      setZoomThresholdSetting({ zoomThreshold }: { zoomThreshold: number }) {
+        self.zoomThreshold = zoomThreshold
+      },
     }))
     .views((self) => {
       const { filteredFeatureTypes, trackMenuItems: superTrackMenuItems } = self
       return {
         trackMenuItems() {
-          const {
-            graphical,
-            table,
-            showStartCodons,
-            showStopCodons,
-            highContrast,
-          } = self
+          const { graphical, table, showCheckResults } = self
           return [
             ...superTrackMenuItems(),
             {
@@ -229,27 +228,20 @@ export function baseModelFactory(
                   },
                 },
                 {
-                  label: 'Show start codons',
+                  label: 'Check Results',
                   type: 'checkbox',
-                  checked: showStartCodons,
+                  checked: showCheckResults,
                   onClick: () => {
-                    self.toggleShowStartCodons()
+                    self.toggleShowCheckResults()
                   },
                 },
                 {
-                  label: 'Show stop codons',
-                  type: 'checkbox',
-                  checked: showStopCodons,
+                  label: 'Change zoom threshold',
                   onClick: () => {
-                    self.toggleShowStopCodons()
-                  },
-                },
-                {
-                  label: 'Use high contrast colors',
-                  type: 'checkbox',
-                  checked: highContrast,
-                  onClick: () => {
-                    self.toggleHighContrast()
+                    getSession(self).queueDialog((handleClose) => [
+                      EditZoomThresholdDialog,
+                      { model: self, handleClose },
+                    ])
                   },
                 },
               ],
@@ -285,6 +277,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,
@@ -303,11 +328,6 @@ export function baseModelFactory(
                     self.setLoading(false)
                   }, 1000)
                 })
-              if (self.lgv.bpPerPx <= 3) {
-                void (
-                  self.session as unknown as ApolloSessionModel
-                ).apolloDataStore.loadRefSeq(self.regions)
-              }
             },
             { name: 'LinearApolloDisplayLoadFeatures', delay: 1000 },
           ),

package/src/LinearApolloDisplay/stateModel/layouts.ts

@@ -63,10 +63,11 @@ export function layoutsModelFactory(
         return self.seenFeatures.get(id)
       },
       getGlyph(feature: AnnotationFeature) {
-        if (feature.looksLikeGene) {
+        const { topLevelFeature } = feature
+        if (topLevelFeature.looksLikeGene) {
           return geneGlyph
         }
-        if (feature.children?.size) {
+        if (topLevelFeature.children?.size) {
           return genericChildGlyph
         }
         return boxGlyph