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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apollo-annotation/jbrowse-plugin-apollo",
-  "version": "0.3.9",
+  "version": "0.3.10",
   "description": "Apollo plugin for JBrowse 2",
   "keywords": [
     "jbrowse",
@@ -48,9 +48,9 @@
     }
   },
   "dependencies": {
-    "@apollo-annotation/common": "^0.3.9",
-    "@apollo-annotation/mst": "^0.3.9",
-    "@apollo-annotation/shared": "^0.3.9",
+    "@apollo-annotation/common": "^0.3.10",
+    "@apollo-annotation/mst": "^0.3.10",
+    "@apollo-annotation/shared": "^0.3.10",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@gmod/gff": "^2.0.0",

package/src/ApolloInternetAccount/components/AuthTypeSelector.tsx

@@ -57,7 +57,7 @@ export const AuthTypeSelector = ({
       }
     })
     return () => {
-      controller.abort()
+      controller.abort('AuthTypeSelector')
     }
   }, [baseURL])
 

package/src/ApolloInternetAccount/model.ts

@@ -489,8 +489,12 @@ const stateModelFactory = (configSchema: ApolloInternetAccountConfigModel) => {
               return
             }
             if (self.role) {
-              await self.initialize(self.role)
-              reaction.dispose()
+              try {
+                await self.initialize(self.role)
+                reaction.dispose()
+              } catch {
+                // if initialize fails, do nothing so the autorun runs again
+              }
             }
           },
           { name: 'ApolloInternetAccount' },

package/src/BackendDrivers/CollaborationServerDriver.ts

@@ -18,6 +18,7 @@ import {
 import {
   type ChangeMessage,
   ValidationResultSet,
+  makeUserSessionId,
 } from '@apollo-annotation/shared'
 import { getConf } from '@jbrowse/core/configuration'
 import { type BaseInternetAccountModel } from '@jbrowse/core/pluggableElementTypes'
@@ -154,6 +155,10 @@ export class CollaborationServerDriver extends BackendDriver {
   ) {
     const { socket } = internetAccount
     const token = internetAccount.retrieveToken()
+    if (!token) {
+      return
+    }
+    const localSessionId = makeUserSessionId(token)
     const channel = `${assembly}-${refSeq}`
     const changeManager = new ChangeManager(this.clientStore)
 
@@ -163,11 +168,12 @@ export class CollaborationServerDriver extends BackendDriver {
         internetAccount.setLastChangeSequenceNumber(
           Number(message.changeSequence),
         )
-        if (message.userSessionId !== token && message.channel === channel) {
-          const change = Change.fromJSON(message.changeInfo)
-          if (isFeatureChange(change) && this.haveDataForChange(change)) {
-            await changeManager.submit(change, { submitToBackend: false })
-          }
+        if (message.userSessionId === localSessionId) {
+          return // we did this change, no need to apply it again
+        }
+        const change = Change.fromJSON(message.changeInfo)
+        if (isFeatureChange(change) && this.haveDataForChange(change)) {
+          await changeManager.submit(change, { submitToBackend: false })
         }
       })
     }

package/src/ChangeManager.ts

@@ -42,21 +42,31 @@ export class ChangeManager {
     const session = getSession(this.dataStore)
     const controller = new AbortController()
 
-    const { jobsManager, isLocked } = getSession(
-      this.dataStore,
-    ) as unknown as ApolloSessionModel
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    const { jobsManager, isLocked, changeInProgress, setChangeInProgress } =
+      getSession(this.dataStore) as unknown as ApolloSessionModel
 
     if (isLocked) {
       session.notify('Cannot submit changes in locked mode')
+      setChangeInProgress(false)
       return
     }
 
+    if (changeInProgress) {
+      session.notify(
+        'Could not submit change, there is another change still in progress',
+      )
+      return
+    }
+
+    setChangeInProgress(true)
+
     const job = {
       name: change.typeName,
       statusMessage: 'Pre-validating',
       progressPct: 0,
       cancelCallback: () => {
-        controller.abort()
+        controller.abort('ChangeManager')
       },
     }
 
@@ -71,6 +81,7 @@ export class ChangeManager {
         jobsManager.abortJob(job.name, msg)
       }
       session.notify(msg, 'error')
+      setChangeInProgress(false)
       return
     }
 
@@ -86,6 +97,7 @@ export class ChangeManager {
         `Error encountered in client: ${String(error)}. Data may be out of sync, please refresh the page`,
         'error',
       )
+      setChangeInProgress(false)
       return
     }
 
