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

package/src/FeatureDetailsWidget/TranscriptWidgetEditLocation.tsx

@@ -25,7 +25,7 @@ import RemoveIcon from '@mui/icons-material/Remove'
 import {
   Accordion,
   AccordionDetails,
-  Grid2,
+  Grid,
   Tooltip,
   Typography,
 } from '@mui/material'
@@ -149,66 +149,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 +169,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 +184,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
+        return false
       }
 
-      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')
-        })
-      }
-
-      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 +231,7 @@ export const TranscriptWidgetEditLocation = observer(
         .catch(() => {
           notify('Error updating feature CDS position', 'error')
         })
+      return true
     }
 
     function handleExonLocationChange(
@@ -404,7 +239,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 +252,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 +284,7 @@ export const TranscriptWidgetEditLocation = observer(
       )
       if (!exonFeature) {
         notify('No matching exon feature found', 'error')
-        return
+        return false
       }
 
       const cdsFeature = getFirstCDSFeature(feature, featureTypeOntology)
@@ -577,6 +412,7 @@ export const TranscriptWidgetEditLocation = observer(
           notify('Error updating feature exon end position', 'error')
         })
       }
+      return true
     }
 
     const appendEndLocationChange = (
@@ -821,6 +657,7 @@ export const TranscriptWidgetEditLocation = observer(
           }
         }
       }
+      spliceSite = spliceSite.toUpperCase()
       return [
         {
           spliceSite,
@@ -846,6 +683,7 @@ export const TranscriptWidgetEditLocation = observer(
           }
         }
       }
