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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apollo-annotation/jbrowse-plugin-apollo",
-  "version": "0.3.7",
+  "version": "0.3.9",
   "description": "Apollo plugin for JBrowse 2",
   "keywords": [
     "jbrowse",
@@ -27,7 +27,7 @@
     "start:watch": "JB_NPM=false NODE_ENV=development rollup --config --watch",
     "start:server": "serve --no-request-logging --cors --listen 9000 --no-port-switching .",
     "build": "yarn build:shared && yarn clean && rollup --config",
-    "browse": "serve --no-request-logging --listen 8999 --no-port-switching .jbrowse",
+    "browse": "serve --no-request-logging --listen 8999 --no-port-switching --symlinks .jbrowse",
     "test": "jest",
     "test:ci": "jest --coverage",
     "start:collab-cypress": "yarn workspace @apollo-annotation/collaboration-server run cypress:start",
@@ -48,15 +48,15 @@
     }
   },
   "dependencies": {
-    "@apollo-annotation/common": "^0.3.7",
-    "@apollo-annotation/mst": "^0.3.7",
-    "@apollo-annotation/shared": "^0.3.7",
+    "@apollo-annotation/common": "^0.3.9",
+    "@apollo-annotation/mst": "^0.3.9",
+    "@apollo-annotation/shared": "^0.3.9",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
-    "@gmod/gff": "1.2.0",
-    "@jbrowse/plugin-authentication": "^3.0.1",
-    "@jbrowse/plugin-linear-genome-view": "^3.0.1",
-    "@mui/icons-material": "^5.8.4",
+    "@gmod/gff": "^2.0.0",
+    "@jbrowse/plugin-authentication": "^3.6.5",
+    "@jbrowse/plugin-linear-genome-view": "^3.6.5",
+    "@mui/icons-material": "^6.5.0",
     "@types/jsonpath": "^0.2.0",
     "autosuggest-highlight": "^3.3.4",
     "bson-objectid": "^2.0.4",
@@ -71,15 +71,15 @@
     "tslib": "^2.3.1"
   },
   "devDependencies": {
-    "@jbrowse/cli": "^3.0.1",
-    "@jbrowse/core": "^3.0.1",
-    "@jbrowse/development-tools": "^2.1.1",
+    "@jbrowse/cli": "^3.6.5",
+    "@jbrowse/core": "^3.6.5",
+    "@jbrowse/development-tools": "^2.2.1",
     "@jest/globals": "^29.0.3",
-    "@mui/material": "^6.0.0",
-    "@mui/x-data-grid": "^7.0.0",
+    "@mui/material": "^7.0.0",
+    "@mui/x-data-grid": "^8.0.0",
     "@types/autosuggest-highlight": "^3",
     "@types/file-saver": "^2",
-    "@types/node": "^18.14.2",
+    "@types/node": "^20.19.15",
     "@types/prop-types": "^15",
     "@types/react": "^18.3.4",
     "@types/react-dom": "^18",
@@ -99,7 +99,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.59.0",
+    "rollup": "^2.79.2",
     "rxjs": "^7.4.0",
     "serve": "^14.0.1",
     "shx": "^0.3.3",
@@ -111,9 +111,9 @@
   },
   "peerDependencies": {
     "@jbrowse/core": "^3.0.1",
-    "@mui/material": "^6.0.0",
+    "@mui/material": "^7.0.0",
     "mobx": "^6.6.1",
-    "mobx-react": "^7.2.1",
+    "mobx-react": "^9.0.0",
     "mobx-state-tree": "^5.4.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",

package/src/ApolloInternetAccount/model.ts

@@ -23,14 +23,14 @@ import {
   isElectron,
 } from '@jbrowse/core/util'
 import { autorun } from 'mobx'
-import { type Instance, flow, getRoot, types } from 'mobx-state-tree'
+import { type Instance, flow, getRoot, isAlive, types } from 'mobx-state-tree'
 import { io } from 'socket.io-client'
 
+import { addTopLevelAdminMenus } from '../menus/topLevelMenuAdmin'
 import { type Collaborator } from '../session'
 import { type ApolloRootModel } from '../types'
 import { createFetchErrorMessage } from '../util'
 
-import { addMenuItems } from './addMenuItems'
 import { AuthTypeSelector } from './components/AuthTypeSelector'
 import { type ApolloInternetAccountConfigModel } from './configSchema'
 
@@ -61,33 +61,23 @@ const stateModelFactory = (configSchema: ApolloInternetAccountConfigModel) => {
     }))
     .volatile(() => ({
       role: undefined as Role | undefined,
+      controller: new AbortController(),
+    }))
+
+    .actions((self) => ({
+      setRole() {
+        const token = self.retrieveToken()
+        if (!token) {
+          self.role = undefined
+          return
+        }
+        const dec = getDecodedToken(token)
+        const { role } = dec
+        if (self.role !== role) {
+          self.role = role
+        }
+      },
     }))
