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

package/src/LinearApolloSixFrameDisplay/stateModel/mouseEvents.ts

@@ -0,0 +1,368 @@
+import {
+  type AnnotationFeature,
+  type TranscriptPartCoding,
+} from '@apollo-annotation/mst'
+import {
+  LocationEndChange,
+  LocationStartChange,
+} from '@apollo-annotation/shared'
+import type PluginManager from '@jbrowse/core/PluginManager'
+import { type AnyConfigurationSchemaType } from '@jbrowse/core/configuration/configurationSchema'
+import { type MenuItem } from '@jbrowse/core/ui'
+import { type LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+import { autorun } from 'mobx'
+import { type Instance, addDisposer, cast } from 'mobx-state-tree'
+import { type CSSProperties } from 'react'
+
+import { type Edge, getPropagatedLocationChanges } from '../../util'
+import { type Coord } from '../components'
+import { type Glyph } from '../glyphs/Glyph'
+import { type CanvasMouseEvent } from '../types'
+
+import { renderingModelFactory } from './rendering'
+
+export interface FeatureAndGlyphUnderMouse {
+  cds: TranscriptPartCoding | null
+  feature: AnnotationFeature
+  topLevelFeature: AnnotationFeature
+  glyph: Glyph
+}
+
+/** extended information about the position of the mouse on the canvas, including the refName, bp, and displayedRegion number */
+export interface MousePosition {
+  x: number
+  y: number
+  refName: string
+  bp: number
+  regionNumber: number
+  featureAndGlyphUnderMouse?: FeatureAndGlyphUnderMouse
+}
+
+export type MousePositionWithFeatureAndGlyph = Required<MousePosition>
+
+export function isMousePositionWithFeatureAndGlyph(
+  mousePosition: MousePosition,
+): mousePosition is MousePositionWithFeatureAndGlyph {
+  return 'featureAndGlyphUnderMouse' in mousePosition
+}
+
+function getMousePosition(
+  event: CanvasMouseEvent,
+  lgv: LinearGenomeViewModel,
+): MousePosition {
+  const canvas = event.currentTarget
+  const { clientX, clientY } = event
+  const { left, top } = canvas.getBoundingClientRect()
+  const x = clientX - left
+  const y = clientY - top
+  const { coord: bp, index: regionNumber, refName } = lgv.pxToBp(x)
+  return { x, y, refName, bp, regionNumber }
+}
+
+export function mouseEventsModelIntermediateFactory(
+  pluginManager: PluginManager,
+  configSchema: AnyConfigurationSchemaType,
+) {
+  const LinearApolloSixFrameDisplayRendering = renderingModelFactory(
+    pluginManager,
+    configSchema,
+  )
+
+  return LinearApolloSixFrameDisplayRendering.named(
+    'LinearApolloSixFrameDisplayMouseEvents',
+  )
+    .volatile(() => ({
+      apolloDragging: null as {
+        start: MousePosition
+        current: MousePosition
+        feature: AnnotationFeature
+        edge: Edge
+        shrinkParent: boolean
+      } | null,
+      cursor: undefined as CSSProperties['cursor'] | undefined,
+      apolloHover: undefined as FeatureAndGlyphUnderMouse | undefined,
+    }))
+    .views((self) => ({
+      getMousePosition(event: CanvasMouseEvent): MousePosition {
+        const mousePosition = getMousePosition(event, self.lgv)
+        const { bp, regionNumber, y } = mousePosition
+        const row = Math.floor(y / self.apolloRowHeight) + 1
+        const featureLayout = self.featureLayouts[regionNumber]
+        const layoutRow = featureLayout.get(row)
+        if (!layoutRow) {
+          return mousePosition
+        }
+        let foundFeature
+        if (self.geneTrackRowNums.includes(row)) {
+          foundFeature = layoutRow.find(
+            (f) =>
+              f.feature.type == 'exon' &&
+              bp >= f.feature.min &&
+              bp <= f.feature.max,
+          )
+          if (!foundFeature) {
+            foundFeature = layoutRow.find(
+              (f) => bp >= f.feature.min && bp <= f.feature.max,
+            )
+          }
+        } else {
+          foundFeature = layoutRow.find((f) => {
+            const featureID = f.feature.attributes.get('gff_id')?.toString()
+            return (
+              f.cds != null &&
+              bp >= f.cds.min &&
+              bp <= f.cds.max &&
+              (featureID === undefined ||
+                !self.filteredTranscripts.includes(featureID))
+            )
+          })
+        }
+        if (!foundFeature) {
+          return mousePosition
+        }
+        const { feature, cds } = foundFeature
+        const { topLevelFeature } = feature
+        const glyph = self.getGlyph(feature)
+        return {
+          ...mousePosition,
+          featureAndGlyphUnderMouse: { cds, feature, topLevelFeature, glyph },
+        }
+      },
+    }))
+    .actions((self) => ({
+      continueDrag(mousePosition: MousePosition, event: CanvasMouseEvent) {
+        if (!self.apolloDragging) {
+          throw new Error(
+            'continueDrag() called with no current drag in progress',
+          )
+        }
+        event.stopPropagation()
+        self.apolloDragging = { ...self.apolloDragging, current: mousePosition }
+      },
+      setDragging(dragInfo?: typeof self.apolloDragging) {
+        self.apolloDragging = dragInfo ?? null
+      },
+    }))
+    .actions((self) => ({
+      setApolloHover(n?: (typeof self)['apolloHover']) {
+        self.apolloHover = n
+      },
+      setCursor(cursor?: CSSProperties['cursor']) {
+        if (self.cursor !== cursor) {
+          self.cursor = cursor
+        }
+      },
+      updateFilteredTranscripts(forms: string[]): void {
+        self.filteredTranscripts = cast(forms)
+      },
+    }))
+    .actions(() => ({
+      // onClick(event: CanvasMouseEvent) {
+      onClick() {
+        // TODO: set the selected feature
+      },
+    }))
+}
+
+export function mouseEventsModelFactory(
+  pluginManager: PluginManager,
+  configSchema: AnyConfigurationSchemaType,
+) {
+  const LinearApolloSixFrameDisplayMouseEvents =
+    mouseEventsModelIntermediateFactory(pluginManager, configSchema)
+
+  return LinearApolloSixFrameDisplayMouseEvents.views((self) => ({
+    contextMenuItems(contextCoord?: Coord): MenuItem[] {
+      const { apolloHover } = self
+      if (!(apolloHover && contextCoord)) {
+        return []
+      }
+      const { topLevelFeature } = apolloHover
+      const glyph = self.getGlyph(topLevelFeature)
+      return glyph.getContextMenuItems(self)
+    },
+  }))
+    .actions((self) => ({
+      // explicitly pass in a feature in case it's not the same as the one in
+      // mousePosition (e.g. if features are drawn overlapping).
+      startDrag(
+        mousePosition: MousePositionWithFeatureAndGlyph,
+        feature: AnnotationFeature,
+        edge: Edge,
+        shrinkParent = false,
+      ) {
+        self.apolloDragging = {
+          start: mousePosition,
+          current: mousePosition,
+          feature,
+          edge,
+          shrinkParent,
+        }
+      },
+      endDrag() {
+        if (!self.apolloDragging) {
+          throw new Error('endDrag() called with no current drag in progress')
+        }
+        const { current, edge, feature, start, shrinkParent } =
+          self.apolloDragging
+        // don't do anything if it was only dragged a tiny bit
+        if (Math.abs(current.x - start.x) <= 4) {
+          self.setDragging()
+          self.setCursor()
+          return
+        }
+        const { displayedRegions } = self.lgv
+        const region = displayedRegions[start.regionNumber]
+        const assembly = self.getAssemblyId(region.assemblyName)
+        const changes = getPropagatedLocationChanges(
+          feature,
+          current.bp,
+          edge,
+          shrinkParent,
+        )
+
+        const change: LocationEndChange | LocationStartChange =
+          edge === 'max'
+            ? new LocationEndChange({
+                typeName: 'LocationEndChange',
+                changedIds: changes.map((c) => c.featureId),
+                changes: changes.map((c) => ({
+                  featureId: c.featureId,
+                  oldEnd: c.oldLocation,
+                  newEnd: c.newLocation,
+                })),
+                assembly,
+              })
+            : new LocationStartChange({
+                typeName: 'LocationStartChange',
+                changedIds: changes.map((c) => c.featureId),
+                changes: changes.map((c) => ({
+                  featureId: c.featureId,
+                  oldStart: c.oldLocation,
+                  newStart: c.newLocation,
+                })),
+                assembly,
+              })
+        void self.changeManager.submit(change)
+        self.setDragging()
+        self.setCursor()
+      },
+    }))
+    .actions((self) => ({
+      onMouseDown(event: CanvasMouseEvent) {
+        const mousePosition = self.getMousePosition(event)
+        if (isMousePositionWithFeatureAndGlyph(mousePosition)) {
+          mousePosition.featureAndGlyphUnderMouse.glyph.onMouseDown(
+            self,
+            mousePosition,
+            event,
+          )
+        }
+      },
+      onMouseMove(event: CanvasMouseEvent) {
+        const mousePosition = self.getMousePosition(event)
+        if (self.apolloDragging) {
+          self.setCursor('col-resize')
+          self.continueDrag(mousePosition, event)
+          return
+        }
+        if (isMousePositionWithFeatureAndGlyph(mousePosition)) {
+          mousePosition.featureAndGlyphUnderMouse.glyph.onMouseMove(
+            self,
+            mousePosition,
+            event,
+          )
+        } else {
+          self.setApolloHover()
+          self.setCursor()
+        }
+      },
+      onMouseLeave(event: CanvasMouseEvent) {
+        self.setDragging()
+        self.setApolloHover()
+
+        const mousePosition = self.getMousePosition(event)
+        if (isMousePositionWithFeatureAndGlyph(mousePosition)) {
+          mousePosition.featureAndGlyphUnderMouse.glyph.onMouseLeave(
+            self,
+            mousePosition,
+            event,
+          )
+        }
+      },
+      onMouseUp(event: CanvasMouseEvent) {
+        const mousePosition = self.getMousePosition(event)
+        if (isMousePositionWithFeatureAndGlyph(mousePosition)) {
+          mousePosition.featureAndGlyphUnderMouse.glyph.onMouseUp(
+            self,
+            mousePosition,
+            event,
+          )
+        } else {
+          self.setSelectedFeature()
+        }
+
+        if (self.apolloDragging) {
+          self.endDrag()
+        }
+      },
+    }))
+    .actions((self) => ({
+      afterAttach() {
+        addDisposer(
+          self,
+          autorun(
+            () => {
+              // This type is wrong in @jbrowse/core
+              // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+              if (!self.lgv.initialized || self.regionCannotBeRendered()) {
+                return
+              }
+              const ctx = self.overlayCanvas?.getContext('2d')
+              if (!ctx) {
+                return
+              }
+              ctx.clearRect(
+                0,
+                0,
+                self.lgv.dynamicBlocks.totalWidthPx,
+                self.featuresHeight,
+              )
+
+              const { apolloDragging, apolloHover } = self
+              if (!apolloHover) {
+                return
+              }
+              const { glyph } = apolloHover
+
+              // draw mouseover hovers
+              glyph.drawHover(self, ctx)
+
+              // draw tooltip on hover
+              glyph.drawTooltip(self, ctx)
+
+              // dragging previews
+              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 = self.getGlyph(
+                  apolloDragging.feature.topLevelFeature,
+                )
+                glyph.drawDragPreview(self, ctx)
+              }
+            },
+            { name: 'LinearApolloSixFrameDisplayRenderMouseoverAndDrag' },
+          ),
+        )
+      },
+    }))
+}
+
+export type LinearApolloSixFrameDisplayMouseEventsModel = ReturnType<
+  typeof mouseEventsModelIntermediateFactory
+>
+// 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 LinearApolloSixFrameDisplayMouseEvents
+  extends Instance<LinearApolloSixFrameDisplayMouseEventsModel> {}

