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

package/src/FeatureDetailsWidget/TranscriptWidgetSummary.tsx

@@ -37,6 +37,10 @@ export const TranscriptWidgetSummary = observer(
               <TableCell>{getFeatureId(feature)}</TableCell>
             </TableRow>
           )}
+          <TableRow>
+            <HeaderTableCell>Type</HeaderTableCell>
+            <TableCell>{feature.type}</TableCell>
+          </TableRow>
           <TableRow>
             <HeaderTableCell>Location</HeaderTableCell>
             <TableCell>

package/src/LinearApolloDisplay/components/LinearApolloDisplay.tsx

@@ -139,7 +139,7 @@ export const LinearApolloDisplay = observer(function LinearApolloDisplay(
           } else {
             const coord: [number, number] = [event.clientX, event.clientY]
             setContextCoord(coord)
-            setContextMenuItems(getContextMenuItems(coord))
+            setContextMenuItems(getContextMenuItems(event))
           }
         }}
       >

package/src/LinearApolloDisplay/glyphs/BoxGlyph.ts

@@ -1,10 +1,6 @@
 import { type AnnotationFeature } from '@apollo-annotation/mst'
 import { type MenuItem } from '@jbrowse/core/ui'
-import {
-  type AbstractSessionModel,
-  type SessionWithWidgets,
-  isSessionModelWithWidgets,
-} from '@jbrowse/core/util'
+import { type AbstractSessionModel } from '@jbrowse/core/util'
 import { type Theme, alpha } from '@mui/material'
 
 import { AddChildFeature, CopyFeature, DeleteFeature } from '../../components'
