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

package/src/components/MergeExons.tsx

@@ -0,0 +1,193 @@
+/* eslint-disable @typescript-eslint/unbound-method */
+
+import { type AnnotationFeature } from '@apollo-annotation/mst'
+import { MergeExonsChange } from '@apollo-annotation/shared'
+import {
+  Box,
+  Button,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  FormControl,
+  FormControlLabel,
+  Radio,
+  RadioGroup,
+  type SelectChangeEvent,
+} from '@mui/material'
+import { getSnapshot } from 'mobx-state-tree'
+import React, { useState } from 'react'
+
+import { type ChangeManager } from '../ChangeManager'
+import { type ApolloSessionModel } from '../session'
+
+import { Dialog } from './Dialog'
+
+interface MergeExonsProps {
+  session: ApolloSessionModel
+  handleClose(): void
+  sourceFeature: AnnotationFeature
+  sourceAssemblyId: string
+  changeManager: ChangeManager
+  selectedFeature?: AnnotationFeature
+  setSelectedFeature(feature?: AnnotationFeature): void
+}
+
+function getNeighboringExons(
+  referenceExon: AnnotationFeature,
+): Record<string, AnnotationFeature> {
+  const neighboringExons: Record<string, AnnotationFeature> = {}
+  const tx = referenceExon.parent
+  if (!tx) {
+    throw new Error('Unable to find parent of reference exon')
+  }
+  let exons: AnnotationFeature[] = []
+  if (tx.children) {
+    for (const [, feature] of tx.children) {
+      if (feature.type === 'exon') {
+        exons.push(feature)
+      }
+    }
+  }
+  exons = exons.sort((a, b) => {
+    if (a.min === b.min) {
+      return a.max - b.max
+    }
+    return a.min - b.min
+  })
+  if (tx.strand && tx.strand === -1) {
+    exons = exons.reverse()
+  }
+  let i = 0
+  for (const x of exons) {
+    if (x._id === referenceExon._id) {
+      if (exons.length > i + 1) {
+        neighboringExons.three_prime = exons[i + 1]
+      }
+      if (i > 0) {
+        neighboringExons.five_prime = exons[i - 1]
+      }
+      break
+    }
+    i++
+  }
+  return neighboringExons
+}
+
+function makeRadioButtonName(
+  key: string,
+  neighboringExons: Record<string, AnnotationFeature>,
+): string {
+  const neighboringExon = neighboringExons[key]
+  let name
+  if (key === 'three_prime') {
+    name = `3'end (coords: ${neighboringExon.min + 1}-${neighboringExon.max})`
+  } else if (key === 'five_prime') {
+    name = `5'end (coords: ${neighboringExon.min + 1}-${neighboringExon.max})`
+  } else {
+    throw new Error(`Unexpected direction: "${key}"`)
+  }
+  return name
+}
+
+export function MergeExons({
+  changeManager,
+  handleClose,
+  selectedFeature,
+  setSelectedFeature,
+  sourceAssemblyId,
+  sourceFeature,
+}: MergeExonsProps) {
+  const [errorMessage, setErrorMessage] = useState('')
+  const [selectedExon, setSelectedExon] = useState<AnnotationFeature>()
+
+  function onSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    setErrorMessage('')
+    const { parent } = sourceFeature
+    if (!(selectedExon && parent)) {
+      return
+    }
+    if (selectedFeature?._id === sourceFeature._id) {
+      setSelectedFeature()
+    }
+    const change = new MergeExonsChange({
+      changedIds: [sourceFeature._id],
+      typeName: 'MergeExonsChange',
+      assembly: sourceAssemblyId,
+      firstExon: getSnapshot(sourceFeature),
+      secondExon: getSnapshot(selectedExon),
+      parentFeatureId: parent._id,
+    })
+    void changeManager.submit(change)
+    handleClose()
+    event.preventDefault()
+  }
+
+  const handleTypeChange = (e: SelectChangeEvent) => {
+    setErrorMessage('')
+    const { value } = e.target
+    setSelectedExon(neighboringExons[value])
+  }
+
+  const neighboringExons = getNeighboringExons(sourceFeature)
+
+  return (
+    <Dialog
+      open
+      title="Merge exons"
+      handleClose={handleClose}
+      maxWidth={false}
+      data-testid="merge-exons"
+    >
+      <form onSubmit={onSubmit}>
+        <DialogContent style={{ display: 'flex', flexDirection: 'column' }}>
+          {Object.keys(neighboringExons).length === 0
+            ? 'There are no neighbouring exons to merge with'
+            : 'Merge with exon on:'}
+          <FormControl style={{ marginTop: 5 }}>
+            <RadioGroup
+              aria-labelledby="demo-radio-buttons-group-label"
+              name="radio-buttons-group"
+              value={selectedExon}
+              onChange={handleTypeChange}
+            >
+              {Object.keys(neighboringExons).map((key) => (
+                <FormControlLabel
+                  value={key}
+                  key={key}
+                  control={<Radio />}
+                  label={
+                    <Box display="flex" alignItems="center">
+                      {makeRadioButtonName(key, neighboringExons)}
+                    </Box>
+                  }
+                />
+              ))}
+            </RadioGroup>
+          </FormControl>
+        </DialogContent>
+
+        <DialogActions>
+          <Button
+            variant="contained"
+            type="submit"
+            disabled={
+              Object.keys(neighboringExons).length === 0 ||
+              selectedExon === undefined
+            }
+          >
+            Submit
+          </Button>
+          <Button variant="outlined" type="submit" onClick={handleClose}>
+            Cancel
+          </Button>
+        </DialogActions>
+      </form>
+      {errorMessage ? (
+        <DialogContent>
+          <DialogContentText color="error">{errorMessage}</DialogContentText>
+        </DialogContent>
+      ) : null}
+    </Dialog>
+  )
+}

