@apollo-annotation/jbrowse-plugin-apollo 0.1.0 → 0.1.1

package/src/FeatureDetailsWidget/BasicInformation.tsx

@@ -0,0 +1,178 @@
+import { AnnotationFeatureI } from '@apollo-annotation/apollo-mst'
+import {
+  LocationEndChange,
+  LocationStartChange,
+  StrandChange,
+  TypeChange,
+} from '@apollo-annotation/apollo-shared'
+import { AbstractSessionModel } from '@jbrowse/core/util'
+import {
+  FormControl,
+  FormControlLabel,
+  FormLabel,
+  Radio,
+  RadioGroup,
+  TextField,
+  Typography,
+} from '@mui/material'
+import { observer } from 'mobx-react'
+import React, { useState } from 'react'
+
+import { OntologyTermAutocomplete } from '../components/OntologyTermAutocomplete'
+import { isOntologyClass } from '../OntologyManager'
+import OntologyStore from '../OntologyManager/OntologyStore'
+import { fetchValidDescendantTerms } from '../OntologyManager/util'
+import { ApolloSessionModel } from '../session'
+import { NumberTextField } from './NumberTextField'
+
+export const BasicInformation = observer(function BasicInformation({
+  assembly,
+  feature,
+  session,
+}: {
+  feature: AnnotationFeatureI
+  session: ApolloSessionModel
+  assembly: string
+}) {
+  const [errorMessage, setErrorMessage] = useState('')
+  const [typeWarningText, setTypeWarningText] = useState('')
+
+  const { _id, assemblyId, end, start, strand, type } = feature
+
+  const notifyError = (e: Error) =>
+    (session as unknown as AbstractSessionModel).notify(e.message, 'error')
+
+  const { changeManager } = session.apolloDataStore
+  function handleTypeChange(newType: string) {
+    setErrorMessage('')
+    const featureId = _id
+    const change = new TypeChange({
+      typeName: 'TypeChange',
+      changedIds: [featureId],
+      featureId,
+      oldType: type,
+      newType,
+      assembly: assemblyId,
+    })
+    return changeManager.submit(change)
+  }
+
+  function handleStrandChange(event: React.ChangeEvent<HTMLInputElement>) {
+    const { value } = event.target
+    const newStrand = value ? (Number(value) as 1 | -1) : undefined
+    const change = new StrandChange({
+      typeName: 'StrandChange',
+      changedIds: [_id],
+      featureId: _id,
+      oldStrand: strand,
+      newStrand,
+      assembly,
+    })
+    return changeManager.submit(change)
+  }
+
+  function handleStartChange(newStart: number) {
+    newStart--
+    const change = new LocationStartChange({
+      typeName: 'LocationStartChange',
+      changedIds: [_id],
+      featureId: _id,
+      oldStart: start,
+      newStart,
+      assembly,
+    })
+    return changeManager.submit(change)
+  }
+
+  function handleEndChange(newEnd: number) {
+    const change = new LocationEndChange({
+      typeName: 'LocationEndChange',
+      changedIds: [_id],
+      featureId: _id,
+      oldEnd: end,
+      newEnd,
+      assembly,
+    })
+    return changeManager.submit(change)
+  }
+
+  async function fetchValidTerms(
+    parentFeature: AnnotationFeatureI | undefined,
+    ontologyStore: OntologyStore,
+    _signal: AbortSignal,
+  ) {
+    const terms = await fetchValidDescendantTerms(
+      parentFeature,
+      ontologyStore,
+      _signal,
+    )
+    if (!terms) {
+      setTypeWarningText(
+        `Type "${parentFeature?.type}" does not have any children in the ontology`,
+      )
+      return
+    }
+    return terms
+  }
+
+  return (
+    <>
+      <Typography variant="h4">Basic information</Typography>
+      <NumberTextField
+        margin="dense"
+        id="start"
+        label="Start"
+        fullWidth
+        variant="outlined"
+        value={start + 1}
+        onChangeCommitted={handleStartChange}
+      />
+      <NumberTextField
+        margin="dense"
+        id="end"
+        label="End"
+        fullWidth
+        variant="outlined"
+        value={end}
+        onChangeCommitted={handleEndChange}
+      />
+      <OntologyTermAutocomplete
+        session={session}
+        ontologyName="Sequence Ontology"
+        value={type}
+        filterTerms={isOntologyClass}
+        fetchValidTerms={fetchValidTerms.bind(null, feature)}
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            label="Type"
+            variant="outlined"
+            fullWidth
+            error={Boolean(typeWarningText)}
+            helperText={typeWarningText}
+          />
+        )}
+        onChange={(oldValue, newValue) => {
+          if (newValue) {
+            handleTypeChange(newValue).catch(notifyError)
+          }
+        }}
+      />
+      <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>
+      {errorMessage ? (
+        <Typography color="error">{errorMessage}</Typography>
+      ) : null}
+    </>
+  )
+})

