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

package/src/FeatureDetailsWidget/TranscriptWidgetSummary.tsx

@@ -1,10 +1,10 @@
+import { type AnnotationFeature } from '@apollo-annotation/mst'
+import styled from '@emotion/styled'
+import { Table, TableBody, TableCell, TableRow } from '@mui/material'
+import { observer } from 'mobx-react'
 import React from 'react'
 
-import { AnnotationFeature } from '@apollo-annotation/mst'
-import { observer } from 'mobx-react'
 import { getFeatureId, getFeatureName, getStrand } from '../util'
-import { Table, TableBody, TableCell, TableRow } from '@mui/material'
-import styled from '@emotion/styled'
 
 const HeaderTableCell = styled(TableCell)(() => ({
   fontWeight: 'bold',
@@ -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/FeatureDetailsWidget/model.ts

@@ -1,15 +1,20 @@
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
 import {
-  AnnotationFeature,
+  type AnnotationFeature,
   AnnotationFeatureModel,
 } from '@apollo-annotation/mst'
 import { getSession } from '@jbrowse/core/util'
 import { ElementId } from '@jbrowse/core/util/types/mst'
 import { autorun } from 'mobx'
-import { Instance, SnapshotIn, addDisposer, types } from 'mobx-state-tree'
+import {
+  type Instance,
+  type SnapshotIn,
+  addDisposer,
+  types,
+} from 'mobx-state-tree'
 
-import { ApolloSessionModel } from '../session'
+import { type ApolloSessionModel } from '../session'
 
 export const ApolloFeatureDetailsWidgetModel = types
   .model('ApolloFeatureDetailsWidget', {

package/src/LinearApolloDisplay/components/LinearApolloDisplay.tsx

@@ -1,13 +1,13 @@
 /* eslint-disable @typescript-eslint/unbound-method */
 /* eslint-disable @typescript-eslint/no-misused-promises */
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
-import { Menu, MenuItem } from '@jbrowse/core/ui'
+import { Menu, type MenuItem } from '@jbrowse/core/ui'
 import {
-  AbstractSessionModel,
+  type AbstractSessionModel,
   doesIntersect2,
   getContainingView,
 } from '@jbrowse/core/util'
-import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+import { type LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 import ErrorIcon from '@mui/icons-material/Error'
 import {
   Alert,
@@ -20,7 +20,7 @@ import { observer } from 'mobx-react'
 import React, { useEffect, useState } from 'react'
 import { makeStyles } from 'tss-react/mui'
 
-import { LinearApolloDisplay as LinearApolloDisplayI } from '../stateModel'
+import { type LinearApolloDisplay as LinearApolloDisplayI } from '../stateModel'
 
 interface LinearApolloDisplayProps {
   model: LinearApolloDisplayI
@@ -95,7 +95,7 @@ export const LinearApolloDisplay = observer(function LinearApolloDisplay(
   const { assemblyManager } = session as unknown as AbstractSessionModel
   return (
     <>
-      {lgv.bpPerPx <= 3 ? (
+      {3 / lgv.bpPerPx >= 1 ? (
         <div
           className={classes.canvasContainer}
           style={{
@@ -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))
           }
         }}
       >
@@ -238,7 +238,7 @@ export const LinearApolloDisplay = observer(function LinearApolloDisplay(
                           pointerEvents: apolloDragging ? 'none' : 'auto',
                         }}
                       >
-                        <ErrorIcon />
+                        <ErrorIcon data-testid="ErrorIcon" />
                       </Avatar>
                     </Tooltip>
                   )

package/src/LinearApolloDisplay/glyphs/BoxGlyph.ts

@@ -1,25 +1,20 @@
-import { AnnotationFeature } from '@apollo-annotation/mst'
-import { Theme, alpha } from '@mui/material'
-import { MenuItem } from '@jbrowse/core/ui'
-
-import {
-  AbstractSessionModel,
-  isSessionModelWithWidgets,
-  SessionWithWidgets,
-} from '@jbrowse/core/util'
+import { type AnnotationFeature } from '@apollo-annotation/mst'
+import { type MenuItem } from '@jbrowse/core/ui'
+import { type AbstractSessionModel } from '@jbrowse/core/util'
+import { type Theme, alpha } from '@mui/material'
 
 import { AddChildFeature, CopyFeature, DeleteFeature } from '../../components'
-
-import { LinearApolloDisplay } from '../stateModel'
+import { type LinearApolloDisplay } from '../stateModel'
 import {
+  type LinearApolloDisplayMouseEvents,
+  type MousePosition,
+  type MousePositionWithFeatureAndGlyph,
   isMousePositionWithFeatureAndGlyph,
-  LinearApolloDisplayMouseEvents,
-  MousePosition,
-  MousePositionWithFeatureAndGlyph,
 } from '../stateModel/mouseEvents'
-import { CanvasMouseEvent } from '../types'
-import { Glyph } from './Glyph'
-import { LinearApolloDisplayRendering } from '../stateModel/rendering'
+import { type LinearApolloDisplayRendering } from '../stateModel/rendering'
+import { type CanvasMouseEvent } from '../types'
+
+import { type Glyph } from './Glyph'
 
 function drawBoxOutline(
   ctx: CanvasRenderingContext2D,
@@ -258,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,
@@ -268,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,
@@ -344,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
 }
 
@@ -460,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 */
@@ -497,6 +483,7 @@ export const boxGlyph: Glyph = {
   drawDragPreview,
   drawHover,
   drawTooltip,
+  getContextMenuItemsForFeature,
   getContextMenuItems,
   getFeatureFromLayout,
   getRowCount,

package/src/LinearApolloDisplay/glyphs/GeneGlyph.ts

@@ -1,24 +1,39 @@
-import { AnnotationFeature } from '@apollo-annotation/mst'
-import { getFrame, intersection2 } from '@jbrowse/core/util'
+import { type AnnotationFeature } from '@apollo-annotation/mst'
+import { type MenuItem } from '@jbrowse/core/ui'
+import {
+  type AbstractSessionModel,
+  getFrame,
+  intersection2,
+  isSessionModelWithWidgets,
+} from '@jbrowse/core/util'
 import { alpha } from '@mui/material'
 
-import { LinearApolloDisplay } from '../stateModel'
+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,
-  MousePosition,
-  MousePositionWithFeatureAndGlyph,
 } from '../stateModel/mouseEvents'
-import { CanvasMouseEvent } from '../types'
-import { Glyph } from './Glyph'
+import { type LinearApolloDisplayRendering } from '../stateModel/rendering'
+import { type CanvasMouseEvent } from '../types'
+
 import { boxGlyph } from './BoxGlyph'
-import { LinearApolloDisplayRendering } from '../stateModel/rendering'
-import { OntologyRecord } from '../../OntologyManager'
+import { type Glyph } from './Glyph'
 
 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')
@@ -225,7 +240,6 @@ function draw(
               apolloSelectedFeature && _id === apolloSelectedFeature._id
                 ? 'rgb(0,0,0)'
                 : cdsColorCode
-            ctx.fillStyle = cdsColorCode
             ctx.fillRect(
               cdsStartPx + 1,
               cdsTop + 1,
@@ -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,