@apollo-annotation/jbrowse-plugin-apollo 0.3.4 → 0.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apollo-annotation/jbrowse-plugin-apollo",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "description": "Apollo plugin for JBrowse 2",
   "keywords": [
     "jbrowse",
@@ -48,9 +48,9 @@
     }
   },
   "dependencies": {
-    "@apollo-annotation/common": "^0.3.4",
-    "@apollo-annotation/mst": "^0.3.4",
-    "@apollo-annotation/shared": "^0.3.4",
+    "@apollo-annotation/common": "^0.3.5",
+    "@apollo-annotation/mst": "^0.3.5",
+    "@apollo-annotation/shared": "^0.3.5",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@gmod/gff": "1.2.0",

package/src/ApolloSequenceAdapter/ApolloSequenceAdapter.ts

@@ -127,6 +127,19 @@ export class ApolloSequenceAdapter extends BaseSequenceAdapter {
         const backendDriver = dataStore.getBackendDriver(
           assemblyId,
         ) as BackendDriver
+        const regions = await backendDriver.getRegions(
+          regionWithAssemblyName.assemblyName,
+        )
+        const region = regions.find(
+          (region) => region.refName === regionWithAssemblyName.refName,
+        )
+        if (!region) {
+          observer.error('Cannot get region')
+          return
+        }
+        if (regionWithAssemblyName.end > region.end) {
+          regionWithAssemblyName.end = region.end
+        }
         const { seq } = await backendDriver.getSequence(regionWithAssemblyName)
         observer.next(
           new SimpleFeature({

package/src/FeatureDetailsWidget/ApolloFeatureDetailsWidget.tsx

@@ -1,7 +1,14 @@
 import { getSession } from '@jbrowse/core/util'
 import { observer } from 'mobx-react'
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { makeStyles } from 'tss-react/mui'
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Typography,
+} from '@mui/material'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 
 import { ApolloSessionModel } from '../session'
 import { Attributes } from './Attributes'
@@ -24,6 +31,12 @@ export const ApolloFeatureDetailsWidget = observer(
     const currentAssembly = session.apolloDataStore.assemblies.get(assembly)
     const { classes } = useStyles()
 
+    const [panelState, setPanelState] = useState<string[]>(['attributes'])
+
+    useEffect(() => {
+      setPanelState(['attributes'])
+    }, [feature])
+
     if (!(feature && currentAssembly)) {
       return null
     }
@@ -39,6 +52,14 @@ export const ApolloFeatureDetailsWidget = observer(
       ])
     }
 
+    function handlePanelChange(expanded: boolean, panel: string) {
+      if (expanded) {
+        setPanelState([...panelState, panel])
+      } else {
+        setPanelState(panelState.filter((p) => p !== panel))
+      }
+    }
+
     return (
       <div className={classes.root}>
         <BasicInformation
@@ -46,22 +67,72 @@ export const ApolloFeatureDetailsWidget = observer(
           session={session}
           assembly={currentAssembly._id}
         />
-        <hr />
-        <Attributes
-          feature={feature}
-          session={session}
-          assembly={currentAssembly._id}
-          editable={true}
-        />
-        <hr />
-        <Sequence
-          feature={feature}
-          session={session}
-          assembly={currentAssembly._id}
-          refName={refName}
-        />
-        <hr />
-        <FeatureDetailsNavigation model={model} feature={feature} />
+        <Accordion
+          style={{ marginTop: 10 }}
+          expanded={panelState.includes('attributes')}
+          onChange={(e, expanded) => {
+            handlePanelChange(expanded, 'attributes')
+          }}
+        >
+          <AccordionSummary
+            expandIcon={<ExpandMoreIcon style={{ color: 'white' }} />}
+            aria-controls="panel1-content"
+            id="panel1-header"
+          >
+            <Typography component="span">Attributes</Typography>
+          </AccordionSummary>
+          <AccordionDetails>
+            <Attributes
+              feature={feature}
+              session={session}
+              assembly={currentAssembly._id}
+              editable={true}
+            />
+          </AccordionDetails>
+        </Accordion>
+        <Accordion
+          style={{ marginTop: 10 }}
+          expanded={panelState.includes('sequence')}
+          onChange={(e, expanded) => {
+            handlePanelChange(expanded, 'sequence')
+          }}
+        >
+          <AccordionSummary
+            expandIcon={<ExpandMoreIcon style={{ color: 'white' }} />}
+            aria-controls="panel2-content"
+            id="panel2-header"
+          >
+            <Typography component="span">Sequence</Typography>
+          </AccordionSummary>
+          <AccordionDetails>
+            {panelState.includes('sequence') && (
+              <Sequence
+                feature={feature}
+                session={session}
+                assembly={currentAssembly._id}
+                refName={refName}
+              />
+            )}
+          </AccordionDetails>
+        </Accordion>
+        <Accordion
+          style={{ marginTop: 10 }}
+          expanded={panelState.includes('related_features')}
+          onChange={(e, expanded) => {
+            handlePanelChange(expanded, 'related_features')
+          }}
+        >
+          <AccordionSummary
+            expandIcon={<ExpandMoreIcon style={{ color: 'white' }} />}
+            aria-controls="panel3-content"
+            id="panel3-header"
+          >
+            <Typography component="span">Related features</Typography>
+          </AccordionSummary>
+          <AccordionDetails>
+            <FeatureDetailsNavigation model={model} feature={feature} />
+          </AccordionDetails>
+        </Accordion>
       </div>
     )
   },

package/src/FeatureDetailsWidget/ApolloTranscriptDetailsWidget.tsx

@@ -1,16 +1,29 @@
 import { AbstractSessionModel, getSession } from '@jbrowse/core/util'
 import { observer } from 'mobx-react'
 import { getRoot } from 'mobx-state-tree'
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { makeStyles } from 'tss-react/mui'
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Tooltip,
+  Typography,
+} from '@mui/material'
+
+import styled from '@emotion/styled'
+
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import InfoIcon from '@mui/icons-material/Info'
 
 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'
+import { TranscriptWidgetSummary } from './TranscriptWidgetSummary'
+import { TranscriptWidgetEditLocation } from './TranscriptWidgetEditLocation'
 
 const useStyles = makeStyles()((theme) => ({
   root: {
@@ -18,13 +31,31 @@ const useStyles = makeStyles()((theme) => ({
   },
 }))
 
+export const StyledAccordionSummary = styled(AccordionSummary)(() => ({
+  minHeight: 30,
+  maxHeight: 30,
+  '&.Mui-expanded': {
+    minHeight: 30,
+    maxHeight: 30,
+  },
+}))
+
 export const ApolloTranscriptDetailsWidget = observer(
   function ApolloTranscriptDetails(props: {
     model: ApolloTranscriptDetailsWidgetState
   }) {
     const { classes } = useStyles()
+    const DEFAULT_PANELS = ['summary', 'location', 'attrs']
+    const [panelState, setPanelState] = useState<string[]>(DEFAULT_PANELS)
+
     const { model } = props
     const { assembly, feature, refName } = model
+
+    useEffect(() => {
+      setPanelState(DEFAULT_PANELS)
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [feature])
+
     const session = getSession(model) as unknown as AbstractSessionModel
     const apolloSession = getSession(model) as unknown as ApolloSessionModel
     const currentAssembly =
@@ -53,28 +84,119 @@ export const ApolloTranscriptDetailsWidget = observer(
       ])
     }
 
+    function handlePanelChange(expanded: boolean, panel: string) {
+      if (expanded) {
+        setPanelState([...panelState, panel])
+      } else {
+        setPanelState(panelState.filter((p) => p !== panel))
+      }
+    }
+
     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}
-        />
+        <Accordion
+          expanded={panelState.includes('summary')}
+          onChange={(e, expanded) => {
+            handlePanelChange(expanded, 'summary')
+          }}
+        >
+          <StyledAccordionSummary
+            expandIcon={<ExpandMoreIcon style={{ color: 'white' }} />}
+            aria-controls="panel1-content"
+            id="panel1-header"
+          >
+            <Typography component="span" fontWeight={'bold'}>
+              Summary
+            </Typography>
+          </StyledAccordionSummary>
+          <AccordionDetails>
+            <TranscriptWidgetSummary feature={feature} refName={refName} />
+          </AccordionDetails>
+        </Accordion>
+        <Accordion
+          style={{ marginTop: 5 }}
+          expanded={panelState.includes('location')}
+          onChange={(e, expanded) => {
+            handlePanelChange(expanded, 'location')
+          }}
+        >
+          <StyledAccordionSummary
+            expandIcon={<ExpandMoreIcon style={{ color: 'white' }} />}
+            aria-controls="panel2-content"
+            id="panel2-header"
+          >
+            <Typography component="span" fontWeight={'bold'}>
+              Location
+            </Typography>
+          </StyledAccordionSummary>
+          <AccordionDetails>
+            <TranscriptWidgetEditLocation
+              feature={feature}
+              refName={refName}
+              session={apolloSession}
+              assembly={currentAssembly._id || ''}
+            />
+          </AccordionDetails>
+        </Accordion>
+        <Accordion
+          style={{ marginTop: 5 }}
+          expanded={panelState.includes('attrs')}
+          onChange={(e, expanded) => {
+            handlePanelChange(expanded, 'attrs')
+          }}
+        >
+          <StyledAccordionSummary
+            expandIcon={<ExpandMoreIcon style={{ color: 'white' }} />}
+            aria-controls="panel3-content"
+            id="panel3-header"
+          >
+            <div style={{ display: 'flex', alignItems: 'center' }}>
+              <Typography component="span" fontWeight={'bold'}>
+                Attributes{' '}
+              </Typography>
+              <Tooltip title="Separate multiple values for the attribute with commas">
+                <InfoIcon
+                  style={{ color: 'white', fontSize: 15, marginLeft: 10 }}
+                />
+              </Tooltip>
+            </div>
+          </StyledAccordionSummary>
+          <AccordionDetails>
+            <Attributes
+              feature={feature}
+              session={apolloSession}
+              assembly={currentAssembly._id || ''}
+              editable={editable}
+            />
+          </AccordionDetails>
+        </Accordion>
+        <Accordion
+          style={{ marginTop: 5 }}
+          expanded={panelState.includes('sequence')}
+          onChange={(e, expanded) => {
+            handlePanelChange(expanded, 'sequence')
+          }}
+        >
+          <StyledAccordionSummary
+            expandIcon={<ExpandMoreIcon style={{ color: 'white' }} />}
+            aria-controls="panel4-content"
+            id="panel4-header"
+          >
+            <Typography component="span" fontWeight={'bold'}>
+              Sequence
+            </Typography>
+          </StyledAccordionSummary>
+          <AccordionDetails>
+            {panelState.includes('sequence') && (
+              <TranscriptSequence
+                feature={feature}
+                session={apolloSession}
+                assembly={currentAssembly._id || ''}
+                refName={refName}
+              />
+            )}
+          </AccordionDetails>
+        </Accordion>
       </div>
     )
   },

package/src/FeatureDetailsWidget/Attributes.tsx

@@ -1,6 +1,4 @@
-/* eslint-disable @typescript-eslint/unbound-method */
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
-/* eslint-disable @typescript-eslint/no-misused-promises */
 import { AnnotationFeature } from '@apollo-annotation/mst'
 import { FeatureAttributeChange } from '@apollo-annotation/shared'
 import { AbstractSessionModel } from '@jbrowse/core/util'
@@ -21,10 +19,9 @@ import {
 } from '@mui/material'
 import { observer } from 'mobx-react'
 import { getSnapshot } from 'mobx-state-tree'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { makeStyles } from 'tss-react/mui'
 
-import { AttributeValueEditorProps } from '../components'
 import { OntologyTermMultiSelect } from '../components/OntologyTermMultiSelect'
 import { ApolloSessionModel } from '../session'
 import { StringTextField } from './StringTextField'
@@ -32,15 +29,33 @@ import { StringTextField } from './StringTextField'
 const reservedKeys = new Map([
   [
     'Gene Ontology',
-    (props: AttributeValueEditorProps) => {
-      return <OntologyTermMultiSelect {...props} ontologyName="Gene Ontology" />
+    (props: {
+      session: ApolloSessionModel
+      value: string[]
+      onChange: (newValue: string[]) => void
+    }) => {
+      return (
+        <OntologyTermMultiSelect
+          {...props}
+          ontologyName="Gene Ontology"
+          label={'Gene Ontology'}
+        />
+      )
     },
   ],
   [
     'Sequence Ontology',
-    (props: AttributeValueEditorProps) => {
+    (props: {
+      session: ApolloSessionModel
+      value: string[]
+      onChange: (newValue: string[]) => void
+    }) => {
       return (
-        <OntologyTermMultiSelect {...props} ontologyName="Sequence Ontology" />
+        <OntologyTermMultiSelect
+          {...props}
+          ontologyName="Sequence Ontology"
+          label={'Sequence Ontology'}
+        />
       )
     },
   ],
@@ -70,8 +85,12 @@ const useStyles = makeStyles()((theme) => ({
   },
 }))
 
-function CustomAttributeValueEditor(props: AttributeValueEditorProps) {
-  const { onChange, value } = props
+function CustomAttributeValueEditor(props: {
+  value: unknown
+  onChange: (newValue: string[]) => void
+  label: string
+}) {
+  const { onChange, value, label } = props
   return (
     <StringTextField
       value={value}
@@ -80,11 +99,28 @@ function CustomAttributeValueEditor(props: AttributeValueEditorProps) {
       }}
       variant="outlined"
       fullWidth
-      helperText="Separate multiple values for the attribute with commas"
+      label={label}
+      style={{ width: '100%' }}
     />
   )
 }
 
+function transformAttributes(feature: AnnotationFeature) {
+  return Object.fromEntries(
+    [...feature.attributes.entries()].map(([key, value]) => {
+      if (key.startsWith('gff_')) {
+        const newKey = key.slice(4)
+        const capitalizedKey = newKey.charAt(0).toUpperCase() + newKey.slice(1)
+        return [capitalizedKey, getSnapshot(value)]
+      }
+      if (key === '_id') {
+        return ['ID', getSnapshot(value)]
+      }
+      return [key, getSnapshot(value)]
+    }),
+  )
+}
+
 export const Attributes = observer(function Attributes({
   assembly,
   editable,
@@ -100,33 +136,24 @@ export const Attributes = observer(function Attributes({
   const [showAddNewForm, setShowAddNewForm] = useState(false)
   const { classes } = useStyles()
   const [newAttributeKey, setNewAttributeKey] = useState('')
-  const attributes = Object.fromEntries(
-    [...feature.attributes.entries()].map(([key, value]) => {
-      if (key.startsWith('gff_')) {
-        const newKey = key.slice(4)
-        const capitalizedKey = newKey.charAt(0).toUpperCase() + newKey.slice(1)
-        return [capitalizedKey, getSnapshot(value)]
-      }
-      if (key === '_id') {
-        return ['ID', getSnapshot(value)]
-      }
-      return [key, getSnapshot(value)]
-    }),
+  const [attributes, setAttributes] = useState(() =>
+    transformAttributes(feature),
   )
+
+  useEffect(() => {
+    setAttributes(transformAttributes(feature))
+  }, [feature])
+
   const { notify } = session as unknown as AbstractSessionModel
 
   const { changeManager } = session.apolloDataStore
 
-  async function onChangeCommitted(newKey: string, newValue?: string[]) {
+  async function onChangeCommitted(attributes: Record<string, string[]>) {
     setErrorMessage('')
 
     const attrs: Record<string, string[]> = {}
     if (attributes) {
-      const modifiedAttrs = Object.entries({
-        ...attributes,
-        [newKey]: newValue,
-      })
-      for (const [key, val] of modifiedAttrs) {
+      for (const [key, val] of Object.entries(attributes)) {
         if (!val) {
           continue
         }
@@ -196,6 +223,7 @@ export const Attributes = observer(function Attributes({
     await changeManager.submit(change)
     notify('Feature attributes modified successfully', 'success')
   }
+
   function handleAddNewAttributeChange() {
     setErrorMessage('')
     if (newAttributeKey.trim().length === 0) {
@@ -224,7 +252,29 @@ export const Attributes = observer(function Attributes({
       )
       return
     }
-    void onChangeCommitted(newAttributeKey, [])
+
+    setAttributes({
+      ...attributes,
+      [newAttributeKey]: [],
+    })
+
+    setShowAddNewForm(false)
+    setNewAttributeKey('')
+  }
+
+  function deleteAttribute(key: string) {
+    const newAttributes = { ...attributes }
+    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+    delete newAttributes[key]
+    setAttributes(newAttributes)
+    void onChangeCommitted(newAttributes)
+  }
+
+  function updateAttribute(key: string, newValue: string[]) {
+    const newAttributes = { ...attributes }
+    newAttributes[key] = newValue
+    setAttributes(newAttributes)
+    void onChangeCommitted(newAttributes)
   }
 
   function handleRadioButtonChange(
@@ -241,8 +291,7 @@ export const Attributes = observer(function Attributes({
   }
 
   return (
-    <>
-      <Typography variant="h5">Attributes</Typography>
+    <div data-testid="attributes_test">
       <Grid2 container direction="column" spacing={1}>
         {Object.entries(attributes).map(([key, value]) => {
           if (key === '') {
@@ -251,25 +300,26 @@ export const Attributes = observer(function Attributes({
           const EditorComponent =
             reservedKeys.get(key) ?? CustomAttributeValueEditor
           return (
-            <Grid2 container spacing={3} alignItems="center" key={key}>
-              <Grid2>
-                <Paper variant="outlined" className={classes.attributeName}>
-                  <Typography>{key}</Typography>
-                </Paper>
-              </Grid2>
-              <Grid2 flexGrow={1}>
+            <Grid2 container key={key}>
+              <Grid2 size={11}>
                 <EditorComponent
                   session={session}
                   value={value}
-                  onChange={(newValue) => onChangeCommitted(key, newValue)}
+                  onChange={(newValue: string[]) => {
+                    updateAttribute(key, newValue)
+                  }}
+                  label={key}
                 />
               </Grid2>
-              <Grid2>
+              <Grid2 size={1}>
                 <IconButton
                   aria-label="delete"
                   size="medium"
                   disabled={!editable}
-                  onClick={() => onChangeCommitted(key)}
+                  onClick={() => {
+                    deleteAttribute(key)
+                  }}
+                  style={{ marginTop: '10px' }}
                 >
                   <DeleteIcon fontSize="medium" key={key} />
                 </IconButton>
@@ -375,6 +425,6 @@ export const Attributes = observer(function Attributes({
       {errorMessage ? (
         <Typography color="error">{errorMessage}</Typography>
       ) : null}
-    </>
+    </div>
   )
 })

package/src/FeatureDetailsWidget/BasicInformation.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/use-unknown-in-catch-callback-variable */
 /* eslint-disable @typescript-eslint/no-misused-promises */
 import { AnnotationFeature } from '@apollo-annotation/mst'
 import {
@@ -111,8 +110,7 @@ export const BasicInformation = observer(function BasicInformation({
   }
 
   return (
-    <>
-      <Typography variant="h5">Basic information</Typography>
+    <div data-testid="basic_information">
       <NumberTextField
         margin="dense"
         id="start"
@@ -183,6 +181,6 @@ export const BasicInformation = observer(function BasicInformation({
       {errorMessage ? (
         <Typography color="error">{errorMessage}</Typography>
       ) : null}
-    </>
+    </div>
   )
 })

package/src/FeatureDetailsWidget/FeatureDetailsNavigation.tsx

@@ -5,6 +5,7 @@ import { observer } from 'mobx-react'
 
 import { AnnotationFeature } from '@apollo-annotation/mst'
 import { ApolloFeatureDetailsWidget as ApolloFeatureDetails } from './model'
+import { getFeatureNameOrId } from '../util'
 
 export const FeatureDetailsNavigation = observer(
   function FeatureDetailsNavigation(props: {
@@ -25,8 +26,7 @@ export const FeatureDetailsNavigation = observer(
     }
 
     return (
-      <div>
-        <Typography variant="h5">Go to related feature</Typography>
+      <div style={{ marginTop: 10 }}>
         {parent && (
           <div>
             <Typography variant="h6">Parent:</Typography>
@@ -36,7 +36,8 @@ export const FeatureDetailsNavigation = observer(
                 model.setFeature(parent)
               }}
             >
-              {parent.type} ({parent.min}..{parent.max})
+              {parent.type}
+              {getFeatureNameOrId(parent)} ({parent.min}..{parent.max})
             </Button>
           </div>
         )}
@@ -53,7 +54,8 @@ export const FeatureDetailsNavigation = observer(
                     model.setFeature(child)
                   }}
                 >
-                  {child.type} ({child.min}..{child.max})
+                  {child.type}
+                  {getFeatureNameOrId(child)} ({child.min}..{child.max})
                 </Button>
               </div>
             ))}