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

package/package.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.1.0",
   "name": "@apollo-annotation/jbrowse-plugin-apollo",
+  "version": "0.1.1",
   "description": "Apollo plugin for JBrowse 2",
   "repository": {
     "type": "git",
@@ -51,6 +51,9 @@
     "name": "Apollo"
   },
   "dependencies": {
+    "@apollo-annotation/apollo-common": "^0.1.1",
+    "@apollo-annotation/apollo-mst": "^0.1.1",
+    "@apollo-annotation/apollo-shared": "^0.1.1",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@gmod/gff": "1.2.0",
@@ -58,9 +61,6 @@
     "@jbrowse/plugin-linear-genome-view": "^2.0.1",
     "@mui/icons-material": "^5.8.4",
     "@types/jsonpath": "^0.2.0",
-    "apollo-common": "^1.0.0-alpha.0",
-    "apollo-mst": "^1.0.0-alpha.0",
-    "apollo-shared": "^1.0.0-alpha.0",
     "autosuggest-highlight": "^3.3.4",
     "bson-objectid": "^2.0.4",
     "clsx": "^1.1.1",
@@ -76,7 +76,7 @@
   },
   "peerDependencies": {
     "@jbrowse/core": "^2.7.0",
-    "@mui/material": "^5.11.10",
+    "@mui/material": "^5.11.14",
     "mobx": "^6.6.1",
     "mobx-react": "^7.2.1",
     "mobx-state-tree": "^5.1.7",
@@ -91,8 +91,8 @@
     "@jbrowse/core": "^2.7.0",
     "@jbrowse/development-tools": "^2.1.1",
     "@jest/globals": "^29.0.3",
-    "@mui/material": "^5.11.10",
-    "@mui/x-data-grid": "^6.0.1",
+    "@mui/material": "^5.11.14",
+    "@mui/x-data-grid": "^7.0.0",
     "@types/autosuggest-highlight": "^3",
     "@types/file-saver": "^2",
     "@types/node": "^18.14.2",

package/src/ApolloInternetAccount/model.ts

@@ -1,11 +1,4 @@
-import { ConfigurationReference, getConf } from '@jbrowse/core/configuration'
-import { InternetAccount } from '@jbrowse/core/pluggableElementTypes'
-import {
-  AbstractSessionModel,
-  isAbstractMenuManager,
-  isElectron,
-} from '@jbrowse/core/util'
-import { Change } from 'apollo-common'
+import { Change } from '@apollo-annotation/apollo-common'
 import {
   ChangeMessage,
   CheckResultUpdate,
@@ -14,7 +7,14 @@ import {
   UserLocationMessage,
   getDecodedToken,
   makeUserSessionId,
-} from 'apollo-shared'
+} from '@apollo-annotation/apollo-shared'
+import { ConfigurationReference, getConf } from '@jbrowse/core/configuration'
+import { InternetAccount } from '@jbrowse/core/pluggableElementTypes'
+import {
+  AbstractSessionModel,
+  isAbstractMenuManager,
+  isElectron,
+} from '@jbrowse/core/util'
 import { autorun } from 'mobx'
 import { Instance, flow, getRoot, types } from 'mobx-state-tree'
 import { io } from 'socket.io-client'

package/src/ApolloSixFrameRenderer/components/ApolloRendering.tsx

@@ -1,8 +1,11 @@
+import { AnnotationFeatureI } from '@apollo-annotation/apollo-mst'
+import {
+  LocationEndChange,
+  LocationStartChange,
+} from '@apollo-annotation/apollo-shared'
 import { getConf } from '@jbrowse/core/configuration'
 import { AbstractSessionModel, Region, getSession } from '@jbrowse/core/util'
 import { Menu, MenuItem } from '@mui/material'
-import { AnnotationFeatureI } from 'apollo-mst'
-import { LocationEndChange, LocationStartChange } from 'apollo-shared'
 import { autorun, toJS } from 'mobx'
 import { observer } from 'mobx-react'
 import { getRoot, getSnapshot } from 'mobx-state-tree'

package/src/BackendDrivers/BackendDriver.ts

@@ -1,8 +1,11 @@
+import { Change, ClientDataStore } from '@apollo-annotation/apollo-common'
+import {
+  AnnotationFeatureSnapshot,
+  CheckResultSnapshot,
+} from '@apollo-annotation/apollo-mst'
+import { ValidationResultSet } from '@apollo-annotation/apollo-shared'
 import { Assembly } from '@jbrowse/core/assemblyManager/assembly'
 import { Region } from '@jbrowse/core/util'
-import { Change, ClientDataStore } from 'apollo-common'
-import { AnnotationFeatureSnapshot, CheckResultSnapshot } from 'apollo-mst'
-import { ValidationResultSet } from 'apollo-shared'
 
 import { SubmitOpts } from '../ChangeManager'
 

package/src/BackendDrivers/CollaborationServerDriver.ts

@@ -1,13 +1,19 @@
-import { getConf } from '@jbrowse/core/configuration'
-import { BaseInternetAccountModel } from '@jbrowse/core/pluggableElementTypes'
-import { Region, getSession } from '@jbrowse/core/util'
-import { AssemblySpecificChange, Change } from 'apollo-common'
+import {
+  AssemblySpecificChange,
+  Change,
+} from '@apollo-annotation/apollo-common'
 import {
   AnnotationFeatureSnapshot,
   ApolloRefSeqI,
   CheckResultSnapshot,
-} from 'apollo-mst'
-import { ChangeMessage, ValidationResultSet } from 'apollo-shared'
+} from '@apollo-annotation/apollo-mst'
+import {
+  ChangeMessage,
+  ValidationResultSet,
+} from '@apollo-annotation/apollo-shared'
+import { getConf } from '@jbrowse/core/configuration'
+import { BaseInternetAccountModel } from '@jbrowse/core/pluggableElementTypes'
+import { Region, getSession } from '@jbrowse/core/util'
 import { Socket } from 'socket.io-client'
 
 import { ChangeManager, SubmitOpts } from '../ChangeManager'

