@apollo-annotation/jbrowse-plugin-apollo 0.1.0

package/src/components/CopyFeature.tsx

@@ -0,0 +1,328 @@
+import { readConfObject } from '@jbrowse/core/configuration'
+import { AbstractSessionModel } from '@jbrowse/core/util'
+import {
+  Button,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  MenuItem,
+  Select,
+  SelectChangeEvent,
+  TextField,
+} from '@mui/material'
+import { AnnotationFeatureI, AnnotationFeatureSnapshot } from 'apollo-mst'
+import { AddFeatureChange } from 'apollo-shared'
+import ObjectID from 'bson-objectid'
+import { IKeyValueMap } from 'mobx'
+import { getSnapshot } from 'mobx-state-tree'
+import React, { useEffect, useState } from 'react'
+
+import { ChangeManager } from '../ChangeManager'
+import { ApolloSessionModel } from '../session'
+import { Dialog } from './Dialog'
+
+interface CopyFeatureProps {
+  session: ApolloSessionModel
+  handleClose(): void
+  sourceFeature: AnnotationFeatureI
+  sourceAssemblyId: string
+  changeManager: ChangeManager
+}
+
+interface Collection {
+  _id: string
+  name: string
+}
+
+/**
+ * Recursively assign new IDs to a feature
+ * @param feature - Parent feature
+ * @param featureIds -
+ */
+function generateNewIds(
+  // feature: AnnotationFeatureSnapshot,
+  feature: AnnotationFeatureSnapshot,
+  featureIds: string[],
+): AnnotationFeatureSnapshot {
+  const newId = new ObjectID().toHexString()
+  featureIds.push(newId)
+
+  const children: Record<string, AnnotationFeatureSnapshot> = {}
+  if (feature.children) {
+    for (const child of Object.values(feature.children)) {
+      const newChild = generateNewIds(child, featureIds)
+      children[newChild._id] = newChild
+    }
+  }
+  const referenceSeq =
+    typeof feature.refSeq === 'string'
+      ? feature.refSeq
+      : (feature.refSeq as unknown as ObjectID).toHexString()
+
+  return {
+    ...feature,
+    refSeq: referenceSeq,
+    children: feature.children && children,
+    _id: newId,
+  }
+}
+
+export function CopyFeature({
+  changeManager,
+  handleClose,
+  session,
+  sourceAssemblyId,
+  sourceFeature,
+}: CopyFeatureProps) {
+  const { assemblyManager, notify } = session as unknown as AbstractSessionModel
+  const assemblies = assemblyManager.assemblyList
+
+  const [selectedAssemblyId, setSelectedAssemblyId] = useState<
+    string | undefined
+  >(assemblies.find((a) => a.name !== sourceAssemblyId)?.name)
+  const [refNames, setRefNames] = useState<Collection[]>([])
+  const [selectedRefSeqId, setSelectedRefSeqId] = useState('')
+  const [start, setStart] = useState(sourceFeature.start)
+  const [errorMessage, setErrorMessage] = useState('')
+
+  async function handleChangeAssembly(e: SelectChangeEvent<string>) {
+    setSelectedAssemblyId(e.target.value)
+  }
+
+  useEffect(() => {
+    setSelectedRefSeqId('')
+    async function getRefNames() {
+      if (!selectedAssemblyId) {
+        setErrorMessage('No assemblies to copy to')
+        return
+      }
+      const assembly = await assemblyManager.waitForAssembly(selectedAssemblyId)
+      if (!assembly) {
+        return
+      }
+      const { refNameAliases } = assembly
+      if (!refNameAliases) {
+        return
+      }
+      const newRefNames = [...Object.entries(refNameAliases)]
+        .filter(([id, refName]) => id !== refName)
+        .map(([id, refName]) => ({ _id: id, name: refName ?? '' }))
+      setRefNames(newRefNames)
+      setSelectedRefSeqId(newRefNames[0]?._id || '')
+    }
+    getRefNames().catch((error) => setErrorMessage(String(error)))
+  }, [selectedAssemblyId, assemblyManager])
+
+  async function handleChangeRefSeq(e: SelectChangeEvent<string>) {
+    const refSeq = e.target.value as string
+    setSelectedRefSeqId(refSeq)
+  }
+
+  async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
+    if (!selectedAssemblyId) {
+      return
+    }
+    event.preventDefault()
+    setErrorMessage('')
+    const featureLength = sourceFeature.length
+    const assembly = await assemblyManager.waitForAssembly(selectedAssemblyId)
+    if (!assembly) {
+      setErrorMessage(`Assembly not found: ${selectedAssemblyId}.`)
+      return
+    }
+    const canonicalRefName = assembly?.getCanonicalRefName(selectedRefSeqId)
+    const region = assembly.regions?.find((r) => r.refName === canonicalRefName)
+    if (!region) {
+      setErrorMessage(`RefSeq not found: ${selectedRefSeqId}.`)
+      return
+    }
+
+    const newEnd = start + featureLength
+    if (newEnd > region.end) {
+      setErrorMessage(
+        `Feature would extend beyond the bounds of the selected reference sequence. (Feature would end at ${newEnd}, but reference sequence ends at ${region.end})`,
+      )
+      return
+    }
+    if (start < region.start) {
+      setErrorMessage(
+        `Reference sequence starts at ${region.start}, feature cannot start before that.`,
+      )
+      return
+    }
+
+    const featureIds: string[] = []
+    // Let's add featureId to each child recursively
+    const newFeatureLine = generateNewIds(
+      getSnapshot(sourceFeature) as unknown as AnnotationFeatureSnapshot,
+      featureIds,
+    )
+    // Clear possible parentId -attribute.
+    const attributeMap: IKeyValueMap<string[]> = {
+      ...(newFeatureLine.attributes as unknown as IKeyValueMap<string[]>),
+    }
+    if ('Parent' in attributeMap) {
+      delete attributeMap.Parent
+    }
+
+    // Update gffId value if it's ObjectId
+    if (
+      newFeatureLine.gffId &&
+      ObjectID.isValid(newFeatureLine.gffId.toString())
+    ) {
+      newFeatureLine.gffId = newFeatureLine._id
+    }
+    newFeatureLine.refSeq = selectedRefSeqId
+    const locationMove = start - newFeatureLine.start
+    newFeatureLine.start = start
+    newFeatureLine.end = start + featureLength
+    // Updates children start, end and gffId values
+    const updatedChildren = updateRefSeqStartEndAndGffId(
+      newFeatureLine,
+      locationMove,
+    )
+
+    const change = new AddFeatureChange({
+      changedIds: [newFeatureLine._id],
+      typeName: 'AddFeatureChange',
+      assembly: selectedAssemblyId,
+      addedFeature: {
+        _id: newFeatureLine._id,
+        refSeq: newFeatureLine.refSeq,
+        start: newFeatureLine.start,
+        end: newFeatureLine.end,
+        type: newFeatureLine.type,
+        children: updatedChildren.children as unknown as Record<
+          string,
+          AnnotationFeatureSnapshot
+        >,
+        attributes: attributeMap,
+        discontinuousLocations: newFeatureLine.discontinuousLocations,
+        strand: newFeatureLine.strand,
+        score: newFeatureLine.score,
+        phase: newFeatureLine.phase,
+      },
+      copyFeature: true,
+      allIds: featureIds,
+    })
+    await changeManager.submit?.(change)
+
+    notify('Feature copied successfully', 'success')
+    handleClose()
+    event.preventDefault()
+  }
+
+  /**
+   * Recursively loop children and update refSeq, start, end and gffId values
+   * @param feature - parent feature
+   * @param locationMove - how much location has been moved from original
+   * @returns
+   */
+  function updateRefSeqStartEndAndGffId(
+    feature: AnnotationFeatureSnapshot,
+    locationMove: number,
+  ): AnnotationFeatureSnapshot {
+    const children: Record<string, AnnotationFeatureSnapshot> = {}
+    if (feature.children) {
+      for (const child of Object.values(feature.children)) {
+        const newChild = updateRefSeqStartEndAndGffId(child, locationMove)
+        // Update gffId value if it's ObjectId
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        if (ObjectID.isValid(newChild.gffId!.toString())) {
+          newChild.gffId = newChild._id
+        }
+        newChild.refSeq = selectedRefSeqId
+        newChild.start = newChild.start + locationMove
+        newChild.end = newChild.end + locationMove
+        children[newChild._id] = newChild
+      }
+    }
+    const refSeq =
+      typeof feature.refSeq === 'string'
+        ? feature.refSeq
+        : (feature.refSeq as unknown as ObjectID).toHexString()
+
+    const id =
+      typeof feature._id === 'string'
+        ? feature._id
+        : (feature._id as unknown as ObjectID).toHexString()
+
+    return {
+      ...feature,
+      refSeq,
+      children: feature.children && children,
+      _id: id,
+    }
+  }
+
+  return (
+    <Dialog
+      open
+      title="Copy features and annotations"
+      handleClose={handleClose}
+      maxWidth={false}
+      data-testid="copy-feature"
+    >
+      <form onSubmit={onSubmit}>
+        <DialogContent style={{ display: 'flex', flexDirection: 'column' }}>
+          <DialogContentText>Target assembly</DialogContentText>
+          <Select
+            labelId="label"
+            value={selectedAssemblyId}
+            onChange={handleChangeAssembly}
+          >
+            {assemblies
+              .filter((option) => option.name !== sourceAssemblyId)
+              .map((option) => (
+                <MenuItem key={option.name} value={option.name}>
+                  {readConfObject(option, 'displayName')}
+                </MenuItem>
+              ))}
+          </Select>
+          <DialogContentText>Target reference sequence</DialogContentText>
+          <Select
+            labelId="label"
+            value={selectedRefSeqId}
+            onChange={handleChangeRefSeq}
+          >
+            {refNames.map((option) => (
+              <MenuItem key={option._id} value={option._id}>
+                {option.name}
+              </MenuItem>
+            ))}
+          </Select>
+          <DialogContentText>
+            Start position in target reference sequence
+          </DialogContentText>
+          <TextField
+            margin="dense"
+            type="number"
+            fullWidth
+            variant="outlined"
+            value={start}
+            onChange={(e) => {
+              setStart(Number(e.target.value))
+            }}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button
+            disabled={!selectedAssemblyId || !selectedRefSeqId || !start}
+            variant="contained"
+            type="submit"
+          >
+            Submit
+          </Button>
+          <Button variant="outlined" type="submit" onClick={handleClose}>
+            Cancel
+          </Button>
+        </DialogActions>
+      </form>
+      {errorMessage ? (
+        <DialogContent>
+          <DialogContentText color="error">{errorMessage}</DialogContentText>
+        </DialogContent>
+      ) : null}
+    </Dialog>
+  )
+}

