@apollo-annotation/jbrowse-plugin-apollo 0.1.0

package/src/components/ViewChangeLog.tsx

@@ -0,0 +1,208 @@
+import {
+  Button,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  MenuItem,
+  Select,
+  SelectChangeEvent,
+} from '@mui/material'
+import {
+  DataGrid,
+  GridColDef,
+  GridRowsProp,
+  GridToolbar,
+} from '@mui/x-data-grid'
+import { changeRegistry } from 'apollo-common'
+import { getRoot } from 'mobx-state-tree'
+import React, { useEffect, useState } from 'react'
+import { makeStyles } from 'tss-react/mui'
+
+import { ApolloInternetAccountModel } from '../ApolloInternetAccount/model'
+import { ApolloSessionModel } from '../session'
+import { ApolloRootModel } from '../types'
+import { createFetchErrorMessage } from '../util'
+import { Dialog } from './Dialog'
+
+interface ViewChangeLogProps {
+  session: ApolloSessionModel
+  handleClose(): void
+}
+
+interface AssemblyDocument {
+  _id: string
+  name: string
+}
+
+const useStyles = makeStyles()((theme) => ({
+  changeTextarea: {
+    fontFamily: 'monospace',
+    width: 600,
+    resize: 'none',
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: theme.shape.borderRadius,
+  },
+}))
+
+export function ViewChangeLog({ handleClose, session }: ViewChangeLogProps) {
+  const { internetAccounts } = getRoot<ApolloRootModel>(session)
+  const apolloInternetAccount = internetAccounts.find(
+    (ia) => ia.type === 'ApolloInternetAccount',
+  ) as ApolloInternetAccountModel | undefined
+  if (!apolloInternetAccount) {
+    throw new Error('No Apollo internet account found')
+  }
+  const { baseURL } = apolloInternetAccount
+  const { classes } = useStyles()
+  const [errorMessage, setErrorMessage] = useState<string>()
+  const [assemblyCollection, setAssemblyCollection] = useState<
+    AssemblyDocument[]
+  >([])
+  const [assemblyId, setAssemblyId] = useState<string>('')
+  const [displayGridData, setDisplayGridData] = useState<GridRowsProp[]>([])
+
+  const gridColumns: GridColDef[] = [
+    { field: 'sequence' },
+    {
+      field: 'typeName',
+      headerName: 'Change type',
+      width: 200,
+      type: 'singleSelect',
+      // TODO: Get these from change manager once it's on the session
+      valueOptions: [...changeRegistry.changes.keys()],
+    },
+    {
+      field: 'changes',
+      headerName: 'Change JSON',
+      width: 600,
+      renderCell: ({ value }) => (
+        <textarea className={classes.changeTextarea} readOnly>
+          {JSON.stringify(value)}
+        </textarea>
+      ),
+      valueFormatter: ({ value }) => JSON.stringify(value),
+    },
+    { field: 'user', headerName: 'User', width: 140 },
+    {
+      field: 'createdAt',
+      headerName: 'Time',
+      width: 160,
+      type: 'dateTime',
+      valueGetter: ({ value }) => value && new Date(value),
+    },
+  ]
+
+  useEffect(() => {
+    async function getAssemblies() {
+      const uri = new URL('/assemblies', baseURL).href
+      const apolloFetch = apolloInternetAccount?.getFetcher({
+        locationType: 'UriLocation',
+        uri,
+      })
+      if (apolloFetch) {
+        const response = await apolloFetch(uri, { method: 'GET' })
+        if (!response.ok) {
+          const newErrorMessage = await createFetchErrorMessage(
+            response,
+            'Error when retrieving assemblies from server',
+          )
+          setErrorMessage(newErrorMessage)
+          return
+        }
+        const data = (await response.json()) as AssemblyDocument[]
+        setAssemblyCollection(data)
+      }
+    }
+    getAssemblies().catch((error) => setErrorMessage(String(error)))
+  }, [apolloInternetAccount, baseURL])
+
+  useEffect(() => {
+    if (!assemblyId && assemblyCollection.length > 0) {
+      setAssemblyId(assemblyCollection[0]._id)
+    }
+  }, [assemblyId, assemblyCollection])
+
+  useEffect(() => {
+    async function getGridData() {
+      if (!assemblyId) {
+        return
+      }
+
+      // Get changes
+      const url = new URL('changes', baseURL)
+      const searchParams = new URLSearchParams({ assembly: assemblyId })
+      url.search = searchParams.toString()
+      const uri = url.toString()
+      const apolloFetch = apolloInternetAccount?.getFetcher({
+        locationType: 'UriLocation',
+        uri,
+      })
+      if (apolloFetch) {
+        const response = await apolloFetch(uri, {
+          headers: new Headers({ 'Content-Type': 'application/json' }),
+        })
+        if (!response.ok) {
+          const newErrorMessage = await createFetchErrorMessage(
+            response,
+            'Error when retrieving changes',
+          )
+          setErrorMessage(newErrorMessage)
+          return
+        }
+        const data = await response.json()
+        setDisplayGridData(data)
+      }
+    }
+    getGridData().catch((error) => setErrorMessage(String(error)))
+  }, [assemblyId, apolloInternetAccount, baseURL])
+
+  async function handleChangeAssembly(e: SelectChangeEvent<string>) {
+    setAssemblyId(e.target.value as string)
+  }
+
+  return (
+    <Dialog
+      open
+      fullScreen
+      title="View change log"
+      handleClose={handleClose}
+      data-testid="view-changelog"
+    >
+      <Select
+        style={{ width: 200, marginLeft: 40 }}
+        value={assemblyId}
+        onChange={handleChangeAssembly}
+      >
+        {assemblyCollection.map((option) => (
+          <MenuItem key={option._id} value={option._id}>
+            {option.name}
+          </MenuItem>
+        ))}
+      </Select>
+
+      <DialogContent>
+        <DataGrid
+          pagination
+          rows={displayGridData}
+          columns={gridColumns}
+          getRowId={(row) => row._id}
+          slots={{ toolbar: GridToolbar }}
+          initialState={{
+            sorting: { sortModel: [{ field: 'sequence', sort: 'desc' }] },
+            columns: { columnVisibilityModel: { sequence: false } },
+          }}
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button variant="outlined" type="submit" onClick={handleClose}>
+          Close
+        </Button>
+      </DialogActions>
+      {errorMessage ? (
+        <DialogContent>
+          <DialogContentText color="error">{errorMessage}</DialogContentText>
+        </DialogContent>
+      ) : null}
+    </Dialog>
+  )
+}

