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

package/src/components/DownloadGFF3.tsx

@@ -1,14 +1,10 @@
 /* eslint-disable @typescript-eslint/unbound-method */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 /* eslint-disable @typescript-eslint/no-misused-promises */
-import type { ApolloAssembly } from '@apollo-annotation/mst'
 import { annotationFeatureToGFF3 } from '@apollo-annotation/shared'
-import { type GFF3Item, formatSync } from '@gmod/gff'
-import type { Assembly } from '@jbrowse/core/assemblyManager/assembly'
+import { GFFFormattingTransformer } from '@gmod/gff'
 import { getConf } from '@jbrowse/core/configuration'
-import { type IMSTMap, getSnapshot } from '@jbrowse/mobx-state-tree'
+import type { AbstractSessionModel } from '@jbrowse/core/util'
 import {
   Button,
   Checkbox,
@@ -17,9 +13,8 @@ import {
   DialogContentText,
   FormControlLabel,
   FormGroup,
-  MenuItem,
-  Select,
-  type SelectChangeEvent,
+  SvgIcon,
+  type SvgIconProps,
 } from '@mui/material'
 import { saveAs } from 'file-saver'
 import React, { useState } from 'react'
@@ -27,8 +22,8 @@ import React, { useState } from 'react'
 import type {
   ApolloInternetAccount,
   CollaborationServerDriver,
-  InMemoryFileDriver,
 } from '../BackendDrivers'
+import { openDb } from '../BackendDrivers/LocalDriver/db'
 import type { ApolloSessionModel } from '../session'
 import { createFetchErrorMessage } from '../util'
 
@@ -37,67 +32,65 @@ import { Dialog } from './Dialog'
 interface DownloadGFF3Props {
   session: ApolloSessionModel
   handleClose(): void
+  assembly: string
 }
 
-export function DownloadGFF3({ handleClose, session }: DownloadGFF3Props) {
+// Icon source: https://pictogrammers.com/library/mdi/icon/export/
+export function Export(props: SvgIconProps) {
+  return (
+    <SvgIcon viewBox="0 0 24 24" {...props}>
+      <path d="M23,12L19,8V11H10V13H19V16M1,18V6C1,4.89 1.9,4 3,4H15A2,2 0 0,1 17,6V9H15V6H3V18H15V15H17V18A2,2 0 0,1 15,20H3A2,2 0 0,1 1,18Z" />
+    </SvgIcon>
+  )
+}
+
+export function DownloadGFF3({
+  handleClose,
+  session,
+  assembly: assemblyName,
+}: DownloadGFF3Props) {
   const [includeFASTA, setincludeFASTA] = useState(false)
-  const [selectedAssembly, setSelectedAssembly] = useState<Assembly>()
   const [errorMessage, setErrorMessage] = useState('')
 
-  const { collaborationServerDriver, getInternetAccount, inMemoryFileDriver } =
-    session.apolloDataStore as {
-      collaborationServerDriver: CollaborationServerDriver
-      inMemoryFileDriver: InMemoryFileDriver
-      getInternetAccount(
-        assemblyName?: string,
-        internetAccountId?: string,
-      ): ApolloInternetAccount
-    }
-  const assemblies = [
-    ...collaborationServerDriver.getAssemblies(),
-    ...inMemoryFileDriver.getAssemblies(),
-  ]
-
-  function handleChangeAssembly(e: SelectChangeEvent) {
-    const newAssembly = assemblies.find((asm) => asm.name === e.target.value)
-    setSelectedAssembly(newAssembly)
+  const { getInternetAccount } = session.apolloDataStore as {
+    collaborationServerDriver: CollaborationServerDriver
+    getInternetAccount(
+      assemblyName?: string,
+      internetAccountId?: string,
+    ): ApolloInternetAccount
   }
 
+  const { assemblyManager } = session as unknown as AbstractSessionModel
+  const assembly = assemblyManager.get(assemblyName)
+  if (!assembly) {
+    setErrorMessage(`Assembly "${assemblyName}" not found`)
+    return
+  }
+
+  const { internetAccountConfigId } = getConf(assembly, [
+    'sequence',
+    'metadata',
+  ]) as { internetAccountConfigId?: string }
+
   async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
     event.preventDefault()
     setErrorMessage('')
-    if (!selectedAssembly) {
-      setErrorMessage('Must select assembly to download')
-      return
-    }
 
-    const { internetAccountConfigId } = getConf(selectedAssembly, [
-      'sequence',
-      'metadata',
-    ]) as { internetAccountConfigId?: string }
-    if (internetAccountConfigId) {
-      await exportFromCollaborationServer(internetAccountConfigId)
-    } else {
-      exportFromMemory(session)
-    }
+    await (internetAccountConfigId
+      ? exportFromCollaborationServer(internetAccountConfigId)
+      : downloadAssemblyGFF3(assemblyName))
     handleClose()
   }
 
   async function exportFromCollaborationServer(
     internetAccountConfigId: string,
   ) {
-    if (!selectedAssembly) {
-      setErrorMessage('Must select assembly to download')
-      return
-    }
     const internetAccount = getInternetAccount(
-      selectedAssembly.configuration.name,
+      assemblyName,
       internetAccountConfigId,
     )
     const url = new URL('export/getID', internetAccount.baseURL)
-    const searchParams = new URLSearchParams({
-      assembly: selectedAssembly.name,
-    })
+    const searchParams = new URLSearchParams({ assembly: assemblyName })
     url.search = searchParams.toString()
     const uri = url.toString()
     const apolloFetch = internetAccount.getFetcher({
@@ -127,83 +120,19 @@ export function DownloadGFF3({ handleClose, session }: DownloadGFF3Props) {
     window.open(exportUri, '_blank')
   }
 
-  function exportFromMemory(session: ApolloSessionModel) {
-    if (!selectedAssembly) {
-      setErrorMessage('Must select assembly to download')
-      return
-    }
-    const { assemblies } = session.apolloDataStore as {
-      assemblies: IMSTMap<typeof ApolloAssembly>
-    }
-    const assembly = assemblies.get(selectedAssembly.name)
-    const refSeqs = assembly?.refSeqs
-    if (!refSeqs) {
-      setErrorMessage(
-        `No refSeqs found for assembly "${selectedAssembly.name}"`,
-      )
-      return
-    }
-    const gff3Items: GFF3Item[] = [{ directive: 'gff-version', value: '3' }]
-    const sequenceFeatures = getConf(selectedAssembly, [
-      'sequence',
-      'adapter',
-      'features',
-    ]) as { refName: string; start: number; end: number; seq: string }[]
-    for (const sequenceFeature of sequenceFeatures) {
-      const { end, refName, start } = sequenceFeature
-      gff3Items.push({
-        directive: 'sequence-region',
-        value: `${refName} ${start + 1} ${end}`,
-      })
-    }
-    for (const [, refSeq] of refSeqs) {
-      const { features } = refSeq
-      if (!features) {
-        continue
-      }
-      for (const [, feature] of features) {
-        gff3Items.push(annotationFeatureToGFF3(getSnapshot(feature)))
-      }
-    }
-    for (const sequenceFeature of sequenceFeatures) {
-      const { refName, seq } = sequenceFeature
-      gff3Items.push({ id: refName, description: '', sequence: seq })
-    }
-    const gff3 = formatSync(gff3Items)
-    const gff3Blob = new Blob([gff3], { type: 'text/plain;charset=utf-8' })
-    saveAs(
-      gff3Blob,
-      `${selectedAssembly.displayName ?? selectedAssembly.name}.gff3`,
-    )
-  }
-
   return (
     <Dialog
       open
-      title="Export GFF3"
+      title="Export annotations"
       handleClose={handleClose}
       maxWidth={false}
       data-testid="download-gff3"
     >
       <form onSubmit={onSubmit}>
         <DialogContent style={{ display: 'flex', flexDirection: 'column' }}>
-          <DialogContentText>Select assembly</DialogContentText>
-          <Select
-            labelId="label"
-            value={selectedAssembly?.name ?? ''}
-            onChange={handleChangeAssembly}
-            disabled={assemblies.length === 0}
-          >
-            {assemblies.map((option) => (
-              <MenuItem key={option.name} value={option.name}>
-                {option.displayName ?? option.name}
-              </MenuItem>
-            ))}
-          </Select>
           <DialogContentText>
-            Select assembly to export to GFF3
+            Exporting annotations for {assemblyName}
           </DialogContentText>
-
           <FormGroup>
             <FormControlLabel
               data-testid="include-fasta-checkbox"
@@ -213,6 +142,7 @@ export function DownloadGFF3({ handleClose, session }: DownloadGFF3Props) {
                   onChange={() => {
                     setincludeFASTA(!includeFASTA)
                   }}
+                  disabled={!internetAccountConfigId}
                 />
               }
               label="Include fasta sequence in GFF output"
@@ -220,11 +150,7 @@ export function DownloadGFF3({ handleClose, session }: DownloadGFF3Props) {
           </FormGroup>
         </DialogContent>
         <DialogActions>
-          <Button
-            disabled={!selectedAssembly}
-            variant="contained"
-            type="submit"
-          >
+          <Button variant="contained" type="submit">
             Download
           </Button>
           <Button variant="outlined" type="submit" onClick={handleClose}>
@@ -240,3 +166,48 @@ export function DownloadGFF3({ handleClose, session }: DownloadGFF3Props) {
     </Dialog>
   )
 }
+
+function getAssemblyGFF3Stream(assemblyName: string): ReadableStream<string> {
+  const featureStream = new ReadableStream({
+    async start(controller) {
+      for await (const feature of getFeaturesForAssembly(assemblyName)) {
+        const gff3Feature = annotationFeatureToGFF3(feature)
+        controller.enqueue(gff3Feature)
+      }
+      controller.close()
+    },
+  })
+  return featureStream.pipeThrough(
+    new TransformStream(new GFFFormattingTransformer()),
+  )
+}
+
+async function downloadAssemblyGFF3(assemblyName: string) {
+  const stream = getAssemblyGFF3Stream(assemblyName)
+  const fileName = `${assemblyName}.gff3`
+  try {
+    const handle = await (
+      globalThis as unknown as {
+        showSaveFilePicker: (opts: {
+          suggestedName: string
+        }) => Promise<FileSystemFileHandle>
+      }
+    ).showSaveFilePicker({ suggestedName: fileName })
+    const writable = await handle.createWritable()
+    await stream.pipeTo(writable)
+  } catch {
+    const blob = await new Response(stream).blob()
+    saveAs(blob, fileName)
+  }
+}
+
+async function* getFeaturesForAssembly(assemblyName: string) {
+  const db = await openDb(assemblyName, [])
+  for (const storeName of db.objectStoreNames) {
+    const tx = db.transaction(storeName)
+    for await (const cursor of tx.store.iterate()) {
+      yield cursor.value
+    }
+  }
+  db.close()
+}

package/src/components/DuplicateTranscript.tsx

@@ -4,6 +4,7 @@ import type {
   AnnotationFeatureSnapshot,
 } from '@apollo-annotation/mst'
 import { AddFeatureChange } from '@apollo-annotation/shared'
+import { readConfObject } from '@jbrowse/core/configuration'
 import type { AbstractSessionModel } from '@jbrowse/core/util/types'
 import { getSnapshot } from '@jbrowse/mobx-state-tree'
 import {
@@ -17,6 +18,7 @@ import React, { useState } from 'react'
 
 import type { ChangeManager } from '../ChangeManager'
 import type { ApolloSessionModel } from '../session'
+import { removeSkippedAttributes } from '../util'
 
 import { Dialog } from './Dialog'
 
@@ -71,6 +73,14 @@ export function DuplicateTranscript({
         duplicateTranscript.children = newChildren
       }
 
+      // skip attributes that are configured (SKIPPED_ATTRIBUTES_ON_COPY env var in backend)
+      const configuredSkippedAttributes = readConfObject(
+        session.getPluginConfiguration(),
+        'skippedAttributesOnCopy',
+      ) as string[] | undefined
+      const skippedAttributesOnCopy = new Set(configuredSkippedAttributes ?? [])
+      removeSkippedAttributes(duplicateTranscript, skippedAttributesOnCopy)
+
       const change = new AddFeatureChange({
         parentFeatureId: parentGene._id,
         changedIds: [parentGene._id],

package/src/components/ViewChangeLog.tsx

@@ -1,44 +1,36 @@
 /* eslint-disable @typescript-eslint/unbound-method */
 /* eslint-disable @typescript-eslint/use-unknown-in-catch-callback-variable */
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-/* eslint-disable @typescript-eslint/no-unsafe-argument */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 import { changeRegistry } from '@apollo-annotation/common'
+import type { AbstractSessionModel } from '@jbrowse/core/util'
 import { makeStyles } from '@jbrowse/core/util/tss-react'
-import { getRoot } from '@jbrowse/mobx-state-tree'
 import {
   Button,
   DialogActions,
   DialogContent,
   DialogContentText,
-  MenuItem,
-  Select,
-  type SelectChangeEvent,
 } from '@mui/material'
 import {
   DataGrid,
   type GridColDef,
+  type GridFilterModel,
+  type GridPaginationModel,
   type GridRowsProp,
-  GridToolbar,
+  type GridSortModel,
 } from '@mui/x-data-grid'
 import React, { useEffect, useState } from 'react'
 
-import type { ApolloInternetAccountModel } from '../ApolloInternetAccount/model'
-import type {
-  ApolloInternetAccount,
-  CollaborationServerDriver,
-} from '../BackendDrivers'
+import type { GetChangesOpts } from '../BackendDrivers/BackendDriver'
 import type { ApolloSessionModel } from '../session'
-import type { ApolloRootModel } from '../types'
-import { createFetchErrorMessage } from '../util'
 
 import { Dialog } from './Dialog'
 
 interface ViewChangeLogProps {
   session: ApolloSessionModel
   handleClose(): void
+  assembly: string
 }
 
 const useStyles = makeStyles()((theme) => ({
@@ -51,28 +43,67 @@ const useStyles = makeStyles()((theme) => ({
   },
 }))
 
-export function ViewChangeLog({ handleClose, session }: ViewChangeLogProps) {
-  const { internetAccounts } = getRoot<ApolloRootModel>(session)
-  const apolloInternetAccount = internetAccounts.find(
-    (ia) => ia.type === 'ApolloInternetAccount',
-  ) as ApolloInternetAccountModel | undefined
-  if (!apolloInternetAccount) {
-    throw new Error('No Apollo internet account found')
+function buildFiltersFromModel(
+  filterModel: GridFilterModel,
+): GetChangesOpts['filters'] {
+  const filters: NonNullable<GetChangesOpts['filters']> = {}
+  for (const item of filterModel.items) {
+    if (item.value === undefined || item.value === '' || item.value === null) {
+      continue
+    }
+    switch (item.field) {
+      case 'user': {
+        filters.user = String(item.value)
+        break
+      }
+      case 'typeName': {
+        filters.typeName = String(item.value)
+        break
+      }
+      case 'createdAt': {
+        const date = new Date(
+          item.value as string | number | Date,
+        ).toISOString()
+        if (item.operator === 'after' || item.operator === 'onOrAfter') {
+          filters.startTime = date
+        } else if (
+          item.operator === 'before' ||
+          item.operator === 'onOrBefore'
+        ) {
+          filters.endTime = date
+        }
+        break
+      }
+    }
   }
-  const { baseURL } = apolloInternetAccount
+  return filters
+}
+
+export function ViewChangeLog({
+  handleClose,
+  session,
+  assembly: assemblyId,
+}: ViewChangeLogProps) {
   const { classes } = useStyles()
   const [errorMessage, setErrorMessage] = useState<string>()
   const [displayGridData, setDisplayGridData] = useState<GridRowsProp[]>([])
+  const [rowCount, setRowCount] = useState(0)
+  const [loading, setLoading] = useState(false)
+  const [paginationModel, setPaginationModel] = useState<GridPaginationModel>({
+    page: 0,
+    pageSize: 15,
+  })
+  const [sortModel, setSortModel] = useState<GridSortModel>([
+    { field: 'sequence', sort: 'desc' },
+  ])
+  const [filterModel, setFilterModel] = useState<GridFilterModel>({
+    items: [],
+  })
 
-  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 { apolloDataStore } = session
+  const { assemblyManager } = session as unknown as AbstractSessionModel
+  const assembly = assemblyManager.get(assemblyId)
+  const assemblyName = assembly?.displayName ?? assemblyId
 
   const gridColumns: GridColDef[] = [
     { field: 'sequence' },
@@ -85,9 +116,11 @@ export function ViewChangeLog({ handleClose, session }: ViewChangeLogProps) {
       valueOptions: [...changeRegistry.changes.keys()],
     },
     {
-      field: 'changes',
+      field: 'changeData',
       headerName: 'Change JSON',
       width: 600,
+      sortable: false,
+      filterable: false,
       renderCell: ({ value }) => (
         <textarea
           className={classes.changeTextarea}
@@ -108,46 +141,53 @@ export function ViewChangeLog({ handleClose, session }: ViewChangeLogProps) {
 
   useEffect(() => {
     async function getGridData() {
-      if (!selectedAssembly) {
+      const backendDriver = apolloDataStore.getBackendDriver(assemblyId)
+      if (!backendDriver) {
+        setErrorMessage(`No driver found for assembly "${assemblyId}"`)
         return
       }
-
-      // Get changes
-      const url = new URL('changes', baseURL)
-      const searchParams = new URLSearchParams({
-        assembly: selectedAssembly.name,
-      })
-      url.search = searchParams.toString()
-      const uri = url.toString()
-      const apolloFetch = apolloInternetAccount?.getFetcher({
-        locationType: 'UriLocation',
-        uri,
+      setLoading(true)
+      const [sortEntry] = sortModel
+      const sortField = sortEntry?.field
+      const sortOrderValue = sortEntry?.sort
+      const sortOrder: 'asc' | 'desc' | undefined =
+        sortOrderValue === 'asc' || sortOrderValue === 'desc'
+          ? sortOrderValue
+          : undefined
+      const { changes, totalCount } = await backendDriver.getChanges(
+        assemblyId,
+        {
+          page: paginationModel.page,
+          pageSize: paginationModel.pageSize,
+          sortField,
+          sortOrder,
+          filters: buildFiltersFromModel(filterModel),
+        },
+      )
+      const gridData = changes.map((change) => {
+        const {
+          sequence,
+          typeName,
+          changes: nestedChanges,
+          user,
+          createdAt,
+          ...rest
+        } = change
+        const changeData = nestedChanges ?? { typeName, ...rest }
+        return { sequence, typeName, changeData, user, createdAt }
       })
-      if (apolloFetch) {
-        const response = await apolloFetch(uri, {
-          headers: new Headers({ 'Content-Type': 'application/json' }),
-        })
-        if (!response.ok) {
-          const newErrorMessage = await createFetchErrorMessage(
-            response,
-            'Error when retrieving changes',
-          )
-          setErrorMessage(newErrorMessage)
-          return
-        }
-        const data = await response.json()
-        setDisplayGridData(data)
-      }
+      // @ts-expect-error not sure how to type this
+      setDisplayGridData(gridData)
+      setRowCount(totalCount)
     }
-    getGridData().catch((error) => {
-      setErrorMessage(String(error))
-    })
-  }, [apolloInternetAccount, baseURL, selectedAssembly])
-
-  function handleChangeAssembly(e: SelectChangeEvent) {
-    const newAssembly = assemblies.find((asm) => asm.name === e.target.value)
-    setSelectedAssembly(newAssembly)
-  }
+    getGridData()
+      .catch((error) => {
+        setErrorMessage(String(error))
+      })
+      .finally(() => {
+        setLoading(false)
+      })
+  }, [apolloDataStore, assemblyId, paginationModel, sortModel, filterModel])
 
   return (
     <Dialog
@@ -157,27 +197,27 @@ export function ViewChangeLog({ handleClose, session }: ViewChangeLogProps) {
       handleClose={handleClose}
       data-testid="view-changelog"
     >
-      <Select
-        style={{ width: 200, marginLeft: 40 }}
-        value={selectedAssembly?.name ?? ''}
-        onChange={handleChangeAssembly}
-      >
-        {assemblies.map((option) => (
-          <MenuItem key={option.name} value={option.name}>
-            {option.displayName || option.name}
-          </MenuItem>
-        ))}
-      </Select>
-
       <DialogContent>
+        <DialogContentText>Changes for {assemblyName}</DialogContentText>
         <DataGrid
           pagination
+          paginationMode="server"
+          sortingMode="server"
+          filterMode="server"
+          rowCount={rowCount}
+          paginationModel={paginationModel}
+          onPaginationModelChange={setPaginationModel}
+          sortModel={sortModel}
+          onSortModelChange={setSortModel}
+          filterModel={filterModel}
+          onFilterModelChange={setFilterModel}
+          loading={loading}
           rows={displayGridData}
           columns={gridColumns}
-          getRowId={(row) => row._id}
-          slots={{ toolbar: GridToolbar }}
+          getRowId={(row) => row.sequence}
+          showToolbar
+          pageSizeOptions={[5, 15, 25, 50, 100]}
           initialState={{
-            sorting: { sortModel: [{ field: 'sequence', sort: 'desc' }] },
             columns: { columnVisibilityModel: { sequence: false } },
           }}
         />