jbrowse-plugin-msaview 3.4.0 → 3.4.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.4.0",
+  "version": "3.4.1",
   "license": "MIT",
   "name": "jbrowse-plugin-msaview",
   "repository": {
@@ -28,41 +28,41 @@
     "@jbrowse/core": "^4.3.0",
     "@jbrowse/mobx-state-tree": "^5.13.0",
     "@jbrowse/plugin-linear-genome-view": "^4.3.0",
-    "@mui/icons-material": "^9.3.1",
-    "@mui/material": "^9.3.1",
-    "@mui/system": "^9.3.0",
+    "@mui/icons-material": "^9.4.0",
+    "@mui/material": "^9.4.0",
+    "@mui/system": "^9.4.0",
     "@mui/x-data-grid": "^9.12.0",
     "@testing-library/dom": "^10.4.1",
-    "@testing-library/react": "^16.3.2",
-    "@types/node": "^26.3.0",
+    "@testing-library/react": "^16.3.3",
+    "@types/node": "^26.4.1",
     "@types/react": "^19.2.18",
     "esbuild": "^0.28.2",
     "eslint": "^10.9.1",
     "eslint-plugin-import-x": "^4.17.1",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.1.1",
-    "eslint-plugin-unicorn": "^73.0.0",
+    "eslint-plugin-unicorn": "^74.0.0",
     "git-cliff": "^2.13.1",
     "jsdom": "^30.0.1",
     "mobx": "^6.16.1",
     "mobx-react": "^9.2.2",
-    "msa-parsers": "^6.1.0",
+    "msa-parsers": "^6.4.2",
     "oxfmt": "^0.65.0",
-    "oxlint": "^1.80.0",
+    "oxlint": "^1.81.0",
     "oxlint-tsgolint": "^7.0.2001",
     "pixelmatch": "^7.2.0",
     "pngjs": "^7.0.0",
-    "pretty-bytes": "^7.1.1",
-    "puppeteer": "^25.8.0",
+    "pretty-bytes": "^7.1.2",
+    "puppeteer": "^25.9.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
-    "react-msaview": "^6.1.0",
+    "react-msaview": "^6.4.2",
     "rimraf": "^6.1.3",
     "rxjs": "^7.8.2",
     "serve": "^14.2.6",
     "tss-react": "^4.9.21",
-    "typescript": "^6.0.2",
-    "typescript-eslint": "^8.68.0",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.69.0",
     "vitest": "^4.1.11"
   },
   "scripts": {

package/src/LaunchMsaView/components/BlastQuery/BlastAutomaticPanel.tsx

@@ -24,15 +24,14 @@ import { useTranscriptSelection } from '../useTranscriptSelection'
 import CachedBlastResults from './CachedBlastResults'
 import MsaAlgorithmSelect from './MsaAlgorithmSelect'
 import { blastLaunchView } from './blastLaunchView'
+import { databaseOptionsFor, defaultSearchFor, searchPrograms } from './consts'
 import {
-  databaseOptionsFor,
-  defaultBlastDatabase,
-  defaultSearchFor,
-  searchPrograms,
-} from './consts'
+  useStoredMsaAlgorithm,
+  useStoredSearchChoice,
+} from './searchChoiceStorage'
 import { useCachedBlastResults } from './useCachedBlastResults'
 