package/src/components/MergeTranscripts.tsx

@@ -0,0 +1,182 @@
+/* eslint-disable @typescript-eslint/unbound-method */
+import { type AnnotationFeature } from '@apollo-annotation/mst'
+import { MergeTranscriptsChange } from '@apollo-annotation/shared'
+import {
+  Box,
+  Button,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  FormControl,
+  FormControlLabel,
+  Radio,
+  RadioGroup,
+  type SelectChangeEvent,
+} from '@mui/material'
+import { getSnapshot } from 'mobx-state-tree'
+import React, { useState } from 'react'
+
+import { type ChangeManager } from '../ChangeManager'
+import { type ApolloSessionModel } from '../session'
+
+import { Dialog } from './Dialog'
+
+interface MergeTranscriptsProps {
+  session: ApolloSessionModel
+  handleClose(): void
+  sourceFeature: AnnotationFeature
+  sourceAssemblyId: string
+  changeManager: ChangeManager
+  selectedFeature?: AnnotationFeature
+  setSelectedFeature(feature?: AnnotationFeature): void
+}
+
+function getTranscripts(
+  referenceTranscript: AnnotationFeature,
+  session: ApolloSessionModel,
+): Record<string, AnnotationFeature> {
+  const gene = referenceTranscript.parent
+  if (!gene) {
+    throw new Error('Unable to find parent of reference transcript')
+  }
+
+  const { featureTypeOntology } = session.apolloDataStore.ontologyManager
+  if (!featureTypeOntology) {
+    throw new Error('featureTypeOntology is undefined')
+  }
+
+  const transcripts: Record<string, AnnotationFeature> = {}
+  if (gene.children) {
+    for (const [, feature] of gene.children) {
+      if (
+        featureTypeOntology.isTypeOf(feature.type, 'transcript') &&
+        feature._id !== referenceTranscript._id
+      ) {
+        transcripts[feature._id] = feature
+      }
+    }
+  }
+  return transcripts
+}
+
+function makeRadioButtonName(transcript: AnnotationFeature): string {
+  let id
+  if (transcript.attributes.get('gff_name')) {
+    id = transcript.attributes.get('gff_name')?.join(',')
+  } else if (transcript.attributes.get('gff_id')) {
+    id = transcript.attributes.get('gff_id')?.join(',')
+  } else {
+    id = transcript._id
+  }
+  return `${id} [${transcript.min + 1}-${transcript.max}]`
+}
+
+export function MergeTranscripts({
+  changeManager,
+  handleClose,
+  selectedFeature,
+  session,
+  setSelectedFeature,
+  sourceAssemblyId,
+  sourceFeature,
+}: MergeTranscriptsProps) {
+  const [errorMessage, setErrorMessage] = useState('')
+  const transcripts = getTranscripts(sourceFeature, session)
+  const firstTranscript = Object.keys(transcripts).at(0)
+  const [selectedTranscriptId, setSelectedTranscriptId] = useState<
+    string | undefined
+  >(firstTranscript)
+
+  function onSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    setErrorMessage('')
+    if (!selectedTranscriptId) {
+      return
+    }
+    const selectedTranscript = transcripts[selectedTranscriptId]
+    if (selectedFeature?._id === sourceFeature._id) {
+      setSelectedFeature()
+    }
+
+    if (!sourceFeature.parent) {
+      throw new Error('Cannot find parent')
+    }
+
+    const change = new MergeTranscriptsChange({
+      changedIds: [sourceFeature._id],
+      typeName: 'MergeTranscriptsChange',
+      assembly: sourceAssemblyId,
+      firstTranscript: getSnapshot(sourceFeature),
+      secondTranscript: getSnapshot(selectedTranscript),
+      parentFeatureId: sourceFeature.parent._id,
+    })
+    void changeManager.submit(change)
+    handleClose()
+  }
+
+  const handleTypeChange = (e: SelectChangeEvent) => {
+    setErrorMessage('')
+    const { value } = e.target
+    setSelectedTranscriptId(value)
+  }
+
+  return (
+    <Dialog
+      open
+      title="Merge transcripts"
+      handleClose={handleClose}
+      maxWidth={false}
+      data-testid="merge-transcripts"
+    >
+      <form onSubmit={onSubmit}>
+        <DialogContent style={{ display: 'flex', flexDirection: 'column' }}>
+          {Object.keys(transcripts).length === 0
+            ? 'There are no transcripts to merge with'
+            : 'Merge with transcript:'}
+          <FormControl style={{ marginTop: 5 }}>
+            <RadioGroup
+              aria-labelledby="demo-radio-buttons-group-label"
+              name="radio-buttons-group"
+              value={selectedTranscriptId}
+              onChange={handleTypeChange}
+            >
+              {Object.keys(transcripts).map((key) => (
+                <FormControlLabel
+                  value={key}
+                  key={key}
+                  control={<Radio />}
+                  label={
+                    <Box display="flex" alignItems="center">
+                      {makeRadioButtonName(transcripts[key])}
+                    </Box>
+                  }
+                />
+              ))}
+            </RadioGroup>
+          </FormControl>
+        </DialogContent>
+
+        <DialogActions>
+          <Button
+            variant="contained"
+            type="submit"
+            disabled={
+              Object.keys(transcripts).length === 0 ||
+              selectedTranscriptId === undefined
+            }
+          >
+            Submit
+          </Button>
+          <Button variant="outlined" type="submit" onClick={handleClose}>
+            Cancel
+          </Button>
+        </DialogActions>
+      </form>
+      {errorMessage ? (
+        <DialogContent>
+          <DialogContentText color="error">{errorMessage}</DialogContentText>
+        </DialogContent>
+      ) : null}
+    </Dialog>
+  )
+}

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/SplitExon.tsx

