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

package/src/LinearApolloSixFrameDisplay/glyphs/GeneGlyph.ts

@@ -2,13 +2,16 @@ import {
   type AnnotationFeature,
   type TranscriptPartCoding,
 } from '@apollo-annotation/mst'
+import { type BaseDisplayModel } from '@jbrowse/core/pluggableElementTypes'
 import { type MenuItem } from '@jbrowse/core/ui'
 import {
   type AbstractSessionModel,
+  getContainingView,
   getFrame,
   intersection2,
   measureText,
 } from '@jbrowse/core/util'
+import { type LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 import { alpha } from '@mui/material'
 import equal from 'fast-deep-equal/es6'
 import { getSnapshot } from 'mobx-state-tree'
@@ -18,12 +21,19 @@ import { FilterTranscripts } from '../../components/FilterTranscripts'
 import {
   type MousePosition,
   type MousePositionWithFeature,
+  getAdjacentExons,
   getContextMenuItemsForFeature,
   getMinAndMaxPx,
   getOverlappingEdge,
   getRelatedFeatures,
+  getStreamIcon,
+  isCDSFeature,
+  isExonFeature,
   isMousePositionWithFeature,
+  // isTranscriptFeature,
   isSelectedFeature,
+  navToFeatureCenter,
+  selectFeatureAndOpenWidget,
 } from '../../util'
 import { type LinearApolloSixFrameDisplay } from '../stateModel'
 import { type LinearApolloSixFrameDisplayMouseEvents } from '../stateModel/mouseEvents'
@@ -109,14 +119,14 @@ function drawTextLabels(
   for (let i = labelArray.length - 1; i >= 0; --i) {
     const label = labelArray[i]
     ctx.fillStyle = label.color
-    const labelRowX = Math.max(label.x + 1, 0)
+    const labelRowX = label.x + 1
     const labelRowY = label.y + label.h
     const textWidth = measureText(label.text, 10)
     if (label.isSelected) {
-      ctx.clearRect(labelRowX - 5, labelRowY, textWidth + 10, label.h)
       ctx.font = 'bold '.concat(font)
     }
     if (label.text) {
+      ctx.clearRect(labelRowX - 5, labelRowY, textWidth + 10, label.h)
       ctx.fillText(label.text, labelRowX, labelRowY + 11, textWidth)
       ctx.font = font
     }
@@ -341,6 +351,30 @@ function draw(
             (frame < 0 ? -1 * frame + 5 : frame) * featureLabelSpacer
           cdsTop = (frameAdjust - featureLabelSpacer) * rowHeight
           ctx.fillRect(cdsStartPx, cdsTop, cdsWidthPx, cdsHeight)
+
+          // Draw lines to connect CDS features with shared mRNA parent
+          if (counter > 1) {
+            // Mid-point for intron line "hat"
+            const midPoint: [number, number] = [
+              (cdsStartPx - prevCDSEndPx) / 2 + prevCDSEndPx,
+              Math.max(
+                frame < 0 ? rowHeight * featureLabelSpacer * highestRow + 1 : 1, // Avoid render ceiling
+                Math.min(prevCDSTop, cdsTop) - rowHeight / 2,
+              ),
+            ]
+            ctx.strokeStyle = 'rgb(0, 128, 128)'
+            ctx.beginPath()
+            ctx.moveTo(prevCDSEndPx, prevCDSTop)
+            ctx.lineTo(...midPoint)
+            ctx.stroke()
+            ctx.moveTo(...midPoint)
+            ctx.lineTo(cdsStartPx, cdsTop + rowHeight / 2)
+            ctx.stroke()
+          }
+          prevCDSEndPx = cdsStartPx + cdsWidthPx
+          prevCDSTop = cdsTop + rowHeight / 2
+          counter += 1
+
           if (cdsWidthPx > 2) {
             ctx.clearRect(
               cdsStartPx + 1,
@@ -365,31 +399,6 @@ function draw(
               cdsHeight - 2,
             )
 
-            // Draw lines to connect CDS features with shared mRNA parent
-            if (counter > 1) {
-              // Mid-point for intron line "hat"
-              const midPoint: [number, number] = [
-                (cdsStartPx - prevCDSEndPx) / 2 + prevCDSEndPx,
-                Math.max(
-                  frame < 0
-                    ? rowHeight * featureLabelSpacer * highestRow + 1
-                    : 1, // Avoid render ceiling
-                  Math.min(prevCDSTop, cdsTop) - rowHeight / 2,
-                ),
-              ]
-              ctx.strokeStyle = 'rgb(0, 128, 128)'
-              ctx.beginPath()
-              ctx.moveTo(prevCDSEndPx, prevCDSTop)
-              ctx.lineTo(...midPoint)
-              ctx.stroke()
-              ctx.moveTo(...midPoint)
-              ctx.lineTo(cdsStartPx, cdsTop + rowHeight / 2)
-              ctx.stroke()
-            }
-            prevCDSEndPx = cdsStartPx + cdsWidthPx
-            prevCDSTop = cdsTop + rowHeight / 2
-            counter += 1
-
             if (topFill && bottomFill) {
               ctx.fillStyle = topFill
               ctx.fillRect(
@@ -508,43 +517,42 @@ function drawHover(
     let counter = 1
     for (const cds of cdsRow.sort((a, b) => a.max - b.max)) {
       const cdsWidthPx = (cds.max - cds.min) / bpPerPx
+      const minX =
+        (lgv.bpToPx({
+          refName,
+          coord: cds.min,
+          regionNumber: layoutIndex,
+        })?.offsetPx ?? 0) - offsetPx
+      const cdsStartPx = reversed ? minX - cdsWidthPx : minX
+      const frame = getFrame(cds.min, cds.max, strand ?? 1, cds.phase)
+      const frameAdjust =
+        (frame < 0 ? -1 * frame + 5 : frame) * featureLabelSpacer
+      const cdsTop = (frameAdjust - featureLabelSpacer) * rowHeight
+      if (counter > 1) {
+        // Mid-point for intron line "hat"
+        const midPoint: [number, number] = [
+          (cdsStartPx - prevCDSEndPx) / 2 + prevCDSEndPx,
+          Math.max(
+            frame < 0 ? rowHeight * featureLabelSpacer * highestRow + 1 : 1, // Avoid render ceiling
+            Math.min(prevCDSTop, cdsTop) - rowHeight / 2,
+          ),
+        ]
+        ctx.strokeStyle = 'rgb(0, 0, 0)'
+        ctx.lineWidth = 2
+        ctx.beginPath()
+        ctx.moveTo(prevCDSEndPx, prevCDSTop)
+        ctx.lineTo(...midPoint)
+        ctx.stroke()
+        ctx.moveTo(...midPoint)
+        ctx.lineTo(cdsStartPx, cdsTop + rowHeight / 2)
+        ctx.stroke()
+      }
+      prevCDSEndPx = cdsStartPx + cdsWidthPx
+      prevCDSTop = cdsTop + rowHeight / 2
+      counter += 1
       if (cdsWidthPx > 2) {
-        const minX =
-          (lgv.bpToPx({
-            refName,
-            coord: cds.min,
-            regionNumber: layoutIndex,
-          })?.offsetPx ?? 0) - offsetPx
-        const cdsStartPx = reversed ? minX - cdsWidthPx : minX
-        const frame = getFrame(cds.min, cds.max, strand ?? 1, cds.phase)
-        const frameAdjust =
-          (frame < 0 ? -1 * frame + 5 : frame) * featureLabelSpacer
-        const cdsTop = (frameAdjust - featureLabelSpacer) * rowHeight
         ctx.fillStyle = 'rgba(255,0,0,0.6)'
         ctx.fillRect(cdsStartPx, cdsTop, cdsWidthPx, cdsHeight)
-
-        if (counter > 1) {
-          // Mid-point for intron line "hat"
-          const midPoint: [number, number] = [
-            (cdsStartPx - prevCDSEndPx) / 2 + prevCDSEndPx,
-            Math.max(
-              frame < 0 ? rowHeight * featureLabelSpacer * highestRow + 1 : 1, // Avoid render ceiling
-              Math.min(prevCDSTop, cdsTop) - rowHeight / 2,
-            ),
-          ]
-          ctx.strokeStyle = 'rgb(0, 0, 0)'
-          ctx.lineWidth = 2
-          ctx.beginPath()
-          ctx.moveTo(prevCDSEndPx, prevCDSTop)
-          ctx.lineTo(...midPoint)
-          ctx.stroke()
-          ctx.moveTo(...midPoint)
-          ctx.lineTo(cdsStartPx, cdsTop + rowHeight / 2)
-          ctx.stroke()
-        }
-        prevCDSEndPx = cdsStartPx + cdsWidthPx
-        prevCDSTop = cdsTop + rowHeight / 2
-        counter += 1
       }
     }
   }
@@ -848,8 +856,13 @@ function getContextMenuItems(
   }
   if (isMousePositionWithFeature(mousePosition)) {
     const { bp, feature } = mousePosition
-    for (const relatedFeature of getRelatedFeatures(feature, bp)) {
-      const featureID: string | undefined = relatedFeature.attributes
+    let featuresUnderClick = getRelatedFeatures(feature, bp)
+    if (isCDSFeature(feature, session)) {
+      featuresUnderClick = getRelatedFeatures(feature, bp, true)
+    }
+
+    for (const feature of featuresUnderClick) {
+      const featureID: string | undefined = feature.attributes
         .get('gff_id')
         ?.toString()
       if (featureID && filteredTranscripts.includes(featureID)) {
@@ -857,9 +870,48 @@ function getContextMenuItems(
       }
       const contextMenuItemsForFeature = getContextMenuItemsForFeature(
         display,
-        relatedFeature,
+        feature,
       )
-      if (featureTypeOntology.isTypeOf(relatedFeature.type, 'exon')) {
+      if (isExonFeature(feature, session)) {
+        const adjacentExons = getAdjacentExons(
+          feature,
+          display,
+          mousePosition,
+          session,
+        )
+        const lgv = getContainingView(
+          display as BaseDisplayModel,
+        ) as unknown as LinearGenomeViewModel
+        if (adjacentExons.upstream) {
+          const exon = adjacentExons.upstream
+          contextMenuItemsForFeature.push({
+            label: 'Go to upstream exon',
+            icon: getStreamIcon(
+              feature.strand,
+              true,
+              lgv.displayedRegions.at(0)?.reversed,
+            ),
+            onClick: () => {
+              lgv.navTo(navToFeatureCenter(exon, 0.1, lgv.totalBp))
+              selectFeatureAndOpenWidget(display, exon)
+            },
+          })
+        }
+        if (adjacentExons.downstream) {
+          const exon = adjacentExons.downstream
+          contextMenuItemsForFeature.push({
+            label: 'Go to downstream exon',
+            icon: getStreamIcon(
+              feature.strand,
+              false,
+              lgv.displayedRegions.at(0)?.reversed,
+            ),
+            onClick: () => {
+              lgv.navTo(navToFeatureCenter(exon, 0.1, lgv.totalBp))
+              selectFeatureAndOpenWidget(display, exon)
+            },
+          })
+        }
         contextMenuItemsForFeature.push(
           {
             label: 'Merge exons',
@@ -874,7 +926,7 @@ function getContextMenuItems(
                       doneCallback()
                     },
                     changeManager,
-                    sourceFeature: relatedFeature,
+                    sourceFeature: feature,
                     sourceAssemblyId: currentAssemblyId,
                     selectedFeature,
                     setSelectedFeature: (feature?: AnnotationFeature) => {
@@ -898,7 +950,7 @@ function getContextMenuItems(
                       doneCallback()
                     },
                     changeManager,
-                    sourceFeature: relatedFeature,
+                    sourceFeature: feature,
                     sourceAssemblyId: currentAssemblyId,
                     selectedFeature,
                     setSelectedFeature: (feature?: AnnotationFeature) => {
@@ -911,7 +963,7 @@ function getContextMenuItems(
           },
         )
       }
-      if (featureTypeOntology.isTypeOf(relatedFeature.type, 'gene')) {
+      if (featureTypeOntology.isTypeOf(feature.type, 'gene')) {
         contextMenuItemsForFeature.push({
           label: 'Filter alternate transcripts',
           onClick: () => {
@@ -922,7 +974,7 @@ function getContextMenuItems(
                   handleClose: () => {
                     doneCallback()
                   },
-                  sourceFeature: relatedFeature,
+                  sourceFeature: feature,
                   filteredTranscripts: getSnapshot(filteredTranscripts),
                   onUpdate: (forms: string[]) => {
                     display.updateFilteredTranscripts(forms)
@@ -934,7 +986,7 @@ function getContextMenuItems(
         })
       }
       menuItems.push({
-        label: relatedFeature.type,
+        label: feature.type,
         subMenu: contextMenuItemsForFeature,
       })
     }

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'
@@ -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/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) {
@@ -248,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
@@ -344,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

@@ -16,12 +16,19 @@ import {
   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 {
@@ -222,6 +236,7 @@ export function AddRefSeqAliases({
                 label="Assembly"
                 value={selectedAssembly?.name ?? ''}
                 onChange={handleChangeAssembly}
+                style={{ minWidth: 150 }}
               >
                 {assemblies.map((option) => (
                   <MenuItem key={option.name} value={option.name}>
@@ -255,11 +270,10 @@ export function AddRefSeqAliases({
                 },
               }}
               pageSizeOptions={[5, 10]}
-              onRowSelectionModelChange={(ids) => {
-                rowSelectionChange(ids as unknown 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