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

package/src/components/MergeExons.tsx

@@ -0,0 +1,193 @@
+/* eslint-disable @typescript-eslint/unbound-method */
+
+import { type AnnotationFeature } from '@apollo-annotation/mst'
+import { MergeExonsChange } from '@apollo-annotation/shared'
+import {
+  Box,
+  Button,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  FormControl,
+  FormControlLabel,
+  Radio,
+  RadioGroup,
+  type SelectChangeEvent,
+} from '@mui/material'
+import { getSnapshot } from 'mobx-state-tree'
+import React, { useState } from 'react'
+
+import { type ChangeManager } from '../ChangeManager'
+import { type ApolloSessionModel } from '../session'
+
+import { Dialog } from './Dialog'
+
+interface MergeExonsProps {
+  session: ApolloSessionModel
+  handleClose(): void
+  sourceFeature: AnnotationFeature
+  sourceAssemblyId: string
+  changeManager: ChangeManager
+  selectedFeature?: AnnotationFeature
+  setSelectedFeature(feature?: AnnotationFeature): void
+}
+
+function getNeighboringExons(
+  referenceExon: AnnotationFeature,
+): Record<string, AnnotationFeature> {
+  const neighboringExons: Record<string, AnnotationFeature> = {}
+  const tx = referenceExon.parent
+  if (!tx) {
+    throw new Error('Unable to find parent of reference exon')
+  }
+  let exons: AnnotationFeature[] = []
+  if (tx.children) {
+    for (const [, feature] of tx.children) {
+      if (feature.type === 'exon') {
+        exons.push(feature)
+      }
+    }
+  }
+  exons = exons.sort((a, b) => {
+    if (a.min === b.min) {
+      return a.max - b.max
+    }
+    return a.min - b.min
+  })
+  if (tx.strand && tx.strand === -1) {
+    exons = exons.reverse()
+  }
+  let i = 0
+  for (const x of exons) {
+    if (x._id === referenceExon._id) {
+      if (exons.length > i + 1) {
+        neighboringExons.three_prime = exons[i + 1]
+      }
+      if (i > 0) {
+        neighboringExons.five_prime = exons[i - 1]
+      }
+      break
+    }
+    i++
+  }
+  return neighboringExons
+}
+
+function makeRadioButtonName(
+  key: string,
+  neighboringExons: Record<string, AnnotationFeature>,
+): string {
+  const neighboringExon = neighboringExons[key]
+  let name
+  if (key === 'three_prime') {
+    name = `3'end (coords: ${neighboringExon.min + 1}-${neighboringExon.max})`
+  } else if (key === 'five_prime') {
+    name = `5'end (coords: ${neighboringExon.min + 1}-${neighboringExon.max})`
+  } else {
+    throw new Error(`Unexpected direction: "${key}"`)
+  }
+  return name
+}
+
+export function MergeExons({
+  changeManager,
+  handleClose,
+  selectedFeature,
+  setSelectedFeature,
+  sourceAssemblyId,
+  sourceFeature,
+}: MergeExonsProps) {
+  const [errorMessage, setErrorMessage] = useState('')
+  const [selectedExon, setSelectedExon] = useState<AnnotationFeature>()
+
+  function onSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    setErrorMessage('')
+    const { parent } = sourceFeature
+    if (!(selectedExon && parent)) {
+      return
+    }
+    if (selectedFeature?._id === sourceFeature._id) {
+      setSelectedFeature()
+    }
+    const change = new MergeExonsChange({
+      changedIds: [sourceFeature._id],
+      typeName: 'MergeExonsChange',
+      assembly: sourceAssemblyId,
+      firstExon: getSnapshot(sourceFeature),
+      secondExon: getSnapshot(selectedExon),
+      parentFeatureId: parent._id,
+    })
+    void changeManager.submit(change)
+    handleClose()
+    event.preventDefault()
+  }
+
+  const handleTypeChange = (e: SelectChangeEvent) => {
+    setErrorMessage('')
+    const { value } = e.target
+    setSelectedExon(neighboringExons[value])
+  }
+
+  const neighboringExons = getNeighboringExons(sourceFeature)
+
+  return (
+    <Dialog
+      open
+      title="Merge exons"
+      handleClose={handleClose}
+      maxWidth={false}
+      data-testid="merge-exons"
+    >
+      <form onSubmit={onSubmit}>
+        <DialogContent style={{ display: 'flex', flexDirection: 'column' }}>
+          {Object.keys(neighboringExons).length === 0
+            ? 'There are no neighbouring exons to merge with'
+            : 'Merge with exon on:'}
+          <FormControl style={{ marginTop: 5 }}>
+            <RadioGroup
+              aria-labelledby="demo-radio-buttons-group-label"
+              name="radio-buttons-group"
+              value={selectedExon}
+              onChange={handleTypeChange}
+            >
+              {Object.keys(neighboringExons).map((key) => (
+                <FormControlLabel
+                  value={key}
+                  key={key}
+                  control={<Radio />}
+                  label={
+                    <Box display="flex" alignItems="center">
+                      {makeRadioButtonName(key, neighboringExons)}
+                    </Box>
+                  }
+                />
+              ))}
+            </RadioGroup>
+          </FormControl>
+        </DialogContent>
+
+        <DialogActions>
+          <Button
+            variant="contained"
+            type="submit"
+            disabled={
+              Object.keys(neighboringExons).length === 0 ||
+              selectedExon === undefined
+            }
+          >
+            Submit
+          </Button>
+          <Button variant="outlined" type="submit" onClick={handleClose}>
+            Cancel
+          </Button>
+        </DialogActions>
+      </form>
+      {errorMessage ? (
+        <DialogContent>
+          <DialogContentText color="error">{errorMessage}</DialogContentText>
+        </DialogContent>
+      ) : null}
+    </Dialog>
+  )
+}

