jbrowse-plugin-msaview 2.2.0 → 2.2.2

package/dist/utils/fetch.d.ts

@@ -1,4 +1,6 @@
-export declare function myfetch(url: string, args?: RequestInit): Promise<Response>;
+export declare function handleFetch(url: string, args?: RequestInit): Promise<Response>;
 export declare function textfetch(url: string, args?: RequestInit): Promise<string>;
 export declare function jsonfetch<T>(url: string, args?: RequestInit): Promise<T>;
 export declare function timeout(time: number): Promise<unknown>;
+export declare function fetchWithLocalStorageCache<T>(key: string, fetchFn: () => Promise<T>): Promise<T>;
+export declare function unzipfetch(url: string, arg?: RequestInit): Promise<string>;

package/dist/utils/fetch.js

@@ -1,4 +1,5 @@
-export async function myfetch(url, args) {
+import { ungzip } from 'pako';
+export async function handleFetch(url, args) {
     const response = await fetch(url, args);
     if (!response.ok) {
         throw new Error(`HTTP ${response.status} fetching ${url} ${await response.text()}`);
@@ -6,14 +7,34 @@ export async function myfetch(url, args) {
     return response;
 }
 export async function textfetch(url, args) {
-    const response = await myfetch(url, args);
+    const response = await handleFetch(url, args);
     return response.text();
 }
 export async function jsonfetch(url, args) {
-    const response = await myfetch(url, args);
+    const response = await handleFetch(url, args);
     return response.json();
 }
 export function timeout(time) {
     return new Promise(res => setTimeout(res, time));
 }
+export async function fetchWithLocalStorageCache(key, fetchFn) {
+    const cachedData = localStorage.getItem(key);
+    if (cachedData) {
+        try {
+            return JSON.parse(cachedData);
+        }
+        catch (error) {
+            console.error(`Error parsing cached data for ${key}:`, error);
+            // Continue to fetch fresh data if parsing fails
+            localStorage.removeItem(key);
+        }
+    }
+    const data = await fetchFn();
+    localStorage.setItem(key, JSON.stringify(data));
+    return data;
+}
+export async function unzipfetch(url, arg) {
+    const res = await handleFetch(url, arg);
+    return ungzip(await res.arrayBuffer(), { to: 'string' });
+}
 //# sourceMappingURL=fetch.js.map

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,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"}
+{"version":3,"file":"fetch.js","sourceRoot":"","sources":["../../src/utils/fetch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAE7B,MAAM,CAAC,KAAK,UAAU,WAAW,CAAC,GAAW,EAAE,IAAkB;IAC/D,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,WAAW,CAAC,GAAG,EAAE,IAAI,CAAC,CAAA;IAC7C,OAAO,QAAQ,CAAC,IAAI,EAAE,CAAA;AACxB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,SAAS,CAAI,GAAW,EAAE,IAAkB;IAChE,MAAM,QAAQ,GAAG,MAAM,WAAW,CAAC,GAAG,EAAE,IAAI,CAAC,CAAA;IAC7C,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;AAED,MAAM,CAAC,KAAK,UAAU,0BAA0B,CAC9C,GAAW,EACX,OAAyB;IAEzB,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC,GAAG,CAAC,CAAA;IAE5C,IAAI,UAAU,EAAE,CAAC;QACf,IAAI,CAAC;YACH,OAAO,IAAI,CAAC,KAAK,CAAC,UAAU,CAAM,CAAA;QACpC,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,KAAK,CAAC,iCAAiC,GAAG,GAAG,EAAE,KAAK,CAAC,CAAA;YAC7D,gDAAgD;YAChD,YAAY,CAAC,UAAU,CAAC,GAAG,CAAC,CAAA;QAC9B,CAAC;IACH,CAAC;IAED,MAAM,IAAI,GAAG,MAAM,OAAO,EAAE,CAAA;IAC5B,YAAY,CAAC,OAAO,CAAC,GAAG,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAA;IAC/C,OAAO,IAAI,CAAA;AACb,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,UAAU,CAAC,GAAW,EAAE,GAAiB;IAC7D,MAAM,GAAG,GAAG,MAAM,WAAW,CAAC,GAAG,EAAE,GAAG,CAAC,CAAA;IACvC,OAAO,MAAM,CAAC,MAAM,GAAG,CAAC,WAAW,EAAE,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAA;AAC1D,CAAC"}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.2.0",
+  "version": "2.2.2",
   "license": "MIT",
   "name": "jbrowse-plugin-msaview",
   "keywords": [
@@ -39,7 +39,8 @@
     "@emotion/styled": "^11.14.0",
     "g2p_mapper": "^1.0.4",
     "pako": "^2.1.0",
-    "react-msaview": "^4.0.0"
+    "react-msaview": "^4.4.1",
+    "swr": "^2.3.3"
   },
   "devDependencies": {
     "@emotion/react": "^11.10.4",
@@ -50,18 +51,18 @@
     "@mui/material": "^7.1.0",
     "@mui/system": "^7.1.0",
     "@mui/x-data-grid": "^8.2.0",
-    "@types/node": "^22.10.7",
+    "@types/node": "^24.1.0",
     "@types/pako": "^2.0.1",
     "@types/react": "^19.1.6",
     "@typescript-eslint/eslint-plugin": "^8.0.1",
     "@typescript-eslint/parser": "^8.0.1",
     "esbuild": "^0.25.5",
-    "eslint": "^9.0.0",
+    "eslint": "^9.28.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-react": "^7.20.3",
-    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-hooks": "^7.0.0",
     "eslint-plugin-react-refresh": "^0.4.9",
-    "eslint-plugin-unicorn": "^59.0.1",
+    "eslint-plugin-unicorn": "^61.0.2",
     "mobx": "^6.10.2",
     "mobx-react": "^9.0.1",
     "mobx-state-tree": "^5.3.0",

package/src/BgzipFastaMsaAdapter/BgzipFastaMsaAdapter.ts

@@ -0,0 +1,78 @@
+import { readConfObject } from '@jbrowse/core/configuration'
+import {
+  BaseAdapter,
+  BaseFeatureDataAdapter,
+} from '@jbrowse/core/data_adapters/BaseAdapter'
+import { firstValueFrom, toArray } from 'rxjs'
+
+export default class BgzipFastaMsaAdapter extends BaseAdapter {
+  configureP: Promise<BaseFeatureDataAdapter> | undefined
+
+  refNamesP: Promise<string[]> | undefined
+
+  async configurePre() {
+    const getSubAdapter = this.getSubAdapter
+    if (getSubAdapter) {
+      const adapter = await getSubAdapter({
+        ...readConfObject(this.config),
+        type: 'BgzipFastaAdapter',
+      })
+
+      return adapter.dataAdapter as BaseFeatureDataAdapter
+    } else {
+      throw new Error('no get subadapter')
+    }
+  }
+  configure() {
+    this.configureP ??= this.configurePre().catch((e: unknown) => {
+      this.configureP = undefined
+      throw e
+    })
+    return this.configureP
+  }
+
+  async getMSARefs() {
+    this.refNamesP ??= this.configure()
+      .then(adapter => adapter.getRefNames())
+      .catch((e: unknown) => {
+        this.refNamesP = undefined
+        throw e
+      })
+    return this.refNamesP
+  }
+
+  async getMSAList() {
+    const refNames = await this.getMSARefs()
+    const list = new Set<string>()
+    const val = this.getConf('msaRegex')
+    const re = new RegExp(val)
+    for (let i = 0, l = refNames.length; i < l; i++) {
+      list.add(refNames[i]!.split(re)[0]!)
+    }
+    return [...list]
+  }
+
+  async getMSA(id: string) {
+    const adapter = await this.configure()
+    const refNames = await adapter.getRefNames()
+    const rows = []
+    for (let i = 0, l = refNames.length; i < l; i++) {
+      const refName = refNames[i]!
+      if (refName.startsWith(id)) {
+        rows.push(refName)
+      }
+    }
+    return firstValueFrom(
+      adapter
+        .getFeaturesInMultipleRegions(
+          rows.map(refName => ({
+            refName,
+            start: 0,
+            end: 1_000_000_000,
+            assemblyName: '',
+          })),
+        )
+        .pipe(toArray()),
+    )
+  }
+}

package/src/BgzipFastaMsaAdapter/configSchema.ts

@@ -0,0 +1,18 @@
+import PluginManager from '@jbrowse/core/PluginManager'
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
+
+export default function configSchemaF(pluginManager: PluginManager) {
+  const base = pluginManager.getAdapterType('BgzipFastaAdapter')
+  return ConfigurationSchema(
+    'BgzipFastaMsaAdapter',
+    {
+      msaRegex: {
+        type: 'string',
+        defaultValue: '_',
+      },
+    },
+    {
+      baseConfiguration: base?.configSchema,
+    },
+  )
+}

package/src/BgzipFastaMsaAdapter/index.ts

@@ -0,0 +1,18 @@
+import PluginManager from '@jbrowse/core/PluginManager'
+import { AdapterType } from '@jbrowse/core/pluggableElementTypes'
+
+import configSchemaF from './configSchema'
+
+export default function BgzipFastaMsaAdapterF(pluginManager: PluginManager) {
+  return pluginManager.addAdapterType(() => {
+    return new AdapterType({
+      name: 'BgzipFastaMsaAdapter',
+      configSchema: configSchemaF(pluginManager),
+      adapterMetadata: {
+        hiddenFromGUI: true,
+      },
+      getAdapterClass: () =>
+        import('./BgzipFastaMsaAdapter').then(t => t.default),
+    })
+  })
+}

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

@@ -19,7 +19,6 @@ import { useFeatureSequence } from '../useFeatureSequence'
 
 import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 
-
 const useStyles = makeStyles()({
   dialogContent: {
     width: '80em',

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

@@ -1,29 +1,11 @@
-import { useEffect, useState } from 'react'
-
+import useSWR from 'swr'
 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])
+  const { data, error, isLoading } = useSWR(
+    () => (geneId ? ['geneTree', geneId] : null),
+    ([, geneId]) => geneTreeFetcher(geneId),
+  )
 
-  return { treeData, isTreeLoading, treeError }
+  return { treeData: data, isTreeLoading: isLoading, treeError: error }
 }

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

@@ -1,45 +1,6 @@
-import { ungzip } from 'pako'
-
-export async function jsonfetch<T>(url: string, arg?: RequestInit) {
-  const res = await fetch(url, arg)
-  if (!res.ok) {
-    throw new Error(`HTTP ${res.status} from ${url}: ${await res.text()}`)
-  }
-  return res.json() as Promise<T>
-}
-
-export async function textfetch(url: string, arg?: RequestInit) {
-  const res = await fetch(url, arg)
-  if (!res.ok) {
-    throw new Error(`HTTP ${res.status} from ${url}`)
-  }
-  return res.text()
-}
-
-export async function fetchWithLocalStorageCache<T>(
-  key: string,
-  fetchFn: () => Promise<T>,
-): Promise<T> {
-  const cachedData = localStorage.getItem(key)
-
-  if (cachedData) {
-    try {
-      return JSON.parse(cachedData) as T
-    } catch (error) {
-      console.error(`Error parsing cached data for ${key}:`, error)
-      // Continue to fetch fresh data if parsing fails
-    }
-  }
-
-  const data = await fetchFn()
-  localStorage.setItem(key, JSON.stringify(data))
-  return data
-}
-
-export async function unzipfetch(url: string, arg?: RequestInit) {
-  const res = await fetch(url, arg)
-  if (!res.ok) {
-    throw new Error(`HTTP ${res.status} from ${url}: ${await res.text()}`)
-  }
-  return ungzip(await res.arrayBuffer(), { to: 'string' })
-}
+export {
+  fetchWithLocalStorageCache,
+  jsonfetch,
+  textfetch,
+  unzipfetch,
+} from '../../../utils/fetch'

package/src/LaunchMsaView/components/LaunchMsaViewDialog.tsx

@@ -10,7 +10,14 @@ import NCBIBlastPanel from './NCBIBlastQuery/NCBIBlastPanel'
 import PreLoadedMSA from './PreLoadedMSA/PreLoadedMSADataPanel'
 import TabPanel from './TabPanel'
 
-export default function LaunchProteinViewDialog({
+const TABS = {
+  NCBI_BLAST: 0,
+  PRELOADED_MSA: 1,
+  ENSEMBL_GENETREE: 2,
+  MANUAL_MSA: 3,
+}
+
+export default function LaunchMsaViewDialog({
   handleClose,
   feature,
   model,
@@ -19,50 +26,42 @@ export default function LaunchProteinViewDialog({
   feature: Feature
   model: AbstractTrackModel
 }) {
-  const [value, setValue] = useState(0)
+  const [value, setValue] = useState(TABS.NCBI_BLAST)
+
+  const handleChange = (_event: React.SyntheticEvent, newValue: number) => {
+    setValue(newValue)
+  }
 
   return (
-    <Dialog
-      maxWidth="xl"
-      title="Launch MSA view"
-      open
-      onClose={() => {
-        handleClose()
-      }}
-    >
-      <Tabs
-        value={value}
-        onChange={(_, val) => {
-          setValue(val)
-        }}
-      >
-        <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/tree" value={3} />
+    <Dialog maxWidth="xl" title="Launch MSA view" open onClose={handleClose}>
+      <Tabs value={value} onChange={handleChange}>
+        <Tab label="NCBI BLAST query" value={TABS.NCBI_BLAST} />
+        <Tab label="Pre-loaded MSA datasets" value={TABS.PRELOADED_MSA} />
+        <Tab label="Ensembl GeneTree" value={TABS.ENSEMBL_GENETREE} />
+        <Tab label="Manually open MSA dataset" value={TABS.MANUAL_MSA} />
       </Tabs>
-      <TabPanel value={value} index={0}>
+      <TabPanel value={value} index={TABS.NCBI_BLAST}>
         <NCBIBlastPanel
           handleClose={handleClose}
           feature={feature}
           model={model}
         />
       </TabPanel>
-      <TabPanel value={value} index={1}>
+      <TabPanel value={value} index={TABS.PRELOADED_MSA}>
         <PreLoadedMSA
           model={model}
           feature={feature}
           handleClose={handleClose}
         />
       </TabPanel>
-      <TabPanel value={value} index={2}>
+      <TabPanel value={value} index={TABS.ENSEMBL_GENETREE}>
         <EnsemblGeneTree
           model={model}
           feature={feature}
           handleClose={handleClose}
         />
       </TabPanel>
-      <TabPanel value={value} index={3}>
+      <TabPanel value={value} index={TABS.MANUAL_MSA}>
         <ManualMSALoader
           model={model}
           feature={feature}

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

@@ -22,7 +22,7 @@ import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
 import { launchView } from './launchView'
-import TextField2 from '../../../TextField2'
+import TextField2 from '../../../components/TextField2'
 import { getGeneDisplayName, getId, getTranscriptFeatures } from '../../util'
 import TranscriptSelector from '../TranscriptSelector'
 import { useFeatureSequence } from '../useFeatureSequence'

package/src/LaunchMsaView/components/NCBIBlastQuery/NCBIBlastAutomaticPanel.tsx

@@ -7,6 +7,7 @@ import {
   getContainingView,
 } from '@jbrowse/core/util'
 import {
+  Box,
   Button,
   DialogActions,
   DialogContent,
@@ -17,7 +18,7 @@ import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
 import { blastLaunchView } from './blastLaunchView'
-import TextField2 from '../../../TextField2'
+import TextField2 from '../../../components/TextField2'
 import {
   getGeneDisplayName,
   getId,
@@ -71,11 +72,11 @@ const NCBIBlastAutomaticPanel = observer(function ({
     getId(options[0]),
   )
   const [selectedBlastProgram, setSelectedBlastProgram] =
-    useState<blastProgramsT>('blastp')
+    useState<blastProgramsT>('quick-blastp')
   const selectedTranscript = options.find(
     val => getId(val) === selectedTranscriptId,
   )!
-  const { error, proteinSequence } = useFeatureSequence({
+  const { error: proteinSequenceError, proteinSequence } = useFeatureSequence({
     view,
     feature: selectedTranscript,
   })
@@ -85,7 +86,8 @@ const NCBIBlastAutomaticPanel = observer(function ({
       setSelectedBlastProgram('blastp')
     }
   }, [selectedBlastDatabase])
-  const e = error ?? launchViewError
+  const e = proteinSequenceError ?? launchViewError
+  const style = { width: 150 }
   return (
     <>
       <DialogContent className={classes.dialogContent}>
@@ -94,7 +96,7 @@ const NCBIBlastAutomaticPanel = observer(function ({
         <TextField2
           variant="outlined"
           label="BLAST database"
-          style={{ width: 150 }}
+          style={style}
           select
           value={selectedBlastDatabase}
           onChange={event => {
@@ -113,7 +115,7 @@ const NCBIBlastAutomaticPanel = observer(function ({
         <TextField2
           variant="outlined"
           label="MSA Algorithm"
-          style={{ width: 150 }}
+          style={style}
           select
           value={selectedMsaAlgorithm}
           onChange={event => {
@@ -134,7 +136,7 @@ const NCBIBlastAutomaticPanel = observer(function ({
             variant="outlined"
             label="BLAST program"
             disabled={selectedBlastDatabase === 'nr_cluster_seq'}
-            style={{ width: 150 }}
+            style={style}
             select
             value={selectedBlastProgram}
             onChange={event => {
@@ -152,7 +154,10 @@ const NCBIBlastAutomaticPanel = observer(function ({
           {selectedBlastDatabase === 'nr_cluster_seq' ? (
             <Typography
               variant="subtitle2"
-              style={{ marginLeft: 4, alignContent: 'center' }}
+              style={{
+                marginLeft: 4,
+                alignContent: 'center',
+              }}
             >
               Can only use blastp on nr_cluster_seq
             </Typography>

package/src/LaunchMsaView/components/NCBIBlastQuery/NCBIBlastManualPanel.tsx

@@ -6,7 +6,7 @@ import { Button, DialogActions, DialogContent, Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
-import ExternalLink from '../../../ExternalLink'
+import ExternalLink from '../../../components/ExternalLink'
 import { getId, getTranscriptFeatures } from '../../util'
 import TranscriptSelector from '../TranscriptSelector'
 import { useFeatureSequence } from '../useFeatureSequence'

package/src/LaunchMsaView/components/NCBIBlastQuery/NCBIBlastPanel.tsx

@@ -28,6 +28,11 @@ export default function NCBIBlastPanel({
   )
   const [settingsOpen, setSettingsOpen] = useState(false)
 
+  const Panel =
+    lookupMethod === 'automatic'
+      ? NCBIBlastAutomaticPanel
+      : NCBIBlastManualPanel
+
   return (
     <>
       <IconButton
@@ -40,38 +45,24 @@ export default function NCBIBlastPanel({
         <SettingsIcon />
       </IconButton>
 
-      {lookupMethod === 'automatic' ? (
-        <NCBIBlastAutomaticPanel
-          model={model}
-          feature={feature}
-          handleClose={handleClose}
-          baseUrl={baseUrl}
-        >
-          <NCBIBlastMethodSelector
-            lookupMethod={lookupMethod}
-            setLookupMethod={setLookupMethod}
-          />
-        </NCBIBlastAutomaticPanel>
-      ) : null}
-      {lookupMethod === 'manual' ? (
-        <NCBIBlastManualPanel
-          model={model}
-          feature={feature}
-          handleClose={handleClose}
-          baseUrl={baseUrl}
-        >
-          <NCBIBlastMethodSelector
-            lookupMethod={lookupMethod}
-            setLookupMethod={setLookupMethod}
-          />
-        </NCBIBlastManualPanel>
-      ) : null}
+      <Panel
+        model={model}
+        feature={feature}
+        handleClose={handleClose}
+        baseUrl={baseUrl}
+      >
+        <NCBIBlastMethodSelector
+          lookupMethod={lookupMethod}
+          setLookupMethod={setLookupMethod}
+        />
+      </Panel>
+
       {settingsOpen ? (
         <NCBISettingsDialog
           baseUrl={baseUrl}
-          handleClose={arg => {
-            if (arg) {
-              setBaseUrl(arg)
+          handleClose={newUrl => {
+            if (newUrl) {
+              setBaseUrl(newUrl)
             }
             setSettingsOpen(false)
           }}

package/src/LaunchMsaView/components/NCBIBlastQuery/NCBISettingsDialog.tsx

@@ -9,7 +9,7 @@ import {
 } from '@mui/material'
 
 import { BASE_BLAST_URL } from './consts'
-import TextField2 from '../../../TextField2'
+import TextField2 from '../../../components/TextField2'
 
 export default function NCBISettingsDialog({
   handleClose,