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

package/src/FeatureDetailsWidget/TranscriptSequence.tsx

@@ -28,10 +28,18 @@ type SegmentListType = 'CDS' | 'cDNA' | 'genomic' | 'protein'
 
 interface SequenceSegment {
   type: SegmentType
-  sequenceLines: string[]
+  sequence: string
   locs: { min: number; max: number }[]
 }
 
+function getSequenceLength(segments: SequenceSegment[]): number {
+  let length = 0
+  for (const segment of segments) {
+    length += segment.sequence.length
+  }
+  return length
+}
+
 function getSequenceSegments(
   segmentType: SegmentListType,
   feature: AnnotationFeature,
@@ -57,51 +65,20 @@ function getSequenceSegments(
             : loc.type
         const previousSegment = segments.at(-1)
         if (!previousSegment) {
-          const sequenceLines = splitStringIntoChunks(
-            sequence,
-            SEQUENCE_WRAP_LENGTH,
-          )
           segments.push({
             type,
-            sequenceLines,
+            sequence,
             locs: [{ min: loc.min, max: loc.max }],
           })
           continue
         }
         if (previousSegment.type === type) {
-          const [previousSegmentFirstLine, ...previousSegmentFollowingLines] =
-            previousSegment.sequenceLines
-          const newSequence = previousSegmentFollowingLines.join('') + sequence
-          previousSegment.sequenceLines = [
-            previousSegmentFirstLine,
-            ...splitStringIntoChunks(newSequence, SEQUENCE_WRAP_LENGTH),
-          ]
+          previousSegment.sequence += sequence
           previousSegment.locs.push({ min: loc.min, max: loc.max })
         } else {
-          const count = segments.reduce(
-            (accumulator, currentSegment) =>
-              accumulator +
-              currentSegment.sequenceLines.reduce(
-                (subAccumulator, currentLine) =>
-                  subAccumulator + currentLine.length,
-                0,
-              ),
-            0,
-          )
-          const previousLineLength = count % SEQUENCE_WRAP_LENGTH
-          const newSegmentFirstLineLength =
-            SEQUENCE_WRAP_LENGTH - previousLineLength
-          const newSegmentFirstLine = sequence.slice(
-            0,
-            newSegmentFirstLineLength,
-          )
-          const newSegmentRemainderLines = splitStringIntoChunks(
-            sequence.slice(newSegmentFirstLineLength),
-            SEQUENCE_WRAP_LENGTH,
-          )
           segments.push({
             type,
-            sequenceLines: [newSegmentFirstLine, ...newSegmentRemainderLines],
+            sequence,
             locs: [{ min: loc.min, max: loc.max }],
           })
         }
@@ -113,17 +90,14 @@ function getSequenceSegments(
       const [firstLocation] = cdsLocations
       const locs: { min: number; max: number }[] = []
       for (const loc of firstLocation) {
-        wholeSequence += getSequence(loc.min, loc.max)
+        let locSeq = getSequence(loc.min, loc.max)
+        if (strand === -1) {
+          locSeq = revcom(locSeq)
+        }
+        wholeSequence += locSeq
         locs.push({ min: loc.min, max: loc.max })
       }
-      if (strand === -1) {
-        wholeSequence = revcom(wholeSequence)
-      }
-      const sequenceLines = splitStringIntoChunks(
-        wholeSequence,
-        SEQUENCE_WRAP_LENGTH,
-      )
-      segments.push({ type: 'CDS', sequenceLines, locs })
+      segments.push({ type: 'CDS', sequence: wholeSequence, locs })
       return segments
     }
     case 'protein': {
@@ -131,20 +105,20 @@ function getSequenceSegments(
       const [firstLocation] = cdsLocations
       const locs: { min: number; max: number }[] = []
       for (const loc of firstLocation) {
-        wholeSequence += getSequence(loc.min, loc.max)
+        let locSeq = getSequence(loc.min, loc.max)
+        if (strand === -1) {
+          locSeq = revcom(locSeq)
+        }
+        wholeSequence += locSeq
         locs.push({ min: loc.min, max: loc.max })
       }
-      if (strand === -1) {
-        wholeSequence = revcom(wholeSequence)
-      }
       let protein = ''
       for (let i = 0; i < wholeSequence.length; i += 3) {
         const codonSeq: string = wholeSequence.slice(i, i + 3).toUpperCase()
         protein +=
           defaultCodonTable[codonSeq as keyof typeof defaultCodonTable] || '&'
       }
-      const sequenceLines = splitStringIntoChunks(protein, SEQUENCE_WRAP_LENGTH)
-      segments.push({ type: 'protein', sequenceLines, locs })
+      segments.push({ type: 'protein', sequence: protein, locs })
       return segments
     }
   }
@@ -282,6 +256,43 @@ export const TranscriptSequence = observer(function TranscriptSequence({
     void copyToClipboard(seqDiv)
   }
 
+  function wrapSequence(
+    sequenceSegments: SequenceSegment[],
+    sequenceWrapLength: number,
+  ): React.ReactNode[] {
+    const seqElements: React.ReactNode[] = []
+    let processedChars = 0
+    for (const [index, segment] of sequenceSegments.entries()) {
+      const lastLineLength = processedChars % sequenceWrapLength
+      const segmentLineBreak =
+        processedChars > 0 && lastLineLength === 0 ? '\n' : ''
+      processedChars += segment.sequence.length
+      const firstLine =
+        segmentLineBreak +
+        segment.sequence.slice(0, sequenceWrapLength - lastLineLength)
+      const remainingLines = splitStringIntoChunks(
+        segment.sequence.slice(firstLine.length),
+        sequenceWrapLength,
+      )
+      const printLines = [firstLine, ...remainingLines]
+
+      const span = (
+        <span
+          key={`${segment.type}-${index}`}
+          style={{
+            background: getSegmentColor(segment.type),
+            color: theme.palette.getContrastText(getSegmentColor(segment.type)),
+            whiteSpace: 'pre-line',
+          }}
+        >
+          {printLines.join('\n')}
+        </span>
+      )
+      seqElements.push(span)
+    }
+    return seqElements
+  }
+
   return (
     <>
       <Select
@@ -289,9 +300,14 @@ export const TranscriptSequence = observer(function TranscriptSequence({
         value={selectedOption}
         onChange={handleChangeSeqOption}
         size="small"
+        data-testid="sequenceOptionSelector"
       >
         {sequenceOptions.map((option) => (
-          <MenuItem key={option} value={option}>
+          <MenuItem
+            key={option}
+            value={option}
+            data-testid={`sequenceOption-${option}`}
+          >
             {option}
           </MenuItem>
         ))}
@@ -320,29 +336,10 @@ export const TranscriptSequence = observer(function TranscriptSequence({
               : `${interval.max}-${interval.min + 1}`,
           )
           .join(';')}
-        ({feature.strand === 1 ? '+' : '-'})
+        (strand={feature.strand === 1 ? '+' : '-'};length=
+        {getSequenceLength(sequenceSegments)})
         <br />
-        {sequenceSegments.map((segment, index) => (
-          <span
-            key={`${segment.type}-${index}`}
-            style={{
-              background: getSegmentColor(segment.type),
-              color: theme.palette.getContrastText(
-                getSegmentColor(segment.type),
-              ),
-            }}
-          >
-            {segment.sequenceLines.map((sequenceLine, idx) => (
-              <React.Fragment key={`${sequenceLine.slice(0, 5)}-${idx}`}>
-                {sequenceLine}
-                {idx === segment.sequenceLines.length - 1 &&
-                sequenceLine.length !== SEQUENCE_WRAP_LENGTH ? null : (
-                  <br />
-                )}
-              </React.Fragment>
-            ))}
-          </span>
-        ))}
+        {wrapSequence(sequenceSegments, SEQUENCE_WRAP_LENGTH)}
       </Paper>
     </>
   )

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'
@@ -821,6 +821,7 @@ export const TranscriptWidgetEditLocation = observer(
           }
         }
       }
+      spliceSite = spliceSite.toUpperCase()
       return [
         {
           spliceSite,
@@ -846,6 +847,7 @@ export const TranscriptWidgetEditLocation = observer(
           }
         }
       }
+      spliceSite = spliceSite.toUpperCase()
       return [
         {
           spliceSite,
@@ -1154,15 +1156,15 @@ 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"
@@ -1177,9 +1179,9 @@ export const TranscriptWidgetEditLocation = observer(
                     }}
                     style={{ border: '1px solid black', borderRadius: 5 }}
                   />
-                </Grid2>
+                </Grid>
               ) : (
-                <Grid2 size={4}>
+                <Grid size={4}>
                   <StyledTextField
                     margin="dense"
                     variant="outlined"
@@ -1194,13 +1196,13 @@ 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"
@@ -1215,9 +1217,9 @@ export const TranscriptWidgetEditLocation = observer(
                     }}
                     style={{ border: '1px solid black', borderRadius: 5 }}
                   />
-                </Grid2>
+                </Grid>
               ) : (
-                <Grid2 size={4}>
+                <Grid size={4}>
                   <StyledTextField
                     margin="dense"
                     variant="outlined"
@@ -1232,10 +1234,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 +1245,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,9 +1262,9 @@ 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"
@@ -1276,9 +1278,9 @@ export const TranscriptWidgetEditLocation = observer(
                             )
                           }}
                         />
-                      </Grid2>
+                      </Grid>
                     ) : (
-                      <Grid2 size={4} style={{ padding: 0 }}>
+                      <Grid size={4} style={{ padding: 0 }}>
                         <StyledTextField
                           margin="dense"
                           variant="outlined"
@@ -1292,13 +1294,13 @@ 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"
@@ -1312,9 +1314,9 @@ export const TranscriptWidgetEditLocation = observer(
                             )
                           }}
                         />
-                      </Grid2>
+                      </Grid>
                     ) : (
-                      <Grid2 size={4} style={{ padding: 0 }}>
+                      <Grid size={4} style={{ padding: 0 }}>
                         <StyledTextField
                           margin="dense"
                           variant="outlined"
@@ -1328,9 +1330,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 +1343,8 @@ export const TranscriptWidgetEditLocation = observer(
                             {site.spliceSite}
                           </Typography>
                         ))}