package/src/FeatureDetailsWidget/NumberTextField.tsx

@@ -0,0 +1,75 @@
+import { TextField, TextFieldProps } from '@mui/material'
+import { observer } from 'mobx-react'
+import React, { useEffect, useState } from 'react'
+
+interface NumberTextFieldProps
+  extends Omit<
+    TextFieldProps,
+    | 'type'
+    | 'onChange'
+    | 'onKeyDown'
+    | 'onBlur'
+    | 'ref'
+    | 'error'
+    | 'helperText'
+  > {
+  onChangeCommitted(newValue: number): void
+  value: unknown
+}
+
+export const NumberTextField = observer(function NumberTextField({
+  onChangeCommitted,
+  value: initialValue,
+  ...props
+}: NumberTextFieldProps) {
+  const [value, setValue] = useState(String(initialValue))
+  const [blur, setBlur] = useState(false)
+  const [inputNode, setInputNode] = useState<HTMLDivElement | null>(null)
+
+  useEffect(() => {
+    setValue(String(initialValue))
+  }, [initialValue])
+
+  useEffect(() => {
+    if (blur) {
+      inputNode?.blur()
+      setBlur(false)
+    }
+  }, [blur, inputNode])
+
+  function onChange(event: React.ChangeEvent<HTMLInputElement>) {
+    setValue(event.target.value)
+  }
+
+  const error = Number.isNaN(Number(value))
+
+  return (
+    <TextField
+      {...props}
+      type="text"
+      onChange={onChange}
+      value={value}
+      onKeyDown={(event) => {
+        if (event.key === 'Enter') {
+          inputNode?.blur()
+        } else if (event.key === 'Escape') {
+          setValue(String(initialValue))
+          setBlur(true)
+        }
+      }}
+      onBlur={() => {
+        const valueAsNumber = Number(value)
+        if (value !== String(initialValue)) {
+          if (Number.isNaN(valueAsNumber)) {
+            setValue(String(initialValue))
+          } else {
+            onChangeCommitted(valueAsNumber)
+          }
+        }
+      }}
+      inputRef={(node) => setInputNode(node)}
+      error={error}
+      helperText={error ? 'Not a valid number' : undefined}
+    />
+  )
+})

package/src/FeatureDetailsWidget/RelatedFeature.tsx

@@ -0,0 +1,87 @@
+import {
+  AnnotationFeature,
+  AnnotationFeatureI,
+} from '@apollo-annotation/apollo-mst'
+import { SessionWithWidgets } from '@jbrowse/core/util'
+import { Button, Paper, Typography } from '@mui/material'
+import { observer } from 'mobx-react'
+import { IMSTMap } from 'mobx-state-tree'
+import React from 'react'
+import { makeStyles } from 'tss-react/mui'
+
+import { ApolloSessionModel } from '../session'
+
+const useStyles = makeStyles()((theme) => ({
+  paper: {
+    margin: theme.spacing(2),
+    padding: theme.spacing(2),
+    display: 'flex',
+    flexDirection: 'column',
+  },
+}))
+
+export const RelatedFeatures = observer(function RelatedFeatures({
+  assembly,
+  feature,
+  refName,
+  session,
+}: {
+  feature: AnnotationFeatureI
+  refName: string
+  session: ApolloSessionModel
+  assembly: string
+}) {
+  const { classes } = useStyles()
+  const { parent } = feature
+  const { children } = feature as {
+    children?: IMSTMap<typeof AnnotationFeature>
+  }
+
+  const onButtonClick = (newFeature: AnnotationFeatureI) => {
+    if (parent) {
+      const apolloFeatureWidget = (
+        session as unknown as SessionWithWidgets
+      ).addWidget('ApolloFeatureDetailsWidget', 'apolloFeatureDetailsWidget', {
+        feature: newFeature,
+        assembly,
+        refName,
+      })
+      ;(session as unknown as SessionWithWidgets).showWidget?.(
+        apolloFeatureWidget,
+      )
+    }
+  }
+
+  if (!(parent || (children && children.size > 0))) {
+    return null
+  }
+  return (
+    <>
+      <Typography variant="h4">Related features</Typography>
+      {parent && (
+        <>
+          <Typography variant="h5">Parent</Typography>
+          <Paper elevation={6} className={classes.paper}>
+            {`Start: ${parent.start}, End: ${parent.end}, Type: ${parent.type}`}
+            <Button variant="contained" onClick={() => onButtonClick(parent)}>
+              Go to parent
+            </Button>
+          </Paper>
+        </>
+      )}
+      {children && children.size > 0 && (
+        <>
+          <Typography variant="h5">Children</Typography>
+          {[...children.values()].map((child) => (
+            <Paper elevation={6} className={classes.paper} key={child._id}>
+              {`Start: ${child.start}, End: ${child.end}, Type: ${child.type}`}
+              <Button variant="contained" onClick={() => onButtonClick(child)}>
+                Go to child
+              </Button>
+            </Paper>
+          ))}
+        </>
+      )}
+    </>
+  )
+})

