@apollo-annotation/jbrowse-plugin-apollo 0.3.0 → 0.3.2

package/src/components/FilterFeatures.tsx

@@ -0,0 +1,120 @@
+import React, { useState } from 'react'
+import { ApolloSessionModel } from '../session'
+import { Dialog } from './Dialog'
+import {
+  Box,
+  Button,
+  Chip,
+  DialogContent,
+  DialogContentText,
+  Grid2,
+  TextField,
+} from '@mui/material'
+import { isOntologyClass } from '../OntologyManager'
+import { OntologyTermAutocomplete } from './OntologyTermAutocomplete'
+import { observer } from 'mobx-react'
+
+interface FilterFeaturesProps {
+  onUpdate: (types: string[]) => void
+  featureTypes: string[]
+  handleClose: () => void
+  session: ApolloSessionModel
+}
+
+export const FilterFeatures = observer(function FilterFeatures({
+  featureTypes,
+  handleClose,
+  onUpdate,
+  session,
+}: FilterFeaturesProps) {
+  const [type, setType] = useState('')
+  const [selectedFeatureTypes, setSelectedFeatureTypes] =
+    useState<string[]>(featureTypes)
+  const handleChange = (value: string): void => {
+    setType(value)
+  }
+  const handleAddFeatureType = () => {
+    if (type) {
+      if (selectedFeatureTypes.includes(type)) {
+        return
+      }
+      onUpdate([...selectedFeatureTypes, type])
+      setSelectedFeatureTypes([...selectedFeatureTypes, type])
+    }
+  }
+  const handleFeatureTypeDelete = (value: string) => {
+    const newTypes = selectedFeatureTypes.filter((type) => type !== value)
+    onUpdate(newTypes)
+    setSelectedFeatureTypes(newTypes)
+  }
+
+  return (
+    <Dialog
+      open
+      maxWidth={false}
+      data-testid="filter-features-dialog"
+      title="Filter features by type"
+      handleClose={handleClose}
+    >
+      <DialogContent>
+        <DialogContentText>
+          Select the feature types you want to display in the apollo track
+        </DialogContentText>
+        <Grid2 container spacing={2}>
+          <Grid2>
+            <OntologyTermAutocomplete
+              session={session}
+              ontologyName="Sequence Ontology"
+              style={{ width: '100%' }}
+              value={type}
+              filterTerms={isOntologyClass}
+              renderInput={(params) => (
+                <TextField
+                  {...params}
+                  label="Feature type"
+                  variant="outlined"
+                  fullWidth
+                />
+              )}
+              onChange={(oldValue, newValue) => {
+                if (newValue) {
+                  handleChange(newValue)
+                }
+              }}
+            />
+          </Grid2>
+          <Grid2>
+            <Button
+              variant="contained"
+              onClick={handleAddFeatureType}
+              disabled={!type}
+              style={{ marginTop: 9 }}
+              size="medium"
+            >
+              Add
+            </Button>
+          </Grid2>
+        </Grid2>
+        {selectedFeatureTypes.length > 0 && (
+          <div>
+            <hr />
+            <div style={{ width: 300 }}>
+              <DialogContentText>Selected feature types:</DialogContentText>
+              <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
+                {selectedFeatureTypes.map((value) => (
+                  <Chip
+                    key={value}
+                    label={value}
+                    onDelete={() => {
+                      handleFeatureTypeDelete(value)
+                    }}
+                  />
+                ))}
+              </Box>
+            </div>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+})

package/src/components/ModifyFeatureAttribute.tsx

@@ -13,7 +13,7 @@ import {
   FormControl,
   FormControlLabel,
   FormLabel,
-  Grid,
+  Grid2,
   IconButton,
   Paper,
   Radio,
@@ -300,25 +300,25 @@ export function ModifyFeatureAttribute({
     >
       <form onSubmit={onSubmit}>
         <DialogContent>
-          <Grid container direction="column" spacing={1}>
+          <Grid2 container direction="column" spacing={1}>
             {Object.entries(attributes).map(([key, value]) => {
               const EditorComponent =
                 reservedKeys.get(key) ?? CustomAttributeValueEditor
               return (
-                <Grid container item spacing={3} alignItems="center" key={key}>
-                  <Grid item xs="auto">
+                <Grid2 container spacing={3} alignItems="center" key={key}>
+                  <Grid2>
                     <Paper variant="outlined" className={classes.attributeName}>
                       <Typography>{key}</Typography>
                     </Paper>
-                  </Grid>
-                  <Grid item flexGrow={1}>
+                  </Grid2>
+                  <Grid2 flexGrow={1}>
                     <EditorComponent
                       session={session}
                       value={value}
                       onChange={makeOnChange(key)}
                     />
-                  </Grid>
-                  <Grid item xs={1}>
+                  </Grid2>
+                  <Grid2>
                     <IconButton
                       aria-label="delete"
                       size="medium"
@@ -329,11 +329,11 @@ export function ModifyFeatureAttribute({
                     >
                       <DeleteIcon fontSize="medium" key={key} />
                     </IconButton>
-                  </Grid>
-                </Grid>
+                  </Grid2>
+                </Grid2>
               )
             })}
-            <Grid item>
+            <Grid2>
               <Button
                 color="primary"
                 variant="contained"
@@ -344,12 +344,12 @@ export function ModifyFeatureAttribute({
               >
                 Add new
               </Button>
-            </Grid>
+            </Grid2>
             {showAddNewForm ? (
-              <Grid item>
+              <Grid2>
                 <Paper elevation={8} className={classes.newAttributePaper}>
-                  <Grid container direction="column">
-                    <Grid item>
+                  <Grid2 container direction="column">
+                    <Grid2>
                       <FormControl>
                         <FormLabel id="attribute-radio-button-group">
                           Select attribute type
@@ -365,11 +365,11 @@ export function ModifyFeatureAttribute({
                             control={<Radio />}
                             disableTypography
                             label={
-                              <Grid container spacing={1} alignItems="center">
-                                <Grid item>
+                              <Grid2 container spacing={1} alignItems="center">
+                                <Grid2>
                                   <Typography>Custom</Typography>
-                                </Grid>
-                                <Grid item>
+                                </Grid2>
+                                <Grid2>
                                   <TextField
                                     label="Custom attribute key"
                                     variant="outlined"
@@ -383,8 +383,8 @@ export function ModifyFeatureAttribute({
                                       setNewAttributeKey(event.target.value)
                                     }}
                                   />
-                                </Grid>
-                              </Grid>
+                                </Grid2>
+                              </Grid2>
                             }
                           />
                           {[...reservedKeys.keys()].map((key) => (
@@ -397,8 +397,8 @@ export function ModifyFeatureAttribute({
                           ))}
                         </RadioGroup>
                       </FormControl>
-                    </Grid>
-                    <Grid item>
+                    </Grid2>
+                    <Grid2>
                       <DialogActions>
                         <Button
                           key="addButton"
@@ -423,12 +423,12 @@ export function ModifyFeatureAttribute({
                           Cancel
                         </Button>
                       </DialogActions>
-                    </Grid>
-                  </Grid>
+                    </Grid2>
+                  </Grid2>
                 </Paper>
-              </Grid>
+              </Grid2>
             ) : null}
-          </Grid>
+          </Grid2>
           {errorMessage ? (
             <DialogContentText color="error">{errorMessage}</DialogContentText>
           ) : null}

package/src/components/OntologyTermMultiSelect.tsx

@@ -6,7 +6,7 @@ import {
   Autocomplete,
   AutocompleteRenderGetTagProps,
   Chip,
-  Grid,
+  Grid2,
   TextField,
   Tooltip,
   Typography,
@@ -333,8 +333,8 @@ function Option(props: {
   //   .join(', ')
   return (
     <li {...other}>
-      <Grid container>
-        <Grid item>
+      <Grid2 container>
+        <Grid2>
           <Typography component="span">
             {ontologyManager.applyPrefixes(option.term.id)}
           </Typography>{' '}
@@ -344,8 +344,8 @@ function Option(props: {
           />{' '}
           {/* ({lblScore}) */}
           <dl>{fields}</dl>
-        </Grid>
-      </Grid>
+        </Grid2>
+      </Grid2>
     </li>
   )
 }

package/src/extensions/annotationFromJBrowseFeature.test.ts

@@ -0,0 +1,119 @@
+import SimpleFeature from '@jbrowse/core/util/simpleFeature'
+import { describe, expect, it } from '@jest/globals'
+import { jbrowseFeatureToAnnotationFeature } from './annotationFromJBrowseFeature'
+
+describe('Convert JBrowse feature to annotation feature', () => {
+  //   it('Handle reserved fields', () => {
+  //     const feature = new SimpleFeature({
+  //       uniqueId: 'a',
+  //       id: 'gene01',
+  //       start: 3,
+  //       end: 27,
+  //       strand: 1,
+  //       type: 'gene',
+  //       source: 'mySource',
+  //       score: 10,
+  //       refName: 'chr1',
+  //       derived_features: [],
+  //       subfeatures: [],
+  //     })
+  //     const ff = simpleFeatureToGFF3Feature(feature, 'abcd')
+  //     const af = jbrowseFeatureToAnnotationFeature(feature, 'abcd')
+  //     console.log(JSON.stringify(feature, null, 2))
+  //     console.log(JSON.stringify(ff, null, 2))
+  //     console.log(JSON.stringify(af, null, 2))
+
+  //     // expect(af.attributes?.score).toBeUndefined()
+  //     // expect(af.attributes?.gff_score).toBeUndefined()
+  //     // expect(af.attributes?.source).toBeUndefined()
+  //     // expect(af.attributes?.gff_source?.at(0)).toStrictEqual('mySource')
+  //     // console.log(JSON.stringify(af, null, 2))
+  //   })
+
+  it('Convert gff', () => {
+    const feature = new SimpleFeature({
+      uniqueId: 'a',
+      id: 'gene01',
+      start: 3,
+      end: 27,
+      strand: 1,
+      type: 'gene',
+      source: 'mySource',
+      refName: 'chr1',
+      derived_features: [],
+      subfeatures: [
+        {
+          uniqueId: 'b',
+          id: 'mrna01',
+          parent: 'gene01',
+          start: 3,
+          end: 27,
+          strand: 1,
+          type: 'mRNA',
+          source: 'mySource',
+          refName: 'chr1',
+          derived_features: [],
+          subfeatures: [
+            {
+              uniqueId: 'c',
+              id: 'exon01',
+              parent: 'mrna01',
+              start: 3,
+              end: 27,
+              strand: 1,
+              type: 'exon',
+              source: 'mySource',
+              refName: 'chr1',
+              derived_features: [],
+              subfeatures: [],
+            },
+            {
+              uniqueId: 'd',
+              id: 'cds01',
+              parent: 'mrna01',
+              name: 'XYZ',
+              description: 'Stuff',
+              xkey: 'xvalue',
+              start: 15,
+              end: 27,
+              strand: 1,
+              type: 'CDS',
+              source: 'mySource',
+              score: 0,
+              refName: 'chr1',
+              derived_features: [],
+              phase: 0,
+              subfeatures: [],
+            },
+          ],
+        },
+      ],
+    })
+    const af = jbrowseFeatureToAnnotationFeature(feature, 'abcd')
+    expect(af.refSeq).toStrictEqual('abcd')
+    expect(af.strand).toEqual(1)
+    expect(af.min).toEqual(3)
+    expect(af.attributes?.score).toBeUndefined()
+    expect(af.attributes?.gff_score).toBeUndefined()
+
+    const mrna = af.children ? Object.values(af.children) : undefined
+    if (mrna) {
+      expect(mrna.length).toEqual(1)
+    } else {
+      throw new Error('Children expected')
+    }
+    const cds = mrna.at(0)?.children
+    if (cds) {
+      expect(Object.values(cds).length).toEqual(2)
+      const xcds = Object.values(cds).at(1)
+      expect(xcds?.type).toStrictEqual('CDS')
+      expect(xcds?.min).toStrictEqual(15)
+      expect(xcds?.max).toStrictEqual(27)
+      expect(xcds?.attributes?.name?.at(0)).toStrictEqual('XYZ')
+      expect(xcds?.attributes?.gff_score?.at(0)).toStrictEqual('0')
+      expect(xcds?.attributes?.gff_source?.at(0)).toStrictEqual('mySource')
+    } else {
+      throw new Error('Children expected')
+    }
+  })
+})

package/src/extensions/annotationFromJBrowseFeature.ts

@@ -0,0 +1,171 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType'
+import PluggableElementBase from '@jbrowse/core/pluggableElementTypes/PluggableElementBase'
+import AddIcon from '@mui/icons-material/Add'
+import {
+  AbstractSessionModel,
+  getContainingView,
+  getSession,
+} from '@jbrowse/core/util'
+import { Assembly } from '@jbrowse/core/assemblyManager/assembly'
+import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+import { AnnotationFeatureSnapshot } from '@apollo-annotation/mst'
+import { Feature } from '@jbrowse/core/util/simpleFeature'
+import { CreateApolloAnnotation } from '../components/CreateApolloAnnotation'
+import { GFF3Feature } from '@gmod/gff'
+import { gff3ToAnnotationFeature } from '@apollo-annotation/shared'
+
+function simpleFeatureToGFF3Feature(
+  feature: Feature,
+  refSeqId: string,
+): GFF3Feature {
+  const xfeature = JSON.parse(JSON.stringify(feature))
+  const children = xfeature.subfeatures
+  const gff3Feature = [
+    {
+      start: (xfeature.start as number) + 1,
+      end: xfeature.end as number,
+      seq_id: refSeqId,
+      source: xfeature.source ?? null,
+      type: xfeature.type ?? null,
+      score: xfeature.score ?? null,
+      strand: xfeature.strand ? (xfeature.strand === 1 ? '+' : '-') : null,
+      phase:
+        xfeature.phase !== null || xfeature.phase !== undefined
+          ? (xfeature.phase as string)
+          : null,
+      attributes: convertFeatureAttributes(xfeature),
+      derived_features: [],
+      child_features: children
+        ? children.map((x: Feature) => simpleFeatureToGFF3Feature(x, refSeqId))
+        : [],
+    },
+  ]
+  return gff3Feature
+}
+
+export function jbrowseFeatureToAnnotationFeature(
+  feature: Feature,
+  refSeqId: string,
+): AnnotationFeatureSnapshot {
+  return gff3ToAnnotationFeature(simpleFeatureToGFF3Feature(feature, refSeqId))
+}
+
+function convertFeatureAttributes(feature: Feature): Record<string, string[]> {
+  const attributes: Record<string, string[]> = {}
+  const defaultFields = new Set([
+    'start',
+    'end',
+    'type',
+    'strand',
+    'refName',
+    'subfeatures',
+    'derived_features',
+    'phase',
+    'source',
+    'score',
+  ])
+  for (const [key, value] of Object.entries(feature)) {
+    if (defaultFields.has(key)) {
+      continue
+    }
+    attributes[key] = Array.isArray(value) ? value.map(String) : [String(value)]
+  }
+  return attributes
+}
+
+export function annotationFromJBrowseFeature(
+  pluggableElement: PluggableElementBase,
+) {
+  if (pluggableElement.name !== 'LinearBasicDisplay') {
+    return pluggableElement
+  }
+  const { stateModel } = pluggableElement as DisplayType
+
+  const newStateModel = stateModel
+    .views((self) => ({
+      getFirstRegion() {
+        const lgv = getContainingView(self) as unknown as LinearGenomeViewModel
+        return lgv.dynamicBlocks.contentBlocks[0]
+      },
+      getAssembly() {
+        const firstRegion = self.getFirstRegion()
+        const session = getSession(self)
+        const { assemblyManager } = session
+        const { assemblyName } = firstRegion
+        const assembly = assemblyManager.get(assemblyName)
+        if (!assembly) {
+          throw new Error(`Could not find assembly named ${assemblyName}`)
+        }
+        return assembly
+      },
+      getRefSeqId(assembly: Assembly) {
+        const firstRegion = self.getFirstRegion()
+        const { refName } = firstRegion
+        const { refNameAliases } = assembly
+        if (!refNameAliases) {
+          throw new Error(`Could not find aliases for ${assembly.name}`)
+        }
+        const newRefNames = [...Object.entries(refNameAliases)]
+          .filter(([id, refName]) => id !== refName)
+          .map(([id, refName]) => ({
+            _id: id,
+            name: refName,
+          }))
+        const refSeqId = newRefNames.find((item) => item.name === refName)?._id
+        if (!refSeqId) {
+          throw new Error(`Could not find refSeqId named ${refName}`)
+        }
+        return refSeqId
+      },
+      getAnnotationFeature(assembly: Assembly) {
+        const refSeqId = self.getRefSeqId(assembly)
+        const sfeature: Feature = self.contextMenuFeature.data
+        return jbrowseFeatureToAnnotationFeature(sfeature, refSeqId)
+      },
+    }))
+    .views((self) => {
+      const superContextMenuItems = self.contextMenuItems
+      const session = getSession(self)
+      const assembly = self.getAssembly()
+
+      return {
+        contextMenuItems() {
+          const feature = self.contextMenuFeature
+          if (!feature) {
+            return superContextMenuItems()
+          }
+          return [
+            ...superContextMenuItems(),
+            {
+              label: 'Create Apollo annotation',
+              icon: AddIcon,
+              onClick: () => {
+                ;(session as unknown as AbstractSessionModel).queueDialog(
+                  (doneCallback) => [
+                    CreateApolloAnnotation,
+                    {
+                      session,
+                      handleClose: () => {
+                        doneCallback()
+                      },
+                      annotationFeature: self.getAnnotationFeature(assembly),
+                      assembly,
+                      refSeqId: self.getRefSeqId(assembly),
+                    },
+                  ],
+                )
+              },
+            },
+          ]
+        },
+      }
+    })
+
+  ;(pluggableElement as DisplayType).stateModel = newStateModel
+  return pluggableElement
+}

package/src/extensions/annotationFromPileup.ts

@@ -54,7 +54,7 @@ export function annotationFromPileup(pluggableElement: PluggableElementBase) {
           .filter(([id, refName]) => id !== refName)
           .map(([id, refName]) => ({
             _id: id,
-            name: refName ?? '',
+            name: refName,
           }))
         const refSeqId = newRefNames.find((item) => item.name === refName)?._id
         if (!refSeqId) {

package/src/extensions/index.ts

@@ -1 +1,2 @@
 export * from './annotationFromPileup'
+export * from './annotationFromJBrowseFeature'

package/src/index.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/unbound-method */
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
 /* eslint-disable @typescript-eslint/no-misused-promises */
@@ -55,7 +54,10 @@ import {
   ViewCheckResults,
 } from './components'
 import ApolloPluginConfigurationSchema from './config'
-import { annotationFromPileup } from './extensions'
+import {
+  annotationFromPileup,
+  annotationFromJBrowseFeature,
+} from './extensions'
 import {
   ApolloFeatureDetailsWidget,
   ApolloFeatureDetailsWidgetModel,
@@ -276,6 +278,10 @@ export default class ApolloPlugin extends Plugin {
       'Core-extendPluggableElement',
       annotationFromPileup,
     )
+    pluginManager.addToExtensionPoint(
+      'Core-extendPluggableElement',
+      annotationFromJBrowseFeature,
+    )
     if (!inWebWorker) {
       pluginManager.addToExtensionPoint(
         'Core-extendWorker',

package/src/session/ClientDataStore.ts

@@ -42,6 +42,7 @@ import {
 } from '../OntologyManager'
 import { ApolloRootModel } from '../types'
 import { autorun } from 'mobx'
+import { ApolloSessionModel } from './session'
 
 export function clientDataStoreFactory(
   AnnotationFeatureExtended: typeof AnnotationFeatureModel,
@@ -167,8 +168,36 @@ export function clientDataStoreFactory(
                 ) as TextIndexFieldDefinition[],
               ]
               if (!ontologyManager.findOntology(name)) {
+                const session = getSession(
+                  self,
+                ) as unknown as ApolloSessionModel
+                const { jobsManager } = session
+                const controller = new AbortController()
+                const jobName = `Loading ontology "${name}"`
+                const job = {
+                  name: jobName,
+                  statusMessage: `Loading ontology "${name}", version "${version}", this may take a while`,
+                  progressPct: 0,
+                  cancelCallback: () => {
+                    controller.abort()
+                    jobsManager.abortJob(job.name)
+                  },
+                }
+                const update = (message: string, progress: number): void => {
+                  if (progress === 0) {
+                    jobsManager.runJob(job)
+                    return
+                  }
+                  if (progress === 100) {
+                    jobsManager.done(job)
+                    return
+                  }
+                  jobsManager.update(jobName, message, progress)
+                  return
+                }
                 ontologyManager.addOntology(name, version, source, {
                   textIndexing: { indexFields },
+                  update,
                 })
               }
             }

package/src/session/session.ts

@@ -15,10 +15,7 @@ import {
 import { readConfObject, getConf } from '@jbrowse/core/configuration'
 import { BaseTrackConfig } from '@jbrowse/core/pluggableElementTypes'
 import PluginManager from '@jbrowse/core/PluginManager'
-import {
-  AbstractSessionModel,
-  SessionWithConfigEditing,
-} from '@jbrowse/core/util'
+import { AbstractSessionModel, SessionWithAddTracks } from '@jbrowse/core/util'
 import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 import SaveIcon from '@mui/icons-material/Save'
 import { autorun, observable } from 'mobx'
@@ -103,7 +100,7 @@ export function extendSession(
           (track) => track.trackId === trackId,
         )
         if (!hasTrack) {
-          ;(self as unknown as SessionWithConfigEditing).addTrackConf({
+          ;(self as unknown as SessionWithAddTracks).addTrackConf({
             type: 'ApolloTrack',
             trackId,
             name: `Annotations (${