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

package/src/components/CreateApolloAnnotation.tsx

@@ -45,8 +45,27 @@ const isGeneOrTranscript = (
   }
   return (
     featureTypeOntology.isTypeOf(annotationFeature.type, 'gene') ||
-    featureTypeOntology.isTypeOf(annotationFeature.type, 'mRNA') ||
-    featureTypeOntology.isTypeOf(annotationFeature.type, 'transcript')
+    featureTypeOntology.isTypeOf(annotationFeature.type, 'transcript') ||
+    featureTypeOntology.isTypeOf(annotationFeature.type, 'pseudogene') ||
+    featureTypeOntology.isTypeOf(
+      annotationFeature.type,
+      'pseudogenic_transcript',
+    )
+  )
+}
+
+const isGene = (
+  annotationFeature: AnnotationFeatureSnapshot,
+  apolloSessionModel: ApolloSessionModel,
+) => {
+  const { featureTypeOntology } =
+    apolloSessionModel.apolloDataStore.ontologyManager
+  if (!featureTypeOntology) {
+    throw new Error('featureTypeOntology is undefined')
+  }
+  return (
+    featureTypeOntology.isTypeOf(annotationFeature.type, 'gene') ||
+    featureTypeOntology.isTypeOf(annotationFeature.type, 'pseudogene')
   )
 }
 
@@ -60,11 +79,51 @@ const isTranscript = (
     throw new Error('featureTypeOntology is undefined')
   }
   return (
-    featureTypeOntology.isTypeOf(annotationFeature.type, 'mRNA') ||
-    featureTypeOntology.isTypeOf(annotationFeature.type, 'transcript')
+    featureTypeOntology.isTypeOf(annotationFeature.type, 'transcript') ||
+    featureTypeOntology.isTypeOf(
+      annotationFeature.type,
+      'pseudogenic_transcript',
+    )
   )
 }
 
