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

package/src/components/DeleteFeature.tsx

@@ -1,8 +1,11 @@
 /* eslint-disable @typescript-eslint/unbound-method */
-/* eslint-disable @typescript-eslint/no-misused-promises */
+
 import { type AnnotationFeature } from '@apollo-annotation/mst'
-import { DeleteFeatureChange } from '@apollo-annotation/shared'
-import { type AbstractSessionModel } from '@jbrowse/core/util'
+import {
+  DeleteFeatureChange,
+  LocationEndChange,
+  LocationStartChange,
+} from '@apollo-annotation/shared'
 import {
   Button,
   DialogActions,
@@ -17,6 +20,14 @@ import { type ApolloSessionModel } from '../session'
 
 import { Dialog } from './Dialog'
 
+interface LocationChange {
+  typeName: 'LocationStartChange' | 'LocationEndChange'
+  changedId: string
+  featureId: string
+  oldLocation: number
+  newLocation: number
+}
+
 interface DeleteFeatureProps {
   session: ApolloSessionModel
   handleClose(): void
@@ -27,6 +38,60 @@ interface DeleteFeatureProps {
   setSelectedFeature(feature?: AnnotationFeature): void
 }
 
+function lumpLocationChanges(
+  changes: LocationChange[],
+  assembly: string,
+): LocationStartChange | LocationEndChange | undefined {
+  if (changes.length === 0) {
+    return
+  }
+  const locationStartChange = new LocationStartChange({
+    typeName: 'LocationStartChange',
+    changedIds: [],
+    changes: [],
+    assembly,
+  })
+  const locationEndChange = new LocationEndChange({
+    typeName: 'LocationEndChange',
+    changedIds: [],
+    changes: [],
+    assembly,
+  })
+  for (const change of changes) {
+    if (change.typeName === 'LocationStartChange') {
+      locationStartChange.changedIds.push(change.changedId)
+      const cc = {
+        featureId: change.featureId,
+        oldStart: change.oldLocation,
+        newStart: change.newLocation,
+      }
+      locationStartChange.changes.push(cc)
+    }
+    if (change.typeName === 'LocationEndChange') {
+      locationEndChange.changedIds.push(change.changedId)
+      const cc = {
+        featureId: change.featureId,
+        oldEnd: change.oldLocation,
+        newEnd: change.newLocation,
+      }
+      locationEndChange.changes.push(cc)
+    }
+  }
+  if (
+    locationStartChange.changedIds.length > 0 &&
+    locationEndChange.changedIds.length === 0
+  ) {
+    return locationStartChange
+  }
+  if (
+    locationEndChange.changedIds.length > 0 &&
+    locationStartChange.changedIds.length === 0
+  ) {
+    return locationEndChange
+  }
+  throw new Error('Unexpected list of changes')
+}
+
 export function DeleteFeature({
   changeManager,
   handleClose,
@@ -36,8 +101,198 @@ export function DeleteFeature({
   sourceAssemblyId,
   sourceFeature,
 }: DeleteFeatureProps) {
-  const { notify } = session as unknown as AbstractSessionModel
   const [errorMessage, setErrorMessage] = useState('')
+  const { ontologyManager } = session.apolloDataStore
+  const { featureTypeOntology } = ontologyManager
+
+  function trimCDS(
+    sourceFeature: AnnotationFeature,
+  ): DeleteFeatureChange | LocationChange | undefined {
+    if (!featureTypeOntology) {
+      return
+    }
+    if (!featureTypeOntology.isTypeOf(sourceFeature.type, 'exon')) {
+      return
+    }
+    if (
+      !sourceFeature.parent?.cdsLocations ||
+      sourceFeature.parent.cdsLocations.length === 0 ||
+      sourceFeature.parent.cdsLocations[0].length === 0
+    ) {
+      // No CDS - parent of this exon is a non-coding transcript
+      return
+    }
+    if (!sourceFeature.parent.children) {
+      throw new Error('Unable to find parent of CDS')
+    }
+    if (sourceFeature.parent.cdsLocations.length != 1) {
+      throw new Error('Unable to handle a transcript with multiple CDSs')
+    }
+
+    const _cdsLocations = sourceFeature.parent.cdsLocations.at(0) ?? []
+    const cdsLocations = _cdsLocations.sort(({ min: a }, { min: b }) => a - b)
+    let cdsFeature
+    for (const child of sourceFeature.parent.children.values()) {
+      if (child.type === cdsLocations[0].type) {
+        cdsFeature = child
+        break
+      }
+    }
+    if (!cdsFeature) {
+      throw new Error('Unable to find CDS')
+    }
+    const cdsStart = cdsLocations[0].min
+    // eslint-disable-next-line unicorn/prefer-at
+    const cdsEnd = cdsLocations[cdsLocations.length - 1].max
+    if (
+      (sourceFeature.min > cdsStart && sourceFeature.max < cdsEnd) ||
+      sourceFeature.max < cdsStart ||
+      sourceFeature.min > cdsEnd
+    ) {
+      // No adjustment if the exon being deleted is fully contained in the CDS
+      // or completely outside of the CDS
+      return
+    }
+    if (sourceFeature.min <= cdsStart && sourceFeature.max >= cdsEnd) {
+      // CDS is fully contained in the exon, delete CDS
+      return new DeleteFeatureChange({
+        changedIds: [cdsFeature._id],
+        typeName: 'DeleteFeatureChange',
+        assembly: sourceAssemblyId,
+        changes: [
+          {
+            deletedFeature: getSnapshot(cdsFeature),
+            parentFeatureId: cdsFeature.parent?._id,
+          },
+        ],
+      })
+    }
+    if (sourceFeature.min <= cdsStart && sourceFeature.max > cdsStart) {
+      // Exon overlaps the start of the CDS so we need to move the CDS start
+      let newCdsStart
+      for (const cdsLocation of cdsLocations) {
+        if (cdsLocation.min > sourceFeature.max) {
+          newCdsStart = cdsLocation.min
+          break
+        }
+      }
+      if (!newCdsStart) {
+        throw new Error('Error setting new CDS start')
+      }
+      return {
+        typeName: 'LocationStartChange',
+        changedId: cdsFeature._id,
+        featureId: cdsFeature._id,
+        oldLocation: cdsFeature.min,
+        newLocation: newCdsStart,
+      }
+    }
+    if (sourceFeature.min < cdsEnd && sourceFeature.max >= cdsEnd) {
+      // Exon overlaps the end of the CDS so we need to move the CDS end
+      let newCdsEnd
+      for (const cdsLocation of cdsLocations.reverse()) {
+        if (cdsLocation.max < sourceFeature.min) {
+          newCdsEnd = cdsLocation.max
+          break
+        }
+      }
+      if (!newCdsEnd) {
+        throw new Error('Error setting new CDS end')
+      }
+      return {
+        typeName: 'LocationEndChange',
+        changedId: cdsFeature._id,
+        featureId: cdsFeature._id,
+        oldLocation: cdsFeature.max,
+        newLocation: newCdsEnd,
+      }
+    }
+    throw new Error('Unexpected relationship between exon and CDS')
+  }
+
+  function trimParent(
+    featureToDelete: AnnotationFeature,
+  ): LocationChange | undefined {
+    if (
+      !featureToDelete.parent?.children ||
+      featureToDelete.parent.children.size === 1
+    ) {
+      // Do not resize if this parent has only one child (i.e. the feature being deleted)
+      return
+    }
+    const childrenByStart = []
+    for (const x of featureToDelete.parent.children.values()) {
+      if (!featureTypeOntology?.isTypeOf(x.type, 'CDS')) {
+        // CDS has been already handled so don't use it to resize parent
+        childrenByStart.push(x)
+      }
+    }
+    childrenByStart.sort((a, b) => a.min - b.min)
+
+    const childrenByEnd = []
+    for (const x of featureToDelete.parent.children.values()) {
+      if (!featureTypeOntology?.isTypeOf(x.type, 'CDS')) {
+        // CDS has been already handled so don't use it to resize parent
+        childrenByEnd.push(x)
+      }
+    }
+    childrenByEnd.sort((a, b) => b.max - a.max)
+
+    if (featureToDelete.min === childrenByStart[0].min) {
+      // The feature to delete has the lowest start coordinate of all children
+      // Find the next lowest coordinate and reset parent to this new start
+      let newParentFeatureStart
+      for (const child of childrenByStart) {
+        if (
+          child._id !== featureToDelete._id &&
+          child.min >= featureToDelete.min
+        ) {
+          newParentFeatureStart = child.min
+          break
+        }
+      }
+      if (
+        newParentFeatureStart &&
+        newParentFeatureStart != featureToDelete.parent.min
+      ) {
+        return {
+          typeName: 'LocationStartChange',
+          changedId: featureToDelete.parent._id,
+          featureId: featureToDelete.parent._id,
+          oldLocation: featureToDelete.parent.min,
+          newLocation: newParentFeatureStart,
+        }
+      }
+    }
+
+    if (featureToDelete.max === childrenByEnd[0].max) {
+      // The feature to delete has the highest end coordinate of all children
+      // Find the next highest coordinate and reset parent to this new end
+      let newParentFeatureEnd
+      for (const child of childrenByEnd) {
+        if (
+          child._id != featureToDelete._id &&
+          child.max <= featureToDelete.max
+        ) {
+          newParentFeatureEnd = child.max
+          break
+        }
+      }
+      if (
+        newParentFeatureEnd &&
+        newParentFeatureEnd != featureToDelete.parent.max
+      ) {
+        return {
+          typeName: 'LocationEndChange',
+          changedId: featureToDelete.parent._id,
+          featureId: featureToDelete.parent._id,
+          oldLocation: featureToDelete.parent.max,
+          newLocation: newParentFeatureEnd,
+        }
+      }
+    }
+    return
+  }
 
   async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
     event.preventDefault()
@@ -46,16 +301,104 @@ export function DeleteFeature({
       setSelectedFeature()
     }
 
-    // Delete features
-    const change = new DeleteFeatureChange({
+    const locationChanges: LocationChange[] = []
+    // const deleteChanges: DeleteFeatureChange = []
+
+    const deleteChanges = new DeleteFeatureChange({
       changedIds: [sourceFeature._id],
       typeName: 'DeleteFeatureChange',
       assembly: sourceAssemblyId,
-      deletedFeature: getSnapshot(sourceFeature),
-      parentFeatureId: sourceFeature.parent?._id,
+      changes: [
+        {
+          deletedFeature: getSnapshot(sourceFeature),
+          parentFeatureId: sourceFeature.parent?._id,
+        },
+      ],
     })
-    await changeManager.submit(change)
-    notify('Feature deleted successfully', 'success')
+
+    if (
+      featureTypeOntology &&
+      (featureTypeOntology.isTypeOf(sourceFeature.type, 'transcript') ||
+        featureTypeOntology.isTypeOf(
+          sourceFeature.type,
+          'pseudogenic_transcript',
+        ))
+    ) {
+      const geneChange = trimParent(sourceFeature)
+      if (geneChange) {
+        locationChanges.push(geneChange)
+      }
+    }
+
+    if (
+      featureTypeOntology &&
+      featureTypeOntology.isTypeOf(sourceFeature.type, 'exon')
+    ) {
+      const cdsChange = trimCDS(sourceFeature)
+      if (cdsChange) {
+        if (cdsChange.typeName === 'DeleteFeatureChange') {
+          deleteChanges.changedIds.push(...cdsChange.changedIds)
+          deleteChanges.changes.push(...cdsChange.changes)
+        } else {
+          locationChanges.push(cdsChange)
+        }
+      }
+
+      const txChange = trimParent(sourceFeature)
+      if (txChange) {
+        locationChanges.push(txChange)
+        // Parent transcript has changed. See if we need to resize the parent gene
+        const gene = sourceFeature.parent?.parent
+        if (gene?.children) {
+          if (txChange.typeName === 'LocationStartChange') {
+            let newGeneStart = txChange.newLocation
+            for (const [, tx] of gene.children) {
+              if (tx._id != txChange.featureId && tx.min < newGeneStart) {
+                // Reset to longest child (tx)
+                newGeneStart = tx.min
+              }
+            }
+            if (newGeneStart != gene.min) {
+              locationChanges.push({
+                typeName: txChange.typeName,
+                changedId: gene._id,
+                featureId: gene._id,
+                oldLocation: gene.min,
+                newLocation: newGeneStart,
+              })
+            }
+          } else {
+            let newGeneEnd = txChange.newLocation
+            for (const [, tx] of gene.children) {
+              if (tx._id != txChange.featureId && tx.max > newGeneEnd) {
+                // Reset to longest child (tx)
+                newGeneEnd = tx.max
+              }
+            }
+            if (newGeneEnd != gene.max) {
+              locationChanges.push({
+                typeName: txChange.typeName,
+                changedId: gene._id,
+                featureId: gene._id,
+                oldLocation: gene.max,
+                newLocation: newGeneEnd,
+              })
+            }
+          }
+        }
+      }
+    }
+
+    const lumpedLocChanges = lumpLocationChanges(
+      locationChanges,
+      sourceAssemblyId,
+    )
+
+    await changeManager.submit(deleteChanges)
+    if (lumpedLocChanges) {
+      await changeManager.submit(lumpedLocChanges)
+    }
+
     handleClose()
     event.preventDefault()
   }
@@ -68,7 +411,11 @@ export function DeleteFeature({
       maxWidth={false}
       data-testid="delete-feature"
     >
-      <form onSubmit={onSubmit}>
+      <form
+        onSubmit={(event) => {
+          void onSubmit(event)
+        }}
+      >
         <DialogContent style={{ display: 'flex', flexDirection: 'column' }}>
           <DialogContentText>
             Are you sure you want to delete the selected feature?

package/src/components/DownloadGFF3.tsx

@@ -10,9 +10,12 @@ import { type Assembly } from '@jbrowse/core/assemblyManager/assembly'
 import { getConf } from '@jbrowse/core/configuration'
 import {
   Button,
+  Checkbox,
   DialogActions,
   DialogContent,
   DialogContentText,
+  FormControlLabel,
+  FormGroup,
   MenuItem,
   Select,
   type SelectChangeEvent,
@@ -37,6 +40,7 @@ interface DownloadGFF3Props {
 }
 
 export function DownloadGFF3({ handleClose, session }: DownloadGFF3Props) {
+  const [includeFASTA, setincludeFASTA] = useState(false)
   const [selectedAssembly, setSelectedAssembly] = useState<Assembly>()
   const [errorMessage, setErrorMessage] = useState('')
 
@@ -114,7 +118,7 @@ export function DownloadGFF3({ handleClose, session }: DownloadGFF3Props) {
     const exportURL = new URL('export', internetAccount.baseURL)
     const params: Record<string, string> = {
       exportID,
-      includeFASTA: 'true',
+      includeFASTA: includeFASTA ? 'true' : 'false',
     }
     const exportSearchParams = new URLSearchParams(params)
     exportURL.search = exportSearchParams.toString()
@@ -199,6 +203,21 @@ export function DownloadGFF3({ handleClose, session }: DownloadGFF3Props) {
           <DialogContentText>
             Select assembly to export to GFF3
           </DialogContentText>
+
+          <FormGroup>
+            <FormControlLabel
+              data-testid="include-fasta-checkbox"
+              control={
+                <Checkbox
+                  checked={includeFASTA}
+                  onChange={() => {
+                    setincludeFASTA(!includeFASTA)
+                  }}
+                />
+              }
+              label="Include fasta sequence in GFF output"
+            />
+          </FormGroup>
         </DialogContent>
         <DialogActions>
           <Button

package/src/components/EditZoomThresholdDialog.tsx

@@ -0,0 +1,69 @@
+import { Dialog } from '@jbrowse/core/ui'
+import {
+  Button,
+  DialogActions,
+  DialogContent,
+  TextField,
+  Typography,
+} from '@mui/material'
+import { observer } from 'mobx-react'
+import React, { useState } from 'react'
+
+const EditZoomThresholdDialog = observer(function ({
+  model,
+  handleClose,
+}: {
+  model: {
+    zoomThresholdSetting: number
+    setZoomThresholdSetting: (a: { zoomThreshold: number }) => void
+  }
+  handleClose: () => void
+}) {
+  const [zoomThreshold, setZoomThreshold] = useState(
+    `${model.zoomThresholdSetting}`,
+  )
+
+  return (
+    <Dialog open onClose={handleClose} title="Edit zoom threshold setting">
+      <DialogContent>
+        <Typography>
+          The zoom level in base pairs (bp) per pixel at which features are
+          rendered in this Annotations track. Increasing the value will allow
+          features to render when zooming out, but might impact performance.
+        </Typography>
+        <TextField
+          label="Threshold value (bpPerPx)"
+          value={zoomThreshold}
+          onChange={(event) => {
+            setZoomThreshold(event.target.value)
+          }}
+        />
+
+        <DialogActions>
+          <Button
+            variant="contained"
+            onClick={() => {
+              model.setZoomThresholdSetting({
+                zoomThreshold: +zoomThreshold,
+              })
+              handleClose()
+            }}
+          >
+            Submit
+          </Button>
+          <Button
+            variant="contained"
+            color="secondary"
+            onClick={() => {
+              handleClose()
+            }}
+          >
+            Cancel
+          </Button>
+        </DialogActions>
+      </DialogContent>
+    </Dialog>
+  )
+})
+
+export default EditZoomThresholdDialog

package/src/components/FilterFeatures.tsx

@@ -4,7 +4,7 @@ import {
   Chip,
   DialogContent,
   DialogContentText,
-  Grid2,
+  Grid,
   TextField,
 } from '@mui/material'
 import { observer } from 'mobx-react'
@@ -62,8 +62,8 @@ export const FilterFeatures = observer(function FilterFeatures({
         <DialogContentText>
           Select the feature types you want to display in the apollo track
         </DialogContentText>
-        <Grid2 container spacing={2}>
-          <Grid2 size={8}>
+        <Grid container spacing={2}>
+          <Grid size={8}>
             <OntologyTermAutocomplete
               session={session}
               ontologyName="Sequence Ontology"
@@ -84,8 +84,8 @@ export const FilterFeatures = observer(function FilterFeatures({
                 }
               }}
             />
-          </Grid2>
-          <Grid2 size={4}>
+          </Grid>
+          <Grid size={4}>
             <Button
               variant="contained"
               onClick={handleAddFeatureType}
@@ -95,8 +95,8 @@ export const FilterFeatures = observer(function FilterFeatures({
             >
               Add
             </Button>
-          </Grid2>
-        </Grid2>
+          </Grid>
+        </Grid>
         {selectedFeatureTypes.length > 0 && (
           <div>
             <hr />

package/src/components/FilterTranscripts.tsx

@@ -0,0 +1,86 @@
+import { type AnnotationFeature } from '@apollo-annotation/mst'
+import {
+  Checkbox,
+  DialogContent,
+  DialogContentText,
+  FormControlLabel,
+  FormGroup,
+  Grid,
+} from '@mui/material'
+import { observer } from 'mobx-react'
+import React, { useState } from 'react'
+
+import { Dialog } from './Dialog'
+
+interface FilterTranscriptsProps {
+  onUpdate: (forms: string[]) => void
+  sourceFeature: AnnotationFeature
+  filteredTranscripts: string[]
+  handleClose: () => void
+}
+
+export const FilterTranscripts = observer(function FilterTranscripts({
+  sourceFeature,
+  filteredTranscripts,
+  handleClose,
+  onUpdate,
+}: FilterTranscriptsProps) {
+  const allTranscripts: string[] = []
+  if (sourceFeature.children) {
+    for (const [, child] of sourceFeature.children) {
+      const childID: string | undefined = child.attributes
+        .get('gff_id')
+        ?.toString()
+      if (childID) {
+        allTranscripts.push(childID)
+      }
+    }
+  }
+  const [excludedTranscripts, setExcludedTranscripts] =
+    useState<string[]>(filteredTranscripts)
+  const handleChange = (value: string) => {
+    const newForms = excludedTranscripts.includes(value)
+      ? excludedTranscripts.filter((form) => form !== value)
+      : [...excludedTranscripts, value]
+    onUpdate(newForms)
+    setExcludedTranscripts(newForms)
+  }
+
+  return (
+    <Dialog
+      open
+      maxWidth={false}
+      data-testid="filter-transcripts-dialog"
+      title="Filter transcripts by ID"
+      handleClose={handleClose}
+    >
+      <DialogContent>
+        <DialogContentText>
+          Select the alternate transcripts you want to display in the apollo
+          track
+        </DialogContentText>
+        <Grid container spacing={2}>
+          <Grid size={8}>
+            <FormGroup>
+              {allTranscripts.map((item) => (
+                // eslint-disable-next-line react/jsx-key
+                <FormControlLabel
+                  control={
+                    <Checkbox
+                      checked={!excludedTranscripts.includes(item)}
+                      onChange={() => {
+                        handleChange(item)
+                      }}
+                      slotProps={{ input: { 'aria-label': 'controlled' } }}
+                    />
+                  }
+                  label={item}
+                />
+              ))}
+            </FormGroup>
+          </Grid>
+        </Grid>
+      </DialogContent>
+    </Dialog>
+  )
+})

package/src/components/ImportFeatures.tsx

@@ -271,7 +271,7 @@ export function ImportFeatures({
                 <Checkbox
                   checked={deleteFeatures}
                   onChange={handleDeleteFeatures}
-                  inputProps={{ 'aria-label': 'controlled' }}
+                  slotProps={{ input: { 'aria-label': 'controlled' } }}
                   color="warning"
                 />
               }

package/src/components/ManageChecks.tsx

@@ -238,7 +238,7 @@ export function ManageChecks({ handleClose, session }: ManageChecksProps) {
           >
             {assemblies.map((option) => (
               <MenuItem key={option.name} value={option.name}>
-                {option.displayName ?? option.name}
+                {option.displayName}
               </MenuItem>
             ))}
           </Select>