package/src/BackendDrivers/DesktopFileDriver.ts

@@ -1,27 +1,25 @@
-import gff, { GFF3Item } from '@gmod/gff'
-import { getConf } from '@jbrowse/core/configuration'
-import { Region, getSession } from '@jbrowse/core/util'
 import {
   AssemblySpecificChange,
   Change,
   isAssemblySpecificChange,
-} from 'apollo-common'
-import { AnnotationFeatureSnapshot, CheckResultSnapshot } from 'apollo-mst'
-import { ValidationResultSet, makeGFF3Feature } from 'apollo-shared'
+} from '@apollo-annotation/apollo-common'
+import {
+  AnnotationFeatureSnapshot,
+  CheckResultSnapshot,
+} from '@apollo-annotation/apollo-mst'
+import {
+  ValidationResultSet,
+  makeGFF3Feature,
+  splitStringIntoChunks,
+} from '@apollo-annotation/apollo-shared'
+import gff, { GFF3Item } from '@gmod/gff'
+import { getConf } from '@jbrowse/core/configuration'
+import { Region, getSession } from '@jbrowse/core/util'
 import { getSnapshot } from 'mobx-state-tree'
 
 import { checkFeatures, loadAssemblyIntoClient } from '../util'
 import { BackendDriver } from './BackendDriver'
 