package/src/LinearApolloSixFrameDisplay/stateModel/rendering.ts

@@ -0,0 +1,201 @@
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
+import type PluginManager from '@jbrowse/core/PluginManager'
+import { type AnyConfigurationSchemaType } from '@jbrowse/core/configuration/configurationSchema'
+import { doesIntersect2 } from '@jbrowse/core/util'
+import { type Theme } from '@mui/material'
+import { autorun } from 'mobx'
+import { type Instance, addDisposer, types } from 'mobx-state-tree'
+
+import { type ApolloSessionModel } from '../../session'
+
+import { layoutsModelFactory } from './layouts'
+
+export function renderingModelIntermediateFactory(
+  pluginManager: PluginManager,
+  configSchema: AnyConfigurationSchemaType,
+) {
+  const LinearApolloSixFrameDisplayLayouts = layoutsModelFactory(
+    pluginManager,
+    configSchema,
+  )
+
+  return LinearApolloSixFrameDisplayLayouts.named(
+    'LinearApolloSixFrameDisplayRendering',
+  )
+    .props({
+      sequenceRowHeight: 15,
+      apolloRowHeight: 20,
+      detailsMinHeight: 200,
+      detailsHeight: 200,
+      lastRowTooltipBufferHeight: 80,
+      isShown: true,
+      filteredTranscripts: types.array(types.string),
+    })
+    .volatile(() => ({
+      canvas: null as HTMLCanvasElement | null,
+      overlayCanvas: null as HTMLCanvasElement | null,
+      collaboratorCanvas: null as HTMLCanvasElement | null,
+      theme: undefined as Theme | undefined,
+    }))
+    .views((self) => ({
+      get featuresHeight() {
+        const featureLabelSpacer = self.showFeatureLabels ? 2 : 1
+        return (
+          featureLabelSpacer * ((self.highestRow + 1) * self.apolloRowHeight) +
+          self.lastRowTooltipBufferHeight
+        )
+      },
+    }))
+    .actions((self) => ({
+      toggleShown() {
+        self.isShown = !self.isShown
+      },
+      setDetailsHeight(newHeight: number) {
+        self.detailsHeight = self.isShown
+          ? Math.max(
+              Math.min(newHeight, self.height - 100),
+              Math.min(self.height, self.detailsMinHeight),
+            )
+          : newHeight
+      },
+      setCanvas(canvas: HTMLCanvasElement | null) {
+        self.canvas = canvas
+      },
+      setOverlayCanvas(canvas: HTMLCanvasElement | null) {
+        self.overlayCanvas = canvas
+      },
+      setCollaboratorCanvas(canvas: HTMLCanvasElement | null) {
+        self.collaboratorCanvas = canvas
+      },
+      setTheme(theme: Theme) {
+        self.theme = theme
+      },
+      afterAttach() {
+        addDisposer(
+          self,
+          autorun(
+            () => {
+              if (!self.lgv.initialized || self.regionCannotBeRendered()) {
+                return
+              }
+              const ctx = self.collaboratorCanvas?.getContext('2d')
+              if (!ctx) {
+                return
+              }
+              ctx.clearRect(
+                0,
+                0,
+                self.lgv.dynamicBlocks.totalWidthPx,
+                self.featuresHeight,
+              )
+              for (const collaborator of (
+                self.session as unknown as ApolloSessionModel
+              ).collaborators) {
+                const { locations } = collaborator
+                if (locations.length === 0) {
+                  continue
+                }
+                let idx = 0
+                for (const displayedRegion of self.lgv.displayedRegions) {
+                  for (const location of locations) {
+                    if (location.refSeq !== displayedRegion.refName) {
+                      continue
+                    }
+                    const { end, refSeq, start } = location
+                    const locationStartPxInfo = self.lgv.bpToPx({
+                      refName: refSeq,
+                      coord: start,
+                      regionNumber: idx,
+                    })
+                    if (!locationStartPxInfo) {
+                      continue
+                    }
+                    const locationStartPx =
+                      locationStartPxInfo.offsetPx - self.lgv.offsetPx
+                    const locationWidthPx = (end - start) / self.lgv.bpPerPx
+                    ctx.fillStyle = 'rgba(0,255,0,.2)'
+                    ctx.fillRect(locationStartPx, 1, locationWidthPx, 100)
+                    ctx.fillStyle = 'black'
+                    ctx.fillText(
+                      collaborator.name,
+                      locationStartPx + 1,
+                      11,
+                      locationWidthPx - 2,
+                    )
+                  }
+                  idx++
+                }
+              }
+            },
+            { name: 'LinearApolloSixFrameDisplayRenderCollaborators' },
+          ),
+        )
+      },
+    }))
+}
+
+export function renderingModelFactory(
+  pluginManager: PluginManager,
+  configSchema: AnyConfigurationSchemaType,
+) {
+  const LinearApolloSixFrameDisplayRendering =
+    renderingModelIntermediateFactory(pluginManager, configSchema)
+
+  return LinearApolloSixFrameDisplayRendering.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 { feature } of featureLayoutRow) {
+                  if (!feature.looksLikeGene) {
+                    continue
+                  }
+                  if (
+                    !doesIntersect2(
+                      displayedRegion.start,
+                      displayedRegion.end,
+                      feature.min,
+                      feature.max,
+                    )
+                  ) {
+                    continue
+                  }
+                  const { topLevelFeature } = feature
+                  const glyph = self.getGlyph(topLevelFeature)
+                  if (glyph !== undefined) {
+                    glyph.draw(ctx, topLevelFeature, row, self, idx)
+                  }
+                }
+              }
+            }
+          },
+          { name: 'LinearApolloSixFrameDisplayRenderFeatures' },
+        ),
+      )
+    },
+  }))
+}
+
+export type LinearApolloSixFrameDisplayRenderingModel = ReturnType<
+  typeof renderingModelIntermediateFactory
+>
+// 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 LinearApolloSixFrameDisplayRendering
+  extends Instance<LinearApolloSixFrameDisplayRenderingModel> {}

