jbrowse-plugin-msaview 2.3.3 → 2.3.8

package/dist/utils/blastCache.js

@@ -15,11 +15,10 @@ async function getDB() {
     });
 }
 function createCacheKey(proteinSequence, blastDatabase, blastProgram, transcriptId) {
-    const seqKey = proteinSequence.slice(0, 100);
     if (transcriptId) {
-        return `${blastDatabase}:${blastProgram}:${transcriptId}:${seqKey}`;
+        return `${blastDatabase}:${blastProgram}:${transcriptId}:${proteinSequence}`;
     }
-    return `${blastDatabase}:${blastProgram}:${seqKey}`;
+    return `${blastDatabase}:${blastProgram}:${proteinSequence}`;
 }
 export async function getCachedBlastResult({ proteinSequence, blastDatabase, blastProgram, transcriptId, }) {
     const db = await getDB();

package/dist/utils/blastCache.js.map

@@ -1 +1 @@
-{"version":3,"file":"blastCache.js","sourceRoot":"","sources":["../../src/utils/blastCache.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"blastCache.js","sourceRoot":"","sources":["../../src/utils/blastCache.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,KAAK,CAAA;AAE5B,MAAM,OAAO,GAAG,6BAA6B,CAAA;AAC7C,MAAM,UAAU,GAAG,eAAe,CAAA;AAClC,MAAM,UAAU,GAAG,CAAC,CAAA;AAmBpB,KAAK,UAAU,KAAK;IAClB,OAAO,MAAM,CAAC,OAAO,EAAE,UAAU,EAAE;QACjC,OAAO,CAAC,EAAE,EAAE,UAAU;YACpB,IAAI,UAAU,GAAG,CAAC,IAAI,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC;gBAC/D,EAAE,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAA;YAClC,CAAC;YACD,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC;gBAC9C,EAAE,CAAC,iBAAiB,CAAC,UAAU,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAA;YACrD,CAAC;QACH,CAAC;KACF,CAAC,CAAA;AACJ,CAAC;AAED,SAAS,cAAc,CACrB,eAAuB,EACvB,aAAqB,EACrB,YAAoB,EACpB,YAAqB;IAErB,IAAI,YAAY,EAAE,CAAC;QACjB,OAAO,GAAG,aAAa,IAAI,YAAY,IAAI,YAAY,IAAI,eAAe,EAAE,CAAA;IAC9E,CAAC;IACD,OAAO,GAAG,aAAa,IAAI,YAAY,IAAI,eAAe,EAAE,CAAA;AAC9D,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,oBAAoB,CAAC,EACzC,eAAe,EACf,aAAa,EACb,YAAY,EACZ,YAAY,GAMb;IACC,MAAM,EAAE,GAAG,MAAM,KAAK,EAAE,CAAA;IACxB,MAAM,EAAE,GAAG,cAAc,CACvB,eAAe,EACf,aAAa,EACb,YAAY,EACZ,YAAY,CACb,CAAA;IACD,OAAO,EAAE,CAAC,GAAG,CAAC,UAAU,EAAE,EAAE,CAAC,CAAA;AAC/B,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,eAAe,CAAC,EACpC,eAAe,EACf,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,GAAG,EACH,IAAI,EACJ,YAAY,EACZ,GAAG,EACH,MAAM,EACN,YAAY,EACZ,cAAc,EACd,QAAQ,GAcT;IACC,MAAM,EAAE,GAAG,MAAM,KAAK,EAAE,CAAA;IACxB,MAAM,EAAE,GAAG,cAAc,CACvB,eAAe,EACf,aAAa,EACb,YAAY,EACZ,YAAY,CACb,CAAA;IACD,MAAM,KAAK,GAAsB;QAC/B,EAAE;QACF,eAAe;QACf,aAAa;QACb,YAAY;QACZ,YAAY;QACZ,GAAG;QACH,IAAI;QACJ,YAAY;QACZ,GAAG;QACH,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;QACrB,MAAM;QACN,YAAY;QACZ,cAAc;QACd,QAAQ;KACT,CAAA;IACD,MAAM,EAAE,CAAC,GAAG,CAAC,UAAU,EAAE,KAAK,CAAC,CAAA;IAC/B,OAAO,KAAK,CAAA;AACd,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,mBAAmB;IACvC,MAAM,EAAE,GAAG,MAAM,KAAK,EAAE,CAAA;IACxB,MAAM,OAAO,GAAG,MAAM,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,CAAA;IAC3C,OAAO,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,GAAG,CAAC,CAAC,SAAS,CAAC,CAAA;AAC9D,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,wBAAwB,CAAC,MAAc;IAC3D,MAAM,EAAE,GAAG,MAAM,KAAK,EAAE,CAAA;IACxB,MAAM,OAAO,GAAG,MAAM,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,CAAA;IAC3C,OAAO,OAAO;SACX,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC;SAChC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,GAAG,CAAC,CAAC,SAAS,CAAC,CAAA;AAClD,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,kBAAkB,CAAC,EAAU;IACjD,MAAM,EAAE,GAAG,MAAM,KAAK,EAAE,CAAA;IACxB,MAAM,EAAE,CAAC,MAAM,CAAC,UAAU,EAAE,EAAE,CAAC,CAAA;AACjC,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,qBAAqB;IACzC,MAAM,EAAE,GAAG,MAAM,KAAK,EAAE,CAAA;IACxB,MAAM,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,CAAA;AAC5B,CAAC"}

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "2.3.3";
+export declare const version = "2.3.8";

package/dist/version.js

@@ -1,2 +1,2 @@
-export const version = '2.3.3';
+export const version = '2.3.8';
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.3.3",
+  "version": "2.3.8",
   "license": "MIT",
   "name": "jbrowse-plugin-msaview",
   "repository": {
@@ -15,66 +15,64 @@
     "dist",
     "src"
   ],
-  "scripts": {
-    "clean": "rimraf dist",
-    "start": "node esbuild.mjs --watch",
-    "format": "prettier --write .",
-    "build": "tsc && NODE_ENV=production node esbuild.mjs && cp distconfig.json dist/config.json",
-    "prebuild": "yarn clean",
-    "lint": "eslint --report-unused-disable-directives --max-warnings 0",
-    "pretest": "rm -rf .test-jbrowse && npx @jbrowse/cli create .test-jbrowse --nightly",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:setup": "node scripts/test-versions.mjs setup",
-    "test:setup:version": "node scripts/test-versions.mjs setup",
-    "test:versions": "node scripts/test-versions.mjs run",
-    "test:version": "node scripts/test-versions.mjs run",
-    "prepack": "yarn build",
-    "preversion": "yarn lint",
-    "version": "node -e \"console.log('export const version = \\'' + require('./package.json').version + '\\'')\" > src/version.ts && git add src/version.ts",
-    "postversion": "git push --follow-tags"
-  },
   "dependencies": {
     "@emotion/styled": "^11.14.1",
-    "g2p_mapper": "^2.0.0",
+    "g2p_mapper": "^2.0.1",
     "idb": "^8.0.3",
     "pako-esm2": "^2.0.2",
-    "react-msaview": "^5.0.13",
+    "react-msaview": "^5.0.16",
     "swr": "^2.4.1"
   },
   "devDependencies": {
     "@emotion/react": "^11.14.0",
-    "@eslint/js": "^9.39.4",
+    "@eslint/js": "^10.0.1",
     "@fal-works/esbuild-plugin-global-externals": "^2.1.2",
-    "@jbrowse/core": "^4.1.15",
+    "@jbrowse/core": "^4.2.0",
     "@jbrowse/mobx-state-tree": "^5.6.0",
-    "@jbrowse/plugin-linear-genome-view": "^4.1.15",
+    "@jbrowse/plugin-linear-genome-view": "^4.2.0",
     "@mui/icons-material": "^7.3.10",
     "@mui/material": "^7.3.10",
     "@mui/system": "^7.3.10",
     "@mui/x-data-grid": "^8.28.2",
     "@types/node": "^25.6.0",
     "@types/react": "^19.2.14",
+    "@typescript-eslint/eslint-plugin": "^8.59.1",
+    "@typescript-eslint/parser": "^8.59.1",
     "esbuild": "^0.28.0",
-    "eslint": "^9.39.4",
-    "eslint-plugin-import": "^2.32.0",
+    "eslint": "^10.2.1",
+    "eslint-plugin-import-x": "^4.16.2",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.5.2",
+    "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-unicorn": "^64.0.0",
     "mobx": "^6.15.0",
     "mobx-react": "^9.2.1",
-    "prettier": "^3.8.2",
+    "prettier": "^3.8.3",
     "pretty-bytes": "^7.1.0",
-    "puppeteer": "^24.40.0",
+    "puppeteer": "^24.42.0",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
     "rimraf": "^6.1.3",
     "rxjs": "^7.8.2",
     "serve": "^14.2.6",
     "tss-react": "^4.9.20",
-    "typescript": "^6.0.2",
-    "typescript-eslint": "^8.58.2",
-    "vitest": "^4.1.4"
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.59.1",
+    "vitest": "^4.1.5"
+  },
+  "scripts": {
+    "clean": "rimraf dist",
+    "start": "node esbuild.mjs --watch",
+    "format": "pnpm prettier --write .",
+    "build": "tsc && NODE_ENV=production node esbuild.mjs && cp distconfig.json dist/config.json",
+    "prebuild": "pnpm clean",
+    "lint": "eslint src --report-unused-disable-directives --max-warnings 0",
+    "pretest": "rm -rf .test-jbrowse && npx @jbrowse/cli create .test-jbrowse --nightly",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:setup": "node scripts/test-versions.mjs setup",
+    "test:setup:version": "node scripts/test-versions.mjs setup",
+    "test:versions": "node scripts/test-versions.mjs run",
+    "test:version": "node scripts/test-versions.mjs run",
+    "release": "node scripts/release.mjs"
   }
-}
+}

package/src/AddHighlightModel/GenomeMouseoverHighlight.tsx

@@ -38,8 +38,7 @@ const GenomeMouseoverHighlightRenderer = observer(function ({
   hovered,
 }: {
   model: LinearGenomeViewModel
-
-  hovered: any
+  hovered: object & Record<'hoverPosition', unknown>
 }) {
   const { classes } = useStyles()
   const { offsetPx } = model

package/src/BgzipFastaMsaAdapter/BgzipFastaMsaAdapter.ts

@@ -42,25 +42,16 @@ export default class BgzipFastaMsaAdapter extends BaseAdapter {
 
   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]!)
-    }
+    const list = new Set(refNames.map(name => name.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)
-      }
-    }
+    const rows = refNames.filter(refName => refName.startsWith(id))
     return firstValueFrom(
       adapter
         .getFeaturesInMultipleRegions(

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

@@ -35,6 +35,21 @@ const useStyles = makeStyles()({
   textAreaFont: {
     fontFamily: 'Courier New',
   },
+  inputContainer: {
+    marginBottom: 30,
+  },
+  fileContainer: {
+    maxWidth: 500,
+  },
+  msaInput: {
+    marginBottom: 20,
+  },
+  queryNameInput: {
+    marginTop: 20,
+  },
+  warningAlert: {
+    marginTop: 10,
+  },
 })
 
 const ManualMSALoader = observer(function PreLoadedMSA2({
@@ -91,9 +106,9 @@ const ManualMSALoader = observer(function PreLoadedMSA2({
           </RadioGroup>
         </FormControl>
 
-        <div style={{ marginBottom: 30 }}>
+        <div className={classes.inputContainer}>
           {inputMethod === 'file' ? (
-            <div style={{ maxWidth: 500 }}>
+            <div className={classes.fileContainer}>
               <FileSelector
                 name="MSA File .aln (Clustal), .fa/.mfa (aligned FASTA), .stock (Stockholm), etc)"
                 inline
@@ -114,7 +129,7 @@ const ManualMSALoader = observer(function PreLoadedMSA2({
                 name="MSA"
                 multiline
                 minRows={5}
-                style={{ marginBottom: '20px' }}
+                className={classes.msaInput}
                 maxRows={10}
                 fullWidth
                 placeholder="Paste MSA here"
@@ -154,7 +169,7 @@ const ManualMSALoader = observer(function PreLoadedMSA2({
           name="MSA row name"
           fullWidth
           required
-          style={{ marginTop: 20 }}
+          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}
@@ -163,13 +178,13 @@ const ManualMSALoader = observer(function PreLoadedMSA2({
           }}
         />
 
-        {!querySeqName.trim() && (
-          <Alert severity="warning" style={{ marginTop: 10 }}>
+        {!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}
       </DialogContent>
 
       <DialogActions>

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useMemo, useState } from 'react'
 
 import { ErrorMessage } from '@jbrowse/core/ui'
 import { getContainingView } from '@jbrowse/core/util'
@@ -13,19 +13,29 @@ import {
   Typography,
 } from '@mui/material'
 import { observer } from 'mobx-react'
+import { makeStyles } from 'tss-react/mui'
 
 import { blastLaunchViewFromCache } from './blastLaunchView'
-import {
-  clearAllCachedResults,
-  deleteCachedResult,
-  getAllCachedResults,
-} from '../../../utils/blastCache'
+import { useCachedBlastResults } from './useCachedBlastResults'
 import { getGeneIdentifiers } from '../../util'
 
 import type { CachedBlastResult } from '../../../utils/blastCache'
 import type { AbstractTrackModel, Feature } from '@jbrowse/core/util'
 import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 
+const useStyles = makeStyles()({
+  header: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 8,
+  },
+  resultList: {
+    maxHeight: 300,
+    overflow: 'auto',
+  },
+})
+
 function getResultDisplayName(result: CachedBlastResult): string {
   const parts = []
   if (result.geneName) {
@@ -49,44 +59,14 @@ const CachedBlastResults = observer(function ({
   handleClose: () => void
   feature: Feature
 }) {
-  const [results, setResults] = useState<CachedBlastResult[]>([])
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<unknown>()
+  const { classes } = useStyles()
   const view = getContainingView(model) as LinearGenomeViewModel
+  const [operationError, setOperationError] = useState<unknown>()
 
   const geneIds = useMemo(() => getGeneIdentifiers(feature), [feature])
 
-  useEffect(() => {
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    ;(async () => {
-      try {
-        const cached = await getAllCachedResults()
-        setResults(cached.filter(r => r.geneId && geneIds.includes(r.geneId)))
-        setLoading(false)
-      } catch (e) {
-        console.error(e)
-        setError(e)
-      }
-    })()
-  }, [geneIds])
-
-  const handleDelete = async (id: string) => {
-    try {
-      await deleteCachedResult(id)
-      setResults(r => r.filter(result => result.id !== id))
-    } catch (e) {
-      setError(e)
-    }
-  }
-
-  const handleClearAll = async () => {
-    try {
-      await clearAllCachedResults()
-      setResults([])
-    } catch (e) {
-      setError(e)
-    }
-  }
+  const { results, error, isLoading, handleDelete, handleClearAll } =
+    useCachedBlastResults(geneIds)
 
   const handleUseCached = (cached: CachedBlastResult) => {
     blastLaunchViewFromCache({
@@ -97,11 +77,12 @@ const CachedBlastResults = observer(function ({
     handleClose()
   }
 
-  if (error) {
-    return <ErrorMessage error={error} />
+  const displayError = error ?? operationError
+  if (displayError) {
+    return <ErrorMessage error={displayError} />
   }
 
-  if (loading) {
+  if (isLoading) {
     return <Typography>Loading cached results...</Typography>
   }
 
@@ -116,29 +97,26 @@ const CachedBlastResults = observer(function ({
 
   return (
     <div>
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          marginBottom: 8,
-        }}
-      >
+      <div className={classes.header}>
         <Typography variant="subtitle1">
           Cached BLAST Results ({results.length})
         </Typography>
         <Button
           size="small"
           color="error"
-          onClick={() => {
-            // eslint-disable-next-line @typescript-eslint/no-floating-promises
-            handleClearAll()
+          onClick={async () => {
+            try {
+              setOperationError(undefined)
+              await handleClearAll()
+            } catch (e) {
+              setOperationError(e)
+            }
           }}
         >
           Clear All
         </Button>
       </div>
-      <List dense style={{ maxHeight: 300, overflow: 'auto' }}>
+      <List dense className={classes.resultList}>
         {results.map(result => (
           <ListItem
             key={result.id}
@@ -147,10 +125,14 @@ const CachedBlastResults = observer(function ({
               <IconButton
                 edge="end"
                 size="small"
-                onClick={e => {
+                onClick={async e => {
                   e.stopPropagation()
-                  // eslint-disable-next-line @typescript-eslint/no-floating-promises
-                  handleDelete(result.id)
+                  try {
+                    setOperationError(undefined)
+                    await handleDelete(result.id)
+                  } catch (err) {
+                    setOperationError(err)
+                  }
                 }}
               >
                 <DeleteIcon fontSize="small" />

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useMemo, useState } from 'react'
 
 import { ErrorMessage } from '@jbrowse/core/ui'
 import { getContainingView } from '@jbrowse/core/util'
@@ -19,8 +19,8 @@ import { makeStyles } from 'tss-react/mui'
 import CachedBlastResults from './CachedBlastResults'
 import { blastLaunchView } from './blastLaunchView'
 import { msaAlgorithms } from './consts'
+import { useCachedBlastResults } from './useCachedBlastResults'
 import TextField2 from '../../../components/TextField2'
-import { getAllCachedResults } from '../../../utils/blastCache'
 import {
   getGeneDisplayName,
   getGeneIdentifiers,
@@ -83,24 +83,10 @@ const NCBIBlastAutomaticPanel = observer(function ({
     useState<MsaAlgorithm>('clustalo')
   const [selectedBlastProgram, setSelectedBlastProgram] =
     useState<blastProgramsT>('quick-blastp')
-  const [hasCachedResults, setHasCachedResults] = useState(false)
-  const [error, setError] = useState<unknown>()
 
   const geneIds = useMemo(() => getGeneIdentifiers(feature), [feature])
-  useEffect(() => {
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    ;(async () => {
-      try {
-        const results = await getAllCachedResults()
-        setHasCachedResults(
-          results.some(r => r.geneId && geneIds.includes(r.geneId)),
-        )
-      } catch (e) {
-        console.error(e)
-        setError(e)
-      }
-    })()
-  }, [geneIds])
+  const { results: cachedResults, error: cachedResultsError } =
+    useCachedBlastResults(geneIds)
 
   const {
     options,
@@ -110,7 +96,7 @@ const NCBIBlastAutomaticPanel = observer(function ({
     proteinSequence,
     error: proteinSequenceError,
   } = useTranscriptSelection({ feature, view })
-  const e = proteinSequenceError ?? launchViewError ?? error
+  const e = proteinSequenceError ?? launchViewError ?? cachedResultsError
   return (
     <>
       <DialogContent className={classes.dialogContent}>
@@ -205,7 +191,7 @@ const NCBIBlastAutomaticPanel = observer(function ({
           submitting BLAST yourself and downloading the resulting files
         </Typography>
 
-        {hasCachedResults ? (
+        {cachedResults.length > 0 ? (
           <Accordion className={classes.cachedResultsAccordion}>
             <AccordionSummary expandIcon={<ExpandMoreIcon />}>
               <Typography>Previous BLAST Results</Typography>
@@ -243,18 +229,23 @@ const NCBIBlastAutomaticPanel = observer(function ({
                   proteinSequence,
                 },
               })
+              handleClose()
             } catch (e) {
               console.error(e)
               setLaunchViewError(e)
             }
-
-            handleClose()
           }}
           disabled={!proteinSequence}
         >
           Submit
         </Button>
-        <Button color="secondary" variant="contained" onClick={handleClose}>
+        <Button
+          color="secondary"
+          variant="contained"
+          onClick={() => {
+            handleClose()
+          }}
+        >
           Cancel
         </Button>
       </DialogActions>

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

@@ -26,6 +26,9 @@ const useStyles = makeStyles()({
     margin: 30,
     maxWidth: 600,
   },
+  infoText: {
+    marginTop: 20,
+  },
 })
 
 const NCBIBlastManualPanel = observer(function ({
@@ -77,7 +80,7 @@ const NCBIBlastManualPanel = observer(function ({
           </div>
         ) : null}
 
-        <Typography style={{ marginTop: 20 }}>
+        <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

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

@@ -3,6 +3,7 @@ import React, { useState } from 'react'
 import { useLocalStorage } from '@jbrowse/core/util'
 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'
@@ -13,6 +14,12 @@ import { BASE_BLAST_URL } from './consts'
 
 import type { AbstractTrackModel, Feature } from '@jbrowse/core/util'
 
+const useStyles = makeStyles()({
+  settingsButton: {
+    float: 'right',
+  },
+})
+
 const panelMap = {
   automatic: NCBIBlastAutomaticPanel,
   rid: NCBIBlastRIDPanel,
@@ -34,13 +41,14 @@ export default function NCBIBlastPanel({
     BASE_BLAST_URL,
   )
   const [settingsOpen, setSettingsOpen] = useState(false)
+  const { classes } = useStyles()
 
   const Panel = panelMap[lookupMethod as keyof typeof panelMap]
 
   return (
     <>
       <IconButton
-        style={{ float: 'right' }}
+        className={classes.settingsButton}
         size="small"
         onClick={() => {
           setSettingsOpen(true)

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

@@ -28,6 +28,15 @@ const useStyles = makeStyles()({
   dialogContent: {
     width: '80em',
   },
+  marginBottom: {
+    marginBottom: 16,
+  },
+  ridField: {
+    width: 150,
+  },
+  infoText: {
+    marginTop: 20,
+  },
 })
 
 const NCBIBlastRIDPanel = observer(function ({
@@ -60,7 +69,6 @@ const NCBIBlastRIDPanel = observer(function ({
   } = useTranscriptSelection({ feature, view })
 
   const e = proteinSequenceError ?? launchViewError
-  const style = { width: 150 }
   const trimmedRid = rid.trim()
 
   return (
@@ -69,7 +77,7 @@ const NCBIBlastRIDPanel = observer(function ({
         {children}
         {e ? <ErrorMessage error={e} /> : null}
 
-        <Typography variant="body2" style={{ marginBottom: 16 }}>
+        <Typography variant="body2" className={classes.marginBottom}>
           Enter the RID (Request ID) from a previously submitted NCBI BLAST
           query. You can find the RID in the BLAST results page URL or at the
           top of the results page. RIDs are typically valid for 24-36 hours
@@ -81,7 +89,7 @@ const NCBIBlastRIDPanel = observer(function ({
           label="BLAST RID"
           placeholder="e.g., ABC12345"
           fullWidth
-          style={{ marginBottom: 16 }}
+          className={classes.marginBottom}
           value={rid}
           onChange={event => {
             setRid(event.target.value)
@@ -89,7 +97,7 @@ const NCBIBlastRIDPanel = observer(function ({
         />
 
         {trimmedRid ? (
-          <Typography variant="body2" style={{ marginBottom: 16 }}>
+          <Typography variant="body2" className={classes.marginBottom}>
             <ExternalLink href={`${baseUrl}?CMD=Get&RID=${trimmedRid}`}>
               View BLAST results on NCBI
             </ExternalLink>
@@ -99,7 +107,7 @@ const NCBIBlastRIDPanel = observer(function ({
         <TextField2
           variant="outlined"
           label="MSA Algorithm"
-          style={style}
+          className={classes.ridField}
           select
           value={selectedMsaAlgorithm}
           onChange={event => {
@@ -122,7 +130,7 @@ const NCBIBlastRIDPanel = observer(function ({
           proteinSequence={proteinSequence}
         />
 
-        <Typography style={{ marginTop: 20 }}>
+        <Typography className={classes.infoText}>
           This will fetch the BLAST results for the provided RID and run them
           through a multiple sequence alignment. The protein sequence from the
           selected transcript will be added as the query sequence in the MSA.
@@ -152,12 +160,11 @@ const NCBIBlastRIDPanel = observer(function ({
                   rid: trimmedRid,
                 },
               })
+              handleClose()
             } catch (e) {
               console.error(e)
               setLaunchViewError(e)
             }
-
-            handleClose()
           }}
           disabled={!proteinSequence || !trimmedRid}
         >

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

@@ -7,10 +7,17 @@ import {
   DialogContent,
   DialogTitle,
 } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 
 import { BASE_BLAST_URL } from './consts'
 import TextField2 from '../../../components/TextField2'
 
+const useStyles = makeStyles()({
+  urlField: {
+    minWidth: 300,
+  },
+})
+
 export default function NCBISettingsDialog({
   handleClose,
   baseUrl,
@@ -18,6 +25,7 @@ export default function NCBISettingsDialog({
   handleClose: (arg?: string) => void
   baseUrl: string
 }) {
+  const { classes } = useStyles()
   const [tempBaseUrl, setTempBaseUrl] = useState(baseUrl)
   return (
     <Dialog
@@ -36,7 +44,7 @@ export default function NCBISettingsDialog({
           fullWidth
           variant="outlined"
           value={tempBaseUrl}
-          style={{ minWidth: '300px' }}
+          className={classes.urlField}
           onChange={e => {
             setTempBaseUrl(e.target.value)
           }}