@apollo-annotation/jbrowse-plugin-apollo 0.1.18 → 0.1.20

package/src/ChangeManager.ts

@@ -46,7 +46,7 @@ export class ChangeManager {
     ) as unknown as ApolloSessionModel
 
     const job = {
-      name: `${change.typeName}`,
+      name: change.typeName,
       statusMessage: 'Pre-validating',
       progressPct: 0,
       cancelCallback: () => {

package/src/FeatureDetailsWidget/ApolloFeatureDetailsWidget.tsx

@@ -1,17 +1,12 @@
-import { BaseInternetAccountModel } from '@jbrowse/core/pluggableElementTypes'
 import { getSession } from '@jbrowse/core/util'
 import { observer } from 'mobx-react'
-import { getRoot } from 'mobx-state-tree'
-import React, { useMemo } from 'react'
+import React from 'react'
 import { makeStyles } from 'tss-react/mui'
 
-import { ApolloInternetAccountModel } from '../ApolloInternetAccount/model'
 import { ApolloSessionModel } from '../session'
-import { ApolloRootModel } from '../types'
 import { Attributes } from './Attributes'
 import { BasicInformation } from './BasicInformation'
 import { ApolloFeatureDetailsWidget as ApolloFeatureDetails } from './model'
-import { RelatedFeatures } from './RelatedFeature'
 import { Sequence } from './Sequence'
 
 const useStyles = makeStyles()((theme) => ({
@@ -27,14 +22,6 @@ export const ApolloFeatureDetailsWidget = observer(
     const session = getSession(model) as unknown as ApolloSessionModel
     const currentAssembly = session.apolloDataStore.assemblies.get(assembly)
     const { classes } = useStyles()
-    const { internetAccounts } = getRoot<ApolloRootModel>(session)
-    const internetAccount = useMemo(() => {
-      return internetAccounts.find(
-        (ia: BaseInternetAccountModel) => ia.type === 'ApolloInternetAccount',
-      ) as ApolloInternetAccountModel | undefined
-    }, [internetAccounts])
-    const role = internetAccount ? internetAccount.role : 'admin'
-    const editable = ['admin', 'user'].includes(role ?? '')
 
     if (!(feature && currentAssembly)) {
       return null
@@ -43,11 +30,11 @@ export const ApolloFeatureDetailsWidget = observer(
     if (!refSeq) {
       return null
     }
-    const { end, start } = feature
-    const sequence = refSeq.getSequence(start, end)
+    const { max, min } = feature
+    const sequence = refSeq.getSequence(min, max)
     if (!sequence) {
       void session.apolloDataStore.loadRefSeq([
-        { assemblyName: assembly, refName, start, end },
+        { assemblyName: assembly, refName, start: min, end: max },
       ])
     }
 
@@ -63,7 +50,7 @@ export const ApolloFeatureDetailsWidget = observer(
           feature={feature}
           session={session}
           assembly={currentAssembly._id}
-          editable={editable}
+          editable={true}
         />
         <hr />
         <Sequence
@@ -72,13 +59,6 @@ export const ApolloFeatureDetailsWidget = observer(
           assembly={currentAssembly._id}
           refName={refName}
         />
-        <hr />
-        <RelatedFeatures
-          feature={feature}
-          refName={refName}
-          session={session}
-          assembly={currentAssembly._id}
-        />
       </div>
     )
   },

package/src/FeatureDetailsWidget/ApolloTranscriptDetailsWidget.tsx

@@ -0,0 +1,82 @@
+import { AbstractSessionModel, getSession } from '@jbrowse/core/util'
+import { observer } from 'mobx-react'
+import { getRoot } from 'mobx-state-tree'
+import React from 'react'
+import { makeStyles } from 'tss-react/mui'
+
+import { ApolloInternetAccountModel } from '../ApolloInternetAccount/model'
+import { ApolloSessionModel } from '../session'
+import { ApolloRootModel } from '../types'
+import { Attributes } from './Attributes'
+import { TranscriptBasicInformation } from './TranscriptBasic'
+import { TranscriptSequence } from './TranscriptSequence'
+import { ApolloTranscriptDetailsWidget as ApolloTranscriptDetailsWidgetState } from './model'
+
+const useStyles = makeStyles()((theme) => ({
+  root: {
+    padding: theme.spacing(2),
+  },
+}))
+
+export const ApolloTranscriptDetailsWidget = observer(
+  function ApolloTranscriptDetails(props: {
+    model: ApolloTranscriptDetailsWidgetState
+  }) {
+    const { classes } = useStyles()
+    const { model } = props
+    const { assembly, feature, refName } = model
+    const session = getSession(model) as unknown as AbstractSessionModel
+    const apolloSession = getSession(model) as unknown as ApolloSessionModel
+    const currentAssembly =
+      apolloSession.apolloDataStore.assemblies.get(assembly)
+    const { internetAccounts } = getRoot<ApolloRootModel>(session)
+
+    const apolloInternetAccount = internetAccounts.find(
+      (ia) => ia.type === 'ApolloInternetAccount',
+    ) as ApolloInternetAccountModel | undefined
+    const role = apolloInternetAccount ? apolloInternetAccount.role : 'admin'
+    const editable = ['admin', 'user'].includes(role ?? '')
+
+    if (!(feature && currentAssembly)) {
+      return null
+    }
+    const refSeq = currentAssembly.getByRefName(refName)
+    if (!refSeq) {
+      return null
+    }
+    const { max, min } = feature
+
+    const sequence = refSeq.getSequence(min, max)
+    if (!sequence) {
+      void apolloSession.apolloDataStore.loadRefSeq([
+        { assemblyName: assembly, refName, start: min, end: max },
+      ])
+    }
+
+    return (
+      <div className={classes.root}>
+        <TranscriptBasicInformation
+          feature={feature}
+          session={apolloSession}
+          assembly={currentAssembly._id || ''}
+          refName={refName}
+        />
+        <hr />
+        <Attributes
+          feature={feature}
+          session={apolloSession}
+          assembly={currentAssembly._id || ''}
+          editable={editable}
+        />
+        <hr />
+        <TranscriptSequence
+          feature={feature}
+          session={apolloSession}
+          assembly={currentAssembly._id || ''}
+          refName={refName}
+        />
+      </div>
+    )
+  },
+)
+export default ApolloTranscriptDetailsWidget

package/src/FeatureDetailsWidget/Attributes.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/unbound-method */
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
 /* eslint-disable @typescript-eslint/no-misused-promises */
-import { AnnotationFeatureI } from '@apollo-annotation/mst'
+import { AnnotationFeature } from '@apollo-annotation/mst'
 import { FeatureAttributeChange } from '@apollo-annotation/shared'
 import { AbstractSessionModel } from '@jbrowse/core/util'
 import DeleteIcon from '@mui/icons-material/Delete'
@@ -91,7 +91,7 @@ export const Attributes = observer(function Attributes({
   feature,
   session,
 }: {
-  feature: AnnotationFeatureI
+  feature: AnnotationFeature
   session: ApolloSessionModel
   assembly: string
   editable: boolean
@@ -242,9 +242,17 @@ export const Attributes = observer(function Attributes({
 
   return (
     <>
-      <Typography variant="h4">Attributes</Typography>
+      <Typography
+        style={{ display: 'inline', marginLeft: '15px' }}
+        variant="h5"
+      >
+        Attributes
+      </Typography>
       <Grid container direction="column" spacing={1}>
         {Object.entries(attributes).map(([key, value]) => {
+          if (key === '') {
+            return null
+          }
           const EditorComponent =
             reservedKeys.get(key) ?? CustomAttributeValueEditor
           return (

package/src/FeatureDetailsWidget/BasicInformation.tsx

@@ -1,5 +1,6 @@
+/* eslint-disable @typescript-eslint/use-unknown-in-catch-callback-variable */
 /* eslint-disable @typescript-eslint/no-misused-promises */
-import { AnnotationFeatureI } from '@apollo-annotation/mst'
+import { AnnotationFeature } from '@apollo-annotation/mst'
 import {
   LocationEndChange,
   LocationStartChange,
@@ -7,15 +8,7 @@ import {
   TypeChange,
 } from '@apollo-annotation/shared'
 import { AbstractSessionModel } from '@jbrowse/core/util'
-import {
-  FormControl,
-  FormControlLabel,
-  FormLabel,
-  Radio,
-  RadioGroup,
-  TextField,
-  Typography,
-} from '@mui/material'
+import { TextField, Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 import React, { useState } from 'react'
 
@@ -31,14 +24,14 @@ export const BasicInformation = observer(function BasicInformation({
   feature,
   session,
 }: {
-  feature: AnnotationFeatureI
+  feature: AnnotationFeature
   session: ApolloSessionModel
   assembly: string
 }) {
   const [errorMessage, setErrorMessage] = useState('')
   const [typeWarningText, setTypeWarningText] = useState('')
 
-  const { _id, assemblyId, end, start, strand, type } = feature
+  const { _id, assemblyId, max, min, strand, type } = feature
 
   const notifyError = (e: Error) => {
     ;(session as unknown as AbstractSessionModel).notify(e.message, 'error')
@@ -79,7 +72,7 @@ export const BasicInformation = observer(function BasicInformation({
       typeName: 'LocationStartChange',
       changedIds: [_id],
       featureId: _id,
-      oldStart: start,
+      oldStart: min,
       newStart,
       assembly,
     })
@@ -91,7 +84,7 @@ export const BasicInformation = observer(function BasicInformation({
       typeName: 'LocationEndChange',
       changedIds: [_id],
       featureId: _id,
-      oldEnd: end,
+      oldEnd: max,
       newEnd,
       assembly,
     })
@@ -99,7 +92,7 @@ export const BasicInformation = observer(function BasicInformation({
   }
 
   async function fetchValidTerms(
-    parentFeature: AnnotationFeatureI | undefined,
+    parentFeature: undefined | AnnotationFeature,
     ontologyStore: OntologyStore,
     _signal: AbortSignal,
   ) {
@@ -119,14 +112,14 @@ export const BasicInformation = observer(function BasicInformation({
 
   return (
     <>
-      <Typography variant="h4">Basic information</Typography>
+      <Typography variant="h5">Basic information</Typography>
       <NumberTextField
         margin="dense"
         id="start"
         label="Start"
         fullWidth
         variant="outlined"
-        value={start + 1}
+        value={min + 1}
         onChangeCommitted={handleStartChange}
       />
       <NumberTextField
@@ -135,7 +128,7 @@ export const BasicInformation = observer(function BasicInformation({
         label="End"
         fullWidth
         variant="outlined"
-        value={end}
+        value={max}
         onChangeCommitted={handleEndChange}
       />
       <OntologyTermAutocomplete
@@ -160,18 +153,33 @@ export const BasicInformation = observer(function BasicInformation({
           }
         }}
       />
-      <FormControl>
-        <FormLabel>Strand</FormLabel>
-        <RadioGroup row value={strand ?? ''} onChange={handleStrandChange}>
-          <FormControlLabel value="1" control={<Radio />} label="Forward (+)" />
-          <FormControlLabel
-            value="-1"
-            control={<Radio />}
-            label="Reverse (-)"
-          />
-          <FormControlLabel value="" control={<Radio />} label="None" />
-        </RadioGroup>
-      </FormControl>
+      <label>
+        <input
+          type="radio"
+          value="1"
+          checked={strand === 1}
+          onChange={handleStrandChange}
+        />
+        Positive Strand (+)
+      </label>
+      <label>
+        <input
+          type="radio"
+          value="-1"
+          checked={strand === -1}
+          onChange={handleStrandChange}
+        />
+        Negative Strand (-)
+      </label>
+      <label>
+        <input
+          type="radio"
+          value=""
+          checked={strand === undefined}
+          onChange={handleStrandChange}
+        />
+        No Strand Information
+      </label>
       {errorMessage ? (
         <Typography color="error">{errorMessage}</Typography>
       ) : null}

package/src/FeatureDetailsWidget/Sequence.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
-import { AnnotationFeatureI } from '@apollo-annotation/mst'
+import { AnnotationFeature } from '@apollo-annotation/mst'
 import { splitStringIntoChunks } from '@apollo-annotation/shared'
 import { Button, Typography } from '@mui/material'
 import { observer } from 'mobx-react'
@@ -35,7 +35,7 @@ export const Sequence = observer(function Sequence({
   session,
 }: {
   assembly: string
-  feature: AnnotationFeatureI
+  feature: AnnotationFeature
   refName: string
   session: ApolloSessionModel
 }) {
@@ -54,22 +54,22 @@ export const Sequence = observer(function Sequence({
   if (!refSeq) {
     return null
   }
-  const { end, start } = feature
+  const { max, min } = feature
   let sequence = ''
   if (showSequence) {
-    sequence = refSeq.getSequence(start, end)
+    sequence = refSeq.getSequence(min, max)
     if (sequence) {
-      sequence = formatSequence(sequence, refName, start, end)
+      sequence = formatSequence(sequence, refName, min, max)
     } else {
       void session.apolloDataStore.loadRefSeq([
-        { assemblyName: assembly, refName, start, end },
+        { assemblyName: assembly, refName, start: min, end: max },
       ])
     }
   }
 
   return (
     <>
-      <Typography variant="h4">Sequence</Typography>
+      <Typography variant="h5">Sequence</Typography>
       <Button variant="contained" onClick={onButtonClick}>
         {showSequence ? 'Hide sequence' : 'Show sequence'}
       </Button>