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

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
@@ -149,66 +150,18 @@ export const TranscriptWidgetEditLocation = observer(
       cdsMax = sortedCDSLocations[sortedCDSLocations.length - 1].max
     }
 
-    function handleCDSLocationChange(
+    const updateCDSLocation = (
       oldLocation: number,
       newLocation: number,
       feature: AnnotationFeature,
       isMin: boolean,
-    ) {
+      onComplete?: () => void,
+    ): boolean => {
       if (!feature.children) {
         throw new Error('Transcript should have child features')
       }
-
-      const overlappingExon = getOverlappingExonForCDS(
-        feature,
-        featureTypeOntology,
-        oldLocation,
-        isMin,
-      )
-      if (!overlappingExon) {
-        notify('No matching exon found', 'error')
-        return
-      }
-      const oldExonLocation = isMin ? overlappingExon.min : overlappingExon.max
-      const { prevExon, nextExon } = getNeighboringExonParts(
-        feature,
-        featureTypeOntology,
-        oldExonLocation,
-        isMin,
-      )
-
-      // Start location should be less than end location
-      if (isMin && newLocation >= overlappingExon.max) {
-        notify(
-          'Start location should be less than overlapping exon end location',
-          'error',
-        )
-        return
-      }
-
-      // End location should be greater than start location
-      if (!isMin && newLocation <= overlappingExon.min) {
-        notify(
-          'End location should be greater than overlapping exon start location',
-          'error',
-        )
-        return
-      }
-      // Changed location should be greater than end location of previous exon - give 2bp buffer
-      if (prevExon && prevExon.max + 2 > newLocation) {
-        notify(
-          'Start location should be greater than previous exon end location',
-          'error',
-        )
-        return
-      }
-      // Changed location should be less than start location of next exon
-      if (nextExon && nextExon.min - 2 < newLocation) {
-        notify(
-          'End location should be less than next exon start location',
-          'error',
-        )
-        return
+      if (oldLocation === newLocation) {
+        return true
       }
 
       const cdsFeature = getMatchingCDSFeature(
@@ -217,10 +170,14 @@ export const TranscriptWidgetEditLocation = observer(
         oldLocation,
         isMin,
       )
-
       if (!cdsFeature) {
         notify('No matching CDS feature found', 'error')
-        return
+        return false
+      }
+
+      if (isMin && newLocation >= cdsFeature.max) {
+        notify('Start location should be less than CDS end location', 'error')
+        return false
       }
 
       if (!isMin && newLocation <= cdsFeature.min) {
@@ -228,145 +185,23 @@ export const TranscriptWidgetEditLocation = observer(
           'End location should be greater than CDS start location',
           'error',
         )
-        return
-      }
-      if (isMin && newLocation >= cdsFeature.max) {
-        notify('Start location should be less than CDS end location', 'error')
-        return
-      }
-
-      const overlappingExonFeature = getExonFeature(
-        feature,
-        overlappingExon.min,
-        overlappingExon.max,
-        featureTypeOntology,
-      )
-
-      if (!overlappingExonFeature) {
-        notify('No matching exon feature found', 'error')
-        return
-      }
-
-      if (isMin && newLocation !== cdsFeature.min) {
-        const startChange: LocationStartChange = new LocationStartChange({
-          typeName: 'LocationStartChange',
-          changedIds: [],
-          changes: [],
-          assembly,
-        })
-
-        if (newLocation < overlappingExon.min) {
-          if (prevExon) {
-            // update exon start location
-            appendStartLocationChange(
-              overlappingExonFeature,
-              startChange,
-              newLocation,
-            )
-            // update CDS start location
-            appendStartLocationChange(cdsFeature, startChange, newLocation)
-          } else {
-            const transcriptStart = feature.min
-            const gene = feature.parent
-            if (newLocation < transcriptStart) {
-              if (gene && newLocation < gene.min) {
-                // update gene start location
-                appendStartLocationChange(gene, startChange, newLocation)
-              }
-              // update transcript start location
-              appendStartLocationChange(feature, startChange, newLocation)
-              // update exon start location
-              appendStartLocationChange(
-                overlappingExonFeature,
-                startChange,
-                newLocation,
-              )
-              // update CDS start location
-              appendStartLocationChange(cdsFeature, startChange, newLocation)
-            }
-          }
-        } else {
-          // update CDS start location
-          appendStartLocationChange(cdsFeature, startChange, newLocation)
-        }
-
-        void changeManager.submit(startChange).catch(() => {
-          notify('Error updating feature CDS start position', 'error')
-        })
+        return false
       }
 
-      if (!isMin && newLocation !== cdsFeature.max) {
-        const endChange: LocationEndChange = new LocationEndChange({
-          typeName: 'LocationEndChange',
-          changedIds: [],
-          changes: [],
-          assembly,
-        })
-
-        if (newLocation > overlappingExon.max) {
-          if (nextExon) {
-            // update exon end location
-            appendEndLocationChange(
-              overlappingExonFeature,
-              endChange,
-              newLocation,
-            )
-            // update CDS end location
-            appendEndLocationChange(cdsFeature, endChange, newLocation)
-          } else {
-            const transcriptEnd = feature.max
-            const gene = feature.parent
-            if (newLocation > transcriptEnd) {
-              if (gene && newLocation > gene.max) {
-                // update gene end location
-                appendEndLocationChange(gene, endChange, newLocation)
-              }
-              // update transcript end location
-              appendEndLocationChange(feature, endChange, newLocation)
-              // update exon end location
-              appendEndLocationChange(
-                overlappingExonFeature,
-                endChange,
-                newLocation,
-              )
-              // update CDS end location
-              appendEndLocationChange(cdsFeature, endChange, newLocation)
-            }
-          }
-        } else {
-          // update CDS end location
-          appendEndLocationChange(cdsFeature, endChange, newLocation)
-        }
-
-        void changeManager.submit(endChange).catch(() => {
-          notify('Error updating feature CDS end position', 'error')
-        })
-      }
-    }
-
-    const updateCDSLocation = (
-      oldLocation: number,
-      newLocation: number,
-      feature: AnnotationFeature,
-      isMin: boolean,
-      onComplete?: () => void,
-    ) => {
-      if (!feature.children) {
-        throw new Error('Transcript should have child features')
-      }
-      if (oldLocation === newLocation) {
-        return
-      }
-
-      const cdsFeature = getMatchingCDSFeature(
+      // overlapping exon of new CDS location
+      const overlappingExon = getOverlappingExonForCDS(
         feature,
         featureTypeOntology,
-        oldLocation,
+        newLocation,
         isMin,
       )
-      if (!cdsFeature) {
-        notify('No matching CDS feature found', 'error')
-        return
+
+      if (!overlappingExon) {
+        notify(
+          'There should be an overlapping exon for the new CDS location',
+          'error',
+        )
+        return false
       }
 
       const change = isMin
@@ -397,6 +232,7 @@ export const TranscriptWidgetEditLocation = observer(
         .catch(() => {
           notify('Error updating feature CDS position', 'error')
         })
+      return true
     }
 
     function handleExonLocationChange(
@@ -404,7 +240,7 @@ export const TranscriptWidgetEditLocation = observer(
       newLocation: number,
       feature: AnnotationFeature,
       isMin: boolean,
-    ) {
+    ): boolean {
       if (!feature.children) {
         throw new Error('Transcript should have child features')
       }
@@ -417,28 +253,28 @@ export const TranscriptWidgetEditLocation = observer(
 
       if (!matchingExon) {
         notify('No matching exon found', 'error')
-        return
+        return false
       }
 
       // Start location should be less than end location
       if (isMin && newLocation >= matchingExon.max) {
         notify(`Start location should be less than end location`, 'error')
-        return
+        return false
       }
       // End location should be greater than start location
       if (!isMin && newLocation <= matchingExon.min) {
         notify(`End location should be greater than start location`, 'error')
-        return
+        return false
       }
       // Changed location should be greater than end location of previous exon - give 2bp buffer
       if (prevExon && prevExon.max + 2 > newLocation) {
         notify(`Error while changing start location`, 'error')
-        return
+        return false
       }
       // Changed location should be less than start location of next exon - give 2bp buffer
       if (nextExon && nextExon.min - 2 < newLocation) {
         notify(`Error while changing end location`, 'error')
-        return
+        return false
       }
 
       const exonFeature = getExonFeature(
@@ -449,7 +285,7 @@ export const TranscriptWidgetEditLocation = observer(
       )
       if (!exonFeature) {
         notify('No matching exon feature found', 'error')
-        return
+        return false
       }
 
       const cdsFeature = getFirstCDSFeature(feature, featureTypeOntology)
@@ -577,6 +413,7 @@ export const TranscriptWidgetEditLocation = observer(
           notify('Error updating feature exon end position', 'error')
         })
       }
+      return true
     }
 
     const appendEndLocationChange = (
@@ -888,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
@@ -1012,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
@@ -1025,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,
       )
 
@@ -1038,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(
@@ -1073,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(
@@ -1142,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>
@@ -1170,7 +1018,7 @@ export const TranscriptWidgetEditLocation = observer(
                     variant="outlined"
                     value={cdsMin + 1}
                     onChangeCommitted={(newLocation: number) => {
-                      handleCDSLocationChange(
+                      return updateCDSLocation(
                         cdsMin,
                         newLocation - 1,
                         feature,
@@ -1178,6 +1026,7 @@ export const TranscriptWidgetEditLocation = observer(
                       )
                     }}
                     style={{ border: '1px solid black', borderRadius: 5 }}
+                    disabled={changeInProgress}
                   />
                 </Grid>
               ) : (
@@ -1187,7 +1036,7 @@ export const TranscriptWidgetEditLocation = observer(
                     variant="outlined"
                     value={cdsMax}
                     onChangeCommitted={(newLocation: number) => {
-                      handleCDSLocationChange(
+                      return updateCDSLocation(
                         cdsMax,
                         newLocation,
                         feature,
@@ -1195,6 +1044,7 @@ export const TranscriptWidgetEditLocation = observer(
                       )
                     }}
                     style={{ border: '1px solid black', borderRadius: 5 }}
+                    disabled={changeInProgress}
                   />
                 </Grid>
               )}
@@ -1208,7 +1058,7 @@ export const TranscriptWidgetEditLocation = observer(
                     variant="outlined"
                     value={cdsMax}
                     onChangeCommitted={(newLocation: number) => {
-                      handleCDSLocationChange(
+                      return updateCDSLocation(
                         cdsMax,
                         newLocation,
                         feature,
@@ -1216,6 +1066,7 @@ export const TranscriptWidgetEditLocation = observer(
                       )
                     }}
                     style={{ border: '1px solid black', borderRadius: 5 }}
+                    disabled={changeInProgress}
                   />
                 </Grid>
               ) : (
@@ -1225,7 +1076,7 @@ export const TranscriptWidgetEditLocation = observer(
                     variant="outlined"
                     value={cdsMin + 1}
                     onChangeCommitted={(newLocation: number) => {
-                      handleCDSLocationChange(
+                      return updateCDSLocation(
                         cdsMin,
                         newLocation - 1,
                         feature,
@@ -1233,6 +1084,7 @@ export const TranscriptWidgetEditLocation = observer(
                       )
                     }}
                     style={{ border: '1px solid black', borderRadius: 5 }}
+                    disabled={changeInProgress}
                   />
                 </Grid>
               )}
@@ -1270,13 +1122,14 @@ export const TranscriptWidgetEditLocation = observer(
                           variant="outlined"
                           value={loc.min + 1}
                           onChangeCommitted={(newLocation: number) => {
-                            handleExonLocationChange(
+                            return handleExonLocationChange(
                               loc.min,
                               newLocation - 1,
                               feature,
                               true,
                             )
                           }}
+                          disabled={changeInProgress}
                         />
                       </Grid>
                     ) : (
@@ -1286,13 +1139,14 @@ export const TranscriptWidgetEditLocation = observer(
                           variant="outlined"
                           value={loc.max}
                           onChangeCommitted={(newLocation: number) => {
-                            handleExonLocationChange(
+                            return handleExonLocationChange(
                               loc.max,
                               newLocation,
                               feature,
                               false,
                             )
                           }}
+                          disabled={changeInProgress}
                         />
                       </Grid>
                     )}
@@ -1306,13 +1160,14 @@ export const TranscriptWidgetEditLocation = observer(
                           variant="outlined"
                           value={loc.max}
                           onChangeCommitted={(newLocation: number) => {
-                            handleExonLocationChange(
+                            return handleExonLocationChange(
                               loc.max,
                               newLocation,
                               feature,
                               false,
                             )
                           }}
+                          disabled={changeInProgress}
                         />
                       </Grid>
                     ) : (
@@ -1322,13 +1177,14 @@ export const TranscriptWidgetEditLocation = observer(
                           variant="outlined"
                           value={loc.min + 1}
                           onChangeCommitted={(newLocation: number) => {
-                            handleExonLocationChange(
+                            return handleExonLocationChange(
                               loc.min,
                               newLocation - 1,
                               feature,
                               true,
                             )
                           }}
+                          disabled={changeInProgress}
                         />
                       </Grid>
                     )}

package/src/LinearApolloDisplay/components/CheckResultWarnings.tsx

@@ -0,0 +1,92 @@
+import { type CheckResultI } from '@apollo-annotation/mst'
+import { type AbstractSessionModel, doesIntersect2 } from '@jbrowse/core/util'
+import ErrorIcon from '@mui/icons-material/Error'
+import { Avatar, Badge, Box, Tooltip } from '@mui/material'
+import { observer } from 'mobx-react'
+import React from 'react'
+
+import { clusterResultByMessage, useStyles } from '../../util/displayUtils'
+import { getLeftPx } from '../glyphs/util'
+import { type LinearApolloDisplay as LinearApolloDisplayI } from '../stateModel'
+
+export const CheckResultWarnings = observer(function CheckResultWarnings({
+  display,
+}: {
+  display: LinearApolloDisplayI
+}) {
+  const { classes } = useStyles()
+  const { apolloDragging, apolloRowHeight, lgv, session, showCheckResults } =
+    display
+  const { assemblyManager } = session as unknown as AbstractSessionModel
+  if (!showCheckResults) {
+    return null
+  }
+  return lgv.dynamicBlocks.contentBlocks.map((block) => {
+    const widthBp = lgv.bpPerPx * apolloRowHeight
+    const assembly = assemblyManager.get(block.assemblyName)
+    if (!assembly) {
+      return null
+    }
+    const filteredCheckResults = [
+      ...session.apolloDataStore.checkResults.values(),
+    ].filter(
+      (checkResult) =>
+        assembly.isValidRefName(checkResult.refSeq) &&
+        assembly.getCanonicalRefName(checkResult.refSeq) === block.refName &&
+        doesIntersect2(
+          block.start,
+          block.end,
+          checkResult.start,
+          checkResult.end,
+        ),
+    )
+    const checkResults = clusterResultByMessage<CheckResultI>(
+      filteredCheckResults,
+      widthBp,
+      true,
+    )
+    return checkResults.map((checkResult) => {
+      const left = Math.round(getLeftPx(display, checkResult.range, block))
+
+      const [feature] = checkResult.featureIds
+      if (!feature) {
+        return null
+      }
+      let row = 0
+      const featureLayout = display.getFeatureLayoutPosition(feature)
+      if (featureLayout) {
+        row = featureLayout.layoutRow + featureLayout.featureRow
+      }
+      const top = row * apolloRowHeight
+      const height = apolloRowHeight
+      return (
+        <Tooltip key={checkResult._id} title={checkResult.message}>
+          <Box
+            className={classes.box}
+            style={{
+              top,
+              left,
+              height,
+              width: height,
+              pointerEvents: apolloDragging ? 'none' : 'auto',
+            }}
+          >
+            <Badge
+              className={classes.badge}
+              badgeContent={checkResult.count}
+              color="primary"
+              overlap="circular"
+              anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+              invisible={checkResult.count <= 1}
+            >
+              <Avatar className={classes.avatar}>
+                <ErrorIcon data-testid={`ErrorIcon-${checkResult.start}`} />
+              </Avatar>
+            </Badge>
+          </Box>
+        </Tooltip>
+      )
+    })
+    return null
+  })
+})