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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apollo-annotation/jbrowse-plugin-apollo",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Apollo plugin for JBrowse 2",
   "keywords": [
     "jbrowse",
@@ -48,14 +48,14 @@
     }
   },
   "dependencies": {
-    "@apollo-annotation/common": "^0.3.1",
-    "@apollo-annotation/mst": "^0.3.1",
-    "@apollo-annotation/shared": "^0.3.1",
+    "@apollo-annotation/common": "^0.3.2",
+    "@apollo-annotation/mst": "^0.3.2",
+    "@apollo-annotation/shared": "^0.3.2",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@gmod/gff": "1.2.0",
-    "@jbrowse/plugin-authentication": "^2.0.1",
-    "@jbrowse/plugin-linear-genome-view": "^2.0.1",
+    "@jbrowse/plugin-authentication": "^3.0.1",
+    "@jbrowse/plugin-linear-genome-view": "^3.0.1",
     "@mui/icons-material": "^5.8.4",
     "@types/jsonpath": "^0.2.0",
     "autosuggest-highlight": "^3.3.4",
@@ -71,11 +71,11 @@
     "tslib": "^2.3.1"
   },
   "devDependencies": {
-    "@jbrowse/cli": "^2.6.2",
-    "@jbrowse/core": "^2.13.1",
+    "@jbrowse/cli": "^3.0.1",
+    "@jbrowse/core": "^3.0.1",
     "@jbrowse/development-tools": "^2.1.1",
     "@jest/globals": "^29.0.3",
-    "@mui/material": "^5.11.14",
+    "@mui/material": "^6.0.0",
     "@mui/x-data-grid": "^7.0.0",
     "@types/autosuggest-highlight": "^3",
     "@types/file-saver": "^2",
@@ -84,6 +84,8 @@
     "@types/react": "^18.3.4",
     "@types/react-dom": "^18",
     "cypress": "12.17.3",
+    "cypress-image-diff-html-report": "^2.2.0",
+    "cypress-image-diff-js": "^2.3.0",
     "cypress-mongodb": "^6.2.0",
     "fake-indexeddb": "^4.0.2",
     "jest": "^29.6.2",
@@ -108,8 +110,8 @@
     "typescript": "^5.5.3"
   },
   "peerDependencies": {
-    "@jbrowse/core": "^2.13.1",
-    "@mui/material": "^5.11.14",
+    "@jbrowse/core": "^3.0.1",
+    "@mui/material": "^6.0.0",
     "mobx": "^6.6.1",
     "mobx-react": "^7.2.1",
     "mobx-state-tree": "^5.4.0",

package/src/ApolloSequenceAdapter/ApolloSequenceAdapter.ts

@@ -4,10 +4,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 import { readConfObject } from '@jbrowse/core/configuration'
-import {
-  BaseOptions,
-  BaseSequenceAdapter,
-} from '@jbrowse/core/data_adapters/BaseAdapter'
+import { BaseSequenceAdapter } from '@jbrowse/core/data_adapters/BaseAdapter'
 import { ObservableCreate } from '@jbrowse/core/util/rxjs'
 import SimpleFeature, { Feature } from '@jbrowse/core/util/simpleFeature'
 import { NoAssemblyRegion, Region } from '@jbrowse/core/util/types'
@@ -48,12 +45,12 @@ const isInWebWorker = typeof sessionStorage === 'undefined'
 export class ApolloSequenceAdapter extends BaseSequenceAdapter {
   private regions: NoAssemblyRegion[] | undefined
 
-  public async getRefNames(opts?: BaseOptions) {
-    const regions = await this.getRegions(opts)
+  public async getRefNames() {
+    const regions = await this.getRegions()
     return regions.map((regions) => regions.refName)
   }
 
-  public async getRegions(opts?: BaseOptions): Promise<NoAssemblyRegion[]> {
+  public async getRegions(): Promise<NoAssemblyRegion[]> {
     if (this.regions) {
       return this.regions
     }
@@ -93,7 +90,7 @@ export class ApolloSequenceAdapter extends BaseSequenceAdapter {
           removeEventListener('message', messageListener)
           resolve(data.regions)
         }
-        addEventListener('message', messageListener, opts)
+        addEventListener('message', messageListener)
         // @ts-expect-error waiting for types to be published
         globalThis.rpcServer.emit('apollo', {
           apollo: true,
@@ -112,7 +109,7 @@ export class ApolloSequenceAdapter extends BaseSequenceAdapter {
    * @param param -
    * @returns Observable of Feature objects in the region
    */
-  public getFeatures(region: Region, opts?: BaseOptions) {
+  public getFeatures(region: Region) {
     const { end, refName, start } = region
     const assemblyId = readConfObject(this.config, 'assemblyId')
     const regionWithAssemblyName = { ...region, assemblyName: assemblyId }
@@ -161,7 +158,7 @@ export class ApolloSequenceAdapter extends BaseSequenceAdapter {
             removeEventListener('message', messageListener)
             resolve(data.sequence)
           }
-          addEventListener('message', messageListener, opts)
+          addEventListener('message', messageListener)
           // @ts-expect-error waiting for types to be published
           globalThis.rpcServer.emit('apollo', {
             apollo: true,

package/src/FeatureDetailsWidget/ApolloFeatureDetailsWidget.tsx

@@ -8,6 +8,7 @@ import { Attributes } from './Attributes'
 import { BasicInformation } from './BasicInformation'
 import { ApolloFeatureDetailsWidget as ApolloFeatureDetails } from './model'
 import { Sequence } from './Sequence'
+import { FeatureDetailsNavigation } from './FeatureDetailsNavigation'
 
 const useStyles = makeStyles()((theme) => ({
   root: {
@@ -59,6 +60,8 @@ export const ApolloFeatureDetailsWidget = observer(
           assembly={currentAssembly._id}
           refName={refName}
         />
+        <hr />
+        <FeatureDetailsNavigation model={model} feature={feature} />
       </div>
     )
   },

package/src/FeatureDetailsWidget/Attributes.tsx

@@ -11,7 +11,7 @@ import {
   FormControl,
   FormControlLabel,
   FormLabel,
-  Grid,
+  Grid2,
   IconButton,
   Paper,
   Radio,
@@ -243,7 +243,7 @@ export const Attributes = observer(function Attributes({
   return (
     <>
       <Typography variant="h5">Attributes</Typography>
-      <Grid container direction="column" spacing={1}>
+      <Grid2 container direction="column" spacing={1}>
         {Object.entries(attributes).map(([key, value]) => {
           if (key === '') {
             return null
@@ -251,20 +251,20 @@ export const Attributes = observer(function Attributes({
           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={(newValue) => onChangeCommitted(key, newValue)}
                 />
-              </Grid>
-              <Grid item xs={1}>
+              </Grid2>
+              <Grid2>
                 <IconButton
                   aria-label="delete"
                   size="medium"
@@ -273,11 +273,11 @@ export const Attributes = observer(function Attributes({
                 >
                   <DeleteIcon fontSize="medium" key={key} />
                 </IconButton>
-              </Grid>
-            </Grid>
+              </Grid2>
+            </Grid2>
           )
         })}
-        <Grid item>
+        <Grid2>
           <Button
             color="primary"
             variant="contained"
@@ -288,12 +288,12 @@ export const Attributes = observer(function Attributes({
           >
             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
@@ -309,11 +309,11 @@ export const Attributes = observer(function Attributes({
                         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"
@@ -327,8 +327,8 @@ export const Attributes = observer(function Attributes({
                                   setNewAttributeKey(event.target.value)
                                 }}
                               />
-                            </Grid>
-                          </Grid>
+                            </Grid2>
+                          </Grid2>
                         }
                       />
                       {[...reservedKeys.keys()].map((key) => (
@@ -341,8 +341,8 @@ export const Attributes = observer(function Attributes({
                       ))}
                     </RadioGroup>
                   </FormControl>
-                </Grid>
-                <Grid item>
+                </Grid2>
+                <Grid2>
                   <DialogActions>
                     <Button
                       key="addButton"
@@ -366,12 +366,12 @@ export const Attributes = observer(function Attributes({
                       Cancel
                     </Button>
                   </DialogActions>
-                </Grid>
-              </Grid>
+                </Grid2>
+              </Grid2>
             </Paper>
-          </Grid>
+          </Grid2>
         ) : null}
-      </Grid>
+      </Grid2>
       {errorMessage ? (
         <Typography color="error">{errorMessage}</Typography>
       ) : null}

package/src/FeatureDetailsWidget/FeatureDetailsNavigation.tsx

@@ -0,0 +1,65 @@
+import React from 'react'
+
+import { Button, Typography } from '@mui/material'
+import { observer } from 'mobx-react'
+
+import { AnnotationFeature } from '@apollo-annotation/mst'
+import { ApolloFeatureDetailsWidget as ApolloFeatureDetails } from './model'
+
+export const FeatureDetailsNavigation = observer(
+  function FeatureDetailsNavigation(props: {
+    model: ApolloFeatureDetails
+    feature: AnnotationFeature
+  }) {
+    const { feature, model } = props
+    const { children, parent } = feature
+    const childFeatures = []
+    if (children) {
+      for (const [, child] of children) {
+        childFeatures.push(child)
+      }
+    }
+
+    if (!(parent ?? childFeatures.length > 0)) {
+      return null
+    }
+
+    return (
+      <div>
+        <Typography variant="h5">Go to related feature</Typography>
+        {parent && (
+          <div>
+            <Typography variant="h6">Parent:</Typography>
+            <Button
+              variant="contained"
+              onClick={() => {
+                model.setFeature(parent)
+              }}
+            >
+              {parent.type} ({parent.min}..{parent.max})
+            </Button>
+          </div>
+        )}
+        {childFeatures.length > 0 && (
+          <div>
+            <Typography variant="h6">
+              {childFeatures.length === 1 ? 'Child' : 'Children'}:
+            </Typography>
+            {childFeatures.map((child) => (
+              <div key={child._id} style={{ marginBottom: 5 }}>
+                <Button
+                  variant="contained"
+                  onClick={() => {
+                    model.setFeature(child)
+                  }}
+                >
+                  {child.type} ({child.min}..{child.max})
+                </Button>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    )
+  },
+)

package/src/FeatureDetailsWidget/TranscriptBasic.tsx

@@ -83,7 +83,12 @@ export const TranscriptBasicInformation = observer(
       return null
     }
 
-    const { strand, transcriptParts } = feature
+    let strand, transcriptParts
+    try {
+      ;({ strand, transcriptParts } = feature)
+    } catch {
+      return null
+    }
     const [firstLocation] = transcriptParts
 
     const locationData = firstLocation

package/src/FeatureDetailsWidget/TranscriptSequence.tsx

@@ -1,6 +1,6 @@
 import { AnnotationFeature } from '@apollo-annotation/mst'
 import { splitStringIntoChunks } from '@apollo-annotation/shared'
-import { revcom } from '@jbrowse/core/util'
+import { defaultCodonTable, revcom } from '@jbrowse/core/util'
 import {
   Button,
   MenuItem,
@@ -18,7 +18,7 @@ import { ApolloSessionModel } from '../session'
 const SEQUENCE_WRAP_LENGTH = 60
 
 type SegmentType = 'upOrDownstream' | 'UTR' | 'CDS' | 'intron' | 'protein'
-type SegmentListType = 'CDS' | 'cDNA' | 'genomic'
+type SegmentListType = 'CDS' | 'cDNA' | 'genomic' | 'protein'
 
 interface SequenceSegment {
   type: SegmentType
@@ -121,6 +121,28 @@ function getSequenceSegments(
       segments.push({ type: 'CDS', sequenceLines, locs })
       return segments
     }
+    case 'protein': {
+      let wholeSequence = ''
+      const [firstLocation] = cdsLocations
+      const locs: { min: number; max: number }[] = []
+      for (const loc of firstLocation) {
+        let sequence = getSequence(loc.min, loc.max)
+        if (strand === -1) {
+          sequence = revcom(sequence)
+        }
+        wholeSequence += sequence
+        locs.push({ min: loc.min, max: loc.max })
+      }
+      let protein = ''
+      for (let i = 0; i < wholeSequence.length; i += 3) {
+        const codonSeq: string = wholeSequence.slice(i, i + 3).toUpperCase()
+        protein +=
+          defaultCodonTable[codonSeq as keyof typeof defaultCodonTable] || '&'
+      }
+      const sequenceLines = splitStringIntoChunks(protein, SEQUENCE_WRAP_LENGTH)
+      segments.push({ type: 'protein', sequenceLines, locs })
+      return segments
+    }
   }
 }
 
@@ -238,6 +260,7 @@ export const TranscriptSequence = observer(function TranscriptSequence({
             <MenuItem value="CDS">CDS</MenuItem>
             <MenuItem value="cDNA">cDNA</MenuItem>
             <MenuItem value="genomic">Genomic</MenuItem>
+            <MenuItem value="protein">Protein</MenuItem>
           </Select>
           <Paper
             style={{

package/src/LinearApolloDisplay/components/LinearApolloDisplay.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unsafe-call */
 /* eslint-disable @typescript-eslint/unbound-method */
 /* eslint-disable @typescript-eslint/no-misused-promises */
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */

package/src/LinearApolloDisplay/glyphs/BoxGlyph.ts

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