@apollo-annotation/jbrowse-plugin-apollo 0.3.3 → 0.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apollo-annotation/jbrowse-plugin-apollo",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "Apollo plugin for JBrowse 2",
   "keywords": [
     "jbrowse",
@@ -48,9 +48,9 @@
     }
   },
   "dependencies": {
-    "@apollo-annotation/common": "^0.3.3",
-    "@apollo-annotation/mst": "^0.3.3",
-    "@apollo-annotation/shared": "^0.3.3",
+    "@apollo-annotation/common": "^0.3.4",
+    "@apollo-annotation/mst": "^0.3.4",
+    "@apollo-annotation/shared": "^0.3.4",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@gmod/gff": "1.2.0",

package/src/FeatureDetailsWidget/model.ts

@@ -9,7 +9,6 @@ import { ElementId } from '@jbrowse/core/util/types/mst'
 import { autorun } from 'mobx'
 import { Instance, SnapshotIn, addDisposer, types } from 'mobx-state-tree'
 
-import { ChangeManager } from '../ChangeManager'
 import { ApolloSessionModel } from '../session'
 
 export const ApolloFeatureDetailsWidgetModel = types
@@ -86,7 +85,6 @@ export const ApolloTranscriptDetailsModel = types
     ),
     assembly: types.string,
     refName: types.string,