package/src/components/MergeTranscripts.tsx

@@ -0,0 +1,185 @@
+/* eslint-disable @typescript-eslint/unbound-method */
+/* eslint-disable @typescript-eslint/no-misused-promises */
+import { type AnnotationFeature } from '@apollo-annotation/mst'
+import { MergeTranscriptsChange } from '@apollo-annotation/shared'
+import { type AbstractSessionModel } from '@jbrowse/core/util'
+import {
+  Box,
+  Button,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  FormControl,
+  FormControlLabel,
+  Radio,
+  RadioGroup,
+  type SelectChangeEvent,
+} from '@mui/material'
+import { getSnapshot } from 'mobx-state-tree'
+import React, { useState } from 'react'
+
+import { type ChangeManager } from '../ChangeManager'
+import { type ApolloSessionModel } from '../session'
+
+import { Dialog } from './Dialog'
+
+interface MergeTranscriptsProps {
+  session: ApolloSessionModel
+  handleClose(): void
+  sourceFeature: AnnotationFeature
+  sourceAssemblyId: string
+  changeManager: ChangeManager
+  selectedFeature?: AnnotationFeature
+  setSelectedFeature(feature?: AnnotationFeature): void
+}
+
+function getTranscripts(
+  referenceTranscript: AnnotationFeature,
+  session: ApolloSessionModel,
+): Record<string, AnnotationFeature> {
+  const gene = referenceTranscript.parent
+  if (!gene) {
+    throw new Error('Unable to find parent of reference transcript')
+  }
+
+  const { featureTypeOntology } = session.apolloDataStore.ontologyManager
+  if (!featureTypeOntology) {
+    throw new Error('featureTypeOntology is undefined')
+  }
+
+  const transcripts: Record<string, AnnotationFeature> = {}
+  if (gene.children) {
+    for (const [, feature] of gene.children) {
+      if (
+        featureTypeOntology.isTypeOf(feature.type, 'transcript') &&
+        feature._id !== referenceTranscript._id
+      ) {
+        transcripts[feature._id] = feature
+      }
+    }
+  }
+  return transcripts
+}
+
+function makeRadioButtonName(transcript: AnnotationFeature): string {
+  let id
+  if (transcript.attributes.get('gff_name')) {
+    id = transcript.attributes.get('gff_name')?.join(',')
+  } else if (transcript.attributes.get('gff_id')) {
+    id = transcript.attributes.get('gff_id')?.join(',')
+  } else {
+    id = transcript._id
+  }
+  return `${id} [${transcript.min + 1}-${transcript.max}]`
+}
+
+export function MergeTranscripts({
+  changeManager,
+  handleClose,
+  selectedFeature,
+  session,
+  setSelectedFeature,
+  sourceAssemblyId,
+  sourceFeature,
+}: MergeTranscriptsProps) {
+  const { notify } = session as unknown as AbstractSessionModel
+  const [errorMessage, setErrorMessage] = useState('')
+  const [selectedTranscript, setSelectedTranscript] =
+    useState<AnnotationFeature>()
+
+  async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    setErrorMessage('')
+    if (!selectedTranscript) {
+      return
+    }
+    if (selectedFeature?._id === sourceFeature._id) {
+      setSelectedFeature()
+    }
+
+    if (!sourceFeature.parent) {
+      throw new Error('Cannot find parent')
+    }
+
+    const change = new MergeTranscriptsChange({
+      changedIds: [sourceFeature._id],
+      typeName: 'MergeTranscriptsChange',
+      assembly: sourceAssemblyId,
+      firstTranscript: getSnapshot(sourceFeature),
+      secondTranscript: getSnapshot(selectedTranscript),
+      parentFeatureId: sourceFeature.parent._id,
+    })
+    await changeManager.submit(change)
+    notify('Transcripts successfully merged', 'success')
+    handleClose()
+    event.preventDefault()
+  }
+
+  const handleTypeChange = (e: SelectChangeEvent) => {
+    setErrorMessage('')
+    const { value } = e.target
+    setSelectedTranscript(transcripts[value])
+  }
+
+  const transcripts = getTranscripts(sourceFeature, session)
+
+  return (
+    <Dialog
+      open
+      title="Merge transcripts"
+      handleClose={handleClose}
+      maxWidth={false}
+      data-testid="merge-transcripts"
+    >
+      <form onSubmit={onSubmit}>
+        <DialogContent style={{ display: 'flex', flexDirection: 'column' }}>
+          {Object.keys(transcripts).length === 0
+            ? 'There are no transcripts to merge with'
+            : 'Merge with transcript:'}
+          <FormControl style={{ marginTop: 5 }}>
+            <RadioGroup
+              aria-labelledby="demo-radio-buttons-group-label"
+              name="radio-buttons-group"
+              value={selectedTranscript}
+              onChange={handleTypeChange}
+            >
+              {Object.keys(transcripts).map((key) => (
+                <FormControlLabel
+                  value={key}
+                  key={key}
+                  control={<Radio />}
+                  label={
+                    <Box display="flex" alignItems="center">
+                      {makeRadioButtonName(transcripts[key])}
+                    </Box>
+                  }
+                />
+              ))}
+            </RadioGroup>
+          </FormControl>
+        </DialogContent>
+
+        <DialogActions>
+          <Button
+            variant="contained"
+            type="submit"
+            disabled={
+              Object.keys(transcripts).length === 0 ||
+              selectedTranscript === undefined
+            }
+          >
+            Submit
+          </Button>
+          <Button variant="outlined" type="submit" onClick={handleClose}>
+            Cancel
+          </Button>
+        </DialogActions>
+      </form>
+      {errorMessage ? (
+        <DialogContent>
+          <DialogContentText color="error">{errorMessage}</DialogContentText>
+        </DialogContent>
+      ) : null}
+    </Dialog>
+  )
+}

