@apollo-annotation/jbrowse-plugin-apollo 1.0.0 → 1.1.0

package/src/components/ImportAnnotations.tsx

@@ -0,0 +1,108 @@
+/* eslint-disable @typescript-eslint/unbound-method */
+/* eslint-disable @typescript-eslint/no-misused-promises */
+import {
+  AddFeatureChange,
+  gff3ToAnnotationFeature,
+} from '@apollo-annotation/shared'
+import { GFFTransformer } from '@gmod/gff'
+import {
+  Button,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  LinearProgress,
+} from '@mui/material'
+import React, { useState } from 'react'
+
+import type { ChangeManager } from '../ChangeManager'
+import type { ApolloSessionModel } from '../session'
+
+import { Dialog } from './Dialog'
+
+interface ImportAnnotationsProps {
+  session: ApolloSessionModel
+  handleClose(): void
+  assemblyName: string
+}
+
+export function ImportAnnotations({
+  assemblyName,
+  handleClose,
+  session,
+}: ImportAnnotationsProps) {
+  const { changeManager } = session.apolloDataStore as {
+    changeManager: ChangeManager
+  }
+  const [file, setFile] = useState<File>()
+  const [errorMessage, setErrorMessage] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  function handleChangeFile(e: React.ChangeEvent<HTMLInputElement>) {
+    if (e.target.files) {
+      setFile(e.target.files[0])
+    }
+  }
+
+  async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    if (!file) {
+      return
+    }
+    setLoading(true)
+    setErrorMessage('')
+    try {
+      const stream = file
+        .stream()
+        .pipeThrough(
+          new TransformStream(new GFFTransformer({ parseSequences: false })),
+        )
+      for await (const value of stream) {
+        const annotationFeature = gff3ToAnnotationFeature(value)
+        const change = new AddFeatureChange({
+          changedIds: [annotationFeature._id],
+          typeName: 'AddFeatureChange',
+          assembly: assemblyName,
+          addedFeature: annotationFeature,
+        })
+        await changeManager.submit(change)
+      }
+      handleClose()
+    } catch (error) {
+      setErrorMessage(String(error))
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <Dialog open title="Import annotations" handleClose={handleClose}>
+      {loading ? <LinearProgress /> : null}
+      <form onSubmit={onSubmit}>
+        <DialogContent>
+          <DialogContentText>
+            Import annotations from a GFF3 file into the current Apollo track.
+            Features are parsed and stored locally in the browser, so importing
+            very large GFF3 files is not recommended.
+          </DialogContentText>
+          <input
+            type="file"
+            accept=".gff,.gff3"
+            onChange={handleChangeFile}
+            disabled={loading}
+          />
+          {errorMessage ? (
+            <DialogContentText color="error">{errorMessage}</DialogContentText>
+          ) : null}
+        </DialogContent>
+        <DialogActions>
+          <Button variant="contained" type="submit" disabled={!file || loading}>
+            Import
+          </Button>
+          <Button variant="outlined" onClick={handleClose}>
+            Cancel
+          </Button>
+        </DialogActions>
+      </form>
+    </Dialog>
+  )
+}

package/src/components/ManageUsers.tsx

@@ -25,7 +25,6 @@ import {
   type GridRowId,
   type GridRowModel,
   type GridRowParams,
-  GridToolbar,
 } from '@mui/x-data-grid'
 import React, { useEffect, useState } from 'react'
 