package/src/components/ViewCheckResults.tsx

@@ -0,0 +1,151 @@
+import { Assembly } from '@jbrowse/core/assemblyManager/assembly'
+import {
+  Button,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  MenuItem,
+  Select,
+  SelectChangeEvent,
+} from '@mui/material'
+import {
+  DataGrid,
+  GridColDef,
+  GridRowsProp,
+  GridToolbar,
+} from '@mui/x-data-grid'
+import { getRoot } from 'mobx-state-tree'
+import React, { useEffect, useState } from 'react'
+
+import { ApolloInternetAccountModel } from '../ApolloInternetAccount/model'
+import { ApolloSessionModel } from '../session'
+import { ApolloRootModel } from '../types'
+import { createFetchErrorMessage } from '../util'
+import { Dialog } from './Dialog'
+
+interface ViewCheckResultsProps {
+  session: ApolloSessionModel
+  handleClose(): void
+}
+
+export function ViewCheckResults({
+  handleClose,
+  session,
+}: ViewCheckResultsProps) {
+  const { internetAccounts } = getRoot<ApolloRootModel>(session)
+  const { collaborationServerDriver } = session.apolloDataStore
+  const apolloInternetAccount = internetAccounts.find(
+    (ia) => ia.type === 'ApolloInternetAccount',
+  ) as ApolloInternetAccountModel | undefined
+  if (!apolloInternetAccount) {
+    throw new Error('No Apollo internet account found')
+  }
+  const { baseURL } = apolloInternetAccount
+  const [errorMessage, setErrorMessage] = useState<string>()
+  const [selectedAssembly, setSelectedAssembly] = useState<Assembly>()
+  const [displayGridData, setDisplayGridData] = useState<GridRowsProp[]>([])
+
+  const gridColumns: GridColDef[] = [
+    { field: '_id', headerName: 'id', width: 50 },
+    {
+      field: 'name',
+      headerName: 'Check name',
+      width: 200,
+    },
+    { field: 'refSeq', headerName: 'Reference sequence ID', width: 200 },
+    { field: 'ids', headerName: 'Feature IDs', width: 200 },
+    { field: 'message', headerName: 'Message', flex: 1 },
+  ]
+
+  const assemblies = collaborationServerDriver.getAssemblies()
+  useEffect(() => {
+    if (!selectedAssembly && assemblies.length > 0) {
+      setSelectedAssembly(assemblies[0])
+    }
+  }, [assemblies, selectedAssembly])
+
+  useEffect(() => {
+    async function getGridData() {
+      const assemblyId: string | undefined = selectedAssembly?.name
+      if (!assemblyId) {
+        return
+      }
+      const url = new URL('checks', baseURL)
+      const searchParams = new URLSearchParams({ assembly: assemblyId })
+      url.search = searchParams.toString()
+      const uri = url.toString()
+      const apolloFetch = apolloInternetAccount?.getFetcher({
+        locationType: 'UriLocation',
+        uri,
+      })
+      if (apolloFetch) {
+        const response = await apolloFetch(uri, {
+          headers: new Headers({ 'Content-Type': 'application/json' }),
+        })
+        if (!response.ok) {
+          const newErrorMessage = await createFetchErrorMessage(
+            response,
+            'Error when retrieving checks',
+          )
+          setErrorMessage(newErrorMessage)
+          return
+        }
+        const data = await response.json()
+        setDisplayGridData(data)
+      }
+    }
+    getGridData().catch((error) => setErrorMessage(String(error)))
+  }, [selectedAssembly, apolloInternetAccount, baseURL])
+
+  function handleChangeAssembly(e: SelectChangeEvent<string>) {
+    const newAssembly = assemblies.find((asm) => asm.name === e.target.value)
+    setSelectedAssembly(newAssembly)
+  }
+
+  return (
+    <Dialog
+      open
+      fullScreen
+      title="View check results"
+      handleClose={handleClose}
+      data-testid="view-check-results"
+    >
+      <Select
+        style={{ width: 200, marginLeft: 40 }}
+        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>
+
+      <DialogContent>
+        <DataGrid
+          pagination
+          rows={displayGridData}
+          columns={gridColumns}
+          getRowId={(row) => row._id}
+          slots={{ toolbar: GridToolbar }}
+          initialState={{
+            sorting: { sortModel: [{ field: 'name', sort: 'asc' }] },
+            columns: { columnVisibilityModel: { name: true } },
+          }}
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button variant="outlined" type="submit" onClick={handleClose}>
+          Close
+        </Button>
+      </DialogActions>
+      {errorMessage ? (
+        <DialogContent>
+          <DialogContentText color="error">{errorMessage}</DialogContentText>
+        </DialogContent>
+      ) : null}
+    </Dialog>
+  )
+}