package/src/components/SplitExon.tsx

@@ -0,0 +1,134 @@
+/* eslint-disable @typescript-eslint/unbound-method */
+
+import {
+  type AnnotationFeature,
+  type AnnotationFeatureSnapshot,
+} from '@apollo-annotation/mst'
+import { SplitExonChange } from '@apollo-annotation/shared'
+import {
+  Button,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+} from '@mui/material'
+import ObjectID from 'bson-objectid'
+import { getSnapshot } from 'mobx-state-tree'
+import React, { useState } from 'react'
+
+import { type ChangeManager } from '../ChangeManager'
+import { type ApolloSessionModel } from '../session'
+
+import { Dialog } from './Dialog'
+
+interface SplitExonProps {
+  session: ApolloSessionModel
+  handleClose(): void
+  sourceFeature: AnnotationFeature
+  sourceAssemblyId: string
+  changeManager: ChangeManager
+  selectedFeature?: AnnotationFeature
+  setSelectedFeature(feature?: AnnotationFeature): void
+}
+
+interface splittableExon {
+  isSplittable: boolean
+  comment: string
+}
+
+function exonIsSplittable(
+  exonToBeSplit: AnnotationFeatureSnapshot,
+): splittableExon {
+  if (exonToBeSplit.max - exonToBeSplit.min < 2) {
+    return {
+      isSplittable: false,
+      comment: 'This exon is too short to be split',
+    }
+  }
+  return { isSplittable: true, comment: '' }
+}
+
+function makeDialogText(splitExon: AnnotationFeatureSnapshot): string {
+  const splittable = exonIsSplittable(splitExon)
+  if (splittable.isSplittable) {
+    return 'Are you sure you want to split the selected exon?'
+  }
+  return splittable.comment
+}
+
+export function SplitExon({
+  changeManager,
+  handleClose,
+  selectedFeature,
+  setSelectedFeature,
+  sourceAssemblyId,
+  sourceFeature,
+}: SplitExonProps) {
+  const [errorMessage, setErrorMessage] = useState('')
+
+  const exonToBeSplit = getSnapshot(sourceFeature)
+
+  function onSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    setErrorMessage('')
+    if (selectedFeature?._id === sourceFeature._id) {
+      setSelectedFeature()
+    }
+
+    const midpoint =
+      exonToBeSplit.min + (exonToBeSplit.max - exonToBeSplit.min) / 2
+    const upstreamCut = Math.floor(midpoint)
+    const downstreamCut = Math.ceil(midpoint)
+
+    if (!sourceFeature.parent?._id) {
+      throw new Error('Splitting an exon without parent is not possible yet')
+    }
+
+    const change = new SplitExonChange({
+      changedIds: [sourceFeature._id],
+      typeName: 'SplitExonChange',
+      assembly: sourceAssemblyId,
+      exonToBeSplit,
+      parentFeatureId: sourceFeature.parent._id,
+      upstreamCut,
+      downstreamCut,
+      leftExonId: new ObjectID().toHexString(),
+      rightExonId: new ObjectID().toHexString(),
+    })
+    void changeManager.submit(change)
+    handleClose()
+    event.preventDefault()
+  }
+
+  return (
+    <Dialog
+      open
+      title="Split exon"
+      handleClose={handleClose}
+      maxWidth={false}
+      data-testid="split-exon"
+    >
+      <form onSubmit={onSubmit}>
+        <DialogContent style={{ display: 'flex', flexDirection: 'column' }}>
+          <DialogContentText>{makeDialogText(exonToBeSplit)}</DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button
+            variant="contained"
+            type="submit"
+            disabled={!exonIsSplittable(exonToBeSplit).isSplittable}
+          >
+            Yes
+          </Button>
+          <Button variant="outlined" type="submit" onClick={handleClose}>
+            Cancel
+          </Button>
+        </DialogActions>
+      </form>
+      {errorMessage ? (
+        <DialogContent>
+          <DialogContentText color="error">{errorMessage}</DialogContentText>
+        </DialogContent>
+      ) : null}
+    </Dialog>
+  )
+}

