jbrowse-plugin-msaview 2.10.2 → 3.1.0

package/dist/utils/ncbiDomains.d.ts

@@ -5,39 +5,11 @@ export type DomainMatch = InterProScanResults['matches'][number];
  * domain and site annotations, keyed by both the versioned and primary
  * accession so callers can look up by whichever NCBI returned.
  */
-export declare function parseCddDomains(xml: string): Map<string, {
-    signature: {
-        entry?: {
-            name: string;
-            description: string;
-            accession: string;
-            featureType?: string;
-        };
-    };
-    locations: {
-        start: number;
-        end: number;
-        strand?: number;
-    }[];
-}[]>;
+export declare function parseCddDomains(xml: string): Map<string, import("msa-parsers").InterProScanMatch[]>;
 /**
  * Fetch pre-computed CDD domain and site annotations for NCBI protein
  * accessions. These come baked into the GenPept records, so a single batched
  * efetch returns them with no job submission or polling. Results are cached in
  * IndexedDB so reopening a view doesn't refetch.
  */
-export declare function fetchProteinDomains(accessions: string[]): Promise<Map<string, {
-    signature: {
-        entry?: {
-            name: string;
-            description: string;
-            accession: string;
-            featureType?: string;
-        };
-    };
-    locations: {
-        start: number;
-        end: number;
-        strand?: number;
-    }[];
-}[]>>;
+export declare function fetchProteinDomains(accessions: string[]): Promise<Map<string, import("msa-parsers").InterProScanMatch[]>>;

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "2.10.2";
+export declare const version = "3.1.0";

package/dist/version.js

