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

package/src/TabularEditor/HybridGrid/Feature.tsx

@@ -10,6 +10,7 @@ import { makeStyles } from 'tss-react/mui'
 import { isOntologyClass } from '../../OntologyManager'
 import type OntologyStore from '../../OntologyManager/OntologyStore'
 import { OntologyTermAutocomplete } from '../../components/OntologyTermAutocomplete'
+import { navToFeatureCenter } from '../../util'
 import { type DisplayStateModel } from '../types'
 
 import {
@@ -84,12 +85,13 @@ function makeContextMenuItems(
   )
 }
 
-function getTopLevelFeature(feature: AnnotationFeature): AnnotationFeature {
-  let cur = feature
-  while (cur.parent) {
-    cur = cur.parent
-  }
-  return cur
+function navigateHere(
+  displayState: DisplayStateModel,
+  feature: AnnotationFeature,
+) {
+  displayState.lgv.navTo(
+    navToFeatureCenter(feature, 0.1, displayState.lgv.totalBp),
+  )
 }
 
 export const Feature = observer(function Feature({
@@ -111,8 +113,8 @@ export const Feature = observer(function Feature({
 }) {
   const { classes } = useStyles()
   const {
-    apolloHover,
     changeManager,
+    hoveredFeature,
     selectedFeature,
     session,
     tabularEditor: tabularEditorState,
@@ -134,12 +136,7 @@ export const Feature = observer(function Feature({
     <>
       <tr
         onMouseEnter={(_e) => {
-          displayState.setApolloHover({
-            feature,
-            topLevelFeature: getTopLevelFeature(feature),
-            // @ts-expect-error TODO fix in future when moving hover logic to session.
-            glyph: displayState.getGlyph(getTopLevelFeature(feature)),
-          })
+          displayState.setHoveredFeature({ feature, bp: min })
         }}
         className={
           classes.feature +
@@ -153,6 +150,10 @@ export const Feature = observer(function Feature({
           e.stopPropagation()
           displayState.setSelectedFeature(feature)
         }}
+        onDoubleClick={() => {
+          displayState.setSelectedFeature(feature)
+          navigateHere(displayState, feature)
+        }}
         onContextMenu={(e) => {
           e.preventDefault()
           setContextMenu({
@@ -258,7 +259,8 @@ export const Feature = observer(function Feature({
               return text.includes(filterText)
             })
             .map(([featureId, childFeature]) => {
-              const childHovered = apolloHover?.feature._id === childFeature._id
+              const childHovered =
+                hoveredFeature?.feature._id === childFeature._id
               const childSelected = selectedFeature?._id === childFeature._id
               return (
                 <Feature

package/src/TabularEditor/HybridGrid/HybridGrid.tsx

@@ -37,7 +37,7 @@ const HybridGrid = observer(function HybridGrid({
 }: {
   model: DisplayStateModel
 }) {
-  const { apolloHover, seenFeatures, selectedFeature, tabularEditor } = model
+  const { hoveredFeature, seenFeatures, selectedFeature, tabularEditor } = model
   const theme = useTheme()
   const { classes } = useStyles()
   const scrollContainerRef = useRef<HTMLDivElement>(null)
@@ -96,7 +96,7 @@ const HybridGrid = observer(function HybridGrid({
             })
             .map(([featureId, feature]) => {
               const isSelected = selectedFeature?._id === featureId
-              const isHovered = apolloHover?.feature._id === featureId
+              const isHovered = hoveredFeature?.feature._id === featureId
               return (
                 <Feature
                   key={featureId}
@@ -121,9 +121,11 @@ const HybridGrid = observer(function HybridGrid({
         onClose={() => {
           setContextMenu(null)
         }}
-        TransitionProps={{
-          onExit: () => {
-            setContextMenu(null)
+        slotProps={{
+          transition: {
+            onExit: () => {
+              setContextMenu(null)
+            },
           },
         }}
         style={{ zIndex: theme.zIndex.tooltip }}

package/src/components/AddAssembly.tsx

@@ -39,7 +39,7 @@ import {
 } from '@mui/material'
 import ObjectID from 'bson-objectid'
 import { getRoot } from 'mobx-state-tree'
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 import { makeStyles } from 'tss-react/mui'
 
 import { type ApolloInternetAccountModel } from '../ApolloInternetAccount/model'
@@ -80,7 +80,7 @@ const useStyles = makeStyles()((theme) => ({
     borderTop: '1px solid rgba(0, 0, 0, .125)',
   },
   radioIcon: {
-    color: theme?.palette?.tertiary?.contrastText,
+    color: theme.palette.tertiary.contrastText,
   },
   dialog: {
     // minHeight: 500,
@@ -149,25 +149,8 @@ export function AddAssembly({
   const [fastaGziIndexUrl, setFastaGziIndexUrl] = useState<string>('')
 
   const [loading, setLoading] = useState(false)
-  const [isGzip, setIsGzip] = useState<boolean>(false)
-
-  useEffect(() => {
-    setFastaIndexUrl(fastaUrl ? `${fastaUrl}.fai` : '')
-  }, [fastaUrl])
-
-  useEffect(() => {
-    setFastaGziIndexUrl(fastaUrl ? `${fastaUrl}.gzi` : '')
-  }, [fastaUrl])
-
-  useEffect(() => {
-    if (sequenceIsEditable || fileType === FileType.GFF3) {
-      setIsGzip(
-        fastaFile?.name.toLocaleLowerCase().endsWith('.gz') ? true : false,
-      )
-    } else {
-      setIsGzip(true)
-    }
-  }, [fastaFile, sequenceIsEditable, fileType])
+  const [fastaGzipChecked, setFastaGzipChecked] = useState<boolean>(false)
+  const [gff3GzipChecked, setGff3GzipChecked] = useState<boolean>(false)
 
   function checkAssemblyName(assembly: string) {
     const { assemblies } = session as unknown as AbstractSessionModel
@@ -194,10 +177,13 @@ export function AddAssembly({
     const uri = url.href
     const formData = new FormData()
     let filename = file.name
+    const isGzip =
+      fileType === FileType.BGZIP_FASTA ||
+      (fileType === FileType.FASTA &&
+        (!sequenceIsEditable || fastaGzipChecked)) ||
+      (fileType === FileType.GFF3 && gff3GzipChecked)
 
-    if (fileType === FileType.FAI || fileType === FileType.GZI) {
-      filename = `${filename}.txt`
-    } else if (isGzip && !file.name.toLocaleLowerCase().endsWith('.gz')) {
+    if (isGzip && !file.name.toLocaleLowerCase().endsWith('.gz')) {
       filename = `${filename}.gz`
     } else if (!isGzip && file.name.toLocaleLowerCase().endsWith('.gz')) {
       filename = `${filename}.txt`
@@ -370,11 +356,6 @@ export function AddAssembly({
       if (newExpanded) {
         setExpanded(panel)
       }
-      if (panel === 'panelGffInput') {
-        setIsGzip(false)
-      } else {
-        setIsGzip(true)
-      }
     }
 
   return (
@@ -497,12 +478,12 @@ export function AddAssembly({
                   data-testid="fasta-is-gzip-checkbox"
                   control={
                     <Checkbox
-                      checked={isGzip}
+                      checked={!sequenceIsEditable || fastaGzipChecked}
                       onChange={() => {
                         if (sequenceIsEditable) {
-                          setIsGzip(!isGzip)
+                          setFastaGzipChecked(!fastaGzipChecked)
                         } else {
-                          setIsGzip(true)
+                          setFastaGzipChecked(true)
                         }
                       }}
                       disabled={!sequenceIsEditable}
@@ -533,7 +514,13 @@ export function AddAssembly({
                             onChange={(
                               e: React.ChangeEvent<HTMLInputElement>,
                             ) => {
-                              setFastaFile(e.target.files?.item(0) ?? null)
+                              const file = e.target.files?.item(0)
+                              if (file) {
+                                setFastaFile(file)
+                                if (file.name.endsWith('.gz')) {
+                                  setFastaGzipChecked(true)
+                                }
+                              }
                             }}
                             disabled={submitted && !errorMessage}
                           />
@@ -606,7 +593,10 @@ export function AddAssembly({
                             onChange={(
                               e: React.ChangeEvent<HTMLInputElement>,
                             ) => {
-                              setFastaUrl(e.target.value)
+                              const { value } = e.target
+                              setFastaUrl(value)
+                              setFastaIndexUrl(value ? `${value}.fai` : '')
+                              setFastaGziIndexUrl(value ? `${value}.gzi` : '')
                             }}
                             disabled={submitted && !errorMessage}
                             slotProps={{
@@ -727,8 +717,14 @@ export function AddAssembly({
                   type="file"
                   disabled={submitted && !errorMessage}
                   onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                    setFastaFile(e.target.files?.item(0) ?? null)
-                    setFileType(FileType.GFF3)
+                    const file = e.target.files?.item(0)
+                    if (file) {
+                      setFastaFile(file)
+                      setFileType(FileType.GFF3)
+                      if (file.name.endsWith('.gz')) {
+                        setGff3GzipChecked(true)
+                      }
+                    }
                   }}
                 />
                 <FormGroup style={{ display: 'grid' }}>
@@ -748,9 +744,9 @@ export function AddAssembly({
                     data-testid="gff3-is-gzip-checkbox"
                     control={
                       <Checkbox
-                        checked={isGzip}
+                        checked={gff3GzipChecked}
                         onChange={() => {
-                          setIsGzip(!isGzip)
+                          setGff3GzipChecked(!gff3GzipChecked)
                         }}
                         disabled={submitted && !errorMessage}
                       />

package/src/components/AddAssemblyAliases.tsx

@@ -57,7 +57,7 @@ export function AddAssemblyAliases({
   const rows: AssemblyAlias[] = assemblies.map((assembly) => {
     return {
       id: assembly.name,
-      name: assembly.displayName ?? assembly.name,
+      name: assembly.displayName,
       aliases: assembly.aliases.join(', '),
     } as AssemblyAlias
   })

package/src/components/AddChildFeature.tsx

@@ -64,12 +64,13 @@ export function AddChildFeature({
   function onSubmit(event: React.FormEvent<HTMLFormElement>) {
     event.preventDefault()
     setErrorMessage('')
+    const _id = new ObjectID().toHexString()
     const change = new AddFeatureChange({
       changedIds: [sourceFeature._id],
       typeName: 'AddFeatureChange',
       assembly: sourceAssemblyId,
       addedFeature: {
-        _id: new ObjectID().toHexString(),
+        _id,
         refSeq: sourceFeature.refSeq,
         min: Number(start) - 1,
         max: Number(end),
@@ -77,7 +78,9 @@ export function AddChildFeature({
       },
       parentFeatureId: sourceFeature._id,
     })
-    void changeManager.submit(change)
+    void changeManager.submit(change).then(() => {
+      session.apolloSetSelectedFeature(_id)
+    })
     handleClose()
     event.preventDefault()
   }

package/src/components/AddFeature.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable @typescript-eslint/unbound-method */
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 
 import { type AnnotationFeatureSnapshot } from '@apollo-annotation/mst'
 import { AddFeatureChange } from '@apollo-annotation/shared'
@@ -26,6 +25,7 @@ import {
 import ObjectID from 'bson-objectid'
 import React, { useState } from 'react'
 
+import { CollaborationServerDriver } from '../BackendDrivers'
 import { type ChangeManager } from '../ChangeManager'
 import { isOntologyClass } from '../OntologyManager'
 import { type ApolloSessionModel } from '../session'
@@ -96,30 +96,32 @@ export function AddFeature({
   const [end, setEnd] = useState(String(region.end))
   const [start, setStart] = useState(String(region.start + 1))
   const [type, setType] = useState<NewFeature>(NewFeature.GENE_AND_SUBFEATURES)
-  const [customType, setCustomType] = useState<string>()
+  const [customType, setCustomType] = useState<string>('')
   const [strand, setStrand] = useState<1 | -1 | undefined>()
   const [errorMessage, setErrorMessage] = useState('')
 
-  function onSubmit(event: React.FormEvent<HTMLFormElement>) {
+  async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
     event.preventDefault()
     setErrorMessage('')
 
-    let refSeqId
-    for (const [, asm] of session.apolloDataStore.assemblies ?? new Map()) {
-      if (asm._id === region.assemblyName) {
-        for (const [, refseq] of asm.refSeqs ?? new Map()) {
-          if (refseq.name === region.refName) {
-            refSeqId = refseq._id
-          }
-        }
-      }
+    const backendDriver = session.apolloDataStore.getBackendDriver(
+      region.assemblyName,
+    )
+    if (!backendDriver) {
+      setErrorMessage('No backend driver found')
+      return
     }
-
-    if (!refSeqId) {
-      setErrorMessage(
-        'Invalid refseq id. Make sure you have the Apollo annotation track open',
+    let refSeqId = region.refName
+    if (backendDriver instanceof CollaborationServerDriver) {
+      const backendRefSeqId = await backendDriver.getRefSeqId(
+        region.assemblyName,
+        region.refName,
       )
-      return
+      if (!backendRefSeqId) {
+        setErrorMessage(`Could not find refSeq for "${region.refName}"`)
+        return
+      }
+      refSeqId = backendRefSeqId
     }
 
     if (type === NewFeature.GENE_AND_SUBFEATURES) {
@@ -147,7 +149,9 @@ export function AddFeature({
           children,
         },
       })
-      void changeManager.submit(change)
+      void changeManager.submit(change).then(() => {
+        session.apolloSetSelectedFeature(id)
+      })
       handleClose()
       return
     }
@@ -164,7 +168,9 @@ export function AddFeature({
         assembly: region.assemblyName,
         addedFeature: mRNA,
       })
-      void changeManager.submit(change)
+      void changeManager.submit(change).then(() => {
+        session.apolloSetSelectedFeature(mRNA._id)
+      })
       handleClose()
       return
     }
@@ -187,7 +193,9 @@ export function AddFeature({
         strand,
       },
     })
-    void changeManager.submit(change)
+    void changeManager.submit(change).then(() => {
+      session.apolloSetSelectedFeature(id)
+    })
     handleClose()
     return
   }
@@ -242,6 +250,7 @@ export function AddFeature({
       maxWidth={false}
       data-testid="add-feature-dialog"
     >
+      {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
       <form onSubmit={onSubmit} data-testid="submit-form">
         <DialogContent style={{ display: 'flex', flexDirection: 'column' }}>
           <TextField
@@ -338,7 +347,7 @@ export function AddFeature({
               session={session}
               ontologyName="Sequence Ontology"
               style={{ width: 170 }}
-              value=""
+              value={customType}
               filterTerms={isOntologyClass}
               renderInput={(params) => (
                 <TextField

package/src/components/AddRefSeqAliases.tsx

@@ -10,18 +10,25 @@ import {
   DialogContent,
   DialogContentText,
   FormControl,
-  Grid2,
+  Grid,
   InputLabel,
   MenuItem,
   Select,
   type SelectChangeEvent,
 } from '@mui/material'
-import { DataGrid, type GridColDef, type GridRowModel } from '@mui/x-data-grid'
+import {
+  DataGrid,
+  type GridColDef,
+  type GridRowModel,
+  type GridRowSelectionModel,
+} from '@mui/x-data-grid'
+import { observer } from 'mobx-react'
 import React, { useEffect, useRef, useState } from 'react'
 
 import {
   type ApolloInternetAccount,
   type CollaborationServerDriver,
+  type RefNameAliases,
 } from '../BackendDrivers'
 import { type ChangeManager } from '../ChangeManager'
 import { type ApolloSessionModel } from '../session'
@@ -30,7 +37,7 @@ import { Dialog } from './Dialog'
 
 const columns: GridColDef[] = [
   { field: 'refName', headerName: 'Ref Name' },
-  { field: 'aliases', headerName: 'Aliases', editable: true },
+  { field: 'aliases', headerName: 'Aliases', editable: true, flex: 1 },
 ]
 
 interface AddChildFeatureProps {
@@ -44,7 +51,7 @@ const isGeneratedObjectId = (key: string): boolean => {
   return pattern.test(key)
 }
 
-export function AddRefSeqAliases({
+export const AddRefSeqAliases = observer(function AddRefSeqAliases({
   changeManager,
   handleClose,
   session,
@@ -75,44 +82,50 @@ export function AddRefSeqAliases({
   const assemblies = collaborationServerDriver.getAssemblies()
 
   useEffect(() => {
-    let retry = 0
-    const maxRetries = 2
-    const initializeRefNameAliasMap = () => {
-      if (!selectedAssembly) {
-        return
-      }
-      const initialMap = new Map<string, string[]>()
-      if (retry < maxRetries && !selectedAssembly.refNames) {
-        retry++
-        setTimeout(initializeRefNameAliasMap, 50)
-      }
-      if (!selectedAssembly.refNames) {
-        return
-      }
-      const refNameAliasess = selectedAssembly.refNameAliases
-      for (const key in refNameAliasess) {
-        const value = refNameAliasess[key]
-        if (!value || isGeneratedObjectId(key)) {
-          continue
-        }
-        if (initialMap.has(value)) {
-          const aliases = initialMap.get(value) ?? []
-          initialMap.set(value, [...aliases, key])
-        } else {
-          initialMap.set(value, [key])
-        }
-      }
-      setRefNameAliasMap(initialMap)
+    if (assemblies.length > 0) {
+      setSelectedAssembly(assemblies[0])
+      collaborationServerDriver
+        .getRefNameAliases(assemblies[0].name)
+        .then((refNameAliases) => {
+          initializeRefNameAliasMap(refNameAliases)
+        })
+        .catch(() => {
+          setRefNameAliasMap(new Map())
+          setErrorMessage('Error fetching refName aliases for assembly')
+        })
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
 
-    initializeRefNameAliasMap()
-  }, [selectedAssembly])
+  const initializeRefNameAliasMap = (refNameAliasesList: RefNameAliases[]) => {
+    const initialMap = new Map<string, string[]>()
+    for (const refNameAliases of refNameAliasesList) {
+      const key = refNameAliases.refName
+      if (isGeneratedObjectId(key)) {
+        continue
+      }
+      initialMap.set(key, refNameAliases.aliases)
+    }
+    setRefNameAliasMap(initialMap)
+  }
 
   const handleChangeAssembly = (e: SelectChangeEvent) => {
     const newAssembly = assemblies.find((asm) => asm.name === e.target.value)
     setSelectedAssembly(newAssembly)
+    if (!newAssembly?.name) {
+      return
+    }
+    collaborationServerDriver
+      .getRefNameAliases(newAssembly.name)
+      .then((refNameAliases) => {
+        initializeRefNameAliasMap(refNameAliases)
+        setErrorMessage('')
+      })
+      .catch(() => {
+        setRefNameAliasMap(new Map())
+        setErrorMessage('Error fetching refName aliases for assembly')
+      })
     setEnableSubmit(false)
-    setErrorMessage('')
     if (fileRef.current) {
       fileRef.current.value = ''
     }
@@ -145,11 +158,12 @@ export function AddRefSeqAliases({
     })
   }
 
-  const rowSelectionChange = (ids: number[]) => {
-    if (ids.length > 0) {
+  const rowSelectionChange = (gridRowSelectionModel: GridRowSelectionModel) => {
+    const { ids } = gridRowSelectionModel
+    if (ids.size > 0) {
       setEnableSubmit(true)
-      const selectedRows = ids.flatMap((id) =>
-        getTableRows().filter((row) => row.id === id),
+      const selectedRows = [...ids.values()].flatMap((id) =>
+        getTableRows().filter((row) => String(row.id) === String(id)),
       )
       setSelectedRows(selectedRows)
     } else {
@@ -212,8 +226,8 @@ export function AddRefSeqAliases({
       fullWidth
     >
       <DialogContent style={{ display: 'flex', flexDirection: 'column' }}>
-        <Grid2 container spacing={2}>
-          <Grid2>
+        <Grid container spacing={2}>
+          <Grid>
             <FormControl disabled={enableSubmit && !errorMessage} fullWidth>
               <InputLabel id="demo-simple-select-label">Assembly</InputLabel>
               <Select
@@ -222,16 +236,17 @@ export function AddRefSeqAliases({
                 label="Assembly"
                 value={selectedAssembly?.name ?? ''}
                 onChange={handleChangeAssembly}
+                style={{ minWidth: 150 }}
               >
                 {assemblies.map((option) => (
                   <MenuItem key={option.name} value={option.name}>
-                    {option.displayName ?? option.name}
+                    {option.displayName}
                   </MenuItem>
                 ))}
               </Select>
             </FormControl>
-          </Grid2>
-          <Grid2>
+          </Grid>
+          <Grid>
             <InputLabel>Load RefName alias</InputLabel>
             <input
               type="file"
@@ -239,8 +254,8 @@ export function AddRefSeqAliases({
               ref={fileRef}
               disabled={(enableSubmit && !errorMessage) || !selectedAssembly}
             />
-          </Grid2>
-        </Grid2>
+          </Grid>
+        </Grid>
         {selectedAssembly && refNameAliasMap.size > 0 ? (
           <div style={{ height: 200, width: '100%', marginTop: 20 }}>
             <InputLabel>
@@ -255,11 +270,10 @@ export function AddRefSeqAliases({
                 },
               }}
               pageSizeOptions={[5, 10]}
-              onRowSelectionModelChange={(ids) => {
-                rowSelectionChange(ids as number[])
-              }}
+              onRowSelectionModelChange={rowSelectionChange}
               processRowUpdate={processRowUpdate}
               checkboxSelection
+              disableRowSelectionExcludeModel
             ></DataGrid>
           </div>
         ) : null}
@@ -284,4 +298,4 @@ export function AddRefSeqAliases({
       ) : null}
     </Dialog>
   )
-}
+})

package/src/components/CopyFeature.tsx

@@ -99,8 +99,8 @@ export function CopyFeature({
   }
 
   useEffect(() => {
-    setSelectedRefSeqId('')
     async function getRefNames() {
+      setSelectedRefSeqId('')
       if (!selectedAssemblyId) {
         setErrorMessage('No assemblies to copy to')
         return
@@ -203,7 +203,9 @@ export function CopyFeature({
       copyFeature: true,
       allIds: featureIds,
     })
-    void changeManager.submit(change)
+    void changeManager.submit(change).then(() => {
+      session.apolloSetSelectedFeature(newFeatureLine._id)
+    })
     handleClose()
     event.preventDefault()
   }