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

package/src/LinearApolloDisplay/components/LinearApolloDisplay.tsx

@@ -1,13 +1,13 @@
 /* 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 { Menu, type MenuItem } from '@jbrowse/core/ui'
 import {
-  AbstractSessionModel,
+  type AbstractSessionModel,
   doesIntersect2,
   getContainingView,
 } from '@jbrowse/core/util'
-import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+import { type LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 import ErrorIcon from '@mui/icons-material/Error'
 import {
   Alert,
@@ -20,7 +20,7 @@ import { observer } from 'mobx-react'
 import React, { useEffect, useState } from 'react'
 import { makeStyles } from 'tss-react/mui'
 
-import { LinearApolloDisplay as LinearApolloDisplayI } from '../stateModel'
+import { type LinearApolloDisplay as LinearApolloDisplayI } from '../stateModel'
 
 interface LinearApolloDisplayProps {
   model: LinearApolloDisplayI
@@ -61,6 +61,7 @@ export const LinearApolloDisplay = observer(function LinearApolloDisplay(
   const { model } = props
   const {
     loading,
+    apolloDragging,
     apolloRowHeight,
     contextMenuItems: getContextMenuItems,
     cursor,
@@ -94,7 +95,7 @@ export const LinearApolloDisplay = observer(function LinearApolloDisplay(
   const { assemblyManager } = session as unknown as AbstractSessionModel
   return (
     <>
-      {lgv.bpPerPx <= 3 ? (
+      {3 / lgv.bpPerPx >= 1 ? (
         <div
           className={classes.canvasContainer}
           style={{
@@ -218,20 +219,26 @@ export const LinearApolloDisplay = observer(function LinearApolloDisplay(
                   if (!feature) {
                     return null
                   }
-                  const { topLevelFeature } = feature
-                  const row = parent
-                    ? model.getFeatureLayoutPosition(topLevelFeature)
-                        ?.layoutRow ?? 0
-                    : 0
+                  let row = 0
+                  const featureLayout = model.getFeatureLayoutPosition(feature)
+                  if (featureLayout) {
+                    row = featureLayout.layoutRow + featureLayout.featureRow
+                  }
                   const top = row * apolloRowHeight
                   const height = apolloRowHeight
                   return (
                     <Tooltip key={checkResult._id} title={checkResult.message}>
                       <Avatar
                         className={classes.avatar}
-                        style={{ top, left, height, width: height }}
+                        style={{
+                          top,
+                          left,
+                          height,
+                          width: height,
+                          pointerEvents: apolloDragging ? 'none' : 'auto',
+                        }}
                       >
-                        <ErrorIcon />
+                        <ErrorIcon data-testid="ErrorIcon" />
                       </Avatar>
                     </Tooltip>
                   )

package/src/LinearApolloDisplay/glyphs/BoxGlyph.ts

@@ -1,30 +1,24 @@
-import { AnnotationFeature } from '@apollo-annotation/mst'
-import { Theme, alpha } from '@mui/material'
-import { MenuItem } from '@jbrowse/core/ui'
-
+import { type AnnotationFeature } from '@apollo-annotation/mst'
+import { type MenuItem } from '@jbrowse/core/ui'
 import {
-  AbstractSessionModel,
+  type AbstractSessionModel,
+  type SessionWithWidgets,
   isSessionModelWithWidgets,
-  SessionWithWidgets,
 } from '@jbrowse/core/util'
+import { type Theme, alpha } from '@mui/material'
 
+import { AddChildFeature, CopyFeature, DeleteFeature } from '../../components'
+import { type LinearApolloDisplay } from '../stateModel'
 import {
-  AddChildFeature,
-  CopyFeature,
-  DeleteFeature,
-  ModifyFeatureAttribute,
-} from '../../components'
-
-import { LinearApolloDisplay } from '../stateModel'
-import {
+  type LinearApolloDisplayMouseEvents,
+  type MousePosition,
+  type MousePositionWithFeatureAndGlyph,
   isMousePositionWithFeatureAndGlyph,
-  LinearApolloDisplayMouseEvents,
-  MousePosition,
-  MousePositionWithFeatureAndGlyph,
 } from '../stateModel/mouseEvents'
-import { CanvasMouseEvent } from '../types'
-import { Glyph } from './Glyph'
-import { LinearApolloDisplayRendering } from '../stateModel/rendering'
+import { type LinearApolloDisplayRendering } from '../stateModel/rendering'
+import { type CanvasMouseEvent } from '../types'
+
+import { type Glyph } from './Glyph'
 
 function drawBoxOutline(
   ctx: CanvasRenderingContext2D,
@@ -349,26 +343,6 @@ function getContextMenuItems(
         )
       },
     },
-    {
-      label: 'Modify feature attribute',
-      disabled: readOnly,
-      onClick: () => {
-        ;(session as unknown as AbstractSessionModel).queueDialog(
-          (doneCallback) => [
-            ModifyFeatureAttribute,
-            {
-              session,
-              handleClose: () => {
-                doneCallback()
-              },
-              changeManager,
-              sourceFeature,
-              sourceAssemblyId: currentAssemblyId,
-            },
-          ],
-        )
-      },
-    },
     {
       label: 'Edit feature details',
       onClick: () => {
@@ -394,7 +368,11 @@ function getContextMenuItems(
     throw new Error('featureTypeOntology is undefined')
   }
   if (
-    featureTypeOntology.isTypeOf(sourceFeature.type, 'transcript') &&
+    (featureTypeOntology.isTypeOf(sourceFeature.type, 'transcript') ||
+      featureTypeOntology.isTypeOf(
+        sourceFeature.type,
+        'pseudogenic_transcript',
+      )) &&
     isSessionModelWithWidgets(session)
   ) {
     menuItems.push({

package/src/LinearApolloDisplay/glyphs/GeneGlyph.ts

@@ -1,18 +1,19 @@
-import { AnnotationFeature } from '@apollo-annotation/mst'
+import { type AnnotationFeature } from '@apollo-annotation/mst'
 import { getFrame, intersection2 } from '@jbrowse/core/util'
 import { alpha } from '@mui/material'
 
-import { LinearApolloDisplay } from '../stateModel'
+import { type OntologyRecord } from '../../OntologyManager'
+import { type LinearApolloDisplay } from '../stateModel'
 import {
+  type MousePosition,
+  type MousePositionWithFeatureAndGlyph,
   isMousePositionWithFeatureAndGlyph,
-  MousePosition,
-  MousePositionWithFeatureAndGlyph,
 } from '../stateModel/mouseEvents'
-import { CanvasMouseEvent } from '../types'
-import { Glyph } from './Glyph'
+import { type LinearApolloDisplayRendering } from '../stateModel/rendering'
+import { type CanvasMouseEvent } from '../types'
+
 import { boxGlyph } from './BoxGlyph'
-import { LinearApolloDisplayRendering } from '../stateModel/rendering'
-import { OntologyRecord } from '../../OntologyManager'
+import { type Glyph } from './Glyph'
 
 let forwardFillLight: CanvasPattern | null = null
 let backwardFillLight: CanvasPattern | null = null
@@ -112,10 +113,9 @@ function draw(
   // Draw lines on different rows for each transcript
   let currentRow = 0
   for (const [, transcript] of children) {
-    const isTranscript = featureTypeOntology.isTypeOf(
-      transcript.type,
-      'transcript',
-    )
+    const isTranscript =
+      featureTypeOntology.isTypeOf(transcript.type, 'transcript') ||
+      featureTypeOntology.isTypeOf(transcript.type, 'pseudogenic_transcript')
     if (!isTranscript) {
       currentRow += 1
       continue
@@ -161,7 +161,12 @@ function draw(
   // Draw exon and CDS for each transcript
   currentRow = 0
   for (const [, child] of children) {
-    if (!featureTypeOntology.isTypeOf(child.type, 'transcript')) {
+    if (
+      !(
+        featureTypeOntology.isTypeOf(child.type, 'transcript') ||
+        featureTypeOntology.isTypeOf(child.type, 'pseudogenic_transcript')
+      )
+    ) {
       boxGlyph.draw(ctx, child, row, stateModel, displayedRegionIndex)
       currentRow += 1
       continue
@@ -221,7 +226,6 @@ function draw(
               apolloSelectedFeature && _id === apolloSelectedFeature._id
                 ? 'rgb(0,0,0)'
                 : cdsColorCode
-            ctx.fillStyle = cdsColorCode
             ctx.fillRect(
               cdsStartPx + 1,
               cdsTop + 1,
@@ -455,7 +459,11 @@ function getFeatureFromLayout(
     if (
       featureTypeOntology.isTypeOf(featureObj.type, 'CDS') &&
       featureObj.parent &&
-      featureTypeOntology.isTypeOf(featureObj.parent.type, 'transcript')
+      (featureTypeOntology.isTypeOf(featureObj.parent.type, 'transcript') ||
+        featureTypeOntology.isTypeOf(
+          featureObj.parent.type,
+          'pseudogenic_transcript',
+        ))
     ) {
       const { cdsLocations } = featureObj.parent
       for (const cdsLoc of cdsLocations) {
@@ -483,7 +491,7 @@ function getCDSCount(
   if (!children) {
     return 0
   }
-  const isMrna = featureTypeOntology.isTypeOf(type, 'mRNA')
+  const isMrna = featureTypeOntology.isTypeOf(type, 'transcript')
   let cdsCount = 0
   if (isMrna) {
     for (const [, child] of children) {
@@ -504,7 +512,9 @@ function getRowCount(
   if (!children) {
     return 1
   }
-  const isTranscript = featureTypeOntology.isTypeOf(type, 'transcript')
+  const isTranscript =
+    featureTypeOntology.isTypeOf(type, 'transcript') ||
+    featureTypeOntology.isTypeOf(type, 'pseudogenic_transcript')
   let rowCount = 0
   if (isTranscript) {
     for (const [, child] of children) {
@@ -532,7 +542,9 @@ function featuresForRow(
   feature: AnnotationFeature,
   featureTypeOntology: OntologyRecord,
 ): AnnotationFeature[][] {
-  const isGene = featureTypeOntology.isTypeOf(feature.type, 'gene')
+  const isGene =
+    featureTypeOntology.isTypeOf(feature.type, 'gene') ||
+    featureTypeOntology.isTypeOf(feature.type, 'pseudogene')
   if (!isGene) {
     throw new Error('Top level feature for GeneGlyph must have type "gene"')
   }
@@ -542,7 +554,12 @@ function featuresForRow(
   }
   const features: AnnotationFeature[][] = []
   for (const [, child] of children) {
-    if (!featureTypeOntology.isTypeOf(child.type, 'transcript')) {
+    if (
+      !(
+        featureTypeOntology.isTypeOf(child.type, 'transcript') ||
+        featureTypeOntology.isTypeOf(child.type, 'pseudogenic_transcript')
+      )
+    ) {
       features.push([child, feature])
       continue
     }
@@ -651,8 +668,12 @@ function getDraggableFeatureInfo(
   if (!featureTypeOntology) {
     throw new Error('featureTypeOntology is undefined')
   }
-  const isGene = featureTypeOntology.isTypeOf(feature.type, 'gene')
-  const isTranscript = featureTypeOntology.isTypeOf(feature.type, 'transcript')
+  const isGene =
+    featureTypeOntology.isTypeOf(feature.type, 'gene') ||
+    featureTypeOntology.isTypeOf(feature.type, 'pseudogene')
+  const isTranscript =
+    featureTypeOntology.isTypeOf(feature.type, 'transcript') ||
+    featureTypeOntology.isTypeOf(feature.type, 'pseudogenic_transcript')
   const isCds = featureTypeOntology.isTypeOf(feature.type, 'CDS')
   if (isGene || isTranscript) {
     return
@@ -691,9 +712,10 @@ function getDraggableFeatureInfo(
     }
 
     const overlappingExon = exonChildren.find((child) => {
-      const [start, end] = intersection2(bp, bp + 1, child.min, child.max)
+      const [start, end] = intersection2(bp - 1, bp, child.min, child.max)
       return start !== undefined && end !== undefined
     })
+
     if (!overlappingExon) {
       return
     }

package/src/LinearApolloDisplay/glyphs/GenericChildGlyph.ts

@@ -1,9 +1,10 @@
-import { AnnotationFeature } from '@apollo-annotation/mst'
+import { type AnnotationFeature } from '@apollo-annotation/mst'
 
-import { LinearApolloDisplay } from '../stateModel'
-import { boxGlyph, isSelectedFeature, drawBox } from './BoxGlyph'
-import { Glyph } from './Glyph'
-import { LinearApolloDisplayRendering } from '../stateModel/rendering'
+import { type LinearApolloDisplay } from '../stateModel'
+import { type LinearApolloDisplayRendering } from '../stateModel/rendering'
+
+import { boxGlyph, drawBox, isSelectedFeature } from './BoxGlyph'
+import { type Glyph } from './Glyph'
 
 function featuresForRow(feature: AnnotationFeature): AnnotationFeature[][] {
   const features = [[feature]]

package/src/LinearApolloDisplay/glyphs/Glyph.ts

@@ -1,13 +1,13 @@
-import { AnnotationFeature } from '@apollo-annotation/mst'
-import { MenuItem } from '@jbrowse/core/ui'
+import { type AnnotationFeature } from '@apollo-annotation/mst'
+import { type MenuItem } from '@jbrowse/core/ui'
 
+import { type OntologyRecord } from '../../OntologyManager'
 import {
-  LinearApolloDisplayMouseEvents,
-  MousePositionWithFeatureAndGlyph,
+  type LinearApolloDisplayMouseEvents,
+  type MousePositionWithFeatureAndGlyph,
 } from '../stateModel/mouseEvents'
-import { LinearApolloDisplayRendering } from '../stateModel/rendering'
-import { CanvasMouseEvent } from '../types'
-import { OntologyRecord } from '../../OntologyManager'
+import { type LinearApolloDisplayRendering } from '../stateModel/rendering'
+import { type CanvasMouseEvent } from '../types'
 
 export interface Glyph {
   /** @returns number of layout rows used by this glyph with this feature and zoom level */