-                    </Grid2>
-                  </Grid2>
+                    </Grid>
+                  </Grid>
                 )}
               </div>
             )

package/src/LinearApolloDisplay/components/LinearApolloDisplay.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/unbound-method */
 /* eslint-disable @typescript-eslint/no-misused-promises */
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
+import { type CheckResultI } from '@apollo-annotation/mst'
 import { Menu, type MenuItem } from '@jbrowse/core/ui'
 import {
   type AbstractSessionModel,
@@ -9,50 +10,31 @@ import {
 } from '@jbrowse/core/util'
 import { type LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 import ErrorIcon from '@mui/icons-material/Error'
+import LockIcon from '@mui/icons-material/Lock'
 import {
   Alert,
   Avatar,
+  Badge,
+  Box,
   CircularProgress,
   Tooltip,
   useTheme,
 } from '@mui/material'
 import { observer } from 'mobx-react'
 import React, { useEffect, useState } from 'react'
-import { makeStyles } from 'tss-react/mui'
 
+import {
+  type Coord,
+  clusterResultByMessage,
+  useStyles,
+} from '../../util/displayUtils'
 import { type LinearApolloDisplay as LinearApolloDisplayI } from '../stateModel'
 
 interface LinearApolloDisplayProps {
   model: LinearApolloDisplayI
 }
-export type Coord = [number, number]
 
-const useStyles = makeStyles()((theme) => ({
-  canvasContainer: {
-    position: 'relative',
-    left: 0,
-  },
-  canvas: {
-    position: 'absolute',
-    left: 0,
-  },
-  ellipses: {
-    textOverflow: 'ellipsis',
-    overflow: 'hidden',
-  },
-  avatar: {
-    position: 'absolute',
-    color: theme.palette.warning.light,
-    backgroundColor: theme.palette.warning.contrastText,
-  },
-  loading: {
-    position: 'absolute',
-    right: theme.spacing(3),
-    zIndex: 10,
-    pointerEvents: 'none',
-    textAlign: 'right',
-  },
-}))
+// Lock icon when isLocked === true
 
 export const LinearApolloDisplay = observer(function LinearApolloDisplay(
   props: LinearApolloDisplayProps,
@@ -76,9 +58,8 @@ export const LinearApolloDisplay = observer(function LinearApolloDisplay(
     setCanvas,
     setCollaboratorCanvas,
     setOverlayCanvas,
-    setSeqTrackCanvas,
-    setSeqTrackOverlayCanvas,
     setTheme,
+    showCheckResults,
   } = model
   const { classes } = useStyles()
   const lgv = getContainingView(model) as unknown as LinearGenomeViewModel
@@ -95,36 +76,6 @@ export const LinearApolloDisplay = observer(function LinearApolloDisplay(
   const { assemblyManager } = session as unknown as AbstractSessionModel
   return (
     <>
-      {3 / lgv.bpPerPx >= 1 ? (
-        <div
-          className={classes.canvasContainer}
-          style={{
-            width: lgv.dynamicBlocks.totalWidthPx,
-            height: lgv.bpPerPx <= 1 ? 125 : 95,
-          }}
-        >
-          <canvas
-            ref={async (node: HTMLCanvasElement) => {
-              await Promise.resolve()
-              setSeqTrackCanvas(node)
-            }}
-            width={lgv.dynamicBlocks.totalWidthPx}
-            height={lgv.bpPerPx <= 1 ? 125 : 95}
-            className={classes.canvas}
-            data-testid="seqTrackCanvas"
-          />
-          <canvas
-            ref={async (node: HTMLCanvasElement) => {
-              await Promise.resolve()
-              setSeqTrackOverlayCanvas(node)
-            }}
-            width={lgv.dynamicBlocks.totalWidthPx}
-            height={lgv.bpPerPx <= 1 ? 125 : 95}
-            className={classes.canvas}
-            data-testid="seqTrackOverlayCanvas"
-          />
-        </div>
-      ) : null}
       <div
         className={classes.canvasContainer}
         style={{
@@ -143,13 +94,22 @@ export const LinearApolloDisplay = observer(function LinearApolloDisplay(
           }
         }}
       >
+        {session.isLocked ? (
+          <div className={classes.locked} data-testid="lock-icon">
+            <LockIcon />
+          </div>
+        ) : null}
         {loading ? (
           <div className={classes.loading}>
             <CircularProgress size="18px" />
           </div>
         ) : null}
         {message ? (
-          <Alert severity="warning" classes={{ message: classes.ellipses }}>
+          <Alert
+            severity="warning"
+            classes={{ message: classes.ellipses }}
+            slotProps={{ root: { className: classes.center } }}
+          >
             <Tooltip title={message}>
               <div>{message}</div>
             </Tooltip>
@@ -194,9 +154,12 @@ export const LinearApolloDisplay = observer(function LinearApolloDisplay(
               data-testid="overlayCanvas"
             />
             {lgv.displayedRegions.flatMap((region, idx) => {
+              const widthBp = lgv.bpPerPx * apolloRowHeight
               const assembly = assemblyManager.get(region.assemblyName)
-              return [...session.apolloDataStore.checkResults.values()]
-                .filter(
+              if (showCheckResults) {
+                const filteredCheckResults = [
+                  ...session.apolloDataStore.checkResults.values(),
+                ].filter(
                   (checkResult) =>
                     assembly?.isValidRefName(checkResult.refSeq) &&
                     assembly.getCanonicalRefName(checkResult.refSeq) ===
@@ -208,14 +171,19 @@ export const LinearApolloDisplay = observer(function LinearApolloDisplay(
                       checkResult.end,
                     ),
                 )
-                .map((checkResult) => {
+                const checkResults = clusterResultByMessage<CheckResultI>(
+                  filteredCheckResults,
+                  widthBp,
+                  true,
+                )
+                return checkResults.map((checkResult) => {
                   const left =
                     (lgv.bpToPx({
                       refName: region.refName,
                       coord: checkResult.start,
                       regionNumber: idx,
                     })?.offsetPx ?? 0) - lgv.offsetPx
-                  const [feature] = checkResult.ids
+                  const [feature] = checkResult.featureIds
                   if (!feature) {
                     return null
                   }
@@ -228,8 +196,8 @@ export const LinearApolloDisplay = observer(function LinearApolloDisplay(
                   const height = apolloRowHeight
                   return (
                     <Tooltip key={checkResult._id} title={checkResult.message}>
-                      <Avatar
-                        className={classes.avatar}
+                      <Box
+                        className={classes.box}
                         style={{
                           top,
                           left,
@@ -238,11 +206,29 @@ export const LinearApolloDisplay = observer(function LinearApolloDisplay(
                           pointerEvents: apolloDragging ? 'none' : 'auto',
                         }}
                       >
-                        <ErrorIcon data-testid="ErrorIcon" />
-                      </Avatar>
+                        <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
             })}
             <Menu
               open={contextMenuItems.length > 0}
@@ -253,9 +239,11 @@ export const LinearApolloDisplay = observer(function LinearApolloDisplay(
               onClose={() => {
                 setContextMenuItems([])
               }}
-              TransitionProps={{
-                onExit: () => {
-                  setContextMenuItems([])
+              slotProps={{
+                transition: {
+                  onExit: () => {
+                    setContextMenuItems([])
+                  },
                 },
               }}
               anchorReference="anchorPosition"