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

package/src/FeatureDetailsWidget/TranscriptWidgetSummary.tsx

@@ -37,6 +37,10 @@ export const TranscriptWidgetSummary = observer(
               <TableCell>{getFeatureId(feature)}</TableCell>
             </TableRow>
           )}
+          <TableRow>
+            <HeaderTableCell>Type</HeaderTableCell>
+            <TableCell>{feature.type}</TableCell>
+          </TableRow>
           <TableRow>
             <HeaderTableCell>Location</HeaderTableCell>
             <TableCell>

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={{
@@ -139,17 +90,26 @@ export const LinearApolloDisplay = observer(function LinearApolloDisplay(
           } else {
             const coord: [number, number] = [event.clientX, event.clientY]
             setContextCoord(coord)
-            setContextMenuItems(getContextMenuItems(coord))
+            setContextMenuItems(getContextMenuItems(event))
           }
         }}
       >
+        {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"

package/src/LinearApolloDisplay/glyphs/BoxGlyph.ts

@@ -1,20 +1,16 @@
 import { type AnnotationFeature } from '@apollo-annotation/mst'
 import { type MenuItem } from '@jbrowse/core/ui'
-import {
-  type AbstractSessionModel,
-  type SessionWithWidgets,
-  isSessionModelWithWidgets,
-} from '@jbrowse/core/util'
-import { type Theme, alpha } from '@mui/material'
+import { alpha } from '@mui/material'
 
-import { AddChildFeature, CopyFeature, DeleteFeature } from '../../components'
-import { type LinearApolloDisplay } from '../stateModel'
 import {
-  type LinearApolloDisplayMouseEvents,
   type MousePosition,
-  type MousePositionWithFeatureAndGlyph,
-  isMousePositionWithFeatureAndGlyph,
-} from '../stateModel/mouseEvents'
+  type MousePositionWithFeature,
+  getContextMenuItemsForFeature,
+  isMousePositionWithFeature,
+  isSelectedFeature,
+} from '../../util'
+import { type LinearApolloDisplay } from '../stateModel'
+import { type LinearApolloDisplayMouseEvents } from '../stateModel/mouseEvents'
 import { type LinearApolloDisplayRendering } from '../stateModel/rendering'
 import { type CanvasMouseEvent } from '../types'
 
@@ -46,20 +42,6 @@ function drawBoxFill(
   drawBox(ctx, x + 1, y + 1, width - 2, height - 2, color)
 }
 
-function drawBoxText(
-  ctx: CanvasRenderingContext2D,
-  x: number,
-  y: number,
-  width: number,
-  color: string,
-  text: string,
-) {
-  ctx.fillStyle = color
-  const textStart = Math.max(x + 1, 0)
-  const textWidth = x - 1 + width - textStart
-  ctx.fillText(text, textStart, y + 11, textWidth)
-}
-
 function draw(
   ctx: CanvasRenderingContext2D,
   feature: AnnotationFeature,
@@ -67,7 +49,7 @@ function draw(
   stateModel: LinearApolloDisplayRendering,
   displayedRegionIndex: number,
 ) {
-  const { apolloRowHeight: heightPx, lgv, session, theme } = stateModel
+  const { apolloRowHeight: heightPx, lgv, selectedFeature, theme } = stateModel
   const { bpPerPx, displayedRegions, offsetPx } = lgv
   const displayedRegion = displayedRegions[displayedRegionIndex]
   const minX =
@@ -77,13 +59,11 @@ function draw(
       regionNumber: displayedRegionIndex,
     })?.offsetPx ?? 0) - offsetPx
   const { reversed } = displayedRegion
-  const { apolloSelectedFeature } = session
   const widthPx = feature.length / bpPerPx
   const startPx = reversed ? minX - widthPx : minX
   const top = row * heightPx
-  const isSelected = isSelectedFeature(feature, apolloSelectedFeature)
-  const backgroundColor = getBackgroundColor(theme, isSelected)
-  const textColor = getTextColor(theme, isSelected)
+  const backgroundColor = theme.palette.background.default
+  const textColor = theme.palette.text.primary
   const featureBox: [number, number, number, number] = [
     startPx,
     top,
@@ -97,7 +77,9 @@ function draw(
   }
 
   drawBoxFill(ctx, startPx, top, widthPx, heightPx, backgroundColor)
-  drawBoxText(ctx, startPx, top, widthPx, textColor, feature.type)
+  if (isSelectedFeature(feature, selectedFeature)) {
+    drawHighlight(stateModel, ctx, feature, true)
+  }
 }
 
 function drawDragPreview(
@@ -123,22 +105,20 @@ function drawDragPreview(
   const rectY = row * apolloRowHeight
   const rectWidth = Math.abs(current.x - featureEdgePx)
   const rectHeight = apolloRowHeight * rowCount
-  overlayCtx.strokeStyle = theme?.palette.info.main ?? 'rgb(255,0,0)'
+  overlayCtx.strokeStyle = theme.palette.info.main
   overlayCtx.setLineDash([6])
   overlayCtx.strokeRect(rectX, rectY, rectWidth, rectHeight)
-  overlayCtx.fillStyle = alpha(theme?.palette.info.main ?? 'rgb(255,0,0)', 0.2)
+  overlayCtx.fillStyle = alpha(theme.palette.info.main, 0.2)
   overlayCtx.fillRect(rectX, rectY, rectWidth, rectHeight)
 }
 
-function drawHover(
-  stateModel: LinearApolloDisplay,
+function drawHighlight(
+  stateModel: LinearApolloDisplayRendering,
   ctx: CanvasRenderingContext2D,
+  feature: AnnotationFeature,
+  selected = false,
 ) {
-  const { apolloHover, apolloRowHeight, lgv, theme } = stateModel
-  if (!apolloHover) {
-    return
-  }
-  const { feature } = apolloHover
+  const { apolloRowHeight, lgv, theme } = stateModel
   const position = stateModel.getFeatureLayoutPosition(feature)
   if (!position) {
     return
@@ -156,19 +136,32 @@ function drawHover(
     })?.offsetPx ?? 0) - offsetPx
   const top = layoutRow * apolloRowHeight
   const widthPx = length / bpPerPx
-  ctx.fillStyle = theme?.palette.action.focus ?? 'rgba(0,0,0,0.04)'
+  ctx.fillStyle = selected
+    ? theme.palette.action.disabled
+    : theme.palette.action.focus
   ctx.fillRect(startPx, top, widthPx, apolloRowHeight)
 }
 
+function drawHover(
+  stateModel: LinearApolloDisplay,
+  ctx: CanvasRenderingContext2D,
+) {
+  const { hoveredFeature } = stateModel
+  if (!hoveredFeature) {
+    return
+  }
+  drawHighlight(stateModel, ctx, hoveredFeature.feature)
+}
+
 function drawTooltip(
   display: LinearApolloDisplayMouseEvents,
   context: CanvasRenderingContext2D,
 ): void {
-  const { apolloHover, apolloRowHeight, lgv, theme } = display
-  if (!apolloHover) {
+  const { hoveredFeature, apolloRowHeight, lgv, theme } = display
+  if (!hoveredFeature) {
     return
   }
-  const { feature } = apolloHover
+  const { feature } = hoveredFeature
   const position = display.getFeatureLayoutPosition(feature)
   if (!position) {
     return
@@ -205,14 +198,14 @@ function drawTooltip(
   const maxWidth = Math.max(...textWidth)
 
   startPx = startPx + widthPx + 5
-  context.fillStyle = alpha(theme?.palette.text.primary ?? 'rgb(1, 1, 1)', 0.7)
+  context.fillStyle = alpha(theme.palette.text.primary, 0.7)
   context.fillRect(startPx, top, maxWidth + 4, textWidth.length === 3 ? 45 : 35)
   context.beginPath()
   context.moveTo(startPx, top)
   context.lineTo(startPx - 5, top + 5)
   context.lineTo(startPx, top + 10)
   context.fill()
-  context.fillStyle = theme?.palette.background.default ?? 'rgba(255, 255, 255)'
+  context.fillStyle = theme.palette.background.default
   let textTop = top + 12
   context.fillText(featureType, startPx + 2, textTop)
   if (featureName) {
@@ -223,26 +216,6 @@ function drawTooltip(
   context.fillText(location, startPx + 2, textTop)
 }
 
-export function isSelectedFeature(
-  feature: AnnotationFeature,
-  selectedFeature: AnnotationFeature | undefined,
-) {
-  return Boolean(selectedFeature && feature._id === selectedFeature._id)
-}
-
-function getBackgroundColor(theme: Theme | undefined, selected: boolean) {
-  return selected
-    ? theme?.palette.text.primary ?? 'black'
-    : theme?.palette.background.default ?? 'white'
-}
-
-function getTextColor(theme: Theme | undefined, selected: boolean) {
-  return selected
-    ? theme?.palette.getContrastText(getBackgroundColor(theme, selected)) ??
-        'white'
-    : theme?.palette.text.primary ?? 'black'
-}
-
 export function drawBox(
   ctx: CanvasRenderingContext2D,
   x: number,
@@ -258,141 +231,11 @@ export function drawBox(
 function getContextMenuItems(
   display: LinearApolloDisplayMouseEvents,
 ): MenuItem[] {
-  const {
-    apolloHover,
-    apolloInternetAccount: internetAccount,
-    changeManager,
-    regions,
-    selectedFeature,
-    session,
-  } = display
-  const menuItems: MenuItem[] = []
-  if (!apolloHover) {
-    return menuItems
-  }
-  const { feature: sourceFeature } = apolloHover
-  const role = internetAccount ? internetAccount.role : 'admin'
-  const admin = role === 'admin'
-  const readOnly = !(role && ['admin', 'user'].includes(role))
-  const [region] = regions
-  const sourceAssemblyId = display.getAssemblyId(region.assemblyName)
-  const currentAssemblyId = display.getAssemblyId(region.assemblyName)
-  menuItems.push(
-    {
-      label: 'Add child feature',
-      disabled: readOnly,
-      onClick: () => {
-        ;(session as unknown as AbstractSessionModel).queueDialog(
-          (doneCallback) => [
-            AddChildFeature,
-            {
-              session,
-              handleClose: () => {
-                doneCallback()
-              },
-              changeManager,
-              sourceFeature,
-              sourceAssemblyId,
-              internetAccount,
-            },
-          ],
-        )
-      },
-    },
-    {
-      label: 'Copy features and annotations',
-      disabled: readOnly,
-      onClick: () => {
-        ;(session as unknown as AbstractSessionModel).queueDialog(
-          (doneCallback) => [
-            CopyFeature,
-            {
-              session,
-              handleClose: () => {
-                doneCallback()
-              },
-              changeManager,
-              sourceFeature,
-              sourceAssemblyId: currentAssemblyId,
-            },
-          ],
-        )
-      },
-    },
-    {
-      label: 'Delete feature',
-      disabled: !admin,
-      onClick: () => {
-        ;(session as unknown as AbstractSessionModel).queueDialog(
-          (doneCallback) => [
-            DeleteFeature,
-            {
-              session,
-              handleClose: () => {
-                doneCallback()
-              },
-              changeManager,
-              sourceFeature,
-              sourceAssemblyId: currentAssemblyId,
-              selectedFeature,
-              setSelectedFeature: (feature?: AnnotationFeature) => {
-                display.setSelectedFeature(feature)
-              },
-            },
-          ],
-        )
-      },
-    },
-    {
-      label: 'Edit feature details',
-      onClick: () => {
-        const apolloFeatureWidget = (
-          session as unknown as SessionWithWidgets
-        ).addWidget(
-          'ApolloFeatureDetailsWidget',
-          'apolloFeatureDetailsWidget',
-          {
-            feature: sourceFeature,
-            assembly: currentAssemblyId,
-            refName: region.refName,
-          },
-        )
-        ;(session as unknown as SessionWithWidgets).showWidget(
-          apolloFeatureWidget,
-        )
-      },
-    },
-  )
-  const { featureTypeOntology } = session.apolloDataStore.ontologyManager
-  if (!featureTypeOntology) {
-    throw new Error('featureTypeOntology is undefined')
+  const { hoveredFeature } = display
+  if (!hoveredFeature) {
+    return []
   }
-  if (
-    (featureTypeOntology.isTypeOf(sourceFeature.type, 'transcript') ||
-      featureTypeOntology.isTypeOf(
-        sourceFeature.type,
-        'pseudogenic_transcript',
-      )) &&
-    isSessionModelWithWidgets(session)
-  ) {
-    menuItems.push({
-      label: 'Edit transcript details',
-      onClick: () => {
-        const apolloTranscriptWidget = session.addWidget(
-          'ApolloTranscriptDetails',
-          'apolloTranscriptDetails',
-          {
-            feature: sourceFeature,
-            assembly: currentAssemblyId,
-            changeManager,
-            refName: region.refName,
-          },
-        )
-        session.showWidget(apolloTranscriptWidget)
-      },
-    })
-  }
-  return menuItems
+  return getContextMenuItemsForFeature(display, hoveredFeature.feature)
 }
 
 function getFeatureFromLayout(
@@ -416,13 +259,12 @@ function getRowForFeature(
 
 function onMouseDown(
   stateModel: LinearApolloDisplay,
-  currentMousePosition: MousePositionWithFeatureAndGlyph,
+  currentMousePosition: MousePositionWithFeature,
   event: CanvasMouseEvent,
 ) {
-  const { featureAndGlyphUnderMouse } = currentMousePosition
+  const { feature } = currentMousePosition
   // swallow the mouseDown if we are on the edge of the feature so that we
   // don't start dragging the view if we try to drag the feature edge
-  const { feature } = featureAndGlyphUnderMouse
   const edge = isMouseOnFeatureEdge(currentMousePosition, feature, stateModel)
   if (edge) {
     event.stopPropagation()
@@ -438,10 +280,9 @@ function onMouseMove(
   stateModel: LinearApolloDisplay,
   mousePosition: MousePosition,
 ) {
-  if (isMousePositionWithFeatureAndGlyph(mousePosition)) {
-    const { featureAndGlyphUnderMouse } = mousePosition
-    stateModel.setApolloHover(featureAndGlyphUnderMouse)
-    const { feature } = featureAndGlyphUnderMouse
+  if (isMousePositionWithFeature(mousePosition)) {
+    const { feature, bp } = mousePosition
+    stateModel.setHoveredFeature({ feature, bp })
     const edge = isMouseOnFeatureEdge(mousePosition, feature, stateModel)
     if (edge) {
       stateModel.setCursor('col-resize')
@@ -458,10 +299,12 @@ function onMouseUp(
   if (stateModel.apolloDragging) {
     return
   }
-  const { featureAndGlyphUnderMouse } = mousePosition
-  if (featureAndGlyphUnderMouse?.feature) {
-    stateModel.setSelectedFeature(featureAndGlyphUnderMouse.feature)
+  const { feature } = mousePosition
+  if (!feature) {
+    return
   }
+  stateModel.setSelectedFeature(feature)
+  stateModel.showFeatureDetailsWidget(feature)
 }
 
 /** @returns undefined if mouse not on the edge of this feature, otherwise 'start' or 'end' depending on which edge */
@@ -496,6 +339,7 @@ export const boxGlyph: Glyph = {
   drawDragPreview,
   drawHover,
   drawTooltip,
+  getContextMenuItemsForFeature,
   getContextMenuItems,
   getFeatureFromLayout,
   getRowCount,