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

package/src/LinearApolloSixFrameDisplay/glyphs/Glyph.ts

@@ -0,0 +1,63 @@
+import { type AnnotationFeature } from '@apollo-annotation/mst'
+import { type MenuItem } from '@jbrowse/core/ui'
+
+import {
+  type LinearApolloSixFrameDisplayMouseEvents,
+  type MousePositionWithFeatureAndGlyph,
+} from '../stateModel/mouseEvents'
+import { type LinearApolloSixFrameDisplayRendering } from '../stateModel/rendering'
+import { type CanvasMouseEvent } from '../types'
+
+export interface Glyph {
+  /** draw the feature's primary rendering on the canvas */
+  draw(
+    ctx: CanvasRenderingContext2D,
+    feature: AnnotationFeature,
+    row: number,
+    stateModel: LinearApolloSixFrameDisplayRendering,
+    displayedRegionIndex: number,
+  ): void
+
+  drawHover(
+    display: LinearApolloSixFrameDisplayMouseEvents,
+    overlayCtx: CanvasRenderingContext2D,
+  ): void
+
+  drawDragPreview(
+    display: LinearApolloSixFrameDisplayMouseEvents,
+    ctx: CanvasRenderingContext2D,
+  ): void
+
+  onMouseDown(
+    display: LinearApolloSixFrameDisplayMouseEvents,
+    currentMousePosition: MousePositionWithFeatureAndGlyph,
+    event: CanvasMouseEvent,
+  ): void
+
+  onMouseMove(
+    display: LinearApolloSixFrameDisplayMouseEvents,
+    currentMousePosition: MousePositionWithFeatureAndGlyph,
+    event: CanvasMouseEvent,
+  ): void
+
+  onMouseLeave(
+    display: LinearApolloSixFrameDisplayMouseEvents,
+    currentMousePosition: MousePositionWithFeatureAndGlyph,
+    event: CanvasMouseEvent,
+  ): void
+
+  onMouseUp(
+    display: LinearApolloSixFrameDisplayMouseEvents,
+    currentMousePosition: MousePositionWithFeatureAndGlyph,
+    event: CanvasMouseEvent,
+  ): void
+
+  drawTooltip(
+    display: LinearApolloSixFrameDisplayMouseEvents,
+    context: CanvasRenderingContext2D,
+  ): void
+
+  getContextMenuItems(
+    display: LinearApolloSixFrameDisplayMouseEvents,
+  ): MenuItem[]
+}

package/src/LinearApolloSixFrameDisplay/glyphs/index.ts

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

package/src/LinearApolloSixFrameDisplay/index.ts

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

package/src/LinearApolloSixFrameDisplay/stateModel/base.ts

