jbrowse-plugin-msaview 2.8.2 → 2.10.0

package/src/LaunchMsaView/components/{NCBIBlastQuery/NCBIBlastPanel.tsx → BlastQuery/BlastPanel.tsx}

@@ -4,12 +4,14 @@ import SettingsIcon from '@mui/icons-material/Settings'
 import { IconButton } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
 
-import NCBIBlastAutomaticPanel from './NCBIBlastAutomaticPanel'
-import NCBIBlastManualPanel from './NCBIBlastManualPanel'
-import NCBIBlastMethodSelector from './NCBIBlastMethodSelector'
-import NCBIBlastRIDPanel from './NCBIBlastRIDPanel'
-import NCBISettingsDialog from './NCBISettingsDialog'
-import { BASE_BLAST_URL } from './consts'
+import BlastAutomaticPanel from './BlastAutomaticPanel'
+import BlastManualPanel from './BlastManualPanel'
+import BlastMethodSelector from './BlastMethodSelector'
+import BlastSettingsDialog from './BlastSettingsDialog'
+import {
+  DEFAULT_EBI_EMAIL,
+  EBI_EMAIL_STORAGE_KEY,
+} from '../../../utils/ebiJobDispatcher'
 import { useLocalStorage } from '../../../utils/useLocalStorage'
 
 import type { AbstractTrackModel, Feature } from '@jbrowse/core/util'
@@ -21,14 +23,13 @@ const useStyles = makeStyles()({
 })
 
 const panelMap = {
-  automatic: NCBIBlastAutomaticPanel,
-  rid: NCBIBlastRIDPanel,
-  manual: NCBIBlastManualPanel,
+  automatic: BlastAutomaticPanel,
+  manual: BlastManualPanel,
 } as const
 
 export type BlastLookupMethod = keyof typeof panelMap
 
