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

package/src/util/displayUtils.ts

@@ -0,0 +1,149 @@
+import { type CheckResultIdsType } from '@apollo-annotation/mst'
+import { makeStyles } from 'tss-react/mui'
+
+export { default as EditZoomThresholdDialog } from '../components/EditZoomThresholdDialog'
+
+export type Coord = [number, number]
+
+export const useStyles = makeStyles()((theme) => ({
+  canvasContainer: {
+    position: 'relative',
+    left: 0,
+  },
+  canvas: {
+    position: 'absolute',
+    left: 0,
+  },
+  center: {
+    display: 'flex',
+    justifyContent: 'center',
+  },
+  ellipses: {
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+  },
+  avatar: {
+    position: 'static',
+    height: '100%',
+    width: '100%',
+    overflow: 'visible',
+    color: theme.palette.warning.light,
+    backgroundColor: theme.palette.warning.contrastText,
+  },
+  box: {
+    position: 'absolute',
+    overflow: 'visible',
+  },
+  badge: {
+    display: 'inline-block',
+  },
+  loading: {
+    position: 'absolute',
+    right: theme.spacing(3),
+    zIndex: 10,
+    pointerEvents: 'none',
+    textAlign: 'right',
+  },
+  locked: {
+    position: 'absolute',
+    right: theme.spacing(3),
+    top: theme.spacing(6),
+    zIndex: 1,
+    pointerEvents: 'none',
+    textAlign: 'right',
+  },
+}))
+
+export interface CheckResultCluster<T> {
+  _id: string
+  message: string
+  start: number
+  count: number
+  members: T[]
+  range: { min: number; max: number }
+  featureIds: CheckResultIdsType
+}
+
+export function clusterResultByMessage<
+  T extends {
+    _id: string
+    start: number
+    end: number
+    message: string
+    ids: CheckResultIdsType
+  },
+>(
+  items: readonly T[],
+  width: number,
+  touchesAsOverlap: boolean,
+): CheckResultCluster<T>[] {
+  const byMsg = new Map<string, T[]>()
+  for (const it of items) {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    ;(byMsg.get(it.message) ?? byMsg.set(it.message, []).get(it.message)!).push(
+      it,
+    )
+  }
+
+  const clusters: CheckResultCluster<T>[] = []
+  const overlaps = (aEnd: number, bStart: number) =>
+    touchesAsOverlap ? bStart <= aEnd : bStart < aEnd
+
+  for (const [message, arr] of byMsg.entries()) {
+    if (arr.length === 0) {
+      continue
+    }
+
+    arr.sort((a, b) => a.start - b.start)
+
+    let group: T[] = [arr[0]]
+    let curMin = arr[0].start
+    let curMax = arr[0].start + width
+
+    const pushResult = () => {
+      const starts = group.map((d) => d.start).sort((a, b) => a - b)
+      const mid = Math.floor(starts.length / 2)
+      const median: number =
+        starts.length % 2 ? starts[mid] : (starts[mid - 1] + starts[mid]) / 2
+      const clusterId = group[0]._id
+      const featureIds = group[0].ids
+
+      clusters.push({
+        _id: clusterId,
+        message,
+        start: median,
+        count: group.length,
+        members: [...group],
+        range: { min: curMin, max: curMax },
+        featureIds,
+      })
+    }
+
+    for (let i = 1; i < arr.length; i++) {
+      const it = arr[i]
+      const itStart = it.start
+      const itEnd = itStart + width
+
+      if (overlaps(curMax, itStart)) {
+        group.push(it)
+        if (itStart < curMin) {
+          curMin = itStart
+        }
+        if (itEnd > curMax) {
+          curMax = itEnd
+        }
+      } else {
+        pushResult()
+        group = [it]
+        curMin = itStart
+        curMax = itEnd
+      }
+    }
+    pushResult()
+  }
+
+  clusters.sort(
+    (a, b) => a.message.localeCompare(b.message) || a.start - b.start,
+  )
+  return clusters
+}

package/src/util/glyphUtils.ts

@@ -2,7 +2,192 @@ import {
   type AnnotationFeature,
   type TranscriptPartCoding,
 } from '@apollo-annotation/mst'
