@apollo-annotation/jbrowse-plugin-apollo 0.3.8 → 0.3.10

package/src/components/AddFeature.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable @typescript-eslint/unbound-method */
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 
 import { type AnnotationFeatureSnapshot } from '@apollo-annotation/mst'
 import { AddFeatureChange } from '@apollo-annotation/shared'
@@ -26,6 +25,7 @@ import {
 import ObjectID from 'bson-objectid'
 import React, { useState } from 'react'
 
+import { CollaborationServerDriver } from '../BackendDrivers'
 import { type ChangeManager } from '../ChangeManager'
 import { isOntologyClass } from '../OntologyManager'
 import { type ApolloSessionModel } from '../session'
@@ -96,30 +96,32 @@ export function AddFeature({
   const [end, setEnd] = useState(String(region.end))
   const [start, setStart] = useState(String(region.start + 1))
   const [type, setType] = useState<NewFeature>(NewFeature.GENE_AND_SUBFEATURES)
-  const [customType, setCustomType] = useState<string>()
+  const [customType, setCustomType] = useState<string>('')
   const [strand, setStrand] = useState<1 | -1 | undefined>()
   const [errorMessage, setErrorMessage] = useState('')
 
-  function onSubmit(event: React.FormEvent<HTMLFormElement>) {
+  async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
     event.preventDefault()
     setErrorMessage('')
 
-    let refSeqId
-    for (const [, asm] of session.apolloDataStore.assemblies ?? new Map()) {
-      if (asm._id === region.assemblyName) {
-        for (const [, refseq] of asm.refSeqs ?? new Map()) {
-          if (refseq.name === region.refName) {
-            refSeqId = refseq._id
-          }
-        }
-      }
+    const backendDriver = session.apolloDataStore.getBackendDriver(
+      region.assemblyName,
+    )
+    if (!backendDriver) {
+      setErrorMessage('No backend driver found')
+      return
     }
-
-    if (!refSeqId) {
-      setErrorMessage(
-        'Invalid refseq id. Make sure you have the Apollo annotation track open',
+    let refSeqId = region.refName
+    if (backendDriver instanceof CollaborationServerDriver) {
+      const backendRefSeqId = await backendDriver.getRefSeqId(
+        region.assemblyName,
+        region.refName,
       )
-      return
+      if (!backendRefSeqId) {
+        setErrorMessage(`Could not find refSeq for "${region.refName}"`)
+        return
+      }
+      refSeqId = backendRefSeqId
     }
 
     if (type === NewFeature.GENE_AND_SUBFEATURES) {
@@ -248,6 +250,7 @@ export function AddFeature({
       maxWidth={false}
       data-testid="add-feature-dialog"
     >
+      {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
       <form onSubmit={onSubmit} data-testid="submit-form">
         <DialogContent style={{ display: 'flex', flexDirection: 'column' }}>
           <TextField
@@ -344,7 +347,7 @@ export function AddFeature({
               session={session}
               ontologyName="Sequence Ontology"
               style={{ width: 170 }}
-              value=""
+              value={customType}
               filterTerms={isOntologyClass}
               renderInput={(params) => (
                 <TextField

package/src/components/AddRefSeqAliases.tsx

@@ -16,12 +16,19 @@ import {
   Select,
   type SelectChangeEvent,
 } from '@mui/material'
-import { DataGrid, type GridColDef, type GridRowModel } from '@mui/x-data-grid'
+import {
+  DataGrid,
+  type GridColDef,
+  type GridRowModel,
+  type GridRowSelectionModel,
+} from '@mui/x-data-grid'
+import { observer } from 'mobx-react'
 import React, { useEffect, useRef, useState } from 'react'
 
 import {
   type ApolloInternetAccount,
   type CollaborationServerDriver,
+  type RefNameAliases,
 } from '../BackendDrivers'
 import { type ChangeManager } from '../ChangeManager'
 import { type ApolloSessionModel } from '../session'
@@ -30,7 +37,7 @@ import { Dialog } from './Dialog'
 
 const columns: GridColDef[] = [
   { field: 'refName', headerName: 'Ref Name' },
-  { field: 'aliases', headerName: 'Aliases', editable: true },
+  { field: 'aliases', headerName: 'Aliases', editable: true, flex: 1 },
 ]
 
 interface AddChildFeatureProps {
@@ -44,7 +51,7 @@ const isGeneratedObjectId = (key: string): boolean => {
   return pattern.test(key)
 }
 
-export function AddRefSeqAliases({
+export const AddRefSeqAliases = observer(function AddRefSeqAliases({
   changeManager,
   handleClose,
   session,
@@ -75,44 +82,50 @@ export function AddRefSeqAliases({
   const assemblies = collaborationServerDriver.getAssemblies()
 
   useEffect(() => {
-    let retry = 0
-    const maxRetries = 2
-    const initializeRefNameAliasMap = () => {
-      if (!selectedAssembly) {
-        return
-      }
-      const initialMap = new Map<string, string[]>()
-      if (retry < maxRetries && !selectedAssembly.refNames) {
-        retry++
-        setTimeout(initializeRefNameAliasMap, 50)
-      }
-      if (!selectedAssembly.refNames) {
-        return
-      }
-      const refNameAliasess = selectedAssembly.refNameAliases
-      for (const key in refNameAliasess) {
-        const value = refNameAliasess[key]
-        if (!value || isGeneratedObjectId(key)) {
-          continue
-        }
-        if (initialMap.has(value)) {
-          const aliases = initialMap.get(value) ?? []
-          initialMap.set(value, [...aliases, key])
-        } else {
-          initialMap.set(value, [key])
-        }
-      }
-      setRefNameAliasMap(initialMap)
+    if (assemblies.length > 0) {
+      setSelectedAssembly(assemblies[0])
+      collaborationServerDriver
+        .getRefNameAliases(assemblies[0].name)
+        .then((refNameAliases) => {
+          initializeRefNameAliasMap(refNameAliases)
+        })
+        .catch(() => {
+          setRefNameAliasMap(new Map())
+          setErrorMessage('Error fetching refName aliases for assembly')
+        })
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
 
-    initializeRefNameAliasMap()
-  }, [selectedAssembly])
+  const initializeRefNameAliasMap = (refNameAliasesList: RefNameAliases[]) => {
+    const initialMap = new Map<string, string[]>()
+    for (const refNameAliases of refNameAliasesList) {
+      const key = refNameAliases.refName
+      if (isGeneratedObjectId(key)) {
+        continue
+      }
+      initialMap.set(key, refNameAliases.aliases)
+    }
+    setRefNameAliasMap(initialMap)
+  }
 
   const handleChangeAssembly = (e: SelectChangeEvent) => {
     const newAssembly = assemblies.find((asm) => asm.name === e.target.value)
     setSelectedAssembly(newAssembly)
+    if (!newAssembly?.name) {
+      return
+    }
+    collaborationServerDriver
+      .getRefNameAliases(newAssembly.name)
+      .then((refNameAliases) => {
+        initializeRefNameAliasMap(refNameAliases)
+        setErrorMessage('')
+      })
+      .catch(() => {
+        setRefNameAliasMap(new Map())
+        setErrorMessage('Error fetching refName aliases for assembly')
+      })
     setEnableSubmit(false)
-    setErrorMessage('')
     if (fileRef.current) {
       fileRef.current.value = ''
     }
@@ -145,11 +158,12 @@ export function AddRefSeqAliases({
     })
   }
 
-  const rowSelectionChange = (ids: number[]) => {
-    if (ids.length > 0) {
+  const rowSelectionChange = (gridRowSelectionModel: GridRowSelectionModel) => {
+    const { ids } = gridRowSelectionModel
+    if (ids.size > 0) {
       setEnableSubmit(true)
-      const selectedRows = ids.flatMap((id) =>
-        getTableRows().filter((row) => row.id === id),
+      const selectedRows = [...ids.values()].flatMap((id) =>
+        getTableRows().filter((row) => String(row.id) === String(id)),
       )
       setSelectedRows(selectedRows)
     } else {
@@ -222,6 +236,7 @@ export function AddRefSeqAliases({
                 label="Assembly"
                 value={selectedAssembly?.name ?? ''}
                 onChange={handleChangeAssembly}
+                style={{ minWidth: 150 }}
               >
                 {assemblies.map((option) => (
                   <MenuItem key={option.name} value={option.name}>
@@ -255,11 +270,10 @@ export function AddRefSeqAliases({
                 },
               }}
               pageSizeOptions={[5, 10]}
-              onRowSelectionModelChange={(ids) => {
-                rowSelectionChange(ids as unknown as number[])
-              }}
+              onRowSelectionModelChange={rowSelectionChange}
               processRowUpdate={processRowUpdate}
               checkboxSelection
+              disableRowSelectionExcludeModel
             ></DataGrid>
           </div>
         ) : null}
@@ -284,4 +298,4 @@ export function AddRefSeqAliases({
       ) : null}
     </Dialog>
   )
-}
+})

package/src/components/CopyFeature.tsx

@@ -99,8 +99,8 @@ export function CopyFeature({
   }
 
   useEffect(() => {
-    setSelectedRefSeqId('')
     async function getRefNames() {
+      setSelectedRefSeqId('')
       if (!selectedAssemblyId) {
         setErrorMessage('No assemblies to copy to')
         return

package/src/components/CreateApolloAnnotation.tsx

@@ -193,11 +193,8 @@ export function CreateApolloAnnotation({
         continue
       }
 
-      // Destination feature should be of type gene amd should be on the same strand as the source feature
-      if (
-        featureTypeOntology?.isTypeOf(f.type, 'gene') &&
-        f.strand === annotationFeature.strand
-      ) {
+      // Destination feature should be of type gene
+      if (featureTypeOntology?.isTypeOf(f.type, 'gene')) {
         const featureSnapshot = getSnapshot(f)
         filteredFeatures.push(featureSnapshot)
       }
@@ -373,7 +370,7 @@ export function CreateApolloAnnotation({
       })
     }
 
-    await submitChange(change)
+    await submitChange(change, annotationFeature._id)
   }
 
   const copyTranscriptsToDestinationGene = async (
@@ -384,6 +381,15 @@ export function CreateApolloAnnotation({
     }
     for (const transcriptId of Object.keys(transcripts)) {
       const transcript = transcripts[transcriptId]
+      transcript.strand = selectedDestinationFeature.strand
+
+      // update strand of transcript children if they exist
+      if (transcript.children) {
+        for (const childId of Object.keys(transcript.children)) {
+          transcript.children[childId].strand =
+            selectedDestinationFeature.strand
+        }
+      }
       const change = new AddFeatureChange({
         parentFeatureId: selectedDestinationFeature._id,
         changedIds: [selectedDestinationFeature._id],
@@ -391,7 +397,8 @@ export function CreateApolloAnnotation({
         assembly: assembly.name,
         addedFeature: transcript,
       })
-      await submitChange(change)
+      // selects the last added transcript
+      await submitChange(change, transcriptId)
     }
   }
 
@@ -419,8 +426,7 @@ export function CreateApolloAnnotation({
         },
       },
     })
-    await submitChange(change)
-    apolloSessionModel.apolloSetSelectedFeature(newGeneId)
+    await submitChange(change, newGeneId)
   }
 
   const extendSelectedDestinationFeatureLocation = async (
@@ -462,8 +468,14 @@ export function CreateApolloAnnotation({
 
   const submitChange = async (
     change: AddFeatureChange | LocationStartChange | LocationEndChange,
+    selectedFeatureId?: string,
   ) => {
-    await apolloSessionModel.apolloDataStore.changeManager.submit(change)
+    await apolloSessionModel.apolloDataStore.changeManager
+      .submit(change)
+      .then(() => {
+        // Selects the newly added/modified feature
+        apolloSessionModel.apolloSetSelectedFeature(selectedFeatureId)
+      })
   }
 
   const handleCreateNewGeneChange = (

package/src/components/DeleteAssembly.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/unbound-method */
 /* eslint-disable @typescript-eslint/no-misused-promises */
 import { DeleteAssemblyChange } from '@apollo-annotation/shared'
-import { type Assembly } from '@jbrowse/core/assemblyManager/assembly'
 import {
   Button,
   Checkbox,
@@ -15,7 +14,7 @@ import {
   type SelectChangeEvent,
 } from '@mui/material'
 import { getRoot } from 'mobx-state-tree'
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 
 import { type ApolloInternetAccountModel } from '../ApolloInternetAccount/model'
 import {
@@ -40,7 +39,6 @@ export function DeleteAssembly({
   session,
 }: DeleteAssemblyProps) {
   const { internetAccounts } = getRoot<ApolloRootModel>(session)
-  const [selectedAssembly, setSelectedAssembly] = useState<Assembly>()
   const [errorMessage, setErrorMessage] = useState('')
   const [confirmDelete, setconfirmDelete] = useState(false)
   const [submitted, setSubmitted] = useState(false)
@@ -63,12 +61,7 @@ export function DeleteAssembly({
   }
 
   const assemblies = collaborationServerDriver.getAssemblies()
-
-  useEffect(() => {
-    if (assemblies.length > 0 && selectedAssembly === undefined) {
-      setSelectedAssembly(assemblies[0])
-    }
-  }, [assemblies, selectedAssembly])
+  const [selectedAssembly, setSelectedAssembly] = useState(assemblies.at(0))
 
   function handleChangeInternetAccount(e: SelectChangeEvent) {
     setSubmitted(false)

package/src/components/DownloadGFF3.tsx

@@ -5,7 +5,7 @@
 /* eslint-disable @typescript-eslint/no-misused-promises */
 import { type ApolloAssembly } from '@apollo-annotation/mst'
 import { annotationFeatureToGFF3 } from '@apollo-annotation/shared'
-import gff, { type GFF3Item } from '@gmod/gff'
+import { type GFF3Item, formatSync } from '@gmod/gff'
 import { type Assembly } from '@jbrowse/core/assemblyManager/assembly'
 import { getConf } from '@jbrowse/core/configuration'
 import {
@@ -169,7 +169,7 @@ export function DownloadGFF3({ handleClose, session }: DownloadGFF3Props) {
       const { refName, seq } = sequenceFeature
       gff3Items.push({ id: refName, description: '', sequence: seq })
     }
-    const gff3 = gff.formatSync(gff3Items)
+    const gff3 = formatSync(gff3Items)
     const gff3Blob = new Blob([gff3], { type: 'text/plain;charset=utf-8' })
     saveAs(
       gff3Blob,

package/src/components/ImportFeatures.tsx

@@ -182,7 +182,7 @@ export function ImportFeatures({
       statusMessage: 'Uploading file, this may take awhile',
       progressPct: 0,
       cancelCallback: () => {
-        controller.abort()
+        controller.abort('ImportFeatures')
         jobsManager.abortJob(job.name)
       },
     }

package/src/components/ManageChecks.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/use-unknown-in-catch-callback-variable */
 /* eslint-disable @typescript-eslint/unbound-method */
 /* eslint-disable @typescript-eslint/no-misused-promises */
-import { type Assembly } from '@jbrowse/core/assemblyManager/assembly'
 import { type AbstractSessionModel } from '@jbrowse/core/util'
 import {
   Button,
@@ -52,7 +51,6 @@ interface CheckDocument {
 
 export function ManageChecks({ handleClose, session }: ManageChecksProps) {
   const { internetAccounts } = getRoot<ApolloRootModel>(session)
-  const [selectedAssembly, setSelectedAssembly] = useState<Assembly>()
   const [errorMessage, setErrorMessage] = useState('')
   const [submitted, setSubmitted] = useState(false)
   const apolloInternetAccounts = internetAccounts.filter(
@@ -76,6 +74,7 @@ export function ManageChecks({ handleClose, session }: ManageChecksProps) {
   }
 
   const assemblies = collaborationServerDriver.getAssemblies()
+  const [selectedAssembly, setSelectedAssembly] = useState(assemblies.at(0))
 
   useEffect(() => {
     async function getChecks() {
@@ -99,19 +98,13 @@ export function ManageChecks({ handleClose, session }: ManageChecksProps) {
     })
   }, [selectedInternetAccount])
 
-  useEffect(() => {
-    if (assemblies.length > 0 && selectedAssembly === undefined) {
-      setSelectedAssembly(assemblies[0])
-    }
-  }, [assemblies, selectedAssembly])
-
   useEffect(() => {
     async function getChecks() {
       if (!selectedAssembly) {
         return
       }
       const { baseURL, getFetcher } = selectedInternetAccount
-      const uri = new URL(`/assemblies/${selectedAssembly.name}`, baseURL).href
+      const uri = new URL(`assemblies/${selectedAssembly.name}`, baseURL).href
       const apolloFetch = getFetcher({ locationType: 'UriLocation', uri })
       const response = await apolloFetch(uri, { method: 'GET' })
       if (!response.ok) {

package/src/components/ManageUsers.tsx

@@ -28,7 +28,7 @@ import {
   GridToolbar,
 } from '@mui/x-data-grid'
 import { getRoot } from 'mobx-state-tree'
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 
 import { type ApolloInternetAccountModel } from '../ApolloInternetAccount/model'
 import { type ChangeManager } from '../ChangeManager'
@@ -72,33 +72,34 @@ export function ManageUsers({
   )
   const [users, setUsers] = useState<UserResponse[]>([])
 
-  const getUsers = useCallback(async () => {
-    const { baseURL } = selectedInternetAccount
-    const uri = new URL('users', baseURL).href
-    const apolloFetch = selectedInternetAccount.getFetcher({
-      locationType: 'UriLocation',
-      uri,
-    })
-    if (apolloFetch) {
-      const response = await apolloFetch(uri, { method: 'GET' })
-      if (!response.ok) {
-        const newErrorMessage = await createFetchErrorMessage(
-          response,
-          'Error when getting user data from db',
+  useEffect(() => {
+    async function getUsers() {
+      const { baseURL } = selectedInternetAccount
+      const uri = new URL('users', baseURL).href
+      const apolloFetch = selectedInternetAccount.getFetcher({
+        locationType: 'UriLocation',
+        uri,
+      })
+      if (apolloFetch) {
+        const response = await apolloFetch(uri, { method: 'GET' })
+        if (!response.ok) {
+          const newErrorMessage = await createFetchErrorMessage(
+            response,
+            'Error when getting user data from db',
+          )
+          setErrorMessage(newErrorMessage)
+          return
+        }
+        const data = (await response.json()) as UserResponse[]
+        setUsers(
+          data.map((u) => (u.role === undefined ? { ...u, role: '' } : u)),
         )
-        setErrorMessage(newErrorMessage)
-        return
       }
-      const data = (await response.json()) as UserResponse[]
-      setUsers(data.map((u) => (u.role === undefined ? { ...u, role: '' } : u)))
     }
-  }, [selectedInternetAccount])
-
-  useEffect(() => {
     getUsers().catch((error) => {
       setErrorMessage(String(error))
     })
-  }, [getUsers])
+  }, [selectedInternetAccount])
 
   async function deleteUser(id: GridRowId) {
     const change = new DeleteUserChange({

package/src/components/OntologyTermAutocomplete.tsx

@@ -73,21 +73,14 @@ export function OntologyTermAutocomplete({
     [filterTermsProp, includeDeprecated],
   )
 
-  // effect for clearing choices when not open
-  useEffect(() => {
-    if (!open) {
-      setTermChoices(undefined)
-    }
-  }, [open])
-
   // effect for matching the current value with an ontology term
   useEffect(() => {
     const controller = new AbortController()
     const { signal } = controller
     if (needToLoadCurrentTerm) {
-      setCurrentOntologyTermInvalid('')
       getCurrentTerm(ontologyStore, valueString, filterTerms, signal).then(
         (term) => {
+          setCurrentOntologyTermInvalid('')
           if (!signal.aborted) {
             setCurrentOntologyTerm(term)
           }
@@ -100,7 +93,7 @@ export function OntologyTermAutocomplete({
       )
     }
     return () => {
-      controller.abort()
+      controller.abort('OntologyTermAutocomplete matcher')
     }
   }, [session, valueString, filterTerms, ontologyStore, needToLoadCurrentTerm])
 
@@ -126,7 +119,7 @@ export function OntologyTermAutocomplete({
       )
     }
     return () => {
-      controller.abort()
+      controller.abort('OntologyTermAutocomplete loader')
     }
   }, [
     needToLoadTermChoices,

package/src/components/OntologyTermMultiSelect.tsx

@@ -89,7 +89,7 @@ function TermTagWithTooltip({
     })
 
     return () => {
-      controller.abort()
+      controller.abort('TermTagWithTooltip ')
     }
   }, [termId, ontology, manager])
 
@@ -211,7 +211,7 @@ export function OntologyTermMultiSelect({
     })
 
     return () => {
-      aborter.abort()
+      aborter.abort('OntologyTermMultiSelect')
     }
   }, [getOntologyTerms, ontology, includeDeprecated, inputValue, value])