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

package/src/LinearApolloSixFrameDisplay/stateModel/rendering.ts

@@ -1,15 +1,62 @@
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
 import type PluginManager from '@jbrowse/core/PluginManager'
 import { type AnyConfigurationSchemaType } from '@jbrowse/core/configuration/configurationSchema'
-import { doesIntersect2 } from '@jbrowse/core/util'
+import {
+  defaultCodonTable,
+  doesIntersect2,
+  getFrame,
+  revcom,
+} from '@jbrowse/core/util'
 import { type Theme, createTheme } from '@mui/material'
 import { autorun } from 'mobx'
 import { type Instance, addDisposer, types } from 'mobx-state-tree'
 
 import { type ApolloSessionModel } from '../../session'
+import { codonColorCode } from '../../util/displayUtils'
 
 import { layoutsModelFactory } from './layouts'
 
+function drawCodon(
+  ctx: CanvasRenderingContext2D,
+  codon: string,
+  leftPx: number,
+  index: number,
+  theme: Theme,
+  highContrast: boolean,
+  bpPerPx: number,
+  bp: number,
+  rowHeight: number,
+  showFeatureLabels: boolean,
+  showStartCodons: boolean,
+  showStopCodons: boolean,
+) {
+  const frameOffsets = (
+    showFeatureLabels ? [0, 4, 2, 0, 14, 12, 10] : [0, 2, 1, 0, 7, 6, 5]
+  ).map((b) => b * rowHeight)
+  const strands = [-1, 1] as const
+  for (const strand of strands) {
+    const frame = getFrame(bp, bp + 3, strand, 0)
+    const top = frameOffsets.at(frame)
+    if (top === undefined) {
+      continue
+    }
+    const left = Math.round(leftPx + index / bpPerPx)
+    const width = Math.round(3 / bpPerPx) === 0 ? 1 : Math.round(3 / bpPerPx)
+    const codonCode = strand === 1 ? codon : revcom(codon)
+    const aminoAcidCode =
+      defaultCodonTable[codonCode as keyof typeof defaultCodonTable]
+    const fillColor = codonColorCode(aminoAcidCode, theme, highContrast)
+    if (
+      fillColor &&
+      ((showStopCodons && aminoAcidCode == '*') ||
+        (showStartCodons && aminoAcidCode != '*'))
+    ) {
+      ctx.fillStyle = fillColor
+      ctx.fillRect(left, top, width, rowHeight)
+    }
+  }
+}
+
 export function renderingModelFactory(
   pluginManager: PluginManager,
   configSchema: AnyConfigurationSchemaType,
@@ -135,17 +182,29 @@ export function renderingModelFactory(
           self,
           autorun(
             () => {
-              const { canvas, featureLayouts, featuresHeight, lgv } = self
+              const {
+                apolloRowHeight,
+                canvas,
+                featureLayouts,
+                featuresHeight,
+                lgv,
+                session,
+                theme,
+                showFeatureLabels,
+                showStartCodons,
+                showStopCodons,
+              } = self
               if (!lgv.initialized || self.regionCannotBeRendered()) {
                 return
               }
-              const { displayedRegions, dynamicBlocks } = lgv
+              const { bpPerPx, offsetPx, displayedRegions, dynamicBlocks } = lgv
 
               const ctx = canvas?.getContext('2d')
               if (!ctx) {
                 return
               }
               ctx.clearRect(0, 0, dynamicBlocks.totalWidthPx, featuresHeight)
+
               for (const [idx, featureLayout] of featureLayouts.entries()) {
                 const displayedRegion = displayedRegions[idx]
                 for (const [row, featureLayoutRow] of featureLayout.entries()) {
@@ -171,6 +230,45 @@ export function renderingModelFactory(
                   }
                 }
               }
+
+              if (showStartCodons || showStopCodons) {
+                const { apolloDataStore } = session
+                for (const block of dynamicBlocks.contentBlocks) {
+                  const assembly = apolloDataStore.assemblies.get(
+                    block.assemblyName,
+                  )
+                  const ref = assembly?.getByRefName(block.refName)
+                  const roundedStart = Math.floor(block.start)
+                  const roundedEnd = Math.ceil(block.end)
+                  let seq = ref?.getSequence(roundedStart, roundedEnd)
+                  if (!seq) {
+                    break
+                  }
+                  seq = seq.toUpperCase()
+                  const baseOffsetPx = (block.start - roundedStart) / bpPerPx
+                  const seqLeftPx = Math.round(
+                    block.offsetPx - offsetPx - baseOffsetPx,
+                  )
+                  for (let i = 0; i < seq.length; i++) {
+                    const bp = roundedStart + i
+                    const codon = seq.slice(i, i + 3)
+                    drawCodon(
+                      ctx,
+                      codon,
+                      seqLeftPx,
+                      i,
+                      theme,
+                      true,
+                      bpPerPx,
+                      bp,
+                      apolloRowHeight,
+                      showFeatureLabels,
+                      showStartCodons,
+                      showStopCodons,
+                    )
+                  }
+                }
+              }
             },
             { name: 'LinearApolloSixFrameDisplayRenderFeatures' },
           ),

package/src/components/AddAssembly.tsx

@@ -200,7 +200,7 @@ export function AddAssembly({
         statusMessage: 'Pre-validating',
         progressPct: 0,
         cancelCallback: () => {
-          controller.abort()
+          controller.abort('AddAssembly')
           jobsManager.abortJob(job.name)
         },
       }

package/src/components/ImportFeatures.tsx

@@ -182,7 +182,7 @@ export function ImportFeatures({
       statusMessage: 'Uploading file, this may take awhile',
       progressPct: 0,
       cancelCallback: () => {
-        controller.abort()
+        controller.abort('ImportFeatures')
         jobsManager.abortJob(job.name)
       },
     }

package/src/components/OntologyTermAutocomplete.tsx

@@ -93,7 +93,7 @@ export function OntologyTermAutocomplete({
       )
     }
     return () => {
-      controller.abort()
+      controller.abort('OntologyTermAutocomplete matcher')
     }
   }, [session, valueString, filterTerms, ontologyStore, needToLoadCurrentTerm])
 
@@ -119,7 +119,7 @@ export function OntologyTermAutocomplete({
       )
     }
     return () => {
-      controller.abort()
+      controller.abort('OntologyTermAutocomplete loader')
     }
   }, [
     needToLoadTermChoices,

package/src/components/OntologyTermMultiSelect.tsx

@@ -89,7 +89,7 @@ function TermTagWithTooltip({
     })
 
     return () => {
-      controller.abort()
+      controller.abort('TermTagWithTooltip ')
     }
   }, [termId, ontology, manager])
 