package/src/FeatureDetailsWidget/Sequence.tsx

@@ -0,0 +1,88 @@
+import { AnnotationFeatureI } from '@apollo-annotation/apollo-mst'
+import { splitStringIntoChunks } from '@apollo-annotation/apollo-shared'
+import { Button, Typography } from '@mui/material'
+import { observer } from 'mobx-react'
+import React, { useState } from 'react'
+import { makeStyles } from 'tss-react/mui'
+
+import { ApolloSessionModel } from '../session'
+
+function formatSequence(
+  seq: string,
+  refName: string,
+  start: number,
+  end: number,
+  wrap?: number,
+) {
+  const header = `>${refName}:${start + 1}–${end}\n`
+  const body =
+    wrap === undefined ? seq : splitStringIntoChunks(seq, wrap).join('\n')
+  return `${header}${body}`
+}
+
+const useStyles = makeStyles()({
+  sequence: {
+    width: '100%',
+    resize: 'vertical',
+  },
+})
+
+export const Sequence = observer(function Sequence({
+  assembly,
+  feature,
+  refName,
+  session,
+}: {
+  assembly: string
+  feature: AnnotationFeatureI
+  refName: string
+  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
+  }
+  const refSeq = currentAssembly.getByRefName(refName)
+  if (!refSeq) {
+    return null
+  }
+  const { end, start } = feature
+  let sequence = ''
+  if (showSequence) {
+    sequence = refSeq.getSequence(start, end)
+    if (sequence) {
+      sequence = formatSequence(sequence, refName, start, end)
+    } else {
+      void session.apolloDataStore.loadRefSeq([
+        { assemblyName: assembly, refName, start, end },
+      ])
+    }
+  }
+
+  return (
+    <>
+      <Typography variant="h4">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>
+    </>
+  )
+})
+export default Sequence

package/src/FeatureDetailsWidget/StringTextField.tsx

@@ -0,0 +1,60 @@
+import { TextField, TextFieldProps } from '@mui/material'
+import { observer } from 'mobx-react'
+import React, { useEffect, useState } from 'react'
+
+interface StringTextFieldProps
+  extends Omit<
+    TextFieldProps,
+    'type' | 'onChange' | 'onKeyDown' | 'onBlur' | 'ref'
+  > {
+  onChangeCommitted(newValue: string): void
+  value: unknown
+}
+
+export const StringTextField = observer(function StringTextField({
+  onChangeCommitted,
+  value: initialValue,
+  ...props
+}: StringTextFieldProps) {
+  const [value, setValue] = useState(String(initialValue))
+  const [blur, setBlur] = useState(false)
+  const [inputNode, setInputNode] = useState<HTMLDivElement | null>(null)
+
+  useEffect(() => {
+    setValue(String(initialValue))
+  }, [initialValue])
+
+  useEffect(() => {
+    if (blur) {
+      inputNode?.blur()
+      setBlur(false)
+    }
+  }, [blur, inputNode])
+
+  function onChange(event: React.ChangeEvent<HTMLInputElement>) {
+    setValue(event.target.value)
+  }
+
+  return (
+    <TextField
+      {...props}
+      type="text"
+      onChange={onChange}
+      value={value}
+      onKeyDown={(event) => {
+        if (event.key === 'Enter') {
+          inputNode?.blur()
+        } else if (event.key === 'Escape') {
+          setValue(String(initialValue))
+          setBlur(true)
+        }
+      }}
+      onBlur={() => {
+        if (value !== String(initialValue)) {
+          onChangeCommitted(value)
+        }
+      }}
+      inputRef={(node) => setInputNode(node)}
+    />
+  )
+})