@@ -215,7 +214,7 @@ export function ManageUsers({
             rows={users}
             columns={gridColumns}
             getRowId={(row) => row._id}
-            slots={{ toolbar: GridToolbar }}
+            showToolbar
             getRowHeight={() => 'auto'}
             isCellEditable={(params: GridCellParams) =>
               !isCurrentUser(params.id)

package/src/components/OntologyTermAutocomplete.tsx

@@ -235,8 +235,6 @@ async function getValidTerms(
     }
   }
 
-  if (!result) {
-    result = await ontologyStore.getAllTerms()
-  }
+  result ??= await ontologyStore.getAllTerms()
   return filterTerms ? result.filter((element) => filterTerms(element)) : result
 }

package/src/components/OntologyTermMultiSelect.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @eslint-react/set-state-in-effect */
 /* eslint-disable @typescript-eslint/unbound-method */
 /* eslint-disable @typescript-eslint/use-unknown-in-catch-callback-variable */
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
@@ -78,7 +79,7 @@ function TermTagWithTooltip({
         .objectStore('nodes')
         .get(termUrl)
 
-      if (term && term.lbl && !signal.aborted) {
+      if (term?.lbl && !signal.aborted) {
         setDescription(term.lbl || 'no label')
       }
     }
@@ -304,6 +305,7 @@ function HighlightedText(props: { str: string; search: string }) {
     <>
       {parts.map((part, index) => (
         <Typography
+          // eslint-disable-next-line @eslint-react/no-array-index-key
           key={index}
           component="span"
           sx={{ fontWeight: part.highlight ? 'bold' : 'regular' }}

package/src/components/ViewChangeLog.tsx

@@ -4,6 +4,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 import { changeRegistry } from '@apollo-annotation/common'
+import type { Assembly } from '@jbrowse/core/assemblyManager/assembly'
 import type { AbstractSessionModel } from '@jbrowse/core/util'
 import { makeStyles } from '@jbrowse/core/util/tss-react'
 import {
@@ -102,7 +103,7 @@ export function ViewChangeLog({
 
   const { apolloDataStore } = session
   const { assemblyManager } = session as unknown as AbstractSessionModel
-  const assembly = assemblyManager.get(assemblyId)
+  const assembly = assemblyManager.get(assemblyId) as Assembly | undefined
   const assemblyName = assembly?.displayName ?? assemblyId
 
   const gridColumns: GridColDef[] = [

package/src/components/index.ts

@@ -1,12 +1,14 @@
 export * from './AddAssembly'
 export * from './AddAssemblyAliases'
 export * from './AddChildFeature'
+export * from './AddCodingSequence'
 export * from './AddFeature'
 export * from './ColorFeature'
 export * from './CopyFeature'
 export * from './DeleteAssembly'
 export * from './DeleteFeature'
 export * from './DownloadGFF3'
+export * from './ImportAnnotations'
 export * from './ImportFeatures'
 export * from './LogOut'
 export * from './ManageChecks'

package/src/extensions/annotationFromPileup.ts

@@ -8,11 +8,7 @@ import type {
   DisplayType,
   PluggableElementType,
 } from '@jbrowse/core/pluggableElementTypes'
-import {
-  type AbstractSessionModel,
-  getContainingView,
-  getSession,
-} from '@jbrowse/core/util'
+import { getContainingView, getSession } from '@jbrowse/core/util'
 import type { Feature } from '@jbrowse/core/util/simpleFeature'
 import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 import ObjectID from 'bson-objectid'
@@ -59,9 +55,25 @@ export function annotationFromPileup(pluggableElement: PluggableElementType) {
       getAnnotationFeature(jbrowseFeature: Feature, refSeqId: string) {
         const start: number = jbrowseFeature.get('start')
         const end: number = jbrowseFeature.get('end')
-        const strand = jbrowseFeature.get('strand') as 1 | -1 | undefined
         const name = jbrowseFeature.get('name') as string | undefined
 
+        let strand: 1 | -1 | undefined
+        const tags = jbrowseFeature.get('tags') as Record<
+          string,
+          string | number | undefined
+        >
+        const { ts, TS, XS } = tags
+        for (const tag of [ts, TS, XS]) {
+          if (!strand && tag) {
+            if ([1, '1', '+'].includes(tag)) {
+              strand = 1
+            } else if ([-1, '-1', '-'].includes(tag)) {
+              strand = -1
+            }
+          }
+        }
+        strand ??= jbrowseFeature.get('strand') as 1 | -1 | undefined
+
         const cigarData = jbrowseFeature.get('CIGAR') as string
         const ops = parseCigar(cigarData)
         let position = start
@@ -81,9 +93,7 @@ export function annotationFromPileup(pluggableElement: PluggableElementType) {
             case 'M':
             case '=':
             case 'X': {
-              if (currentExonStart === undefined) {
-                currentExonStart = position
-              }
+              currentExonStart ??= position
               position += len
               break
             }
@@ -190,24 +200,22 @@ export function annotationFromPileup(pluggableElement: PluggableElementType) {
                   }
                   refSeqId = backendRefSeqId
                 }
-                ;(session as unknown as AbstractSessionModel).queueDialog(
-                  (doneCallback) => [
-                    CreateApolloAnnotation,
-                    {
-                      session,
-                      handleClose: () => {
-                        doneCallback()
-                      },
-                      annotationFeature: self.getAnnotationFeature(
-                        jbrowseFeature,
-                        refSeqId,
-                      ),
-                      assembly,
-                      refSeqId,
-                      region,
+                session.queueDialog((doneCallback) => [
+                  CreateApolloAnnotation,
+                  {
+                    session,
+                    handleClose: () => {
+                      doneCallback()
                     },
-                  ],
-                )
+                    annotationFeature: self.getAnnotationFeature(
+                      jbrowseFeature,
+                      refSeqId,
+                    ),
+                    assembly,
+                    refSeqId,
+                    region,
+                  },
+                ])
               },
             },
           ]

package/src/index.ts

@@ -1,5 +1,4 @@
 /* eslint-disable @typescript-eslint/unbound-method */
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 /* eslint-disable @typescript-eslint/no-misused-promises */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { changeRegistry, checkRegistry } from '@apollo-annotation/common'
@@ -78,8 +77,10 @@ import { addTopLevelMenus } from './menus'
 import { type ApolloSessionModel, extendSession } from './session'
 
 interface RpcHandle {
-  on(event: string, listener: (event: MessageEvent) => void): this
-  workers: Worker[]
+  client: {
+    on?(event: string, listener: (event: MessageEvent) => void): void
+  }
+  worker: Worker
 }
 
 interface ApolloMessageData {
@@ -356,10 +357,10 @@ export default class ApolloPlugin extends Plugin {
       pluginManager.addToExtensionPoint(
         'Core-extendWorker',
         (handle: RpcHandle) => {
-          if (!('on' in handle && handle.on)) {
+          if (!('on' in handle.client && handle.client.on)) {
             return handle
           }
-          handle.on('apollo', async (event: MessageEvent) => {
+          handle.client.on('apollo', async (event: MessageEvent) => {
             if (!isApolloMessageData(event)) {
               return
             }
@@ -382,7 +383,7 @@ export default class ApolloPlugin extends Plugin {
                 }
                 const { seq: sequence } =
                   await backendDriver.getSequence(region)
-                handle.workers[0].postMessage({
+                handle.worker.postMessage({
                   apollo,
                   messageId,
                   sequence,
@@ -404,7 +405,7 @@ export default class ApolloPlugin extends Plugin {
                   break
                 }
                 const regions = await backendDriver.getRegions(assembly)
-                handle.workers[0].postMessage({
+                handle.worker.postMessage({
                   apollo,
                   messageId,
                   regions,
@@ -427,7 +428,7 @@ export default class ApolloPlugin extends Plugin {
                 }
                 const refNameAliases =
                   await backendDriver.getRefNameAliases(assembly)
-                handle.workers[0].postMessage({
+                handle.worker.postMessage({
                   apollo,
                   messageId,
                   refNameAliases,

package/src/session/ClientDataStore.ts

@@ -12,6 +12,7 @@ import {
   CheckResult,
   type CheckResultSnapshot,
 } from '@apollo-annotation/mst'
+import type { Assembly } from '@jbrowse/core/assemblyManager/assembly'
 import {
   type AnyConfigurationModel,
   getConf,
@@ -106,7 +107,9 @@ export function clientDataStoreFactory(
         let ref = apolloAssembly.refSeqs.get(feature.refSeq)
         if (!ref) {
           // maybe it's a valid refName that we haven't loaded yet
-          const assembly = assemblyManager.get(assemblyId)
+          const assembly = assemblyManager.get(assemblyId) as
+            | Assembly
+            | undefined
           if (!assembly) {
             throw new Error(
               `Could not find assembly "${assemblyId}" to add feature "${feature._id}"`,
@@ -291,19 +294,17 @@ export function clientDataStoreFactory(
             continue
           }
           const { assemblyName, refName } = region
-          let assembly = self.assemblies.get(assemblyName)
-          if (!assembly) {
-            assembly = self.assemblies.put({ _id: assemblyName, refSeqs: {} })
-          }
+          const assembly =
+            self.assemblies.get(assemblyName) ??
+            self.assemblies.put({ _id: assemblyName, refSeqs: {} })
           const [firstFeature] = features
-          let ref = assembly.refSeqs.get(firstFeature.refSeq)
-          if (!ref) {
-            ref = assembly.refSeqs.put({
+          const ref =
+            assembly.refSeqs.get(firstFeature.refSeq) ??
+            assembly.refSeqs.put({
               _id: firstFeature.refSeq,
               name: refName,
               features: {},
             })
-          }
           for (const feature of features) {
             if (!ref.features.has(feature._id)) {
               ref.features.put(feature)
@@ -320,18 +321,12 @@ export function clientDataStoreFactory(
           }
           const { refSeq, seq } = yield backendDriver.getSequence(region)
           const { assemblyName, end, refName, start } = region
-          let assembly = self.assemblies.get(assemblyName)
-          if (!assembly) {
-            assembly = self.assemblies.put({ _id: assemblyName, refSeqs: {} })
-          }
-          let ref = assembly.refSeqs.get(refSeq)
-          if (!ref) {
-            ref = assembly.refSeqs.put({
-              _id: refSeq,
-              name: refName,
-              sequence: [],
-            })
-          }
+          const assembly =
+            self.assemblies.get(assemblyName) ??
+            self.assemblies.put({ _id: assemblyName, refSeqs: {} })
+          const ref =
+            assembly.refSeqs.get(refSeq) ??
+            assembly.refSeqs.put({ _id: refSeq, name: refName, sequence: [] })
           ref.addSequence({ start, stop: end, sequence: seq })
         }
       }),

package/src/session/handleApolloFeaturesUrlParam.ts

@@ -0,0 +1,122 @@
+import type { AnnotationFeatureSnapshot } from '@apollo-annotation/mst'
+import { AddFeatureChange } from '@apollo-annotation/shared'
+import type { AbstractSessionModel } from '@jbrowse/core/util'
+import type { Assembly } from '@jbrowse/core/assemblyManager/assembly'
+import equal from 'fast-deep-equal/es6'
+
+import { LocalDriver } from '../BackendDrivers'
+import { openDb } from '../BackendDrivers/LocalDriver/db'
+import { DuplicateFeatureDialog } from '../components/DuplicateFeatureDialog'
+
+import type { ClientDataStoreModel } from './ClientDataStore'
+
+export function toUrlSafeBase64(base64: string) {
+  return base64
+    .replaceAll('+', '-') // Replace + with -
+    .replaceAll('/', '_') // Replace / with _
+    .replace(/=+$/, '') // Remove padding characters
+}
+
+export function fromUrlSafeBase64(urlSafeBase64: string) {
+  let base64 = urlSafeBase64.replaceAll('-', '+').replaceAll('_', '/')
+  const pad = base64.length % 4
+  if (pad) {
+    base64 += '='.repeat(4 - pad)
+  }
+  return base64
+}
+
+export async function compress(data: unknown) {
+  const json = JSON.stringify(data)
+  const bytes = new TextEncoder().encode(json)
+  const stream = new Blob([bytes]).stream()
+  const compressionStream = new CompressionStream('gzip')
+  const compressedStream = stream.pipeThrough(compressionStream)
+  const response = new Response(compressedStream)
+  const compressed = await response.arrayBuffer()
+  // eslint-disable-next-line unicorn/prefer-code-point
+  return btoa(String.fromCharCode(...new Uint8Array(compressed)))
+}
+
+// Base64 decode + decompress
+export async function decompress(encoded: string): Promise<unknown> {
+  const binaryString = atob(encoded)
+  // eslint-disable-next-line unicorn/prefer-code-point
+  const bytes = Uint8Array.from(binaryString, (char) => char.charCodeAt(0))
+  const stream = new Blob([bytes]).stream()
+  const decompressionStream = new DecompressionStream('gzip')
+  const decompressedStream = stream.pipeThrough(decompressionStream)
+  const response = new Response(decompressedStream)
+  const decompressed = await response.arrayBuffer()
+  return JSON.parse(new TextDecoder().decode(decompressed))
+}
+
+export async function handleApolloFeaturesUrlParam(
+  encodedFeatures: string,
+  apolloDataStore: ClientDataStoreModel,
+  assemblyManager: AbstractSessionModel['assemblyManager'],
+  session: AbstractSessionModel,
+): Promise<void> {
+  const base64 = fromUrlSafeBase64(encodedFeatures)
+  const decompressed = await decompress(base64)
+  const featuresData = decompressed as Record<
+    string,
+    AnnotationFeatureSnapshot[]
+  >
+  for (const [assemblyName, featureSnapshots] of Object.entries(featuresData)) {
+    const backendDriver = apolloDataStore.getBackendDriver(assemblyName)
+    if (!(backendDriver instanceof LocalDriver)) {
+      continue
+    }
+    const assembly = (await assemblyManager.waitForAssembly(assemblyName)) as
+      | Assembly
+      | undefined
+    if (!assembly) {
+      throw new Error(`Assembly not found: "${assemblyName}"`)
+    }
+    const { regions } = assembly
+    if (!regions) {
+      throw new Error(`Assembly not found: "${assemblyName}"`)
+    }
+    const refNames = regions.map((r) => r.refName)
+    const db = await openDb(assemblyName, refNames)
+    for (const featureSnapshot of featureSnapshots) {
+      const storeName = `features-${featureSnapshot.refSeq}`
+      const existing = (await db.get(storeName, featureSnapshot._id)) as
+        | AnnotationFeatureSnapshot
+        | undefined
+      if (existing === undefined) {
+        const change = new AddFeatureChange({
+          typeName: 'AddFeatureChange',
+          assembly: assemblyName,
+          changedIds: [featureSnapshot._id],
+          addedFeature: featureSnapshot,
+        })
+        await apolloDataStore.changeManager.submit(change)
+      } else {
+        // get rid of undefined values in JSON
+        // eslint-disable-next-line unicorn/prefer-structured-clone
+        const existingFeature = JSON.parse(
+          JSON.stringify(existing),
+        ) as AnnotationFeatureSnapshot
+        if (!equal(featureSnapshot, existingFeature)) {
+          await new Promise<void>((resolve) => {
+            session.queueDialog((doneCallback) => [
+              DuplicateFeatureDialog,
+              {
+                featureSnapshot,
+                existingFeature,
+                assemblyName,
+                changeManager: apolloDataStore.changeManager,
+                handleClose: () => {
+                  doneCallback()
+                  resolve()
+                },
+              },
+            ])
+          })
+        }
+      }
+    }
+  }
+}

package/src/session/session.ts

@@ -18,9 +18,11 @@ import {
   readConfObject,
 } from '@jbrowse/core/configuration'
 import type { BaseTrackConfig } from '@jbrowse/core/pluggableElementTypes'
-import type {
-  AbstractSessionModel,
-  SessionWithAddTracks,
+import {
+  isElectron,
+  type AbstractSessionModel,
+  type SessionWithAddTracks,
+  type SessionWithDrawerWidgets,
 } from '@jbrowse/core/util'
 import {
   type Instance,
@@ -45,6 +47,7 @@ import {
   type ClientDataStoreModel,
   clientDataStoreFactory,
 } from './ClientDataStore'
+import { handleApolloFeaturesUrlParam } from './handleApolloFeaturesUrlParam'
 
 export interface ApolloSession extends AbstractSessionModel {
   apolloDataStore: ClientDataStoreModel
@@ -169,10 +172,7 @@ export function extendSession(
             for (const block of dynamicBlocks.contentBlocks) {
               const { assemblyName, end, refName, start } = block
               const assembly = self.apolloDataStore.assemblies.get(assemblyName)
-              if (
-                assembly &&
-                assembly.backendDriverType === 'CollaborationServerDriver'
-              ) {
+              if (assembly?.backendDriverType === 'CollaborationServerDriver') {
                 locations.push({ assemblyName, refName, start, end })
               }
             }
@@ -245,8 +245,8 @@ export function extendSession(
                     const assembly =
                       self.apolloDataStore.assemblies.get(assemblyName)
                     if (
-                      assembly &&
-                      assembly.backendDriverType === 'CollaborationServerDriver'
+                      assembly?.backendDriverType ===
+                      'CollaborationServerDriver'
                     ) {
                       locations.push({ assemblyName, refName, start, end })
                     }
@@ -409,6 +409,46 @@ export function extendSession(
         )
       },
     }))
+    .actions((self) => ({
+      async afterCreate() {
+        if (isElectron) {
+          return
+        }
+        const url = new URL(globalThis.location.href)
+        const apolloFeatures = url.searchParams.get('apolloFeatures')
+        if (!apolloFeatures) {
+          return
+        }
+        const { assemblyManager } = self as unknown as AbstractSessionModel
+        await handleApolloFeaturesUrlParam(
+          apolloFeatures,
+          self.apolloDataStore,
+          assemblyManager,
+          self as unknown as AbstractSessionModel,
+        )
+        await new Promise((resolve) => setTimeout(resolve, 2000))
+        const updatedURL = new URL(globalThis.location.href)
+        updatedURL.searchParams.delete('apolloFeatures')
+        globalThis.history.replaceState(null, '', updatedURL.toString())
+      },
+      afterAttach() {
+        addDisposer(
+          self,
+          autorun((reaction) => {
+            const { focusedViewId, activeWidgets } =
+              self as unknown as SessionWithDrawerWidgets
+            if (!(focusedViewId && activeWidgets)) {
+              return
+            }
+            const trackSelector = activeWidgets.get('hierarchicalTrackSelector')
+            // @ts-expect-error Don't have type for track selector
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+            trackSelector?.setView(focusedViewId)
+            reaction.dispose()
+          }),
+        )
+      },
+    }))
 
     .views((self) => {
       const superTrackActions = (self as unknown as AbstractSessionModel)

package/src/util/annotationFeatureUtils.ts

@@ -131,7 +131,7 @@ export function removeSkippedAttributes(
   if (feature.children) {
     const newChildren: Record<string, AnnotationFeatureSnapshot> = {}
     for (const [childId, child] of Object.entries(feature.children)) {
-      const newChild = { ...child } as AnnotationFeatureSnapshot
+      const newChild = { ...child }
       removeSkippedAttributes(newChild, skippedAttributes)
       newChildren[childId] = newChild
     }

package/src/util/displayUtils.ts

@@ -171,7 +171,7 @@ export function colorCode(letter: string, theme: Theme) {
     letterUpper === 'G' ||
     letterUpper === 'T'
   ) {
-    return theme.palette.bases[letterUpper].main.toString()
+    return theme.palette.bases[letterUpper].main
   }
   return 'lightgray'
 }

package/src/util/glyphUtils.ts

@@ -275,7 +275,7 @@ export function isSelectedFeature(
   feature: AnnotationFeature,
   selectedFeature: AnnotationFeature | undefined,
 ) {
-  return Boolean(selectedFeature && feature._id === selectedFeature._id)
+  return feature._id === selectedFeature?._id
 }
 
 function makeFeatureLabel(feature: AnnotationFeature) {
@@ -314,8 +314,8 @@ export function getContextMenuItemsForFeature(
   const role = internetAccount ? internetAccount.role : 'admin'
   const readOnly = !(role && ['admin', 'user'].includes(role))
   const [region] = regions
-  const sourceAssemblyId = display.getAssemblyId(region.assemblyName)
-  const currentAssemblyId = display.getAssemblyId(region.assemblyName)
+  const sourceAssemblyId = display.getAssemblyId(region.assemblyName) as string
+  const currentAssemblyId = display.getAssemblyId(region.assemblyName) as string
   menuItems.push(
     {
       label: makeFeatureLabel(sourceFeature),