@@ -0,0 +1,302 @@
+/* eslint-disable @typescript-eslint/unbound-method */
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
+import { type AnnotationFeature } from '@apollo-annotation/mst'
+import type PluginManager from '@jbrowse/core/PluginManager'
+import { ConfigurationReference, getConf } from '@jbrowse/core/configuration'
+import { type AnyConfigurationSchemaType } from '@jbrowse/core/configuration/configurationSchema'
+import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes'
+import {
+  type AbstractSessionModel,
+  type SessionWithWidgets,
+  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 { autorun } from 'mobx'
+import { addDisposer, cast, getRoot, getSnapshot, types } from 'mobx-state-tree'
+
+import { type ApolloInternetAccountModel } from '../../ApolloInternetAccount/model'
+import { FilterFeatures } from '../../components/FilterFeatures'
+import { type ApolloSessionModel } from '../../session'
+import { type ApolloRootModel } from '../../types'
+
+const minDisplayHeight = 20
+
+export function baseModelFactory(
+  _pluginManager: PluginManager,
+  configSchema: AnyConfigurationSchemaType,
+) {
+  return BaseDisplay.named('BaseLinearApolloSixFrameDisplay')
+    .props({
+      type: types.literal('LinearApolloSixFrameDisplay'),
+      configuration: ConfigurationReference(configSchema),
+      graphical: true,
+      table: false,
+      showFeatureLabels: true,
+      heightPreConfig: types.maybe(
+        types.refinement(
+          'displayHeight',
+          types.number,
+          (n) => n >= minDisplayHeight,
+        ),
+      ),
+      filteredFeatureTypes: types.array(types.string),
+    })
+    .views((self) => {
+      const { configuration, renderProps: superRenderProps } = self
+      return {
+        renderProps() {
+          return {
+            ...superRenderProps(),
+            ...getParentRenderProps(self),
+            config: configuration.renderer,
+          }
+        },
+      }
+    })
+    .volatile(() => ({
+      scrollTop: 0,
+    }))
+    .views((self) => ({
+      get lgv() {
+        return getContainingView(self) as unknown as LinearGenomeViewModel
+      },
+      get height() {
+        if (self.heightPreConfig) {
+          return self.heightPreConfig
+        }
+        if (self.graphical && self.table) {
+          return 500
+        }
+        if (self.graphical) {
+          return 200
+        }
+        return 300
+      },
+    }))
+    .views((self) => ({
+      get rendererTypeName() {
+        return self.configuration.renderer.type
+      },
+      get session() {
+        return getSession(self) as unknown as ApolloSessionModel
+      },
+      get regions() {
+        const regions = self.lgv.dynamicBlocks.contentBlocks.map(
+          ({ assemblyName, end, refName, start }) => ({
+            assemblyName,
+            refName,
+            start: Math.round(start),
+            end: Math.round(end),
+          }),
+        )
+        return regions
+      },
+      regionCannotBeRendered(/* region */) {
+        if (self.lgv && self.lgv.bpPerPx >= 200) {
+          return 'Zoom in to see annotations'
+        }
+        return
+      },
+    }))
+    .views((self) => ({
+      get apolloInternetAccount() {
+        const [region] = self.regions
+        const { internetAccounts } = getRoot<ApolloRootModel>(self)
+        const { assemblyName } = region
+        const { assemblyManager } =
+          self.session as unknown as AbstractSessionModel
+        const assembly = assemblyManager.get(assemblyName)
+        if (!assembly) {
+          throw new Error(`No assembly found with name ${assemblyName}`)
+        }
+        const { internetAccountConfigId } = getConf(assembly, [
+          'sequence',
+          'metadata',
+        ]) as { internetAccountConfigId: string }
+        return internetAccounts.find(
+          (ia) => getConf(ia, 'internetAccountId') === internetAccountConfigId,
+        ) as ApolloInternetAccountModel | undefined
+      },
+      get changeManager() {
+        return (self.session as unknown as ApolloSessionModel).apolloDataStore
+          .changeManager
+      },
+      getAssemblyId(assemblyName: string) {
+        const { assemblyManager } =
+          self.session as unknown as AbstractSessionModel
+        const assembly = assemblyManager.get(assemblyName)
+        if (!assembly) {
+          throw new Error(`Could not find assembly named ${assemblyName}`)
+        }
+        return assembly.name
+      },
+      get selectedFeature(): AnnotationFeature | undefined {
+        return (self.session as unknown as ApolloSessionModel)
+          .apolloSelectedFeature
+      },
+    }))
+    .actions((self) => ({
+      setScrollTop(scrollTop: number) {
+        self.scrollTop = scrollTop
+      },
+      setHeight(displayHeight: number) {
+        self.heightPreConfig = Math.max(displayHeight, minDisplayHeight)
+        return self.height
+      },
+      resizeHeight(distance: number) {
+        const oldHeight = self.height
+        const newHeight = this.setHeight(self.height + distance)
+        return newHeight - oldHeight
+      },
+      showGraphicalOnly() {
+        self.graphical = true
+        self.table = false
+      },
+      showTableOnly() {
+        self.graphical = false
+        self.table = true
+      },
+      showGraphicalAndTable() {
+        self.graphical = true
+        self.table = true
+      },
+      toggleShowFeatureLabels() {
+        self.showFeatureLabels = !self.showFeatureLabels
+      },
+      updateFilteredFeatureTypes(types: string[]) {
+        self.filteredFeatureTypes = cast(types)
+      },
+    }))
+    .views((self) => {
+      const { filteredFeatureTypes, trackMenuItems: superTrackMenuItems } = self
+      return {
+        trackMenuItems() {
+          const { graphical, table, showFeatureLabels } = self
+          return [
+            ...superTrackMenuItems(),
+            {
+              type: 'subMenu',
+              label: 'Appearance',
+              subMenu: [
+                {
+                  label: 'Show graphical display',
+                  type: 'radio',
+                  checked: graphical && !table,
+                  onClick: () => {
+                    self.showGraphicalOnly()
+                  },
+                },
+                {
+                  label: 'Show table display',
+                  type: 'radio',
+                  checked: table && !graphical,
+                  onClick: () => {
+                    self.showTableOnly()
+                  },
+                },
+                {
+                  label: 'Show both graphical and table display',
+                  type: 'radio',
+                  checked: table && graphical,
+                  onClick: () => {
+                    self.showGraphicalAndTable()
+                  },
+                },
+                {
+                  label: 'Feature Labels',
+                  type: 'checkbox',
+                  checked: showFeatureLabels,
+                  onClick: () => {
+                    self.toggleShowFeatureLabels()
+                  },
+                },
+              ],
+            },
+            {
+              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)
+                      },
+                    },
+                  ],
+                )
+              },
+            },
+          ]
+        },
+      }
+    })
+    .actions((self) => ({
+      setSelectedFeature(feature?: AnnotationFeature) {
+        ;(
+          self.session as unknown as ApolloSessionModel
+        ).apolloSetSelectedFeature(feature)
+      },
+      showFeatureDetailsWidget(
+        feature: AnnotationFeature,
+        customWidgetNameAndId?: [string, string],
+      ) {
+        const [region] = self.regions
+        const { assemblyName, refName } = region
+        const assembly = self.getAssemblyId(assemblyName)
+        if (!assembly) {
+          return
+        }
+        const { session } = self
+        const { changeManager } = session.apolloDataStore
+        const [widgetName, widgetId] = customWidgetNameAndId ?? [
+          'ApolloFeatureDetailsWidget',
+          'apolloFeatureDetailsWidget',
+        ]
+        const apolloFeatureWidget = (
+          session as unknown as SessionWithWidgets
+        ).addWidget(widgetName, widgetId, {
+          feature,
+          assembly,
+          refName,
+          changeManager,
+        })
+        ;(session as unknown as SessionWithWidgets).showWidget(
+          apolloFeatureWidget,
+        )
+      },
+      afterAttach() {
+        addDisposer(
+          self,
+          autorun(
+            () => {
+              if (!self.lgv.initialized || self.regionCannotBeRendered()) {
+                return
+              }
+              void (
+                self.session as unknown as ApolloSessionModel
+              ).apolloDataStore.loadFeatures(self.regions)
+              if (self.lgv.bpPerPx <= 3) {
+                void (
+                  self.session as unknown as ApolloSessionModel
+                ).apolloDataStore.loadRefSeq(self.regions)
+              }
+            },
+            { name: 'LinearApolloSixFrameDisplayLoadFeatures', delay: 1000 },
+          ),
+        )
+      },
+    }))
+}

