@apollo-annotation/jbrowse-plugin-apollo 0.3.0 → 0.3.2

package/src/LinearApolloDisplay/glyphs/GeneGlyph.ts

@@ -12,6 +12,7 @@ import { CanvasMouseEvent } from '../types'
 import { Glyph } from './Glyph'
 import { boxGlyph } from './BoxGlyph'
 import { LinearApolloDisplayRendering } from '../stateModel/rendering'
+import { OntologyRecord } from '../../OntologyManager'
 
 let forwardFillLight: CanvasPattern | null = null
 let backwardFillLight: CanvasPattern | null = null
@@ -80,6 +81,11 @@ function draw(
     return
   }
   const { apolloSelectedFeature } = session
+  const { apolloDataStore } = session
+  const { featureTypeOntology } = apolloDataStore.ontologyManager
+  if (!featureTypeOntology) {
+    throw new Error('featureTypeOntology is undefined')
+  }
 
   // Draw background for gene
   const topLevelFeatureMinX =
@@ -93,7 +99,8 @@ function draw(
     ? topLevelFeatureMinX - topLevelFeatureWidthPx
     : topLevelFeatureMinX
   const topLevelFeatureTop = row * rowHeight
-  const topLevelFeatureHeight = getRowCount(feature) * rowHeight
+  const topLevelFeatureHeight =
+    getRowCount(feature, featureTypeOntology) * rowHeight
 
   ctx.fillStyle = alpha(theme?.palette.background.paper ?? '#ffffff', 0.6)
   ctx.fillRect(
@@ -103,19 +110,23 @@ function draw(
     topLevelFeatureHeight,
   )
 
-  // Draw lines on different rows for each mRNA
+  // Draw lines on different rows for each transcript
   let currentRow = 0
-  for (const [, mrna] of children) {
-    if (mrna.type !== 'mRNA') {
+  for (const [, transcript] of children) {
+    const isTranscript = featureTypeOntology.isTypeOf(
+      transcript.type,
+      'transcript',
+    )
+    if (!isTranscript) {
       currentRow += 1
       continue
     }
-    const { children: childrenOfmRNA, min } = mrna
-    if (!childrenOfmRNA) {
+    const { children: childrenOfTranscript, min } = transcript
+    if (!childrenOfTranscript) {
       continue
     }
-    for (const [, cds] of childrenOfmRNA) {
-      if (cds.type !== 'CDS') {
+    for (const [, cds] of childrenOfTranscript) {
+      if (!featureTypeOntology.isTypeOf(cds.type, 'CDS')) {
         continue
       }
       const minX =
@@ -124,7 +135,7 @@ function draw(
           coord: min,
           regionNumber: displayedRegionIndex,
         })?.offsetPx ?? 0) - offsetPx
-      const widthPx = mrna.length / bpPerPx
+      const widthPx = transcript.length / bpPerPx
       const startPx = reversed ? minX - widthPx : minX
       const height =
         Math.round((currentRow + 1 / 2) * rowHeight) + row * rowHeight
@@ -141,21 +152,21 @@ function draw(
     theme?.palette.mode === 'dark' ? forwardFillDark : forwardFillLight
   const backwardFill =
     theme?.palette.mode === 'dark' ? backwardFillDark : backwardFillLight
-  // Draw exon and CDS for each mRNA
+  // Draw exon and CDS for each transcript
   currentRow = 0
   for (const [, child] of children) {
-    if (child.type !== 'mRNA') {
+    if (!featureTypeOntology.isTypeOf(child.type, 'transcript')) {
       boxGlyph.draw(ctx, child, row, stateModel, displayedRegionIndex)
       currentRow += 1
       continue
     }
     for (const cdsRow of child.cdsLocations) {
-      const { _id, children: childrenOfmRNA } = child
-      if (!childrenOfmRNA) {
+      const { _id, children: childrenOfTranscript } = child
+      if (!childrenOfTranscript) {
         continue
       }
-      for (const [, exon] of childrenOfmRNA) {
-        if (exon.type !== 'exon') {
+      for (const [, exon] of childrenOfTranscript) {
+        if (!featureTypeOntology.isTypeOf(exon.type, 'exon')) {
           continue
         }
         const minX =
@@ -296,7 +307,9 @@ function drawHover(
   stateModel: LinearApolloDisplay,
   ctx: CanvasRenderingContext2D,
 ) {
-  const { apolloHover, apolloRowHeight, lgv, theme } = stateModel
+  const { apolloHover, apolloRowHeight, lgv, session, theme } = stateModel
+  const { featureTypeOntology } = session.apolloDataStore.ontologyManager
+
   if (!apolloHover) {
     return
   }
@@ -320,16 +333,26 @@ function drawHover(
   const top = row * apolloRowHeight
   const widthPx = length / bpPerPx
   ctx.fillStyle = theme?.palette.action.selected ?? 'rgba(0,0,0,04)'
-  ctx.fillRect(startPx, top, widthPx, apolloRowHeight * getRowCount(feature))
+
+  if (!featureTypeOntology) {
+    throw new Error('featureTypeOntology is undefined')
+  }
+  ctx.fillRect(
+    startPx,
+    top,
+    widthPx,
+    apolloRowHeight * getRowCount(feature, featureTypeOntology),
+  )
 }
 
 function getFeatureFromLayout(
   feature: AnnotationFeature,
   bp: number,
   row: number,
+  featureTypeOntology: OntologyRecord,
 ): AnnotationFeature | undefined {
   const featureInThisRow: AnnotationFeature[] =
-    featuresForRow(feature)[row] || []
+    featuresForRow(feature, featureTypeOntology)[row] || []
   for (const f of featureInThisRow) {
     let featureObj
     if (bp >= f.min && bp <= f.max && f.parent) {
@@ -339,9 +362,9 @@ function getFeatureFromLayout(
       continue
     }
     if (
-      featureObj.type === 'CDS' &&
+      featureTypeOntology.isTypeOf(featureObj.type, 'CDS') &&
       featureObj.parent &&
-      featureObj.parent.type === 'mRNA'
+      featureTypeOntology.isTypeOf(featureObj.parent.type, 'transcript')
     ) {
       const { cdsLocations } = featureObj.parent
       for (const cdsLoc of cdsLocations) {
@@ -352,7 +375,7 @@ function getFeatureFromLayout(
         }
       }
 
-      // If mouse position is in the intron region, return the mRNA
+      // If mouse position is in the intron region, return the transcript
       return featureObj.parent
     }
     // If mouse position is in a feature that is not a CDS, return the feature
@@ -361,22 +384,28 @@ function getFeatureFromLayout(
   return feature
 }
 
-function getRowCount(feature: AnnotationFeature, _bpPerPx?: number): number {
+function getRowCount(
+  feature: AnnotationFeature,
+  featureTypeOntology: OntologyRecord,
+  _bpPerPx?: number,
+): number {
   const { children, type } = feature
   if (!children) {
     return 1
   }
+  const isTranscript = featureTypeOntology.isTypeOf(type, 'transcript')
   let rowCount = 0
-  if (type === 'mRNA') {
+  if (isTranscript) {
     for (const [, child] of children) {
-      if (child.type === 'CDS') {
+      const isCds = featureTypeOntology.isTypeOf(child.type, 'CDS')
+      if (isCds) {
         rowCount += 1
       }
     }
     return rowCount
   }
   for (const [, child] of children) {
-    rowCount += getRowCount(child)
+    rowCount += getRowCount(child, featureTypeOntology)
   }
   return rowCount
 }
@@ -384,11 +413,15 @@ function getRowCount(feature: AnnotationFeature, _bpPerPx?: number): number {
 /**
  * A list of all the subfeatures for each row for a given feature, as well as
  * the feature itself.
- * If the row contains an mRNA, the order is CDS -\> exon -\> mRNA -\> gene
- * If the row does not contain an mRNA, the order is subfeature -\> gene
+ * If the row contains a transcript, the order is CDS -\> exon -\> transcript -\> gene
+ * If the row does not contain an transcript, the order is subfeature -\> gene
  */
-function featuresForRow(feature: AnnotationFeature): AnnotationFeature[][] {
-  if (feature.type !== 'gene') {
+function featuresForRow(
+  feature: AnnotationFeature,
+  featureTypeOntology: OntologyRecord,
+): AnnotationFeature[][] {
+  const isGene = featureTypeOntology.isTypeOf(feature.type, 'gene')
+  if (!isGene) {
     throw new Error('Top level feature for GeneGlyph must have type "gene"')
   }
   const { children } = feature
@@ -397,7 +430,7 @@ function featuresForRow(feature: AnnotationFeature): AnnotationFeature[][] {
   }
   const features: AnnotationFeature[][] = []
   for (const [, child] of children) {
-    if (child.type !== 'mRNA') {
+    if (!featureTypeOntology.isTypeOf(child.type, 'transcript')) {
       features.push([child, feature])
       continue
     }
@@ -407,9 +440,9 @@ function featuresForRow(feature: AnnotationFeature): AnnotationFeature[][] {
     const cdss: AnnotationFeature[] = []
     const exons: AnnotationFeature[] = []
     for (const [, grandchild] of child.children) {
-      if (grandchild.type === 'CDS') {
+      if (featureTypeOntology.isTypeOf(grandchild.type, 'CDS')) {
         cdss.push(grandchild)
-      } else if (grandchild.type === 'exon') {
+      } else if (featureTypeOntology.isTypeOf(grandchild.type, 'exon')) {
         exons.push(grandchild)
       }
     }
@@ -423,8 +456,9 @@ function featuresForRow(feature: AnnotationFeature): AnnotationFeature[][] {
 function getRowForFeature(
   feature: AnnotationFeature,
   childFeature: AnnotationFeature,
+  featureTypeOntology: OntologyRecord,
 ) {
-  const rows = featuresForRow(feature)
+  const rows = featuresForRow(feature, featureTypeOntology)
   for (const [idx, row] of rows.entries()) {
     if (row.some((feature) => feature._id === childFeature._id)) {
       return idx
@@ -496,7 +530,16 @@ function getDraggableFeatureInfo(
   feature: AnnotationFeature,
   stateModel: LinearApolloDisplay,
 ): { feature: AnnotationFeature; edge: 'min' | 'max' } | undefined {
-  if (feature.type === 'gene' || feature.type === 'mRNA') {
+  const { session } = stateModel
+  const { apolloDataStore } = session
+  const { featureTypeOntology } = apolloDataStore.ontologyManager
+  if (!featureTypeOntology) {
+    throw new Error('featureTypeOntology is undefined')
+  }
+  const isGene = featureTypeOntology.isTypeOf(feature.type, 'gene')
+  const isTranscript = featureTypeOntology.isTypeOf(feature.type, 'transcript')
+  const isCds = featureTypeOntology.isTypeOf(feature.type, 'CDS')
+  if (isGene || isTranscript) {
     return
   }
   const { bp, refName, regionNumber, x } = mousePosition
@@ -519,14 +562,19 @@ function getDraggableFeatureInfo(
   if (Math.abs(maxPx - x) < 4) {
     return { feature, edge: 'max' }
   }
-  if (feature.type === 'CDS') {
-    const mRNA = feature.parent
-    if (!mRNA?.children) {
+  if (isCds) {
+    const transcript = feature.parent
+    if (!transcript?.children) {
       return
     }
-    const exonChildren = [...mRNA.children.values()].filter(
-      (child) => child.type === 'exon',
-    )
+    const exonChildren: AnnotationFeature[] = []
+    for (const child of transcript.children.values()) {
+      const childIsExon = featureTypeOntology.isTypeOf(child.type, 'exon')
+      if (childIsExon) {
+        exonChildren.push(child)
+      }
+    }
+
     const overlappingExon = exonChildren.find((child) => {
       const [start, end] = intersection2(bp, bp + 1, child.min, child.max)
       return start !== undefined && end !== undefined

package/src/LinearApolloDisplay/glyphs/Glyph.ts

@@ -7,10 +7,15 @@ import {
 } from '../stateModel/mouseEvents'
 import { LinearApolloDisplayRendering } from '../stateModel/rendering'
 import { CanvasMouseEvent } from '../types'
+import { OntologyRecord } from '../../OntologyManager'
 
 export interface Glyph {
   /** @returns number of layout rows used by this glyph with this feature and zoom level */
-  getRowCount(feature: AnnotationFeature, bpPerPx: number): number
+  getRowCount(
+    feature: AnnotationFeature,
+    featureTypeOntology: OntologyRecord,
+    bpPerPx: number,
+  ): number
   /** draw the feature's primary rendering on the canvas */
   draw(
     ctx: CanvasRenderingContext2D,
@@ -24,10 +29,12 @@ export interface Glyph {
     feature: AnnotationFeature,
     bp: number,
     row: number,
+    featureTypeOntology: OntologyRecord,
   ): AnnotationFeature | undefined
   getRowForFeature(
     feature: AnnotationFeature,
     childFeature: AnnotationFeature,
+    featureTypeOntology: OntologyRecord,
   ): number | undefined
 
   drawHover(

package/src/LinearApolloDisplay/stateModel/base.ts

@@ -17,11 +17,12 @@ import { getParentRenderProps } from '@jbrowse/core/util/tracks'
 // import type LinearGenomeViewPlugin from '@jbrowse/plugin-linear-genome-view'
 import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 import { autorun } from 'mobx'
-import { addDisposer, getRoot, types } from 'mobx-state-tree'
+import { addDisposer, cast, getRoot, types, getSnapshot } from 'mobx-state-tree'
 
 import { ApolloInternetAccountModel } from '../../ApolloInternetAccount/model'
 import { ApolloSessionModel } from '../../session'
 import { ApolloRootModel } from '../../types'
+import { FilterFeatures } from '../../components/FilterFeatures'
 
 const minDisplayHeight = 20
 
@@ -42,6 +43,7 @@ export function baseModelFactory(
           (n) => n >= minDisplayHeight,
         ),
       ),
+      filteredFeatureTypes: types.array(types.string),
     })
     .views((self) => {
       const { configuration, renderProps: superRenderProps } = self
@@ -162,9 +164,12 @@ export function baseModelFactory(
         self.graphical = true
         self.table = true
       },
+      updateFilteredFeatureTypes(types: string[]) {
+        self.filteredFeatureTypes = cast(types)
+      },
     }))
     .views((self) => {
-      const { trackMenuItems: superTrackMenuItems } = self
+      const { filteredFeatureTypes, trackMenuItems: superTrackMenuItems } = self
       return {
         trackMenuItems() {
           const { graphical, table } = self
@@ -200,6 +205,27 @@ export function baseModelFactory(
                 },
               ],
             },
+            {
+              label: 'Filter features by type',
+              onClick: () => {
+                const session = self.session as unknown as ApolloSessionModel
+                ;(self.session as unknown as AbstractSessionModel).queueDialog(
+                  (doneCallback) => [
+                    FilterFeatures,
+                    {
+                      session,
+                      handleClose: () => {
+                        doneCallback()
+                      },
+                      featureTypes: getSnapshot(filteredFeatureTypes),
+                      onUpdate: (types: string[]) => {
+                        self.updateFilteredFeatureTypes(types)
+                      },
+                    },
+                  ],
+                )
+              },
+            },
           ]
         },
       }

package/src/LinearApolloDisplay/stateModel/layouts.ts

@@ -9,7 +9,7 @@ import { addDisposer, isAlive } from 'mobx-state-tree'
 
 import { ApolloSessionModel } from '../../session'
 import { baseModelFactory } from './base'
-import { getGlyph } from './getGlyph'
+import { boxGlyph, geneGlyph, genericChildGlyph } from '../glyphs'
 
 export function layoutsModelFactory(
   pluginManager: PluginManager,
@@ -37,7 +37,9 @@ export function layoutsModelFactory(
             if (
               refName !== assembly?.getCanonicalRefName(feature.refSeq) ||
               !doesIntersect2(start, end, feature.min, feature.max) ||
-              feature.length > self.featuresMinMaxLimit
+              feature.length > self.featuresMinMaxLimit ||
+              (self.filteredFeatureTypes.length > 0 &&
+                !self.filteredFeatureTypes.includes(feature.type))
             ) {
               continue
             }
@@ -60,6 +62,48 @@ export function layoutsModelFactory(
           return
         })
       },
+      getGlyph(feature: AnnotationFeature) {
+        if (this.looksLikeGene(feature)) {
+          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) {
@@ -90,14 +134,20 @@ export function layoutsModelFactory(
             }
             if (
               refName !== assembly?.getCanonicalRefName(feature.refSeq) ||
-              !doesIntersect2(start, end, feature.min, feature.max)
+              !doesIntersect2(start, end, feature.min, feature.max) ||
+              (self.filteredFeatureTypes.length > 0 &&
+                !self.filteredFeatureTypes.includes(feature.type))
             ) {
               continue
             }
-            const rowCount = getGlyph(feature).getRowCount(
-              feature,
-              self.lgv.bpPerPx,
-            )
+            const { featureTypeOntology } =
+              self.session.apolloDataStore.ontologyManager
+            if (!featureTypeOntology) {
+              throw new Error('featureTypeOntology is undefined')
+            }
+            const rowCount = self
+              .getGlyph(feature)
+              .getRowCount(feature, featureTypeOntology, self.lgv.bpPerPx)
             let startingRow = 0
             let placed = false
             while (!placed) {
@@ -158,6 +208,8 @@ export function layoutsModelFactory(
       },
       getFeatureLayoutPosition(feature: AnnotationFeature) {
         const { featureLayouts } = this
+        const { featureTypeOntology } =
+          self.session.apolloDataStore.ontologyManager
         for (const [idx, layout] of featureLayouts.entries()) {
           for (const [layoutRowNum, layoutRow] of layout) {
             for (const [featureRowNum, layoutFeature] of layoutRow) {
@@ -174,10 +226,12 @@ export function layoutsModelFactory(
                 }
               }
               if (layoutFeature.hasDescendant(feature._id)) {
-                const row = getGlyph(layoutFeature).getRowForFeature(
-                  layoutFeature,
-                  feature,
-                )
+                if (!featureTypeOntology) {
+                  throw new Error('featureTypeOntology is undefined')
+                }
+                const row = self
+                  .getGlyph(layoutFeature)
+                  .getRowForFeature(layoutFeature, feature, featureTypeOntology)
                 if (row !== undefined) {
                   return {
                     layoutIndex: idx,

package/src/LinearApolloDisplay/stateModel/mouseEvents.ts

@@ -15,7 +15,6 @@ import type { CSSProperties } from 'react'
 import { Coord } from '../components'
 import { Glyph } from '../glyphs/Glyph'
 import { CanvasMouseEvent } from '../types'
-import { getGlyph } from './getGlyph'
 import { renderingModelFactory } from './rendering'
 import { Frame, getFrame } from '@jbrowse/core/util'
 
@@ -147,11 +146,17 @@ export function mouseEventsModelIntermediateFactory(
           return mousePosition
         }
         const [featureRow, topLevelFeature] = foundFeature
-        const glyph = getGlyph(topLevelFeature)
+        const glyph = self.getGlyph(topLevelFeature)
+        const { featureTypeOntology } =
+          self.session.apolloDataStore.ontologyManager
+        if (!featureTypeOntology) {
+          throw new Error('featureTypeOntology is undefined')
+        }
         const feature = glyph.getFeatureFromLayout(
           topLevelFeature,
           bp,
           featureRow,
+          featureTypeOntology,
         )
         if (!feature) {
           return mousePosition
@@ -227,15 +232,27 @@ export function mouseEventsSeqHightlightModelFactory(
               self.lgv.bpPerPx <= 1 ? 125 : 95,
             )
 
-            const { apolloHover, lgv, regions, sequenceRowHeight, theme } = self
+            const {
+              apolloHover,
+              lgv,
+              regions,
+              sequenceRowHeight,
+              session,
+              theme,
+            } = self
 
             if (!apolloHover) {
               return
             }
             const { feature } = apolloHover
 
+            const { featureTypeOntology } =
+              session.apolloDataStore.ontologyManager
+            if (!featureTypeOntology) {
+              throw new Error('featureTypeOntology is undefined')
+            }
             for (const [idx, region] of regions.entries()) {
-              if (feature.type === 'CDS') {
+              if (featureTypeOntology.isTypeOf(feature.type, 'CDS')) {
                 const parentFeature = feature.parent
                 if (!parentFeature) {
                   continue
@@ -323,7 +340,7 @@ export function mouseEventsModelFactory(
         return []
       }
       const { topLevelFeature } = apolloHover
-      const glyph = getGlyph(topLevelFeature)
+      const glyph = self.getGlyph(topLevelFeature)
       return glyph.getContextMenuItems(self)
     },
   }))
@@ -483,7 +500,9 @@ export function mouseEventsModelFactory(
               if (apolloDragging) {
                 // NOTE: the glyph where the drag started is responsible for drawing the preview.
                 // it can call methods in other glyphs to help with this though.
-                const glyph = getGlyph(apolloDragging.feature.topLevelFeature)
+                const glyph = self.getGlyph(
+                  apolloDragging.feature.topLevelFeature,
+                )
                 glyph.drawDragPreview(self, ctx)
               }
             },

package/src/LinearApolloDisplay/stateModel/rendering.ts

@@ -7,7 +7,6 @@ import { autorun } from 'mobx'
 import { Instance, addDisposer } from 'mobx-state-tree'
 
 import { ApolloSessionModel } from '../../session'
-import { getGlyph } from './getGlyph'
 import { layoutsModelFactory } from './layouts'
 
 export function renderingModelIntermediateFactory(
@@ -428,7 +427,7 @@ export function renderingModelFactory(
                   ) {
                     continue
                   }
-                  getGlyph(feature).draw(ctx, feature, row, self, idx)
+                  self.getGlyph(feature).draw(ctx, feature, row, self, idx)
                 }
               }
             }

package/src/OntologyManager/OntologyStore/index.ts

@@ -68,6 +68,7 @@ export interface OntologyStoreOptions {
     indexFields?: { displayName: string; jsonPath: string }[]
   }
   maxSearchResults?: number
+  update?(message: string, progress: number): void
 }
 
 export interface PropertiesOptions {
@@ -107,8 +108,8 @@ export default class OntologyStore {
     this.ontologyName = name
     this.ontologyVersion = version
     this.sourceLocation = source
-    this.db = this.prepareDatabase()
     this.options = options ?? {}
+    this.db = this.prepareDatabase()
   }
 
   /**
@@ -174,9 +175,12 @@ export default class OntologyStore {
     }
 
     try {
-      const { sourceLocation, sourceType } = this
+      const { options, sourceLocation, sourceType } = this
       if (sourceType === 'obo-graph-json') {
+        options.update?.('', 0)
+        // add more updates inside `loadOboGraphJson`
         await this.loadOboGraphJson(db)
+        options.update?.('', 100)
       } else {
         throw new Error(
           `ontology source file ${JSON.stringify(