@@ -0,0 +1,134 @@
+/* eslint-disable @typescript-eslint/unbound-method */
+
+import {
+  type AnnotationFeature,
+  type AnnotationFeatureSnapshot,
+} from '@apollo-annotation/mst'
+import { SplitExonChange } from '@apollo-annotation/shared'
+import {
+  Button,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+} from '@mui/material'
+import ObjectID from 'bson-objectid'
+import { getSnapshot } from 'mobx-state-tree'
+import React, { useState } from 'react'
+
+import { type ChangeManager } from '../ChangeManager'
+import { type ApolloSessionModel } from '../session'
+
+import { Dialog } from './Dialog'
+
+interface SplitExonProps {
+  session: ApolloSessionModel
+  handleClose(): void
+  sourceFeature: AnnotationFeature
+  sourceAssemblyId: string
+  changeManager: ChangeManager
+  selectedFeature?: AnnotationFeature
+  setSelectedFeature(feature?: AnnotationFeature): void
+}
+
+interface splittableExon {
+  isSplittable: boolean
+  comment: string
+}
+
+function exonIsSplittable(
+  exonToBeSplit: AnnotationFeatureSnapshot,
+): splittableExon {
+  if (exonToBeSplit.max - exonToBeSplit.min < 2) {
+    return {
+      isSplittable: false,
+      comment: 'This exon is too short to be split',
+    }
+  }
+  return { isSplittable: true, comment: '' }
+}
+
+function makeDialogText(splitExon: AnnotationFeatureSnapshot): string {
+  const splittable = exonIsSplittable(splitExon)
+  if (splittable.isSplittable) {
+    return 'Are you sure you want to split the selected exon?'
+  }
+  return splittable.comment
+}
+
+export function SplitExon({
+  changeManager,
+  handleClose,
+  selectedFeature,
+  setSelectedFeature,
+  sourceAssemblyId,
+  sourceFeature,
+}: SplitExonProps) {
+  const [errorMessage, setErrorMessage] = useState('')
+
+  const exonToBeSplit = getSnapshot(sourceFeature)
+
+  function onSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    setErrorMessage('')
+    if (selectedFeature?._id === sourceFeature._id) {
+      setSelectedFeature()
+    }
+
+    const midpoint =
+      exonToBeSplit.min + (exonToBeSplit.max - exonToBeSplit.min) / 2
+    const upstreamCut = Math.floor(midpoint)
+    const downstreamCut = Math.ceil(midpoint)
+
+    if (!sourceFeature.parent?._id) {
+      throw new Error('Splitting an exon without parent is not possible yet')
+    }
+
+    const change = new SplitExonChange({
+      changedIds: [sourceFeature._id],
+      typeName: 'SplitExonChange',
+      assembly: sourceAssemblyId,
+      exonToBeSplit,
+      parentFeatureId: sourceFeature.parent._id,
+      upstreamCut,
+      downstreamCut,
+      leftExonId: new ObjectID().toHexString(),
+      rightExonId: new ObjectID().toHexString(),
+    })
+    void changeManager.submit(change)
+    handleClose()
+    event.preventDefault()
+  }
+
+  return (
+    <Dialog
+      open
+      title="Split exon"
+      handleClose={handleClose}
+      maxWidth={false}
+      data-testid="split-exon"
+    >
+      <form onSubmit={onSubmit}>
+        <DialogContent style={{ display: 'flex', flexDirection: 'column' }}>
+          <DialogContentText>{makeDialogText(exonToBeSplit)}</DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button
+            variant="contained"
+            type="submit"
+            disabled={!exonIsSplittable(exonToBeSplit).isSplittable}
+          >
+            Yes
+          </Button>
+          <Button variant="outlined" type="submit" onClick={handleClose}>
+            Cancel
+          </Button>
+        </DialogActions>
+      </form>
+      {errorMessage ? (
+        <DialogContent>
+          <DialogContentText color="error">{errorMessage}</DialogContentText>
+        </DialogContent>
+      ) : null}
+    </Dialog>
+  )
+}

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'
@@ -9,7 +10,10 @@ export * from './ImportFeatures'
 export * from './LogOut'
 export * from './ManageChecks'
 export * from './ManageUsers'