package/src/components/index.ts

@@ -0,0 +1,12 @@
+export * from './AddAssembly'
+export * from './AddChildFeature'
+export * from './CopyFeature'
+export * from './DeleteAssembly'
+export * from './DeleteFeature'
+export * from './DownloadGFF3'
+export * from './ImportFeatures'
+export * from './ManageChecks'
+export * from './ManageUsers'
+export * from './ModifyFeatureAttribute'
+export * from './OpenLocalFile'
+export * from './ViewChangeLog'

package/src/config.ts

@@ -0,0 +1,10 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
+import { types } from 'mobx-state-tree'
+
+import { OntologyRecordConfiguration } from './OntologyManager'
+
+const ApolloPluginConfigurationSchema = ConfigurationSchema('ApolloPlugin', {
+  ontologies: types.array(OntologyRecordConfiguration),
+})
+
+export default ApolloPluginConfigurationSchema

package/src/declare.d.ts

@@ -0,0 +1,3 @@
+declare module '*.json'
+
+declare module 'librpc-web-mod'

package/src/extensions/annotationFromPileup.ts

@@ -0,0 +1,208 @@
+import { Assembly } from '@jbrowse/core/assemblyManager/assembly'
+import { DisplayType } from '@jbrowse/core/pluggableElementTypes'
+import PluggableElementBase from '@jbrowse/core/pluggableElementTypes/PluggableElementBase'
+import { getContainingView, getSession } from '@jbrowse/core/util'
+import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+import AddIcon from '@mui/icons-material/Add'
+import { AnnotationFeatureSnapshot } from 'apollo-mst'
+import { AddFeatureChange } from 'apollo-shared'
+import ObjectID from 'bson-objectid'
+
+import { ApolloSessionModel } from '../session'
+
+function parseCigar(cigar: string): [string | undefined, number][] {
+  return (cigar.toUpperCase().match(/\d+\D/g) ?? []).map((op) => {
+    return [(op.match(/\D/) ?? [])[0], Number.parseInt(op, 10)]
+  })
+}
+
+export function annotationFromPileup(pluggableElement: PluggableElementBase) {
+  if (pluggableElement.name !== 'LinearPileupDisplay') {
+    return pluggableElement
+  }
+  const { stateModel } = pluggableElement as DisplayType
+  const newStateModel = stateModel
+    .views((self) => ({
+      getFirstRegion() {
+        const lgv = getContainingView(self) as unknown as LinearGenomeViewModel
+        return lgv.dynamicBlocks.contentBlocks[0]
+      },
+      getAssembly() {
+        const firstRegion = self.getFirstRegion()
+        const session = getSession(self)
+        const { assemblyManager } = session
+        const { assemblyName } = firstRegion
+        const assembly = assemblyManager.get(assemblyName)
+        if (!assembly) {
+          throw new Error(`Could not find assembly named ${assemblyName}`)
+        }
+        return assembly
+      },
+      getRefSeqId(assembly: Assembly) {
+        const firstRegion = self.getFirstRegion()
+        const { refName } = firstRegion
+        const { refNameAliases } = assembly
+        if (!refNameAliases) {
+          throw new Error(`Could not find aliases for ${assembly.name}`)
+        }
+        const newRefNames = [...Object.entries(refNameAliases)]
+          .filter(([id, refName]) => id !== refName)
+          .map(([id, refName]) => ({
+            _id: id,
+            name: refName ?? '',
+          }))
+        const refSeqId = newRefNames.find((item) => item.name === refName)?._id
+        if (!refSeqId) {
+          throw new Error(`Could not find refSeqId named ${refName}`)
+        }
+        return refSeqId
+      },
+      createFeature() {
+        const feature = self.contextMenuFeature
+        const assembly = self.getAssembly()
+        const refSeqId = self.getRefSeqId(assembly)
+        const cigarData: string = feature.get('CIGAR')
+        const ops = parseCigar(cigarData)
+        let currOffset = 0
+        const start: number = feature.get('start')
+        let openStart: number | undefined
+        const exons: {
+          start: number
+          end: number
+        }[] = []
+        for (const [op, len] of ops) {
+          // open or continue open
+          if (op === 'M' || op === '=') {
+            // if it was closed, then open with start, strand, type
+            if (openStart === undefined) {
+              // add subfeature
+              openStart = currOffset + start
+            }
+          } else if (op === 'N' && openStart !== undefined) {
+            // if it was open, then close and add the subfeature
+            exons.push({
+              start: openStart,
+              end: currOffset + openStart,
+            })
+            openStart = undefined
+          }
+          if (op !== 'I') {
+            // we ignore insertions when calculating potential exon length
+            currOffset += len
+          }
+        }
+        // if we are still open, then close with the final length and add subfeature
+        if (openStart !== undefined) {
+          exons.push({
+            start: openStart,
+            end: currOffset + start,
+          })
+        }
+
+        const newFeature: AnnotationFeatureSnapshot = {
+          _id: ObjectID().toHexString(),
+          gffId: '',
+          refSeq: refSeqId,
+          start: feature.get('start'),
+          end: feature.get('end'),
+          type: 'mRNA',
+          strand: feature.get('strand'),
+        }
+        if (exons.length === 0) {
+          return newFeature
+        }
+
+        const children: Record<string, AnnotationFeatureSnapshot> = {}
+        newFeature.children = children
+        const [firstExon] = exons
+        const cdsFeature: AnnotationFeatureSnapshot = {
+          _id: ObjectID().toHexString(),
+          gffId: '',
+          refSeq: refSeqId,
+          start: firstExon.start,
+          end: firstExon.end,
+          type: 'CDS',
+          strand: feature.get('strand'),
+          phase: 0,
+        }
+        newFeature.children[cdsFeature._id] = cdsFeature
+        if (exons.length === 1) {
+          const exon: AnnotationFeatureSnapshot = {
+            _id: ObjectID().toHexString(),
+            gffId: '',
+            refSeq: refSeqId,
+            start: firstExon.start,
+            end: firstExon.end,
+            type: 'exon',
+            strand: feature.get('strand'),
+          }
+          newFeature.children[exon._id] = exon
+          return newFeature
+        }
+
+        const discontinuousLocations: {
+          start: number
+          end: number
+          phase: 0 | 1 | 2
+        }[] = []
+        let phase: 0 | 1 | 2 = 0
+        for (const exon of exons) {
+          cdsFeature.start = Math.min(cdsFeature.start, exon.start)
+          cdsFeature.end = Math.max(cdsFeature.end, exon.end)
+          const { end, start } = exon
+          discontinuousLocations?.push({ start, end, phase })
+          const localPhase = (end - start) % 3
+          phase = ((phase + localPhase) % 3) as 0 | 1 | 2
+          const newExon: AnnotationFeatureSnapshot = {
+            _id: ObjectID().toHexString(),
+            gffId: '',
+            refSeq: refSeqId,
+            start,
+            end,
+            type: 'exon',
+            strand: feature.get('strand'),
+          }
+          newFeature.children[newExon._id] = newExon
+        }
+        cdsFeature.discontinuousLocations = discontinuousLocations
+        return newFeature
+      },
+      async onPileupFeatureContext() {
+        const newFeature = self.createFeature()
+        const assembly = self.getAssembly()
+        const assemblyId = assembly.name
+        const change = new AddFeatureChange({
+          changedIds: [newFeature._id],
+          typeName: 'AddFeatureChange',
+          assembly: assemblyId,
+          addedFeature: newFeature,
+        })
+        const session = getSession(self)
+        await (
+          session as unknown as ApolloSessionModel
+        ).apolloDataStore.changeManager.submit?.(change)
+        session.notify('Annotation added successfully', 'success')
+      },
+    }))
+    .views((self) => {
+      const superContextMenuItems = self.contextMenuItems
+      return {
+        contextMenuItems() {
+          const feature = self.contextMenuFeature
+          if (!feature) {
+            return superContextMenuItems()
+          }
+          return [
+            ...superContextMenuItems(),
+            {
+              label: 'Create Apollo annotation',
+              icon: AddIcon,
+              onClick: self.onPileupFeatureContext,
+            },
+          ]
+        },
+      }
+    })
+  ;(pluggableElement as DisplayType).stateModel = newStateModel
+  return pluggableElement
+}

package/src/extensions/index.ts

@@ -0,0 +1 @@
+export * from './annotationFromPileup'