-    changeManager: types.frozen<ChangeManager>(),
   })
   .volatile(() => ({
     tryReload: undefined as string | undefined,

package/src/LinearApolloDisplay/components/LinearApolloDisplay.tsx

@@ -9,7 +9,13 @@ import {
 } 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,
+  CircularProgress,
+  Tooltip,
+  useTheme,
+} from '@mui/material'
 import { observer } from 'mobx-react'
 import React, { useEffect, useState } from 'react'
 import { makeStyles } from 'tss-react/mui'
@@ -39,6 +45,13 @@ const useStyles = makeStyles()((theme) => ({
     color: theme.palette.warning.light,
     backgroundColor: theme.palette.warning.contrastText,
   },
+  loading: {
+    position: 'absolute',
+    right: theme.spacing(3),
+    zIndex: 10,
+    pointerEvents: 'none',
+    textAlign: 'right',
+  },
 }))
 
 export const LinearApolloDisplay = observer(function LinearApolloDisplay(
@@ -47,6 +60,7 @@ export const LinearApolloDisplay = observer(function LinearApolloDisplay(
   const theme = useTheme()
   const { model } = props
   const {
+    loading,
     apolloRowHeight,
     contextMenuItems: getContextMenuItems,
     cursor,
@@ -128,6 +142,11 @@ export const LinearApolloDisplay = observer(function LinearApolloDisplay(
           }
         }}
       >
+        {loading ? (
+          <div className={classes.loading}>
+            <CircularProgress size="18px" />
+          </div>
+        ) : null}
         {message ? (
           <Alert severity="warning" classes={{ message: classes.ellipses }}>
             <Tooltip title={message}>

package/src/LinearApolloDisplay/glyphs/GeneGlyph.ts

@@ -74,7 +74,6 @@ function draw(
   const displayedRegion = displayedRegions[displayedRegionIndex]
   const { refName, reversed } = displayedRegion
   const rowHeight = apolloRowHeight
-  const exonHeight = Math.round(0.6 * rowHeight)
   const cdsHeight = Math.round(0.9 * rowHeight)
   const { children, min, strand } = feature
   if (!children) {
@@ -121,29 +120,36 @@ function draw(
       currentRow += 1
       continue
     }
-    const { children: childrenOfTranscript, min } = transcript
-    if (!childrenOfTranscript) {
+    const { children: transcriptChildren } = transcript
+    if (!transcriptChildren) {
       continue
     }
-    for (const [, cds] of childrenOfTranscript) {
-      if (!featureTypeOntology.isTypeOf(cds.type, 'CDS')) {
+
+    const cdsCount = getCDSCount(transcript, featureTypeOntology)
+    for (const [, childFeature] of transcriptChildren) {
+      if (!featureTypeOntology.isTypeOf(childFeature.type, 'CDS')) {
         continue
       }
-      const minX =
-        (lgv.bpToPx({
-          refName,
-          coord: min,
-          regionNumber: displayedRegionIndex,
-        })?.offsetPx ?? 0) - offsetPx
-      const widthPx = transcript.length / bpPerPx
-      const startPx = reversed ? minX - widthPx : minX
-      const height =
-        Math.round((currentRow + 1 / 2) * rowHeight) + row * rowHeight
-      ctx.strokeStyle = theme?.palette.text.primary ?? 'black'
-      ctx.beginPath()
-      ctx.moveTo(startPx, height)
-      ctx.lineTo(startPx + widthPx, height)
-      ctx.stroke()
+      drawLine(
+        ctx,
+        stateModel,
+        displayedRegionIndex,
+        row,
+        transcript,
+        currentRow,
+      )
+      currentRow += 1
+    }
+
+    if (cdsCount === 0) {
+      drawLine(
+        ctx,
+        stateModel,
+        displayedRegionIndex,
+        row,
+        transcript,
+        currentRow,
+      )
       currentRow += 1
     }
   }
@@ -160,120 +166,205 @@ function draw(
       currentRow += 1
       continue
     }
-    for (const cdsRow of child.cdsLocations) {
-      const { _id, children: childrenOfTranscript } = child
-      if (!childrenOfTranscript) {
-        continue
-      }
-      for (const [, exon] of childrenOfTranscript) {
-        if (!featureTypeOntology.isTypeOf(exon.type, 'exon')) {
+    const cdsCount = getCDSCount(child, featureTypeOntology)
+    if (cdsCount != 0) {
+      for (const cdsRow of child.cdsLocations) {
+        const { _id, children: transcriptChildren } = child
+        if (!transcriptChildren) {
           continue
         }
-        const minX =
-          (lgv.bpToPx({
-            refName,
-            coord: exon.min,
-            regionNumber: displayedRegionIndex,
-          })?.offsetPx ?? 0) - offsetPx
-        const widthPx = exon.length / bpPerPx
-        const startPx = reversed ? minX - widthPx : minX
-
-        const top = (row + currentRow) * rowHeight
-        const exonTop = top + (rowHeight - exonHeight) / 2
-        ctx.fillStyle = theme?.palette.text.primary ?? 'black'
-        ctx.fillRect(startPx, exonTop, widthPx, exonHeight)
-        if (widthPx > 2) {
-          ctx.clearRect(startPx + 1, exonTop + 1, widthPx - 2, exonHeight - 2)
-          ctx.fillStyle =
-            apolloSelectedFeature && exon._id === apolloSelectedFeature._id
-              ? 'rgb(0,0,0)'
-              : 'rgb(211,211,211)'
-          ctx.fillRect(startPx + 1, exonTop + 1, widthPx - 2, exonHeight - 2)
-          if (forwardFill && backwardFill && strand) {
-            const reversal = reversed ? -1 : 1
-            const [topFill, bottomFill] =
-              strand * reversal === 1
-                ? [forwardFill, backwardFill]
-                : [backwardFill, forwardFill]
-            ctx.fillStyle = topFill
-            ctx.fillRect(
-              startPx + 1,
-              exonTop + 1,
-              widthPx - 2,
-              (exonHeight - 2) / 2,
-            )
-            ctx.fillStyle = bottomFill
-            ctx.fillRect(
-              startPx + 1,
-              exonTop + 1 + (exonHeight - 2) / 2,
-              widthPx - 2,
-              (exonHeight - 2) / 2,
-            )
+        for (const [, exon] of transcriptChildren) {
+          if (!featureTypeOntology.isTypeOf(exon.type, 'exon')) {
+            continue
           }
-        }
-      }
-      for (const cds of cdsRow) {
-        const cdsWidthPx = (cds.max - cds.min) / bpPerPx
-        const minX =
-          (lgv.bpToPx({
-            refName,
-            coord: cds.min,
-            regionNumber: displayedRegionIndex,
-          })?.offsetPx ?? 0) - offsetPx
-        const cdsStartPx = reversed ? minX - cdsWidthPx : minX
-        ctx.fillStyle = theme?.palette.text.primary ?? 'black'
-        const cdsTop =
-          (row + currentRow) * rowHeight + (rowHeight - cdsHeight) / 2
-        ctx.fillRect(cdsStartPx, cdsTop, cdsWidthPx, cdsHeight)
-        if (cdsWidthPx > 2) {
-          ctx.clearRect(
-            cdsStartPx + 1,
-            cdsTop + 1,
-            cdsWidthPx - 2,
-            cdsHeight - 2,
-          )
-          const frame = getFrame(cds.min, cds.max, child.strand ?? 1, cds.phase)
-          const frameColor = theme?.palette.framesCDS.at(frame)?.main
-          const cdsColorCode = frameColor ?? 'rgb(171,71,188)'
-          ctx.fillStyle =
-            apolloSelectedFeature && _id === apolloSelectedFeature._id
-              ? 'rgb(0,0,0)'
-              : cdsColorCode
-          ctx.fillStyle = cdsColorCode
-          ctx.fillRect(
-            cdsStartPx + 1,
-            cdsTop + 1,
-            cdsWidthPx - 2,
-            cdsHeight - 2,
+          drawExon(
+            ctx,
+            stateModel,
+            displayedRegionIndex,
+            row,
+            exon,
+            currentRow,
+            strand,
+            forwardFill,
+            backwardFill,
           )
-          if (forwardFill && backwardFill && strand) {
-            const reversal = reversed ? -1 : 1
-            const [topFill, bottomFill] =
-              strand * reversal === 1
-                ? [forwardFill, backwardFill]
-                : [backwardFill, forwardFill]
-            ctx.fillStyle = topFill
-            ctx.fillRect(
+        }
+        for (const cds of cdsRow) {
+          const cdsWidthPx = (cds.max - cds.min) / bpPerPx
+          const minX =
+            (lgv.bpToPx({
+              refName,
+              coord: cds.min,
+              regionNumber: displayedRegionIndex,
+            })?.offsetPx ?? 0) - offsetPx
+          const cdsStartPx = reversed ? minX - cdsWidthPx : minX
+          ctx.fillStyle = theme?.palette.text.primary ?? 'black'
+          const cdsTop =
+            (row + currentRow) * rowHeight + (rowHeight - cdsHeight) / 2
+          ctx.fillRect(cdsStartPx, cdsTop, cdsWidthPx, cdsHeight)
+          if (cdsWidthPx > 2) {
+            ctx.clearRect(
               cdsStartPx + 1,
               cdsTop + 1,
               cdsWidthPx - 2,
-              (cdsHeight - 2) / 2,
+              cdsHeight - 2,
             )
-            ctx.fillStyle = bottomFill
+            const frame = getFrame(
+              cds.min,
+              cds.max,
+              child.strand ?? 1,
+              cds.phase,
+            )
+            const frameColor = theme?.palette.framesCDS.at(frame)?.main
+            const cdsColorCode = frameColor ?? 'rgb(171,71,188)'
+            ctx.fillStyle =
+              apolloSelectedFeature && _id === apolloSelectedFeature._id
+                ? 'rgb(0,0,0)'
+                : cdsColorCode
+            ctx.fillStyle = cdsColorCode
             ctx.fillRect(
               cdsStartPx + 1,
-              cdsTop + (cdsHeight - 2) / 2,
+              cdsTop + 1,
               cdsWidthPx - 2,
-              (cdsHeight - 2) / 2,
+              cdsHeight - 2,
             )
+            if (forwardFill && backwardFill && strand) {
+              const reversal = reversed ? -1 : 1
+              const [topFill, bottomFill] =
+                strand * reversal === 1
+                  ? [forwardFill, backwardFill]
+                  : [backwardFill, forwardFill]
+              ctx.fillStyle = topFill
+              ctx.fillRect(
+                cdsStartPx + 1,
+                cdsTop + 1,
+                cdsWidthPx - 2,
+                (cdsHeight - 2) / 2,
+              )
+              ctx.fillStyle = bottomFill
+              ctx.fillRect(
+                cdsStartPx + 1,
+                cdsTop + (cdsHeight - 2) / 2,
+                cdsWidthPx - 2,
+                (cdsHeight - 2) / 2,
+              )
+            }
           }
         }
+        currentRow += 1
+      }
+    }
+
+    const { children: transcriptChildren } = child
+    // Draw exons for non-coding genes
+    if (cdsCount === 0 && transcriptChildren) {
+      for (const [, exon] of transcriptChildren) {
+        if (!featureTypeOntology.isTypeOf(exon.type, 'exon')) {
+          continue
+        }
+        drawExon(
+          ctx,
+          stateModel,
+          displayedRegionIndex,
+          row,
+          exon,
+          currentRow,
+          strand,
+          forwardFill,
+          backwardFill,
+        )
       }
       currentRow += 1
     }
   }
 }
 
+function drawExon(
+  ctx: CanvasRenderingContext2D,
+  stateModel: LinearApolloDisplayRendering,
+  displayedRegionIndex: number,
+  row: number,
+  exon: AnnotationFeature,
+  currentRow: number,
+  strand: number | undefined,
+  forwardFill: CanvasPattern | null,
+  backwardFill: CanvasPattern | null,
+) {
+  const { apolloRowHeight, lgv, session, theme } = stateModel
+  const { bpPerPx, displayedRegions, offsetPx } = lgv
+  const displayedRegion = displayedRegions[displayedRegionIndex]
+  const { refName, reversed } = displayedRegion
+  const { apolloSelectedFeature } = session
+
+  const minX =
+    (lgv.bpToPx({
+      refName,
+      coord: exon.min,
+      regionNumber: displayedRegionIndex,
+    })?.offsetPx ?? 0) - offsetPx
+  const widthPx = exon.length / bpPerPx
+  const startPx = reversed ? minX - widthPx : minX
+
+  const top = (row + currentRow) * apolloRowHeight
+  const exonHeight = Math.round(0.6 * apolloRowHeight)
+  const exonTop = top + (apolloRowHeight - exonHeight) / 2
+  ctx.fillStyle = theme?.palette.text.primary ?? 'black'
+  ctx.fillRect(startPx, exonTop, widthPx, exonHeight)
+  if (widthPx > 2) {
+    ctx.clearRect(startPx + 1, exonTop + 1, widthPx - 2, exonHeight - 2)
+    ctx.fillStyle =
+      apolloSelectedFeature && exon._id === apolloSelectedFeature._id
+        ? 'rgb(0,0,0)'
+        : 'rgb(211,211,211)'
+    ctx.fillRect(startPx + 1, exonTop + 1, widthPx - 2, exonHeight - 2)
+    if (forwardFill && backwardFill && strand) {
+      const reversal = reversed ? -1 : 1
+      const [topFill, bottomFill] =
+        strand * reversal === 1
+          ? [forwardFill, backwardFill]
+          : [backwardFill, forwardFill]
+      ctx.fillStyle = topFill
+      ctx.fillRect(startPx + 1, exonTop + 1, widthPx - 2, (exonHeight - 2) / 2)
+      ctx.fillStyle = bottomFill
+      ctx.fillRect(
+        startPx + 1,
+        exonTop + 1 + (exonHeight - 2) / 2,
+        widthPx - 2,
+        (exonHeight - 2) / 2,
+      )
+    }
+  }
+}
+
+function drawLine(
+  ctx: CanvasRenderingContext2D,
+  stateModel: LinearApolloDisplayRendering,
+  displayedRegionIndex: number,
+  row: number,
+  transcript: AnnotationFeature,
+  currentRow: number,
+) {
+  const { apolloRowHeight, lgv, theme } = stateModel
+  const { bpPerPx, displayedRegions, offsetPx } = lgv
+  const displayedRegion = displayedRegions[displayedRegionIndex]
+  const { refName, reversed } = displayedRegion
+  const minX =
+    (lgv.bpToPx({
+      refName,
+      coord: transcript.min,
+      regionNumber: displayedRegionIndex,
+    })?.offsetPx ?? 0) - offsetPx
+  const widthPx = transcript.length / bpPerPx
+  const startPx = reversed ? minX - widthPx : minX
+  const height =
+    Math.round((currentRow + 1 / 2) * apolloRowHeight) + row * apolloRowHeight
+  ctx.strokeStyle = theme?.palette.text.primary ?? 'black'
+  ctx.beginPath()
+  ctx.moveTo(startPx, height)
+  ctx.lineTo(startPx + widthPx, height)
+  ctx.stroke()
+}
+
 function drawDragPreview(
   stateModel: LinearApolloDisplay,
   overlayCtx: CanvasRenderingContext2D,
@@ -384,6 +475,26 @@ function getFeatureFromLayout(
   return feature
 }
 
+function getCDSCount(
+  feature: AnnotationFeature,
+  featureTypeOntology: OntologyRecord,
+): number {
+  const { children, type } = feature
+  if (!children) {
+    return 0
+  }
+  const isMrna = featureTypeOntology.isTypeOf(type, 'mRNA')
+  let cdsCount = 0
+  if (isMrna) {
+    for (const [, child] of children) {
+      if (featureTypeOntology.isTypeOf(child.type, 'CDS')) {
+        cdsCount += 1
+      }
+    }
+  }
+  return cdsCount
+}
+
 function getRowCount(
   feature: AnnotationFeature,
   featureTypeOntology: OntologyRecord,
@@ -397,12 +508,13 @@ function getRowCount(
   let rowCount = 0
   if (isTranscript) {
     for (const [, child] of children) {
-      const isCds = featureTypeOntology.isTypeOf(child.type, 'CDS')
-      if (isCds) {
+      if (featureTypeOntology.isTypeOf(child.type, 'CDS')) {
         rowCount += 1
       }
     }
-    return rowCount
+
+    // return 1 if there are no CDSs for non coding genes
+    return rowCount === 0 ? 1 : rowCount
   }
   for (const [, child] of children) {
     rowCount += getRowCount(child, featureTypeOntology)
@@ -449,6 +561,9 @@ function featuresForRow(
     for (const cds of cdss) {
       features.push([cds, ...exons, child, feature])
     }
+    if (cdss.length === 0) {
+      features.push([...exons, child, feature])
+    }
   }
   return features
 }

package/src/LinearApolloDisplay/stateModel/base.ts

@@ -44,6 +44,7 @@ export function baseModelFactory(
         ),
       ),
       filteredFeatureTypes: types.array(types.string),
+      loadingState: false,
     })
     .views((self) => {
       const { configuration, renderProps: superRenderProps } = self
@@ -76,6 +77,9 @@ export function baseModelFactory(
         }
         return 300
       },
+      get loading() {
+        return self.loadingState
+      },
     }))
     .views((self) => ({
       get rendererTypeName() {
@@ -167,6 +171,9 @@ export function baseModelFactory(
       updateFilteredFeatureTypes(types: string[]) {
         self.filteredFeatureTypes = cast(types)
       },
+      setLoading(loading: boolean) {
+        self.loadingState = loading
+      },
     }))
     .views((self) => {
       const { filteredFeatureTypes, trackMenuItems: superTrackMenuItems } = self
@@ -244,9 +251,16 @@ export function baseModelFactory(
               if (!self.lgv.initialized || self.regionCannotBeRendered()) {
                 return
               }
+              self.setLoading(true)
               void (
                 self.session as unknown as ApolloSessionModel
-              ).apolloDataStore.loadFeatures(self.regions)
+              ).apolloDataStore
+                .loadFeatures(self.regions)
+                .then(() => {
+                  setTimeout(() => {
+                    self.setLoading(false)
+                  }, 1000)
+                })
               if (self.lgv.bpPerPx <= 3) {
                 void (
                   self.session as unknown as ApolloSessionModel