Add LinearApolloSixFrameDisplay

packages/apollo-collaboration-server/src/jbrowse/jbrowse.service.ts

@@ -194,16 +194,6 @@ export class JBrowseService {
             },
           },
         },
-        displays: [
-          {
-            type: 'LinearApolloDisplay',
-            displayId: `${trackId}-LinearApolloDisplay`,
-          },
-          {
-            type: 'SixFrameFeatureDisplay',
-            displayId: `${trackId}-SixFrameFeatureDisplay`,
-          },
-        ],
       }
     })
   }

packages/apollo-mst/src/AnnotationFeatureModel.ts

@@ -240,6 +240,46 @@ export const AnnotationFeatureModel = types
         transcript.filter((transcriptPart) => transcriptPart.type === 'CDS'),
       )
     },
+    get looksLikeGene(): boolean {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any
+      const session = getSession(self) as any
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      const { apolloDataStore } = session
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
+      const { featureTypeOntology } = apolloDataStore.ontologyManager
+      if (!featureTypeOntology) {
+        return false
+      }
+      const children = self.children as Children
+      if (!children?.size) {
+        return false
+      }
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+      if (!featureTypeOntology.isTypeOf(self.type, 'gene')) {
+        return false
+      }
+      for (const [, child] of children) {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+        if (featureTypeOntology.isTypeOf(child.type, 'transcript')) {
+          const { children: grandChildren } = child
+          if (!grandChildren?.size) {
+            return false
+          }
+          const hasCDS = [...grandChildren.values()].some((grandchild) =>
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+            featureTypeOntology.isTypeOf(grandchild.type, 'CDS'),
+          )
+          const hasExon = [...grandChildren.values()].some((grandchild) =>
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+            featureTypeOntology.isTypeOf(grandchild.type, 'exon'),
+          )
+          if (hasCDS && hasExon) {
+            return true
+          }
+        }
+      }
+      return false
+    },
   }))
   .actions((self) => ({
     setAttributes(attributes: Map<string, string[]>) {

packages/jbrowse-plugin-apollo/src/LinearApolloDisplay/stateModel/layouts.ts

@@ -63,47 +63,14 @@ export function layoutsModelFactory(
         })
       },
       getGlyph(feature: AnnotationFeature) {
-        if (this.looksLikeGene(feature)) {
+        if (feature.looksLikeGene) {
           return geneGlyph
         }
         if (feature.children?.size) {
           return genericChildGlyph
         }
         return boxGlyph
       },
-      looksLikeGene(feature: AnnotationFeature): boolean {
-        const { featureTypeOntology } =
-          self.session.apolloDataStore.ontologyManager
-        if (!featureTypeOntology) {
-          return false
-        }
-        const { children } = feature
-        if (!children?.size) {
-          return false
-        }
-        const isGene = featureTypeOntology.isTypeOf(feature.type, 'gene')
-        if (!isGene) {
-          return false
-        }
-        for (const [, child] of children) {
-          if (featureTypeOntology.isTypeOf(child.type, 'transcript')) {
-            const { children: grandChildren } = child
-            if (!grandChildren?.size) {
-              return false
-            }
-            const hasCDS = [...grandChildren.values()].some((grandchild) =>
-              featureTypeOntology.isTypeOf(grandchild.type, 'CDS'),
-            )
-            const hasExon = [...grandChildren.values()].some((grandchild) =>
-              featureTypeOntology.isTypeOf(grandchild.type, 'exon'),
-            )
-            if (hasCDS && hasExon) {
-              return true
-            }
-          }
-        }
-        return false
-      },
     }))
     .actions((self) => ({
       addSeenFeature(feature: AnnotationFeature) {

packages/jbrowse-plugin-apollo/src/LinearApolloSixFrameDisplay/components/LinearApolloSixFrameDisplay.tsx

@@ -0,0 +1,251 @@
+/* eslint-disable @typescript-eslint/unbound-method */
+/* eslint-disable @typescript-eslint/no-misused-promises */
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
+import { Menu, MenuItem } from '@jbrowse/core/ui'
+import {
+  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 { 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,
+      setSeqTrackCanvas,
+      setSeqTrackOverlayCanvas,
+      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 (
+      <>
+        {lgv.bpPerPx <= 3 ? (
+          <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={{
+            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} />
+              <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>
+      </>
+    )
+  },
+)

packages/jbrowse-plugin-apollo/src/LinearApolloSixFrameDisplay/components/TrackLines.tsx

@@ -0,0 +1,24 @@
+import { observer } from 'mobx-react'
+import React from 'react'
+
+import { LinearApolloSixFrameDisplay } from '../stateModel'
+
+export const TrackLines = observer(function TrackLines({
+  model,
+}: {
+  model: LinearApolloSixFrameDisplay
+}) {
+  const { apolloRowHeight } = model
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        left: 0,
+        top: (apolloRowHeight * 6) / 2,
+        width: '100%',
+      }}
+    >
+      <hr style={{ margin: 0, top: 0, color: 'black' }} />
+    </div>
+  )
+})

packages/jbrowse-plugin-apollo/src/LinearApolloSixFrameDisplay/components/index.ts

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