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

package/src/LinearApolloDisplay/glyphs/GenericChildGlyph.ts

@@ -1,15 +1,18 @@
 import { type AnnotationFeature } from '@apollo-annotation/mst'
 import { type MenuItem } from '@jbrowse/core/ui'
+import { alpha } from '@mui/material'
 
-import { getFeaturesUnderClick } from '../../util/annotationFeatureUtils'
-import { type LinearApolloDisplay } from '../stateModel'
 import {
-  type LinearApolloDisplayMouseEvents,
-  type MousePositionWithFeatureAndGlyph,
-} from '../stateModel/mouseEvents'
+  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[][] {
@@ -33,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(
@@ -59,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 =
@@ -69,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
@@ -84,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
@@ -110,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,
@@ -138,14 +155,13 @@ function getRowForFeature(
 
 function getContextMenuItems(
   display: LinearApolloDisplayMouseEvents,
-  mousePosition: MousePositionWithFeatureAndGlyph,
+  mousePosition: MousePositionWithFeature,
 ): MenuItem[] {
-  const { apolloHover, session } = display
+  const { hoveredFeature, session } = display
   const menuItems: MenuItem[] = []
-  if (!apolloHover) {
+  if (!hoveredFeature) {
     return menuItems
   }
-  const { feature: sourceFeature } = apolloHover
   const { featureTypeOntology } = session.apolloDataStore.ontologyManager
   if (!featureTypeOntology) {
     throw new Error('featureTypeOntology is undefined')
@@ -155,21 +171,24 @@ function getContextMenuItems(
     mousePosition,
   )
   menuItems.push({
-    label: sourceFeature.type,
+    label: hoveredFeature.feature.type,
     subMenu: sourceFeatureMenuItems,
   })
-  for (const relative of getFeaturesUnderClick(mousePosition)) {
-    if (relative._id === sourceFeature._id) {
-      continue
+  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,
+      })
     }
-    const contextMenuItemsForFeature = boxGlyph.getContextMenuItemsForFeature(
-      display,
-      relative,
-    )
-    menuItems.push({
-      label: relative.type,
-      subMenu: contextMenuItemsForFeature,
-    })
   }
   return menuItems
 }

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
 
@@ -83,6 +81,6 @@ export interface Glyph {
 
   getContextMenuItems(
     display: LinearApolloDisplayMouseEvents,
-    currentMousePosition: MousePositionWithFeatureAndGlyph,
+    currentMousePosition: MousePositionWithFeature,
   ): MenuItem[]
 }

package/src/LinearApolloDisplay/glyphs/util.ts

@@ -0,0 +1,19 @@
+import { type ContentBlock } from '@jbrowse/core/util/blockTypes'
+
+import { type LinearApolloDisplay } from '../stateModel'
+
+export function getLeftPx(
+  display: LinearApolloDisplay,
+  feature: { max: number; min: number },
+  block: ContentBlock,
+) {
+  const { lgv } = display
+  const { bpPerPx, offsetPx } = lgv
+  const blockLeftPx = block.offsetPx - offsetPx
+  const featureLeftBpDistanceFromBlockLeftBp = block.reversed
+    ? block.end - feature.max
+    : feature.min - block.start
+  const featureLeftPxDistanceFromBlockLeftPx =
+    featureLeftBpDistanceFromBlockLeftBp / bpPerPx
+  return blockLeftPx + featureLeftPxDistanceFromBlockLeftPx
+}

package/src/LinearApolloDisplay/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
 
@@ -37,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',
@@ -74,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() {
@@ -104,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
@@ -146,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) {
@@ -172,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)
@@ -187,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(),
             {
@@ -230,27 +228,20 @@ export function baseModelFactory(
                   },
                 },
                 {
-                  label: 'Show start codons',
-                  type: 'checkbox',
-                  checked: showStartCodons,
-                  onClick: () => {
-                    self.toggleShowStartCodons()
-                  },
-                },
-                {
-                  label: 'Show stop codons',
+                  label: 'Check Results',
                   type: 'checkbox',
-                  checked: showStopCodons,
+                  checked: showCheckResults,
                   onClick: () => {
-                    self.toggleShowStopCodons()
+                    self.toggleShowCheckResults()
                   },
                 },
                 {
-                  label: 'Use high contrast colors',
-                  type: 'checkbox',
-                  checked: highContrast,
+                  label: 'Change zoom threshold',
                   onClick: () => {
-                    self.toggleHighContrast()
+                    getSession(self).queueDialog((handleClose) => [
+                      EditZoomThresholdDialog,
+                      { model: self, handleClose },
+                    ])
                   },
                 },
               ],
@@ -286,6 +277,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],
@@ -332,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