@apollo-annotation/jbrowse-plugin-apollo 0.1.18 → 0.1.20

package/src/TabularEditor/HybridGrid/featureContextMenuItems.ts

@@ -1,6 +1,10 @@
-import { AnnotationFeatureI } from '@apollo-annotation/mst'
+import { AnnotationFeature } from '@apollo-annotation/mst'
 import { MenuItem } from '@jbrowse/core/ui'
-import { AbstractSessionModel } from '@jbrowse/core/util'
+import {
+  AbstractSessionModel,
+  SessionWithWidgets,
+  isSessionModelWithWidgets,
+} from '@jbrowse/core/util'
 
 import { ChangeManager } from '../../ChangeManager'
 import {
@@ -13,11 +17,11 @@ import { ApolloSessionModel } from '../../session'
 import { getApolloInternetAccount } from '../../util'
 
 export function featureContextMenuItems(
-  feature: AnnotationFeatureI | undefined,
+  feature: AnnotationFeature | undefined,
   region: { assemblyName: string; refName: string; start: number; end: number },
   getAssemblyId: (assemblyName: string) => string,
-  selectedFeature: AnnotationFeatureI | undefined,
-  setSelectedFeature: (f: AnnotationFeatureI | undefined) => void,
+  selectedFeature: AnnotationFeature | undefined,
+  setSelectedFeature: (f: AnnotationFeature | undefined) => void,
   session: ApolloSessionModel,
   changeManager: ChangeManager,
 ) {
@@ -30,6 +34,25 @@ export function featureContextMenuItems(
     const sourceAssemblyId = getAssemblyId(region.assemblyName)
     const currentAssemblyId = getAssemblyId(region.assemblyName)
     menuItems.push(
+      {
+        label: 'Edit feature details',
+        onClick: () => {
+          const apolloFeatureWidget = (
+            session as unknown as SessionWithWidgets
+          ).addWidget(
+            'ApolloFeatureDetailsWidget',
+            'apolloFeatureDetailsWidget',
+            {
+              feature,
+              assembly: currentAssemblyId,
+              refName: region.refName,
+            },
+          )
+          ;(session as unknown as SessionWithWidgets).showWidget(
+            apolloFeatureWidget,
+          )
+        },
+      },
       {
         label: 'Add child feature',
         disabled: readOnly,
@@ -114,6 +137,24 @@ export function featureContextMenuItems(
         },
       },
     )
+    if (feature.type === 'mRNA' && isSessionModelWithWidgets(session)) {
+      menuItems.push({
+        label: 'Edit transcript details',
+        onClick: () => {
+          const apolloTranscriptWidget = session.addWidget(
+            'ApolloTranscriptDetails',
+            'apolloTranscriptDetails',
+            {
+              feature,
+              assembly: currentAssemblyId,
+              changeManager,
+              refName: region.refName,
+            },
+          )
+          session.showWidget(apolloTranscriptWidget)
+        },
+      })
+    }
   }
   return menuItems
 }

package/src/TabularEditor/model.ts

@@ -39,6 +39,8 @@ export const TabularEditorStateModelType = types
     // },
   }))
 
-export type TabularEditorStateModel = Instance<
-  typeof TabularEditorStateModelType
->
+// eslint disable because of
+// https://mobx-state-tree.js.org/tips/typescript#using-a-mst-type-at-design-time
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface TabularEditorStateModel
+  extends Instance<typeof TabularEditorStateModelType> {}

package/src/components/AddAssembly.tsx

