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

package/src/LinearApolloDisplay/stateModel/mouseEvents.ts

@@ -1,22 +1,23 @@
-import { AnnotationFeature } from '@apollo-annotation/mst'
+import { type AnnotationFeature } from '@apollo-annotation/mst'
 import {
   LocationEndChange,
   LocationStartChange,
 } from '@apollo-annotation/shared'
-import { AnyConfigurationSchemaType } from '@jbrowse/core/configuration/configurationSchema'
-import PluginManager from '@jbrowse/core/PluginManager'
-import { MenuItem } from '@jbrowse/core/ui'
-import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
-import { Theme } from '@mui/material'
+import type PluginManager from '@jbrowse/core/PluginManager'
+import { type AnyConfigurationSchemaType } from '@jbrowse/core/configuration/configurationSchema'
+import { type MenuItem } from '@jbrowse/core/ui'
+import { type Frame, getFrame } from '@jbrowse/core/util'
+import { type LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+import { type Theme } from '@mui/material'
 import { autorun } from 'mobx'
-import { Instance, addDisposer } from 'mobx-state-tree'
-import type { CSSProperties } from 'react'
+import { type Instance, addDisposer } from 'mobx-state-tree'
+import { type CSSProperties } from 'react'
+
+import { type Coord } from '../components'
+import { type Glyph } from '../glyphs/Glyph'
+import { type CanvasMouseEvent } from '../types'
 
-import { Coord } from '../components'
-import { Glyph } from '../glyphs/Glyph'
-import { CanvasMouseEvent } from '../types'
 import { renderingModelFactory } from './rendering'
-import { Frame, getFrame } from '@jbrowse/core/util'
 
 export interface FeatureAndGlyphUnderMouse {
   feature: AnnotationFeature

package/src/LinearApolloDisplay/stateModel/rendering.ts

@@ -1,12 +1,13 @@
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
-import { AnyConfigurationSchemaType } from '@jbrowse/core/configuration/configurationSchema'
-import PluginManager from '@jbrowse/core/PluginManager'
+import type PluginManager from '@jbrowse/core/PluginManager'
+import { type AnyConfigurationSchemaType } from '@jbrowse/core/configuration/configurationSchema'
 import { defaultCodonTable, doesIntersect2, revcom } from '@jbrowse/core/util'
-import { Theme } from '@mui/material'
+import { type Theme } from '@mui/material'
 import { autorun } from 'mobx'
-import { Instance, addDisposer } from 'mobx-state-tree'
+import { type Instance, addDisposer } from 'mobx-state-tree'
+
+import { type ApolloSessionModel } from '../../session'
 
-import { ApolloSessionModel } from '../../session'
 import { layoutsModelFactory } from './layouts'
 
 export function renderingModelIntermediateFactory(
@@ -145,10 +146,10 @@ function colorCode(letter: string, theme?: Theme) {
   )
 }
 
-function codonColorCode(letter: string) {
+function codonColorCode(letter: string, highContrast?: boolean) {
   const colorMap: Record<string, string | undefined> = {
     M: '#33ee33',
-    '*': '#f44336',
+    '*': highContrast ? '#000000' : '#f44336',
   }
 
   return colorMap[letter.toUpperCase()]
@@ -188,6 +189,9 @@ function drawTranslation(
   seq: string,
   i: number,
   reverse: boolean,
+  showStartCodons: boolean,
+  showStopCodons: boolean,
+  highContrast: boolean,
 ) {
   let codonSeq: string = seq.slice(i, i + 3).toUpperCase()
   if (reverse) {
@@ -198,8 +202,12 @@ function drawTranslation(
   if (!codonLetter) {
     return
   }
-  const fillColor = codonColorCode(codonLetter)
-  if (fillColor) {
+  const fillColor = codonColorCode(codonLetter, highContrast)
+  if (
+    fillColor &&
+    ((showStopCodons && codonLetter == '*') ||
+      (showStartCodons && codonLetter != '*'))
+  ) {
     seqTrackctx.fillStyle = fillColor
     seqTrackctx.fillRect(trnslStartPx, trnslY, trnslWidthPx, sequenceRowHeight)
   }
@@ -224,11 +232,13 @@ export function sequenceRenderingModelFactory(
       addDisposer(
         self,
         autorun(
-          async () => {
+          () => {
+            const { theme } = self
             if (!self.lgv.initialized || self.regionCannotBeRendered()) {
               return
             }
-            if (self.lgv.bpPerPx > 3) {
+            const trnslWidthPx = 3 / self.lgv.bpPerPx
+            if (trnslWidthPx < 1) {
               return
             }
             const seqTrackctx = self.seqTrackCanvas?.getContext('2d')
@@ -247,30 +257,43 @@ export function sequenceRenderingModelFactory(
                 ? [3, 2, 1, 0, 0, -1, -2, -3]
                 : [3, 2, 1, -1, -2, -3]
             let height = 0
-            for (const frame of frames) {
-              const frameColor = self.theme?.palette.framesCDS.at(frame)?.main
-              if (frameColor) {
-                seqTrackctx.fillStyle = frameColor
-                seqTrackctx.fillRect(
-                  0,
-                  height,
-                  self.lgv.dynamicBlocks.totalWidthPx,
-                  self.sequenceRowHeight,
-                )
+            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
               }
-              height += self.sequenceRowHeight
             }
 
             for (const [idx, region] of self.regions.entries()) {
-              const driver = (
+              const { apolloDataStore } =
                 self.session as unknown as ApolloSessionModel
-              ).apolloDataStore.getBackendDriver(region.assemblyName)
-
-              if (!driver) {
-                throw new Error('Failed to get the backend driver')
-              }
-              const { seq } = await driver.getSequence(region)
-
+              const assembly = apolloDataStore.assemblies.get(
+                region.assemblyName,
+              )
+              const ref = assembly?.getByRefName(region.refName)
+              const seq = ref?.getSequence(region.start, region.end)
               if (!seq) {
                 return
               }
@@ -283,7 +306,6 @@ export function sequenceRenderingModelFactory(
                     coord: region.start + i,
                     regionNumber: idx,
                   })?.offsetPx ?? 0) - self.lgv.offsetPx
-                const trnslWidthPx = 3 / self.lgv.bpPerPx
                 const trnslStartPx = self.lgv.displayedRegions[idx].reversed
                   ? trnslXOffset - trnslWidthPx
                   : trnslXOffset
@@ -301,6 +323,9 @@ export function sequenceRenderingModelFactory(
                       seq,
                       i,
                       false,
+                      self.showStartCodons,
+                      self.showStopCodons,
+                      self.highContrast,
                     )
                   }
                 }
@@ -375,6 +400,9 @@ export function sequenceRenderingModelFactory(
                       seq,
                       i,
                       true,
+                      self.showStartCodons,
+                      self.showStopCodons,
+                      self.highContrast,
                     )
                   }
                 }

package/src/LinearApolloSixFrameDisplay/components/LinearApolloSixFrameDisplay.tsx

@@ -0,0 +1,221 @@
+/* eslint-disable @typescript-eslint/unbound-method */
+/* 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 { type LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+import ErrorIcon from '@mui/icons-material/Error'
+import { Alert, Avatar, Tooltip, useTheme } from '@mui/material'
+import { observer } from 'mobx-react'
+import React, { useEffect, useState } from 'react'
+import { makeStyles } from 'tss-react/mui'
+
+import { type LinearApolloSixFrameDisplay as LinearApolloSixFrameDisplayI } from '../stateModel'
+
+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,
+  ) {
+    const theme = useTheme()
+    const { model } = props
+    const {
+      apolloRowHeight,
+      contextMenuItems: getContextMenuItems,
+      cursor,
+      featuresHeight,
+      isShown,
+      onMouseDown,
+      onMouseLeave,
+      onMouseMove,
+      onMouseUp,
+      regionCannotBeRendered,
+      session,
+      setCanvas,
+      setCollaboratorCanvas,
+      setOverlayCanvas,
+      setTheme,
+    } = model
+    const { classes } = useStyles()
+    const lgv = getContainingView(model) as unknown as LinearGenomeViewModel
+
+    useEffect(() => {
+      setTheme(theme)
+    }, [theme, setTheme])
+    const [contextCoord, setContextCoord] = useState<Coord>()
+    const [contextMenuItems, setContextMenuItems] = useState<MenuItem[]>([])
+    const message = regionCannotBeRendered()
+    if (!isShown) {
+      return null
+    }
+    const { assemblyManager } = session as unknown as AbstractSessionModel
+    return (
+      <>
+        <div
+          className={classes.canvasContainer}
+          style={{
+            width: lgv.dynamicBlocks.totalWidthPx,
+            height: featuresHeight,
+          }}
+          onContextMenu={(event) => {
+            event.preventDefault()
+            if (contextMenuItems.length > 0) {
+              // There's already a context menu open, so close it
+              setContextMenuItems([])
+            } else {
+              const coord: [number, number] = [event.clientX, event.clientY]
+              setContextCoord(coord)
+              setContextMenuItems(getContextMenuItems(coord))
+            }
+          }}
+        >
+          {message ? (
+            <Alert severity="warning" classes={{ message: classes.ellipses }}>
+              <Tooltip title={message}>
+                <div>{message}</div>
+              </Tooltip>
+            </Alert>
+          ) : (
+            // 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} />
+              <canvas
+                ref={async (node: HTMLCanvasElement) => {
+                  await Promise.resolve()
+                  setCollaboratorCanvas(node)
+                }}
+                width={lgv.dynamicBlocks.totalWidthPx}
+                height={featuresHeight}
+                className={classes.canvas}
+                data-testid="collaboratorCanvas"
+              />
+              <canvas
+                ref={async (node: HTMLCanvasElement) => {
+                  await Promise.resolve()
+                  setCanvas(node)
+                }}
+                width={lgv.dynamicBlocks.totalWidthPx}
+                height={featuresHeight}
+                className={classes.canvas}
+                data-testid="canvas"
+              />
+              <canvas
+                ref={async (node: HTMLCanvasElement) => {
+                  await Promise.resolve()
+                  setOverlayCanvas(node)
+                }}
+                width={lgv.dynamicBlocks.totalWidthPx}
+                height={featuresHeight}
+                onMouseMove={onMouseMove}
+                onMouseLeave={onMouseLeave}
+                onMouseDown={onMouseDown}
+                onMouseUp={onMouseUp}
+                className={classes.canvas}
+                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 || !feature.parent?.looksLikeGene) {
+                      return null
+                    }
+                    const top = 0
+                    const height = apolloRowHeight
+                    return (
+                      <Tooltip
+                        key={checkResult._id}
+                        title={checkResult.message}
+                      >
+                        <Avatar
+                          className={classes.avatar}
+                          style={{ top, left, height, width: height }}
+                        >
+                          <ErrorIcon />
+                        </Avatar>
+                      </Tooltip>
+                    )
+                  })
+              })}
+              <Menu
+                open={contextMenuItems.length > 0}
+                onMenuItemClick={(_, callback) => {
+                  callback()
+                  setContextMenuItems([])
+                }}
+                onClose={() => {
+                  setContextMenuItems([])
+                }}
+                TransitionProps={{
+                  onExit: () => {
+                    setContextMenuItems([])
+                  },
+                }}
+                anchorReference="anchorPosition"
+                anchorPosition={
+                  contextCoord
+                    ? { top: contextCoord[1], left: contextCoord[0] }
+                    : undefined
+                }
+                style={{ zIndex: theme.zIndex.tooltip }}
+                menuItems={contextMenuItems}
+              />
+            </>
+          )}
+        </div>
+      </>
+    )
+  },
+)

package/src/LinearApolloSixFrameDisplay/components/TrackLines.tsx

@@ -0,0 +1,40 @@
+import { observer } from 'mobx-react'
+import React from 'react'
+
+import { type LinearApolloSixFrameDisplay } from '../stateModel'
+
+export const TrackLines = observer(function TrackLines({
+  model,
+  strand,
+}: {
+  model: LinearApolloSixFrameDisplay
+  strand: 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>
+  ) : (
+    <div
+      style={{
+        position: 'absolute',
+        left: 0,
+        bottom:
+          (apolloRowHeight * (highestRow + 1) + lastRowTooltipBufferHeight) /
+            2 +
+          3,
+        width: '100%',
+      }}
+    >
+      <hr style={{ margin: 0, top: 0, color: 'black' }} />
+    </div>
+  )
+})

package/src/LinearApolloSixFrameDisplay/components/index.ts

@@ -0,0 +1,2 @@
+export * from './LinearApolloSixFrameDisplay'
+export * from './TrackLines'

package/src/LinearApolloSixFrameDisplay/configSchema.ts

@@ -0,0 +1,7 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
+
+export const configSchema = ConfigurationSchema(
+  'LinearApolloSixFrameDisplay',
+  {},
+  { explicitIdentifier: 'displayId', explicitlyTyped: true },
+)