-function splitStringIntoChunks(input: string, chunkSize: number): string[] {
-  const chunks: string[] = []
-  for (let i = 0; i < input.length; i += chunkSize) {
-    const chunk = input.slice(i, i + chunkSize)
-    chunks.push(chunk)
-  }
-  return chunks
-}
-
 export class DesktopFileDriver extends BackendDriver {
   async loadAssembly(assemblyName: string) {
     const { assemblyManager } = getSession(this.clientStore)

package/src/BackendDrivers/InMemoryFileDriver.ts

@@ -1,8 +1,14 @@
+import {
+  AssemblySpecificChange,
+  Change,
+} from '@apollo-annotation/apollo-common'
+import {
+  AnnotationFeatureSnapshot,
+  CheckResultSnapshot,
+} from '@apollo-annotation/apollo-mst'
+import { ValidationResultSet } from '@apollo-annotation/apollo-shared'
 import { getConf } from '@jbrowse/core/configuration'
 import { Region, getSession } from '@jbrowse/core/util'
-import { AssemblySpecificChange, Change } from 'apollo-common'
-import { AnnotationFeatureSnapshot, CheckResultSnapshot } from 'apollo-mst'
-import { ValidationResultSet } from 'apollo-shared'
 
 import { SubmitOpts } from '../ChangeManager'
 import { BackendDriver } from './BackendDriver'

package/src/ChangeManager.ts

@@ -1,10 +1,13 @@
-import { getSession } from '@jbrowse/core/util'
 import {
   Change,
   ClientDataStore,
   isAssemblySpecificChange,
-} from 'apollo-common'
-import { ValidationResultSet, validationRegistry } from 'apollo-shared'
+} from '@apollo-annotation/apollo-common'
+import {
+  ValidationResultSet,
+  validationRegistry,
+} from '@apollo-annotation/apollo-shared'
+import { getSession } from '@jbrowse/core/util'
 import { IAnyStateTreeNode } from 'mobx-state-tree'
 
 import { ApolloSessionModel } from './session'

package/src/FeatureDetailsWidget/ApolloFeatureDetailsWidget.tsx

@@ -0,0 +1,86 @@
+import { BaseInternetAccountModel } from '@jbrowse/core/pluggableElementTypes'
+import { getSession } from '@jbrowse/core/util'
+import { observer } from 'mobx-react'
+import { getRoot } from 'mobx-state-tree'
+import React, { useMemo } from 'react'
+import { makeStyles } from 'tss-react/mui'
+
+import { ApolloInternetAccountModel } from '../ApolloInternetAccount/model'
+import { ApolloSessionModel } from '../session'
+import { ApolloRootModel } from '../types'
+import { Attributes } from './Attributes'
+import { BasicInformation } from './BasicInformation'
+import { ApolloFeatureDetailsWidget as ApolloFeatureDetails } from './model'
+import { RelatedFeatures } from './RelatedFeature'
+import { Sequence } from './Sequence'
+
+const useStyles = makeStyles()((theme) => ({
+  root: {
+    padding: theme.spacing(2),
+  },
+}))
+
+export const ApolloFeatureDetailsWidget = observer(
+  function ApolloFeatureDetailsWidget(props: { model: ApolloFeatureDetails }) {
+    const { model } = props
+    const { assembly, feature, refName } = model
+    const session = getSession(model) as unknown as ApolloSessionModel
+    const currentAssembly = session.apolloDataStore.assemblies.get(assembly)
+    const { classes } = useStyles()
+    const { internetAccounts } = getRoot<ApolloRootModel>(session)
+    const internetAccount = useMemo(() => {
+      return internetAccounts.find(
+        (ia: BaseInternetAccountModel) => ia.type === 'ApolloInternetAccount',
+      ) as ApolloInternetAccountModel | undefined
+    }, [internetAccounts])
+    const role = internetAccount ? internetAccount.role : 'admin'
+    const editable = ['admin', 'user'].includes(role ?? '')
+
+    if (!(feature && currentAssembly)) {
+      return null
+    }
+    const refSeq = currentAssembly.getByRefName(refName)
+    if (!refSeq) {
+      return null
+    }
+    const { end, start } = feature
+    const sequence = refSeq.getSequence(start, end)
+    if (!sequence) {
+      void session.apolloDataStore.loadRefSeq([
+        { assemblyName: assembly, refName, start, end },
+      ])
+    }
+
+    return (
+      <div className={classes.root}>
+        <BasicInformation
+          feature={feature}
+          session={session}
+          assembly={currentAssembly._id}
+        />
+        <hr />
+        <Attributes
+          feature={feature}
+          session={session}
+          assembly={currentAssembly._id}
+          editable={editable}
+        />
+        <hr />
+        <Sequence
+          feature={feature}
+          session={session}
+          assembly={currentAssembly._id}
+          refName={refName}
+        />
+        <hr />
+        <RelatedFeatures
+          feature={feature}
+          refName={refName}
+          session={session}
+          assembly={currentAssembly._id}
+        />
+      </div>
+    )
+  },
+)
+export default ApolloFeatureDetailsWidget

package/src/FeatureDetailsWidget/Attributes.tsx

@@ -0,0 +1,374 @@
+import { AnnotationFeatureI } from '@apollo-annotation/apollo-mst'
+import { FeatureAttributeChange } from '@apollo-annotation/apollo-shared'
+import { AbstractSessionModel } from '@jbrowse/core/util'
+import DeleteIcon from '@mui/icons-material/Delete'
+import {
+  Button,
+  DialogActions,
+  FormControl,
+  FormControlLabel,
+  FormLabel,
+  Grid,
+  IconButton,
+  Paper,
+  Radio,
+  RadioGroup,
+  TextField,
+  Typography,
+} from '@mui/material'
+import { observer } from 'mobx-react'
+import { getSnapshot } from 'mobx-state-tree'
+import React, { useState } from 'react'
+import { makeStyles } from 'tss-react/mui'
+
+import { AttributeValueEditorProps } from '../components'
+import { OntologyTermMultiSelect } from '../components/OntologyTermMultiSelect'
+import { ApolloSessionModel } from '../session'
+import { StringTextField } from './StringTextField'
+
+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 reservedTerms = [
+  'ID',
+  'Name',
+  'Alias',
+  'Target',
+  'Gap',
+  'Derives_from',
+  'Note',
+  'Dbxref',
+  'Ontology',
+  'Is_Circular',
+]
+
+const useStyles = makeStyles()((theme) => ({
+  newAttributePaper: {
+    padding: theme.spacing(2),
+  },
+  attributeName: {
+    background: theme.palette.secondary.main,
+    color: theme.palette.secondary.contrastText,
+    padding: theme.spacing(1),
+  },
+}))
+
+function CustomAttributeValueEditor(props: AttributeValueEditorProps) {
+  const { onChange, value } = props
+  return (
+    <StringTextField
+      value={value}
+      onChangeCommitted={(newValue) => {
+        onChange(newValue.split(','))
+      }}
+      variant="outlined"
+      fullWidth
+      helperText="Separate multiple values for the attribute with commas"
+    />
+  )
+}
+
+export const Attributes = observer(function Attributes({
+  assembly,
+  editable,
+  feature,
+  session,
+}: {
+  feature: AnnotationFeatureI
+  session: ApolloSessionModel
+  assembly: string
+  editable: boolean
+}) {
+  const [errorMessage, setErrorMessage] = useState('')
+  const [showAddNewForm, setShowAddNewForm] = useState(false)
+  const { classes } = useStyles()
+  const [newAttributeKey, setNewAttributeKey] = useState('')
+  const attributes = 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)]
+    }),
+  )
+  const { notify } = session as unknown as AbstractSessionModel
+
+  const { changeManager } = session.apolloDataStore
+
+  async function onChangeCommitted(newKey: string, newValue?: string[]) {
+    setErrorMessage('')
+
+    const attrs: Record<string, string[]> = {}
+    if (attributes) {
+      const modifiedAttrs = Object.entries({
+        ...attributes,
+        [newKey]: newValue,
+      })
+      for (const [key, val] of modifiedAttrs) {
+        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: [feature._id],
+      typeName: 'FeatureAttributeChange',
+      assembly,
+      featureId: feature._id,
+      attributes: attrs,
+    })
+    await changeManager.submit?.(change)
+    notify('Feature attributes modified successfully', 'success')
+  }
+  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
+    }
+    void onChangeCommitted(newAttributeKey, [])
+  }
+
+  function handleRadioButtonChange(
+    event: React.ChangeEvent<HTMLInputElement>,
+    value: string,
+  ) {
+    if (value === 'custom') {
+      setNewAttributeKey('')
+    } else if (reservedKeys.has(value)) {
+      setNewAttributeKey(value)
+    } else {
+      setErrorMessage('Unknown attribute type')
+    }
+  }
+
+  return (
+    <>
+      <Typography variant="h4">Attributes</Typography>
+      <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={(newValue) => onChangeCommitted(key, newValue)}
+                />
+              </Grid>
+              <Grid item xs={1}>
+                <IconButton
+                  aria-label="delete"
+                  size="medium"
+                  disabled={!editable}
+                  onClick={() => onChangeCommitted(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"
+                      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 ? (
+        <Typography color="error">{errorMessage}</Typography>
+      ) : null}
+    </>
+  )
+})