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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apollo-annotation/jbrowse-plugin-apollo",
-  "version": "0.3.6",
+  "version": "0.3.8",
   "description": "Apollo plugin for JBrowse 2",
   "keywords": [
     "jbrowse",
@@ -48,15 +48,15 @@
     }
   },
   "dependencies": {
-    "@apollo-annotation/common": "^0.3.6",
-    "@apollo-annotation/mst": "^0.3.6",
-    "@apollo-annotation/shared": "^0.3.6",
+    "@apollo-annotation/common": "^0.3.8",
+    "@apollo-annotation/mst": "^0.3.8",
+    "@apollo-annotation/shared": "^0.3.8",
     "@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",
+    "@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,12 +71,12 @@
     "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",
@@ -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,7 +61,9 @@ const stateModelFactory = (configSchema: ApolloInternetAccountConfigModel) => {
     }))
     .volatile(() => ({
       role: undefined as Role | undefined,
+      controller: new AbortController(),
     }))
+
     .actions((self) => {
       let roleNotificationSent = false
       return {
@@ -205,7 +207,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 +241,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 +287,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 +324,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 +350,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 +358,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 +380,10 @@ const stateModelFactory = (configSchema: ApolloInternetAccountConfigModel) => {
     }))
     .actions((self) => {
       async function postUserLocation(userLoc: UserLocation[]) {
-        const { baseURL } = self
+        if (!isAlive(self)) {
+          return
+        }
+        const { baseURL, controller } = self
         const url = new URL('users/userLocation', baseURL).href
         const userLocation = new URLSearchParams(JSON.stringify(userLoc))
 
@@ -368,6 +395,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"
@@ -395,7 +423,7 @@ const stateModelFactory = (configSchema: ApolloInternetAccountConfigModel) => {
         if (role === 'admin') {
           const rootModel = getRoot(self)
           if (isAbstractMenuManager(rootModel)) {
-            addMenuItems(rootModel)
+            addTopLevelAdminMenus(rootModel)
           }
         }
         // Get and set server last change sequence into session storage
@@ -409,7 +437,10 @@ const stateModelFactory = (configSchema: ApolloInternetAccountConfigModel) => {
           locationType: 'UriLocation',
           uri,
         })
-        yield apolloFetch(uri, { method: 'GET' })
+        yield apolloFetch(uri, {
+          method: 'GET',
+          signal: self.controller.signal,
+        })
         window.addEventListener('beforeunload', () => {
           self.postUserLocation([])
         })
@@ -449,6 +480,10 @@ const stateModelFactory = (configSchema: ApolloInternetAccountConfigModel) => {
           { name: 'ApolloInternetAccount' },
         )
       },
+      beforeDestroy() {
+        self.controller.abort('internet account beforeDestroy')
+        self.socket.close()
+      },
     }))
 }
 

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,
@@ -151,12 +156,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

package/src/ChangeManager.ts

