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

package/src/components/AddFeature.tsx

@@ -1,26 +1,35 @@
 /* eslint-disable @typescript-eslint/unbound-method */
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
-/* eslint-disable @typescript-eslint/no-misused-promises */
+
+import { type AnnotationFeatureSnapshot } from '@apollo-annotation/mst'
 import { AddFeatureChange } from '@apollo-annotation/shared'
-import { AbstractSessionModel, Region } from '@jbrowse/core/util/types'
+import { type Region } from '@jbrowse/core/util/types'
+import InfoIcon from '@mui/icons-material/Info'
 import {
+  Box,
   Button,
   DialogActions,
   DialogContent,
   DialogContentText,
   FormControl,
+  FormControlLabel,
+  IconButton,
   InputLabel,
   MenuItem,
+  Radio,
+  RadioGroup,
   Select,
-  SelectChangeEvent,
+  type SelectChangeEvent,
   TextField,
+  Tooltip,
 } from '@mui/material'
 import ObjectID from 'bson-objectid'
 import React, { useState } from 'react'
 
-import { ChangeManager } from '../ChangeManager'
+import { type ChangeManager } from '../ChangeManager'
 import { isOntologyClass } from '../OntologyManager'
-import { ApolloSessionModel } from '../session'
+import { type ApolloSessionModel } from '../session'
+
 import { Dialog } from './Dialog'
 import { OntologyTermAutocomplete } from './OntologyTermAutocomplete'
 
@@ -31,20 +40,67 @@ interface AddFeatureProps {
   changeManager: ChangeManager
 }
 
