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

package/src/FeatureDetailsWidget/DefaultAttributeEditor.tsx

@@ -0,0 +1,104 @@
+import AddBoxIcon from '@mui/icons-material/AddBox'
+import DeleteIcon from '@mui/icons-material/Delete'
+import { Button, DialogActions, IconButton } from '@mui/material'
+import { observer } from 'mobx-react'
+import React, { useState } from 'react'
+
+import { type ApolloSessionModel } from '../session'
+
+import { StringTextField } from './StringTextField'
+
+export interface AttributeEditorProps {
+  session: ApolloSessionModel
+  attributeValues?: string[]
+  setAttribute: (newAttribute?: string[]) => void
+  isNew?: boolean
+}
+
+export const DefaultAttributeEditor = observer(function DefaultAttributeEditor({
+  attributeValues,
+  setAttribute,
+  isNew = false,
+}: AttributeEditorProps) {
+  const [newValues, setNewValues] = useState<string[]>(
+    attributeValues && attributeValues.length > 0 ? attributeValues : [''],
+  )
+
+  function updateValue(idx: number, newValue: string) {
+    setNewValues((oldValues) => {
+      const newValues = [...oldValues]
+      newValues[idx] = newValue
+      return newValues
+    })
+  }
+  function deleteValue(idx: number) {
+    setNewValues((oldValues) => {
+      const newValues = [...oldValues]
+      newValues.splice(idx, 1)
+      return newValues
+    })
+  }
+  function addValue() {
+    setNewValues((oldValues) => {
+      const newValues = [...oldValues]
+      newValues.push('')
+      return newValues
+    })
+  }
+
+  return (
+    <>
+      {newValues.map((value, idx) => (
+        <div key={`${idx}-${value}`} style={{ display: 'flex' }}>
+          <StringTextField
+            value={value}
+            onChangeCommitted={(editedValue) => {
+              updateValue(idx, editedValue)
+            }}
+            variant="outlined"
+            fullWidth
+          />
+          <IconButton
+            aria-label="delete"
+            size="medium"
+            edge="end"
+            onClick={() => {
+              deleteValue(idx)
+            }}
+          >
+            <DeleteIcon fontSize="inherit" />
+          </IconButton>
+        </div>
+      ))}
+      <IconButton
+        aria-label="add"
+        size="medium"
+        color="secondary"
+        edge="start"
+        onClick={addValue}
+      >
+        <AddBoxIcon fontSize="inherit" />
+      </IconButton>
+      <DialogActions>
+        <Button
+          color="primary"
+          variant="contained"
+          onClick={() => {
+            setAttribute(newValues.filter(Boolean))
+          }}
+        >
+          {isNew ? 'Add' : 'Update'}
+        </Button>
+        <Button
+          variant="outlined"
+          type="submit"
+          onClick={() => {
+            setAttribute()
+          }}
+        >
+          Cancel
+        </Button>
+      </DialogActions>
+    </>
+  )
+})

package/src/FeatureDetailsWidget/DefaultAttributeViewer.tsx

@@ -0,0 +1,22 @@
+import { Typography } from '@mui/material'
+import React from 'react'
+
+export interface AttributeViewerProps {
+  values: string[] | undefined
+}
+
+export function DefaultAttributeViewer({ values }: AttributeViewerProps) {
+  return (
+    <>
+      {values?.map((value, idx) => (
+        <Typography
+          key={`${idx}.${value}`}
+          variant="body2"
+          color="textSecondary"
+        >
+          {value}
+        </Typography>
+      ))}
+    </>
+  )
+}

package/src/FeatureDetailsWidget/FeatureDetailsNavigation.tsx

@@ -1,10 +1,11 @@
-import React from 'react'
-
+import { type AnnotationFeature } from '@apollo-annotation/mst'
 import { Button, Typography } from '@mui/material'
 import { observer } from 'mobx-react'
+import React from 'react'
+
+import { getFeatureNameOrId } from '../util'
 
-import { AnnotationFeature } from '@apollo-annotation/mst'
-import { ApolloFeatureDetailsWidget as ApolloFeatureDetails } from './model'
+import { type ApolloFeatureDetailsWidget as ApolloFeatureDetails } from './model'
 
 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>
             ))}

package/src/FeatureDetailsWidget/NumberTextField.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/unbound-method */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
-import { TextField, TextFieldProps } from '@mui/material'
+import { TextField, type TextFieldProps } from '@mui/material'
 import { observer } from 'mobx-react'
 import React, { useEffect, useState } from 'react'
 

