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

package/src/LinearApolloSixFrameDisplay/components/LinearApolloSixFrameDisplay.tsx

@@ -11,6 +11,7 @@ import {
 } from '@jbrowse/core/util'
 import { type LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 import ErrorIcon from '@mui/icons-material/Error'
+import LockIcon from '@mui/icons-material/Lock'
 import { Alert, Avatar, Badge, Box, Tooltip, useTheme } from '@mui/material'
 import { observer } from 'mobx-react'
 import React, { useEffect, useState } from 'react'
@@ -88,6 +89,11 @@ export const LinearApolloSixFrameDisplay = observer(
             }
           }}
         >
+          {session.isLocked ? (
+            <div className={classes.locked} data-testid="lock-icon">
+              <LockIcon />
+            </div>
+          ) : null}
           {message ? (
             <Alert
               severity="warning"

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/LinearApolloSixFrameDisplay/stateModel/base.ts

@@ -39,6 +39,8 @@ export function baseModelFactory(
       graphical: true,
       table: false,
       showFeatureLabels: true,
+      showStartCodons: false,
+      showStopCodons: true,
       showCheckResults: true,
       zoomThreshold: 200,
       heightPreConfig: types.maybe(
@@ -179,6 +181,12 @@ export function baseModelFactory(
       toggleShowFeatureLabels() {
         self.showFeatureLabels = !self.showFeatureLabels
       },
+      toggleShowStartCodons() {
+        self.showStartCodons = !self.showStartCodons
+      },
+      toggleShowStopCodons() {
+        self.showStopCodons = !self.showStopCodons
+      },
       toggleShowCheckResults() {
         self.showCheckResults = !self.showCheckResults
       },
@@ -193,7 +201,14 @@ export function baseModelFactory(
       const { filteredFeatureTypes, trackMenuItems: superTrackMenuItems } = self
       return {
         trackMenuItems() {
-          const { graphical, table, showFeatureLabels, showCheckResults } = self
+          const {
+            graphical,
+            table,
+            showFeatureLabels,
+            showStartCodons,
+            showStopCodons,
+            showCheckResults,
+          } = self
           return [
             ...superTrackMenuItems(),
             {
@@ -232,6 +247,22 @@ export function baseModelFactory(
                     self.toggleShowFeatureLabels()
                   },
                 },
+                {
+                  label: 'Show start codons',
+                  type: 'checkbox',
+                  checked: showStartCodons,
+                  onClick: () => {
+                    self.toggleShowStartCodons()
+                  },
+                },
+                {
+                  label: 'Show stop codons',
+                  type: 'checkbox',
+                  checked: showStopCodons,
+                  onClick: () => {
+                    self.toggleShowStopCodons()
+                  },
+                },
                 {
                   label: 'Check Results',
                   type: 'checkbox',
@@ -326,7 +357,7 @@ export function baseModelFactory(
               void (
                 self.session as unknown as ApolloSessionModel
               ).apolloDataStore.loadFeatures(self.regions)
-              if (self.lgv.bpPerPx <= 3) {
+              if (self.lgv.bpPerPx <= self.zoomThreshold) {
                 void (
                   self.session as unknown as ApolloSessionModel
                 ).apolloDataStore.loadRefSeq(self.regions)

package/src/LinearApolloSixFrameDisplay/stateModel/rendering.ts

@@ -1,15 +1,62 @@
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
 import type PluginManager from '@jbrowse/core/PluginManager'
 import { type AnyConfigurationSchemaType } from '@jbrowse/core/configuration/configurationSchema'
-import { doesIntersect2 } from '@jbrowse/core/util'
+import {
+  defaultCodonTable,
+  doesIntersect2,
+  getFrame,
+  revcom,
+} from '@jbrowse/core/util'
 import { type Theme, createTheme } from '@mui/material'
 import { autorun } from 'mobx'
 import { type Instance, addDisposer, types } from 'mobx-state-tree'
 
 import { type ApolloSessionModel } from '../../session'
+import { codonColorCode } from '../../util/displayUtils'
 
 import { layoutsModelFactory } from './layouts'
 
+function drawCodon(
+  ctx: CanvasRenderingContext2D,
+  codon: string,
+  leftPx: number,
+  index: number,
+  theme: Theme,
+  highContrast: boolean,
+  bpPerPx: number,
+  bp: number,
+  rowHeight: number,
+  showFeatureLabels: boolean,
+  showStartCodons: boolean,
+  showStopCodons: boolean,
+) {
+  const frameOffsets = (
+    showFeatureLabels ? [0, 4, 2, 0, 14, 12, 10] : [0, 2, 1, 0, 7, 6, 5]
+  ).map((b) => b * rowHeight)
+  const strands = [-1, 1] as const
+  for (const strand of strands) {
+    const frame = getFrame(bp, bp + 3, strand, 0)
+    const top = frameOffsets.at(frame)
+    if (top === undefined) {
+      continue
+    }
+    const left = Math.round(leftPx + index / bpPerPx)
+    const width = Math.round(3 / bpPerPx) === 0 ? 1 : Math.round(3 / bpPerPx)
+    const codonCode = strand === 1 ? codon : revcom(codon)
+    const aminoAcidCode =
+      defaultCodonTable[codonCode as keyof typeof defaultCodonTable]
+    const fillColor = codonColorCode(aminoAcidCode, theme, highContrast)
+    if (
+      fillColor &&
+      ((showStopCodons && aminoAcidCode == '*') ||
+        (showStartCodons && aminoAcidCode != '*'))
+    ) {
+      ctx.fillStyle = fillColor
+      ctx.fillRect(left, top, width, rowHeight)
+    }
+  }
+}
+
 export function renderingModelFactory(
   pluginManager: PluginManager,
   configSchema: AnyConfigurationSchemaType,
@@ -135,17 +182,29 @@ export function renderingModelFactory(
           self,
           autorun(
             () => {
-              const { canvas, featureLayouts, featuresHeight, lgv } = self
+              const {
+                apolloRowHeight,
+                canvas,
+                featureLayouts,
+                featuresHeight,
+                lgv,
+                session,
+                theme,
+                showFeatureLabels,
+                showStartCodons,
+                showStopCodons,
+              } = self
               if (!lgv.initialized || self.regionCannotBeRendered()) {
                 return
               }
-              const { displayedRegions, dynamicBlocks } = lgv
+              const { bpPerPx, offsetPx, displayedRegions, dynamicBlocks } = lgv
 
               const ctx = canvas?.getContext('2d')
               if (!ctx) {
                 return
               }
               ctx.clearRect(0, 0, dynamicBlocks.totalWidthPx, featuresHeight)
+
               for (const [idx, featureLayout] of featureLayouts.entries()) {
                 const displayedRegion = displayedRegions[idx]
                 for (const [row, featureLayoutRow] of featureLayout.entries()) {
@@ -171,6 +230,45 @@ export function renderingModelFactory(
                   }
                 }
               }
+
+              if (showStartCodons || showStopCodons) {
+                const { apolloDataStore } = session
+                for (const block of dynamicBlocks.contentBlocks) {
+                  const assembly = apolloDataStore.assemblies.get(
+                    block.assemblyName,
+                  )
+                  const ref = assembly?.getByRefName(block.refName)
+                  const roundedStart = Math.floor(block.start)
+                  const roundedEnd = Math.ceil(block.end)
+                  let seq = ref?.getSequence(roundedStart, roundedEnd)
+                  if (!seq) {
+                    break
+                  }
+                  seq = seq.toUpperCase()
+                  const baseOffsetPx = (block.start - roundedStart) / bpPerPx
+                  const seqLeftPx = Math.round(
+                    block.offsetPx - offsetPx - baseOffsetPx,
+                  )
+                  for (let i = 0; i < seq.length; i++) {
+                    const bp = roundedStart + i
+                    const codon = seq.slice(i, i + 3)
+                    drawCodon(
+                      ctx,
+                      codon,
+                      seqLeftPx,
+                      i,
+                      theme,
+                      true,
+                      bpPerPx,
+                      bp,
+                      apolloRowHeight,
+                      showFeatureLabels,
+                      showStartCodons,
+                      showStopCodons,
+                    )
+                  }
+                }
+              }
             },
             { name: 'LinearApolloSixFrameDisplayRenderFeatures' },
           ),

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`
@@ -214,7 +200,7 @@ export function AddAssembly({
         statusMessage: 'Pre-validating',
         progressPct: 0,
         cancelCallback: () => {
-          controller.abort()
+          controller.abort('AddAssembly')
           jobsManager.abortJob(job.name)
         },
       }
@@ -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}
                       />