jbrowse-plugin-msaview 3.2.0 → 3.4.0

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

@@ -5,7 +5,6 @@ import { FormControl, FormControlLabel, Radio, RadioGroup } from '@mui/material'
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
-import { launchView } from './launchView'
 import TextField2 from '../../../components/TextField2'
 import { useQueryRowName } from '../../useQueryRowName'
 import { getGeneDisplayName, getLinearGenomeView } from '../../util'
@@ -14,6 +13,7 @@ import QueryRowSelector from '../QueryRowSelector'
 import SubmitCancelActions from '../SubmitCancelActions'
 import TranscriptSelector from '../TranscriptSelector'
 import { useTranscriptSelection } from '../useTranscriptSelection'
+import { launchView } from './launchView'
 
 import type {
   AbstractTrackModel,

package/src/LaunchMsaView/components/OrthologQuery/OrthologPanel.tsx

@@ -4,10 +4,9 @@ import { Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
-import QuerySpeciesSelect from './QuerySpeciesSelect'
-import { orthologLaunchView } from './orthologLaunchView'
 import TextField2 from '../../../components/TextField2'
 import { defaultMaxSpecies } from '../../../utils/ncbiOrthologs'
+import { useLocalStorage } from '../../../utils/useLocalStorage'
 import {
   getGeneDisplayName,
   getGeneIdentifiers,
@@ -19,7 +18,13 @@ import LaunchPanelContent from '../LaunchPanelContent'
 import SubmitCancelActions from '../SubmitCancelActions'
 import TranscriptSelector from '../TranscriptSelector'
 import { useTranscriptSelection } from '../useTranscriptSelection'
+import OrthologSourceSelect, {
+  ORTHOLOG_SOURCE_STORAGE_KEY,
+} from './OrthologSourceSelect'
+import QuerySpeciesSelect from './QuerySpeciesSelect'
+import { orthologLaunchView } from './orthologLaunchView'
 
+import type { OrthologSource } from '../../../MsaViewPanel/model'
 import type { MsaAlgorithm } from '../BlastQuery/consts'
 import type { AbstractTrackModel, Feature } from '@jbrowse/core/util'
 
@@ -42,6 +47,10 @@ const OrthologPanel = observer(function ({
   const view = getLinearGenomeView(model)
   const [launchViewError, setLaunchViewError] = useState<unknown>()
   const [taxId, setTaxId] = useState(9606)
+  const [source, setSource] = useLocalStorage<OrthologSource>(
+    ORTHOLOG_SOURCE_STORAGE_KEY,
+    'ncbi',
+  )
   const [msaAlgorithm, setMsaAlgorithm] = useState<MsaAlgorithm>('clustalo')
   const [maxSpecies, setMaxSpecies] = useState(String(defaultMaxSpecies))
 
@@ -65,11 +74,17 @@ const OrthologPanel = observer(function ({
             instant, and it is now the aligner that costs the wait, about half a
             second per row. */}
         <Typography variant="body2">
-          NCBI&apos;s precomputed orthologs, one gene per species, looked up
-          rather than searched for. No BLAST job to queue.
+          Precomputed orthologs, one gene per species, looked up rather than
+          searched for. No BLAST job to queue.
         </Typography>
 
         <div>
+          <OrthologSourceSelect
+            className={classes.selectField}
+            value={source}
+            onChange={setSource}
+          />
+
           <QuerySpeciesSelect
             className={classes.selectField}
             value={taxId}
@@ -93,7 +108,7 @@ const OrthologPanel = observer(function ({
               setMaxSpecies(event.target.value)
             }}
             error={!rowCountValid}
-            helperText="the closest N species NCBI has"
+            helperText={`the closest N species ${source === 'panther' ? 'PANTHER' : 'NCBI'} has`}
           />
         </div>
 
@@ -112,6 +127,7 @@ const OrthologPanel = observer(function ({
                 newViewTitle: `Orthologs - ${getGeneDisplayName(feature)} - ${getTranscriptDisplayName(selectedTranscript)}`,
                 orthologParams: {
                   taxId,
+                  source,
                   maxSpecies: rowCount,
                   geneCandidates,
                   msaAlgorithm,

package/src/LaunchMsaView/components/OrthologQuery/OrthologSourceSelect.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+
+import { MenuItem } from '@mui/material'
+
+import TextField2 from '../../../components/TextField2'
+
+import type { OrthologSource } from '../../../MsaViewPanel/model'
+
+export const ORTHOLOG_SOURCE_STORAGE_KEY = 'msaview-ortholog-source'
+
+export const orthologSourceLabels: Record<OrthologSource, string> = {
+  ncbi: 'NCBI orthologs',
+  panther: 'PANTHER',
+}
+
+// Which species a source can answer for, in the words a reader picking one
+// needs: NCBI's ortholog sets stop at vertebrates and insects, PANTHER's run
+// from human to yeast and Arabidopsis.
+const hints: Record<OrthologSource, string> = {
+  ncbi: 'vertebrates and insects',
+  panther: 'also yeast, worm, fly and plants',
+}
+
+export default function OrthologSourceSelect({
+  value,
+  onChange,
+  className,
+}: {
+  value: OrthologSource
+  onChange: (val: OrthologSource) => void
+  className?: string
+}) {
+  return (
+    <TextField2
+      variant="outlined"
+      label="Source"
+      className={className}
+      select
+      value={value}
+      helperText={hints[value]}
+      onChange={event => {
+        onChange(event.target.value as OrthologSource)
+      }}
+    >
+      {(Object.keys(orthologSourceLabels) as OrthologSource[]).map(val => (
+        <MenuItem value={val} key={val}>
+          {orthologSourceLabels[val]}
+        </MenuItem>
+      ))}
+    </TextField2>
+  )
+}

package/src/LaunchMsaView/components/SubmitCancelActions.test.tsx

@@ -4,8 +4,8 @@ import React from 'react'
 import { cleanup, render, screen } from '@testing-library/react'
 import { afterEach, beforeEach, expect, test, vi } from 'vitest'
 
-import SubmitCancelActions from './SubmitCancelActions'
 import { LAUNCH_PLACEMENT_KEY } from '../../utils/workspaces'
+import SubmitCancelActions from './SubmitCancelActions'
 
 import type { AbstractTrackModel } from '@jbrowse/core/util'
 

package/src/LaunchMsaView/components/useFeatureSequence.ts

@@ -1,8 +1,8 @@
 import { getSession } from '@jbrowse/core/util'
 
+import { useFetch } from '../../utils/useFetch'
 import { getProteinSequenceFromFeature } from './calculateProteinSequence'
 import { fetchSeq } from './fetchSeq'
-import { useFetch } from '../../utils/useFetch'
 
 import type { Feature } from '@jbrowse/core/util'
 

package/src/LaunchMsaView/detectQueryRow.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, test } from 'vitest'
 
-import { detectQueryRow, getMsaRowNames } from './detectQueryRow'
+import { findQueryRow } from './detectQueryRow'
 
 const protein = 'MKWVTFISLLLLFSSAYSRGVFRRDTHKSEIAHRFKDLGEEHFKGLVLIAFSQYLQQCPFD'
 
@@ -18,25 +18,25 @@ MKWVTFISLLLLFSSAYSRGVFRRDTHKSEIAHRFKDLGEEHFKGLVLIAFSQYLQQCPFD
 MKWVTFISLLLLFSSAYSRG--RRDTHKSEIAHRFKDLGEEHFKGLVLIAFSQYLQQCPYD
 `
 
-describe('detectQueryRow', () => {
+describe('findQueryRow', () => {
   test('finds the query by sequence when the aligner renamed it', () => {
-    expect(detectQueryRow(clustal, protein)).toMatchObject({
+    expect(findQueryRow(clustal, protein).match).toMatchObject({
       name: 'Query_1',
       quality: 'exact',
     })
   })
 
   test('ignores gaps in the aligned row', () => {
-    expect(detectQueryRow(fasta, protein)?.name).toBe('Query_1')
+    expect(findQueryRow(fasta, protein).match?.name).toBe('Query_1')
   })
 
   test('tolerates the trailing stop codon the translation carries', () => {
-    expect(detectQueryRow(clustal, `${protein}*`)?.name).toBe('Query_1')
+    expect(findQueryRow(clustal, `${protein}*`).match?.name).toBe('Query_1')
   })
 
   test('matches a row that is the query trimmed to the aligned region', () => {
     const trimmed = `>hit_one\nWRONGWRONGWRONGWRONG\n>aligned_query\n${protein.slice(5, 40)}\n`
-    expect(detectQueryRow(trimmed, protein)).toMatchObject({
+    expect(findQueryRow(trimmed, protein).match).toMatchObject({
       name: 'aligned_query',
       quality: 'partial',
     })
@@ -51,21 +51,23 @@ MKWVTFISLLLLFSSAYSRGVFRRDTHKSEIAHRFKDLGEEHFKGLVLIAFSQYLQQCPFD
 MKWVTFISLLLLFSSAYSRGVFRRDTHKSEIAHRFKDLGEEHFKGLVLIAFSQYLQQCPFD
 `
     expect(
-      detectQueryRow(homologsOnly, 'WWWWWWWWWWWWWWWWWWWWWWWWWWWWWW'),
+      findQueryRow(homologsOnly, 'WWWWWWWWWWWWWWWWWWWWWWWWWWWWWW').match,
     ).toBeUndefined()
   })
 
   test('returns nothing rather than throwing on a half-pasted alignment', () => {
-    expect(detectQueryRow('>partial\nMKWV', protein)).toBeUndefined()
-    expect(detectQueryRow('not an alignment at all', protein)).toBeUndefined()
-    expect(detectQueryRow('', protein)).toBeUndefined()
-    expect(detectQueryRow(clustal, '')).toBeUndefined()
+    expect(findQueryRow('>partial\nMKWV', protein).match).toBeUndefined()
+    expect(
+      findQueryRow('not an alignment at all', protein).match,
+    ).toBeUndefined()
+    expect(findQueryRow('', protein).match).toBeUndefined()
+    expect(findQueryRow(clustal, '').match).toBeUndefined()
   })
 })
 
-describe('getMsaRowNames', () => {
+describe('findQueryRow row names', () => {
   test('lists the rows for the override dropdown', () => {
-    expect(getMsaRowNames(clustal)).toEqual([
+    expect(findQueryRow(clustal, protein).names).toEqual([
       'Query_1',
       'sp|P02769|ALBU',
       'sp|Q5XLE4|OTHE',
@@ -73,7 +75,7 @@ describe('getMsaRowNames', () => {
   })
 
   test('is empty rather than throwing while the user is still pasting', () => {
-    expect(getMsaRowNames('CLUSTAL W')).toEqual([])
-    expect(getMsaRowNames('')).toEqual([])
+    expect(findQueryRow('CLUSTAL W', protein).names).toEqual([])
+    expect(findQueryRow('', protein).names).toEqual([])
   })
 })

package/src/LaunchMsaView/detectQueryRow.ts

@@ -65,27 +65,48 @@ const SIMILARITY_FLOOR = 0.9
  */
 const PARTIAL_COVERAGE_FLOOR = 0.5
 
-export function detectQueryRow(
+export interface MsaQueryRow {
+  /** every row name, in file order, for the picker to offer */
+  names: string[]
+  /** the row whose residues are the query's, if one of them is */
+  match?: QueryRowMatch
+}
+
+/**
+ * The picker's whole answer for a pasted alignment: its row names, and which of
+ * them is the query.
+ *
+ * One function rather than two because there is one parse. Both answers were
+ * wanted on every keystroke in the paste box, and asking separately parsed a
+ * few-hundred-row alignment twice per character.
+ */
+export function findQueryRow(
   msaText: string,
   proteinSequence: string,
-): QueryRowMatch | undefined {
-  const query = normalize(proteinSequence)
-  if (!query || !msaText.trim()) {
-    return undefined
+): MsaQueryRow {
+  if (!msaText.trim()) {
+    return { names: [] }
   }
 
-  let names: string[]
-  let parsed: { getRow: (name: string) => string }
+  let parsed
   try {
-    const msa = parseMSA(msaText)
-    names = msa.getNames()
-    parsed = msa
+    parsed = parseMSA(msaText)
   } catch {
     // a half-pasted alignment throws here on every keystroke; the caller shows
     // the field rather than an error
-    return undefined
+    return { names: [] }
   }
 
+  const names = parsed.getNames()
+  const query = normalize(proteinSequence)
+  return { names, match: query ? bestMatch(parsed, names, query) : undefined }
+}
+
+function bestMatch(
+  parsed: { getRow: (name: string) => string },
+  names: string[],
+  query: string,
+): QueryRowMatch | undefined {
   const candidates: QueryRowMatch[] = []
   for (const name of names) {
     const row = normalize(getUngappedSequence(parsed.getRow(name)))
@@ -112,21 +133,11 @@ export function detectQueryRow(
     }
   }
 
-  const order: MatchQuality[] = ['exact', 'partial', 'similar']
+  // an exact match returns above, so only these two can be here
+  const order: MatchQuality[] = ['partial', 'similar']
   return candidates.sort(
     (a, b) =>
       order.indexOf(a.quality) - order.indexOf(b.quality) ||
       b.identity - a.identity,
   )[0]
 }
-
-export function getMsaRowNames(msaText: string): string[] {
-  if (!msaText.trim()) {
-    return []
-  }
-  try {
-    return parseMSA(msaText).getNames()
-  } catch {
-    return []
-  }
-}

package/src/LaunchMsaView/useQueryRowName.ts

@@ -1,6 +1,6 @@
 import { useMemo, useState } from 'react'
 
-import { detectQueryRow, getMsaRowNames } from './detectQueryRow'
+import { findQueryRow } from './detectQueryRow'
 
 /**
  * The MSA row name to launch with, found by sequence rather than typed.
@@ -15,19 +15,16 @@ export function useQueryRowName(msaText: string, proteinSequence: string) {
 
   // parsing runs on every keystroke in the paste box otherwise, and an
   // alignment of a few hundred rows is not free
-  const { detected, names } = useMemo(
-    () => ({
-      detected: detectQueryRow(msaText, proteinSequence),
-      names: getMsaRowNames(msaText),
-    }),
+  const { names, match } = useMemo(
+    () => findQueryRow(msaText, proteinSequence),
     [msaText, proteinSequence],
   )
 
   return {
-    detected,
+    detected: match,
     names,
-    querySeqName: override ?? detected?.name ?? '',
+    querySeqName: override ?? match?.name ?? '',
     setQuerySeqName: setOverride,
-    isAutoDetected: override === undefined && !!detected,
+    isAutoDetected: override === undefined && !!match,
   }
 }

package/src/MsaViewPanel/afterCreateAutoruns.ts

@@ -12,7 +12,7 @@ import {
   storeMsaData,
 } from './msaDataStore'
 import { getProteinViews } from './structureConnection'
-import { getUniprotIdFromAlphaFoldUrl } from './util'
+import { getUniprotIdFromAlphaFoldUrl, hasQueryRow } from './util'
 
 import type { JBrowsePluginMsaViewModel } from './model'
 
@@ -233,7 +233,7 @@ function genomeHighlightsToVisibleColumns(
   field: 'hoverGenomeHighlights' | 'clickGenomeHighlights',
 ) {
   const { connectedViewId, transcriptToMsaMap, querySeqName } = self
-  if (!transcriptToMsaMap) {
+  if (!transcriptToMsaMap || !hasQueryRow(self)) {
     return []
   }
   const { g2p } = transcriptToMsaMap

package/src/MsaViewPanel/components/ErrorBoundary.tsx

@@ -1,8 +1,9 @@
-import type { ReactNode } from 'react'
 import React, { Component } from 'react'
 
 import { ErrorMessage } from '@jbrowse/core/ui'
 
+import type { ReactNode } from 'react'
+
 interface Props {
   children: ReactNode
 }

package/src/MsaViewPanel/components/JobLink.tsx

@@ -4,12 +4,17 @@ import { Typography } from '@mui/material'
 
 import ExternalLink from '../../components/ExternalLink'
 import { ebiBlastResultUrl } from '../../utils/ebiBlast'
+import { isPhmmerJobId, phmmerResultUrl } from '../../utils/phmmer'
 
 function JobLink({ jobId }: { jobId: string }) {
+  // read off the job id rather than the launch params, so a link rebuilt for an
+  // old cached job still points at the tool that actually ran it
+  const url = isPhmmerJobId(jobId)
+    ? phmmerResultUrl(jobId)
+    : ebiBlastResultUrl(jobId)
   return (
     <Typography>
-      Job {jobId} (
-      <ExternalLink href={ebiBlastResultUrl(jobId)}>see status</ExternalLink>)
+      Job {jobId} (<ExternalLink href={url}>see status</ExternalLink>)
     </Typography>
   )
 }

package/src/MsaViewPanel/components/LaunchProgress.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+
+import { ErrorMessage, LoadingEllipses } from '@jbrowse/core/ui'
+import { Typography } from '@mui/material'
+import { observer } from 'mobx-react'
+import { makeStyles } from 'tss-react/mui'
+
+import JobLink from './JobLink'
+
+import type { JBrowsePluginMsaViewModel } from '../model'
+
+const useStyles = makeStyles()({
+  margin: {
+    padding: 20,
+  },
+})
+
+/**
+ * What a view shows while it is still building its alignment, and what it shows
+ * when that fails.
+ *
+ * Every launch that resolves something leaves its request on the model until it
+ * succeeds -- `blastParams`, `orthologParams`, `init` -- so one still being
+ * there IS "no alignment yet", and the error a failed launch records is only
+ * readable here. This used to key on `blastParams` alone, which left an ortholog
+ * launch rendering an empty MSAView for the minutes its alignment takes and, on
+ * failure, forever: the error was set and nothing drew it.
+ */
+const LaunchProgress = observer(function LaunchProgress2({
+  model,
+}: {
+  model: JBrowsePluginMsaViewModel
+}) {
+  const { blastParams, orthologParams, progress, rid, error } = model
+  const { classes } = useStyles()
+  const message = blastParams
+    ? 'Running EBI BLAST'
+    : orthologParams
+      ? 'Building ortholog alignment'
+      : 'Loading alignment'
+  return (
+    <div className={classes.margin}>
+      {error ? (
+        <>
+          <Typography variant="h5">{message} failed</Typography>
+          {/* the job outlives the browser, so its link is worth keeping next to
+              the failure -- EBI's own page says more about a job than we can */}
+          {rid ? <JobLink jobId={rid} /> : null}
+          <ErrorMessage error={error} />
+        </>
+      ) : (
+        <>
+          <LoadingEllipses message={message} variant="h5" />
+          {rid ? <JobLink jobId={rid} /> : null}
+          <Typography>{progress || 'Initializing'}</Typography>
+        </>
+      )}
+    </div>
+  )
+})
+
+export default LaunchProgress

package/src/MsaViewPanel/components/MsaViewPanel.test.tsx

@@ -0,0 +1,83 @@
+// @vitest-environment jsdom
+import React from 'react'
+
+import { cleanup, render, screen } from '@testing-library/react'
+import { afterEach, expect, test, vi } from 'vitest'
+
+import MsaViewPanel from './MsaViewPanel'
+
+import type { JBrowsePluginMsaViewModel } from '../model'
+
+// react-msaview's MSAView is the "nothing is launching" branch and wants a real
+// MST model; a marker is enough to say the panel reached it
+vi.mock('react-msaview', () => ({
+  MSAView: () => <div>the alignment</div>,
+}))
+
+function panel(model: Partial<JBrowsePluginMsaViewModel>) {
+  return render(<MsaViewPanel model={model as JBrowsePluginMsaViewModel} />)
+}
+
+afterEach(() => {
+  cleanup()
+})
+
+test('an alignment with no pending launch draws itself', () => {
+  panel({ progress: '' })
+  expect(screen.getByText('the alignment')).toBeTruthy()
+})
+
+test('a running BLAST shows its progress, not an empty alignment', () => {
+  panel({
+    blastParams: { proteinSequence: 'MKV' } as never,
+    progress: 'Submitting query',
+  })
+  expect(screen.queryByText('the alignment')).toBeNull()
+  expect(screen.getByText(/Running EBI BLAST/)).toBeTruthy()
+  expect(screen.getByText('Submitting query')).toBeTruthy()
+})
+
+// the bug this file was written for: an ortholog launch sets orthologParams
+// rather than blastParams, and the panel keyed on blastParams alone -- so it
+// rendered an empty MSAView for the minutes the alignment takes, and drew
+// nothing at all when the launch failed
+test('a running ortholog launch shows its progress', () => {
+  panel({
+    orthologParams: { taxId: 9606 } as never,
+    progress: 'Resolving orthologs',
+  })
+  expect(screen.queryByText('the alignment')).toBeNull()
+  expect(screen.getByText(/Building ortholog alignment/)).toBeTruthy()
+  expect(screen.getByText('Resolving orthologs')).toBeTruthy()
+})
+
+test('a failed ortholog launch shows why', () => {
+  panel({
+    orthologParams: { taxId: 9606 } as never,
+    progress: '',
+    error: new Error('Only 1 ortholog(s) found for this gene'),
+  })
+  expect(screen.getByText(/Only 1 ortholog\(s\) found/)).toBeTruthy()
+})
+
+test('a failed init shows why', () => {
+  panel({
+    init: { msaName: 'ENST00000288602' },
+    progress: '',
+    error: new Error('No alignment named ENST00000288602 in msa.fa.gz'),
+  })
+  expect(screen.queryByText('the alignment')).toBeNull()
+  expect(screen.getByText(/No alignment named ENST00000288602/)).toBeTruthy()
+})
+
+test('a running job links out to it', () => {
+  panel({
+    blastParams: { proteinSequence: 'MKV' } as never,
+    progress: 'Re-checking BLAST status in... 7',
+    rid: 'ncbiblast-R20260826-123456-0001-abc',
+  })
+  const link = screen.getByRole('link')
+  expect(link.getAttribute('href')).toContain(
+    'jobId=ncbiblast-R20260826-123456-0001-abc',
+  )
+})

package/src/MsaViewPanel/components/MsaViewPanel.tsx

@@ -6,7 +6,7 @@ import { MSAView } from 'react-msaview'
 import { makeStyles } from 'tss-react/mui'
 
 import { ErrorBoundary } from './ErrorBoundary'
-import LoadingBLAST from './LoadingBLAST'
+import LaunchProgress from './LaunchProgress'
 
 import type { JBrowsePluginMsaViewModel } from '../model'
 
@@ -22,12 +22,15 @@ const MsaViewPanel = observer(function MsaViewPanel2({
   model: JBrowsePluginMsaViewModel
 }) {
   const { classes } = useStyles()
-  const { blastParams, loadingStoredData } = model
+  const { blastParams, orthologParams, init, loadingStoredData } = model
+  // an unresolved launch request means there is no alignment to draw yet, so all
+  // three gate the same panel -- see LaunchProgress
+  const launching = !!(blastParams ?? orthologParams ?? init)
   return (
     <ErrorBoundary>
       <div>
-        {blastParams ? (
-          <LoadingBLAST model={model} />
+        {launching ? (
+          <LaunchProgress model={model} />
         ) : loadingStoredData ? (
           <div className={classes.loadingContainer}>
             <LoadingEllipses message="Loading MSA data" variant="h6" />