@@ -120,6 +132,7 @@ export class ChangeManager {
         console.error(error)
         session.notify(String(error), 'error')
         await this.undo(change, false)
+        setChangeInProgress(false)
         return
       }
       if (!backendResult.ok) {
@@ -129,6 +142,7 @@ export class ChangeManager {
         }
         session.notify(msg, 'error')
         await this.undo(change, false)
+        setChangeInProgress(false)
         return
       }
       if (change.notification) {
@@ -143,6 +157,7 @@ export class ChangeManager {
     if (updateJobsManager) {
       jobsManager.done(job)
     }
+    setChangeInProgress(false)
   }
 
   async undo(change: Change, submitToBackend = true) {

package/src/FeatureDetailsWidget/TranscriptWidgetEditLocation.tsx

@@ -113,6 +113,7 @@ export const TranscriptWidgetEditLocation = observer(
     const refData = currentAssembly?.getByRefName(refName)
     const { changeManager } = session.apolloDataStore
     const seqRef = useRef<HTMLDivElement>(null)
+    const { changeInProgress } = session
 
     if (!refData) {
       return null
@@ -724,12 +725,15 @@ export const TranscriptWidgetEditLocation = observer(
             <Typography
               component={'span'}
               style={{
-                backgroundColor: 'yellow',
+                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
@@ -848,7 +852,7 @@ export const TranscriptWidgetEditLocation = observer(
 
       // Trim any sequence before first start codon and after stop codon
       const startCodonIndex = translationSequence.indexOf('M')
-      const stopCodonIndex = translationSequence.indexOf('*') + 1
+      const stopCodonIndex = translationSequence.indexOf('*')
 
       const startCodonPos =
         translSeqCodonStartGenomicPosArr[startCodonIndex].codonGenomicPos
@@ -861,7 +865,7 @@ export const TranscriptWidgetEditLocation = observer(
       const startCodonGenomicLoc = getCodonGenomicLocation(
         startCodonPos as unknown as number,
       )
-      const stopCodonGenomicLoc = getCodonGenomicLocation(
+      let stopCodonGenomicLoc = getCodonGenomicLocation(
         stopCodonPos as unknown as number,
       )
 
@@ -874,6 +878,7 @@ export const TranscriptWidgetEditLocation = observer(
           return
         }
         let promise
+        stopCodonGenomicLoc += 3 // move to end of stop codon
         if (startCodonGenomicLoc !== cdsMin) {
           promise = new Promise((resolve) => {
             updateCDSLocation(
@@ -909,6 +914,7 @@ export const TranscriptWidgetEditLocation = observer(
           return
         }
         let promise
+        stopCodonGenomicLoc -= 3 // move to end of stop codon
         if (startCodonGenomicLoc !== cdsMax) {
           promise = new Promise((resolve) => {
             updateCDSLocation(
@@ -978,16 +984,22 @@ export const TranscriptWidgetEditLocation = observer(
                   }}
                 >
                   <Tooltip title="Copy">
-                    <ContentCopyIcon
-                      style={{ fontSize: 15, cursor: 'pointer' }}
+                    <button
                       onClick={onCopyClick}
-                    />
+                      style={{ border: 'none', background: 'none', padding: 0 }}
+                      disabled={changeInProgress}
+                    >
+                      <ContentCopyIcon style={{ fontSize: 15 }} />
+                    </button>
                   </Tooltip>
                   <Tooltip title="Trim">
-                    <ContentCutIcon
-                      style={{ fontSize: 15, cursor: 'pointer' }}
+                    <button
                       onClick={trimTranslationSequence}
-                    />
+                      style={{ border: 'none', background: 'none', padding: 0 }}
+                      disabled={changeInProgress}
+                    >
+                      <ContentCutIcon style={{ fontSize: 15 }} />
+                    </button>
                   </Tooltip>
                 </div>
               </AccordionDetails>
@@ -1014,6 +1026,7 @@ export const TranscriptWidgetEditLocation = observer(
                       )
                     }}
                     style={{ border: '1px solid black', borderRadius: 5 }}
+                    disabled={changeInProgress}
                   />
                 </Grid>
               ) : (
@@ -1031,6 +1044,7 @@ export const TranscriptWidgetEditLocation = observer(
                       )
                     }}
                     style={{ border: '1px solid black', borderRadius: 5 }}
+                    disabled={changeInProgress}
                   />
                 </Grid>
               )}
@@ -1052,6 +1066,7 @@ export const TranscriptWidgetEditLocation = observer(
                       )
                     }}
                     style={{ border: '1px solid black', borderRadius: 5 }}
+                    disabled={changeInProgress}
                   />
                 </Grid>
               ) : (
@@ -1069,6 +1084,7 @@ export const TranscriptWidgetEditLocation = observer(
                       )
                     }}
                     style={{ border: '1px solid black', borderRadius: 5 }}
+                    disabled={changeInProgress}
                   />
                 </Grid>
               )}
@@ -1113,6 +1129,7 @@ export const TranscriptWidgetEditLocation = observer(
                               true,
                             )
                           }}
+                          disabled={changeInProgress}
                         />
                       </Grid>
                     ) : (
@@ -1129,6 +1146,7 @@ export const TranscriptWidgetEditLocation = observer(
                               false,
                             )
                           }}
+                          disabled={changeInProgress}
                         />
                       </Grid>
                     )}