@@ -30,6 +30,7 @@ export class ChangeManager {
   constructor(private dataStore: ClientDataStore & IAnyStateTreeNode) {}
 
   recentChanges: Change[] = []
+  undoneChanges: Change[] = []
 
   async submit(change: Change, opts: SubmitOpts = {}) {
     const {
@@ -41,10 +42,15 @@ export class ChangeManager {
     const session = getSession(this.dataStore)
     const controller = new AbortController()
 
-    const { jobsManager } = getSession(
+    const { jobsManager, isLocked } = getSession(
       this.dataStore,
     ) as unknown as ApolloSessionModel
 
+    if (isLocked) {
+      session.notify('Cannot submit changes in locked mode')
+      return
+    }
+
     const job = {
       name: change.typeName,
       statusMessage: 'Pre-validating',
@@ -76,7 +82,10 @@ export class ChangeManager {
         jobsManager.abortJob(job.name, String(error))
       }
       console.error(error)
-      session.notify(String(error), 'error')
+      session.notify(
+        `Error encountered in client: ${String(error)}. Data may be out of sync, please refresh the page`,
+        'error',
+      )
       return
     }
 
@@ -87,7 +96,7 @@ export class ChangeManager {
     )
     if (!results2.ok) {
       // notify of invalid change and revert
-      await this.revert(change)
+      await this.undo(change)
     }
 
     if (submitToBackend) {
@@ -108,7 +117,7 @@ export class ChangeManager {
         }
         console.error(error)
         session.notify(String(error), 'error')
-        await this.revert(change, false)
+        await this.undo(change, false)
         return
       }
       if (!backendResult.ok) {
@@ -117,16 +126,16 @@ export class ChangeManager {
           jobsManager.abortJob(job.name, msg)
         }
         session.notify(msg, 'error')
-        await this.revert(change, false)
+        await this.undo(change, false)
         return
       }
       if (change.notification) {
         session.notify(change.notification, 'success')
       }
-    }
-    if (addToRecents) {
-      // Push the change into array
-      this.recentChanges.push(change)
+      if (addToRecents) {
+        this.recentChanges.push(change)
+        this.undoneChanges = []
+      }
     }
 
     if (updateJobsManager) {
@@ -134,21 +143,36 @@ export class ChangeManager {
     }
   }
 
-  async revert(change: Change, submitToBackend = true) {
+  async undo(change: Change, submitToBackend = true) {
     const inverseChange = change.getInverse()
-    return this.submit(inverseChange, { submitToBackend, addToRecents: false })
+    const opts = { submitToBackend, addToRecents: false }
+    return this.submit(inverseChange, opts)
+  }
+
+  async redo(change: Change, submitToBackend = true) {
+    const opts = { submitToBackend, addToRecents: false }
+    return this.submit(change, opts)
   }
 
-  /**
-   * Undo the last change
-   */
-  async revertLastChange() {
+  async undoLastChange() {
+    const session = getSession(this.dataStore)
     const lastChange = this.recentChanges.pop()
     if (!lastChange) {
-      const session = getSession(this.dataStore)
-      session.notify('No changes to undo!', 'warning')
+      session.notify('No changes to undo!', 'info')
+      return
+    }
+    this.undoneChanges.push(lastChange)
+    return this.undo(lastChange)
+  }
+
+  async redoLastChange() {
+    const session = getSession(this.dataStore)
+    const lastChange = this.undoneChanges.pop()
+    if (!lastChange) {
+      session.notify('No changes to redo!', 'info')
       return
     }
-    return this.revert(lastChange)
+    this.recentChanges.push(lastChange)
+    return this.redo(lastChange)
   }
 }

package/src/FeatureDetailsWidget/ApolloTranscriptDetailsWidget.tsx

@@ -58,7 +58,7 @@ export const ApolloTranscriptDetailsWidget = observer(
     model: ApolloTranscriptDetailsWidgetState
   }) {
     const { classes } = useStyles()
-    const DEFAULT_PANELS = ['summary', 'location', 'attrs']
+    const DEFAULT_PANELS = ['summary', 'location']
     const [panelState, setPanelState] = useState<string[]>(DEFAULT_PANELS)
 
     const { model } = props
@@ -106,10 +106,53 @@ export const ApolloTranscriptDetailsWidget = observer(
       }
     }
 
-    const CustomComponent = pluginManager.evaluateExtensionPoint(
-      'Apollo-TranscriptDetailsCustomComponent',
+    const CustomComponentInsideSummary = pluginManager.evaluateExtensionPoint(
+      'Apollo-TranscriptDetailsCustomComponent-InsideSummary',
       NoOpCustomComponent,
-      props,
+      { feature, session },
+    ) as React.ElementType<CustomComponentProps>
+
+    const CustomComponentAfterSummary = pluginManager.evaluateExtensionPoint(
+      'Apollo-TranscriptDetailsCustomComponent-AfterSummary',
+      NoOpCustomComponent,
+      { feature, session },
+    ) as React.ElementType<CustomComponentProps>
+
+    const CustomComponentInsideLocation = pluginManager.evaluateExtensionPoint(
+      'Apollo-TranscriptDetailsCustomComponent-InsideLocation',
+      NoOpCustomComponent,
+      { feature, session },
+    ) as React.ElementType<CustomComponentProps>
+
+    const CustomComponentAfterLocation = pluginManager.evaluateExtensionPoint(
+      'Apollo-TranscriptDetailsCustomComponent-AfterLocation',
+      NoOpCustomComponent,
+      { feature, session },
+    ) as React.ElementType<CustomComponentProps>
+
+    const CustomComponentInsideAttributes =
+      pluginManager.evaluateExtensionPoint(
+        'Apollo-TranscriptDetailsCustomComponent-InsideAttributes',
+        NoOpCustomComponent,
+        { feature, session },
+      ) as React.ElementType<CustomComponentProps>
+
+    const CustomComponentAfterAttributes = pluginManager.evaluateExtensionPoint(
+      'Apollo-TranscriptDetailsCustomComponent-AfterAttributes',
+      NoOpCustomComponent,
+      { feature, session },
+    ) as React.ElementType<CustomComponentProps>
+
+    const CustomComponentInsideSequence = pluginManager.evaluateExtensionPoint(
+      'Apollo-TranscriptDetailsCustomComponent-InsideSequence',
+      NoOpCustomComponent,
+      { feature, session },
+    ) as React.ElementType<CustomComponentProps>
+
+    const CustomComponentAfterSequence = pluginManager.evaluateExtensionPoint(
+      'Apollo-TranscriptDetailsCustomComponent-AfterSequence',
+      NoOpCustomComponent,
+      { feature, session },
     ) as React.ElementType<CustomComponentProps>
 
     return (
@@ -131,9 +174,10 @@ export const ApolloTranscriptDetailsWidget = observer(
           </StyledAccordionSummary>
           <AccordionDetails>
             <TranscriptWidgetSummary feature={feature} refName={refName} />
+            <CustomComponentInsideSummary session={session} feature={feature} />
           </AccordionDetails>
         </Accordion>
-        <CustomComponent session={session} feature={feature} />
+        <CustomComponentAfterSummary session={session} feature={feature} />
         <Accordion
           style={{ marginTop: 5 }}
           expanded={panelState.includes('location')}
@@ -157,8 +201,13 @@ export const ApolloTranscriptDetailsWidget = observer(
               session={apolloSession}
               assembly={currentAssembly._id || ''}
             />
+            <CustomComponentInsideLocation
+              session={session}
+              feature={feature}
+            />
           </AccordionDetails>
         </Accordion>
+        <CustomComponentAfterLocation session={session} feature={feature} />
         <Accordion
           style={{ marginTop: 5 }}
           expanded={panelState.includes('attrs')}
@@ -189,8 +238,13 @@ export const ApolloTranscriptDetailsWidget = observer(
               assembly={currentAssembly._id || ''}
               editable={editable}
             />
+            <CustomComponentInsideAttributes
+              session={session}
+              feature={feature}
+            />
           </AccordionDetails>
         </Accordion>
+        <CustomComponentAfterAttributes session={session} feature={feature} />
         <Accordion
           style={{ marginTop: 5 }}
           expanded={panelState.includes('sequence')}
@@ -216,8 +270,13 @@ export const ApolloTranscriptDetailsWidget = observer(
                 refName={refName}
               />
             )}
+            <CustomComponentInsideSequence
+              session={session}
+              feature={feature}
+            />
           </AccordionDetails>
         </Accordion>
+        <CustomComponentAfterSequence feature={feature} session={session} />
       </div>
     )
   },

package/src/FeatureDetailsWidget/Attributes.tsx

@@ -105,13 +105,15 @@ export const Attributes = observer(function Attributes({
       typeName: 'FeatureAttributeChange',
       assembly,
       featureId: _id,
-      attributes: remainingAttributes,
+      oldAttributes: attributesSerialized,
+      newAttributes: remainingAttributes,
     })
     void changeManager.submit(change)
   }
 
   function modifyFeatureAttribute(key: string, attribute: string[]) {
     const serializedAttributes = { ...getSnapshot(attributes) }
+    const oldAttributes = structuredClone(serializedAttributes)
     if (!(key in serializedAttributes)) {
       notify(`"${key}" not found in feature attributes`, 'error')
       return
@@ -127,13 +129,15 @@ export const Attributes = observer(function Attributes({
       typeName: 'FeatureAttributeChange',
       assembly,
       featureId: feature._id,
-      attributes: serializedAttributes,
+      oldAttributes,
+      newAttributes: serializedAttributes,
     })
     void changeManager.submit(change)
   }
 
   function addFeatureAttribute(key: string, attribute: string[]) {
     const serializedAttributes = { ...getSnapshot(attributes) }
+    const oldAttributes = structuredClone(serializedAttributes)
     if (key in serializedAttributes) {
       notify(`Feature already has attribute "${key}"`, 'error')
       return
@@ -145,7 +149,8 @@ export const Attributes = observer(function Attributes({
       typeName: 'FeatureAttributeChange',
       assembly,
       featureId: feature._id,
-      attributes: serializedAttributes,
+      oldAttributes,
+      newAttributes: serializedAttributes,
     })
     void changeManager.submit(change)
   }