-export default function NCBIBlastPanel({
+export default function BlastPanel({
   handleClose,
   model,
   feature,
@@ -39,9 +40,9 @@ export default function NCBIBlastPanel({
 }) {
   const [lookupMethod, setLookupMethod] =
     useState<BlastLookupMethod>('automatic')
-  const [baseUrl, setBaseUrl] = useLocalStorage(
-    'msa-blastRootUrl',
-    BASE_BLAST_URL,
+  const [ebiEmail, setEbiEmail] = useLocalStorage(
+    EBI_EMAIL_STORAGE_KEY,
+    DEFAULT_EBI_EMAIL,
   )
   const [settingsOpen, setSettingsOpen] = useState(false)
   const { classes } = useStyles()
@@ -60,24 +61,19 @@ export default function NCBIBlastPanel({
         <SettingsIcon />
       </IconButton>
 
-      <Panel
-        model={model}
-        feature={feature}
-        handleClose={handleClose}
-        baseUrl={baseUrl}
-      >
-        <NCBIBlastMethodSelector
+      <Panel model={model} feature={feature} handleClose={handleClose}>
+        <BlastMethodSelector
           lookupMethod={lookupMethod}
           setLookupMethod={setLookupMethod}
         />
       </Panel>
 
       {settingsOpen ? (
-        <NCBISettingsDialog
-          baseUrl={baseUrl}
-          handleClose={newUrl => {
-            if (newUrl) {
-              setBaseUrl(newUrl)
+        <BlastSettingsDialog
+          ebiEmail={ebiEmail}
+          handleClose={settings => {
+            if (settings) {
+              setEbiEmail(settings.ebiEmail)
             }
             setSettingsOpen(false)
           }}

package/src/LaunchMsaView/components/{NCBIBlastQuery/NCBISettingsDialog.tsx → BlastQuery/BlastSettingsDialog.tsx}

@@ -6,27 +6,35 @@ import {
   DialogActions,
   DialogContent,
   DialogTitle,
+  Typography,
 } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
 
-import { BASE_BLAST_URL } from './consts'
 import TextField2 from '../../../components/TextField2'
+import { DEFAULT_EBI_EMAIL } from '../../../utils/ebiJobDispatcher'
 
 const useStyles = makeStyles()({
-  urlField: {
+  field: {
     minWidth: 300,
   },
+  help: {
+    marginBottom: 8,
+  },
 })
 
-export default function NCBISettingsDialog({
+export interface BlastSettings {
+  ebiEmail: string
+}
+
+export default function BlastSettingsDialog({
   handleClose,
-  baseUrl,
+  ebiEmail,
 }: {
-  handleClose: (arg?: string) => void
-  baseUrl: string
+  handleClose: (arg?: BlastSettings) => void
+  ebiEmail: string
 }) {
   const { classes } = useStyles()
-  const [tempBaseUrl, setTempBaseUrl] = useState(baseUrl)
+  const [tempEbiEmail, setTempEbiEmail] = useState(ebiEmail)
   return (
     <Dialog
       open
@@ -37,22 +45,27 @@ export default function NCBISettingsDialog({
     >
       <DialogTitle>BLAST Settings</DialogTitle>
       <DialogContent>
+        <Typography variant="subtitle2" className={classes.help}>
+          Searches run at EBI, which asks for a contact address on every job so
+          they can reach whoever is generating the load. If your site sends real
+          volume, use your own.
+        </Typography>
         <TextField2
           autoFocus
           margin="dense"
-          label="BLAST Base URL"
+          label="EBI contact email"
           fullWidth
           variant="outlined"
-          value={tempBaseUrl}
-          className={classes.urlField}
+          value={tempEbiEmail}
+          className={classes.field}
           onChange={e => {
-            setTempBaseUrl(e.target.value)
+            setTempEbiEmail(e.target.value)
           }}
         />
         <Button
           variant="contained"
           onClick={() => {
-            setTempBaseUrl(BASE_BLAST_URL)
+            setTempEbiEmail(DEFAULT_EBI_EMAIL)
           }}
         >
           Reset
@@ -72,7 +85,7 @@ export default function NCBISettingsDialog({
           color="primary"
           variant="contained"
           onClick={() => {
-            handleClose(tempBaseUrl)
+            handleClose({ ebiEmail: tempEbiEmail })
           }}
         >
           Save

package/src/LaunchMsaView/components/{NCBIBlastQuery → BlastQuery}/CachedBlastResults.tsx

@@ -149,7 +149,7 @@ const CachedBlastResults = observer(function ({
               }}
             >
               <ListItemText
-                primary={`${getResultDisplayName(result)} - ${result.blastDatabase}/${result.blastProgram} (${result.msaAlgorithm})`}
+                primary={`${getResultDisplayName(result)} - ${result.blastDatabase}${result.blastProgram ? `/${result.blastProgram}` : ''} (${result.msaAlgorithm})`}
                 secondary={`${new Date(result.timestamp).toLocaleString()} - Seq: ${result.proteinSequence.slice(0, 30)}...`}
               />
             </ListItemButton>

package/src/LaunchMsaView/components/BlastQuery/consts.ts

@@ -0,0 +1,22 @@
+/**
+ * Only used to build the link-out on the manual panel, which sends the user to
+ * NCBI's own site to run BLAST there. Nothing fetches this url: NCBI stopped
+ * sending Access-Control-Allow-Origin to third-party origins, so a browser
+ * cannot read a response from it at all. See docs/blast.md.
+ */
+export const BASE_BLAST_URL = 'https://blast.ncbi.nlm.nih.gov/Blast.cgi'
+
+export const msaAlgorithms = ['clustalo', 'muscle', 'kalign', 'mafft'] as const
+export type MsaAlgorithm = (typeof msaAlgorithms)[number]
+
+export const blastDatabaseOptions = [
+  'uniprotkb_swissprot',
+  'uniprotkb',
+  'uniprotkb_reference_proteomes',
+  'uniprotkb_trembl',
+] as const
+export type BlastDatabase = (typeof blastDatabaseOptions)[number]
+
+// curated, so it returns roughly one good sequence per species rather than the
+// many near-identical TrEMBL entries an alignment reads poorly
+export const defaultBlastDatabase: BlastDatabase = 'uniprotkb_swissprot'

package/src/LaunchMsaView/components/LaunchMsaViewDialog.tsx

@@ -4,8 +4,8 @@ import { Dialog } from '@jbrowse/core/ui'
 import { getSession } from '@jbrowse/core/util'
 import { Tab, Tabs } from '@mui/material'
 
+import BlastPanel from './BlastQuery/BlastPanel'
 import ManualMSALoader from './ManualMSALoader/ManualMSALoader'
-import NCBIBlastPanel from './NCBIBlastQuery/NCBIBlastPanel'
 import OrthologPanel from './OrthologQuery/OrthologPanel'
 import PreLoadedMSA from './PreLoadedMSA/PreLoadedMSADataPanel'
 import { readMsaDatasets } from './PreLoadedMSA/types'
@@ -41,7 +41,9 @@ export default function LaunchMsaViewDialog({
         }}
       >
         <Tab label="Orthologs (fast)" value="orthologs" />
-        <Tab label="NCBI BLAST query" value="ncbi_blast" />
+        {/* the tab value stays 'ncbi_blast' — it is only local state, and
+            renaming it buys nothing */}
+        <Tab label="BLAST query" value="ncbi_blast" />
         {hasPreloadedDatasets ? (
           <Tab label="Pre-loaded MSA datasets" value="preloaded_msa" />
         ) : null}
@@ -55,11 +57,7 @@ export default function LaunchMsaViewDialog({
         />
       </TabPanel>
       <TabPanel value={value} index="ncbi_blast">
-        <NCBIBlastPanel
-          handleClose={handleClose}
-          feature={feature}
-          model={model}
-        />
+        <BlastPanel handleClose={handleClose} feature={feature} model={model} />
       </TabPanel>
       {hasPreloadedDatasets ? (
         <TabPanel value={value} index="preloaded_msa">

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

@@ -1,48 +1,32 @@
 import React, { useMemo, useState } from 'react'
 
-import { Checkbox, FormControlLabel, MenuItem, Typography } from '@mui/material'
+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 { COMMON_SPECIES } from '../../../utils/ncbiOrthologs'
+import { defaultMaxSpecies } from '../../../utils/ncbiOrthologs'
 import {
   getGeneDisplayName,
   getGeneIdentifiers,
   getLinearGenomeView,
   getTranscriptDisplayName,
 } from '../../util'
+import MsaAlgorithmSelect from '../BlastQuery/MsaAlgorithmSelect'
 import LaunchPanelContent from '../LaunchPanelContent'
-import MsaAlgorithmSelect from '../NCBIBlastQuery/MsaAlgorithmSelect'
 import SubmitCancelActions from '../SubmitCancelActions'
 import TranscriptSelector from '../TranscriptSelector'
 import { useTranscriptSelection } from '../useTranscriptSelection'
 
-import type { MsaAlgorithm } from '../NCBIBlastQuery/consts'
+import type { MsaAlgorithm } from '../BlastQuery/consts'
 import type { AbstractTrackModel, Feature } from '@jbrowse/core/util'
 
 const useStyles = makeStyles()({
   selectField: {
     width: 180,
   },
-  // A GRID, not a wrapping flex row of fixed-width items. The old form was three
-  // 160px columns inside a 560px box, which is five rows for thirteen species and
-  // eight for twenty-three -- and the checkbox list is the tallest thing in the
-  // dialog, so those rows are the dialog's height. Five auto-fitted columns is
-  // five rows for twenty-three, i.e. more species in less space, and it reflows
-  // rather than being pinned to a width the dialog may not have.
-  speciesBox: {
-    display: 'grid',
-    gridTemplateColumns: 'repeat(auto-fit, minmax(130px, 1fr))',
-    maxWidth: 700,
-    marginTop: 4,
-  },
-  // The label carries the row height; the default control padding is what makes
-  // 23 rows of it tall.
-  species: {
-    marginRight: 0,
-  },
 })
 
 const OrthologPanel = observer(function ({
@@ -59,86 +43,64 @@ const OrthologPanel = observer(function ({
   const [launchViewError, setLaunchViewError] = useState<unknown>()
   const [taxId, setTaxId] = useState(9606)
   const [msaAlgorithm, setMsaAlgorithm] = useState<MsaAlgorithm>('clustalo')
-  const [excluded, setExcluded] = useState<number[]>([])
+  const [maxSpecies, setMaxSpecies] = useState(String(defaultMaxSpecies))
 
   const geneCandidates = useMemo(() => getGeneIdentifiers(feature), [feature])
   const transcriptSelection = useTranscriptSelection({ feature, view })
   const { selectedTranscript, proteinSequence } = transcriptSelection
   const e = transcriptSelection.error ?? launchViewError
 
-  const taxa = COMMON_SPECIES.map(s => s.taxId).filter(
-    t => !excluded.includes(t),
-  )
+  const rowCount = Number(maxSpecies)
+  const rowCountValid = Number.isInteger(rowCount) && rowCount >= 2
 
   return (
     <>
       <LaunchPanelContent error={e}>
-        {/* One line rather than seven. What a reader needs here is which tab
-            to pick, and that is the seconds-against-minutes comparison; the
-            rest (species labels, CDD overlay, the query row being the selected
-            transcript) is visible in the result or documented, and as prose it
-            was most of the dialog's height. */}
+        {/* One line rather than seven. What a reader needs here is which tab to
+            pick; the rest (species labels, CDD overlay, the query row being the
+            selected transcript) is visible in the result or documented, and as
+            prose it was most of the dialog's height.
+
+            The comparison stays but the number moved: the lookup is still
+            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, aligned at EBI
-          in seconds rather than the 10+ minutes BLAST takes.
+          NCBI&apos;s precomputed orthologs, one gene per species, looked up
+          rather than searched for. No BLAST job to queue.
         </Typography>
 
         <div>
-          <TextField2
-            variant="outlined"
-            label="Query species"
+          <QuerySpeciesSelect
             className={classes.selectField}
-            select
             value={taxId}
-            onChange={event => {
-              setTaxId(Number(event.target.value))
-            }}
-            helperText="the species this gene is from"
-          >
-            {COMMON_SPECIES.map(s => (
-              <MenuItem value={s.taxId} key={s.taxId}>
-                {s.label}
-              </MenuItem>
-            ))}
-          </TextField2>
+            onChange={setTaxId}
+          />
 
           <MsaAlgorithmSelect
             className={classes.selectField}
             value={msaAlgorithm}
             onChange={setMsaAlgorithm}
           />
-        </div>
 
-        <Typography variant="subtitle2" style={{ marginTop: 8 }}>
-          Species to include (those without an ortholog are skipped)
-        </Typography>
-        <div className={classes.speciesBox}>
-          {COMMON_SPECIES.map(s => (
-            <FormControlLabel
-              className={classes.species}
-              key={s.taxId}
-              control={
-                <Checkbox
-                  checked={!excluded.includes(s.taxId)}
-                  onChange={event => {
-                    setExcluded(
-                      event.target.checked
-                        ? excluded.filter(t => t !== s.taxId)
-                        : [...excluded, s.taxId],
-                    )
-                  }}
-                />
-              }
-              label={s.label}
-            />
-          ))}
+          <TextField2
+            variant="outlined"
+            label="Rows to align"
+            className={classes.selectField}
+            type="number"
+            value={maxSpecies}
+            onChange={event => {
+              setMaxSpecies(event.target.value)
+            }}
+            error={!rowCountValid}
+            helperText="the closest N species NCBI has"
+          />
         </div>
 
         <TranscriptSelector feature={feature} {...transcriptSelection} />
 
       </LaunchPanelContent>
       <SubmitCancelActions
-        submitDisabled={!proteinSequence || taxa.length < 2}
+        submitDisabled={!proteinSequence || !rowCountValid}
         onSubmit={() => {
           try {
             if (selectedTranscript) {
@@ -149,7 +111,7 @@ const OrthologPanel = observer(function ({
                 newViewTitle: `Orthologs - ${getGeneDisplayName(feature)} - ${getTranscriptDisplayName(selectedTranscript)}`,
                 orthologParams: {
                   taxId,
-                  taxa,
+                  maxSpecies: rowCount,
                   geneCandidates,
                   msaAlgorithm,
                   selectedTranscript,

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

@@ -0,0 +1,92 @@
+import React, { useEffect, useState } from 'react'
+
+import TextField2 from '../../../components/TextField2'
+import { resolveTaxId } from '../../../utils/ncbiTaxonomy'
+import { fetchTaxonomyInfo } from '../../../utils/taxonomyNames'
+
+/**
+ * The species the query gene came from, as free text resolved against NCBI's
+ * taxonomy rather than picked from a fixed list.
+ *
+ * The resolved taxon is shown back as helper text, which is the whole point of
+ * resolving on a debounce instead of on submit: a typo resolves to some other
+ * organism rather than to nothing, and the only place that surfaces is the gene
+ * lookup, as "could not resolve NLRP1 in taxon 9986".
+ */
+export default function QuerySpeciesSelect({
+  value,
+  onChange,
+  className,
+}: {
+  value: number
+  onChange: (taxId: number) => void
+  className?: string
+}) {
+  const [text, setText] = useState('human')
+  const [resolved, setResolved] = useState<string>()
+  const [error, setError] = useState<unknown>()
+
+  useEffect(() => {
+    // read through a call rather than as a property: the cleanup writes it from
+    // another turn of the loop, and a bare `run.live` narrows to true after the
+    // first check, which reads to the compiler as a redundant second one
+    const run = { live: true }
+    const cancelled = () => !run.live
+    async function lookup() {
+      try {
+        setError(undefined)
+        const taxId = await resolveTaxId(text)
+        if (cancelled()) {
+          return
+        }
+        if (!taxId) {
+          setResolved(undefined)
+          setError(new Error(`No NCBI taxon matches "${text}"`))
+          return
+        }
+        const info = (await fetchTaxonomyInfo([taxId])).get(taxId)
+        if (cancelled()) {
+          return
+        }
+        setResolved(
+          [info?.sciname, info?.commonName && `(${info.commonName})`]
+            .filter(Boolean)
+            .join(' ') || `taxon ${taxId}`,
+        )
+        onChange(taxId)
+      } catch (e) {
+        if (!cancelled()) {
+          setError(e)
+        }
+      }
+    }
+    const timer = setTimeout(() => {
+      void lookup()
+    }, 400)
+    return () => {
+      run.live = false
+      clearTimeout(timer)
+    }
+    // onChange is a setState updater from the parent and stable in practice;
+    // including it would re-run the lookup on every parent render
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [text])
+
+  return (
+    <TextField2
+      variant="outlined"
+      label="Query species"
+      className={className}
+      value={text}
+      onChange={event => {
+        setText(event.target.value)
+      }}
+      error={!!error}
+      helperText={
+        error
+          ? `${error}`
+          : (resolved ?? `the species this gene is from (taxon ${value})`)
+      }
+    />
+  )
+}

package/src/LaunchMsaView/index.ts

@@ -26,7 +26,6 @@ interface ContextMenuInfo {
 interface DisplayModel {
   contextMenuItems: () => MenuItem[]
   contextMenuInfo?: ContextMenuInfo
-  isGeneLike?: boolean
   fetchFullFeature?: (
     featureId: string,
     displayedRegionIndex: number,
@@ -34,6 +33,25 @@ interface DisplayModel {
   contextMenuFeature?: Feature
 }
 
+// Read off the clicked item rather than off the display.
+//
+// LinearBasicDisplay used to publish an `isGeneLike` getter and this gated on
+// it. jbrowse-components 684142b3 (2026-08-16) inlined that getter into its own
+// `contextMenuItems`, and every host built after it returns `undefined` here --
+// so the gate was never satisfied, `onClick` stayed undefined, and the item
+// silently left the right-click menu on every gene track. Nothing failed loudly:
+// the display still had contextMenuInfo and fetchFullFeature, and the menu still
+// opened with its own items in it.
+//
+// A predicate over the type we were already given cannot go the same way, and it
+// costs one comparison. Deliberately the same loose case-insensitive test the
+// host applies (`isGeneLikeType` in collapseIntronsMenu.ts): real GFFs carry
+// 'mRNA', 'lnc_RNA', 'protein_coding_gene', 'transcript'.
+function isGeneLikeType(type: string | undefined) {
+  const t = (type ?? '').toLowerCase()
+  return t.includes('gene') || t.includes('rna') || t.includes('transcript')
+}
+
 const GENE_LIKE_TYPES = new Set(['gene', 'mRNA', 'transcript'])
 
 function extendStateModel(stateModel: IAnyModelType) {
@@ -54,7 +72,7 @@ function extendStateModel(stateModel: IAnyModelType) {
         const fetchFullFeature = self.fetchFullFeature
         const legacyFeature = self.contextMenuFeature
         const onClick =
-          info && fetchFullFeature && self.isGeneLike
+          info && fetchFullFeature && isGeneLikeType(info.item.type)
             ? () => {
                 fetchFullFeature(info.item.featureId, info.displayedRegionIndex)
                   .then(feature => {

package/src/MsaViewPanel/components/JobLink.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import { Typography } from '@mui/material'
+
+import ExternalLink from '../../components/ExternalLink'
+import { ebiBlastResultUrl } from '../../utils/ebiBlast'
+
+function JobLink({ jobId }: { jobId: string }) {
+  return (
+    <Typography>
+      Job {jobId} (
+      <ExternalLink href={ebiBlastResultUrl(jobId)}>see status</ExternalLink>)
+    </Typography>
+  )
+}
+
+export default JobLink

package/src/MsaViewPanel/components/LoadingBLAST.tsx

@@ -5,7 +5,7 @@ import { Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
-import RIDLink from './RIDLink'
+import JobLink from './JobLink'
 
 import type { JBrowsePluginMsaViewModel } from '../model'
 
@@ -18,57 +18,26 @@ const useStyles = makeStyles()(theme => ({
   },
 }))
 
-function RIDError({
-  baseUrl,
-  rid,
-  error,
-}: {
-  baseUrl: string
-  rid?: string
-  error: unknown
-}) {
-  return (
-    <div>
-      {rid ? <RIDLink rid={rid} baseUrl={baseUrl} /> : null}
-      <ErrorMessage error={error} />
-    </div>
-  )
-}
-
-function RIDProgress({
-  baseUrl,
-  rid,
-  progress,
-}: {
-  baseUrl: string
-  rid: string
-  progress: string
-}) {
-  const { classes } = useStyles()
-  return (
-    <div className={classes.loading}>
-      {rid ? <RIDLink baseUrl={baseUrl} rid={rid} /> : null}
-      <Typography>{progress}</Typography>
-    </div>
-  )
-}
-
 const LoadingBLAST = observer(function LoadingBLAST2({
   model,
-  baseUrl,
 }: {
   model: JBrowsePluginMsaViewModel
-  baseUrl: string
 }) {
   const { progress, rid, error } = model
   const { classes } = useStyles()
   return (
     <div className={classes.margin}>
-      <LoadingEllipses message="Running NCBI BLAST" variant="h5" />
+      <LoadingEllipses message="Running EBI BLAST" variant="h5" />
       {error ? (
-        <RIDError baseUrl={baseUrl} rid={rid} error={error} />
+        <div>
+          {rid ? <JobLink jobId={rid} /> : null}
+          <ErrorMessage error={error} />
+        </div>
       ) : rid ? (
-        <RIDProgress baseUrl={baseUrl} rid={rid} progress={progress} />
+        <div className={classes.loading}>
+          <JobLink jobId={rid} />
+          <Typography>{progress}</Typography>
+        </div>
       ) : (
         <Typography>{progress || 'Initializing BLAST query'}</Typography>
       )}

package/src/MsaViewPanel/components/MsaViewPanel.tsx

@@ -27,7 +27,7 @@ const MsaViewPanel = observer(function MsaViewPanel2({
     <ErrorBoundary>
       <div>
         {blastParams ? (
-          <LoadingBLAST model={model} baseUrl={blastParams.baseUrl} />
+          <LoadingBLAST model={model} />
         ) : loadingStoredData ? (
           <div className={classes.loadingContainer}>
             <LoadingEllipses message="Loading MSA data" variant="h6" />