package/src/components/DeleteAssembly.tsx

@@ -0,0 +1,185 @@
+import { Assembly } from '@jbrowse/core/assemblyManager/assembly'
+import {
+  Button,
+  Checkbox,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  FormControlLabel,
+  FormGroup,
+  MenuItem,
+  Select,
+  SelectChangeEvent,
+} from '@mui/material'
+import { DeleteAssemblyChange } from 'apollo-shared'
+import { getRoot } from 'mobx-state-tree'
+import React, { useEffect, useState } from 'react'
+
+import { ApolloInternetAccountModel } from '../ApolloInternetAccount/model'
+import {
+  ApolloInternetAccount,
+  CollaborationServerDriver,
+} from '../BackendDrivers'
+import { ChangeManager } from '../ChangeManager'
+import { ApolloSessionModel } from '../session'
+import { ApolloRootModel } from '../types'
+import { Dialog } from './Dialog'
+
+interface DeleteAssemblyProps {
+  session: ApolloSessionModel
+  handleClose(): void
+  changeManager: ChangeManager
+}
+
+export function DeleteAssembly({
+  changeManager,
+  handleClose,
+  session,
+}: DeleteAssemblyProps) {
+  const { internetAccounts } = getRoot<ApolloRootModel>(session)
+  const [selectedAssembly, setSelectedAssembly] = useState<Assembly>()
+  const [errorMessage, setErrorMessage] = useState('')
+  const [confirmDelete, setconfirmDelete] = useState(false)
+  const [submitted, setSubmitted] = useState(false)
+  const apolloInternetAccounts = internetAccounts.filter(
+    (ia) => ia.type === 'ApolloInternetAccount',
+  ) as ApolloInternetAccountModel[]
+  if (apolloInternetAccounts.length === 0) {
+    throw new Error('No Apollo internet account found')
+  }
+  const [selectedInternetAccount, setSelectedInternetAccount] = useState(
+    apolloInternetAccounts[0],
+  )
+
+  const { collaborationServerDriver } = session.apolloDataStore as {
+    collaborationServerDriver: CollaborationServerDriver
+    getInternetAccount(
+      assemblyName?: string,
+      internetAccountId?: string,
+    ): ApolloInternetAccount
+  }
+
+  const assemblies = collaborationServerDriver.getAssemblies()
+
+  useEffect(() => {
+    if (assemblies.length > 0 && selectedAssembly === undefined) {
+      setSelectedAssembly(assemblies[0])
+    }
+  }, [assemblies, selectedAssembly])
+
+  function handleChangeInternetAccount(e: SelectChangeEvent<string>) {
+    setSubmitted(false)
+    const newlySelectedInternetAccount = apolloInternetAccounts.find(
+      (ia) => ia.internetAccountId === e.target.value,
+    )
+    if (!newlySelectedInternetAccount) {
+      throw new Error(
+        `Could not find internetAccount with ID "${e.target.value}"`,
+      )
+    }
+    setSelectedInternetAccount(newlySelectedInternetAccount)
+  }
+
+  function handleChangeAssembly(e: SelectChangeEvent<string>) {
+    const newAssembly = assemblies.find((asm) => asm.name === e.target.value)
+    setSelectedAssembly(newAssembly)
+  }
+
+  async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    setSubmitted(true)
+    setErrorMessage('')
+    if (!selectedAssembly) {
+      setErrorMessage('Must select assembly!')
+      return
+    }
+    const change = new DeleteAssemblyChange({
+      typeName: 'DeleteAssemblyChange',
+      assembly: selectedAssembly.name,
+    })
+    await changeManager.submit?.(change, {
+      internetAccountId: selectedInternetAccount.internetAccountId,
+    })
+    handleClose()
+    event.preventDefault()
+  }
+
+  return (
+    <Dialog
+      open
+      title="Delete Assembly"
+      handleClose={handleClose}
+      maxWidth={false}
+      data-testid="delete-assembly"
+    >
+      <form onSubmit={onSubmit}>
+        <DialogContent style={{ display: 'flex', flexDirection: 'column' }}>
+          {apolloInternetAccounts.length > 1 ? (
+            <>
+              <DialogContentText>Select account</DialogContentText>
+              <Select
+                value={selectedInternetAccount.internetAccountId}
+                onChange={handleChangeInternetAccount}
+                disabled={submitted && !errorMessage}
+              >
+                {internetAccounts.map((option) => (
+                  <MenuItem key={option.id} value={option.internetAccountId}>
+                    {option.name}
+                  </MenuItem>
+                ))}
+              </Select>
+            </>
+          ) : null}
+          <DialogContentText>Select assembly</DialogContentText>
+          <Select
+            labelId="label"
+            value={selectedAssembly?.name ?? ''}
+            onChange={handleChangeAssembly}
+            disabled={assemblies.length === 0}
+          >
+            {assemblies.map((option) => (
+              <MenuItem key={option.name} value={option.name}>
+                {option.displayName ?? option.name}
+              </MenuItem>
+            ))}
+          </Select>
+          <DialogContentText>
+            <strong style={{ color: 'red' }}>
+              NOTE: All assembly data will be deleted and this operation cannot
+              be undone!
+            </strong>
+          </DialogContentText>
+          <FormGroup>
+            <FormControlLabel
+              control={
+                <Checkbox
+                  checked={confirmDelete}
+                  onChange={() => setconfirmDelete(!confirmDelete)}
+                />
+              }
+              label="I understand that all assembly data will be deleted"
+            />
+          </FormGroup>
+        </DialogContent>
+
+        <DialogActions>
+          <Button
+            disabled={!selectedAssembly || !confirmDelete}
+            variant="contained"
+            type="submit"
+          >
+            Delete
+          </Button>
+          <Button variant="outlined" type="submit" onClick={handleClose}>
+            Cancel
+          </Button>
+        </DialogActions>
+      </form>
+      {errorMessage ? (
+        <DialogContent>
+          <DialogContentText color="error">{errorMessage}</DialogContentText>
+        </DialogContent>
+      ) : null}
+    </Dialog>
+  )
+}

