@apollo-annotation/jbrowse-plugin-apollo 0.1.0

package/src/components/ModifyFeatureAttribute.tsx

@@ -0,0 +1,457 @@
+import { AbstractSessionModel } from '@jbrowse/core/util'
+import DeleteIcon from '@mui/icons-material/Delete'
+import {
+  Button,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  FormControl,
+  FormControlLabel,
+  FormLabel,
+  Grid,
+  IconButton,
+  Paper,
+  Radio,
+  RadioGroup,
+  TextField,
+  Typography,
+} from '@mui/material'
+import { AnnotationFeatureI } from 'apollo-mst'
+import { FeatureAttributeChange } from 'apollo-shared'
+import { getRoot, getSnapshot } from 'mobx-state-tree'
+import React, { useMemo, useState } from 'react'
+import { makeStyles } from 'tss-react/mui'
+
+import { ApolloInternetAccountModel } from '../ApolloInternetAccount/model'
+import { ChangeManager } from '../ChangeManager'
+import { ApolloSessionModel } from '../session'
+import { ApolloRootModel } from '../types'
+import { Dialog } from './Dialog'
+import { OntologyTermMultiSelect } from './OntologyTermMultiSelect'
+
+interface ModifyFeatureAttributeProps {
+  session: ApolloSessionModel
+  handleClose(): void
+  sourceFeature: AnnotationFeatureI
+  sourceAssemblyId: string
+  changeManager: ChangeManager
+}
+
+const reservedKeys = new Map([
+  [
+    'Gene Ontology',
+    (props: AttributeValueEditorProps) => {
+      return <OntologyTermMultiSelect {...props} ontologyName="Gene Ontology" />
+    },
+  ],
+  [
+    'Sequence Ontology',
+    (props: AttributeValueEditorProps) => {
+      return (
+        <OntologyTermMultiSelect {...props} ontologyName="Sequence Ontology" />
+      )
+    },
+  ],
+])
+
+const useStyles = makeStyles()((theme) => ({
+  attributeInput: {
+    maxWidth: 600,
+  },
+  newAttributePaper: {
+    padding: theme.spacing(2),
+  },
+  attributeName: {
+    background: theme.palette.secondary.main,
+    color: theme.palette.secondary.contrastText,
+    padding: theme.spacing(1),
+  },
+}))
+
+export interface AttributeValueEditorProps {
+  session: ApolloSessionModel
+  value: string[]
+  onChange(newValue: string[]): void
+}
+
+const reservedTerms = [
+  'ID',
+  'Name',
+  'Alias',
+  'Target',
+  'Gap',
+  'Derives_from',
+  'Note',
+  'Dbxref',
+  'Ontology',
+  'Is_Circular',
+]
+
+function CustomAttributeValueEditor(props: AttributeValueEditorProps) {
+  const { onChange, value } = props
+  return (
+    <TextField
+      type="text"
+      value={value}
+      onChange={(event) => {
+        onChange(event.target.value.split(','))
+      }}
+      variant="outlined"
+      fullWidth
+      helperText="Separate multiple values for the attribute with commas"
+    />
+  )
+}
+
+export interface GOTerm {
+  id: string
+  label: string
+}
+
+export function ModifyFeatureAttribute({
+  changeManager,
+  handleClose,
+  session,
+  sourceAssemblyId,
+  sourceFeature,
+}: ModifyFeatureAttributeProps) {
+  const { notify } = session as unknown as AbstractSessionModel
+
+  const { internetAccounts } = getRoot<ApolloRootModel>(session)
+  const internetAccount = useMemo(() => {
+    return internetAccounts.find(
+      (ia) => ia.type === 'ApolloInternetAccount',
+    ) as ApolloInternetAccountModel | undefined
+  }, [internetAccounts])
+  const role = internetAccount ? internetAccount.role : 'admin'
+  const editable = ['admin', 'user'].includes(role ?? '')
+
+  const [errorMessage, setErrorMessage] = useState('')
+  const [attributes, setAttributes] = useState<Record<string, string[]>>(
+    Object.fromEntries(
+      [...sourceFeature.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 [showAddNewForm, setShowAddNewForm] = useState(false)
+  const [newAttributeKey, setNewAttributeKey] = useState('')
+  const { classes } = useStyles()
+  async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    setErrorMessage('')
+
+    const attrs: Record<string, string[]> = {}
+    if (attributes) {
+      for (const [key, val] of Object.entries(attributes)) {
+        if (!val) {
+          continue
+        }
+        const newKey = key.toLowerCase()
+        if (newKey === 'parent') {
+          continue
+        }
+        if ([...reservedKeys.keys()].includes(key)) {
+          attrs[key] = val
+          continue
+        }
+        switch (key) {
+          case 'ID': {
+            attrs._id = val
+            break
+          }
+          case 'Name': {
+            attrs.gff_name = val
+            break
+          }
+          case 'Alias': {
+            attrs.gff_alias = val
+            break
+          }
+          case 'Target': {
+            attrs.gff_target = val
+            break
+          }
+          case 'Gap': {
+            attrs.gff_gap = val
+            break
+          }
+          case 'Derives_from': {
+            attrs.gff_derives_from = val
+            break
+          }
+          case 'Note': {
+            attrs.gff_note = val
+            break
+          }
+          case 'Dbxref': {
+            attrs.gff_dbxref = val
+            break
+          }
+          case 'Ontology_term': {
+            attrs.gff_ontology_term = val
+            break
+          }
+          case 'Is_circular': {
+            attrs.gff_is_circular = val
+            break
+          }
+          default: {
+            attrs[key.toLowerCase()] = val
+          }
+        }
+      }
+    }
+
+    const change = new FeatureAttributeChange({
+      changedIds: [sourceFeature._id],
+      typeName: 'FeatureAttributeChange',
+      assembly: sourceAssemblyId,
+      featureId: sourceFeature._id,
+      attributes: attrs,
+    })
+    await changeManager.submit?.(change)
+    notify('Feature attributes modified successfully', 'success')
+    handleClose()
+    event.preventDefault()
+  }
+
+  function handleAddNewAttributeChange() {
+    setErrorMessage('')
+    if (newAttributeKey.trim().length === 0) {
+      setErrorMessage('Attribute key is mandatory')
+      return
+    }
+    if (newAttributeKey === 'Parent') {
+      setErrorMessage(
+        '"Parent" -key is handled internally and it cannot be modified manually',
+      )
+      return
+    }
+    if (newAttributeKey in attributes) {
+      setErrorMessage(`Attribute "${newAttributeKey}" already exists`)
+      return
+    }
+    if (
+      /^[A-Z]/.test(newAttributeKey) &&
+      !reservedTerms.includes(newAttributeKey) &&
+      ![...reservedKeys.keys()].includes(newAttributeKey)
+    ) {
+      setErrorMessage(
+        `Key cannot starts with uppercase letter unless key is one of these: ${reservedTerms.join(
+          ', ',
+        )}`,
+      )
+      return
+    }
+    setAttributes({ ...attributes, [newAttributeKey]: [] })
+    setShowAddNewForm(false)
+    setNewAttributeKey('')
+  }
+
+  function deleteAttribute(key: string) {
+    setErrorMessage('')
+    const { [key]: remove, ...rest } = attributes
+    setAttributes(rest)
+  }
+
+  function makeOnChange(id: string) {
+    return (newValue: string[]) => {
+      setAttributes({ ...attributes, [id]: newValue })
+    }
+  }
+
+  function handleRadioButtonChange(
+    event: React.ChangeEvent<HTMLInputElement>,
+    value: string,
+  ) {
+    if (value === 'custom') {
+      setNewAttributeKey('')
+    } else if (reservedKeys.has(value)) {
+      setNewAttributeKey(value)
+    } else {
+      setErrorMessage('Unknown attribute type')
+    }
+  }
+
+  const hasEmptyAttributes = Object.values(attributes).some(
+    (value) => value.length === 0 || value.includes(''),
+  )
+
+  return (
+    <Dialog
+      open
+      title="Feature attributes"
+      handleClose={handleClose}
+      maxWidth={false}
+      data-testid="modify-feature-attribute"
+    >
+      <form onSubmit={onSubmit}>
+        <DialogContent>
+          <Grid container direction="column" spacing={1}>
+            {Object.entries(attributes).map(([key, value]) => {
+              const EditorComponent =
+                reservedKeys.get(key) ?? CustomAttributeValueEditor
+              return (
+                <Grid container item spacing={3} alignItems="center" key={key}>
+                  <Grid item xs="auto">
+                    <Paper variant="outlined" className={classes.attributeName}>
+                      <Typography>{key}</Typography>
+                    </Paper>
+                  </Grid>
+                  <Grid item flexGrow={1}>
+                    <EditorComponent
+                      session={session}
+                      value={value}
+                      onChange={makeOnChange(key)}
+                    />
+                  </Grid>
+                  <Grid item xs={1}>
+                    <IconButton
+                      aria-label="delete"
+                      size="medium"
+                      disabled={!editable}
+                      onClick={() => {
+                        deleteAttribute(key)
+                      }}
+                    >
+                      <DeleteIcon fontSize="medium" key={key} />
+                    </IconButton>
+                  </Grid>
+                </Grid>
+              )
+            })}
+            <Grid item>
+              <Button
+                color="primary"
+                variant="contained"
+                disabled={showAddNewForm || !editable}
+                onClick={() => {
+                  setShowAddNewForm(true)
+                }}
+              >
+                Add new
+              </Button>
+            </Grid>
+            {showAddNewForm ? (
+              <Grid item>
+                <Paper elevation={8} className={classes.newAttributePaper}>
+                  <Grid container direction="column">
+                    <Grid item>
+                      <FormControl>
+                        <FormLabel id="attribute-radio-button-group">
+                          Select attribute type
+                        </FormLabel>
+                        <RadioGroup
+                          aria-labelledby="demo-radio-buttons-group-label"
+                          defaultValue="custom"
+                          name="radio-buttons-group"
+                          onChange={handleRadioButtonChange}
+                        >
+                          <FormControlLabel
+                            value="custom"
+                            control={<Radio />}
+                            disableTypography
+                            label={
+                              <Grid container spacing={1} alignItems="center">
+                                <Grid item>
+                                  <Typography>Custom</Typography>
+                                </Grid>
+                                <Grid item>
+                                  <TextField
+                                    label="Custom attribute key"
+                                    variant="outlined"
+                                    value={
+                                      reservedKeys.has(newAttributeKey)
+                                        ? ''
+                                        : newAttributeKey
+                                    }
+                                    disabled={reservedKeys.has(newAttributeKey)}
+                                    onChange={(event) => {
+                                      setNewAttributeKey(event.target.value)
+                                    }}
+                                  />
+                                </Grid>
+                              </Grid>
+                            }
+                          />
+                          {[...reservedKeys.keys()].map((key) => (
+                            <FormControlLabel
+                              key={key}
+                              value={key}
+                              control={<Radio />}
+                              label={key}
+                            />
+                          ))}
+                        </RadioGroup>
+                      </FormControl>
+                    </Grid>
+                    <Grid item>
+                      <DialogActions>
+                        <Button
+                          key="addButton"
+                          color="primary"
+                          variant="contained"
+                          style={{ margin: 2 }}
+                          onClick={handleAddNewAttributeChange}
+                          disabled={!newAttributeKey}
+                        >
+                          Add
+                        </Button>
+                        <Button
+                          key="cancelAddButton"
+                          variant="outlined"
+                          type="submit"
+                          onClick={() => {
+                            setShowAddNewForm(false)
+                            setNewAttributeKey('')
+                            setErrorMessage('')
+                          }}
+                        >
+                          Cancel
+                        </Button>
+                      </DialogActions>
+                    </Grid>
+                  </Grid>
+                </Paper>
+              </Grid>
+            ) : null}
+          </Grid>
+          {errorMessage ? (
+            <DialogContentText color="error">{errorMessage}</DialogContentText>
+          ) : null}
+        </DialogContent>
+        <DialogActions>
+          <Button
+            variant="contained"
+            type="submit"
+            disabled={showAddNewForm || hasEmptyAttributes || !editable}
+          >
+            Submit changes
+          </Button>
+          <Button
+            variant="outlined"
+            type="submit"
+            disabled={showAddNewForm}
+            onClick={handleClose}
+          >
+            Cancel
+          </Button>
+        </DialogActions>
+      </form>
+
+      {/* <DialogContentText>
+          Separate multiple values for an attribute with a comma
+        </DialogContentText> */}
+    </Dialog>
+  )
+}

package/src/components/OntologyTermAutocomplete.tsx

@@ -0,0 +1,240 @@
+import { AbstractSessionModel, isAbortException } from '@jbrowse/core/util'
+import {
+  Autocomplete,
+  AutocompleteRenderInputParams,
+  TextField,
+} from '@mui/material'
+import React, { useCallback, useEffect, useState } from 'react'
+
+import type { OntologyManager } from '../OntologyManager'
+import { OntologyTerm, isDeprecated } from '../OntologyManager'
+import OntologyStore from '../OntologyManager/OntologyStore'
+import { ApolloSessionModel } from '../session'
+
+interface OntologyTermAutocompleteProps {
+  session: ApolloSessionModel
+  ontologyName: string
+  ontologyVersion?: string
+  value: string
+  error?: boolean
+  filterTerms?: (term: OntologyTerm) => boolean
+  fetchValidTerms?: (
+    ontologyStore: OntologyStore,
+    signal: AbortSignal,
+  ) => Promise<OntologyTerm[] | undefined>
+  style?: React.CSSProperties
+  renderInput?: (
+    params: AutocompleteRenderInputParams & {
+      error?: boolean
+      errorMessage?: string
+    },
+  ) => React.ReactNode
+  onChange: (oldValue: string, newValue: string | null | undefined) => void
+  /** if true, include deprecated/obsolete terms */
+  includeDeprecated?: boolean
+}
+
+export function OntologyTermAutocomplete({
+  fetchValidTerms,
+  filterTerms: filterTermsProp,
+  includeDeprecated,
+  onChange,
+  ontologyName,
+  ontologyVersion,
+  renderInput,
+  session,
+  style,
+  value: valueString,
+}: OntologyTermAutocompleteProps) {
+  const [open, setOpen] = useState(false)
+  const [termChoices, setTermChoices] = useState<OntologyTerm[] | undefined>()
+  const [currentOntologyTermInvalid, setCurrentOntologyTermInvalid] =
+    useState('')
+  const [currentOntologyTerm, setCurrentOntologyTerm] = useState<
+    OntologyTerm | undefined
+  >()
+
+  const ontologyManager = session.apolloDataStore
+    .ontologyManager as OntologyManager
+  const ontologyStore = ontologyManager.findOntology(
+    ontologyName,
+    ontologyVersion,
+  )?.dataStore
+
+  const needToLoadTermChoices = ontologyStore && open && !termChoices
+  const needToLoadCurrentTerm = ontologyStore && !currentOntologyTerm
+
+  const filterTerms = useCallback(
+    (term: OntologyTerm) =>
+      // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+      (includeDeprecated || !isDeprecated(term)) &&
+      (!filterTermsProp || filterTermsProp(term)),
+    [filterTermsProp, includeDeprecated],
+  )
+
+  // effect for clearing choices when not open
+  useEffect(() => {
+    if (!open) {
+      // eslint-disable-next-line unicorn/no-useless-undefined
+      setTermChoices(undefined)
+    }
+  }, [open])
+
+  // effect for matching the current value with an ontology term
+  useEffect(() => {
+    const controller = new AbortController()
+    const { signal } = controller
+    if (needToLoadCurrentTerm) {
+      setCurrentOntologyTermInvalid('')
+      getCurrentTerm(ontologyStore, valueString, filterTerms, signal).then(
+        (term) => {
+          if (!signal.aborted) {
+            setCurrentOntologyTerm(term)
+          }
+        },
+        (error) => {
+          if (!signal.aborted && !isAbortException(error)) {
+            setCurrentOntologyTermInvalid(String(error))
+          }
+        },
+      )
+    }
+    return () => {
+      controller.abort()
+    }
+  }, [session, valueString, filterTerms, ontologyStore, needToLoadCurrentTerm])
+
+  // effect for loading term autocompletions
+  useEffect(() => {
+    const controller = new AbortController()
+    const { signal } = controller
+    if (needToLoadTermChoices) {
+      getValidTerms(ontologyStore, fetchValidTerms, filterTerms, signal).then(
+        (soTerms) => {
+          if (soTerms && !signal.aborted) {
+            setTermChoices(soTerms)
+          }
+        },
+        (error) => {
+          if (!signal.aborted && !isAbortException(error)) {
+            ;(session as unknown as AbstractSessionModel).notify(
+              error.message,
+              'error',
+            )
+          }
+        },
+      )
+    }
+    return () => {
+      controller.abort()
+    }
+  }, [
+    needToLoadTermChoices,
+    filterTerms,
+    ontologyStore,
+    session,
+    fetchValidTerms,
+  ])
+
+  const handleChange = async (
+    event: React.SyntheticEvent<Element, Event>,
+    newValue?: OntologyTerm | string | null,
+  ) => {
+    if (!newValue) {
+      return
+    }
+    if (typeof newValue === 'string') {
+      // eslint-disable-next-line unicorn/no-useless-undefined
+      setCurrentOntologyTerm(undefined)
+      onChange(valueString, newValue)
+    } else if (newValue.lbl !== valueString) {
+      setCurrentOntologyTermInvalid('')
+      setCurrentOntologyTerm(newValue)
+      onChange(valueString, newValue.lbl)
+    }
+  }
+
+  const extraTextFieldParams: { error?: boolean; helperText?: string } = {}
+  if (currentOntologyTermInvalid) {
+    extraTextFieldParams.error = true
+    extraTextFieldParams.helperText = currentOntologyTermInvalid
+  }
+
+  return (
+    <Autocomplete
+      style={style}
+      autoComplete
+      filterSelectedOptions
+      disableClearable
+      selectOnFocus
+      clearOnBlur
+      handleHomeEndKeys
+      freeSolo={true}
+      value={valueString}
+      options={termChoices ?? []}
+      onOpen={() => {
+        setOpen(true)
+      }}
+      onClose={() => {
+        setOpen(false)
+      }}
+      // noOptionsText={valueString ? 'No matches' : 'Start typing to search'}
+      loading={needToLoadTermChoices}
+      renderInput={
+        renderInput ??
+        ((params) => <TextField {...params} {...extraTextFieldParams} />)
+      }
+      getOptionLabel={(option) => {
+        if (typeof option === 'string') {
+          return option
+        }
+        return option.lbl ?? ''
+      }}
+      isOptionEqualToValue={(option, val) => option.lbl === val.lbl}
+      onChange={handleChange}
+    />
+  )
+}
+
+async function getCurrentTerm(
+  ontologyStore: OntologyStore,
+  currentTermLabel: string,
+  filterTerms: OntologyTermAutocompleteProps['filterTerms'],
+  _signal: AbortSignal,
+) {
+  if (!currentTermLabel) {
+    return
+  }
+
+  // TODO: support prefixed IDs as ontology terms here (e.g. SO:001234)
+  const terms = await ontologyStore.getTermsWithLabelOrSynonym(
+    currentTermLabel,
+    { includeSubclasses: false },
+  )
+  const term = terms.find(filterTerms ?? (() => true))
+  if (!term) {
+    throw new Error(`not a valid ${ontologyStore.ontologyName} term`)
+  }
+
+  return term
+}
+
+async function getValidTerms(
+  ontologyStore: OntologyStore,
+  fetchValidTerms: OntologyTermAutocompleteProps['fetchValidTerms'],
+  filterTerms: OntologyTermAutocompleteProps['filterTerms'],
+  signal: AbortSignal,
+) {
+  let result: OntologyTerm[] | undefined
+  if (fetchValidTerms) {
+    const customTermList = await fetchValidTerms(ontologyStore, signal)
+    if (customTermList) {
+      result = customTermList
+    }
+  }
+
+  if (!result) {
+    result = await ontologyStore.getAllTerms()
+  }
+  return filterTerms ? result.filter((element) => filterTerms(element)) : result
+}