package/src/LinearApolloDisplay/stateModel/base.ts

@@ -3,26 +3,26 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
-import { AnnotationFeature } from '@apollo-annotation/mst'
+import { type AnnotationFeature } from '@apollo-annotation/mst'
+import type PluginManager from '@jbrowse/core/PluginManager'
 import { ConfigurationReference, getConf } from '@jbrowse/core/configuration'
-import { AnyConfigurationSchemaType } from '@jbrowse/core/configuration/configurationSchema'
+import { type AnyConfigurationSchemaType } from '@jbrowse/core/configuration/configurationSchema'
 import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes'
-import PluginManager from '@jbrowse/core/PluginManager'
 import {
-  AbstractSessionModel,
+  type AbstractSessionModel,
   getContainingView,
   getSession,
 } from '@jbrowse/core/util'
 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 { type LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 import { autorun } from 'mobx'
-import { addDisposer, cast, getRoot, types, getSnapshot } from 'mobx-state-tree'
+import { addDisposer, cast, getRoot, getSnapshot, types } from 'mobx-state-tree'
 
-import { ApolloInternetAccountModel } from '../../ApolloInternetAccount/model'
-import { ApolloSessionModel } from '../../session'
-import { ApolloRootModel } from '../../types'
+import { type ApolloInternetAccountModel } from '../../ApolloInternetAccount/model'
 import { FilterFeatures } from '../../components/FilterFeatures'
+import { type ApolloSessionModel } from '../../session'
+import { type ApolloRootModel } from '../../types'
 
 const minDisplayHeight = 20
 
@@ -36,6 +36,9 @@ export function baseModelFactory(
       configuration: ConfigurationReference(configSchema),
       graphical: true,
       table: false,
+      showStartCodons: false,
+      showStopCodons: true,
+      highContrast: false,
       heightPreConfig: types.maybe(
         types.refinement(
           'displayHeight',
@@ -168,6 +171,15 @@ export function baseModelFactory(
         self.graphical = true
         self.table = true
       },
+      toggleShowStartCodons() {
+        self.showStartCodons = !self.showStartCodons
+      },
+      toggleShowStopCodons() {
+        self.showStopCodons = !self.showStopCodons
+      },
+      toggleHighContrast() {
+        self.highContrast = !self.highContrast
+      },
       updateFilteredFeatureTypes(types: string[]) {
         self.filteredFeatureTypes = cast(types)
       },
@@ -179,7 +191,13 @@ export function baseModelFactory(
       const { filteredFeatureTypes, trackMenuItems: superTrackMenuItems } = self
       return {
         trackMenuItems() {
-          const { graphical, table } = self
+          const {
+            graphical,
+            table,
+            showStartCodons,
+            showStopCodons,
+            highContrast,
+          } = self
           return [
             ...superTrackMenuItems(),
             {
@@ -210,6 +228,30 @@ export function baseModelFactory(
                     self.showGraphicalAndTable()
                   },
                 },
+                {
+                  label: 'Show start codons',
+                  type: 'checkbox',
+                  checked: showStartCodons,
+                  onClick: () => {
+                    self.toggleShowStartCodons()
+                  },
+                },
+                {
+                  label: 'Show stop codons',
+                  type: 'checkbox',
+                  checked: showStopCodons,
+                  onClick: () => {
+                    self.toggleShowStopCodons()
+                  },
+                },
+                {
+                  label: 'Use high contrast colors',
+                  type: 'checkbox',
+                  checked: highContrast,
+                  onClick: () => {
+                    self.toggleHighContrast()
+                  },
+                },
               ],
             },
             {

package/src/LinearApolloDisplay/stateModel/index.ts

@@ -1,8 +1,9 @@
-import { AnyConfigurationSchemaType } from '@jbrowse/core/configuration/configurationSchema'
-import PluginManager from '@jbrowse/core/PluginManager'
-import { Instance, types } from 'mobx-state-tree'
+import type PluginManager from '@jbrowse/core/PluginManager'
+import { type AnyConfigurationSchemaType } from '@jbrowse/core/configuration/configurationSchema'
+import { type Instance, types } from 'mobx-state-tree'
 
 import { TabularEditorStateModelType } from '../../TabularEditor'
+
 import { mouseEventsModelFactory } from './mouseEvents'
 
 export function stateModelFactory(

package/src/LinearApolloDisplay/stateModel/layouts.ts

@@ -1,16 +1,17 @@
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
 
-import { AnnotationFeature } from '@apollo-annotation/mst'
-import { AnyConfigurationSchemaType } from '@jbrowse/core/configuration/configurationSchema'
-import PluginManager from '@jbrowse/core/PluginManager'
-import { AbstractSessionModel, doesIntersect2 } from '@jbrowse/core/util'
+import { type AnnotationFeature } from '@apollo-annotation/mst'
+import type PluginManager from '@jbrowse/core/PluginManager'
+import { type AnyConfigurationSchemaType } from '@jbrowse/core/configuration/configurationSchema'
+import { type AbstractSessionModel, doesIntersect2 } from '@jbrowse/core/util'
 import { autorun, observable } from 'mobx'
 import { addDisposer, isAlive } from 'mobx-state-tree'
 
-import { ApolloSessionModel } from '../../session'
-import { baseModelFactory } from './base'
+import { type ApolloSessionModel } from '../../session'
 import { boxGlyph, geneGlyph, genericChildGlyph } from '../glyphs'
 
+import { baseModelFactory } from './base'
+
 function getRowsForFeature(
   startingRow: number,
   rowCount: number,
@@ -62,7 +63,7 @@ export function layoutsModelFactory(
         return self.seenFeatures.get(id)
       },
       getGlyph(feature: AnnotationFeature) {
-        if (this.looksLikeGene(feature)) {
+        if (feature.looksLikeGene) {
           return geneGlyph
         }
         if (feature.children?.size) {
@@ -70,33 +71,6 @@ export function layoutsModelFactory(
         }
         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
-            }
-            return [...grandChildren.values()].some((grandchild) =>
-              featureTypeOntology.isTypeOf(grandchild.type, 'exon'),
-            )
-          }
-        }
-        return false
-      },
     }))
     .actions((self) => ({
       addSeenFeature(feature: AnnotationFeature) {

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