-import type { MsaAlgorithm, SearchChoice, SearchProgram } from './consts'
+import type { SearchChoice, SearchProgram } from './consts'
 import type { AbstractTrackModel, Feature } from '@jbrowse/core/util'
 
 const useStyles = makeStyles()({
@@ -70,12 +69,9 @@ const BlastAutomaticPanel = observer(function ({
   // one piece of state, not two: a program and a database that program does not
   // have is a 400 from EBI minutes after Submit, and holding them apart is what
   // would let them drift into that
-  const [search, setSearch] = useState<SearchChoice>({
-    program: 'blastp',
-    database: defaultBlastDatabase,
-  })
+  const [search, setSearch] = useStoredSearchChoice()
   const [selectedMsaAlgorithm, setSelectedMsaAlgorithm] =
-    useState<MsaAlgorithm>('clustalo')
+    useStoredMsaAlgorithm()
   const isPhmmer = search.program === 'phmmer'
 
   const geneIds = useMemo(() => getGeneIdentifiers(feature), [feature])

package/src/LaunchMsaView/components/BlastQuery/searchChoiceStorage.test.ts

@@ -0,0 +1,43 @@
+import { expect, test } from 'vitest'
+
+import { validMsaAlgorithm, validSearchChoice } from './searchChoiceStorage'
+
+test('a stored pair both services recognise comes back as it went in', () => {
+  expect(
+    validSearchChoice({ program: 'phmmer', database: 'swissprot' }),
+  ).toEqual({
+    program: 'phmmer',
+    database: 'swissprot',
+  })
+})
+
+test('a database the stored program does not have falls back to the defaults', () => {
+  // uniprotkb_swissprot is blastp's name for it; sending it to phmmer is a 400
+  // from EBI minutes after Submit
+  expect(
+    validSearchChoice({ program: 'phmmer', database: 'uniprotkb_swissprot' }),
+  ).toEqual({ program: 'blastp', database: 'uniprotkb_swissprot' })
+  // uniprotkb_reference_proteomes shipped as a menu entry EBI rejects, and 3.0.0
+  // is old enough that someone's storage still holds it
+  expect(
+    validSearchChoice({
+      program: 'blastp',
+      database: 'uniprotkb_reference_proteomes',
+    }),
+  ).toEqual({ program: 'blastp', database: 'uniprotkb_swissprot' })
+})
+
+test('storage holding something else entirely falls back rather than throwing', () => {
+  for (const stored of [null, undefined, 'blastp', 42, {}, []]) {
+    expect(validSearchChoice(stored)).toEqual({
+      program: 'blastp',
+      database: 'uniprotkb_swissprot',
+    })
+  }
+})
+
+test('an unknown algorithm falls back to clustalo', () => {
+  expect(validMsaAlgorithm('mafft')).toBe('mafft')
+  expect(validMsaAlgorithm('t_coffee')).toBe('clustalo')
+  expect(validMsaAlgorithm(null)).toBe('clustalo')
+})

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

@@ -0,0 +1,64 @@
+import { useLocalStorage } from '../../../utils/useLocalStorage'
+import {
+  databaseOptionsFor,
+  defaultSearchFor,
+  msaAlgorithms,
+  searchPrograms,
+} from './consts'
+
+import type { MsaAlgorithm, SearchChoice } from './consts'
+
+// The panel reopens on the last search run rather than on the defaults, the way
+// the Orthologs tab remembers its source.
+//
+// The program and its database stay ONE stored value for the reason consts.ts
+// keeps them one state: neither service knows the other's database names. What
+// comes back is checked against the current options before it is used — an
+// option this plugin has since dropped would otherwise reach EBI and come back
+// a 400, minutes after the user pressed Submit.
+export const SEARCH_CHOICE_STORAGE_KEY = 'msaView-blastSearch'
+export const MSA_ALGORITHM_STORAGE_KEY = 'msaView-msaAlgorithm'
+
+const defaultSearch = defaultSearchFor('blastp')
+const defaultMsaAlgorithm: MsaAlgorithm = 'clustalo'
+
+export function validSearchChoice(stored: unknown): SearchChoice {
+  const { program, database } = (stored ?? {}) as {
+    program?: string
+    database?: string
+  }
+  const known = searchPrograms.find(p => p === program)
+  return known && databaseOptionsFor(known).some(d => d === database)
+    ? ({ program: known, database } as SearchChoice)
+    : defaultSearch
+}
+
+export function validMsaAlgorithm(stored: unknown): MsaAlgorithm {
+  return msaAlgorithms.find(a => a === stored) ?? defaultMsaAlgorithm
+}
+
+export function useStoredSearchChoice() {
+  const [stored, setStored] = useLocalStorage<unknown>(
+    SEARCH_CHOICE_STORAGE_KEY,
+    defaultSearch,
+  )
+  return [
+    validSearchChoice(stored),
+    (choice: SearchChoice) => {
+      setStored(choice)
+    },
+  ] as const
+}
+
+export function useStoredMsaAlgorithm() {
+  const [stored, setStored] = useLocalStorage<unknown>(
+    MSA_ALGORITHM_STORAGE_KEY,
+    defaultMsaAlgorithm,
+  )
+  return [
+    validMsaAlgorithm(stored),
+    (algorithm: MsaAlgorithm) => {
+      setStored(algorithm)
+    },
+  ] as const
+}

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

@@ -14,6 +14,7 @@ import {
   getTranscriptDisplayName,
 } from '../../util'
 import MsaAlgorithmSelect from '../BlastQuery/MsaAlgorithmSelect'
+import { useStoredMsaAlgorithm } from '../BlastQuery/searchChoiceStorage'
 import LaunchPanelContent from '../LaunchPanelContent'
 import SubmitCancelActions from '../SubmitCancelActions'
 import TranscriptSelector from '../TranscriptSelector'
@@ -25,7 +26,6 @@ import QuerySpeciesSelect from './QuerySpeciesSelect'
 import { orthologLaunchView } from './orthologLaunchView'
 
 import type { OrthologSource } from '../../../MsaViewPanel/model'
-import type { MsaAlgorithm } from '../BlastQuery/consts'
 import type { AbstractTrackModel, Feature } from '@jbrowse/core/util'
 
 const useStyles = makeStyles()({
@@ -51,7 +51,7 @@ const OrthologPanel = observer(function ({
     ORTHOLOG_SOURCE_STORAGE_KEY,
     'ncbi',
   )
-  const [msaAlgorithm, setMsaAlgorithm] = useState<MsaAlgorithm>('clustalo')
+  const [msaAlgorithm, setMsaAlgorithm] = useStoredMsaAlgorithm()
   const [maxSpecies, setMaxSpecies] = useState(String(defaultMaxSpecies))
 
   const geneCandidates = useMemo(() => getGeneIdentifiers(feature), [feature])

package/src/LaunchMsaViewExtensionPoint/index.test.ts

@@ -0,0 +1,51 @@
+import { expect, test } from 'vitest'
+
+import LaunchMsaViewExtensionPointF from './index'
+
+import type PluginManager from '@jbrowse/core/PluginManager'
+import type { AbstractSessionModel } from '@jbrowse/core/util'
+
+function launch(args: Record<string, unknown>) {
+  let run: ((args: unknown) => unknown) | undefined
+  LaunchMsaViewExtensionPointF({
+    addToExtensionPoint(_name: string, cb: (args: unknown) => unknown) {
+      run = cb
+    },
+  } as unknown as PluginManager)
+  const added: Record<string, unknown>[] = []
+  const session = {
+    addView(_type: string, snapshot: Record<string, unknown>) {
+      added.push(snapshot)
+      return { id: 'view-1' }
+    },
+  } as unknown as AbstractSessionModel
+  run!({ session, ...args })
+  return added[0]!
+}
+
+test('inline data carries no init, which the panel would read as a launch in flight', () => {
+  const snapshot = launch({ data: { msa: '>a\nMEEP' } })
+  expect('init' in snapshot).toBe(false)
+})
+
+test('a file location travels through init', () => {
+  const snapshot = launch({
+    msaFileLocation: { uri: 'http://example.com/a.fa' },
+  })
+  expect(snapshot.init).toEqual({
+    msaUrl: 'http://example.com/a.fa',
+    msaIndexedLocation: undefined,
+    msaName: undefined,
+    querySeqName: undefined,
+  })
+})
+
+test('one field set is enough to need init', () => {
+  const snapshot = launch({ data: { msa: '>a\nMEEP' }, querySeqName: 'QUERY' })
+  expect(snapshot.init).toEqual({
+    msaUrl: undefined,
+    msaIndexedLocation: undefined,
+    msaName: undefined,
+    querySeqName: 'QUERY',
+  })
+})

package/src/LaunchMsaViewExtensionPoint/index.ts

@@ -4,6 +4,7 @@ import type { OrthologParams } from '../MsaViewPanel/model'
 import type { MsaViewPlacement } from '../utils/workspaces'
 import type PluginManager from '@jbrowse/core/PluginManager'
 import type { AbstractSessionModel } from '@jbrowse/core/util'
+import type { ColumnTrackSpec, Highlight } from 'react-msaview'
 
 interface LaunchMsaViewArgs {
   session: AbstractSessionModel
@@ -25,6 +26,15 @@ interface LaunchMsaViewArgs {
   showBranchLen?: boolean
   querySeqName?: string
   highlightColumns?: number[]
+  /**
+   * Labeled highlights in 1-based inclusive coordinates: `{row, start, end}`
+   * for residues of that row, `{start, end}` for alignment columns, `{rows}`
+   * for whole rows. Prefer this over `highlightColumns`: a residue range stays
+   * put when `allowedGappyness` changes the visible columns.
+   */
+  highlights?: Highlight[]
+  /** per-column tracks supplied as data, see react-msaview's docs/layers.md */
+  columnTracks?: ColumnTrackSpec[]
   /**
    * Build the alignment from NCBI orthologs at launch time instead of naming a
    * file: `{ taxId, geneCandidates }` is enough, and `taxa` and
@@ -96,6 +106,16 @@ export default function LaunchMsaViewExtensionPointF(
       // directly, and so is orthologParams (the model's own autorun picks it up).
       // Only sources needing launch-time resolution go through `init`: msaUrl
       // (AlphaFold sniff) and the name-indexed bgzip block (no native loader).
+      //
+      // An init whose every field is undefined is still a truthy object, and
+      // MsaViewPanel reads any init as a launch in flight, so an inline-data
+      // launch flashed "Loading alignment" until processInit cleared it.
+      const init = {
+        msaUrl: msaFileLocation?.uri,
+        msaIndexedLocation,
+        msaName,
+        querySeqName,
+      }
       launchMsaView(session, {
         ...rest,
         data,
@@ -107,12 +127,7 @@ export default function LaunchMsaViewExtensionPointF(
               },
             }
           : {}),
-        init: {
-          msaUrl: msaFileLocation?.uri,
-          msaIndexedLocation,
-          msaName,
-          querySeqName,
-        },
+        ...(Object.values(init).some(v => v !== undefined) ? { init } : {}),
       })
 
       return args

package/src/MsaViewPanel/afterCreateAutoruns.ts

@@ -1,4 +1,5 @@
 import { getSession } from '@jbrowse/core/util'
+import { transaction } from 'mobx'
 
 import { doLaunchBlast } from './doLaunchBlast'
 import { doLaunchOrthologs } from './doLaunchOrthologs'
@@ -11,10 +12,15 @@ import {
   retrieveMsaData,
   storeMsaData,
 } from './msaDataStore'
+import { runLaunch } from './runLaunch'
 import { getProteinViews } from './structureConnection'
 import { getUniprotIdFromAlphaFoldUrl, hasQueryRow } from './util'
 
 import type { JBrowsePluginMsaViewModel } from './model'
+import type { MsaDataPayload } from './msaDataStore'
+
+const EXPIRED_MESSAGE =
+  "This view's alignment is no longer in browser storage. Stored alignments are kept for 7 days after they were last used, and are lost when site data is cleared. Relaunch the alignment to rebuild it."
 
 export function loadStoredData(self: JBrowsePluginMsaViewModel) {
   const { dataStoreId, rows } = self
@@ -24,15 +30,27 @@ export function loadStoredData(self: JBrowsePluginMsaViewModel) {
         self.setLoadingStoredData(true)
         const storedData = await retrieveMsaData(dataStoreId)
         if (storedData) {
-          if (storedData.msa) {
-            self.setMSA(storedData.msa)
-          }
-          if (storedData.tree) {
-            self.setTree(storedData.tree)
-          }
-          if (storedData.treeMetadata) {
-            self.setTreeMetadata(storedData.treeMetadata)
-          }
+          // one transaction, so storeDataToIndexedDB sees the restored data and
+          // the record of it together and does not write it straight back
+          transaction(() => {
+            if (storedData.msa) {
+              self.setMSA(storedData.msa)
+            }
+            if (storedData.tree) {
+              self.setTree(storedData.tree)
+            }
+            if (storedData.treeMetadata) {
+              self.setTreeMetadata(storedData.treeMetadata)
+            }
+            self.setLastStoredData(currentData(self))
+          })
+        } else {
+          // the id names nothing, so clearing it is what lets react-msaview's
+          // "Return to import form" actually return instead of landing back here
+          transaction(() => {
+            self.setDataStoreId(undefined)
+            self.setError(new Error(EXPIRED_MESSAGE))
+          })
         }
       } catch (e) {
         console.error('Failed to load MSA data from IndexedDB:', e)
@@ -43,40 +61,68 @@ export function loadStoredData(self: JBrowsePluginMsaViewModel) {
   }
 }
 
-export function storeDataToIndexedDB(self: JBrowsePluginMsaViewModel) {
-  const { rows, dataStoreId, isStoringData } = self
-  if (rows.length > 0 && !dataStoreId && !isStoringData) {
-    if (self.msaFilehandle || self.treeFilehandle) {
-      return
-    }
+function currentData(self: JBrowsePluginMsaViewModel): MsaDataPayload {
+  const { msa, tree, treeMetadata } = self.data
+  return { msa, tree, treeMetadata }
+}
 
-    const msaData = self.data.msa
-    const treeData = self.data.tree
+function sameData(a: MsaDataPayload | undefined, b: MsaDataPayload) {
+  return (
+    !!a &&
+    a.msa === b.msa &&
+    a.tree === b.tree &&
+    a.treeMetadata === b.treeMetadata
+  )
+}
 
-    if (msaData || treeData) {
-      // mark as storing synchronously so re-runs of this autorun (e.g. when
-      // data observables change while the write is pending) don't kick off a
-      // duplicate write and leave an orphan IndexedDB entry
-      self.setIsStoringData(true)
-      void (async () => {
-        try {
-          const newId = generateDataStoreId()
-          const success = await storeMsaData(newId, {
-            msa: msaData,
-            tree: treeData,
-            treeMetadata: self.data.treeMetadata,
-          })
-          if (success) {
-            self.setDataStoreId(newId)
-          }
-        } catch (e) {
-          console.error('Failed to store MSA data to IndexedDB:', e)
-        } finally {
-          self.setIsStoringData(false)
-        }
-      })()
-    }
+/**
+ * Keep IndexedDB holding what the view holds. The first run writes a new row and
+ * records its id in the session snapshot; later runs update that row, because
+ * the alignment keeps changing after it arrives — react-msaview's
+ * "calculate neighbor-joining tree" replaces `data.tree` — and a session
+ * reopened against a stale row restores the wrong picture.
+ *
+ * `lastStoredData` is what makes that safe to run on every data change: it is
+ * the only thing separating "this is new" from "this is what we just wrote", and
+ * it is recorded whether or not the write succeeded, so a browser refusing
+ * IndexedDB (private mode) fails once rather than in a loop.
+ *
+ * A view whose data comes from a filehandle stores nothing at all: the file is
+ * the source of truth and react-msaview refetches it at startup.
+ */
+export function storeDataToIndexedDB(self: JBrowsePluginMsaViewModel) {
+  const { rows, dataStoreId, isStoringData, lastStoredData } = self
+  const data = currentData(self)
+  if (
+    rows.length === 0 ||
+    isStoringData ||
+    self.msaFilehandle ||
+    self.treeFilehandle ||
+    !(data.msa || data.tree) ||
+    sameData(lastStoredData, data)
+  ) {
+    return
   }
+
+  // mark as storing synchronously so re-runs of this autorun (e.g. when data
+  // observables change while the write is pending) don't kick off a duplicate
+  // write and leave an orphan IndexedDB entry
+  self.setIsStoringData(true)
+  void (async () => {
+    try {
+      const id = dataStoreId ?? generateDataStoreId()
+      if (await storeMsaData(id, data)) {
+        self.setDataStoreId(id)
+      }
+    } catch (e) {
+      console.error('Failed to store MSA data to IndexedDB:', e)
+    } finally {
+      transaction(() => {
+        self.setLastStoredData(data)
+        self.setIsStoringData(false)
+      })
+    }
+  })()
 }
 
 /**
@@ -88,39 +134,27 @@ export function storeDataToIndexedDB(self: JBrowsePluginMsaViewModel) {
  */
 export function launchOrthologsIfNeeded(self: JBrowsePluginMsaViewModel) {
   if (self.orthologParams) {
-    void (async () => {
-      try {
-        self.setProgress('Resolving orthologs')
-        self.setError(undefined)
-        const data = await doLaunchOrthologs({ self })
-        self.setData(data)
+    runLaunch({
+      self,
+      message: 'Resolving orthologs',
+      launch: scope => doLaunchOrthologs({ self, scope }),
+      onLaunched: () => {
         self.setOrthologParams(undefined)
-      } catch (e) {
-        self.setError(e)
-        console.error(e)
-      } finally {
-        self.setProgress('')
-      }
-    })()
+      },
+    })
   }
 }
 
 export function launchBlastIfNeeded(self: JBrowsePluginMsaViewModel) {
   if (self.blastParams) {
-    void (async () => {
-      try {
-        self.setProgress('Submitting query')
-        self.setError(undefined)
-        const data = await doLaunchBlast({ self })
-        self.setData(data)
+    runLaunch({
+      self,
+      message: 'Submitting query',
+      launch: scope => doLaunchBlast({ self, scope }),
+      onLaunched: () => {
         self.setBlastParams(undefined)
-      } catch (e) {
-        self.setError(e)
-        console.error(e)
-      } finally {
-        self.setProgress('')
-      }
-    })()
+      },
+    })
   }
 }
 

package/src/MsaViewPanel/components/LaunchProgress.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import { ErrorMessage, LoadingEllipses } from '@jbrowse/core/ui'
-import { Typography } from '@mui/material'
+import { Button, Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
@@ -13,6 +13,11 @@ const useStyles = makeStyles()({
   margin: {
     padding: 20,
   },
+  progressRow: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 12,
+  },
 })
 
 /**
@@ -52,7 +57,20 @@ const LaunchProgress = observer(function LaunchProgress2({
         <>
           <LoadingEllipses message={message} variant="h5" />
           {rid ? <JobLink jobId={rid} /> : null}
-          <Typography>{progress || 'Initializing'}</Typography>
+          <div className={classes.progressRow}>
+            <Typography>{progress || 'Initializing'}</Typography>
+            {/* stops the polling and returns to the import form; the EBI job
+                itself runs on regardless, which is what its JobLink is for */}
+            <Button
+              variant="outlined"
+              size="small"
+              onClick={() => {
+                model.cancelLaunch()
+              }}
+            >
+              Cancel
+            </Button>
+          </div>
         </>
       )}
     </div>

package/src/MsaViewPanel/components/MsaViewPanel.test.tsx

@@ -70,6 +70,27 @@ test('a failed init shows why', () => {
   expect(screen.getByText(/No alignment named ENST00000288602/)).toBeTruthy()
 })
 
+// a launch runs for 10+ minutes, so leaving with no way out means watching it
+test('a running launch offers a way out, and a failed one does not', () => {
+  const cancelLaunch = vi.fn()
+  panel({
+    blastParams: { proteinSequence: 'MKV' } as never,
+    progress: 'Re-checking BLAST status in... 7',
+    cancelLaunch,
+  })
+  screen.getByRole('button', { name: 'Cancel' }).click()
+  expect(cancelLaunch).toHaveBeenCalled()
+
+  cleanup()
+  panel({
+    blastParams: { proteinSequence: 'MKV' } as never,
+    progress: '',
+    error: new Error('No hits found'),
+    cancelLaunch,
+  })
+  expect(screen.queryByRole('button', { name: 'Cancel' })).toBeNull()
+})
+
 test('a running job links out to it', () => {
   panel({
     blastParams: { proteinSequence: 'MKV' } as never,