package/src/FeatureDetailsWidget/index.ts

@@ -0,0 +1,2 @@
+export { ApolloFeatureDetailsWidget } from './ApolloFeatureDetailsWidget'
+export { ApolloFeatureDetailsWidgetModel } from './model'

package/src/FeatureDetailsWidget/model.ts

@@ -0,0 +1,67 @@
+import {
+  AnnotationFeature,
+  AnnotationFeatureI,
+} from '@apollo-annotation/apollo-mst'
+import { getSession } from '@jbrowse/core/util'
+import { ElementId } from '@jbrowse/core/util/types/mst'
+import { autorun } from 'mobx'
+import { Instance, SnapshotIn, addDisposer, types } from 'mobx-state-tree'
+
+import { ApolloSessionModel } from '../session'
+
+export const ApolloFeatureDetailsWidgetModel = types
+  .model('ApolloFeatureDetailsWidget', {
+    id: ElementId,
+    type: types.literal('ApolloFeatureDetailsWidget'),
+    feature: types.maybe(
+      types.reference(AnnotationFeature, {
+        onInvalidated(ev) {
+          ev.parent.setTryReload(ev.invalidId)
+          ev.removeRef()
+        },
+      }),
+    ),
+    assembly: types.string,
+    refName: types.string,
+  })
+  .volatile(() => ({
+    tryReload: undefined as string | undefined,
+  }))
+  .actions((self) => ({
+    setFeature(feature: AnnotationFeatureI) {
+      self.feature = feature
+    },
+    setTryReload(featureId?: string) {
+      self.tryReload = featureId
+    },
+  }))
+  .actions((self) => ({
+    afterAttach() {
+      addDisposer(
+        self,
+        autorun((reaction) => {
+          if (!self.tryReload) {
+            return
+          }
+          const session = getSession(self) as unknown as ApolloSessionModel
+          const { apolloDataStore } = session
+          if (!apolloDataStore) {
+            return
+          }
+          const feature = apolloDataStore.getFeature(self.tryReload)
+          if (feature) {
+            self.setFeature(feature)
+            self.setTryReload()
+            reaction.dispose()
+          }
+        }),
+      )
+    },
+  }))
+
+export type ApolloFeatureDetailsWidget = Instance<
+  typeof ApolloFeatureDetailsWidgetModel
+>
+export type ApolloFeatureDetailsWidgetSnapshot = SnapshotIn<
+  typeof ApolloFeatureDetailsWidgetModel
+>

package/src/LinearApolloDisplay/glyphs/BoxGlyph.ts

@@ -1,6 +1,9 @@
+import { AnnotationFeatureI } from '@apollo-annotation/apollo-mst'
+import {
+  LocationEndChange,
+  LocationStartChange,
+} from '@apollo-annotation/apollo-shared'
 import { Theme, alpha } from '@mui/material'
-import { AnnotationFeatureI } from 'apollo-mst'
-import { LocationEndChange, LocationStartChange } from 'apollo-shared'
 
 import { LinearApolloDisplay } from '../stateModel'
 import { MousePosition } from '../stateModel/mouseEvents'

package/src/LinearApolloDisplay/glyphs/CanonicalGeneGlyph.ts

@@ -1,17 +1,18 @@
-import { alpha } from '@mui/material'
-import { AnnotationFeatureI } from 'apollo-mst'
+import { AnnotationFeatureI } from '@apollo-annotation/apollo-mst'
 import {
   DiscontinuousLocationEndChange,
   DiscontinuousLocationStartChange,
   LocationEndChange,
   LocationStartChange,
-} from 'apollo-shared'
+} from '@apollo-annotation/apollo-shared'
+import { alpha } from '@mui/material'
 
 import { LinearApolloDisplay } from '../stateModel'
 import {
   CDSDiscontinuousLocation,
   MousePosition,
 } from '../stateModel/mouseEvents'
+import { frameColors, getFrame } from '../stateModel/rendering'
 import { CanvasMouseEvent } from '../types'
 import { Glyph } from './Glyph'
 
