jbrowse-plugin-msaview 3.0.0 → 3.2.0

package/dist/utils/launchMsaView.d.ts

@@ -0,0 +1,19 @@
+import type { MsaViewPlacement } from './workspaces';
+import type { AbstractSessionModel } from '@jbrowse/core/util';
+/**
+ * A launch, stated: what the view is, and where it goes. Everything but
+ * `placement` is a react-msaview or plugin-model snapshot property, passed
+ * through untouched so this never becomes a list that has to grow.
+ */
+export interface MsaViewLaunchSpec extends Record<string, unknown> {
+    /** default `stack`, the only thing an embedded session can do */
+    placement?: MsaViewPlacement;
+}
+/**
+ * The one place a launch adds an MSA view -- the dialog's four tabs, the Add
+ * menu, and the `LaunchView-MsaView` extension point a session spec arrives on
+ * all come through here. Each of them used to run its own `addView` and none
+ * placed the result, which is how a launch from a gene feature landed stacked
+ * under the very genome view it was connected to.
+ */
+export declare function launchMsaView(session: AbstractSessionModel, { placement, ...snapshot }: MsaViewLaunchSpec): import("@jbrowse/core/util").AbstractViewModel;

package/dist/utils/launchMsaView.js

@@ -0,0 +1,13 @@
+import { placeMsaView } from './workspaces';
+/**
+ * The one place a launch adds an MSA view -- the dialog's four tabs, the Add
+ * menu, and the `LaunchView-MsaView` extension point a session spec arrives on
+ * all come through here. Each of them used to run its own `addView` and none
+ * placed the result, which is how a launch from a gene feature landed stacked
+ * under the very genome view it was connected to.
+ */
+export function launchMsaView(session, { placement = 'stack', ...snapshot }) {
+    const view = session.addView('MsaView', { type: 'MsaView', ...snapshot });
+    placeMsaView(session, view.id, placement);
+    return view;
+}

package/dist/utils/workspaces.d.ts

@@ -0,0 +1,34 @@
+import type { AbstractSessionModel } from '@jbrowse/core/util';
+/**
+ * Where a launched MSA view lands. Every launch names one of these and stops
+ * there, so a host that arranges views differently is one function to teach.
+ *
+ *   stack       append below whatever is on screen
+ *   splitRight  its own cell to the right, beside the view it is connected to
+ *   newTab      its own tab in the current cell
+ */
+export type MsaViewPlacement = 'stack' | 'splitRight' | 'newTab';
+/**
+ * What the dialog does unasked. Side-by-side, because a launch from a gene
+ * feature sets `connectedViewId`: the pair shares a hover and a highlight, and
+ * reads as a split. A session spec defaults to `stack` instead.
+ */
+export declare const DEFAULT_LAUNCH_PLACEMENT: MsaViewPlacement;
+export declare const LAUNCH_PLACEMENT_KEY = "msaView-launchPlacement";
+export declare function resetWorkspacesWarning(): void;
+/**
+ * Whether this host can honor anything other than `stack`. Silent: the dialog
+ * asks on every render, and only a launch is worth warning about.
+ */
+export declare function sessionSupportsPlacement(session: AbstractSessionModel): boolean;
+/**
+ * Put a freshly added view where the launch said to. `stack` is a placement
+ * rather than the absence of one, so no caller has to ask what host it is on.
+ */
+export declare function placeMsaView(session: AbstractSessionModel, viewId: string, placement: MsaViewPlacement): void;
+/**
+ * The dialog's own remembered choice — not the host's preferences system, which
+ * records whether the user likes workspaces and does not exist everywhere.
+ */
+export declare function readLaunchPlacement(): MsaViewPlacement;
+export declare function writeLaunchPlacement(placement: MsaViewPlacement): void;

package/dist/utils/workspaces.js

