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

package/src/FeatureDetailsWidget/ApolloTranscriptDetailsWidget.tsx

@@ -1,16 +1,38 @@
-import { AbstractSessionModel, getSession } from '@jbrowse/core/util'
+import { type AnnotationFeature } from '@apollo-annotation/mst'
+import styled from '@emotion/styled'
+import {
+  type AbstractSessionModel,
+  getEnv,
+  getSession,
+} from '@jbrowse/core/util'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import InfoIcon from '@mui/icons-material/Info'
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Tooltip,
+  Typography,
+} from '@mui/material'
 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 { ApolloInternetAccountModel } from '../ApolloInternetAccount/model'
-import { ApolloSessionModel } from '../session'
-import { ApolloRootModel } from '../types'
+import { type ApolloInternetAccountModel } from '../ApolloInternetAccount/model'
+import { type ApolloSessionModel } from '../session'
+import { type ApolloRootModel } from '../types'
+
 import { Attributes } from './Attributes'
-import { TranscriptBasicInformation } from './TranscriptBasic'
 import { TranscriptSequence } from './TranscriptSequence'
-import { ApolloTranscriptDetailsWidget as ApolloTranscriptDetailsWidgetState } from './model'
+import { TranscriptWidgetEditLocation } from './TranscriptWidgetEditLocation'
+import { TranscriptWidgetSummary } from './TranscriptWidgetSummary'
+import { type ApolloTranscriptDetailsWidget as ApolloTranscriptDetailsWidgetState } from './model'
+
+interface CustomComponentProps {
+  session: AbstractSessionModel
+  feature: AnnotationFeature
+}
 
 const useStyles = makeStyles()((theme) => ({
   root: {
@@ -18,14 +40,37 @@ const useStyles = makeStyles()((theme) => ({
   },
 }))
 
+export const StyledAccordionSummary = styled(AccordionSummary)(() => ({
+  minHeight: 30,
+  maxHeight: 30,
+  '&.Mui-expanded': {
+    minHeight: 30,
+    maxHeight: 30,
+  },
+}))
+
+function NoOpCustomComponent(_props: CustomComponentProps) {
+  return null
+}
+
 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 { pluginManager } = getEnv(session)
     const apolloSession = getSession(model) as unknown as ApolloSessionModel
     const currentAssembly =
       apolloSession.apolloDataStore.assemblies.get(assembly)
@@ -53,28 +98,126 @@ export const ApolloTranscriptDetailsWidget = observer(
       ])
     }
 
+    function handlePanelChange(expanded: boolean, panel: string) {
+      if (expanded) {
+        setPanelState([...panelState, panel])
+      } else {
+        setPanelState(panelState.filter((p) => p !== panel))
+      }
+    }
+
+    const CustomComponent = pluginManager.evaluateExtensionPoint(
+      'Apollo-TranscriptDetailsCustomComponent',
+      NoOpCustomComponent,
+      props,
+    ) as React.ElementType<CustomComponentProps>
+
     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>
+        <CustomComponent session={session} feature={feature} />
+        <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/AttributeKey.tsx

@@ -0,0 +1,50 @@
+import {
+  gffInternalToColumn,
+  internalToGFF,
+  isGFFColumnInternal,
+  isGFFInternalAttribute,
+} from '@apollo-annotation/shared'
+import InfoIcon from '@mui/icons-material/Info'
+import { Chip, Tooltip, Typography } from '@mui/material'
+import React from 'react'
+import { makeStyles } from 'tss-react/mui'
+
+const useStyles = makeStyles()((theme) => ({
+  attributeKey: {
+    fontWeight: 'bold',
+    marginRight: theme.spacing(2),
+  },
+}))
+
+export function AttributeKey({ attributeKey: key }: { attributeKey: string }) {
+  const { classes } = useStyles()
+
+  const startsWithCapital = /^[A-Z]/.test(key)
+  let displayKey = key
+  let titleText: string | undefined
+  if (isGFFInternalAttribute(key)) {
+    displayKey = internalToGFF[key]
+    titleText = `On GFF3 export, this will be assigned to the GFF3's reserved "${displayKey}" attribute`
+  } else if (isGFFColumnInternal(key)) {
+    displayKey = gffInternalToColumn[key]
+    titleText = `On GFF3 export, this will be placed in the GFF3's "${displayKey}" column`
+  } else if (startsWithCapital) {
+    titleText =
+      'On GFF3 export, this attribute will be changed to start with a lower-case letter because attributes starting with an upper-case letter are reserved in GFF3'
+  }
+  return (
+    <div style={{ display: 'flex' }}>
+      <Typography className={classes.attributeKey}>{displayKey}</Typography>
+      {titleText ? (
+        <Tooltip title={titleText}>
+          <Chip
+            icon={<InfoIcon />}
+            label="GFF3"
+            size="small"
+            variant="outlined"
+          />
+        </Tooltip>
+      ) : null}
+    </div>
+  )
+}

package/src/FeatureDetailsWidget/AttributeKeySelector.tsx

@@ -0,0 +1,104 @@
+import { gffColumnToInternal, gffToInternal } from '@apollo-annotation/shared'
+import { getEnv } from '@jbrowse/core/util'
+import {
+  Button,
+  DialogActions,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  TextField,
+} from '@mui/material'
+import { observer } from 'mobx-react'
+import React, { useState } from 'react'
+
+import { type ApolloSessionModel } from '../session'
+
+const customKeyName = 'Custom'
+const gffKeys: Record<string, string | undefined> = {
+  [customKeyName]: 'custom',
+}
+
+for (const [value, key] of Object.entries(gffToInternal)) {
+  gffKeys[`GFF ${key}`] = value
+}
+for (const [value, key] of Object.entries(gffColumnToInternal)) {
+  gffKeys[`GFF ${key}`] = value
+}
+
+export const AttributeKeySelector = observer(function AttributeKeySelector({
+  setKey,
+  session,
+}: {
+  setKey: (newKey?: string) => void
+  session: ApolloSessionModel
+}) {
+  const { pluginManager } = getEnv(session)
+  const reservedKeys = pluginManager.evaluateExtensionPoint(
+    'Apollo-ReservedAttributeKeys',
+    gffKeys,
+  ) as Record<string, string | undefined>
+  const firstKey = Object.keys(reservedKeys).at(0) ?? customKeyName
+  const [selectedKey, setSelectedKey] = useState<string>(firstKey)
+  const [customKey, setCustomKey] = useState<string>()
+  const isCustom = selectedKey === customKeyName
+
+  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    if (isCustom) {
+      setKey(customKey)
+      return
+    }
+    setKey(reservedKeys[selectedKey])
+  }
+  function handleCancel() {
+    setKey()
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <div style={{ display: 'flex', flexDirection: 'column', margin: 8 }}>
+        <FormControl variant="outlined">
+          <InputLabel id="attribute-key-select-label">Key</InputLabel>
+          <Select
+            labelId="attribute-key-select-label"
+            value={selectedKey}
+            label="Key"
+            onChange={(event) => {
+              setSelectedKey(event.target.value)
+            }}
+          >
+            {Object.keys(reservedKeys).map((val) => (
+              <MenuItem key={val} value={val}>
+                {val}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+        {isCustom ? (
+          <TextField
+            label="Attribute key"
+            variant="outlined"
+            id="attributeKey"
+            onChange={(event) => {
+              setCustomKey(event.target.value)
+            }}
+          />
+        ) : null}
+      </div>
+      <DialogActions>
+        <Button
+          color="primary"
+          variant="contained"
+          type="submit"
+          disabled={isCustom && !customKey}
+        >
+          Add
+        </Button>
+        <Button variant="outlined" onClick={handleCancel}>
+          Cancel
+        </Button>
+      </DialogActions>
+    </form>
+  )
+})