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

package/src/FeatureDetailsWidget/Attributes.tsx

@@ -1,126 +1,51 @@
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
-import { AnnotationFeature } from '@apollo-annotation/mst'
+import { type AnnotationFeature } from '@apollo-annotation/mst'
 import { FeatureAttributeChange } from '@apollo-annotation/shared'
-import { AbstractSessionModel } from '@jbrowse/core/util'
+import { type AbstractSessionModel, getEnv } from '@jbrowse/core/util'
 import DeleteIcon from '@mui/icons-material/Delete'
+import EditIcon from '@mui/icons-material/Edit'
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz'
 import {
   Button,
-  DialogActions,
-  FormControl,
-  FormControlLabel,
-  FormLabel,
-  Grid2,
   IconButton,
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  Menu,
+  MenuItem,
   Paper,
-  Radio,
-  RadioGroup,
-  TextField,
   Typography,
 } from '@mui/material'
+import { entries } from 'mobx'
 import { observer } from 'mobx-react'
 import { getSnapshot } from 'mobx-state-tree'
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 import { makeStyles } from 'tss-react/mui'
 
-import { OntologyTermMultiSelect } from '../components/OntologyTermMultiSelect'
-import { ApolloSessionModel } from '../session'
-import { StringTextField } from './StringTextField'
+import { type ApolloSessionModel } from '../session'
 
