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

package/src/components/CreateApolloAnnotation.tsx

@@ -193,11 +193,8 @@ export function CreateApolloAnnotation({
         continue
       }
 
-      // Destination feature should be of type gene amd should be on the same strand as the source feature
-      if (
-        featureTypeOntology?.isTypeOf(f.type, 'gene') &&
-        f.strand === annotationFeature.strand
-      ) {
+      // Destination feature should be of type gene
+      if (featureTypeOntology?.isTypeOf(f.type, 'gene')) {
         const featureSnapshot = getSnapshot(f)
         filteredFeatures.push(featureSnapshot)
       }
@@ -373,7 +370,7 @@ export function CreateApolloAnnotation({
       })
     }
 
-    await submitChange(change)
+    await submitChange(change, annotationFeature._id)
   }
 
   const copyTranscriptsToDestinationGene = async (
@@ -384,6 +381,15 @@ export function CreateApolloAnnotation({
     }
     for (const transcriptId of Object.keys(transcripts)) {
       const transcript = transcripts[transcriptId]
+      transcript.strand = selectedDestinationFeature.strand
+
+      // update strand of transcript children if they exist
+      if (transcript.children) {
+        for (const childId of Object.keys(transcript.children)) {
+          transcript.children[childId].strand =
+            selectedDestinationFeature.strand
+        }
+      }
       const change = new AddFeatureChange({
         parentFeatureId: selectedDestinationFeature._id,
         changedIds: [selectedDestinationFeature._id],
@@ -391,7 +397,8 @@ export function CreateApolloAnnotation({
         assembly: assembly.name,
         addedFeature: transcript,
       })
-      await submitChange(change)
+      // selects the last added transcript
+      await submitChange(change, transcriptId)
     }
   }
 
@@ -419,7 +426,7 @@ export function CreateApolloAnnotation({
         },
       },
     })
-    await submitChange(change)
+    await submitChange(change, newGeneId)
   }
 
   const extendSelectedDestinationFeatureLocation = async (
@@ -461,8 +468,14 @@ export function CreateApolloAnnotation({
 
   const submitChange = async (
     change: AddFeatureChange | LocationStartChange | LocationEndChange,
+    selectedFeatureId?: string,
   ) => {
-    await apolloSessionModel.apolloDataStore.changeManager.submit(change)
+    await apolloSessionModel.apolloDataStore.changeManager
+      .submit(change)
+      .then(() => {
+        // Selects the newly added/modified feature
+        apolloSessionModel.apolloSetSelectedFeature(selectedFeatureId)
+      })
   }
 
   const handleCreateNewGeneChange = (

package/src/components/DeleteAssembly.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/unbound-method */
 /* eslint-disable @typescript-eslint/no-misused-promises */
 import { DeleteAssemblyChange } from '@apollo-annotation/shared'
-import { type Assembly } from '@jbrowse/core/assemblyManager/assembly'
 import {
   Button,
   Checkbox,
@@ -15,7 +14,7 @@ import {
   type SelectChangeEvent,
 } from '@mui/material'
 import { getRoot } from 'mobx-state-tree'
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 
 import { type ApolloInternetAccountModel } from '../ApolloInternetAccount/model'
 import {
@@ -40,7 +39,6 @@ export function DeleteAssembly({
   session,
 }: DeleteAssemblyProps) {
   const { internetAccounts } = getRoot<ApolloRootModel>(session)
-  const [selectedAssembly, setSelectedAssembly] = useState<Assembly>()
   const [errorMessage, setErrorMessage] = useState('')
   const [confirmDelete, setconfirmDelete] = useState(false)
   const [submitted, setSubmitted] = useState(false)
@@ -63,12 +61,7 @@ export function DeleteAssembly({
   }
 
   const assemblies = collaborationServerDriver.getAssemblies()
-
-  useEffect(() => {
-    if (assemblies.length > 0 && selectedAssembly === undefined) {
-      setSelectedAssembly(assemblies[0])
-    }
-  }, [assemblies, selectedAssembly])
+  const [selectedAssembly, setSelectedAssembly] = useState(assemblies.at(0))
 
   function handleChangeInternetAccount(e: SelectChangeEvent) {
     setSubmitted(false)
@@ -142,7 +135,7 @@ export function DeleteAssembly({
           >
             {assemblies.map((option) => (
               <MenuItem key={option.name} value={option.name}>
-                {option.displayName ?? option.name}
+                {option.displayName}
               </MenuItem>
             ))}
           </Select>

package/src/components/DownloadGFF3.tsx

@@ -5,7 +5,7 @@
 /* eslint-disable @typescript-eslint/no-misused-promises */
 import { type ApolloAssembly } from '@apollo-annotation/mst'
 import { annotationFeatureToGFF3 } from '@apollo-annotation/shared'
-import gff, { type GFF3Item } from '@gmod/gff'
+import { type GFF3Item, formatSync } from '@gmod/gff'
 import { type Assembly } from '@jbrowse/core/assemblyManager/assembly'
 import { getConf } from '@jbrowse/core/configuration'
 import {
@@ -169,7 +169,7 @@ export function DownloadGFF3({ handleClose, session }: DownloadGFF3Props) {
       const { refName, seq } = sequenceFeature
       gff3Items.push({ id: refName, description: '', sequence: seq })
     }
-    const gff3 = gff.formatSync(gff3Items)
+    const gff3 = formatSync(gff3Items)
     const gff3Blob = new Blob([gff3], { type: 'text/plain;charset=utf-8' })
     saveAs(
       gff3Blob,

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

@@ -5,7 +5,7 @@ import {
   DialogContentText,
   FormControlLabel,
   FormGroup,
-  Grid2,
+  Grid,
 } from '@mui/material'
 import { observer } from 'mobx-react'
 import React, { useState } from 'react'
@@ -59,8 +59,8 @@ export const FilterTranscripts = observer(function FilterTranscripts({
           Select the alternate transcripts you want to display in the apollo
           track
         </DialogContentText>
-        <Grid2 container spacing={2}>
-          <Grid2 size={8}>
+        <Grid container spacing={2}>
+          <Grid size={8}>
             <FormGroup>
               {allTranscripts.map((item) => (
                 // eslint-disable-next-line react/jsx-key
@@ -71,15 +71,15 @@ export const FilterTranscripts = observer(function FilterTranscripts({
                       onChange={() => {
                         handleChange(item)
                       }}
-                      inputProps={{ 'aria-label': 'controlled' }}
+                      slotProps={{ input: { 'aria-label': 'controlled' } }}
                     />
                   }
                   label={item}
                 />
               ))}
             </FormGroup>
-          </Grid2>
-        </Grid2>
+          </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

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/use-unknown-in-catch-callback-variable */
 /* eslint-disable @typescript-eslint/unbound-method */
 /* eslint-disable @typescript-eslint/no-misused-promises */
-import { type Assembly } from '@jbrowse/core/assemblyManager/assembly'
 import { type AbstractSessionModel } from '@jbrowse/core/util'
 import {
   Button,
@@ -52,7 +51,6 @@ interface CheckDocument {
 
 export function ManageChecks({ handleClose, session }: ManageChecksProps) {
   const { internetAccounts } = getRoot<ApolloRootModel>(session)
-  const [selectedAssembly, setSelectedAssembly] = useState<Assembly>()
   const [errorMessage, setErrorMessage] = useState('')
   const [submitted, setSubmitted] = useState(false)
   const apolloInternetAccounts = internetAccounts.filter(
@@ -76,6 +74,7 @@ export function ManageChecks({ handleClose, session }: ManageChecksProps) {
   }
 
   const assemblies = collaborationServerDriver.getAssemblies()
+  const [selectedAssembly, setSelectedAssembly] = useState(assemblies.at(0))
 
   useEffect(() => {
     async function getChecks() {
@@ -99,19 +98,13 @@ export function ManageChecks({ handleClose, session }: ManageChecksProps) {
     })
   }, [selectedInternetAccount])
 
-  useEffect(() => {
-    if (assemblies.length > 0 && selectedAssembly === undefined) {
-      setSelectedAssembly(assemblies[0])
-    }
-  }, [assemblies, selectedAssembly])
-
   useEffect(() => {
     async function getChecks() {
       if (!selectedAssembly) {
         return
       }
       const { baseURL, getFetcher } = selectedInternetAccount
-      const uri = new URL(`/assemblies/${selectedAssembly.name}`, baseURL).href
+      const uri = new URL(`assemblies/${selectedAssembly.name}`, baseURL).href
       const apolloFetch = getFetcher({ locationType: 'UriLocation', uri })
       const response = await apolloFetch(uri, { method: 'GET' })
       if (!response.ok) {
@@ -238,7 +231,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>

package/src/components/ManageUsers.tsx

@@ -28,7 +28,7 @@ import {
   GridToolbar,
 } from '@mui/x-data-grid'
 import { getRoot } from 'mobx-state-tree'
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 
 import { type ApolloInternetAccountModel } from '../ApolloInternetAccount/model'
 import { type ChangeManager } from '../ChangeManager'
@@ -72,33 +72,34 @@ export function ManageUsers({
   )
   const [users, setUsers] = useState<UserResponse[]>([])
 
-  const getUsers = useCallback(async () => {
-    const { baseURL } = selectedInternetAccount
-    const uri = new URL('users', baseURL).href
-    const apolloFetch = selectedInternetAccount.getFetcher({
-      locationType: 'UriLocation',
-      uri,
-    })
-    if (apolloFetch) {
-      const response = await apolloFetch(uri, { method: 'GET' })
-      if (!response.ok) {
-        const newErrorMessage = await createFetchErrorMessage(
-          response,
-          'Error when getting user data from db',
+  useEffect(() => {
+    async function getUsers() {
+      const { baseURL } = selectedInternetAccount
+      const uri = new URL('users', baseURL).href
+      const apolloFetch = selectedInternetAccount.getFetcher({
+        locationType: 'UriLocation',
+        uri,
+      })
+      if (apolloFetch) {
+        const response = await apolloFetch(uri, { method: 'GET' })
+        if (!response.ok) {
+          const newErrorMessage = await createFetchErrorMessage(
+            response,
+            'Error when getting user data from db',
+          )
+          setErrorMessage(newErrorMessage)
+          return
+        }
+        const data = (await response.json()) as UserResponse[]
+        setUsers(
+          data.map((u) => (u.role === undefined ? { ...u, role: '' } : u)),
         )
-        setErrorMessage(newErrorMessage)
-        return
       }
-      const data = (await response.json()) as UserResponse[]
-      setUsers(data.map((u) => (u.role === undefined ? { ...u, role: '' } : u)))
     }
-  }, [selectedInternetAccount])
-
-  useEffect(() => {
     getUsers().catch((error) => {
       setErrorMessage(String(error))
     })
-  }, [getUsers])
+  }, [selectedInternetAccount])
 
   async function deleteUser(id: GridRowId) {
     const change = new DeleteUserChange({

package/src/components/MergeTranscripts.tsx

@@ -1,8 +1,6 @@
 /* eslint-disable @typescript-eslint/unbound-method */
-/* eslint-disable @typescript-eslint/no-misused-promises */
 import { type AnnotationFeature } from '@apollo-annotation/mst'
 import { MergeTranscriptsChange } from '@apollo-annotation/shared'
-import { type AbstractSessionModel } from '@jbrowse/core/util'
 import {
   Box,
   Button,
@@ -82,17 +80,20 @@ export function MergeTranscripts({
   sourceAssemblyId,
   sourceFeature,
 }: MergeTranscriptsProps) {
-  const { notify } = session as unknown as AbstractSessionModel
   const [errorMessage, setErrorMessage] = useState('')
-  const [selectedTranscript, setSelectedTranscript] =
-    useState<AnnotationFeature>()
+  const transcripts = getTranscripts(sourceFeature, session)
+  const firstTranscript = Object.keys(transcripts).at(0)
+  const [selectedTranscriptId, setSelectedTranscriptId] = useState<
+    string | undefined
+  >(firstTranscript)
 
-  async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
+  function onSubmit(event: React.FormEvent<HTMLFormElement>) {
     event.preventDefault()
     setErrorMessage('')
-    if (!selectedTranscript) {
+    if (!selectedTranscriptId) {
       return
     }
+    const selectedTranscript = transcripts[selectedTranscriptId]
     if (selectedFeature?._id === sourceFeature._id) {
       setSelectedFeature()
     }
@@ -109,20 +110,16 @@ export function MergeTranscripts({
       secondTranscript: getSnapshot(selectedTranscript),
       parentFeatureId: sourceFeature.parent._id,
     })
-    await changeManager.submit(change)
-    notify('Transcripts successfully merged', 'success')
+    void changeManager.submit(change)
     handleClose()
-    event.preventDefault()
   }
 
   const handleTypeChange = (e: SelectChangeEvent) => {
     setErrorMessage('')
     const { value } = e.target
-    setSelectedTranscript(transcripts[value])
+    setSelectedTranscriptId(value)
   }
 
-  const transcripts = getTranscripts(sourceFeature, session)
-
   return (
     <Dialog
       open
@@ -140,7 +137,7 @@ export function MergeTranscripts({
             <RadioGroup
               aria-labelledby="demo-radio-buttons-group-label"
               name="radio-buttons-group"
-              value={selectedTranscript}
+              value={selectedTranscriptId}
               onChange={handleTypeChange}
             >
               {Object.keys(transcripts).map((key) => (
@@ -165,7 +162,7 @@ export function MergeTranscripts({
             type="submit"
             disabled={
               Object.keys(transcripts).length === 0 ||
-              selectedTranscript === undefined
+              selectedTranscriptId === undefined
             }
           >
             Submit

package/src/components/OntologyTermAutocomplete.tsx

@@ -73,21 +73,14 @@ export function OntologyTermAutocomplete({
     [filterTermsProp, includeDeprecated],
   )
 
-  // effect for clearing choices when not open
-  useEffect(() => {
-    if (!open) {
-      setTermChoices(undefined)
-    }
-  }, [open])
-
   // effect for matching the current value with an ontology term
   useEffect(() => {
     const controller = new AbortController()
     const { signal } = controller
     if (needToLoadCurrentTerm) {
-      setCurrentOntologyTermInvalid('')
       getCurrentTerm(ontologyStore, valueString, filterTerms, signal).then(
         (term) => {
+          setCurrentOntologyTermInvalid('')
           if (!signal.aborted) {
             setCurrentOntologyTerm(term)
           }

package/src/components/OntologyTermMultiSelect.tsx

@@ -4,9 +4,9 @@
 import { isAbortException } from '@jbrowse/core/util/aborting'
 import {
   Autocomplete,
-  type AutocompleteRenderGetTagProps,
+  type AutocompleteRenderValueGetItemProps,
   Chip,
-  Grid2,
+  Grid,
   TextField,
   Tooltip,
   Typography,
@@ -49,14 +49,14 @@ interface TermValue {
 // const hiliteRegex = /(?<=<em class="hilite">)(.*?)(?=<\/em>)/g
 
 function TermTagWithTooltip({
-  getTagProps,
+  getItemProps,
   index,
   ontology,
   termId,
 }: {
   termId: string
   index: number
-  getTagProps: AutocompleteRenderGetTagProps
+  getItemProps: AutocompleteRenderValueGetItemProps<true>
   ontology: OntologyRecord
 }) {
   const manager = getParent<OntologyManager>(ontology, 2)
@@ -100,7 +100,7 @@ function TermTagWithTooltip({
           label={errorMessage || manager.applyPrefixes(termId)}
           color={errorMessage ? 'error' : 'default'}
           size="small"
-          {...getTagProps({ index })}
+          {...getItemProps({ index })}
         />
       </div>
     </Tooltip>
@@ -270,13 +270,13 @@ export function OntologyTermMultiSelect({
           inputValue={inputValue}
         />
       )}
-      renderTags={(v, getTagProps) =>
+      renderValue={(v, getItemProps) =>
         v.map((option, index) => (
           <TermTagWithTooltip
             termId={option.term.id}
             index={index}
             ontology={ontology}
-            getTagProps={getTagProps}
+            getItemProps={getItemProps}
             key={option.term.id}
           />
         ))
@@ -336,8 +336,8 @@ function Option(props: {
   //   .join(', ')
   return (
     <li {...other}>
-      <Grid2 container>
-        <Grid2>
+      <Grid container>
+        <Grid>
           <Typography component="span">
             {ontologyManager.applyPrefixes(option.term.id)}
           </Typography>{' '}
@@ -347,8 +347,8 @@ function Option(props: {
           />{' '}
           {/* ({lblScore}) */}
           <dl>{fields}</dl>
-        </Grid2>
-      </Grid2>
+        </Grid>
+      </Grid>
     </li>
   )
 }

package/src/components/OpenLocalFile.tsx

@@ -87,6 +87,13 @@ export function OpenLocalFile({ handleClose, session }: OpenLocalFileProps) {
       return
     }
 
+    const fileMetadata: { file?: string } = {}
+    if (isElectron) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      const { webUtils } = globalThis.require('electron')
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+      fileMetadata.file = webUtils.getPathForFile(file) as string
+    }
     const assemblyConfig = {
       name: assemblyId,
       aliases: [assemblyName],
@@ -95,17 +102,14 @@ export function OpenLocalFile({ handleClose, session }: OpenLocalFileProps) {
         trackId: `sequenceConfigId-${assemblyName}`,
         type: 'ReferenceSequenceTrack',
         adapter: { type: 'ApolloSequenceAdapter', assemblyId },
-        metadata: {
-          apollo: true,
-          ...(isElectron
-            ? { file: (file as File & { path: string }).path }
-            : {}),
-        },
+        metadata: { apollo: true, ...fileMetadata },
       },
     }
 
     // Save assembly into session
-    await (addSessionAssembly || addAssembly)(assemblyConfig)
+    await (isElectron
+      ? addAssembly?.(assemblyConfig)
+      : (addSessionAssembly || addAssembly)(assemblyConfig))
     const a = await assemblyManager.waitForAssembly(assemblyConfig.name)
     if (a) {
       // @ts-expect-error MST type coercion problem?