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

package/src/LinearApolloReferenceSequenceDisplay/stateModel/rendering.ts

@@ -0,0 +1,157 @@
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
+import type PluginManager from '@jbrowse/core/PluginManager'
+import { type AnyConfigurationSchemaType } from '@jbrowse/core/configuration/configurationSchema'
+import { type Theme, createTheme } from '@mui/material'
+import { autorun } from 'mobx'
+import { type Instance, addDisposer } from 'mobx-state-tree'
+
+import { drawSequenceOverlay } from '../drawSequenceOverlay'
+import { drawSequenceTrack } from '../drawSequenceTrack'
+
+import { baseModelFactory } from './base'
+
+export function renderingModelFactory(
+  pluginManager: PluginManager,
+  configSchema: AnyConfigurationSchemaType,
+) {
+  const BaseLinearApolloReferenceSequenceDisplay = baseModelFactory(
+    pluginManager,
+    configSchema,
+  )
+
+  return BaseLinearApolloReferenceSequenceDisplay.named(
+    'LinearApolloReferenceSequenceDisplayRendering',
+  )
+    .volatile(() => ({
+      seqTrackCanvas: null as HTMLCanvasElement | null,
+      seqTrackOverlayCanvas: null as HTMLCanvasElement | null,
+      theme: createTheme(),
+    }))
+    .actions((self) => ({
+      setSeqTrackCanvas(canvas: HTMLCanvasElement | null) {
+        self.seqTrackCanvas = canvas
+      },
+      setSeqTrackOverlayCanvas(canvas: HTMLCanvasElement | null) {
+        self.seqTrackOverlayCanvas = canvas
+      },
+      setTheme(theme: Theme) {
+        self.theme = theme
+      },
+      afterAttach() {
+        addDisposer(
+          self,
+          autorun(
+            () => {
+              const {
+                lgv,
+                seqTrackCanvas,
+                theme,
+                highContrast,
+                showStartCodons,
+                showStopCodons,
+                sequenceRowHeight,
+                session,
+              } = self
+              if (
+                !lgv.initialized ||
+                self.regionCannotBeRendered() ||
+                !seqTrackCanvas
+              ) {
+                return
+              }
+
+              const trnslWidthPx = 3 / lgv.bpPerPx
+              if (trnslWidthPx < 1) {
+                return
+              }
+
+              const { bpPerPx, offsetPx, dynamicBlocks } = lgv
+              // we have to be really explicit about passing in individual
+              // variables here and not just e.g. "lgv" so that the autorun
+              // tracks the variables correctly
+              drawSequenceTrack(
+                seqTrackCanvas,
+                theme,
+                bpPerPx,
+                offsetPx,
+                dynamicBlocks,
+                highContrast,
+                showStartCodons,
+                showStopCodons,
+                sequenceRowHeight,
+                session,
+              )
+            },
+            { name: 'LinearApolloReferenceSequenceDisplayRenderSequence' },
+          ),
+        )
+        addDisposer(
+          self,
+          autorun(
+            () => {
+              const { seqTrackOverlayCanvas } = self
+              if (
+                !self.lgv.initialized ||
+                self.regionCannotBeRendered() ||
+                !seqTrackOverlayCanvas
+              ) {
+                return
+              }
+              const seqTrackOverlayctx = seqTrackOverlayCanvas.getContext('2d')
+              if (!seqTrackOverlayctx) {
+                return
+              }
+
+              seqTrackOverlayctx.clearRect(
+                0,
+                0,
+                self.lgv.dynamicBlocks.totalWidthPx,
+                self.height,
+              )
+
+              const {
+                hoveredFeature,
+                selectedFeature,
+                lgv,
+                sequenceRowHeight,
+                session,
+                theme,
+              } = self
+
+              if (!(hoveredFeature || selectedFeature)) {
+                return
+              }
+              const { bpPerPx, dynamicBlocks, offsetPx } = lgv
+              // we have to be really explicit about passing in individual
+              // variables here and not just e.g. "lgv" so that the autorun
+              // tracks the variables correctly
+              drawSequenceOverlay(
+                seqTrackOverlayCanvas,
+                seqTrackOverlayctx,
+                hoveredFeature,
+                selectedFeature,
+                sequenceRowHeight,
+                theme,
+                session,
+                bpPerPx,
+                offsetPx,
+                dynamicBlocks,
+              )
+            },
+            {
+              name: 'LinearApolloReferenceSequenceDisplayRenderSequenceHighlight',
+            },
+          ),
+        )
+      },
+    }))
+}
+
+export type LinearApolloReferenceSequenceDisplayRenderingModel = ReturnType<
+  typeof renderingModelFactory
+>
+// eslint disable because of
+// https://mobx-state-tree.js.org/tips/typescript#using-a-mst-type-at-design-time
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface LinearApolloReferenceSequenceDisplayRendering
+  extends Instance<LinearApolloReferenceSequenceDisplayRenderingModel> {}

package/src/LinearApolloSixFrameDisplay/components/LinearApolloSixFrameDisplay.tsx

@@ -1,19 +1,26 @@
 /* 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 LockIcon from '@mui/icons-material/Lock'
+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 +28,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 +41,8 @@ export const LinearApolloSixFrameDisplay = observer(
       contextMenuItems: getContextMenuItems,
       cursor,
       featuresHeight,
+      featureLabelSpacer,
+      geneTrackRowNums,
       isShown,
       onMouseDown,
       onMouseLeave,
@@ -65,6 +54,7 @@ export const LinearApolloSixFrameDisplay = observer(
       setCollaboratorCanvas,
       setOverlayCanvas,
       setTheme,
+      showCheckResults,
     } = model
     const { classes } = useStyles()
     const lgv = getContainingView(model) as unknown as LinearGenomeViewModel
@@ -95,12 +85,21 @@ export const LinearApolloSixFrameDisplay = observer(
             } 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}
           {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>
@@ -152,9 +151,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) ===
@@ -166,33 +168,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}
@@ -203,9 +264,11 @@ export const LinearApolloSixFrameDisplay = observer(
                 onClose={() => {
                   setContextMenuItems([])
                 }}
-                TransitionProps={{
-                  onExit: () => {
-                    setContextMenuItems([])
+                slotProps={{
+                  transition: {
+                    onExit: () => {
+                      setContextMenuItems([])
+                    },
                   },
                 }}
                 anchorReference="anchorPosition"