jbrowse-plugin-msaview 2.1.0 → 2.2.0

package/dist/utils/fetch.d.ts

@@ -1,4 +1,4 @@
 export declare function myfetch(url: string, args?: RequestInit): Promise<Response>;
 export declare function textfetch(url: string, args?: RequestInit): Promise<string>;
-export declare function jsonfetch(url: string, args?: RequestInit): Promise<any>;
+export declare function jsonfetch<T>(url: string, args?: RequestInit): Promise<T>;
 export declare function timeout(time: number): Promise<unknown>;

package/dist/utils/fetch.js.map

@@ -1 +1 @@
-{"version":3,"file":"fetch.js","sourceRoot":"","sources":["../../src/utils/fetch.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,KAAK,UAAU,OAAO,CAAC,GAAW,EAAE,IAAkB;IAC3D,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,GAAG,EAAE,IAAI,CAAC,CAAA;IAEvC,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC;QACjB,MAAM,IAAI,KAAK,CACb,QAAQ,QAAQ,CAAC,MAAM,aAAa,GAAG,IAAI,MAAM,QAAQ,CAAC,IAAI,EAAE,EAAE,CACnE,CAAA;IACH,CAAC;IAED,OAAO,QAAQ,CAAA;AACjB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,SAAS,CAAC,GAAW,EAAE,IAAkB;IAC7D,MAAM,QAAQ,GAAG,MAAM,OAAO,CAAC,GAAG,EAAE,IAAI,CAAC,CAAA;IACzC,OAAO,QAAQ,CAAC,IAAI,EAAE,CAAA;AACxB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,SAAS,CAAC,GAAW,EAAE,IAAkB;IAC7D,MAAM,QAAQ,GAAG,MAAM,OAAO,CAAC,GAAG,EAAE,IAAI,CAAC,CAAA;IACzC,OAAO,QAAQ,CAAC,IAAI,EAAE,CAAA;AACxB,CAAC;AAED,MAAM,UAAU,OAAO,CAAC,IAAY;IAClC,OAAO,IAAI,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,UAAU,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC,CAAA;AAClD,CAAC"}
+{"version":3,"file":"fetch.js","sourceRoot":"","sources":["../../src/utils/fetch.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,KAAK,UAAU,OAAO,CAAC,GAAW,EAAE,IAAkB;IAC3D,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,GAAG,EAAE,IAAI,CAAC,CAAA;IAEvC,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC;QACjB,MAAM,IAAI,KAAK,CACb,QAAQ,QAAQ,CAAC,MAAM,aAAa,GAAG,IAAI,MAAM,QAAQ,CAAC,IAAI,EAAE,EAAE,CACnE,CAAA;IACH,CAAC;IAED,OAAO,QAAQ,CAAA;AACjB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,SAAS,CAAC,GAAW,EAAE,IAAkB;IAC7D,MAAM,QAAQ,GAAG,MAAM,OAAO,CAAC,GAAG,EAAE,IAAI,CAAC,CAAA;IACzC,OAAO,QAAQ,CAAC,IAAI,EAAE,CAAA;AACxB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,SAAS,CAAI,GAAW,EAAE,IAAkB;IAChE,MAAM,QAAQ,GAAG,MAAM,OAAO,CAAC,GAAG,EAAE,IAAI,CAAC,CAAA;IACzC,OAAO,QAAQ,CAAC,IAAI,EAAgB,CAAA;AACtC,CAAC;AAED,MAAM,UAAU,OAAO,CAAC,IAAY;IAClC,OAAO,IAAI,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,UAAU,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC,CAAA;AAClD,CAAC"}

package/dist/utils/ncbiBlast.d.ts

@@ -1,8 +1,8 @@
-export declare const BLAST_URL = "https://blast.ncbi.nlm.nih.gov/blast/Blast.cgi";
-export declare function queryBlast({ query, blastDatabase, blastProgram, onProgress, onRid, }: {
+export declare function queryBlast({ query, blastDatabase, blastProgram, baseUrl, onProgress, onRid, }: {
     query: string;
     blastDatabase: string;
     blastProgram: string;
+    baseUrl: string;
     onProgress: (arg: string) => void;
     onRid: (arg: string) => void;
 }): Promise<{

package/dist/utils/ncbiBlast.js

@@ -1,26 +1,30 @@
 import { jsonfetch, textfetch, timeout } from './fetch';
-export const BLAST_URL = `https://blast.ncbi.nlm.nih.gov/blast/Blast.cgi`;
-export async function queryBlast({ query, blastDatabase, blastProgram, onProgress, onRid, }) {
+export async function queryBlast({ query, blastDatabase, blastProgram, baseUrl, onProgress, onRid, }) {
     onProgress('Submitting to NCBI BLAST...');
     const { rid } = await initialQuery({
         query,
         blastDatabase,
         blastProgram,
+        baseUrl,
     });
     onRid(rid);
-    await waitForRid({ rid, onProgress });
-    const ret = (await jsonfetch(`${BLAST_URL}?CMD=Get&RID=${rid}&FORMAT_TYPE=JSON2_S&FORMAT_OBJECT=Alignment`));
+    await waitForRid({
+        rid,
+        onProgress,
+        baseUrl,
+    });
+    const ret = await jsonfetch(`${baseUrl}?CMD=Get&RID=${rid}&FORMAT_TYPE=JSON2_S&FORMAT_OBJECT=Alignment`);
     return {
         rid,
         hits: ret.BlastOutput2[0]?.report.results.search.hits ?? [],
     };
 }
-async function initialQuery({ query, blastProgram, blastDatabase, }) {
-    const res = await textfetch(BLAST_URL, {
+async function initialQuery({ query, blastProgram, blastDatabase, baseUrl, }) {
+    const res = await textfetch(baseUrl, {
         method: 'POST',
         body: new URLSearchParams({
             CMD: 'Put',
-            PROGRAM: blastProgram,
+            PROGRAM: blastProgram === 'quick-blastp' ? 'blastp' : blastProgram,
             DATABASE: blastDatabase,
             QUERY: query,
             ...(blastDatabase === 'nr_clustered_seq'
@@ -29,6 +33,9 @@ async function initialQuery({ query, blastProgram, blastDatabase, }) {
                     DB_TYPE: 'Experimental Databases',
                 }
                 : {}),
+            ...(blastProgram === 'quick-blastp'
+                ? { BLAST_PROGRAMS: 'kmerBlastp' }
+                : {}),
         }),
     });
     // the initial submission/query to the BLAST "REST API" does not return JSON
@@ -39,9 +46,12 @@ async function initialQuery({ query, blastProgram, blastDatabase, }) {
     if (!rid) {
         throw new Error('Failed to get RID from BLAST request');
     }
-    return { rid, rtoe };
+    return {
+        rid,
+        rtoe,
+    };
 }
-async function waitForRid({ rid, onProgress, }) {
+async function waitForRid({ rid, onProgress, baseUrl, }) {
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     while (true) {
         const iter = 20;
@@ -49,15 +59,19 @@ async function waitForRid({ rid, onProgress, }) {
             await timeout(1000);
             onProgress(`Re-checking BLAST status in... ${iter - i}`);
         }
-        const res = await textfetch(`${BLAST_URL}?CMD=Get&FORMAT_OBJECT=SearchInfo&RID=${rid}`);
-        if (/\s+Status=WAITING/m.test(res)) {
+        const res = await textfetch(`${baseUrl}?CMD=Get&FORMAT_OBJECT=SearchInfo&RID=${rid}`);
+        const isWaiting = /\s+Status=WAITING/m.test(res);
+        const isFailed = /\s+Status=FAILED/m.test(res);
+        const isReady = /\s+Status=READY/m.test(res);
+        const hasHits = /\s+ThereAreHits=yes/m.test(res);
+        if (isWaiting) {
             continue;
         }
-        else if (/\s+Status=FAILED/m.test(res)) {
-            throw new Error(`BLAST ${rid} failed; please report to blast-help@ncbi.nlm.nih.gov`);
+        if (isFailed) {
+            throw new Error(`BLAST ${rid} failed`);
         }
-        else if (/\s+Status=READY/m.test(res)) {
-            if (/\s+ThereAreHits=yes/m.test(res)) {
+        if (isReady) {
+            if (hasHits) {
                 return true;
             }
             else {

package/dist/utils/ncbiBlast.js.map

@@ -1 +1 @@
-{"version":3,"file":"ncbiBlast.js","sourceRoot":"","sources":["../../src/utils/ncbiBlast.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"ncbiBlast.js","sourceRoot":"","sources":["../../src/utils/ncbiBlast.ts"],"names":[],"mappings":"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"}

package/dist/utils/types.d.ts

@@ -0,0 +1,20 @@
+export interface BlastResults {
+    BlastOutput2: {
+        report: {
+            results: {
+                search: {
+                    hits: {
+                        description: {
+                            accession: string;
+                            id: string;
+                            sciname: string;
+                        }[];
+                        hsps: {
+                            hseq: string;
+                        }[];
+                    }[];
+                };
+            };
+        };
+    }[];
+}

package/dist/utils/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/utils/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/utils/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.1.0",
+  "version": "2.2.0",
   "license": "MIT",
   "name": "jbrowse-plugin-msaview",
   "keywords": [
@@ -52,10 +52,10 @@
     "@mui/x-data-grid": "^8.2.0",
     "@types/node": "^22.10.7",
     "@types/pako": "^2.0.1",
-    "@types/react": "^19.0.7",
+    "@types/react": "^19.1.6",
     "@typescript-eslint/eslint-plugin": "^8.0.1",
     "@typescript-eslint/parser": "^8.0.1",
-    "esbuild": "^0.25.4",
+    "esbuild": "^0.25.5",
     "eslint": "^9.0.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-react": "^7.20.3",

package/src/AddHighlightModel/GenomeMouseoverHighlight.tsx

@@ -7,7 +7,7 @@ import { useStyles } from './util'
 
 import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 
-const GenomeMouseoverHighlight = observer(function GenomeMouseoverHighlight2({
+const GenomeMouseoverHighlight = observer(function ({
   model,
 }: {
   model: LinearGenomeViewModel
@@ -16,11 +16,11 @@ const GenomeMouseoverHighlight = observer(function GenomeMouseoverHighlight2({
   return hovered &&
     typeof hovered === 'object' &&
     'hoverPosition' in hovered ? (
-    <HoverHighlight model={model} />
+    <GenomeMouseoverHighlightPostNullCheck model={model} />
   ) : null
 })
 
-const HoverHighlight = observer(function HoverHighlight2({
+const GenomeMouseoverHighlightPostNullCheck = observer(function ({
   model,
 }: {
   model: LinearGenomeViewModel

package/src/AddHighlightModel/MsaToGenomeHighlight.tsx

@@ -42,8 +42,9 @@ const MsaToGenomeHighlight = observer(function MsaToGenomeHighlight2({
               style={{ left, width }}
             />
           )
+        } else {
+          return null
         }
-        return null
       })}
     </>
   ) : null

package/src/ExternalLink.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import OpenInNewIcon from '@mui/icons-material/OpenInNew'
+import { Link } from '@mui/material'
+
+import type { LinkProps } from '@mui/material'
+
+export default function ExternalLink(props: LinkProps) {
+  const { children, ...rest } = props
+  return (
+    <Link {...rest} target="_blank" rel="noreferrer">
+      {children} <OpenInNewIcon fontSize="small" />
+    </Link>
+  )
+}

package/src/LaunchMsaView/components/EnsemblGeneTree/EnsemblGeneTree.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 
 import { ErrorMessage, LoadingEllipses } from '@jbrowse/core/ui'
 import {
@@ -7,36 +7,28 @@ import {
   getContainingView,
   getSession,
 } from '@jbrowse/core/util'
-import {
-  Button,
-  DialogActions,
-  DialogContent,
-  MenuItem,
-  TextField,
-  Typography,
-} from '@mui/material'
+import { Button, DialogActions, DialogContent, Link } from '@mui/material'
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
 import { ensemblGeneTreeLaunchView } from './ensemblGeneTreeLaunchView'
-import { geneTreeFetcher } from './ensemblGeneTreeUtils'
-import {
-  getGeneDisplayName,
-  getId,
-  getTranscriptDisplayName,
-  getTranscriptFeatures,
-} from '../../util'
+import { useGeneTree } from './useGeneTree'
+import { getGeneDisplayName, getId, getTranscriptFeatures } from '../../util'
+import TranscriptSelector from '../TranscriptSelector'
+import { useFeatureSequence } from '../useFeatureSequence'
 
 import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 
+
 const useStyles = makeStyles()({
   dialogContent: {
     width: '80em',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 16,
   },
 })
 
-type Ret = Awaited<ReturnType<typeof geneTreeFetcher>>
-
 const EnsemblGeneTree = observer(function ({
   model,
   feature,
@@ -49,54 +41,46 @@ const EnsemblGeneTree = observer(function ({
   const session = getSession(model)
   const view = getContainingView(model) as LinearGenomeViewModel
   const { classes } = useStyles()
-  const [error, setError] = useState<unknown>()
-  const [treeData, setTreeData] = useState<Ret>()
-  const [isTreeLoading, setIsTreeLoading] = useState(false)
-  const [treeError, setTreeError] = useState<unknown>()
+  const [launchViewError, setLaunchViewError] = useState<unknown>()
   const options = getTranscriptFeatures(feature)
   const [userSelection, setUserSelection] = useState(getId(options[0]))
+  const { treeData, isTreeLoading, treeError } = useGeneTree(userSelection)
+  const selectedTranscript = options.find(val => getId(val) === userSelection)!
 
-  useEffect(() => {
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    ;(async () => {
-      try {
-        setIsTreeLoading(true)
-        const result = await geneTreeFetcher(userSelection)
-        setTreeData(result)
-      } catch (e) {
-        console.error(e)
-        setTreeError(e)
-      } finally {
-        setIsTreeLoading(false)
-      }
-    })()
-  }, [userSelection])
+  const { proteinSequence, error: featureSequenceError } = useFeatureSequence({
+    view,
+    feature: selectedTranscript,
+  })
 
   const loadingMessage = isTreeLoading
     ? 'Loading tree data from Ensembl GeneTree'
     : undefined
-  const e = treeError ?? error
+  const e = treeError ?? launchViewError ?? featureSequenceError
 
   return (
     <>
       <DialogContent className={classes.dialogContent}>
         {e ? <ErrorMessage error={e} /> : null}
         {loadingMessage ? <LoadingEllipses message={loadingMessage} /> : null}
-        <Typography>Load data from Ensembl GeneTree</Typography>
-        <TextField
-          select
-          label="Choose isoform to view MSA for"
-          value={userSelection}
-          onChange={event => {
-            setUserSelection(event.target.value)
-          }}
-        >
-          {options.map(val => (
-            <MenuItem value={getId(val)} key={val.id()}>
-              {getTranscriptDisplayName(val)}
-            </MenuItem>
-          ))}
-        </TextField>
+        {treeData ? (
+          <div>
+            <div>Found Ensembl Compara GeneTree: {treeData.geneTreeId}</div>
+            <Link
+              target="_blank"
+              href={`https://useast.ensembl.org/Multi/GeneTree/Image?gt=${treeData.geneTreeId}`}
+            >
+              See {treeData.geneTreeId} at Ensembl
+            </Link>
+          </div>
+        ) : null}
+
+        <TranscriptSelector
+          feature={feature}
+          options={options}
+          selectedTranscriptId={userSelection}
+          onTranscriptChange={setUserSelection}
+          proteinSequence={proteinSequence}
+        />
       </DialogContent>
 
       <DialogActions>
@@ -108,7 +92,7 @@ const EnsemblGeneTree = observer(function ({
               if (!treeData) {
                 return
               }
-              setError(undefined)
+              setLaunchViewError(undefined)
 
               ensemblGeneTreeLaunchView({
                 feature,
@@ -120,7 +104,7 @@ const EnsemblGeneTree = observer(function ({
               handleClose()
             } catch (e) {
               console.error(e)
-              setError(e)
+              setLaunchViewError(e)
             }
           }}
         >

package/src/LaunchMsaView/components/EnsemblGeneTree/ensemblGeneTreeLaunchView.ts

@@ -21,14 +21,8 @@ export function ensemblGeneTreeLaunchView({
   session.addView('MsaView', {
     type: 'MsaView',
     displayName: newViewTitle,
-    treeAreaWidth: 200,
-    treeWidth: 100,
-    drawNodeBubbles: false,
-    labelsAlignRight: true,
-    showBranchLen: false,
     colWidth: 10,
     rowHeight: 12,
-    colorSchemeName: 'percent_identity_dynamic',
     data,
     connectedViewId: view.id,
     connectedFeature: feature.toJSON(),

package/src/LaunchMsaView/components/EnsemblGeneTree/ensemblGeneTreeUtils.ts

@@ -1,55 +1,7 @@
+import { gatherSequencesFromTree } from './gatherSequencesFromTree'
+import { TreeNode } from './types'
 import { fetchWithLocalStorageCache, jsonfetch, textfetch } from './util'
 
-interface TreeNodeSequence {
-  mol_seq: {
-    seq: string
-    location?: string
-  }
-  id: {
-    accession: string
-  }[]
-}
-
-interface TreeNodeTaxonomy {
-  common_name: string
-  scientific_name: string
-}
-
-// This is a self-referential tree data structure
-interface TreeNode {
-  children?: TreeNode[]
-  sequence?: TreeNodeSequence
-  taxonomy: TreeNodeTaxonomy
-}
-
-interface TreeRow {
-  id: string
-  seq: string
-  species: string
-  genomicLocString?: string
-}
-
-function gatherSequencesFromTree(tree: TreeNode, arr: TreeRow[] = []) {
-  if (tree.children) {
-    for (const child of tree.children) {
-      if (child.sequence) {
-        const id = child.sequence.id[0]?.accession
-        if (id) {
-          arr.push({
-            id,
-            seq: child.sequence.mol_seq.seq,
-            species:
-              child.taxonomy.common_name || child.taxonomy.scientific_name,
-            genomicLocString: child.sequence.mol_seq.location,
-          })
-        }
-      }
-      gatherSequencesFromTree(child, arr)
-    }
-  }
-  return arr
-}
-
 const base = 'https://rest.ensembl.org'
 
 export async function geneTreeFetcher(id2: string) {
@@ -60,22 +12,35 @@ export async function geneTreeFetcher(id2: string) {
     ),
   )
   const treeBase = `${base}/genetree/member/id/${species}/${id}`
-  const msa = await fetchWithLocalStorageCache(`${id}-msa`, () =>
-    jsonfetch<{ tree: TreeNode }>(
+  const geneTreeResult = await fetchWithLocalStorageCache(`${id}-msa`, () =>
+    jsonfetch<{ tree: TreeNode; id: string }>(
       `${treeBase}?content-type=application/json;aligned=1;sequence=pep`,
     ),
   )
 
+  // we query again to get newick format tree. could probably extract from json
+  // as alternative
   const tree = await fetchWithLocalStorageCache<string>(`${id}-tree`, () =>
     textfetch(`${treeBase}?nh_format=simple;content-type=text/x-nh`),
   )
 
-  const res = gatherSequencesFromTree(msa.tree)
+  const res = gatherSequencesFromTree(geneTreeResult.tree)
   return {
+    geneTreeId: geneTreeResult.id,
     tree,
     msa: res.map(r => `>${r.id}\n${r.seq}`).join('\n'),
     treeMetadata: JSON.stringify(
-      Object.fromEntries(res.map(r => [r.id, { genome: r.species }] as const)),
+      Object.fromEntries(
+        res.map(
+          r =>
+            [
+              r.id,
+              {
+                genome: r.species,
+              },
+            ] as const,
+        ),
+      ),
     ),
   }
 }

package/src/LaunchMsaView/components/EnsemblGeneTree/gatherSequencesFromTree.ts

@@ -0,0 +1,22 @@
+import type { TreeNode, TreeRow } from './types'
+
+export function gatherSequencesFromTree(tree: TreeNode, arr: TreeRow[] = []) {
+  if (tree.children) {
+    for (const child of tree.children) {
+      if (child.sequence) {
+        const id = child.sequence.id[0]?.accession
+        if (id) {
+          arr.push({
+            id,
+            seq: child.sequence.mol_seq.seq,
+            species:
+              child.taxonomy.common_name || child.taxonomy.scientific_name,
+            genomicLocString: child.sequence.mol_seq.location,
+          })
+        }
+      }
+      gatherSequencesFromTree(child, arr)
+    }
+  }
+  return arr
+}

package/src/LaunchMsaView/components/EnsemblGeneTree/types.ts

@@ -0,0 +1,28 @@
+export interface TreeNodeSequence {
+  mol_seq: {
+    seq: string
+    location?: string
+  }
+  id: {
+    accession: string
+  }[]
+}
+
+export interface TreeNodeTaxonomy {
+  common_name: string
+  scientific_name: string
+}
+
+// This is a self-referential tree data structure
+export interface TreeNode {
+  children?: TreeNode[]
+  sequence?: TreeNodeSequence
+  taxonomy: TreeNodeTaxonomy
+}
+
+export interface TreeRow {
+  id: string
+  seq: string
+  species: string
+  genomicLocString?: string
+}

package/src/LaunchMsaView/components/EnsemblGeneTree/useGeneTree.ts

@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react'
+
+import { geneTreeFetcher } from './ensemblGeneTreeUtils'
+
+type Ret = Awaited<ReturnType<typeof geneTreeFetcher>>
+
+export function useGeneTree(geneId: string) {
+  const [treeData, setTreeData] = useState<Ret>()
+  const [isTreeLoading, setIsTreeLoading] = useState(false)
+  const [treeError, setTreeError] = useState<unknown>()
+
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    ;(async () => {
+      try {
+        setIsTreeLoading(true)
+        const result = await geneTreeFetcher(geneId)
+        setTreeData(result)
+      } catch (e) {
+        console.error(e)
+        setTreeError(e)
+      } finally {
+        setIsTreeLoading(false)
+      }
+    })()
+  }, [geneId])
+
+  return { treeData, isTreeLoading, treeError }
+}

package/src/LaunchMsaView/components/LaunchMsaViewDialog.tsx

@@ -5,8 +5,8 @@ import { AbstractTrackModel, Feature } from '@jbrowse/core/util'
 import { Tab, Tabs } from '@mui/material'
 
 import EnsemblGeneTree from './EnsemblGeneTree/EnsemblGeneTree'
-import MSALoader from './MSALoader/MSALoader'
-import NewNcbiBlastQueryPanel from './NewNCBIBlastQuery'
+import ManualMSALoader from './ManualMSALoader/ManualMSALoader'
+import NCBIBlastPanel from './NCBIBlastQuery/NCBIBlastPanel'
 import PreLoadedMSA from './PreLoadedMSA/PreLoadedMSADataPanel'
 import TabPanel from './TabPanel'
 
@@ -39,10 +39,10 @@ export default function LaunchProteinViewDialog({
         <Tab label="NCBI BLAST query" value={0} />
         <Tab label="UCSC 100-way dataset" value={1} />
         <Tab label="Ensembl GeneTree" value={2} />
-        <Tab label="Manually open MSA" value={3} />
+        <Tab label="Manually open MSA/tree" value={3} />
       </Tabs>
       <TabPanel value={value} index={0}>
-        <NewNcbiBlastQueryPanel
+        <NCBIBlastPanel
           handleClose={handleClose}
           feature={feature}
           model={model}
@@ -63,7 +63,11 @@ export default function LaunchProteinViewDialog({
         />
       </TabPanel>
       <TabPanel value={value} index={3}>
-        <MSALoader model={model} feature={feature} handleClose={handleClose} />
+        <ManualMSALoader
+          model={model}
+          feature={feature}
+          handleClose={handleClose}
+        />
       </TabPanel>
     </Dialog>
   )