@apollo-annotation/jbrowse-plugin-apollo 1.0.0 → 1.1.0

package/src/FeatureDetailsWidget/Translation.tsx

@@ -0,0 +1,358 @@
+import type {
+  AnnotationFeature,
+  ApolloRefSeqI,
+  TranscriptPartCoding,
+} from '@apollo-annotation/mst'
+import styled from '@emotion/styled'
+import {
+  type AbstractSessionModel,
+  defaultCodonTable,
+  revcom,
+} from '@jbrowse/core/util'
+import ContentCopyIcon from '@mui/icons-material/ContentCopy'
+import ContentCutIcon from '@mui/icons-material/ContentCut'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Tooltip,
+  Typography,
+} from '@mui/material'
+import React, { useRef } from 'react'
+
+import type { ApolloSessionModel } from '../session'
+import { copyToClipboard } from '../util/copyToClipboard'
+
+const SequenceContainer = styled('div')({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  textAlign: 'left',
+  width: '100%',
+  overflowWrap: 'break-word',
+  wordWrap: 'break-word',
+  wordBreak: 'break-all',
+  '& span': {
+    fontSize: 12,
+  },
+})
+
+const StyledAccordionSummary = styled(AccordionSummary)(() => ({
+  minHeight: 30,
+  maxHeight: 30,
+  '&.Mui-expanded': {
+    minHeight: 30,
+    maxHeight: 30,
+  },
+}))
+
+export function Translation({
+  changeInProgress,
+  cdsLocations,
+  refData,
+  strand,
+  // eslint-disable-next-line @typescript-eslint/unbound-method
+  updateCDSLocation,
+  cdsMin,
+  cdsMax,
+  feature,
+  session,
+}: {
+  changeInProgress: boolean
+  cdsLocations: TranscriptPartCoding[][]
+  refData: ApolloRefSeqI
+  strand: 1 | -1 | undefined
+  updateCDSLocation(
+    oldLocation: number,
+    newLocation: number,
+    feature: AnnotationFeature,
+    isMin: boolean,
+    onComplete?: () => void,
+  ): boolean
+  cdsMin: number
+  cdsMax: number
+  feature: AnnotationFeature
+  session: ApolloSessionModel
+}) {
+  const seqRef = useRef<HTMLDivElement>(null)
+  const { notify } = session as unknown as AbstractSessionModel
+
+  const cdsSequences: string[] = []
+  const [firstLocation] = cdsLocations
+  for (const loc of firstLocation) {
+    const seq = refData.getSequence(loc.min, loc.max)
+    cdsSequences.push(strand === -1 ? revcom(seq) : seq)
+  }
+  const cdsSequence = cdsSequences.join('')
+
+  const proteinSequence: string[] = []
+  for (
+    let codonGenomicPos = 0;
+    codonGenomicPos < cdsSequence.length;
+    codonGenomicPos += 3
+  ) {
+    const codonSeq = cdsSequence
+      .slice(codonGenomicPos, codonGenomicPos + 3)
+      .toUpperCase()
+    const protein =
+      defaultCodonTable[codonSeq as keyof typeof defaultCodonTable] || '&'
+    proteinSequence.push(protein)
+  }
+
+  const onCopyClick = () => {
+    const seqDiv = seqRef.current
+    if (!seqDiv) {
+      return
+    }
+    void copyToClipboard(seqDiv)
+  }
+
+  // Codon position is the index of the start codon in the CDS genomic sequence
+  // Calculate the genomic location of the start codon based on the codon position in the CDS
+  const getCodonGenomicLocation = (codonGenomicPosition: number) => {
+    const [firstLocation] = cdsLocations
+    let cdsLen = 0
+    const sortedCDSLocations = firstLocation.toSorted(
+      ({ min: a }, { min: b }) => a - b,
+    )
+
+    // Suppose CDS locations are [{min: 0, max: 10}, {min: 20, max: 30}, {min: 40, max: 50}]
+    // and codonGenomicPosition is 25
+    // ((10 - 0) + (30 - 20) + (50 - 40)) > 25
+    // So, start codon is in (40, 50)
+    // 40 + (25-20) = 45 is the genomic location of the start codon
+    if (strand === 1) {
+      for (const loc of sortedCDSLocations) {
+        const locLength = loc.max - loc.min
+        if (cdsLen + locLength > codonGenomicPosition) {
+          return loc.min + (codonGenomicPosition - cdsLen)
+        }
+        cdsLen += locLength
+      }
+    } else if (strand === -1) {
+      for (let i = sortedCDSLocations.length - 1; i >= 0; i--) {
+        const loc = sortedCDSLocations[i]
+        const locLength = loc.max - loc.min
+        if (cdsLen + locLength > codonGenomicPosition) {
+          return loc.max - (codonGenomicPosition - cdsLen)
+        }
+        cdsLen += locLength
+      }
+    }
+
+    if (strand === 1) {
+      return cdsMin
+    }
+
+    return cdsMax
+  }
+  const trimTranslationSequence = () => {
+    if (
+      (proteinSequence.at(0) === 'M' && proteinSequence.at(-1) === '*') ||
+      proteinSequence.length === 0
+    ) {
+      return
+    }
+
+    // Trim any sequence before first start codon and after stop codon
+    const startCodonIndex = proteinSequence.indexOf('M')
+    const stopCodonIndex = proteinSequence.lastIndexOf('*')
+
+    const startCodonPos = startCodonIndex * 3
+    const stopCodonPos = stopCodonIndex * 3
+
+    const startCodonGenomicLoc = getCodonGenomicLocation(startCodonPos)
+    let stopCodonGenomicLoc = getCodonGenomicLocation(stopCodonPos)
+
+    if (strand === 1) {
+      if (startCodonGenomicLoc > stopCodonGenomicLoc) {
+        notify(
+          'Start codon genomic location should be less than stop codon genomic location',
+          'error',
+        )
+        return
+      }
+      let promise
+      stopCodonGenomicLoc += 3 // move to end of stop codon
+      if (startCodonGenomicLoc !== cdsMin) {
+        promise = new Promise((resolve) => {
+          updateCDSLocation(cdsMin, startCodonGenomicLoc, feature, true, () => {
+            resolve(true)
+          })
+        })
+      }
+
+      if (stopCodonGenomicLoc !== cdsMax) {
+        if (promise) {
+          void promise.then(() => {
+            updateCDSLocation(cdsMax, stopCodonGenomicLoc, feature, false)
+          })
+        } else {
+          updateCDSLocation(cdsMax, stopCodonGenomicLoc, feature, false)
+        }
+      }
+    }
+
+    if (strand === -1) {
+      // reverse strand
+      if (startCodonGenomicLoc < stopCodonGenomicLoc) {
+        notify(
+          'Start codon genomic location should be less than stop codon genomic location',
+          'error',
+        )
+        return
+      }
+      let promise
+      stopCodonGenomicLoc -= 3 // move to end of stop codon
+      if (startCodonGenomicLoc !== cdsMax) {
+        promise = new Promise((resolve) => {
+          updateCDSLocation(
+            cdsMax,
+            startCodonGenomicLoc,
+            feature,
+            false,
+            () => {
+              resolve(true)
+            },
+          )
+        })
+      }
+
+      if (stopCodonGenomicLoc !== cdsMin) {
+        if (promise) {
+          void promise.then(() => {
+            updateCDSLocation(cdsMin, stopCodonGenomicLoc, feature, true)
+          })
+        } else {
+          updateCDSLocation(cdsMin, stopCodonGenomicLoc, feature, true)
+        }
+      }
+    }
+    notify('Translation sequence trimmed to start and stop codons', 'success')
+  }
+  return (
+    <div>
+      <Accordion>
+        <StyledAccordionSummary
+          expandIcon={<ExpandMoreIcon style={{ color: 'white' }} />}
+          aria-controls="panel1-content"
+          id="panel1-header"
+        >
+          <Typography component="span" fontWeight={'bold'}>
+            Translation
+          </Typography>
+        </StyledAccordionSummary>
+        <AccordionDetails>
+          <SequenceContainer>
+            <Typography
+              component={'span'}
+              ref={seqRef}
+              style={{ maxHeight: 120, overflowY: 'scroll' }}
+            >
+              {proteinSequence.map((protein, idx) => {
+                const codonGenomicPos = idx * 3
+                if (protein === 'M') {
+                  return (
+                    <Typography
+                      component={'span'}
+                      style={{
+                        backgroundColor: changeInProgress
+                          ? 'lightgray'
+                          : 'yellow',
+                        cursor: 'pointer',
+                        border: '1px solid black',
+                      }}
+                      key={codonGenomicPos}
+                      onClick={() => {
+                        if (changeInProgress) {
+                          return
+                        }
+                        // NOTE: codonGenomicPos is important here for calculating the genomic location
+                        // of the start codon. We are using the codonGenomicPos as the key in the typography
+                        // elements to maintain the genomic postion of the codon start
+                        const startCodonGenomicLocation =
+                          getCodonGenomicLocation(codonGenomicPos)
+                        if (
+                          startCodonGenomicLocation !== cdsMin &&
+                          strand === 1
+                        ) {
+                          updateCDSLocation(
+                            cdsMin,
+                            startCodonGenomicLocation,
+                            feature,
+                            true,
+                          )
+                        }
+                        if (
+                          startCodonGenomicLocation !== cdsMax &&
+                          strand === -1
+                        ) {
+                          updateCDSLocation(
+                            cdsMax,
+                            startCodonGenomicLocation,
+                            feature,
+                            false,
+                          )
+                        }
+                      }}
+                    >
+                      {protein}
+                    </Typography>
+                  )
+                }
+
+                if (protein === '*') {
+                  return (
+                    <Typography
+                      style={{ backgroundColor: 'red', color: 'white' }}
+                      component={'span'}
+                      // Pass the codonGenomicPos as the key to maintain the genomic position of the codon
+                      key={codonGenomicPos}
+                    >
+                      {protein}
+                    </Typography>
+                  )
+                }
+                // Pass the codonGenomicPos as the key to maintain the genomic position of the codon
+                return (
+                  <Typography component={'span'} key={codonGenomicPos}>
+                    {protein}
+                  </Typography>
+                )
+              })}
+            </Typography>
+          </SequenceContainer>
+          <div
+            style={{
+              marginTop: 10,
+              display: 'flex',
+              flexDirection: 'row',
+              alignItems: 'center',
+              gap: 10,
+            }}
+          >
+            <Tooltip title="Copy">
+              <button
+                onClick={onCopyClick}
+                style={{ border: 'none', background: 'none', padding: 0 }}
+                disabled={changeInProgress}
+              >
+                <ContentCopyIcon style={{ fontSize: 15 }} />
+              </button>
+            </Tooltip>
+            <Tooltip title="Trim">
+              <button
+                onClick={trimTranslationSequence}
+                style={{ border: 'none', background: 'none', padding: 0 }}
+                disabled={changeInProgress}
+              >
+                <ContentCutIcon style={{ fontSize: 15 }} />
+              </button>
+            </Tooltip>
+          </div>
+        </AccordionDetails>
+      </Accordion>
+    </div>
+  )
+}