+export * from './MergeExons'
+export * from './MergeTranscripts'
 export * from './OpenLocalFile'
 export * from './ViewChangeLog'
 export * from './AddRefSeqAliases'
 export * from './ViewCheckResults'
+export * from './SplitExon'

package/src/config.ts

@@ -10,6 +10,17 @@ const ApolloPluginConfigurationSchema = ConfigurationSchema('ApolloPlugin', {
     type: 'string',
     defaultValue: 'Sequence Ontology',
   },
+  hasRole: {
+    description: 'Flag used internally by jbrowse-plugin-apollo',
+    type: 'boolean',
+    defaultValue: false,
+  },
+  backgroundColorForFeature: {
+    description: 'Color ',
+    type: 'string',
+    defaultValue: 'jexl:colorFeature(featureType)',
+    contextVariable: ['featureType'],
+  },
 })
 
 export default ApolloPluginConfigurationSchema

package/src/extensions/annotationFromJBrowseFeature.ts

@@ -137,6 +137,7 @@ export function annotationFromJBrowseFeature(
         contextMenuItems() {
           const session = getSession(self)
           const assembly = self.getAssembly()
+          const region = self.getFirstRegion()
           const feature = self.contextMenuFeature
           if (!feature) {
             return superContextMenuItems()
@@ -158,6 +159,7 @@ export function annotationFromJBrowseFeature(
                       annotationFeature: self.getAnnotationFeature(assembly),
                       assembly,
                       refSeqId: self.getRefSeqId(assembly),
+                      region,
                     },
                   ],
                 )