package/src/LinearApolloSixFrameDisplay/types.ts

@@ -0,0 +1 @@
+export type CanvasMouseEvent = React.MouseEvent<HTMLCanvasElement>

package/src/OntologyManager/OntologyStore/fulltext.test.ts

@@ -6,7 +6,7 @@ import {
   extractWords,
   getWords,
 } from './fulltext'
-import { OntologyDBNode } from './indexeddb-schema'
+import { type OntologyDBNode } from './indexeddb-schema'
 
 const testNode: OntologyDBNode = {
   id: 'http://purl.obolibrary.org/obo/SO_0000001',

package/src/OntologyManager/OntologyStore/fulltext.ts

@@ -5,11 +5,16 @@
 import { checkAbortSignal } from '@jbrowse/core/util/aborting'
 import jsonpath from 'jsonpath'
 
+import { type TextIndexFieldDefinition } from '..'
+
 import { stopwords } from './fulltext-stopwords'
-import { OntologyDBNode } from './indexeddb-schema'
+import { type OntologyDBNode } from './indexeddb-schema'
 import { applyPrefixes } from './prefixes'
-import OntologyStore, { Transaction } from '.'
-import { TextIndexFieldDefinition } from '..'
+
+// eslint-disable-next-line import/no-duplicates
+import type OntologyStore from '.'
+// eslint-disable-next-line import/no-duplicates
+import { type Transaction } from '.'
 
 /** special value of jsonPath that gets the IRI (that is, ID) of the node with the configured prefixes applied */
 export const PREFIXED_ID_PATH = '$PREFIXED_ID'

package/src/OntologyManager/OntologyStore/index.test.ts

@@ -4,8 +4,9 @@ import path from 'node:path'
 
 import { beforeAll, describe, expect, it, jest } from '@jest/globals'
 
+import { type OntologyClass, isOntologyClass } from '..'
+
 import OntologyStore from '.'
-import { OntologyClass, isOntologyClass } from '..'
 
 jest.setTimeout(1_000_000_000)
 
@@ -19,6 +20,7 @@ const prefixes = new Map([
 // different "Object". This intercepts calls to "query" in this test and makes
 // sure the main scope "Object" is used.
 jest.mock('jsonpath', () => {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-imports
   const original = jest.requireActual<typeof import('jsonpath')>('jsonpath')
   return {
     ...original,

package/src/OntologyManager/OntologyStore/index.ts

@@ -2,34 +2,39 @@
 
 /* eslint-disable unicorn/no-await-expression-member */
 import {
-  BlobLocation,
-  LocalPathLocation,
-  UriLocation,
+  type BlobLocation,
+  type LocalPathLocation,
+  type UriLocation,
   isLocalPathLocation,
   isUriLocation,
 } from '@jbrowse/core/util'
 import {
+  type IDBPTransaction,
+  type IndexNames,
+  type StoreNames,
   deleteDB,
-  IDBPTransaction,
-  IndexNames,
-  StoreNames,
 } from 'idb/with-async-ittr'
 
+import {
+  type OntologyClass,
+  type OntologyProperty,
+  type OntologyTerm,
+  isOntologyClass,
+  isOntologyProperty,
+} from '..'
+
 import { textSearch } from './fulltext'
-import { OntologyDB, OntologyDBEdge, isDeprecated } from './indexeddb-schema'
+import {
+  type OntologyDB,
+  type OntologyDBEdge,
+  isDeprecated,
+} from './indexeddb-schema'
 import {
   getTextIndexFields,
   isDatabaseCurrent,
   loadOboGraphJson,
   openDatabase,
 } from './indexeddb-storage'
-import {
-  OntologyClass,
-  OntologyProperty,
-  OntologyTerm,
-  isOntologyClass,
-  isOntologyProperty,
-} from '..'
 
 export type SourceLocation = UriLocation | LocalPathLocation | BlobLocation
 

package/src/OntologyManager/OntologyStore/indexeddb-schema.ts

@@ -1,12 +1,13 @@
 /** schema types used to strongly-type using the `idb` type system */
-import { DBSchema } from 'idb/with-async-ittr'
+import { type DBSchema } from 'idb/with-async-ittr'
 
 import {
-  Edge as OboGraphEdge,
-  Meta as OboGraphMeta,
-  Node as OboGraphNode,
+  type Edge as OboGraphEdge,
+  type Meta as OboGraphMeta,
+  type Node as OboGraphNode,
 } from './obo-graph-json-schema'
-import { OntologyStoreOptions, SourceLocation } from '.'
+
+import { type OntologyStoreOptions, type SourceLocation } from '.'
 
 /** metadata about this IndexedDB ontology database */
 export interface Meta {