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

package/src/LinearApolloDisplay/stateModel/rendering.ts

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
 import type PluginManager from '@jbrowse/core/PluginManager'
 import { type AnyConfigurationSchemaType } from '@jbrowse/core/configuration/configurationSchema'
-import { defaultCodonTable, doesIntersect2, revcom } from '@jbrowse/core/util'
-import { type Theme } from '@mui/material'
+import { doesIntersect2 } from '@jbrowse/core/util'
+import { type Theme, createTheme } from '@mui/material'
 import { autorun } from 'mobx'
 import { type Instance, addDisposer, types } from 'mobx-state-tree'
 
@@ -10,7 +10,7 @@ import { type ApolloSessionModel } from '../../session'
 
 import { layoutsModelFactory } from './layouts'
 
-export function renderingModelIntermediateFactory(
+export function renderingModelFactory(
   pluginManager: PluginManager,
   configSchema: AnyConfigurationSchemaType,
 ) {
@@ -21,7 +21,6 @@ export function renderingModelIntermediateFactory(
 
   return LinearApolloDisplayLayouts.named('LinearApolloDisplayRendering')
     .props({
-      sequenceRowHeight: 15,
       apolloRowHeight: 20,
       detailsMinHeight: 200,
       detailsHeight: 200,
@@ -33,9 +32,7 @@ export function renderingModelIntermediateFactory(
       canvas: null as HTMLCanvasElement | null,
       overlayCanvas: null as HTMLCanvasElement | null,
       collaboratorCanvas: null as HTMLCanvasElement | null,
-      seqTrackCanvas: null as HTMLCanvasElement | null,
-      seqTrackOverlayCanvas: null as HTMLCanvasElement | null,
-      theme: undefined as Theme | undefined,
+      theme: createTheme(),
     }))
     .views((self) => ({
       get featuresHeight() {
@@ -66,15 +63,11 @@ export function renderingModelIntermediateFactory(
       setCollaboratorCanvas(canvas: HTMLCanvasElement | null) {
         self.collaboratorCanvas = canvas
       },
-      setSeqTrackCanvas(canvas: HTMLCanvasElement | null) {
-        self.seqTrackCanvas = canvas
-      },
-      setSeqTrackOverlayCanvas(canvas: HTMLCanvasElement | null) {
-        self.seqTrackOverlayCanvas = canvas
-      },
       setTheme(theme: Theme) {
         self.theme = theme
       },
+    }))
+    .actions((self) => ({
       afterAttach() {
         addDisposer(
           self,
@@ -135,346 +128,53 @@ export function renderingModelIntermediateFactory(
             { name: 'LinearApolloDisplayRenderCollaborators' },
           ),
         )
-      },
-    }))
-}
-
-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)
-  }
-}
-
-export function sequenceRenderingModelFactory(
-  pluginManager: PluginManager,
-  configSchema: AnyConfigurationSchemaType,
-) {
-  const LinearApolloDisplayRendering = renderingModelIntermediateFactory(
-    pluginManager,
-    configSchema,
-  )
-
-  return LinearApolloDisplayRendering.actions((self) => ({
-    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.lgv.bpPerPx <= 1 ? 125 : 95,
-            )
-            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) {
+        addDisposer(
+          self,
+          autorun(
+            () => {
+              const { canvas, featureLayouts, featuresHeight, lgv } = self
+              if (!lgv.initialized || self.regionCannotBeRendered()) {
                 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,
-                    )
-                  }
-                }
+              const { displayedRegions, dynamicBlocks } = lgv
 
-                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,
-                    )
-                  }
-                }
+              const ctx = canvas?.getContext('2d')
+              if (!ctx) {
+                return
               }
-            }
-          },
-          { name: 'LinearApolloDisplayRenderSequence' },
-        ),
-      )
-    },
-  }))
-}
-
-export function renderingModelFactory(
-  pluginManager: PluginManager,
-  configSchema: AnyConfigurationSchemaType,
-) {
-  const LinearApolloDisplayRendering = sequenceRenderingModelFactory(
-    pluginManager,
-    configSchema,
-  )
-
-  return LinearApolloDisplayRendering.actions((self) => ({
-    afterAttach() {
-      addDisposer(
-        self,
-        autorun(
-          () => {
-            const { canvas, featureLayouts, featuresHeight, lgv } = self
-            if (!lgv.initialized || self.regionCannotBeRendered()) {
-              return
-            }
-            const { displayedRegions, dynamicBlocks } = lgv
-
-            const ctx = canvas?.getContext('2d')
-            if (!ctx) {
-              return
-            }
-            ctx.clearRect(0, 0, dynamicBlocks.totalWidthPx, featuresHeight)
-            for (const [idx, featureLayout] of featureLayouts.entries()) {
-              const displayedRegion = displayedRegions[idx]
-              for (const [row, featureLayoutRow] of featureLayout.entries()) {
-                for (const [featureRow, featureId] of featureLayoutRow) {
-                  const feature = self.getAnnotationFeatureById(featureId)
-                  if (featureRow > 0 || !feature) {
-                    continue
-                  }
-                  if (
-                    !doesIntersect2(
-                      displayedRegion.start,
-                      displayedRegion.end,
-                      feature.min,
-                      feature.max,
-                    )
-                  ) {
-                    continue
+              ctx.clearRect(0, 0, dynamicBlocks.totalWidthPx, featuresHeight)
+              for (const [idx, featureLayout] of featureLayouts.entries()) {
+                const displayedRegion = displayedRegions[idx]
+                for (const [row, featureLayoutRow] of featureLayout.entries()) {
+                  for (const [featureRow, featureId] of featureLayoutRow) {
+                    const feature = self.getAnnotationFeatureById(featureId)
+                    if (featureRow > 0 || !feature) {
+                      continue
+                    }
+                    if (
+                      !doesIntersect2(
+                        displayedRegion.start,
+                        displayedRegion.end,
+                        feature.min,
+                        feature.max,
+                      )
+                    ) {
+                      continue
+                    }
+                    self.getGlyph(feature).draw(ctx, feature, row, self, idx)
                   }
-                  self.getGlyph(feature).draw(ctx, feature, row, self, idx)
                 }
               }
-            }
-          },
-          { name: 'LinearApolloDisplayRenderFeatures' },
-        ),
-      )
-    },
-  }))
+            },
+            { name: 'LinearApolloDisplayRenderFeatures' },
+          ),
+        )
+      },
+    }))
 }
 
 export type LinearApolloDisplayRenderingModel = ReturnType<
