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

package/src/LinearApolloSixFrameDisplay/components/LinearApolloSixFrameDisplay.tsx

@@ -1,19 +1,25 @@
 /* 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,
   doesIntersect2,
   getContainingView,
+  getFrame,
 } from '@jbrowse/core/util'
 import { type LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 import ErrorIcon from '@mui/icons-material/Error'
-import { Alert, Avatar, Tooltip, useTheme } from '@mui/material'
+import { Alert, Avatar, Badge, Box, 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 LinearApolloSixFrameDisplay as LinearApolloSixFrameDisplayI } from '../stateModel'
 
 import { TrackLines } from './TrackLines'
@@ -21,31 +27,11 @@ import { TrackLines } from './TrackLines'
 interface LinearApolloSixFrameDisplayProps {
   model: LinearApolloSixFrameDisplayI
 }
-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,
-  },
-}))
 
 export const LinearApolloSixFrameDisplay = observer(
   function LinearApolloSixFrameDisplay(
     props: LinearApolloSixFrameDisplayProps,
+    apolloDragging,
   ) {
     const theme = useTheme()
     const { model } = props
@@ -54,6 +40,8 @@ export const LinearApolloSixFrameDisplay = observer(
       contextMenuItems: getContextMenuItems,
       cursor,
       featuresHeight,
+      featureLabelSpacer,
+      geneTrackRowNums,
       isShown,
       onMouseDown,
       onMouseLeave,
@@ -65,6 +53,7 @@ export const LinearApolloSixFrameDisplay = observer(
       setCollaboratorCanvas,
       setOverlayCanvas,
       setTheme,
+      showCheckResults,
     } = model
     const { classes } = useStyles()
     const lgv = getContainingView(model) as unknown as LinearGenomeViewModel
@@ -95,12 +84,16 @@ export const LinearApolloSixFrameDisplay = observer(
             } else {
               const coord: [number, number] = [event.clientX, event.clientY]
               setContextCoord(coord)
-              setContextMenuItems(getContextMenuItems(coord))
+              setContextMenuItems(getContextMenuItems(event))
             }
           }}
         >
           {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>
@@ -109,8 +102,13 @@ export const LinearApolloSixFrameDisplay = observer(
             // Promise.resolve() in these 3 callbacks is to avoid infinite rendering loop
             // https://github.com/mobxjs/mobx/issues/3728#issuecomment-1715400931
             <>
-              <TrackLines model={model} strand={1} />
-              <TrackLines model={model} strand={-1} />
+              <TrackLines model={model} idx={0} />
+              <TrackLines
+                model={model}
+                hrStyle={{ margin: 0, top: 0, color: 'grey', opacity: 0.4 }}
+                idx={1}
+              />
+              <TrackLines model={model} idx={2} />
               <canvas
                 ref={async (node: HTMLCanvasElement) => {
                   await Promise.resolve()
@@ -147,9 +145,12 @@ export const LinearApolloSixFrameDisplay = observer(
                 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) ===
@@ -161,33 +162,92 @@ export const LinearApolloSixFrameDisplay = observer(
                         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 || !feature.parent?.looksLikeGene) {
                       return null
                     }
-                    const top = 0
+
+                    let row
+                    for (const loc of feature.cdsLocations) {
+                      for (const cds of loc) {
+                        let rowNum: number = getFrame(
+                          cds.min,
+                          cds.max,
+                          feature.strand ?? 1,
+                          cds.phase,
+                        )
+                        rowNum = featureLabelSpacer(
+                          rowNum < 0 ? -1 * rowNum + 5 : rowNum,
+                        )
+                        if (
+                          checkResult.start >= cds.min &&
+                          checkResult.start <= cds.max
+                        ) {
+                          row = rowNum - 1
+                          break
+                        }
+                      }
+                    }
+                    if (row === undefined) {
+                      const rowNum =
+                        feature.strand == 1
+                          ? geneTrackRowNums[0]
+                          : geneTrackRowNums[1]
+                      row = rowNum - 1
+                    }
+
+                    const top = row * apolloRowHeight
                     const height = apolloRowHeight
                     return (
                       <Tooltip
                         key={checkResult._id}
                         title={checkResult.message}
                       >
-                        <Avatar
-                          className={classes.avatar}
-                          style={{ top, left, height, width: height }}
+                        <Box
+                          className={classes.box}
+                          style={{
+                            top,
+                            left,
+                            height,
+                            width: height,
+                            pointerEvents: apolloDragging ? 'none' : 'auto',
+                          }}
                         >
-                          <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}
@@ -198,9 +258,11 @@ export const LinearApolloSixFrameDisplay = observer(
                 onClose={() => {
                   setContextMenuItems([])
                 }}
-                TransitionProps={{
-                  onExit: () => {
-                    setContextMenuItems([])
+                slotProps={{
+                  transition: {
+                    onExit: () => {
+                      setContextMenuItems([])
+                    },
                   },
                 }}
                 anchorReference="anchorPosition"

package/src/LinearApolloSixFrameDisplay/components/TrackLines.tsx

@@ -5,36 +5,28 @@ import { type LinearApolloSixFrameDisplay } from '../stateModel'
 
 export const TrackLines = observer(function TrackLines({
   model,
-  strand,
+  hrStyle = { margin: 0, top: 0, color: 'black' },
+  idx = 0,
 }: {
   model: LinearApolloSixFrameDisplay
-  strand: number
+  hrStyle?: React.CSSProperties
+  idx: number
 }) {
-  const { apolloRowHeight, highestRow, lastRowTooltipBufferHeight } = model
-  return strand == 1 ? (
-    <div
-      style={{
-        position: 'absolute',
-        left: 0,
-        top: (apolloRowHeight * (highestRow + 1)) / 2 - 2,
-        width: '100%',
-      }}
-    >
-      <hr style={{ margin: 0, top: 0, color: 'black' }} />
-    </div>
-  ) : (
+  const { apolloRowHeight, highestRow, showFeatureLabels } = model
+  const featureLabelSpacer = showFeatureLabels ? 2 : 1
+
+  return (
     <div
       style={{
         position: 'absolute',
         left: 0,
-        bottom:
-          (apolloRowHeight * (highestRow + 1) + lastRowTooltipBufferHeight) /
-            2 +
-          3,
+        top:
+          (apolloRowHeight * featureLabelSpacer * (highestRow + 1)) / 2 +
+          idx * featureLabelSpacer * apolloRowHeight,
         width: '100%',
       }}
     >
-      <hr style={{ margin: 0, top: 0, color: 'black' }} />
+      <hr style={hrStyle} />
     </div>
   )
 })