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

package/src/components/ManageChecks.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/use-unknown-in-catch-callback-variable */
 /* eslint-disable @typescript-eslint/unbound-method */
 /* eslint-disable @typescript-eslint/no-misused-promises */
-import { Assembly } from '@jbrowse/core/assemblyManager/assembly'
-import { AbstractSessionModel } from '@jbrowse/core/util'
+import { type Assembly } from '@jbrowse/core/assemblyManager/assembly'
+import { type AbstractSessionModel } from '@jbrowse/core/util'
 import {
   Button,
   Checkbox,
@@ -12,7 +12,7 @@ import {
   MenuItem,
   Paper,
   Select,
-  SelectChangeEvent,
+  type SelectChangeEvent,
   Table,
   TableBody,
   TableCell,
@@ -23,14 +23,15 @@ import {
 import { getRoot } from 'mobx-state-tree'
 import React, { useEffect, useState } from 'react'
 
-import { ApolloInternetAccountModel } from '../ApolloInternetAccount/model'
+import { type ApolloInternetAccountModel } from '../ApolloInternetAccount/model'
 import {
-  ApolloInternetAccount,
-  CollaborationServerDriver,
+  type ApolloInternetAccount,
+  type CollaborationServerDriver,
 } from '../BackendDrivers'
-import { ApolloSessionModel } from '../session'
-import { ApolloRootModel } from '../types'
+import { type ApolloSessionModel } from '../session'
+import { type ApolloRootModel } from '../types'
 import { createFetchErrorMessage } from '../util'
+
 import { Dialog } from './Dialog'
 
 interface ManageChecksProps {

package/src/components/ManageUsers.tsx

@@ -6,7 +6,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 import { DeleteUserChange, UserChange } from '@apollo-annotation/shared'
-import { AbstractRootModel } from '@jbrowse/core/util'
+import { type AbstractRootModel } from '@jbrowse/core/util'
 import DeleteIcon from '@mui/icons-material/Delete'
 import {
   Button,
@@ -15,25 +15,26 @@ import {
   DialogContentText,
   MenuItem,
   Select,
-  SelectChangeEvent,
+  type SelectChangeEvent,
 } from '@mui/material'
 import {
   DataGrid,
   GridActionsCellItem,
-  GridCellParams,
-  GridColDef,
-  GridRowId,
-  GridRowModel,
-  GridRowParams,
+  type GridCellParams,
+  type GridColDef,
+  type GridRowId,
+  type GridRowModel,
+  type GridRowParams,
   GridToolbar,
 } from '@mui/x-data-grid'
 import { getRoot } from 'mobx-state-tree'
 import React, { useCallback, useEffect, useState } from 'react'
 
-import { ApolloInternetAccountModel } from '../ApolloInternetAccount/model'
-import { ChangeManager } from '../ChangeManager'
-import { ApolloSessionModel } from '../session'
+import { type ApolloInternetAccountModel } from '../ApolloInternetAccount/model'
+import { type ChangeManager } from '../ChangeManager'
+import { type ApolloSessionModel } from '../session'
 import { createFetchErrorMessage } from '../util'
+
 import { Dialog } from './Dialog'
 
 interface UserResponse {

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/OntologyTermAutocomplete.tsx

@@ -1,17 +1,17 @@
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
 
-import { AbstractSessionModel } from '@jbrowse/core/util'
+import { type AbstractSessionModel } from '@jbrowse/core/util'
 import { isAbortException } from '@jbrowse/core/util/aborting'
 import {
   Autocomplete,
-  AutocompleteRenderInputParams,
+  type AutocompleteRenderInputParams,
   TextField,
 } from '@mui/material'
 import React, { useCallback, useEffect, useState } from 'react'
 
-import { OntologyTerm, isDeprecated } from '../OntologyManager'
-import OntologyStore from '../OntologyManager/OntologyStore'
-import { ApolloSessionModel } from '../session'
+import { type OntologyTerm, isDeprecated } from '../OntologyManager'
+import type OntologyStore from '../OntologyManager/OntologyStore'
+import { type ApolloSessionModel } from '../session'
 
 interface OntologyTermAutocompleteProps {
   session: ApolloSessionModel

package/src/components/OntologyTermMultiSelect.tsx

@@ -4,7 +4,7 @@
 import { isAbortException } from '@jbrowse/core/util/aborting'
 import {
   Autocomplete,
-  AutocompleteRenderGetTagProps,
+  type AutocompleteRenderGetTagProps,
   Chip,
   Grid2,
   TextField,
@@ -18,14 +18,14 @@ import { getParent } from 'mobx-state-tree'
 import * as React from 'react'
 
 import {
-  OntologyManager,
-  OntologyRecord,
-  OntologyTerm,
+  type OntologyManager,
+  type OntologyRecord,
+  type OntologyTerm,
   isOntologyClass,
 } from '../OntologyManager'
-import { Match } from '../OntologyManager/OntologyStore/fulltext'
+import { type Match } from '../OntologyManager/OntologyStore/fulltext'
 import { isDeprecated } from '../OntologyManager/OntologyStore/indexeddb-schema'
-import { ApolloSessionModel } from '../session'
+import { type ApolloSessionModel } from '../session'
 
 interface TermValue {
   term: OntologyTerm

package/src/components/OpenLocalFile.tsx

@@ -2,7 +2,7 @@
 /* eslint-disable @typescript-eslint/unbound-method */
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
 /* eslint-disable @typescript-eslint/no-misused-promises */
-import { AbstractSessionModel, isElectron } from '@jbrowse/core/util'
+import { type AbstractSessionModel, isElectron } from '@jbrowse/core/util'
 import {
   Button,
   DialogActions,
@@ -16,9 +16,10 @@ import {
 import { nanoid } from 'nanoid'
 import React, { useState } from 'react'
 
-import { InMemoryFileDriver } from '../BackendDrivers'
-import { ApolloSessionModel } from '../session'
+import { type InMemoryFileDriver } from '../BackendDrivers'
+import { type ApolloSessionModel } from '../session'
 import { loadAssemblyIntoClient } from '../util'
+
 import { Dialog } from './Dialog'
 
 interface OpenLocalFileProps {

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>
+  )
+}