package/src/LinearApolloSixFrameDisplay/stateModel/index.ts

@@ -0,0 +1,27 @@
+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(
+  pluginManager: PluginManager,
+  configSchema: AnyConfigurationSchemaType,
+) {
+  // TODO: this needs to be refactored so that the final composition of the
+  // state model mixins happens here in one central place
+  return mouseEventsModelFactory(pluginManager, configSchema)
+    .props({ tabularEditor: types.optional(TabularEditorStateModelType, {}) })
+    .named('LinearApolloSixFrameDisplay')
+}
+
+export type LinearApolloSixFrameDisplayStateModel = ReturnType<
+  typeof stateModelFactory
+>
+// eslint disable because of
+// https://mobx-state-tree.js.org/tips/typescript#using-a-mst-type-at-design-time
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface LinearApolloSixFrameDisplay
+  extends Instance<LinearApolloSixFrameDisplayStateModel> {}

package/src/LinearApolloSixFrameDisplay/stateModel/layouts.ts

@@ -0,0 +1,252 @@
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
+
+import {
+  type AnnotationFeature,
+  type TranscriptPartCoding,
+} from '@apollo-annotation/mst'
+import type PluginManager from '@jbrowse/core/PluginManager'
+import { type AnyConfigurationSchemaType } from '@jbrowse/core/configuration/configurationSchema'
+import {
+  type AbstractSessionModel,
+  doesIntersect2,
+  getFrame,
+} from '@jbrowse/core/util'
+import { autorun, observable } from 'mobx'
+import { addDisposer, isAlive } from 'mobx-state-tree'
+
+import { type ApolloSessionModel } from '../../session'
+import { geneGlyph } from '../glyphs'
+
+import { baseModelFactory } from './base'
+
+export interface LayoutRow {
+  rowNum: number
+  feature: AnnotationFeature
+  cds: TranscriptPartCoding | null
+}
+
+export function layoutsModelFactory(
+  pluginManager: PluginManager,
+  configSchema: AnyConfigurationSchemaType,
+) {
+  const BaseLinearApolloSixFrameDisplay = baseModelFactory(
+    pluginManager,
+    configSchema,
+  )
+
+  return BaseLinearApolloSixFrameDisplay.named(
+    'LinearApolloSixFrameDisplayLayouts',
+  )
+    .props({
+      featuresMinMaxLimit: 500_000,
+    })
+    .volatile(() => ({
+      seenFeatures: observable.map<string, AnnotationFeature>(),
+    }))
+    .views((self) => ({
+      get featuresMinMax() {
+        const { assemblyManager } =
+          self.session as unknown as AbstractSessionModel
+        return self.lgv.displayedRegions.map((region) => {
+          const assembly = assemblyManager.get(region.assemblyName)
+          let min: number | undefined
+          let max: number | undefined
+          const { end, refName, start } = region
+          for (const [, feature] of self.seenFeatures) {
+            if (
+              refName !== assembly?.getCanonicalRefName(feature.refSeq) ||
+              !doesIntersect2(start, end, feature.min, feature.max) ||
+              feature.length > self.featuresMinMaxLimit
+            ) {
+              continue
+            }
+            if (min === undefined) {
+              ;({ min } = feature)
+            }
+            if (max === undefined) {
+              ;({ max } = feature)
+            }
+            if (feature.minWithChildren < min) {
+              ;({ min } = feature)
+            }
+            if (feature.maxWithChildren > max) {
+              ;({ max } = feature)
+            }
+          }
+          if (min !== undefined && max !== undefined) {
+            return [min, max]
+          }
+          return
+        })
+      },
+      getGlyph(_feature: AnnotationFeature) {
+        return geneGlyph
+      },
+      featureLabelSpacer(elem: number): number {
+        return self.showFeatureLabels ? elem * 2 - 1 : elem
+      },
+    }))
+    .actions((self) => ({
+      addSeenFeature(feature: AnnotationFeature) {
+        self.seenFeatures.set(feature._id, feature)
+      },
+      deleteSeenFeature(featureId: string) {
+        self.seenFeatures.delete(featureId)
+      },
+    }))
+    .views((self) => ({
+      get geneTrackRowNums() {
+        return [4, 5].map((elem) => self.featureLabelSpacer(elem))
+      },
+    }))
+    .views((self) => ({
+      get featureLayouts() {
+        const { assemblyManager } =
+          self.session as unknown as AbstractSessionModel
+        return self.lgv.displayedRegions.map((region, idx) => {
+          const assembly = assemblyManager.get(region.assemblyName)
+          const featureLayout = new Map<number, LayoutRow[]>()
+          const minMax = self.featuresMinMax[idx]
+          if (!minMax) {
+            return featureLayout
+          }
+          const { end, refName, start } = region
+          for (const [id, feature] of self.seenFeatures.entries()) {
+            if (!isAlive(feature)) {
+              self.deleteSeenFeature(id)
+              continue
+            }
+            if (
+              refName !== assembly?.getCanonicalRefName(feature.refSeq) ||
+              !doesIntersect2(start, end, feature.min, feature.max)
+            ) {
+              continue
+            }
+            const { featureTypeOntology } =
+              self.session.apolloDataStore.ontologyManager
+            if (!featureTypeOntology) {
+              throw new Error('featureTypeOntology is undefined')
+            }
+            if (feature.looksLikeGene) {
+              const rowNum =
+                feature.strand == 1
+                  ? self.geneTrackRowNums[0]
+                  : self.geneTrackRowNums[1]
+              if (!featureLayout.get(rowNum)) {
+                featureLayout.set(rowNum, [])
+              }
+              const layoutRow = featureLayout.get(rowNum)
+              layoutRow?.push({ rowNum, feature, cds: null })
+              const { children } = feature
+              if (!children) {
+                continue
+              }
+              for (const [, child] of children) {
+                if (featureTypeOntology.isTypeOf(child.type, 'transcript')) {
+                  const {
+                    cdsLocations,
+                    strand,
+                    children: childrenOfmRNA,
+                  } = child
+                  if (childrenOfmRNA) {
+                    for (const [, exon] of childrenOfmRNA) {
+                      if (!featureTypeOntology.isTypeOf(exon.type, 'exon')) {
+                        continue
+                      }
+                      const rowNum =
+                        exon.strand == 1
+                          ? self.geneTrackRowNums[0]
+                          : self.geneTrackRowNums[1]
+                      const layoutRow = featureLayout.get(rowNum)
+                      layoutRow?.push({ rowNum, feature: exon, cds: null })
+                    }
+                  }
+                  for (const cdsRow of cdsLocations) {
+                    for (const cds of cdsRow) {
+                      let rowNum: number = getFrame(
+                        cds.min,
+                        cds.max,
+                        strand ?? 1,
+                        cds.phase,
+                      )
+                      rowNum = self.featureLabelSpacer(
+                        rowNum < 0 ? -1 * rowNum + 5 : rowNum,
+                      )
+                      if (!featureLayout.get(rowNum)) {
+                        featureLayout.set(rowNum, [])
+                      }
+                      const layoutRow = featureLayout.get(rowNum)
+                      layoutRow?.push({ rowNum, feature: child, cds })
+                    }
+                  }
+                }
+              }
+            } else {
+              continue
+            }
+          }
+          return featureLayout
+        })
+      },
+      getFeatureLayoutPosition(feature: AnnotationFeature) {
+        const { featureLayouts } = this
+        for (const [idx, layout] of featureLayouts.entries()) {
+          for (const [, layoutRow] of layout) {
+            for (const { feature: layoutFeature } of layoutRow) {
+              if (feature._id === layoutFeature._id) {
+                return {
+                  layoutIndex: idx,
+                  layoutRow: 0,
+                  featureRow: 0,
+                }
+              }
+            }
+          }
+        }
+        return
+      },
+    }))
+    .views((_self) => ({
+      get highestRow() {
+        return 5
+      },
+    }))
+    .actions((self) => ({
+      afterAttach() {
+        addDisposer(
+          self,
+          autorun(
+            () => {
+              if (!self.lgv.initialized || self.regionCannotBeRendered()) {
+                return
+              }
+              for (const region of self.regions) {
+                const assembly = (
+                  self.session as unknown as ApolloSessionModel
+                ).apolloDataStore.assemblies.get(region.assemblyName)
+                const ref = assembly?.getByRefName(region.refName)
+                const features = ref?.features
+                if (!features) {
+                  continue
+                }
+                for (const [, feature] of features) {
+                  if (
+                    doesIntersect2(
+                      region.start,
+                      region.end,
+                      feature.min,
+                      feature.max,
+                    ) &&
+                    !self.seenFeatures.has(feature._id)
+                  ) {
+                    self.addSeenFeature(feature)
+                  }
+                }
+              }
+            },
+            { name: 'LinearApolloSixFrameDisplaySetSeenFeatures', delay: 1000 },
+          ),
+        )
+      },
+    }))
+}