@@ -103,15 +103,19 @@ export function AddAssembly({
     }
     const selectedFile = e.target.files.item(0)
     setFile(selectedFile)
+    if (!selectedFile) {
+      return
+    }
+    const fileNameLower = selectedFile.name.toLowerCase()
     if (
-      selectedFile?.name.toLowerCase().endsWith('.fasta') ??
-      selectedFile?.name.toLowerCase().endsWith('.fna') ??
-      selectedFile?.name.toLowerCase().endsWith('.fa')
+      fileNameLower.endsWith('.fasta') ||
+      fileNameLower.endsWith('.fna') ||
+      fileNameLower.endsWith('.fa')
     ) {
       setFileType(FileType.FASTA)
     } else if (
-      selectedFile?.name.toLowerCase().endsWith('.gff3') ??
-      selectedFile?.name.toLowerCase().endsWith('.gff')
+      fileNameLower.endsWith('.gff3') ||
+      fileNameLower.endsWith('.gff')
     ) {
       setFileType(FileType.GFF3)
     }
@@ -168,19 +172,21 @@ export function AddAssembly({
     const { baseURL, getFetcher, internetAccountId } = selectedInternetAccount
     if (fileType !== FileType.EXTERNAL && file) {
       // First upload file
-      const url = new URL('files', baseURL).href
+      const url = new URL('files', baseURL)
+      url.searchParams.set('type', fileType)
+      const uri = url.href
       const formData = new FormData()
       formData.append('file', file)
       formData.append('fileName', file.name)
       formData.append('type', fileType)
       const apolloFetchFile = getFetcher({
         locationType: 'UriLocation',
-        uri: url,
+        uri,
       })
       if (apolloFetchFile) {
         jobsManager.update(job.name, 'Uploading file, this may take awhile')
         const { signal } = controller
-        const response = await apolloFetchFile(url, {
+        const response = await apolloFetchFile(uri, {
           method: 'POST',
           body: formData,
           signal,
@@ -219,7 +225,7 @@ export function AddAssembly({
       const fileUploadChangeBase = {
         assembly: new ObjectID().toHexString(),
         assemblyName,
-        fileId,
+        fileIds: { fa: fileId },
       }
       change =
         fileType === FileType.GFF3 && importFeatures

package/src/components/AddChildFeature.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-misused-promises */
-import { AnnotationFeatureI } from '@apollo-annotation/mst'
+import { AnnotationFeature } from '@apollo-annotation/mst'
 import { AddFeatureChange } from '@apollo-annotation/shared'
 import { AbstractSessionModel } from '@jbrowse/core/util'
 import {
@@ -7,11 +7,6 @@ import {
   DialogActions,
   DialogContent,
   DialogContentText,
-  FormControl,
-  InputLabel,
-  MenuItem,
-  Select,
-  SelectChangeEvent,
   TextField,
 } from '@mui/material'
 import ObjectID from 'bson-objectid'
@@ -28,17 +23,11 @@ import { OntologyTermAutocomplete } from './OntologyTermAutocomplete'
 interface AddChildFeatureProps {
   session: ApolloSessionModel
   handleClose(): void
-  sourceFeature: AnnotationFeatureI
+  sourceFeature: AnnotationFeature
   sourceAssemblyId: string
   changeManager: ChangeManager
 }
 
-enum PhaseEnum {
-  zero = 0,
-  one = 1,
-  two = 2,
-}
-
 export function AddChildFeature({
   changeManager,
   handleClose,
@@ -47,17 +36,14 @@ export function AddChildFeature({
   sourceFeature,
 }: AddChildFeatureProps) {
   const { notify } = session as unknown as AbstractSessionModel
-  const [end, setEnd] = useState(String(sourceFeature.end))
-  const [start, setStart] = useState(String(sourceFeature.start + 1))
+  const [end, setEnd] = useState(String(sourceFeature.max))
+  const [start, setStart] = useState(String(sourceFeature.min + 1))
   const [type, setType] = useState('')
-  const [phase, setPhase] = useState('')
-  const [phaseAsNumber, setPhaseAsNumber] = useState<PhaseEnum>()
-  const [showPhase, setShowPhase] = useState<boolean>(false)
   const [errorMessage, setErrorMessage] = useState('')
   const [typeWarningText, setTypeWarningText] = useState('')
 
   async function fetchValidTerms(
-    parentFeature: AnnotationFeatureI | undefined,
+    parentFeature: AnnotationFeature | undefined,
     ontologyStore: OntologyStore,
     _signal: AbortSignal,
   ) {
@@ -78,22 +64,16 @@ export function AddChildFeature({
   async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
     event.preventDefault()
     setErrorMessage('')
-    if (showPhase && phase === '') {
-      setErrorMessage('The phase is REQUIRED for all CDS features.')
-      return
-    }
     const change = new AddFeatureChange({
       changedIds: [sourceFeature._id],
       typeName: 'AddFeatureChange',
       assembly: sourceAssemblyId,
       addedFeature: {
         _id: new ObjectID().toHexString(),
-        gffId: '',
         refSeq: sourceFeature.refSeq,
-        start: Number(start) - 1,
-        end: Number(end),
+        min: Number(start) - 1,
+        max: Number(end),
         type,
-        phase: phaseAsNumber,
       },
       parentFeatureId: sourceFeature._id,
     })
@@ -105,35 +85,6 @@ export function AddChildFeature({
   function handleChangeType(newType: string) {
     setErrorMessage('')
     setType(newType)
-    if (newType.startsWith('CDS')) {
-      setShowPhase(true)
-      setPhase('')
-    } else {
-      setShowPhase(false)
-    }
-  }
-  function handleChangePhase(e: SelectChangeEvent) {
-    setErrorMessage('')
-    setPhase(e.target.value)
-
-    switch (Number(e.target.value)) {
-      case 0: {
-        setPhaseAsNumber(PhaseEnum.zero)
-        break
-      }
-      case 1: {
-        setPhaseAsNumber(PhaseEnum.one)
-        break
-      }
-      case 2: {
-        setPhaseAsNumber(PhaseEnum.two)
-        break
-      }
-      default: {
-        // eslint-disable-next-line unicorn/no-useless-undefined
-        setPhaseAsNumber(undefined)
-      }
-    }
   }
   const error = Number(end) <= Number(start)
   return (
@@ -172,13 +123,6 @@ export function AddChildFeature({
             error={error}
             helperText={error ? '"End" must be greater than "Start"' : null}
           />
-          {/* <Select value={type} onChange={handleChangeType} label="Type">
-              {(possibleChildTypes ?? []).map((option) => (
-                <MenuItem key={option} value={option}>
-                  {option}
-                </MenuItem>
-              ))}
-            </Select> */}
           <OntologyTermAutocomplete
             session={session}
             ontologyName="Sequence Ontology"
@@ -202,16 +146,6 @@ export function AddChildFeature({
               }
             }}
           />
-          {showPhase ? (
-            <FormControl>
-              <InputLabel>Phase</InputLabel>
-              <Select value={phase} onChange={handleChangePhase}>
-                <MenuItem value={0}>0</MenuItem>
-                <MenuItem value={1}>1</MenuItem>
-                <MenuItem value={2}>2</MenuItem>
-              </Select>
-            </FormControl>
-          ) : null}
         </DialogContent>
         <DialogActions>
           <Button

package/src/components/AddFeature.tsx

@@ -30,12 +30,6 @@ interface AddFeatureProps {
   changeManager: ChangeManager
 }
 
-enum PhaseEnum {
-  zero = 0,
-  one = 1,
-  two = 2,
-}
-
 export function AddFeature({
   changeManager,
   handleClose,
@@ -46,19 +40,12 @@ export function AddFeature({
   const [end, setEnd] = useState(String(region.end))
   const [start, setStart] = useState(String(region.start + 1))
   const [type, setType] = useState('')
-  const [phase, setPhase] = useState('')
   const [strand, setStrand] = useState<1 | -1 | undefined>()
-  const [phaseAsNumber, setPhaseAsNumber] = useState<PhaseEnum>()
-  const [showPhase, setShowPhase] = useState<boolean>(false)
   const [errorMessage, setErrorMessage] = useState('')
 
   async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
     event.preventDefault()
     setErrorMessage('')
-    if (showPhase && phase === '') {
-      setErrorMessage('The phase is REQUIRED for all CDS features.')
-      return
-    }
 
     let refSeqId
     for (const [, asm] of session.apolloDataStore.assemblies ?? new Map()) {
@@ -83,12 +70,10 @@ export function AddFeature({
       assembly: region.assemblyName,
       addedFeature: {
         _id: id,
-        gffId: '',
         refSeq: refSeqId,
-        start: Number(start) - 1,
-        end: Number(end),
+        min: Number(start) - 1,
+        max: Number(end),
         type,
-        phase: phaseAsNumber,
         strand,
       },
     })
@@ -101,12 +86,6 @@ export function AddFeature({
   function handleChangeType(newType: string) {
     setErrorMessage('')
     setType(newType)
-    if (newType.startsWith('CDS')) {
-      setShowPhase(true)
-      setPhase('')
-    } else {
-      setShowPhase(false)
-    }
   }
 
   function handleChangeStrand(e: SelectChangeEvent) {
@@ -128,30 +107,6 @@ export function AddFeature({
     }
   }
 
-  function handleChangePhase(e: SelectChangeEvent) {
-    setErrorMessage('')
-    setPhase(e.target.value)
-
-    switch (Number(e.target.value)) {
-      case 0: {
-        setPhaseAsNumber(PhaseEnum.zero)
-        break
-      }
-      case 1: {
-        setPhaseAsNumber(PhaseEnum.one)
-        break
-      }
-      case 2: {
-        setPhaseAsNumber(PhaseEnum.two)
-        break
-      }
-      default: {
-        // eslint-disable-next-line unicorn/no-useless-undefined
-        setPhaseAsNumber(undefined)
-      }
-    }
-  }
-
   const error = Number(end) <= Number(start)
 
   return (
@@ -224,16 +179,6 @@ export function AddFeature({
               <MenuItem value={-1}>-</MenuItem>
             </Select>
           </FormControl>
-          {showPhase ? (
-            <FormControl>
-              <InputLabel>Phase</InputLabel>
-              <Select value={phase} onChange={handleChangePhase}>
-                <MenuItem value={0}>0</MenuItem>
-                <MenuItem value={1}>1</MenuItem>
-                <MenuItem value={2}>2</MenuItem>
-              </Select>
-            </FormControl>
-          ) : null}
         </DialogContent>
         <DialogActions>
           <Button

package/src/components/AddRefSeqAliases.tsx

@@ -0,0 +1,285 @@
+import { ChangeManager } from '../ChangeManager'
+import { ApolloSessionModel } from '../session'
+import { Dialog } from './Dialog'
+import {
+  Button,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  FormControl,
+  Grid,
+  InputLabel,
+  MenuItem,
+  Select,
+  SelectChangeEvent,
+} from '@mui/material'
+import React, { useEffect, useRef, useState } from 'react'
+import {
+  CollaborationServerDriver,
+  ApolloInternetAccount,
+} from '../BackendDrivers'
+import { Assembly } from '@jbrowse/core/assemblyManager/assembly'
+import { DataGrid, GridColDef, GridRowModel } from '@mui/x-data-grid'
+import {
+  AddRefSeqAliasesChange,
+  SerializedRefSeqAliases,
+} from '@apollo-annotation/shared'
+
+const columns: GridColDef[] = [
+  { field: 'refName', headerName: 'Ref Name' },
+  { field: 'aliases', headerName: 'Aliases', editable: true },
+]
+
+interface AddChildFeatureProps {
+  session: ApolloSessionModel
+  handleClose(): void
+  changeManager: ChangeManager
+}
+
+const isGeneratedObjectId = (key: string): boolean => {
+  const pattern = /^[\da-f]{24}$/i
+  return pattern.test(key)
+}
+
+export function AddRefSeqAliases({
+  changeManager,
+  handleClose,
+  session,
+}: AddChildFeatureProps) {
+  const fileRef = useRef<HTMLInputElement>(null)
+  const [errorMessage, setErrorMessage] = useState('')
+  const [enableSubmit, setEnableSubmit] = useState(false)
+  const [selectedAssembly, setSelectedAssembly] = useState<Assembly>()
+  const [selectedRows, setSelectedRows] = useState<
+    {
+      id: number
+      refName: string
+      aliases: string
+    }[]
+  >([])
+  const [refNameAliasMap, setRefNameAliasMap] = useState<Map<string, string[]>>(
+    new Map(),
+  )
+
+  const { apolloDataStore } = session
+  const { collaborationServerDriver } = apolloDataStore as {
+    collaborationServerDriver: CollaborationServerDriver
+    getInternetAccount(
+      assemblyName?: string,
+      internetAccountId?: string,
+    ): ApolloInternetAccount
+  }
+  const assemblies = collaborationServerDriver.getAssemblies()
+
+  useEffect(() => {
+    let retry = 0
+    const maxRetries = 2
+    const initializeRefNameAliasMap = () => {
+      if (!selectedAssembly) {
+        return
+      }
+      const initialMap = new Map<string, string[]>()
+      if (retry < maxRetries && !selectedAssembly.refNames) {
+        retry++
+        setTimeout(initializeRefNameAliasMap, 50)
+      }
+      if (!selectedAssembly.refNames) {
+        return
+      }
+      const refNameAliasess = selectedAssembly.refNameAliases
+      for (const key in refNameAliasess) {
+        const value = refNameAliasess[key]
+        if (!value || isGeneratedObjectId(key)) {
+          continue
+        }
+        if (initialMap.has(value)) {
+          const aliases = initialMap.get(value) ?? []
+          initialMap.set(value, [...aliases, key])
+        } else {
+          initialMap.set(value, [key])
+        }
+      }
+      setRefNameAliasMap(initialMap)
+    }
+
+    initializeRefNameAliasMap()
+  }, [selectedAssembly])
+
+  const handleChangeAssembly = (e: SelectChangeEvent) => {
+    const newAssembly = assemblies.find((asm) => asm.name === e.target.value)
+    setSelectedAssembly(newAssembly)
+    setEnableSubmit(false)
+    setErrorMessage('')
+    if (fileRef.current) {
+      fileRef.current.value = ''
+    }
+  }
+
+  const handleChangeFile = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!e.target.files) {
+      return
+    }
+    // eslint-disable-next-line prefer-destructuring
+    const file = e.target.files[0]
+    const fileContent = await file.text()
+    const lines = fileContent.split('\n')
+    const newMap = new Map(refNameAliasMap)
+    setErrorMessage('')
+    for (const line of lines) {
+      const aliases = line.split('\t')
+      for (const alias of aliases) {
+        if (newMap.has(alias)) {
+          newMap.set(alias, [...(newMap.get(alias) ?? []), ...aliases])
+        }
+      }
+    }
+    setRefNameAliasMap(newMap)
+  }
+
+  const handleChangeFileHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+    handleChangeFile(e).catch(() => {
+      setErrorMessage('Error reading file')
+    })
+  }
+
+  const rowSelectionChange = (ids: number[]) => {
+    if (ids.length > 0) {
+      setEnableSubmit(true)
+      const selectedRows = ids.flatMap((id) =>
+        getTableRows().filter((row) => row.id === id),
+      )
+      setSelectedRows(selectedRows)
+    } else {
+      setEnableSubmit(false)
+      setSelectedRows([])
+    }
+  }
+
+  const getTableRows = () => {
+    return [...refNameAliasMap].map((ele, i) => ({
+      id: i,
+      refName: ele[0],
+      aliases: ele[1].filter((alias) => alias !== ele[0]).join(', '),
+    }))
+  }
+
+  const processRowUpdate = (newRow: GridRowModel, _oldRow: GridRowModel) => {
+    const newMap = new Map(refNameAliasMap)
+    newMap.set(newRow.refName as string, (newRow.aliases as string).split(','))
+    setRefNameAliasMap(newMap)
+    return newRow
+  }
+
+  const handleSubmit = () => {
+    const refSeqAliases: SerializedRefSeqAliases[] = []
+    for (const row of selectedRows) {
+      const { refName } = row
+      const aliases: string[] = row.aliases
+        .split(',')
+        .map((alias) => alias.trim())
+        .filter((alias) => alias.length > 0)
+      refSeqAliases.push({
+        refName,
+        aliases,
+      })
+    }
+    setErrorMessage('')
+    if (!selectedAssembly) {
+      setErrorMessage('No assembly selected')
+      return
+    }
+    const change = new AddRefSeqAliasesChange({
+      typeName: 'AddRefSeqAliasesChange',
+      assembly: selectedAssembly.name,
+      refSeqAliases,
+    })
+    changeManager.submit(change).catch(() => {
+      setErrorMessage('Error submitting change')
+    })
+    handleClose()
+  }
+
+  return (
+    <Dialog
+      open
+      title="Add reference sequence aliases"
+      handleClose={handleClose}
+      maxWidth={'sm'}
+      data-testid="add-refseq-alias"
+      fullWidth
+    >
+      <DialogContent style={{ display: 'flex', flexDirection: 'column' }}>
+        <Grid container spacing={2}>
+          <Grid item xs={4}>
+            <FormControl disabled={enableSubmit && !errorMessage} fullWidth>
+              <InputLabel id="demo-simple-select-label">Assembly</InputLabel>
+              <Select
+                labelId="demo-simple-select-label"
+                id="demo-simple-select"
+                label="Assembly"
+                value={selectedAssembly?.name ?? ''}
+                onChange={handleChangeAssembly}
+              >
+                {assemblies.map((option) => (
+                  <MenuItem key={option.name} value={option.name}>
+                    {option.displayName ?? option.name}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          </Grid>
+          <Grid item xs={1}></Grid>
+          <Grid item xs={7}>
+            <InputLabel>Load RefName alias</InputLabel>
+            <input
+              type="file"
+              onChange={handleChangeFileHandler}
+              ref={fileRef}
+              disabled={(enableSubmit && !errorMessage) || !selectedAssembly}
+            />
+          </Grid>
+        </Grid>
+        {selectedAssembly && refNameAliasMap.size > 0 ? (
+          <div style={{ height: 200, width: '100%', marginTop: 20 }}>
+            <InputLabel>
+              Refname aliases found for selected assembly.
+            </InputLabel>
+            <DataGrid
+              rows={getTableRows()}
+              columns={columns}
+              initialState={{
+                pagination: {
+                  paginationModel: { page: 0, pageSize: 5 },
+                },
+              }}
+              pageSizeOptions={[5, 10]}
+              onRowSelectionModelChange={(ids) => {
+                rowSelectionChange(ids as number[])
+              }}
+              processRowUpdate={processRowUpdate}
+              checkboxSelection
+            ></DataGrid>
+          </div>
+        ) : null}
+      </DialogContent>
+      <DialogActions>
+        <Button
+          variant="contained"
+          type="submit"
+          disabled={!enableSubmit}
+          onClick={handleSubmit}
+        >
+          Submit
+        </Button>
+        <Button variant="outlined" type="submit" onClick={handleClose}>
+          Close
+        </Button>
+      </DialogActions>
+      {errorMessage ? (
+        <DialogContent>
+          <DialogContentText color="error">{errorMessage}</DialogContentText>
+        </DialogContent>
+      ) : null}
+    </Dialog>
+  )
+}