@@ -257,9 +253,39 @@ export function drawBox(
 
 function getContextMenuItems(
   display: LinearApolloDisplayMouseEvents,
+): MenuItem[] {
+  const { apolloHover } = display
+  if (!apolloHover) {
+    return []
+  }
+  const { feature: sourceFeature } = apolloHover
+  return getContextMenuItemsForFeature(display, sourceFeature)
+}
+
+function makeFeatureLabel(feature: AnnotationFeature) {
+  let name: string | undefined
+  if (feature.attributes.get('gff_name')) {
+    name = feature.attributes.get('gff_name')?.join(',')
+  } else if (feature.attributes.get('gff_id')) {
+    name = feature.attributes.get('gff_id')?.join(',')
+  } else {
+    name = feature._id
+  }
+  const coords = `(${(feature.min + 1).toLocaleString('en')}..${feature.max.toLocaleString('en')})`
+  const maxLen = 60
+  if (name && name.length + coords.length > maxLen + 5) {
+    const trim = maxLen - coords.length
+    name = trim > 0 ? name.slice(0, trim) : ''
+    name = `${name}[...]`
+  }
+  return `${name} ${coords}`
+}
+
+function getContextMenuItemsForFeature(
+  display: LinearApolloDisplayMouseEvents,
+  sourceFeature: AnnotationFeature,
 ): MenuItem[] {
   const {
-    apolloHover,
     apolloInternetAccount: internetAccount,
     changeManager,
     regions,
@@ -267,17 +293,23 @@ function getContextMenuItems(
     session,
   } = display
   const menuItems: MenuItem[] = []
-  if (!apolloHover) {
-    return menuItems
-  }
-  const { feature: sourceFeature } = apolloHover
   const role = internetAccount ? internetAccount.role : 'admin'
   const admin = role === 'admin'
   const readOnly = !(role && ['admin', 'user'].includes(role))
   const [region] = regions
   const sourceAssemblyId = display.getAssemblyId(region.assemblyName)
   const currentAssemblyId = display.getAssemblyId(region.assemblyName)
+  const { featureTypeOntology } = session.apolloDataStore.ontologyManager
+  if (!featureTypeOntology) {
+    throw new Error('featureTypeOntology is undefined')
+  }
+
+  // Add only relevant options
   menuItems.push(
+    {
+      label: makeFeatureLabel(sourceFeature),
+      type: 'subHeader',
+    },
     {
       label: 'Add child feature',
       disabled: readOnly,
@@ -343,55 +375,7 @@ function getContextMenuItems(
         )
       },
     },
-    {
-      label: 'Edit feature details',
-      onClick: () => {
-        const apolloFeatureWidget = (
-          session as unknown as SessionWithWidgets
-        ).addWidget(
-          'ApolloFeatureDetailsWidget',
-          'apolloFeatureDetailsWidget',
-          {
-            feature: sourceFeature,
-            assembly: currentAssemblyId,
-            refName: region.refName,
-          },
-        )
-        ;(session as unknown as SessionWithWidgets).showWidget(
-          apolloFeatureWidget,
-        )
-      },
-    },
   )
-  const { featureTypeOntology } = session.apolloDataStore.ontologyManager
-  if (!featureTypeOntology) {
-    throw new Error('featureTypeOntology is undefined')
-  }
-  if (
-    (featureTypeOntology.isTypeOf(sourceFeature.type, 'transcript') ||
-      featureTypeOntology.isTypeOf(
-        sourceFeature.type,
-        'pseudogenic_transcript',
-      )) &&
-    isSessionModelWithWidgets(session)
-  ) {
-    menuItems.push({
-      label: 'Edit transcript details',
-      onClick: () => {
-        const apolloTranscriptWidget = session.addWidget(
-          'ApolloTranscriptDetails',
-          'apolloTranscriptDetails',
-          {
-            feature: sourceFeature,
-            assembly: currentAssemblyId,
-            changeManager,
-            refName: region.refName,
-          },
-        )
-        session.showWidget(apolloTranscriptWidget)
-      },
-    })
-  }
   return menuItems
 }
 
@@ -459,9 +443,12 @@ function onMouseUp(
     return
   }
   const { featureAndGlyphUnderMouse } = mousePosition
-  if (featureAndGlyphUnderMouse?.feature) {
-    stateModel.setSelectedFeature(featureAndGlyphUnderMouse.feature)
+  if (!featureAndGlyphUnderMouse) {
+    return
   }
+  const { feature } = featureAndGlyphUnderMouse
+  stateModel.setSelectedFeature(feature)
+  stateModel.showFeatureDetailsWidget(feature)
 }
 
 /** @returns undefined if mouse not on the edge of this feature, otherwise 'start' or 'end' depending on which edge */
@@ -496,6 +483,7 @@ export const boxGlyph: Glyph = {
   drawDragPreview,
   drawHover,
   drawTooltip,
+  getContextMenuItemsForFeature,
   getContextMenuItems,
   getFeatureFromLayout,
   getRowCount,

package/src/LinearApolloDisplay/glyphs/GeneGlyph.ts

@@ -1,10 +1,21 @@
 import { type AnnotationFeature } from '@apollo-annotation/mst'
-import { getFrame, intersection2 } from '@jbrowse/core/util'
+import { type MenuItem } from '@jbrowse/core/ui'
+import {
+  type AbstractSessionModel,
+  getFrame,
+  intersection2,
+  isSessionModelWithWidgets,
+} from '@jbrowse/core/util'
 import { alpha } from '@mui/material'
 
 import { type OntologyRecord } from '../../OntologyManager'
+import { MergeExons, MergeTranscripts, SplitExon } from '../../components'
+import { type ApolloSessionModel } from '../../session'
+import { getMinAndMaxPx, getOverlappingEdge } from '../../util'
+import { getFeaturesUnderClick } from '../../util/annotationFeatureUtils'
 import { type LinearApolloDisplay } from '../stateModel'
 import {
+  type LinearApolloDisplayMouseEvents,
   type MousePosition,
   type MousePositionWithFeatureAndGlyph,
   isMousePositionWithFeatureAndGlyph,
@@ -19,7 +30,10 @@ let forwardFillLight: CanvasPattern | null = null
 let backwardFillLight: CanvasPattern | null = null
 let forwardFillDark: CanvasPattern | null = null
 let backwardFillDark: CanvasPattern | null = null
-if ('document' in globalThis) {
+const canvas = globalThis.document.createElement('canvas')
+// @ts-expect-error getContext is undefined in the web worker
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+if (canvas?.getContext) {
   for (const direction of ['forward', 'backward']) {
     for (const themeMode of ['light', 'dark']) {
       const canvas = document.createElement('canvas')
@@ -619,6 +633,7 @@ function onMouseDown(
       currentMousePosition,
       draggableFeature.feature,
       draggableFeature.edge,
+      true,
     )
   }
 }
@@ -652,8 +667,39 @@ function onMouseUp(
     return
   }
   const { featureAndGlyphUnderMouse } = mousePosition
-  if (featureAndGlyphUnderMouse?.feature) {
-    stateModel.setSelectedFeature(featureAndGlyphUnderMouse.feature)
+  if (!featureAndGlyphUnderMouse) {
+    return
+  }
+  const { feature } = featureAndGlyphUnderMouse
+  stateModel.setSelectedFeature(feature)
+  const { session } = stateModel
+  const { apolloDataStore } = session
+  const { featureTypeOntology } = apolloDataStore.ontologyManager
+  if (!featureTypeOntology) {
+    throw new Error('featureTypeOntology is undefined')
+  }
+
+  let containsCDSOrExon = false
+  for (const [, child] of feature.children ?? []) {
+    if (
+      featureTypeOntology.isTypeOf(child.type, 'CDS') ||
+      featureTypeOntology.isTypeOf(child.type, 'exon')
+    ) {
+      containsCDSOrExon = true
+      break
+    }
+  }
+  if (
+    (featureTypeOntology.isTypeOf(feature.type, 'transcript') ||
+      featureTypeOntology.isTypeOf(feature.type, 'pseudogenic_transcript')) &&
+    containsCDSOrExon
+  ) {
+    stateModel.showFeatureDetailsWidget(feature, [
+      'ApolloTranscriptDetails',
+      'apolloTranscriptDetails',
+    ])
+  } else {
+    stateModel.showFeatureDetailsWidget(feature)
   }
 }
 
@@ -674,31 +720,18 @@ function getDraggableFeatureInfo(
   const isTranscript =
     featureTypeOntology.isTypeOf(feature.type, 'transcript') ||
     featureTypeOntology.isTypeOf(feature.type, 'pseudogenic_transcript')
-  const isCds = featureTypeOntology.isTypeOf(feature.type, 'CDS')
+  const isCDS = featureTypeOntology.isTypeOf(feature.type, 'CDS')
   if (isGene || isTranscript) {
+    // For gene glyphs, the sizes of genes and transcripts are determined by
+    // their child exons, so we don't make them draggable
     return
   }
+  // So now the type of feature is either CDS or exon. If an exon and CDS edge
+  // are in the same place, we want to prioritize dragging the exon. If the
+  // feature we're on is a CDS, let's find any exon it may overlap.
   const { bp, refName, regionNumber, x } = mousePosition
   const { lgv } = stateModel
-  const { offsetPx } = lgv
-
-  const minPxInfo = lgv.bpToPx({ refName, coord: feature.min, regionNumber })
-  const maxPxInfo = lgv.bpToPx({ refName, coord: feature.max, regionNumber })
-  if (minPxInfo === undefined || maxPxInfo === undefined) {
-    return
-  }
-  const minPx = minPxInfo.offsetPx - offsetPx
-  const maxPx = maxPxInfo.offsetPx - offsetPx
-  if (Math.abs(maxPx - minPx) < 8) {
-    return
-  }
-  if (Math.abs(minPx - x) < 4) {
-    return { feature, edge: 'min' }
-  }
-  if (Math.abs(maxPx - x) < 4) {
-    return { feature, edge: 'max' }
-  }
-  if (isCds) {
+  if (isCDS) {
     const transcript = feature.parent
     if (!transcript?.children) {
       return
@@ -710,46 +743,205 @@ function getDraggableFeatureInfo(
         exonChildren.push(child)
       }
     }
-
     const overlappingExon = exonChildren.find((child) => {
       const [start, end] = intersection2(bp - 1, bp, child.min, child.max)
       return start !== undefined && end !== undefined
     })
-
-    if (!overlappingExon) {
-      return
-    }
-    const minPxInfo = lgv.bpToPx({
-      refName,
-      coord: overlappingExon.min,
-      regionNumber,
-    })
-    const maxPxInfo = lgv.bpToPx({
-      refName,
-      coord: overlappingExon.max,
-      regionNumber,
-    })
-    if (minPxInfo === undefined || maxPxInfo === undefined) {
-      return
+    if (overlappingExon) {
+      // We are on an exon, are we on the edge of it?
+      const minMax = getMinAndMaxPx(overlappingExon, refName, regionNumber, lgv)
+      if (minMax) {
+        const overlappingEdge = getOverlappingEdge(overlappingExon, x, minMax)
+        if (overlappingEdge) {
+          return overlappingEdge
+        }
+      }
     }
-    const minPx = minPxInfo.offsetPx - offsetPx
-    const maxPx = maxPxInfo.offsetPx - offsetPx
-    if (Math.abs(maxPx - minPx) < 8) {
-      return
+  }
+  // End of special cases, let's see if we're on the edge of this CDS or exon
+  const minMax = getMinAndMaxPx(feature, refName, regionNumber, lgv)
+  if (minMax) {
+    const overlappingEdge = getOverlappingEdge(feature, x, minMax)
+    if (overlappingEdge) {
+      return overlappingEdge
     }
-    if (Math.abs(minPx - x) < 4) {
-      return { feature: overlappingExon, edge: 'min' }
+  }
+  return
+}
+
+function isTranscriptFeature(
+  feature: AnnotationFeature,
+  session: ApolloSessionModel,
+): boolean {
+  const { featureTypeOntology } = session.apolloDataStore.ontologyManager
+  if (!featureTypeOntology) {
+    throw new Error('featureTypeOntology is undefined')
+  }
+  return (
+    featureTypeOntology.isTypeOf(feature.type, 'transcript') ||
+    featureTypeOntology.isTypeOf(feature.type, 'pseudogenic_transcript')
+  )
+}
+
+function isExonFeature(
+  feature: AnnotationFeature,
+  session: ApolloSessionModel,
+): boolean {
+  const { featureTypeOntology } = session.apolloDataStore.ontologyManager
+  if (!featureTypeOntology) {
+    throw new Error('featureTypeOntology is undefined')
+  }
+  return featureTypeOntology.isTypeOf(feature.type, 'exon')
+}
+
+function isCDSFeature(
+  feature: AnnotationFeature,
+  session: ApolloSessionModel,
+): boolean {
+  const { featureTypeOntology } = session.apolloDataStore.ontologyManager
+  if (!featureTypeOntology) {
+    throw new Error('featureTypeOntology is undefined')
+  }
+  return featureTypeOntology.isTypeOf(feature.type, 'CDS')
+}
+
+function getContextMenuItems(
+  display: LinearApolloDisplayMouseEvents,
+  mousePosition: MousePositionWithFeatureAndGlyph,
+): MenuItem[] {
+  const {
+    apolloInternetAccount: internetAccount,
+    apolloHover,
+    changeManager,
+    regions,
+    selectedFeature,
+    session,
+  } = display
+  const [region] = regions
+  const currentAssemblyId = display.getAssemblyId(region.assemblyName)
+  const menuItems: MenuItem[] = []
+  const role = internetAccount ? internetAccount.role : 'admin'
+  const admin = role === 'admin'
+  if (!apolloHover) {
+    return menuItems
+  }
+
+  let featuresUnderClick = getFeaturesUnderClick(mousePosition)
+  if (isCDSFeature(mousePosition.featureAndGlyphUnderMouse.feature, session)) {
+    featuresUnderClick = getFeaturesUnderClick(mousePosition, true)
+  }
+
+  for (const feature of featuresUnderClick) {
+    const contextMenuItemsForFeature = boxGlyph.getContextMenuItemsForFeature(
+      display,
+      feature,
+    )
+    if (isExonFeature(feature, session)) {
+      contextMenuItemsForFeature.push(
+        {
+          label: 'Merge exons',
+          disabled: !admin,
+          onClick: () => {
+            ;(session as unknown as AbstractSessionModel).queueDialog(
+              (doneCallback) => [
+                MergeExons,
+                {
+                  session,
+                  handleClose: () => {
+                    doneCallback()
+                  },
+                  changeManager,
+                  sourceFeature: feature,
+                  sourceAssemblyId: currentAssemblyId,
+                  selectedFeature,
+                  setSelectedFeature: (feature?: AnnotationFeature) => {
+                    display.setSelectedFeature(feature)
+                  },
+                },
+              ],
+            )
+          },
+        },
+        {
+          label: 'Split exon',
+          disabled: !admin,
+          onClick: () => {
+            ;(session as unknown as AbstractSessionModel).queueDialog(
+              (doneCallback) => [
+                SplitExon,
+                {
+                  session,
+                  handleClose: () => {
+                    doneCallback()
+                  },
+                  changeManager,
+                  sourceFeature: feature,
+                  sourceAssemblyId: currentAssemblyId,
+                  selectedFeature,
+                  setSelectedFeature: (feature?: AnnotationFeature) => {
+                    display.setSelectedFeature(feature)
+                  },
+                },
+              ],
+            )
+          },
+        },
+      )
     }
-    if (Math.abs(maxPx - x) < 4) {
-      return { feature: overlappingExon, edge: 'max' }
+    if (isTranscriptFeature(feature, session)) {
+      contextMenuItemsForFeature.push({
+        label: 'Merge transcript',
+        onClick: () => {
+          ;(session as unknown as AbstractSessionModel).queueDialog(
+            (doneCallback) => [
+              MergeTranscripts,
+              {
+                session,
+                handleClose: () => {
+                  doneCallback()
+                },
+                changeManager,
+                sourceFeature: feature,
+                sourceAssemblyId: currentAssemblyId,
+                selectedFeature,
+                setSelectedFeature: (feature?: AnnotationFeature) => {
+                  display.setSelectedFeature(feature)
+                },
+              },
+            ],
+          )
+        },
+      })
+      if (isSessionModelWithWidgets(session)) {
+        contextMenuItemsForFeature.push({
+          label: 'Open transcript details',
+          onClick: () => {
+            const apolloTranscriptWidget = session.addWidget(
+              'ApolloTranscriptDetails',
+              'apolloTranscriptDetails',
+              {
+                feature,
+                assembly: currentAssemblyId,
+                changeManager,
+                refName: region.refName,
+              },
+            )
+            session.showWidget(apolloTranscriptWidget)
+          },
+        })
+      }
     }
+    menuItems.push({
+      label: feature.type,
+      subMenu: contextMenuItemsForFeature,
+    })
   }
-  return
+  return menuItems
 }
 
 // False positive here, none of these functions use "this"
 /* eslint-disable @typescript-eslint/unbound-method */
-const { drawTooltip, getContextMenuItems, onMouseLeave } = boxGlyph
+const { drawTooltip, getContextMenuItemsForFeature, onMouseLeave } = boxGlyph
 /* eslint-enable @typescript-eslint/unbound-method */
 
 export const geneGlyph: Glyph = {
@@ -758,6 +950,7 @@ export const geneGlyph: Glyph = {
   drawHover,
   drawTooltip,
   getContextMenuItems,
+  getContextMenuItemsForFeature,
   getFeatureFromLayout,
   getRowCount,
   getRowForFeature,

package/src/LinearApolloDisplay/glyphs/GenericChildGlyph.ts

@@ -1,6 +1,12 @@
 import { type AnnotationFeature } from '@apollo-annotation/mst'
+import { type MenuItem } from '@jbrowse/core/ui'
 
+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'
@@ -130,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,
@@ -148,6 +192,7 @@ export const genericChildGlyph: Glyph = {
   drawDragPreview,
   drawHover,
   drawTooltip,
+  getContextMenuItemsForFeature,
   getContextMenuItems,
   getFeatureFromLayout,
   getRowCount,

package/src/LinearApolloDisplay/glyphs/Glyph.ts

@@ -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

@@ -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'
@@ -285,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,