@@ -211,7 +211,7 @@ export function OntologyTermMultiSelect({
     })
 
     return () => {
-      aborter.abort()
+      aborter.abort('OntologyTermMultiSelect')
     }
   }, [getOntologyTerms, ontology, includeDeprecated, inputValue, value])
 

package/src/makeDisplayComponent.tsx

@@ -97,7 +97,7 @@ const ResizeHandle = ({
         const controller = new AbortController()
         const { signal } = controller
         function abortDrag() {
-          controller.abort()
+          controller.abort('makeDisplayComponent')
         }
         globalThis.addEventListener('mousemove', mouseMove, { signal })
         globalThis.addEventListener('mouseup', abortDrag, { signal })

package/src/session/ClientDataStore.ts

@@ -204,7 +204,7 @@ export function clientDataStoreFactory(
                   statusMessage: `Loading ontology "${name}", version "${version}", this may take a while`,
                   progressPct: 0,
                   cancelCallback: () => {
-                    controller.abort()
+                    controller.abort('ClientDataStore')
                     jobsManager.abortJob(job.name)
                   },
                 }

package/src/session/session.ts

@@ -74,6 +74,7 @@ export function extendSession(
       apolloSelectedFeature: types.safeReference(AnnotationFeatureExtended),
       jobsManager: types.optional(ApolloJobModel, {}),
       isLocked: types.optional(types.boolean, false),
+      changeInProgress: types.optional(types.boolean, false),
     })
     .volatile(() => ({
       apolloHoveredFeature: undefined as HoveredFeature | undefined,
@@ -141,6 +142,9 @@ export function extendSession(
       toggleLocked() {
         self.isLocked = !self.isLocked
       },
+      setChangeInProgress(changeInProgress: boolean) {
+        self.changeInProgress = changeInProgress
+      },
       getPluginConfiguration() {
         const { jbrowse } = getRoot<ApolloRootModel>(self)
         const pluginConfiguration =

package/src/util/displayUtils.ts

@@ -1,4 +1,5 @@
 import { type CheckResultIdsType } from '@apollo-annotation/mst'
+import { type Theme } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
 
 export { default as EditZoomThresholdDialog } from '../components/EditZoomThresholdDialog'
@@ -147,3 +148,30 @@ export function clusterResultByMessage<
   )
   return clusters
 }
+
+export function codonColorCode(
+  letter: string,
+  theme: Theme,
+  highContrast?: boolean,
+) {
+  if (letter === 'M') {
+    return theme.palette.startCodon
+  }
+  if (letter === '*') {
+    return highContrast ? theme.palette.text.primary : theme.palette.stopCodon
+  }
+  return
+}
+
+export function colorCode(letter: string, theme: Theme) {
+  const letterUpper = letter.toUpperCase()
+  if (
+    letterUpper === 'A' ||
+    letterUpper === 'C' ||
+    letterUpper === 'G' ||
+    letterUpper === 'T'
+  ) {
+    return theme.palette.bases[letterUpper].main.toString()
+  }
+  return 'lightgray'
+}

package/src/util/glyphUtils.ts

@@ -7,6 +7,7 @@ import { type MenuItem } from '@jbrowse/core/ui'
 import {
   type AbstractSessionModel,
   getContainingView,
+  isSessionModelWithWidgets,
 } from '@jbrowse/core/util'
 import { type LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 import SkipNextRoundedIcon from '@mui/icons-material/SkipNextRounded'
@@ -363,6 +364,23 @@ export function getContextMenuItemsForFeature(
       },
     },
   )
+  if (isSessionModelWithWidgets(session)) {
+    menuItems.push({
+      label: 'Open feature details',
+      onClick: () => {
+        const apolloGeneWidget = session.addWidget(
+          'ApolloFeatureDetailsWidget',
+          'apolloFeatureDetailsWidget',
+          {
+            feature: sourceFeature,
+            assembly: currentAssemblyId,
+            refName: region.refName,
+          },
+        )
+        session.showWidget(apolloGeneWidget)
+      },
+    })
+  }
   return menuItems
 }