package/src/components/DeleteFeature.tsx

@@ -0,0 +1,90 @@
+import { AbstractSessionModel } from '@jbrowse/core/util'
+import {
+  Button,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+} from '@mui/material'
+import { AnnotationFeatureI } from 'apollo-mst'
+import { DeleteFeatureChange } from 'apollo-shared'
+import { getSnapshot } from 'mobx-state-tree'
+import React, { useState } from 'react'
+
+import { ChangeManager } from '../ChangeManager'
+import { ApolloSessionModel } from '../session'
+import { Dialog } from './Dialog'
+
+interface DeleteFeatureProps {
+  session: ApolloSessionModel
+  handleClose(): void
+  sourceFeature: AnnotationFeatureI
+  sourceAssemblyId: string
+  changeManager: ChangeManager
+  selectedFeature?: AnnotationFeatureI
+  setSelectedFeature(feature?: AnnotationFeatureI): void
+}
+
+export function DeleteFeature({
+  changeManager,
+  handleClose,
+  selectedFeature,
+  session,
+  setSelectedFeature,
+  sourceAssemblyId,
+  sourceFeature,
+}: DeleteFeatureProps) {
+  const { notify } = session as unknown as AbstractSessionModel
+  const [errorMessage, setErrorMessage] = useState('')
+
+  async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    setErrorMessage('')
+    if (selectedFeature?._id === sourceFeature._id) {
+      setSelectedFeature()
+    }
+
+    // Delete features
+    const change = new DeleteFeatureChange({
+      changedIds: [sourceFeature._id],
+      typeName: 'DeleteFeatureChange',
+      assembly: sourceAssemblyId,
+      deletedFeature: getSnapshot(sourceFeature),
+      parentFeatureId: sourceFeature.parent?._id,
+    })
+    await changeManager.submit?.(change)
+    notify('Feature deleted successfully', 'success')
+    handleClose()
+    event.preventDefault()
+  }
+
+  return (
+    <Dialog
+      open
+      title="Delete feature"
+      handleClose={handleClose}
+      maxWidth={false}
+      data-testid="delete-feature"
+    >
+      <form onSubmit={onSubmit}>
+        <DialogContent style={{ display: 'flex', flexDirection: 'column' }}>
+          <DialogContentText>
+            Are you sure you want to delete the selected feature?
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button variant="contained" type="submit">
+            Yes
+          </Button>
+          <Button variant="outlined" type="submit" onClick={handleClose}>
+            Cancel
+          </Button>
+        </DialogActions>
+      </form>
+      {errorMessage ? (
+        <DialogContent>
+          <DialogContentText color="error">{errorMessage}</DialogContentText>
+        </DialogContent>
+      ) : null}
+    </Dialog>
+  )
+}