@@ -1 +1 @@
-export const version = '2.10.2';
+export const version = '3.1.0';

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.10.2",
+  "version": "3.1.0",
   "license": "MIT",
   "name": "jbrowse-plugin-msaview",
   "repository": {
@@ -43,7 +43,7 @@
     "git-cliff": "^2.13.1",
     "mobx": "^6.16.1",
     "mobx-react": "^9.2.2",
-    "msa-parsers": "^5.10.0",
+    "msa-parsers": "^6.0.0",
     "pixelmatch": "^7.2.0",
     "pngjs": "^7.0.0",
     "prettier": "^3.9.6",
@@ -51,7 +51,7 @@
     "puppeteer": "^25.3.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
-    "react-msaview": "^5.10.0",
+    "react-msaview": "^6.0.0",
     "rimraf": "^6.1.3",
     "rxjs": "^7.8.2",
     "serve": "^14.2.6",
@@ -68,6 +68,8 @@
     "prebuild": "pnpm clean",
     "lint": "eslint src --report-unused-disable-directives --max-warnings 0",
     "check-text-source": "node scripts/check-text-source.mjs",
+    "check-ebi-params": "node scripts/check-ebi-params.mjs",
+    "check-mui-imports": "node scripts/check-mui-imports.mjs",
     "pretest": "rm -rf .test-jbrowse && npx @jbrowse/cli create .test-jbrowse --nightly",
     "test": "vitest run",
     "test:watch": "vitest",

package/src/LaunchMsaView/components/BlastQuery/BlastManualPanel.tsx

@@ -1,14 +1,23 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 import { shorten2 } from '@jbrowse/core/util'
-import { Button, DialogActions, Typography } from '@mui/material'
+import { Alert, Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
 import { BASE_BLAST_URL } from './consts'
 import ExternalLink from '../../../components/ExternalLink'
-import { cleanProteinSequence, getLinearGenomeView } from '../../util'
+import TextField2 from '../../../components/TextField2'
+import { useQueryRowName } from '../../useQueryRowName'
+import {
+  cleanProteinSequence,
+  getGeneDisplayName,
+  getLinearGenomeView,
+} from '../../util'
 import LaunchPanelContent from '../LaunchPanelContent'
+import { launchView } from '../ManualMSALoader/launchView'
+import QueryRowSelector from '../QueryRowSelector'
+import SubmitCancelActions from '../SubmitCancelActions'
 import TranscriptSelector from '../TranscriptSelector'
 import { useTranscriptSelection } from '../useTranscriptSelection'
 
@@ -17,14 +26,33 @@ import type { AbstractTrackModel, Feature } from '@jbrowse/core/util'
 const useStyles = makeStyles()({
   ncbiLink: {
     wordBreak: 'break-all',
-    margin: 30,
-    maxWidth: 600,
   },
-  infoText: {
+  textAreaFont: {
+    fontFamily: 'Courier New',
+  },
+  msaInput: {
+    marginBottom: 20,
+  },
+  step: {
     marginTop: 20,
   },
+  stepBody: {
+    marginLeft: 20,
+    marginTop: 8,
+  },
 })
 
+/**
+ * The route to NCBI's `nr`, which no plugin version can query directly: NCBI
+ * stopped sending Access-Control-Allow-Origin to third-party origins, so the
+ * browser cannot read Blast.cgi at all (see docs/blast.md).
+ *
+ * That makes the round trip through NCBI's own site the whole feature rather
+ * than a fallback, so the panel walks it end to end. It used to hand the user a
+ * link, tell them to "paste the results into JBrowse", and offer only a Close
+ * button -- leaving them to find the Manual upload tab, re-pick the transcript
+ * they had already chosen here, and hand-type the row name.
+ */
 const BlastManualPanel = observer(function ({
   handleClose,
   feature,
@@ -38,8 +66,13 @@ const BlastManualPanel = observer(function ({
 }) {
   const { classes } = useStyles()
   const view = getLinearGenomeView(model)
+  const [launchViewError, setLaunchViewError] = useState<unknown>()
+  const [msaText, setMsaText] = useState('')
+  const [treeText, setTreeText] = useState('')
+
   const transcriptSelection = useTranscriptSelection({ feature, view })
-  const { proteinSequence, error } = transcriptSelection
+  const { proteinSequence, selectedTranscript, error } = transcriptSelection
+  const queryRow = useQueryRowName(msaText, proteinSequence)
 
   const s2 = cleanProteinSequence(proteinSequence)
   // a link the user follows to NCBI's own site, not something we fetch — which
@@ -49,37 +82,100 @@ const BlastManualPanel = observer(function ({
 
   return (
     <>
-      <LaunchPanelContent error={error}>
+      <LaunchPanelContent error={launchViewError ?? error}>
         {children}
 
         <TranscriptSelector feature={feature} {...transcriptSelection} />
 
-        {proteinSequence ? (
-          <div className={classes.ncbiLink}>
-            Link to NCBI BLAST: <ExternalLink href={link}>{link2}</ExternalLink>
+        <div className={classes.step}>
+          <Typography variant="subtitle2">1. Run the search at NCBI</Typography>
+          <div className={classes.stepBody}>
+            {proteinSequence ? (
+              <div className={classes.ncbiLink}>
+                <ExternalLink href={link}>{link2}</ExternalLink>
+              </div>
+            ) : (
+              <Alert severity="info">
+                Pick a transcript above to get a link carrying its protein
+                sequence.
+              </Alert>
+            )}
           </div>
-        ) : null}
+        </div>
 
-        <Typography className={classes.infoText}>
-          Click the link above and run your BLAST query, and once you have
-          results, click "Multiple Alignment" at the top of the results page to
-          be redirected to COBALT, NCBI's multiple sequence aligner. Once COBALT
-          completes, you can download an MSA (.aln file) and optionally a Newick
-          tree (.nh) and paste the results into JBrowse
-        </Typography>
+        <div className={classes.step}>
+          <Typography variant="subtitle2">2. Align the hits</Typography>
+          <div className={classes.stepBody}>
+            <Typography>
+              On the results page click "Multiple Alignment" to run COBALT,
+              NCBI's aligner. Download the alignment (.aln) and, if you want the
+              tree drawn, the Newick tree (.nh).
+            </Typography>
+          </div>
+        </div>
+
+        <div className={classes.step}>
+          <Typography variant="subtitle2">
+            3. Paste the results back here
+          </Typography>
+          <div className={classes.stepBody}>
+            <TextField2
+              variant="outlined"
+              label="Alignment"
+              multiline
+              minRows={5}
+              maxRows={10}
+              fullWidth
+              className={classes.msaInput}
+              slotProps={{ input: { className: classes.textAreaFont } }}
+              placeholder="Paste the .aln contents here"
+              value={msaText}
+              onChange={event => {
+                setMsaText(event.target.value)
+              }}
+            />
+            <TextField2
+              variant="outlined"
+              label="Tree (optional)"
+              multiline
+              minRows={3}
+              maxRows={10}
+              fullWidth
+              slotProps={{ input: { className: classes.textAreaFont } }}
+              placeholder="Paste the .nh Newick tree here"
+              value={treeText}
+              onChange={event => {
+                setTreeText(event.target.value)
+              }}
+            />
+
+            <QueryRowSelector {...queryRow} />
+          </div>
+        </div>
       </LaunchPanelContent>
 
-      <DialogActions>
-        <Button
-          color="primary"
-          variant="contained"
-          onClick={() => {
-            handleClose()
-          }}
-        >
-          Close
-        </Button>
-      </DialogActions>
+      <SubmitCancelActions
+        submitDisabled={!selectedTranscript || !msaText.trim()}
+        onSubmit={() => {
+          try {
+            if (selectedTranscript) {
+              setLaunchViewError(undefined)
+              launchView({
+                newViewTitle: getGeneDisplayName(selectedTranscript),
+                view,
+                feature: selectedTranscript,
+                querySeqName: queryRow.querySeqName,
+                data: { msa: msaText, tree: treeText },
+              })
+              handleClose()
+            }
+          } catch (e) {
+            console.error(e)
+            setLaunchViewError(e)
+          }
+        }}
+        onCancel={handleClose}
+      />
     </>
   )
 })

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

@@ -9,10 +9,17 @@ 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]
 
+/**
+ * EBI rejects a submission naming a database outside its own list with a 400,
+ * so every value here has to appear in
+ * https://www.ebi.ac.uk/Tools/services/rest/ncbiblast/parameterdetails/database
+ * -- `uniprotkb_reference_proteomes` did not, and 3.0.0 shipped it as a dead
+ * menu entry.
+ */
 export const blastDatabaseOptions = [
   'uniprotkb_swissprot',
   'uniprotkb',
-  'uniprotkb_reference_proteomes',
+  'pan_proteomes',
   'uniprotkb_trembl',
 ] as const
 export type BlastDatabase = (typeof blastDatabaseOptions)[number]

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

@@ -1,20 +1,16 @@
 import React, { useState } from 'react'
 
 import { FileSelector } from '@jbrowse/core/ui'
-import {
-  Alert,
-  FormControl,
-  FormControlLabel,
-  Radio,
-  RadioGroup,
-} from '@mui/material'
+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'
 import LaunchPanelContent from '../LaunchPanelContent'
+import QueryRowSelector from '../QueryRowSelector'
 import SubmitCancelActions from '../SubmitCancelActions'
 import TranscriptSelector from '../TranscriptSelector'
 import { useTranscriptSelection } from '../useTranscriptSelection'
@@ -38,12 +34,6 @@ const useStyles = makeStyles()({
   msaInput: {
     marginBottom: 20,
   },
-  queryNameInput: {
-    marginTop: 20,
-  },
-  warningAlert: {
-    marginTop: 10,
-  },
 })
 
 const ManualMSALoader = observer(function PreLoadedMSA2({
@@ -63,9 +53,9 @@ const ManualMSALoader = observer(function PreLoadedMSA2({
   const [treeText, setTreeText] = useState('')
   const [msaFileLocation, setMsaFileLocation] = useState<FileLocation>()
   const [treeFileLocation, setTreeFileLocation] = useState<FileLocation>()
-  const [querySeqName, setQuerySeqName] = useState('')
   const transcriptSelection = useTranscriptSelection({ feature, view })
-  const { selectedTranscript, error } = transcriptSelection
+  const { selectedTranscript, proteinSequence, error } = transcriptSelection
+  const queryRow = useQueryRowName(msaText, proteinSequence)
 
   const e = launchViewError ?? error
   return (
@@ -143,27 +133,7 @@ const ManualMSALoader = observer(function PreLoadedMSA2({
 
         <TranscriptSelector feature={feature} {...transcriptSelection} />
 
-        <TextField2
-          variant="outlined"
-          name="MSA row name"
-          fullWidth
-          required
-          className={classes.queryNameInput}
-          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" className={classes.warningAlert}>
-            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>
-        ) : null}
+        <QueryRowSelector {...queryRow} />
       </LaunchPanelContent>
 
       <SubmitCancelActions
@@ -180,7 +150,7 @@ const ManualMSALoader = observer(function PreLoadedMSA2({
                 newViewTitle: getGeneDisplayName(selectedTranscript),
                 view,
                 feature: selectedTranscript,
-                querySeqName: querySeqName.trim(),
+                querySeqName: queryRow.querySeqName,
                 ...(inputMethod === 'file'
                   ? {
                       msaFilehandle: msaFileLocation,

package/src/LaunchMsaView/components/QueryRowSelector.tsx

@@ -0,0 +1,93 @@
+import React from 'react'
+
+import { Alert, MenuItem } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+
+import TextField2 from '../../components/TextField2'
+
+import type { QueryRowMatch } from '../detectQueryRow'
+
+const useStyles = makeStyles()({
+  field: {
+    marginTop: 20,
+  },
+  alert: {
+    marginTop: 10,
+  },
+})
+
+/**
+ * Which MSA row corresponds to the selected transcript. Clicking and hovering in
+ * the alignment reach the genome only through this name, and a wrong one fails
+ * silently -- the view opens, renders, and never navigates -- so the field fills
+ * itself in from the pasted alignment and offers that alignment's own row names
+ * rather than a free text box the user can typo.
+ */
+export default function QueryRowSelector({
+  names,
+  detected,
+  querySeqName,
+  setQuerySeqName,
+  isAutoDetected,
+}: {
+  names: string[]
+  detected?: QueryRowMatch
+  querySeqName: string
+  setQuerySeqName: (arg: string) => void
+  isAutoDetected: boolean
+}) {
+  const { classes } = useStyles()
+
+  return (
+    <>
+      {names.length > 0 ? (
+        <TextField2
+          variant="outlined"
+          label="MSA row matching the selected transcript"
+          select
+          fullWidth
+          className={classes.field}
+          value={names.includes(querySeqName) ? querySeqName : ''}
+          onChange={event => {
+            setQuerySeqName(event.target.value)
+          }}
+        >
+          {names.map(name => (
+            <MenuItem value={name} key={name}>
+              {name}
+              {detected?.name === name ? ' — matches your protein' : ''}
+            </MenuItem>
+          ))}
+        </TextField2>
+      ) : (
+        <TextField2
+          variant="outlined"
+          label="MSA row matching the selected transcript"
+          fullWidth
+          className={classes.field}
+          helperText="Paste an alignment above and this fills in on its own"
+          value={querySeqName}
+          onChange={event => {
+            setQuerySeqName(event.target.value)
+          }}
+        />
+      )}
+
+      {isAutoDetected && detected ? (
+        <Alert severity="success" className={classes.alert}>
+          Matched <strong>{detected.name}</strong> to your protein sequence
+          {detected.quality === 'exact'
+            ? ''
+            : `, covering ${Math.round(detected.identity * 100)}% of it`}
+          . Clicking the alignment will navigate the genome view.
+        </Alert>
+      ) : names.length > 0 && !querySeqName ? (
+        <Alert severity="warning" className={classes.alert}>
+          No row matched your protein sequence — pick the one for your gene
+          above. Without it the alignment still renders, but clicking it will
+          not navigate the genome view.
+        </Alert>
+      ) : null}
+    </>
+  )
+}

package/src/LaunchMsaView/detectQueryRow.test.ts

@@ -0,0 +1,79 @@
+import { describe, expect, test } from 'vitest'
+
+import { detectQueryRow, getMsaRowNames } from './detectQueryRow'
+
+const protein = 'MKWVTFISLLLLFSSAYSRGVFRRDTHKSEIAHRFKDLGEEHFKGLVLIAFSQYLQQCPFD'
+
+// COBALT renames the query `Query_1`, so only the residues identify it
+const clustal = `CLUSTAL W (1.81) multiple sequence alignment
+
+Query_1         MKWVTFISLLLLFSSAYSRGVFRRDTHKSEIAHRFKDLGEEHFKGLVLIAFSQYLQQCPFD
+sp|P02769|ALBU  MKWVTFISLLLLFSSAYSRGVFRRDTHKSEIAHRFKDLGEEHFKGLVLIAFSQYLQQCPYD
+sp|Q5XLE4|OTHE  MKWVTFISLLLLFSSAYSRGVFRRDTHKSEIAHRFKDLGEEHFKGLVLIAFSQYLWWCPFD
+`
+
+const fasta = `>Query_1
+MKWVTFISLLLLFSSAYSRGVFRRDTHKSEIAHRFKDLGEEHFKGLVLIAFSQYLQQCPFD
+>sp|P02769|ALBU_BOVIN
+MKWVTFISLLLLFSSAYSRG--RRDTHKSEIAHRFKDLGEEHFKGLVLIAFSQYLQQCPYD
+`
+
+describe('detectQueryRow', () => {
+  test('finds the query by sequence when the aligner renamed it', () => {
+    expect(detectQueryRow(clustal, protein)).toMatchObject({
+      name: 'Query_1',
+      quality: 'exact',
+    })
+  })
+
+  test('ignores gaps in the aligned row', () => {
+    expect(detectQueryRow(fasta, protein)?.name).toBe('Query_1')
+  })
+
+  test('tolerates the trailing stop codon the translation carries', () => {
+    expect(detectQueryRow(clustal, `${protein}*`)?.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({
+      name: 'aligned_query',
+      quality: 'partial',
+    })
+  })
+
+  // the failure that matters: silently wiring the view to a homolog would look
+  // like it worked, and every navigation afterwards would land in the wrong place
+  test('returns nothing when only diverged homologs are present', () => {
+    const homologsOnly = `>hit_one
+MKWVTFISLLLLFSSAYSRGVFRRDTHKSEIAHRFKDLGEEHFKGLVLIAFSQYLQQCPFD
+>hit_two
+MKWVTFISLLLLFSSAYSRGVFRRDTHKSEIAHRFKDLGEEHFKGLVLIAFSQYLQQCPFD
+`
+    expect(
+      detectQueryRow(homologsOnly, 'WWWWWWWWWWWWWWWWWWWWWWWWWWWWWW'),
+    ).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()
+  })
+})
+
+describe('getMsaRowNames', () => {
+  test('lists the rows for the override dropdown', () => {
+    expect(getMsaRowNames(clustal)).toEqual([
+      'Query_1',
+      'sp|P02769|ALBU',
+      'sp|Q5XLE4|OTHE',
+    ])
+  })
+
+  test('is empty rather than throwing while the user is still pasting', () => {
+    expect(getMsaRowNames('CLUSTAL W')).toEqual([])
+    expect(getMsaRowNames('')).toEqual([])
+  })
+})