jbrowse-plugin-msaview 2.2.3 → 2.2.4

package/src/LaunchMsaView/components/LaunchMsaViewDialog.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react'
 
+import { readConfObject } from '@jbrowse/core/configuration'
 import { Dialog } from '@jbrowse/core/ui'
-import { AbstractTrackModel, Feature } from '@jbrowse/core/util'
+import { AbstractTrackModel, Feature, getSession } from '@jbrowse/core/util'
 import { Tab, Tabs } from '@mui/material'
 
 import EnsemblGeneTree from './EnsemblGeneTree/EnsemblGeneTree'
@@ -10,12 +11,7 @@ import NCBIBlastPanel from './NCBIBlastQuery/NCBIBlastPanel'
 import PreLoadedMSA from './PreLoadedMSA/PreLoadedMSADataPanel'
 import TabPanel from './TabPanel'
 
-const TABS = {
-  NCBI_BLAST: 0,
-  PRELOADED_MSA: 1,
-  ENSEMBL_GENETREE: 2,
-  MANUAL_MSA: 3,
-}
+import type { Dataset } from './PreLoadedMSA/types'
 
 export default function LaunchMsaViewDialog({
   handleClose,
@@ -26,42 +22,53 @@ export default function LaunchMsaViewDialog({
   feature: Feature
   model: AbstractTrackModel
 }) {
-  const [value, setValue] = useState(TABS.NCBI_BLAST)
+  const session = getSession(model)
+  const { jbrowse } = session
+  const datasets = readConfObject(jbrowse, ['msa', 'datasets']) as
+    | Dataset[]
+    | undefined
+  const hasPreloadedDatasets = datasets && datasets.length > 0
+
+  const [value, setValue] = useState('ncbi_blast')
 
-  const handleChange = (_event: React.SyntheticEvent, newValue: number) => {
+  const handleChange = (_event: React.SyntheticEvent, newValue: string) => {
     setValue(newValue)
   }
 
   return (
     <Dialog maxWidth="xl" title="Launch MSA view" open onClose={handleClose}>
       <Tabs value={value} onChange={handleChange}>
-        <Tab label="NCBI BLAST query" value={TABS.NCBI_BLAST} />
-        <Tab label="Pre-loaded MSA datasets" value={TABS.PRELOADED_MSA} />
-        <Tab label="Ensembl GeneTree" value={TABS.ENSEMBL_GENETREE} />
-        <Tab label="Manually open MSA dataset" value={TABS.MANUAL_MSA} />
+        <Tab label="NCBI BLAST query" value="ncbi_blast" />
+        {hasPreloadedDatasets ? (
+          <Tab label="Pre-loaded MSA datasets" value="preloaded_msa" />
+        ) : null}
+        <Tab label="Ensembl GeneTree" value="ensembl_genetree" />
+        <Tab label="Manual upload" value="manual_msa" />
       </Tabs>
-      <TabPanel value={value} index={TABS.NCBI_BLAST}>
+      <TabPanel value={value} index="ncbi_blast">
         <NCBIBlastPanel
           handleClose={handleClose}
           feature={feature}
           model={model}
         />
       </TabPanel>
-      <TabPanel value={value} index={TABS.PRELOADED_MSA}>
-        <PreLoadedMSA
-          model={model}
-          feature={feature}
-          handleClose={handleClose}
-        />
-      </TabPanel>
-      <TabPanel value={value} index={TABS.ENSEMBL_GENETREE}>
+      {hasPreloadedDatasets ? (
+        <TabPanel value={value} index="preloaded_msa">
+          <PreLoadedMSA
+            model={model}
+            feature={feature}
+            handleClose={handleClose}
+          />
+        </TabPanel>
+      ) : null}
+      <TabPanel value={value} index="ensembl_genetree">
         <EnsemblGeneTree
           model={model}
           feature={feature}
           handleClose={handleClose}
         />
       </TabPanel>
-      <TabPanel value={value} index={TABS.MANUAL_MSA}>
+      <TabPanel value={value} index="manual_msa">
         <ManualMSALoader
           model={model}
           feature={feature}

package/src/LaunchMsaView/components/ManualMSALoader/ManualMSALoader.tsx

@@ -8,8 +8,8 @@ import {
   getContainingView,
   getSession,
 } from '@jbrowse/core/util'
-import { openLocation } from '@jbrowse/core/util/io'
 import {
+  Alert,
   Button,
   DialogActions,
   DialogContent,
@@ -23,9 +23,9 @@ import { makeStyles } from 'tss-react/mui'
 
 import { launchView } from './launchView'
 import TextField2 from '../../../components/TextField2'
-import { getGeneDisplayName, getId, getTranscriptFeatures } from '../../util'
+import { getGeneDisplayName } from '../../util'
 import TranscriptSelector from '../TranscriptSelector'
-import { useFeatureSequence } from '../useFeatureSequence'
+import { useTranscriptSelection } from '../useTranscriptSelection'
 
 import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 
@@ -56,14 +56,14 @@ const ManualMSALoader = observer(function PreLoadedMSA2({
   const [treeText, setTreeText] = useState('')
   const [msaFileLocation, setMsaFileLocation] = useState<FileLocation>()
   const [treeFileLocation, setTreeFileLocation] = useState<FileLocation>()
-  const options = getTranscriptFeatures(feature)
-  const [userSelection, setUserSelection] = useState(getId(options[0]))
-  const ret = options.find(val => userSelection === getId(val))
-  const selectedTranscript = options.find(val => getId(val) === userSelection)!
-  const { proteinSequence, error: error2 } = useFeatureSequence({
-    view,
-    feature: selectedTranscript,
-  })
+  const [querySeqName, setQuerySeqName] = useState('')
+  const {
+    options,
+    setSelectedId,
+    selectedTranscript,
+    proteinSequence,
+    error: error2,
+  } = useTranscriptSelection({ feature, view })
 
   const e = launchViewError ?? error2
   return (
@@ -143,10 +143,32 @@ const ManualMSALoader = observer(function PreLoadedMSA2({
         <TranscriptSelector
           feature={feature}
           options={options}
-          selectedTranscriptId={userSelection}
-          onTranscriptChange={setUserSelection}
+          selectedTranscript={selectedTranscript}
+          onTranscriptChange={setSelectedId}
           proteinSequence={proteinSequence}
         />
+
+        <TextField2
+          variant="outlined"
+          name="MSA row name"
+          fullWidth
+          required
+          style={{ marginTop: 20 }}
+          placeholder="Row name in MSA that corresponds to the selected transcript"
+          helperText="Required: Specify the name of the row in your MSA that should be aligned with the selected transcript"
+          value={querySeqName}
+          onChange={event => {
+            setQuerySeqName(event.target.value)
+          }}
+        />
+
+        {!querySeqName.trim() && (
+          <Alert severity="warning" style={{ marginTop: 10 }}>
+            Without specifying the MSA row name, clicking on the MSA will not
+            navigate to the corresponding genome position, and hovering
+            highlights will not work.
+          </Alert>
+        )}
       </DialogContent>
 
       <DialogActions>
@@ -154,50 +176,41 @@ const ManualMSALoader = observer(function PreLoadedMSA2({
           color="primary"
           variant="contained"
           disabled={
-            !ret ||
+            !selectedTranscript ||
             (inputMethod === 'file' && !msaFileLocation) ||
             (inputMethod === 'text' && !msaText.trim())
           }
           onClick={() => {
-            // eslint-disable-next-line @typescript-eslint/no-floating-promises
-            ;(async () => {
-              try {
-                if (!ret) {
-                  return
-                }
+            try {
+              if (!selectedTranscript) {
+                return
+              }
 
-                setLaunchViewError(undefined)
-                launchView({
-                  session,
-                  newViewTitle: getGeneDisplayName(ret),
-                  view,
-                  feature: ret,
-                  data:
-                    inputMethod === 'file'
-                      ? {
-                          msa: msaFileLocation
-                            ? await openLocation(msaFileLocation).readFile(
-                                'utf8',
-                              )
-                            : '',
-                          tree: treeFileLocation
-                            ? await openLocation(treeFileLocation).readFile(
-                                'utf8',
-                              )
-                            : undefined,
-                        }
-                      : {
-                          msa: msaText,
-                          tree: treeText,
-                        },
-                })
+              setLaunchViewError(undefined)
+              launchView({
+                session,
+                newViewTitle: getGeneDisplayName(selectedTranscript),
+                view,
+                feature: selectedTranscript,
+                querySeqName: querySeqName.trim() || undefined,
+                ...(inputMethod === 'file'
+                  ? {
+                      msaFilehandle: msaFileLocation,
+                      treeFilehandle: treeFileLocation,
+                    }
+                  : {
+                      data: {
+                        msa: msaText,
+                        tree: treeText || undefined,
+                      },
+                    }),
+              })
 
-                handleClose()
-              } catch (e) {
-                console.error(e)
-                setLaunchViewError(e)
-              }
-            })()
+              handleClose()
+            } catch (e) {
+              console.error(e)
+              setLaunchViewError(e)
+            }
           }}
         >
           Submit

package/src/LaunchMsaView/components/ManualMSALoader/launchView.ts

@@ -7,16 +7,18 @@ export function launchView({
   newViewTitle,
   view,
   feature,
-  msaFileLocation,
-  treeFileLocation,
+  msaFilehandle,
+  treeFilehandle,
+  querySeqName,
   data,
 }: {
   session: AbstractSessionModel
   newViewTitle: string
   view: LinearGenomeViewModel
   feature: Feature
-  msaFileLocation?: FileLocation
-  treeFileLocation?: FileLocation
+  msaFilehandle?: FileLocation
+  treeFilehandle?: FileLocation
+  querySeqName?: string
   data?: {
     msa: string
     tree?: string
@@ -27,8 +29,9 @@ export function launchView({
     displayName: newViewTitle,
     connectedViewId: view.id,
     connectedFeature: feature.toJSON(),
-    msaFileLocation,
-    treeFileLocation,
+    msaFilehandle,
+    treeFilehandle,
+    querySeqName,
     data,
   })
 }

package/src/LaunchMsaView/components/NCBIBlastQuery/CachedBlastResults.tsx

@@ -0,0 +1,146 @@
+import React, { useEffect, useState } from 'react'
+
+import { Feature, getContainingView } from '@jbrowse/core/util'
+import DeleteIcon from '@mui/icons-material/Delete'
+import {
+  Button,
+  IconButton,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemText,
+  Typography,
+} from '@mui/material'
+import { observer } from 'mobx-react'
+
+import { blastLaunchViewFromCache } from './blastLaunchView'
+import {
+  clearAllCachedResults,
+  deleteCachedResult,
+  getAllCachedResults,
+} from '../../../utils/blastCache'
+
+import type { CachedBlastResult } from '../../../utils/blastCache'
+import type { AbstractTrackModel } from '@jbrowse/core/util'
+import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+
+const CachedBlastResults = observer(function ({
+  model,
+  handleClose,
+  feature,
+}: {
+  model: AbstractTrackModel
+  handleClose: () => void
+  feature: Feature
+}) {
+  const [results, setResults] = useState<CachedBlastResult[]>([])
+  const [loading, setLoading] = useState(true)
+  const view = getContainingView(model) as LinearGenomeViewModel
+
+  const geneId = feature.get('id')
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    ;(async () => {
+      try {
+        const cached = await getAllCachedResults()
+        setResults(cached.filter(r => r.geneId === geneId))
+        setLoading(false)
+      } catch (e) {
+        console.error(e)
+      }
+    })()
+  }, [geneId])
+
+  const handleDelete = async (id: string) => {
+    await deleteCachedResult(id)
+    setResults(r => r.filter(result => result.id !== id))
+  }
+
+  const handleClearAll = async () => {
+    await clearAllCachedResults()
+    setResults([])
+  }
+
+  const handleUseCached = (cached: CachedBlastResult) => {
+    blastLaunchViewFromCache({
+      view,
+      cached,
+      newViewTitle: `BLAST - ${cached.geneId ?? cached.transcriptId ?? 'Unknown gene'}`,
+    })
+    handleClose()
+  }
+
+  if (loading) {
+    return <Typography>Loading cached results...</Typography>
+  }
+
+  if (results.length === 0) {
+    return (
+      <Typography color="textSecondary">
+        No cached BLAST results found for this gene. Run a BLAST query to cache
+        results.
+      </Typography>
+    )
+  }
+
+  return (
+    <div>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginBottom: 8,
+        }}
+      >
+        <Typography variant="subtitle1">
+          Cached BLAST Results ({results.length})
+        </Typography>
+        <Button
+          size="small"
+          color="error"
+          onClick={() => {
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+            handleClearAll()
+          }}
+        >
+          Clear All
+        </Button>
+      </div>
+      <List dense style={{ maxHeight: 300, overflow: 'auto' }}>
+        {results.map(result => (
+          <ListItem
+            key={result.id}
+            disablePadding
+            secondaryAction={
+              <IconButton
+                edge="end"
+                size="small"
+                onClick={e => {
+                  e.stopPropagation()
+                  // eslint-disable-next-line @typescript-eslint/no-floating-promises
+                  handleDelete(result.id)
+                }}
+              >
+                <DeleteIcon fontSize="small" />
+              </IconButton>
+            }
+          >
+            <ListItemButton
+              onClick={() => {
+                handleUseCached(result)
+              }}
+            >
+              <ListItemText
+                primary={`${result.geneId ?? result.transcriptId ?? 'Unknown'} - ${result.blastDatabase}/${result.blastProgram} (${result.msaAlgorithm})`}
+                secondary={`${new Date(result.timestamp).toLocaleString()} - Seq: ${result.proteinSequence.slice(0, 30)}...`}
+              />
+            </ListItemButton>
+          </ListItem>
+        ))}
+      </List>
+    </div>
+  )
+})
+
+export default CachedBlastResults

package/src/LaunchMsaView/components/NCBIBlastQuery/NCBIBlastAutomaticPanel.tsx

@@ -6,8 +6,11 @@ import {
   Feature,
   getContainingView,
 } from '@jbrowse/core/util'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import {
-  Box,
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
   Button,
   DialogActions,
   DialogContent,
@@ -17,16 +20,13 @@ import {
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
+import CachedBlastResults from './CachedBlastResults'
 import { blastLaunchView } from './blastLaunchView'
 import TextField2 from '../../../components/TextField2'
-import {
-  getGeneDisplayName,
-  getId,
-  getTranscriptDisplayName,
-  getTranscriptFeatures,
-} from '../../util'
+import { getAllCachedResults } from '../../../utils/blastCache'
+import { getGeneDisplayName, getTranscriptDisplayName } from '../../util'
 import TranscriptSelector from '../TranscriptSelector'
-import { useFeatureSequence } from '../useFeatureSequence'
+import { useTranscriptSelection } from '../useTranscriptSelection'
 
 import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 
@@ -67,26 +67,39 @@ const NCBIBlastAutomaticPanel = observer(function ({
     useState<blastDatabaseOptionsT>('nr')
   const [selectedMsaAlgorithm, setSelectedMsaAlgorithm] =
     useState<msaAlgorithmsT>('clustalo')
-  const options = getTranscriptFeatures(feature)
-  const [selectedTranscriptId, setSelectedTranscriptId] = useState(
-    getId(options[0]),
-  )
   const [selectedBlastProgram, setSelectedBlastProgram] =
     useState<blastProgramsT>('quick-blastp')
-  const selectedTranscript = options.find(
-    val => getId(val) === selectedTranscriptId,
-  )!
-  const { error: proteinSequenceError, proteinSequence } = useFeatureSequence({
-    view,
-    feature: selectedTranscript,
-  })
+  const [hasCachedResults, setHasCachedResults] = useState(false)
+  const [error, setError] = useState<unknown>()
+
+  const geneId = feature.get('id')
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    ;(async () => {
+      try {
+        const results = await getAllCachedResults()
+        setHasCachedResults(results.some(r => r.geneId === geneId))
+      } catch (e) {
+        console.error(e)
+        setError(e)
+      }
+    })()
+  }, [geneId])
+
+  const {
+    options,
+    setSelectedId,
+    selectedTranscript,
+    proteinSequence,
+    error: proteinSequenceError,
+  } = useTranscriptSelection({ feature, view })
 
   useEffect(() => {
     if (selectedBlastDatabase === 'nr_cluster_seq') {
       setSelectedBlastProgram('blastp')
     }
   }, [selectedBlastDatabase])
-  const e = proteinSequenceError ?? launchViewError
+  const e = proteinSequenceError ?? launchViewError ?? error
   const style = { width: 150 }
   return (
     <>
@@ -167,8 +180,8 @@ const NCBIBlastAutomaticPanel = observer(function ({
         <TranscriptSelector
           feature={feature}
           options={options}
-          selectedTranscriptId={selectedTranscriptId}
-          onTranscriptChange={setSelectedTranscriptId}
+          selectedTranscript={selectedTranscript}
+          onTranscriptChange={setSelectedId}
           proteinSequence={proteinSequence}
         />
 
@@ -182,6 +195,21 @@ const NCBIBlastAutomaticPanel = observer(function ({
           you need a COBALT alignment, please use the manual approach of
           submitting BLAST yourself and downloading the resulting files
         </Typography>
+
+        {hasCachedResults ? (
+          <Accordion style={{ marginTop: 20 }}>
+            <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+              <Typography>Previous BLAST Results</Typography>
+            </AccordionSummary>
+            <AccordionDetails>
+              <CachedBlastResults
+                model={model}
+                handleClose={handleClose}
+                feature={feature}
+              />
+            </AccordionDetails>
+          </Accordion>
+        ) : null}
       </DialogContent>
       <DialogActions>
         <Button
@@ -189,6 +217,9 @@ const NCBIBlastAutomaticPanel = observer(function ({
           variant="contained"
           onClick={() => {
             try {
+              if (!selectedTranscript) {
+                return
+              }
               setLaunchViewError(undefined)
               blastLaunchView({
                 feature: selectedTranscript,

package/src/LaunchMsaView/components/NCBIBlastQuery/NCBIBlastManualPanel.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React from 'react'
 
 import { ErrorMessage } from '@jbrowse/core/ui'
 import { getContainingView, shorten2 } from '@jbrowse/core/util'
@@ -7,9 +7,9 @@ import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
 import ExternalLink from '../../../components/ExternalLink'
-import { getId, getTranscriptFeatures } from '../../util'
+import { cleanProteinSequence } from '../../util'
 import TranscriptSelector from '../TranscriptSelector'
-import { useFeatureSequence } from '../useFeatureSequence'
+import { useTranscriptSelection } from '../useTranscriptSelection'
 
 import type { AbstractTrackModel, Feature } from '@jbrowse/core/util'
 import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
@@ -43,15 +43,10 @@ const NCBIBlastManualPanel = observer(function ({
 }) {
   const { classes } = useStyles()
   const view = getContainingView(model) as LinearGenomeViewModel
-  const options = getTranscriptFeatures(feature)
-  const [userSelection, setUserSelection] = useState(getId(options[0]))
-  const selectedTranscript = options.find(val => getId(val) === userSelection)!
-  const { proteinSequence, error } = useFeatureSequence({
-    view,
-    feature: selectedTranscript,
-  })
+  const { options, setSelectedId, selectedTranscript, proteinSequence, error } =
+    useTranscriptSelection({ feature, view })
 
-  const s2 = proteinSequence.replaceAll('*', '').replaceAll('&', '')
+  const s2 = cleanProteinSequence(proteinSequence)
   const link = `${baseUrl}?PAGE_TYPE=BlastSearch&PAGE=Proteins&PROGRAM=blastp&QUERY=${s2}`
   const link2 = `${baseUrl}?PAGE_TYPE=BlastSearch&PAGE=Proteins&PROGRAM=blastp&QUERY=${shorten2(s2, 10)}`
 
@@ -64,8 +59,8 @@ const NCBIBlastManualPanel = observer(function ({
         <TranscriptSelector
           feature={feature}
           options={options}
-          selectedTranscriptId={userSelection}
-          onTranscriptChange={setUserSelection}
+          selectedTranscript={selectedTranscript}
+          onTranscriptChange={setSelectedId}
           proteinSequence={proteinSequence}
         />
 

package/src/LaunchMsaView/components/NCBIBlastQuery/blastLaunchView.ts

@@ -1,6 +1,7 @@
 import { Feature, getSession } from '@jbrowse/core/util'
 
 import type { JBrowsePluginMsaViewModel } from '../../../MsaViewPanel/model'
+import type { CachedBlastResult } from '../../../utils/blastCache'
 import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 
 export function blastLaunchView({
@@ -25,3 +26,27 @@ export function blastLaunchView({
     blastParams,
   }) as JBrowsePluginMsaViewModel
 }
+
+export function blastLaunchViewFromCache({
+  newViewTitle,
+  view,
+  cached,
+}: {
+  newViewTitle: string
+  view: LinearGenomeViewModel
+  cached: CachedBlastResult
+}) {
+  return getSession(view).addView('MsaView', {
+    type: 'MsaView',
+    displayName: newViewTitle,
+    connectedViewId: view.id,
+    drawNodeBubbles: true,
+    colWidth: 10,
+    rowHeight: 12,
+    data: {
+      msa: cached.msa,
+      tree: cached.tree,
+      treeMetadata: cached.treeMetadata,
+    },
+  }) as JBrowsePluginMsaViewModel
+}