@@ -1149,6 +1167,7 @@ export const TranscriptWidgetEditLocation = observer(
                               false,
                             )
                           }}
+                          disabled={changeInProgress}
                         />
                       </Grid>
                     ) : (
@@ -1165,6 +1184,7 @@ export const TranscriptWidgetEditLocation = observer(
                               true,
                             )
                           }}
+                          disabled={changeInProgress}
                         />
                       </Grid>
                     )}

package/src/LinearApolloDisplay/glyphs/GeneGlyph.ts

@@ -974,8 +974,8 @@ function getContextMenuItems(
           },
         })
         if (isSessionModelWithWidgets(session)) {
-          contextMenuItemsForFeature.push({
-            label: 'Open transcript details',
+          contextMenuItemsForFeature.splice(1, 0, {
+            label: 'Open transcript editor',
             onClick: () => {
               const apolloTranscriptWidget = session.addWidget(
                 'ApolloTranscriptDetails',

package/src/LinearApolloDisplay/glyphs/util.ts

@@ -17,3 +17,20 @@ export function getLeftPx(
     featureLeftBpDistanceFromBlockLeftBp / bpPerPx
   return blockLeftPx + featureLeftPxDistanceFromBlockLeftPx
 }
+
+/**
+ * Perform a canvas strokeRect, but have the stroke be contained within the
+ * given rect instead of centered on it.
+ */
+export function strokeRectInner(
+  ctx: CanvasRenderingContext2D,
+  left: number,
+  top: number,
+  width: number,
+  height: number,
+  color: string,
+) {
+  ctx.strokeStyle = color
+  ctx.lineWidth = 1
+  ctx.strokeRect(left + 0.5, top + 0.5, width - 1, height - 1)
+}

package/src/LinearApolloReferenceSequenceDisplay/drawSequenceOverlay.ts

@@ -8,35 +8,28 @@ import { type ApolloSessionModel, type HoveredFeature } from '../session'
 function getSeqRow(
   strand: 1 | -1 | undefined,
   bpPerPx: number,
+  reversed?: boolean,
 ): number | undefined {
   if (bpPerPx > 1 || strand === undefined) {
     return
   }
+  if (reversed) {
+    return strand === 1 ? 4 : 3
+  }
   return strand === 1 ? 3 : 4
 }
 
-function getTranslationRow(frame: Frame, bpPerPx: number) {
-  const offset = bpPerPx <= 1 ? 2 : 0
-  switch (frame) {
-    case 3: {
-      return 0
-    }
-    case 2: {
-      return 1
-    }
-    case 1: {
-      return 2
-    }
-    case -1: {
-      return 3 + offset
-    }
-    case -2: {
-      return 4 + offset
-    }
-    case -3: {
-      return 5 + offset
-    }
+function getTranslationRow(frame: Frame, bpPerPx: number, reversed?: boolean) {
+  const frameRows = bpPerPx <= 1 ? [2, 1, 0, 7, 6, 5] : [2, 1, 0, 5, 4, 3]
+  if (reversed) {
+    frameRows.reverse()
+  }
+  frameRows.unshift(0)
+  const row = frameRows.at(frame)
+  if (row === undefined) {
+    throw new Error('could not find row')
   }
+  return row
 }
 
 function getLeftPx(
@@ -84,7 +77,7 @@ function drawHighlight(
   theme: Theme,
   selected = false,
 ) {
-  const row = getSeqRow(feature.strand, bpPerPx)
+  const row = getSeqRow(feature.strand, bpPerPx, block.reversed)
   if (!row) {
     return
   }
@@ -118,7 +111,7 @@ function drawCDSHighlight(
   }
   for (const loc of cdsLocs) {
     const frame = getFrame(loc.min, loc.max, feature.strand ?? 1, loc.phase)
-    const row = getTranslationRow(frame, bpPerPx)
+    const row = getTranslationRow(frame, bpPerPx, block.reversed)
     const left = getLeftPx(loc, bpPerPx, offsetPx, block)
     const top = row * rowHeight
     const width = (loc.max - loc.min) / bpPerPx
@@ -161,7 +154,7 @@ export function drawSequenceOverlay(
           rowHeight,
           block,
           theme,
-          true,
+          feature._id === selectedFeature?._id,
         )
       } else {
         drawHighlight(
@@ -172,7 +165,7 @@ export function drawSequenceOverlay(
           rowHeight,
           block,
           theme,
-          true,
+          feature._id === selectedFeature?._id,
         )
       }
     }

package/src/LinearApolloReferenceSequenceDisplay/drawSequenceTrack.ts

@@ -2,30 +2,9 @@ import { defaultCodonTable, getFrame, revcom } from '@jbrowse/core/util'
 import { type BlockSet } from '@jbrowse/core/util/blockTypes'
 import { type Theme } from '@mui/material'
 
+import { strokeRectInner } from '../LinearApolloDisplay/glyphs/util'
 import { type ApolloSessionModel } from '../session'
-
-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'
-}
-
-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
-}
+import { codonColorCode, colorCode } from '../util/displayUtils'
 
 function drawLetter(
   seqTrackctx: CanvasRenderingContext2D,
@@ -38,43 +17,37 @@ function drawLetter(
   seqTrackctx.fillStyle = '#000'
   seqTrackctx.font = `${fontSize}px`
   const textWidth = seqTrackctx.measureText(letter).width
-  const textX = left + (width - textWidth) / 2
+  const textX = Math.round(left + (width - textWidth) / 2)
   seqTrackctx.fillText(letter, textX, top + 10)
 }
 
 function drawTranslationFrameBackgrounds(
-  canvas: HTMLCanvasElement,
   ctx: CanvasRenderingContext2D,
   bpPerPx: number,
   theme: Theme,
-  dynamicBlocks: BlockSet,
   highContrast: boolean,
+  left: number,
+  width: number,
   sequenceRowHeight: number,
+  reversed?: boolean,
 ) {
   const frames =
     bpPerPx <= 1 ? [3, 2, 1, 0, 0, -1, -2, -3] : [3, 2, 1, -1, -2, -3]
+  if (reversed) {
+    frames.reverse()
+  }
   for (const [idx, frame] of frames.entries()) {
     const frameColor = theme.palette.framesCDS.at(frame)?.main
     if (!frameColor) {
       continue
     }
     const top = idx * sequenceRowHeight
-    const { offsetPx } = dynamicBlocks
-    const left = Math.max(0, -offsetPx)
-    const width = dynamicBlocks.totalWidthPx
     ctx.fillStyle = highContrast ? theme.palette.background.default : frameColor
     ctx.fillRect(left, top, width, sequenceRowHeight)
     if (highContrast) {
       // eslint-disable-next-line prefer-destructuring
-      ctx.strokeStyle = theme.palette.grey[200]
-      ctx.strokeRect(left, top, width, sequenceRowHeight)
-    }
-  }
-  // allows inter-region padding lines to show through
-  for (const block of dynamicBlocks.getBlocks()) {
-    if (block.type === 'InterRegionPaddingBlock') {
-      const left = block.offsetPx - dynamicBlocks.offsetPx
-      ctx.clearRect(left, 0, block.widthPx, canvas.height)
+      const strokeStyle = theme.palette.grey[200]
+      strokeRectInner(ctx, left, top, width, sequenceRowHeight, strokeStyle)
     }
   }
 }
@@ -88,11 +61,12 @@ function drawBase(
   rowHeight: number,
   theme: Theme,
 ) {
-  const width = 1 / bpPerPx
-  if (width < 1) {
+  if (1 / bpPerPx < 1) {
     return
   }
-  const left = leftPx + index / bpPerPx
+  const left = Math.round(leftPx + index / bpPerPx)
+  const nextLeft = Math.round(leftPx + (index + 1) / bpPerPx)
+  const width = nextLeft - left
   const strands = [-1, 1] as const
   for (const strand of strands) {
     const top = (strand === 1 ? 3 : 4) * rowHeight
@@ -100,8 +74,8 @@ function drawBase(
     ctx.fillStyle = colorCode(baseCode, theme)
     ctx.fillRect(left, top, width, rowHeight)
     if (1 / bpPerPx >= 12) {
-      ctx.strokeStyle = theme.palette.text.disabled
-      ctx.strokeRect(left, top, width, rowHeight)
+      const strokeStyle = theme.palette.text.disabled
+      strokeRectInner(ctx, left, top, width, rowHeight, strokeStyle)
       drawLetter(ctx, left, top, width, baseCode)
     }
   }
@@ -131,7 +105,8 @@ function drawCodon(
       continue
     }
     const left = Math.round(leftPx + index / bpPerPx)
-    const width = Math.round(3 / bpPerPx)
+    const nextLeft = Math.round(leftPx + (index + 3) / bpPerPx)
+    const width = nextLeft - left
     const codonCode = strand === 1 ? codon : revcom(codon)
     const aminoAcidCode =
       defaultCodonTable[codonCode as keyof typeof defaultCodonTable]
@@ -145,8 +120,8 @@ function drawCodon(
       ctx.fillRect(left, top, width, rowHeight)
     }
     if (1 / bpPerPx >= 4) {
-      ctx.strokeStyle = theme.palette.text.disabled
-      ctx.strokeRect(left, top, width, rowHeight)
+      const strokeStyle = theme.palette.text.disabled
+      strokeRectInner(ctx, left, top, width, rowHeight, strokeStyle)
       drawLetter(ctx, left, top, width, aminoAcidCode)
     }
   }
@@ -170,18 +145,20 @@ export function drawSequenceTrack(
   }
   ctx.clearRect(0, 0, canvas.width, canvas.height)
 
-  drawTranslationFrameBackgrounds(
-    canvas,
-    ctx,
-    bpPerPx,
-    theme,
-    dynamicBlocks,
-    highContrast,
-    sequenceRowHeight,
-  )
-
   const { apolloDataStore } = session
   for (const block of dynamicBlocks.contentBlocks) {
+    const totalOffsetPx = block.offsetPx - offsetPx
+
+    drawTranslationFrameBackgrounds(
+      ctx,
+      bpPerPx,
+      theme,
+      highContrast,
+      totalOffsetPx,
+      block.widthPx,
+      sequenceRowHeight,
+      block.reversed,
+    )
     const assembly = apolloDataStore.assemblies.get(block.assemblyName)
     const ref = assembly?.getByRefName(block.refName)
     const roundedStart = Math.floor(block.start)
@@ -191,10 +168,15 @@ export function drawSequenceTrack(
       return
     }
     seq = seq.toUpperCase()
-    const baseOffsetPx = (block.start - roundedStart) / bpPerPx
-    const seqLeftPx = Math.round(block.offsetPx - offsetPx - baseOffsetPx)
+    if (block.reversed) {
+      seq = revcom(seq)
+    }
+    const baseOffsetPx =
+      (block.reversed ? roundedEnd - block.end : block.start - roundedStart) /
+      bpPerPx
+    const seqLeftPx = totalOffsetPx - baseOffsetPx
     for (let i = 0; i < seq.length; i++) {
-      const bp = roundedStart + i
+      const bp = block.reversed ? roundedEnd - i : roundedStart + i
       const codon = seq.slice(i, i + 3)
       drawBase(ctx, seq[i], i, seqLeftPx, bpPerPx, sequenceRowHeight, theme)
       if (codon.length !== 3) {

package/src/LinearApolloSixFrameDisplay/stateModel/base.ts

@@ -39,6 +39,8 @@ export function baseModelFactory(
       graphical: true,
       table: false,
       showFeatureLabels: true,
+      showStartCodons: false,
+      showStopCodons: true,
       showCheckResults: true,
       zoomThreshold: 200,
       heightPreConfig: types.maybe(
@@ -179,6 +181,12 @@ export function baseModelFactory(
       toggleShowFeatureLabels() {
         self.showFeatureLabels = !self.showFeatureLabels
       },
+      toggleShowStartCodons() {
+        self.showStartCodons = !self.showStartCodons
+      },
+      toggleShowStopCodons() {
+        self.showStopCodons = !self.showStopCodons
+      },
       toggleShowCheckResults() {
         self.showCheckResults = !self.showCheckResults
       },
@@ -193,7 +201,14 @@ export function baseModelFactory(
       const { filteredFeatureTypes, trackMenuItems: superTrackMenuItems } = self
       return {
         trackMenuItems() {
-          const { graphical, table, showFeatureLabels, showCheckResults } = self
+          const {
+            graphical,
+            table,
+            showFeatureLabels,
+            showStartCodons,
+            showStopCodons,
+            showCheckResults,
+          } = self
           return [
             ...superTrackMenuItems(),
             {
@@ -232,6 +247,22 @@ export function baseModelFactory(
                     self.toggleShowFeatureLabels()
                   },
                 },
+                {
+                  label: 'Show start codons',
+                  type: 'checkbox',
+                  checked: showStartCodons,
+                  onClick: () => {
+                    self.toggleShowStartCodons()
+                  },
+                },
+                {
+                  label: 'Show stop codons',
+                  type: 'checkbox',
+                  checked: showStopCodons,
+                  onClick: () => {
+                    self.toggleShowStopCodons()
+                  },
+                },
                 {
                   label: 'Check Results',
                   type: 'checkbox',
@@ -326,7 +357,7 @@ export function baseModelFactory(
               void (
                 self.session as unknown as ApolloSessionModel
               ).apolloDataStore.loadFeatures(self.regions)
-              if (self.lgv.bpPerPx <= 3) {
+              if (self.lgv.bpPerPx <= self.zoomThreshold) {
                 void (
                   self.session as unknown as ApolloSessionModel
                 ).apolloDataStore.loadRefSeq(self.regions)