package/src/LinearApolloDisplay/components/CheckResultWarnings.tsx

@@ -1,4 +1,5 @@
 import type { CheckResultI } from '@apollo-annotation/mst'
+import type { Assembly } from '@jbrowse/core/assemblyManager/assembly'
 import { type AbstractSessionModel, doesIntersect2 } from '@jbrowse/core/util'
 import ErrorIcon from '@mui/icons-material/Error'
 import { Avatar, Badge, Box, Tooltip } from '@mui/material'
@@ -23,7 +24,9 @@ export const CheckResultWarnings = observer(function CheckResultWarnings({
   }
   return lgv.dynamicBlocks.contentBlocks.map((block) => {
     const widthBp = lgv.bpPerPx * apolloRowHeight
-    const assembly = assemblyManager.get(block.assemblyName)
+    const assembly = assemblyManager.get(block.assemblyName) as
+      | Assembly
+      | undefined
     if (!assembly) {
       return null
     }

package/src/LinearApolloDisplay/glyphs/ExonGlyph.ts

@@ -1,5 +1,4 @@
 import type { AnnotationFeature } from '@apollo-annotation/mst'
-import type { BaseDisplayModel } from '@jbrowse/core/pluggableElementTypes'
 import type { MenuItem } from '@jbrowse/core/ui'
 import {
   type AbstractSessionModel,
@@ -106,14 +105,12 @@ function getContextMenuItems(
     session,
   } = display
   const [region] = regions
-  const currentAssemblyId = display.getAssemblyId(region.assemblyName)
+  const currentAssemblyId = display.getAssemblyId(region.assemblyName) as string
   const role = internetAccount ? internetAccount.role : 'admin'
   const admin = role === 'admin'
   const menuItems: MenuItem[] = []
   const adjacentExons = getAdjacentExons(feature, display)
-  const lgv = getContainingView(
-    display as BaseDisplayModel,
-  ) as unknown as LinearGenomeViewModel
+  const lgv = getContainingView(display) as unknown as LinearGenomeViewModel
   if (adjacentExons.upstream) {
     const exon = adjacentExons.upstream
     menuItems.push({

package/src/LinearApolloDisplay/glyphs/GeneGlyph.ts

@@ -30,12 +30,10 @@ function draw(
   const [top, left, width] = getFeatureBox(display, gene, row, block)
   const height = getRowCount(display, gene) * apolloRowHeight
   if (width > 2) {
-    let selectedColor = readConfObject(
-      session.getPluginConfiguration(),
-      'geneBackgroundColor',
-      { featureType: gene.type },
-    ) as string
-    selectedColor = alpha(theme.palette.background.paper, 0.6)
+    const selectedColor =
+      (readConfObject(session.getPluginConfiguration(), 'geneBackgroundColor', {
+        featureType: gene.type,
+      }) as string | undefined) ?? alpha(theme.palette.background.paper, 0.6)
     ctx.fillStyle = selectedColor
     ctx.fillRect(left, top, width, height)
   }

package/src/LinearApolloDisplay/glyphs/TranscriptGlyph.ts

@@ -6,7 +6,11 @@ import {
 } from '@jbrowse/core/util'
 import type { ContentBlock } from '@jbrowse/core/util/blockTypes'
 
-import { DuplicateTranscript, MergeTranscripts } from '../../components'
+import {
+  AddCodingSequence,
+  DuplicateTranscript,
+  MergeTranscripts,
+} from '../../components'
 import {
   isCDSFeature,
   isExonFeature,
@@ -201,11 +205,11 @@ function getLayout(display: LinearApolloDisplay, feature: AnnotationFeature) {
 
 function getContextMenuItems(
   display: LinearApolloDisplay,
-  feature: AnnotationFeature,
+  transcript: AnnotationFeature,
 ): MenuItem[] {
   const { changeManager, regions, selectedFeature, session } = display
   const [region] = regions
-  const currentAssemblyId = display.getAssemblyId(region.assemblyName)
+  const currentAssemblyId = display.getAssemblyId(region.assemblyName) as string
   const menuItems: MenuItem[] = []
   if (isSessionModelWithWidgets(session)) {
     menuItems.splice(1, 0, {
@@ -215,7 +219,7 @@ function getContextMenuItems(
           'ApolloTranscriptDetails',
           'apolloTranscriptDetails',
           {
-            feature,
+            feature: transcript,
             assembly: currentAssemblyId,
             changeManager,
             refName: region.refName,
@@ -238,7 +242,7 @@ function getContextMenuItems(
                 doneCallback()
               },
               changeManager,
-              sourceFeature: feature,
+              sourceFeature: transcript,
               sourceAssemblyId: currentAssemblyId,
               selectedFeature,
               setSelectedFeature: (feature?: AnnotationFeature) => {
@@ -261,7 +265,7 @@ function getContextMenuItems(
                 doneCallback()
               },
               changeManager,
-              sourceFeature: feature,
+              sourceFeature: transcript,
               sourceAssemblyId: currentAssemblyId,
               selectedFeature,
               setSelectedFeature: (feature?: AnnotationFeature) => {
@@ -273,6 +277,35 @@ function getContextMenuItems(
       },
     },
   )
+  const { children } = transcript
+  if (!children) {
+    return []
+  }
+  const cdsChildren = [...children.values()].filter((child) =>
+    isCDSFeature(child, session),
+  )
+  if (cdsChildren.length === 0) {
+    menuItems.push({
+      label: 'Add coding sequence',
+      onClick: () => {
+        ;(session as unknown as AbstractSessionModel).queueDialog(
+          (doneCallback) => [
+            AddCodingSequence,
+            {
+              session,
+              handleClose: () => {
+                doneCallback()
+              },
+              changeManager,
+              sourceFeature: transcript,
+              sourceAssemblyId: currentAssemblyId,
+              refName: region.refName,
+            },
+          ],
+        )
+      },
+    })
+  }
   return menuItems
 }
 

package/src/LinearApolloDisplay/stateModel/base.ts

@@ -5,6 +5,7 @@
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
 import type { AnnotationFeature } from '@apollo-annotation/mst'
 import type PluginManager from '@jbrowse/core/PluginManager'
+import type { Assembly } from '@jbrowse/core/assemblyManager/assembly'
 import {
   type AnyConfigurationSchemaType,
   ConfigurationReference,
@@ -28,6 +29,7 @@ import {
 } from '@jbrowse/mobx-state-tree'
 import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 import FactCheckIcon from '@mui/icons-material/FactCheck'
+import InputIcon from '@mui/icons-material/Input'
 import TrackChangesIcon from '@mui/icons-material/TrackChanges'
 import { autorun } from 'mobx'
 
@@ -37,11 +39,13 @@ import {
   Export as ExportIcon,
 } from '../../components/DownloadGFF3'
 import { FilterFeatures } from '../../components/FilterFeatures'
+import { ImportAnnotations } from '../../components/ImportAnnotations'
 import { ViewChangeLog } from '../../components/ViewChangeLog'
 import { ViewCheckResults } from '../../components/ViewCheckResults'
 import type { ApolloSessionModel, HoveredFeature } from '../../session'
 import type { ApolloRootModel } from '../../types'
 import { EditZoomThresholdDialog } from '../../util/displayUtils'
+import { LocalDriver } from '../../BackendDrivers'
 
 const minDisplayHeight = 20
 
@@ -137,7 +141,9 @@ export function baseModelFactory(
         const { assemblyName } = region
         const { assemblyManager } =
           self.session as unknown as AbstractSessionModel
-        const assembly = assemblyManager.get(assemblyName)
+        const assembly = assemblyManager.get(assemblyName) as
+          | Assembly
+          | undefined
         if (!assembly) {
           throw new Error(`No assembly found with name ${assemblyName}`)
         }
@@ -150,8 +156,7 @@ export function baseModelFactory(
         ) as ApolloInternetAccountModel | undefined
       },
       get changeManager() {
-        return (self.session as unknown as ApolloSessionModel).apolloDataStore
-          .changeManager
+        return self.session.apolloDataStore.changeManager
       },
       getAssemblyId(assemblyName: string) {
         const { assemblyManager } =
@@ -163,12 +168,10 @@ export function baseModelFactory(
         return assembly.name
       },
       get selectedFeature(): AnnotationFeature | undefined {
-        return (self.session as unknown as ApolloSessionModel)
-          .apolloSelectedFeature
+        return self.session.apolloSelectedFeature
       },
       get hoveredFeature(): HoveredFeature | undefined {
-        return (self.session as unknown as ApolloSessionModel)
-          .apolloHoveredFeature
+        return self.session.apolloHoveredFeature
       },
     }))
     .actions((self) => ({
@@ -213,8 +216,12 @@ export function baseModelFactory(
       const { filteredFeatureTypes, trackMenuItems: superTrackMenuItems } = self
       return {
         trackMenuItems() {
-          const { graphical, table, showCheckResults } = self
-          return [
+          const { graphical, table, showCheckResults, session } = self
+          const [region] = self.regions
+          const { assemblyName } = region
+          const backendDriver =
+            session.apolloDataStore.getBackendDriver(assemblyName)
+          const items = [
             ...superTrackMenuItems(),
             {
               type: 'subMenu',
@@ -266,7 +273,7 @@ export function baseModelFactory(
             {
               label: 'Filter features by type',
               onClick: () => {
-                const session = self.session as unknown as ApolloSessionModel
+                const { session } = self
                 ;(self.session as unknown as AbstractSessionModel).queueDialog(
                   (doneCallback) => [
                     FilterFeatures,
@@ -284,6 +291,28 @@ export function baseModelFactory(
                 )
               },
             },
+          ]
+          if (backendDriver instanceof LocalDriver) {
+            items.push({
+              label: 'Import annotations',
+              icon: InputIcon,
+              onClick: () => {
+                ;(session as unknown as AbstractSessionModel).queueDialog(
+                  (doneCallback) => [
+                    ImportAnnotations,
+                    {
+                      session,
+                      assemblyName,
+                      handleClose: () => {
+                        doneCallback()
+                      },
+                    },
+                  ],
+                )
+              },
+            })
+          }
+          items.push(
             {
               label: 'Export annotations',
               icon: ExportIcon,
@@ -294,7 +323,7 @@ export function baseModelFactory(
                 if (!assembly) {
                   return
                 }
-                const session = self.session as unknown as ApolloSessionModel
+                const { session } = self
                 ;(session as unknown as AbstractSessionModel).queueDialog(
                   (doneCallback) => [
                     DownloadGFF3,
@@ -319,7 +348,7 @@ export function baseModelFactory(
                 if (!assembly) {
                   return
                 }
-                const session = self.session as unknown as ApolloSessionModel
+                const { session } = self
                 ;(session as unknown as AbstractSessionModel).queueDialog(
                   (doneCallback) => [
                     ViewChangeLog,
@@ -344,7 +373,7 @@ export function baseModelFactory(
                 if (!assembly) {
                   return
                 }
-                const session = self.session as unknown as ApolloSessionModel
+                const { session } = self
                 ;(session as unknown as AbstractSessionModel).queueDialog(
                   (doneCallback) => [
                     ViewCheckResults,
@@ -359,20 +388,17 @@ export function baseModelFactory(
                 )
               },
             },
-          ]
+          )
+          return items
         },
       }
     })
     .actions((self) => ({
       setSelectedFeature(feature?: AnnotationFeature) {
-        ;(
-          self.session as unknown as ApolloSessionModel
-        ).apolloSetSelectedFeature(feature)
+        self.session.apolloSetSelectedFeature(feature)
       },
       setHoveredFeature(hoveredFeature?: HoveredFeature) {
-        ;(
-          self.session as unknown as ApolloSessionModel
-        ).apolloSetHoveredFeature(hoveredFeature)
+        self.session.apolloSetHoveredFeature(hoveredFeature)
       },
       showFeatureDetailsWidget(
         feature: AnnotationFeature,
@@ -411,9 +437,7 @@ export function baseModelFactory(
                 return
               }
               self.setLoading(true)
-              void (
-                self.session as unknown as ApolloSessionModel
-              ).apolloDataStore
+              void self.session.apolloDataStore
                 .loadFeatures(self.regions)
                 .then(() => {
                   setTimeout(() => {