+      spliceSite = spliceSite.toUpperCase()
       return [
         {
           spliceSite,
@@ -1154,21 +992,21 @@ export const TranscriptWidgetEditLocation = observer(
                 </div>
               </AccordionDetails>
             </Accordion>
-            <Grid2
+            <Grid
               container
               justifyContent="center"
               alignItems="center"
               style={{ textAlign: 'center', marginTop: 10 }}
             >
-              <Grid2 size={1} />
+              <Grid size={1} />
               {strand === 1 ? (
-                <Grid2 size={4}>
+                <Grid size={4}>
                   <StyledTextField
                     margin="dense"
                     variant="outlined"
                     value={cdsMin + 1}
                     onChangeCommitted={(newLocation: number) => {
-                      handleCDSLocationChange(
+                      return updateCDSLocation(
                         cdsMin,
                         newLocation - 1,
                         feature,
@@ -1177,15 +1015,15 @@ export const TranscriptWidgetEditLocation = observer(
                     }}
                     style={{ border: '1px solid black', borderRadius: 5 }}
                   />
-                </Grid2>
+                </Grid>
               ) : (
-                <Grid2 size={4}>
+                <Grid size={4}>
                   <StyledTextField
                     margin="dense"
                     variant="outlined"
                     value={cdsMax}
                     onChangeCommitted={(newLocation: number) => {
-                      handleCDSLocationChange(
+                      return updateCDSLocation(
                         cdsMax,
                         newLocation,
                         feature,
@@ -1194,19 +1032,19 @@ export const TranscriptWidgetEditLocation = observer(
                     }}
                     style={{ border: '1px solid black', borderRadius: 5 }}
                   />
-                </Grid2>
+                </Grid>
               )}
-              <Grid2 size={2}>
+              <Grid size={2}>
                 <Typography component={'span'}>CDS</Typography>
-              </Grid2>
+              </Grid>
               {strand === 1 ? (
-                <Grid2 size={4}>
+                <Grid size={4}>
                   <StyledTextField
                     margin="dense"
                     variant="outlined"
                     value={cdsMax}
                     onChangeCommitted={(newLocation: number) => {
-                      handleCDSLocationChange(
+                      return updateCDSLocation(
                         cdsMax,
                         newLocation,
                         feature,
@@ -1215,15 +1053,15 @@ export const TranscriptWidgetEditLocation = observer(
                     }}
                     style={{ border: '1px solid black', borderRadius: 5 }}
                   />
-                </Grid2>
+                </Grid>
               ) : (
-                <Grid2 size={4}>
+                <Grid size={4}>
                   <StyledTextField
                     margin="dense"
                     variant="outlined"
                     value={cdsMin + 1}
                     onChangeCommitted={(newLocation: number) => {
-                      handleCDSLocationChange(
+                      return updateCDSLocation(
                         cdsMin,
                         newLocation - 1,
                         feature,
@@ -1232,10 +1070,10 @@ export const TranscriptWidgetEditLocation = observer(
                     }}
                     style={{ border: '1px solid black', borderRadius: 5 }}
                   />
-                </Grid2>
+                </Grid>
               )}
-              <Grid2 size={1} />
-            </Grid2>
+              <Grid size={1} />
+            </Grid>
           </div>
         )}
         <div style={{ marginTop: 5 }}>
@@ -1243,13 +1081,13 @@ export const TranscriptWidgetEditLocation = observer(
             return (
               <div key={index}>
                 {loc.type === 'exon' && (
-                  <Grid2
+                  <Grid
                     container
                     justifyContent="center"
                     alignItems="center"
                     style={{ textAlign: 'center' }}
                   >
-                    <Grid2 size={1}>
+                    <Grid size={1}>
                       {index !== 0 &&
                         getFivePrimeSpliceSite(loc, index).map((site, idx) => (
                           <Typography
@@ -1260,15 +1098,15 @@ export const TranscriptWidgetEditLocation = observer(
                             {site.spliceSite}
                           </Typography>
                         ))}
-                    </Grid2>
+                    </Grid>
                     {strand === 1 ? (
-                      <Grid2 size={4} style={{ padding: 0 }}>
+                      <Grid size={4} style={{ padding: 0 }}>
                         <StyledTextField
                           margin="dense"
                           variant="outlined"
                           value={loc.min + 1}
                           onChangeCommitted={(newLocation: number) => {
-                            handleExonLocationChange(
+                            return handleExonLocationChange(
                               loc.min,
                               newLocation - 1,
                               feature,
@@ -1276,15 +1114,15 @@ export const TranscriptWidgetEditLocation = observer(
                             )
                           }}
                         />
-                      </Grid2>
+                      </Grid>
                     ) : (
-                      <Grid2 size={4} style={{ padding: 0 }}>
+                      <Grid size={4} style={{ padding: 0 }}>
                         <StyledTextField
                           margin="dense"
                           variant="outlined"
                           value={loc.max}
                           onChangeCommitted={(newLocation: number) => {
-                            handleExonLocationChange(
+                            return handleExonLocationChange(
                               loc.max,
                               newLocation,
                               feature,
@@ -1292,19 +1130,19 @@ export const TranscriptWidgetEditLocation = observer(
                             )
                           }}
                         />
-                      </Grid2>
+                      </Grid>
                     )}
-                    <Grid2 size={2}>
+                    <Grid size={2}>
                       <Strand strand={feature.strand} />
-                    </Grid2>
+                    </Grid>
                     {strand === 1 ? (
-                      <Grid2 size={4} style={{ padding: 0 }}>
+                      <Grid size={4} style={{ padding: 0 }}>
                         <StyledTextField
                           margin="dense"
                           variant="outlined"
                           value={loc.max}
                           onChangeCommitted={(newLocation: number) => {
-                            handleExonLocationChange(
+                            return handleExonLocationChange(
                               loc.max,
                               newLocation,
                               feature,
@@ -1312,15 +1150,15 @@ export const TranscriptWidgetEditLocation = observer(
                             )
                           }}
                         />
-                      </Grid2>
+                      </Grid>
                     ) : (
-                      <Grid2 size={4} style={{ padding: 0 }}>
+                      <Grid size={4} style={{ padding: 0 }}>
                         <StyledTextField
                           margin="dense"
                           variant="outlined"
                           value={loc.min + 1}
                           onChangeCommitted={(newLocation: number) => {
-                            handleExonLocationChange(
+                            return handleExonLocationChange(
                               loc.min,
                               newLocation - 1,
                               feature,
@@ -1328,9 +1166,9 @@ export const TranscriptWidgetEditLocation = observer(
                             )
                           }}
                         />
-                      </Grid2>
+                      </Grid>
                     )}
-                    <Grid2 size={1}>
+                    <Grid size={1}>
                       {index !== transcriptExonParts.length - 1 &&
                         getThreePrimeSpliceSite(loc, index).map((site, idx) => (
                           <Typography
@@ -1341,8 +1179,8 @@ export const TranscriptWidgetEditLocation = observer(
                             {site.spliceSite}
                           </Typography>
                         ))}
-                    </Grid2>
-                  </Grid2>
+                    </Grid>
+                  </Grid>
                 )}
               </div>
             )

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
+  })
+})