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

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

package/src/components/ViewChangeLog.tsx

@@ -26,6 +26,10 @@ import React, { useEffect, useState } from 'react'
 import { makeStyles } from 'tss-react/mui'
 
 import { type ApolloInternetAccountModel } from '../ApolloInternetAccount/model'
+import {
+  type ApolloInternetAccount,
+  type CollaborationServerDriver,
+} from '../BackendDrivers'
 import { type ApolloSessionModel } from '../session'
 import { type ApolloRootModel } from '../types'
 import { createFetchErrorMessage } from '../util'
@@ -37,11 +41,6 @@ interface ViewChangeLogProps {
   handleClose(): void
 }
 
-interface AssemblyDocument {
-  _id: string
-  name: string
-}
-
 const useStyles = makeStyles()((theme) => ({
   changeTextarea: {
     fontFamily: 'monospace',
@@ -63,12 +62,18 @@ export function ViewChangeLog({ handleClose, session }: ViewChangeLogProps) {
   const { baseURL } = apolloInternetAccount
   const { classes } = useStyles()
   const [errorMessage, setErrorMessage] = useState<string>()
-  const [assemblyCollection, setAssemblyCollection] = useState<
-    AssemblyDocument[]
-  >([])
-  const [assemblyId, setAssemblyId] = useState<string>('')
   const [displayGridData, setDisplayGridData] = useState<GridRowsProp[]>([])
 
+  const { collaborationServerDriver } = session.apolloDataStore as {
+    collaborationServerDriver: CollaborationServerDriver
+    getInternetAccount(
+      assemblyName?: string,
+      internetAccountId?: string,
+    ): ApolloInternetAccount
+  }
+  const assemblies = collaborationServerDriver.getAssemblies()
+  const [selectedAssembly, setSelectedAssembly] = useState(assemblies.at(0))
+
   const gridColumns: GridColDef[] = [
     { field: 'sequence' },
     {
@@ -90,7 +95,6 @@ export function ViewChangeLog({ handleClose, session }: ViewChangeLogProps) {
           readOnly
         />
       ),
-      valueFormatter: ({ value }) => JSON.stringify(value),
     },
     { field: 'user', headerName: 'User', width: 140 },
     {
@@ -102,47 +106,17 @@ export function ViewChangeLog({ handleClose, session }: ViewChangeLogProps) {
     },
   ]
 
-  useEffect(() => {
-    async function getAssemblies() {
-      const uri = new URL('assemblies', baseURL).href
-      const apolloFetch = apolloInternetAccount?.getFetcher({
-        locationType: 'UriLocation',
-        uri,
-      })
-      if (apolloFetch) {
-        const response = await apolloFetch(uri, { method: 'GET' })
-        if (!response.ok) {
-          const newErrorMessage = await createFetchErrorMessage(
-            response,
-            'Error when retrieving assemblies from server',
-          )
-          setErrorMessage(newErrorMessage)
-          return
-        }
-        const data = (await response.json()) as AssemblyDocument[]
-        setAssemblyCollection(data)
-      }
-    }
-    getAssemblies().catch((error) => {
-      setErrorMessage(String(error))
-    })
-  }, [apolloInternetAccount, baseURL])
-
-  useEffect(() => {
-    if (!assemblyId && assemblyCollection.length > 0) {
-      setAssemblyId(assemblyCollection[0]._id)
-    }
-  }, [assemblyId, assemblyCollection])
-
   useEffect(() => {
     async function getGridData() {
-      if (!assemblyId) {
+      if (!selectedAssembly) {
         return
       }
 
       // Get changes
       const url = new URL('changes', baseURL)
-      const searchParams = new URLSearchParams({ assembly: assemblyId })
+      const searchParams = new URLSearchParams({
+        assembly: selectedAssembly.name,
+      })
       url.search = searchParams.toString()
       const uri = url.toString()
       const apolloFetch = apolloInternetAccount?.getFetcher({
@@ -168,10 +142,11 @@ export function ViewChangeLog({ handleClose, session }: ViewChangeLogProps) {
     getGridData().catch((error) => {
       setErrorMessage(String(error))
     })
-  }, [assemblyId, apolloInternetAccount, baseURL])
+  }, [apolloInternetAccount, baseURL, selectedAssembly])
 
   function handleChangeAssembly(e: SelectChangeEvent) {
-    setAssemblyId(e.target.value)
+    const newAssembly = assemblies.find((asm) => asm.name === e.target.value)
+    setSelectedAssembly(newAssembly)
   }
 
   return (
@@ -184,12 +159,12 @@ export function ViewChangeLog({ handleClose, session }: ViewChangeLogProps) {
     >
       <Select
         style={{ width: 200, marginLeft: 40 }}
-        value={assemblyId}
+        value={selectedAssembly?.name ?? ''}
         onChange={handleChangeAssembly}
       >
-        {assemblyCollection.map((option) => (
-          <MenuItem key={option._id} value={option._id}>
-            {option.name}
+        {assemblies.map((option) => (
+          <MenuItem key={option.name} value={option.name}>
+            {option.displayName || option.name}
           </MenuItem>
         ))}
       </Select>

package/src/components/ViewCheckResults.tsx

@@ -4,7 +4,6 @@
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-return */
-import { type Assembly } from '@jbrowse/core/assemblyManager/assembly'
 import {
   Button,
   DialogActions,
@@ -49,7 +48,6 @@ export function ViewCheckResults({
   }
   const { baseURL } = apolloInternetAccount
   const [errorMessage, setErrorMessage] = useState<string>()
-  const [selectedAssembly, setSelectedAssembly] = useState<Assembly>()
   const [displayGridData, setDisplayGridData] = useState<GridRowsProp[]>([])
 
   const gridColumns: GridColDef[] = [
@@ -65,11 +63,7 @@ export function ViewCheckResults({
   ]
 
   const assemblies = collaborationServerDriver.getAssemblies()
-  useEffect(() => {
-    if (!selectedAssembly && assemblies.length > 0) {
-      setSelectedAssembly(assemblies[0])
-    }
-  }, [assemblies, selectedAssembly])
+  const [selectedAssembly, setSelectedAssembly] = useState(assemblies.at(0))
 
   useEffect(() => {
     async function getGridData() {

package/src/config.ts

@@ -15,10 +15,10 @@ const ApolloPluginConfigurationSchema = ConfigurationSchema('ApolloPlugin', {
     type: 'boolean',
     defaultValue: false,
   },
-  backgroundColorForFeature: {
-    description: 'Color ',
+  geneBackgroundColor: {
+    description: 'Color for feature background',
     type: 'string',
-    defaultValue: 'jexl:colorFeature(featureType)',
+    defaultValue: 'jexl:geneBackgroundColor(featureType)',
     contextVariable: ['featureType'],
   },
 })

package/src/index.ts

@@ -42,7 +42,6 @@ import {
 import { installApolloRefNameAliasAdapter } from './ApolloRefNameAliasAdapter'
 import { installApolloSequenceAdapter } from './ApolloSequenceAdapter'
 import { installApolloTextSearchAdapter } from './ApolloTextSearchAdapter'
-import { type BackendDriver } from './BackendDrivers'
 import {
   ApolloFeatureDetailsWidget,
   ApolloFeatureDetailsWidgetModel,
@@ -309,9 +308,10 @@ export default class ApolloPlugin extends Plugin {
                 if (!dataStore) {
                   break
                 }
-                const backendDriver = dataStore.getBackendDriver(
-                  assemblyName,
-                ) as BackendDriver
+                const backendDriver = dataStore.getBackendDriver(assemblyName)
+                if (!backendDriver) {
+                  break
+                }
                 const { seq: sequence } =
                   await backendDriver.getSequence(region)
                 handle.workers[0].postMessage({
@@ -331,9 +331,10 @@ export default class ApolloPlugin extends Plugin {
                 if (!dataStore) {
                   break
                 }
-                const backendDriver = dataStore.getBackendDriver(
-                  assembly,
-                ) as BackendDriver
+                const backendDriver = dataStore.getBackendDriver(assembly)
+                if (!backendDriver) {
+                  break
+                }
                 const regions = await backendDriver.getRegions(assembly)
                 handle.workers[0].postMessage({
                   apollo,
@@ -352,9 +353,10 @@ export default class ApolloPlugin extends Plugin {
                 if (!dataStore) {
                   break
                 }
-                const backendDriver = dataStore.getBackendDriver(
-                  assembly,
-                ) as BackendDriver
+                const backendDriver = dataStore.getBackendDriver(assembly)
+                if (!backendDriver) {
+                  break
+                }
                 const refNameAliases =
                   await backendDriver.getRefNameAliases(assembly)
                 handle.workers[0].postMessage({
@@ -378,18 +380,17 @@ export default class ApolloPlugin extends Plugin {
   configure(pluginManager: PluginManager) {
     if (isAbstractMenuManager(pluginManager.rootModel)) {
       pluginManager.jexl.addFunction(
-        'colorFeature',
-        (featureType: 'pseudogenic_transcript' | 'nonCodingTranscript') => {
-          if (featureType === 'pseudogenic_transcript') {
+        'geneBackgroundColor',
+        (featureType: string) => {
+          if (featureType === 'pseudogene') {
             return alpha('rgb(148, 203, 236)', 0.6)
           }
-          if (featureType === 'nonCodingTranscript') {
+          if (featureType === 'ncRNA_gene') {
             return alpha('rgb(194, 106, 119)', 0.6)
           }
-          throw new Error('Invalid type')
+          return
         },
       )
-
       addTopLevelMenus(pluginManager.rootModel)
     }
   }

package/src/makeDisplayComponent.tsx

@@ -87,25 +87,21 @@ const ResizeHandle = ({
     },
     [onResize],
   )
-  const cancelDrag: (event: MouseEvent) => void = useCallback(
-    (event: MouseEvent) => {
-      event.stopPropagation()
-      event.preventDefault()
-      globalThis.removeEventListener('mousemove', mouseMove)
-      globalThis.removeEventListener('mouseup', cancelDrag)
-      globalThis.removeEventListener('mouseleave', cancelDrag)
-    },
-    [mouseMove],
-  )
+
   return (
     // TODO: a11y
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
     <div
       onMouseDown={(event: React.MouseEvent) => {
         event.stopPropagation()
-        globalThis.addEventListener('mousemove', mouseMove)
-        globalThis.addEventListener('mouseup', cancelDrag)
-        globalThis.addEventListener('mouseleave', cancelDrag)
+        const controller = new AbortController()
+        const { signal } = controller
+        function abortDrag() {
+          controller.abort()
+        }
+        globalThis.addEventListener('mousemove', mouseMove, { signal })
+        globalThis.addEventListener('mouseup', abortDrag, { signal })
+        globalThis.addEventListener('mouseleave', abortDrag, { signal })
       }}
       onClick={(e) => {
         e.stopPropagation()

package/src/session/ClientDataStore.ts

@@ -33,6 +33,7 @@ import {
 
 import {
   type ApolloInternetAccount,
+  type BackendDriver,
   CollaborationServerDriver,
   DesktopFileDriver,
   InMemoryFileDriver,
@@ -86,18 +87,38 @@ export function clientDataStoreFactory(
         }
         return self.assemblies.put(assemblySnapshot)
       },
+    }))
+    .actions((self) => ({
       addFeature(assemblyId: string, feature: AnnotationFeatureSnapshot) {
-        const assembly = self.assemblies.get(assemblyId)
-        if (!assembly) {
-          throw new Error(
-            `Could not find assembly "${assemblyId}" to add feature "${feature._id}"`,
-          )
+        const session = getSession(self)
+        const { assemblyManager } = session
+        let apolloAssembly = self.assemblies.get(assemblyId)
+        if (!apolloAssembly) {
+          // maybe it's a valid assembly that we haven't loaded yet
+          const assembly = assemblyManager.get(assemblyId)
+          if (!assembly) {
+            throw new Error(
+              `Could not find assembly "${assemblyId}" to add feature "${feature._id}"`,
+            )
+          }
+          apolloAssembly = self.addAssembly(assemblyId)
         }
-        const ref = assembly.refSeqs.get(feature.refSeq)
+        let ref = apolloAssembly.refSeqs.get(feature.refSeq)
         if (!ref) {
-          throw new Error(
-            `Could not find refSeq "${feature.refSeq}" to add feature "${feature._id}"`,
-          )
+          // maybe it's a valid refName that we haven't loaded yet
+          const assembly = assemblyManager.get(assemblyId)
+          if (!assembly) {
+            throw new Error(
+              `Could not find assembly "${assemblyId}" to add feature "${feature._id}"`,
+            )
+          }
+          const canonicalRefName = assembly.getCanonicalRefName(feature.refSeq)
+          if (!canonicalRefName) {
+            throw new Error(
+              `Could not find refSeq "${feature.refSeq}" to add feature "${feature._id}"`,
+            )
+          }
+          ref = apolloAssembly.addRefSeq(feature.refSeq, canonicalRefName)
         }
         ref.features.put(feature)
       },
@@ -212,15 +233,12 @@ export function clientDataStoreFactory(
       },
     }))
     .views((self) => ({
-      getBackendDriver(assemblyId: string) {
-        if (!assemblyId) {
-          return self.collaborationServerDriver
-        }
+      getBackendDriver(assemblyId: string): BackendDriver | undefined {
         const session = getSession(self)
         const { assemblyManager } = session
         const assembly = assemblyManager.get(assemblyId)
         if (!assembly) {
-          return self.collaborationServerDriver
+          return
         }
         const { file, internetAccountConfigId } = getConf(assembly, [
           'sequence',