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

package/src/OntologyManager/OntologyStore/indexeddb-storage.ts

@@ -81,6 +81,8 @@ function serializeWords(foundWords: Iterable<[string, string]>): string[] {
 export async function loadOboGraphJson(this: OntologyStore, db: Database) {
   const startTime = Date.now()
 
+  let percentProgress = 1
+  this.options.update?.('Parsing JSON', percentProgress)
   // TODO: using file streaming along with an event-based json parser
   // instead of JSON.parse and .readFile could probably make this faster
   // and less memory intensive
@@ -93,6 +95,9 @@ export async function loadOboGraphJson(this: OntologyStore, db: Database) {
     throw new Error('Error in loading ontology')
   }
 
+  percentProgress += 5
+  this.options.update?.('Parsing JSON complete', percentProgress)
+
   const parseTime = Date.now()
 
   const [graph, ...additionalGraphs] = oboGraph.graphs ?? []
@@ -114,29 +119,52 @@ export async function loadOboGraphJson(this: OntologyStore, db: Database) {
     const fullTextIndexPaths = getTextIndexFields
       .call(this)
       .map((def) => def.jsonPath)
-    for (const node of graph.nodes ?? []) {
-      if (isOntologyDBNode(node)) {
-        await nodeStore.add({
-          ...node,
-          fullTextWords: serializeWords(
-            getWords(node, fullTextIndexPaths, this.prefixes),
-          ),
-        })
+    if (graph.nodes) {
+      let lastProgress = Math.round(percentProgress)
+      for (const [, node] of graph.nodes.entries()) {
+        percentProgress += 64 * (1 / graph.nodes.length)
+        if (
+          Math.round(percentProgress) != lastProgress &&
+          percentProgress < 100
+        ) {
+          this.options.update?.('Processing nodes', percentProgress)
+          lastProgress = Math.round(percentProgress)
+        }
+        if (isOntologyDBNode(node)) {
+          await nodeStore.add({
+            ...node,
+            fullTextWords: serializeWords(
+              getWords(node, fullTextIndexPaths, this.prefixes),
+            ),
+          })
+        }
       }
     }
 
     // load edges
     const edgeStore = tx.objectStore('edges')
-    for (const edge of graph.edges ?? []) {
-      if (isOntologyDBEdge(edge)) {
-        await edgeStore.add(edge)
+    if (graph.edges) {
+      let lastProgress = Math.round(percentProgress)
+      for (const [, edge] of graph.edges.entries()) {
+        percentProgress += 30 * (1 / graph.edges.length)
+        if (
+          Math.round(percentProgress) != lastProgress &&
+          percentProgress < 100
+        ) {
+          this.options.update?.('Processing edges', percentProgress)
+          lastProgress = Math.round(percentProgress)
+        }
+        if (isOntologyDBEdge(edge)) {
+          await edgeStore.add(edge)
+        }
       }
     }
-
     await tx.done
 
     // record some metadata about this ontology and load operation
     const tx2 = db.transaction('meta', 'readwrite')
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    const { update, ...otherOptions } = this.options
     await tx2.objectStore('meta').add(
       {
         ontologyRecord: {
@@ -144,7 +172,7 @@ export async function loadOboGraphJson(this: OntologyStore, db: Database) {
           version: this.ontologyVersion,
           sourceLocation: this.sourceLocation,
         },
-        storeOptions: this.options,
+        storeOptions: otherOptions,
         graphMeta: graph.meta,
         timestamp: String(new Date()),
         schemaVersion,

package/src/OntologyManager/index.ts

@@ -12,6 +12,7 @@ import { autorun } from 'mobx'
 import {
   Instance,
   addDisposer,
+  flow,
   getRoot,
   getSnapshot,
   types,
@@ -30,6 +31,7 @@ export const OntologyRecordType = types
     version: 'unversioned',
     source: types.union(LocalPathLocation, UriLocation, BlobLocation),
     options: types.frozen<OntologyStoreOptions>(),
+    equivalentTypes: types.map(types.array(types.string)),
   })
   .volatile((_self) => ({
     dataStore: undefined as undefined | OntologyStore,
@@ -55,6 +57,39 @@ export const OntologyRecordType = types
         }),
       )
     },
+    setEquivalentTypes(type: string, equivalentTypes: string[]) {
+      self.equivalentTypes.set(type, equivalentTypes)
+    },
+  }))
+  .actions((self) => ({
+    loadEquivalentTypes: flow(function* loadEquivalentTypes(type: string) {
+      if (!self.dataStore) {
+        return
+      }
+      const terms = (yield self.dataStore.getTermsWithLabelOrSynonym(
+        type,
+      )) as unknown as OntologyTerm[]
+      const equivalents: string[] = terms
+        .map((term) => term.lbl)
+        .filter((term) => term != undefined)
+      self.setEquivalentTypes(type, equivalents)
+    }),
+  }))
+  .views((self) => ({
+    isTypeOf(queryType: string, typeOf: string): boolean {
+      if (queryType === typeOf) {
+        return true
+      }
+      if (!self.dataStore) {
+        return false
+      }
+      const equivalents = self.equivalentTypes.get(typeOf)
+      if (!equivalents) {
+        void self.loadEquivalentTypes(typeOf)
+        return false
+      }
+      return equivalents.includes(queryType)
+    },
   }))
 
 export const OntologyManagerType = types

package/src/SixFrameFeatureDisplay/stateModel.ts

@@ -270,6 +270,11 @@ export function stateModelFactory(
         return codonLayout
       },
       get featureLayout() {
+        const { featureTypeOntology } =
+          self.session.apolloDataStore.ontologyManager
+        if (!featureTypeOntology) {
+          throw new Error('featureTypeOntology is undefined')
+        }
         const featureLayout = new Map<number, [string, AnnotationFeature][]>()
         for (const [refSeq, featuresForRefSeq] of this.features || []) {
           if (!featuresForRefSeq) {
@@ -295,11 +300,15 @@ export function stateModelFactory(
             },
           )) {
             for (const [, childFeature] of feature.children ?? new Map()) {
-              if (childFeature.type === 'mRNA') {
+              if (
+                featureTypeOntology.isTypeOf(childFeature.type, 'transcript')
+              ) {
                 for (const [, grandChildFeature] of childFeature.children ||
                   new Map()) {
                   let startingRow
-                  if (grandChildFeature.type === 'CDS') {
+                  if (
+                    featureTypeOntology.isTypeOf(grandChildFeature.type, 'CDS')
+                  ) {
                     let discontinuousLocations
                     if (grandChildFeature.discontinuousLocations.length > 0) {
                       ;({ discontinuousLocations } = grandChildFeature)

package/src/TabularEditor/HybridGrid/Feature.tsx

@@ -21,7 +21,6 @@ import { FeatureAttributes } from './FeatureAttributes'
 import { featureContextMenuItems } from './featureContextMenuItems'
 import type { ContextMenuState } from './HybridGrid'
 import { NumberCell } from './NumberCell'
-import { getGlyph } from '../../LinearApolloDisplay/stateModel/getGlyph'
 
 const useStyles = makeStyles()((theme) => ({
   typeContent: {
@@ -134,7 +133,7 @@ export const Feature = observer(function Feature({
           displayState.setApolloHover({
             feature,
             topLevelFeature: getTopLevelFeature(feature),
-            glyph: getGlyph(getTopLevelFeature(feature)),
+            glyph: displayState.getGlyph(getTopLevelFeature(feature)),
           })
         }}
         className={

package/src/TabularEditor/HybridGrid/HybridGrid.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unsafe-call */
 import { Menu, MenuItem } from '@jbrowse/core/ui'
 import { useTheme } from '@mui/material'
 import { observer } from 'mobx-react'

package/src/TabularEditor/HybridGrid/featureContextMenuItems.ts

@@ -137,7 +137,14 @@ export function featureContextMenuItems(
         },
       },
     )
-    if (feature.type === 'mRNA' && isSessionModelWithWidgets(session)) {
+    const { featureTypeOntology } = session.apolloDataStore.ontologyManager
+    if (!featureTypeOntology) {
+      throw new Error('featureTypeOntology is undefined')
+    }
+    if (
+      featureTypeOntology.isTypeOf(feature.type, 'transcript') &&
+      isSessionModelWithWidgets(session)
+    ) {
       menuItems.push({
         label: 'Edit transcript details',
         onClick: () => {

package/src/components/AddRefSeqAliases.tsx

@@ -8,7 +8,7 @@ import {
   DialogContent,
   DialogContentText,
   FormControl,
-  Grid,
+  Grid2,
   InputLabel,
   MenuItem,
   Select,
@@ -210,8 +210,8 @@ export function AddRefSeqAliases({
       fullWidth
     >
       <DialogContent style={{ display: 'flex', flexDirection: 'column' }}>
-        <Grid container spacing={2}>
-          <Grid item xs={4}>
+        <Grid2 container spacing={2}>
+          <Grid2>
             <FormControl disabled={enableSubmit && !errorMessage} fullWidth>
               <InputLabel id="demo-simple-select-label">Assembly</InputLabel>
               <Select
@@ -228,9 +228,8 @@ export function AddRefSeqAliases({
                 ))}
               </Select>
             </FormControl>
-          </Grid>
-          <Grid item xs={1}></Grid>
-          <Grid item xs={7}>
+          </Grid2>
+          <Grid2>
             <InputLabel>Load RefName alias</InputLabel>
             <input
               type="file"
@@ -238,8 +237,8 @@ export function AddRefSeqAliases({
               ref={fileRef}
               disabled={(enableSubmit && !errorMessage) || !selectedAssembly}
             />
-          </Grid>
-        </Grid>
+          </Grid2>
+        </Grid2>
         {selectedAssembly && refNameAliasMap.size > 0 ? (
           <div style={{ height: 200, width: '100%', marginTop: 20 }}>
             <InputLabel>

package/src/components/CopyFeature.tsx

@@ -114,7 +114,7 @@ export function CopyFeature({
       }
       const newRefNames = [...Object.entries(refNameAliases)]
         .filter(([id, refName]) => id !== refName)
-        .map(([id, refName]) => ({ _id: id, name: refName ?? '' }))
+        .map(([id, refName]) => ({ _id: id, name: refName }))
       setRefNames(newRefNames)
       setSelectedRefSeqId(newRefNames[0]?._id || '')
     }

package/src/components/CreateApolloAnnotation.tsx

@@ -0,0 +1,304 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable @typescript-eslint/no-misused-promises */
+/* eslint-disable @typescript-eslint/unbound-method */
+import React, { useEffect, useMemo, useState } from 'react'
+
+import {
+  Box,
+  Button,
+  Checkbox,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  FormControlLabel,
+  MenuItem,
+  Select,
+  SelectChangeEvent,
+  Typography,
+} from '@mui/material'
+
+import { Dialog } from './Dialog'
+import { ApolloSessionModel } from '../session'
+import { AnnotationFeatureSnapshot } from '@apollo-annotation/mst'
+import { getSnapshot } from 'mobx-state-tree'
+import { AddFeatureChange } from '@apollo-annotation/shared'
+import { Assembly } from '@jbrowse/core/assemblyManager/assembly'
+import { AbstractSessionModel } from '@jbrowse/core/util'
+
+interface CreateApolloAnnotationProps {
+  session: AbstractSessionModel
+  handleClose(): void
+  annotationFeature: AnnotationFeatureSnapshot
+  assembly: Assembly
+  refSeqId: string
+}
+
+const isGeneOrTranscript = (
+  annotationFeature: AnnotationFeatureSnapshot,
+  apolloSessionModel: ApolloSessionModel,
+) => {
+  const { featureTypeOntology } =
+    apolloSessionModel.apolloDataStore.ontologyManager
+  if (!featureTypeOntology) {
+    throw new Error('featureTypeOntology is undefined')
+  }
+  return (
+    featureTypeOntology.isTypeOf(annotationFeature.type, 'gene') ||
+    featureTypeOntology.isTypeOf(annotationFeature.type, 'mRNA') ||
+    featureTypeOntology.isTypeOf(annotationFeature.type, 'transcript')
+  )
+}
+
+const isTranscript = (
+  annotationFeature: AnnotationFeatureSnapshot,
+  apolloSessionModel: ApolloSessionModel,
+) => {
+  const { featureTypeOntology } =
+    apolloSessionModel.apolloDataStore.ontologyManager
+  if (!featureTypeOntology) {
+    throw new Error('featureTypeOntology is undefined')
+  }
+  return (
+    featureTypeOntology.isTypeOf(annotationFeature.type, 'mRNA') ||
+    featureTypeOntology.isTypeOf(annotationFeature.type, 'transcript')
+  )
+}
+
+export function CreateApolloAnnotation({
+  annotationFeature,
+  assembly,
+  handleClose,
+  refSeqId,
+  session,
+}: CreateApolloAnnotationProps) {
+  const apolloSessionModel = session as unknown as ApolloSessionModel
+  const childIds = useMemo(
+    () => Object.keys(annotationFeature.children ?? {}),
+    [annotationFeature],
+  )
+
+  const features = useMemo(() => {
+    for (const [, asm] of apolloSessionModel.apolloDataStore.assemblies) {
+      if (asm._id === assembly.name) {
+        for (const [, refSeq] of asm.refSeqs) {
+          if (refSeq._id === refSeqId) {
+            return refSeq.features
+          }
+        }
+      }
+    }
+    return []
+  }, [])
+
+  const [parentFeatureChecked, setParentFeatureChecked] = useState(true)
+  const [checkedChildrens, setCheckedChildrens] = useState<string[]>(childIds)
+  const [errorMessage, setErrorMessage] = useState('')
+  const [destinationFeatures, setDestinationFeatures] = useState<
+    AnnotationFeatureSnapshot[]
+  >([])
+  const [selectedDestinationFeature, setSelectedDestinationFeature] =
+    useState<AnnotationFeatureSnapshot>()
+
+  const getFeatures = (min: number, max: number) => {
+    const filteredFeatures: AnnotationFeatureSnapshot[] = []
+
+    for (const [, f] of features) {
+      const featureSnapshot = getSnapshot(f)
+      if (min >= featureSnapshot.min && max <= featureSnapshot.max) {
+        filteredFeatures.push(featureSnapshot)
+      }
+    }
+
+    return filteredFeatures
+  }
+
+  useEffect(() => {
+    setErrorMessage('')
+    if (checkedChildrens.length === 0) {
+      setParentFeatureChecked(false)
+      return
+    }
+
+    if (annotationFeature.children) {
+      const checkedAnnotationFeatureChildren = Object.values(
+        annotationFeature.children,
+      )
+        .filter((child) => isTranscript(child, apolloSessionModel))
+        .filter((child) => checkedChildrens.includes(child._id))
+      const mins = checkedAnnotationFeatureChildren.map((f) => f.min)
+      const maxes = checkedAnnotationFeatureChildren.map((f) => f.max)
+      const min = Math.min(...mins)
+      const max = Math.max(...maxes)
+      const filteredFeatures = getFeatures(min, max)
+      setDestinationFeatures(filteredFeatures)
+
+      if (
+        filteredFeatures.length === 0 &&
+        checkedChildrens.length > 0 &&
+        !parentFeatureChecked
+      ) {
+        setErrorMessage('No destination features found')
+      }
+    }
+  }, [checkedChildrens])
+
+  const handleParentFeatureCheck = (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const isChecked = event.target.checked
+    setParentFeatureChecked(isChecked)
+    setCheckedChildrens(isChecked ? childIds : [])
+  }
+
+  const handleChildFeatureCheck = (
+    event: React.ChangeEvent<HTMLInputElement>,
+    child: AnnotationFeatureSnapshot,
+  ) => {
+    setCheckedChildrens((prevChecked) =>
+      event.target.checked
+        ? [...prevChecked, child._id]
+        : prevChecked.filter((childId) => childId !== child._id),
+    )
+  }
+
+  const handleDestinationFeatureChange = (e: SelectChangeEvent) => {
+    const selectedFeature = destinationFeatures.find(
+      (f) => f._id === e.target.value,
+    )
+    setSelectedDestinationFeature(selectedFeature)
+  }
+
+  const handleCreateApolloAnnotation = async () => {
+    if (parentFeatureChecked) {
+      const change = new AddFeatureChange({
+        changedIds: [annotationFeature._id],
+        typeName: 'AddFeatureChange',
+        assembly: assembly.name,
+        addedFeature: annotationFeature,
+      })
+      await apolloSessionModel.apolloDataStore.changeManager.submit(change)
+      session.notify('Annotation added successfully', 'success')
+      handleClose()
+    } else {
+      if (!annotationFeature.children) {
+        return
+      }
+      if (!selectedDestinationFeature) {
+        return
+      }
+
+      for (const childId of checkedChildrens) {
+        const child = annotationFeature.children[childId]
+        const change = new AddFeatureChange({
+          parentFeatureId: selectedDestinationFeature._id,
+          changedIds: [selectedDestinationFeature._id],
+          typeName: 'AddFeatureChange',
+          assembly: assembly.name,
+          addedFeature: child,
+        })
+        await apolloSessionModel.apolloDataStore.changeManager.submit(change)
+        session.notify('Annotation added successfully', 'success')
+        handleClose()
+      }
+    }
+  }
+
+  return (
+    <Dialog
+      open
+      title="Create Apollo Annotation"
+      handleClose={handleClose}
+      fullWidth={true}
+      maxWidth="sm"
+    >
+      <DialogTitle fontSize={15}>
+        Select the feature to be copied to apollo track
+      </DialogTitle>
+      <DialogContent>
+        <Box sx={{ ml: 3 }}>
+          {isGeneOrTranscript(annotationFeature, apolloSessionModel) && (
+            <FormControlLabel
+              control={
+                <Checkbox
+                  size="small"
+                  checked={parentFeatureChecked}
+                  onChange={handleParentFeatureCheck}
+                />
+              }
+              label={`${annotationFeature.type}:${annotationFeature.min}..${annotationFeature.max}`}
+            />
+          )}
+          {annotationFeature.children && (
+            <Box sx={{ display: 'flex', flexDirection: 'column', ml: 3 }}>
+              {Object.values(annotationFeature.children)
+                .filter((child) => isTranscript(child, apolloSessionModel))
+                .map((child) => (
+                  <FormControlLabel
+                    key={child._id}
+                    control={
+                      <Checkbox
+                        size="small"
+                        checked={checkedChildrens.includes(child._id)}
+                        onChange={(e) => {
+                          handleChildFeatureCheck(e, child)
+                        }}
+                      />
+                    }
+                    label={`${child.type}:${child.min}..${child.max}`}
+                  />
+                ))}
+            </Box>
+          )}
+        </Box>
+        {!parentFeatureChecked &&
+          checkedChildrens.length > 0 &&
+          destinationFeatures.length > 0 && (
+            <Box sx={{ ml: 3 }}>
+              <Typography variant="caption" fontSize={12}>
+                Select the destination feature to copy the selected features
+              </Typography>
+
+              <Box sx={{ mt: 1 }}>
+                <Select
+                  labelId="label"
+                  style={{ width: '100%' }}
+                  value={selectedDestinationFeature?._id ?? ''}
+                  onChange={handleDestinationFeatureChange}
+                >
+                  {destinationFeatures.map((f) => (
+                    <MenuItem key={f._id} value={f._id}>
+                      {`${f.type}:${f.min}..${f.max}`}
+                    </MenuItem>
+                  ))}
+                </Select>
+              </Box>
+            </Box>
+          )}
+      </DialogContent>
+      <DialogActions>
+        <Button
+          variant="contained"
+          type="submit"
+          disabled={
+            checkedChildrens.length === 0 ||
+            (!parentFeatureChecked &&
+              checkedChildrens.length > 0 &&
+              !selectedDestinationFeature)
+          }
+          onClick={handleCreateApolloAnnotation}
+        >
+          Create
+        </Button>
+        <Button variant="outlined" type="submit" onClick={handleClose}>
+          Cancel
+        </Button>
+      </DialogActions>
+      {errorMessage ? (
+        <DialogContent>
+          <DialogContentText color="error">{errorMessage}</DialogContentText>
+        </DialogContent>
+      ) : null}
+    </Dialog>
+  )
+}

package/src/components/DownloadGFF3.tsx

@@ -111,7 +111,11 @@ export function DownloadGFF3({ handleClose, session }: DownloadGFF3Props) {
     const { exportID } = (await response.json()) as { exportID: string }
 
     const exportURL = new URL('export', internetAccount.baseURL)
-    const exportSearchParams = new URLSearchParams({ exportID })
+    const params: Record<string, string> = {
+      exportID,
+      includeFASTA: 'true',
+    }
+    const exportSearchParams = new URLSearchParams(params)
     exportURL.search = exportSearchParams.toString()
     const exportUri = exportURL.toString()