-  typeof renderingModelIntermediateFactory
+  typeof renderingModelFactory
 >
 // eslint disable because of
 // https://mobx-state-tree.js.org/tips/typescript#using-a-mst-type-at-design-time

package/src/LinearApolloReferenceSequenceDisplay/components/LinearApolloReferenceSequenceDisplay.tsx

@@ -0,0 +1,87 @@
+/* eslint-disable @typescript-eslint/unbound-method */
+/* eslint-disable @typescript-eslint/no-misused-promises */
+import { getContainingView } from '@jbrowse/core/util'
+import { type LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+import { Alert, Tooltip, useTheme } from '@mui/material'
+import { observer } from 'mobx-react'
+import React, { useEffect } from 'react'
+
+import { useStyles } from '../../util/displayUtils'
+import { type LinearApolloReferenceSequenceDisplay as LinearApolloReferenceSequenceDisplayI } from '../stateModel'
+
+interface LinearApolloReferenceSequenceDisplayProps {
+  model: LinearApolloReferenceSequenceDisplayI
+}
+
+export const LinearApolloReferenceSequenceDisplay = observer(
+  function LinearApolloReferenceSequenceDisplay(
+    props: LinearApolloReferenceSequenceDisplayProps,
+  ) {
+    const theme = useTheme()
+    const { model } = props
+    const {
+      height,
+      regionCannotBeRendered,
+      setSeqTrackCanvas,
+      setSeqTrackOverlayCanvas,
+      setTheme,
+    } = model
+    const { classes } = useStyles()
+    useEffect(() => {
+      setTheme(theme)
+    }, [theme, setTheme])
+
+    const lgv = getContainingView(model) as unknown as LinearGenomeViewModel
+    const message = regionCannotBeRendered()
+
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (message) {
+      return (
+        <Alert
+          severity="warning"
+          classes={{ message: classes.ellipses }}
+          slotProps={{ root: { className: classes.center } }}
+        >
+          <Tooltip title={message}>
+            <div>{message}</div>
+          </Tooltip>
+        </Alert>
+      )
+    }
+
+    return (
+      <>
+        {3 / lgv.bpPerPx >= 1 ? (
+          <div
+            className={classes.canvasContainer}
+            style={{
+              width: lgv.dynamicBlocks.totalWidthPx,
+              height,
+            }}
+          >
+            <canvas
+              ref={async (node: HTMLCanvasElement) => {
+                await Promise.resolve()
+                setSeqTrackCanvas(node)
+              }}
+              width={lgv.dynamicBlocks.totalWidthPx}
+              height={height}
+              className={classes.canvas}
+              data-testid="seqTrackCanvas"
+            />
+            <canvas
+              ref={async (node: HTMLCanvasElement) => {
+                await Promise.resolve()
+                setSeqTrackOverlayCanvas(node)
+              }}
+              width={lgv.dynamicBlocks.totalWidthPx}
+              height={height}
+              className={classes.canvas}
+              data-testid="seqTrackOverlayCanvas"
+            />
+          </div>
+        ) : null}
+      </>
+    )
+  },
+)

package/src/LinearApolloReferenceSequenceDisplay/components/index.ts

@@ -0,0 +1 @@
+export * from './LinearApolloReferenceSequenceDisplay'

package/src/LinearApolloReferenceSequenceDisplay/configSchema.ts

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

package/src/LinearApolloReferenceSequenceDisplay/index.ts

@@ -0,0 +1,3 @@
+export { configSchema } from './configSchema'
+export { stateModelFactory } from './stateModel'
+export { LinearApolloReferenceSequenceDisplay } from './components/LinearApolloReferenceSequenceDisplay'