package/src/components/index.ts

@@ -9,7 +9,10 @@ export * from './ImportFeatures'
 export * from './LogOut'
 export * from './ManageChecks'
 export * from './ManageUsers'
+export * from './MergeExons'
+export * from './MergeTranscripts'
 export * from './OpenLocalFile'
 export * from './ViewChangeLog'
 export * from './AddRefSeqAliases'
 export * from './ViewCheckResults'
+export * from './SplitExon'

package/src/config.ts

@@ -10,6 +10,11 @@ const ApolloPluginConfigurationSchema = ConfigurationSchema('ApolloPlugin', {
     type: 'string',
     defaultValue: 'Sequence Ontology',
   },
+  hasRole: {
+    description: 'Flag used internally by jbrowse-plugin-apollo',
+    type: 'boolean',
+    defaultValue: false,
+  },
 })
 
 export default ApolloPluginConfigurationSchema

package/src/extensions/annotationFromJBrowseFeature.ts

@@ -137,6 +137,7 @@ export function annotationFromJBrowseFeature(
         contextMenuItems() {
           const session = getSession(self)
           const assembly = self.getAssembly()
+          const region = self.getFirstRegion()
           const feature = self.contextMenuFeature
           if (!feature) {
             return superContextMenuItems()
@@ -158,6 +159,7 @@ export function annotationFromJBrowseFeature(
                       annotationFeature: self.getAnnotationFeature(assembly),
                       assembly,
                       refSeqId: self.getRefSeqId(assembly),
+                      region,
                     },
                   ],
                 )