-const reservedKeys = new Map([
-  [
-    'Gene Ontology',
-    (props: {
-      session: ApolloSessionModel
-      value: string[]
-      onChange: (newValue: string[]) => void
-    }) => {
-      return (
-        <OntologyTermMultiSelect
-          {...props}
-          ontologyName="Gene Ontology"
-          label={'Gene Ontology'}
-        />
-      )
-    },
-  ],
-  [
-    'Sequence Ontology',
-    (props: {
-      session: ApolloSessionModel
-      value: string[]
-      onChange: (newValue: string[]) => void
-    }) => {
-      return (
-        <OntologyTermMultiSelect
-          {...props}
-          ontologyName="Sequence Ontology"
-          label={'Sequence Ontology'}
-        />
-      )
-    },
-  ],
-])
-
-const reservedTerms = [
-  'ID',
-  'Name',
-  'Alias',
-  'Target',
-  'Gap',
-  'Derives_from',
-  'Note',
-  'Dbxref',
-  'Ontology',
-  'Is_Circular',
-]
+import { AttributeKey } from './AttributeKey'
+import { AttributeKeySelector } from './AttributeKeySelector'
+import {
+  type AttributeEditorProps,
+  DefaultAttributeEditor,
+} from './DefaultAttributeEditor'
+import {
+  type AttributeViewerProps,
+  DefaultAttributeViewer,
+} from './DefaultAttributeViewer'
 
 const useStyles = makeStyles()((theme) => ({
-  newAttributePaper: {
-    padding: theme.spacing(2),
-  },
-  attributeName: {
-    background: theme.palette.secondary.main,
-    color: theme.palette.secondary.contrastText,
-    padding: theme.spacing(1),
+  list: {
+    'li:nth-of-type(odd)': {
+      backgroundColor: theme.palette.action.focus,
+    },
+    'li:nth-of-type(even)': {
+      backgroundColor: theme.palette.action.hover,
+    },
   },
 }))
 
-function CustomAttributeValueEditor(props: {
-  value: unknown
-  onChange: (newValue: string[]) => void
-  label: string
-}) {
-  const { onChange, value, label } = props
-  return (
-    <StringTextField
-      value={value}
-      onChangeCommitted={(newValue) => {
-        onChange(newValue.split(','))
-      }}
-      variant="outlined"
-      fullWidth
-      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,
@@ -132,299 +57,217 @@ export const Attributes = observer(function Attributes({
   assembly: string
   editable: boolean
 }) {
-  const [errorMessage, setErrorMessage] = useState('')
-  const [showAddNewForm, setShowAddNewForm] = useState(false)
+  const { pluginManager } = getEnv(session)
   const { classes } = useStyles()
-  const [newAttributeKey, setNewAttributeKey] = useState('')
-  const [attributes, setAttributes] = useState(() =>
-    transformAttributes(feature),
-  )
-
-  useEffect(() => {
-    setAttributes(transformAttributes(feature))
-  }, [feature])
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
+  const [selectedKey, setSelectedKey] = useState<null | string>(null)
+  const [editingKey, setEditingKey] = useState<null | string>(null)
+  const [showAddNewForm, setShowAddNewForm] = useState(false)
+  const [newKey, setNewKey] = useState<string | undefined>()
 
-  const { notify } = session as unknown as AbstractSessionModel
+  const open = Boolean(anchorEl)
 
   const { changeManager } = session.apolloDataStore
+  const { notify } = session as unknown as AbstractSessionModel
 
-  async function onChangeCommitted(attributes: Record<string, string[]>) {
-    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
-          }
-        }
-      }
+  function handleListMenuClick(
+    event: React.MouseEvent<HTMLButtonElement>,
+    key: string,
+  ) {
+    setAnchorEl(event.currentTarget)
+    setSelectedKey(key)
+  }
+  function handleClose() {
+    setAnchorEl(null)
+    setSelectedKey(null)
+  }
+  function handleDelete() {
+    if (selectedKey) {
+      deleteFeatureAttribute(selectedKey)
     }
+    handleClose()
+  }
+  function handleEdit() {
+    if (selectedKey) {
+      setEditingKey(selectedKey)
+    }
+    handleClose()
+  }
+
+  const { _id, attributes } = feature
 
+  function deleteFeatureAttribute(key: string) {
+    const attributesSerialized = getSnapshot(attributes)
+    const { [key]: deletedAttribute, ...remainingAttributes } =
+      attributesSerialized
     const change = new FeatureAttributeChange({
-      changedIds: [feature._id],
+      changedIds: [_id],
       typeName: 'FeatureAttributeChange',
       assembly,
-      featureId: feature._id,
-      attributes: attrs,
+      featureId: _id,
+      attributes: remainingAttributes,
     })
-    await changeManager.submit(change)
-    notify('Feature attributes modified successfully', 'success')
+    void changeManager.submit(change)
   }
 
-  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',
-      )
+  function modifyFeatureAttribute(key: string, attribute: string[]) {
+    const serializedAttributes = { ...getSnapshot(attributes) }
+    if (!(key in serializedAttributes)) {
+      notify(`"${key}" not found in feature attributes`, 'error')
       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(
-          ', ',
-        )}`,
-      )
+    const oldAttribute = serializedAttributes[key]
+    if (oldAttribute.toString() === attribute.toString()) {
       return
     }
+    serializedAttributes[key] = attribute
 
-    setAttributes({
-      ...attributes,
-      [newAttributeKey]: [],
+    const change = new FeatureAttributeChange({
+      changedIds: [feature._id],
+      typeName: 'FeatureAttributeChange',
+      assembly,
+      featureId: feature._id,
+      attributes: serializedAttributes,
     })
-
-    setShowAddNewForm(false)
-    setNewAttributeKey('')
+    void changeManager.submit(change)
   }
 
-  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 addFeatureAttribute(key: string, attribute: string[]) {
+    const serializedAttributes = { ...getSnapshot(attributes) }
+    if (key in serializedAttributes) {
+      notify(`Feature already has attribute "${key}"`, 'error')
+      return
+    }
+    serializedAttributes[key] = attribute
 
-  function updateAttribute(key: string, newValue: string[]) {
-    const newAttributes = { ...attributes }
-    newAttributes[key] = newValue
-    setAttributes(newAttributes)
-    void onChangeCommitted(newAttributes)
+    const change = new FeatureAttributeChange({
+      changedIds: [feature._id],
+      typeName: 'FeatureAttributeChange',
+      assembly,
+      featureId: feature._id,
+      attributes: serializedAttributes,
+    })
+    void changeManager.submit(change)
   }
 
-  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 NewKeyAttributeEditor = pluginManager.evaluateExtensionPoint(
+    'Apollo-AttributeEditorComponent',
+    DefaultAttributeEditor,
+    { key: newKey },
+  ) as React.ElementType<AttributeEditorProps>
 
   return (
-    <div data-testid="attributes_test">
-      <Grid2 container direction="column" spacing={1}>
-        {Object.entries(attributes).map(([key, value]) => {
-          if (key === '') {
-            return null
-          }
-          const EditorComponent =
-            reservedKeys.get(key) ?? CustomAttributeValueEditor
+    <>
+      <List className={classes.list}>
+        {entries(attributes).map(([key, values]) => {
+          const AttributeEditor = pluginManager.evaluateExtensionPoint(
+            'Apollo-AttributeEditorComponent',
+            DefaultAttributeEditor,
+            { key },
+          ) as React.ElementType<AttributeEditorProps>
+          const AttributeViewer = pluginManager.evaluateExtensionPoint(
+            'Apollo-AttributeViewerComponent',
+            DefaultAttributeViewer,
+            { key },
+          ) as React.ElementType<AttributeViewerProps>
           return (
-            <Grid2 container key={key}>
-              <Grid2 size={11}>
-                <EditorComponent
+            <ListItem
+              key={key}
+              secondaryAction={
+                editable && !editingKey ? (
+                  <IconButton
+                    edge="end"
+                    onClick={(event) => {
+                      handleListMenuClick(event, key)
+                    }}
+                  >
+                    <MoreHorizIcon />
+                  </IconButton>
+                ) : null
+              }
+            >
+              <ListItemText
+                disableTypography
+                primary={<AttributeKey attributeKey={key} />}
+                secondary={
+                  editingKey === key ? (
+                    <AttributeEditor
+                      session={session}
+                      attributeValues={values as string[] | undefined}
+                      setAttribute={(newValues) => {
+                        setEditingKey(null)
+                        if (newValues) {
+                          modifyFeatureAttribute(key, newValues)
+                        }
+                      }}
+                    />
+                  ) : (
+                    <AttributeViewer values={values as string[] | undefined} />
+                  )
+                }
+              />
+            </ListItem>
+          )
+        })}
+        {newKey ? (
+          <ListItem>
+            <ListItemText
+              disableTypography
+              primary={<AttributeKey attributeKey={newKey} />}
+              secondary={
+                <NewKeyAttributeEditor
                   session={session}
-                  value={value}
-                  onChange={(newValue: string[]) => {
-                    updateAttribute(key, newValue)
+                  attributeValues={[]}
+                  setAttribute={(newValues) => {
+                    if (newValues) {
+                      addFeatureAttribute(newKey, newValues)
+                    }
+                    setNewKey(undefined)
                   }}
-                  label={key}
+                  isNew
                 />
-              </Grid2>
-              <Grid2 size={1}>
-                <IconButton
-                  aria-label="delete"
-                  size="medium"
-                  disabled={!editable}
-                  onClick={() => {
-                    deleteAttribute(key)
-                  }}
-                  style={{ marginTop: '10px' }}
-                >
-                  <DeleteIcon fontSize="medium" key={key} />
-                </IconButton>
-              </Grid2>
-            </Grid2>
-          )
-        })}
-        <Grid2>
-          <Button
-            color="primary"
-            variant="contained"
-            disabled={showAddNewForm || !editable}
-            onClick={() => {
-              setShowAddNewForm(true)
-            }}
-          >
-            Add new
-          </Button>
-        </Grid2>
-        {showAddNewForm ? (
-          <Grid2>
-            <Paper elevation={8} className={classes.newAttributePaper}>
-              <Grid2 container direction="column">
-                <Grid2>
-                  <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={
-                          <Grid2 container spacing={1} alignItems="center">
-                            <Grid2>
-                              <Typography>Custom</Typography>
-                            </Grid2>
-                            <Grid2>
-                              <TextField
-                                label="Custom attribute key"
-                                variant="outlined"
-                                value={
-                                  reservedKeys.has(newAttributeKey)
-                                    ? ''
-                                    : newAttributeKey
-                                }
-                                disabled={reservedKeys.has(newAttributeKey)}
-                                onChange={(event) => {
-                                  setNewAttributeKey(event.target.value)
-                                }}
-                              />
-                            </Grid2>
-                          </Grid2>
-                        }
-                      />
-                      {[...reservedKeys.keys()].map((key) => (
-                        <FormControlLabel
-                          key={key}
-                          value={key}
-                          control={<Radio />}
-                          label={key}
-                        />
-                      ))}
-                    </RadioGroup>
-                  </FormControl>
-                </Grid2>
-                <Grid2>
-                  <DialogActions>
-                    <Button
-                      key="addButton"
-                      color="primary"
-                      variant="contained"
-                      onClick={handleAddNewAttributeChange}
-                      disabled={!newAttributeKey}
-                    >
-                      Add
-                    </Button>
-                    <Button
-                      key="cancelAddButton"
-                      variant="outlined"
-                      type="submit"
-                      onClick={() => {
-                        setShowAddNewForm(false)
-                        setNewAttributeKey('')
-                        setErrorMessage('')
-                      }}
-                    >
-                      Cancel
-                    </Button>
-                  </DialogActions>
-                </Grid2>
-              </Grid2>
-            </Paper>
-          </Grid2>
+              }
+            />
+          </ListItem>
         ) : null}
-      </Grid2>
-      {errorMessage ? (
-        <Typography color="error">{errorMessage}</Typography>
+      </List>
+      {editable ? (
+        <Button
+          color="primary"
+          variant="contained"
+          disabled={showAddNewForm || Boolean(newKey)}
+          onClick={() => {
+            setShowAddNewForm(true)
+          }}
+        >
+          Add new
+        </Button>
+      ) : null}
+      {showAddNewForm ? (
+        <Paper variant="outlined" style={{ marginTop: 8 }}>
+          <AttributeKeySelector
+            session={session}
+            setKey={(newKey) => {
+              setNewKey(newKey)
+              setShowAddNewForm(false)
+            }}
+          />
+        </Paper>
       ) : null}
-    </div>
+      <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
+        <MenuItem onClick={handleDelete}>
+          <ListItemIcon>
+            <DeleteIcon fontSize="small" />
+          </ListItemIcon>
+          <Typography variant="inherit">Delete</Typography>
+        </MenuItem>
+        <MenuItem onClick={handleEdit}>
+          <ListItemIcon>
+            <EditIcon fontSize="small" />
+          </ListItemIcon>
+          <Typography variant="inherit">Edit</Typography>
+        </MenuItem>
+      </Menu>
+    </>
   )
 })

package/src/FeatureDetailsWidget/BasicInformation.tsx

@@ -1,21 +1,22 @@
 /* eslint-disable @typescript-eslint/no-misused-promises */
-import { AnnotationFeature } from '@apollo-annotation/mst'
+import { type AnnotationFeature } from '@apollo-annotation/mst'
 import {
   LocationEndChange,
   LocationStartChange,
   StrandChange,
   TypeChange,
 } from '@apollo-annotation/shared'
-import { AbstractSessionModel } from '@jbrowse/core/util'
+import { type AbstractSessionModel } from '@jbrowse/core/util'
 import { 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 type OntologyStore from '../OntologyManager/OntologyStore'
 import { fetchValidDescendantTerms } from '../OntologyManager/util'
-import { ApolloSessionModel } from '../session'
+import { OntologyTermAutocomplete } from '../components/OntologyTermAutocomplete'
+import { type ApolloSessionModel } from '../session'
+
 import { NumberTextField } from './NumberTextField'
 
 export const BasicInformation = observer(function BasicInformation({