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

package/src/TabularEditor/HybridGrid/Feature.tsx

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

package/src/TabularEditor/HybridGrid/HybridGrid.tsx

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

package/src/components/AddAssembly.tsx

@@ -80,7 +80,7 @@ const useStyles = makeStyles()((theme) => ({
     borderTop: '1px solid rgba(0, 0, 0, .125)',
   },
   radioIcon: {
-    color: theme?.palette?.tertiary?.contrastText,
+    color: theme.palette.tertiary.contrastText,
   },
   dialog: {
     // minHeight: 500,

package/src/components/AddAssemblyAliases.tsx

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

package/src/components/AddChildFeature.tsx

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

package/src/components/AddFeature.tsx

@@ -147,7 +147,9 @@ export function AddFeature({
           children,
         },
       })
-      void changeManager.submit(change)
+      void changeManager.submit(change).then(() => {
+        session.apolloSetSelectedFeature(id)
+      })
       handleClose()
       return
     }
@@ -164,7 +166,9 @@ export function AddFeature({
         assembly: region.assemblyName,
         addedFeature: mRNA,
       })
-      void changeManager.submit(change)
+      void changeManager.submit(change).then(() => {
+        session.apolloSetSelectedFeature(mRNA._id)
+      })
       handleClose()
       return
     }
@@ -187,7 +191,9 @@ export function AddFeature({
         strand,
       },
     })
-    void changeManager.submit(change)
+    void changeManager.submit(change).then(() => {
+      session.apolloSetSelectedFeature(id)
+    })
     handleClose()
     return
   }

package/src/components/AddRefSeqAliases.tsx

@@ -10,7 +10,7 @@ import {
   DialogContent,
   DialogContentText,
   FormControl,
-  Grid2,
+  Grid,
   InputLabel,
   MenuItem,
   Select,
@@ -212,8 +212,8 @@ export function AddRefSeqAliases({
       fullWidth
     >
       <DialogContent style={{ display: 'flex', flexDirection: 'column' }}>
-        <Grid2 container spacing={2}>
-          <Grid2>
+        <Grid container spacing={2}>
+          <Grid>
             <FormControl disabled={enableSubmit && !errorMessage} fullWidth>
               <InputLabel id="demo-simple-select-label">Assembly</InputLabel>
               <Select
@@ -225,13 +225,13 @@ export function AddRefSeqAliases({
               >
                 {assemblies.map((option) => (
                   <MenuItem key={option.name} value={option.name}>
-                    {option.displayName ?? option.name}
+                    {option.displayName}
                   </MenuItem>
                 ))}
               </Select>
             </FormControl>
-          </Grid2>
-          <Grid2>
+          </Grid>
+          <Grid>
             <InputLabel>Load RefName alias</InputLabel>
             <input
               type="file"
@@ -239,8 +239,8 @@ export function AddRefSeqAliases({
               ref={fileRef}
               disabled={(enableSubmit && !errorMessage) || !selectedAssembly}
             />
-          </Grid2>
-        </Grid2>
+          </Grid>
+        </Grid>
         {selectedAssembly && refNameAliasMap.size > 0 ? (
           <div style={{ height: 200, width: '100%', marginTop: 20 }}>
             <InputLabel>
@@ -256,7 +256,7 @@ export function AddRefSeqAliases({
               }}
               pageSizeOptions={[5, 10]}
               onRowSelectionModelChange={(ids) => {
-                rowSelectionChange(ids as number[])
+                rowSelectionChange(ids as unknown as number[])
               }}
               processRowUpdate={processRowUpdate}
               checkboxSelection

package/src/components/CopyFeature.tsx

@@ -203,7 +203,9 @@ export function CopyFeature({
       copyFeature: true,
       allIds: featureIds,
     })
-    void changeManager.submit(change)
+    void changeManager.submit(change).then(() => {
+      session.apolloSetSelectedFeature(newFeatureLine._id)
+    })
     handleClose()
     event.preventDefault()
   }

package/src/components/CreateApolloAnnotation.tsx

@@ -420,6 +420,7 @@ export function CreateApolloAnnotation({
       },
     })
     await submitChange(change)
+    apolloSessionModel.apolloSetSelectedFeature(newGeneId)
   }
 
   const extendSelectedDestinationFeatureLocation = async (

package/src/components/DeleteAssembly.tsx

@@ -142,7 +142,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/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

@@ -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>

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/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?

package/src/components/ViewCheckResults.tsx

@@ -127,7 +127,7 @@ export function ViewCheckResults({
       >
         {assemblies.map((option) => (
           <MenuItem key={option.name} value={option.name}>
-            {option.displayName ?? option.name}
+            {option.displayName}
           </MenuItem>
         ))}
       </Select>

package/src/components/index.ts

@@ -1,4 +1,5 @@
 export * from './AddAssembly'
+export * from './AddAssemblyAliases'
 export * from './AddChildFeature'
 export * from './AddFeature'
 export * from './CopyFeature'

package/src/config.ts

@@ -15,6 +15,12 @@ const ApolloPluginConfigurationSchema = ConfigurationSchema('ApolloPlugin', {
     type: 'boolean',
     defaultValue: false,
   },
+  backgroundColorForFeature: {
+    description: 'Color ',
+    type: 'string',
+    defaultValue: 'jexl:colorFeature(featureType)',
+    contextVariable: ['featureType'],
+  },
 })
 
 export default ApolloPluginConfigurationSchema