+enum NewFeature {
+  GENE_AND_SUBFEATURES = 'GENE_AND_SUBFEATURES',
+  TRANSCRIPT_AND_SUBFEATURES = 'TRANSCRIPT_AND_SUBFEATURES',
+  CUSTOM = 'CUSTOM',
+}
+
+function makeCodingMrna(
+  refSeqId: string,
+  strand: 1 | -1 | undefined,
+  min: number,
+  max: number,
+): AnnotationFeatureSnapshot {
+  const cds = {
+    _id: new ObjectID().toHexString(),
+    refSeq: refSeqId,
+    type: 'CDS',
+    min,
+    max,
+    strand,
+  } as AnnotationFeatureSnapshot
+
+  const exon = {
+    _id: new ObjectID().toHexString(),
+    refSeq: refSeqId,
+    type: 'exon',
+    min,
+    max,
+    strand,
+  } as AnnotationFeatureSnapshot
+
+  const children: Record<string, AnnotationFeatureSnapshot> = {}
+  children[cds._id] = cds
+  children[exon._id] = exon
+
+  const mRNA = {
+    _id: new ObjectID().toHexString(),
+    refSeq: refSeqId,
+    type: 'mRNA',
+    min,
+    max,
+    strand,
+    children,
+  } as AnnotationFeatureSnapshot
+
+  return mRNA
+}
+
 export function AddFeature({
   changeManager,
   handleClose,
   region,
   session,
 }: AddFeatureProps) {
-  const { notify } = session as unknown as AbstractSessionModel
   const [end, setEnd] = useState(String(region.end))
   const [start, setStart] = useState(String(region.start + 1))
-  const [type, setType] = useState('')
+  const [type, setType] = useState<NewFeature>(NewFeature.GENE_AND_SUBFEATURES)
+  const [customType, setCustomType] = useState<string>()
   const [strand, setStrand] = useState<1 | -1 | undefined>()
   const [errorMessage, setErrorMessage] = useState('')
 
-  async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
+  function onSubmit(event: React.FormEvent<HTMLFormElement>) {
     event.preventDefault()
     setErrorMessage('')
 
@@ -60,10 +116,63 @@ export function AddFeature({
     }
 
     if (!refSeqId) {
-      setErrorMessage('Invalid refseq id')
+      setErrorMessage(
+        'Invalid refseq id. Make sure you have the Apollo annotation track open',
+      )
+      return
+    }
+
+    if (type === NewFeature.GENE_AND_SUBFEATURES) {
+      const mRNA = makeCodingMrna(
+        refSeqId,
+        strand,
+        Number(start) - 1,
+        Number(end),
+      )
+      const children: Record<string, AnnotationFeatureSnapshot> = {}
+      children[mRNA._id] = mRNA
+
+      const id = new ObjectID().toHexString()
+      const change = new AddFeatureChange({
+        changedIds: [id],
+        typeName: 'AddFeatureChange',
+        assembly: region.assemblyName,
+        addedFeature: {
+          _id: id,
+          refSeq: refSeqId,
+          min: Number(start) - 1,
+          max: Number(end),
+          type: 'gene',
+          strand,
+          children,
+        },
+      })
+      void changeManager.submit(change)
+      handleClose()
+      return
+    }
+    if (type === NewFeature.TRANSCRIPT_AND_SUBFEATURES) {
+      const mRNA = makeCodingMrna(
+        refSeqId,
+        strand,
+        Number(start) - 1,
+        Number(end),
+      )
+      const change = new AddFeatureChange({
+        changedIds: [mRNA._id],
+        typeName: 'AddFeatureChange',
+        assembly: region.assemblyName,
+        addedFeature: mRNA,
+      })
+      void changeManager.submit(change)
+      handleClose()
       return
     }
 
+    if (!customType) {
+      setErrorMessage('No type selected')
+      return
+    }
     const id = new ObjectID().toHexString()
     const change = new AddFeatureChange({
       changedIds: [id],
@@ -74,19 +183,13 @@ export function AddFeature({
         refSeq: refSeqId,
         min: Number(start) - 1,
         max: Number(end),
-        type,
+        type: customType,
         strand,
       },
     })
-    await changeManager.submit(change)
-    notify('Feature added successfully', 'success')
+    void changeManager.submit(change)
     handleClose()
-    event.preventDefault()
-  }
-
-  function handleChangeType(newType: string) {
-    setErrorMessage('')
-    setType(newType)
+    return
   }
 
   function handleChangeStrand(e: SelectChangeEvent) {
@@ -109,6 +212,28 @@ export function AddFeature({
 
   const error = Number(end) <= Number(start)
 
+  function handleChangeOntologyType(newType: string) {
+    setErrorMessage('')
+    setCustomType(newType)
+  }
+
+  const handleTypeChange = (e: SelectChangeEvent) => {
+    setErrorMessage('')
+    const { value } = e.target
+    if (Object.keys(NewFeature).includes(value)) {
+      setType(NewFeature[value as NewFeature])
+    }
+  }
+
+  let submitDisabled: boolean = Boolean(error) || !(start && end && type)
+  if (
+    (type === NewFeature.CUSTOM && !customType) ||
+    (!strand && type === NewFeature.GENE_AND_SUBFEATURES) ||
+    (!strand && type === NewFeature.TRANSCRIPT_AND_SUBFEATURES)
+  ) {
+    submitDisabled = true
+  }
+
   return (
     <Dialog
       open
@@ -117,7 +242,7 @@ export function AddFeature({
       maxWidth={false}
       data-testid="add-feature-dialog"
     >
-      <form onSubmit={onSubmit}>
+      <form onSubmit={onSubmit} data-testid="submit-form">
         <DialogContent style={{ display: 'flex', flexDirection: 'column' }}>
           <TextField
             margin="dense"
@@ -145,26 +270,6 @@ export function AddFeature({
             error={error}
             helperText={error ? '"End" must be greater than "Start"' : null}
           />
-          <OntologyTermAutocomplete
-            session={session}
-            ontologyName="Sequence Ontology"
-            style={{ width: 170 }}
-            value={type}
-            filterTerms={isOntologyClass}
-            renderInput={(params) => (
-              <TextField
-                {...params}
-                label="Type"
-                variant="outlined"
-                fullWidth
-              />
-            )}
-            onChange={(oldValue, newValue) => {
-              if (newValue) {
-                handleChangeType(newValue)
-              }
-            }}
-          />
           <FormControl>
             <InputLabel id="demo-simple-select-label">Strand</InputLabel>
             <Select
@@ -179,13 +284,80 @@ export function AddFeature({
               <MenuItem value={-1}>-</MenuItem>
             </Select>
           </FormControl>
+
+          <FormControl style={{ marginTop: 20 }}>
+            <RadioGroup
+              aria-labelledby="demo-radio-buttons-group-label"
+              defaultValue={NewFeature.GENE_AND_SUBFEATURES}
+              name="radio-buttons-group"
+              value={type}
+              onChange={handleTypeChange}
+            >
+              <FormControlLabel
+                value={NewFeature.GENE_AND_SUBFEATURES}
+                control={<Radio />}
+                label={
+                  <Box display="flex" alignItems="center">
+                    Add gene and sub-features
+                    <Tooltip title="This is a shortcut to create a gene with a single mRNA, exon, and CDS">
+                      <IconButton size="small">
+                        <InfoIcon sx={{ fontSize: 18 }} />
+                      </IconButton>
+                    </Tooltip>
+                  </Box>
+                }
+              />
+
+              <FormControlLabel
+                value={NewFeature.TRANSCRIPT_AND_SUBFEATURES}
+                control={<Radio />}
+                label={
+                  <Box display="flex" alignItems="center">
+                    Add transcript and sub-features
+                    <Tooltip title="This is a shortcut to create a single mRNA with exon and CDS, but without a parent gene">
+                      <IconButton size="small">
+                        <InfoIcon sx={{ fontSize: 18 }} />
+                      </IconButton>
+                    </Tooltip>
+                  </Box>
+                }
+              />
+              <FormControlLabel
+                value={NewFeature.CUSTOM}
+                checked={
+                  type !== NewFeature.GENE_AND_SUBFEATURES &&
+                  type !== NewFeature.TRANSCRIPT_AND_SUBFEATURES
+                }
+                control={<Radio />}
+                label="Add feature with a sequence ontology type"
+              />
+            </RadioGroup>
+          </FormControl>
+          {type === NewFeature.CUSTOM ? (
+            <OntologyTermAutocomplete
+              session={session}
+              ontologyName="Sequence Ontology"
+              style={{ width: 170 }}
+              value=""
+              filterTerms={isOntologyClass}
+              renderInput={(params) => (
+                <TextField
+                  {...params}
+                  label="Type"
+                  variant="outlined"
+                  fullWidth
+                />
+              )}
+              onChange={(_oldValue, newValue) => {
+                if (newValue) {
+                  handleChangeOntologyType(newValue)
+                }
+              }}
+            />
+          ) : null}
         </DialogContent>
         <DialogActions>
-          <Button
-            variant="contained"
-            type="submit"
-            disabled={error || !(start && end && type)}
-          >
+          <Button variant="contained" type="submit" disabled={submitDisabled}>
             Submit
           </Button>
           <Button variant="outlined" type="submit" onClick={handleClose}>

package/src/components/AddRefSeqAliases.tsx

@@ -1,7 +1,9 @@
 /* eslint-disable @typescript-eslint/unbound-method */
-import { ChangeManager } from '../ChangeManager'
-import { ApolloSessionModel } from '../session'
-import { Dialog } from './Dialog'
+import {
+  AddRefSeqAliasesChange,
+  type SerializedRefSeqAliases,
+} from '@apollo-annotation/shared'
+import { type Assembly } from '@jbrowse/core/assemblyManager/assembly'
 import {
   Button,
   DialogActions,
@@ -12,19 +14,19 @@ import {
   InputLabel,
   MenuItem,
   Select,
-  SelectChangeEvent,
+  type SelectChangeEvent,
 } from '@mui/material'
+import { DataGrid, type GridColDef, type GridRowModel } from '@mui/x-data-grid'
 import React, { useEffect, useRef, useState } from 'react'
+
 import {
-  CollaborationServerDriver,
-  ApolloInternetAccount,
+  type ApolloInternetAccount,
+  type CollaborationServerDriver,
 } from '../BackendDrivers'
-import { Assembly } from '@jbrowse/core/assemblyManager/assembly'
-import { DataGrid, GridColDef, GridRowModel } from '@mui/x-data-grid'
-import {
-  AddRefSeqAliasesChange,
-  SerializedRefSeqAliases,
-} from '@apollo-annotation/shared'
+import { type ChangeManager } from '../ChangeManager'
+import { type ApolloSessionModel } from '../session'
+
+import { Dialog } from './Dialog'
 
 const columns: GridColDef[] = [
   { field: 'refName', headerName: 'Ref Name' },

package/src/components/CopyFeature.tsx

@@ -4,12 +4,12 @@
 /* eslint-disable @typescript-eslint/no-misused-promises */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import {
-  AnnotationFeature,
-  AnnotationFeatureSnapshot,
+  type AnnotationFeature,
+  type AnnotationFeatureSnapshot,
 } from '@apollo-annotation/mst'
 import { AddFeatureChange } from '@apollo-annotation/shared'
 import { readConfObject } from '@jbrowse/core/configuration'
-import { AbstractSessionModel } from '@jbrowse/core/util'
+import { type AbstractSessionModel } from '@jbrowse/core/util'
 import {
   Button,
   DialogActions,
@@ -17,16 +17,17 @@ import {
   DialogContentText,
   MenuItem,
   Select,
-  SelectChangeEvent,
+  type SelectChangeEvent,
   TextField,
 } from '@mui/material'
 import ObjectID from 'bson-objectid'
-import { IKeyValueMap } from 'mobx'
+import { type IKeyValueMap } from 'mobx'
 import { getSnapshot } from 'mobx-state-tree'
 import React, { useEffect, useState } from 'react'
 
-import { ChangeManager } from '../ChangeManager'
-import { ApolloSessionModel } from '../session'
+import { type ChangeManager } from '../ChangeManager'
+import { type ApolloSessionModel } from '../session'
+
 import { Dialog } from './Dialog'
 
 interface CopyFeatureProps {
@@ -82,7 +83,7 @@ export function CopyFeature({
   sourceAssemblyId,
   sourceFeature,
 }: CopyFeatureProps) {
-  const { assemblyManager, notify } = session as unknown as AbstractSessionModel
+  const { assemblyManager } = session as unknown as AbstractSessionModel
   const assemblies = assemblyManager.assemblyList
 
   const [selectedAssemblyId, setSelectedAssemblyId] = useState<
@@ -202,9 +203,7 @@ export function CopyFeature({
       copyFeature: true,
       allIds: featureIds,
     })
-    await changeManager.submit(change)
-
-    notify('Feature copied successfully', 'success')
+    void changeManager.submit(change)
     handleClose()
     event.preventDefault()
   }