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

package/src/LinearApolloDisplay/glyphs/GenericChildGlyph.ts

@@ -1,9 +1,16 @@
-import { AnnotationFeature } from '@apollo-annotation/mst'
+import { type AnnotationFeature } from '@apollo-annotation/mst'
+import { type MenuItem } from '@jbrowse/core/ui'
 
-import { LinearApolloDisplay } from '../stateModel'
-import { boxGlyph, isSelectedFeature, drawBox } from './BoxGlyph'
-import { Glyph } from './Glyph'
-import { LinearApolloDisplayRendering } from '../stateModel/rendering'
+import { getFeaturesUnderClick } from '../../util/annotationFeatureUtils'
+import { type LinearApolloDisplay } from '../stateModel'
+import {
+  type LinearApolloDisplayMouseEvents,
+  type MousePositionWithFeatureAndGlyph,
+} from '../stateModel/mouseEvents'
+import { type LinearApolloDisplayRendering } from '../stateModel/rendering'
+
+import { boxGlyph, drawBox, isSelectedFeature } from './BoxGlyph'
+import { type Glyph } from './Glyph'
 
 function featuresForRow(feature: AnnotationFeature): AnnotationFeature[][] {
   const features = [[feature]]
@@ -129,12 +136,50 @@ function getRowForFeature(
   return
 }
 
+function getContextMenuItems(
+  display: LinearApolloDisplayMouseEvents,
+  mousePosition: MousePositionWithFeatureAndGlyph,
+): MenuItem[] {
+  const { apolloHover, session } = display
+  const menuItems: MenuItem[] = []
+  if (!apolloHover) {
+    return menuItems
+  }
+  const { feature: sourceFeature } = apolloHover
+  const { featureTypeOntology } = session.apolloDataStore.ontologyManager
+  if (!featureTypeOntology) {
+    throw new Error('featureTypeOntology is undefined')
+  }
+  const sourceFeatureMenuItems = boxGlyph.getContextMenuItems(
+    display,
+    mousePosition,
+  )
+  menuItems.push({
+    label: sourceFeature.type,
+    subMenu: sourceFeatureMenuItems,
+  })
+  for (const relative of getFeaturesUnderClick(mousePosition)) {
+    if (relative._id === sourceFeature._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,
@@ -147,6 +192,7 @@ export const genericChildGlyph: Glyph = {
   drawDragPreview,
   drawHover,
   drawTooltip,
+  getContextMenuItemsForFeature,
   getContextMenuItems,
   getFeatureFromLayout,
   getRowCount,

package/src/LinearApolloDisplay/glyphs/Glyph.ts

@@ -1,13 +1,13 @@
-import { AnnotationFeature } from '@apollo-annotation/mst'
-import { MenuItem } from '@jbrowse/core/ui'
+import { type AnnotationFeature } from '@apollo-annotation/mst'
+import { type MenuItem } from '@jbrowse/core/ui'
 
+import { type OntologyRecord } from '../../OntologyManager'
 import {
-  LinearApolloDisplayMouseEvents,
-  MousePositionWithFeatureAndGlyph,
+  type LinearApolloDisplayMouseEvents,
+  type MousePositionWithFeatureAndGlyph,
 } from '../stateModel/mouseEvents'
-import { LinearApolloDisplayRendering } from '../stateModel/rendering'
-import { CanvasMouseEvent } from '../types'
-import { OntologyRecord } from '../../OntologyManager'
+import { type LinearApolloDisplayRendering } from '../stateModel/rendering'
+import { type CanvasMouseEvent } from '../types'
 
 export interface Glyph {
   /** @returns number of layout rows used by this glyph with this feature and zoom level */
@@ -76,5 +76,13 @@ export interface Glyph {
     context: CanvasRenderingContext2D,
   ): void
 
-  getContextMenuItems(display: LinearApolloDisplayMouseEvents): MenuItem[]
+  getContextMenuItemsForFeature(
+    display: LinearApolloDisplayMouseEvents,
+    sourceFeature: AnnotationFeature,
+  ): MenuItem[]
+
+  getContextMenuItems(
+    display: LinearApolloDisplayMouseEvents,
+    currentMousePosition: MousePositionWithFeatureAndGlyph,
+  ): MenuItem[]
 }

package/src/LinearApolloDisplay/stateModel/base.ts

@@ -3,26 +3,27 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
-import { AnnotationFeature } from '@apollo-annotation/mst'
+import { type AnnotationFeature } from '@apollo-annotation/mst'
+import type PluginManager from '@jbrowse/core/PluginManager'
 import { ConfigurationReference, getConf } from '@jbrowse/core/configuration'
-import { AnyConfigurationSchemaType } from '@jbrowse/core/configuration/configurationSchema'
+import { type AnyConfigurationSchemaType } from '@jbrowse/core/configuration/configurationSchema'
 import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes'
-import PluginManager from '@jbrowse/core/PluginManager'
 import {
-  AbstractSessionModel,
+  type AbstractSessionModel,
+  type SessionWithWidgets,
   getContainingView,
   getSession,
 } from '@jbrowse/core/util'
 import { getParentRenderProps } from '@jbrowse/core/util/tracks'
 // import type LinearGenomeViewPlugin from '@jbrowse/plugin-linear-genome-view'
-import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+import { type LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 import { autorun } from 'mobx'
-import { addDisposer, cast, getRoot, types, getSnapshot } from 'mobx-state-tree'
+import { addDisposer, cast, getRoot, getSnapshot, types } from 'mobx-state-tree'
 
-import { ApolloInternetAccountModel } from '../../ApolloInternetAccount/model'
-import { ApolloSessionModel } from '../../session'
-import { ApolloRootModel } from '../../types'
+import { type ApolloInternetAccountModel } from '../../ApolloInternetAccount/model'
 import { FilterFeatures } from '../../components/FilterFeatures'
+import { type ApolloSessionModel } from '../../session'
+import { type ApolloRootModel } from '../../types'
 
 const minDisplayHeight = 20
 
@@ -36,6 +37,9 @@ export function baseModelFactory(
       configuration: ConfigurationReference(configSchema),
       graphical: true,
       table: false,
+      showStartCodons: false,
+      showStopCodons: true,
+      highContrast: false,
       heightPreConfig: types.maybe(
         types.refinement(
           'displayHeight',
@@ -168,6 +172,15 @@ export function baseModelFactory(
         self.graphical = true
         self.table = true
       },
+      toggleShowStartCodons() {
+        self.showStartCodons = !self.showStartCodons
+      },
+      toggleShowStopCodons() {
+        self.showStopCodons = !self.showStopCodons
+      },
+      toggleHighContrast() {
+        self.highContrast = !self.highContrast
+      },
       updateFilteredFeatureTypes(types: string[]) {
         self.filteredFeatureTypes = cast(types)
       },
@@ -179,7 +192,13 @@ export function baseModelFactory(
       const { filteredFeatureTypes, trackMenuItems: superTrackMenuItems } = self
       return {
         trackMenuItems() {
-          const { graphical, table } = self
+          const {
+            graphical,
+            table,
+            showStartCodons,
+            showStopCodons,
+            highContrast,
+          } = self
           return [
             ...superTrackMenuItems(),
             {
@@ -210,6 +229,30 @@ export function baseModelFactory(
                     self.showGraphicalAndTable()
                   },
                 },
+                {
+                  label: 'Show start codons',
+                  type: 'checkbox',
+                  checked: showStartCodons,
+                  onClick: () => {
+                    self.toggleShowStartCodons()
+                  },
+                },
+                {
+                  label: 'Show stop codons',
+                  type: 'checkbox',
+                  checked: showStopCodons,
+                  onClick: () => {
+                    self.toggleShowStopCodons()
+                  },
+                },
+                {
+                  label: 'Use high contrast colors',
+                  type: 'checkbox',
+                  checked: highContrast,
+                  onClick: () => {
+                    self.toggleHighContrast()
+                  },
+                },
               ],
             },
             {
@@ -243,6 +286,34 @@ export function baseModelFactory(
           self.session as unknown as ApolloSessionModel
         ).apolloSetSelectedFeature(feature)
       },
+      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/LinearApolloDisplay/stateModel/index.ts

@@ -1,8 +1,9 @@
-import { AnyConfigurationSchemaType } from '@jbrowse/core/configuration/configurationSchema'
-import PluginManager from '@jbrowse/core/PluginManager'
-import { Instance, types } from 'mobx-state-tree'
+import type PluginManager from '@jbrowse/core/PluginManager'
+import { type AnyConfigurationSchemaType } from '@jbrowse/core/configuration/configurationSchema'
+import { type Instance, types } from 'mobx-state-tree'
 
 import { TabularEditorStateModelType } from '../../TabularEditor'
+
 import { mouseEventsModelFactory } from './mouseEvents'
 
 export function stateModelFactory(

package/src/LinearApolloDisplay/stateModel/layouts.ts

@@ -1,16 +1,17 @@
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
 
-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'
+import { type AnnotationFeature } from '@apollo-annotation/mst'
+import type PluginManager from '@jbrowse/core/PluginManager'
+import { type AnyConfigurationSchemaType } from '@jbrowse/core/configuration/configurationSchema'
+import { type AbstractSessionModel, doesIntersect2 } from '@jbrowse/core/util'
 import { autorun, observable } from 'mobx'
 import { addDisposer, isAlive } from 'mobx-state-tree'
 
-import { ApolloSessionModel } from '../../session'
-import { baseModelFactory } from './base'
+import { type ApolloSessionModel } from '../../session'
 import { boxGlyph, geneGlyph, genericChildGlyph } from '../glyphs'
 
+import { baseModelFactory } from './base'
+
 function getRowsForFeature(
   startingRow: number,
   rowCount: number,
@@ -62,7 +63,7 @@ export function layoutsModelFactory(
         return self.seenFeatures.get(id)
       },
       getGlyph(feature: AnnotationFeature) {
-        if (this.looksLikeGene(feature)) {
+        if (feature.looksLikeGene) {
           return geneGlyph
         }
         if (feature.children?.size) {
@@ -70,38 +71,6 @@ export function layoutsModelFactory(
         }
         return boxGlyph
       },
-      looksLikeGene(feature: AnnotationFeature): boolean {
-        const { featureTypeOntology } =
-          self.session.apolloDataStore.ontologyManager
-        if (!featureTypeOntology) {
-          return false
-        }
-        const { children } = feature
-        if (!children?.size) {
-          return false
-        }
-        const isGene =
-          featureTypeOntology.isTypeOf(feature.type, 'gene') ||
-          featureTypeOntology.isTypeOf(feature.type, 'pseudogene')
-        if (!isGene) {
-          return false
-        }
-        for (const [, child] of children) {
-          if (
-            featureTypeOntology.isTypeOf(child.type, 'transcript') ||
-            featureTypeOntology.isTypeOf(child.type, 'pseudogenic_transcript')
-          ) {
-            const { children: grandChildren } = child
-            if (!grandChildren?.size) {
-              return false
-            }
-            return [...grandChildren.values()].some((grandchild) =>
-              featureTypeOntology.isTypeOf(grandchild.type, 'exon'),
-            )
-          }
-        }
-        return false
-      },
     }))
     .actions((self) => ({
       addSeenFeature(feature: AnnotationFeature) {

package/src/LinearApolloDisplay/stateModel/mouseEvents.ts

@@ -1,22 +1,23 @@
-import { AnnotationFeature } from '@apollo-annotation/mst'
+import { type AnnotationFeature } from '@apollo-annotation/mst'
 import {
   LocationEndChange,
   LocationStartChange,
 } from '@apollo-annotation/shared'
-import { AnyConfigurationSchemaType } from '@jbrowse/core/configuration/configurationSchema'
-import PluginManager from '@jbrowse/core/PluginManager'
-import { MenuItem } from '@jbrowse/core/ui'
-import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
-import { Theme } from '@mui/material'
+import type PluginManager from '@jbrowse/core/PluginManager'
+import { type AnyConfigurationSchemaType } from '@jbrowse/core/configuration/configurationSchema'
+import { type MenuItem } from '@jbrowse/core/ui'
+import { type Frame, getFrame } from '@jbrowse/core/util'
+import { type LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+import { type Theme } from '@mui/material'
 import { autorun } from 'mobx'
-import { Instance, addDisposer } from 'mobx-state-tree'
-import type { CSSProperties } from 'react'
+import { type Instance, addDisposer } from 'mobx-state-tree'
+import { type CSSProperties } from 'react'
+
+import { type Edge, getPropagatedLocationChanges } from '../../util'
+import { type Glyph } from '../glyphs/Glyph'
+import { type CanvasMouseEvent } from '../types'
 
-import { Coord } from '../components'
-import { Glyph } from '../glyphs/Glyph'
-import { CanvasMouseEvent } from '../types'
 import { renderingModelFactory } from './rendering'
-import { Frame, getFrame } from '@jbrowse/core/util'
 
 export interface FeatureAndGlyphUnderMouse {
   feature: AnnotationFeature
@@ -43,7 +44,7 @@ export function isMousePositionWithFeatureAndGlyph(
 }
 
 function getMousePosition(
-  event: CanvasMouseEvent,
+  event: React.MouseEvent,
   lgv: LinearGenomeViewModel,
 ): MousePosition {
   const canvas = event.currentTarget
@@ -124,13 +125,14 @@ 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)
@@ -195,6 +197,10 @@ export function mouseEventsModelIntermediateFactory(
           self.cursor = cursor
         }
       },
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      updateFilteredTranscripts(forms: string[]) {
+        return
+      },
     }))
     .actions(() => ({
       // onClick(event: CanvasMouseEvent) {
@@ -339,14 +345,18 @@ export function mouseEventsModelFactory(
   )
 
   return LinearApolloDisplayMouseEvents.views((self) => ({
-    contextMenuItems(contextCoord?: Coord): MenuItem[] {
+    contextMenuItems(event: React.MouseEvent<HTMLDivElement>): MenuItem[] {
       const { apolloHover } = self
-      if (!(apolloHover && contextCoord)) {
+      if (!apolloHover) {
         return []
       }
+      const mousePosition = self.getMousePosition(event)
       const { topLevelFeature } = apolloHover
       const glyph = self.getGlyph(topLevelFeature)
-      return glyph.getContextMenuItems(self)
+      if (isMousePositionWithFeatureAndGlyph(mousePosition)) {
+        return glyph.getContextMenuItems(self, mousePosition)
+      }
+      return []
     },
   }))
     .actions((self) => ({
@@ -355,20 +365,23 @@ export function mouseEventsModelFactory(
       startDrag(
         mousePosition: MousePositionWithFeatureAndGlyph,
         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()
@@ -378,33 +391,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()
@@ -460,6 +475,8 @@ export function mouseEventsModelFactory(
             mousePosition,
             event,
           )
+        } else {
+          self.setSelectedFeature()
         }
 
         if (self.apolloDragging) {