@@ -248,10 +249,17 @@ export class CanonicalGeneGlyph extends Glyph {
             ctx.fillRect(startPx, cdsTop, widthPx, cdsHeight)
             if (widthPx > 2) {
               ctx.clearRect(startPx + 1, cdsTop + 1, widthPx - 2, cdsHeight - 2)
+              const frame = getFrame(
+                cdsLocation.start,
+                cdsLocation.end,
+                cdsLocation.strand,
+                cdsLocation.phase,
+              )
+              const cdsColorCode = frameColors.at(frame) ?? 'rgb(171,71,188)'
               ctx.fillStyle =
                 apolloSelectedFeature && cds._id === apolloSelectedFeature._id
                   ? 'rgb(0,0,0)'
-                  : 'rgb(171,71,188)'
+                  : cdsColorCode
               ctx.fillRect(startPx + 1, cdsTop + 1, widthPx - 2, cdsHeight - 2)
               if (forwardFill && backwardFill && strand) {
                 const reversal = reversed ? -1 : 1

package/src/LinearApolloDisplay/glyphs/GenericChildGlyph.ts

@@ -1,4 +1,4 @@
-import { AnnotationFeatureI } from 'apollo-mst'
+import { AnnotationFeatureI } from '@apollo-annotation/apollo-mst'
 
 import { LinearApolloDisplay } from '../stateModel'
 import { MousePosition } from '../stateModel/mouseEvents'

package/src/LinearApolloDisplay/glyphs/Glyph.ts

@@ -1,7 +1,7 @@
+import { AnnotationFeatureI } from '@apollo-annotation/apollo-mst'
 import { MenuItem } from '@jbrowse/core/ui'
-import { AbstractSessionModel } from '@jbrowse/core/util'
+import { AbstractSessionModel, SessionWithWidgets } from '@jbrowse/core/util'
 import { alpha } from '@mui/material'
-import { AnnotationFeatureI } from 'apollo-mst'
 
 import {
   AddChildFeature,
@@ -375,6 +375,25 @@ export abstract class Glyph {
             )
           },
         },
+        {
+          label: 'Edit feature details',
+          onClick: () => {
+            const apolloFeatureWidget = (
+              session as unknown as SessionWithWidgets
+            ).addWidget(
+              'ApolloFeatureDetailsWidget',
+              'apolloFeatureDetailsWidget',
+              {
+                feature: sourceFeature,
+                assembly: currentAssemblyId,
+                refName: region.refName,
+              },
+            )
+            ;(session as unknown as SessionWithWidgets).showWidget?.(
+              apolloFeatureWidget,
+            )
+          },
+        },
       )
     }
     return menuItems

package/src/LinearApolloDisplay/glyphs/ImplicitExonGeneGlyph.ts

@@ -1,9 +1,13 @@
+import { AnnotationFeatureI } from '@apollo-annotation/apollo-mst'
+import {
+  LocationEndChange,
+  LocationStartChange,
+} from '@apollo-annotation/apollo-shared'
 import { alpha } from '@mui/material'
-import { AnnotationFeatureI } from 'apollo-mst'
-import { LocationEndChange, LocationStartChange } from 'apollo-shared'
 
 import { LinearApolloDisplay } from '../stateModel'
 import { MousePosition } from '../stateModel/mouseEvents'
+import { frameColors, getFrame } from '../stateModel/rendering'
 import { CanvasMouseEvent } from '../types'
 import { Glyph } from './Glyph'
 
@@ -126,13 +130,22 @@ export class ImplicitExonGeneGlyph extends Glyph {
           ctx.fillRect(startPx, cdsOrUTRTop, widthPx, height)
           if (widthPx > 2) {
             ctx.clearRect(startPx + 1, cdsOrUTRTop + 1, widthPx - 2, height - 2)
+            let colorCode = 'rgb(211,211,211)'
+            if (isCDS) {
+              const frame = getFrame(
+                cdsOrUTR.start,
+                cdsOrUTR.end,
+                cdsOrUTR.strand,
+                cdsOrUTR.phase,
+              )
+              const color = frameColors.at(frame)
+              colorCode = color ?? 'rgb(171,71,188)'
+            }
             ctx.fillStyle =
               apolloSelectedFeature &&
               cdsOrUTR._id === apolloSelectedFeature._id
                 ? 'rgb(0,0,0)'
-                : isCDS
-                ? 'rgb(171,71,188)'
-                : 'rgb(211,211,211)'
+                : colorCode
             ctx.fillRect(startPx + 1, cdsOrUTRTop + 1, widthPx - 2, height - 2)
             if (forwardFill && backwardFill && strand) {
               const reversal = reversed ? -1 : 1