+const getFeatureId = (feature: AnnotationFeatureSnapshot) => {
+  const { attributes } = feature
+  const id = attributes?.id
+  if (id) {
+    return id[0]
+  }
+  return feature.type
+}
+
+const getFeatureNameOrId = (
+  feature: AnnotationFeatureSnapshot,
+  apolloSessionModel: ApolloSessionModel,
+) => {
+  const { featureTypeOntology } =
+    apolloSessionModel.apolloDataStore.ontologyManager
+  if (!featureTypeOntology) {
+    return getFeatureId(feature)
+  }
+
+  let attrName = ''
+
+  if (featureTypeOntology.isTypeOf(feature.type, 'gene')) {
+    attrName = 'gene_name'
+  }
+
+  if (featureTypeOntology.isTypeOf(feature.type, 'transcript')) {
+    attrName = 'transcript_name'
+  }
+
+  const { attributes } = feature
+  const name = attributes?.[attrName]
+  if (name) {
+    return name[0]
+  }
+  return getFeatureId(feature)
+}
+
 export function CreateApolloAnnotation({
   annotationFeature,
   assembly,
@@ -104,6 +163,9 @@ export function CreateApolloAnnotation({
     const filteredFeatures: AnnotationFeatureSnapshot[] = []
 
     for (const [, f] of features) {
+      if (f.type === 'chromosome') {
+        continue
+      }
       const featureSnapshot = getSnapshot(f)
       if (min >= featureSnapshot.min && max <= featureSnapshot.max) {
         filteredFeatures.push(featureSnapshot)
@@ -115,33 +177,34 @@ export function CreateApolloAnnotation({
 
   useEffect(() => {
     setErrorMessage('')
-    if (checkedChildrens.length === 0) {
-      setParentFeatureChecked(false)
-      return
-    }
-
+    let mins: number[] = []
+    let maxes: number[] = []
     if (annotationFeature.children) {
       const checkedAnnotationFeatureChildren = Object.values(
         annotationFeature.children,
       )
         .filter((child) => isTranscript(child, apolloSessionModel))
         .filter((child) => checkedChildrens.includes(child._id))
-      const mins = checkedAnnotationFeatureChildren.map((f) => f.min)
-      const maxes = checkedAnnotationFeatureChildren.map((f) => f.max)
-      const min = Math.min(...mins)
-      const max = Math.max(...maxes)
-      const filteredFeatures = getFeatures(min, max)
-      setDestinationFeatures(filteredFeatures)
+      mins = checkedAnnotationFeatureChildren.map((f) => f.min)
+      maxes = checkedAnnotationFeatureChildren.map((f) => f.max)
+    }
 
-      if (
-        filteredFeatures.length === 0 &&
-        checkedChildrens.length > 0 &&
-        !parentFeatureChecked
-      ) {
-        setErrorMessage('No destination features found')
-      }
+    const { featureTypeOntology } =
+      apolloSessionModel.apolloDataStore.ontologyManager
+    if (
+      featureTypeOntology &&
+      featureTypeOntology.isTypeOf(annotationFeature.type, 'transcript')
+    ) {
+      mins = [annotationFeature.min, ...mins]
+      maxes = [annotationFeature.max, ...maxes]
     }
-  }, [checkedChildrens])
+
+    const min = Math.min(...mins)
+    const max = Math.max(...maxes)
+    const filteredFeatures = getFeatures(min, max)
+    setDestinationFeatures(filteredFeatures)
+    setSelectedDestinationFeature(filteredFeatures[0])
+  }, [checkedChildrens, parentFeatureChecked])
 
   const handleParentFeatureCheck = (
     event: React.ChangeEvent<HTMLInputElement>,
@@ -171,12 +234,55 @@ export function CreateApolloAnnotation({
 
   const handleCreateApolloAnnotation = async () => {
     if (parentFeatureChecked) {
-      const change = new AddFeatureChange({
-        changedIds: [annotationFeature._id],
-        typeName: 'AddFeatureChange',
-        assembly: assembly.name,
-        addedFeature: annotationFeature,
-      })
+      let change
+      if (isGene(annotationFeature, apolloSessionModel)) {
+        if (
+          annotationFeature.children &&
+          checkedChildrens.length !==
+            Object.values(annotationFeature.children).length
+        ) {
+          const childrens: Record<string, AnnotationFeatureSnapshot> = {}
+          for (const childId of checkedChildrens) {
+            childrens[childId] = annotationFeature.children[childId]
+          }
+          change = new AddFeatureChange({
+            changedIds: [annotationFeature._id],
+            typeName: 'AddFeatureChange',
+            assembly: assembly.name,
+            addedFeature: {
+              ...annotationFeature,
+              children: childrens,
+            },
+          })
+        } else {
+          change = new AddFeatureChange({
+            changedIds: [annotationFeature._id],
+            typeName: 'AddFeatureChange',
+            assembly: assembly.name,
+            addedFeature: annotationFeature,
+          })
+        }
+      }
+
+      if (isTranscript(annotationFeature, apolloSessionModel)) {
+        if (selectedDestinationFeature) {
+          change = new AddFeatureChange({
+            parentFeatureId: selectedDestinationFeature._id,
+            changedIds: [selectedDestinationFeature._id],
+            typeName: 'AddFeatureChange',
+            assembly: assembly.name,
+            addedFeature: annotationFeature,
+          })
+        } else {
+          setErrorMessage('There is no destination gene for this transcript')
+          return
+        }
+      }
+
+      if (!change) {
+        return
+      }
+
       await apolloSessionModel.apolloDataStore.changeManager.submit(change)
       session.notify('Annotation added successfully', 'success')
       handleClose()
@@ -198,9 +304,9 @@ export function CreateApolloAnnotation({
           addedFeature: child,
         })
         await apolloSessionModel.apolloDataStore.changeManager.submit(change)
-        session.notify('Annotation added successfully', 'success')
-        handleClose()
       }
+      session.notify('Annotation added successfully', 'success')
+      handleClose()
     }
   }
 
@@ -226,7 +332,7 @@ export function CreateApolloAnnotation({
                   onChange={handleParentFeatureCheck}
                 />
               }
-              label={`${annotationFeature.type}:${annotationFeature.min}..${annotationFeature.max}`}
+              label={`${getFeatureNameOrId(annotationFeature, apolloSessionModel)} (${annotationFeature.min + 1}..${annotationFeature.max})`}
             />
           )}
           {annotationFeature.children && (
@@ -245,15 +351,16 @@ export function CreateApolloAnnotation({
                         }}
                       />
                     }
-                    label={`${child.type}:${child.min}..${child.max}`}
+                    label={`${getFeatureNameOrId(child, apolloSessionModel)} (${child.min + 1}..${child.max})`}
                   />
                 ))}
             </Box>
           )}
         </Box>
-        {!parentFeatureChecked &&
-          checkedChildrens.length > 0 &&
-          destinationFeatures.length > 0 && (
+        {destinationFeatures.length > 0 &&
+          ((!parentFeatureChecked && checkedChildrens.length > 0) ||
+            (parentFeatureChecked &&
+              isTranscript(annotationFeature, apolloSessionModel))) && (
             <Box sx={{ ml: 3 }}>
               <Typography variant="caption" fontSize={12}>
                 Select the destination feature to copy the selected features
@@ -268,7 +375,7 @@ export function CreateApolloAnnotation({
                 >
                   {destinationFeatures.map((f) => (
                     <MenuItem key={f._id} value={f._id}>
-                      {`${f.type}:${f.min}..${f.max}`}
+                      {`${getFeatureNameOrId(f, apolloSessionModel)} (${f.min}..${f.max})`}
                     </MenuItem>
                   ))}
                 </Select>

package/src/components/OntologyTermMultiSelect.tsx

@@ -114,6 +114,7 @@ export function OntologyTermMultiSelect({
   ontologyVersion,
   session,
   value: initialValue,
+  label,
 }: {
   session: ApolloSessionModel
   value: string[]
@@ -122,6 +123,7 @@ export function OntologyTermMultiSelect({
   /** if true, include deprecated/obsolete terms */
   includeDeprecated?: boolean
   onChange(newValue: string[]): void
+  label?: string
 }) {
   const { ontologyManager } = session.apolloDataStore
   const ontology = ontologyManager.findOntology(ontologyName, ontologyVersion)
@@ -256,6 +258,7 @@ export function OntologyTermMultiSelect({
           {...params}
           {...extraTextFieldParams}
           variant="outlined"
+          label={label}
           fullWidth
         />
       )}

package/src/components/index.ts

@@ -9,7 +9,6 @@ export * from './ImportFeatures'
 export * from './LogOut'
 export * from './ManageChecks'
 export * from './ManageUsers'
-export * from './ModifyFeatureAttribute'
 export * from './OpenLocalFile'
 export * from './ViewChangeLog'
 export * from './AddRefSeqAliases'

package/src/extensions/annotationFromJBrowseFeature.ts

@@ -23,6 +23,7 @@ function simpleFeatureToGFF3Feature(
   feature: Feature,
   refSeqId: string,
 ): GFF3Feature {
+  // eslint-disable-next-line unicorn/prefer-structured-clone
   const xfeature = JSON.parse(JSON.stringify(feature))
   const children = xfeature.subfeatures
   const gff3Feature = [
@@ -130,11 +131,11 @@ export function annotationFromJBrowseFeature(
     }))
     .views((self) => {
       const superContextMenuItems = self.contextMenuItems
-      const session = getSession(self)
-      const assembly = self.getAssembly()
 
       return {
         contextMenuItems() {
+          const session = getSession(self)
+          const assembly = self.getAssembly()
           const feature = self.contextMenuFeature
           if (!feature) {
             return superContextMenuItems()

package/src/makeDisplayComponent.tsx

@@ -171,7 +171,6 @@ export const DisplayComponent = observer(function DisplayComponent({
   const { classes } = useStyles()
 
   const {
-    detailsHeight,
     graphical,
     height: overallHeight,
     isShown,
@@ -187,7 +186,7 @@ export const DisplayComponent = observer(function DisplayComponent({
   }, [model, selectedFeature])
 
   const onDetailsResize = (delta: number) => {
-    model.setDetailsHeight(detailsHeight - delta)
+    model.setDetailsHeight(model.detailsHeight - delta)
   }
 
   if (!ontologyStore) {
@@ -199,9 +198,9 @@ export const DisplayComponent = observer(function DisplayComponent({
   }
 
   if (graphical && table) {
-    const tabularHeight = tabularEditor.isShown ? detailsHeight : 0
+    const tabularHeight = tabularEditor.isShown ? model.detailsHeight : 0
     const featureAreaHeight = isShown
-      ? overallHeight - detailsHeight - accordionControlHeight * 2
+      ? overallHeight - model.detailsHeight - accordionControlHeight * 2
       : 0
     return (
       <div style={{ height: overallHeight }}>

package/src/util/annotationFeatureUtils.ts

@@ -0,0 +1,53 @@
+import { AnnotationFeature } from '@apollo-annotation/mst'
+
+export function getFeatureName(feature: AnnotationFeature) {
+  const { attributes } = feature
+  const name = attributes.get('gff_name')
+  if (name) {
+    return name[0]
+  }
+  return ''
+}
+
+export function getFeatureId(feature: AnnotationFeature) {
+  const { attributes } = feature
+  const id = attributes.get('gff_id')
+  const transcript_id = attributes.get('transcript_id')
+  const exon_id = attributes.get('exon_id')
+  const protein_id = attributes.get('protein_id')
+  if (id) {
+    return id[0]
+  }
+  if (transcript_id) {
+    return transcript_id[0]
+  }
+  if (exon_id) {
+    return exon_id[0]
+  }
+  if (protein_id) {
+    return protein_id[0]
+  }
+  return ''
+}
+
+export function getFeatureNameOrId(feature: AnnotationFeature) {
+  const name = getFeatureName(feature)
+  const id = getFeatureId(feature)
+  if (name) {
+    return `: ${name}`
+  }
+  if (id) {
+    return `: ${id}`
+  }
+  return ''
+}
+
+export function getStrand(strand: number | undefined) {
+  if (strand === 1) {
+    return 'Forward'
+  }
+  if (strand === -1) {
+    return 'Reverse'
+  }
+  return ''
+}

package/src/util/index.ts

@@ -29,3 +29,4 @@ export function getApolloInternetAccount(session: ApolloSessionModel) {
 }
 
 export * from './loadAssemblyIntoClient'
+export * from './annotationFeatureUtils'

package/src/FeatureDetailsWidget/TranscriptBasic.tsx

@@ -1,200 +0,0 @@
-import { AnnotationFeature } from '@apollo-annotation/mst'
-import {
-  LocationEndChange,
-  LocationStartChange,
-} from '@apollo-annotation/shared'
-import { AbstractSessionModel, getFrame, revcom } from '@jbrowse/core/util'
-import {
-  Paper,
-  Typography,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableRow,
-  useTheme,
-} from '@mui/material'
-import { observer } from 'mobx-react'
-import React from 'react'
-
-import { ApolloSessionModel } from '../session'
-import { NumberTextField } from './NumberTextField'
-
-export const TranscriptBasicInformation = observer(
-  function TranscriptBasicInformation({
-    assembly,
-    feature,
-    refName,
-    session,
-  }: {
-    feature: AnnotationFeature
-    session: ApolloSessionModel
-    assembly: string
-    refName: string
-  }) {
-    const { notify } = session as unknown as AbstractSessionModel
-    const currentAssembly = session.apolloDataStore.assemblies.get(assembly)
-    const refData = currentAssembly?.getByRefName(refName)
-    const { changeManager } = session.apolloDataStore
-    const theme = useTheme()
-
-    function handleLocationChange(
-      oldLocation: number,
-      newLocation: number,
-      feature: AnnotationFeature,
-      isMin: boolean,
-    ) {
-      if (!feature.children) {
-        throw new Error('Transcript should have child features')
-      }
-      for (const [, child] of feature.children) {
-        if (isMin && oldLocation - 1 === child.min) {
-          const change = new LocationStartChange({
-            typeName: 'LocationStartChange',
-            changedIds: [child._id],
-            featureId: feature._id,
-            oldStart: oldLocation - 1,
-            newStart: newLocation - 1,
-            assembly,
-          })
-          changeManager.submit(change).catch(() => {
-            notify('Error updating feature start position', 'error')
-          })
-          return
-        }
-        if (!isMin && newLocation === child.max) {
-          const change = new LocationEndChange({
-            typeName: 'LocationEndChange',
-            changedIds: [child._id],
-            featureId: feature._id,
-            oldEnd: child.max,
-            newEnd: newLocation,
-            assembly,
-          })
-          changeManager.submit(change).catch(() => {
-            notify('Error updating feature start position', 'error')
-          })
-          return
-        }
-      }
-    }
-
-    if (!refData) {
-      return null
-    }
-
-    let strand, transcriptParts
-    try {
-      ;({ strand, transcriptParts } = feature)
-    } catch {
-      return null
-    }
-    const [firstLocation] = transcriptParts
-
-    const locationData = firstLocation
-      .map((loc, idx) => {
-        const { max, min, type } = loc
-        let label: string = type
-        if (label === 'threePrimeUTR') {
-          label = '3` UTR'
-        } else if (label === 'fivePrimeUTR') {
-          label = '5` UTR'
-        }
-        let fivePrimeSpliceSite
-        let threePrimeSpliceSite
-        let frameColor
-        if (type === 'CDS') {
-          const { phase } = loc
-          const frame = getFrame(min, max, strand ?? 1, phase)
-          frameColor = theme.palette.framesCDS.at(frame)?.main
-          const previousLoc = firstLocation.at(idx - 1)
-          const nextLoc = firstLocation.at(idx + 1)
-          if (strand === 1) {
-            if (previousLoc?.type === 'intron') {
-              fivePrimeSpliceSite = refData.getSequence(min - 2, min)
-            }
-            if (nextLoc?.type === 'intron') {
-              threePrimeSpliceSite = refData.getSequence(max, max + 2)
-            }
-          } else {
-            if (previousLoc?.type === 'intron') {
-              fivePrimeSpliceSite = revcom(refData.getSequence(max, max + 2))
-            }
-            if (nextLoc?.type === 'intron') {
-              threePrimeSpliceSite = revcom(refData.getSequence(min - 2, min))
-            }
-          }
-        }
-        return {
-          min,
-          max,
-          label,
-          fivePrimeSpliceSite,
-          threePrimeSpliceSite,
-          frameColor,
-        }
-      })
-      .filter((loc) => loc.label !== 'intron')
-
-    return (
-      <>
-        <Typography variant="h5">Structure</Typography>
-        <Typography variant="h6">
-          {strand === 1 ? 'Forward' : 'Reverse'} strand
-        </Typography>
-        <TableContainer component={Paper}>
-          <Table size="small">
-            <TableBody>
-              {locationData.map((loc) => (
-                <TableRow key={`${loc.label}:${loc.min}-${loc.max}`}>
-                  <TableCell
-                    component="th"
-                    scope="row"
-                    style={{ background: loc.frameColor }}
-                  >
-                    {loc.label}
-                  </TableCell>
-                  <TableCell>{loc.fivePrimeSpliceSite ?? ''}</TableCell>
-                  <TableCell padding="none">
-                    <NumberTextField
-                      margin="dense"
-                      variant="outlined"
-                      value={strand === 1 ? loc.min + 1 : loc.max}
-                      onChangeCommitted={(newLocation: number) => {
-                        handleLocationChange(
-                          strand === 1 ? loc.min + 1 : loc.max,
-                          newLocation,
-                          feature,
-                          strand === 1,
-                        )
-                      }}
-                    />
-                    {/* {strand === 1 ? loc.min : loc.max} */}
-                  </TableCell>
-                  <TableCell padding="none">
-                    <NumberTextField
-                      margin="dense"
-                      // disabled={item.type !== 'CDS'}
-                      variant="outlined"
-                      value={strand === 1 ? loc.max : loc.min + 1}
-                      onChangeCommitted={(newLocation: number) => {
-                        handleLocationChange(
-                          strand === 1 ? loc.max : loc.min + 1,
-                          newLocation,
-                          feature,
-                          strand !== 1,
-                        )
-                      }}
-                    />
-                    {/* {strand === 1 ? loc.max : loc.min} */}
-                  </TableCell>
-                  <TableCell>{loc.threePrimeSpliceSite ?? ''}</TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </TableContainer>
-      </>
-    )
-  },
-)