@@ -0,0 +1,100 @@
+const PLACEMENTS = ['stack', 'splitRight', 'newTab'];
+/**
+ * What the dialog does unasked. Side-by-side, because a launch from a gene
+ * feature sets `connectedViewId`: the pair shares a hover and a highlight, and
+ * reads as a split. A session spec defaults to `stack` instead.
+ */
+export const DEFAULT_LAUNCH_PLACEMENT = 'splitRight';
+export const LAUNCH_PLACEMENT_KEY = 'msaView-launchPlacement';
+function hasAction(session, name) {
+    return (name in session &&
+        typeof session[name] === 'function');
+}
+// Warned at most once. This is a property of the host, so the answer is the
+// same on every launch and a dialog the user reopens should not stack up noise.
+let warnedPartial = false;
+export function resetWorkspacesWarning() {
+    warnedPartial = false;
+}
+/**
+ * Whether this host can honor anything other than `stack`. Silent: the dialog
+ * asks on every render, and only a launch is worth warning about.
+ */
+export function sessionSupportsPlacement(session) {
+    return (hasAction(session, 'setUseWorkspaces') &&
+        hasAction(session, 'setPendingMove'));
+}
+function isSessionWithWorkspaces(session) {
+    const canEnable = hasAction(session, 'setUseWorkspaces');
+    const canPlace = hasAction(session, 'setPendingMove');
+    // Missing BOTH is an embedded session: it has no workspaces, there is nothing
+    // to ask for, and silence is the right answer.
+    //
+    // Missing ONE is a host that has workspaces but places views some other way,
+    // and silence there is how the same feature broke in jbrowse-plugin-protein3d
+    // — jbrowse-web folded `setPendingMove` into its layout `init`, the guard went
+    // false, and the plugin simply stopped asking: no error, no missing feature,
+    // two views quietly stacking, nobody noticed for weeks. Feature detection
+    // cannot ask a host to announce a change, but it can tell "not supported here"
+    // from "supported, and gone".
+    //
+    // Two very different hosts produce this one shape and nothing on the session
+    // tells them apart, so the message carries both rather than a guess:
+    //
+    // - releases through v4.3.0, where placement is `setPendingMoveToSplitRight`,
+    //   a module function in @jbrowse/app-core rather than a session action.
+    //   Nothing is wrong and nothing needs fixing
+    // - a newer host that moved the action out from under us, which is the
+    //   regression this warning exists to catch
+    //
+    // Do not quiet the first case by sniffing the version. The alarm is only worth
+    // having if it fires on a shape it cannot explain, and these two are identical.
+    if (canEnable !== canPlace && !warnedPartial) {
+        warnedPartial = true;
+        console.warn(`jbrowse-plugin-msaview: this session supports workspaces but not ` +
+            `${canPlace ? 'setUseWorkspaces' : 'setPendingMove'}, so the MSA view ` +
+            `was stacked instead of tiled. Expected on releases through v4.3.0, ` +
+            `which place views through @jbrowse/app-core instead; on a newer host ` +
+            `it means the session API moved and the plugin needs updating to match.`);
+    }
+    return canEnable && canPlace;
+}
+/**
+ * Put a freshly added view where the launch said to. `stack` is a placement
+ * rather than the absence of one, so no caller has to ask what host it is on.
+ */
+export function placeMsaView(session, viewId, placement) {
+    if (placement === 'stack' || !isSessionWithWorkspaces(session)) {
+        return;
+    }
+    session.setPendingMove({ type: placement, viewId });
+    // Session-scoped: turning workspaces on for this session leaves the user's
+    // own default alone, which is what `setUseWorkspaces` (as against
+    // `setUseWorkspacesPreference`) is for.
+    session.setUseWorkspaces(true);
+}
+function isPlacement(value) {
+    return PLACEMENTS.includes(value);
+}
+/**
+ * The dialog's own remembered choice — not the host's preferences system, which
+ * records whether the user likes workspaces and does not exist everywhere.
+ */
+export function readLaunchPlacement() {
+    try {
+        const stored = globalThis.localStorage.getItem(LAUNCH_PLACEMENT_KEY);
+        return isPlacement(stored) ? stored : DEFAULT_LAUNCH_PLACEMENT;
+    }
+    catch (error) {
+        console.error(error);
+        return DEFAULT_LAUNCH_PLACEMENT;
+    }
+}
+export function writeLaunchPlacement(placement) {
+    try {
+        globalThis.localStorage.setItem(LAUNCH_PLACEMENT_KEY, placement);
+    }
+    catch (error) {
+        console.error(error);
+    }
+}