+import { type BaseDisplayModel } from '@jbrowse/core/pluggableElementTypes'
+import { type MenuItem } from '@jbrowse/core/ui'
+import {
+  type AbstractSessionModel,
+  getContainingView,
+} from '@jbrowse/core/util'
 import { type LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+import SkipNextRoundedIcon from '@mui/icons-material/SkipNextRounded'
+import SkipPreviousRoundedIcon from '@mui/icons-material/SkipPreviousRounded'
+
+import { type LinearApolloDisplayMouseEvents } from '../LinearApolloDisplay/stateModel/mouseEvents'
+import { type LinearApolloSixFrameDisplayMouseEvents } from '../LinearApolloSixFrameDisplay/stateModel/mouseEvents'
+import { AddChildFeature, CopyFeature, DeleteFeature } from '../components'
+import { type ApolloSessionModel } from '../session'
+
+import { type MousePositionWithFeature } from '.'
+
+type NavLocation = Parameters<LinearGenomeViewModel['navTo']>[0]
+
+export function selectFeatureAndOpenWidget(
+  stateModel:
+    | LinearApolloDisplayMouseEvents
+    | LinearApolloSixFrameDisplayMouseEvents,
+  feature: AnnotationFeature,
+) {
+  if (stateModel.apolloDragging) {
+    return
+  }
+  stateModel.setSelectedFeature(feature)
+  const { session } = stateModel
+  const { apolloDataStore } = session
+  const { featureTypeOntology } = apolloDataStore.ontologyManager
+  if (!featureTypeOntology) {
+    throw new Error('featureTypeOntology is undefined')
+  }
+
+  let containsCDSOrExon = false
+  for (const [, child] of feature.children ?? []) {
+    if (
+      featureTypeOntology.isTypeOf(child.type, 'CDS') ||
+      featureTypeOntology.isTypeOf(child.type, 'exon')
+    ) {
+      containsCDSOrExon = true
+      break
+    }
+  }
+  if (
+    (featureTypeOntology.isTypeOf(feature.type, 'transcript') ||
+      featureTypeOntology.isTypeOf(feature.type, 'pseudogenic_transcript')) &&
+    containsCDSOrExon
+  ) {
+    stateModel.showFeatureDetailsWidget(feature, [
+      'ApolloTranscriptDetails',
+      'apolloTranscriptDetails',
+    ])
+  } else {
+    stateModel.showFeatureDetailsWidget(feature)
+  }
+}
+
+export function isTranscriptFeature(
+  feature: AnnotationFeature,
+  session: ApolloSessionModel,
+): boolean {
+  const { featureTypeOntology } = session.apolloDataStore.ontologyManager
+  if (!featureTypeOntology) {
+    throw new Error('featureTypeOntology is undefined')
+  }
+  return (
+    featureTypeOntology.isTypeOf(feature.type, 'transcript') ||
+    featureTypeOntology.isTypeOf(feature.type, 'pseudogenic_transcript')
+  )
+}
+
+export function isExonFeature(
+  feature: AnnotationFeature,
+  session: ApolloSessionModel,
+): boolean {
+  const { featureTypeOntology } = session.apolloDataStore.ontologyManager
+  if (!featureTypeOntology) {
+    throw new Error('featureTypeOntology is undefined')
+  }
+  return featureTypeOntology.isTypeOf(feature.type, 'exon')
+}
+
+export function isCDSFeature(
+  feature: AnnotationFeature,
+  session: ApolloSessionModel,
+): boolean {
+  const { featureTypeOntology } = session.apolloDataStore.ontologyManager
+  if (!featureTypeOntology) {
+    throw new Error('featureTypeOntology is undefined')
+  }
+  return featureTypeOntology.isTypeOf(feature.type, 'CDS')
+}
+
+export interface AdjacentExons {
+  upstream: AnnotationFeature | undefined
+  downstream: AnnotationFeature | undefined
+}
+
+export function getAdjacentExons(
+  currentExon: AnnotationFeature,
+  display:
+    | LinearApolloDisplayMouseEvents
+    | LinearApolloSixFrameDisplayMouseEvents,
+  mousePosition: MousePositionWithFeature,
+  session: ApolloSessionModel,
+): AdjacentExons {
+  const lgv = getContainingView(
+    display as BaseDisplayModel,
+  ) as unknown as LinearGenomeViewModel
+
+  // Genomic coords of current view
+  const viewGenomicLeft = mousePosition.bp - lgv.bpPerPx * mousePosition.x
+  const viewGenomicRight = viewGenomicLeft + lgv.coarseTotalBp
+  if (!currentExon.parent) {
+    return { upstream: undefined, downstream: undefined }
+  }
+  const transcript = currentExon.parent
+  if (!transcript.children) {
+    throw new Error(`Error getting children of ${transcript._id}`)
+  }
+  const { featureTypeOntology } = session.apolloDataStore.ontologyManager
+  if (!featureTypeOntology) {
+    throw new Error('featureTypeOntology is undefined')
+  }
+
+  let exons = []
+  for (const [, child] of transcript.children) {
+    if (featureTypeOntology.isTypeOf(child.type, 'exon')) {
+      exons.push(child)
+    }
+  }
+  const adjacentExons: AdjacentExons = {
+    upstream: undefined,
+    downstream: undefined,
+  }
+  exons = exons.sort((a, b) => (a.min < b.min ? -1 : 1))
+  for (const exon of exons) {
+    if (exon.min > viewGenomicRight) {
+      adjacentExons.downstream = exon
+      break
+    }
+  }
+  exons = exons.sort((a, b) => (a.min > b.min ? -1 : 1))
+  for (const exon of exons) {
+    if (exon.max < viewGenomicLeft) {
+      adjacentExons.upstream = exon
+      break
+    }
+  }
+  if (transcript.strand === -1) {
+    const newUpstream = adjacentExons.downstream
+    adjacentExons.downstream = adjacentExons.upstream
+    adjacentExons.upstream = newUpstream
+  }
+  return adjacentExons
+}
+
+export function getStreamIcon(
+  strand: 1 | -1 | undefined,
+  isUpstream: boolean,
+  isFlipped: boolean | undefined,
+) {
+  // This is the icon you would use for strand=1, downstream, straight
+  // (non-flipped) view
+  let icon = SkipNextRoundedIcon
+
+  if (strand === -1) {
+    icon = SkipPreviousRoundedIcon
+  }
+  if (isUpstream) {
+    icon =
+      icon === SkipPreviousRoundedIcon
+        ? SkipNextRoundedIcon
+        : SkipPreviousRoundedIcon
+  }
+  if (isFlipped) {
+    icon =
+      icon === SkipPreviousRoundedIcon
+        ? SkipNextRoundedIcon
+        : SkipPreviousRoundedIcon
+  }
+  return icon
+}
 
 export function getMinAndMaxPx(
   feature: AnnotationFeature | TranscriptPartCoding,
@@ -47,3 +232,147 @@ export function getOverlappingEdge(
   }
   return
 }
+
+export function isSelectedFeature(
+  feature: AnnotationFeature,
+  selectedFeature: AnnotationFeature | undefined,
+) {
+  return Boolean(selectedFeature && feature._id === selectedFeature._id)
+}
+
+export function containsSelectedFeature(
+  feature: AnnotationFeature,
+  selectedFeature: AnnotationFeature | undefined,
+): boolean {
+  if (!selectedFeature) {
+    return false
+  }
+  if (feature._id === selectedFeature._id) {
+    return true
+  }
+  return feature.hasDescendant(selectedFeature._id)
+}
+
+function makeFeatureLabel(feature: AnnotationFeature) {
+  let name: string | undefined
+  if (feature.attributes.get('gff_name')) {
+    name = feature.attributes.get('gff_name')?.join(',')
+  } else if (feature.attributes.get('gff_id')) {
+    name = feature.attributes.get('gff_id')?.join(',')
+  } else {
+    name = feature._id
+  }
+  const coords = `(${(feature.min + 1).toLocaleString('en')}..${feature.max.toLocaleString('en')})`
+  const maxLen = 60
+  if (name && name.length + coords.length > maxLen + 5) {
+    const trim = maxLen - coords.length
+    name = trim > 0 ? name.slice(0, trim) : ''
+    name = `${name}[...]`
+  }
+  return `${name} ${coords}`
+}
+
+export function getContextMenuItemsForFeature(
+  display:
+    | LinearApolloSixFrameDisplayMouseEvents
+    | LinearApolloDisplayMouseEvents,
+  sourceFeature: AnnotationFeature,
+): MenuItem[] {
+  const {
+    apolloInternetAccount: internetAccount,
+    changeManager,
+    regions,
+    selectedFeature,
+    session,
+  } = display
+  const menuItems: MenuItem[] = []
+  const role = internetAccount ? internetAccount.role : 'admin'
+  const admin = role === 'admin'
+  const readOnly = !(role && ['admin', 'user'].includes(role))
+  const [region] = regions
+  const sourceAssemblyId = display.getAssemblyId(region.assemblyName)
+  const currentAssemblyId = display.getAssemblyId(region.assemblyName)
+  menuItems.push(
+    {
+      label: makeFeatureLabel(sourceFeature),
+      type: 'subHeader',
+    },
+    {
+      label: 'Add child feature',
+      disabled: readOnly,
+      onClick: () => {
+        ;(session as unknown as AbstractSessionModel).queueDialog(
+          (doneCallback) => [
+            AddChildFeature,
+            {
+              session,
+              handleClose: () => {
+                doneCallback()
+              },
+              changeManager,
+              sourceFeature,
+              sourceAssemblyId,
+              internetAccount,
+            },
+          ],
+        )
+      },
+    },
+    {
+      label: 'Copy features and annotations',
+      disabled: readOnly,
+      onClick: () => {
+        ;(session as unknown as AbstractSessionModel).queueDialog(
+          (doneCallback) => [
+            CopyFeature,
+            {
+              session,
+              handleClose: () => {
+                doneCallback()
+              },
+              changeManager,
+              sourceFeature,
+              sourceAssemblyId: currentAssemblyId,
+            },
+          ],
+        )
+      },
+    },
+    {
+      label: 'Delete feature',
+      disabled: !admin,
+      onClick: () => {
+        ;(session as unknown as AbstractSessionModel).queueDialog(
+          (doneCallback) => [
+            DeleteFeature,
+            {
+              session,
+              handleClose: () => {
+                doneCallback()
+              },
+              changeManager,
+              sourceFeature,
+              sourceAssemblyId: currentAssemblyId,
+              selectedFeature,
+              setSelectedFeature: (feature?: AnnotationFeature) => {
+                display.setSelectedFeature(feature)
+              },
+            },
+          ],
+        )
+      },
+    },
+  )
+  return menuItems
+}
+
+export function navToFeatureCenter(
+  feature: AnnotationFeature,
+  paddingPct: number,
+  refSeqLength: number,
+): NavLocation {
+  const paddingBp = (feature.max - feature.min) * paddingPct
+  const start = Math.max(feature.min - paddingBp, 1)
+  const end = Math.min(feature.max + paddingBp, refSeqLength)
+  return { refName: feature.refSeq, start, end }
+}

package/src/util/loadAssemblyIntoClient.ts

@@ -4,10 +4,11 @@ import {
   type CheckResultSnapshot,
 } from '@apollo-annotation/mst'
 import { gff3ToAnnotationFeature } from '@apollo-annotation/shared'
-import gff, {
+import {
   type GFF3Comment,
   type GFF3Feature,
   type GFF3Sequence,
+  parseStringSync,
 } from '@gmod/gff'
 import { getSnapshot } from 'mobx-state-tree'
 
@@ -17,7 +18,7 @@ export async function loadAssemblyIntoClient(
   apolloDataStore: ClientDataStore,
 ) {
   const featuresAndSequences: (GFF3Feature | GFF3Sequence | GFF3Comment)[] =
-    gff.parseStringSync(gff3FileText, {
+    parseStringSync(gff3FileText, {
       parseSequences: true,
       parseComments: true,
       parseDirectives: false,

package/src/util/mouseEventsUtils.ts

@@ -1,4 +1,5 @@
 import { type AnnotationFeature } from '@apollo-annotation/mst'
+import { type LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 
 type MinEdge = 'min'
 type MaxEdge = 'max'
@@ -111,3 +112,34 @@ export function getPropagatedLocationChanges(
   }
   return expandFeatures(feature, newLocation, edge)
 }
+
+/** 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
+  feature?: AnnotationFeature
+}
+
+export type MousePositionWithFeature = Required<MousePosition>
+
+export function isMousePositionWithFeature(
+  mousePosition: MousePosition,
+): mousePosition is MousePositionWithFeature {
+  return 'feature' in mousePosition
+}
+
+export function getMousePosition(
+  event: React.MouseEvent,
+  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 }
+}