package/src/FeatureDetailsWidget/Sequence.tsx

@@ -1,12 +1,11 @@
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
-import { AnnotationFeature } from '@apollo-annotation/mst'
+import { type AnnotationFeature } from '@apollo-annotation/mst'
 import { splitStringIntoChunks } from '@apollo-annotation/shared'
-import { Button, Typography } from '@mui/material'
 import { observer } from 'mobx-react'
-import React, { useState } from 'react'
+import React from 'react'
 import { makeStyles } from 'tss-react/mui'
 
-import { ApolloSessionModel } from '../session'
+import { type ApolloSessionModel } from '../session'
 
 function formatSequence(
   seq: string,
@@ -40,13 +39,8 @@ export const Sequence = observer(function Sequence({
   session: ApolloSessionModel
 }) {
   const currentAssembly = session.apolloDataStore.assemblies.get(assembly)
-  const [showSequence, setShowSequence] = useState(false)
   const { classes } = useStyles()
 
-  const onButtonClick = () => {
-    setShowSequence(!showSequence)
-  }
-
   if (!(feature && currentAssembly)) {
     return null
   }
@@ -55,35 +49,24 @@ export const Sequence = observer(function Sequence({
     return null
   }
   const { max, min } = feature
-  let sequence = ''
-  if (showSequence) {
-    sequence = refSeq.getSequence(min, max)
-    if (sequence) {
-      sequence = formatSequence(sequence, refName, min, max)
-    } else {
-      void session.apolloDataStore.loadRefSeq([
-        { assemblyName: assembly, refName, start: min, end: max },
-      ])
-    }
+  let sequence = refSeq.getSequence(min, max)
+  if (sequence) {
+    sequence = formatSequence(sequence, refName, min, max)
+  } else {
+    void session.apolloDataStore.loadRefSeq([
+      { assemblyName: assembly, refName, start: min, end: max },
+    ])
   }
 
   return (
-    <>
-      <Typography variant="h5">Sequence</Typography>
-      <Button variant="contained" onClick={onButtonClick}>
-        {showSequence ? 'Hide sequence' : 'Show sequence'}
-      </Button>
-      <div>
-        {showSequence && (
-          <textarea
-            readOnly
-            rows={20}
-            className={classes.sequence}
-            value={sequence}
-          />
-        )}
-      </div>
-    </>
+    <div>
+      <textarea
+        readOnly
+        rows={20}
+        className={classes.sequence}
+        value={sequence}
+      />
+    </div>
   )
 })
 export default Sequence

package/src/FeatureDetailsWidget/StringTextField.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/unbound-method */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
-import { TextField, TextFieldProps } from '@mui/material'
+import { TextField, type TextFieldProps } from '@mui/material'
 import { observer } from 'mobx-react'
 import React, { useEffect, useState } from 'react'
 

package/src/FeatureDetailsWidget/TranscriptSequence.tsx

@@ -1,4 +1,4 @@
-import { AnnotationFeature } from '@apollo-annotation/mst'
+import { type AnnotationFeature } from '@apollo-annotation/mst'
 import { splitStringIntoChunks } from '@apollo-annotation/shared'
 import { defaultCodonTable, revcom } from '@jbrowse/core/util'
 import {
@@ -6,18 +6,23 @@ import {
   MenuItem,
   Paper,
   Select,
-  SelectChangeEvent,
-  Typography,
+  type SelectChangeEvent,
   useTheme,
 } from '@mui/material'
 import { observer } from 'mobx-react'
-import React, { useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 
-import { ApolloSessionModel } from '../session'
+import { type ApolloSessionModel } from '../session'
 
 const SEQUENCE_WRAP_LENGTH = 60
 
-type SegmentType = 'upOrDownstream' | 'UTR' | 'CDS' | 'intron' | 'protein'
+type SegmentType =
+  | 'upOrDownstream'
+  | 'UTR'
+  | 'CDS'
+  | 'intron'
+  | 'protein'
+  | 'exon'
 type SegmentListType = 'CDS' | 'cDNA' | 'genomic' | 'protein'
 
 interface SequenceSegment {
@@ -151,6 +156,7 @@ function getSegmentColor(type: SegmentType) {
     case 'upOrDownstream': {
       return 'rgb(255,255,255)'
     }
+    case 'exon':
     case 'UTR': {
       return 'rgb(194,106,119)'
     }
@@ -166,6 +172,25 @@ function getSegmentColor(type: SegmentType) {
   }
 }
 
+function getLocationIntervals(seqSegments: SequenceSegment[]) {
+  const locIntervals: { min: number; max: number }[] = []
+  const allLocs = seqSegments.flatMap((segment) => segment.locs)
+  let [previous] = allLocs
+  for (let i = 1; i < allLocs.length; i++) {
+    if (previous.min === allLocs[i].max || previous.max === allLocs[i].min) {
+      previous = {
+        min: Math.min(previous.min, allLocs[i].min),
+        max: Math.max(previous.max, allLocs[i].max),
+      }
+    } else {
+      locIntervals.push(previous)
+      previous = allLocs[i]
+    }
+  }
+  locIntervals.push(previous)
+  return locIntervals
+}
+
 export const TranscriptSequence = observer(function TranscriptSequence({
   assembly,
   feature,
@@ -179,11 +204,46 @@ export const TranscriptSequence = observer(function TranscriptSequence({
 }) {
   const currentAssembly = session.apolloDataStore.assemblies.get(assembly)
   const refData = currentAssembly?.getByRefName(refName)
-  const [showSequence, setShowSequence] = useState(false)
-  const [selectedOption, setSelectedOption] = useState<SegmentListType>('CDS')
+  const { featureTypeOntology } = session.apolloDataStore.ontologyManager
+
+  const defaultSelectedOption: SegmentListType = 'genomic'
+  const defaultSequenceOptions: SegmentListType[] = ['genomic', 'cDNA']
+  const [sequenceOptions, setSequenceOptions] = useState<SegmentListType[]>(
+    defaultSequenceOptions,
+  )
+  const [selectedOption, setSelectedOption] = useState<SegmentListType>(
+    defaultSelectedOption,
+  )
+  const [sequenceSegments, setSequenceSegments] = useState<SequenceSegment[]>(
+    () => {
+      return refData
+        ? getSequenceSegments(
+            defaultSelectedOption,
+            feature,
+            (min: number, max: number) => refData.getSequence(min, max),
+          )
+        : []
+    },
+  )
+  const [locationIntervals, setLocationIntervals] = useState<
+    { min: number; max: number }[]
+  >(() => {
+    return getLocationIntervals(sequenceSegments)
+  })
   const theme = useTheme()
   const seqRef = useRef<HTMLDivElement>(null)
 
+  useEffect(() => {
+    const { cdsLocations } = feature
+    const [firstLocation] = cdsLocations
+    if (firstLocation.length > 0) {
+      setSequenceOptions([...defaultSequenceOptions, 'CDS', 'protein'])
+    } else {
+      setSequenceOptions(defaultSequenceOptions)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [feature])
+
   if (!(currentAssembly && refData)) {
     return null
   }
@@ -191,17 +251,28 @@ export const TranscriptSequence = observer(function TranscriptSequence({
   if (!refSeq) {
     return null
   }
-  if (feature.type !== 'mRNA') {
-    return null
+  if (!featureTypeOntology) {
+    throw new Error('featureTypeOntology is undefined')
   }
-
-  const handleSeqButtonClick = () => {
-    setShowSequence(!showSequence)
+  if (!featureTypeOntology.isTypeOf(feature.type, 'transcript')) {
+    return null
   }
 
   function handleChangeSeqOption(e: SelectChangeEvent) {
     const option = e.target.value
     setSelectedOption(option as SegmentListType)
+
+    const seqSegments = refData
+      ? getSequenceSegments(
+          option as SegmentListType,
+          feature,
+          (min: number, max: number) => refData.getSequence(min, max),
+        )
+      : []
+    const locIntervals: { min: number; max: number }[] =
+      getLocationIntervals(seqSegments)
+    setSequenceSegments(seqSegments)
+    setLocationIntervals(locIntervals)
   }
 
   // Function to copy text to clipboard
@@ -219,94 +290,68 @@ export const TranscriptSequence = observer(function TranscriptSequence({
     void navigator.clipboard.write([clipboardItem])
   }
 
-  const sequenceSegments = showSequence
-    ? getSequenceSegments(selectedOption, feature, (min: number, max: number) =>
-        refData.getSequence(min, max),
-      )
-    : []
-  const locationIntervals: { min: number; max: number }[] = []
-  if (showSequence) {
-    const allLocs = sequenceSegments.flatMap((segment) => segment.locs)
-    let [previous] = allLocs
-    for (let i = 1; i < allLocs.length; i++) {
-      if (previous.min === allLocs[i].max || previous.max === allLocs[i].min) {
-        previous = {
-          min: Math.min(previous.min, allLocs[i].min),
-          max: Math.max(previous.max, allLocs[i].max),
-        }
-      } else {
-        locationIntervals.push(previous)
-        previous = allLocs[i]
-      }
-    }
-    locationIntervals.push(previous)
-  }
-
   return (
     <>
-      <Typography variant="h5">Sequence</Typography>
-      <div>
-        <Button variant="contained" onClick={handleSeqButtonClick}>
-          {showSequence ? 'Hide sequence' : 'Show sequence'}
-        </Button>
-      </div>
-      {showSequence && (
-        <>
-          <Select
-            defaultValue="CDS"
-            value={selectedOption}
-            onChange={handleChangeSeqOption}
-          >
-            <MenuItem value="CDS">CDS</MenuItem>
-            <MenuItem value="cDNA">cDNA</MenuItem>
-            <MenuItem value="genomic">Genomic</MenuItem>
-            <MenuItem value="protein">Protein</MenuItem>
-          </Select>
-          <Paper
+      <Select
+        defaultValue="genomic"
+        value={selectedOption}
+        onChange={handleChangeSeqOption}
+        size="small"
+      >
+        {sequenceOptions.map((option) => (
+          <MenuItem key={option} value={option}>
+            {option}
+          </MenuItem>
+        ))}
+      </Select>
+      <Button
+        variant="contained"
+        onClick={copyToClipboard}
+        style={{ marginLeft: 10 }}
+        size="medium"
+      >
+        Copy sequence
+      </Button>
+      <Paper
+        style={{
+          fontFamily: 'monospace',
+          padding: theme.spacing(),
+          overflowX: 'auto',
+        }}
+        ref={seqRef}
+      >
+        &gt;{refSeq.name}:
+        {locationIntervals
+          .map((interval) =>
+            feature.strand === 1
+              ? `${interval.min + 1}-${interval.max}`
+              : `${interval.max}-${interval.min + 1}`,
+          )
+          .join(';')}
+        ({feature.strand === 1 ? '+' : '-'})
+        <br />
+        {sequenceSegments.map((segment, index) => (
+          <span
+            key={`${segment.type}-${index}`}
             style={{
-              fontFamily: 'monospace',
-              padding: theme.spacing(),
-              overflowX: 'auto',
+              background: getSegmentColor(segment.type),
+              color: theme.palette.getContrastText(
+                getSegmentColor(segment.type),
+              ),
             }}
-            ref={seqRef}
           >
-            &gt;{refSeq.name}:
-            {locationIntervals
-              .map((interval) =>
-                feature.strand === 1
-                  ? `${interval.min + 1}-${interval.max}`
-                  : `${interval.max}-${interval.min + 1}`,
-              )
-              .join(';')}
-            ({feature.strand === 1 ? '+' : '-'})
-            <br />
-            {sequenceSegments.map((segment, index) => (
-              <span
-                key={`${segment.type}-${index}`}
-                style={{
-                  background: getSegmentColor(segment.type),
-                  color: theme.palette.getContrastText(
-                    getSegmentColor(segment.type),
-                  ),
-                }}
-              >
-                {segment.sequenceLines.map((sequenceLine, idx) => (
-                  <React.Fragment key={`${sequenceLine.slice(0, 5)}-${idx}`}>
-                    {sequenceLine}
-                    {idx === segment.sequenceLines.length - 1 &&
-                    sequenceLine.length !== SEQUENCE_WRAP_LENGTH ? null : (
-                      <br />
-                    )}
-                  </React.Fragment>
-                ))}
-              </span>
+            {segment.sequenceLines.map((sequenceLine, idx) => (
+              <React.Fragment key={`${sequenceLine.slice(0, 5)}-${idx}`}>
+                {sequenceLine}
+                {idx === segment.sequenceLines.length - 1 &&
+                sequenceLine.length !== SEQUENCE_WRAP_LENGTH ? null : (
+                  <br />
+                )}
+              </React.Fragment>
             ))}
-          </Paper>
-          <Button variant="contained" onClick={copyToClipboard}>
-            Copy sequence
-          </Button>
-        </>
-      )}
+          </span>
+        ))}
+      </Paper>
     </>
   )
 })