package/dist/utils/workspaces.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/workspaces.test.js

@@ -0,0 +1,100 @@
+import { afterEach, beforeEach, expect, test, vi } from 'vitest';
+import { launchMsaView } from './launchMsaView';
+import { DEFAULT_LAUNCH_PLACEMENT, LAUNCH_PLACEMENT_KEY, placeMsaView, readLaunchPlacement, resetWorkspacesWarning, sessionSupportsPlacement, writeLaunchPlacement, } from './workspaces';
+function makeSession({ canPlace = true, canEnable = true, } = {}) {
+    const recorded = { moves: [], workspaces: [], added: [] };
+    const session = {
+        addView(type, snapshot) {
+            recorded.added.push({ type, snapshot });
+            return { id: `view-${recorded.added.length}` };
+        },
+    };
+    if (canPlace) {
+        session.setPendingMove = (move) => recorded.moves.push(move);
+    }
+    if (canEnable) {
+        session.setUseWorkspaces = (on) => recorded.workspaces.push(on);
+    }
+    return { session: session, recorded };
+}
+// node has no localStorage, and the plugin runs in a browser -- a Map-backed
+// stub keeps read/write round-tripping without pulling in jsdom
+function stubStorage() {
+    const store = new Map();
+    vi.stubGlobal('localStorage', {
+        getItem: (key) => store.get(key) ?? null,
+        setItem: (key, value) => store.set(key, value),
+    });
+}
+beforeEach(() => {
+    resetWorkspacesWarning();
+    stubStorage();
+});
+afterEach(() => {
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+});
+test('stack places nothing, on a host that could tile', () => {
+    const { session, recorded } = makeSession();
+    placeMsaView(session, 'view-1', 'stack');
+    expect(recorded.moves).toEqual([]);
+    expect(recorded.workspaces).toEqual([]);
+});
+test('splitRight asks for the move, then turns workspaces on', () => {
+    const { session, recorded } = makeSession();
+    placeMsaView(session, 'view-1', 'splitRight');
+    expect(recorded.moves).toEqual([{ type: 'splitRight', viewId: 'view-1' }]);
+    expect(recorded.workspaces).toEqual([true]);
+});
+test('newTab is the same path with the other move type', () => {
+    const { session, recorded } = makeSession();
+    placeMsaView(session, 'view-1', 'newTab');
+    expect(recorded.moves).toEqual([{ type: 'newTab', viewId: 'view-1' }]);
+});
+// an embedded session has no workspaces at all, so there is nothing to report
+test('a session with neither action is a silent no-op', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => { });
+    const { session, recorded } = makeSession({
+        canPlace: false,
+        canEnable: false,
+    });
+    placeMsaView(session, 'view-1', 'splitRight');
+    expect(recorded.moves).toEqual([]);
+    expect(warn).not.toHaveBeenCalled();
+    expect(sessionSupportsPlacement(session)).toBe(false);
+});
+// the shape that broke jbrowse-plugin-protein3d silently: workspaces are there,
+// the action this plugin reaches for is not
+test('a half-supported host warns once and stacks', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => { });
+    const { session, recorded } = makeSession({ canPlace: false });
+    placeMsaView(session, 'view-1', 'splitRight');
+    placeMsaView(session, 'view-2', 'splitRight');
+    expect(recorded.moves).toEqual([]);
+    expect(warn).toHaveBeenCalledTimes(1);
+    expect(warn.mock.calls[0]?.[0]).toContain('setPendingMove');
+});
+test('the dialog default is side-by-side, and a junk value falls back to it', () => {
+    expect(DEFAULT_LAUNCH_PLACEMENT).toBe('splitRight');
+    expect(readLaunchPlacement()).toBe('splitRight');
+    localStorage.setItem(LAUNCH_PLACEMENT_KEY, 'sideways');
+    expect(readLaunchPlacement()).toBe('splitRight');
+    writeLaunchPlacement('stack');
+    expect(readLaunchPlacement()).toBe('stack');
+});
+test('launchMsaView defaults to stack, so a spec written before placement existed is unchanged', () => {
+    const { session, recorded } = makeSession();
+    launchMsaView(session, { data: { msa: '>a\nAC' } });
+    expect(recorded.added).toEqual([
+        { type: 'MsaView', snapshot: { type: 'MsaView', data: { msa: '>a\nAC' } } },
+    ]);
+    expect(recorded.moves).toEqual([]);
+});
+// placement is a launch instruction, not view state: MST would drop it from the
+// snapshot without a word, and the view would land stacked with nothing said
+test('launchMsaView keeps placement out of the view snapshot', () => {
+    const { session, recorded } = makeSession();
+    launchMsaView(session, { placement: 'splitRight', colWidth: 10 });
+    expect(recorded.added[0]?.snapshot).toEqual({ type: 'MsaView', colWidth: 10 });
+    expect(recorded.moves).toEqual([{ type: 'splitRight', viewId: 'view-1' }]);
+});

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "3.0.0";
+export declare const version = "3.2.0";