-    .actions((self) => {
-      let roleNotificationSent = false
-      return {
-        setRole() {
-          const token = self.retrieveToken()
-          if (!token) {
-            self.role = undefined
-            return
-          }
-          const dec = getDecodedToken(token)
-          const { role } = dec
-          if (!role && !roleNotificationSent) {
-            const { session } = getRoot<ApolloRootModel>(self)
-            ;(session as unknown as AbstractSessionModel).notify(
-              'You have registered as a user but have not been given access. Ask your administrator to enable access for your account.',
-              'warning',
-            )
-            // notify
-            roleNotificationSent = true
-          }
-          if (self.role !== role) {
-            self.role = role
-          }
-        },
-      }
-    })
     .actions((self) => {
       let listener: (event: MessageEvent) => void
       return {
@@ -205,7 +195,7 @@ const stateModelFactory = (configSchema: ApolloInternetAccountConfigModel) => {
         const searchParams = new URLSearchParams({ type: authType })
         url.search = searchParams.toString()
         const uri = url.toString()
-        const response = await fetch(uri)
+        const response = await fetch(uri, { signal: self.controller.signal })
         if (!response.ok) {
           const errorMessage = await createFetchErrorMessage(
             response,
@@ -239,7 +229,18 @@ const stateModelFactory = (configSchema: ApolloInternetAccountConfigModel) => {
             uri,
           })
 
-          const response = yield apolloFetch(uri, { method: 'GET' })
+          let response: Response
+          try {
+            response = yield apolloFetch(uri, {
+              method: 'GET',
+              signal: self.controller.signal,
+            })
+          } catch (error) {
+            if (!self.controller.signal.aborted) {
+              console.error(error)
+            }
+            return
+          }
           if (!response.ok) {
             const errorMessage = yield createFetchErrorMessage(
               response,
@@ -274,7 +275,18 @@ const stateModelFactory = (configSchema: ApolloInternetAccountConfigModel) => {
           uri,
         })
 
-        const response = yield apolloFetch(uri, { method: 'GET' })
+        let response: Response
+        try {
+          response = yield apolloFetch(uri, {
+            method: 'GET',
+            signal: self.controller.signal,
+          })
+        } catch (error) {
+          if (!self.controller.signal.aborted) {
+            console.error(error)
+          }
+          return
+        }
         if (!response.ok) {
           console.error(
             `Error when fetching the last updates to recover socket connection — ${response.status}`,
@@ -300,11 +312,13 @@ const stateModelFactory = (configSchema: ApolloInternetAccountConfigModel) => {
         if (!token) {
           throw new Error('No Token found')
         }
+        const user = getDecodedToken(token)
+        const localSessionId = makeUserSessionId(user)
         const { socket } = self
         const { addCheckResult, changeManager, deleteCheckResult } =
           session.apolloDataStore
-        socket.on('connect', async () => {
-          await self.getMissingChanges()
+        socket.on('connect', () => {
+          void self.getMissingChanges()
         })
         socket.on('connect_error', (error) => {
           console.error(error)
@@ -324,7 +338,7 @@ const stateModelFactory = (configSchema: ApolloInternetAccountConfigModel) => {
             'LastChangeSequence',
             String(message.changeSequence),
           )
-          if (message.userSessionId === token) {
+          if (message.userSessionId === localSessionId) {
             return // we did this change, no need to apply it again
           }
           const change = Change.fromJSON(message.changeInfo)
@@ -332,8 +346,6 @@ const stateModelFactory = (configSchema: ApolloInternetAccountConfigModel) => {
         })
         socket.on('USER_LOCATION', (message: UserLocationMessage) => {
           const { channel, locations, userName, userSessionId } = message
-          const user = getDecodedToken(token)
-          const localSessionId = makeUserSessionId(user)
           if (channel === 'USER_LOCATION' && userSessionId !== localSessionId) {
             const collaborator: Collaborator = {
               name: userName,
@@ -356,7 +368,10 @@ const stateModelFactory = (configSchema: ApolloInternetAccountConfigModel) => {
     }))
     .actions((self) => {
       async function postUserLocation(userLoc: UserLocation[]) {
-        const { baseURL } = self
+        if (!isAlive(self) || self.role === 'none') {
+          return
+        }
+        const { baseURL, controller } = self
         const url = new URL('users/userLocation', baseURL).href
         const userLocation = new URLSearchParams(JSON.stringify(userLoc))
 
@@ -368,6 +383,7 @@ const stateModelFactory = (configSchema: ApolloInternetAccountConfigModel) => {
           const response = await apolloFetch(url, {
             method: 'POST',
             body: userLocation,
+            signal: controller.signal,
           })
           if (!response.ok) {
             throw new Error('ignore') // ignore message, will get caught by "catch"
@@ -390,42 +406,73 @@ const stateModelFactory = (configSchema: ApolloInternetAccountConfigModel) => {
       }
       return { postUserLocation: debouncePostUserLocation(postUserLocation) }
     })
-    .actions((self) => ({
-      initialize: flow(function* initialize(role: Role) {
-        if (role === 'admin') {
-          const rootModel = getRoot(self)
-          if (isAbstractMenuManager(rootModel)) {
-            addMenuItems(rootModel)
-          }
-        }
-        // Get and set server last change sequence into session storage
-        yield self.updateLastChangeSequenceNumber()
-        // Open socket listeners
-        self.addSocketListeners()
-        // request user locations
-        const { baseURL } = self
-        const uri = new URL('users/locations', baseURL).href
-        const apolloFetch = self.getFetcher({
-          locationType: 'UriLocation',
-          uri,
-        })
-        yield apolloFetch(uri, { method: 'GET' })
-        window.addEventListener('beforeunload', () => {
+    .volatile(() => ({ roleNotificationSent: false }))
+    .actions((self) => {
+      function beforeUnloadListener() {
+        self.postUserLocation([])
+      }
+      function visibilityChangeListener() {
+        // fires when user switches tabs, apps, goes to homescreen, etc.
+        if (document.visibilityState === 'hidden') {
           self.postUserLocation([])
-        })
-        document.addEventListener('visibilitychange', () => {
-          // fires when user switches tabs, apps, goes to homescreen, etc.
-          if (document.visibilityState === 'hidden') {
-            self.postUserLocation([])
+        }
+        // fires when app transitions from prerender, user returns to the app / tab.
+        if (document.visibilityState === 'visible') {
+          const { session } = getRoot<ApolloRootModel>(self)
+          session.broadcastLocations()
+        }
+      }
+      return {
+        initialize: flow(function* initialize(role: Role) {
+          if (role === 'none') {
+            if (!self.roleNotificationSent) {
+              const { session } = getRoot<ApolloRootModel>(self)
+              ;(session as unknown as AbstractSessionModel).notify(
+                'You have registered as an Apollo user but have not been given access. Ask your administrator to enable access for your account.',
+                'warning',
+              )
+              self.roleNotificationSent = true
+            }
+            return
           }
-          // fires when app transitions from prerender, user returns to the app / tab.
-          if (document.visibilityState === 'visible') {
-            const { session } = getRoot<ApolloRootModel>(self)
-            session.broadcastLocations()
+          if (role === 'admin') {
+            const rootModel = getRoot(self)
+            if (isAbstractMenuManager(rootModel)) {
+              addTopLevelAdminMenus(rootModel)
+            }
           }
-        })
-      }),
-    }))
+          // Get and set server last change sequence into session storage
+          yield self.updateLastChangeSequenceNumber()
+          // Open socket listeners
+          self.addSocketListeners()
+          // request user locations
+          const { baseURL } = self
+          const uri = new URL('users/locations', baseURL).href
+          const apolloFetch = self.getFetcher({
+            locationType: 'UriLocation',
+            uri,
+          })
+          yield apolloFetch(uri, {
+            method: 'GET',
+            signal: self.controller.signal,
+          })
+          window.addEventListener('beforeunload', beforeUnloadListener)
+          document.addEventListener(
+            'visibilitychange',
+            visibilityChangeListener,
+          )
+        }),
+        removeBeforeUnloadListener() {
+          window.removeEventListener('beforeunload', beforeUnloadListener)
+        },
+        removeVisibilityChangeListener() {
+          document.removeEventListener(
+            'visibilitychange',
+            visibilityChangeListener,
+          )
+        },
+      }
+    })
     .actions((self) => ({
       afterAttach() {
         self.setRole()
@@ -449,6 +496,12 @@ const stateModelFactory = (configSchema: ApolloInternetAccountConfigModel) => {
           { name: 'ApolloInternetAccount' },
         )
       },
+      beforeDestroy() {
+        self.removeBeforeUnloadListener()
+        self.removeVisibilityChangeListener()
+        self.controller.abort('internet account beforeDestroy')
+        self.socket.close()
+      },
     }))
 }
 

package/src/ApolloRefNameAliasAdapter/ApolloRefNameAliasAdapter.ts

@@ -6,7 +6,6 @@ import {
 import type RpcServer from 'librpc-web-mod/dist/server'
 import { nanoid } from 'nanoid'
 
-import { type BackendDriver } from '../BackendDrivers'
 import { type ApolloSessionModel } from '../session'
 
 import { type RefNameAliases } from './../BackendDrivers/BackendDriver'
@@ -50,9 +49,10 @@ export default class RefNameAliasAdapter
       if (!dataStore) {
         throw new Error('No Apollo data store found')
       }
-      const backendDriver = dataStore.getBackendDriver(
-        assemblyId,
-      ) as BackendDriver
+      const backendDriver = dataStore.getBackendDriver(assemblyId)
+      if (!backendDriver) {
+        throw new Error('No backend driver found')
+      }
       const refNameAliases = await backendDriver.getRefNameAliases(assemblyId)
       return refNameAliases
     }

package/src/ApolloSequenceAdapter/ApolloSequenceAdapter.ts

@@ -10,7 +10,6 @@ import SimpleFeature, { type Feature } from '@jbrowse/core/util/simpleFeature'
 import { type NoAssemblyRegion, type Region } from '@jbrowse/core/util/types'
 import { nanoid } from 'nanoid'
 
-import { type BackendDriver } from '../BackendDrivers'
 import { type ApolloSessionModel } from '../session'
 
 // declare global {
@@ -62,9 +61,10 @@ export class ApolloSequenceAdapter extends BaseSequenceAdapter {
       if (!dataStore) {
         throw new Error('No Apollo data store found')
       }
-      const backendDriver = dataStore.getBackendDriver(
-        assemblyId,
-      ) as BackendDriver
+      const backendDriver = dataStore.getBackendDriver(assemblyId)
+      if (!backendDriver) {
+        throw new Error('No backend driver found')
+      }
       const regions = await backendDriver.getRegions(assemblyId)
       this.regions = regions
       return regions
@@ -124,9 +124,11 @@ export class ApolloSequenceAdapter extends BaseSequenceAdapter {
           observer.error('No Apollo data store found')
           return
         }
-        const backendDriver = dataStore.getBackendDriver(
-          assemblyId,
-        ) as BackendDriver
+        const backendDriver = dataStore.getBackendDriver(assemblyId)
+        if (!backendDriver) {
+          observer.error('No backend driver found')
+          return
+        }
         const regions = await backendDriver.getRegions(
           regionWithAssemblyName.assemblyName,
         )

package/src/BackendDrivers/CollaborationServerDriver.ts

@@ -4,7 +4,12 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
-import { type AssemblySpecificChange, Change } from '@apollo-annotation/common'
+import {
+  type AssemblySpecificChange,
+  Change,
+  type FeatureChange,
+  isFeatureChange,
+} from '@apollo-annotation/common'
 import {
   type AnnotationFeatureSnapshot,
   type ApolloRefSeqI,
@@ -33,6 +38,14 @@ export interface ApolloRefSeqResponse {
   assembly: string
 }
 
+interface RefSeq {
+  refName: string
+  id: string
+  aliases: string[]
+}
+
+type RefSeqMap = Map<string, RefSeq>
+
 export interface ApolloInternetAccount extends BaseInternetAccountModel {
   baseURL: string
   socket: Socket
@@ -43,6 +56,8 @@ export interface ApolloInternetAccount extends BaseInternetAccountModel {
 export class CollaborationServerDriver extends BackendDriver {
   private inFlight = new Map<string, Promise<string>>()
 
+  private refSeqMaps = new Map<string, RefSeqMap>()
+
   private async fetch(
     internetAccount: ApolloInternetAccount,
     info: RequestInfo,
@@ -92,13 +107,12 @@ export class CollaborationServerDriver extends BackendDriver {
     if (!assembly) {
       throw new Error(`Could not find assembly with name "${assemblyName}"`)
     }
-    const { ids } = getConf(assembly, ['sequence', 'metadata']) as {
-      ids: Record<string, string>
-    }
-    const refSeq = ids[refName]
-    if (!refSeq) {
+    const refSeqMap = await this.getRefSeqMapping(assemblyName)
+    const refSeqEntry = refSeqMap.get(refName)
+    if (!refSeqEntry) {
       throw new Error(`Could not find refSeq "${refName}"`)
     }
+    const refSeq = refSeqEntry.id
     const internetAccount = this.clientStore.getInternetAccount(
       assemblyName,
     ) as ApolloInternetAccount
@@ -151,12 +165,28 @@ export class CollaborationServerDriver extends BackendDriver {
         )
         if (message.userSessionId !== token && message.channel === channel) {
           const change = Change.fromJSON(message.changeInfo)
-          await changeManager.submit(change, { submitToBackend: false })
+          if (isFeatureChange(change) && this.haveDataForChange(change)) {
+            await changeManager.submit(change, { submitToBackend: false })
+          }
         }
       })
     }
   }
 
+  private haveDataForChange(change: FeatureChange): boolean {
+    const { assembly, changedIds } = change
+    const apolloAssembly = this.clientStore.assemblies.get(assembly)
+    if (!apolloAssembly) {
+      return false
+    }
+    for (const changedId of changedIds) {
+      if (this.clientStore.getFeature(changedId)) {
+        return true
+      }
+    }
+    return false
+  }
+
   /**
    * Call backend endpoint to get sequence by criteria
    * @param region -  Searchable region containing refSeq, start and end
@@ -171,13 +201,12 @@ export class CollaborationServerDriver extends BackendDriver {
     if (!assembly) {
       throw new Error(`Could not find assembly with name "${assemblyName}"`)
     }
-    const { ids } = getConf(assembly, ['sequence', 'metadata']) as {
-      ids: Record<string, string>
-    }
-    const refSeq = ids[refName]
-    if (!refSeq) {
+    const refSeqMap = await this.getRefSeqMapping(assemblyName)
+    const refSeqEntry = refSeqMap.get(refName)
+    if (!refSeqEntry) {
       throw new Error(`Could not find refSeq "${refName}"`)
     }
+    const refSeq = refSeqEntry.id
     if (inFlightPromise) {
       const seq = await inFlightPromise
       return { seq, refSeq }
@@ -248,7 +277,11 @@ export class CollaborationServerDriver extends BackendDriver {
     return seq
   }
 
-  async getRefNameAliases(assemblyName: string): Promise<RefNameAliases[]> {
+  async getRefSeqMapping(assemblyName: string): Promise<RefSeqMap> {
+    const cachedRefSeqMap = this.refSeqMaps.get(assemblyName)
+    if (cachedRefSeqMap) {
+      return cachedRefSeqMap
+    }
     const { assemblyManager } = getSession(this.clientStore)
     const assembly = assemblyManager.get(assemblyName)
     if (!assembly) {
@@ -278,13 +311,32 @@ export class CollaborationServerDriver extends BackendDriver {
       )
     }
     const refSeqs = (await response.json()) as ApolloRefSeqResponse[]
-    return refSeqs.map((refSeq) => {
-      return {
-        refName: refSeq.name,
-        aliases: [refSeq._id, ...refSeq.aliases],
-        uniqueId: `alias-${refSeq._id}`,
-      }
-    }) as RefNameAliases[]
+    const refSeqMap = new Map<string, RefSeq>(
+      refSeqs.map((refSeq) => [
+        refSeq.name,
+        { refName: refSeq.name, id: refSeq._id, aliases: refSeq.aliases },
+      ]),
+    )
+    this.refSeqMaps.set(assemblyName, refSeqMap)
+    return refSeqMap
+  }
+
+  async getRefNameAliases(assemblyName: string): Promise<RefNameAliases[]> {
+    const refSeqMap = await this.getRefSeqMapping(assemblyName)
+    return [...refSeqMap.values()].map((refSeq) => ({
+      refName: refSeq.refName,
+      aliases: [...new Set([refSeq.id, ...refSeq.aliases])],
+      uniqueId: `alias-${refSeq.id}`,
+    }))
+  }
+
+  async getRefSeqId(assemblyName: string, refName: string) {
+    const refSeqMap = await this.getRefSeqMapping(assemblyName)
+    if (!refSeqMap) {
+      return
+    }
+    const refSeq = refSeqMap.get(refName)
+    return refSeq?.id
   }
 
   async getRegions(assemblyName: string): Promise<Region[]> {

package/src/BackendDrivers/DesktopFileDriver.ts

@@ -13,7 +13,7 @@ import {
   annotationFeatureToGFF3,
   splitStringIntoChunks,
 } from '@apollo-annotation/shared'
-import gff, { type GFF3Item } from '@gmod/gff'
+import { type GFF3Item, formatSync } from '@gmod/gff'
 import { getConf } from '@jbrowse/core/configuration'
 import { type Region, getSession } from '@jbrowse/core/util'
 import { getSnapshot } from 'mobx-state-tree'
@@ -165,7 +165,7 @@ export class DesktopFileDriver extends BackendDriver {
       })
     }
 
-    const gff3Contents = gff.formatSync(gff3Items)
+    const gff3Contents = formatSync(gff3Items)
 
     // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/consistent-type-imports
     const fs = require('node:fs') as typeof import('fs')