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

package/src/LinearApolloReferenceSequenceDisplay/stateModel/rendering.ts

@@ -0,0 +1,481 @@
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
+import type PluginManager from '@jbrowse/core/PluginManager'
+import { type AnyConfigurationSchemaType } from '@jbrowse/core/configuration/configurationSchema'
+import {
+  type Frame,
+  defaultCodonTable,
+  getFrame,
+  revcom,
+} from '@jbrowse/core/util'
+import { type Theme, createTheme } from '@mui/material'
+import { autorun } from 'mobx'
+import { type Instance, addDisposer } from 'mobx-state-tree'
+
+import { type ApolloSessionModel } from '../../session'
+
+import { baseModelFactory } from './base'
+
+function colorCode(letter: string, theme: Theme) {
+  return (
+    theme.palette.bases[
+      letter.toUpperCase() as keyof Theme['palette']['bases']
+    ].main.toString() ?? 'lightgray'
+  )
+}
+
+function codonColorCode(letter: string, highContrast?: boolean) {
+  const colorMap: Record<string, string | undefined> = {
+    M: '#33ee33',
+    '*': highContrast ? '#000000' : '#f44336',
+  }
+
+  return colorMap[letter.toUpperCase()]
+}
+
+function reverseCodonSeq(seq: string): string {
+  // disable because sequence is all ascii
+  // eslint-disable-next-line @typescript-eslint/no-misused-spread
+  return [...seq]
+    .map((c) => revcom(c))
+    .reverse()
+    .join('')
+}
+
+function drawLetter(
+  seqTrackctx: CanvasRenderingContext2D,
+  startPx: number,
+  widthPx: number,
+  letter: string,
+  textY: number,
+) {
+  const fontSize = Math.min(widthPx, 10)
+  seqTrackctx.fillStyle = '#000'
+  seqTrackctx.font = `${fontSize}px`
+  const textWidth = seqTrackctx.measureText(letter).width
+  const textX = startPx + (widthPx - textWidth) / 2
+  seqTrackctx.fillText(letter, textX, textY + 10)
+}
+
+function drawTranslation(
+  seqTrackctx: CanvasRenderingContext2D,
+  bpPerPx: number,
+  trnslStartPx: number,
+  trnslY: number,
+  trnslWidthPx: number,
+  sequenceRowHeight: number,
+  seq: string,
+  i: number,
+  reverse: boolean,
+  showStartCodons: boolean,
+  showStopCodons: boolean,
+  highContrast: boolean,
+) {
+  let codonSeq: string = seq.slice(i, i + 3).toUpperCase()
+  if (reverse) {
+    codonSeq = reverseCodonSeq(codonSeq)
+  }
+  const codonLetter =
+    defaultCodonTable[codonSeq as keyof typeof defaultCodonTable]
+  if (!codonLetter) {
+    return
+  }
+  const fillColor = codonColorCode(codonLetter, highContrast)
+  if (
+    fillColor &&
+    ((showStopCodons && codonLetter == '*') ||
+      (showStartCodons && codonLetter != '*'))
+  ) {
+    seqTrackctx.fillStyle = fillColor
+    seqTrackctx.fillRect(trnslStartPx, trnslY, trnslWidthPx, sequenceRowHeight)
+  }
+  if (bpPerPx <= 0.1) {
+    seqTrackctx.rect(trnslStartPx, trnslY, trnslWidthPx, sequenceRowHeight)
+    seqTrackctx.stroke()
+    drawLetter(seqTrackctx, trnslStartPx, trnslWidthPx, codonLetter, trnslY)
+  }
+}
+
+function getTranslationRow(frame: Frame, bpPerPx: number) {
+  const offset = bpPerPx <= 1 ? 2 : 0
+  switch (frame) {
+    case 3: {
+      return 0
+    }
+    case 2: {
+      return 1
+    }
+    case 1: {
+      return 2
+    }
+    case -1: {
+      return 3 + offset
+    }
+    case -2: {
+      return 4 + offset
+    }
+    case -3: {
+      return 5 + offset
+    }
+  }
+}
+
+function getSeqRow(
+  strand: 1 | -1 | undefined,
+  bpPerPx: number,
+): number | undefined {
+  if (bpPerPx > 1 || strand === undefined) {
+    return
+  }
+  return strand === 1 ? 3 : 4
+}
+
+function highlightSeq(
+  seqTrackOverlayctx: CanvasRenderingContext2D,
+  theme: Theme,
+  startPx: number,
+  sequenceRowHeight: number,
+  row: number | undefined,
+  widthPx: number,
+) {
+  if (row !== undefined) {
+    seqTrackOverlayctx.fillStyle = theme.palette.action.focus
+    seqTrackOverlayctx.fillRect(
+      startPx,
+      sequenceRowHeight * row,
+      widthPx,
+      sequenceRowHeight,
+    )
+  }
+}
+
+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 { theme } = self
+              if (!self.lgv.initialized || self.regionCannotBeRendered()) {
+                return
+              }
+              const trnslWidthPx = 3 / self.lgv.bpPerPx
+              if (trnslWidthPx < 1) {
+                return
+              }
+              const seqTrackctx = self.seqTrackCanvas?.getContext('2d')
+              if (!seqTrackctx) {
+                return
+              }
+
+              seqTrackctx.clearRect(
+                0,
+                0,
+                self.lgv.dynamicBlocks.totalWidthPx,
+                self.height,
+              )
+              const frames =
+                self.lgv.bpPerPx <= 1
+                  ? [3, 2, 1, 0, 0, -1, -2, -3]
+                  : [3, 2, 1, -1, -2, -3]
+              let height = 0
+              if (theme) {
+                for (const frame of frames) {
+                  let frameColor = theme.palette.framesCDS.at(frame)?.main
+                  if (frameColor) {
+                    let offsetPx = 0
+                    if (self.highContrast) {
+                      frameColor = 'white'
+                      offsetPx = 1
+                      // eslint-disable-next-line prefer-destructuring
+                      seqTrackctx.fillStyle = theme.palette.grey[200]
+                      seqTrackctx.fillRect(
+                        0,
+                        height,
+                        self.lgv.dynamicBlocks.totalWidthPx,
+                        self.sequenceRowHeight,
+                      )
+                    }
+                    seqTrackctx.fillStyle = frameColor
+                    seqTrackctx.fillRect(
+                      0 + offsetPx,
+                      height + offsetPx,
+                      self.lgv.dynamicBlocks.totalWidthPx - 2 * offsetPx,
+                      self.sequenceRowHeight - 2 * offsetPx,
+                    )
+                  }
+                  height += self.sequenceRowHeight
+                }
+              }
+
+              for (const [idx, region] of self.regions.entries()) {
+                const { apolloDataStore } =
+                  self.session as unknown as ApolloSessionModel
+                const assembly = apolloDataStore.assemblies.get(
+                  region.assemblyName,
+                )
+                const ref = assembly?.getByRefName(region.refName)
+                const seq = ref?.getSequence(region.start, region.end)
+                if (!seq) {
+                  return
+                }
+                // disable because sequence is all ascii
+                // eslint-disable-next-line @typescript-eslint/no-misused-spread
+                for (const [i, letter] of [...seq].entries()) {
+                  const trnslXOffset =
+                    (self.lgv.bpToPx({
+                      refName: region.refName,
+                      coord: region.start + i,
+                      regionNumber: idx,
+                    })?.offsetPx ?? 0) - self.lgv.offsetPx
+                  const trnslStartPx = self.lgv.displayedRegions[idx].reversed
+                    ? trnslXOffset - trnslWidthPx
+                    : trnslXOffset
+
+                  // Draw translation forward
+                  for (let j = 2; j >= 0; j--) {
+                    if ((region.start + i) % 3 === j) {
+                      drawTranslation(
+                        seqTrackctx,
+                        self.lgv.bpPerPx,
+                        trnslStartPx,
+                        self.sequenceRowHeight * (2 - j),
+                        trnslWidthPx,
+                        self.sequenceRowHeight,
+                        seq,
+                        i,
+                        false,
+                        self.showStartCodons,
+                        self.showStopCodons,
+                        self.highContrast,
+                      )
+                    }
+                  }
+
+                  if (self.lgv.bpPerPx <= 1) {
+                    const xOffset =
+                      (self.lgv.bpToPx({
+                        refName: region.refName,
+                        coord: region.start + i,
+                        regionNumber: idx,
+                      })?.offsetPx ?? 0) - self.lgv.offsetPx
+                    const widthPx = 1 / self.lgv.bpPerPx
+                    const startPx = self.lgv.displayedRegions[idx].reversed
+                      ? xOffset - widthPx
+                      : xOffset
+
+                    // Draw forward
+                    seqTrackctx.beginPath()
+                    seqTrackctx.fillStyle = colorCode(letter, self.theme)
+                    seqTrackctx.rect(
+                      startPx,
+                      self.sequenceRowHeight * 3,
+                      widthPx,
+                      self.sequenceRowHeight,
+                    )
+                    seqTrackctx.fill()
+                    if (self.lgv.bpPerPx <= 0.1) {
+                      seqTrackctx.stroke()
+                      drawLetter(
+                        seqTrackctx,
+                        startPx,
+                        widthPx,
+                        letter,
+                        self.sequenceRowHeight * 3,
+                      )
+                    }
+
+                    // Draw reverse
+                    const revLetter = revcom(letter)
+                    seqTrackctx.beginPath()
+                    seqTrackctx.fillStyle = colorCode(revLetter, self.theme)
+                    seqTrackctx.rect(
+                      startPx,
+                      self.sequenceRowHeight * 4,
+                      widthPx,
+                      self.sequenceRowHeight,
+                    )
+                    seqTrackctx.fill()
+                    if (self.lgv.bpPerPx <= 0.1) {
+                      seqTrackctx.stroke()
+                      drawLetter(
+                        seqTrackctx,
+                        startPx,
+                        widthPx,
+                        revLetter,
+                        self.sequenceRowHeight * 4,
+                      )
+                    }
+                  }
+
+                  // Draw translation reverse
+                  for (let k = 0; k <= 2; k++) {
+                    const rowOffset = self.lgv.bpPerPx <= 1 ? 5 : 3
+                    if ((region.start + i) % 3 === k) {
+                      drawTranslation(
+                        seqTrackctx,
+                        self.lgv.bpPerPx,
+                        trnslStartPx,
+                        self.sequenceRowHeight * (rowOffset + k),
+                        trnslWidthPx,
+                        self.sequenceRowHeight,
+                        seq,
+                        i,
+                        true,
+                        self.showStartCodons,
+                        self.showStopCodons,
+                        self.highContrast,
+                      )
+                    }
+                  }
+                }
+              }
+            },
+            { name: 'LinearApolloReferenceSequenceDisplayRenderSequence' },
+          ),
+        )
+        addDisposer(
+          self,
+          autorun(
+            () => {
+              if (!self.lgv.initialized || self.regionCannotBeRendered()) {
+                return
+              }
+              const seqTrackOverlayctx =
+                self.seqTrackOverlayCanvas?.getContext('2d')
+              if (!seqTrackOverlayctx) {
+                return
+              }
+
+              seqTrackOverlayctx.clearRect(
+                0,
+                0,
+                self.lgv.dynamicBlocks.totalWidthPx,
+                self.height,
+              )
+
+              const {
+                hoveredFeature,
+                lgv,
+                regions,
+                sequenceRowHeight,
+                session,
+                theme,
+              } = self
+
+              if (!hoveredFeature) {
+                return
+              }
+              const { feature } = hoveredFeature
+
+              const { featureTypeOntology } =
+                session.apolloDataStore.ontologyManager
+              if (!featureTypeOntology) {
+                throw new Error('featureTypeOntology is undefined')
+              }
+              for (const [idx, region] of regions.entries()) {
+                if (featureTypeOntology.isTypeOf(feature.type, 'CDS')) {
+                  const parentFeature = feature.parent
+                  if (!parentFeature) {
+                    continue
+                  }
+                  const cdsLocs = parentFeature.cdsLocations.find(
+                    (loc) =>
+                      feature.min === loc.at(0)?.min &&
+                      feature.max === loc.at(-1)?.max,
+                  )
+                  if (!cdsLocs) {
+                    continue
+                  }
+                  for (const dl of cdsLocs) {
+                    const frame = getFrame(
+                      dl.min,
+                      dl.max,
+                      feature.strand ?? 1,
+                      dl.phase,
+                    )
+                    const row = getTranslationRow(frame, lgv.bpPerPx)
+                    const offset =
+                      (lgv.bpToPx({
+                        refName: region.refName,
+                        coord: dl.min,
+                        regionNumber: idx,
+                      })?.offsetPx ?? 0) - lgv.offsetPx
+                    const widthPx = (dl.max - dl.min) / lgv.bpPerPx
+                    const startPx = lgv.displayedRegions[idx].reversed
+                      ? offset - widthPx
+                      : offset
+
+                    highlightSeq(
+                      seqTrackOverlayctx,
+                      theme,
+                      startPx,
+                      sequenceRowHeight,
+                      row,
+                      widthPx,
+                    )
+                  }
+                } else {
+                  const row = getSeqRow(feature.strand, lgv.bpPerPx)
+                  const offset =
+                    (lgv.bpToPx({
+                      refName: region.refName,
+                      coord: feature.min,
+                      regionNumber: idx,
+                    })?.offsetPx ?? 0) - lgv.offsetPx
+                  const widthPx = feature.length / lgv.bpPerPx
+                  const startPx = lgv.displayedRegions[idx].reversed
+                    ? offset - widthPx
+                    : offset
+
+                  highlightSeq(
+                    seqTrackOverlayctx,
+                    theme,
+                    startPx,
+                    sequenceRowHeight,
+                    row,
+                    widthPx,
+                  )
+                }
+              }
+            },
+            { name: 'LinearApolloDisplayRenderSeqHighlight' },
+          ),
+        )
+      },
+    }))
+}
+
+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,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>
@@ -152,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) ===
@@ -166,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}
@@ -203,9 +258,11 @@ export const LinearApolloSixFrameDisplay = observer(
                 onClose={() => {
                   setContextMenuItems([])
                 }}
-                TransitionProps={{
-                  onExit: () => {
-                    setContextMenuItems([])
+                slotProps={{
+                  transition: {
+                    onExit: () => {
+                      setContextMenuItems([])
+                    },
                   },
                 }}
                 anchorReference="anchorPosition"