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

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('makeDisplayComponent')
+        }
+        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)
       },
@@ -183,7 +204,7 @@ export function clientDataStoreFactory(
                   statusMessage: `Loading ontology "${name}", version "${version}", this may take a while`,
                   progressPct: 0,
                   cancelCallback: () => {
-                    controller.abort()
+                    controller.abort('ClientDataStore')
                     jobsManager.abortJob(job.name)
                   },
                 }
@@ -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',

package/src/session/session.ts

@@ -74,6 +74,7 @@ export function extendSession(
       apolloSelectedFeature: types.safeReference(AnnotationFeatureExtended),
       jobsManager: types.optional(ApolloJobModel, {}),
       isLocked: types.optional(types.boolean, false),
+      changeInProgress: types.optional(types.boolean, false),
     })
     .volatile(() => ({
       apolloHoveredFeature: undefined as HoveredFeature | undefined,
@@ -141,6 +142,9 @@ export function extendSession(
       toggleLocked() {
         self.isLocked = !self.isLocked
       },
+      setChangeInProgress(changeInProgress: boolean) {
+        self.changeInProgress = changeInProgress
+      },
       getPluginConfiguration() {
         const { jbrowse } = getRoot<ApolloRootModel>(self)
         const pluginConfiguration =
@@ -165,20 +169,16 @@ export function extendSession(
           const lgv = view as unknown as LinearGenomeViewModel
           if (lgv.initialized) {
             const { dynamicBlocks } = lgv
-            // eslint-disable-next-line unicorn/no-array-for-each
-            dynamicBlocks.forEach((block) => {
-              if (block.regionNumber !== undefined) {
-                const { assemblyName, end, refName, start } = block
-                const assembly =
-                  self.apolloDataStore.assemblies.get(assemblyName)
-                if (
-                  assembly &&
-                  assembly.backendDriverType === 'CollaborationServerDriver'
-                ) {
-                  locations.push({ assemblyName, refName, start, end })
-                }
+            for (const block of dynamicBlocks.contentBlocks) {
+              const { assemblyName, end, refName, start } = block
+              const assembly = self.apolloDataStore.assemblies.get(assemblyName)
+              if (
+                assembly &&
+                assembly.backendDriverType === 'CollaborationServerDriver'
+              ) {
+                locations.push({ assemblyName, refName, start, end })
               }
-            })
+            }
           }
         }
         if (locations.length === 0) {
@@ -235,21 +235,17 @@ export function extendSession(
                 const lgv = view as unknown as LinearGenomeViewModel
                 if (lgv.initialized) {
                   const { dynamicBlocks } = lgv
-                  // eslint-disable-next-line unicorn/no-array-for-each
-                  dynamicBlocks.forEach((block) => {
-                    if (block.regionNumber !== undefined) {
-                      const { assemblyName, end, refName, start } = block
-                      const assembly =
-                        self.apolloDataStore.assemblies.get(assemblyName)
-                      if (
-                        assembly &&
-                        assembly.backendDriverType ===
-                          'CollaborationServerDriver'
-                      ) {
-                        locations.push({ assemblyName, refName, start, end })
-                      }
+                  for (const block of dynamicBlocks.contentBlocks) {
+                    const { assemblyName, end, refName, start } = block
+                    const assembly =
+                      self.apolloDataStore.assemblies.get(assemblyName)
+                    if (
+                      assembly &&
+                      assembly.backendDriverType === 'CollaborationServerDriver'
+                    ) {
+                      locations.push({ assemblyName, refName, start, end })
                     }
-                  })
+                  }
                 }
               }
               if (locations.length === 0) {

package/src/util/displayUtils.ts

@@ -1,4 +1,5 @@
 import { type CheckResultIdsType } from '@apollo-annotation/mst'
+import { type Theme } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
 
 export { default as EditZoomThresholdDialog } from '../components/EditZoomThresholdDialog'
@@ -147,3 +148,30 @@ export function clusterResultByMessage<
   )
   return clusters
 }
+
+export function codonColorCode(
+  letter: string,
+  theme: Theme,
+  highContrast?: boolean,
+) {
+  if (letter === 'M') {
+    return theme.palette.startCodon
+  }
+  if (letter === '*') {
+    return highContrast ? theme.palette.text.primary : theme.palette.stopCodon
+  }
+  return
+}
+
+export function colorCode(letter: string, theme: Theme) {
+  const letterUpper = letter.toUpperCase()
+  if (
+    letterUpper === 'A' ||
+    letterUpper === 'C' ||
+    letterUpper === 'G' ||
+    letterUpper === 'T'
+  ) {
+    return theme.palette.bases[letterUpper].main.toString()
+  }
+  return 'lightgray'
+}