package/dist/version.js

@@ -1 +1 @@
-export const version = '3.0.0';
+export const version = '3.2.0';

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.0.0",
+  "version": "3.2.0",
   "license": "MIT",
   "name": "jbrowse-plugin-msaview",
   "repository": {
@@ -32,6 +32,8 @@
     "@mui/material": "^9.2.0",
     "@mui/system": "^9.2.0",
     "@mui/x-data-grid": "^9.10.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
     "@types/node": "^26.1.1",
     "@types/react": "^19.2.17",
     "esbuild": "^0.28.1",
@@ -41,6 +43,7 @@
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-unicorn": "^72.0.0",
     "git-cliff": "^2.13.1",
+    "jsdom": "^30.0.1",
     "mobx": "^6.16.1",
     "mobx-react": "^9.2.2",
     "msa-parsers": "^6.0.0",
@@ -68,6 +71,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/BlastAutomaticPanel.tsx

@@ -123,6 +123,7 @@ const BlastAutomaticPanel = observer(function ({
         ) : null}
       </LaunchPanelContent>
       <SubmitCancelActions
+        model={model}
         submitDisabled={!proteinSequence}
         onSubmit={() => {
           try {

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,101 @@ 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
+        model={model}
+        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/blastLaunchView.ts

@@ -1,5 +1,8 @@
 import { getSession } from '@jbrowse/core/util'
 
+import { launchMsaView } from '../../../utils/launchMsaView'
+import { readLaunchPlacement } from '../../../utils/workspaces'
+
 import type { BlastParams } from '../../../MsaViewPanel/model'
 import type { CachedBlastResult } from '../../../utils/blastCache'
 import type { Feature } from '@jbrowse/core/util'
@@ -16,8 +19,8 @@ export function blastLaunchView({
   feature: Feature
   blastParams: BlastParams
 }) {
-  getSession(view).addView('MsaView', {
-    type: 'MsaView',
+  launchMsaView(getSession(view), {
+    placement: readLaunchPlacement(),
     displayName: newViewTitle,
     connectedViewId: view.id,
     connectedFeature: feature.toJSON(),
@@ -39,8 +42,8 @@ export function blastLaunchViewFromCache({
   cached: CachedBlastResult
   connectedFeature?: ReturnType<Feature['toJSON']>
 }) {
-  getSession(view).addView('MsaView', {
-    type: 'MsaView',
+  launchMsaView(getSession(view), {
+    placement: readLaunchPlacement(),
     displayName: newViewTitle,
     connectedViewId: view.id,
     connectedFeature,

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,30 +133,11 @@ 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
+        model={model}
         submitDisabled={
           !selectedTranscript ||
           (inputMethod === 'file' && !msaFileLocation) ||
@@ -180,7 +151,7 @@ const ManualMSALoader = observer(function PreLoadedMSA2({
                 newViewTitle: getGeneDisplayName(selectedTranscript),
                 view,
                 feature: selectedTranscript,
-                querySeqName: querySeqName.trim(),
+                querySeqName: queryRow.querySeqName,
                 ...(inputMethod === 'file'
                   ? {
                       msaFilehandle: msaFileLocation,