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

package/src/LinearApolloDisplay/components/LinearApolloDisplay.tsx

@@ -2,57 +2,23 @@
 /* eslint-disable @typescript-eslint/no-misused-promises */
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
 import { Menu, type MenuItem } from '@jbrowse/core/ui'
-import {
-  type AbstractSessionModel,
-  doesIntersect2,
-  getContainingView,
-} from '@jbrowse/core/util'
+import { getContainingView } from '@jbrowse/core/util'
 import { type LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
-import ErrorIcon from '@mui/icons-material/Error'
-import {
-  Alert,
-  Avatar,
-  CircularProgress,
-  Tooltip,
-  useTheme,
-} from '@mui/material'
+import LockIcon from '@mui/icons-material/Lock'
+import { Alert, 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, useStyles } from '../../util/displayUtils'
 import { type LinearApolloDisplay as LinearApolloDisplayI } from '../stateModel'
 
+import { CheckResultWarnings } from './CheckResultWarnings'
+
 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,
@@ -61,8 +27,6 @@ export const LinearApolloDisplay = observer(function LinearApolloDisplay(
   const { model } = props
   const {
     loading,
-    apolloDragging,
-    apolloRowHeight,
     contextMenuItems: getContextMenuItems,
     cursor,
     featuresHeight,
@@ -76,8 +40,6 @@ export const LinearApolloDisplay = observer(function LinearApolloDisplay(
     setCanvas,
     setCollaboratorCanvas,
     setOverlayCanvas,
-    setSeqTrackCanvas,
-    setSeqTrackOverlayCanvas,
     setTheme,
   } = model
   const { classes } = useStyles()
@@ -92,39 +54,8 @@ export const LinearApolloDisplay = observer(function LinearApolloDisplay(
   if (!isShown) {
     return null
   }
-  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 +74,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>
@@ -193,57 +133,7 @@ export const LinearApolloDisplay = observer(function LinearApolloDisplay(
               style={{ cursor: cursor ?? 'default' }}
               data-testid="overlayCanvas"
             />
-            {lgv.displayedRegions.flatMap((region, idx) => {
-              const assembly = assemblyManager.get(region.assemblyName)
-              return [...session.apolloDataStore.checkResults.values()]
-                .filter(
-                  (checkResult) =>
-                    assembly?.isValidRefName(checkResult.refSeq) &&
-                    assembly.getCanonicalRefName(checkResult.refSeq) ===
-                      region.refName &&
-                    doesIntersect2(
-                      region.start,
-                      region.end,
-                      checkResult.start,
-                      checkResult.end,
-                    ),
-                )
-                .map((checkResult) => {
-                  const left =
-                    (lgv.bpToPx({
-                      refName: region.refName,
-                      coord: checkResult.start,
-                      regionNumber: idx,
-                    })?.offsetPx ?? 0) - lgv.offsetPx
-                  const [feature] = checkResult.ids
-                  if (!feature) {
-                    return null
-                  }
-                  let row = 0
-                  const featureLayout = model.getFeatureLayoutPosition(feature)
-                  if (featureLayout) {
-                    row = featureLayout.layoutRow + featureLayout.featureRow
-                  }
-                  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,
-                          pointerEvents: apolloDragging ? 'none' : 'auto',
-                        }}
-                      >
-                        <ErrorIcon data-testid="ErrorIcon" />
-                      </Avatar>
-                    </Tooltip>
-                  )
-                })
-            })}
+            <CheckResultWarnings display={model} />
             <Menu
               open={contextMenuItems.length > 0}
               onMenuItemClick={(_, callback) => {
@@ -253,9 +143,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,16 +1,16 @@
 import { type AnnotationFeature } from '@apollo-annotation/mst'
 import { type MenuItem } from '@jbrowse/core/ui'
-import { type AbstractSessionModel } 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'
 
@@ -42,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,
@@ -63,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 =
@@ -73,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,
@@ -93,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(
@@ -119,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
@@ -152,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
@@ -201,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) {
@@ -219,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,
@@ -254,129 +231,11 @@ export function drawBox(
 function getContextMenuItems(
   display: LinearApolloDisplayMouseEvents,
 ): MenuItem[] {
-  const { apolloHover } = display
-  if (!apolloHover) {
+  const { hoveredFeature } = display
+  if (!hoveredFeature) {
     return []
   }
-  const { feature: sourceFeature } = apolloHover
-  return getContextMenuItemsForFeature(display, sourceFeature)
-}
-
-function makeFeatureLabel(feature: AnnotationFeature) {
-  let name: string | undefined
-  if (feature.attributes.get('gff_name')) {
-    name = feature.attributes.get('gff_name')?.join(',')
-  } else if (feature.attributes.get('gff_id')) {
-    name = feature.attributes.get('gff_id')?.join(',')
-  } else {
-    name = feature._id
-  }
-  const coords = `(${(feature.min + 1).toLocaleString('en')}..${feature.max.toLocaleString('en')})`
-  const maxLen = 60
-  if (name && name.length + coords.length > maxLen + 5) {
-    const trim = maxLen - coords.length
-    name = trim > 0 ? name.slice(0, trim) : ''
-    name = `${name}[...]`
-  }
-  return `${name} ${coords}`
-}
-
-function getContextMenuItemsForFeature(
-  display: LinearApolloDisplayMouseEvents,
-  sourceFeature: AnnotationFeature,
-): MenuItem[] {
-  const {
-    apolloInternetAccount: internetAccount,
-    changeManager,
-    regions,
-    selectedFeature,
-    session,
-  } = display
-  const menuItems: MenuItem[] = []
-  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)
-  const { featureTypeOntology } = session.apolloDataStore.ontologyManager
-  if (!featureTypeOntology) {
-    throw new Error('featureTypeOntology is undefined')
-  }
-
-  // Add only relevant options
-  menuItems.push(
-    {
-      label: makeFeatureLabel(sourceFeature),
-      type: 'subHeader',
-    },
-    {
-      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)
-              },
-            },
-          ],
-        )
-      },
-    },
-  )
-  return menuItems
+  return getContextMenuItemsForFeature(display, hoveredFeature.feature)
 }
 
 function getFeatureFromLayout(
@@ -400,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()
@@ -422,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')
@@ -442,11 +299,10 @@ function onMouseUp(
   if (stateModel.apolloDragging) {
     return
   }
-  const { featureAndGlyphUnderMouse } = mousePosition
-  if (!featureAndGlyphUnderMouse) {
+  const { feature } = mousePosition
+  if (!feature) {
     return
   }
-  const { feature } = featureAndGlyphUnderMouse
   stateModel.setSelectedFeature(feature)
   stateModel.showFeatureDetailsWidget(feature)
 }