package/src/components/Dialog.tsx

@@ -0,0 +1,47 @@
+import { Dialog as JBDialog } from '@jbrowse/core/ui'
+import CloseIcon from '@mui/icons-material/Close'
+import { DialogProps, DialogTitle, IconButton } from '@mui/material'
+import { observer } from 'mobx-react'
+import React from 'react'
+import { makeStyles } from 'tss-react/mui'
+
+const useStyles = makeStyles()((theme) => ({
+  dialogTitle: {
+    background: theme.palette.primary.main,
+    color: theme.palette.primary.contrastText,
+    padding: theme.spacing(2),
+  },
+  closeButton: {
+    position: 'absolute',
+    right: theme.spacing(1),
+    top: theme.spacing(1.5),
+    color: theme.palette.primary.contrastText,
+  },
+}))
+
+interface Props extends DialogProps {
+  handleClose(): void
+}
+
+export const Dialog = observer(function JBrowseDialog(props: Props) {
+  const { classes } = useStyles()
+  const { handleClose, title, ...other } = props
+
+  return (
+    <JBDialog
+      {...other}
+      header={
+        <>
+          <DialogTitle className={classes.dialogTitle}>{title}</DialogTitle>
+          <IconButton
+            aria-label="close"
+            onClick={handleClose}
+            className={classes.closeButton}
+          >
+            <CloseIcon />
+          </IconButton>
+        </>
+      }
+    />
+  )
+})