jbrowse-plugin-msaview 2.10.0 → 2.10.2

package/dist/utils/ebiJobDispatcher.test.js

@@ -32,7 +32,16 @@ describe('waitForEbiJob', () => {
     });
     test('failures that do not persist never accumulate to the limit', async () => {
         const blip = new TypeError('Failed to fetch');
-        statuses([blip, 'RUNNING', blip, 'RUNNING', blip, 'RUNNING', blip, 'FINISHED']);
+        statuses([
+            blip,
+            'RUNNING',
+            blip,
+            'RUNNING',
+            blip,
+            'RUNNING',
+            blip,
+            'FINISHED',
+        ]);
         await expect(wait()).resolves.toBeUndefined();
     });
     test('an endpoint that has genuinely gone away is not polled forever', async () => {

package/dist/utils/ncbiOrthologs.d.ts

@@ -26,7 +26,7 @@ export declare function resolveGeneId(candidates: string[], taxId: number): Prom
  *
  * `taxa` narrows the set when a caller wants specific species; omitted, every
  * species NCBI has an ortholog for is a candidate. `exclude` drops the query
- * taxon, which the QUERY row already represents.
+ * taxon, which already has its own `<species>_query` row.
  */
 export declare function fetchOrthologGenes(geneId: string, { taxa, exclude, limit, }?: {
     taxa?: Set<number>;

package/dist/utils/ncbiOrthologs.js

@@ -85,7 +85,7 @@ export async function resolveGeneId(candidates, taxId) {
  *
  * `taxa` narrows the set when a caller wants specific species; omitted, every
  * species NCBI has an ortholog for is a candidate. `exclude` drops the query
- * taxon, which the QUERY row already represents.
+ * taxon, which already has its own `<species>_query` row.
  */
 export async function fetchOrthologGenes(geneId, { taxa, exclude, limit = defaultMaxSpecies, } = {}) {
     const json = await jsonfetch(ncbiUrl(`${DATASETS}/gene/id/${geneId}/orthologs?returned_content=COMPLETE`));

package/dist/utils/ncbiTaxonomy.d.ts

@@ -9,3 +9,22 @@
  * species silently resolves the wrong organism's gene for anyone outside it.
  */
 export declare function resolveTaxId(query: string): Promise<number | undefined>;
+/**
+ * A JBrowse assembly name -> the species it is an assembly of.
+ *
+ * The dialog's query species used to open on `human` whoever was browsing, and
+ * that is the same silent wrong answer the 23-species list gave: `resolveGeneId`
+ * searches `SYMBOL[Gene Name] AND <taxid>[taxid]`, so a user right-clicking a
+ * mouse gene got the HUMAN gene of that symbol, its orthologs, and mouse twice
+ * — once as the query row and once as an ortholog, because the excluded taxon
+ * was the wrong one. A symbol with no human counterpart failed outright.
+ *
+ * db=assembly indexes the names JBrowse configs actually carry: hg38, GRCh38,
+ * mm39, danRer11, dm6 and sacCer3 all resolve, and so do RefSeq/GenBank
+ * accessions. An assembly NCBI has never heard of resolves to nothing and the
+ * caller keeps its own default, so this can only improve on guessing.
+ */
+export declare function resolveAssemblySpecies(assemblyName: string): Promise<{
+    taxId: number;
+    speciesName: string;
+} | undefined>;

package/dist/utils/ncbiTaxonomy.js

@@ -1,6 +1,15 @@
 import { NCBI_EMAIL, NCBI_TOOL } from './eutils';
 import { jsonfetch } from './fetch';
 const EUTILS = 'https://eutils.ncbi.nlm.nih.gov/entrez/eutils';
+function eutilsUrl(endpoint, params) {
+    const search = new URLSearchParams({
+        ...params,
+        retmode: 'json',
+        tool: NCBI_TOOL,
+        email: NCBI_EMAIL,
+    });
+    return `${EUTILS}/${endpoint}?${search.toString()}`;
+}
 /**
  * Free text -> NCBI taxon id. A bare number is taken as the id itself; anything
  * else is searched against db=taxonomy, which resolves a scientific name
@@ -19,15 +28,39 @@ export async function resolveTaxId(query) {
     if (/^\d+$/.test(term)) {
         return Number(term);
     }
-    const search = new URLSearchParams({
-        db: 'taxonomy',
-        term,
-        retmode: 'json',
-        retmax: '1',
-        tool: NCBI_TOOL,
-        email: NCBI_EMAIL,
-    });
-    const json = await jsonfetch(`${EUTILS}/esearch.fcgi?${search.toString()}`);
+    const json = await jsonfetch(eutilsUrl('esearch.fcgi', { db: 'taxonomy', term, retmax: '1' }));
     const id = json.esearchresult?.idlist?.[0];
     return id ? Number(id) : undefined;
 }
+/**
+ * A JBrowse assembly name -> the species it is an assembly of.
+ *
+ * The dialog's query species used to open on `human` whoever was browsing, and
+ * that is the same silent wrong answer the 23-species list gave: `resolveGeneId`
+ * searches `SYMBOL[Gene Name] AND <taxid>[taxid]`, so a user right-clicking a
+ * mouse gene got the HUMAN gene of that symbol, its orthologs, and mouse twice
+ * — once as the query row and once as an ortholog, because the excluded taxon
+ * was the wrong one. A symbol with no human counterpart failed outright.
+ *
+ * db=assembly indexes the names JBrowse configs actually carry: hg38, GRCh38,
+ * mm39, danRer11, dm6 and sacCer3 all resolve, and so do RefSeq/GenBank
+ * accessions. An assembly NCBI has never heard of resolves to nothing and the
+ * caller keeps its own default, so this can only improve on guessing.
+ */
+export async function resolveAssemblySpecies(assemblyName) {
+    const term = assemblyName.trim();
+    if (!term) {
+        return undefined;
+    }
+    const search = await jsonfetch(eutilsUrl('esearch.fcgi', { db: 'assembly', term, retmax: '1' }));
+    const uid = search.esearchresult?.idlist?.[0];
+    if (!uid) {
+        return undefined;
+    }
+    const summary = await jsonfetch(eutilsUrl('esummary.fcgi', { db: 'assembly', id: uid }));
+    const record = summary.result?.[uid];
+    const taxId = Number(record?.speciestaxid);
+    return record?.speciesname && taxId
+        ? { taxId, speciesName: record.speciesname }
+        : undefined;
+}

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

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

package/dist/utils/ncbiTaxonomy.test.js

@@ -0,0 +1,69 @@
+import { afterEach, describe, expect, test, vi } from 'vitest';
+import { resolveAssemblySpecies, resolveTaxId } from './ncbiTaxonomy';
+const stubFetch = (handler) => {
+    const seen = [];
+    vi.stubGlobal('fetch', (url) => {
+        seen.push(url);
+        return Promise.resolve({
+            ok: true,
+            status: 200,
+            json: () => Promise.resolve(handler(url)),
+        });
+    });
+    return seen;
+};
+afterEach(() => {
+    vi.unstubAllGlobals();
+});
+describe('resolveTaxId', () => {
+    test('takes a bare number as the id and spends no request on it', async () => {
+        const seen = stubFetch(() => ({}));
+        expect(await resolveTaxId(' 9606 ')).toBe(9606);
+        expect(seen).toEqual([]);
+    });
+    test('searches db=taxonomy for anything else', async () => {
+        const seen = stubFetch(() => ({ esearchresult: { idlist: ['7955'] } }));
+        expect(await resolveTaxId('zebrafish')).toBe(7955);
+        expect(seen[0]).toContain('db=taxonomy');
+    });
+    test('an unmatched name resolves to nothing', async () => {
+        stubFetch(() => ({ esearchresult: { idlist: [] } }));
+        expect(await resolveTaxId('not an organism')).toBeUndefined();
+    });
+});
+// The dialog opened on `human` whoever was browsing, which on a mouse assembly
+// resolves the gene symbol to the HUMAN gene and excludes the wrong taxon, so
+// mouse lands twice. db=assembly is where the assembly names JBrowse configs
+// carry are indexed.
+describe('resolveAssemblySpecies', () => {
+    const summaryFor = (speciestaxid, speciesname) => ({
+        result: { uids: ['1'], '1': { speciestaxid, speciesname } },
+    });
+    test('resolves an assembly name to the species it is an assembly of', async () => {
+        const seen = stubFetch(url => url.includes('esearch')
+            ? { esearchresult: { idlist: ['1'] } }
+            : summaryFor('10090', 'Mus musculus'));
+        expect(await resolveAssemblySpecies('mm39')).toEqual({
+            taxId: 10090,
+            speciesName: 'Mus musculus',
+        });
+        expect(seen[0]).toContain('db=assembly');
+        expect(seen[1]).toContain('esummary');
+    });
+    test('an assembly NCBI does not index resolves to nothing, without a summary call', async () => {
+        const seen = stubFetch(() => ({ esearchresult: { idlist: [] } }));
+        expect(await resolveAssemblySpecies('my_custom_asm')).toBeUndefined();
+        expect(seen).toHaveLength(1);
+    });
+    test('a summary carrying no species resolves to nothing rather than taxon NaN', async () => {
+        stubFetch(url => url.includes('esearch')
+            ? { esearchresult: { idlist: ['1'] } }
+            : { result: { uids: ['1'], '1': {} } });
+        expect(await resolveAssemblySpecies('hg38')).toBeUndefined();
+    });
+    test('an empty name asks nothing', async () => {
+        const seen = stubFetch(() => ({}));
+        expect(await resolveAssemblySpecies('  ')).toBeUndefined();
+        expect(seen).toEqual([]);
+    });
+});

package/dist/utils/useFetch.d.ts

@@ -0,0 +1,22 @@
+export type FetchKey = string | readonly unknown[] | null | undefined | false;
+export declare function serializeKey(key: FetchKey): string | null;
+/**
+ * Fetch once per key, keeping loading and error state with the data instead of
+ * spread across three `useState`s and a cancellation flag.
+ *
+ * Everything the caller reads is derived from the one settled result, which is
+ * what keeps the states consistent: while a key change is in flight there is no
+ * frame showing the previous key's data as though it were the new key's. A
+ * `mutate()` refetch under the same key does leave its data up, because it is
+ * the same question asked again and blanking it flashes an empty list.
+ */
+export declare function useFetch<Data>(key: FetchKey, fetcher: () => Promise<Data>, { onSuccess }?: {
+    onSuccess?: (data: Data) => void;
+}): {
+    data: Data | undefined;
+    error: unknown;
+    isLoading: boolean;
+    mutate: () => void;
+};
+/** `value`, but only after it has stopped changing for `ms`. */
+export declare function useDebounced<T>(value: T, ms: number): T;

package/dist/utils/useFetch.js

@@ -0,0 +1,79 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+const isNil = (k) => k === null || k === undefined || k === false;
+// A null result means "don't fetch": no key, or an array key with a missing
+// piece. Note what that makes of a boolean IN a key -- `false` reads as a
+// missing piece and silently disables the fetch, so put a string there.
+export function serializeKey(key) {
+    return isNil(key) || (Array.isArray(key) && key.some(isNil))
+        ? null
+        : JSON.stringify(key);
+}
+/**
+ * Fetch once per key, keeping loading and error state with the data instead of
+ * spread across three `useState`s and a cancellation flag.
+ *
+ * Everything the caller reads is derived from the one settled result, which is
+ * what keeps the states consistent: while a key change is in flight there is no
+ * frame showing the previous key's data as though it were the new key's. A
+ * `mutate()` refetch under the same key does leave its data up, because it is
+ * the same question asked again and blanking it flashes an empty list.
+ */
+export function useFetch(key, fetcher, { onSuccess } = {}) {
+    const serialized = serializeKey(key);
+    const [nonce, setNonce] = useState(0);
+    const [settled, setSettled] = useState();
+    const attempt = serialized === null ? null : `${nonce}\u0000${serialized}`;
+    const current = settled?.attempt === attempt;
+    const answersThisKey = settled?.question === serialized;
+    // The fetcher and the success callback are inline closures at every call site,
+    // so depending on their identity would refetch every render. This effect is
+    // declared before the fetch effect and has no dependency list, so it has
+    // already run with the current render's values by the time that one does.
+    const latest = useRef({ fetcher, onSuccess });
+    useEffect(() => {
+        latest.current = { fetcher, onSuccess };
+    });
+    useEffect(() => {
+        if (attempt === null || serialized === null) {
+            return undefined;
+        }
+        let alive = true;
+        latest.current
+            .fetcher()
+            .then(data => {
+            if (alive) {
+                setSettled({ attempt, question: serialized, data });
+                latest.current.onSuccess?.(data);
+            }
+        })
+            .catch((error) => {
+            if (alive) {
+                setSettled({ attempt, question: serialized, error });
+            }
+        });
+        return () => {
+            alive = false;
+        };
+    }, [attempt, serialized]);
+    return {
+        data: answersThisKey ? settled.data : undefined,
+        error: current ? settled.error : undefined,
+        isLoading: attempt !== null && !current,
+        mutate: useCallback(() => {
+            setNonce(n => n + 1);
+        }, []),
+    };
+}
+/** `value`, but only after it has stopped changing for `ms`. */
+export function useDebounced(value, ms) {
+    const [debounced, setDebounced] = useState(value);
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setDebounced(value);
+        }, ms);
+        return () => {
+            clearTimeout(timer);
+        };
+    }, [value, ms]);
+    return debounced;
+}

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

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

package/dist/utils/useFetch.test.js

@@ -0,0 +1,23 @@
+import { describe, expect, test } from 'vitest';
+import { serializeKey } from './useFetch';
+describe('serializeKey', () => {
+    test('a key identifies the fetch', () => {
+        expect(serializeKey('msa-list')).toBe(serializeKey('msa-list'));
+        expect(serializeKey(['NM_1', 'hg38'])).not.toBe(serializeKey(['NM_1', 'mm39']));
+    });
+    test('no key means do not fetch', () => {
+        expect(serializeKey(null)).toBeNull();
+        expect(serializeKey(undefined)).toBeNull();
+        expect(serializeKey(false)).toBeNull();
+        expect(serializeKey('')).not.toBeNull();
+    });
+    test('an array key with a piece still missing means do not fetch', () => {
+        expect(serializeKey(['NM_1', undefined, 'feature-sequence'])).toBeNull();
+    });
+    // the trap this rule sets: a boolean IN a key reads as a missing piece, so a
+    // `!!selected` where a string belonged disables the fetch and raises nothing
+    test('a boolean in a key disables the fetch', () => {
+        expect(serializeKey(['gene', false])).toBeNull();
+        expect(serializeKey(['gene', true])).not.toBeNull();
+    });
+});

package/dist/version.d.ts

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

package/dist/version.js

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

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.10.0",
+  "version": "2.10.2",
   "license": "MIT",
   "name": "jbrowse-plugin-msaview",
   "repository": {
@@ -19,8 +19,7 @@
     "@emotion/styled": "^11.14.1",
     "@gmod/bgzf-filehandle": "^6.2.0",
     "g2p_mapper": "^2.1.5",
-    "idb": "^8.0.3",
-    "swr": "^2.4.2"
+    "idb": "^8.0.3"
   },
   "devDependencies": {
     "@emotion/react": "^11.14.0",
@@ -41,9 +40,10 @@
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-unicorn": "^72.0.0",
+    "git-cliff": "^2.13.1",
     "mobx": "^6.16.1",
     "mobx-react": "^9.2.2",
-    "msa-parsers": "^5.9.0",
+    "msa-parsers": "^5.10.0",
     "pixelmatch": "^7.2.0",
     "pngjs": "^7.0.0",
     "prettier": "^3.9.6",
@@ -51,7 +51,7 @@
     "puppeteer": "^25.3.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
-    "react-msaview": "^5.9.0",
+    "react-msaview": "^5.10.0",
     "rimraf": "^6.1.3",
     "rxjs": "^7.8.2",
     "serve": "^14.2.6",
@@ -67,6 +67,7 @@
     "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",
+    "check-text-source": "node scripts/check-text-source.mjs",
     "pretest": "rm -rf .test-jbrowse && npx @jbrowse/cli create .test-jbrowse --nightly",
     "test": "vitest run",
     "test:watch": "vitest",
@@ -77,7 +78,7 @@
     "host-compat": "node scripts/host-compat-probe.mjs --bundle dist/jbrowse-plugin-msaview.umd.production.min.js",
     "check-ci": "node scripts/require-green-ci.mjs",
     "preversion": "pnpm check-ci && pnpm lint && pnpm build && pnpm host-compat",
-    "version": "node -e \"console.log('export const version = \\'' + require('./package.json').version + '\\'')\" > src/version.ts && git add src/version.ts",
+    "version": "node -e \"console.log('export const version = \\'' + require('./package.json').version + '\\'')\" > src/version.ts && git-cliff --tag v$npm_package_version --unreleased --prepend CHANGELOG.md && git add src/version.ts CHANGELOG.md",
     "postversion": "git push --follow-tags"
   }
 }

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

@@ -1,10 +1,8 @@
-import useSWR from 'swr'
-
 import {
   deleteCachedResult,
   getAllCachedResults,
 } from '../../../utils/blastCache'
-import { staticSwrConfig } from '../../../utils/swrConfig'
+import { useFetch } from '../../../utils/useFetch'
 
 export function useCachedBlastResults(geneIds: string[]) {
   const {
@@ -12,36 +10,25 @@ export function useCachedBlastResults(geneIds: string[]) {
     error,
     isLoading,
     mutate,
-  } = useSWR(
-    `cached-blast-${geneIds.join(',')}`,
-    async () => {
-      const cached = await getAllCachedResults()
-      return cached.filter(r => r.geneId && geneIds.includes(r.geneId))
-    },
-    staticSwrConfig,
-  )
-
-  const handleDelete = async (id: string) => {
-    await deleteCachedResult(id)
-    await mutate(
-      results => results?.filter(result => result.id !== id) ?? [],
-      false,
-    )
-  }
-
-  // deletes only what this hook listed, i.e. the results for these gene ids.
-  // The list the user is looking at is gene-scoped, so a store-wide clear here
-  // would silently throw away every other gene's cached alignments too
-  const handleClearAll = async () => {
-    await Promise.all((results ?? []).map(r => deleteCachedResult(r.id)))
-    await mutate([], false)
-  }
+  } = useFetch(`cached-blast-${geneIds.join(',')}`, async () => {
+    const cached = await getAllCachedResults()
+    return cached.filter(r => r.geneId && geneIds.includes(r.geneId))
+  })
 
   return {
     results: results ?? [],
     error,
     isLoading,
-    handleDelete,
-    handleClearAll,
+    handleDelete: async (id: string) => {
+      await deleteCachedResult(id)
+      mutate()
+    },
+    // deletes only what this hook listed, i.e. the results for these gene ids.
+    // The list the user is looking at is gene-scoped, so a store-wide clear here
+    // would silently throw away every other gene's cached alignments too
+    handleClearAll: async () => {
+      await Promise.all((results ?? []).map(r => deleteCachedResult(r.id)))
+      mutate()
+    },
   }
 }

package/src/LaunchMsaView/components/OrthologQuery/OrthologPanel.tsx

@@ -73,6 +73,7 @@ const OrthologPanel = observer(function ({
           <QuerySpeciesSelect
             className={classes.selectField}
             value={taxId}
+            assemblyName={view.assemblyNames[0]}
             onChange={setTaxId}
           />
 

package/src/LaunchMsaView/components/OrthologQuery/QuerySpeciesSelect.tsx

@@ -1,8 +1,24 @@
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 
 import TextField2 from '../../../components/TextField2'
-import { resolveTaxId } from '../../../utils/ncbiTaxonomy'
+import {
+  resolveAssemblySpecies,
+  resolveTaxId,
+} from '../../../utils/ncbiTaxonomy'
 import { fetchTaxonomyInfo } from '../../../utils/taxonomyNames'
+import { useDebounced, useFetch } from '../../../utils/useFetch'
+
+async function describeTaxon(query: string) {
+  const taxId = await resolveTaxId(query)
+  if (!taxId) {
+    throw new Error(`No NCBI taxon matches "${query}"`)
+  }
+  const info = (await fetchTaxonomyInfo([taxId])).get(taxId)
+  const label = [info?.sciname, info?.commonName && `(${info.commonName})`]
+    .filter(Boolean)
+    .join(' ')
+  return { taxId, label: label || `taxon ${taxId}` }
+}
 
 /**
  * The species the query gene came from, as free text resolved against NCBI's
@@ -15,62 +31,60 @@ import { fetchTaxonomyInfo } from '../../../utils/taxonomyNames'
  */
 export default function QuerySpeciesSelect({
   value,
+  assemblyName,
   onChange,
   className,
 }: {
   value: number
+  assemblyName?: string
   onChange: (taxId: number) => void
   className?: string
 }) {
-  const [text, setText] = useState('human')
-  const [resolved, setResolved] = useState<string>()
-  const [error, setError] = useState<unknown>()
+  // undefined until the user types, which is what makes the two lookups
+  // exclusive rather than both firing on open
+  const [typed, setTyped] = useState<string>()
+  const debounced = useDebounced(typed, 400)
 
-  useEffect(() => {
-    // read through a call rather than as a property: the cleanup writes it from
-    // another turn of the loop, and a bare `run.live` narrows to true after the
-    // first check, which reads to the compiler as a redundant second one
-    const run = { live: true }
-    const cancelled = () => !run.live
-    async function lookup() {
-      try {
-        setError(undefined)
-        const taxId = await resolveTaxId(text)
-        if (cancelled()) {
-          return
-        }
-        if (!taxId) {
-          setResolved(undefined)
-          setError(new Error(`No NCBI taxon matches "${text}"`))
-          return
+  // Opening on `human` for everyone is the same silent wrong answer the fixed
+  // species list gave: on a mouse assembly the gene symbol resolves to the HUMAN
+  // gene, and the excluded taxon is human too, so mouse appears twice. The
+  // assembly being browsed is the one thing here that already knows the answer.
+  //
+  // db=assembly already returns the taxon id, so this is the whole lookup — the
+  // taxonomy chain below would be two more requests for an answer we hold. That
+  // is not just waste: eutils allows 3 requests a second and throttles by
+  // answering without CORS headers, so all four fired on open and the browser
+  // reported the throttle as "blocked by CORS policy" in the helper text.
+  const { data: fromAssembly } = useFetch(
+    assemblyName && typed === undefined
+      ? [assemblyName, 'assembly-species']
+      : null,
+    () => resolveAssemblySpecies(assemblyName!),
+    {
+      onSuccess: found => {
+        if (found) {
+          onChange(found.taxId)
         }
-        const info = (await fetchTaxonomyInfo([taxId])).get(taxId)
-        if (cancelled()) {
-          return
-        }
-        setResolved(
-          [info?.sciname, info?.commonName && `(${info.commonName})`]
-            .filter(Boolean)
-            .join(' ') || `taxon ${taxId}`,
-        )
+      },
+    },
+  )
+
+  const { data: fromText, error } = useFetch(
+    debounced?.trim() ? [debounced.trim(), 'taxon'] : null,
+    () => describeTaxon(debounced!),
+    {
+      onSuccess: ({ taxId }) => {
         onChange(taxId)
-      } catch (e) {
-        if (!cancelled()) {
-          setError(e)
-        }
-      }
-    }
-    const timer = setTimeout(() => {
-      void lookup()
-    }, 400)
-    return () => {
-      run.live = false
-      clearTimeout(timer)
-    }
-    // onChange is a setState updater from the parent and stable in practice;
-    // including it would re-run the lookup on every parent render
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [text])
+      },
+    },
+  )
+
+  // derived, not seeded through an effect: whatever the user typed wins, and
+  // until they type anything the assembly's species does, so a lookup that
+  // lands while they are mid-word cannot overwrite the field
+  const text = typed ?? fromAssembly?.speciesName ?? 'human'
+  const resolved =
+    typed === undefined ? fromAssembly?.speciesName : fromText?.label
 
   return (
     <TextField2
@@ -79,7 +93,7 @@ export default function QuerySpeciesSelect({
       className={className}
       value={text}
       onChange={event => {
-        setText(event.target.value)
+        setTyped(event.target.value)
       }}
       error={!!error}
       helperText={

package/src/LaunchMsaView/components/PreLoadedMSA/PreLoadedMSADataPanel.tsx

@@ -4,11 +4,10 @@ import { LoadingEllipses, SanitizedHTML } from '@jbrowse/core/ui'
 import { getEnv, getSession } from '@jbrowse/core/util'
 import { MenuItem } from '@mui/material'
 import { observer } from 'mobx-react'
-import useSWR from 'swr'
 import { makeStyles } from 'tss-react/mui'
 
 import TextField2 from '../../../components/TextField2'
-import { staticSwrConfig } from '../../../utils/swrConfig'
+import { useFetch } from '../../../utils/useFetch'
 import { getGeneDisplayName, getLinearGenomeView } from '../../util'
 import LaunchPanelContent from '../LaunchPanelContent'
 import SubmitCancelActions from '../SubmitCancelActions'
@@ -51,10 +50,9 @@ const PreLoadedMSA = observer(function ({
     data: msaList,
     isLoading: msaListLoading,
     error: msaListFetchError,
-  } = useSWR(
+  } = useFetch(
     selectedDataset ? `${selectedDataset.datasetId}-msa-list` : null,
     () => fetchMSAList({ config: selectedDataset!.adapter, pluginManager }),
-    staticSwrConfig,
   )
 
   const transcriptSelection = useTranscriptSelection({
@@ -68,7 +66,7 @@ const PreLoadedMSA = observer(function ({
     data: msaData,
     isLoading: msaDataLoading,
     error: msaDataFetchError,
-  } = useSWR(
+  } = useFetch(
     selectedId && selectedDataset && msaList
       ? `${selectedDataset.datasetId}-${selectedId}-msa`
       : null,
@@ -78,7 +76,6 @@ const PreLoadedMSA = observer(function ({
         config: selectedDataset!.adapter,
         pluginManager,
       }),
-    staticSwrConfig,
   )
 
   const e =